Merge pull request #6723 from nixocio/ui_issue_6244

Fix Page Size toggle does not persist after a search

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

2 files changed, 72 insertions, 1 deletions

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(
+      <ListHeader
+        itemCount={7}
+        qsConfig={qsConfig}
+        searchColumns={[{ name: 'foo', key: 'foo', isDefault: true }]}
+        sortColumns={[{ name: 'foo', key: 'foo' }]}
+      />,
+      { 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(
+      <ListHeader
+        itemCount={7}
+        qsConfig={qsConfig}
+        searchColumns={[{ name: 'foo', key: 'foo', isDefault: true }]}
+        sortColumns={[{ name: 'foo', key: 'foo' }]}
+      />,
+      { 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(
+      <ListHeader
+        itemCount={7}
+        qsConfig={qsConfig}
+        searchColumns={[{ name: 'foo', key: 'foo', isDefault: true }]}
+        sortColumns={[{ name: 'foo', key: 'foo' }]}
+      />,
+      { 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');
+  });
 });