diff --git a/awx/ui_next/SEARCH.md b/awx/ui_next/SEARCH.md
new file mode 100644
index 0000000000..16088827cc
--- /dev/null
+++ b/awx/ui_next/SEARCH.md
@@ -0,0 +1,251 @@
+# 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
+- DONE add search filter removal test for qs.
+- DONE 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.)
+- fix any spacing issues like collision with action buttons and overall width of the search bar
+
+## 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.
+
+## 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)
diff --git a/awx/ui_next/src/api/Base.js b/awx/ui_next/src/api/Base.js
index d884f8061c..ef7c53460f 100644
--- a/awx/ui_next/src/api/Base.js
+++ b/awx/ui_next/src/api/Base.js
@@ -1,8 +1,13 @@
 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 {
@@ -19,7 +24,7 @@ class Base {
     return this.http.delete(`${this.baseUrl}${id}/`);
   }
 
-  read(params = {}) {
+  read(params) {
     return this.http.get(this.baseUrl, { params });
   }
 
diff --git a/awx/ui_next/src/api/Base.test.jsx b/awx/ui_next/src/api/Base.test.jsx
index df6d874bd0..40907e79f7 100644
--- a/awx/ui_next/src/api/Base.test.jsx
+++ b/awx/ui_next/src/api/Base.test.jsx
@@ -41,15 +41,22 @@ describe('Base', () => {
   });
 
   test('read calls http method with expected data', async done => {
-    const defaultParams = {};
     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();
   });
 
diff --git a/awx/ui_next/src/api/mixins/InstanceGroups.mixin.js b/awx/ui_next/src/api/mixins/InstanceGroups.mixin.js
index 3deff44bf7..e3b2be1cb5 100644
--- a/awx/ui_next/src/api/mixins/InstanceGroups.mixin.js
+++ b/awx/ui_next/src/api/mixins/InstanceGroups.mixin.js
@@ -1,9 +1,10 @@
 const InstanceGroupsMixin = parent =>
   class extends parent {
-    readInstanceGroups(resourceId, params = {}) {
-      return this.http.get(`${this.baseUrl}${resourceId}/instance_groups/`, {
-        params,
-      });
+    readInstanceGroups(resourceId, params) {
+      return this.http.get(
+        `${this.baseUrl}${resourceId}/instance_groups/`,
+        params
+      );
     }
 
     associateInstanceGroup(resourceId, instanceGroupId) {
diff --git a/awx/ui_next/src/api/mixins/Notifications.mixin.js b/awx/ui_next/src/api/mixins/Notifications.mixin.js
index eccadc5dc2..9625c29e04 100644
--- a/awx/ui_next/src/api/mixins/Notifications.mixin.js
+++ b/awx/ui_next/src/api/mixins/Notifications.mixin.js
@@ -4,20 +4,21 @@ const NotificationsMixin = parent =>
       return this.http.options(`${this.baseUrl}${id}/notification_templates/`);
     }
 
-    readNotificationTemplates(id, params = {}) {
-      return this.http.get(`${this.baseUrl}${id}/notification_templates/`, {
-        params,
-      });
+    readNotificationTemplates(id, params) {
+      return this.http.get(
+        `${this.baseUrl}${id}/notification_templates/`,
+        params
+      );
     }
 
-    readNotificationTemplatesSuccess(id, params = {}) {
+    readNotificationTemplatesSuccess(id, params) {
       return this.http.get(
         `${this.baseUrl}${id}/notification_templates_success/`,
         { params }
       );
     }
 
-    readNotificationTemplatesError(id, params = {}) {
+    readNotificationTemplatesError(id, params) {
       return this.http.get(
         `${this.baseUrl}${id}/notification_templates_error/`,
         { params }
@@ -53,44 +54,58 @@ const NotificationsMixin = parent =>
     }
 
     /**
-     * This is a helper method meant to simplify setting the "on" or "off" status of
+     * This is a helper method meant to simplify setting the "on" 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(
+    associateNotificationTemplate(
       resourceId,
       notificationId,
-      notificationType,
-      associationState
+      notificationType
     ) {
-      if (notificationType === 'success' && associationState === true) {
+      if (notificationType === 'success') {
         return this.associateNotificationTemplatesSuccess(
           resourceId,
           notificationId
         );
       }
 
-      if (notificationType === 'success' && associationState === false) {
-        return this.disassociateNotificationTemplatesSuccess(
-          resourceId,
-          notificationId
-        );
-      }
-
-      if (notificationType === 'error' && associationState === true) {
+      if (notificationType === 'error') {
         return this.associateNotificationTemplatesError(
           resourceId,
           notificationId
         );
       }
 
-      if (notificationType === 'error' && associationState === false) {
+      throw new Error(
+        `Unsupported notificationType for association: ${notificationType}`
+      );
+    }
+
+    /**
+     * This is a helper method meant to simplify setting the "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"
+     */
+    disassociateNotificationTemplate(
+      resourceId,
+      notificationId,
+      notificationType
+    ) {
+      if (notificationType === 'success') {
+        return this.disassociateNotificationTemplatesSuccess(
+          resourceId,
+          notificationId
+        );
+      }
+
+      if (notificationType === 'error') {
         return this.disassociateNotificationTemplatesError(
           resourceId,
           notificationId
@@ -98,7 +113,7 @@ const NotificationsMixin = parent =>
       }
 
       throw new Error(
-        `Unsupported notificationType, associationState combination: ${notificationType}, ${associationState}`
+        `Unsupported notificationType for disassociation: ${notificationType}`
       );
     }
   };
diff --git a/awx/ui_next/src/api/models/Organizations.js b/awx/ui_next/src/api/models/Organizations.js
index c8531b3ecd..3cbe64c284 100644
--- a/awx/ui_next/src/api/models/Organizations.js
+++ b/awx/ui_next/src/api/models/Organizations.js
@@ -8,11 +8,11 @@ class Organizations extends InstanceGroupsMixin(NotificationsMixin(Base)) {
     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 });
   }
 }
diff --git a/awx/ui_next/src/api/models/Organizations.test.jsx b/awx/ui_next/src/api/models/Organizations.test.jsx
index 19a1958dae..cd22a09bb8 100644
--- a/awx/ui_next/src/api/models/Organizations.test.jsx
+++ b/awx/ui_next/src/api/models/Organizations.test.jsx
@@ -3,7 +3,6 @@ import { describeNotificationMixin } from '../../../testUtils/apiReusable';
 
 describe('OrganizationsAPI', () => {
   const orgId = 1;
-  const searchParams = { foo: 'bar' };
   const createPromise = () => Promise.resolve();
   const mockHttp = { get: jest.fn(createPromise) };
 
@@ -14,36 +13,46 @@ describe('OrganizationsAPI', () => {
   });
 
   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 => {
+    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();
   });
 });
diff --git a/awx/ui_next/src/components/AddRole/AddResourceRole.jsx b/awx/ui_next/src/components/AddRole/AddResourceRole.jsx
index 7bf58c3cb7..2770afe53e 100644
--- a/awx/ui_next/src/components/AddRole/AddResourceRole.jsx
+++ b/awx/ui_next/src/components/AddRole/AddResourceRole.jsx
@@ -129,11 +129,21 @@ class AddResourceRole extends React.Component {
     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 = '';
diff --git a/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx b/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
index 8610bfa779..2599c7fd64 100644
--- 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,10 +40,7 @@ class SelectResourceStep extends React.Component {
 
   async readResourceList() {
     const { onSearch, location } = this.props;
-    const queryParams = parseNamespacedQueryString(
-      this.qsConfig,
-      location.search
-    );
+    const queryParams = parseQueryString(this.qsConfig, location.search);
 
     this.setState({
       isLoading: true,
diff --git a/awx/ui_next/src/components/AddRole/SelectResourceStep.test.jsx b/awx/ui_next/src/components/AddRole/SelectResourceStep.test.jsx
index aab32c7df6..3d32abef06 100644
--- 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();
   });
diff --git a/awx/ui_next/src/components/Chip/ChipGroup.jsx b/awx/ui_next/src/components/Chip/ChipGroup.jsx
index df00f86eaa..58ba8ac7e5 100644
--- a/awx/ui_next/src/components/Chip/ChipGroup.jsx
+++ b/awx/ui_next/src/components/Chip/ChipGroup.jsx
@@ -20,8 +20,8 @@ const ChipGroup = ({ children, className, showOverflowAfter, ...props }) => {
 
   return (
     <ul className={`pf-c-chip-group ${className}`} {...props}>
-      {mappedChildren.slice(0, numToShow)}
-      {showOverflowToggle && (
+      {!showOverflowAfter ? mappedChildren : mappedChildren.slice(0, numToShow)}
+      {showOverflowAfter && showOverflowToggle && (
         <Chip isOverflowChip onClick={toggleIsOpen} component="li">
           {isExpanded ? expandedText : collapsedText}
         </Chip>
@@ -39,4 +39,8 @@ ChipGroup.defaultProps = {
 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;
+  }
 `;
diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
index 9bf646ba96..8beb597edb 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
@@ -13,9 +13,11 @@ 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,17 +55,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' },
     ];
@@ -82,9 +87,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(
@@ -105,7 +115,7 @@ describe('<DataListToolbar />', () => {
     toolbar.update();
 
     const sortDropdownItemsDescending = toolbar
-      .find(dropdownMenuItems)
+      .find(sortDropdownMenuItems)
       .children();
     expect(sortDropdownItemsDescending.length).toBe(2);
     sortDropdownToggleDescending.simulate('click'); // toggle close the sort dropdown
@@ -114,13 +124,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);
@@ -185,7 +195,9 @@ 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();
diff --git a/awx/ui_next/src/components/FilterTags/FilterTags.jsx b/awx/ui_next/src/components/FilterTags/FilterTags.jsx
new file mode 100644
index 0000000000..c9bc1cb4a7
--- /dev/null
+++ b/awx/ui_next/src/components/FilterTags/FilterTags.jsx
@@ -0,0 +1,88 @@
+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 filterDefaultParams = (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 nonDefaultParams = filterDefaultParams(
+    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>{i18n._(t`Active Filters:`)}</FilterLabel>
+        <ChipGroup>
+          {queryParamsArr.map(({ key, value }) => (
+            <Chip
+              className="searchTagChip"
+              key={`${key}__${value}`}
+              isReadOnly={false}
+              onClick={() => onRemove(key, value)}
+            >
+              {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));
diff --git a/awx/ui_next/src/components/FilterTags/FilterTags.test.jsx b/awx/ui_next/src/components/FilterTags/FilterTags.test.jsx
new file mode 100644
index 0000000000..df681d7c68
--- /dev/null
+++ b/awx/ui_next/src/components/FilterTags/FilterTags.test.jsx
@@ -0,0 +1,47 @@
+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();
+  });
+});
diff --git a/awx/ui_next/src/components/FilterTags/index.js b/awx/ui_next/src/components/FilterTags/index.js
new file mode 100644
index 0000000000..19a1fa21b9
--- /dev/null
+++ b/awx/ui_next/src/components/FilterTags/index.js
@@ -0,0 +1 @@
+export { default } from './FilterTags';
diff --git a/awx/ui_next/src/components/ListHeader/ListHeader.jsx b/awx/ui_next/src/components/ListHeader/ListHeader.jsx
new file mode 100644
index 0000000000..4974c001c9
--- /dev/null
+++ b/awx/ui_next/src/components/ListHeader/ListHeader.jsx
@@ -0,0 +1,147 @@
+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;
+    const oldParams = parseQueryString(qsConfig, search);
+    this.pushHistoryState(addParams(qsConfig, oldParams, { [key]: value }));
+  }
+
+  handleRemove(key, value) {
+    const { history, qsConfig } = this.props;
+    const { search } = history.location;
+    const oldParams = parseQueryString(qsConfig, search);
+    this.pushHistoryState(removeParams(qsConfig, oldParams, { [key]: value }));
+  }
+
+  handleRemoveAll() {
+    this.pushHistoryState(null);
+  }
+
+  handleSort(key, order) {
+    const { history, qsConfig } = this.props;
+    const { search } = history.location;
+    const oldParams = parseQueryString(qsConfig, search);
+    this.pushHistoryState(
+      addParams(qsConfig, oldParams, {
+        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);
diff --git a/awx/ui_next/src/components/ListHeader/ListHeader.test.jsx b/awx/ui_next/src/components/ListHeader/ListHeader.test.jsx
new file mode 100644
index 0000000000..9435f2e8b3
--- /dev/null
+++ b/awx/ui_next/src/components/ListHeader/ListHeader.test.jsx
@@ -0,0 +1,61 @@
+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('');
+  });
+});
diff --git a/awx/ui_next/src/components/ListHeader/index.js b/awx/ui_next/src/components/ListHeader/index.js
new file mode 100644
index 0000000000..64af4f118a
--- /dev/null
+++ b/awx/ui_next/src/components/ListHeader/index.js
@@ -0,0 +1 @@
+export { default } from './ListHeader';
diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx
index 9eeecfe6af..49586324ca 100644
--- 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 {
diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
index 48bc97bf73..d238595212 100644
--- a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
@@ -4,97 +4,56 @@ 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) {
     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 });
+    const { history, qsConfig } = this.props;
+    const { search } = history.location;
+    const oldParams = parseQueryString(qsConfig, search);
+    this.pushHistoryState(addParams(qsConfig, oldParams, { 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) {
     const { history, qsConfig } = this.props;
-    const { pathname, search } = history.location;
-    const qs = updateNamespacedQueryString(qsConfig, search, newParams);
-    history.push(`${pathname}?${qs}`);
+    const { search } = history.location;
+    const oldParams = parseQueryString(qsConfig, search);
+    this.pushHistoryState(
+      addParams(qsConfig, oldParams, { 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 [orderBy, sortOrder] = this.getSortOrder();
     const {
       contentError,
       hasContentLoading,
@@ -113,8 +72,15 @@ class PaginatedDataList extends React.Component {
     } = this.props;
     const columns = toolbarColumns.length
       ? toolbarColumns
-      : [{ name: i18n._(t`Name`), key: 'name', isSortable: true }];
-    const queryParams = parseNamespacedQueryString(qsConfig, location.search);
+      : [
+          {
+            name: i18n._(t`Name`),
+            key: 'name',
+            isSortable: true,
+            isSearchable: true,
+          },
+        ];
+    const queryParams = parseQueryString(qsConfig, location.search);
 
     const itemDisplayName = ucFirst(pluralize(itemName));
     const itemDisplayNamePlural = ucFirst(
@@ -145,12 +111,12 @@ class PaginatedDataList extends React.Component {
     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,13 +124,12 @@ 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"
diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.test.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.test.jsx
index 1c9a22c374..8ca40de3df 100644
--- 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'],
@@ -97,7 +60,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', () => {
@@ -119,43 +83,11 @@ describe('<PaginatedDataList />', () => {
     );
 
     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('');
   });
 });
diff --git a/awx/ui_next/src/components/Search/Search.jsx b/awx/ui_next/src/components/Search/Search.jsx
index 59cbe74658..54e434688b 100644
--- a/awx/ui_next/src/components/Search/Search.jsx
+++ b/awx/ui_next/src/components/Search/Search.jsx
@@ -8,6 +8,8 @@ import {
   DropdownPosition,
   DropdownToggle,
   DropdownItem,
+  Form,
+  FormGroup,
   TextInput as PFTextInput,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
@@ -48,6 +50,17 @@ const Dropdown = styled(PFDropdown)`
     }
   }
 `;
+
+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) {
     super(props);
@@ -77,11 +90,17 @@ 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) {
@@ -92,13 +111,12 @@ class Search extends React.Component {
     const { up } = DropdownPosition;
     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 +124,62 @@ 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>
+              }
             >
-              {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>
+              <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}</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>
     );
   }
 }
diff --git a/awx/ui_next/src/components/Search/Search.test.jsx b/awx/ui_next/src/components/Search/Search.test.jsx
index 3b7f1816c2..e611d876c3 100644
--- a/awx/ui_next/src/components/Search/Search.test.jsx
+++ b/awx/ui_next/src/components/Search/Search.test.jsx
@@ -12,9 +12,11 @@ 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();
@@ -28,11 +30,13 @@ 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} />
@@ -44,8 +48,13 @@ 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(
diff --git a/awx/ui_next/src/components/Sort/Sort.test.jsx b/awx/ui_next/src/components/Sort/Sort.test.jsx
index d23c75fa2f..0e0208cd16 100644
--- a/awx/ui_next/src/components/Sort/Sort.test.jsx
+++ b/awx/ui_next/src/components/Sort/Sort.test.jsx
@@ -12,7 +12,9 @@ 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"]';
 
diff --git a/awx/ui_next/src/screens/Job/JobList/JobList.jsx b/awx/ui_next/src/screens/Job/JobList/JobList.jsx
index f519639c94..6a4c44067d 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobList.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobList.jsx
@@ -7,11 +7,10 @@ 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,
 } from '@components/PaginatedDataList';
-import { getQSConfig, parseNamespacedQueryString } from '@util/qs';
+import { getQSConfig, parseQueryString } from '@util/qs';
 
 import JobListItem from './JobListItem';
 
@@ -29,7 +28,7 @@ class JobList extends Component {
     this.state = {
       hasContentLoading: true,
       contentError: null,
-      deletionError: null,
+      deletionError: false,
       selected: [],
       jobs: [],
       itemCount: 0,
@@ -53,7 +52,7 @@ class JobList extends Component {
   }
 
   handleDeleteErrorClose() {
-    this.setState({ deletionError: null });
+    this.setState({ deletionError: false });
   }
 
   handleSelectAll(isSelected) {
@@ -73,11 +72,11 @@ class JobList extends Component {
 
   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();
     }
@@ -85,7 +84,7 @@ class JobList extends Component {
 
   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 });
     try {
@@ -128,7 +127,12 @@ class JobList extends Component {
             itemName={itemName}
             qsConfig={QS_CONFIG}
             toolbarColumns={[
-              { name: i18n._(t`Name`), key: 'name', isSortable: true },
+              {
+                name: i18n._(t`Name`),
+                key: 'name',
+                isSortable: true,
+                isSearchable: true,
+              },
               {
                 name: i18n._(t`Finished`),
                 key: 'finished',
@@ -172,7 +176,6 @@ class JobList extends Component {
           onClose={this.handleDeleteErrorClose}
         >
           {i18n._(t`Failed to delete one or more jobs.`)}
-          <ErrorDetail error={deletionError} />
         </AlertModal>
       </PageSection>
     );
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx b/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
index 6961cf9fd5..4732852551 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
@@ -7,15 +7,10 @@ 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 {
-  getQSConfig,
-  encodeQueryString,
-  parseNamespacedQueryString,
-} from '@util/qs';
+import { getQSConfig, encodeQueryString, parseQueryString } from '@util/qs';
 import { Organization } from '@types';
 
 import DeleteRoleConfirmationModal from './DeleteRoleConfirmationModal';
@@ -38,7 +33,7 @@ class OrganizationAccess extends React.Component {
       accessRecords: [],
       contentError: null,
       hasContentLoading: true,
-      deletionError: null,
+      hasDeletionError: false,
       deletionRecord: null,
       deletionRole: null,
       isAddModalOpen: false,
@@ -61,14 +56,8 @@ class OrganizationAccess extends React.Component {
   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();
@@ -77,7 +66,7 @@ class OrganizationAccess extends React.Component {
 
   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 });
     try {
@@ -102,7 +91,7 @@ class OrganizationAccess extends React.Component {
 
   handleDeleteErrorClose() {
     this.setState({
-      deletionError: null,
+      hasDeletionError: false,
       deletionRecord: null,
       deletionRole: null,
     });
@@ -132,10 +121,10 @@ class OrganizationAccess extends React.Component {
         deletionRole: null,
         deletionRecord: null,
       });
-    } catch (err) {
+    } catch (error) {
       this.setState({
         hasContentLoading: false,
-        deletionError: err,
+        hasDeletionError: true,
       });
     }
   }
@@ -161,13 +150,13 @@ class OrganizationAccess extends React.Component {
       hasContentLoading,
       deletionRole,
       deletionRecord,
-      deletionError,
+      hasDeletionError,
       itemCount,
       isAddModalOpen,
     } = this.state;
     const canEdit = organization.summary_fields.user_capabilities.edit;
     const isDeleteModalOpen =
-      !hasContentLoading && !deletionError && deletionRole;
+      !hasContentLoading && !hasDeletionError && deletionRole;
 
     return (
       <Fragment>
@@ -179,9 +168,24 @@ class OrganizationAccess extends React.Component {
           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 => (
             <DataListToolbar
@@ -222,13 +226,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>
     );
diff --git 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
index 321c03c4eb..0d6d397ed1 100644
--- 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
@@ -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",
@@ -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",
@@ -169,16 +175,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 +195,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 +446,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
     </I18n>
   </WithI18n>
   <_default
-    isOpen={null}
+    isOpen={false}
     onClose={[Function]}
     title="Error!"
     variant="danger"
diff --git 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
index c1b9903e68..4dd8a4596c 100644
--- 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,11 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                                                 forwardedRef={null}
                                               >
                                                 <ChipGroup
-                                                  className="ChipGroup-sc-10zu8t0-0 vIGxT"
+                                                  className="ChipGroup-sc-10zu8t0-0 ldAQsx"
                                                   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"
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
index 037241a156..147bd9eec2 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
@@ -7,12 +7,11 @@ 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';
 
@@ -29,7 +28,7 @@ class OrganizationsList extends Component {
     this.state = {
       hasContentLoading: true,
       contentError: null,
-      deletionError: null,
+      hasDeletionError: false,
       organizations: [],
       selected: [],
       itemCount: 0,
@@ -72,18 +71,17 @@ class OrganizationsList extends Component {
   }
 
   handleDeleteErrorClose() {
-    this.setState({ deletionError: null });
+    this.setState({ hasDeletionError: false });
   }
 
   async handleOrgDelete() {
-    const { selected, itemCount } = this.state;
+    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 });
     } catch (err) {
-      this.setState({ deletionError: err });
+      this.setState({ hasDeletionError: true });
     } finally {
       await this.loadOrganizations();
     }
@@ -92,7 +90,7 @@ class OrganizationsList extends Component {
   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) {
@@ -136,7 +134,7 @@ class OrganizationsList extends Component {
       itemCount,
       contentError,
       hasContentLoading,
-      deletionError,
+      hasDeletionError,
       selected,
       organizations,
     } = this.state;
@@ -151,14 +149,19 @@ class OrganizationsList extends Component {
         <PageSection variant={medium}>
           <Card>
             <PaginatedDataList
-              contentError={contentError}
+              error={contentError}
               hasContentLoading={hasContentLoading}
               items={organizations}
               itemCount={itemCount}
               itemName="organization"
               qsConfig={QS_CONFIG}
               toolbarColumns={[
-                { name: i18n._(t`Name`), key: 'name', isSortable: true },
+                {
+                  name: i18n._(t`Name`),
+                  key: 'name',
+                  isSortable: true,
+                  isSearchable: true,
+                },
                 {
                   name: i18n._(t`Modified`),
                   key: 'modified',
@@ -209,13 +212,12 @@ class OrganizationsList extends Component {
           </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>
     );
diff --git a/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx b/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx
index ec0334d3a9..dc6822ce42 100644
--- 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,7 +18,7 @@ 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 },
 ];
@@ -29,7 +29,7 @@ class OrganizationNotifications extends Component {
     this.state = {
       contentError: null,
       hasContentLoading: true,
-      toggleError: null,
+      toggleError: false,
       toggleLoading: false,
       itemCount: 0,
       notifications: [],
@@ -58,7 +58,7 @@ class OrganizationNotifications extends Component {
   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 +68,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) {
@@ -149,22 +151,29 @@ class OrganizationNotifications extends Component {
 
     this.setState({ toggleLoading: true });
     try {
-      await OrganizationsAPI.updateNotificationTemplateAssociation(
-        id,
-        notificationId,
-        status,
-        !isCurrentlyOn
-      );
+      if (isCurrentlyOn) {
+        await OrganizationsAPI.disassociateNotificationTemplate(
+          id,
+          notificationId,
+          status
+        );
+      } else {
+        await OrganizationsAPI.associateNotificationTemplate(
+          id,
+          notificationId,
+          status
+        );
+      }
       this.setState(stateUpdateFunction);
     } catch (err) {
-      this.setState({ toggleError: err });
+      this.setState({ toggleError: true });
     } finally {
       this.setState({ toggleLoading: false });
     }
   }
 
   handleNotificationErrorClose() {
-    this.setState({ toggleError: null });
+    this.setState({ toggleError: false });
   }
 
   render() {
@@ -205,9 +214,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.`)}
diff --git a/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.test.jsx b/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.test.jsx
index 6aa6ee12d4..73885d1a6d 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.test.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.test.jsx
@@ -96,9 +96,11 @@ describe('<OrganizationNotifications />', () => {
       .find('Switch')
       .at(0)
       .prop('onChange')();
-    expect(
-      OrganizationsAPI.updateNotificationTemplateAssociation
-    ).toHaveBeenCalledWith(1, 2, 'success', true);
+    expect(OrganizationsAPI.associateNotificationTemplate).toHaveBeenCalledWith(
+      1,
+      2,
+      'success'
+    );
     await sleep(0);
     wrapper.update();
     expect(
@@ -122,9 +124,11 @@ describe('<OrganizationNotifications />', () => {
       .find('Switch')
       .at(1)
       .prop('onChange')();
-    expect(
-      OrganizationsAPI.updateNotificationTemplateAssociation
-    ).toHaveBeenCalledWith(1, 1, 'error', true);
+    expect(OrganizationsAPI.associateNotificationTemplate).toHaveBeenCalledWith(
+      1,
+      1,
+      'error'
+    );
     await sleep(0);
     wrapper.update();
     expect(
@@ -149,8 +153,8 @@ describe('<OrganizationNotifications />', () => {
       .at(0)
       .prop('onChange')();
     expect(
-      OrganizationsAPI.updateNotificationTemplateAssociation
-    ).toHaveBeenCalledWith(1, 1, 'success', false);
+      OrganizationsAPI.disassociateNotificationTemplate
+    ).toHaveBeenCalledWith(1, 1, 'success');
     await sleep(0);
     wrapper.update();
     expect(
@@ -175,8 +179,8 @@ describe('<OrganizationNotifications />', () => {
       .at(1)
       .prop('onChange')();
     expect(
-      OrganizationsAPI.updateNotificationTemplateAssociation
-    ).toHaveBeenCalledWith(1, 2, 'error', false);
+      OrganizationsAPI.disassociateNotificationTemplate
+    ).toHaveBeenCalledWith(1, 2, 'error');
     await sleep(0);
     wrapper.update();
     expect(
diff --git 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
index dd84655a06..c35153ba91 100644
--- 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
@@ -77,6 +77,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
               toolbarColumns={
                 Array [
                   Object {
+                    "isSearchable": true,
                     "isSortable": true,
                     "key": "name",
                     "name": "Name",
@@ -140,6 +141,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                   toolbarColumns={
                     Array [
                       Object {
+                        "isSearchable": true,
                         "isSortable": true,
                         "key": "name",
                         "name": "Name",
@@ -220,6 +222,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                       toolbarColumns={
                         Array [
                           Object {
+                            "isSearchable": true,
                             "isSortable": true,
                             "key": "name",
                             "name": "Name",
@@ -239,10 +242,11 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                         ]
                       }
                     >
-                      <WithI18n
+                      <withRouter(ListHeader)
                         columns={
                           Array [
                             Object {
+                              "isSearchable": true,
                               "isSortable": true,
                               "key": "name",
                               "name": "Name",
@@ -261,20 +265,29 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                             },
                           ]
                         }
-                        onSearch={[Function]}
-                        onSort={[Function]}
-                        sortOrder="ascending"
-                        sortedColumnKey="name"
+                        itemCount={2}
+                        qsConfig={
+                          Object {
+                            "defaultParams": Object {
+                              "order_by": "name",
+                              "page": 1,
+                              "page_size": 5,
+                            },
+                            "integerFields": Array [
+                              "page",
+                              "page_size",
+                            ],
+                            "namespace": "notification",
+                          }
+                        }
+                        renderToolbar={[Function]}
                       >
-                        <I18n
-                          update={true}
-                          withHash={true}
-                        >
-                          <DataListToolbar
-                            additionalControls={Array []}
+                        <Route>
+                          <ListHeader
                             columns={
                               Array [
                                 Object {
+                                  "isSearchable": true,
                                   "isSortable": true,
                                   "key": "name",
                                   "name": "Name",
@@ -293,73 +306,128 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                 },
                               ]
                             }
-                            fillWidth={false}
-                            i18n={"/i18n/"}
-                            isAllSelected={false}
-                            isCompact={false}
-                            onCompact={null}
-                            onExpand={null}
-                            onSearch={[Function]}
-                            onSelectAll={null}
-                            onSort={[Function]}
-                            showSelectAll={false}
-                            sortOrder="ascending"
-                            sortedColumnKey="name"
+                            history={"/history/"}
+                            itemCount={2}
+                            location={
+                              Object {
+                                "hash": "",
+                                "pathname": "",
+                                "search": "",
+                                "state": "",
+                              }
+                            }
+                            match={
+                              Object {
+                                "isExact": false,
+                                "params": Object {},
+                                "path": "",
+                                "url": "",
+                              }
+                            }
+                            qsConfig={
+                              Object {
+                                "defaultParams": Object {
+                                  "order_by": "name",
+                                  "page": 1,
+                                  "page_size": 5,
+                                },
+                                "integerFields": Array [
+                                  "page",
+                                  "page_size",
+                                ],
+                                "namespace": "notification",
+                              }
+                            }
+                            renderToolbar={[Function]}
                           >
-                            <DataListToolbar__AWXToolbar>
-                              <StyledComponent
-                                forwardedComponent={
+                            <WithI18n
+                              columns={
+                                Array [
                                   Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "DataListToolbar__AWXToolbar-ajzso8-0",
-                                      "isStatic": true,
-                                      "lastClassName": "bKIKDr",
-                                      "rules": Array [
-                                        "--awx-toolbar--BackgroundColor:var(--pf-global--BackgroundColor--light-100);--awx-toolbar--BorderColor:#ebebeb;--awx-toolbar--BorderWidth:var(--pf-global--BorderWidth--sm);--pf-global--target-size--MinHeight:0;--pf-global--target-size--MinWidth:0;--pf-global--FontSize--md:14px;border-bottom:var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);background-color:var(--awx-toolbar--BackgroundColor);display:flex;min-height:70px;flex-grow:1;",
-                                      ],
-                                    },
-                                    "displayName": "DataListToolbar__AWXToolbar",
-                                    "foldedComponentIds": Array [],
-                                    "render": [Function],
-                                    "styledComponentId": "DataListToolbar__AWXToolbar-ajzso8-0",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
+                                    "isSearchable": true,
+                                    "isSortable": true,
+                                    "key": "name",
+                                    "name": "Name",
+                                  },
+                                  Object {
+                                    "isNumeric": true,
+                                    "isSortable": true,
+                                    "key": "modified",
+                                    "name": "Modified",
+                                  },
+                                  Object {
+                                    "isNumeric": true,
+                                    "isSortable": true,
+                                    "key": "created",
+                                    "name": "Created",
+                                  },
+                                ]
+                              }
+                              onSearch={[Function]}
+                              onSort={[Function]}
+                              sortOrder="ascending"
+                              sortedColumnKey="name"
+                            >
+                              <I18n
+                                update={true}
+                                withHash={true}
                               >
-                                <div
-                                  className="DataListToolbar__AWXToolbar-ajzso8-0 bKIKDr"
+                                <DataListToolbar
+                                  additionalControls={Array []}
+                                  columns={
+                                    Array [
+                                      Object {
+                                        "isSearchable": true,
+                                        "isSortable": true,
+                                        "key": "name",
+                                        "name": "Name",
+                                      },
+                                      Object {
+                                        "isNumeric": true,
+                                        "isSortable": true,
+                                        "key": "modified",
+                                        "name": "Modified",
+                                      },
+                                      Object {
+                                        "isNumeric": true,
+                                        "isSortable": true,
+                                        "key": "created",
+                                        "name": "Created",
+                                      },
+                                    ]
+                                  }
+                                  fillWidth={false}
+                                  i18n={"/i18n/"}
+                                  isAllSelected={false}
+                                  isCompact={false}
+                                  onCompact={null}
+                                  onExpand={null}
+                                  onSearch={[Function]}
+                                  onSelectAll={null}
+                                  onSort={[Function]}
+                                  showSelectAll={false}
+                                  sortOrder="ascending"
+                                  sortedColumnKey="name"
                                 >
-                                  <Styled(DataListToolbar__Toolbar)
-                                    _css=""
-                                  >
+                                  <DataListToolbar__AWXToolbar>
                                     <StyledComponent
-                                      _css=""
                                       forwardedComponent={
                                         Object {
                                           "$$typeof": Symbol(react.forward_ref),
                                           "attrs": Array [],
                                           "componentStyle": ComponentStyle {
-                                            "componentId": "sc-htpNat",
-                                            "isStatic": false,
-                                            "lastClassName": "dnOsXG",
+                                            "componentId": "DataListToolbar__AWXToolbar-ajzso8-0",
+                                            "isStatic": true,
+                                            "lastClassName": "bKIKDr",
                                             "rules": Array [
-                                              "flex-grow:1;margin-left:20px;margin-right:20px;",
-                                              [Function],
+                                              "--awx-toolbar--BackgroundColor:var(--pf-global--BackgroundColor--light-100);--awx-toolbar--BorderColor:#ebebeb;--awx-toolbar--BorderWidth:var(--pf-global--BorderWidth--sm);--pf-global--target-size--MinHeight:0;--pf-global--target-size--MinWidth:0;--pf-global--FontSize--md:14px;border-bottom:var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);background-color:var(--awx-toolbar--BackgroundColor);display:flex;min-height:70px;flex-grow:1;",
                                             ],
                                           },
-                                          "displayName": "Styled(DataListToolbar__Toolbar)",
-                                          "foldedComponentIds": Array [
-                                            "DataListToolbar__Toolbar-ajzso8-1",
-                                          ],
+                                          "displayName": "DataListToolbar__AWXToolbar",
+                                          "foldedComponentIds": Array [],
                                           "render": [Function],
-                                          "styledComponentId": "sc-htpNat",
-                                          "target": [Function],
+                                          "styledComponentId": "DataListToolbar__AWXToolbar-ajzso8-0",
+                                          "target": "div",
                                           "toString": [Function],
                                           "warnTooManyClasses": [Function],
                                           "withComponent": [Function],
@@ -367,62 +435,68 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                       }
                                       forwardedRef={null}
                                     >
-                                      <Toolbar
-                                        _css=""
-                                        className="DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG"
+                                      <div
+                                        className="DataListToolbar__AWXToolbar-ajzso8-0 bKIKDr"
                                       >
-                                        <div
+                                        <Styled(DataListToolbar__Toolbar)
                                           _css=""
-                                          className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG"
                                         >
-                                          <DataListToolbar__ColumnLeft>
-                                            <StyledComponent
-                                              forwardedComponent={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "attrs": Array [],
-                                                  "componentStyle": ComponentStyle {
-                                                    "componentId": "DataListToolbar__ColumnLeft-ajzso8-3",
-                                                    "isStatic": true,
-                                                    "lastClassName": "bpkKMr",
-                                                    "rules": Array [
-                                                      "display:flex;flex-grow:1;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;",
-                                                    ],
-                                                  },
-                                                  "displayName": "DataListToolbar__ColumnLeft",
-                                                  "foldedComponentIds": Array [],
-                                                  "render": [Function],
-                                                  "styledComponentId": "DataListToolbar__ColumnLeft-ajzso8-3",
-                                                  "target": "div",
-                                                  "toString": [Function],
-                                                  "warnTooManyClasses": [Function],
-                                                  "withComponent": [Function],
-                                                }
+                                          <StyledComponent
+                                            _css=""
+                                            forwardedComponent={
+                                              Object {
+                                                "$$typeof": Symbol(react.forward_ref),
+                                                "attrs": Array [],
+                                                "componentStyle": ComponentStyle {
+                                                  "componentId": "sc-htpNat",
+                                                  "isStatic": false,
+                                                  "lastClassName": "dnOsXG",
+                                                  "rules": Array [
+                                                    "flex-grow:1;margin-left:20px;margin-right:20px;",
+                                                    [Function],
+                                                  ],
+                                                },
+                                                "displayName": "Styled(DataListToolbar__Toolbar)",
+                                                "foldedComponentIds": Array [
+                                                  "DataListToolbar__Toolbar-ajzso8-1",
+                                                ],
+                                                "render": [Function],
+                                                "styledComponentId": "sc-htpNat",
+                                                "target": [Function],
+                                                "toString": [Function],
+                                                "warnTooManyClasses": [Function],
+                                                "withComponent": [Function],
                                               }
-                                              forwardedRef={null}
+                                            }
+                                            forwardedRef={null}
+                                          >
+                                            <Toolbar
+                                              _css=""
+                                              className="DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG"
                                             >
                                               <div
-                                                className="DataListToolbar__ColumnLeft-ajzso8-3 bpkKMr"
+                                                _css=""
+                                                className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG"
                                               >
-                                                <Styled(ToolbarItem)>
+                                                <DataListToolbar__ColumnLeft>
                                                   <StyledComponent
                                                     forwardedComponent={
                                                       Object {
                                                         "$$typeof": Symbol(react.forward_ref),
                                                         "attrs": Array [],
                                                         "componentStyle": ComponentStyle {
-                                                          "componentId": "sc-bxivhb",
+                                                          "componentId": "DataListToolbar__ColumnLeft-ajzso8-3",
                                                           "isStatic": true,
-                                                          "lastClassName": "gYEJOJ",
+                                                          "lastClassName": "bpkKMr",
                                                           "rules": Array [
-                                                            "flex-grow: 1;",
+                                                            "display:flex;flex-grow:1;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;",
                                                           ],
                                                         },
-                                                        "displayName": "Styled(ToolbarItem)",
+                                                        "displayName": "DataListToolbar__ColumnLeft",
                                                         "foldedComponentIds": Array [],
                                                         "render": [Function],
-                                                        "styledComponentId": "sc-bxivhb",
-                                                        "target": [Function],
+                                                        "styledComponentId": "DataListToolbar__ColumnLeft-ajzso8-3",
+                                                        "target": "div",
                                                         "toString": [Function],
                                                         "warnTooManyClasses": [Function],
                                                         "withComponent": [Function],
@@ -430,71 +504,528 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                     }
                                                     forwardedRef={null}
                                                   >
-                                                    <ToolbarItem
-                                                      className="sc-bxivhb gYEJOJ"
+                                                    <div
+                                                      className="DataListToolbar__ColumnLeft-ajzso8-3 bpkKMr"
                                                     >
-                                                      <div
-                                                        className="pf-l-toolbar__item sc-bxivhb gYEJOJ"
-                                                      >
-                                                        <WithI18n
-                                                          columns={
-                                                            Array [
-                                                              Object {
-                                                                "isSortable": true,
-                                                                "key": "name",
-                                                                "name": "Name",
+                                                      <Styled(ToolbarItem)>
+                                                        <StyledComponent
+                                                          forwardedComponent={
+                                                            Object {
+                                                              "$$typeof": Symbol(react.forward_ref),
+                                                              "attrs": Array [],
+                                                              "componentStyle": ComponentStyle {
+                                                                "componentId": "sc-bxivhb",
+                                                                "isStatic": true,
+                                                                "lastClassName": "gYEJOJ",
+                                                                "rules": Array [
+                                                                  "flex-grow: 1;",
+                                                                ],
                                                               },
-                                                              Object {
-                                                                "isNumeric": true,
-                                                                "isSortable": true,
-                                                                "key": "modified",
-                                                                "name": "Modified",
-                                                              },
-                                                              Object {
-                                                                "isNumeric": true,
-                                                                "isSortable": true,
-                                                                "key": "created",
-                                                                "name": "Created",
-                                                              },
-                                                            ]
+                                                              "displayName": "Styled(ToolbarItem)",
+                                                              "foldedComponentIds": Array [],
+                                                              "render": [Function],
+                                                              "styledComponentId": "sc-bxivhb",
+                                                              "target": [Function],
+                                                              "toString": [Function],
+                                                              "warnTooManyClasses": [Function],
+                                                              "withComponent": [Function],
+                                                            }
                                                           }
-                                                          onSearch={[Function]}
-                                                          sortedColumnKey="name"
+                                                          forwardedRef={null}
                                                         >
-                                                          <I18n
-                                                            update={true}
-                                                            withHash={true}
+                                                          <ToolbarItem
+                                                            className="sc-bxivhb gYEJOJ"
                                                           >
-                                                            <Search
-                                                              columns={
-                                                                Array [
-                                                                  Object {
-                                                                    "isSortable": true,
-                                                                    "key": "name",
-                                                                    "name": "Name",
-                                                                  },
-                                                                  Object {
-                                                                    "isNumeric": true,
-                                                                    "isSortable": true,
-                                                                    "key": "modified",
-                                                                    "name": "Modified",
-                                                                  },
-                                                                  Object {
-                                                                    "isNumeric": true,
-                                                                    "isSortable": true,
-                                                                    "key": "created",
-                                                                    "name": "Created",
-                                                                  },
-                                                                ]
-                                                              }
-                                                              i18n={"/i18n/"}
-                                                              onSearch={[Function]}
-                                                              sortedColumnKey="name"
+                                                            <div
+                                                              className="pf-l-toolbar__item sc-bxivhb gYEJOJ"
                                                             >
-                                                              <div
-                                                                className="pf-c-input-group"
+                                                              <WithI18n
+                                                                columns={
+                                                                  Array [
+                                                                    Object {
+                                                                      "isSearchable": true,
+                                                                      "isSortable": true,
+                                                                      "key": "name",
+                                                                      "name": "Name",
+                                                                    },
+                                                                    Object {
+                                                                      "isNumeric": true,
+                                                                      "isSortable": true,
+                                                                      "key": "modified",
+                                                                      "name": "Modified",
+                                                                    },
+                                                                    Object {
+                                                                      "isNumeric": true,
+                                                                      "isSortable": true,
+                                                                      "key": "created",
+                                                                      "name": "Created",
+                                                                    },
+                                                                  ]
+                                                                }
+                                                                onSearch={[Function]}
+                                                                sortedColumnKey="name"
                                                               >
-                                                                <Search__Dropdown
+                                                                <I18n
+                                                                  update={true}
+                                                                  withHash={true}
+                                                                >
+                                                                  <Search
+                                                                    columns={
+                                                                      Array [
+                                                                        Object {
+                                                                          "isSearchable": true,
+                                                                          "isSortable": true,
+                                                                          "key": "name",
+                                                                          "name": "Name",
+                                                                        },
+                                                                        Object {
+                                                                          "isNumeric": true,
+                                                                          "isSortable": true,
+                                                                          "key": "modified",
+                                                                          "name": "Modified",
+                                                                        },
+                                                                        Object {
+                                                                          "isNumeric": true,
+                                                                          "isSortable": true,
+                                                                          "key": "created",
+                                                                          "name": "Created",
+                                                                        },
+                                                                      ]
+                                                                    }
+                                                                    i18n={"/i18n/"}
+                                                                    onSearch={[Function]}
+                                                                    sortedColumnKey="name"
+                                                                  >
+                                                                    <Form
+                                                                      autoComplete="off"
+                                                                      className=""
+                                                                      isHorizontal={false}
+                                                                    >
+                                                                      <form
+                                                                        autoComplete="off"
+                                                                        className="pf-c-form"
+                                                                        noValidate={true}
+                                                                      >
+                                                                        <div
+                                                                          className="pf-c-input-group"
+                                                                        >
+                                                                          <Search__NoOptionDropdown>
+                                                                            <StyledComponent
+                                                                              forwardedComponent={
+                                                                                Object {
+                                                                                  "$$typeof": Symbol(react.forward_ref),
+                                                                                  "attrs": Array [],
+                                                                                  "componentStyle": ComponentStyle {
+                                                                                    "componentId": "Search__NoOptionDropdown-sc-1dwuww3-3",
+                                                                                    "isStatic": true,
+                                                                                    "lastClassName": "gExTKE",
+                                                                                    "rules": Array [
+                                                                                      "align-self:stretch;border:1px solid grey;padding:3px 7px;",
+                                                                                    ],
+                                                                                  },
+                                                                                  "displayName": "Search__NoOptionDropdown",
+                                                                                  "foldedComponentIds": Array [],
+                                                                                  "render": [Function],
+                                                                                  "styledComponentId": "Search__NoOptionDropdown-sc-1dwuww3-3",
+                                                                                  "target": "div",
+                                                                                  "toString": [Function],
+                                                                                  "warnTooManyClasses": [Function],
+                                                                                  "withComponent": [Function],
+                                                                                }
+                                                                              }
+                                                                              forwardedRef={null}
+                                                                            >
+                                                                              <div
+                                                                                className="Search__NoOptionDropdown-sc-1dwuww3-3 gExTKE"
+                                                                              >
+                                                                                Name
+                                                                              </div>
+                                                                            </StyledComponent>
+                                                                          </Search__NoOptionDropdown>
+                                                                          <Search__InputFormGroup
+                                                                            fieldId="searchValueTextInput"
+                                                                            label={
+                                                                              <span
+                                                                                className="pf-screen-reader"
+                                                                              >
+                                                                                Search value text input
+                                                                              </span>
+                                                                            }
+                                                                          >
+                                                                            <StyledComponent
+                                                                              fieldId="searchValueTextInput"
+                                                                              forwardedComponent={
+                                                                                Object {
+                                                                                  "$$typeof": Symbol(react.forward_ref),
+                                                                                  "attrs": Array [],
+                                                                                  "componentStyle": ComponentStyle {
+                                                                                    "componentId": "Search__InputFormGroup-sc-1dwuww3-4",
+                                                                                    "isStatic": true,
+                                                                                    "lastClassName": "gITbPU",
+                                                                                    "rules": Array [
+                                                                                      "flex:1;",
+                                                                                    ],
+                                                                                  },
+                                                                                  "displayName": "Search__InputFormGroup",
+                                                                                  "foldedComponentIds": Array [],
+                                                                                  "render": [Function],
+                                                                                  "styledComponentId": "Search__InputFormGroup-sc-1dwuww3-4",
+                                                                                  "target": [Function],
+                                                                                  "toString": [Function],
+                                                                                  "warnTooManyClasses": [Function],
+                                                                                  "withComponent": [Function],
+                                                                                }
+                                                                              }
+                                                                              forwardedRef={null}
+                                                                              label={
+                                                                                <span
+                                                                                  className="pf-screen-reader"
+                                                                                >
+                                                                                  Search value text input
+                                                                                </span>
+                                                                              }
+                                                                            >
+                                                                              <FormGroup
+                                                                                className="Search__InputFormGroup-sc-1dwuww3-4 gITbPU"
+                                                                                fieldId="searchValueTextInput"
+                                                                                isInline={false}
+                                                                                isRequired={false}
+                                                                                isValid={true}
+                                                                                label={
+                                                                                  <span
+                                                                                    className="pf-screen-reader"
+                                                                                  >
+                                                                                    Search value text input
+                                                                                  </span>
+                                                                                }
+                                                                              >
+                                                                                <div
+                                                                                  className="pf-c-form__group Search__InputFormGroup-sc-1dwuww3-4 gITbPU"
+                                                                                >
+                                                                                  <label
+                                                                                    className="pf-c-form__label"
+                                                                                    htmlFor="searchValueTextInput"
+                                                                                  >
+                                                                                    <span
+                                                                                      className="pf-screen-reader"
+                                                                                    >
+                                                                                      Search value text input
+                                                                                    </span>
+                                                                                  </label>
+                                                                                  <Search__TextInput
+                                                                                    aria-label="Search text input"
+                                                                                    onChange={[Function]}
+                                                                                    style={
+                                                                                      Object {
+                                                                                        "height": "30px",
+                                                                                      }
+                                                                                    }
+                                                                                    type="search"
+                                                                                    value=""
+                                                                                  >
+                                                                                    <StyledComponent
+                                                                                      aria-label="Search text input"
+                                                                                      forwardedComponent={
+                                                                                        Object {
+                                                                                          "$$typeof": Symbol(react.forward_ref),
+                                                                                          "attrs": Array [],
+                                                                                          "componentStyle": ComponentStyle {
+                                                                                            "componentId": "Search__TextInput-sc-1dwuww3-0",
+                                                                                            "isStatic": true,
+                                                                                            "lastClassName": "EgkYH",
+                                                                                            "rules": Array [
+                                                                                              "min-height:0px;height:30px;",
+                                                                                            ],
+                                                                                          },
+                                                                                          "displayName": "Search__TextInput",
+                                                                                          "foldedComponentIds": Array [],
+                                                                                          "render": [Function],
+                                                                                          "styledComponentId": "Search__TextInput-sc-1dwuww3-0",
+                                                                                          "target": [Function],
+                                                                                          "toString": [Function],
+                                                                                          "warnTooManyClasses": [Function],
+                                                                                          "withComponent": [Function],
+                                                                                        }
+                                                                                      }
+                                                                                      forwardedRef={null}
+                                                                                      onChange={[Function]}
+                                                                                      style={
+                                                                                        Object {
+                                                                                          "height": "30px",
+                                                                                        }
+                                                                                      }
+                                                                                      type="search"
+                                                                                      value=""
+                                                                                    >
+                                                                                      <TextInput
+                                                                                        aria-label="Search text input"
+                                                                                        className="Search__TextInput-sc-1dwuww3-0 EgkYH"
+                                                                                        isDisabled={false}
+                                                                                        isReadOnly={false}
+                                                                                        isRequired={false}
+                                                                                        isValid={true}
+                                                                                        onChange={[Function]}
+                                                                                        style={
+                                                                                          Object {
+                                                                                            "height": "30px",
+                                                                                          }
+                                                                                        }
+                                                                                        type="search"
+                                                                                        value=""
+                                                                                      >
+                                                                                        <input
+                                                                                          aria-invalid={false}
+                                                                                          aria-label="Search text input"
+                                                                                          className="pf-c-form-control Search__TextInput-sc-1dwuww3-0 EgkYH"
+                                                                                          disabled={false}
+                                                                                          onChange={[Function]}
+                                                                                          readOnly={false}
+                                                                                          required={false}
+                                                                                          style={
+                                                                                            Object {
+                                                                                              "height": "30px",
+                                                                                            }
+                                                                                          }
+                                                                                          type="search"
+                                                                                          value=""
+                                                                                        />
+                                                                                      </TextInput>
+                                                                                    </StyledComponent>
+                                                                                  </Search__TextInput>
+                                                                                </div>
+                                                                              </FormGroup>
+                                                                            </StyledComponent>
+                                                                          </Search__InputFormGroup>
+                                                                          <Search__Button
+                                                                            aria-label="Search submit button"
+                                                                            onClick={[Function]}
+                                                                            type="submit"
+                                                                            variant="tertiary"
+                                                                          >
+                                                                            <StyledComponent
+                                                                              aria-label="Search submit button"
+                                                                              forwardedComponent={
+                                                                                Object {
+                                                                                  "$$typeof": Symbol(react.forward_ref),
+                                                                                  "attrs": Array [],
+                                                                                  "componentStyle": ComponentStyle {
+                                                                                    "componentId": "Search__Button-sc-1dwuww3-1",
+                                                                                    "isStatic": true,
+                                                                                    "lastClassName": "jtZPEu",
+                                                                                    "rules": Array [
+                                                                                      "width:34px;padding:0px;",
+                                                                                    ],
+                                                                                  },
+                                                                                  "displayName": "Search__Button",
+                                                                                  "foldedComponentIds": Array [],
+                                                                                  "render": [Function],
+                                                                                  "styledComponentId": "Search__Button-sc-1dwuww3-1",
+                                                                                  "target": [Function],
+                                                                                  "toString": [Function],
+                                                                                  "warnTooManyClasses": [Function],
+                                                                                  "withComponent": [Function],
+                                                                                }
+                                                                              }
+                                                                              forwardedRef={null}
+                                                                              onClick={[Function]}
+                                                                              type="submit"
+                                                                              variant="tertiary"
+                                                                            >
+                                                                              <Button
+                                                                                aria-label="Search submit button"
+                                                                                className="Search__Button-sc-1dwuww3-1 jtZPEu"
+                                                                                component="button"
+                                                                                isActive={false}
+                                                                                isBlock={false}
+                                                                                isDisabled={false}
+                                                                                isFocus={false}
+                                                                                isHover={false}
+                                                                                isInline={false}
+                                                                                onClick={[Function]}
+                                                                                type="submit"
+                                                                                variant="tertiary"
+                                                                              >
+                                                                                <button
+                                                                                  aria-disabled={null}
+                                                                                  aria-label="Search submit button"
+                                                                                  className="pf-c-button pf-m-tertiary Search__Button-sc-1dwuww3-1 jtZPEu"
+                                                                                  disabled={false}
+                                                                                  onClick={[Function]}
+                                                                                  tabIndex={null}
+                                                                                  type="submit"
+                                                                                >
+                                                                                  <SearchIcon
+                                                                                    color="currentColor"
+                                                                                    size="sm"
+                                                                                    title={null}
+                                                                                  >
+                                                                                    <svg
+                                                                                      aria-hidden={true}
+                                                                                      aria-labelledby={null}
+                                                                                      fill="currentColor"
+                                                                                      height="1em"
+                                                                                      role="img"
+                                                                                      style={
+                                                                                        Object {
+                                                                                          "verticalAlign": "-0.125em",
+                                                                                        }
+                                                                                      }
+                                                                                      viewBox="0 0 512 512"
+                                                                                      width="1em"
+                                                                                    >
+                                                                                      <path
+                                                                                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                                                                                        transform=""
+                                                                                      />
+                                                                                    </svg>
+                                                                                  </SearchIcon>
+                                                                                </button>
+                                                                              </Button>
+                                                                            </StyledComponent>
+                                                                          </Search__Button>
+                                                                        </div>
+                                                                      </form>
+                                                                    </Form>
+                                                                  </Search>
+                                                                </I18n>
+                                                              </WithI18n>
+                                                            </div>
+                                                          </ToolbarItem>
+                                                        </StyledComponent>
+                                                      </Styled(ToolbarItem)>
+                                                      <VerticalSeparator>
+                                                        <div>
+                                                          <VerticalSeparator__Separator>
+                                                            <StyledComponent
+                                                              forwardedComponent={
+                                                                Object {
+                                                                  "$$typeof": Symbol(react.forward_ref),
+                                                                  "attrs": Array [],
+                                                                  "componentStyle": ComponentStyle {
+                                                                    "componentId": "VerticalSeparator__Separator-sc-1256nz7-0",
+                                                                    "isStatic": true,
+                                                                    "lastClassName": "kgxyCB",
+                                                                    "rules": Array [
+                                                                      "display:inline-block;width:1px;height:30px;margin-right:20px;margin-left:20px;background-color:#d7d7d7;vertical-align:middle;",
+                                                                    ],
+                                                                  },
+                                                                  "displayName": "VerticalSeparator__Separator",
+                                                                  "foldedComponentIds": Array [],
+                                                                  "render": [Function],
+                                                                  "styledComponentId": "VerticalSeparator__Separator-sc-1256nz7-0",
+                                                                  "target": "span",
+                                                                  "toString": [Function],
+                                                                  "warnTooManyClasses": [Function],
+                                                                  "withComponent": [Function],
+                                                                }
+                                                              }
+                                                              forwardedRef={null}
+                                                            >
+                                                              <span
+                                                                className="VerticalSeparator__Separator-sc-1256nz7-0 kgxyCB"
+                                                              />
+                                                            </StyledComponent>
+                                                          </VerticalSeparator__Separator>
+                                                        </div>
+                                                      </VerticalSeparator>
+                                                    </div>
+                                                  </StyledComponent>
+                                                </DataListToolbar__ColumnLeft>
+                                                <DataListToolbar__ColumnRight>
+                                                  <StyledComponent
+                                                    forwardedComponent={
+                                                      Object {
+                                                        "$$typeof": Symbol(react.forward_ref),
+                                                        "attrs": Array [],
+                                                        "componentStyle": ComponentStyle {
+                                                          "componentId": "DataListToolbar__ColumnRight-ajzso8-4",
+                                                          "isStatic": true,
+                                                          "lastClassName": "aHlzn",
+                                                          "rules": Array [
+                                                            "flex-grow:0;display:flex;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;",
+                                                          ],
+                                                        },
+                                                        "displayName": "DataListToolbar__ColumnRight",
+                                                        "foldedComponentIds": Array [],
+                                                        "render": [Function],
+                                                        "styledComponentId": "DataListToolbar__ColumnRight-ajzso8-4",
+                                                        "target": "div",
+                                                        "toString": [Function],
+                                                        "warnTooManyClasses": [Function],
+                                                        "withComponent": [Function],
+                                                      }
+                                                    }
+                                                    forwardedRef={null}
+                                                  >
+                                                    <div
+                                                      className="DataListToolbar__ColumnRight-ajzso8-4 aHlzn"
+                                                    >
+                                                      <ToolbarItem
+                                                        className={null}
+                                                      >
+                                                        <div
+                                                          className="pf-l-toolbar__item"
+                                                        >
+                                                          <WithI18n
+                                                            columns={
+                                                              Array [
+                                                                Object {
+                                                                  "isSearchable": true,
+                                                                  "isSortable": true,
+                                                                  "key": "name",
+                                                                  "name": "Name",
+                                                                },
+                                                                Object {
+                                                                  "isNumeric": true,
+                                                                  "isSortable": true,
+                                                                  "key": "modified",
+                                                                  "name": "Modified",
+                                                                },
+                                                                Object {
+                                                                  "isNumeric": true,
+                                                                  "isSortable": true,
+                                                                  "key": "created",
+                                                                  "name": "Created",
+                                                                },
+                                                              ]
+                                                            }
+                                                            onSort={[Function]}
+                                                            sortOrder="ascending"
+                                                            sortedColumnKey="name"
+                                                          >
+                                                            <I18n
+                                                              update={true}
+                                                              withHash={true}
+                                                            >
+                                                              <Sort
+                                                                columns={
+                                                                  Array [
+                                                                    Object {
+                                                                      "isSearchable": true,
+                                                                      "isSortable": true,
+                                                                      "key": "name",
+                                                                      "name": "Name",
+                                                                    },
+                                                                    Object {
+                                                                      "isNumeric": true,
+                                                                      "isSortable": true,
+                                                                      "key": "modified",
+                                                                      "name": "Modified",
+                                                                    },
+                                                                    Object {
+                                                                      "isNumeric": true,
+                                                                      "isSortable": true,
+                                                                      "key": "created",
+                                                                      "name": "Created",
+                                                                    },
+                                                                  ]
+                                                                }
+                                                                i18n={"/i18n/"}
+                                                                onSort={[Function]}
+                                                                sortOrder="ascending"
+                                                                sortedColumnKey="name"
+                                                              >
+                                                                <Sort__Dropdown
                                                                   dropdownItems={
                                                                     Array [
                                                                       <Item
@@ -520,11 +1051,16 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                   isOpen={false}
                                                                   onSelect={[Function]}
                                                                   onToggle={[Function]}
+                                                                  style={
+                                                                    Object {
+                                                                      "marginRight": "20px",
+                                                                    }
+                                                                  }
                                                                   toggle={
                                                                     <DropdownToggle
                                                                       className=""
                                                                       iconComponent={[Function]}
-                                                                      id="awx-search"
+                                                                      id="awx-sort"
                                                                       isActive={false}
                                                                       isFocused={false}
                                                                       isHovered={false}
@@ -565,17 +1101,17 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                         "$$typeof": Symbol(react.forward_ref),
                                                                         "attrs": Array [],
                                                                         "componentStyle": ComponentStyle {
-                                                                          "componentId": "Search__Dropdown-sc-1dwuww3-2",
+                                                                          "componentId": "Sort__Dropdown-sc-21g5aw-0",
                                                                           "isStatic": true,
-                                                                          "lastClassName": "kcnywV",
+                                                                          "lastClassName": "kdSQuN",
                                                                           "rules": Array [
                                                                             "&&&{> button{min-height:30px;min-width:70px;height:30px;padding:0 10px;margin:0px;> span{width:auto;}> svg{margin:0px;padding-top:3px;padding-left:3px;}}}",
                                                                           ],
                                                                         },
-                                                                        "displayName": "Search__Dropdown",
+                                                                        "displayName": "Sort__Dropdown",
                                                                         "foldedComponentIds": Array [],
                                                                         "render": [Function],
-                                                                        "styledComponentId": "Search__Dropdown-sc-1dwuww3-2",
+                                                                        "styledComponentId": "Sort__Dropdown-sc-21g5aw-0",
                                                                         "target": [Function],
                                                                         "toString": [Function],
                                                                         "warnTooManyClasses": [Function],
@@ -586,11 +1122,16 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                     isOpen={false}
                                                                     onSelect={[Function]}
                                                                     onToggle={[Function]}
+                                                                    style={
+                                                                      Object {
+                                                                        "marginRight": "20px",
+                                                                      }
+                                                                    }
                                                                     toggle={
                                                                       <DropdownToggle
                                                                         className=""
                                                                         iconComponent={[Function]}
-                                                                        id="awx-search"
+                                                                        id="awx-sort"
                                                                         isActive={false}
                                                                         isFocused={false}
                                                                         isHovered={false}
@@ -604,7 +1145,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                     }
                                                                   >
                                                                     <Dropdown
-                                                                      className="Search__Dropdown-sc-1dwuww3-2 kcnywV"
+                                                                      className="Sort__Dropdown-sc-21g5aw-0 kdSQuN"
                                                                       direction="down"
                                                                       dropdownItems={
                                                                         Array [
@@ -633,11 +1174,16 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                       onSelect={[Function]}
                                                                       onToggle={[Function]}
                                                                       position="left"
+                                                                      style={
+                                                                        Object {
+                                                                          "marginRight": "20px",
+                                                                        }
+                                                                      }
                                                                       toggle={
                                                                         <DropdownToggle
                                                                           className=""
                                                                           iconComponent={[Function]}
-                                                                          id="awx-search"
+                                                                          id="awx-sort"
                                                                           isActive={false}
                                                                           isFocused={false}
                                                                           isHovered={false}
@@ -651,14 +1197,19 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                       }
                                                                     >
                                                                       <div
-                                                                        className="pf-c-dropdown Search__Dropdown-sc-1dwuww3-2 kcnywV"
+                                                                        className="pf-c-dropdown Sort__Dropdown-sc-21g5aw-0 kdSQuN"
                                                                         onToggle={[Function]}
+                                                                        style={
+                                                                          Object {
+                                                                            "marginRight": "20px",
+                                                                          }
+                                                                        }
                                                                       >
                                                                         <DropdownToggle
                                                                           ariaHasPopup={true}
                                                                           className=""
                                                                           iconComponent={[Function]}
-                                                                          id="awx-search"
+                                                                          id="awx-sort"
                                                                           isActive={false}
                                                                           isFocused={false}
                                                                           isHovered={false}
@@ -669,13 +1220,14 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                           onToggle={[Function]}
                                                                           parentRef={
                                                                             <div
-                                                                              class="pf-c-dropdown Search__Dropdown-sc-1dwuww3-2 kcnywV"
+                                                                              class="pf-c-dropdown Sort__Dropdown-sc-21g5aw-0 kdSQuN"
+                                                                              style="margin-right: 20px;"
                                                                             >
                                                                               <button
                                                                                 aria-expanded="false"
                                                                                 aria-haspopup="true"
                                                                                 class="pf-c-dropdown__toggle"
-                                                                                id="awx-search"
+                                                                                id="awx-sort"
                                                                                 type="button"
                                                                               >
                                                                                 <span
@@ -705,7 +1257,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                           <Toggle
                                                                             ariaHasPopup={true}
                                                                             className=""
-                                                                            id="awx-search"
+                                                                            id="awx-sort"
                                                                             isActive={false}
                                                                             isDisabled={false}
                                                                             isFocused={false}
@@ -716,13 +1268,14 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                             onToggle={[Function]}
                                                                             parentRef={
                                                                               <div
-                                                                                class="pf-c-dropdown Search__Dropdown-sc-1dwuww3-2 kcnywV"
+                                                                                class="pf-c-dropdown Sort__Dropdown-sc-21g5aw-0 kdSQuN"
+                                                                                style="margin-right: 20px;"
                                                                               >
                                                                                 <button
                                                                                   aria-expanded="false"
                                                                                   aria-haspopup="true"
                                                                                   class="pf-c-dropdown__toggle"
-                                                                                  id="awx-search"
+                                                                                  id="awx-sort"
                                                                                   type="button"
                                                                                 >
                                                                                   <span
@@ -754,7 +1307,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                               aria-haspopup={true}
                                                                               className="pf-c-dropdown__toggle"
                                                                               disabled={false}
-                                                                              id="awx-search"
+                                                                              id="awx-sort"
                                                                               onClick={[Function]}
                                                                               onKeyDown={[Function]}
                                                                               type="button"
@@ -797,110 +1350,30 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                       </div>
                                                                     </Dropdown>
                                                                   </StyledComponent>
-                                                                </Search__Dropdown>
-                                                                <Search__TextInput
-                                                                  aria-label="Search text input"
-                                                                  onChange={[Function]}
-                                                                  style={
-                                                                    Object {
-                                                                      "height": "30px",
-                                                                    }
-                                                                  }
-                                                                  type="search"
-                                                                  value=""
-                                                                >
-                                                                  <StyledComponent
-                                                                    aria-label="Search text input"
-                                                                    forwardedComponent={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "attrs": Array [],
-                                                                        "componentStyle": ComponentStyle {
-                                                                          "componentId": "Search__TextInput-sc-1dwuww3-0",
-                                                                          "isStatic": true,
-                                                                          "lastClassName": "EgkYH",
-                                                                          "rules": Array [
-                                                                            "min-height:0px;height:30px;",
-                                                                          ],
-                                                                        },
-                                                                        "displayName": "Search__TextInput",
-                                                                        "foldedComponentIds": Array [],
-                                                                        "render": [Function],
-                                                                        "styledComponentId": "Search__TextInput-sc-1dwuww3-0",
-                                                                        "target": [Function],
-                                                                        "toString": [Function],
-                                                                        "warnTooManyClasses": [Function],
-                                                                        "withComponent": [Function],
-                                                                      }
-                                                                    }
-                                                                    forwardedRef={null}
-                                                                    onChange={[Function]}
-                                                                    style={
-                                                                      Object {
-                                                                        "height": "30px",
-                                                                      }
-                                                                    }
-                                                                    type="search"
-                                                                    value=""
-                                                                  >
-                                                                    <TextInput
-                                                                      aria-label="Search text input"
-                                                                      className="Search__TextInput-sc-1dwuww3-0 EgkYH"
-                                                                      isDisabled={false}
-                                                                      isReadOnly={false}
-                                                                      isRequired={false}
-                                                                      isValid={true}
-                                                                      onChange={[Function]}
-                                                                      style={
-                                                                        Object {
-                                                                          "height": "30px",
-                                                                        }
-                                                                      }
-                                                                      type="search"
-                                                                      value=""
-                                                                    >
-                                                                      <input
-                                                                        aria-invalid={false}
-                                                                        aria-label="Search text input"
-                                                                        className="pf-c-form-control Search__TextInput-sc-1dwuww3-0 EgkYH"
-                                                                        disabled={false}
-                                                                        onChange={[Function]}
-                                                                        readOnly={false}
-                                                                        required={false}
-                                                                        style={
-                                                                          Object {
-                                                                            "height": "30px",
-                                                                          }
-                                                                        }
-                                                                        type="search"
-                                                                        value=""
-                                                                      />
-                                                                    </TextInput>
-                                                                  </StyledComponent>
-                                                                </Search__TextInput>
-                                                                <Search__Button
-                                                                  aria-label="Search"
+                                                                </Sort__Dropdown>
+                                                                <Styled(Button)
+                                                                  aria-label="Sort"
                                                                   onClick={[Function]}
-                                                                  variant="tertiary"
+                                                                  variant="plain"
                                                                 >
                                                                   <StyledComponent
-                                                                    aria-label="Search"
+                                                                    aria-label="Sort"
                                                                     forwardedComponent={
                                                                       Object {
                                                                         "$$typeof": Symbol(react.forward_ref),
                                                                         "attrs": Array [],
                                                                         "componentStyle": ComponentStyle {
-                                                                          "componentId": "Search__Button-sc-1dwuww3-1",
+                                                                          "componentId": "sc-bwzfXH",
                                                                           "isStatic": true,
-                                                                          "lastClassName": "jtZPEu",
+                                                                          "lastClassName": "iNPUwu",
                                                                           "rules": Array [
-                                                                            "width:34px;padding:0px;",
+                                                                            "padding: 0;",
                                                                           ],
                                                                         },
-                                                                        "displayName": "Search__Button",
+                                                                        "displayName": "Styled(Button)",
                                                                         "foldedComponentIds": Array [],
                                                                         "render": [Function],
-                                                                        "styledComponentId": "Search__Button-sc-1dwuww3-1",
+                                                                        "styledComponentId": "sc-bwzfXH",
                                                                         "target": [Function],
                                                                         "toString": [Function],
                                                                         "warnTooManyClasses": [Function],
@@ -909,11 +1382,11 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                     }
                                                                     forwardedRef={null}
                                                                     onClick={[Function]}
-                                                                    variant="tertiary"
+                                                                    variant="plain"
                                                                   >
                                                                     <Button
-                                                                      aria-label="Search"
-                                                                      className="Search__Button-sc-1dwuww3-1 jtZPEu"
+                                                                      aria-label="Sort"
+                                                                      className="sc-bwzfXH iNPUwu"
                                                                       component="button"
                                                                       isActive={false}
                                                                       isBlock={false}
@@ -923,676 +1396,215 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                       isInline={false}
                                                                       onClick={[Function]}
                                                                       type="button"
-                                                                      variant="tertiary"
+                                                                      variant="plain"
                                                                     >
                                                                       <button
                                                                         aria-disabled={null}
-                                                                        aria-label="Search"
-                                                                        className="pf-c-button pf-m-tertiary Search__Button-sc-1dwuww3-1 jtZPEu"
+                                                                        aria-label="Sort"
+                                                                        className="pf-c-button pf-m-plain sc-bwzfXH iNPUwu"
                                                                         disabled={false}
                                                                         onClick={[Function]}
                                                                         tabIndex={null}
                                                                         type="button"
                                                                       >
-                                                                        <SearchIcon
-                                                                          color="currentColor"
-                                                                          size="sm"
-                                                                          title={null}
-                                                                        >
-                                                                          <svg
-                                                                            aria-hidden={true}
-                                                                            aria-labelledby={null}
-                                                                            fill="currentColor"
-                                                                            height="1em"
-                                                                            role="img"
-                                                                            style={
+                                                                        <Sort__IconWrapper>
+                                                                          <StyledComponent
+                                                                            forwardedComponent={
                                                                               Object {
-                                                                                "verticalAlign": "-0.125em",
+                                                                                "$$typeof": Symbol(react.forward_ref),
+                                                                                "attrs": Array [],
+                                                                                "componentStyle": ComponentStyle {
+                                                                                  "componentId": "Sort__IconWrapper-sc-21g5aw-1",
+                                                                                  "isStatic": true,
+                                                                                  "lastClassName": "fTwElO",
+                                                                                  "rules": Array [
+                                                                                    "> svg{font-size:18px;}",
+                                                                                  ],
+                                                                                },
+                                                                                "displayName": "Sort__IconWrapper",
+                                                                                "foldedComponentIds": Array [],
+                                                                                "render": [Function],
+                                                                                "styledComponentId": "Sort__IconWrapper-sc-21g5aw-1",
+                                                                                "target": "span",
+                                                                                "toString": [Function],
+                                                                                "warnTooManyClasses": [Function],
+                                                                                "withComponent": [Function],
                                                                               }
                                                                             }
-                                                                            viewBox="0 0 512 512"
-                                                                            width="1em"
+                                                                            forwardedRef={null}
                                                                           >
-                                                                            <path
-                                                                              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                                                                              transform=""
-                                                                            />
-                                                                          </svg>
-                                                                        </SearchIcon>
+                                                                            <span
+                                                                              className="Sort__IconWrapper-sc-21g5aw-1 fTwElO"
+                                                                            >
+                                                                              <SortAlphaUpIcon
+                                                                                color="currentColor"
+                                                                                size="sm"
+                                                                                title={null}
+                                                                              >
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  aria-labelledby={null}
+                                                                                  fill="currentColor"
+                                                                                  height="1em"
+                                                                                  role="img"
+                                                                                  style={
+                                                                                    Object {
+                                                                                      "verticalAlign": "-0.125em",
+                                                                                    }
+                                                                                  }
+                                                                                  viewBox="0 0 448 512"
+                                                                                  width="1em"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M107.3 36.7c-6.2-6.2-16.4-6.2-22.6 0l-80 80c-10 10-2.9 27.3 11.3 27.3h48v320c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V144h48c14.2 0 21.4-17.2 11.3-27.3zm293.4 390.4h-61.1c.7-1 1.5-2 2.3-3.1l67.5-95.7c1.4-2 2.2-4.4 2.2-6.9V300c0-6.6-5.4-12-12-12H274.5c-6.6 0-12 5.4-12 12v28.9c0 6.6 5.4 12 12 12H331c-.7 1-1.5 2-2.3 3.1l-67.2 95.2c-1.4 2-2.2 4.4-2.2 6.9V468c0 6.6 5.4 12 12 12h129.4c6.6 0 12-5.4 12-12v-28.9c0-6.7-5.4-12-12-12zm23.5-219l-57.1-168c-1.7-4.9-6.2-8.1-11.4-8.1h-39.6c-5.1 0-9.7 3.3-11.4 8.1l-57.1 168c-2.6 7.8 3.1 15.9 11.4 15.9h35.7c5.4 0 10.1-3.5 11.5-8.7l8.1-28.2h42.9l8.3 28.3A12 12 0 0 0 377 224h35.7c8.4 0 14.2-8.1 11.5-15.9zm-95-71.5l6.8-22.9 6.6 22.9z"
+                                                                                    transform=""
+                                                                                  />
+                                                                                </svg>
+                                                                              </SortAlphaUpIcon>
+                                                                            </span>
+                                                                          </StyledComponent>
+                                                                        </Sort__IconWrapper>
                                                                       </button>
                                                                     </Button>
                                                                   </StyledComponent>
-                                                                </Search__Button>
-                                                              </div>
-                                                            </Search>
-                                                          </I18n>
-                                                        </WithI18n>
-                                                      </div>
-                                                    </ToolbarItem>
-                                                  </StyledComponent>
-                                                </Styled(ToolbarItem)>
-                                                <VerticalSeparator>
-                                                  <div>
-                                                    <VerticalSeparator__Separator>
-                                                      <StyledComponent
-                                                        forwardedComponent={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "attrs": Array [],
-                                                            "componentStyle": ComponentStyle {
-                                                              "componentId": "VerticalSeparator__Separator-sc-1256nz7-0",
-                                                              "isStatic": true,
-                                                              "lastClassName": "kgxyCB",
-                                                              "rules": Array [
-                                                                "display:inline-block;width:1px;height:30px;margin-right:20px;margin-left:20px;background-color:#d7d7d7;vertical-align:middle;",
-                                                              ],
-                                                            },
-                                                            "displayName": "VerticalSeparator__Separator",
-                                                            "foldedComponentIds": Array [],
-                                                            "render": [Function],
-                                                            "styledComponentId": "VerticalSeparator__Separator-sc-1256nz7-0",
-                                                            "target": "span",
-                                                            "toString": [Function],
-                                                            "warnTooManyClasses": [Function],
-                                                            "withComponent": [Function],
+                                                                </Styled(Button)>
+                                                              </Sort>
+                                                            </I18n>
+                                                          </WithI18n>
+                                                        </div>
+                                                      </ToolbarItem>
+                                                      <DataListToolbar__AdditionalControlsWrapper>
+                                                        <StyledComponent
+                                                          forwardedComponent={
+                                                            Object {
+                                                              "$$typeof": Symbol(react.forward_ref),
+                                                              "attrs": Array [],
+                                                              "componentStyle": ComponentStyle {
+                                                                "componentId": "DataListToolbar__AdditionalControlsWrapper-ajzso8-5",
+                                                                "isStatic": true,
+                                                                "lastClassName": "bWuACV",
+                                                                "rules": Array [
+                                                                  "display:flex;flex-grow:1;justify-content:flex-end;align-items:center;& >:not(:first-child){margin-left:20px;}",
+                                                                ],
+                                                              },
+                                                              "displayName": "DataListToolbar__AdditionalControlsWrapper",
+                                                              "foldedComponentIds": Array [],
+                                                              "render": [Function],
+                                                              "styledComponentId": "DataListToolbar__AdditionalControlsWrapper-ajzso8-5",
+                                                              "target": "div",
+                                                              "toString": [Function],
+                                                              "warnTooManyClasses": [Function],
+                                                              "withComponent": [Function],
+                                                            }
                                                           }
-                                                        }
-                                                        forwardedRef={null}
-                                                      >
-                                                        <span
-                                                          className="VerticalSeparator__Separator-sc-1256nz7-0 kgxyCB"
-                                                        />
-                                                      </StyledComponent>
-                                                    </VerticalSeparator__Separator>
-                                                  </div>
-                                                </VerticalSeparator>
-                                              </div>
-                                            </StyledComponent>
-                                          </DataListToolbar__ColumnLeft>
-                                          <DataListToolbar__ColumnRight>
-                                            <StyledComponent
-                                              forwardedComponent={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "attrs": Array [],
-                                                  "componentStyle": ComponentStyle {
-                                                    "componentId": "DataListToolbar__ColumnRight-ajzso8-4",
-                                                    "isStatic": true,
-                                                    "lastClassName": "aHlzn",
-                                                    "rules": Array [
-                                                      "flex-grow:0;display:flex;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;",
-                                                    ],
-                                                  },
-                                                  "displayName": "DataListToolbar__ColumnRight",
-                                                  "foldedComponentIds": Array [],
-                                                  "render": [Function],
-                                                  "styledComponentId": "DataListToolbar__ColumnRight-ajzso8-4",
-                                                  "target": "div",
-                                                  "toString": [Function],
-                                                  "warnTooManyClasses": [Function],
-                                                  "withComponent": [Function],
-                                                }
-                                              }
-                                              forwardedRef={null}
-                                            >
-                                              <div
-                                                className="DataListToolbar__ColumnRight-ajzso8-4 aHlzn"
-                                              >
-                                                <ToolbarItem
-                                                  className={null}
-                                                >
-                                                  <div
-                                                    className="pf-l-toolbar__item"
-                                                  >
-                                                    <WithI18n
-                                                      columns={
-                                                        Array [
-                                                          Object {
-                                                            "isSortable": true,
-                                                            "key": "name",
-                                                            "name": "Name",
-                                                          },
-                                                          Object {
-                                                            "isNumeric": true,
-                                                            "isSortable": true,
-                                                            "key": "modified",
-                                                            "name": "Modified",
-                                                          },
-                                                          Object {
-                                                            "isNumeric": true,
-                                                            "isSortable": true,
-                                                            "key": "created",
-                                                            "name": "Created",
-                                                          },
-                                                        ]
-                                                      }
-                                                      onSort={[Function]}
-                                                      sortOrder="ascending"
-                                                      sortedColumnKey="name"
-                                                    >
-                                                      <I18n
-                                                        update={true}
-                                                        withHash={true}
-                                                      >
-                                                        <Sort
-                                                          columns={
-                                                            Array [
-                                                              Object {
-                                                                "isSortable": true,
-                                                                "key": "name",
-                                                                "name": "Name",
-                                                              },
-                                                              Object {
-                                                                "isNumeric": true,
-                                                                "isSortable": true,
-                                                                "key": "modified",
-                                                                "name": "Modified",
-                                                              },
-                                                              Object {
-                                                                "isNumeric": true,
-                                                                "isSortable": true,
-                                                                "key": "created",
-                                                                "name": "Created",
-                                                              },
-                                                            ]
-                                                          }
-                                                          i18n={"/i18n/"}
-                                                          onSort={[Function]}
-                                                          sortOrder="ascending"
-                                                          sortedColumnKey="name"
+                                                          forwardedRef={null}
                                                         >
-                                                          <Sort__Dropdown
-                                                            dropdownItems={
-                                                              Array [
-                                                                <Item
-                                                                  className=""
-                                                                  component="button"
-                                                                  href="#"
-                                                                  isDisabled={false}
-                                                                  isHovered={false}
-                                                                >
-                                                                  Modified
-                                                                </Item>,
-                                                                <Item
-                                                                  className=""
-                                                                  component="button"
-                                                                  href="#"
-                                                                  isDisabled={false}
-                                                                  isHovered={false}
-                                                                >
-                                                                  Created
-                                                                </Item>,
-                                                              ]
-                                                            }
-                                                            isOpen={false}
-                                                            onSelect={[Function]}
-                                                            onToggle={[Function]}
-                                                            style={
-                                                              Object {
-                                                                "marginRight": "20px",
-                                                              }
-                                                            }
-                                                            toggle={
-                                                              <DropdownToggle
-                                                                className=""
-                                                                iconComponent={[Function]}
-                                                                id="awx-sort"
-                                                                isActive={false}
-                                                                isFocused={false}
-                                                                isHovered={false}
-                                                                isOpen={false}
-                                                                isPlain={false}
-                                                                onToggle={[Function]}
-                                                                parentRef={null}
-                                                              >
-                                                                Name
-                                                              </DropdownToggle>
-                                                            }
-                                                          >
-                                                            <StyledComponent
-                                                              dropdownItems={
-                                                                Array [
-                                                                  <Item
-                                                                    className=""
-                                                                    component="button"
-                                                                    href="#"
-                                                                    isDisabled={false}
-                                                                    isHovered={false}
-                                                                  >
-                                                                    Modified
-                                                                  </Item>,
-                                                                  <Item
-                                                                    className=""
-                                                                    component="button"
-                                                                    href="#"
-                                                                    isDisabled={false}
-                                                                    isHovered={false}
-                                                                  >
-                                                                    Created
-                                                                  </Item>,
-                                                                ]
-                                                              }
-                                                              forwardedComponent={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "attrs": Array [],
-                                                                  "componentStyle": ComponentStyle {
-                                                                    "componentId": "Sort__Dropdown-sc-21g5aw-0",
-                                                                    "isStatic": true,
-                                                                    "lastClassName": "kdSQuN",
-                                                                    "rules": Array [
-                                                                      "&&&{> button{min-height:30px;min-width:70px;height:30px;padding:0 10px;margin:0px;> span{width:auto;}> svg{margin:0px;padding-top:3px;padding-left:3px;}}}",
-                                                                    ],
-                                                                  },
-                                                                  "displayName": "Sort__Dropdown",
-                                                                  "foldedComponentIds": Array [],
-                                                                  "render": [Function],
-                                                                  "styledComponentId": "Sort__Dropdown-sc-21g5aw-0",
-                                                                  "target": [Function],
-                                                                  "toString": [Function],
-                                                                  "warnTooManyClasses": [Function],
-                                                                  "withComponent": [Function],
-                                                                }
-                                                              }
-                                                              forwardedRef={null}
-                                                              isOpen={false}
-                                                              onSelect={[Function]}
-                                                              onToggle={[Function]}
-                                                              style={
-                                                                Object {
-                                                                  "marginRight": "20px",
-                                                                }
-                                                              }
-                                                              toggle={
-                                                                <DropdownToggle
-                                                                  className=""
-                                                                  iconComponent={[Function]}
-                                                                  id="awx-sort"
-                                                                  isActive={false}
-                                                                  isFocused={false}
-                                                                  isHovered={false}
-                                                                  isOpen={false}
-                                                                  isPlain={false}
-                                                                  onToggle={[Function]}
-                                                                  parentRef={null}
-                                                                >
-                                                                  Name
-                                                                </DropdownToggle>
-                                                              }
-                                                            >
-                                                              <Dropdown
-                                                                className="Sort__Dropdown-sc-21g5aw-0 kdSQuN"
-                                                                direction="down"
-                                                                dropdownItems={
-                                                                  Array [
-                                                                    <Item
-                                                                      className=""
-                                                                      component="button"
-                                                                      href="#"
-                                                                      isDisabled={false}
-                                                                      isHovered={false}
-                                                                    >
-                                                                      Modified
-                                                                    </Item>,
-                                                                    <Item
-                                                                      className=""
-                                                                      component="button"
-                                                                      href="#"
-                                                                      isDisabled={false}
-                                                                      isHovered={false}
-                                                                    >
-                                                                      Created
-                                                                    </Item>,
-                                                                  ]
-                                                                }
-                                                                isOpen={false}
-                                                                isPlain={false}
-                                                                onSelect={[Function]}
-                                                                onToggle={[Function]}
-                                                                position="left"
-                                                                style={
-                                                                  Object {
-                                                                    "marginRight": "20px",
-                                                                  }
-                                                                }
-                                                                toggle={
-                                                                  <DropdownToggle
-                                                                    className=""
-                                                                    iconComponent={[Function]}
-                                                                    id="awx-sort"
-                                                                    isActive={false}
-                                                                    isFocused={false}
-                                                                    isHovered={false}
-                                                                    isOpen={false}
-                                                                    isPlain={false}
-                                                                    onToggle={[Function]}
-                                                                    parentRef={null}
-                                                                  >
-                                                                    Name
-                                                                  </DropdownToggle>
-                                                                }
-                                                              >
-                                                                <div
-                                                                  className="pf-c-dropdown Sort__Dropdown-sc-21g5aw-0 kdSQuN"
-                                                                  onToggle={[Function]}
-                                                                  style={
-                                                                    Object {
-                                                                      "marginRight": "20px",
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <DropdownToggle
-                                                                    ariaHasPopup={true}
-                                                                    className=""
-                                                                    iconComponent={[Function]}
-                                                                    id="awx-sort"
-                                                                    isActive={false}
-                                                                    isFocused={false}
-                                                                    isHovered={false}
-                                                                    isOpen={false}
-                                                                    isPlain={false}
-                                                                    key=".0"
-                                                                    onEnter={[Function]}
-                                                                    onToggle={[Function]}
-                                                                    parentRef={
-                                                                      <div
-                                                                        class="pf-c-dropdown Sort__Dropdown-sc-21g5aw-0 kdSQuN"
-                                                                        style="margin-right: 20px;"
-                                                                      >
-                                                                        <button
-                                                                          aria-expanded="false"
-                                                                          aria-haspopup="true"
-                                                                          class="pf-c-dropdown__toggle"
-                                                                          id="awx-sort"
-                                                                          type="button"
-                                                                        >
-                                                                          <span
-                                                                            class="pf-c-dropdown__toggle-text"
-                                                                          >
-                                                                            Name
-                                                                          </span>
-                                                                          <svg
-                                                                            aria-hidden="true"
-                                                                            class="pf-c-dropdown__toggle-icon"
-                                                                            fill="currentColor"
-                                                                            height="1em"
-                                                                            role="img"
-                                                                            style="vertical-align: -0.125em;"
-                                                                            viewBox="0 0 320 512"
-                                                                            width="1em"
-                                                                          >
-                                                                            <path
-                                                                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                                                                              transform=""
-                                                                            />
-                                                                          </svg>
-                                                                        </button>
-                                                                      </div>
-                                                                    }
-                                                                  >
-                                                                    <Toggle
-                                                                      ariaHasPopup={true}
-                                                                      className=""
-                                                                      id="awx-sort"
-                                                                      isActive={false}
-                                                                      isDisabled={false}
-                                                                      isFocused={false}
-                                                                      isHovered={false}
-                                                                      isOpen={false}
-                                                                      isPlain={false}
-                                                                      onEnter={[Function]}
-                                                                      onToggle={[Function]}
-                                                                      parentRef={
-                                                                        <div
-                                                                          class="pf-c-dropdown Sort__Dropdown-sc-21g5aw-0 kdSQuN"
-                                                                          style="margin-right: 20px;"
-                                                                        >
-                                                                          <button
-                                                                            aria-expanded="false"
-                                                                            aria-haspopup="true"
-                                                                            class="pf-c-dropdown__toggle"
-                                                                            id="awx-sort"
-                                                                            type="button"
-                                                                          >
-                                                                            <span
-                                                                              class="pf-c-dropdown__toggle-text"
-                                                                            >
-                                                                              Name
-                                                                            </span>
-                                                                            <svg
-                                                                              aria-hidden="true"
-                                                                              class="pf-c-dropdown__toggle-icon"
-                                                                              fill="currentColor"
-                                                                              height="1em"
-                                                                              role="img"
-                                                                              style="vertical-align: -0.125em;"
-                                                                              viewBox="0 0 320 512"
-                                                                              width="1em"
-                                                                            >
-                                                                              <path
-                                                                                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                                                                                transform=""
-                                                                              />
-                                                                            </svg>
-                                                                          </button>
-                                                                        </div>
-                                                                      }
-                                                                    >
-                                                                      <button
-                                                                        aria-expanded={false}
-                                                                        aria-haspopup={true}
-                                                                        className="pf-c-dropdown__toggle"
-                                                                        disabled={false}
-                                                                        id="awx-sort"
-                                                                        onClick={[Function]}
-                                                                        onKeyDown={[Function]}
-                                                                        type="button"
-                                                                      >
-                                                                        <span
-                                                                          className="pf-c-dropdown__toggle-text"
-                                                                        >
-                                                                          Name
-                                                                        </span>
-                                                                        <CaretDownIcon
-                                                                          className="pf-c-dropdown__toggle-icon"
-                                                                          color="currentColor"
-                                                                          size="sm"
-                                                                          title={null}
-                                                                        >
-                                                                          <svg
-                                                                            aria-hidden={true}
-                                                                            aria-labelledby={null}
-                                                                            className="pf-c-dropdown__toggle-icon"
-                                                                            fill="currentColor"
-                                                                            height="1em"
-                                                                            role="img"
-                                                                            style={
-                                                                              Object {
-                                                                                "verticalAlign": "-0.125em",
-                                                                              }
-                                                                            }
-                                                                            viewBox="0 0 320 512"
-                                                                            width="1em"
-                                                                          >
-                                                                            <path
-                                                                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                                                                              transform=""
-                                                                            />
-                                                                          </svg>
-                                                                        </CaretDownIcon>
-                                                                      </button>
-                                                                    </Toggle>
-                                                                  </DropdownToggle>
-                                                                </div>
-                                                              </Dropdown>
-                                                            </StyledComponent>
-                                                          </Sort__Dropdown>
-                                                          <Styled(Button)
-                                                            aria-label="Sort"
-                                                            onClick={[Function]}
-                                                            variant="plain"
-                                                          >
-                                                            <StyledComponent
-                                                              aria-label="Sort"
-                                                              forwardedComponent={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "attrs": Array [],
-                                                                  "componentStyle": ComponentStyle {
-                                                                    "componentId": "sc-bwzfXH",
-                                                                    "isStatic": true,
-                                                                    "lastClassName": "iNPUwu",
-                                                                    "rules": Array [
-                                                                      "padding: 0;",
-                                                                    ],
-                                                                  },
-                                                                  "displayName": "Styled(Button)",
-                                                                  "foldedComponentIds": Array [],
-                                                                  "render": [Function],
-                                                                  "styledComponentId": "sc-bwzfXH",
-                                                                  "target": [Function],
-                                                                  "toString": [Function],
-                                                                  "warnTooManyClasses": [Function],
-                                                                  "withComponent": [Function],
-                                                                }
-                                                              }
-                                                              forwardedRef={null}
-                                                              onClick={[Function]}
-                                                              variant="plain"
-                                                            >
-                                                              <Button
-                                                                aria-label="Sort"
-                                                                className="sc-bwzfXH iNPUwu"
-                                                                component="button"
-                                                                isActive={false}
-                                                                isBlock={false}
-                                                                isDisabled={false}
-                                                                isFocus={false}
-                                                                isHover={false}
-                                                                isInline={false}
-                                                                onClick={[Function]}
-                                                                type="button"
-                                                                variant="plain"
-                                                              >
-                                                                <button
-                                                                  aria-disabled={null}
-                                                                  aria-label="Sort"
-                                                                  className="pf-c-button pf-m-plain sc-bwzfXH iNPUwu"
-                                                                  disabled={false}
-                                                                  onClick={[Function]}
-                                                                  tabIndex={null}
-                                                                  type="button"
-                                                                >
-                                                                  <Sort__IconWrapper>
-                                                                    <StyledComponent
-                                                                      forwardedComponent={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "attrs": Array [],
-                                                                          "componentStyle": ComponentStyle {
-                                                                            "componentId": "Sort__IconWrapper-sc-21g5aw-1",
-                                                                            "isStatic": true,
-                                                                            "lastClassName": "fTwElO",
-                                                                            "rules": Array [
-                                                                              "> svg{font-size:18px;}",
-                                                                            ],
-                                                                          },
-                                                                          "displayName": "Sort__IconWrapper",
-                                                                          "foldedComponentIds": Array [],
-                                                                          "render": [Function],
-                                                                          "styledComponentId": "Sort__IconWrapper-sc-21g5aw-1",
-                                                                          "target": "span",
-                                                                          "toString": [Function],
-                                                                          "warnTooManyClasses": [Function],
-                                                                          "withComponent": [Function],
-                                                                        }
-                                                                      }
-                                                                      forwardedRef={null}
-                                                                    >
-                                                                      <span
-                                                                        className="Sort__IconWrapper-sc-21g5aw-1 fTwElO"
-                                                                      >
-                                                                        <SortAlphaUpIcon
-                                                                          color="currentColor"
-                                                                          size="sm"
-                                                                          title={null}
-                                                                        >
-                                                                          <svg
-                                                                            aria-hidden={true}
-                                                                            aria-labelledby={null}
-                                                                            fill="currentColor"
-                                                                            height="1em"
-                                                                            role="img"
-                                                                            style={
-                                                                              Object {
-                                                                                "verticalAlign": "-0.125em",
-                                                                              }
-                                                                            }
-                                                                            viewBox="0 0 448 512"
-                                                                            width="1em"
-                                                                          >
-                                                                            <path
-                                                                              d="M107.3 36.7c-6.2-6.2-16.4-6.2-22.6 0l-80 80c-10 10-2.9 27.3 11.3 27.3h48v320c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V144h48c14.2 0 21.4-17.2 11.3-27.3zm293.4 390.4h-61.1c.7-1 1.5-2 2.3-3.1l67.5-95.7c1.4-2 2.2-4.4 2.2-6.9V300c0-6.6-5.4-12-12-12H274.5c-6.6 0-12 5.4-12 12v28.9c0 6.6 5.4 12 12 12H331c-.7 1-1.5 2-2.3 3.1l-67.2 95.2c-1.4 2-2.2 4.4-2.2 6.9V468c0 6.6 5.4 12 12 12h129.4c6.6 0 12-5.4 12-12v-28.9c0-6.7-5.4-12-12-12zm23.5-219l-57.1-168c-1.7-4.9-6.2-8.1-11.4-8.1h-39.6c-5.1 0-9.7 3.3-11.4 8.1l-57.1 168c-2.6 7.8 3.1 15.9 11.4 15.9h35.7c5.4 0 10.1-3.5 11.5-8.7l8.1-28.2h42.9l8.3 28.3A12 12 0 0 0 377 224h35.7c8.4 0 14.2-8.1 11.5-15.9zm-95-71.5l6.8-22.9 6.6 22.9z"
-                                                                              transform=""
-                                                                            />
-                                                                          </svg>
-                                                                        </SortAlphaUpIcon>
-                                                                      </span>
-                                                                    </StyledComponent>
-                                                                  </Sort__IconWrapper>
-                                                                </button>
-                                                              </Button>
-                                                            </StyledComponent>
-                                                          </Styled(Button)>
-                                                        </Sort>
-                                                      </I18n>
-                                                    </WithI18n>
-                                                  </div>
-                                                </ToolbarItem>
-                                                <DataListToolbar__AdditionalControlsWrapper>
-                                                  <StyledComponent
-                                                    forwardedComponent={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "attrs": Array [],
-                                                        "componentStyle": ComponentStyle {
-                                                          "componentId": "DataListToolbar__AdditionalControlsWrapper-ajzso8-5",
-                                                          "isStatic": true,
-                                                          "lastClassName": "bWuACV",
-                                                          "rules": Array [
-                                                            "display:flex;flex-grow:1;justify-content:flex-end;align-items:center;& >:not(:first-child){margin-left:20px;}",
-                                                          ],
-                                                        },
-                                                        "displayName": "DataListToolbar__AdditionalControlsWrapper",
-                                                        "foldedComponentIds": Array [],
-                                                        "render": [Function],
-                                                        "styledComponentId": "DataListToolbar__AdditionalControlsWrapper-ajzso8-5",
-                                                        "target": "div",
-                                                        "toString": [Function],
-                                                        "warnTooManyClasses": [Function],
-                                                        "withComponent": [Function],
-                                                      }
-                                                    }
-                                                    forwardedRef={null}
-                                                  >
-                                                    <div
-                                                      className="DataListToolbar__AdditionalControlsWrapper-ajzso8-5 bWuACV"
-                                                    />
+                                                          <div
+                                                            className="DataListToolbar__AdditionalControlsWrapper-ajzso8-5 bWuACV"
+                                                          />
+                                                        </StyledComponent>
+                                                      </DataListToolbar__AdditionalControlsWrapper>
+                                                    </div>
                                                   </StyledComponent>
-                                                </DataListToolbar__AdditionalControlsWrapper>
+                                                </DataListToolbar__ColumnRight>
                                               </div>
-                                            </StyledComponent>
-                                          </DataListToolbar__ColumnRight>
-                                        </div>
-                                      </Toolbar>
+                                            </Toolbar>
+                                          </StyledComponent>
+                                        </Styled(DataListToolbar__Toolbar)>
+                                      </div>
                                     </StyledComponent>
-                                  </Styled(DataListToolbar__Toolbar)>
-                                </div>
-                              </StyledComponent>
-                            </DataListToolbar__AWXToolbar>
-                          </DataListToolbar>
-                        </I18n>
-                      </WithI18n>
+                                  </DataListToolbar__AWXToolbar>
+                                </DataListToolbar>
+                              </I18n>
+                            </WithI18n>
+                            <WithI18n
+                              itemCount={2}
+                              onRemove={[Function]}
+                              onRemoveAll={[Function]}
+                              qsConfig={
+                                Object {
+                                  "defaultParams": Object {
+                                    "order_by": "name",
+                                    "page": 1,
+                                    "page_size": 5,
+                                  },
+                                  "integerFields": Array [
+                                    "page",
+                                    "page_size",
+                                  ],
+                                  "namespace": "notification",
+                                }
+                              }
+                            >
+                              <I18n
+                                update={true}
+                                withHash={true}
+                              >
+                                <withRouter(FilterTags)
+                                  i18n={"/i18n/"}
+                                  itemCount={2}
+                                  onRemove={[Function]}
+                                  onRemoveAll={[Function]}
+                                  qsConfig={
+                                    Object {
+                                      "defaultParams": Object {
+                                        "order_by": "name",
+                                        "page": 1,
+                                        "page_size": 5,
+                                      },
+                                      "integerFields": Array [
+                                        "page",
+                                        "page_size",
+                                      ],
+                                      "namespace": "notification",
+                                    }
+                                  }
+                                >
+                                  <Route>
+                                    <FilterTags
+                                      history={"/history/"}
+                                      i18n={"/i18n/"}
+                                      itemCount={2}
+                                      location={
+                                        Object {
+                                          "hash": "",
+                                          "pathname": "",
+                                          "search": "",
+                                          "state": "",
+                                        }
+                                      }
+                                      match={
+                                        Object {
+                                          "isExact": false,
+                                          "params": Object {},
+                                          "path": "",
+                                          "url": "",
+                                        }
+                                      }
+                                      onRemove={[Function]}
+                                      onRemoveAll={[Function]}
+                                      qsConfig={
+                                        Object {
+                                          "defaultParams": Object {
+                                            "order_by": "name",
+                                            "page": 1,
+                                            "page_size": 5,
+                                          },
+                                          "integerFields": Array [
+                                            "page",
+                                            "page_size",
+                                          ],
+                                          "namespace": "notification",
+                                        }
+                                      }
+                                    />
+                                  </Route>
+                                </withRouter(FilterTags)>
+                              </I18n>
+                            </WithI18n>
+                          </ListHeader>
+                        </Route>
+                      </withRouter(ListHeader)>
                       <DataList
                         aria-label="{itemDisplayName} List"
                         className=""
@@ -3325,7 +3337,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
               </I18n>
             </WithI18n>
             <_default
-              isOpen={null}
+              isOpen={false}
               onClose={[Function]}
               title="Error!"
               variant="danger"
diff --git a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx
index 89dcadc219..faa9d4b359 100644
--- 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 {
diff --git a/awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx b/awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx
index 66ed5f706b..a85e184f76 100644
--- a/awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx
+++ b/awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx
@@ -37,7 +37,12 @@ class InstanceGroupsLookup extends React.Component {
           getItems={getInstanceGroups}
           multiple
           columns={[
-            { name: i18n._(t`Name`), key: 'name', isSortable: true },
+            {
+              name: i18n._(t`Name`),
+              key: 'name',
+              isSortable: true,
+              isSearchable: true,
+            },
             {
               name: i18n._(t`Modified`),
               key: 'modified',
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index 93c3352790..aa278fedf8 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -11,11 +11,10 @@ import {
 } from '@api';
 import AlertModal from '@components/AlertModal';
 import DatalistToolbar from '@components/DataListToolbar';
-import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, {
   ToolbarDeleteButton,
 } from '@components/PaginatedDataList';
-import { getQSConfig, parseNamespacedQueryString } from '@util/qs';
+import { getQSConfig, parseQueryString } from '@util/qs';
 
 import TemplateListItem from './TemplateListItem';
 
@@ -35,7 +34,7 @@ class TemplatesList extends Component {
     this.state = {
       hasContentLoading: true,
       contentError: null,
-      deletionError: null,
+      hasDeletionError: false,
       selected: [],
       templates: [],
       itemCount: 0,
@@ -59,7 +58,7 @@ class TemplatesList extends Component {
   }
 
   handleDeleteErrorClose() {
-    this.setState({ deletionError: null });
+    this.setState({ hasDeletionError: false });
   }
 
   handleSelectAll(isSelected) {
@@ -78,9 +77,9 @@ class TemplatesList extends Component {
   }
 
   async handleTemplateDelete() {
-    const { selected, itemCount } = this.state;
+    const { selected } = this.state;
 
-    this.setState({ hasContentLoading: true });
+    this.setState({ hasContentLoading: true, hasDeletionError: false });
     try {
       await Promise.all(
         selected.map(({ type, id }) => {
@@ -93,9 +92,8 @@ class TemplatesList extends Component {
           return deletePromise;
         })
       );
-      this.setState({ itemCount: itemCount - selected.length });
     } catch (err) {
-      this.setState({ deletionError: err });
+      this.setState({ hasDeletionError: true });
     } finally {
       await this.loadTemplates();
     }
@@ -103,7 +101,7 @@ class TemplatesList extends Component {
 
   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 });
     try {
@@ -126,7 +124,7 @@ class TemplatesList extends Component {
     const {
       contentError,
       hasContentLoading,
-      deletionError,
+      hasDeletionError,
       templates,
       itemCount,
       selected,
@@ -138,14 +136,19 @@ class TemplatesList extends Component {
       <PageSection variant={medium}>
         <Card>
           <PaginatedDataList
-            error={contentError}
+            err={contentError}
             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`Name`),
+                key: 'name',
+                isSortable: true,
+                isSearchable: true,
+              },
               {
                 name: i18n._(t`Modified`),
                 key: 'modified',
@@ -189,13 +192,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>
     );
diff --git a/awx/ui_next/src/util/qs.js b/awx/ui_next/src/util/qs.js
index b5903cf78d..8e19afc978 100644
--- a/awx/ui_next/src/util/qs.js
+++ b/awx/ui_next/src/util/qs.js
@@ -1,54 +1,163 @@
+/**
+ * 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 '';
-  }
+  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, 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('&');
 };
 
+/**
+ * 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' },
@@ -58,71 +167,217 @@ 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 namespacedIntegerFields = config.integerFields.map(f =>
+    config.namespace ? `${config.namespace}.${f}` : f
   );
-  const parsed = parseQueryString(queryString, integerFields);
 
-  const namespace = {};
+  const keyValuePairs = queryString
+    .replace(/^\?/, '')
+    .split('&')
+    .map(s => s.split('='))
+    .map(([key, value]) => {
+      if (namespacedIntegerFields.includes(key)) {
+        return [decodeURIComponent(key), parseInt(value, 10)];
+      }
+
+      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);
       }
-      namespace[fieldname] = parsed[field];
+      namespacedParams[fieldname] = parsed[field];
     }
   });
-  return {
-    ...(includeDefaults ? config.defaultParams : {}),
-    ...namespace,
-  };
+
+  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 {object} object with params from existing search
+ * @param {object} object with new params to add
+ * @return {object} query param object
+ */
+export function addParams(config, oldParams, paramsToAdd) {
+  const namespacedOldParams = namespaceParams(config.namespace, oldParams);
+  const namespacedParamsToAdd = namespaceParams(config.namespace, paramsToAdd);
+  const namespacedDefaultParams = namespaceParams(
+    config.namespace,
+    config.defaultParams
+  );
+
+  const namespacedOldParamsNotDefaults = getNonDefaultParams(
+    namespacedOldParams,
+    namespacedDefaultParams
+  );
+  const namespacedMergedParams = getMergedParams(
+    namespacedOldParamsNotDefaults,
+    namespacedParamsToAdd
+  );
+
+  // 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, namespacedParamsToAdd),
   });
 }
 
-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 {object} object with params from existing search
+ * @param {object} object with new params to remove
+ * @return {object} query param object
+ */
+export function removeParams(config, oldParams, paramsToRemove) {
+  const paramsEntries = [];
+  Object.entries(oldParams).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach(val => {
+        paramsEntries.push([key, val]);
+      });
+    } else {
+      paramsEntries.push([key, 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}`);
+  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 toObject(finalParamsEntries);
 }
diff --git a/awx/ui_next/src/util/qs.test.js b/awx/ui_next/src/util/qs.test.js
index 2d13074318..9a9bb76515 100644
--- a/awx/ui_next/src/util/qs.test.js
+++ b/awx/ui_next/src/util/qs.test.js
@@ -1,116 +1,133 @@
 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 +135,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 +160,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 +174,378 @@ 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 oldParams = { baz: 'bar', page: 3, page_size: 15 };
+      const newParams = { bag: 'boom' };
+      expect(addParams(config, oldParams, 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 oldParams = { baz: ['bar', 'bang'], page: 3, page_size: 15 };
+      const newParams = { baz: 'boom' };
+      expect(addParams(config, oldParams, 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 oldParams = { baz: ['bar', 'bang'], page: 3, page_size: 15 };
+      const newParams = { page: 5 };
+      expect(addParams(config, oldParams, 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 oldParams = { baz: ['bar', 'bang'], page: 3, page_size: 15 };
+      const newParams = { baz: 'bust', pat: 'pal' };
+      expect(addParams(config, oldParams, 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 oldParams = { baz: 'bar', page: 3, page_size: 15 };
+      const newParams = { bag: 'boom' };
+      expect(addParams(config, oldParams, 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 oldParams = { baz: 'bar', page: 1, page_size: 15 };
+      const newParams = { bag: 'boom' };
+      expect(addParams(config, oldParams, 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 oldParams = { baz: ['bar', 'bang'], page: 3, page_size: 15 };
+      const newParams = { baz: 'boom' };
+      expect(addParams(config, oldParams, 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 oldParams = { baz: ['bar', 'bang'], page: 3, page_size: 15 };
+      const newParams = { page: 5 };
+      expect(addParams(config, oldParams, 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 oldParams = { baz: ['bar', 'bang'], page: 3, page_size: 15 };
+      const newParams = { baz: 'bust', pat: 'pal' };
+      expect(addParams(config, oldParams, 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 oldParams = { baz: 'bar', page: 3, bag: 'boom', page_size: 15 };
+      const newParams = { bag: 'boom' };
+      expect(removeParams(config, oldParams, 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 oldParams = { baz: ['bar', 'bang'], page: 3, page_size: 15 };
+      const newParams = { baz: 'bar' };
+      expect(removeParams(config, oldParams, 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 oldParams = {
+        baz: ['bar', 'bang', 'bust'],
+        page: 3,
+        page_size: 15,
+      };
+      const newParams = { baz: 'bar' };
+      expect(removeParams(config, oldParams, 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 oldParams = { baz: ['bar', 'bang'], page: 3, page_size: 15 };
+      const newParams = { page: 3 };
+      expect(removeParams(config, oldParams, 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 oldParams = {
+        baz: ['bar', 'bang', 'bust'],
+        pat: 'pal',
+        page: 3,
+        page_size: 15,
+      };
+      const newParams = { baz: 'bust', pat: 'pal' };
+      expect(removeParams(config, oldParams, 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 oldParams = { baz: 'bar', page: 3, page_size: 15 };
+      const newParams = { baz: 'bar' };
+      expect(removeParams(config, oldParams, 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 oldParams = { baz: 'bar', page: 1, page_size: 15 };
+      const newParams = { baz: 'bar' };
+      expect(removeParams(config, oldParams, 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 oldParams = { baz: ['bar', 'bang'], page: 3, page_size: 15 };
+      const newParams = { baz: 'bar' };
+      expect(removeParams(config, oldParams, 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 oldParams = {
+        baz: ['bar', 'bang', 'bust'],
+        page: 3,
+        page_size: 15,
+      };
+      const newParams = { baz: 'bar' };
+      expect(removeParams(config, oldParams, 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 oldParams = { baz: ['bar', 'bang'], page: 3, page_size: 15 };
+      const newParams = { page: 3 };
+      expect(removeParams(config, oldParams, 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 oldParams = {
+        baz: ['bar', 'bang', 'bust'],
+        pat: 'pal',
+        page: 3,
+        page_size: 15,
+      };
+      const newParams = { baz: 'bust', pat: 'pal' };
+      expect(removeParams(config, oldParams, newParams)).toEqual({
+        baz: ['bar', 'bang'],
+        page: 3,
+        page_size: 15,
+      });
     });
   });
 });
diff --git a/awx/ui_next/testUtils/apiReusable.jsx b/awx/ui_next/testUtils/apiReusable.jsx
index 11f9fca7c7..aa66015afd 100644
--- a/awx/ui_next/testUtils/apiReusable.jsx
+++ b/awx/ui_next/testUtils/apiReusable.jsx
@@ -8,23 +8,36 @@ export function describeNotificationMixin (Model, name) {
       jest.clearAllMocks();
     });
 
-    const parameters = [
-      ['success', true],
-      ['success', false],
-      ['error', true],
-      ['error', false],
-    ];
-    parameters.forEach(([type, state]) => {
-      const label = `[notificationType=${type}, associationState=${state}]`;
-      const testName = `updateNotificationTemplateAssociation ${label} makes expected http calls`;
+    const parameters = ['success', 'error'];
+
+    parameters.forEach((type) => {
+      const label = `[notificationType=${type}, associationState=true`;
+      const testName = `associateNotificationTemplate ${label} makes expected http calls`;
 
       test(testName, async (done) => {
-        await ModelAPI.updateNotificationTemplateAssociation(1, 21, type, state);
+        await ModelAPI.associateNotificationTemplate(1, 21, type);
 
         const expectedPath = `${ModelAPI.baseUrl}1/notification_templates_${type}/`;
         expect(mockHttp.post).toHaveBeenCalledTimes(1);
 
-        const expectedParams = state ? { id: 21 } : { id: 21, disassociate: true };
+        const expectedParams = { id: 21 };
+        expect(mockHttp.post.mock.calls.pop()).toEqual([expectedPath, expectedParams]);
+
+        done();
+      });
+    });
+
+    parameters.forEach((type) => {
+      const label = `[notificationType=${type}, associationState=false`;
+      const testName = `disassociateNotificationTemplate ${label} makes expected http calls`;
+
+      test(testName, async (done) => {
+        await ModelAPI.disassociateNotificationTemplate(1, 21, type);
+
+        const expectedPath = `${ModelAPI.baseUrl}1/notification_templates_${type}/`;
+        expect(mockHttp.post).toHaveBeenCalledTimes(1);
+
+        const expectedParams = { id: 21, disassociate: true };
         expect(mockHttp.post.mock.calls.pop()).toEqual([expectedPath, expectedParams]);
 
         done();