refactor ListHeader to use replaceNamespacedParams

awx/ui_next/src/components/ListHeader/ListHeader.jsx

@@ -6,11 +6,10 @@ import { Toolbar, ToolbarContent } from '@patternfly/react-core';
 import DataListToolbar from '../DataListToolbar';
 
 import {
-  encodeNonDefaultQueryString,
   parseQueryString,
   mergeParams,
-  replaceParams,
   removeParams,
+  replaceNamespacedParams,
 } from '../../util/qs';
 import { QSConfig, SearchColumns, SortColumns } from '../../types';
 
@@ -38,60 +37,59 @@ class ListHeader extends React.Component {
 
   handleSearch(key, value) {
     const { location, qsConfig } = this.props;
-    let params = parseQueryString(qsConfig, location.search);
+    const params = parseQueryString(qsConfig, location.search);
-    params = mergeParams(params, { [key]: value });
+    const qs = replaceNamespacedParams(qsConfig, location.search, {
-    params = replaceParams(params, { page: 1 });
+      ...mergeParams(params, { [key]: value }),
-    this.pushHistoryState(params);
+      page: 1,
+    });
+    this.pushHistoryState(qs);
   }
 
   handleReplaceSearch(key, value) {
     const { location, qsConfig } = this.props;
-    const oldParams = parseQueryString(qsConfig, location.search);
+    const qs = replaceNamespacedParams(qsConfig, location.search, {
-    this.pushHistoryState(replaceParams(oldParams, { [key]: value }));
+      [key]: value,
+    });
+    this.pushHistoryState(qs);
   }
 
   handleRemove(key, value) {
     const { location, qsConfig } = this.props;
-    let oldParams = parseQueryString(qsConfig, location.search);
+    const oldParams = parseQueryString(qsConfig, location.search);
-    if (parseInt(value, 10)) {
+    const updatedParams = removeParams(qsConfig, oldParams, {
-      oldParams = removeParams(qsConfig, oldParams, {
+      [key]: value,
-        [key]: parseInt(value, 10),
+    });
-      });
+    const qs = replaceNamespacedParams(
-    }
+      qsConfig,
-    this.pushHistoryState(removeParams(qsConfig, oldParams, { [key]: value }));
+      location.search,
+      updatedParams
+    );
+    this.pushHistoryState(qs);
   }
 
   handleRemoveAll() {
-    // 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 };
+    Object.keys(oldParams).forEach(key => {
-    delete oldParamsClone.page_size;
+      oldParams[key] = null;
-    delete oldParamsClone.order_by;
+    });
-    this.pushHistoryState(removeParams(qsConfig, oldParams, oldParamsClone));
+    const qs = replaceNamespacedParams(qsConfig, location.search, oldParams);
+    this.pushHistoryState(qs);
   }
 
   handleSort(key, order) {
     const { location, qsConfig } = this.props;
-    const oldParams = parseQueryString(qsConfig, location.search);
+    const qs = replaceNamespacedParams(qsConfig, location.search, {
-    this.pushHistoryState(
+      order_by: order === 'ascending' ? key : `-${key}`,
-      replaceParams(oldParams, {
+      page: null,
-        order_by: order === 'ascending' ? key : `-${key}`,
+    });
-        page: null,
+    this.pushHistoryState(qs);
-      })
-    );
   }
 
-  pushHistoryState(params) {
+  pushHistoryState(queryString) {
-    const { history, qsConfig } = this.props;
+    const { history } = this.props;
     const { pathname } = history.location;
-    const nonNamespacedParams = parseQueryString({}, history.location.search);
+    history.push(queryString ? `${pathname}?${queryString}` : pathname);
-    const encodedParams = encodeNonDefaultQueryString(
-      qsConfig,
-      params,
-      nonNamespacedParams
-    );
-    history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname);
   }
 
   render() {

awx/ui_next/src/components/ListHeader/ListHeader.test.jsx

@@ -51,7 +51,7 @@ describe('ListHeader', () => {
     expect(history.location.search).toEqual('');
   });
 
-  test('should test clear all', () => {
+  test('should clear all', () => {
     const query = '?item.page_size=5&item.name=foo';
     const history = createMemoryHistory({
       initialEntries: [`/organizations/1/teams${query}`],
@@ -71,7 +71,7 @@ describe('ListHeader', () => {
     expect(history.location.search).toEqual(query);
     const toolbar = wrapper.find('DataListToolbar');
     toolbar.prop('clearAllFilters')();
-    expect(history.location.search).toEqual('?item.page_size=5');
+    expect(history.location.search).toEqual('');
   });
 
   test('should test handle search', () => {

awx/ui_next/src/util/qs.js

@@ -164,9 +164,10 @@ export function removeParams(config, oldParams, paramsToRemove) {
   };
   Object.keys(oldParams).forEach(key => {
     const value = removeParam(oldParams[key], paramsToRemove[key]);
-    if (value !== null) {
+    if (value == null && Object.prototype.hasOwnProperty.call(updated, key)) {
-      updated[key] = value;
+      return;
     }
+    updated[key] = value;
   });
   return updated;
 }

awx/ui_next/src/util/qs.test.js

@@ -341,6 +341,7 @@ describe('qs (qs.js)', () => {
         baz: 'bar',
         page: 3,
         page_size: 15,
+        bag: null,
       });
     });
 
@@ -429,6 +430,7 @@ describe('qs (qs.js)', () => {
         baz: ['bar', 'bang'],
         page: 3,
         page_size: 15,
+        pat: null,
       });
     });
 
@@ -443,6 +445,7 @@ describe('qs (qs.js)', () => {
       expect(removeParams(config, oldParams, toRemove)).toEqual({
         page: 3,
         page_size: 15,
+        baz: null,
       });
     });
 
@@ -457,6 +460,7 @@ describe('qs (qs.js)', () => {
       expect(removeParams(config, oldParams, toRemove)).toEqual({
         page: 1,
         page_size: 15,
+        baz: null,
       });
     });
 
@@ -526,6 +530,7 @@ describe('qs (qs.js)', () => {
         baz: ['one', 'two', 'three'],
         page: 3,
         page_size: 15,
+        bag: null,
       });
     });
 
@@ -546,6 +551,7 @@ describe('qs (qs.js)', () => {
         baz: ['bar', 'bang'],
         page: 3,
         page_size: 15,
+        pat: null,
       });
     });
 
@@ -559,6 +565,7 @@ describe('qs (qs.js)', () => {
       const toRemove = { bag: 'boom' };
       expect(removeParams(config, oldParams, toRemove)).toEqual({
         baz: '',
+        bag: null,
         page: 3,
         page_size: 15,
       });
@@ -860,6 +867,8 @@ describe('qs (qs.js)', () => {
       );
     });
 
+    // This fix needed after we're confident refactoring components
+    // to use replaceNamespacedParams provides equivalent functionality
     test.skip('should not alter params of other namespaces', () => {
       const query =
         'template.name__icontains=workflow&template.page=2&credential.page=3';