From 1a261782c75dc87bb90d2532470cfa9251e174a4 Mon Sep 17 00:00:00 2001 From: nixocio Date: Wed, 15 Apr 2020 08:49:27 -0400 Subject: [PATCH] Fix Page Size toggle does not persist after a search Fix Page Size toggle does not persist after a search. Also, add unit-tests related to `onSearch`,`clearAllFilters` and `onRemove`. closes:https://github.com/ansible/awx/issues/6244 --- .../src/components/ListHeader/ListHeader.jsx | 8 ++- .../components/ListHeader/ListHeader.test.jsx | 65 +++++++++++++++++++ 2 files changed, 72 insertions(+), 1 deletion(-) diff --git a/awx/ui_next/src/components/ListHeader/ListHeader.jsx b/awx/ui_next/src/components/ListHeader/ListHeader.jsx index 3eb82cbedf..5575caf351 100644 --- a/awx/ui_next/src/components/ListHeader/ListHeader.jsx +++ b/awx/ui_next/src/components/ListHeader/ListHeader.jsx @@ -65,7 +65,13 @@ class ListHeader extends React.Component { } handleRemoveAll() { - this.pushHistoryState(null); + // remove everything in oldParams except for page_size and order_by + const { location, qsConfig } = this.props; + const oldParams = parseQueryString(qsConfig, location.search); + const oldParamsClone = { ...oldParams }; + delete oldParamsClone.page_size; + delete oldParamsClone.order_by; + this.pushHistoryState(removeParams(qsConfig, oldParams, oldParamsClone)); } handleSort(key, order) { diff --git a/awx/ui_next/src/components/ListHeader/ListHeader.test.jsx b/awx/ui_next/src/components/ListHeader/ListHeader.test.jsx index 3392bea65e..dc45932333 100644 --- a/awx/ui_next/src/components/ListHeader/ListHeader.test.jsx +++ b/awx/ui_next/src/components/ListHeader/ListHeader.test.jsx @@ -46,4 +46,69 @@ describe('ListHeader', () => { // since order_by = name is the default, that should be strip out of the search expect(history.location.search).toEqual(''); }); + + test('should test clear all', () => { + const query = '?item.page_size=5&item.name=foo'; + const history = createMemoryHistory({ + initialEntries: [`/organizations/1/teams${query}`], + }); + const wrapper = mountWithContexts( + , + { context: { router: { history } } } + ); + + expect(history.location.search).toEqual(query); + const toolbar = wrapper.find('DataListToolbar'); + toolbar.prop('clearAllFilters')(); + expect(history.location.search).toEqual('?item.page_size=5'); + }); + + test('should test handle search', () => { + const query = '?item.page_size=10'; + const history = createMemoryHistory({ + initialEntries: [`/organizations/1/teams${query}`], + }); + const wrapper = mountWithContexts( + , + { context: { router: { history } } } + ); + + expect(history.location.search).toEqual(query); + const toolbar = wrapper.find('DataListToolbar'); + toolbar.prop('onSearch')('name__icontains', 'foo'); + expect(history.location.search).toEqual( + '?item.name__icontains=foo&item.page_size=10' + ); + }); + + test('should test handle remove', () => { + const query = '?item.name__icontains=foo&item.page_size=10'; + const history = createMemoryHistory({ + initialEntries: [`/organizations/1/teams${query}`], + }); + const wrapper = mountWithContexts( + , + { context: { router: { history } } } + ); + + expect(history.location.search).toEqual(query); + const toolbar = wrapper.find('DataListToolbar'); + toolbar.prop('onRemove')('name__icontains', 'foo'); + expect(history.location.search).toEqual('?item.page_size=10'); + }); });