initial implementation of search in UI_next

2026-01-13 02:50:02 -03:30 · 2019-07-23 15:39:30 -04:00 · 2019-07-23 15:39:30 -04:00 · a58468ffee
commit a58468ffee
parent 602ee856fa
37 changed files with 3166 additions and 2008 deletions
--- a/awx/ui_next/SEARCH.md
+++ b/awx/ui_next/SEARCH.md
@ -0,0 +1,255 @@
+# Search Iteration 1 Requirements:
+
+## DONE
+
+- DONE update handleSearch to follow handleSort param
+- DONE update qsConfig columns to utilize isSearchable bool (just like isSortable bool)
+- DONE enter keydown in text search bar to search
+- DONE get decoded params and write test
+- DONE make list header component
+- DONE make filter component
+- DONE make filters show up for empty list
+- DONE make clear all button
+- DONE styling of FilterTags component
+- DONE clear out text input after tag has been made
+- DONE deal with duplicate key tags being added/removed in qs util file
+- DONE deal with widgetry changing between one dropdown option to the left of search and many
+- DONE bug: figure out why ?name=org returning just org not “org 2”
+- DONE update contrib file to have the first section with updated text as is in this pr description.
+- DONE rebase with latest awx-pf changes
+- DONE styling of search bar
+- DONE make filter and list header tests
+- DONE change api paramsSerializer to handle duplicate key stuff
+- DONE update qs update function to be smaller, simple param functions, as opposed to one big one with a lot of params
+
+## TODO for this PR
+
+- add search filter removal test for qs.
+- bug: remove button for search tags of duplicate keys are broken, fix that
+
+## TODO later on in 3.6: stuff to be finished for search iteration 1 (I'll card up an issue to tackle this. I plan on doing this after I finished the awx project branch work)
+
+- currently handleSearch in Search.jsx always appends the __icontains post-fix to make the filtering ux expected work right. Once we start adding number-based params we will won't to change this behavior.
+- utilize new defaultSearchKey prop instead of relying on sort key
+- make access have username as the default key?
+- make default params only accept page, page_size and order_by
+- support custom order_by being typed in the url bar
+- fix up which keys are displayed in the various lists (note this will also require non-string widgetry to the right of the search key dropdown, for integers, dates, etc.)
+
+## Lists affected in 3.6 timeframe
+
+We should update all places to use consistent handleSearch/handleSort with paginated data list pattern.  This shouldn't be too difficult to get hooked up, as the lists all inherit from PaginatedDataList, where search is hooked up.  We will need to make sure the queryset config for each list includes the searchable boolean on keys that will need to be searched for.
+
+orgs stuff
+  - org list
+  - org add/edit instance groups lookup list
+  - org access list
+    - org user/teams list in wizard
+  - org teams list
+  - org notifications list
+jt stuff
+  - jt list
+  - jt add/edit inventory, project, credentials, instance groups lookups lists
+  - jt access list
+    - jt user/teams list in wizard
+  - jt notifications list
+  - jt schedules list
+  - jt completed jobs list
+jobs stuff
+  - jobs list
+
+# Search code details
+
+## Search component
+
+Search is configured using the qsConfig in a similar way to sort. Columns are passed as an array, as defined in the screen where the list is located. You pass a bool isSearchable (an analog to isSortable) to mark that a certain key should show up in the left-hand dropdown of the search bar.
+
+If you don't pass any columns, a default of isSearchable true will be added to a name column, which is nearly universally shared throughout the models of awx.
+
+The component looks like this:
+
+```
+<Search
+  qsConfig={qsConfig} // used to get namespace (when tags are modified 
+                      // they append namespace to query params)
+                      // also used to get "type" of fields (i.e. interger
+                      // fields should get number picker instead of text box)
+/>
+```
+
+## ListHeader component
+
+DataListToolbar, EmptyListControls, and FilterTags components were created/moved to a new sub-component of PaginatedDataList, ListHeader. This allowed us to consolidate the logic between both lists with data (which need to show search, sort, any search tags currently active, and actions) as well as empty lists (which need to show search tags currently active so they can be removed, potentially getting you back to a "list-has-data" state, as well as a subset of options still valid (such as "add").
+
+search and sort are passed callbacks from functions defined in ListHeader. These will be the following.
+
+```
+handleSort (sortedColumnKey, sortOrder) {
+  this.pushHistoryState({
+    order_by: sortOrder === 'ascending' ? sortedColumnKey : `-${sortedColumnKey}`,
+    page: null,
+  });
+}
+
+handleSearch (key, value, remove) {
+  this.pushHistoryState({
+    // ... use key and value to push a new value to the param
+    // if remove false you add a new tag w key value if remove true, 
+    // you are removing one
+  });
+}
+```
+
+Similarly, there are handleRemove and handleRemoveAll functions. All of these functions act on the react-router history using the pushHistoryState function. This causes the query params in the url to update, which in turn triggers change handlers that will re-fetch data.
+
+## FilterTags component
+
+Similar to the way the list grabs data based on changes to the react-router params, the FilterTags component updates when new params are added. This component is a fairly straight-forward map (only slightly complex, because it needed to do a nested map over any values with duplicate keys that were represented by an inner-array).
+
+Currently the filter tags do not display the key, though that data is available and they could very easily do so.
+
+Some small changes were made to our custom ChipGroup component to make this possible--a new displayAll bool prop which bypasses all chip hiding based on number of chips.
+
+## QS Updates (and supporting duplicate keys)
+
+The logic that was updated to handle search tags can be found in the qs.js util file.
+
+From a UX perspective, we wanted to be able to support searching on the same key multiple times (i.e. searching for things like ?foo=bar&foo=baz). We do this by creating an array of all values. i.e.:
+
+```
+{
+  foo: ['bar', 'baz']
+}
+```
+
+Changes to encodeQueryString and parseQueryString were made to convert between a single value string representation and multiple value array representations. Test cases were also added to qs.test.js.
+
+In addition, we needed to make sure any changes to the params that are not handled by search (page, page_size, and order_by) were updated by replacing the single value, rather than adding multiple values with the array representation. This additional piece of the specification was made in the newly created addParams and removeParams qs functions and a few test-cases were written to verify this.
+
+The api is coupled with the qs util through the paramsSerializer, due to the fact we need axios to support the array for duplicate key values object representation of the params to pass to the get request.  This is done where axios is configured in the Base.js file, so all requests and request types should support our array syntax for duplicate keys.
+
+# UX considerations
+
+**UX should be more tags always equates to more filtering.  (so "and" logic not "or")**
+
+Also, for simple search results should be returned that partially match value (i.e. use icontains prefix)
+
+**ALL query params namespaced and in url bar**
+
+ - this includes lists that aren't necessarily hyperlinked, like lookup lists.
+ - the reason behind this is so we can treat the url bar as the source of truth for queries always
+ - currently /#/organizations/add?lookup.name=bar -> will eventually be something like /#/organizations/add?ig_lookup.name=bar
+ - any params that have both a key AND value that is in the defaultParams section of the qs config should be stripped out of the search string
+
+**django fuzzy search (?search=) is not accessible outside of "advanced search"**
+
+  - How "search" query param works
+    - in current smart search typing a term with no key utilizes search= i.e. for "foo" tag, ?search=foo is given
+    - search= looks on a static list of field name "guesses" (such as name, description, etc.), as well as specific fields as defined for each endpoint (for example, the events endpoint looks for a "stdout" field as well)
+    - note that search= tags are OR'd together
+    - search=foo&name=bar returns items that have a name field of bar (not case insensitive) AND some text field with foo on it
+    - search=foo&search=bar&name=baz returns (foo in name OR foo in description OR ...) AND (bar in name OR bar in description OR ...) AND (baz in name)
+  - similarly ?related__search= looks on the static list of "guesses" for models related to the endpoint
+    - the specific fields are not "searched" for related__search
+    - related__search not currently used in awx ui
+
+**a note on typing in a smart search query**
+
+In order to not support a special "language" or "syntax" for crafting the query like we have now (and is the cause of a large amount of bugs), we will not support the old way of typing in a filter like in the current implementation of search.
+
+Since all search bars are represented in the url, for users who want to input a string to filter results in a single step, typing directly in the url to achieve the filter is acceptable.
+
+**a note on clicking a tag to putting it back into the search bar**
+
+This was brought up as a nice to have when we were discussing features.  There isn't a way we would be able to know if the user created the tag from the smart search or simple search interface?  that info is not traceable using the query params as the exclusive source of truth
+
+We have decided to not try to tackle this up front with our advanced search implementation, and may go back to this based on user feedback at a later time.
+
+# Advanced search notes
+
+Current thinking is Advanced Search will be post-3.6, or at least late 3.6 after awx features and "simple search" with the left dropdown and right input for the above phase 1 lists.
+
+That being said, we want to plan it out so we make sure the infrastructure of how we set up adding/removing tags, what shows up in the url bar, etc. all doesn't have to be redone.
+
+Users will get to advanced search with a button to the right of search bar.  When selected type-ahead key thing opens, left dropdown of search bar goes away, and x is given to get back to regular search (this is in the mockups)
+
+It is okay to only make this typing representation available initially (i.e. they start doing stuff with the type-ahead and the phases, no more typing in to make a query that way).
+
+when you click through or type in the search bar for the various phases of crafting the query ("not", "related resource project", "related resource key name", "value foo") which might be represented in the top bar as a series of tags that can be added and removed before submitting the tag.
+
+We will try to form options data from a static file.  Because options data is static, we may be able to generate and store as a static file of some sort (that we can use for managing smart search).  Alan had ideas around this.  If we do this it will mean we don't have to make a ton of requests as we craft smart search filters.  It sounds like tower cli may start using something similar.
+
+## Smart search flow
+
+Smart search will be able to craft the tag through various states.  Note that the phases don't necessarily need to be completed in sequential order.
+
+  PHASE 1: prefix operators
+
+**TODO: Double check there's no reason we need to include or__ and chain__ and can just do not__**
+
+  - not__
+  - or__
+  - chain__
+
+  how these work:
+
+  To exclude results matching certain criteria, prefix the field parameter with not__:
+
+  ?not__field=value
+  By default, all query string filters are AND'ed together, so only the results matching all filters will be returned. To combine results matching any one of multiple criteria, prefix each query string parameter with or__:
+
+  ?or__field=value&or__field=othervalue
+  ?or__not__field=value&or__field=othervalue
+  (Added in Ansible Tower 1.4.5) The default AND filtering applies all filters simultaneously to each related object being filtered across database relationships. The chain filter instead applies filters separately for each related object. To use, prefix the query string parameter with chain__:
+
+  ?chain__related__field=value&chain__related__field2=othervalue
+  ?chain__not__related__field=value&chain__related__field2=othervalue
+  If the first query above were written as ?related__field=value&related__field2=othervalue, it would return only the primary objects where the same related object satisfied both conditions. As written using the chain filter, it would return the intersection of primary objects matching each condition.
+
+  PHASE 2: related fields, given by array, where __search is appended to them, i.e.
+
+  ```
+  "related_search_fields": [
+        "credentials__search",
+        "labels__search",
+        "created_by__search",
+        "modified_by__search",
+        "notification_templates__search",
+        "custom_inventory_scripts__search",
+        "notification_templates_error__search",
+        "notification_templates_success__search",
+        "notification_templates_any__search",
+        "teams__search",
+        "projects__search",
+        "inventories__search",
+        "applications__search",
+        "workflows__search",
+        "instance_groups__search"
+    ],
+  ```
+  
+  PHASE 3: keys, give by object key names for data.actions.GET
+    - type is given for each key which we could use to help craft the value
+
+  PHASE 4: after key postfix operators can be
+
+**TODO: will need to figure out which ones we support**
+
+  - exact: Exact match (default lookup if not specified).
+  - iexact: Case-insensitive version of exact.
+  - contains: Field contains value.
+  - icontains: Case-insensitive version of contains.
+  - startswith: Field starts with value.
+  - istartswith: Case-insensitive version of startswith.
+  - endswith: Field ends with value.
+  - iendswith: Case-insensitive version of endswith.
+  - regex: Field matches the given regular expression.
+  - iregex: Case-insensitive version of regex.
+  - gt: Greater than comparison.
+  - gte: Greater than or equal to comparison.
+  - lt: Less than comparison.
+  - lte: Less than or equal to comparison.
+  - isnull: Check whether the given field or related object is null; expects a boolean value.
+  - in: Check whether the given field's value is present in the list provided; expects a list of items.
+
+  PHASE 5: The value.  Based on options, we can give hints or validation based on type of value (like number fields don't accept "foo" or whatever)
--- a/awx/ui_next/src/api/Base.js
+++ b/awx/ui_next/src/api/Base.js
@ -1,41 +1,48 @@
 import axios from 'axios';

+import {
+  encodeQueryString
+} from '@util/qs';
+
 const defaultHttp = axios.create({
  xsrfCookieName: 'csrftoken',
  xsrfHeaderName: 'X-CSRFToken',
+  paramsSerializer(params) {
+    return encodeQueryString(params);
+  }
 });

 class Base {
-  constructor(http = defaultHttp, baseURL) {
+  constructor (http = defaultHttp, baseURL) {
    this.http = http;
    this.baseUrl = baseURL;
  }

-  create(data) {
+  create (data) {
    return this.http.post(this.baseUrl, data);
  }

-  destroy(id) {
+  destroy (id) {
    return this.http.delete(`${this.baseUrl}${id}/`);
  }

-  read(params = {}) {
+  read (params) {
    return this.http.get(this.baseUrl, { params });
  }

-  readDetail(id) {
+  readDetail (id) {
    return this.http.get(`${this.baseUrl}${id}/`);
  }

-  readOptions() {
+  readOptions () {
    return this.http.options(this.baseUrl);
  }

-  replace(id, data) {
+  replace (id, data) {
    return this.http.put(`${this.baseUrl}${id}/`, data);
  }

-  update(id, data) {
+  update (id, data) {
    return this.http.patch(`${this.baseUrl}${id}/`, data);
  }
 }
--- a/awx/ui_next/src/api/Base.test.jsx
+++ b/awx/ui_next/src/api/Base.test.jsx
@ -3,14 +3,14 @@ import Base from './Base';
 describe('Base', () => {
  const createPromise = () => Promise.resolve();
  const mockBaseURL = '/api/v2/organizations/';
-  const mockHttp = {
+  const mockHttp = ({
    delete: jest.fn(createPromise),
    get: jest.fn(createPromise),
    options: jest.fn(createPromise),
    patch: jest.fn(createPromise),
    post: jest.fn(createPromise),
-    put: jest.fn(createPromise),
-  };
+    put: jest.fn(createPromise)
+  });

  const BaseAPI = new Base(mockHttp, mockBaseURL);

@ -18,7 +18,7 @@ describe('Base', () => {
    jest.clearAllMocks();
  });

-  test('create calls http method with expected data', async done => {
+  test('create calls http method with expected data', async (done) => {
    const data = { name: 'test ' };
    await BaseAPI.create(data);

@ -28,44 +28,45 @@ describe('Base', () => {
    done();
  });

-  test('destroy calls http method with expected data', async done => {
+  test('destroy calls http method with expected data', async (done) => {
    const resourceId = 1;
    await BaseAPI.destroy(resourceId);

    expect(mockHttp.delete).toHaveBeenCalledTimes(1);
-    expect(mockHttp.delete.mock.calls[0][0]).toEqual(
-      `${mockBaseURL}${resourceId}/`
-    );
+    expect(mockHttp.delete.mock.calls[0][0]).toEqual(`${mockBaseURL}${resourceId}/`);

    done();
  });

-  test('read calls http method with expected data', async done => {
-    const defaultParams = {};
+  test('read calls http method with expected data', async (done) => {
    const testParams = { foo: 'bar' };
+    const testParamsDuplicates = { foo: ['bar', 'baz']};

    await BaseAPI.read(testParams);
    await BaseAPI.read();
+    await BaseAPI.read(testParamsDuplicates);

-    expect(mockHttp.get).toHaveBeenCalledTimes(2);
-    expect(mockHttp.get.mock.calls[0][1]).toEqual({ params: testParams });
-    expect(mockHttp.get.mock.calls[1][1]).toEqual({ params: defaultParams });
+    expect(mockHttp.get).toHaveBeenCalledTimes(3);
+    expect(mockHttp.get.mock.calls[0][0]).toEqual(`${mockBaseURL}`);
+    expect(mockHttp.get.mock.calls[0][1]).toEqual({"params": {"foo": "bar"}});
+    expect(mockHttp.get.mock.calls[1][0]).toEqual(`${mockBaseURL}`);
+    expect(mockHttp.get.mock.calls[1][1]).toEqual({"params": undefined});
+    expect(mockHttp.get.mock.calls[2][0]).toEqual(`${mockBaseURL}`);
+    expect(mockHttp.get.mock.calls[2][1]).toEqual({"params": {"foo": ["bar", "baz"]}});
    done();
  });

-  test('readDetail calls http method with expected data', async done => {
+  test('readDetail calls http method with expected data', async (done) => {
    const resourceId = 1;

    await BaseAPI.readDetail(resourceId);

    expect(mockHttp.get).toHaveBeenCalledTimes(1);
-    expect(mockHttp.get.mock.calls[0][0]).toEqual(
-      `${mockBaseURL}${resourceId}/`
-    );
+    expect(mockHttp.get.mock.calls[0][0]).toEqual(`${mockBaseURL}${resourceId}/`);
    done();
  });

-  test('readOptions calls http method with expected data', async done => {
+  test('readOptions calls http method with expected data', async (done) => {
    await BaseAPI.readOptions();

    expect(mockHttp.options).toHaveBeenCalledTimes(1);
@ -73,31 +74,27 @@ describe('Base', () => {
    done();
  });

-  test('replace calls http method with expected data', async done => {
+  test('replace calls http method with expected data', async (done) => {
    const resourceId = 1;
    const data = { name: 'test ' };

    await BaseAPI.replace(resourceId, data);

    expect(mockHttp.put).toHaveBeenCalledTimes(1);
-    expect(mockHttp.put.mock.calls[0][0]).toEqual(
-      `${mockBaseURL}${resourceId}/`
-    );
+    expect(mockHttp.put.mock.calls[0][0]).toEqual(`${mockBaseURL}${resourceId}/`);
    expect(mockHttp.put.mock.calls[0][1]).toEqual(data);

    done();
  });

-  test('update calls http method with expected data', async done => {
+  test('update calls http method with expected data', async (done) => {
    const resourceId = 1;
    const data = { name: 'test ' };

    await BaseAPI.update(resourceId, data);

    expect(mockHttp.patch).toHaveBeenCalledTimes(1);
-    expect(mockHttp.patch.mock.calls[0][0]).toEqual(
-      `${mockBaseURL}${resourceId}/`
-    );
+    expect(mockHttp.patch.mock.calls[0][0]).toEqual(`${mockBaseURL}${resourceId}/`);
    expect(mockHttp.patch.mock.calls[0][1]).toEqual(data);

    done();
--- a/awx/ui_next/src/api/mixins/InstanceGroups.mixin.js
+++ b/awx/ui_next/src/api/mixins/InstanceGroups.mixin.js
@ -1,23 +1,15 @@
-const InstanceGroupsMixin = parent =>
-  class extends parent {
-    readInstanceGroups(resourceId, params = {}) {
-      return this.http.get(`${this.baseUrl}${resourceId}/instance_groups/`, {
-        params,
-      });
-    }
+const InstanceGroupsMixin = (parent) => class extends parent {
+  readInstanceGroups (resourceId, params) {
+    return this.http.get(`${this.baseUrl}${resourceId}/instance_groups/`, params);
+  }

-    associateInstanceGroup(resourceId, instanceGroupId) {
-      return this.http.post(`${this.baseUrl}${resourceId}/instance_groups/`, {
-        id: instanceGroupId,
-      });
-    }
+  associateInstanceGroup (resourceId, instanceGroupId) {
+    return this.http.post(`${this.baseUrl}${resourceId}/instance_groups/`, { id: instanceGroupId });
+  }

-    disassociateInstanceGroup(resourceId, instanceGroupId) {
-      return this.http.post(`${this.baseUrl}${resourceId}/instance_groups/`, {
-        id: instanceGroupId,
-        disassociate: true,
-      });
-    }
-  };
+  disassociateInstanceGroup (resourceId, instanceGroupId) {
+    return this.http.post(`${this.baseUrl}${resourceId}/instance_groups/`, { id: instanceGroupId, disassociate: true });
+  }
+};

 export default InstanceGroupsMixin;
--- a/awx/ui_next/src/api/mixins/Notifications.mixin.js
+++ b/awx/ui_next/src/api/mixins/Notifications.mixin.js
@ -1,106 +1,65 @@
-const NotificationsMixin = parent =>
-  class extends parent {
-    readOptionsNotificationTemplates(id) {
-      return this.http.options(`${this.baseUrl}${id}/notification_templates/`);
+const NotificationsMixin = (parent) => class extends parent {
+  readOptionsNotificationTemplates(id) {
+    return this.http.options(`${this.baseUrl}${id}/notification_templates/`);
+  }
+
+  readNotificationTemplates (id, params) {
+    return this.http.get(`${this.baseUrl}${id}/notification_templates/`, params);
+  }
+
+  readNotificationTemplatesSuccess (id, params) {
+    return this.http.get(`${this.baseUrl}${id}/notification_templates_success/`, params);
+  }
+
+  readNotificationTemplatesError (id, params) {
+    return this.http.get(`${this.baseUrl}${id}/notification_templates_error/`, params);
+  }
+
+  associateNotificationTemplatesSuccess (resourceId, notificationId) {
+    return this.http.post(`${this.baseUrl}${resourceId}/notification_templates_success/`, { id: notificationId });
+  }
+
+  disassociateNotificationTemplatesSuccess (resourceId, notificationId) {
+    return this.http.post(`${this.baseUrl}${resourceId}/notification_templates_success/`, { id: notificationId, disassociate: true });
+  }
+
+  associateNotificationTemplatesError (resourceId, notificationId) {
+    return this.http.post(`${this.baseUrl}${resourceId}/notification_templates_error/`, { id: notificationId });
+  }
+
+  disassociateNotificationTemplatesError (resourceId, notificationId) {
+    return this.http.post(`${this.baseUrl}${resourceId}/notification_templates_error/`, { id: notificationId, disassociate: true });
+  }
+
+  /**
+  * This is a helper method meant to simplify setting the "on" or "off" status of
+  * a related notification.
+  *
+  * @param[resourceId] - id of the base resource
+  * @param[notificationId] - id of the notification
+  * @param[notificationType] - the type of notification, options are "success" and "error"
+  * @param[associationState] - Boolean for associating or disassociating, options are true or false
+  */
+  // eslint-disable-next-line max-len
+  updateNotificationTemplateAssociation (resourceId, notificationId, notificationType, associationState) {
+    if (notificationType === 'success' && associationState === true) {
+      return this.associateNotificationTemplatesSuccess(resourceId, notificationId);
    }

-    readNotificationTemplates(id, params = {}) {
-      return this.http.get(`${this.baseUrl}${id}/notification_templates/`, {
-        params,
-      });
+    if (notificationType === 'success' && associationState === false) {
+      return this.disassociateNotificationTemplatesSuccess(resourceId, notificationId);
    }

-    readNotificationTemplatesSuccess(id, params = {}) {
-      return this.http.get(
-        `${this.baseUrl}${id}/notification_templates_success/`,
-        { params }
-      );
+    if (notificationType === 'error' && associationState === true) {
+      return this.associateNotificationTemplatesError(resourceId, notificationId);
    }

-    readNotificationTemplatesError(id, params = {}) {
-      return this.http.get(
-        `${this.baseUrl}${id}/notification_templates_error/`,
-        { params }
-      );
+    if (notificationType === 'error' && associationState === false) {
+      return this.disassociateNotificationTemplatesError(resourceId, notificationId);
    }

-    associateNotificationTemplatesSuccess(resourceId, notificationId) {
-      return this.http.post(
-        `${this.baseUrl}${resourceId}/notification_templates_success/`,
-        { id: notificationId }
-      );
-    }
-
-    disassociateNotificationTemplatesSuccess(resourceId, notificationId) {
-      return this.http.post(
-        `${this.baseUrl}${resourceId}/notification_templates_success/`,
-        { id: notificationId, disassociate: true }
-      );
-    }
-
-    associateNotificationTemplatesError(resourceId, notificationId) {
-      return this.http.post(
-        `${this.baseUrl}${resourceId}/notification_templates_error/`,
-        { id: notificationId }
-      );
-    }
-
-    disassociateNotificationTemplatesError(resourceId, notificationId) {
-      return this.http.post(
-        `${this.baseUrl}${resourceId}/notification_templates_error/`,
-        { id: notificationId, disassociate: true }
-      );
-    }
-
-    /**
-     * This is a helper method meant to simplify setting the "on" or "off" status of
-     * a related notification.
-     *
-     * @param[resourceId] - id of the base resource
-     * @param[notificationId] - id of the notification
-     * @param[notificationType] - the type of notification, options are "success" and "error"
-     * @param[associationState] - Boolean for associating or disassociating,
-     *                            options are true or false
-     */
-    // eslint-disable-next-line max-len
-    updateNotificationTemplateAssociation(
-      resourceId,
-      notificationId,
-      notificationType,
-      associationState
-    ) {
-      if (notificationType === 'success' && associationState === true) {
-        return this.associateNotificationTemplatesSuccess(
-          resourceId,
-          notificationId
-        );
-      }
-
-      if (notificationType === 'success' && associationState === false) {
-        return this.disassociateNotificationTemplatesSuccess(
-          resourceId,
-          notificationId
-        );
-      }
-
-      if (notificationType === 'error' && associationState === true) {
-        return this.associateNotificationTemplatesError(
-          resourceId,
-          notificationId
-        );
-      }
-
-      if (notificationType === 'error' && associationState === false) {
-        return this.disassociateNotificationTemplatesError(
-          resourceId,
-          notificationId
-        );
-      }
-
-      throw new Error(
-        `Unsupported notificationType, associationState combination: ${notificationType}, ${associationState}`
-      );
-    }
-  };
+    throw new Error(`Unsupported notificationType, associationState combination: ${notificationType}, ${associationState}`);
+  }
+};

 export default NotificationsMixin;
--- a/awx/ui_next/src/api/models/Organizations.js
+++ b/awx/ui_next/src/api/models/Organizations.js
@ -3,16 +3,16 @@ import NotificationsMixin from '../mixins/Notifications.mixin';
 import InstanceGroupsMixin from '../mixins/InstanceGroups.mixin';

 class Organizations extends InstanceGroupsMixin(NotificationsMixin(Base)) {
-  constructor(http) {
+  constructor (http) {
    super(http);
    this.baseUrl = '/api/v2/organizations/';
  }

-  readAccessList(id, params = {}) {
+  readAccessList (id, params) {
    return this.http.get(`${this.baseUrl}${id}/access_list/`, { params });
  }

-  readTeams(id, params = {}) {
+  readTeams (id, params) {
    return this.http.get(`${this.baseUrl}${id}/teams/`, { params });
  }
 }
--- a/awx/ui_next/src/api/models/Organizations.test.jsx
+++ b/awx/ui_next/src/api/models/Organizations.test.jsx
@ -3,9 +3,8 @@ import { describeNotificationMixin } from '../../../testUtils/apiReusable';

 describe('OrganizationsAPI', () => {
  const orgId = 1;
-  const searchParams = { foo: 'bar' };
  const createPromise = () => Promise.resolve();
-  const mockHttp = { get: jest.fn(createPromise) };
+  const mockHttp = ({ get: jest.fn(createPromise) });

  const OrganizationsAPI = new Organizations(mockHttp);

@ -13,37 +12,43 @@ describe('OrganizationsAPI', () => {
    jest.clearAllMocks();
  });

-  test('read access list calls get with expected params', async done => {
+  test('read access list calls get with expected params', async (done) => {
+    const testParams = { foo: 'bar' };
+    const testParamsDuplicates = { foo: ['bar', 'baz']};
+
+    const mockBaseURL = `/api/v2/organizations/${orgId}/access_list/`;
+
    await OrganizationsAPI.readAccessList(orgId);
-    await OrganizationsAPI.readAccessList(orgId, searchParams);
-
-    expect(mockHttp.get).toHaveBeenCalledTimes(2);
-    expect(mockHttp.get.mock.calls[0]).toContainEqual(
-      `/api/v2/organizations/${orgId}/access_list/`,
-      { params: {} }
-    );
-    expect(mockHttp.get.mock.calls[1]).toContainEqual(
-      `/api/v2/organizations/${orgId}/access_list/`,
-      { params: searchParams }
-    );
+    await OrganizationsAPI.readAccessList(orgId, testParams);
+    await OrganizationsAPI.readAccessList(orgId, testParamsDuplicates);

+    expect(mockHttp.get).toHaveBeenCalledTimes(3);
+    expect(mockHttp.get.mock.calls[0][0]).toEqual(`${mockBaseURL}`);
+    expect(mockHttp.get.mock.calls[0][1]).toEqual({"params": undefined});
+    expect(mockHttp.get.mock.calls[1][0]).toEqual(`${mockBaseURL}`);
+    expect(mockHttp.get.mock.calls[1][1]).toEqual({"params": {"foo": "bar"}});
+    expect(mockHttp.get.mock.calls[2][0]).toEqual(`${mockBaseURL}`);
+    expect(mockHttp.get.mock.calls[2][1]).toEqual({"params": {"foo": ["bar", "baz"]}});
    done();
  });

-  test('read teams calls get with expected params', async done => {
+  test('read teams calls get with expected params', async (done) => {
+    const testParams = { foo: 'bar' };
+    const testParamsDuplicates = { foo: ['bar', 'baz']};
+
+    const mockBaseURL = `/api/v2/organizations/${orgId}/teams/`;
+
    await OrganizationsAPI.readTeams(orgId);
-    await OrganizationsAPI.readTeams(orgId, searchParams);
-
-    expect(mockHttp.get).toHaveBeenCalledTimes(2);
-    expect(mockHttp.get.mock.calls[0]).toContainEqual(
-      `/api/v2/organizations/${orgId}/teams/`,
-      { params: {} }
-    );
-    expect(mockHttp.get.mock.calls[1]).toContainEqual(
-      `/api/v2/organizations/${orgId}/teams/`,
-      { params: searchParams }
-    );
+    await OrganizationsAPI.readTeams(orgId, testParams);
+    await OrganizationsAPI.readTeams(orgId, testParamsDuplicates);

+    expect(mockHttp.get).toHaveBeenCalledTimes(3);
+    expect(mockHttp.get.mock.calls[0][0]).toEqual(`${mockBaseURL}`);
+    expect(mockHttp.get.mock.calls[0][1]).toEqual({"params": undefined});
+    expect(mockHttp.get.mock.calls[1][0]).toEqual(`${mockBaseURL}`);
+    expect(mockHttp.get.mock.calls[1][1]).toEqual({"params": {"foo": "bar"}});
+    expect(mockHttp.get.mock.calls[2][0]).toEqual(`${mockBaseURL}`);
+    expect(mockHttp.get.mock.calls[2][1]).toEqual({"params": {"foo": ["bar", "baz"]}});
    done();
  });
 });
--- a/awx/ui_next/src/components/AddRole/AddResourceRole.jsx
+++ b/awx/ui_next/src/components/AddRole/AddResourceRole.jsx
@ -8,13 +8,14 @@ import SelectRoleStep from './SelectRoleStep';
 import SelectableCard from './SelectableCard';
 import { TeamsAPI, UsersAPI } from '../../api';

-const readUsers = async queryParams =>
-  UsersAPI.read(Object.assign(queryParams, { is_superuser: false }));
+const readUsers = async (queryParams) => UsersAPI.read(
+  Object.assign(queryParams, { is_superuser: false })
+);

-const readTeams = async queryParams => TeamsAPI.read(queryParams);
+const readTeams = async (queryParams) => TeamsAPI.read(queryParams);

 class AddResourceRole extends React.Component {
-  constructor(props) {
+  constructor (props) {
    super(props);

    this.state = {
@ -24,69 +25,67 @@ class AddResourceRole extends React.Component {
      currentStepId: 1,
    };

-    this.handleResourceCheckboxClick = this.handleResourceCheckboxClick.bind(
-      this
-    );
+    this.handleResourceCheckboxClick = this.handleResourceCheckboxClick.bind(this);
    this.handleResourceSelect = this.handleResourceSelect.bind(this);
    this.handleRoleCheckboxClick = this.handleRoleCheckboxClick.bind(this);
    this.handleWizardNext = this.handleWizardNext.bind(this);
    this.handleWizardSave = this.handleWizardSave.bind(this);
  }

-  handleResourceCheckboxClick(user) {
+  handleResourceCheckboxClick (user) {
    const { selectedResourceRows } = this.state;

-    const selectedIndex = selectedResourceRows.findIndex(
-      selectedRow => selectedRow.id === user.id
-    );
+    const selectedIndex = selectedResourceRows
+      .findIndex(selectedRow => selectedRow.id === user.id);

    if (selectedIndex > -1) {
      selectedResourceRows.splice(selectedIndex, 1);
      this.setState({ selectedResourceRows });
    } else {
      this.setState(prevState => ({
-        selectedResourceRows: [...prevState.selectedResourceRows, user],
+        selectedResourceRows: [...prevState.selectedResourceRows, user]
      }));
    }
  }

-  handleRoleCheckboxClick(role) {
+  handleRoleCheckboxClick (role) {
    const { selectedRoleRows } = this.state;

-    const selectedIndex = selectedRoleRows.findIndex(
-      selectedRow => selectedRow.id === role.id
-    );
+    const selectedIndex = selectedRoleRows
+      .findIndex(selectedRow => selectedRow.id === role.id);

    if (selectedIndex > -1) {
      selectedRoleRows.splice(selectedIndex, 1);
      this.setState({ selectedRoleRows });
    } else {
      this.setState(prevState => ({
-        selectedRoleRows: [...prevState.selectedRoleRows, role],
+        selectedRoleRows: [...prevState.selectedRoleRows, role]
      }));
    }
  }

-  handleResourceSelect(resourceType) {
+  handleResourceSelect (resourceType) {
    this.setState({
      selectedResource: resourceType,
      selectedResourceRows: [],
-      selectedRoleRows: [],
+      selectedRoleRows: []
    });
  }

-  handleWizardNext(step) {
+  handleWizardNext (step) {
    this.setState({
      currentStepId: step.id,
    });
  }

-  async handleWizardSave() {
-    const { onSave } = this.props;
+  async handleWizardSave () {
+    const {
+      onSave
+    } = this.props;
    const {
      selectedResourceRows,
      selectedRoleRows,
-      selectedResource,
+      selectedResource
    } = this.state;

    try {
@ -96,17 +95,11 @@ class AddResourceRole extends React.Component {
        for (let j = 0; j < selectedRoleRows.length; j++) {
          if (selectedResource === 'users') {
            roleRequests.push(
-              UsersAPI.associateRole(
-                selectedResourceRows[i].id,
-                selectedRoleRows[j].id
-              )
+              UsersAPI.associateRole(selectedResourceRows[i].id, selectedRoleRows[j].id)
            );
          } else if (selectedResource === 'teams') {
            roleRequests.push(
-              TeamsAPI.associateRole(
-                selectedResourceRows[i].id,
-                selectedRoleRows[j].id
-              )
+              TeamsAPI.associateRole(selectedResourceRows[i].id, selectedRoleRows[j].id)
            );
          }
        }
@ -119,21 +112,25 @@ class AddResourceRole extends React.Component {
    }
  }

-  render() {
+  render () {
    const {
      selectedResource,
      selectedResourceRows,
      selectedRoleRows,
      currentStepId,
    } = this.state;
-    const { onClose, roles, i18n } = this.props;
+    const {
+      onClose,
+      roles,
+      i18n
+    } = this.props;

    const userColumns = [
-      { name: i18n._(t`Username`), key: 'username', isSortable: true },
+      { name: i18n._(t`Username`), key: 'username', isSortable: true, isSearchable: true }
    ];

    const teamColumns = [
-      { name: i18n._(t`Name`), key: 'name', isSortable: true },
+      { name: i18n._(t`Name`), key: 'name', isSortable: true, isSearchable: true }
    ];

    let wizardTitle = '';
@ -167,7 +164,7 @@ class AddResourceRole extends React.Component {
            />
          </div>
        ),
-        enableNext: selectedResource !== null,
+        enableNext: selectedResource !== null
      },
      {
        id: 2,
@ -198,7 +195,7 @@ class AddResourceRole extends React.Component {
            )}
          </Fragment>
        ),
-        enableNext: selectedResourceRows.length > 0,
+        enableNext: selectedResourceRows.length > 0
      },
      {
        id: 3,
@ -214,8 +211,8 @@ class AddResourceRole extends React.Component {
          />
        ),
        nextButtonText: i18n._(t`Save`),
-        enableNext: selectedRoleRows.length > 0,
-      },
+        enableNext: selectedRoleRows.length > 0
+      }
    ];

    const currentStep = steps.find(step => step.id === currentStepId);
@ -239,11 +236,11 @@ class AddResourceRole extends React.Component {
 AddResourceRole.propTypes = {
  onClose: PropTypes.func.isRequired,
  onSave: PropTypes.func.isRequired,
-  roles: PropTypes.shape(),
+  roles: PropTypes.shape()
 };

 AddResourceRole.defaultProps = {
-  roles: {},
+  roles: {}
 };

 export { AddResourceRole as _AddResourceRole };
--- a/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
+++ b/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
@ -7,7 +7,7 @@ import PaginatedDataList from '../PaginatedDataList';
 import DataListToolbar from '../DataListToolbar';
 import CheckboxListItem from '../CheckboxListItem';
 import SelectedList from '../SelectedList';
-import { getQSConfig, parseNamespacedQueryString } from '../../util/qs';
+import { getQSConfig, parseQueryString } from '../../util/qs';

 class SelectResourceStep extends React.Component {
  constructor(props) {
@ -40,7 +40,7 @@ class SelectResourceStep extends React.Component {

  async readResourceList() {
    const { onSearch, location } = this.props;
-    const queryParams = parseNamespacedQueryString(
+    const queryParams = parseQueryString(
      this.qsConfig,
      location.search
    );
--- a/awx/ui_next/src/components/AddRole/SelectResourceStep.test.jsx
+++ b/awx/ui_next/src/components/AddRole/SelectResourceStep.test.jsx
@ -6,7 +6,9 @@ import { sleep } from '../../../testUtils/testUtils';
 import SelectResourceStep from './SelectResourceStep';

 describe('<SelectResourceStep />', () => {
-  const columns = [{ name: 'Username', key: 'username', isSortable: true }];
+  const columns = [
+    { name: 'Username', key: 'username', isSortable: true, isSearchable: true }
+  ];
  afterEach(() => {
    jest.restoreAllMocks();
  });
@ -28,9 +30,9 @@ describe('<SelectResourceStep />', () => {
        count: 2,
        results: [
          { id: 1, username: 'foo', url: 'item/1' },
-          { id: 2, username: 'bar', url: 'item/2' },
-        ],
-      },
+          { id: 2, username: 'bar', url: 'item/2' }
+        ]
+      }
    });
    mountWithContexts(
      <SelectResourceStep
@ -44,25 +46,25 @@ describe('<SelectResourceStep />', () => {
    expect(handleSearch).toHaveBeenCalledWith({
      order_by: 'username',
      page: 1,
-      page_size: 5,
+      page_size: 5
    });
  });

  test('readResourceList properly adds rows to state', async () => {
-    const selectedResourceRows = [{ id: 1, username: 'foo', url: 'item/1' }];
+    const selectedResourceRows = [
+      { id: 1, username: 'foo', url: 'item/1' }
+    ];
    const handleSearch = jest.fn().mockResolvedValue({
      data: {
        count: 2,
        results: [
          { id: 1, username: 'foo', url: 'item/1' },
-          { id: 2, username: 'bar', url: 'item/2' },
-        ],
-      },
+          { id: 2, username: 'bar', url: 'item/2' }
+        ]
+      }
    });
    const history = createMemoryHistory({
-      initialEntries: [
-        '/organizations/1/access?resource.page=1&resource.order_by=-username',
-      ],
+      initialEntries: ['/organizations/1/access?resource.page=1&resource.order_by=-username'],
    });
    const wrapper = await mountWithContexts(
      <SelectResourceStep
@ -72,10 +74,7 @@ describe('<SelectResourceStep />', () => {
        onSearch={handleSearch}
        selectedResourceRows={selectedResourceRows}
        sortedColumnKey="username"
-      />,
-      {
-        context: { router: { history, route: { location: history.location } } },
-      }
+      />, { context: { router: { history, route: { location: history.location } } } }
    ).find('SelectResourceStep');
    await wrapper.instance().readResourceList();
    expect(handleSearch).toHaveBeenCalledWith({
@ -85,7 +84,7 @@ describe('<SelectResourceStep />', () => {
    });
    expect(wrapper.state('resources')).toEqual([
      { id: 1, username: 'foo', url: 'item/1' },
-      { id: 2, username: 'bar', url: 'item/2' },
+      { id: 2, username: 'bar', url: 'item/2' }
    ]);
  });

@ -95,8 +94,8 @@ describe('<SelectResourceStep />', () => {
      count: 2,
      results: [
        { id: 1, username: 'foo', url: 'item/1' },
-        { id: 2, username: 'bar', url: 'item/2' },
-      ],
+        { id: 2, username: 'bar', url: 'item/2' }
+      ]
    };
    const wrapper = mountWithContexts(
      <SelectResourceStep
@ -112,9 +111,7 @@ describe('<SelectResourceStep />', () => {
    wrapper.update();
    const checkboxListItemWrapper = wrapper.find('CheckboxListItem');
    expect(checkboxListItemWrapper.length).toBe(2);
-    checkboxListItemWrapper
-      .first()
-      .find('input[type="checkbox"]')
+    checkboxListItemWrapper.first().find('input[type="checkbox"]')
      .simulate('change', { target: { checked: true } });
    expect(handleRowClick).toHaveBeenCalledWith(data.results[0]);
  });
--- a/awx/ui_next/src/components/Chip/ChipGroup.jsx
+++ b/awx/ui_next/src/components/Chip/ChipGroup.jsx
@ -1,17 +1,16 @@
 import React, { useState } from 'react';
-import { number } from 'prop-types';
+import { number, bool } from 'prop-types';
 import styled from 'styled-components';
 import Chip from './Chip';

-const ChipGroup = ({ children, className, showOverflowAfter, ...props }) => {
+const ChipGroup = ({ children, className, showOverflowAfter, displayAll, ...props }) => {
  const [isExpanded, setIsExpanded] = useState(!showOverflowAfter);
  const toggleIsOpen = () => setIsExpanded(!isExpanded);

-  const mappedChildren = React.Children.map(children, c =>
+  const mappedChildren = React.Children.map(children, c => (
    React.cloneElement(c, { component: 'li' })
-  );
-  const showOverflowToggle =
-    showOverflowAfter && children.length > showOverflowAfter;
+  ));
+  const showOverflowToggle = showOverflowAfter && children.length > showOverflowAfter;
  const numToShow = isExpanded
    ? children.length
    : Math.min(showOverflowAfter, children.length);
@ -20,8 +19,8 @@ const ChipGroup = ({ children, className, showOverflowAfter, ...props }) => {

  return (
    <ul className={`pf-c-chip-group ${className}`} {...props}>
-      {mappedChildren.slice(0, numToShow)}
-      {showOverflowToggle && (
+      {displayAll ? mappedChildren : mappedChildren.slice(0, numToShow)}
+      {!displayAll && showOverflowToggle && (
        <Chip isOverflowChip onClick={toggleIsOpen} component="li">
          {isExpanded ? expandedText : collapsedText}
        </Chip>
@ -31,12 +30,18 @@ const ChipGroup = ({ children, className, showOverflowAfter, ...props }) => {
 };
 ChipGroup.propTypes = {
  showOverflowAfter: number,
+  displayAll: bool
 };
 ChipGroup.defaultProps = {
  showOverflowAfter: null,
+  displayAll: false
 };

 export default styled(ChipGroup)`
  --pf-c-chip-group--c-chip--MarginRight: 10px;
  --pf-c-chip-group--c-chip--MarginBottom: 10px;
+  
+  > .pf-c-chip.pf-m-overflow button {
+    padding: 3px 8px;
+  }
 `;
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
@ -13,9 +13,9 @@ describe('<DataListToolbar />', () => {
  });

  test('it triggers the expected callbacks', () => {
-    const columns = [{ name: 'Name', key: 'name', isSortable: true }];
+    const columns = [{ name: 'Name', key: 'name', isSortable: true, isSearchable: true }];

-    const search = 'button[aria-label="Search"]';
+    const search = 'button[aria-label="Search submit button"]';
    const searchTextInput = 'input[aria-label="Search text input"]';
    const selectAll = 'input[aria-label="Select all"]';
    const sort = 'button[aria-label="Sort"]';
@ -53,19 +53,20 @@ describe('<DataListToolbar />', () => {
    toolbar.find(search).simulate('click');

    expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toBeCalledWith('test-321');
+    expect(onSearch).toBeCalledWith('name__icontains', 'test-321');
  });

-  test('dropdown items sortable columns work', () => {
+  test('dropdown items sortable/searchable columns work', () => {
    const sortDropdownToggleSelector = 'button[id="awx-sort"]';
    const searchDropdownToggleSelector = 'button[id="awx-search"]';
-    const dropdownMenuItems = 'DropdownMenu > ul';
+    const sortDropdownMenuItems = 'DropdownMenu > ul[aria-labelledby="awx-sort"]';
+    const searchDropdownMenuItems = 'DropdownMenu > ul[aria-labelledby="awx-search"]';

    const multipleColumns = [
-      { name: 'Foo', key: 'foo', isSortable: true },
-      { name: 'Bar', key: 'bar', isSortable: true },
+      { name: 'Foo', key: 'foo', isSortable: true, isSearchable: true },
+      { name: 'Bar', key: 'bar', isSortable: true, isSearchable: true },
      { name: 'Bakery', key: 'bakery', isSortable: true },
-      { name: 'Baz', key: 'baz' },
+      { name: 'Baz', key: 'baz' }
    ];

    const onSort = jest.fn();
@ -82,9 +83,14 @@ describe('<DataListToolbar />', () => {
    expect(sortDropdownToggle.length).toBe(1);
    sortDropdownToggle.simulate('click');
    toolbar.update();
-    const sortDropdownItems = toolbar.find(dropdownMenuItems).children();
+    const sortDropdownItems = toolbar.find(sortDropdownMenuItems).children();
    expect(sortDropdownItems.length).toBe(2);
-
+    let searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
+    expect(searchDropdownToggle.length).toBe(1);
+    searchDropdownToggle.simulate('click');
+    toolbar.update();
+    let searchDropdownItems = toolbar.find(searchDropdownMenuItems).children();
+    expect(searchDropdownItems.length).toBe(1);
    const mockedSortEvent = { target: { innerText: 'Bar' } };
    sortDropdownItems.at(0).simulate('click', mockedSortEvent);
    toolbar = mountWithContexts(
@ -97,16 +103,12 @@ describe('<DataListToolbar />', () => {
    );
    toolbar.update();

-    const sortDropdownToggleDescending = toolbar.find(
-      sortDropdownToggleSelector
-    );
+    const sortDropdownToggleDescending = toolbar.find(sortDropdownToggleSelector);
    expect(sortDropdownToggleDescending.length).toBe(1);
    sortDropdownToggleDescending.simulate('click');
    toolbar.update();

-    const sortDropdownItemsDescending = toolbar
-      .find(dropdownMenuItems)
-      .children();
+    const sortDropdownItemsDescending = toolbar.find(sortDropdownMenuItems).children();
    expect(sortDropdownItemsDescending.length).toBe(2);
    sortDropdownToggleDescending.simulate('click'); // toggle close the sort dropdown

@ -114,13 +116,13 @@ describe('<DataListToolbar />', () => {
    sortDropdownItems.at(0).simulate('click', mockedSortEventDescending);
    toolbar.update();

-    const searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
+    searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
    expect(searchDropdownToggle.length).toBe(1);
    searchDropdownToggle.simulate('click');
    toolbar.update();

-    const searchDropdownItems = toolbar.find(dropdownMenuItems).children();
-    expect(searchDropdownItems.length).toBe(3);
+    searchDropdownItems = toolbar.find(searchDropdownMenuItems).children();
+    expect(searchDropdownItems.length).toBe(1);

    const mockedSearchEvent = { target: { innerText: 'Bar' } };
    searchDropdownItems.at(0).simulate('click', mockedSearchEvent);
@ -132,12 +134,8 @@ describe('<DataListToolbar />', () => {
    const downAlphaIconSelector = 'SortAlphaDownIcon';
    const upAlphaIconSelector = 'SortAlphaUpIcon';

-    const numericColumns = [
-      { name: 'ID', key: 'id', isSortable: true, isNumeric: true },
-    ];
-    const alphaColumns = [
-      { name: 'Name', key: 'name', isSortable: true, isNumeric: false },
-    ];
+    const numericColumns = [{ name: 'ID', key: 'id', isSortable: true, isNumeric: true }];
+    const alphaColumns = [{ name: 'Name', key: 'name', isSortable: true, isNumeric: false }];

    toolbar = mountWithContexts(
      <DataListToolbar
@ -185,7 +183,7 @@ describe('<DataListToolbar />', () => {
  });

  test('should render additionalControls', () => {
-    const columns = [{ name: 'Name', key: 'name', isSortable: true }];
+    const columns = [{ name: 'Name', key: 'name', isSortable: true, isSearchable: true }];
    const onSearch = jest.fn();
    const onSort = jest.fn();
    const onSelectAll = jest.fn();
@ -196,11 +194,7 @@ describe('<DataListToolbar />', () => {
        onSearch={onSearch}
        onSort={onSort}
        onSelectAll={onSelectAll}
-        additionalControls={[
-          <button key="1" id="test" type="button">
-            click
-          </button>,
-        ]}
+        additionalControls={[<button key="1" id="test" type="button">click</button>]}
      />
    );

--- a/awx/ui_next/src/components/FilterTags/FilterTags.jsx
+++ b/awx/ui_next/src/components/FilterTags/FilterTags.jsx
@ -0,0 +1,80 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import styled from 'styled-components';
+import { Button } from '@patternfly/react-core';
+import { parseQueryString } from '@util/qs';
+import { ChipGroup, Chip } from '@components/Chip';
+import VerticalSeparator from '@components/VerticalSeparator';
+
+const FilterTagsRow = styled.div`
+    display: flex;
+    padding: 15px 20px;
+    border-top: 1px solid #d2d2d2;
+    font-size: 14px;
+    align-items: center;
+`;
+
+const ResultCount = styled.span`
+    font-weight: bold;
+`;
+
+const FilterLabel = styled.span`
+    padding-right: 20px;
+`;
+
+// remove non-default query params so they don't show up as filter tags
+const filterOutDefaultParams = (paramsArr, config) => {
+  const defaultParamsKeys = Object.keys(config.defaultParams);
+  return paramsArr.filter(key => defaultParamsKeys.indexOf(key) === -1);
+};
+
+const FilterTags = ({ i18n, itemCount, qsConfig, location, onRemove, onRemoveAll }) => {
+  const queryParams = parseQueryString(qsConfig, location.search);
+  const queryParamsArr = [];
+  const displayAll = true;
+  const nonDefaultParams = filterOutDefaultParams(Object.keys(queryParams), qsConfig);
+  nonDefaultParams
+    .forEach(key => {
+      if (Array.isArray(queryParams[key])) {
+        queryParams[key].forEach(val => queryParamsArr.push({ key, value: val }));
+      } else {
+        queryParamsArr.push({ key, value: queryParams[key] });
+      }
+    });
+
+  return (queryParamsArr.length > 0) && (
+    <FilterTagsRow>
+      <ResultCount>
+        {`${itemCount} results`}
+      </ResultCount>
+      <VerticalSeparator />
+      <FilterLabel>Active Filters:</FilterLabel>
+      <ChipGroup displayAll={displayAll}>
+        {queryParamsArr.map(param => (
+          <Chip
+            className="searchTagChip"
+            key={`${param.key}__${param.value}`}
+            isReadOnly={false}
+            onClick={() => onRemove(param)}
+          >
+            {param.value}
+          </Chip>
+        ))}
+        <div className="pf-c-chip pf-m-overflow">
+          <Button
+            variant="plain"
+            type="button"
+            aria-label={i18n._(t`Clear all search filters`)}
+            onClick={onRemoveAll}
+          >
+            <span className="pf-c-chip__text">{i18n._(t`Clear all`)}</span>
+          </Button>
+        </div>
+      </ChipGroup>
+    </FilterTagsRow>
+  );
+};
+
+export default withI18n()(withRouter(FilterTags));
--- a/awx/ui_next/src/components/FilterTags/FilterTags.test.jsx
+++ b/awx/ui_next/src/components/FilterTags/FilterTags.test.jsx
@ -0,0 +1,42 @@
+import React from 'react';
+import { createMemoryHistory } from 'history';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import FilterTags from './FilterTags';
+
+describe('<ExpandCollapse />', () => {
+  const qsConfig = {
+    namespace: 'item',
+    defaultParams: { page: 1, page_size: 5, order_by: 'name' },
+    integerFields: [],
+  };
+  const onRemoveFn = jest.fn();
+  const onRemoveAllFn = jest.fn();
+
+  test('initially renders without crashing', () => {
+    const wrapper = mountWithContexts(
+      <FilterTags
+        qsConfig={qsConfig}
+        onRemove={onRemoveFn}
+        onRemoveAll={onRemoveAllFn}
+      />
+    );
+    expect(wrapper.length).toBe(1);
+    wrapper.unmount();
+  });
+
+  test('renders non-default param tags based on location history', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/foo?item.page=1&item.page_size=2&item.foo=bar&item.baz=bust'],
+    });
+    const wrapper = mountWithContexts(
+      <FilterTags
+        qsConfig={qsConfig}
+        onRemove={onRemoveFn}
+        onRemoveAll={onRemoveAllFn}
+      />, { context: { router: { history, route: { location: history.location } } } }
+    );
+    const chips = wrapper.find('.pf-c-chip.searchTagChip');
+    expect(chips.length).toBe(2);
+    wrapper.unmount();
+  });
+});
--- a/awx/ui_next/src/components/FilterTags/index.js
+++ b/awx/ui_next/src/components/FilterTags/index.js
@ -0,0 +1 @@
+export { default } from './FilterTags';
--- a/awx/ui_next/src/components/ListHeader/ListHeader.jsx
+++ b/awx/ui_next/src/components/ListHeader/ListHeader.jsx
@ -0,0 +1,140 @@
+import React, { Fragment } from 'react';
+import PropTypes, { arrayOf, shape, string, bool } from 'prop-types';
+import { withRouter } from 'react-router-dom';
+import styled from 'styled-components';
+
+import DataListToolbar from '@components/DataListToolbar';
+import FilterTags from '@components/FilterTags';
+
+import {
+  encodeNonDefaultQueryString,
+  parseQueryString,
+  addParams,
+  removeParams
+} from '@util/qs';
+import { QSConfig } from '@types';
+
+const EmptyStateControlsWrapper = styled.div`
+  display: flex;
+  margin-top: 20px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  justify-content: flex-end;
+
+  & > :not(:first-child)  {
+    margin-left: 20px;
+  }
+`;
+class ListHeader extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleSort = this.handleSort.bind(this);
+    this.handleRemove = this.handleRemove.bind(this);
+    this.handleRemoveAll = this.handleRemoveAll.bind(this);
+  }
+
+  getSortOrder () {
+    const { qsConfig, location } = this.props;
+    const queryParams = parseQueryString(qsConfig, location.search);
+    if (queryParams.order_by && queryParams.order_by.startsWith('-')) {
+      return [queryParams.order_by.substr(1), 'descending'];
+    }
+    return [queryParams.order_by, 'ascending'];
+  }
+
+  handleSearch (key, value) {
+    const { history, qsConfig } = this.props;
+    const { search } = history.location;
+    this.pushHistoryState(addParams(qsConfig, search, { [key]: value }));
+  }
+
+  handleRemove ({ key, value }) {
+    const { history, qsConfig } = this.props;
+    const { search } = history.location;
+    this.pushHistoryState(removeParams(qsConfig, search, { [key]: value }));
+  }
+
+  handleRemoveAll () {
+    this.pushHistoryState(null);
+  }
+
+  handleSort (key, order) {
+    const { history, qsConfig } = this.props;
+    const { search } = history.location;
+    this.pushHistoryState(addParams(qsConfig, search, {
+      order_by: order === 'ascending' ? key : `-${key}`,
+      page: null,
+    }));
+  }
+
+  pushHistoryState (params) {
+    const { history, qsConfig } = this.props;
+    const { pathname } = history.location;
+    const encodedParams = encodeNonDefaultQueryString(qsConfig, params);
+    history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname);
+  }
+
+  render () {
+    const {
+      emptyStateControls,
+      itemCount,
+      columns,
+      renderToolbar,
+      qsConfig
+    } = this.props;
+    const [orderBy, sortOrder] = this.getSortOrder();
+    return (
+      <Fragment>
+        {itemCount === 0 ? (
+          <Fragment>
+            <EmptyStateControlsWrapper>
+              {emptyStateControls}
+            </EmptyStateControlsWrapper>
+            <FilterTags
+              itemCount={itemCount}
+              qsConfig={qsConfig}
+              onRemove={this.handleRemove}
+              onRemoveAll={this.handleRemoveAll}
+            />
+          </Fragment>
+        ) : (
+          <Fragment>
+            {renderToolbar({
+              sortedColumnKey: orderBy,
+              sortOrder,
+              columns,
+              onSearch: this.handleSearch,
+              onSort: this.handleSort,
+            })}
+            <FilterTags
+              itemCount={itemCount}
+              qsConfig={qsConfig}
+              onRemove={this.handleRemove}
+              onRemoveAll={this.handleRemoveAll}
+            />
+          </Fragment>
+        )}
+      </Fragment>
+    );
+  }
+}
+
+ListHeader.propTypes = {
+  itemCount: PropTypes.number.isRequired,
+  qsConfig: QSConfig.isRequired,
+  columns: arrayOf(shape({
+    name: string.isRequired,
+    key: string.isRequired,
+    isSortable: bool,
+    isSearchable: bool
+  })).isRequired,
+  renderToolbar: PropTypes.func,
+};
+
+ListHeader.defaultProps = {
+  renderToolbar: (props) => (<DataListToolbar {...props} />),
+};
+
+export default withRouter(ListHeader);
--- a/awx/ui_next/src/components/ListHeader/ListHeader.test.jsx
+++ b/awx/ui_next/src/components/ListHeader/ListHeader.test.jsx
@ -0,0 +1,56 @@
+import React from 'react';
+import { createMemoryHistory } from 'history';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { sleep } from '@testUtils/testUtils';
+import ListHeader from './ListHeader';
+
+describe('ListHeader', () => {
+  const qsConfig = {
+    namespace: 'item',
+    defaultParams: { page: 1, page_size: 5, order_by: 'name' },
+    integerFields: [],
+  };
+  const renderToolbarFn = jest.fn();
+
+  test('initially renders without crashing', () => {
+    const wrapper = mountWithContexts(
+      <ListHeader
+        itemCount={50}
+        qsConfig={qsConfig}
+        columns={[{ name: 'foo', key: 'foo', isSearchable: true, isSortable: true }]}
+        renderToolbar={renderToolbarFn}
+      />
+    );
+    expect(wrapper.length).toBe(1);
+    wrapper.unmount();
+  });
+
+  test('should navigate when DataListToolbar calls onSort prop', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/teams'],
+    });
+    const wrapper = mountWithContexts(
+      <ListHeader
+        itemCount={7}
+        qsConfig={qsConfig}
+        columns={[{ name: 'name', key: 'name', isSearchable: true, isSortable: true }]}
+      />, { context: { router: { history } } }
+    );
+
+    const toolbar = wrapper.find('DataListToolbar');
+    expect(toolbar.prop('sortedColumnKey')).toEqual('name');
+    expect(toolbar.prop('sortOrder')).toEqual('ascending');
+    toolbar.prop('onSort')('name', 'descending');
+    expect(history.location.search).toEqual('?item.order_by=-name');
+    await sleep(0);
+    wrapper.update();
+
+    expect(toolbar.prop('sortedColumnKey')).toEqual('name');
+    // TODO: this assertion required updating queryParams prop. Consider
+    // fixing after #147 is done:
+    // expect(toolbar.prop('sortOrder')).toEqual('descending');
+    toolbar.prop('onSort')('name', 'ascending');
+    // since order_by = name is the default, that should be strip out of the search
+    expect(history.location.search).toEqual('');
+  });
+});
--- a/awx/ui_next/src/components/ListHeader/index.js
+++ b/awx/ui_next/src/components/ListHeader/index.js
@ -0,0 +1 @@
+export { default } from './ListHeader';
--- a/awx/ui_next/src/components/Lookup/Lookup.jsx
+++ b/awx/ui_next/src/components/Lookup/Lookup.jsx
@ -25,7 +25,7 @@ import DataListToolbar from '../DataListToolbar';
 import CheckboxListItem from '../CheckboxListItem';
 import SelectedList from '../SelectedList';
 import { ChipGroup, Chip } from '../Chip';
-import { getQSConfig, parseNamespacedQueryString } from '../../util/qs';
+import { getQSConfig, parseQueryString } from '../../util/qs';

 const InputGroup = styled(PFInputGroup)`
  ${props =>
@ -95,7 +95,7 @@ class Lookup extends React.Component {
      getItems,
      location: { search },
    } = this.props;
-    const queryParams = parseNamespacedQueryString(this.qsConfig, search);
+    const queryParams = parseQueryString(this.qsConfig, search);

    this.setState({ error: false });
    try {
--- a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
@ -4,99 +4,54 @@ import { DataList } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { withRouter } from 'react-router-dom';
-import styled from 'styled-components';

-import ContentEmpty from '../ContentEmpty';
-import ContentError from '../ContentError';
-import ContentLoading from '../ContentLoading';
-import Pagination from '../Pagination';
-import DataListToolbar from '../DataListToolbar';
-import PaginatedDataListItem from './PaginatedDataListItem';
+import ListHeader from '@components/ListHeader';
+import ContentEmpty from '@components/ContentEmpty';
+import ContentError from '@components/ContentError';
+import ContentLoading from '@components/ContentLoading';
+import Pagination from '@components/Pagination';
+import DataListToolbar from '@components/DataListToolbar';
+
 import {
-  parseNamespacedQueryString,
-  updateNamespacedQueryString,
-} from '../../util/qs';
-import { pluralize, ucFirst } from '../../util/strings';
-import { QSConfig } from '../../types';
+  encodeNonDefaultQueryString,
+  parseQueryString,
+  addParams
+} from '@util/qs';
+import { pluralize, ucFirst } from '@util/strings';

-const EmptyStateControlsWrapper = styled.div`
-  display: flex;
-  margin-top: 20px;
-  margin-right: 20px;
-  margin-bottom: 20px;
-  justify-content: flex-end;
+import { QSConfig } from '@types';
+
+import PaginatedDataListItem from './PaginatedDataListItem';

-  & > :not(:first-child) {
-    margin-left: 20px;
-  }
-`;
 class PaginatedDataList extends React.Component {
-  constructor(props) {
+  constructor (props) {
    super(props);
    this.handleSetPage = this.handleSetPage.bind(this);
    this.handleSetPageSize = this.handleSetPageSize.bind(this);
-    this.handleSort = this.handleSort.bind(this);
  }

-  componentDidUpdate(prevProps) {
-    const { itemCount: prevItemCount } = prevProps;
-    const { itemCount } = this.props;
-    if (prevItemCount !== itemCount) {
-      this.getCurrPage(itemCount);
-    }
-  }
-
-  getSortOrder() {
-    const { qsConfig, location } = this.props;
-    const queryParams = parseNamespacedQueryString(qsConfig, location.search);
-    if (queryParams.order_by && queryParams.order_by.startsWith('-')) {
-      return [queryParams.order_by.substr(1), 'descending'];
-    }
-    return [queryParams.order_by, 'ascending'];
-  }
-
-  getCurrPage(itemCount) {
-    if (itemCount < 0) {
-      return;
-    }
-    const { qsConfig, location } = this.props;
-    const { page_size, page: currPage } = parseNamespacedQueryString(
-      qsConfig,
-      location.search
-    );
-    const lastPage = Math.ceil(itemCount / page_size);
-    if (currPage > lastPage) {
-      this.pushHistoryState({ page: lastPage || 1 });
-    }
-  }
-
-  handleSetPage(event, pageNumber) {
-    this.pushHistoryState({ page: pageNumber });
-  }
-
-  handleSetPageSize(event, pageSize) {
-    this.pushHistoryState({ page_size: pageSize });
-  }
-
-  handleSort(sortedColumnKey, sortOrder) {
-    this.pushHistoryState({
-      order_by:
-        sortOrder === 'ascending' ? sortedColumnKey : `-${sortedColumnKey}`,
-      page: null,
-    });
-  }
-
-  pushHistoryState(newParams) {
+  handleSetPage (event, pageNumber) {
    const { history, qsConfig } = this.props;
-    const { pathname, search } = history.location;
-    const qs = updateNamespacedQueryString(qsConfig, search, newParams);
-    history.push(`${pathname}?${qs}`);
+    const { search } = history.location;
+    this.pushHistoryState(addParams(qsConfig, search, { page: pageNumber }));
  }

-  render() {
-    const [orderBy, sortOrder] = this.getSortOrder();
+  handleSetPageSize (event, pageSize) {
+    const { history, qsConfig } = this.props;
+    const { search } = history.location;
+    this.pushHistoryState(addParams(qsConfig, search, { page_size: pageSize }));
+  }
+
+  pushHistoryState (params) {
+    const { history, qsConfig } = this.props;
+    const { pathname } = history.location;
+    const encodedParams = encodeNonDefaultQueryString(qsConfig, params);
+    history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname);
+  }
+
+  render () {
    const {
-      contentError,
+      hasContentError,
      hasContentLoading,
      emptyStateControls,
      items,
@ -111,46 +66,36 @@ class PaginatedDataList extends React.Component {
      i18n,
      renderToolbar,
    } = this.props;
-    const columns = toolbarColumns.length
-      ? toolbarColumns
-      : [{ name: i18n._(t`Name`), key: 'name', isSortable: true }];
-    const queryParams = parseNamespacedQueryString(qsConfig, location.search);
+    const columns = toolbarColumns.length ? toolbarColumns : [{ name: i18n._(t`Name`), key: 'name', isSortable: true, isSearchable: true }];
+    const queryParams = parseQueryString(qsConfig, location.search);

    const itemDisplayName = ucFirst(pluralize(itemName));
-    const itemDisplayNamePlural = ucFirst(
-      itemNamePlural || pluralize(itemName)
-    );
+    const itemDisplayNamePlural = ucFirst(itemNamePlural || pluralize(itemName));

    const dataListLabel = i18n._(t`${itemDisplayName} List`);
-    const emptyContentMessage = i18n._(
-      t`Please add ${itemDisplayNamePlural} to populate this list `
-    );
+    const emptyContentMessage = i18n._(t`Please add ${itemDisplayNamePlural} to populate this list `);
    const emptyContentTitle = i18n._(t`No ${itemDisplayNamePlural} Found `);

    let Content;
    if (hasContentLoading && items.length <= 0) {
-      Content = <ContentLoading />;
-    } else if (contentError) {
-      Content = <ContentError error={contentError} />;
+      Content = (<ContentLoading />);
+    } else if (hasContentError) {
+      Content = (<ContentError />);
    } else if (items.length <= 0) {
-      Content = (
-        <ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />
-      );
+      Content = (<ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />);
    } else {
-      Content = (
-        <DataList aria-label={dataListLabel}>{items.map(renderItem)}</DataList>
-      );
+      Content = (<DataList aria-label={dataListLabel}>{items.map(renderItem)}</DataList>);
    }

    if (items.length <= 0) {
      return (
        <Fragment>
-          {emptyStateControls && (
-            <EmptyStateControlsWrapper>
-              {emptyStateControls}
-            </EmptyStateControlsWrapper>
-          )}
-          {emptyStateControls && <div css="border-bottom: 1px solid #d2d2d2" />}
+          <ListHeader
+            emptyStateControls={emptyStateControls}
+            itemCount={itemCount}
+            columns={columns}
+            qsConfig={qsConfig}
+          />
          {Content}
        </Fragment>
      );
@ -158,29 +103,24 @@ class PaginatedDataList extends React.Component {

    return (
      <Fragment>
-        {renderToolbar({
-          sortedColumnKey: orderBy,
-          sortOrder,
-          columns,
-          onSearch: () => {},
-          onSort: this.handleSort,
-        })}
+        <ListHeader
+          itemCount={itemCount}
+          renderToolbar={renderToolbar}
+          columns={columns}
+          qsConfig={qsConfig}
+        />
        {Content}
        <Pagination
          variant="bottom"
          itemCount={itemCount}
          page={queryParams.page || 1}
          perPage={queryParams.page_size}
-          perPageOptions={
-            showPageSizeOptions
-              ? [
-                  { title: '5', value: 5 },
-                  { title: '10', value: 10 },
-                  { title: '20', value: 20 },
-                  { title: '50', value: 50 },
-                ]
-              : []
-          }
+          perPageOptions={showPageSizeOptions ? [
+            { title: '5', value: 5 },
+            { title: '10', value: 10 },
+            { title: '20', value: 20 },
+            { title: '50', value: 50 }
+          ] : []}
          onSetPage={this.handleSetPage}
          onPerPageSelect={this.handleSetPageSize}
        />
@ -202,28 +142,26 @@ PaginatedDataList.propTypes = {
  itemNamePlural: PropTypes.string,
  qsConfig: QSConfig.isRequired,
  renderItem: PropTypes.func,
-  toolbarColumns: arrayOf(
-    shape({
-      name: string.isRequired,
-      key: string.isRequired,
-      isSortable: bool,
-    })
-  ),
+  toolbarColumns: arrayOf(shape({
+    name: string.isRequired,
+    key: string.isRequired,
+    isSortable: bool,
+  })),
  showPageSizeOptions: PropTypes.bool,
  renderToolbar: PropTypes.func,
  hasContentLoading: PropTypes.bool,
-  contentError: PropTypes.shape(),
+  hasContentError: PropTypes.bool,
 };

 PaginatedDataList.defaultProps = {
  hasContentLoading: false,
-  contentError: null,
+  hasContentError: false,
  toolbarColumns: [],
  itemName: 'item',
  itemNamePlural: '',
  showPageSizeOptions: true,
-  renderItem: item => <PaginatedDataListItem key={item.id} item={item} />,
-  renderToolbar: props => <DataListToolbar {...props} />,
+  renderItem: (item) => (<PaginatedDataListItem key={item.id} item={item} />),
+  renderToolbar: (props) => (<DataListToolbar {...props} />),
 };

 export { PaginatedDataList as _PaginatedDataList };
--- a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.test.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.test.jsx
@ -1,7 +1,6 @@
 import React from 'react';
 import { createMemoryHistory } from 'history';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
-import { sleep } from '../../../testUtils/testUtils';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import PaginatedDataList from './PaginatedDataList';

 const mockData = [
@ -10,13 +9,11 @@ const mockData = [
  { id: 3, name: 'three', url: '/org/team/3' },
  { id: 4, name: 'four', url: '/org/team/4' },
  { id: 5, name: 'five', url: '/org/team/5' },
-  { id: 6, name: 'six', url: '/org/team/6' },
-  { id: 7, name: 'seven', url: '/org/team/7' },
 ];

 const qsConfig = {
  namespace: 'item',
-  defaultParams: { page: 1, page_size: 5 },
+  defaultParams: { page: 1, page_size: 5, order_by: 'name' },
  integerFields: [],
 };

@ -40,40 +37,6 @@ describe('<PaginatedDataList />', () => {
    );
  });

-  test('should navigate when DataListToolbar calls onSort prop', async () => {
-    const history = createMemoryHistory({
-      initialEntries: ['/organizations/1/teams'],
-    });
-    const wrapper = mountWithContexts(
-      <PaginatedDataList
-        items={mockData}
-        itemCount={7}
-        queryParams={{
-          page: 1,
-          page_size: 5,
-          order_by: 'name',
-        }}
-        qsConfig={qsConfig}
-      />,
-      { context: { router: { history } } }
-    );
-
-    const toolbar = wrapper.find('DataListToolbar');
-    expect(toolbar.prop('sortedColumnKey')).toEqual('name');
-    expect(toolbar.prop('sortOrder')).toEqual('ascending');
-    toolbar.prop('onSort')('name', 'descending');
-    expect(history.location.search).toEqual('?item.order_by=-name');
-    await sleep(0);
-    wrapper.update();
-
-    expect(toolbar.prop('sortedColumnKey')).toEqual('name');
-    // TODO: this assertion required updating queryParams prop. Consider
-    // fixing after #147 is done:
-    // expect(toolbar.prop('sortOrder')).toEqual('descending');
-    toolbar.prop('onSort')('name', 'ascending');
-    expect(history.location.search).toEqual('?item.order_by=name');
-  });
-
  test('should navigate to page when Pagination calls onSetPage prop', () => {
    const history = createMemoryHistory({
      initialEntries: ['/organizations/1/teams'],
@ -88,8 +51,7 @@ describe('<PaginatedDataList />', () => {
          order_by: 'name',
        }}
        qsConfig={qsConfig}
-      />,
-      { context: { router: { history } } }
+      />, { context: { router: { history } } }
    );

    const pagination = wrapper.find('Pagination');
@ -97,7 +59,8 @@ describe('<PaginatedDataList />', () => {
    expect(history.location.search).toEqual('?item.page=2');
    wrapper.update();
    pagination.prop('onSetPage')(null, 1);
-    expect(history.location.search).toEqual('?item.page=1');
+    // since page = 1 is the default, that should be strip out of the search
+    expect(history.location.search).toEqual('');
  });

  test('should navigate to page when Pagination calls onPerPageSelect prop', () => {
@ -114,48 +77,15 @@ describe('<PaginatedDataList />', () => {
          order_by: 'name',
        }}
        qsConfig={qsConfig}
-      />,
-      { context: { router: { history } } }
+      />, { context: { router: { history } } }
    );

    const pagination = wrapper.find('Pagination');
-    pagination.prop('onPerPageSelect')(null, 5);
-    expect(history.location.search).toEqual('?item.page_size=5');
-    wrapper.update();
    pagination.prop('onPerPageSelect')(null, 25);
    expect(history.location.search).toEqual('?item.page_size=25');
-  });
-  test('should navigate to correct current page when list items change', () => {
-    const customQSConfig = {
-      namespace: 'foo',
-      defaultParams: { page: 7, page_size: 1 }, // show only 1 item per page
-      integerFields: [],
-    };
-    const testParams = [5, 25, 0, -1]; // number of items
-    const expected = [5, 5, 1, 1]; // expected current page
-    const history = createMemoryHistory({
-      initialEntries: ['/organizations/1/teams'],
-    });
-    const wrapper = mountWithContexts(
-      <PaginatedDataList
-        items={mockData}
-        itemCount={7}
-        queryParams={{
-          page: 1,
-          page_size: 5,
-          order_by: 'name',
-        }}
-        qsConfig={customQSConfig}
-      />,
-      { context: { router: { history } } }
-    );
-    testParams.forEach((param, i) => {
-      wrapper.setProps({ itemCount: param });
-      expect(history.location.search).toEqual(
-        `?${customQSConfig.namespace}.page=${expected[i]}`
-      );
-      wrapper.update();
-    });
-    wrapper.unmount();
+    wrapper.update();
+    // since page_size = 5 is the default, that should be strip out of the search
+    pagination.prop('onPerPageSelect')(null, 5);
+    expect(history.location.search).toEqual('');
  });
 });
--- a/awx/ui_next/src/components/Search/Search.jsx
+++ b/awx/ui_next/src/components/Search/Search.jsx
@ -8,9 +8,13 @@ import {
  DropdownPosition,
  DropdownToggle,
  DropdownItem,
-  TextInput as PFTextInput,
+  Form,
+  FormGroup,
+  TextInput as PFTextInput
 } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import {
+  SearchIcon
+} from '@patternfly/react-icons';

 import styled from 'styled-components';

@ -25,8 +29,7 @@ const Button = styled(PFButton)`
 `;

 const Dropdown = styled(PFDropdown)`
-  &&& {
-    /* Higher specificity required because we are selecting unclassed elements */
+  &&& { /* Higher specificity required because we are selecting unclassed elements */
    > button {
      min-height: 30px;
      min-width: 70px;
@ -34,22 +37,31 @@ const Dropdown = styled(PFDropdown)`
      padding: 0 10px;
      margin: 0px;

-      > span {
-        /* text element */
+      > span { /* text element */
        width: auto;
      }

-      > svg {
-        /* caret icon */
+      > svg { /* caret icon */
        margin: 0px;
        padding-top: 3px;
        padding-left: 3px;
      }
    }
-  }
+  }  
 `;
+
+const NoOptionDropdown = styled.div`
+  align-self: stretch;
+  border: 1px solid grey;
+  padding: 3px 7px;
+`;
+
+const InputFormGroup = styled(FormGroup)`
+  flex: 1;
+`;
+
 class Search extends React.Component {
-  constructor(props) {
+  constructor (props) {
    super(props);

    const { sortedColumnKey } = this.props;
@ -65,11 +77,11 @@ class Search extends React.Component {
    this.handleSearch = this.handleSearch.bind(this);
  }

-  handleDropdownToggle(isSearchDropdownOpen) {
+  handleDropdownToggle (isSearchDropdownOpen) {
    this.setState({ isSearchDropdownOpen });
  }

-  handleDropdownSelect({ target }) {
+  handleDropdownSelect ({ target }) {
    const { columns } = this.props;
    const { innerText } = target;

@ -77,28 +89,38 @@ class Search extends React.Component {
    this.setState({ isSearchDropdownOpen: false, searchKey });
  }

-  handleSearch() {
-    const { searchValue } = this.state;
+  handleSearch (e) {
+    // keeps page from fully reloading
+    e.preventDefault();
+
+    const { searchKey, searchValue } = this.state;
    const { onSearch } = this.props;

-    onSearch(searchValue);
+    // TODO: probably not _always_ add icontains.  I don't think icontains works for numbers.
+    onSearch(`${searchKey}__icontains`, searchValue);
+
+    this.setState({ searchValue: '' });
  }

-  handleSearchInputChange(searchValue) {
+  handleSearchInputChange (searchValue) {
    this.setState({ searchValue });
  }

-  render() {
+  render () {
    const { up } = DropdownPosition;
-    const { columns, i18n } = this.props;
-    const { isSearchDropdownOpen, searchKey, searchValue } = this.state;
-
-    const { name: searchColumnName } = columns.find(
-      ({ key }) => key === searchKey
-    );
+    const {
+      columns,
+      i18n
+    } = this.props;
+    const {
+      isSearchDropdownOpen,
+      searchKey,
+      searchValue,
+    } = this.state;
+    const { name: searchColumnName } = columns.find(({ key }) => key === searchKey);

    const searchDropdownItems = columns
-      .filter(({ key }) => key !== searchKey)
+      .filter(({ key, isSearchable }) => isSearchable && key !== searchKey)
      .map(({ key, name }) => (
        <DropdownItem key={key} component="button">
          {name}
@ -106,37 +128,56 @@ class Search extends React.Component {
      ));

    return (
-      <div className="pf-c-input-group">
-        <Dropdown
-          onToggle={this.handleDropdownToggle}
-          onSelect={this.handleDropdownSelect}
-          direction={up}
-          isOpen={isSearchDropdownOpen}
-          toggle={
-            <DropdownToggle
-              id="awx-search"
-              onToggle={this.handleDropdownToggle}
+      <Form autoComplete="off">
+        <div className="pf-c-input-group">
+          {searchDropdownItems.length > 0 ? (
+            <FormGroup
+              fieldId="searchKeyDropdown"
+              label={(<span className="pf-screen-reader">{i18n._(t`Search key dropdown`)}</span>)}
            >
+              <Dropdown
+                onToggle={this.handleDropdownToggle}
+                onSelect={this.handleDropdownSelect}
+                direction={up}
+                isOpen={isSearchDropdownOpen}
+                toggle={(
+                  <DropdownToggle
+                    id="awx-search"
+                    onToggle={this.handleDropdownToggle}
+                  >
+                    {searchColumnName}
+                  </DropdownToggle>
+                )}
+                dropdownItems={searchDropdownItems}
+              />
+            </FormGroup>
+          ) : (
+            <NoOptionDropdown>
              {searchColumnName}
-            </DropdownToggle>
-          }
-          dropdownItems={searchDropdownItems}
-        />
-        <TextInput
-          type="search"
-          aria-label={i18n._(t`Search text input`)}
-          value={searchValue}
-          onChange={this.handleSearchInputChange}
-          style={{ height: '30px' }}
-        />
-        <Button
-          variant="tertiary"
-          aria-label={i18n._(t`Search`)}
-          onClick={this.handleSearch}
-        >
-          <SearchIcon />
-        </Button>
-      </div>
+            </NoOptionDropdown>
+          )}
+          <InputFormGroup
+            fieldId="searchValueTextInput"
+            label={(<span className="pf-screen-reader">{i18n._(t`Search value text input`)}</span>)}
+          >
+            <TextInput
+              type="search"
+              aria-label={i18n._(t`Search text input`)}
+              value={searchValue}
+              onChange={this.handleSearchInputChange}
+              style={{ height: '30px' }}
+            />
+          </InputFormGroup>
+          <Button
+            variant="tertiary"
+            type="submit"
+            aria-label={i18n._(t`Search submit button`)}
+            onClick={this.handleSearch}
+          >
+            <SearchIcon />
+          </Button>
+        </div>
+      </Form>
    );
  }
 }
@ -149,7 +190,7 @@ Search.propTypes = {

 Search.defaultProps = {
  onSearch: null,
-  sortedColumnKey: 'name',
+  sortedColumnKey: 'name'
 };

 export default withI18n()(Search);
--- a/awx/ui_next/src/components/Search/Search.test.jsx
+++ b/awx/ui_next/src/components/Search/Search.test.jsx
@ -12,15 +12,19 @@ describe('<Search />', () => {
  });

  test('it triggers the expected callbacks', () => {
-    const columns = [{ name: 'Name', key: 'name', isSortable: true }];
+    const columns = [{ name: 'Name', key: 'name', isSortable: true, isSearchable: true }];

-    const searchBtn = 'button[aria-label="Search"]';
+    const searchBtn = 'button[aria-label="Search submit button"]';
    const searchTextInput = 'input[aria-label="Search text input"]';

    const onSearch = jest.fn();

    search = mountWithContexts(
-      <Search sortedColumnKey="name" columns={columns} onSearch={onSearch} />
+      <Search
+        sortedColumnKey="name"
+        columns={columns}
+        onSearch={onSearch}
+      />
    );

    search.find(searchTextInput).instance().value = 'test-321';
@ -28,14 +32,18 @@ describe('<Search />', () => {
    search.find(searchBtn).simulate('click');

    expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toBeCalledWith('test-321');
+    expect(onSearch).toBeCalledWith('name__icontains', 'test-321');
  });

  test('handleDropdownToggle properly updates state', async () => {
-    const columns = [{ name: 'Name', key: 'name', isSortable: true }];
+    const columns = [{ name: 'Name', key: 'name', isSortable: true, isSearchable: true }];
    const onSearch = jest.fn();
    const wrapper = mountWithContexts(
-      <Search sortedColumnKey="name" columns={columns} onSearch={onSearch} />
+      <Search
+        sortedColumnKey="name"
+        columns={columns}
+        onSearch={onSearch}
+      />
    ).find('Search');
    expect(wrapper.state('isSearchDropdownOpen')).toEqual(false);
    wrapper.instance().handleDropdownToggle(true);
@ -44,17 +52,19 @@ describe('<Search />', () => {

  test('handleDropdownSelect properly updates state', async () => {
    const columns = [
-      { name: 'Name', key: 'name', isSortable: true },
-      { name: 'Description', key: 'description', isSortable: true },
+      { name: 'Name', key: 'name', isSortable: true, isSearchable: true },
+      { name: 'Description', key: 'description', isSortable: true, isSearchable: true }
    ];
    const onSearch = jest.fn();
    const wrapper = mountWithContexts(
-      <Search sortedColumnKey="name" columns={columns} onSearch={onSearch} />
+      <Search
+        sortedColumnKey="name"
+        columns={columns}
+        onSearch={onSearch}
+      />
    ).find('Search');
    expect(wrapper.state('searchKey')).toEqual('name');
-    wrapper
-      .instance()
-      .handleDropdownSelect({ target: { innerText: 'Description' } });
+    wrapper.instance().handleDropdownSelect({ target: { innerText: 'Description' } });
    expect(wrapper.state('searchKey')).toEqual('description');
  });
 });
--- a/awx/ui_next/src/components/Sort/Sort.test.jsx
+++ b/awx/ui_next/src/components/Sort/Sort.test.jsx
@ -12,7 +12,7 @@ describe('<Sort />', () => {
  });

  test('it triggers the expected callbacks', () => {
-    const columns = [{ name: 'Name', key: 'name', isSortable: true }];
+    const columns = [{ name: 'Name', key: 'name', isSortable: true, isSearchable: true }];

    const sortBtn = 'button[aria-label="Sort"]';

@ -38,7 +38,7 @@ describe('<Sort />', () => {
      { name: 'Foo', key: 'foo', isSortable: true },
      { name: 'Bar', key: 'bar', isSortable: true },
      { name: 'Bakery', key: 'bakery', isSortable: true },
-      { name: 'Baz', key: 'baz' },
+      { name: 'Baz', key: 'baz' }
    ];

    const onSort = jest.fn();
@ -62,7 +62,7 @@ describe('<Sort />', () => {
      { name: 'Foo', key: 'foo', isSortable: true },
      { name: 'Bar', key: 'bar', isSortable: true },
      { name: 'Bakery', key: 'bakery', isSortable: true },
-      { name: 'Baz', key: 'baz' },
+      { name: 'Baz', key: 'baz' }
    ];

    const onSort = jest.fn();
@ -86,7 +86,7 @@ describe('<Sort />', () => {
      { name: 'Foo', key: 'foo', isSortable: true },
      { name: 'Bar', key: 'bar', isSortable: true },
      { name: 'Bakery', key: 'bakery', isSortable: true },
-      { name: 'Baz', key: 'baz' },
+      { name: 'Baz', key: 'baz' }
    ];

    const onSort = jest.fn();
@ -109,7 +109,7 @@ describe('<Sort />', () => {
      { name: 'Foo', key: 'foo', isSortable: true },
      { name: 'Bar', key: 'bar', isSortable: true },
      { name: 'Bakery', key: 'bakery', isSortable: true },
-      { name: 'Baz', key: 'baz' },
+      { name: 'Baz', key: 'baz' }
    ];

    const onSort = jest.fn();
@ -133,12 +133,8 @@ describe('<Sort />', () => {
    const downAlphaIconSelector = 'SortAlphaDownIcon';
    const upAlphaIconSelector = 'SortAlphaUpIcon';

-    const numericColumns = [
-      { name: 'ID', key: 'id', isSortable: true, isNumeric: true },
-    ];
-    const alphaColumns = [
-      { name: 'Name', key: 'name', isSortable: true, isNumeric: false },
-    ];
+    const numericColumns = [{ name: 'ID', key: 'id', isSortable: true, isNumeric: true }];
+    const alphaColumns = [{ name: 'Name', key: 'name', isSortable: true, isNumeric: false }];
    const onSort = jest.fn();

    sort = mountWithContexts(
--- a/awx/ui_next/src/screens/Job/JobList/JobList.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobList.jsx
@ -2,16 +2,19 @@ import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Card, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import {
+  Card,
+  PageSection,
+  PageSectionVariants,
+} from '@patternfly/react-core';

 import { UnifiedJobsAPI } from '@api';
 import AlertModal from '@components/AlertModal';
 import DatalistToolbar from '@components/DataListToolbar';
-import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, {
-  ToolbarDeleteButton,
+  ToolbarDeleteButton
 } from '@components/PaginatedDataList';
-import { getQSConfig, parseNamespacedQueryString } from '@util/qs';
+import { getQSConfig, parseQueryString } from '@util/qs';

 import JobListItem from './JobListItem';

@ -23,13 +26,13 @@ const QS_CONFIG = getQSConfig('job', {
 });

 class JobList extends Component {
-  constructor(props) {
+  constructor (props) {
    super(props);

    this.state = {
      hasContentLoading: true,
-      contentError: null,
-      deletionError: null,
+      hasContentError: false,
+      deletionError: false,
      selected: [],
      jobs: [],
      itemCount: 0,
@ -41,28 +44,28 @@ class JobList extends Component {
    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
  }

-  componentDidMount() {
+  componentDidMount () {
    this.loadJobs();
  }

-  componentDidUpdate(prevProps) {
+  componentDidUpdate (prevProps) {
    const { location } = this.props;
    if (location !== prevProps.location) {
      this.loadJobs();
    }
  }

-  handleDeleteErrorClose() {
-    this.setState({ deletionError: null });
+  handleDeleteErrorClose () {
+    this.setState({ deletionError: false });
  }

-  handleSelectAll(isSelected) {
+  handleSelectAll (isSelected) {
    const { jobs } = this.state;
    const selected = isSelected ? [...jobs] : [];
    this.setState({ selected });
  }

-  handleSelect(item) {
+  handleSelect (item) {
    const { selected } = this.state;
    if (selected.some(s => s.id === item.id)) {
      this.setState({ selected: selected.filter(s => s.id !== item.id) });
@ -71,49 +74,50 @@ class JobList extends Component {
    }
  }

-  async handleDelete() {
+  async handleDelete () {
    const { selected } = this.state;
-    this.setState({ hasContentLoading: true });
+    this.setState({ hasContentLoading: true, deletionError: false });
    try {
      await Promise.all(selected.map(({ id }) => UnifiedJobsAPI.destroy(id)));
    } catch (err) {
-      this.setState({ deletionError: err });
+      this.setState({ deletionError: true });
    } finally {
      await this.loadJobs();
    }
  }

-  async loadJobs() {
+  async loadJobs () {
    const { location } = this.props;
-    const params = parseNamespacedQueryString(QS_CONFIG, location.search);
+    const params = parseQueryString(QS_CONFIG, location.search);

-    this.setState({ contentError: null, hasContentLoading: true });
+    this.setState({ hasContentError: false, hasContentLoading: true });
    try {
-      const {
-        data: { count, results },
-      } = await UnifiedJobsAPI.read(params);
+      const { data: { count, results } } = await UnifiedJobsAPI.read(params);
      this.setState({
        itemCount: count,
        jobs: results,
        selected: [],
      });
    } catch (err) {
-      this.setState({ contentError: err });
+      this.setState({ hasContentError: true });
    } finally {
      this.setState({ hasContentLoading: false });
    }
  }

-  render() {
+  render () {
    const {
-      contentError,
+      hasContentError,
      hasContentLoading,
      deletionError,
      jobs,
      itemCount,
      selected,
    } = this.state;
-    const { match, i18n } = this.props;
+    const {
+      match,
+      i18n
+    } = this.props;
    const { medium } = PageSectionVariants;
    const isAllSelected = selected.length === jobs.length;
    const itemName = i18n._(t`Job`);
@ -121,22 +125,17 @@ class JobList extends Component {
      <PageSection variant={medium}>
        <Card>
          <PaginatedDataList
-            contentError={contentError}
+            hasContentError={hasContentError}
            hasContentLoading={hasContentLoading}
            items={jobs}
            itemCount={itemCount}
            itemName={itemName}
            qsConfig={QS_CONFIG}
            toolbarColumns={[
-              { name: i18n._(t`Name`), key: 'name', isSortable: true },
-              {
-                name: i18n._(t`Finished`),
-                key: 'finished',
-                isSortable: true,
-                isNumeric: true,
-              },
+              { name: i18n._(t`Name`), key: 'name', isSortable: true, isSearchable: true },
+              { name: i18n._(t`Finished`), key: 'finished', isSortable: true, isNumeric: true },
            ]}
-            renderToolbar={props => (
+            renderToolbar={(props) => (
              <DatalistToolbar
                {...props}
                showSelectAll
@ -149,11 +148,11 @@ class JobList extends Component {
                    onDelete={this.handleDelete}
                    itemsToDelete={selected}
                    itemName={itemName}
-                  />,
+                  />
                ]}
              />
            )}
-            renderItem={job => (
+            renderItem={(job) => (
              <JobListItem
                key={job.id}
                value={job.name}
@ -172,7 +171,6 @@ class JobList extends Component {
          onClose={this.handleDeleteErrorClose}
        >
          {i18n._(t`Failed to delete one or more jobs.`)}
-          <ErrorDetail error={deletionError} />
        </AlertModal>
      </PageSection>
    );
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
@ -7,14 +7,11 @@ import { OrganizationsAPI, TeamsAPI, UsersAPI } from '@api';
 import AddResourceRole from '@components/AddRole/AddResourceRole';
 import AlertModal from '@components/AlertModal';
 import DataListToolbar from '@components/DataListToolbar';
-import ErrorDetail from '@components/ErrorDetail';
-import PaginatedDataList, {
-  ToolbarAddButton,
-} from '@components/PaginatedDataList';
+import PaginatedDataList, { ToolbarAddButton } from '@components/PaginatedDataList';
 import {
  getQSConfig,
  encodeQueryString,
-  parseNamespacedQueryString,
+  parseQueryString
 } from '@util/qs';
 import { Organization } from '@types';

@ -32,13 +29,13 @@ class OrganizationAccess extends React.Component {
    organization: Organization.isRequired,
  };

-  constructor(props) {
+  constructor (props) {
    super(props);
    this.state = {
      accessRecords: [],
-      contentError: null,
+      hasContentError: false,
      hasContentLoading: true,
-      deletionError: null,
+      hasDeletionError: false,
      deletionRecord: null,
      deletionRole: null,
      isAddModalOpen: false,
@ -54,61 +51,58 @@ class OrganizationAccess extends React.Component {
    this.handleDeleteOpen = this.handleDeleteOpen.bind(this);
  }

-  componentDidMount() {
+  componentDidMount () {
    this.loadAccessList();
  }

-  componentDidUpdate(prevProps) {
+  componentDidUpdate (prevProps) {
    const { location } = this.props;

-    const prevParams = parseNamespacedQueryString(
-      QS_CONFIG,
-      prevProps.location.search
-    );
-    const currentParams = parseNamespacedQueryString(
-      QS_CONFIG,
-      location.search
-    );
+    const prevParams = parseQueryString(QS_CONFIG, prevProps.location.search);
+    const currentParams = parseQueryString(QS_CONFIG, location.search);

    if (encodeQueryString(currentParams) !== encodeQueryString(prevParams)) {
      this.loadAccessList();
    }
  }

-  async loadAccessList() {
+  async loadAccessList () {
    const { organization, location } = this.props;
-    const params = parseNamespacedQueryString(QS_CONFIG, location.search);
+    const params = parseQueryString(QS_CONFIG, location.search);

-    this.setState({ contentError: null, hasContentLoading: true });
+    this.setState({ hasContentError: false, hasContentLoading: true });
    try {
      const {
-        data: { results: accessRecords = [], count: itemCount = 0 },
+        data: {
+          results: accessRecords = [],
+          count: itemCount = 0
+        }
      } = await OrganizationsAPI.readAccessList(organization.id, params);
      this.setState({ itemCount, accessRecords });
-    } catch (err) {
-      this.setState({ contentError: err });
+    } catch (error) {
+      this.setState({ hasContentError: true });
    } finally {
      this.setState({ hasContentLoading: false });
    }
  }

-  handleDeleteOpen(deletionRole, deletionRecord) {
+  handleDeleteOpen (deletionRole, deletionRecord) {
    this.setState({ deletionRole, deletionRecord });
  }

-  handleDeleteCancel() {
+  handleDeleteCancel () {
    this.setState({ deletionRole: null, deletionRecord: null });
  }

-  handleDeleteErrorClose() {
+  handleDeleteErrorClose () {
    this.setState({
-      deletionError: null,
+      hasDeletionError: false,
      deletionRecord: null,
-      deletionRole: null,
+      deletionRole: null
    });
  }

-  async handleDeleteConfirm() {
+  async handleDeleteConfirm () {
    const { deletionRole, deletionRecord } = this.state;

    if (!deletionRole || !deletionRecord) {
@ -117,10 +111,7 @@ class OrganizationAccess extends React.Component {

    let promise;
    if (typeof deletionRole.team_id !== 'undefined') {
-      promise = TeamsAPI.disassociateRole(
-        deletionRole.team_id,
-        deletionRole.id
-      );
+      promise = TeamsAPI.disassociateRole(deletionRole.team_id, deletionRole.id);
    } else {
      promise = UsersAPI.disassociateRole(deletionRecord.id, deletionRole.id);
    }
@ -130,72 +121,64 @@ class OrganizationAccess extends React.Component {
      await promise.then(this.loadAccessList);
      this.setState({
        deletionRole: null,
-        deletionRecord: null,
+        deletionRecord: null
      });
-    } catch (err) {
+    } catch (error) {
      this.setState({
        hasContentLoading: false,
-        deletionError: err,
+        hasDeletionError: true
      });
    }
  }

-  handleAddClose() {
+  handleAddClose () {
    this.setState({ isAddModalOpen: false });
  }

-  handleAddOpen() {
+  handleAddOpen () {
    this.setState({ isAddModalOpen: true });
  }

-  handleAddSuccess() {
+  handleAddSuccess () {
    this.setState({ isAddModalOpen: false });
    this.loadAccessList();
  }

-  render() {
+  render () {
    const { organization, i18n } = this.props;
    const {
      accessRecords,
-      contentError,
+      hasContentError,
      hasContentLoading,
      deletionRole,
      deletionRecord,
-      deletionError,
+      hasDeletionError,
      itemCount,
      isAddModalOpen,
    } = this.state;
    const canEdit = organization.summary_fields.user_capabilities.edit;
-    const isDeleteModalOpen =
-      !hasContentLoading && !deletionError && deletionRole;
+    const isDeleteModalOpen = !hasContentLoading && !hasDeletionError && deletionRole;

    return (
      <Fragment>
        <PaginatedDataList
-          error={contentError}
+          hasContentError={hasContentError}
          hasContentLoading={hasContentLoading}
          items={accessRecords}
          itemCount={itemCount}
          itemName="role"
          qsConfig={QS_CONFIG}
          toolbarColumns={[
-            { name: i18n._(t`Name`), key: 'first_name', isSortable: true },
-            { name: i18n._(t`Username`), key: 'username', isSortable: true },
-            { name: i18n._(t`Last Name`), key: 'last_name', isSortable: true },
+            { name: i18n._(t`First Name`), key: 'first_name', isSortable: true, isSearchable: true },
+            { name: i18n._(t`Username`), key: 'username', isSortable: true, isSearchable: true },
+            { name: i18n._(t`Last Name`), key: 'last_name', isSortable: true, isSearchable: true },
          ]}
-          renderToolbar={props => (
+          renderToolbar={(props) => (
            <DataListToolbar
              {...props}
-              additionalControls={
-                canEdit
-                  ? [
-                      <ToolbarAddButton
-                        key="add"
-                        onClick={this.handleAddOpen}
-                      />,
-                    ]
-                  : null
-              }
+              additionalControls={canEdit ? [
+                <ToolbarAddButton key="add" onClick={this.handleAddOpen} />
+              ] : null}
            />
          )}
          renderItem={accessRecord => (
@ -222,13 +205,12 @@ class OrganizationAccess extends React.Component {
          />
        )}
        <AlertModal
-          isOpen={deletionError}
+          isOpen={hasDeletionError}
          variant="danger"
          title={i18n._(t`Error!`)}
          onClose={this.handleDeleteErrorClose}
        >
          {i18n._(t`Failed to delete role`)}
-          <ErrorDetail error={deletionError} />
        </AlertModal>
      </Fragment>
    );
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx
@ -103,7 +103,7 @@ describe('<OrganizationAccess />', () => {
    expect(wrapper.find('OrganizationAccess').state('hasContentLoading')).toBe(
      false
    );
-    expect(wrapper.find('OrganizationAccess').state('contentError')).toBe(null);
+    expect(wrapper.find('OrganizationAccess').state('hasContentError')).toBe(false);
    done();
  });

--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/snapshots/OrganizationAccess.test.jsx.snap
+++ b/awx/ui_next/src/screens/Organization/OrganizationAccess/snapshots/OrganizationAccess.test.jsx.snap
@ -34,7 +34,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
  }
 >
  <WithI18n
-    error={null}
+    hasContentError={false}
    hasContentLoading={true}
    itemCount={0}
    itemName="role"
@ -58,16 +58,19 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
    toolbarColumns={
      Array [
        Object {
+          "isSearchable": true,
          "isSortable": true,
          "key": "first_name",
-          "name": "Name",
+          "name": "First Name",
        },
        Object {
+          "isSearchable": true,
          "isSortable": true,
          "key": "username",
          "name": "Username",
        },
        Object {
+          "isSearchable": true,
          "isSortable": true,
          "key": "last_name",
          "name": "Last Name",
@ -80,7 +83,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
      withHash={true}
    >
      <withRouter(PaginatedDataList)
-        error={null}
+        hasContentError={false}
        hasContentLoading={true}
        i18n={"/i18n/"}
        itemCount={0}
@ -105,16 +108,19 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
        toolbarColumns={
          Array [
            Object {
+              "isSearchable": true,
              "isSortable": true,
              "key": "first_name",
-              "name": "Name",
+              "name": "First Name",
            },
            Object {
+              "isSearchable": true,
              "isSortable": true,
              "key": "username",
              "name": "Username",
            },
            Object {
+              "isSearchable": true,
              "isSortable": true,
              "key": "last_name",
              "name": "Last Name",
@ -124,8 +130,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
      >
        <Route>
          <PaginatedDataList
-            contentError={null}
-            error={null}
+            hasContentError={false}
            hasContentLoading={true}
            history={"/history/"}
            i18n={"/i18n/"}
@ -169,16 +174,19 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
            toolbarColumns={
              Array [
                Object {
+                  "isSearchable": true,
                  "isSortable": true,
                  "key": "first_name",
-                  "name": "Name",
+                  "name": "First Name",
                },
                Object {
+                  "isSearchable": true,
                  "isSortable": true,
                  "key": "username",
                  "name": "Username",
                },
                Object {
+                  "isSearchable": true,
                  "isSortable": true,
                  "key": "last_name",
                  "name": "Last Name",
@ -186,6 +194,222 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
              ]
            }
          >
+            <withRouter(ListHeader)
+              columns={
+                Array [
+                  Object {
+                    "isSearchable": true,
+                    "isSortable": true,
+                    "key": "first_name",
+                    "name": "First Name",
+                  },
+                  Object {
+                    "isSearchable": true,
+                    "isSortable": true,
+                    "key": "username",
+                    "name": "Username",
+                  },
+                  Object {
+                    "isSearchable": true,
+                    "isSortable": true,
+                    "key": "last_name",
+                    "name": "Last Name",
+                  },
+                ]
+              }
+              itemCount={0}
+              qsConfig={
+                Object {
+                  "defaultParams": Object {
+                    "order_by": "first_name",
+                    "page": 1,
+                    "page_size": 5,
+                  },
+                  "integerFields": Array [
+                    "page",
+                    "page_size",
+                  ],
+                  "namespace": "access",
+                }
+              }
+            >
+              <Route>
+                <ListHeader
+                  columns={
+                    Array [
+                      Object {
+                        "isSearchable": true,
+                        "isSortable": true,
+                        "key": "first_name",
+                        "name": "First Name",
+                      },
+                      Object {
+                        "isSearchable": true,
+                        "isSortable": true,
+                        "key": "username",
+                        "name": "Username",
+                      },
+                      Object {
+                        "isSearchable": true,
+                        "isSortable": true,
+                        "key": "last_name",
+                        "name": "Last Name",
+                      },
+                    ]
+                  }
+                  history={"/history/"}
+                  itemCount={0}
+                  location={
+                    Object {
+                      "hash": "",
+                      "pathname": "",
+                      "search": "",
+                      "state": "",
+                    }
+                  }
+                  match={
+                    Object {
+                      "isExact": false,
+                      "params": Object {},
+                      "path": "",
+                      "url": "",
+                    }
+                  }
+                  qsConfig={
+                    Object {
+                      "defaultParams": Object {
+                        "order_by": "first_name",
+                        "page": 1,
+                        "page_size": 5,
+                      },
+                      "integerFields": Array [
+                        "page",
+                        "page_size",
+                      ],
+                      "namespace": "access",
+                    }
+                  }
+                  renderToolbar={[Function]}
+                >
+                  <ListHeader__EmptyStateControlsWrapper>
+                    <StyledComponent
+                      forwardedComponent={
+                        Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "attrs": Array [],
+                          "componentStyle": ComponentStyle {
+                            "componentId": "ListHeader__EmptyStateControlsWrapper-sc-1gm7wbv-0",
+                            "isStatic": true,
+                            "lastClassName": "bXVfpW",
+                            "rules": Array [
+                              "display:flex;margin-top:20px;margin-right:20px;margin-bottom:20px;justify-content:flex-end;& >:not(:first-child){margin-left:20px;}",
+                            ],
+                          },
+                          "displayName": "ListHeader__EmptyStateControlsWrapper",
+                          "foldedComponentIds": Array [],
+                          "render": [Function],
+                          "styledComponentId": "ListHeader__EmptyStateControlsWrapper-sc-1gm7wbv-0",
+                          "target": "div",
+                          "toString": [Function],
+                          "warnTooManyClasses": [Function],
+                          "withComponent": [Function],
+                        }
+                      }
+                      forwardedRef={null}
+                    >
+                      <div
+                        className="ListHeader__EmptyStateControlsWrapper-sc-1gm7wbv-0 bXVfpW"
+                      />
+                    </StyledComponent>
+                  </ListHeader__EmptyStateControlsWrapper>
+                  <WithI18n
+                    itemCount={0}
+                    onRemove={[Function]}
+                    onRemoveAll={[Function]}
+                    qsConfig={
+                      Object {
+                        "defaultParams": Object {
+                          "order_by": "first_name",
+                          "page": 1,
+                          "page_size": 5,
+                        },
+                        "integerFields": Array [
+                          "page",
+                          "page_size",
+                        ],
+                        "namespace": "access",
+                      }
+                    }
+                  >
+                    <I18n
+                      update={true}
+                      withHash={true}
+                    >
+                      <withRouter(FilterTags)
+                        i18n={"/i18n/"}
+                        itemCount={0}
+                        onRemove={[Function]}
+                        onRemoveAll={[Function]}
+                        qsConfig={
+                          Object {
+                            "defaultParams": Object {
+                              "order_by": "first_name",
+                              "page": 1,
+                              "page_size": 5,
+                            },
+                            "integerFields": Array [
+                              "page",
+                              "page_size",
+                            ],
+                            "namespace": "access",
+                          }
+                        }
+                      >
+                        <Route>
+                          <FilterTags
+                            history={"/history/"}
+                            i18n={"/i18n/"}
+                            itemCount={0}
+                            location={
+                              Object {
+                                "hash": "",
+                                "pathname": "",
+                                "search": "",
+                                "state": "",
+                              }
+                            }
+                            match={
+                              Object {
+                                "isExact": false,
+                                "params": Object {},
+                                "path": "",
+                                "url": "",
+                              }
+                            }
+                            onRemove={[Function]}
+                            onRemoveAll={[Function]}
+                            qsConfig={
+                              Object {
+                                "defaultParams": Object {
+                                  "order_by": "first_name",
+                                  "page": 1,
+                                  "page_size": 5,
+                                },
+                                "integerFields": Array [
+                                  "page",
+                                  "page_size",
+                                ],
+                                "namespace": "access",
+                              }
+                            }
+                          />
+                        </Route>
+                      </withRouter(FilterTags)>
+                    </I18n>
+                  </WithI18n>
+                </ListHeader>
+              </Route>
+            </withRouter(ListHeader)>
            <WithI18n>
              <I18n
                update={true}
@ -221,7 +445,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
    </I18n>
  </WithI18n>
  <_default
-    isOpen={null}
+    isOpen={false}
    onClose={[Function]}
    title="Error!"
    variant="danger"
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/snapshots/OrganizationAccessItem.test.jsx.snap
+++ b/awx/ui_next/src/screens/Organization/OrganizationAccess/snapshots/OrganizationAccessItem.test.jsx.snap
@ -695,9 +695,9 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                                                    "componentStyle": ComponentStyle {
                                                      "componentId": "ChipGroup-sc-10zu8t0-0",
                                                      "isStatic": true,
-                                                      "lastClassName": "vIGxT",
+                                                      "lastClassName": "ldAQsx",
                                                      "rules": Array [
-                                                        "--pf-c-chip-group--c-chip--MarginRight:10px;--pf-c-chip-group--c-chip--MarginBottom:10px;",
+                                                        "--pf-c-chip-group--c-chip--MarginRight:10px;--pf-c-chip-group--c-chip--MarginBottom:10px;> .pf-c-chip.pf-m-overflow button{padding:3px 8px;}",
                                                      ],
                                                    },
                                                    "displayName": "ChipGroup",
@ -713,11 +713,12 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                                                forwardedRef={null}
                                              >
                                                <ChipGroup
-                                                  className="ChipGroup-sc-10zu8t0-0 vIGxT"
+                                                  className="ChipGroup-sc-10zu8t0-0 ldAQsx"
+                                                  displayAll={false}
                                                  showOverflowAfter={null}
                                                >
                                                  <ul
-                                                    className="pf-c-chip-group ChipGroup-sc-10zu8t0-0 vIGxT"
+                                                    className="pf-c-chip-group ChipGroup-sc-10zu8t0-0 ldAQsx"
                                                  >
                                                    <Chip
                                                      component="li"
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
@ -2,17 +2,20 @@ import React, { Component, Fragment } from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Card, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import {
+  Card,
+  PageSection,
+  PageSectionVariants,
+} from '@patternfly/react-core';

 import { OrganizationsAPI } from '@api';
 import AlertModal from '@components/AlertModal';
 import DataListToolbar from '@components/DataListToolbar';
-import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, {
  ToolbarAddButton,
  ToolbarDeleteButton,
 } from '@components/PaginatedDataList';
-import { getQSConfig, parseNamespacedQueryString } from '@util/qs';
+import { getQSConfig, parseQueryString } from '@util/qs';

 import OrganizationListItem from './OrganizationListItem';

@ -23,13 +26,13 @@ const QS_CONFIG = getQSConfig('organization', {
 });

 class OrganizationsList extends Component {
-  constructor(props) {
+  constructor (props) {
    super(props);

    this.state = {
      hasContentLoading: true,
-      contentError: null,
-      deletionError: null,
+      hasContentError: false,
+      hasDeletionError: false,
      organizations: [],
      selected: [],
      itemCount: 0,
@ -43,25 +46,25 @@ class OrganizationsList extends Component {
    this.loadOrganizations = this.loadOrganizations.bind(this);
  }

-  componentDidMount() {
+  componentDidMount () {
    this.loadOrganizations();
  }

-  componentDidUpdate(prevProps) {
+  componentDidUpdate (prevProps) {
    const { location } = this.props;
    if (location !== prevProps.location) {
      this.loadOrganizations();
    }
  }

-  handleSelectAll(isSelected) {
+  handleSelectAll (isSelected) {
    const { organizations } = this.state;

    const selected = isSelected ? [...organizations] : [];
    this.setState({ selected });
  }

-  handleSelect(row) {
+  handleSelect (row) {
    const { selected } = this.state;

    if (selected.some(s => s.id === row.id)) {
@ -71,28 +74,27 @@ class OrganizationsList extends Component {
    }
  }

-  handleDeleteErrorClose() {
-    this.setState({ deletionError: null });
+  handleDeleteErrorClose () {
+    this.setState({ hasDeletionError: false });
  }

-  async handleOrgDelete() {
-    const { selected, itemCount } = this.state;
+  async handleOrgDelete () {
+    const { selected } = this.state;

-    this.setState({ hasContentLoading: true });
+    this.setState({ hasContentLoading: true, hasDeletionError: false });
    try {
-      await Promise.all(selected.map(org => OrganizationsAPI.destroy(org.id)));
-      this.setState({ itemCount: itemCount - selected.length });
+      await Promise.all(selected.map((org) => OrganizationsAPI.destroy(org.id)));
    } catch (err) {
-      this.setState({ deletionError: err });
+      this.setState({ hasDeletionError: true });
    } finally {
      await this.loadOrganizations();
    }
  }

-  async loadOrganizations() {
+  async loadOrganizations () {
    const { location } = this.props;
    const { actions: cachedActions } = this.state;
-    const params = parseNamespacedQueryString(QS_CONFIG, location.search);
+    const params = parseQueryString(QS_CONFIG, location.search);

    let optionsPromise;
    if (cachedActions) {
@ -106,16 +108,9 @@ class OrganizationsList extends Component {
      optionsPromise,
    ]);

-    this.setState({ contentError: null, hasContentLoading: true });
+    this.setState({ hasContentError: false, hasContentLoading: true });
    try {
-      const [
-        {
-          data: { count, results },
-        },
-        {
-          data: { actions },
-        },
-      ] = await promises;
+      const [{ data: { count, results } }, { data: { actions } }] = await promises;
      this.setState({
        actions,
        itemCount: count,
@ -123,27 +118,28 @@ class OrganizationsList extends Component {
        selected: [],
      });
    } catch (err) {
-      this.setState({ contentError: err });
+      this.setState(({ hasContentError: true }));
    } finally {
      this.setState({ hasContentLoading: false });
    }
  }

-  render() {
-    const { medium } = PageSectionVariants;
+  render () {
+    const {
+      medium,
+    } = PageSectionVariants;
    const {
      actions,
      itemCount,
-      contentError,
+      hasContentError,
      hasContentLoading,
-      deletionError,
+      hasDeletionError,
      selected,
      organizations,
    } = this.state;
    const { match, i18n } = this.props;

-    const canAdd =
-      actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
+    const canAdd = actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
    const isAllSelected = selected.length === organizations.length;

    return (
@ -151,28 +147,18 @@ class OrganizationsList extends Component {
        <PageSection variant={medium}>
          <Card>
            <PaginatedDataList
-              contentError={contentError}
+              hasContentError={hasContentError}
              hasContentLoading={hasContentLoading}
              items={organizations}
              itemCount={itemCount}
              itemName="organization"
              qsConfig={QS_CONFIG}
              toolbarColumns={[
-                { name: i18n._(t`Name`), key: 'name', isSortable: true },
-                {
-                  name: i18n._(t`Modified`),
-                  key: 'modified',
-                  isSortable: true,
-                  isNumeric: true,
-                },
-                {
-                  name: i18n._(t`Created`),
-                  key: 'created',
-                  isSortable: true,
-                  isNumeric: true,
-                },
+                { name: i18n._(t`Name`), key: 'name', isSortable: true, isSearchable: true },
+                { name: i18n._(t`Modified`), key: 'modified', isSortable: true, isNumeric: true },
+                { name: i18n._(t`Created`), key: 'created', isSortable: true, isNumeric: true },
              ]}
-              renderToolbar={props => (
+              renderToolbar={(props) => (
                <DataListToolbar
                  {...props}
                  showSelectAll
@ -185,13 +171,13 @@ class OrganizationsList extends Component {
                      itemsToDelete={selected}
                      itemName="Organization"
                    />,
-                    canAdd ? (
-                      <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-                    ) : null,
+                    canAdd
+                      ? <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
+                      : null,
                  ]}
                />
              )}
-              renderItem={o => (
+              renderItem={(o) => (
                <OrganizationListItem
                  key={o.id}
                  organization={o}
@ -201,21 +187,19 @@ class OrganizationsList extends Component {
                />
              )}
              emptyStateControls={
-                canAdd ? (
-                  <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-                ) : null
+                canAdd ? <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
+                  : null
              }
            />
          </Card>
        </PageSection>
        <AlertModal
-          isOpen={deletionError}
+          isOpen={hasDeletionError}
          variant="danger"
          title={i18n._(t`Error!`)}
          onClose={this.handleDeleteErrorClose}
        >
          {i18n._(t`Failed to delete one or more organizations.`)}
-          <ErrorDetail error={deletionError} />
        </AlertModal>
      </Fragment>
    );
--- a/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx
@ -9,7 +9,7 @@ import AlertModal from '@components/AlertModal';
 import ErrorDetail from '@components/ErrorDetail';
 import NotificationListItem from '@components/NotificationsList/NotificationListItem';
 import PaginatedDataList from '@components/PaginatedDataList';
-import { getQSConfig, parseNamespacedQueryString } from '@util/qs';
+import { getQSConfig, parseQueryString } from '@util/qs';

 const QS_CONFIG = getQSConfig('notification', {
  page: 1,
@ -18,18 +18,18 @@ const QS_CONFIG = getQSConfig('notification', {
 });

 const COLUMNS = [
-  { key: 'name', name: 'Name', isSortable: true },
+  { key: 'name', name: 'Name', isSortable: true, isSearchable: true },
  { key: 'modified', name: 'Modified', isSortable: true, isNumeric: true },
  { key: 'created', name: 'Created', isSortable: true, isNumeric: true },
 ];

 class OrganizationNotifications extends Component {
-  constructor(props) {
+  constructor (props) {
    super(props);
    this.state = {
      contentError: null,
      hasContentLoading: true,
-      toggleError: null,
+      toggleError: false,
      toggleLoading: false,
      itemCount: 0,
      notifications: [],
@ -38,27 +38,25 @@ class OrganizationNotifications extends Component {
      typeLabels: null,
    };
    this.handleNotificationToggle = this.handleNotificationToggle.bind(this);
-    this.handleNotificationErrorClose = this.handleNotificationErrorClose.bind(
-      this
-    );
+    this.handleNotificationErrorClose = this.handleNotificationErrorClose.bind(this);
    this.loadNotifications = this.loadNotifications.bind(this);
  }

-  componentDidMount() {
+  componentDidMount () {
    this.loadNotifications();
  }

-  componentDidUpdate(prevProps) {
+  componentDidUpdate (prevProps) {
    const { location } = this.props;
    if (location !== prevProps.location) {
      this.loadNotifications();
    }
  }

-  async loadNotifications() {
+  async loadNotifications () {
    const { id, location } = this.props;
    const { typeLabels } = this.state;
-    const params = parseNamespacedQueryString(QS_CONFIG, location.search);
+    const params = parseQueryString(QS_CONFIG, location.search);

    const promises = [OrganizationsAPI.readNotificationTemplates(id, params)];

@ -68,12 +66,14 @@ class OrganizationNotifications extends Component {

    this.setState({ contentError: null, hasContentLoading: true });
    try {
-      const [
-        {
-          data: { count: itemCount = 0, results: notifications = [] },
-        },
-        optionsResponse,
-      ] = await Promise.all(promises);
+      const {
+        data: {
+          count: itemCount = 0,
+          results: notifications = [],
+        }
+      } = await OrganizationsAPI.readNotificationTemplates(id, params);
+
+      const optionsResponse = await OrganizationsAPI.readOptionsNotificationTemplates(id, params);

      let idMatchParams;
      if (notifications.length > 0) {
@ -122,7 +122,7 @@ class OrganizationNotifications extends Component {
    }
  }

-  async handleNotificationToggle(notificationId, isCurrentlyOn, status) {
+  async handleNotificationToggle (notificationId, isCurrentlyOn, status) {
    const { id } = this.props;

    let stateArrayName;
@ -135,15 +135,13 @@ class OrganizationNotifications extends Component {
    let stateUpdateFunction;
    if (isCurrentlyOn) {
      // when switching off, remove the toggled notification id from the array
-      stateUpdateFunction = prevState => ({
-        [stateArrayName]: prevState[stateArrayName].filter(
-          i => i !== notificationId
-        ),
+      stateUpdateFunction = (prevState) => ({
+        [stateArrayName]: prevState[stateArrayName].filter(i => i !== notificationId)
      });
    } else {
      // when switching on, add the toggled notification id to the array
-      stateUpdateFunction = prevState => ({
-        [stateArrayName]: prevState[stateArrayName].concat(notificationId),
+      stateUpdateFunction = (prevState) => ({
+        [stateArrayName]: prevState[stateArrayName].concat(notificationId)
      });
    }

@ -157,17 +155,17 @@ class OrganizationNotifications extends Component {
      );
      this.setState(stateUpdateFunction);
    } catch (err) {
-      this.setState({ toggleError: err });
+      this.setState({ toggleError: true });
    } finally {
      this.setState({ toggleLoading: false });
    }
  }

-  handleNotificationErrorClose() {
-    this.setState({ toggleError: null });
+  handleNotificationErrorClose () {
+    this.setState({ toggleError: false });
  }

-  render() {
+  render () {
    const { canToggleNotifications, i18n } = this.props;
    const {
      contentError,
@ -178,7 +176,7 @@ class OrganizationNotifications extends Component {
      notifications,
      successTemplateIds,
      errorTemplateIds,
-      typeLabels,
+      typeLabels
    } = this.state;

    return (
@ -191,7 +189,7 @@ class OrganizationNotifications extends Component {
          itemName="notification"
          qsConfig={QS_CONFIG}
          toolbarColumns={COLUMNS}
-          renderItem={notification => (
+          renderItem={(notification) => (
            <NotificationListItem
              key={notification.id}
              notification={notification}
@ -205,9 +203,9 @@ class OrganizationNotifications extends Component {
          )}
        />
        <AlertModal
-          isOpen={toggleError}
          variant="danger"
          title={i18n._(t`Error!`)}
+          isOpen={toggleError && !toggleLoading}
          onClose={this.handleNotificationErrorClose}
        >
          {i18n._(t`Failed to toggle notification.`)}
--- a/awx/ui_next/src/screens/Organization/OrganizationNotifications/snapshots/OrganizationNotifications.test.jsx.snap
+++ b/awx/ui_next/src/screens/Organization/OrganizationNotifications/snapshots/OrganizationNotifications.test.jsx.snap
--- a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx
@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom';

 import { OrganizationsAPI } from '@api';
 import PaginatedDataList from '@components/PaginatedDataList';
-import { getQSConfig, parseNamespacedQueryString } from '@util/qs';
+import { getQSConfig, parseQueryString } from '@util/qs';

 const QS_CONFIG = getQSConfig('team', {
  page: 1,
@ -39,7 +39,7 @@ class OrganizationTeams extends React.Component {

  async loadOrganizationTeamsList() {
    const { id, location } = this.props;
-    const params = parseNamespacedQueryString(QS_CONFIG, location.search);
+    const params = parseQueryString(QS_CONFIG, location.search);

    this.setState({ hasContentLoading: true, contentError: null });
    try {
--- a/awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx
+++ b/awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx
@ -8,24 +8,30 @@ import { QuestionCircleIcon } from '@patternfly/react-icons';
 import { InstanceGroupsAPI } from '@api';
 import Lookup from '@components/Lookup';

-const getInstanceGroups = async params => InstanceGroupsAPI.read(params);
+const getInstanceGroups = async (params) => InstanceGroupsAPI.read(params);

 class InstanceGroupsLookup extends React.Component {
-  render() {
+  render () {
    const { value, tooltip, onChange, i18n } = this.props;

    return (
      <FormGroup
-        label={
+        label={(
          <Fragment>
-            {i18n._(t`Instance Groups`)}{' '}
-            {tooltip && (
-              <Tooltip position="right" content={tooltip}>
-                <QuestionCircleIcon />
-              </Tooltip>
-            )}
+            {i18n._(t`Instance Groups`)}
+            {' '}
+            {
+              tooltip && (
+                <Tooltip
+                  position="right"
+                  content={tooltip}
+                >
+                  <QuestionCircleIcon />
+                </Tooltip>
+              )
+            }
          </Fragment>
-        }
+        )}
        fieldId="org-instance-groups"
      >
        <Lookup
@ -37,19 +43,9 @@ class InstanceGroupsLookup extends React.Component {
          getItems={getInstanceGroups}
          multiple
          columns={[
-            { name: i18n._(t`Name`), key: 'name', isSortable: true },
-            {
-              name: i18n._(t`Modified`),
-              key: 'modified',
-              isSortable: false,
-              isNumeric: true,
-            },
-            {
-              name: i18n._(t`Created`),
-              key: 'created',
-              isSortable: false,
-              isNumeric: true,
-            },
+            { name: i18n._(t`Name`), key: 'name', isSortable: true, isSearchable: true },
+            { name: i18n._(t`Modified`), key: 'modified', isSortable: false, isNumeric: true },
+            { name: i18n._(t`Created`), key: 'created', isSortable: false, isNumeric: true }
          ]}
          sortedColumnKey="name"
        />
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@ -2,20 +2,23 @@ import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Card, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import {
+  Card,
+  PageSection,
+  PageSectionVariants,
+} from '@patternfly/react-core';

 import {
  JobTemplatesAPI,
  UnifiedJobTemplatesAPI,
-  WorkflowJobTemplatesAPI,
+  WorkflowJobTemplatesAPI
 } from '@api';
 import AlertModal from '@components/AlertModal';
 import DatalistToolbar from '@components/DataListToolbar';
-import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, {
-  ToolbarDeleteButton,
+  ToolbarDeleteButton
 } from '@components/PaginatedDataList';
-import { getQSConfig, parseNamespacedQueryString } from '@util/qs';
+import { getQSConfig, parseQueryString } from '@util/qs';

 import TemplateListItem from './TemplateListItem';

@ -25,17 +28,17 @@ const QS_CONFIG = getQSConfig('template', {
  page: 1,
  page_size: 5,
  order_by: 'name',
-  type: 'job_template,workflow_job_template',
+  type: 'job_template,workflow_job_template'
 });

 class TemplatesList extends Component {
-  constructor(props) {
+  constructor (props) {
    super(props);

    this.state = {
      hasContentLoading: true,
-      contentError: null,
-      deletionError: null,
+      hasContentError: false,
+      hasDeletionError: false,
      selected: [],
      templates: [],
      itemCount: 0,
@ -47,28 +50,28 @@ class TemplatesList extends Component {
    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
  }

-  componentDidMount() {
+  componentDidMount () {
    this.loadTemplates();
  }

-  componentDidUpdate(prevProps) {
+  componentDidUpdate (prevProps) {
    const { location } = this.props;
    if (location !== prevProps.location) {
      this.loadTemplates();
    }
  }

-  handleDeleteErrorClose() {
-    this.setState({ deletionError: null });
+  handleDeleteErrorClose () {
+    this.setState({ hasDeletionError: false });
  }

-  handleSelectAll(isSelected) {
+  handleSelectAll (isSelected) {
    const { templates } = this.state;
    const selected = isSelected ? [...templates] : [];
    this.setState({ selected });
  }

-  handleSelect(template) {
+  handleSelect (template) {
    const { selected } = this.state;
    if (selected.some(s => s.id === template.id)) {
      this.setState({ selected: selected.filter(s => s.id !== template.id) });
@ -77,89 +80,77 @@ class TemplatesList extends Component {
    }
  }

-  async handleTemplateDelete() {
-    const { selected, itemCount } = this.state;
+  async handleTemplateDelete () {
+    const { selected } = this.state;

-    this.setState({ hasContentLoading: true });
+    this.setState({ hasContentLoading: true, hasDeletionError: false });
    try {
-      await Promise.all(
-        selected.map(({ type, id }) => {
-          let deletePromise;
-          if (type === 'job_template') {
-            deletePromise = JobTemplatesAPI.destroy(id);
-          } else if (type === 'workflow_job_template') {
-            deletePromise = WorkflowJobTemplatesAPI.destroy(id);
-          }
-          return deletePromise;
-        })
-      );
-      this.setState({ itemCount: itemCount - selected.length });
+      await Promise.all(selected.map(({ type, id }) => {
+        let deletePromise;
+        if (type === 'job_template') {
+          deletePromise = JobTemplatesAPI.destroy(id);
+        } else if (type === 'workflow_job_template') {
+          deletePromise = WorkflowJobTemplatesAPI.destroy(id);
+        }
+        return deletePromise;
+      }));
    } catch (err) {
-      this.setState({ deletionError: err });
+      this.setState({ hasDeletionError: true });
    } finally {
      await this.loadTemplates();
    }
  }

-  async loadTemplates() {
+  async loadTemplates () {
    const { location } = this.props;
-    const params = parseNamespacedQueryString(QS_CONFIG, location.search);
+    const params = parseQueryString(QS_CONFIG, location.search);

-    this.setState({ contentError: null, hasContentLoading: true });
+    this.setState({ hasContentError: false, hasContentLoading: true });
    try {
-      const {
-        data: { count, results },
-      } = await UnifiedJobTemplatesAPI.read(params);
+      const { data: { count, results } } = await UnifiedJobTemplatesAPI.read(params);
      this.setState({
        itemCount: count,
        templates: results,
        selected: [],
      });
    } catch (err) {
-      this.setState({ contentError: err });
+      this.setState({ hasContentError: true });
    } finally {
      this.setState({ hasContentLoading: false });
    }
  }

-  render() {
+  render () {
    const {
-      contentError,
+      hasContentError,
      hasContentLoading,
-      deletionError,
+      hasDeletionError,
      templates,
      itemCount,
      selected,
    } = this.state;
-    const { match, i18n } = this.props;
+    const {
+      match,
+      i18n
+    } = this.props;
    const isAllSelected = selected.length === templates.length;
    const { medium } = PageSectionVariants;
    return (
      <PageSection variant={medium}>
        <Card>
          <PaginatedDataList
-            error={contentError}
+            hasContentError={hasContentError}
            hasContentLoading={hasContentLoading}
            items={templates}
            itemCount={itemCount}
            itemName={i18n._(t`Template`)}
            qsConfig={QS_CONFIG}
            toolbarColumns={[
-              { name: i18n._(t`Name`), key: 'name', isSortable: true },
-              {
-                name: i18n._(t`Modified`),
-                key: 'modified',
-                isSortable: true,
-                isNumeric: true,
-              },
-              {
-                name: i18n._(t`Created`),
-                key: 'created',
-                isSortable: true,
-                isNumeric: true,
-              },
+              { name: i18n._(t`Name`), key: 'name', isSortable: true, isSearchable: true },
+              { name: i18n._(t`Modified`), key: 'modified', isSortable: true, isNumeric: true },
+              { name: i18n._(t`Created`), key: 'created', isSortable: true, isNumeric: true },
            ]}
-            renderToolbar={props => (
+            renderToolbar={(props) => (
              <DatalistToolbar
                {...props}
                showSelectAll
@ -172,11 +163,11 @@ class TemplatesList extends Component {
                    onDelete={this.handleTemplateDelete}
                    itemsToDelete={selected}
                    itemName={i18n._(t`Template`)}
-                  />,
+                  />
                ]}
              />
            )}
-            renderItem={template => (
+            renderItem={(template) => (
              <TemplateListItem
                key={template.id}
                value={template.name}
@ -189,13 +180,12 @@ class TemplatesList extends Component {
          />
        </Card>
        <AlertModal
-          isOpen={deletionError}
+          isOpen={hasDeletionError}
          variant="danger"
          title={i18n._(t`Error!`)}
          onClose={this.handleDeleteErrorClose}
        >
          {i18n._(t`Failed to delete one or more template.`)}
-          <ErrorDetail error={deletionError} />
        </AlertModal>
      </PageSection>
    );
--- a/awx/ui_next/src/util/qs.js
+++ b/awx/ui_next/src/util/qs.js
@ -1,55 +1,150 @@
+/**
+ * helper function used to convert from
+ * Object.entries format ([ [ key, value ], ... ]) to object
+ * @param {array} array in the format [ [ key, value ], ...]
+ * @return {object} object in the forms { key: value, ... }
+ */
+const toObject = (entriesArr) => entriesArr.reduce((acc, [key, value]) => {
+  if (acc[key] && Array.isArray(acc[key])) {
+    acc[key].push(value);
+  } else if (acc[key]) {
+    acc[key] = [acc[key], value];
+  } else {
+    acc[key] = value;
+  }
+  return acc;
+}, {});
+
+/**
+ * helper function to namespace params object
+ * @param {string} namespace to append to params
+ * @param {object} params object to append namespace to
+ * @return {object} params object with namespaced keys
+ */
+const namespaceParams = (namespace, params = {}) => {
+  if (!namespace) return params;
+
+  const namespaced = {};
+  Object.keys(params).forEach(key => {
+    namespaced[`${namespace}.${key}`] = params[key];
+  });
+
+  return namespaced || {};
+}
+
+/**
+ * helper function to remove namespace from params object
+ * @param {string} namespace to remove from params
+ * @param {object} params object to append namespace to
+ * @return {object} params object with non-namespaced keys
+ */
+const denamespaceParams = (namespace, params = {}) => {
+  if (!namespace) return params;
+
+  const denamespaced = {};
+  Object.keys(params).forEach(key => {
+    denamespaced[key.substr(namespace.length + 1)] = params[key];
+  });
+
+  return denamespaced || {};
+}
+
+/**
+ * helper function to check the namespace of a param is what you expec
+ * @param {string} namespace to append to params
+ * @param {object} params object to append namespace to
+ * @return {object} params object with namespaced keys
+ */
+const namespaceMatches = (namespace, fieldname) => {
+  if (!namespace) return !fieldname.includes('.');
+
+  return fieldname.startsWith(`${namespace}.`);
+}
+
+/**
+ * helper function to check the value of a param is equal to another
+ * @param {string or number or array} param value one
+ * @param {string or number or array} params value two
+ * @return {boolean} true if values are equal
+ */
+const paramValueIsEqual = (one, two) => {
+  let isEqual = false;
+
+  if (Array.isArray(one) && Array.isArray(two)) {
+    isEqual = one.filter(val => two.indexOf(val) > -1).length === 0;
+  } else if ((typeof(one) === "string" && typeof(two) === "string") ||
+      (typeof(one) === "number" && typeof(two) === "number")){
+    isEqual = one === two;
+  }
+
+  return isEqual;
+}
+
 /**
 * Convert query param object to url query string
- *
+ * Used to encode params for interacting with the api
+ * @param {object} qs config object for namespacing params, filtering defaults
 * @param {object} query param object
 * @return {string} url query string
 */
-export const encodeQueryString = params => {
-  if (!params) {
-    return '';
-  }
+export const encodeQueryString = (params) => {
+  if (!params) return '';

  return Object.keys(params)
    .sort()
    .filter(key => params[key] !== null)
-    .map(key => [key, params[key]])
-    .map(
-      ([key, value]) =>
-        `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
-    )
+    .map(key => ([key, params[key]]))
+    .map(([key, value]) => {
+      // if value is array, should return more than one key value pair
+      if (Array.isArray(value)) {
+        return value.map(val => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');
+      }
+      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+    })
    .join('&');
 };

 /**
- * Convert url query string to query param object
- *
- * @param {string} url query string
- * @param {object} default params
- * @param {array} array of keys to parse as integers
- * @return {object} query param object
+ * Convert query param object to url query string, adding namespace and removing defaults
+ * Used to put into url bar after ui route
+ * @param {object} qs config object for namespacing params, filtering defaults
+ * @param {object} query param object
+ * @return {string} url query string
 */
-export const parseQueryString = (
-  queryString,
-  integerFields = ['page', 'page_size']
-) => {
-  if (!queryString) return {};
+export const encodeNonDefaultQueryString = (config, params) => {
+  if (!params) return '';

-  const keyValuePairs = queryString
-    .replace(/^\?/, '')
-    .split('&')
-    .map(s => s.split('='))
+  const namespacedParams = namespaceParams(config.namespace, params);
+  const namespacedDefaults = namespaceParams(config.namespace, config.defaultParams);
+  const namespacedDefaultKeys = Object.keys(namespacedDefaults);
+  const namespacedParamsWithoutDefaultsKeys = Object.keys(namespacedParams)
+    .filter(key => namespacedDefaultKeys.indexOf(key) === -1 ||
+      !paramValueIsEqual(namespacedParams[key], namespacedDefaults[key]));
+
+  return namespacedParamsWithoutDefaultsKeys
+    .sort()
+    .filter(key => namespacedParams[key] !== null)
+    .map(key => {
+      return ([key, namespacedParams[key]])
+    })
    .map(([key, value]) => {
-      if (integerFields.includes(key)) {
-        return [key, parseInt(value, 10)];
+      // if value is array, should return more than one key value pair
+      if (Array.isArray(value)) {
+        return value.map(val => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');
      }
-
-      return [key, value];
-    });
-
-  return Object.assign(...keyValuePairs.map(([k, v]) => ({ [k]: v })));
+      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+    })
+    .join('&');
 };

-export function getQSConfig(
+/**
+ * Returns queryset config with defaults, if needed
+ * @param {string} namespace for appending to url querystring
+ * @param {object} default params that are not handled with search (page, page_size and order_by)
+ * @param {array} params that are number fields
+ * @return {object} query param object
+ */
+export function getQSConfig (
  namespace,
  defaultParams = { page: 1, page_size: 5, order_by: 'name' },
  integerFields = ['page', 'page_size']
@ -58,71 +153,207 @@ export function getQSConfig(
    throw new Error('a QS namespace is required');
  }
  return {
-    defaultParams,
    namespace,
+    defaultParams,
    integerFields,
  };
 }

-export function encodeNamespacedQueryString(config, params) {
-  return encodeQueryString(namespaceParams(config.namespace, params));
-}
+/**
+ * Convert url query string to query param object
+ * @param {object} qs config object (used for getting defaults, current query params etc.)
+ * @param {string} url query string
+ * @return {object} query param object
+ */
+export function parseQueryString (config, queryString) {
+  if (!queryString) return config.defaultParams;

-export function parseNamespacedQueryString(
-  config,
-  queryString,
-  includeDefaults = true
-) {
-  const integerFields = prependNamespaceToArray(
-    config.namespace,
-    config.integerFields
-  );
-  const parsed = parseQueryString(queryString, integerFields);
+  const namespacedIntegerFields = config.integerFields.map(f => config.namespace ? `${config.namespace}.${f}` : f);

-  const namespace = {};
-  Object.keys(parsed).forEach(field => {
-    if (namespaceMatches(config.namespace, field)) {
-      let fieldname = field;
-      if (config.namespace) {
-        fieldname = field.substr(config.namespace.length + 1);
+  const keyValuePairs = queryString.replace(/^\?/, '').split('&')
+    .map(s => s.split('='))
+    .map(([key, value]) => {
+      if (namespacedIntegerFields.includes(key)) {
+        return [decodeURIComponent(key), parseInt(value, 10)];
      }
-      namespace[fieldname] = parsed[field];
-    }
-  });
-  return {
-    ...(includeDefaults ? config.defaultParams : {}),
-    ...namespace,
-  };
+
+      return [decodeURIComponent(key), decodeURIComponent(value)];
+    });
+
+  const keyValueObject = toObject(keyValuePairs);
+
+  // needs to return array for duplicate keys
+  // ie [[k1, v1], [k1, v2], [k2, v3]]
+  // -> [[k1, [v1, v2]], [k2, v3]]
+  const dedupedKeyValuePairs = Object.keys(keyValueObject)
+    .map(key => {
+      const values = keyValuePairs
+        .filter(([k]) => k === key)
+        .map(([, v]) => v);
+
+      if (values.length === 1) {
+        return [key, values[0]];
+      }
+
+      return [key, values];
+    });
+
+  const parsed = Object.assign(...dedupedKeyValuePairs.map(([k, v]) => ({
+    [k]: v
+  })));
+
+  const namespacedParams = {};
+
+  Object.keys(parsed)
+    .forEach(field => {
+      if (namespaceMatches(config.namespace, field)) {
+        let fieldname = field;
+        if (config.namespace) {
+          fieldname = field.substr(config.namespace.length + 1);
+        }
+        namespacedParams[fieldname] = parsed[field];
+      }
+    });
+
+  const namespacedDefaults = namespaceParams(config.namespace, config.defaultParams);
+
+  Object.keys(namespacedDefaults)
+    .filter(key => Object.keys(parsed).indexOf(key) === -1)
+    .forEach(field => {
+      if (namespaceMatches(config.namespace, field)) {
+        let fieldname = field;
+        if (config.namespace) {
+          fieldname = field.substr(config.namespace.length + 1);
+        }
+        namespacedParams[fieldname] = namespacedDefaults[field];
+      }
+    });
+
+  return namespacedParams;
 }

-export function updateNamespacedQueryString(config, queryString, newParams) {
-  const params = parseQueryString(queryString);
-  return encodeQueryString({
-    ...params,
-    ...namespaceParams(config.namespace, newParams),
+/**
+ * helper function to get params that are defaults
+ * @param {object} namespaced params object
+ * @param {object} namespaced params object of default params
+ * @return {object} namespaced params object of only defaults
+ */
+const getDefaultParams = (params, defaults) => toObject(
+  Object.keys(params)
+    .filter(key => Object.keys(defaults).indexOf(key) > -1)
+    .map(key => [key, params[key]])
+);
+
+/**
+ * helper function to get params that are not defaults
+ * @param {object} namespaced params object
+ * @param {object} namespaced params object of default params
+ * @return {object} namespaced params object of non-defaults
+ */
+const getNonDefaultParams = (params, defaults) => toObject(
+  Object.keys(params)
+    .filter(key => Object.keys(defaults).indexOf(key) === -1)
+    .map(key => [key, params[key]])
+);
+
+/**
+ * helper function to merge old and new params together
+ * @param {object} namespaced params object old params with defaults filtered out
+ * @param {object} namespaced params object of new params
+ * @return {object} merged namespaced params object
+ */
+const getMergedParams = (oldParams, newParams) => toObject(
+  Object.keys(oldParams)
+    .map(key => {
+      let oldVal = oldParams[key];
+      const newVal = newParams[key];
+      if (newVal) {
+        if (Array.isArray(oldVal)) {
+          oldVal.push(newVal);
+        } else {
+          oldVal = [oldVal, newVal];
+        }
+      }
+      return [key, oldVal];
+    })
+);
+
+/**
+ * helper function to get new params that are not in merged params
+ * @param {object} namespaced params object of merged params
+ * @param {object} namespaced params object of new params
+ * @return {object} remaining new namespaced params object
+ */
+const getRemainingNewParams = (mergedParams, newParams) => toObject(
+  Object.keys(newParams)
+    .filter(key => Object.keys(mergedParams).indexOf(key) === -1)
+    .map(key => [key, newParams[key]])
+);
+
+/**
+ * Merges existing params of search string with new ones and returns the updated list of params
+ * @param {object} qs config object (used for getting defaults, current query params etc.)
+ * @param {string} url query string
+ * @param {object} object with new params to add
+ * @return {object} query param object
+ */
+export function addParams (config, searchString, newParams) {
+  const namespacedOldParams = namespaceParams(
+    config.namespace,
+    parseQueryString(config, searchString)
+  );
+  const namespacedNewParams = namespaceParams(config.namespace, newParams);
+  const namespacedDefaultParams = namespaceParams(config.namespace, config.defaultParams);
+
+  const namespacedOldParamsNotDefaults = getNonDefaultParams(
+    namespacedOldParams,
+    namespacedDefaultParams
+  );
+  const namespacedMergedParams = getMergedParams(
+    namespacedOldParamsNotDefaults,
+    namespacedNewParams
+  );
+
+  // return updated params.
+  // If newParams includes updates to the defaults, they will be replaced,
+  // not concatenated.
+  return denamespaceParams(config.namespace, {
+    ...getDefaultParams(namespacedOldParams, namespacedDefaultParams),
+    ...namespacedMergedParams,
+    ...getRemainingNewParams(namespacedMergedParams, namespacedNewParams)
  });
 }

-function namespaceParams(ns, params) {
-  if (!ns) return params;
-
-  const namespaced = {};
-  Object.keys(params).forEach(key => {
-    namespaced[`${ns}.${key}`] = params[key];
+/**
+ * Removes params from the search string and returns the updated list of params
+ * @param {object} qs config object (used for getting defaults, current query params etc.)
+ * @param {string} url query string
+ * @param {object} object with new params to remove
+ * @return {object} query param object
+ */
+export function removeParams (config, searchString, paramsToRemove) {
+  const oldParams = parseQueryString(config, searchString);
+  const paramsEntries = [];
+  Object.entries(oldParams)
+    .forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach(val => {
+          paramsEntries.push([key, val]);
+        })
+      } else {
+        paramsEntries.push([key, value]);
+      }
+    })
+  const paramsToRemoveEntries = Object.entries(paramsToRemove);
+  const remainingEntries = paramsEntries
+    .filter(([key, value]) => paramsToRemoveEntries
+      .filter(([newKey, newValue]) => key === newKey && value === newValue).length === 0);
+  const remainingObject = toObject(remainingEntries);
+  const defaultEntriesLeftover = Object.entries(config.defaultParams)
+    .filter(([key]) => !remainingObject[key]);
+  const finalParamsEntries = remainingEntries;
+  defaultEntriesLeftover.forEach(value => {
+    finalParamsEntries.push(value);
  });
-  return namespaced;
-}
-
-function namespaceMatches(namespace, fieldname) {
-  if (!namespace) {
-    return !fieldname.includes('.');
-  }
-  return fieldname.startsWith(`${namespace}.`);
-}
-
-function prependNamespaceToArray(namespace, arr) {
-  if (!namespace) {
-    return arr;
-  }
-  return arr.map(f => `${namespace}.${f}`);
+  return toObject(finalParamsEntries);
 }
--- a/awx/ui_next/src/util/qs.test.js
+++ b/awx/ui_next/src/util/qs.test.js
@ -1,116 +1,123 @@
 import {
  encodeQueryString,
+  encodeNonDefaultQueryString,
  parseQueryString,
  getQSConfig,
-  parseNamespacedQueryString,
-  encodeNamespacedQueryString,
-  updateNamespacedQueryString,
+  addParams,
+  removeParams
 } from './qs';

 describe('qs (qs.js)', () => {
-  test('encodeQueryString returns the expected queryString', () => {
-    [
-      [null, ''],
-      [{}, ''],
+  describe('encodeQueryString', () => {
+    test('encodeQueryString returns the expected queryString', () => {
      [
-        { order_by: 'name', page: 1, page_size: 5 },
-        'order_by=name&page=1&page_size=5',
-      ],
-      [
-        { '-order_by': 'name', page: '1', page_size: 5 },
-        '-order_by=name&page=1&page_size=5',
-      ],
-    ].forEach(([params, expectedQueryString]) => {
-      const actualQueryString = encodeQueryString(params);
+        [null, ''],
+        [{}, ''],
+        [{ order_by: 'name', page: 1, page_size: 5 }, 'order_by=name&page=1&page_size=5'],
+        [{ '-order_by': 'name', page: '1', page_size: 5 }, '-order_by=name&page=1&page_size=5'],
+      ]
+        .forEach(([params, expectedQueryString]) => {
+          const actualQueryString = encodeQueryString(params);

-      expect(actualQueryString).toEqual(expectedQueryString);
+          expect(actualQueryString).toEqual(expectedQueryString);
+        });
+    });
+
+    test('encodeQueryString omits null values', () => {
+      const vals = {
+        order_by: 'name',
+        page: null,
+      };
+      expect(encodeQueryString(vals)).toEqual('order_by=name');
    });
  });

-  test('encodeQueryString omits null values', () => {
-    const vals = {
-      order_by: 'name',
-      page: null,
+  describe('encodeNonDefaultQueryString', () => {
+    const config = {
+      namespace: null,
+      defaultParams: { page: 1, page_size: 5, order_by: 'name'},
+      integerFields: ['page'],
    };
-    expect(encodeQueryString(vals)).toEqual('order_by=name');
+
+    test('encodeNonDefaultQueryString returns the expected queryString', () => {
+      [
+        [null, ''],
+        [{}, ''],
+        [{ order_by: 'name', page: 1, page_size: 5 }, ''],
+        [{ order_by: '-name', page: 1, page_size: 5 }, 'order_by=-name'],
+        [{ order_by: '-name', page: 3, page_size: 10 }, 'order_by=-name&page=3&page_size=10'],
+        [{ order_by: '-name', page: 3, page_size: 10, foo: 'bar' }, 'foo=bar&order_by=-name&page=3&page_size=10'],
+      ]
+        .forEach(([params, expectedQueryString]) => {
+          const actualQueryString = encodeNonDefaultQueryString(config, params);
+
+          expect(actualQueryString).toEqual(expectedQueryString);
+        });
+    });
+
+    test('encodeNonDefaultQueryString omits null values', () => {
+      const vals = {
+        order_by: 'foo',
+        page: null,
+      };
+      expect(encodeNonDefaultQueryString(config, vals)).toEqual('order_by=foo');
+    });
+  });
+
+  describe('getQSConfig', () => {
+    test('should get default QS config object', () => {
+      expect(getQSConfig('organization')).toEqual({
+        namespace: 'organization',
+        defaultParams: { page: 1, page_size: 5, order_by: 'name' },
+        integerFields: ['page', 'page_size'],
+      });
+    });
+
+    test('should throw if no namespace given', () => {
+      expect(() => getQSConfig()).toThrow();
+    });
+
+    test('should build configured QS config object', () => {
+      const defaults = {
+        page: 1,
+        page_size: 15,
+      };
+      expect(getQSConfig('inventory', defaults)).toEqual({
+        namespace: 'inventory',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      });
+    });
  });

  describe('parseQueryString', () => {
-    test('parseQueryString returns the expected queryParams', () => {
-      [
-        [
-          'order_by=name&page=1&page_size=5',
-          ['page', 'page_size'],
-          { order_by: 'name', page: 1, page_size: 5 },
-        ],
-        [
-          'order_by=name&page=1&page_size=5',
-          ['page_size'],
-          { order_by: 'name', page: '1', page_size: 5 },
-        ],
-      ].forEach(([queryString, integerFields, expectedQueryParams]) => {
-        const actualQueryParams = parseQueryString(queryString, integerFields);
-
-        expect(actualQueryParams).toEqual(expectedQueryParams);
-      });
-    });
-
-    test('parseQueryString should strip leading "?"', () => {
-      expect(parseQueryString('?foo=bar&order_by=win')).toEqual({
-        foo: 'bar',
-        order_by: 'win',
-      });
-
-      expect(parseQueryString('foo=bar&order_by=?win')).toEqual({
-        foo: 'bar',
-        order_by: '?win',
-      });
-    });
-
-    test('should return empty object if no values', () => {
-      expect(parseQueryString('')).toEqual({});
-    });
-  });
-
-  test('should get default QS config object', () => {
-    expect(getQSConfig('organization')).toEqual({
-      namespace: 'organization',
-      defaultParams: { page: 1, page_size: 5, order_by: 'name' },
-      integerFields: ['page', 'page_size'],
-    });
-  });
-
-  test('should throw if no namespace given', () => {
-    expect(() => getQSConfig()).toThrow();
-  });
-
-  test('should build configured QS config object', () => {
-    const defaults = {
-      page: 1,
-      page_size: 15,
-    };
-    expect(getQSConfig('inventory', defaults)).toEqual({
-      namespace: 'inventory',
-      defaultParams: { page: 1, page_size: 15 },
-      integerFields: ['page', 'page_size'],
-    });
-  });
-
-  describe('parseNamespacedQueryString', () => {
    test('should get query params', () => {
      const config = {
        namespace: null,
        defaultParams: { page: 1, page_size: 15 },
        integerFields: ['page', 'page_size'],
      };
-      const query = '?foo=bar&page=3';
-      expect(parseNamespacedQueryString(config, query)).toEqual({
-        foo: 'bar',
+      const query = '?baz=bar&page=3';
+      expect(parseQueryString(config, query)).toEqual({
+        baz: 'bar',
        page: 3,
        page_size: 15,
      });
    });

+    test('should return namespaced defaults if empty query string passed', () => {
+      const config = {
+        namespace: 'foo',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '';
+      expect(parseQueryString(config, query)).toEqual({
+        page: 1,
+        page_size: 15
+      });
+    });
+
    test('should get query params with correct integer fields', () => {
      const config = {
        namespace: null,
@ -118,12 +125,24 @@ describe('qs (qs.js)', () => {
        integerFields: ['page', 'foo'],
      };
      const query = '?foo=4&bar=5';
-      expect(parseNamespacedQueryString(config, query)).toEqual({
+      expect(parseQueryString(config, query)).toEqual({
        foo: 4,
        bar: '5',
      });
    });

+    test('should decode parsed params', () => {
+      const config = {
+        namespace: null,
+        defaultParams: {},
+        integerFields: ['page'],
+      };
+      const query = '?foo=bar%20baz';
+      expect(parseQueryString(config, query)).toEqual({
+        foo: 'bar baz',
+      });
+    });
+
    test('should get namespaced query params', () => {
      const config = {
        namespace: 'inventory',
@ -131,7 +150,7 @@ describe('qs (qs.js)', () => {
        integerFields: ['page', 'page_size'],
      };
      const query = '?inventory.page=2&inventory.order_by=name&other=15';
-      expect(parseNamespacedQueryString(config, query)).toEqual({
+      expect(parseQueryString(config, query)).toEqual({
        page: 2,
        order_by: 'name',
        page_size: 5,
@ -145,81 +164,360 @@ describe('qs (qs.js)', () => {
        integerFields: ['page', 'page_size'],
      };
      const query = '?inventory.page=2&inventory.order_by=name&foo.other=15';
-      expect(parseNamespacedQueryString(config, query)).toEqual({
+      expect(parseQueryString(config, query)).toEqual({
        page: 2,
        order_by: 'name',
        page_size: 5,
      });
    });

-    test('should exclude defaults if includeDefaults is false', () => {
-      const config = {
-        namespace: null,
-        defaultParams: { page: 1, page_size: 15 },
-        integerFields: ['page', 'page_size'],
-      };
-      const query = '?foo=bar&page=3';
-      expect(parseNamespacedQueryString(config, query, false)).toEqual({
-        foo: 'bar',
-        page: 3,
-      });
-    });
-  });
-
-  describe('encodeNamespacedQueryString', () => {
-    test('should encode params without namespace', () => {
-      const config = {
-        namespace: null,
-        defaultParams: { page: 1, page_size: 5 },
-        integerFields: ['page', 'page_size'],
-      };
-      const params = {
-        page: 1,
-        order_by: 'name',
-      };
-      const qs = 'order_by=name&page=1';
-      expect(encodeNamespacedQueryString(config, params)).toEqual(qs);
-    });
-
-    test('should encode params with namespace', () => {
+    test('should exclude other namespaced default query params', () => {
      const config = {
        namespace: 'inventory',
        defaultParams: { page: 1, page_size: 5 },
        integerFields: ['page', 'page_size'],
      };
-      const params = {
+      const query = '?foo.page=2&inventory.order_by=name&foo.other=15';
+      expect(parseQueryString(config, query)).toEqual({
        page: 1,
        order_by: 'name',
+        page_size: 5,
+      });
+    });
+
+    test('should add duplicate non-default params as array', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
      };
-      const qs = 'inventory.order_by=name&inventory.page=1';
-      expect(encodeNamespacedQueryString(config, params)).toEqual(qs);
+      const query = '?baz=bar&baz=boo&page=3';
+      expect(parseQueryString(config, query)).toEqual({
+        baz: ['bar', 'boo'],
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should add duplicate namespaced non-default params as array', () => {
+      const config = {
+        namespace: 'bee',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?bee.baz=bar&bee.baz=boo&bee.page=3';
+      expect(parseQueryString(config, query)).toEqual({
+        baz: ['bar', 'boo'],
+        page: 3,
+        page_size: 15,
+      });
    });
  });

-  describe('updateNamespacedQueryString', () => {
-    test('should return current values', () => {
-      const qs = '?foo=bar&inventory.page=1';
-      const updated = updateNamespacedQueryString({}, qs, {});
-      expect(updated).toEqual('foo=bar&inventory.page=1');
+  describe('addParams', () => {
+    test('should add query params', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?baz=bar&page=3';
+      const newParams = { bag: 'boom' }
+      expect(addParams(config, query, newParams)).toEqual({
+        baz: 'bar',
+        bag: 'boom',
+        page: 3,
+        page_size: 15,
+      });
    });

-    test('should update new values', () => {
-      const qs = '?foo=bar&inventory.page=1';
-      const updated = updateNamespacedQueryString({}, qs, { foo: 'baz' });
-      expect(updated).toEqual('foo=baz&inventory.page=1');
+    test('should add query params with duplicates', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?baz=bar&baz=bang&page=3';
+      const newParams = { baz: 'boom' }
+      expect(addParams(config, query, newParams)).toEqual({
+        baz: ['bar', 'bang', 'boom'],
+        page: 3,
+        page_size: 15,
+      });
    });

-    test('should add new values', () => {
-      const qs = '?foo=bar&inventory.page=1';
-      const updated = updateNamespacedQueryString({}, qs, { page: 5 });
-      expect(updated).toEqual('foo=bar&inventory.page=1&page=5');
+    test('should replace query params that are defaults', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?baz=bar&baz=bang&page=3';
+      const newParams = { page: 5 }
+      expect(addParams(config, query, newParams)).toEqual({
+        baz: ['bar', 'bang'],
+        page: 5,
+        page_size: 15,
+      });
    });

-    test('should update namespaced values', () => {
-      const qs = '?foo=bar&inventory.page=1';
-      const config = { namespace: 'inventory' };
-      const updated = updateNamespacedQueryString(config, qs, { page: 2 });
-      expect(updated).toEqual('foo=bar&inventory.page=2');
+    test('should add multiple params', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?baz=bar&baz=bang&page=3';
+      const newParams = { baz: 'bust', pat: 'pal' }
+      expect(addParams(config, query, newParams)).toEqual({
+        baz: ['bar', 'bang', 'bust'],
+        pat: 'pal',
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should add namespaced query params', () => {
+      const config = {
+        namespace: 'item',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?item.baz=bar&item.page=3';
+      const newParams = { bag: 'boom' }
+      expect(addParams(config, query, newParams)).toEqual({
+        baz: 'bar',
+        bag: 'boom',
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should not include other namespaced query params when adding', () => {
+      const config = {
+        namespace: 'item',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?item.baz=bar&foo.page=3';
+      const newParams = { bag: 'boom' }
+      expect(addParams(config, query, newParams)).toEqual({
+        baz: 'bar',
+        bag: 'boom',
+        page: 1,
+        page_size: 15,
+      });
+    });
+
+    test('should add namespaced query params with duplicates', () => {
+      const config = {
+        namespace: 'item',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?item.baz=bar&item.baz=bang&item.page=3';
+      const newParams = { baz: 'boom' }
+      expect(addParams(config, query, newParams)).toEqual({
+        baz: ['bar', 'bang', 'boom'],
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should replace namespaced query params that are defaults', () => {
+      const config = {
+        namespace: 'item',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?item.baz=bar&item.baz=bang&item.page=3';
+      const newParams = { page: 5 }
+      expect(addParams(config, query, newParams)).toEqual({
+        baz: ['bar', 'bang'],
+        page: 5,
+        page_size: 15,
+      });
+    });
+
+    test('should add multiple namespaced params', () => {
+      const config = {
+        namespace: 'item',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?item.baz=bar&item.baz=bang&item.page=3';
+      const newParams = { baz: 'bust', pat: 'pal' }
+      expect(addParams(config, query, newParams)).toEqual({
+        baz: ['bar', 'bang', 'bust'],
+        pat: 'pal',
+        page: 3,
+        page_size: 15,
+      });
+    });
+  });
+
+  describe('removeParams', () => {
+    test('should remove query params', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?baz=bar&page=3&bag=boom';
+      const newParams = { bag: 'boom' }
+      expect(removeParams(config, query, newParams)).toEqual({
+        baz: 'bar',
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should remove query params with duplicates (array -> string)', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?baz=bar&baz=bang&page=3';
+      const newParams = { baz: 'bar' }
+      expect(removeParams(config, query, newParams)).toEqual({
+        baz: 'bang',
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should remove query params with duplicates (array -> smaller array)', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?baz=bar&baz=bang&baz=bust&page=3';
+      const newParams = { baz: 'bar' }
+      expect(removeParams(config, query, newParams)).toEqual({
+        baz: ['bang', 'bust'],
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should reset query params that have default keys back to default values', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?baz=bar&baz=bang&page=3';
+      const newParams = { page: 3 }
+      expect(removeParams(config, query, newParams)).toEqual({
+        baz: ['bar', 'bang'],
+        page: 1,
+        page_size: 15,
+      });
+    });
+
+    test('should remove multiple params', () => {
+      const config = {
+        namespace: null,
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?baz=bar&baz=bang&baz=bust&pat=pal&page=3';
+      const newParams = { baz: 'bust', pat: 'pal' }
+      expect(removeParams(config, query, newParams)).toEqual({
+        baz: ['bar', 'bang'],
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should remove namespaced query params', () => {
+      const config = {
+        namespace: 'item',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?item.baz=bar&item.page=3';
+      const newParams = { baz: 'bar' }
+      expect(removeParams(config, query, newParams)).toEqual({
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should not include other namespaced query params when removing', () => {
+      const config = {
+        namespace: 'item',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?item.baz=bar&foo.page=3';
+      const newParams = { baz: 'bar' }
+      expect(removeParams(config, query, newParams)).toEqual({
+        page: 1,
+        page_size: 15,
+      });
+    });
+
+    test('should remove namespaced query params with duplicates (array -> string)', () => {
+      const config = {
+        namespace: 'item',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?item.baz=bar&item.baz=bang&item.page=3';
+      const newParams = { baz: 'bar' }
+      expect(removeParams(config, query, newParams)).toEqual({
+        baz: 'bang',
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should remove namespaced query params with duplicates (array -> smaller array)', () => {
+      const config = {
+        namespace: 'item',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?item.baz=bar&item.baz=bang&item.baz=bust&item.page=3';
+      const newParams = { baz: 'bar' }
+      expect(removeParams(config, query, newParams)).toEqual({
+        baz: ['bang', 'bust'],
+        page: 3,
+        page_size: 15,
+      });
+    });
+
+    test('should reset namespaced query params that have default keys back to default values', () => {
+      const config = {
+        namespace: 'item',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?item.baz=bar&item.baz=bang&item.page=3';
+      const newParams = { page: 3 }
+      expect(removeParams(config, query, newParams)).toEqual({
+        baz: ['bar', 'bang'],
+        page: 1,
+        page_size: 15,
+      });
+    });
+
+    test('should remove multiple namespaced params', () => {
+      const config = {
+        namespace: 'item',
+        defaultParams: { page: 1, page_size: 15 },
+        integerFields: ['page', 'page_size'],
+      };
+      const query = '?item.baz=bar&item.baz=bang&item.baz=bust&item.pat=pal&item.page=3';
+      const newParams = { baz: 'bust', pat: 'pal' }
+      expect(removeParams(config, query, newParams)).toEqual({
+        baz: ['bar', 'bang'],
+        page: 3,
+        page_size: 15,
+      });
    });
  });
 });