From e72f0bcfd48aad652eae22530a68d31f5318088e Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Thu, 9 May 2019 15:59:43 -0400
Subject: [PATCH] update content loading and error handling

unwind error handling

use auth cookie as source of truth, fetch config only when authenticated
---
 CONTRIBUTING.md                               |   10 +
 README.md                                     |    2 +-
 __tests__/App.test.jsx                        |   54 +-
 .../__snapshots__/enzymeHelpers.test.jsx.snap |   14 +-
 __tests__/components/Lookup.test.jsx          |    3 -
 .../components/NotifyAndRedirect.test.jsx     |   19 -
 __tests__/enzymeHelpers.jsx                   |   50 +-
 __tests__/enzymeHelpers.test.jsx              |   72 +-
 __tests__/pages/Login.test.jsx                |  306 +-
 .../Organizations/Organizations.test.jsx      |    2 +
 .../Organization/Organization.test.jsx        |  271 +-
 .../Organization/OrganizationAccess.test.jsx  |  107 +-
 .../Organization/OrganizationDetail.test.jsx  |  138 +-
 .../Organization/OrganizationEdit.test.jsx    |    3 -
 .../OrganizationNotifications.test.jsx        |   37 +-
 .../Organization/OrganizationTeams.test.jsx   |   25 +-
 .../OrganizationAccess.test.jsx.snap          |  227 +-
 .../OrganizationNotifications.test.jsx.snap   | 5485 +++++++++--------
 .../screens/OrganizationAdd.test.jsx          |   73 +-
 .../screens/OrganizationsList.test.jsx        |   50 +-
 .../pages/Templates/TemplatesList.test.jsx    |   70 +-
 src/App.jsx                                   |  233 +-
 src/RootProvider.jsx                          |   12 +-
 src/api/mixins/Notifications.mixin.js         |   30 +
 src/components/AddRole/AddResourceRole.jsx    |    3 +-
 src/components/ContentEmpty.jsx               |   25 +
 src/components/ContentError.jsx               |   26 +
 src/components/ContentLoading.jsx             |   19 +
 src/components/Lookup/Lookup.jsx              |    9 +-
 src/components/NotifyAndRedirect.jsx          |   41 -
 .../PaginatedDataList/PaginatedDataList.jsx   |  137 +-
 src/contexts/Config.jsx                       |  139 +-
 src/contexts/Network.jsx                      |   80 -
 src/contexts/RootDialog.jsx                   |   54 -
 src/index.jsx                                 |  373 +-
 src/pages/Login.jsx                           |  121 +-
 src/pages/Organizations/Organizations.jsx     |   46 +-
 .../components/InstanceGroupsLookup.jsx       |    4 +-
 .../components/OrganizationForm.jsx           |    3 +-
 .../screens/Organization/Organization.jsx     |  136 +-
 .../Organization/OrganizationAccess.jsx       |  260 +-
 .../Organization/OrganizationDetail.jsx       |   40 +-
 .../screens/Organization/OrganizationEdit.jsx |   13 +-
 .../OrganizationNotifications.jsx             |  261 +-
 .../Organization/OrganizationTeams.jsx        |   62 +-
 .../Organizations/screens/OrganizationAdd.jsx |   31 +-
 .../screens/OrganizationsList.jsx             |  127 +-
 src/pages/Templates/Templates.jsx             |   26 +-
 src/pages/Templates/TemplatesList.jsx         |  108 +-
 src/util/auth.js                              |    8 +
 50 files changed, 4721 insertions(+), 4724 deletions(-)
 delete mode 100644 __tests__/components/NotifyAndRedirect.test.jsx
 create mode 100644 src/components/ContentEmpty.jsx
 create mode 100644 src/components/ContentError.jsx
 create mode 100644 src/components/ContentLoading.jsx
 delete mode 100644 src/components/NotifyAndRedirect.jsx
 delete mode 100644 src/contexts/Network.jsx
 delete mode 100644 src/contexts/RootDialog.jsx
 create mode 100644 src/util/auth.js

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2384441812..00a8939685 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -13,6 +13,7 @@ Have questions about this document or anything not covered here? Feel free to re
 * [Build the user interface](#build-the-user-interface)
 * [Accessing the AWX web interface](#accessing-the-awx-web-interface)
 * [AWX REST API Interaction](#awx-rest-api-interaction)
+* [Handling API Errors](#handling-api-errors)
 * [Working with React](#working-with-react)
   * [App structure](#app-structure)
   * [Naming files](#naming-files)
@@ -110,6 +111,15 @@ afterEach(() => {
 ...
 ```
 
+## Handling API Errors
+API requests can and will fail occasionally so they should include explicit error handling. The three _main_ categories of errors from our perspective are: content loading errors, form submission errors, and other errors. The patterns currently in place for these are described below:
+
+- **content loading errors** - These are any errors that occur when fetching data to initialize a page or populate a list. For these, we conditionally render a _content error component_ in place of the unresolved content.
+
+- **form submission errors** - If an error is encountered when submitting a form, we display the error message on the form. For field-specific validation errors, we display the error message beneath the specific field(s). For general errors, we display the error message at the bottom of the form near the action buttons. An error that happens when requesting data to populate a form is not a form submission error, it is still a content error and is handled as such (see above).
+
+- **other errors** - Most errors will fall into the first two categories, but for miscellaneous actions like toggling notifications, deleting a list item, etc. we display an alert modal to notify the user that their requested action couldn't be performed.
+
 ## Working with React
 
 ### App structure
diff --git a/README.md b/README.md
index d9ca9e479c..7f1ef077c8 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,6 @@ To run the unit tests on files that you've changed:
 * `npm test`
 
 To run a single test (in this case the login page test):
-* `npm test -- __tests__/pages/Login.jsx`
+* `npm test -- __tests__/pages/Login.test.jsx`
 
 **note:** Once the test watcher is up and running you can hit `a` to run all the tests
diff --git a/__tests__/App.test.jsx b/__tests__/App.test.jsx
index fb6af10158..0565ac23d2 100644
--- a/__tests__/App.test.jsx
+++ b/__tests__/App.test.jsx
@@ -1,16 +1,33 @@
 import React from 'react';
 
 import { mountWithContexts, waitForElement } from './enzymeHelpers';
-
 import { asyncFlush } from '../jest.setup';
 
 import App from '../src/App';
-
-import { RootAPI } from '../src/api';
+import { ConfigAPI, MeAPI, RootAPI } from '../src/api';
 
 jest.mock('../src/api');
 
 describe('<App />', () => {
+  const ansible_version = '111';
+  const custom_virtualenvs = [];
+  const version = '222';
+
+  beforeEach(() => {
+    ConfigAPI.read = () => Promise.resolve({
+      data: {
+        ansible_version,
+        custom_virtualenvs,
+        version
+      }
+    });
+    MeAPI.read = () => Promise.resolve({ data: { results: [{}] } });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   test('expected content is rendered', () => {
     const appWrapper = mountWithContexts(
       <App
@@ -34,7 +51,7 @@ describe('<App />', () => {
         render={({ routeGroups }) => (
           routeGroups.map(({ groupId }) => (<div key={groupId} id={groupId} />))
         )}
-      />
+      />,
     );
 
     // page components
@@ -54,12 +71,8 @@ describe('<App />', () => {
   });
 
   test('opening the about modal renders prefetched config data', async (done) => {
-    const ansible_version = '111';
-    const version = '222';
-
-    const config = { ansible_version, version };
-
-    const wrapper = mountWithContexts(<App />, { context: { config } });
+    const wrapper = mountWithContexts(<App />);
+    wrapper.update();
 
     // open about modal
     const aboutDropdown = 'Dropdown QuestionCircleIcon';
@@ -67,9 +80,11 @@ describe('<App />', () => {
     const aboutModalContent = 'AboutModalBoxContent';
     const aboutModalClose = 'button[aria-label="Close Dialog"]';
 
-    expect(wrapper.find(aboutModalContent)).toHaveLength(0);
+    await waitForElement(wrapper, aboutDropdown);
     wrapper.find(aboutDropdown).simulate('click');
-    wrapper.find(aboutButton).simulate('click');
+
+    const button = await waitForElement(wrapper, aboutButton, el => !el.props().disabled);
+    button.simulate('click');
 
     // check about modal content
     const content = await waitForElement(wrapper, aboutModalContent);
@@ -83,24 +98,21 @@ describe('<App />', () => {
     done();
   });
 
-  test('onNavToggle sets state.isNavOpen to opposite', () => {
+  test('handleNavToggle sets state.isNavOpen to opposite', () => {
     const appWrapper = mountWithContexts(<App />).find('App');
-    const { onNavToggle } = appWrapper.instance();
+
+    const { handleNavToggle } = appWrapper.instance();
     [true, false, true, false, true].forEach(expected => {
       expect(appWrapper.state().isNavOpen).toBe(expected);
-      onNavToggle();
+      handleNavToggle();
     });
   });
 
   test('onLogout makes expected call to api client', async (done) => {
-    const appWrapper = mountWithContexts(<App />, {
-      context: { network: { handleHttpError: () => {} } }
-    }).find('App');
-
-    appWrapper.instance().onLogout();
+    const appWrapper = mountWithContexts(<App />).find('App');
+    appWrapper.instance().handleLogout();
     await asyncFlush();
     expect(RootAPI.logout).toHaveBeenCalledTimes(1);
-
     done();
   });
 });
diff --git a/__tests__/__snapshots__/enzymeHelpers.test.jsx.snap b/__tests__/__snapshots__/enzymeHelpers.test.jsx.snap
index a1f251ed2d..6e8daa0552 100644
--- a/__tests__/__snapshots__/enzymeHelpers.test.jsx.snap
+++ b/__tests__/__snapshots__/enzymeHelpers.test.jsx.snap
@@ -2,20 +2,16 @@
 
 exports[`mountWithContexts injected ConfigProvider should mount and render with custom Config value 1`] = `
 <Foo>
-  <Config>
-    <div>
-      Fizz
-      1.1
-    </div>
-  </Config>
+  <div>
+    Fizz
+    1.1
+  </div>
 </Foo>
 `;
 
 exports[`mountWithContexts injected ConfigProvider should mount and render with default values 1`] = `
 <Foo>
-  <Config>
-    <div />
-  </Config>
+  <div />
 </Foo>
 `;
 
diff --git a/__tests__/components/Lookup.test.jsx b/__tests__/components/Lookup.test.jsx
index 9fee58c795..eb7ccd98d7 100644
--- a/__tests__/components/Lookup.test.jsx
+++ b/__tests__/components/Lookup.test.jsx
@@ -19,7 +19,6 @@ describe('<Lookup />', () => {
         getItems={() => { }}
         columns={mockColumns}
         sortedColumnKey="name"
-        handleHttpError={() => {}}
       />
     );
   });
@@ -34,7 +33,6 @@ describe('<Lookup />', () => {
         getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })}
         columns={mockColumns}
         sortedColumnKey="name"
-        handleHttpError={() => {}}
       />
     ).find('Lookup');
 
@@ -57,7 +55,6 @@ describe('<Lookup />', () => {
         getItems={() => { }}
         columns={mockColumns}
         sortedColumnKey="name"
-        handleHttpError={() => {}}
       />
     ).find('Lookup');
     expect(spy).not.toHaveBeenCalled();
diff --git a/__tests__/components/NotifyAndRedirect.test.jsx b/__tests__/components/NotifyAndRedirect.test.jsx
deleted file mode 100644
index df4845359f..0000000000
--- a/__tests__/components/NotifyAndRedirect.test.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { mountWithContexts } from '../enzymeHelpers';
-
-import { _NotifyAndRedirect } from '../../src/components/NotifyAndRedirect';
-
-describe('<NotifyAndRedirect />', () => {
-  test('initially renders succesfully and calls setRootDialogMessage', () => {
-    const setRootDialogMessage = jest.fn();
-    mountWithContexts(
-      <_NotifyAndRedirect
-        to="foo"
-        setRootDialogMessage={setRootDialogMessage}
-        location={{ pathname: 'foo' }}
-        i18n={{ _: val => val.toString() }}
-      />
-    );
-    expect(setRootDialogMessage).toHaveBeenCalled();
-  });
-});
diff --git a/__tests__/enzymeHelpers.jsx b/__tests__/enzymeHelpers.jsx
index b7114e9cdf..1ba808266d 100644
--- a/__tests__/enzymeHelpers.jsx
+++ b/__tests__/enzymeHelpers.jsx
@@ -3,12 +3,10 @@
  * derived from https://lingui.js.org/guides/testing.html
  */
 import React from 'react';
-import { shape, object, string, arrayOf, func } from 'prop-types';
+import { shape, object, string, arrayOf } from 'prop-types';
 import { mount, shallow } from 'enzyme';
 import { I18nProvider } from '@lingui/react';
 import { ConfigProvider } from '../src/contexts/Config';
-import { _NetworkProvider } from '../src/contexts/Network';
-import { RootDialogProvider } from '../src/contexts/RootDialog';
 
 const language = 'en-US';
 const intlProvider = new I18nProvider(
@@ -36,8 +34,6 @@ const defaultContexts = {
     ansible_version: null,
     custom_virtualenvs: [],
     version: null,
-    custom_logo: null,
-    custom_login_info: null,
     toJSON: () => '/config/'
   },
   router: {
@@ -69,30 +65,19 @@ const defaultContexts = {
     },
     toJSON: () => '/router/',
   },
-  network: {
-    handleHttpError: () => {},
-  },
-  dialog: {}
 };
 
 function wrapContexts (node, context) {
-  const { config, network, dialog } = context;
+  const { config } = context;
   class Wrap extends React.Component {
     render () {
       // eslint-disable-next-line react/no-this-in-sfc
       const { children, ...props } = this.props;
       const component = React.cloneElement(children, props);
       return (
-        <RootDialogProvider value={dialog}>
-          <_NetworkProvider value={network}>
-            <ConfigProvider
-              value={config}
-              i18n={defaultContexts.linguiPublisher.i18n}
-            >
-              {component}
-            </ConfigProvider>
-          </_NetworkProvider>
-        </RootDialogProvider>
+        <ConfigProvider value={config}>
+          {component}
+        </ConfigProvider>
       );
     }
   }
@@ -131,8 +116,6 @@ export function mountWithContexts (node, options = {}) {
       ansible_version: string,
       custom_virtualenvs: arrayOf(string),
       version: string,
-      custom_logo: string,
-      custom_login_info: string,
     }),
     router: shape({
       route: shape({
@@ -141,36 +124,31 @@ export function mountWithContexts (node, options = {}) {
       }).isRequired,
       history: shape({}).isRequired,
     }),
-    network: shape({
-      handleHttpError: func.isRequired,
-    }),
-    dialog: shape({
-      title: string,
-      setRootDialogMessage: func,
-      clearRootDialogMessage: func,
-    }),
     ...options.childContextTypes
   };
   return mount(wrapContexts(node, context), { context, childContextTypes });
 }
 
 /**
- * Wait for element to exist.
+ * Wait for element(s) to achieve a desired state.
  *
  * @param[wrapper] - A ReactWrapper instance
- * @param[selector] - The selector of the element to wait for.
+ * @param[selector] - The selector of the element(s) to wait for.
+ * @param[callback] - Callback to poll - by default this checks for a node count of 1.
  */
-export function waitForElement (wrapper, selector) {
+export function waitForElement (wrapper, selector, callback = el => el.length === 1) {
   const interval = 100;
   return new Promise((resolve, reject) => {
     let attempts = 30;
     (function pollElement () {
       wrapper.update();
-      if (wrapper.exists(selector)) {
-        return resolve(wrapper.find(selector));
+      const el = wrapper.find(selector);
+      if (callback(el)) {
+        return resolve(el);
       }
       if (--attempts <= 0) {
-        return reject(new Error(`Element not found using ${selector}`));
+        const message = `Expected condition for <${selector}> not met: ${callback.toString()}`;
+        return reject(new Error(message));
       }
       return setTimeout(pollElement, interval);
     }());
diff --git a/__tests__/enzymeHelpers.test.jsx b/__tests__/enzymeHelpers.test.jsx
index 6c8c16a99a..0b830e8634 100644
--- a/__tests__/enzymeHelpers.test.jsx
+++ b/__tests__/enzymeHelpers.test.jsx
@@ -4,7 +4,6 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { mountWithContexts, waitForElement } from './enzymeHelpers';
 import { Config } from '../src/contexts/Config';
-import { withRootDialog } from '../src/contexts/RootDialog';
 
 describe('mountWithContexts', () => {
   describe('injected I18nProvider', () => {
@@ -109,68 +108,6 @@ describe('mountWithContexts', () => {
       expect(wrapper.find('Foo')).toMatchSnapshot();
     });
   });
-
-  describe('injected root dialog', () => {
-    it('should mount and render', () => {
-      const Foo = ({ title, setRootDialogMessage }) => (
-        <div>
-          <span>{title}</span>
-          <button
-            type="button"
-            onClick={() => setRootDialogMessage({ title: 'error' })}
-          >
-            click
-          </button>
-        </div>
-      );
-      const Bar = withRootDialog(Foo);
-      const wrapper = mountWithContexts(<Bar />);
-
-      expect(wrapper.find('span').text()).toEqual('');
-      wrapper.find('button').simulate('click');
-      wrapper.update();
-      expect(wrapper.find('span').text()).toEqual('error');
-    });
-
-    it('should mount and render with stubbed value', () => {
-      const dialog = {
-        title: 'this be the title',
-        setRootDialogMessage: jest.fn(),
-      };
-      const Foo = ({ title, setRootDialogMessage }) => (
-        <div>
-          <span>{title}</span>
-          <button
-            type="button"
-            onClick={() => setRootDialogMessage('error')}
-          >
-            click
-          </button>
-        </div>
-      );
-      const Bar = withRootDialog(Foo);
-      const wrapper = mountWithContexts(<Bar />, { context: { dialog } });
-
-      expect(wrapper.find('span').text()).toEqual('this be the title');
-      wrapper.find('button').simulate('click');
-      expect(dialog.setRootDialogMessage).toHaveBeenCalledWith('error');
-    });
-  });
-
-  it('should set props on wrapped component', () => {
-    function TestComponent ({ text }) {
-      return (<div>{text}</div>);
-    }
-
-    const wrapper = mountWithContexts(
-      <TestComponent text="foo" />
-    );
-    expect(wrapper.find('div').text()).toEqual('foo');
-    wrapper.setProps({
-      text: 'bar'
-    });
-    expect(wrapper.find('div').text()).toEqual('bar');
-  });
 });
 
 /**
@@ -184,9 +121,7 @@ class TestAsyncComponent extends Component {
   }
 
   componentDidMount () {
-    setTimeout(() => {
-      this.setState({ displayElement: true });
-    }, 1000);
+    setTimeout(() => this.setState({ displayElement: true }), 500);
   }
 
   render () {
@@ -211,16 +146,15 @@ describe('waitForElement', () => {
   });
 
   it('eventually throws an error for elements that don\'t exist', async (done) => {
-    const selector = '#does-not-exist';
     const wrapper = mountWithContexts(<div />);
 
     let error;
     try {
-      await waitForElement(wrapper, selector);
+      await waitForElement(wrapper, '#does-not-exist');
     } catch (err) {
       error = err;
     } finally {
-      expect(error).toEqual(new Error(`Element not found using ${selector}`));
+      expect(error).toEqual(new Error('Expected condition for <#does-not-exist> not met: el => el.length === 1'));
       done();
     }
   });
diff --git a/__tests__/pages/Login.test.jsx b/__tests__/pages/Login.test.jsx
index 6489869b77..8edbf7a318 100644
--- a/__tests__/pages/Login.test.jsx
+++ b/__tests__/pages/Login.test.jsx
@@ -1,169 +1,215 @@
 import React from 'react';
-import { mountWithContexts } from '../enzymeHelpers';
-import { asyncFlush } from '../../jest.setup';
+import { mountWithContexts, waitForElement } from '../enzymeHelpers';
 import AWXLogin from '../../src/pages/Login';
 import { RootAPI } from '../../src/api';
 
 jest.mock('../../src/api');
 
 describe('<Login />', () => {
-  let loginWrapper;
-  let awxLogin;
-  let loginPage;
-  let loginForm;
-  let usernameInput;
-  let passwordInput;
-  let submitButton;
-  let loginHeaderLogo;
+  async function findChildren (wrapper) {
+    const [
+      awxLogin,
+      loginPage,
+      loginForm,
+      usernameInput,
+      passwordInput,
+      submitButton,
+      loginHeaderLogo,
+    ] = await Promise.all([
+      waitForElement(wrapper, 'AWXLogin', (el) => el.length === 1),
+      waitForElement(wrapper, 'LoginPage', (el) => el.length === 1),
+      waitForElement(wrapper, 'LoginForm', (el) => el.length === 1),
+      waitForElement(wrapper, 'input#pf-login-username-id', (el) => el.length === 1),
+      waitForElement(wrapper, 'input#pf-login-password-id', (el) => el.length === 1),
+      waitForElement(wrapper, 'Button[type="submit"]', (el) => el.length === 1),
+      waitForElement(wrapper, 'img', (el) => el.length === 1),
+    ]);
+    return {
+      awxLogin,
+      loginPage,
+      loginForm,
+      usernameInput,
+      passwordInput,
+      submitButton,
+      loginHeaderLogo,
+    };
+  }
 
-  const mountLogin = () => {
-    loginWrapper = mountWithContexts(<AWXLogin />, { context: { network: {} } });
-  };
-
-  const findChildren = () => {
-    awxLogin = loginWrapper.find('AWXLogin');
-    loginPage = loginWrapper.find('LoginPage');
-    loginForm = loginWrapper.find('LoginForm');
-    usernameInput = loginWrapper.find('input#pf-login-username-id');
-    passwordInput = loginWrapper.find('input#pf-login-password-id');
-    submitButton = loginWrapper.find('Button[type="submit"]');
-    loginHeaderLogo = loginPage.find('img');
-  };
+  beforeEach(() => {
+    RootAPI.read.mockResolvedValue({
+      data: {
+        custom_login_info: '',
+        custom_logo: 'images/foo.jpg'
+      }
+    });
+  });
 
   afterEach(() => {
     jest.clearAllMocks();
-    loginWrapper.unmount();
   });
 
-  test('initially renders without crashing', () => {
-    mountLogin();
-    findChildren();
-    expect(loginWrapper.length).toBe(1);
-    expect(loginPage.length).toBe(1);
-    expect(loginForm.length).toBe(1);
-    expect(usernameInput.length).toBe(1);
+  test('initially renders without crashing', async (done) => {
+    const loginWrapper = mountWithContexts(
+      <AWXLogin isAuthenticated={() => false} />
+    );
+    const {
+      awxLogin,
+      usernameInput,
+      passwordInput,
+      submitButton,
+    } = await findChildren(loginWrapper);
     expect(usernameInput.props().value).toBe('');
-    expect(passwordInput.length).toBe(1);
     expect(passwordInput.props().value).toBe('');
-    expect(awxLogin.state().isInputValid).toBe(true);
-    expect(submitButton.length).toBe(1);
+    expect(awxLogin.state('validationError')).toBe(false);
     expect(submitButton.props().isDisabled).toBe(false);
-    expect(loginHeaderLogo.length).toBe(1);
+    done();
   });
 
-  test('custom logo renders Brand component with correct src and alt', () => {
-    loginWrapper = mountWithContexts(<AWXLogin logo="images/foo.jpg" alt="Foo Application" />);
-    findChildren();
-    expect(loginHeaderLogo.length).toBe(1);
-    expect(loginHeaderLogo.props().src).toBe('data:image/jpeg;images/foo.jpg');
-    expect(loginHeaderLogo.props().alt).toBe('Foo Application');
+  test('custom logo renders Brand component with correct src and alt', async (done) => {
+    const loginWrapper = mountWithContexts(
+      <AWXLogin alt="Foo Application" isAuthenticated={() => false} />
+    );
+    const { loginHeaderLogo } = await findChildren(loginWrapper);
+    const { alt, src } = loginHeaderLogo.props();
+    expect([alt, src]).toEqual(['Foo Application', 'data:image/jpeg;images/foo.jpg']);
+    done();
   });
 
-  test('default logo renders Brand component with correct src and alt', () => {
-    mountLogin();
-    findChildren();
-    expect(loginHeaderLogo.length).toBe(1);
-    expect(loginHeaderLogo.props().src).toBe('brand-logo.svg');
-    expect(loginHeaderLogo.props().alt).toBe('AWX');
+  test('default logo renders Brand component with correct src and alt', async (done) => {
+    RootAPI.read.mockResolvedValue({ data: {} });
+    const loginWrapper = mountWithContexts(
+      <AWXLogin isAuthenticated={() => false} />
+    );
+    const { loginHeaderLogo } = await findChildren(loginWrapper);
+    const { alt, src } = loginHeaderLogo.props();
+    expect([alt, src]).toEqual(['AWX', 'brand-logo.svg']);
+    done();
   });
 
-  test('state maps to un/pw input value props', () => {
-    mountLogin();
-    findChildren();
-    awxLogin.setState({ username: 'un', password: 'pw' });
-    expect(awxLogin.state().username).toBe('un');
-    expect(awxLogin.state().password).toBe('pw');
-    findChildren();
-    expect(usernameInput.props().value).toBe('un');
-    expect(passwordInput.props().value).toBe('pw');
+  test('default logo renders on data initialization error', async (done) => {
+    RootAPI.read.mockRejectedValueOnce({ response: { status: 500 } });
+    const loginWrapper = mountWithContexts(
+      <AWXLogin isAuthenticated={() => false} />
+    );
+    const { loginHeaderLogo } = await findChildren(loginWrapper);
+    const { alt, src } = loginHeaderLogo.props();
+    expect([alt, src]).toEqual(['AWX', 'brand-logo.svg']);
+    done();
   });
 
-  test('updating un/pw clears out error', () => {
-    mountLogin();
-    findChildren();
-    awxLogin.setState({ isInputValid: false });
-    expect(loginWrapper.find('.pf-c-form__helper-text.pf-m-error').length).toBe(1);
-    usernameInput.instance().value = 'uname';
-    usernameInput.simulate('change');
-    expect(awxLogin.state().username).toBe('uname');
-    expect(awxLogin.state().isInputValid).toBe(true);
-    expect(loginWrapper.find('.pf-c-form__helper-text.pf-m-error').length).toBe(0);
-    awxLogin.setState({ isInputValid: false });
-    expect(loginWrapper.find('.pf-c-form__helper-text.pf-m-error').length).toBe(1);
-    passwordInput.instance().value = 'pword';
-    passwordInput.simulate('change');
-    expect(awxLogin.state().password).toBe('pword');
-    expect(awxLogin.state().isInputValid).toBe(true);
-    expect(loginWrapper.find('.pf-c-form__helper-text.pf-m-error').length).toBe(0);
+  test('state maps to un/pw input value props', async (done) => {
+    const loginWrapper = mountWithContexts(
+      <AWXLogin isAuthenticated={() => false} />
+    );
+    const { usernameInput, passwordInput } = await findChildren(loginWrapper);
+    usernameInput.props().onChange({ currentTarget: { value: 'un' } });
+    passwordInput.props().onChange({ currentTarget: { value: 'pw' } });
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('username') === 'un');
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('password') === 'pw');
+    done();
   });
 
-  test('login API not called when loading', () => {
-    mountLogin();
-    findChildren();
-    expect(awxLogin.state().isLoading).toBe(false);
-    awxLogin.setState({ isLoading: true });
+  test('handles input validation errors and clears on input value change', async (done) => {
+    const formError = '.pf-c-form__helper-text.pf-m-error';
+    const loginWrapper = mountWithContexts(
+      <AWXLogin isAuthenticated={() => false} />
+    );
+    const {
+      usernameInput,
+      passwordInput,
+      submitButton
+    } = await findChildren(loginWrapper);
+
+    RootAPI.login.mockRejectedValueOnce({ response: { status: 401 } });
+    usernameInput.props().onChange({ currentTarget: { value: 'invalid' } });
+    passwordInput.props().onChange({ currentTarget: { value: 'invalid' } });
+    submitButton.simulate('click');
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('username') === 'invalid');
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('password') === 'invalid');
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('validationError') === true);
+    await waitForElement(loginWrapper, formError, (el) => el.length === 1);
+
+    usernameInput.props().onChange({ currentTarget: { value: 'dsarif' } });
+    passwordInput.props().onChange({ currentTarget: { value: 'freneticpny' } });
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('username') === 'dsarif');
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('password') === 'freneticpny');
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('validationError') === false);
+    await waitForElement(loginWrapper, formError, (el) => el.length === 0);
+
+    done();
+  });
+
+  test('handles other errors and clears on resubmit', async (done) => {
+    const loginWrapper = mountWithContexts(
+      <AWXLogin isAuthenticated={() => false} />
+    );
+    const {
+      usernameInput,
+      passwordInput,
+      submitButton
+    } = await findChildren(loginWrapper);
+
+    RootAPI.login.mockRejectedValueOnce({ response: { status: 500 } });
+    submitButton.simulate('click');
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('authenticationError') === true);
+
+    usernameInput.props().onChange({ currentTarget: { value: 'sgrimes' } });
+    passwordInput.props().onChange({ currentTarget: { value: 'ovid' } });
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('username') === 'sgrimes');
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('password') === 'ovid');
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('authenticationError') === true);
+
+    submitButton.simulate('click');
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('authenticationError') === false);
+    done();
+  });
+
+  test('no login requests are made when already authenticating', async (done) => {
+    const loginWrapper = mountWithContexts(
+      <AWXLogin isAuthenticated={() => false} />
+    );
+    const { awxLogin, submitButton } = await findChildren(loginWrapper);
+
+    awxLogin.setState({ isAuthenticating: true });
+    submitButton.simulate('click');
     submitButton.simulate('click');
     expect(RootAPI.login).toHaveBeenCalledTimes(0);
-  });
 
-  test('submit calls login API successfully', async () => {
-    RootAPI.login = jest.fn().mockImplementation(() => Promise.resolve({}));
-    mountLogin();
-    findChildren();
-    expect(awxLogin.state().isLoading).toBe(false);
-    awxLogin.setState({ username: 'unamee', password: 'pwordd' });
+    awxLogin.setState({ isAuthenticating: false });
+    submitButton.simulate('click');
     submitButton.simulate('click');
     expect(RootAPI.login).toHaveBeenCalledTimes(1);
-    expect(RootAPI.login).toHaveBeenCalledWith('unamee', 'pwordd');
-    expect(awxLogin.state().isLoading).toBe(true);
-    await asyncFlush();
-    expect(awxLogin.state().isLoading).toBe(false);
+
+    done();
   });
 
-  test('submit calls login API and handles 401 error', async () => {
-    RootAPI.login = jest.fn().mockImplementation(() => {
-      const err = new Error('401 error');
-      err.response = { status: 401, message: 'problem' };
-      return Promise.reject(err);
-    });
-    mountLogin();
-    findChildren();
-    expect(awxLogin.state().isLoading).toBe(false);
-    expect(awxLogin.state().isInputValid).toBe(true);
-    awxLogin.setState({ username: 'unamee', password: 'pwordd' });
+  test('submit calls api.login successfully', async (done) => {
+    const loginWrapper = mountWithContexts(
+      <AWXLogin isAuthenticated={() => false} />
+    );
+    const {
+      usernameInput,
+      passwordInput,
+      submitButton,
+    } = await findChildren(loginWrapper);
+
+    usernameInput.props().onChange({ currentTarget: { value: 'gthorpe' } });
+    passwordInput.props().onChange({ currentTarget: { value: 'hydro' } });
     submitButton.simulate('click');
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('isAuthenticating') === true);
+    await waitForElement(loginWrapper, 'AWXLogin', (el) => el.state('isAuthenticating') === false);
     expect(RootAPI.login).toHaveBeenCalledTimes(1);
-    expect(RootAPI.login).toHaveBeenCalledWith('unamee', 'pwordd');
-    expect(awxLogin.state().isLoading).toBe(true);
-    await asyncFlush();
-    expect(awxLogin.state().isInputValid).toBe(false);
-    expect(awxLogin.state().isLoading).toBe(false);
+    expect(RootAPI.login).toHaveBeenCalledWith('gthorpe', 'hydro');
+
+    done();
   });
 
-  test('submit calls login API and handles non-401 error', async () => {
-    RootAPI.login = jest.fn().mockImplementation(() => {
-      const err = new Error('500 error');
-      err.response = { status: 500, message: 'problem' };
-      return Promise.reject(err);
-    });
-    mountLogin();
-    findChildren();
-    expect(awxLogin.state().isLoading).toBe(false);
-    awxLogin.setState({ username: 'unamee', password: 'pwordd' });
-    submitButton.simulate('click');
-    expect(RootAPI.login).toHaveBeenCalledTimes(1);
-    expect(RootAPI.login).toHaveBeenCalledWith('unamee', 'pwordd');
-    expect(awxLogin.state().isLoading).toBe(true);
-    await asyncFlush();
-    expect(awxLogin.state().isLoading).toBe(false);
-  });
-
-  test('render Redirect to / when already authenticated', () => {
-    mountLogin();
-    findChildren();
-    awxLogin.setState({ isAuthenticated: true });
-    const redirectElem = loginWrapper.find('Redirect');
-    expect(redirectElem.length).toBe(1);
-    expect(redirectElem.props().to).toBe('/');
+  test('render Redirect to / when already authenticated', async (done) => {
+    const loginWrapper = mountWithContexts(
+      <AWXLogin isAuthenticated={() => true} />
+    );
+    await waitForElement(loginWrapper, 'Redirect', (el) => el.length === 1);
+    await waitForElement(loginWrapper, 'Redirect', (el) => el.props().to === '/');
+    done();
   });
 });
diff --git a/__tests__/pages/Organizations/Organizations.test.jsx b/__tests__/pages/Organizations/Organizations.test.jsx
index b772b462d0..28c6cf9f1a 100644
--- a/__tests__/pages/Organizations/Organizations.test.jsx
+++ b/__tests__/pages/Organizations/Organizations.test.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { mountWithContexts } from '../../enzymeHelpers';
 import Organizations from '../../../src/pages/Organizations/Organizations';
 
+jest.mock('../../../src/api');
+
 describe('<Organizations />', () => {
   test('initially renders succesfully', () => {
     mountWithContexts(
diff --git a/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx b/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx
index 95787ba4e2..43116b80a0 100644
--- a/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx
@@ -1,63 +1,232 @@
 import React from 'react';
-import { createMemoryHistory } from 'history';
-import { mountWithContexts } from '../../../../enzymeHelpers';
-import { sleep } from '../../../../testUtils';
+import { mountWithContexts, waitForElement } from '../../../../enzymeHelpers';
 import Organization from '../../../../../src/pages/Organizations/screens/Organization/Organization';
 import { OrganizationsAPI } from '../../../../../src/api';
 
 jest.mock('../../../../../src/api');
 
-describe.only('<Organization />', () => {
-  const me = {
-    is_super_user: true,
-    is_system_auditor: false
-  };
+const mockMe = {
+  is_super_user: true,
+  is_system_auditor: false
+};
 
+const mockNoResults = {
+  count: 0,
+  next: null,
+  previous: null,
+  data: { results: [] }
+};
+
+const mockDetails = {
+  data: {
+    id: 1,
+    type: 'organization',
+    url: '/api/v2/organizations/1/',
+    related: {
+      notification_templates: '/api/v2/organizations/1/notification_templates/',
+      notification_templates_any: '/api/v2/organizations/1/notification_templates_any/',
+      notification_templates_success: '/api/v2/organizations/1/notification_templates_success/',
+      notification_templates_error: '/api/v2/organizations/1/notification_templates_error/',
+      object_roles: '/api/v2/organizations/1/object_roles/',
+      access_list: '/api/v2/organizations/1/access_list/',
+      instance_groups: '/api/v2/organizations/1/instance_groups/'
+    },
+    summary_fields: {
+      created_by: {
+        id: 1,
+        username: 'admin',
+        first_name: 'Super',
+        last_name: 'User'
+      },
+      modified_by: {
+        id: 1,
+        username: 'admin',
+        first_name: 'Super',
+        last_name: 'User'
+      },
+      object_roles: {
+        admin_role: {
+          description: 'Can manage all aspects of the organization',
+          name: 'Admin',
+          id: 42
+        },
+        notification_admin_role: {
+          description: 'Can manage all notifications of the organization',
+          name: 'Notification Admin',
+          id: 1683
+        },
+        auditor_role: {
+          description: 'Can view all aspects of the organization',
+          name: 'Auditor',
+          id: 41
+        },
+      },
+      user_capabilities: {
+        edit: true,
+        delete: true
+      },
+      related_field_counts: {
+        users: 51,
+        admins: 19,
+        inventories: 23,
+        teams: 12,
+        projects: 33,
+        job_templates: 30
+      }
+    },
+    created: '2015-07-07T17:21:26.429745Z',
+    modified: '2017-09-05T19:23:15.418808Z',
+    name: 'Sarif Industries',
+    description: '',
+    max_hosts: 0,
+    custom_virtualenv: null
+  }
+};
+
+const adminOrganization = {
+  id: 1,
+  type: 'organization',
+  url: '/api/v2/organizations/1/',
+  related: {
+    instance_groups: '/api/v2/organizations/1/instance_groups/',
+    object_roles: '/api/v2/organizations/1/object_roles/',
+    access_list: '/api/v2/organizations/1/access_list/',
+  },
+  summary_fields: {
+    created_by: {
+      id: 1,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+    modified_by: {
+      id: 1,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+  },
+  created: '2015-07-07T17:21:26.429745Z',
+  modified: '2017-09-05T19:23:15.418808Z',
+  name: 'Sarif Industries',
+  description: '',
+  max_hosts: 0,
+  custom_virtualenv: null
+};
+
+const auditorOrganization = {
+  id: 2,
+  type: 'organization',
+  url: '/api/v2/organizations/2/',
+  related: {
+    instance_groups: '/api/v2/organizations/2/instance_groups/',
+    object_roles: '/api/v2/organizations/2/object_roles/',
+    access_list: '/api/v2/organizations/2/access_list/',
+  },
+  summary_fields: {
+    created_by: {
+      id: 2,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+    modified_by: {
+      id: 2,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+  },
+  created: '2015-07-07T17:21:26.429745Z',
+  modified: '2017-09-05T19:23:15.418808Z',
+  name: 'Autobots',
+  description: '',
+  max_hosts: 0,
+  custom_virtualenv: null
+};
+
+const notificationAdminOrganization = {
+  id: 3,
+  type: 'organization',
+  url: '/api/v2/organizations/3/',
+  related: {
+    instance_groups: '/api/v2/organizations/3/instance_groups/',
+    object_roles: '/api/v2/organizations/3/object_roles/',
+    access_list: '/api/v2/organizations/3/access_list/',
+  },
+  summary_fields: {
+    created_by: {
+      id: 1,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+    modified_by: {
+      id: 1,
+      username: 'admin',
+      first_name: 'Super',
+      last_name: 'User'
+    },
+  },
+  created: '2015-07-07T17:21:26.429745Z',
+  modified: '2017-09-05T19:23:15.418808Z',
+  name: 'Decepticons',
+  description: '',
+  max_hosts: 0,
+  custom_virtualenv: null
+};
+
+const allOrganizations = [
+  adminOrganization,
+  auditorOrganization,
+  notificationAdminOrganization
+];
+
+async function getOrganizations (params) {
+  let results = allOrganizations;
+  if (params && params.role_level) {
+    if (params.role_level === 'admin_role') {
+      results = [adminOrganization];
+    }
+    if (params.role_level === 'auditor_role') {
+      results = [auditorOrganization];
+    }
+    if (params.role_level === 'notification_admin_role') {
+      results = [notificationAdminOrganization];
+    }
+  }
+  return {
+    count: results.length,
+    next: null,
+    previous: null,
+    data: { results }
+  };
+}
+
+describe.only('<Organization />', () => {
   test('initially renders succesfully', () => {
-    mountWithContexts(<Organization me={me} />);
+    OrganizationsAPI.readDetail.mockResolvedValue(mockDetails);
+    OrganizationsAPI.read.mockImplementation(getOrganizations);
+    mountWithContexts(<Organization setBreadcrumb={() => {}} me={mockMe} />);
   });
 
-  test('notifications tab shown/hidden based on permissions', async () => {
-    OrganizationsAPI.readDetail.mockResolvedValue({
-      data: {
-        id: 1,
-        name: 'foo'
-      }
-    });
-    OrganizationsAPI.read.mockResolvedValue({
-      data: {
-        results: []
-      }
-    });
-    const history = createMemoryHistory({
-      initialEntries: ['/organizations/1/details'],
-    });
-    const match = { path: '/organizations/:id', url: '/organizations/1' };
-    const wrapper = mountWithContexts(
-      <Organization
-        me={me}
-        setBreadcrumb={() => {}}
-      />,
-      {
-        context: {
-          router: {
-            history,
-            route: {
-              location: history.location,
-              match
-            }
-          }
-        }
-      }
-    );
-    await sleep(0);
-    wrapper.update();
-    expect(wrapper.find('.pf-c-tabs__item').length).toBe(3);
-    expect(wrapper.find('.pf-c-tabs__button[children="Notifications"]').length).toBe(0);
-    wrapper.find('Organization').setState({
-      isNotifAdmin: true
-    });
-    expect(wrapper.find('.pf-c-tabs__item').length).toBe(4);
-    expect(wrapper.find('button.pf-c-tabs__button[children="Notifications"]').length).toBe(1);
+  test('notifications tab shown for admins', async (done) => {
+    OrganizationsAPI.readDetail.mockResolvedValue(mockDetails);
+    OrganizationsAPI.read.mockImplementation(getOrganizations);
+
+    const wrapper = mountWithContexts(<Organization setBreadcrumb={() => {}} me={mockMe} />);
+    const tabs = await waitForElement(wrapper, '.pf-c-tabs__item', el => el.length === 4);
+    expect(tabs.last().text()).toEqual('Notifications');
+    done();
+  });
+
+  test('notifications tab hidden with reduced permissions', async (done) => {
+    OrganizationsAPI.readDetail.mockResolvedValue(mockDetails);
+    OrganizationsAPI.read.mockResolvedValue(mockNoResults);
+
+    const wrapper = mountWithContexts(<Organization setBreadcrumb={() => {}} me={mockMe} />);
+    const tabs = await waitForElement(wrapper, '.pf-c-tabs__item', el => el.length === 3);
+    tabs.forEach(tab => expect(tab.text()).not.toEqual('Notifications'));
+    done();
   });
 });
diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationAccess.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationAccess.test.jsx
index 64b358c78f..ae7ce91ae3 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationAccess.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationAccess.test.jsx
@@ -1,14 +1,12 @@
 import React from 'react';
-import { mountWithContexts } from '../../../../enzymeHelpers';
+import { mountWithContexts, waitForElement } from '../../../../enzymeHelpers';
 import OrganizationAccess from '../../../../../src/pages/Organizations/screens/Organization/OrganizationAccess';
 import { sleep } from '../../../../testUtils';
-
 import { OrganizationsAPI, TeamsAPI, UsersAPI } from '../../../../../src/api';
 
 jest.mock('../../../../../src/api');
 
 describe('<OrganizationAccess />', () => {
-  const network = {};
   const organization = {
     id: 1,
     name: 'Default',
@@ -64,7 +62,9 @@ describe('<OrganizationAccess />', () => {
   };
 
   beforeEach(() => {
-    OrganizationsAPI.readAccessList.mockReturnValue({ data });
+    OrganizationsAPI.readAccessList.mockResolvedValue({ data });
+    TeamsAPI.disassociateRole.mockResolvedValue({});
+    UsersAPI.disassociateRole.mockResolvedValue({});
   });
 
   afterEach(() => {
@@ -72,31 +72,21 @@ describe('<OrganizationAccess />', () => {
   });
 
   test('initially renders succesfully', () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
     expect(wrapper.find('OrganizationAccess')).toMatchSnapshot();
   });
 
-  test('should fetch and display access records on mount', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
-    await sleep(0);
-    wrapper.update();
-    expect(OrganizationsAPI.readAccessList).toHaveBeenCalled();
-    expect(wrapper.find('OrganizationAccess').state('isInitialized')).toBe(true);
+  test('should fetch and display access records on mount', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
+    await waitForElement(wrapper, 'OrganizationAccessItem', el => el.length === 2);
     expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(data.results);
-    expect(wrapper.find('OrganizationAccessItem')).toHaveLength(2);
+    expect(wrapper.find('OrganizationAccess').state('contentLoading')).toBe(false);
+    expect(wrapper.find('OrganizationAccess').state('contentError')).toBe(false);
+    done();
   });
 
-  test('should open confirmation dialog when deleting role', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
+  test('should open confirmation dialog when deleting role', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
     await sleep(0);
     wrapper.update();
 
@@ -105,18 +95,16 @@ describe('<OrganizationAccess />', () => {
     wrapper.update();
 
     const component = wrapper.find('OrganizationAccess');
-    expect(component.state('roleToDelete'))
+    expect(component.state('deletionRole'))
       .toEqual(data.results[0].summary_fields.direct_access[0].role);
-    expect(component.state('roleToDeleteAccessRecord'))
+    expect(component.state('deletionRecord'))
       .toEqual(data.results[0]);
     expect(component.find('DeleteRoleConfirmationModal')).toHaveLength(1);
+    done();
   });
 
-  it('should close dialog when cancel button clicked', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
+  it('should close dialog when cancel button clicked', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
     await sleep(0);
     wrapper.update();
     const button = wrapper.find('ChipButton').at(0);
@@ -125,55 +113,50 @@ describe('<OrganizationAccess />', () => {
 
     wrapper.find('DeleteRoleConfirmationModal').prop('onCancel')();
     const component = wrapper.find('OrganizationAccess');
-    expect(component.state('roleToDelete')).toBeNull();
-    expect(component.state('roleToDeleteAccessRecord')).toBeNull();
+    expect(component.state('deletionRole')).toBeNull();
+    expect(component.state('deletionRecord')).toBeNull();
     expect(TeamsAPI.disassociateRole).not.toHaveBeenCalled();
     expect(UsersAPI.disassociateRole).not.toHaveBeenCalled();
+    done();
   });
 
-  it('should delete user role', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
+  it('should delete user role', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
+    const button = await waitForElement(wrapper, 'ChipButton', el => el.length === 2);
+    button.at(0).prop('onClick')();
+
+    const confirmation = await waitForElement(wrapper, 'DeleteRoleConfirmationModal');
+    confirmation.prop('onConfirm')();
+    await waitForElement(wrapper, 'DeleteRoleConfirmationModal', el => el.length === 0);
+
     await sleep(0);
     wrapper.update();
-    const button = wrapper.find('ChipButton').at(0);
-    button.prop('onClick')();
-    wrapper.update();
-
-    wrapper.find('DeleteRoleConfirmationModal').prop('onConfirm')();
-    await sleep(0);
-    wrapper.update();
-
     const component = wrapper.find('OrganizationAccess');
-    expect(component.state('roleToDelete')).toBeNull();
-    expect(component.state('roleToDeleteAccessRecord')).toBeNull();
+    expect(component.state('deletionRole')).toBeNull();
+    expect(component.state('deletionRecord')).toBeNull();
     expect(TeamsAPI.disassociateRole).not.toHaveBeenCalled();
     expect(UsersAPI.disassociateRole).toHaveBeenCalledWith(1, 1);
     expect(OrganizationsAPI.readAccessList).toHaveBeenCalledTimes(2);
+    done();
   });
 
-  it('should delete team role', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />,
-      { context: { network } }
-    );
+  it('should delete team role', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
+    const button = await waitForElement(wrapper, 'ChipButton', el => el.length === 2);
+    button.at(1).prop('onClick')();
+
+    const confirmation = await waitForElement(wrapper, 'DeleteRoleConfirmationModal');
+    confirmation.prop('onConfirm')();
+    await waitForElement(wrapper, 'DeleteRoleConfirmationModal', el => el.length === 0);
+
     await sleep(0);
     wrapper.update();
-    const button = wrapper.find('ChipButton').at(1);
-    button.prop('onClick')();
-    wrapper.update();
-
-    wrapper.find('DeleteRoleConfirmationModal').prop('onConfirm')();
-    await sleep(0);
-    wrapper.update();
-
     const component = wrapper.find('OrganizationAccess');
-    expect(component.state('roleToDelete')).toBeNull();
-    expect(component.state('roleToDeleteAccessRecord')).toBeNull();
+    expect(component.state('deletionRole')).toBeNull();
+    expect(component.state('deletionRecord')).toBeNull();
     expect(TeamsAPI.disassociateRole).toHaveBeenCalledWith(5, 3);
     expect(UsersAPI.disassociateRole).not.toHaveBeenCalled();
     expect(OrganizationsAPI.readAccessList).toHaveBeenCalledTimes(2);
+    done();
   });
 });
diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx
index ca7676db42..6e9f675388 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { mountWithContexts } from '../../../../enzymeHelpers';
+import { mountWithContexts, waitForElement } from '../../../../enzymeHelpers';
 import OrganizationDetail from '../../../../../src/pages/Organizations/screens/Organization/OrganizationDetail';
 import { OrganizationsAPI } from '../../../../../src/api';
 
 jest.mock('../../../../../src/api');
 
 describe('<OrganizationDetail />', () => {
-  const mockDetails = {
+  const mockOrganization = {
     name: 'Foo',
     description: 'Bar',
     custom_virtualenv: 'Fizz',
@@ -19,107 +19,75 @@ describe('<OrganizationDetail />', () => {
       }
     }
   };
+  const mockInstanceGroups = {
+    data: {
+      results: [
+        { name: 'One', id: 1 },
+        { name: 'Two', id: 2 }
+      ]
+    }
+  };
+
+  beforeEach(() => {
+    OrganizationsAPI.readInstanceGroups.mockResolvedValue(mockInstanceGroups);
+  });
 
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   test('initially renders succesfully', () => {
-    mountWithContexts(
-      <OrganizationDetail
-        organization={mockDetails}
-      />
-    );
+    mountWithContexts(<OrganizationDetail organization={mockOrganization} />);
   });
 
   test('should request instance groups from api', () => {
-    mountWithContexts(
-      <OrganizationDetail
-        organization={mockDetails}
-      />, { context: {
-        network: { handleHttpError: () => {} }
-      } }
-    ).find('OrganizationDetail');
-
+    mountWithContexts(<OrganizationDetail organization={mockOrganization} />);
     expect(OrganizationsAPI.readInstanceGroups).toHaveBeenCalledTimes(1);
   });
 
-  test('should handle setting instance groups to state', async () => {
-    const mockInstanceGroups = [
-      { name: 'One', id: 1 },
-      { name: 'Two', id: 2 }
-    ];
-    OrganizationsAPI.readInstanceGroups.mockResolvedValue({
-      data: { results: mockInstanceGroups }
-    });
+  test('should handle setting instance groups to state', async (done) => {
     const wrapper = mountWithContexts(
-      <OrganizationDetail
-        organization={mockDetails}
-      />, { context: {
-        network: { handleHttpError: () => {} }
-      } }
-    ).find('OrganizationDetail');
-
-    await OrganizationsAPI.readInstanceGroups();
-    expect(wrapper.state().instanceGroups).toEqual(mockInstanceGroups);
-  });
-
-  test('should render Details', async () => {
-    const wrapper = mountWithContexts(
-      <OrganizationDetail
-        organization={mockDetails}
-      />
+      <OrganizationDetail organization={mockOrganization} />
     );
-
-    const detailWrapper = wrapper.find('Detail');
-    expect(detailWrapper.length).toBe(6);
-
-    const nameDetail = detailWrapper.findWhere(node => node.props().label === 'Name');
-    const descriptionDetail = detailWrapper.findWhere(node => node.props().label === 'Description');
-    const custom_virtualenvDetail = detailWrapper.findWhere(node => node.props().label === 'Ansible Environment');
-    const max_hostsDetail = detailWrapper.findWhere(node => node.props().label === 'Max Hosts');
-    const createdDetail = detailWrapper.findWhere(node => node.props().label === 'Created');
-    const modifiedDetail = detailWrapper.findWhere(node => node.props().label === 'Last Modified');
-    expect(nameDetail.find('dt').text()).toBe('Name');
-    expect(nameDetail.find('dd').text()).toBe('Foo');
-
-    expect(descriptionDetail.find('dt').text()).toBe('Description');
-    expect(descriptionDetail.find('dd').text()).toBe('Bar');
-
-    expect(custom_virtualenvDetail.find('dt').text()).toBe('Ansible Environment');
-    expect(custom_virtualenvDetail.find('dd').text()).toBe('Fizz');
-
-    expect(createdDetail.find('dt').text()).toBe('Created');
-    expect(createdDetail.find('dd').text()).toBe('Bat');
-
-    expect(modifiedDetail.find('dt').text()).toBe('Last Modified');
-    expect(modifiedDetail.find('dd').text()).toBe('Boo');
-
-    expect(max_hostsDetail.find('dt').text()).toBe('Max Hosts');
-    expect(max_hostsDetail.find('dd').text()).toBe('0');
+    const component = await waitForElement(wrapper, 'OrganizationDetail');
+    expect(component.state().instanceGroups).toEqual(mockInstanceGroups.data.results);
+    done();
   });
 
-  test('should show edit button for users with edit permission', () => {
-    const wrapper = mountWithContexts(
-      <OrganizationDetail
-        organization={mockDetails}
-      />
-    ).find('OrganizationDetail');
-    const editButton = wrapper.find('Button');
-    expect((editButton).prop('to')).toBe('/organizations/undefined/edit');
+  test('should render Details', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationDetail organization={mockOrganization} />);
+    const testParams = [
+      { label: 'Name', value: 'Foo' },
+      { label: 'Description', value: 'Bar' },
+      { label: 'Ansible Environment', value: 'Fizz' },
+      { label: 'Created', value: 'Bat' },
+      { label: 'Last Modified', value: 'Boo' },
+      { label: 'Max Hosts', value: '0' },
+    ];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const { label, value } of testParams) {
+      // eslint-disable-next-line no-await-in-loop
+      const detail = await waitForElement(wrapper, `Detail[label="${label}"]`);
+      expect(detail.find('dt').text()).toBe(label);
+      expect(detail.find('dd').text()).toBe(value);
+    }
+    done();
   });
 
-  test('should hide edit button for users without edit permission', () => {
-    const readOnlyOrg = { ...mockDetails };
+  test('should show edit button for users with edit permission', async (done) => {
+    const wrapper = mountWithContexts(<OrganizationDetail organization={mockOrganization} />);
+    const editButton = await waitForElement(wrapper, 'OrganizationDetail Button');
+    expect(editButton.text()).toEqual('Edit');
+    expect(editButton.prop('to')).toBe('/organizations/undefined/edit');
+    done();
+  });
+
+  test('should hide edit button for users without edit permission', async (done) => {
+    const readOnlyOrg = { ...mockOrganization };
     readOnlyOrg.summary_fields.user_capabilities.edit = false;
-    const wrapper = mountWithContexts(
-      <OrganizationDetail
-        organization={readOnlyOrg}
-      />
-    ).find('OrganizationDetail');
-
-    const editLink = wrapper
-      .findWhere(node => node.props().to === '/organizations/undefined/edit');
-    expect(editLink.length).toBe(0);
+    const wrapper = mountWithContexts(<OrganizationDetail organization={readOnlyOrg} />);
+    await waitForElement(wrapper, 'OrganizationDetail');
+    expect(wrapper.find('OrganizationDetail Button').length).toBe(0);
+    done();
   });
 });
diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
index 2b2d2eeea8..25df2eed0a 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
@@ -37,7 +37,6 @@ describe('<OrganizationEdit />', () => {
         organization={mockData}
       />, { context: { network: {
         api,
-        handleHttpError: () => {}
       } } }
     );
 
@@ -57,7 +56,6 @@ describe('<OrganizationEdit />', () => {
         organization={mockData}
       />, { context: { network: {
         api,
-        handleHttpError: () => {}
       } } }
     );
 
@@ -84,7 +82,6 @@ describe('<OrganizationEdit />', () => {
       />, { context: {
         network: {
           api: { api },
-          handleHttpError: () => {}
         },
         router: { history }
       } }
diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationNotifications.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationNotifications.test.jsx
index bda435749e..8c29971496 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationNotifications.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationNotifications.test.jsx
@@ -8,7 +8,6 @@ jest.mock('../../../../../src/api');
 
 describe('<OrganizationNotifications />', () => {
   let data;
-  const network = {};
 
   beforeEach(() => {
     data = {
@@ -40,8 +39,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('initially renders succesfully', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      { context: { network } }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -50,10 +48,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('should render list fetched of items', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      {
-        context: { network }
-      }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -71,10 +66,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('should enable success notification', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      {
-        context: { network }
-      }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -84,7 +76,7 @@ describe('<OrganizationNotifications />', () => {
     ).toEqual([1]);
     const items = wrapper.find('NotificationListItem');
     items.at(1).find('Switch').at(0).prop('onChange')();
-    expect(OrganizationsAPI.associateNotificationTemplatesSuccess).toHaveBeenCalled();
+    expect(OrganizationsAPI.updateNotificationTemplateAssociation).toHaveBeenCalledWith(1, 2, 'success', true);
     await sleep(0);
     wrapper.update();
     expect(
@@ -94,10 +86,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('should enable error notification', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      {
-        context: { network }
-      }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -107,7 +96,7 @@ describe('<OrganizationNotifications />', () => {
     ).toEqual([2]);
     const items = wrapper.find('NotificationListItem');
     items.at(0).find('Switch').at(1).prop('onChange')();
-    expect(OrganizationsAPI.associateNotificationTemplatesError).toHaveBeenCalled();
+    expect(OrganizationsAPI.updateNotificationTemplateAssociation).toHaveBeenCalledWith(1, 1, 'error', true);
     await sleep(0);
     wrapper.update();
     expect(
@@ -117,10 +106,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('should disable success notification', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      {
-        context: { network }
-      }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -130,7 +116,7 @@ describe('<OrganizationNotifications />', () => {
     ).toEqual([1]);
     const items = wrapper.find('NotificationListItem');
     items.at(0).find('Switch').at(0).prop('onChange')();
-    expect(OrganizationsAPI.disassociateNotificationTemplatesSuccess).toHaveBeenCalled();
+    expect(OrganizationsAPI.updateNotificationTemplateAssociation).toHaveBeenCalledWith(1, 1, 'success', false);
     await sleep(0);
     wrapper.update();
     expect(
@@ -140,10 +126,7 @@ describe('<OrganizationNotifications />', () => {
 
   test('should disable error notification', async () => {
     const wrapper = mountWithContexts(
-      <OrganizationNotifications id={1} canToggleNotifications />,
-      {
-        context: { network }
-      }
+      <OrganizationNotifications id={1} canToggleNotifications />
     );
     await sleep(0);
     wrapper.update();
@@ -153,7 +136,7 @@ describe('<OrganizationNotifications />', () => {
     ).toEqual([2]);
     const items = wrapper.find('NotificationListItem');
     items.at(1).find('Switch').at(1).prop('onChange')();
-    expect(OrganizationsAPI.disassociateNotificationTemplatesError).toHaveBeenCalled();
+    expect(OrganizationsAPI.updateNotificationTemplateAssociation).toHaveBeenCalledWith(1, 2, 'error', false);
     await sleep(0);
     wrapper.update();
     expect(
diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx
index 3f4321009d..fbe4323863 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx
@@ -20,22 +20,21 @@ const listData = {
   }
 };
 
-beforeEach(() => {
-  OrganizationsAPI.readTeams.mockResolvedValue(listData);
-});
-
-afterEach(() => {
-  jest.clearAllMocks();
-});
-
 describe('<OrganizationTeams />', () => {
+  beforeEach(() => {
+    OrganizationsAPI.readTeams.mockResolvedValue(listData);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   test('renders succesfully', () => {
     shallow(
       <_OrganizationTeams
         id={1}
         searchString=""
         location={{ search: '', pathname: '/organizations/1/teams' }}
-        handleHttpError={() => {}}
       />
     );
   });
@@ -45,9 +44,7 @@ describe('<OrganizationTeams />', () => {
       <OrganizationTeams
         id={1}
         searchString=""
-      />, { context: {
-        network: {} }
-      }
+      />
     ).find('OrganizationTeams');
     expect(OrganizationsAPI.readTeams).toHaveBeenCalledWith(1, {
       page: 1,
@@ -61,9 +58,7 @@ describe('<OrganizationTeams />', () => {
       <OrganizationTeams
         id={1}
         searchString=""
-      />, { context: {
-        network: { handleHttpError: () => {} } }
-      }
+      />
     );
 
     await sleep(0);
diff --git a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationAccess.test.jsx.snap b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationAccess.test.jsx.snap
index f520ba2c1e..2439871af1 100644
--- a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationAccess.test.jsx.snap
+++ b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationAccess.test.jsx.snap
@@ -2,7 +2,6 @@
 
 exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
 <OrganizationAccess
-  handleHttpError={[Function]}
   history={"/history/"}
   i18n={"/i18n/"}
   location={
@@ -34,8 +33,228 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
     }
   }
 >
-  <div>
-    Loading...
-  </div>
+  <WithI18n
+    contentError={false}
+    contentLoading={true}
+    itemCount={0}
+    itemName="role"
+    items={Array []}
+    qsConfig={
+      Object {
+        "defaultParams": Object {
+          "order_by": "first_name",
+          "page": 1,
+          "page_size": 5,
+        },
+        "integerFields": Array [
+          "page",
+          "page_size",
+        ],
+        "namespace": "access",
+      }
+    }
+    renderItem={[Function]}
+    renderToolbar={[Function]}
+    toolbarColumns={
+      Array [
+        Object {
+          "isSortable": true,
+          "key": "first_name",
+          "name": "Name",
+        },
+        Object {
+          "isSortable": true,
+          "key": "username",
+          "name": "Username",
+        },
+        Object {
+          "isSortable": true,
+          "key": "last_name",
+          "name": "Last Name",
+        },
+      ]
+    }
+  >
+    <I18n
+      update={true}
+      withHash={true}
+    >
+      <withRouter(PaginatedDataList)
+        contentError={false}
+        contentLoading={true}
+        i18n={"/i18n/"}
+        itemCount={0}
+        itemName="role"
+        items={Array []}
+        qsConfig={
+          Object {
+            "defaultParams": Object {
+              "order_by": "first_name",
+              "page": 1,
+              "page_size": 5,
+            },
+            "integerFields": Array [
+              "page",
+              "page_size",
+            ],
+            "namespace": "access",
+          }
+        }
+        renderItem={[Function]}
+        renderToolbar={[Function]}
+        toolbarColumns={
+          Array [
+            Object {
+              "isSortable": true,
+              "key": "first_name",
+              "name": "Name",
+            },
+            Object {
+              "isSortable": true,
+              "key": "username",
+              "name": "Username",
+            },
+            Object {
+              "isSortable": true,
+              "key": "last_name",
+              "name": "Last Name",
+            },
+          ]
+        }
+      >
+        <Route>
+          <PaginatedDataList
+            contentError={false}
+            contentLoading={true}
+            history={"/history/"}
+            i18n={"/i18n/"}
+            itemCount={0}
+            itemName="role"
+            itemNamePlural=""
+            items={Array []}
+            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",
+              }
+            }
+            renderItem={[Function]}
+            renderToolbar={[Function]}
+            showPageSizeOptions={true}
+            toolbarColumns={
+              Array [
+                Object {
+                  "isSortable": true,
+                  "key": "first_name",
+                  "name": "Name",
+                },
+                Object {
+                  "isSortable": true,
+                  "key": "username",
+                  "name": "Username",
+                },
+                Object {
+                  "isSortable": true,
+                  "key": "last_name",
+                  "name": "Last Name",
+                },
+              ]
+            }
+          >
+            <WithI18n>
+              <I18n
+                update={true}
+                withHash={true}
+              >
+                <ContentLoading
+                  i18n={"/i18n/"}
+                >
+                  <EmptyState
+                    className=""
+                    variant="large"
+                  >
+                    <div
+                      className="pf-c-empty-state pf-m-lg"
+                    >
+                      <EmptyStateBody
+                        className=""
+                      >
+                        <p
+                          className="pf-c-empty-state__body"
+                        >
+                          Loading...
+                        </p>
+                      </EmptyStateBody>
+                    </div>
+                  </EmptyState>
+                </ContentLoading>
+              </I18n>
+            </WithI18n>
+          </PaginatedDataList>
+        </Route>
+      </withRouter(PaginatedDataList)>
+    </I18n>
+  </WithI18n>
+  <_default
+    isOpen={false}
+    onClose={[Function]}
+    title="Error!"
+    variant="danger"
+  >
+    <Modal
+      actions={Array []}
+      ariaDescribedById=""
+      className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+      hideTitle={false}
+      isLarge={false}
+      isOpen={false}
+      isSmall={false}
+      onClose={[Function]}
+      title="Error!"
+      width={null}
+    >
+      <Portal
+        containerInfo={<div />}
+      >
+        <ModalContent
+          actions={Array []}
+          ariaDescribedById=""
+          className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+          hideTitle={false}
+          id="pf-modal-0"
+          isLarge={false}
+          isOpen={false}
+          isSmall={false}
+          onClose={[Function]}
+          title="Error!"
+          width={null}
+        />
+      </Portal>
+    </Modal>
+  </_default>
 </OrganizationAccess>
 `;
diff --git a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
index 56b09fb904..82257e5a6e 100644
--- a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
+++ b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
@@ -2,153 +2,245 @@
 
 exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
 <Wrap>
-  <RootDialogProvider
-    value={Object {}}
+  <WithI18n
+    canToggleNotifications={true}
+    id={1}
   >
-    <Provider
-      value={
-        Object {
-          "handleHttpError": [Function],
-        }
-      }
+    <I18n
+      update={true}
+      withHash={true}
     >
-      <Component
+      <withRouter(OrganizationNotifications)
+        canToggleNotifications={true}
         i18n={"/i18n/"}
-        value={"/config/"}
+        id={1}
       >
-        <Provider
-          handleHttpError={[Function]}
-          i18n={"/i18n/"}
-          value={"/config/"}
-        >
-          <Component
+        <Route>
+          <OrganizationNotifications
             canToggleNotifications={true}
+            history={"/history/"}
+            i18n={"/i18n/"}
             id={1}
+            location={
+              Object {
+                "hash": "",
+                "pathname": "",
+                "search": "",
+                "state": "",
+              }
+            }
+            match={
+              Object {
+                "isExact": false,
+                "params": Object {},
+                "path": "",
+                "url": "",
+              }
+            }
           >
-            <withRouter(OrganizationNotifications)
-              canToggleNotifications={true}
-              handleHttpError={[Function]}
-              id={1}
+            <WithI18n
+              contentError={false}
+              contentLoading={false}
+              itemCount={2}
+              itemName="notification"
+              items={
+                Array [
+                  Object {
+                    "id": 1,
+                    "name": "Notification one",
+                    "notification_type": "email",
+                    "url": "/api/v2/notification_templates/1/",
+                  },
+                  Object {
+                    "id": 2,
+                    "name": "Notification two",
+                    "notification_type": "email",
+                    "url": "/api/v2/notification_templates/2/",
+                  },
+                ]
+              }
+              qsConfig={
+                Object {
+                  "defaultParams": Object {
+                    "order_by": "name",
+                    "page": 1,
+                    "page_size": 5,
+                  },
+                  "integerFields": Array [
+                    "page",
+                    "page_size",
+                  ],
+                  "namespace": "notification",
+                }
+              }
+              renderItem={[Function]}
+              toolbarColumns={
+                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",
+                  },
+                ]
+              }
             >
-              <Route>
-                <OrganizationNotifications
-                  canToggleNotifications={true}
-                  handleHttpError={[Function]}
-                  history={"/history/"}
-                  id={1}
-                  location={
+              <I18n
+                update={true}
+                withHash={true}
+              >
+                <withRouter(PaginatedDataList)
+                  contentError={false}
+                  contentLoading={false}
+                  i18n={"/i18n/"}
+                  itemCount={2}
+                  itemName="notification"
+                  items={
+                    Array [
+                      Object {
+                        "id": 1,
+                        "name": "Notification one",
+                        "notification_type": "email",
+                        "url": "/api/v2/notification_templates/1/",
+                      },
+                      Object {
+                        "id": 2,
+                        "name": "Notification two",
+                        "notification_type": "email",
+                        "url": "/api/v2/notification_templates/2/",
+                      },
+                    ]
+                  }
+                  qsConfig={
                     Object {
-                      "hash": "",
-                      "pathname": "",
-                      "search": "",
-                      "state": "",
+                      "defaultParams": Object {
+                        "order_by": "name",
+                        "page": 1,
+                        "page_size": 5,
+                      },
+                      "integerFields": Array [
+                        "page",
+                        "page_size",
+                      ],
+                      "namespace": "notification",
                     }
                   }
-                  match={
-                    Object {
-                      "isExact": false,
-                      "params": Object {},
-                      "path": "",
-                      "url": "",
-                    }
+                  renderItem={[Function]}
+                  toolbarColumns={
+                    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",
+                      },
+                    ]
                   }
                 >
-                  <WithI18n
-                    itemCount={2}
-                    itemName="notification"
-                    items={
-                      Array [
-                        Object {
-                          "id": 1,
-                          "name": "Notification one",
-                          "notification_type": "email",
-                          "url": "/api/v2/notification_templates/1/",
-                        },
-                        Object {
-                          "id": 2,
-                          "name": "Notification two",
-                          "notification_type": "email",
-                          "url": "/api/v2/notification_templates/2/",
-                        },
-                      ]
-                    }
-                    qsConfig={
-                      Object {
-                        "defaultParams": Object {
-                          "order_by": "name",
-                          "page": 1,
-                          "page_size": 5,
-                        },
-                        "integerFields": Array [
-                          "page",
-                          "page_size",
-                        ],
-                        "namespace": "notification",
-                      }
-                    }
-                    renderItem={[Function]}
-                    toolbarColumns={
-                      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
-                      update={true}
-                      withHash={true}
-                    >
-                      <withRouter(PaginatedDataList)
-                        i18n={"/i18n/"}
-                        itemCount={2}
-                        itemName="notification"
-                        items={
-                          Array [
-                            Object {
-                              "id": 1,
-                              "name": "Notification one",
-                              "notification_type": "email",
-                              "url": "/api/v2/notification_templates/1/",
-                            },
-                            Object {
-                              "id": 2,
-                              "name": "Notification two",
-                              "notification_type": "email",
-                              "url": "/api/v2/notification_templates/2/",
-                            },
-                          ]
-                        }
-                        qsConfig={
+                  <Route>
+                    <PaginatedDataList
+                      contentError={false}
+                      contentLoading={false}
+                      history={"/history/"}
+                      i18n={"/i18n/"}
+                      itemCount={2}
+                      itemName="notification"
+                      itemNamePlural=""
+                      items={
+                        Array [
                           Object {
-                            "defaultParams": Object {
-                              "order_by": "name",
-                              "page": 1,
-                              "page_size": 5,
-                            },
-                            "integerFields": Array [
-                              "page",
-                              "page_size",
-                            ],
-                            "namespace": "notification",
-                          }
+                            "id": 1,
+                            "name": "Notification one",
+                            "notification_type": "email",
+                            "url": "/api/v2/notification_templates/1/",
+                          },
+                          Object {
+                            "id": 2,
+                            "name": "Notification two",
+                            "notification_type": "email",
+                            "url": "/api/v2/notification_templates/2/",
+                          },
+                        ]
+                      }
+                      location={
+                        Object {
+                          "hash": "",
+                          "pathname": "",
+                          "search": "",
+                          "state": "",
                         }
-                        renderItem={[Function]}
-                        toolbarColumns={
+                      }
+                      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",
+                        }
+                      }
+                      renderItem={[Function]}
+                      renderToolbar={[Function]}
+                      showPageSizeOptions={true}
+                      toolbarColumns={
+                        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",
+                          },
+                        ]
+                      }
+                    >
+                      <WithI18n
+                        columns={
                           Array [
                             Object {
                               "isSortable": true,
@@ -169,64 +261,18 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                             },
                           ]
                         }
+                        onSearch={[Function]}
+                        onSort={[Function]}
+                        sortOrder="ascending"
+                        sortedColumnKey="name"
                       >
-                        <Route>
-                          <PaginatedDataList
-                            history={"/history/"}
-                            i18n={"/i18n/"}
-                            itemCount={2}
-                            itemName="notification"
-                            itemNamePlural=""
-                            items={
-                              Array [
-                                Object {
-                                  "id": 1,
-                                  "name": "Notification one",
-                                  "notification_type": "email",
-                                  "url": "/api/v2/notification_templates/1/",
-                                },
-                                Object {
-                                  "id": 2,
-                                  "name": "Notification two",
-                                  "notification_type": "email",
-                                  "url": "/api/v2/notification_templates/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",
-                              }
-                            }
-                            renderItem={[Function]}
-                            renderToolbar={[Function]}
-                            showPageSizeOptions={true}
-                            toolbarColumns={
+                        <I18n
+                          update={true}
+                          withHash={true}
+                        >
+                          <DataListToolbar
+                            additionalControls={Array []}
+                            columns={
                               Array [
                                 Object {
                                   "isSortable": true,
@@ -247,161 +293,135 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                 },
                               ]
                             }
+                            i18n={"/i18n/"}
+                            isAllSelected={false}
+                            isCompact={false}
+                            noLeftMargin={false}
+                            onCompact={null}
+                            onExpand={null}
+                            onSearch={[Function]}
+                            onSelectAll={null}
+                            onSort={[Function]}
+                            showSelectAll={false}
+                            sortOrder="ascending"
+                            sortedColumnKey="name"
                           >
-                            <WithI18n
-                              columns={
-                                Array [
+                            <DataListToolbar__AWXToolbar>
+                              <StyledComponent
+                                forwardedComponent={
                                   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",
-                                  },
-                                ]
-                              }
-                              onSearch={[Function]}
-                              onSort={[Function]}
-                              sortOrder="ascending"
-                              sortedColumnKey="name"
-                            >
-                              <I18n
-                                update={true}
-                                withHash={true}
-                              >
-                                <DataListToolbar
-                                  additionalControls={Array []}
-                                  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",
-                                      },
-                                    ]
+                                    "$$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],
                                   }
-                                  i18n={"/i18n/"}
-                                  isAllSelected={false}
-                                  isCompact={false}
-                                  noLeftMargin={false}
-                                  onCompact={null}
-                                  onExpand={null}
-                                  onSearch={[Function]}
-                                  onSelectAll={null}
-                                  onSort={[Function]}
-                                  showSelectAll={false}
-                                  sortOrder="ascending"
-                                  sortedColumnKey="name"
+                                }
+                                forwardedRef={null}
+                              >
+                                <div
+                                  className="DataListToolbar__AWXToolbar-ajzso8-0 bKIKDr"
                                 >
-                                  <DataListToolbar__AWXToolbar>
+                                  <DataListToolbar__Toolbar
+                                    marginleft={0}
+                                  >
                                     <StyledComponent
                                       forwardedComponent={
                                         Object {
                                           "$$typeof": Symbol(react.forward_ref),
                                           "attrs": Array [],
                                           "componentStyle": ComponentStyle {
-                                            "componentId": "DataListToolbar__AWXToolbar-ajzso8-0",
-                                            "isStatic": true,
-                                            "lastClassName": "bKIKDr",
+                                            "componentId": "DataListToolbar__Toolbar-ajzso8-1",
+                                            "isStatic": false,
+                                            "lastClassName": "exECbH",
                                             "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;",
+                                              "flex-grow:1;margin-left:",
+                                              [Function],
+                                              ";margin-right:20px;",
                                             ],
                                           },
-                                          "displayName": "DataListToolbar__AWXToolbar",
+                                          "displayName": "DataListToolbar__Toolbar",
                                           "foldedComponentIds": Array [],
                                           "render": [Function],
-                                          "styledComponentId": "DataListToolbar__AWXToolbar-ajzso8-0",
-                                          "target": "div",
+                                          "styledComponentId": "DataListToolbar__Toolbar-ajzso8-1",
+                                          "target": [Function],
                                           "toString": [Function],
                                           "warnTooManyClasses": [Function],
                                           "withComponent": [Function],
                                         }
                                       }
                                       forwardedRef={null}
+                                      marginleft={0}
                                     >
-                                      <div
-                                        className="DataListToolbar__AWXToolbar-ajzso8-0 bKIKDr"
+                                      <Toolbar
+                                        className="DataListToolbar__Toolbar-ajzso8-1 exECbH"
+                                        marginleft={0}
                                       >
-                                        <DataListToolbar__Toolbar
+                                        <div
+                                          className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 exECbH"
                                           marginleft={0}
                                         >
-                                          <StyledComponent
-                                            forwardedComponent={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "attrs": Array [],
-                                                "componentStyle": ComponentStyle {
-                                                  "componentId": "DataListToolbar__Toolbar-ajzso8-1",
-                                                  "isStatic": false,
-                                                  "lastClassName": "exECbH",
-                                                  "rules": Array [
-                                                    "flex-grow:1;margin-left:",
-                                                    [Function],
-                                                    ";margin-right:20px;",
-                                                  ],
-                                                },
-                                                "displayName": "DataListToolbar__Toolbar",
-                                                "foldedComponentIds": Array [],
-                                                "render": [Function],
-                                                "styledComponentId": "DataListToolbar__Toolbar-ajzso8-1",
-                                                "target": [Function],
-                                                "toString": [Function],
-                                                "warnTooManyClasses": [Function],
-                                                "withComponent": [Function],
+                                          <DataListToolbar__ColumnLeft>
+                                            <StyledComponent
+                                              forwardedComponent={
+                                                Object {
+                                                  "$$typeof": Symbol(react.forward_ref),
+                                                  "attrs": Array [],
+                                                  "componentStyle": ComponentStyle {
+                                                    "componentId": "DataListToolbar__ColumnLeft-ajzso8-3",
+                                                    "isStatic": true,
+                                                    "lastClassName": "feZLWt",
+                                                    "rules": Array [
+                                                      "display:flex;flex-basis:100%;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;@media screen and (min-width:980px){flex-basis:50%;}",
+                                                    ],
+                                                  },
+                                                  "displayName": "DataListToolbar__ColumnLeft",
+                                                  "foldedComponentIds": Array [],
+                                                  "render": [Function],
+                                                  "styledComponentId": "DataListToolbar__ColumnLeft-ajzso8-3",
+                                                  "target": "div",
+                                                  "toString": [Function],
+                                                  "warnTooManyClasses": [Function],
+                                                  "withComponent": [Function],
+                                                }
                                               }
-                                            }
-                                            forwardedRef={null}
-                                            marginleft={0}
-                                          >
-                                            <Toolbar
-                                              className="DataListToolbar__Toolbar-ajzso8-1 exECbH"
-                                              marginleft={0}
+                                              forwardedRef={null}
                                             >
                                               <div
-                                                className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 exECbH"
-                                                marginleft={0}
+                                                className="DataListToolbar__ColumnLeft-ajzso8-3 feZLWt"
                                               >
-                                                <DataListToolbar__ColumnLeft>
+                                                <Styled(ToolbarItem)>
                                                   <StyledComponent
                                                     forwardedComponent={
                                                       Object {
                                                         "$$typeof": Symbol(react.forward_ref),
                                                         "attrs": Array [],
                                                         "componentStyle": ComponentStyle {
-                                                          "componentId": "DataListToolbar__ColumnLeft-ajzso8-3",
+                                                          "componentId": "sc-bwzfXH",
                                                           "isStatic": true,
-                                                          "lastClassName": "feZLWt",
+                                                          "lastClassName": "iBEPfq",
                                                           "rules": Array [
-                                                            "display:flex;flex-basis:100%;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;@media screen and (min-width:980px){flex-basis:50%;}",
+                                                            "flex-grow: 1;",
                                                           ],
                                                         },
-                                                        "displayName": "DataListToolbar__ColumnLeft",
+                                                        "displayName": "Styled(ToolbarItem)",
                                                         "foldedComponentIds": Array [],
                                                         "render": [Function],
-                                                        "styledComponentId": "DataListToolbar__ColumnLeft-ajzso8-3",
-                                                        "target": "div",
+                                                        "styledComponentId": "sc-bwzfXH",
+                                                        "target": [Function],
                                                         "toString": [Function],
                                                         "warnTooManyClasses": [Function],
                                                         "withComponent": [Function],
@@ -409,710 +429,71 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                     }
                                                     forwardedRef={null}
                                                   >
-                                                    <div
-                                                      className="DataListToolbar__ColumnLeft-ajzso8-3 feZLWt"
+                                                    <ToolbarItem
+                                                      className="sc-bwzfXH iBEPfq"
                                                     >
-                                                      <Styled(ToolbarItem)>
-                                                        <StyledComponent
-                                                          forwardedComponent={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "attrs": Array [],
-                                                              "componentStyle": ComponentStyle {
-                                                                "componentId": "sc-bwzfXH",
-                                                                "isStatic": true,
-                                                                "lastClassName": "iBEPfq",
-                                                                "rules": Array [
-                                                                  "flex-grow: 1;",
-                                                                ],
-                                                              },
-                                                              "displayName": "Styled(ToolbarItem)",
-                                                              "foldedComponentIds": Array [],
-                                                              "render": [Function],
-                                                              "styledComponentId": "sc-bwzfXH",
-                                                              "target": [Function],
-                                                              "toString": [Function],
-                                                              "warnTooManyClasses": [Function],
-                                                              "withComponent": [Function],
-                                                            }
-                                                          }
-                                                          forwardedRef={null}
-                                                        >
-                                                          <ToolbarItem
-                                                            className="sc-bwzfXH iBEPfq"
-                                                          >
-                                                            <div
-                                                              className="pf-l-toolbar__item sc-bwzfXH iBEPfq"
-                                                            >
-                                                              <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",
-                                                                    },
-                                                                  ]
-                                                                }
-                                                                onSearch={[Function]}
-                                                                sortedColumnKey="name"
-                                                              >
-                                                                <I18n
-                                                                  update={true}
-                                                                  withHash={true}
-                                                                >
-                                                                  <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-c-input-group"
-                                                                    >
-                                                                      <Search__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]}
-                                                                        toggle={
-                                                                          <DropdownToggle
-                                                                            className=""
-                                                                            iconComponent={[Function]}
-                                                                            id="awx-search"
-                                                                            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": "Search__Dropdown-sc-1dwuww3-2",
-                                                                                "isStatic": true,
-                                                                                "lastClassName": "kcnywV",
-                                                                                "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",
-                                                                              "foldedComponentIds": Array [],
-                                                                              "render": [Function],
-                                                                              "styledComponentId": "Search__Dropdown-sc-1dwuww3-2",
-                                                                              "target": [Function],
-                                                                              "toString": [Function],
-                                                                              "warnTooManyClasses": [Function],
-                                                                              "withComponent": [Function],
-                                                                            }
-                                                                          }
-                                                                          forwardedRef={null}
-                                                                          isOpen={false}
-                                                                          onSelect={[Function]}
-                                                                          onToggle={[Function]}
-                                                                          toggle={
-                                                                            <DropdownToggle
-                                                                              className=""
-                                                                              iconComponent={[Function]}
-                                                                              id="awx-search"
-                                                                              isActive={false}
-                                                                              isFocused={false}
-                                                                              isHovered={false}
-                                                                              isOpen={false}
-                                                                              isPlain={false}
-                                                                              onToggle={[Function]}
-                                                                              parentRef={null}
-                                                                            >
-                                                                              Name
-                                                                            </DropdownToggle>
-                                                                          }
-                                                                        >
-                                                                          <Dropdown
-                                                                            className="Search__Dropdown-sc-1dwuww3-2 kcnywV"
-                                                                            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"
-                                                                            toggle={
-                                                                              <DropdownToggle
-                                                                                className=""
-                                                                                iconComponent={[Function]}
-                                                                                id="awx-search"
-                                                                                isActive={false}
-                                                                                isFocused={false}
-                                                                                isHovered={false}
-                                                                                isOpen={false}
-                                                                                isPlain={false}
-                                                                                onToggle={[Function]}
-                                                                                parentRef={null}
-                                                                              >
-                                                                                Name
-                                                                              </DropdownToggle>
-                                                                            }
-                                                                          >
-                                                                            <div
-                                                                              className="pf-c-dropdown Search__Dropdown-sc-1dwuww3-2 kcnywV"
-                                                                              onToggle={[Function]}
-                                                                            >
-                                                                              <DropdownToggle
-                                                                                ariaHasPopup={true}
-                                                                                className=""
-                                                                                iconComponent={[Function]}
-                                                                                id="awx-search"
-                                                                                isActive={false}
-                                                                                isFocused={false}
-                                                                                isHovered={false}
-                                                                                isOpen={false}
-                                                                                isPlain={false}
-                                                                                key=".0"
-                                                                                onEnter={[Function]}
-                                                                                onToggle={[Function]}
-                                                                                parentRef={
-                                                                                  <div
-                                                                                    class="pf-c-dropdown Search__Dropdown-sc-1dwuww3-2 kcnywV"
-                                                                                  >
-                                                                                    <button
-                                                                                      aria-expanded="false"
-                                                                                      aria-haspopup="true"
-                                                                                      class="pf-c-dropdown__toggle"
-                                                                                      id="awx-search"
-                                                                                      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-search"
-                                                                                  isActive={false}
-                                                                                  isDisabled={false}
-                                                                                  isFocused={false}
-                                                                                  isHovered={false}
-                                                                                  isOpen={false}
-                                                                                  isPlain={false}
-                                                                                  onEnter={[Function]}
-                                                                                  onToggle={[Function]}
-                                                                                  parentRef={
-                                                                                    <div
-                                                                                      class="pf-c-dropdown Search__Dropdown-sc-1dwuww3-2 kcnywV"
-                                                                                    >
-                                                                                      <button
-                                                                                        aria-expanded="false"
-                                                                                        aria-haspopup="true"
-                                                                                        class="pf-c-dropdown__toggle"
-                                                                                        id="awx-search"
-                                                                                        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-search"
-                                                                                    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>
-                                                                      </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"
-                                                                        onClick={[Function]}
-                                                                        variant="tertiary"
-                                                                      >
-                                                                        <StyledComponent
-                                                                          aria-label="Search"
-                                                                          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]}
-                                                                          variant="tertiary"
-                                                                        >
-                                                                          <Button
-                                                                            aria-label="Search"
-                                                                            className="Search__Button-sc-1dwuww3-1 jtZPEu"
-                                                                            component="button"
-                                                                            isActive={false}
-                                                                            isBlock={false}
-                                                                            isDisabled={false}
-                                                                            isFocus={false}
-                                                                            isHover={false}
-                                                                            isInline={false}
-                                                                            onClick={[Function]}
-                                                                            type="button"
-                                                                            variant="tertiary"
-                                                                          >
-                                                                            <button
-                                                                              aria-disabled={null}
-                                                                              aria-label="Search"
-                                                                              className="pf-c-button pf-m-tertiary Search__Button-sc-1dwuww3-1 jtZPEu"
-                                                                              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={
-                                                                                    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>
-                                                                  </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": "Deoai",
-                                                          "rules": Array [
-                                                            "display:flex;flex-basis:100%;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;@media screen and (min-width:980px){flex-basis:50%;}",
-                                                            "padding:8px 0 10px 0;@media screen and (min-width:980px){margin-left:0;padding:10px 0 8px 0;}",
-                                                          ],
-                                                        },
-                                                        "displayName": "DataListToolbar__ColumnRight",
-                                                        "foldedComponentIds": Array [
-                                                          "DataListToolbar__ColumnLeft-ajzso8-3",
-                                                        ],
-                                                        "render": [Function],
-                                                        "styledComponentId": "DataListToolbar__ColumnRight-ajzso8-4",
-                                                        "target": "div",
-                                                        "toString": [Function],
-                                                        "warnTooManyClasses": [Function],
-                                                        "withComponent": [Function],
-                                                      }
-                                                    }
-                                                    forwardedRef={null}
-                                                  >
-                                                    <div
-                                                      className="DataListToolbar__ColumnLeft-ajzso8-3 DataListToolbar__ColumnRight-ajzso8-4 Deoai"
-                                                    >
-                                                      <ToolbarItem
-                                                        className={null}
+                                                      <div
+                                                        className="pf-l-toolbar__item sc-bwzfXH iBEPfq"
                                                       >
-                                                        <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",
+                                                              },
+                                                            ]
+                                                          }
+                                                          onSearch={[Function]}
+                                                          sortedColumnKey="name"
                                                         >
-                                                          <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}
                                                           >
-                                                            <I18n
-                                                              update={true}
-                                                              withHash={true}
+                                                            <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"
                                                             >
-                                                              <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"
+                                                              <div
+                                                                className="pf-c-input-group"
                                                               >
-                                                                <Sort__Dropdown
+                                                                <Search__Dropdown
                                                                   dropdownItems={
                                                                     Array [
                                                                       <Item
@@ -1138,16 +519,11 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                   isOpen={false}
                                                                   onSelect={[Function]}
                                                                   onToggle={[Function]}
-                                                                  style={
-                                                                    Object {
-                                                                      "marginRight": "20px",
-                                                                    }
-                                                                  }
                                                                   toggle={
                                                                     <DropdownToggle
                                                                       className=""
                                                                       iconComponent={[Function]}
-                                                                      id="awx-sort"
+                                                                      id="awx-search"
                                                                       isActive={false}
                                                                       isFocused={false}
                                                                       isHovered={false}
@@ -1188,17 +564,17 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                         "$$typeof": Symbol(react.forward_ref),
                                                                         "attrs": Array [],
                                                                         "componentStyle": ComponentStyle {
-                                                                          "componentId": "Sort__Dropdown-sc-21g5aw-0",
+                                                                          "componentId": "Search__Dropdown-sc-1dwuww3-2",
                                                                           "isStatic": true,
-                                                                          "lastClassName": "kdSQuN",
+                                                                          "lastClassName": "kcnywV",
                                                                           "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",
+                                                                        "displayName": "Search__Dropdown",
                                                                         "foldedComponentIds": Array [],
                                                                         "render": [Function],
-                                                                        "styledComponentId": "Sort__Dropdown-sc-21g5aw-0",
+                                                                        "styledComponentId": "Search__Dropdown-sc-1dwuww3-2",
                                                                         "target": [Function],
                                                                         "toString": [Function],
                                                                         "warnTooManyClasses": [Function],
@@ -1209,16 +585,11 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                     isOpen={false}
                                                                     onSelect={[Function]}
                                                                     onToggle={[Function]}
-                                                                    style={
-                                                                      Object {
-                                                                        "marginRight": "20px",
-                                                                      }
-                                                                    }
                                                                     toggle={
                                                                       <DropdownToggle
                                                                         className=""
                                                                         iconComponent={[Function]}
-                                                                        id="awx-sort"
+                                                                        id="awx-search"
                                                                         isActive={false}
                                                                         isFocused={false}
                                                                         isHovered={false}
@@ -1232,7 +603,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                     }
                                                                   >
                                                                     <Dropdown
-                                                                      className="Sort__Dropdown-sc-21g5aw-0 kdSQuN"
+                                                                      className="Search__Dropdown-sc-1dwuww3-2 kcnywV"
                                                                       direction="down"
                                                                       dropdownItems={
                                                                         Array [
@@ -1261,16 +632,11 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                       onSelect={[Function]}
                                                                       onToggle={[Function]}
                                                                       position="left"
-                                                                      style={
-                                                                        Object {
-                                                                          "marginRight": "20px",
-                                                                        }
-                                                                      }
                                                                       toggle={
                                                                         <DropdownToggle
                                                                           className=""
                                                                           iconComponent={[Function]}
-                                                                          id="awx-sort"
+                                                                          id="awx-search"
                                                                           isActive={false}
                                                                           isFocused={false}
                                                                           isHovered={false}
@@ -1284,19 +650,14 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                       }
                                                                     >
                                                                       <div
-                                                                        className="pf-c-dropdown Sort__Dropdown-sc-21g5aw-0 kdSQuN"
+                                                                        className="pf-c-dropdown Search__Dropdown-sc-1dwuww3-2 kcnywV"
                                                                         onToggle={[Function]}
-                                                                        style={
-                                                                          Object {
-                                                                            "marginRight": "20px",
-                                                                          }
-                                                                        }
                                                                       >
                                                                         <DropdownToggle
                                                                           ariaHasPopup={true}
                                                                           className=""
                                                                           iconComponent={[Function]}
-                                                                          id="awx-sort"
+                                                                          id="awx-search"
                                                                           isActive={false}
                                                                           isFocused={false}
                                                                           isHovered={false}
@@ -1307,14 +668,13 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                           onToggle={[Function]}
                                                                           parentRef={
                                                                             <div
-                                                                              class="pf-c-dropdown Sort__Dropdown-sc-21g5aw-0 kdSQuN"
-                                                                              style="margin-right: 20px;"
+                                                                              class="pf-c-dropdown Search__Dropdown-sc-1dwuww3-2 kcnywV"
                                                                             >
                                                                               <button
                                                                                 aria-expanded="false"
                                                                                 aria-haspopup="true"
                                                                                 class="pf-c-dropdown__toggle"
-                                                                                id="awx-sort"
+                                                                                id="awx-search"
                                                                                 type="button"
                                                                               >
                                                                                 <span
@@ -1344,7 +704,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                           <Toggle
                                                                             ariaHasPopup={true}
                                                                             className=""
-                                                                            id="awx-sort"
+                                                                            id="awx-search"
                                                                             isActive={false}
                                                                             isDisabled={false}
                                                                             isFocused={false}
@@ -1355,14 +715,13 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                             onToggle={[Function]}
                                                                             parentRef={
                                                                               <div
-                                                                                class="pf-c-dropdown Sort__Dropdown-sc-21g5aw-0 kdSQuN"
-                                                                                style="margin-right: 20px;"
+                                                                                class="pf-c-dropdown Search__Dropdown-sc-1dwuww3-2 kcnywV"
                                                                               >
                                                                                 <button
                                                                                   aria-expanded="false"
                                                                                   aria-haspopup="true"
                                                                                   class="pf-c-dropdown__toggle"
-                                                                                  id="awx-sort"
+                                                                                  id="awx-search"
                                                                                   type="button"
                                                                                 >
                                                                                   <span
@@ -1394,7 +753,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                               aria-haspopup={true}
                                                                               className="pf-c-dropdown__toggle"
                                                                               disabled={false}
-                                                                              id="awx-sort"
+                                                                              id="awx-search"
                                                                               onClick={[Function]}
                                                                               onKeyDown={[Function]}
                                                                               type="button"
@@ -1437,30 +796,110 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                       </div>
                                                                     </Dropdown>
                                                                   </StyledComponent>
-                                                                </Sort__Dropdown>
-                                                                <Styled(Button)
-                                                                  aria-label="Sort"
-                                                                  onClick={[Function]}
-                                                                  variant="plain"
+                                                                </Search__Dropdown>
+                                                                <Search__TextInput
+                                                                  aria-label="Search text input"
+                                                                  onChange={[Function]}
+                                                                  style={
+                                                                    Object {
+                                                                      "height": "30px",
+                                                                    }
+                                                                  }
+                                                                  type="search"
+                                                                  value=""
                                                                 >
                                                                   <StyledComponent
-                                                                    aria-label="Sort"
+                                                                    aria-label="Search text input"
                                                                     forwardedComponent={
                                                                       Object {
                                                                         "$$typeof": Symbol(react.forward_ref),
                                                                         "attrs": Array [],
                                                                         "componentStyle": ComponentStyle {
-                                                                          "componentId": "sc-bdVaJa",
+                                                                          "componentId": "Search__TextInput-sc-1dwuww3-0",
                                                                           "isStatic": true,
-                                                                          "lastClassName": "delFyH",
+                                                                          "lastClassName": "EgkYH",
                                                                           "rules": Array [
-                                                                            "padding: 0;",
+                                                                            "min-height:0px;height:30px;",
                                                                           ],
                                                                         },
-                                                                        "displayName": "Styled(Button)",
+                                                                        "displayName": "Search__TextInput",
                                                                         "foldedComponentIds": Array [],
                                                                         "render": [Function],
-                                                                        "styledComponentId": "sc-bdVaJa",
+                                                                        "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"
+                                                                  onClick={[Function]}
+                                                                  variant="tertiary"
+                                                                >
+                                                                  <StyledComponent
+                                                                    aria-label="Search"
+                                                                    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],
@@ -1469,11 +908,11 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                     }
                                                                     forwardedRef={null}
                                                                     onClick={[Function]}
-                                                                    variant="plain"
+                                                                    variant="tertiary"
                                                                   >
                                                                     <Button
-                                                                      aria-label="Sort"
-                                                                      className="sc-bdVaJa delFyH"
+                                                                      aria-label="Search"
+                                                                      className="Search__Button-sc-1dwuww3-1 jtZPEu"
                                                                       component="button"
                                                                       isActive={false}
                                                                       isBlock={false}
@@ -1483,1089 +922,1741 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                       isInline={false}
                                                                       onClick={[Function]}
                                                                       type="button"
-                                                                      variant="plain"
+                                                                      variant="tertiary"
                                                                     >
                                                                       <button
                                                                         aria-disabled={null}
-                                                                        aria-label="Sort"
-                                                                        className="pf-c-button pf-m-plain sc-bdVaJa delFyH"
+                                                                        aria-label="Search"
+                                                                        className="pf-c-button pf-m-tertiary Search__Button-sc-1dwuww3-1 jtZPEu"
                                                                         disabled={false}
                                                                         onClick={[Function]}
                                                                         tabIndex={null}
                                                                         type="button"
                                                                       >
-                                                                        <Sort__IconWrapper>
-                                                                          <StyledComponent
-                                                                            forwardedComponent={
+                                                                        <SearchIcon
+                                                                          color="currentColor"
+                                                                          size="sm"
+                                                                          title={null}
+                                                                        >
+                                                                          <svg
+                                                                            aria-hidden={true}
+                                                                            aria-labelledby={null}
+                                                                            fill="currentColor"
+                                                                            height="1em"
+                                                                            role="img"
+                                                                            style={
                                                                               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],
+                                                                                "verticalAlign": "-0.125em",
                                                                               }
                                                                             }
-                                                                            forwardedRef={null}
+                                                                            viewBox="0 0 512 512"
+                                                                            width="1em"
                                                                           >
-                                                                            <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>
+                                                                            <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>
-                                                                </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"
-                                                          />
-                                                        </StyledComponent>
-                                                      </DataListToolbar__AdditionalControlsWrapper>
-                                                    </div>
+                                                                </Search__Button>
+                                                              </div>
+                                                            </Search>
+                                                          </I18n>
+                                                        </WithI18n>
+                                                      </div>
+                                                    </ToolbarItem>
                                                   </StyledComponent>
-                                                </DataListToolbar__ColumnRight>
+                                                </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>
-                                            </Toolbar>
-                                          </StyledComponent>
-                                        </DataListToolbar__Toolbar>
-                                      </div>
-                                    </StyledComponent>
-                                  </DataListToolbar__AWXToolbar>
-                                </DataListToolbar>
-                              </I18n>
-                            </WithI18n>
-                            <DataList
-                              aria-label="{0} List"
-                              className=""
-                            >
-                              <ul
-                                aria-label="{0} List"
-                                className="pf-c-data-list"
-                                role="list"
-                              >
-                                <WithI18n
-                                  canToggleNotifications={true}
-                                  detailUrl="/notifications/1"
-                                  errorTurnedOn={false}
-                                  key="1"
-                                  notification={
-                                    Object {
-                                      "id": 1,
-                                      "name": "Notification one",
-                                      "notification_type": "email",
-                                      "url": "/api/v2/notification_templates/1/",
-                                    }
-                                  }
-                                  successTurnedOn={true}
-                                  toggleNotification={[Function]}
-                                >
-                                  <I18n
-                                    update={true}
-                                    withHash={true}
-                                  >
-                                    <NotificationListItem
-                                      canToggleNotifications={true}
-                                      detailUrl="/notifications/1"
-                                      errorTurnedOn={false}
-                                      i18n={"/i18n/"}
-                                      notification={
-                                        Object {
-                                          "id": 1,
-                                          "name": "Notification one",
-                                          "notification_type": "email",
-                                          "url": "/api/v2/notification_templates/1/",
-                                        }
-                                      }
-                                      successTurnedOn={true}
-                                      toggleNotification={[Function]}
-                                    >
-                                      <DataListItem
-                                        aria-labelledby="items-list-item-1"
-                                        className=""
-                                        isExpanded={false}
-                                        key="1"
-                                      >
-                                        <li
-                                          aria-labelledby="items-list-item-1"
-                                          className="pf-c-data-list__item"
-                                        >
-                                          <DataListItemRow
-                                            className=""
-                                            key=".0"
-                                            rowid="items-list-item-1"
-                                          >
-                                            <div
-                                              className="pf-c-data-list__item-row"
+                                            </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": "Deoai",
+                                                    "rules": Array [
+                                                      "display:flex;flex-basis:100%;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;@media screen and (min-width:980px){flex-basis:50%;}",
+                                                      "padding:8px 0 10px 0;@media screen and (min-width:980px){margin-left:0;padding:10px 0 8px 0;}",
+                                                    ],
+                                                  },
+                                                  "displayName": "DataListToolbar__ColumnRight",
+                                                  "foldedComponentIds": Array [
+                                                    "DataListToolbar__ColumnLeft-ajzso8-3",
+                                                  ],
+                                                  "render": [Function],
+                                                  "styledComponentId": "DataListToolbar__ColumnRight-ajzso8-4",
+                                                  "target": "div",
+                                                  "toString": [Function],
+                                                  "warnTooManyClasses": [Function],
+                                                  "withComponent": [Function],
+                                                }
+                                              }
+                                              forwardedRef={null}
                                             >
-                                              <DataListItemCells
-                                                className=""
-                                                dataListCells={
-                                                  Array [
-                                                    <ForwardRef>
-                                                      <ForwardRef
+                                              <div
+                                                className="DataListToolbar__ColumnLeft-ajzso8-3 DataListToolbar__ColumnRight-ajzso8-4 Deoai"
+                                              >
+                                                <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"
+                                                        >
+                                                          <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-bdVaJa",
+                                                                    "isStatic": true,
+                                                                    "lastClassName": "delFyH",
+                                                                    "rules": Array [
+                                                                      "padding: 0;",
+                                                                    ],
+                                                                  },
+                                                                  "displayName": "Styled(Button)",
+                                                                  "foldedComponentIds": Array [],
+                                                                  "render": [Function],
+                                                                  "styledComponentId": "sc-bdVaJa",
+                                                                  "target": [Function],
+                                                                  "toString": [Function],
+                                                                  "warnTooManyClasses": [Function],
+                                                                  "withComponent": [Function],
+                                                                }
+                                                              }
+                                                              forwardedRef={null}
+                                                              onClick={[Function]}
+                                                              variant="plain"
+                                                            >
+                                                              <Button
+                                                                aria-label="Sort"
+                                                                className="sc-bdVaJa delFyH"
+                                                                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-bdVaJa delFyH"
+                                                                  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"
+                                                    />
+                                                  </StyledComponent>
+                                                </DataListToolbar__AdditionalControlsWrapper>
+                                              </div>
+                                            </StyledComponent>
+                                          </DataListToolbar__ColumnRight>
+                                        </div>
+                                      </Toolbar>
+                                    </StyledComponent>
+                                  </DataListToolbar__Toolbar>
+                                </div>
+                              </StyledComponent>
+                            </DataListToolbar__AWXToolbar>
+                          </DataListToolbar>
+                        </I18n>
+                      </WithI18n>
+                      <DataList
+                        aria-label="{itemDisplayName} List"
+                        className=""
+                      >
+                        <ul
+                          aria-label="{itemDisplayName} List"
+                          className="pf-c-data-list"
+                          role="list"
+                        >
+                          <WithI18n
+                            canToggleNotifications={true}
+                            detailUrl="/notifications/1"
+                            errorTurnedOn={false}
+                            key="1"
+                            notification={
+                              Object {
+                                "id": 1,
+                                "name": "Notification one",
+                                "notification_type": "email",
+                                "url": "/api/v2/notification_templates/1/",
+                              }
+                            }
+                            successTurnedOn={true}
+                            toggleNotification={[Function]}
+                          >
+                            <I18n
+                              update={true}
+                              withHash={true}
+                            >
+                              <NotificationListItem
+                                canToggleNotifications={true}
+                                detailUrl="/notifications/1"
+                                errorTurnedOn={false}
+                                i18n={"/i18n/"}
+                                notification={
+                                  Object {
+                                    "id": 1,
+                                    "name": "Notification one",
+                                    "notification_type": "email",
+                                    "url": "/api/v2/notification_templates/1/",
+                                  }
+                                }
+                                successTurnedOn={true}
+                                toggleNotification={[Function]}
+                              >
+                                <DataListItem
+                                  aria-labelledby="items-list-item-1"
+                                  className=""
+                                  isExpanded={false}
+                                  key="1"
+                                >
+                                  <li
+                                    aria-labelledby="items-list-item-1"
+                                    className="pf-c-data-list__item"
+                                  >
+                                    <DataListItemRow
+                                      className=""
+                                      key=".0"
+                                      rowid="items-list-item-1"
+                                    >
+                                      <div
+                                        className="pf-c-data-list__item-row"
+                                      >
+                                        <DataListItemCells
+                                          className=""
+                                          dataListCells={
+                                            Array [
+                                              <ForwardRef>
+                                                <ForwardRef
+                                                  to={
+                                                    Object {
+                                                      "pathname": "/notifications/1",
+                                                    }
+                                                  }
+                                                >
+                                                  <b
+                                                    id="items-list-item-1"
+                                                  >
+                                                    Notification one
+                                                  </b>
+                                                </ForwardRef>
+                                                <ForwardRef
+                                                  isRead={true}
+                                                >
+                                                  email
+                                                </ForwardRef>
+                                              </ForwardRef>,
+                                              <ForwardRef
+                                                righthalf="true"
+                                              >
+                                                <ForwardRef
+                                                  aria-label="Toggle notification success"
+                                                  id="notification-1-success-toggle"
+                                                  isChecked={true}
+                                                  isDisabled={false}
+                                                  label="Successful"
+                                                  onChange={[Function]}
+                                                />
+                                                <ForwardRef
+                                                  aria-label="Toggle notification failure"
+                                                  id="notification-1-error-toggle"
+                                                  isChecked={false}
+                                                  isDisabled={false}
+                                                  label="Failure"
+                                                  onChange={[Function]}
+                                                />
+                                              </ForwardRef>,
+                                            ]
+                                          }
+                                          key=".0"
+                                          rowid="items-list-item-1"
+                                        >
+                                          <div
+                                            className="pf-c-data-list__item-content"
+                                          >
+                                            <NotificationListItem__DataListCell
+                                              key="name"
+                                            >
+                                              <StyledComponent
+                                                forwardedComponent={
+                                                  Object {
+                                                    "$$typeof": Symbol(react.forward_ref),
+                                                    "attrs": Array [],
+                                                    "componentStyle": ComponentStyle {
+                                                      "componentId": "NotificationListItem__DataListCell-j7c411-0",
+                                                      "isStatic": false,
+                                                      "lastClassName": "hoXOpW",
+                                                      "rules": Array [
+                                                        "display:flex;justify-content:",
+                                                        [Function],
+                                                        ";padding-bottom:",
+                                                        [Function],
+                                                        ";@media screen and (min-width:768px){justify-content:",
+                                                        [Function],
+                                                        ";padding-bottom:0;}",
+                                                      ],
+                                                    },
+                                                    "displayName": "NotificationListItem__DataListCell",
+                                                    "foldedComponentIds": Array [],
+                                                    "render": [Function],
+                                                    "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
+                                                    "target": [Function],
+                                                    "toString": [Function],
+                                                    "warnTooManyClasses": [Function],
+                                                    "withComponent": [Function],
+                                                  }
+                                                }
+                                                forwardedRef={null}
+                                              >
+                                                <DataListCell
+                                                  alignRight={false}
+                                                  className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                                                  isFilled={true}
+                                                  isIcon={false}
+                                                  width={1}
+                                                >
+                                                  <div
+                                                    className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                                                  >
+                                                    <Styled(Link)
+                                                      to={
+                                                        Object {
+                                                          "pathname": "/notifications/1",
+                                                        }
+                                                      }
+                                                    >
+                                                      <StyledComponent
+                                                        forwardedComponent={
+                                                          Object {
+                                                            "$$typeof": Symbol(react.forward_ref),
+                                                            "attrs": Array [],
+                                                            "componentStyle": ComponentStyle {
+                                                              "componentId": "sc-bxivhb",
+                                                              "isStatic": true,
+                                                              "lastClassName": "lohjuH",
+                                                              "rules": Array [
+                                                                "margin-right: 1.5em;",
+                                                              ],
+                                                            },
+                                                            "displayName": "Styled(Link)",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "sc-bxivhb",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
                                                         to={
                                                           Object {
                                                             "pathname": "/notifications/1",
                                                           }
                                                         }
                                                       >
-                                                        <b
-                                                          id="items-list-item-1"
+                                                        <Link
+                                                          className="sc-bxivhb lohjuH"
+                                                          replace={false}
+                                                          to={
+                                                            Object {
+                                                              "pathname": "/notifications/1",
+                                                            }
+                                                          }
                                                         >
-                                                          Notification one
-                                                        </b>
-                                                      </ForwardRef>
-                                                      <ForwardRef
+                                                          <a
+                                                            className="sc-bxivhb lohjuH"
+                                                            onClick={[Function]}
+                                                          >
+                                                            <b
+                                                              id="items-list-item-1"
+                                                            >
+                                                              Notification one
+                                                            </b>
+                                                          </a>
+                                                        </Link>
+                                                      </StyledComponent>
+                                                    </Styled(Link)>
+                                                    <Styled(Badge)
+                                                      isRead={true}
+                                                    >
+                                                      <StyledComponent
+                                                        forwardedComponent={
+                                                          Object {
+                                                            "$$typeof": Symbol(react.forward_ref),
+                                                            "attrs": Array [],
+                                                            "componentStyle": ComponentStyle {
+                                                              "componentId": "sc-ifAKCX",
+                                                              "isStatic": true,
+                                                              "lastClassName": "jGZNNo",
+                                                              "rules": Array [
+                                                                "text-transform: capitalize;",
+                                                              ],
+                                                            },
+                                                            "displayName": "Styled(Badge)",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "sc-ifAKCX",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
                                                         isRead={true}
                                                       >
-                                                        email
-                                                      </ForwardRef>
-                                                    </ForwardRef>,
-                                                    <ForwardRef
-                                                      righthalf="true"
+                                                        <Badge
+                                                          className="sc-ifAKCX jGZNNo"
+                                                          isRead={true}
+                                                        >
+                                                          <span
+                                                            className="pf-c-badge pf-m-read sc-ifAKCX jGZNNo"
+                                                          >
+                                                            email
+                                                          </span>
+                                                        </Badge>
+                                                      </StyledComponent>
+                                                    </Styled(Badge)>
+                                                  </div>
+                                                </DataListCell>
+                                              </StyledComponent>
+                                            </NotificationListItem__DataListCell>
+                                            <NotificationListItem__DataListCell
+                                              key="toggles"
+                                              righthalf="true"
+                                            >
+                                              <StyledComponent
+                                                forwardedComponent={
+                                                  Object {
+                                                    "$$typeof": Symbol(react.forward_ref),
+                                                    "attrs": Array [],
+                                                    "componentStyle": ComponentStyle {
+                                                      "componentId": "NotificationListItem__DataListCell-j7c411-0",
+                                                      "isStatic": false,
+                                                      "lastClassName": "hoXOpW",
+                                                      "rules": Array [
+                                                        "display:flex;justify-content:",
+                                                        [Function],
+                                                        ";padding-bottom:",
+                                                        [Function],
+                                                        ";@media screen and (min-width:768px){justify-content:",
+                                                        [Function],
+                                                        ";padding-bottom:0;}",
+                                                      ],
+                                                    },
+                                                    "displayName": "NotificationListItem__DataListCell",
+                                                    "foldedComponentIds": Array [],
+                                                    "render": [Function],
+                                                    "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
+                                                    "target": [Function],
+                                                    "toString": [Function],
+                                                    "warnTooManyClasses": [Function],
+                                                    "withComponent": [Function],
+                                                  }
+                                                }
+                                                forwardedRef={null}
+                                                righthalf="true"
+                                              >
+                                                <DataListCell
+                                                  alignRight={false}
+                                                  className="NotificationListItem__DataListCell-j7c411-0 hoXOpW"
+                                                  isFilled={true}
+                                                  isIcon={false}
+                                                  righthalf="true"
+                                                  width={1}
+                                                >
+                                                  <div
+                                                    className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 hoXOpW"
+                                                    righthalf="true"
+                                                  >
+                                                    <NotificationListItem__Switch
+                                                      aria-label="Toggle notification success"
+                                                      id="notification-1-success-toggle"
+                                                      isChecked={true}
+                                                      isDisabled={false}
+                                                      label="Successful"
+                                                      onChange={[Function]}
                                                     >
-                                                      <ForwardRef
+                                                      <StyledComponent
                                                         aria-label="Toggle notification success"
+                                                        forwardedComponent={
+                                                          Object {
+                                                            "$$typeof": Symbol(react.forward_ref),
+                                                            "attrs": Array [],
+                                                            "componentStyle": ComponentStyle {
+                                                              "componentId": "NotificationListItem__Switch-j7c411-1",
+                                                              "isStatic": true,
+                                                              "lastClassName": "ceuHGn",
+                                                              "rules": Array [
+                                                                "display:flex;flex-wrap:no-wrap;",
+                                                              ],
+                                                            },
+                                                            "displayName": "NotificationListItem__Switch",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "NotificationListItem__Switch-j7c411-1",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
                                                         id="notification-1-success-toggle"
                                                         isChecked={true}
                                                         isDisabled={false}
                                                         label="Successful"
                                                         onChange={[Function]}
-                                                      />
-                                                      <ForwardRef
+                                                      >
+                                                        <Switch
+                                                          aria-label="Toggle notification success"
+                                                          className="NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                                          id="notification-1-success-toggle"
+                                                          isChecked={true}
+                                                          isDisabled={false}
+                                                          label="Successful"
+                                                          onChange={[Function]}
+                                                        >
+                                                          <label
+                                                            className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                                            htmlFor="notification-1-success-toggle"
+                                                          >
+                                                            <input
+                                                              aria-label="Toggle notification success"
+                                                              checked={true}
+                                                              className="pf-c-switch__input"
+                                                              disabled={false}
+                                                              id="notification-1-success-toggle"
+                                                              onChange={[Function]}
+                                                              type="checkbox"
+                                                            />
+                                                            <span
+                                                              className="pf-c-switch__toggle"
+                                                            />
+                                                            <span
+                                                              aria-hidden="true"
+                                                              className="pf-c-switch__label pf-m-on"
+                                                            >
+                                                              Successful
+                                                            </span>
+                                                            <span
+                                                              aria-hidden="true"
+                                                              className="pf-c-switch__label pf-m-off"
+                                                            >
+                                                              Successful
+                                                            </span>
+                                                          </label>
+                                                        </Switch>
+                                                      </StyledComponent>
+                                                    </NotificationListItem__Switch>
+                                                    <NotificationListItem__Switch
+                                                      aria-label="Toggle notification failure"
+                                                      id="notification-1-error-toggle"
+                                                      isChecked={false}
+                                                      isDisabled={false}
+                                                      label="Failure"
+                                                      onChange={[Function]}
+                                                    >
+                                                      <StyledComponent
                                                         aria-label="Toggle notification failure"
+                                                        forwardedComponent={
+                                                          Object {
+                                                            "$$typeof": Symbol(react.forward_ref),
+                                                            "attrs": Array [],
+                                                            "componentStyle": ComponentStyle {
+                                                              "componentId": "NotificationListItem__Switch-j7c411-1",
+                                                              "isStatic": true,
+                                                              "lastClassName": "ceuHGn",
+                                                              "rules": Array [
+                                                                "display:flex;flex-wrap:no-wrap;",
+                                                              ],
+                                                            },
+                                                            "displayName": "NotificationListItem__Switch",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "NotificationListItem__Switch-j7c411-1",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
                                                         id="notification-1-error-toggle"
                                                         isChecked={false}
                                                         isDisabled={false}
                                                         label="Failure"
                                                         onChange={[Function]}
-                                                      />
-                                                    </ForwardRef>,
-                                                  ]
-                                                }
-                                                key=".0"
-                                                rowid="items-list-item-1"
-                                              >
-                                                <div
-                                                  className="pf-c-data-list__item-content"
-                                                >
-                                                  <NotificationListItem__DataListCell
-                                                    key="name"
-                                                  >
-                                                    <StyledComponent
-                                                      forwardedComponent={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "attrs": Array [],
-                                                          "componentStyle": ComponentStyle {
-                                                            "componentId": "NotificationListItem__DataListCell-j7c411-0",
-                                                            "isStatic": false,
-                                                            "lastClassName": "hoXOpW",
-                                                            "rules": Array [
-                                                              "display:flex;justify-content:",
-                                                              [Function],
-                                                              ";padding-bottom:",
-                                                              [Function],
-                                                              ";@media screen and (min-width:768px){justify-content:",
-                                                              [Function],
-                                                              ";padding-bottom:0;}",
-                                                            ],
-                                                          },
-                                                          "displayName": "NotificationListItem__DataListCell",
-                                                          "foldedComponentIds": Array [],
-                                                          "render": [Function],
-                                                          "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
-                                                          "target": [Function],
-                                                          "toString": [Function],
-                                                          "warnTooManyClasses": [Function],
-                                                          "withComponent": [Function],
-                                                        }
-                                                      }
-                                                      forwardedRef={null}
-                                                    >
-                                                      <DataListCell
-                                                        alignRight={false}
-                                                        className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
-                                                        isFilled={true}
-                                                        isIcon={false}
-                                                        width={1}
                                                       >
-                                                        <div
-                                                          className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                                                        <Switch
+                                                          aria-label="Toggle notification failure"
+                                                          className="NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                                          id="notification-1-error-toggle"
+                                                          isChecked={false}
+                                                          isDisabled={false}
+                                                          label="Failure"
+                                                          onChange={[Function]}
                                                         >
-                                                          <Styled(Link)
-                                                            to={
-                                                              Object {
-                                                                "pathname": "/notifications/1",
-                                                              }
-                                                            }
+                                                          <label
+                                                            className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                                            htmlFor="notification-1-error-toggle"
                                                           >
-                                                            <StyledComponent
-                                                              forwardedComponent={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "attrs": Array [],
-                                                                  "componentStyle": ComponentStyle {
-                                                                    "componentId": "sc-bxivhb",
-                                                                    "isStatic": true,
-                                                                    "lastClassName": "lohjuH",
-                                                                    "rules": Array [
-                                                                      "margin-right: 1.5em;",
-                                                                    ],
-                                                                  },
-                                                                  "displayName": "Styled(Link)",
-                                                                  "foldedComponentIds": Array [],
-                                                                  "render": [Function],
-                                                                  "styledComponentId": "sc-bxivhb",
-                                                                  "target": [Function],
-                                                                  "toString": [Function],
-                                                                  "warnTooManyClasses": [Function],
-                                                                  "withComponent": [Function],
-                                                                }
-                                                              }
-                                                              forwardedRef={null}
-                                                              to={
-                                                                Object {
-                                                                  "pathname": "/notifications/1",
-                                                                }
-                                                              }
-                                                            >
-                                                              <Link
-                                                                className="sc-bxivhb lohjuH"
-                                                                replace={false}
-                                                                to={
-                                                                  Object {
-                                                                    "pathname": "/notifications/1",
-                                                                  }
-                                                                }
-                                                              >
-                                                                <a
-                                                                  className="sc-bxivhb lohjuH"
-                                                                  onClick={[Function]}
-                                                                >
-                                                                  <b
-                                                                    id="items-list-item-1"
-                                                                  >
-                                                                    Notification one
-                                                                  </b>
-                                                                </a>
-                                                              </Link>
-                                                            </StyledComponent>
-                                                          </Styled(Link)>
-                                                          <Styled(Badge)
-                                                            isRead={true}
-                                                          >
-                                                            <StyledComponent
-                                                              forwardedComponent={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "attrs": Array [],
-                                                                  "componentStyle": ComponentStyle {
-                                                                    "componentId": "sc-ifAKCX",
-                                                                    "isStatic": true,
-                                                                    "lastClassName": "jGZNNo",
-                                                                    "rules": Array [
-                                                                      "text-transform: capitalize;",
-                                                                    ],
-                                                                  },
-                                                                  "displayName": "Styled(Badge)",
-                                                                  "foldedComponentIds": Array [],
-                                                                  "render": [Function],
-                                                                  "styledComponentId": "sc-ifAKCX",
-                                                                  "target": [Function],
-                                                                  "toString": [Function],
-                                                                  "warnTooManyClasses": [Function],
-                                                                  "withComponent": [Function],
-                                                                }
-                                                              }
-                                                              forwardedRef={null}
-                                                              isRead={true}
-                                                            >
-                                                              <Badge
-                                                                className="sc-ifAKCX jGZNNo"
-                                                                isRead={true}
-                                                              >
-                                                                <span
-                                                                  className="pf-c-badge pf-m-read sc-ifAKCX jGZNNo"
-                                                                >
-                                                                  email
-                                                                </span>
-                                                              </Badge>
-                                                            </StyledComponent>
-                                                          </Styled(Badge)>
-                                                        </div>
-                                                      </DataListCell>
-                                                    </StyledComponent>
-                                                  </NotificationListItem__DataListCell>
-                                                  <NotificationListItem__DataListCell
-                                                    key="toggles"
-                                                    righthalf="true"
-                                                  >
-                                                    <StyledComponent
-                                                      forwardedComponent={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "attrs": Array [],
-                                                          "componentStyle": ComponentStyle {
-                                                            "componentId": "NotificationListItem__DataListCell-j7c411-0",
-                                                            "isStatic": false,
-                                                            "lastClassName": "hoXOpW",
-                                                            "rules": Array [
-                                                              "display:flex;justify-content:",
-                                                              [Function],
-                                                              ";padding-bottom:",
-                                                              [Function],
-                                                              ";@media screen and (min-width:768px){justify-content:",
-                                                              [Function],
-                                                              ";padding-bottom:0;}",
-                                                            ],
-                                                          },
-                                                          "displayName": "NotificationListItem__DataListCell",
-                                                          "foldedComponentIds": Array [],
-                                                          "render": [Function],
-                                                          "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
-                                                          "target": [Function],
-                                                          "toString": [Function],
-                                                          "warnTooManyClasses": [Function],
-                                                          "withComponent": [Function],
-                                                        }
-                                                      }
-                                                      forwardedRef={null}
-                                                      righthalf="true"
-                                                    >
-                                                      <DataListCell
-                                                        alignRight={false}
-                                                        className="NotificationListItem__DataListCell-j7c411-0 hoXOpW"
-                                                        isFilled={true}
-                                                        isIcon={false}
-                                                        righthalf="true"
-                                                        width={1}
-                                                      >
-                                                        <div
-                                                          className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 hoXOpW"
-                                                          righthalf="true"
-                                                        >
-                                                          <NotificationListItem__Switch
-                                                            aria-label="Toggle notification success"
-                                                            id="notification-1-success-toggle"
-                                                            isChecked={true}
-                                                            isDisabled={false}
-                                                            label="Successful"
-                                                            onChange={[Function]}
-                                                          >
-                                                            <StyledComponent
-                                                              aria-label="Toggle notification success"
-                                                              forwardedComponent={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "attrs": Array [],
-                                                                  "componentStyle": ComponentStyle {
-                                                                    "componentId": "NotificationListItem__Switch-j7c411-1",
-                                                                    "isStatic": true,
-                                                                    "lastClassName": "ceuHGn",
-                                                                    "rules": Array [
-                                                                      "display:flex;flex-wrap:no-wrap;",
-                                                                    ],
-                                                                  },
-                                                                  "displayName": "NotificationListItem__Switch",
-                                                                  "foldedComponentIds": Array [],
-                                                                  "render": [Function],
-                                                                  "styledComponentId": "NotificationListItem__Switch-j7c411-1",
-                                                                  "target": [Function],
-                                                                  "toString": [Function],
-                                                                  "warnTooManyClasses": [Function],
-                                                                  "withComponent": [Function],
-                                                                }
-                                                              }
-                                                              forwardedRef={null}
-                                                              id="notification-1-success-toggle"
-                                                              isChecked={true}
-                                                              isDisabled={false}
-                                                              label="Successful"
-                                                              onChange={[Function]}
-                                                            >
-                                                              <Switch
-                                                                aria-label="Toggle notification success"
-                                                                className="NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                                id="notification-1-success-toggle"
-                                                                isChecked={true}
-                                                                isDisabled={false}
-                                                                label="Successful"
-                                                                onChange={[Function]}
-                                                              >
-                                                                <label
-                                                                  className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                                  htmlFor="notification-1-success-toggle"
-                                                                >
-                                                                  <input
-                                                                    aria-label="Toggle notification success"
-                                                                    checked={true}
-                                                                    className="pf-c-switch__input"
-                                                                    disabled={false}
-                                                                    id="notification-1-success-toggle"
-                                                                    onChange={[Function]}
-                                                                    type="checkbox"
-                                                                  />
-                                                                  <span
-                                                                    className="pf-c-switch__toggle"
-                                                                  />
-                                                                  <span
-                                                                    aria-hidden="true"
-                                                                    className="pf-c-switch__label pf-m-on"
-                                                                  >
-                                                                    Successful
-                                                                  </span>
-                                                                  <span
-                                                                    aria-hidden="true"
-                                                                    className="pf-c-switch__label pf-m-off"
-                                                                  >
-                                                                    Successful
-                                                                  </span>
-                                                                </label>
-                                                              </Switch>
-                                                            </StyledComponent>
-                                                          </NotificationListItem__Switch>
-                                                          <NotificationListItem__Switch
-                                                            aria-label="Toggle notification failure"
-                                                            id="notification-1-error-toggle"
-                                                            isChecked={false}
-                                                            isDisabled={false}
-                                                            label="Failure"
-                                                            onChange={[Function]}
-                                                          >
-                                                            <StyledComponent
+                                                            <input
                                                               aria-label="Toggle notification failure"
-                                                              forwardedComponent={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "attrs": Array [],
-                                                                  "componentStyle": ComponentStyle {
-                                                                    "componentId": "NotificationListItem__Switch-j7c411-1",
-                                                                    "isStatic": true,
-                                                                    "lastClassName": "ceuHGn",
-                                                                    "rules": Array [
-                                                                      "display:flex;flex-wrap:no-wrap;",
-                                                                    ],
-                                                                  },
-                                                                  "displayName": "NotificationListItem__Switch",
-                                                                  "foldedComponentIds": Array [],
-                                                                  "render": [Function],
-                                                                  "styledComponentId": "NotificationListItem__Switch-j7c411-1",
-                                                                  "target": [Function],
-                                                                  "toString": [Function],
-                                                                  "warnTooManyClasses": [Function],
-                                                                  "withComponent": [Function],
-                                                                }
-                                                              }
-                                                              forwardedRef={null}
+                                                              checked={false}
+                                                              className="pf-c-switch__input"
+                                                              disabled={false}
                                                               id="notification-1-error-toggle"
-                                                              isChecked={false}
-                                                              isDisabled={false}
-                                                              label="Failure"
                                                               onChange={[Function]}
+                                                              type="checkbox"
+                                                            />
+                                                            <span
+                                                              className="pf-c-switch__toggle"
+                                                            />
+                                                            <span
+                                                              aria-hidden="true"
+                                                              className="pf-c-switch__label pf-m-on"
                                                             >
-                                                              <Switch
-                                                                aria-label="Toggle notification failure"
-                                                                className="NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                                id="notification-1-error-toggle"
-                                                                isChecked={false}
-                                                                isDisabled={false}
-                                                                label="Failure"
-                                                                onChange={[Function]}
-                                                              >
-                                                                <label
-                                                                  className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                                  htmlFor="notification-1-error-toggle"
-                                                                >
-                                                                  <input
-                                                                    aria-label="Toggle notification failure"
-                                                                    checked={false}
-                                                                    className="pf-c-switch__input"
-                                                                    disabled={false}
-                                                                    id="notification-1-error-toggle"
-                                                                    onChange={[Function]}
-                                                                    type="checkbox"
-                                                                  />
-                                                                  <span
-                                                                    className="pf-c-switch__toggle"
-                                                                  />
-                                                                  <span
-                                                                    aria-hidden="true"
-                                                                    className="pf-c-switch__label pf-m-on"
-                                                                  >
-                                                                    Failure
-                                                                  </span>
-                                                                  <span
-                                                                    aria-hidden="true"
-                                                                    className="pf-c-switch__label pf-m-off"
-                                                                  >
-                                                                    Failure
-                                                                  </span>
-                                                                </label>
-                                                              </Switch>
-                                                            </StyledComponent>
-                                                          </NotificationListItem__Switch>
-                                                        </div>
-                                                      </DataListCell>
-                                                    </StyledComponent>
-                                                  </NotificationListItem__DataListCell>
-                                                </div>
-                                              </DataListItemCells>
-                                            </div>
-                                          </DataListItemRow>
-                                        </li>
-                                      </DataListItem>
-                                    </NotificationListItem>
-                                  </I18n>
-                                </WithI18n>
-                                <WithI18n
-                                  canToggleNotifications={true}
-                                  detailUrl="/notifications/2"
-                                  errorTurnedOn={true}
-                                  key="2"
-                                  notification={
-                                    Object {
-                                      "id": 2,
-                                      "name": "Notification two",
-                                      "notification_type": "email",
-                                      "url": "/api/v2/notification_templates/2/",
-                                    }
+                                                              Failure
+                                                            </span>
+                                                            <span
+                                                              aria-hidden="true"
+                                                              className="pf-c-switch__label pf-m-off"
+                                                            >
+                                                              Failure
+                                                            </span>
+                                                          </label>
+                                                        </Switch>
+                                                      </StyledComponent>
+                                                    </NotificationListItem__Switch>
+                                                  </div>
+                                                </DataListCell>
+                                              </StyledComponent>
+                                            </NotificationListItem__DataListCell>
+                                          </div>
+                                        </DataListItemCells>
+                                      </div>
+                                    </DataListItemRow>
+                                  </li>
+                                </DataListItem>
+                              </NotificationListItem>
+                            </I18n>
+                          </WithI18n>
+                          <WithI18n
+                            canToggleNotifications={true}
+                            detailUrl="/notifications/2"
+                            errorTurnedOn={true}
+                            key="2"
+                            notification={
+                              Object {
+                                "id": 2,
+                                "name": "Notification two",
+                                "notification_type": "email",
+                                "url": "/api/v2/notification_templates/2/",
+                              }
+                            }
+                            successTurnedOn={false}
+                            toggleNotification={[Function]}
+                          >
+                            <I18n
+                              update={true}
+                              withHash={true}
+                            >
+                              <NotificationListItem
+                                canToggleNotifications={true}
+                                detailUrl="/notifications/2"
+                                errorTurnedOn={true}
+                                i18n={"/i18n/"}
+                                notification={
+                                  Object {
+                                    "id": 2,
+                                    "name": "Notification two",
+                                    "notification_type": "email",
+                                    "url": "/api/v2/notification_templates/2/",
                                   }
-                                  successTurnedOn={false}
-                                  toggleNotification={[Function]}
+                                }
+                                successTurnedOn={false}
+                                toggleNotification={[Function]}
+                              >
+                                <DataListItem
+                                  aria-labelledby="items-list-item-2"
+                                  className=""
+                                  isExpanded={false}
+                                  key="2"
                                 >
-                                  <I18n
-                                    update={true}
-                                    withHash={true}
+                                  <li
+                                    aria-labelledby="items-list-item-2"
+                                    className="pf-c-data-list__item"
                                   >
-                                    <NotificationListItem
-                                      canToggleNotifications={true}
-                                      detailUrl="/notifications/2"
-                                      errorTurnedOn={true}
-                                      i18n={"/i18n/"}
-                                      notification={
-                                        Object {
-                                          "id": 2,
-                                          "name": "Notification two",
-                                          "notification_type": "email",
-                                          "url": "/api/v2/notification_templates/2/",
-                                        }
-                                      }
-                                      successTurnedOn={false}
-                                      toggleNotification={[Function]}
+                                    <DataListItemRow
+                                      className=""
+                                      key=".0"
+                                      rowid="items-list-item-2"
                                     >
-                                      <DataListItem
-                                        aria-labelledby="items-list-item-2"
-                                        className=""
-                                        isExpanded={false}
-                                        key="2"
+                                      <div
+                                        className="pf-c-data-list__item-row"
                                       >
-                                        <li
-                                          aria-labelledby="items-list-item-2"
-                                          className="pf-c-data-list__item"
+                                        <DataListItemCells
+                                          className=""
+                                          dataListCells={
+                                            Array [
+                                              <ForwardRef>
+                                                <ForwardRef
+                                                  to={
+                                                    Object {
+                                                      "pathname": "/notifications/2",
+                                                    }
+                                                  }
+                                                >
+                                                  <b
+                                                    id="items-list-item-2"
+                                                  >
+                                                    Notification two
+                                                  </b>
+                                                </ForwardRef>
+                                                <ForwardRef
+                                                  isRead={true}
+                                                >
+                                                  email
+                                                </ForwardRef>
+                                              </ForwardRef>,
+                                              <ForwardRef
+                                                righthalf="true"
+                                              >
+                                                <ForwardRef
+                                                  aria-label="Toggle notification success"
+                                                  id="notification-2-success-toggle"
+                                                  isChecked={false}
+                                                  isDisabled={false}
+                                                  label="Successful"
+                                                  onChange={[Function]}
+                                                />
+                                                <ForwardRef
+                                                  aria-label="Toggle notification failure"
+                                                  id="notification-2-error-toggle"
+                                                  isChecked={true}
+                                                  isDisabled={false}
+                                                  label="Failure"
+                                                  onChange={[Function]}
+                                                />
+                                              </ForwardRef>,
+                                            ]
+                                          }
+                                          key=".0"
+                                          rowid="items-list-item-2"
                                         >
-                                          <DataListItemRow
-                                            className=""
-                                            key=".0"
-                                            rowid="items-list-item-2"
+                                          <div
+                                            className="pf-c-data-list__item-content"
                                           >
-                                            <div
-                                              className="pf-c-data-list__item-row"
+                                            <NotificationListItem__DataListCell
+                                              key="name"
                                             >
-                                              <DataListItemCells
-                                                className=""
-                                                dataListCells={
-                                                  Array [
-                                                    <ForwardRef>
-                                                      <ForwardRef
+                                              <StyledComponent
+                                                forwardedComponent={
+                                                  Object {
+                                                    "$$typeof": Symbol(react.forward_ref),
+                                                    "attrs": Array [],
+                                                    "componentStyle": ComponentStyle {
+                                                      "componentId": "NotificationListItem__DataListCell-j7c411-0",
+                                                      "isStatic": false,
+                                                      "lastClassName": "hoXOpW",
+                                                      "rules": Array [
+                                                        "display:flex;justify-content:",
+                                                        [Function],
+                                                        ";padding-bottom:",
+                                                        [Function],
+                                                        ";@media screen and (min-width:768px){justify-content:",
+                                                        [Function],
+                                                        ";padding-bottom:0;}",
+                                                      ],
+                                                    },
+                                                    "displayName": "NotificationListItem__DataListCell",
+                                                    "foldedComponentIds": Array [],
+                                                    "render": [Function],
+                                                    "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
+                                                    "target": [Function],
+                                                    "toString": [Function],
+                                                    "warnTooManyClasses": [Function],
+                                                    "withComponent": [Function],
+                                                  }
+                                                }
+                                                forwardedRef={null}
+                                              >
+                                                <DataListCell
+                                                  alignRight={false}
+                                                  className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                                                  isFilled={true}
+                                                  isIcon={false}
+                                                  width={1}
+                                                >
+                                                  <div
+                                                    className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                                                  >
+                                                    <Styled(Link)
+                                                      to={
+                                                        Object {
+                                                          "pathname": "/notifications/2",
+                                                        }
+                                                      }
+                                                    >
+                                                      <StyledComponent
+                                                        forwardedComponent={
+                                                          Object {
+                                                            "$$typeof": Symbol(react.forward_ref),
+                                                            "attrs": Array [],
+                                                            "componentStyle": ComponentStyle {
+                                                              "componentId": "sc-bxivhb",
+                                                              "isStatic": true,
+                                                              "lastClassName": "lohjuH",
+                                                              "rules": Array [
+                                                                "margin-right: 1.5em;",
+                                                              ],
+                                                            },
+                                                            "displayName": "Styled(Link)",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "sc-bxivhb",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
                                                         to={
                                                           Object {
                                                             "pathname": "/notifications/2",
                                                           }
                                                         }
                                                       >
-                                                        <b
-                                                          id="items-list-item-2"
+                                                        <Link
+                                                          className="sc-bxivhb lohjuH"
+                                                          replace={false}
+                                                          to={
+                                                            Object {
+                                                              "pathname": "/notifications/2",
+                                                            }
+                                                          }
                                                         >
-                                                          Notification two
-                                                        </b>
-                                                      </ForwardRef>
-                                                      <ForwardRef
+                                                          <a
+                                                            className="sc-bxivhb lohjuH"
+                                                            onClick={[Function]}
+                                                          >
+                                                            <b
+                                                              id="items-list-item-2"
+                                                            >
+                                                              Notification two
+                                                            </b>
+                                                          </a>
+                                                        </Link>
+                                                      </StyledComponent>
+                                                    </Styled(Link)>
+                                                    <Styled(Badge)
+                                                      isRead={true}
+                                                    >
+                                                      <StyledComponent
+                                                        forwardedComponent={
+                                                          Object {
+                                                            "$$typeof": Symbol(react.forward_ref),
+                                                            "attrs": Array [],
+                                                            "componentStyle": ComponentStyle {
+                                                              "componentId": "sc-ifAKCX",
+                                                              "isStatic": true,
+                                                              "lastClassName": "jGZNNo",
+                                                              "rules": Array [
+                                                                "text-transform: capitalize;",
+                                                              ],
+                                                            },
+                                                            "displayName": "Styled(Badge)",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "sc-ifAKCX",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
                                                         isRead={true}
                                                       >
-                                                        email
-                                                      </ForwardRef>
-                                                    </ForwardRef>,
-                                                    <ForwardRef
-                                                      righthalf="true"
+                                                        <Badge
+                                                          className="sc-ifAKCX jGZNNo"
+                                                          isRead={true}
+                                                        >
+                                                          <span
+                                                            className="pf-c-badge pf-m-read sc-ifAKCX jGZNNo"
+                                                          >
+                                                            email
+                                                          </span>
+                                                        </Badge>
+                                                      </StyledComponent>
+                                                    </Styled(Badge)>
+                                                  </div>
+                                                </DataListCell>
+                                              </StyledComponent>
+                                            </NotificationListItem__DataListCell>
+                                            <NotificationListItem__DataListCell
+                                              key="toggles"
+                                              righthalf="true"
+                                            >
+                                              <StyledComponent
+                                                forwardedComponent={
+                                                  Object {
+                                                    "$$typeof": Symbol(react.forward_ref),
+                                                    "attrs": Array [],
+                                                    "componentStyle": ComponentStyle {
+                                                      "componentId": "NotificationListItem__DataListCell-j7c411-0",
+                                                      "isStatic": false,
+                                                      "lastClassName": "hoXOpW",
+                                                      "rules": Array [
+                                                        "display:flex;justify-content:",
+                                                        [Function],
+                                                        ";padding-bottom:",
+                                                        [Function],
+                                                        ";@media screen and (min-width:768px){justify-content:",
+                                                        [Function],
+                                                        ";padding-bottom:0;}",
+                                                      ],
+                                                    },
+                                                    "displayName": "NotificationListItem__DataListCell",
+                                                    "foldedComponentIds": Array [],
+                                                    "render": [Function],
+                                                    "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
+                                                    "target": [Function],
+                                                    "toString": [Function],
+                                                    "warnTooManyClasses": [Function],
+                                                    "withComponent": [Function],
+                                                  }
+                                                }
+                                                forwardedRef={null}
+                                                righthalf="true"
+                                              >
+                                                <DataListCell
+                                                  alignRight={false}
+                                                  className="NotificationListItem__DataListCell-j7c411-0 hoXOpW"
+                                                  isFilled={true}
+                                                  isIcon={false}
+                                                  righthalf="true"
+                                                  width={1}
+                                                >
+                                                  <div
+                                                    className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 hoXOpW"
+                                                    righthalf="true"
+                                                  >
+                                                    <NotificationListItem__Switch
+                                                      aria-label="Toggle notification success"
+                                                      id="notification-2-success-toggle"
+                                                      isChecked={false}
+                                                      isDisabled={false}
+                                                      label="Successful"
+                                                      onChange={[Function]}
                                                     >
-                                                      <ForwardRef
+                                                      <StyledComponent
                                                         aria-label="Toggle notification success"
+                                                        forwardedComponent={
+                                                          Object {
+                                                            "$$typeof": Symbol(react.forward_ref),
+                                                            "attrs": Array [],
+                                                            "componentStyle": ComponentStyle {
+                                                              "componentId": "NotificationListItem__Switch-j7c411-1",
+                                                              "isStatic": true,
+                                                              "lastClassName": "ceuHGn",
+                                                              "rules": Array [
+                                                                "display:flex;flex-wrap:no-wrap;",
+                                                              ],
+                                                            },
+                                                            "displayName": "NotificationListItem__Switch",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "NotificationListItem__Switch-j7c411-1",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
                                                         id="notification-2-success-toggle"
                                                         isChecked={false}
                                                         isDisabled={false}
                                                         label="Successful"
                                                         onChange={[Function]}
-                                                      />
-                                                      <ForwardRef
+                                                      >
+                                                        <Switch
+                                                          aria-label="Toggle notification success"
+                                                          className="NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                                          id="notification-2-success-toggle"
+                                                          isChecked={false}
+                                                          isDisabled={false}
+                                                          label="Successful"
+                                                          onChange={[Function]}
+                                                        >
+                                                          <label
+                                                            className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                                            htmlFor="notification-2-success-toggle"
+                                                          >
+                                                            <input
+                                                              aria-label="Toggle notification success"
+                                                              checked={false}
+                                                              className="pf-c-switch__input"
+                                                              disabled={false}
+                                                              id="notification-2-success-toggle"
+                                                              onChange={[Function]}
+                                                              type="checkbox"
+                                                            />
+                                                            <span
+                                                              className="pf-c-switch__toggle"
+                                                            />
+                                                            <span
+                                                              aria-hidden="true"
+                                                              className="pf-c-switch__label pf-m-on"
+                                                            >
+                                                              Successful
+                                                            </span>
+                                                            <span
+                                                              aria-hidden="true"
+                                                              className="pf-c-switch__label pf-m-off"
+                                                            >
+                                                              Successful
+                                                            </span>
+                                                          </label>
+                                                        </Switch>
+                                                      </StyledComponent>
+                                                    </NotificationListItem__Switch>
+                                                    <NotificationListItem__Switch
+                                                      aria-label="Toggle notification failure"
+                                                      id="notification-2-error-toggle"
+                                                      isChecked={true}
+                                                      isDisabled={false}
+                                                      label="Failure"
+                                                      onChange={[Function]}
+                                                    >
+                                                      <StyledComponent
                                                         aria-label="Toggle notification failure"
+                                                        forwardedComponent={
+                                                          Object {
+                                                            "$$typeof": Symbol(react.forward_ref),
+                                                            "attrs": Array [],
+                                                            "componentStyle": ComponentStyle {
+                                                              "componentId": "NotificationListItem__Switch-j7c411-1",
+                                                              "isStatic": true,
+                                                              "lastClassName": "ceuHGn",
+                                                              "rules": Array [
+                                                                "display:flex;flex-wrap:no-wrap;",
+                                                              ],
+                                                            },
+                                                            "displayName": "NotificationListItem__Switch",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "NotificationListItem__Switch-j7c411-1",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
                                                         id="notification-2-error-toggle"
                                                         isChecked={true}
                                                         isDisabled={false}
                                                         label="Failure"
                                                         onChange={[Function]}
-                                                      />
-                                                    </ForwardRef>,
-                                                  ]
-                                                }
-                                                key=".0"
-                                                rowid="items-list-item-2"
-                                              >
-                                                <div
-                                                  className="pf-c-data-list__item-content"
-                                                >
-                                                  <NotificationListItem__DataListCell
-                                                    key="name"
-                                                  >
-                                                    <StyledComponent
-                                                      forwardedComponent={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "attrs": Array [],
-                                                          "componentStyle": ComponentStyle {
-                                                            "componentId": "NotificationListItem__DataListCell-j7c411-0",
-                                                            "isStatic": false,
-                                                            "lastClassName": "hoXOpW",
-                                                            "rules": Array [
-                                                              "display:flex;justify-content:",
-                                                              [Function],
-                                                              ";padding-bottom:",
-                                                              [Function],
-                                                              ";@media screen and (min-width:768px){justify-content:",
-                                                              [Function],
-                                                              ";padding-bottom:0;}",
-                                                            ],
-                                                          },
-                                                          "displayName": "NotificationListItem__DataListCell",
-                                                          "foldedComponentIds": Array [],
-                                                          "render": [Function],
-                                                          "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
-                                                          "target": [Function],
-                                                          "toString": [Function],
-                                                          "warnTooManyClasses": [Function],
-                                                          "withComponent": [Function],
-                                                        }
-                                                      }
-                                                      forwardedRef={null}
-                                                    >
-                                                      <DataListCell
-                                                        alignRight={false}
-                                                        className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
-                                                        isFilled={true}
-                                                        isIcon={false}
-                                                        width={1}
                                                       >
-                                                        <div
-                                                          className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                                                        <Switch
+                                                          aria-label="Toggle notification failure"
+                                                          className="NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                                          id="notification-2-error-toggle"
+                                                          isChecked={true}
+                                                          isDisabled={false}
+                                                          label="Failure"
+                                                          onChange={[Function]}
                                                         >
-                                                          <Styled(Link)
-                                                            to={
-                                                              Object {
-                                                                "pathname": "/notifications/2",
-                                                              }
-                                                            }
+                                                          <label
+                                                            className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                                            htmlFor="notification-2-error-toggle"
                                                           >
-                                                            <StyledComponent
-                                                              forwardedComponent={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "attrs": Array [],
-                                                                  "componentStyle": ComponentStyle {
-                                                                    "componentId": "sc-bxivhb",
-                                                                    "isStatic": true,
-                                                                    "lastClassName": "lohjuH",
-                                                                    "rules": Array [
-                                                                      "margin-right: 1.5em;",
-                                                                    ],
-                                                                  },
-                                                                  "displayName": "Styled(Link)",
-                                                                  "foldedComponentIds": Array [],
-                                                                  "render": [Function],
-                                                                  "styledComponentId": "sc-bxivhb",
-                                                                  "target": [Function],
-                                                                  "toString": [Function],
-                                                                  "warnTooManyClasses": [Function],
-                                                                  "withComponent": [Function],
-                                                                }
-                                                              }
-                                                              forwardedRef={null}
-                                                              to={
-                                                                Object {
-                                                                  "pathname": "/notifications/2",
-                                                                }
-                                                              }
-                                                            >
-                                                              <Link
-                                                                className="sc-bxivhb lohjuH"
-                                                                replace={false}
-                                                                to={
-                                                                  Object {
-                                                                    "pathname": "/notifications/2",
-                                                                  }
-                                                                }
-                                                              >
-                                                                <a
-                                                                  className="sc-bxivhb lohjuH"
-                                                                  onClick={[Function]}
-                                                                >
-                                                                  <b
-                                                                    id="items-list-item-2"
-                                                                  >
-                                                                    Notification two
-                                                                  </b>
-                                                                </a>
-                                                              </Link>
-                                                            </StyledComponent>
-                                                          </Styled(Link)>
-                                                          <Styled(Badge)
-                                                            isRead={true}
-                                                          >
-                                                            <StyledComponent
-                                                              forwardedComponent={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "attrs": Array [],
-                                                                  "componentStyle": ComponentStyle {
-                                                                    "componentId": "sc-ifAKCX",
-                                                                    "isStatic": true,
-                                                                    "lastClassName": "jGZNNo",
-                                                                    "rules": Array [
-                                                                      "text-transform: capitalize;",
-                                                                    ],
-                                                                  },
-                                                                  "displayName": "Styled(Badge)",
-                                                                  "foldedComponentIds": Array [],
-                                                                  "render": [Function],
-                                                                  "styledComponentId": "sc-ifAKCX",
-                                                                  "target": [Function],
-                                                                  "toString": [Function],
-                                                                  "warnTooManyClasses": [Function],
-                                                                  "withComponent": [Function],
-                                                                }
-                                                              }
-                                                              forwardedRef={null}
-                                                              isRead={true}
-                                                            >
-                                                              <Badge
-                                                                className="sc-ifAKCX jGZNNo"
-                                                                isRead={true}
-                                                              >
-                                                                <span
-                                                                  className="pf-c-badge pf-m-read sc-ifAKCX jGZNNo"
-                                                                >
-                                                                  email
-                                                                </span>
-                                                              </Badge>
-                                                            </StyledComponent>
-                                                          </Styled(Badge)>
-                                                        </div>
-                                                      </DataListCell>
-                                                    </StyledComponent>
-                                                  </NotificationListItem__DataListCell>
-                                                  <NotificationListItem__DataListCell
-                                                    key="toggles"
-                                                    righthalf="true"
-                                                  >
-                                                    <StyledComponent
-                                                      forwardedComponent={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "attrs": Array [],
-                                                          "componentStyle": ComponentStyle {
-                                                            "componentId": "NotificationListItem__DataListCell-j7c411-0",
-                                                            "isStatic": false,
-                                                            "lastClassName": "hoXOpW",
-                                                            "rules": Array [
-                                                              "display:flex;justify-content:",
-                                                              [Function],
-                                                              ";padding-bottom:",
-                                                              [Function],
-                                                              ";@media screen and (min-width:768px){justify-content:",
-                                                              [Function],
-                                                              ";padding-bottom:0;}",
-                                                            ],
-                                                          },
-                                                          "displayName": "NotificationListItem__DataListCell",
-                                                          "foldedComponentIds": Array [],
-                                                          "render": [Function],
-                                                          "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
-                                                          "target": [Function],
-                                                          "toString": [Function],
-                                                          "warnTooManyClasses": [Function],
-                                                          "withComponent": [Function],
-                                                        }
-                                                      }
-                                                      forwardedRef={null}
-                                                      righthalf="true"
-                                                    >
-                                                      <DataListCell
-                                                        alignRight={false}
-                                                        className="NotificationListItem__DataListCell-j7c411-0 hoXOpW"
-                                                        isFilled={true}
-                                                        isIcon={false}
-                                                        righthalf="true"
-                                                        width={1}
-                                                      >
-                                                        <div
-                                                          className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 hoXOpW"
-                                                          righthalf="true"
-                                                        >
-                                                          <NotificationListItem__Switch
-                                                            aria-label="Toggle notification success"
-                                                            id="notification-2-success-toggle"
-                                                            isChecked={false}
-                                                            isDisabled={false}
-                                                            label="Successful"
-                                                            onChange={[Function]}
-                                                          >
-                                                            <StyledComponent
-                                                              aria-label="Toggle notification success"
-                                                              forwardedComponent={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "attrs": Array [],
-                                                                  "componentStyle": ComponentStyle {
-                                                                    "componentId": "NotificationListItem__Switch-j7c411-1",
-                                                                    "isStatic": true,
-                                                                    "lastClassName": "ceuHGn",
-                                                                    "rules": Array [
-                                                                      "display:flex;flex-wrap:no-wrap;",
-                                                                    ],
-                                                                  },
-                                                                  "displayName": "NotificationListItem__Switch",
-                                                                  "foldedComponentIds": Array [],
-                                                                  "render": [Function],
-                                                                  "styledComponentId": "NotificationListItem__Switch-j7c411-1",
-                                                                  "target": [Function],
-                                                                  "toString": [Function],
-                                                                  "warnTooManyClasses": [Function],
-                                                                  "withComponent": [Function],
-                                                                }
-                                                              }
-                                                              forwardedRef={null}
-                                                              id="notification-2-success-toggle"
-                                                              isChecked={false}
-                                                              isDisabled={false}
-                                                              label="Successful"
-                                                              onChange={[Function]}
-                                                            >
-                                                              <Switch
-                                                                aria-label="Toggle notification success"
-                                                                className="NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                                id="notification-2-success-toggle"
-                                                                isChecked={false}
-                                                                isDisabled={false}
-                                                                label="Successful"
-                                                                onChange={[Function]}
-                                                              >
-                                                                <label
-                                                                  className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                                  htmlFor="notification-2-success-toggle"
-                                                                >
-                                                                  <input
-                                                                    aria-label="Toggle notification success"
-                                                                    checked={false}
-                                                                    className="pf-c-switch__input"
-                                                                    disabled={false}
-                                                                    id="notification-2-success-toggle"
-                                                                    onChange={[Function]}
-                                                                    type="checkbox"
-                                                                  />
-                                                                  <span
-                                                                    className="pf-c-switch__toggle"
-                                                                  />
-                                                                  <span
-                                                                    aria-hidden="true"
-                                                                    className="pf-c-switch__label pf-m-on"
-                                                                  >
-                                                                    Successful
-                                                                  </span>
-                                                                  <span
-                                                                    aria-hidden="true"
-                                                                    className="pf-c-switch__label pf-m-off"
-                                                                  >
-                                                                    Successful
-                                                                  </span>
-                                                                </label>
-                                                              </Switch>
-                                                            </StyledComponent>
-                                                          </NotificationListItem__Switch>
-                                                          <NotificationListItem__Switch
-                                                            aria-label="Toggle notification failure"
-                                                            id="notification-2-error-toggle"
-                                                            isChecked={true}
-                                                            isDisabled={false}
-                                                            label="Failure"
-                                                            onChange={[Function]}
-                                                          >
-                                                            <StyledComponent
+                                                            <input
                                                               aria-label="Toggle notification failure"
-                                                              forwardedComponent={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "attrs": Array [],
-                                                                  "componentStyle": ComponentStyle {
-                                                                    "componentId": "NotificationListItem__Switch-j7c411-1",
-                                                                    "isStatic": true,
-                                                                    "lastClassName": "ceuHGn",
-                                                                    "rules": Array [
-                                                                      "display:flex;flex-wrap:no-wrap;",
-                                                                    ],
-                                                                  },
-                                                                  "displayName": "NotificationListItem__Switch",
-                                                                  "foldedComponentIds": Array [],
-                                                                  "render": [Function],
-                                                                  "styledComponentId": "NotificationListItem__Switch-j7c411-1",
-                                                                  "target": [Function],
-                                                                  "toString": [Function],
-                                                                  "warnTooManyClasses": [Function],
-                                                                  "withComponent": [Function],
-                                                                }
-                                                              }
-                                                              forwardedRef={null}
+                                                              checked={true}
+                                                              className="pf-c-switch__input"
+                                                              disabled={false}
                                                               id="notification-2-error-toggle"
-                                                              isChecked={true}
-                                                              isDisabled={false}
-                                                              label="Failure"
                                                               onChange={[Function]}
+                                                              type="checkbox"
+                                                            />
+                                                            <span
+                                                              className="pf-c-switch__toggle"
+                                                            />
+                                                            <span
+                                                              aria-hidden="true"
+                                                              className="pf-c-switch__label pf-m-on"
                                                             >
-                                                              <Switch
-                                                                aria-label="Toggle notification failure"
-                                                                className="NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                                id="notification-2-error-toggle"
-                                                                isChecked={true}
-                                                                isDisabled={false}
-                                                                label="Failure"
-                                                                onChange={[Function]}
-                                                              >
-                                                                <label
-                                                                  className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
-                                                                  htmlFor="notification-2-error-toggle"
-                                                                >
-                                                                  <input
-                                                                    aria-label="Toggle notification failure"
-                                                                    checked={true}
-                                                                    className="pf-c-switch__input"
-                                                                    disabled={false}
-                                                                    id="notification-2-error-toggle"
-                                                                    onChange={[Function]}
-                                                                    type="checkbox"
-                                                                  />
-                                                                  <span
-                                                                    className="pf-c-switch__toggle"
-                                                                  />
-                                                                  <span
-                                                                    aria-hidden="true"
-                                                                    className="pf-c-switch__label pf-m-on"
-                                                                  >
-                                                                    Failure
-                                                                  </span>
-                                                                  <span
-                                                                    aria-hidden="true"
-                                                                    className="pf-c-switch__label pf-m-off"
-                                                                  >
-                                                                    Failure
-                                                                  </span>
-                                                                </label>
-                                                              </Switch>
-                                                            </StyledComponent>
-                                                          </NotificationListItem__Switch>
-                                                        </div>
-                                                      </DataListCell>
-                                                    </StyledComponent>
-                                                  </NotificationListItem__DataListCell>
-                                                </div>
-                                              </DataListItemCells>
-                                            </div>
-                                          </DataListItemRow>
-                                        </li>
-                                      </DataListItem>
-                                    </NotificationListItem>
-                                  </I18n>
-                                </WithI18n>
-                              </ul>
-                            </DataList>
-                            <_default
+                                                              Failure
+                                                            </span>
+                                                            <span
+                                                              aria-hidden="true"
+                                                              className="pf-c-switch__label pf-m-off"
+                                                            >
+                                                              Failure
+                                                            </span>
+                                                          </label>
+                                                        </Switch>
+                                                      </StyledComponent>
+                                                    </NotificationListItem__Switch>
+                                                  </div>
+                                                </DataListCell>
+                                              </StyledComponent>
+                                            </NotificationListItem__DataListCell>
+                                          </div>
+                                        </DataListItemCells>
+                                      </div>
+                                    </DataListItemRow>
+                                  </li>
+                                </DataListItem>
+                              </NotificationListItem>
+                            </I18n>
+                          </WithI18n>
+                        </ul>
+                      </DataList>
+                      <_default
+                        itemCount={2}
+                        onPerPageSelect={[Function]}
+                        onSetPage={[Function]}
+                        page={1}
+                        perPage={5}
+                        perPageOptions={
+                          Array [
+                            Object {
+                              "title": "5",
+                              "value": 5,
+                            },
+                            Object {
+                              "title": "10",
+                              "value": 10,
+                            },
+                            Object {
+                              "title": "20",
+                              "value": 20,
+                            },
+                            Object {
+                              "title": "50",
+                              "value": 50,
+                            },
+                          ]
+                        }
+                        variant="bottom"
+                      >
+                        <I18n
+                          update={true}
+                          withHash={true}
+                        >
+                          <Pagination__AWXPagination
+                            dropDirection="up"
+                            itemCount={2}
+                            onPerPageSelect={[Function]}
+                            onSetPage={[Function]}
+                            page={1}
+                            perPage={5}
+                            perPageOptions={
+                              Array [
+                                Object {
+                                  "title": "5",
+                                  "value": 5,
+                                },
+                                Object {
+                                  "title": "10",
+                                  "value": 10,
+                                },
+                                Object {
+                                  "title": "20",
+                                  "value": 20,
+                                },
+                                Object {
+                                  "title": "50",
+                                  "value": 50,
+                                },
+                              ]
+                            }
+                            titles={
+                              Object {
+                                "currPage": "Current page",
+                                "items": "items",
+                                "itemsPerPage": "Items per page",
+                                "optionsToggle": "Select",
+                                "pages": "pages",
+                                "paginationTitle": "Pagination",
+                                "perPageSuffix": "per page",
+                                "toFirstPage": "Go to first page",
+                                "toLastPage": "Go to last page",
+                                "toNextPage": "Go to next page",
+                                "toPreviousPage": "Go to previous page",
+                              }
+                            }
+                            variant="bottom"
+                          >
+                            <StyledComponent
+                              dropDirection="up"
+                              forwardedComponent={
+                                Object {
+                                  "$$typeof": Symbol(react.forward_ref),
+                                  "attrs": Array [],
+                                  "componentStyle": ComponentStyle {
+                                    "componentId": "Pagination__AWXPagination-c2dclb-0",
+                                    "isStatic": false,
+                                    "lastClassName": "dXBcqV",
+                                    "rules": Array [
+                                      [Function],
+                                    ],
+                                  },
+                                  "displayName": "Pagination__AWXPagination",
+                                  "foldedComponentIds": Array [],
+                                  "render": [Function],
+                                  "styledComponentId": "Pagination__AWXPagination-c2dclb-0",
+                                  "target": [Function],
+                                  "toString": [Function],
+                                  "warnTooManyClasses": [Function],
+                                  "withComponent": [Function],
+                                }
+                              }
+                              forwardedRef={null}
                               itemCount={2}
                               onPerPageSelect={[Function]}
                               onSetPage={[Function]}
@@ -2591,85 +2682,87 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                   },
                                 ]
                               }
+                              titles={
+                                Object {
+                                  "currPage": "Current page",
+                                  "items": "items",
+                                  "itemsPerPage": "Items per page",
+                                  "optionsToggle": "Select",
+                                  "pages": "pages",
+                                  "paginationTitle": "Pagination",
+                                  "perPageSuffix": "per page",
+                                  "toFirstPage": "Go to first page",
+                                  "toLastPage": "Go to last page",
+                                  "toNextPage": "Go to next page",
+                                  "toPreviousPage": "Go to previous page",
+                                }
+                              }
                               variant="bottom"
                             >
-                              <I18n
-                                update={true}
-                                withHash={true}
-                              >
-                                <Pagination__AWXPagination
-                                  dropDirection="up"
-                                  itemCount={2}
-                                  onPerPageSelect={[Function]}
-                                  onSetPage={[Function]}
-                                  page={1}
-                                  perPage={5}
-                                  perPageOptions={
-                                    Array [
-                                      Object {
-                                        "title": "5",
-                                        "value": 5,
-                                      },
-                                      Object {
-                                        "title": "10",
-                                        "value": 10,
-                                      },
-                                      Object {
-                                        "title": "20",
-                                        "value": 20,
-                                      },
-                                      Object {
-                                        "title": "50",
-                                        "value": 50,
-                                      },
-                                    ]
-                                  }
-                                  titles={
+                              <Pagination
+                                className="Pagination__AWXPagination-c2dclb-0 dXBcqV"
+                                dropDirection="up"
+                                itemCount={2}
+                                onFirstClick={[Function]}
+                                onLastClick={[Function]}
+                                onNextClick={[Function]}
+                                onPageInput={[Function]}
+                                onPerPageSelect={[Function]}
+                                onPreviousClick={[Function]}
+                                onSetPage={[Function]}
+                                page={1}
+                                perPage={5}
+                                perPageOptions={
+                                  Array [
                                     Object {
-                                      "currPage": "Current page",
-                                      "items": "items",
-                                      "itemsPerPage": "Items per page",
-                                      "optionsToggle": "Select",
-                                      "pages": "pages",
-                                      "paginationTitle": "Pagination",
-                                      "perPageSuffix": "per page",
-                                      "toFirstPage": "Go to first page",
-                                      "toLastPage": "Go to last page",
-                                      "toNextPage": "Go to next page",
-                                      "toPreviousPage": "Go to previous page",
-                                    }
+                                      "title": "5",
+                                      "value": 5,
+                                    },
+                                    Object {
+                                      "title": "10",
+                                      "value": 10,
+                                    },
+                                    Object {
+                                      "title": "20",
+                                      "value": 20,
+                                    },
+                                    Object {
+                                      "title": "50",
+                                      "value": 50,
+                                    },
+                                  ]
+                                }
+                                titles={
+                                  Object {
+                                    "currPage": "Current page",
+                                    "items": "items",
+                                    "itemsPerPage": "Items per page",
+                                    "optionsToggle": "Select",
+                                    "pages": "pages",
+                                    "paginationTitle": "Pagination",
+                                    "perPageSuffix": "per page",
+                                    "toFirstPage": "Go to first page",
+                                    "toLastPage": "Go to last page",
+                                    "toNextPage": "Go to next page",
+                                    "toPreviousPage": "Go to previous page",
                                   }
-                                  variant="bottom"
+                                }
+                                toggleTemplate={[Function]}
+                                variant="bottom"
+                                widgetId="pagination-options-menu"
+                              >
+                                <div
+                                  className="pf-c-pagination pf-m-footer Pagination__AWXPagination-c2dclb-0 dXBcqV"
                                 >
-                                  <StyledComponent
+                                  <PaginationOptionsMenu
                                     dropDirection="up"
-                                    forwardedComponent={
-                                      Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "attrs": Array [],
-                                        "componentStyle": ComponentStyle {
-                                          "componentId": "Pagination__AWXPagination-c2dclb-0",
-                                          "isStatic": false,
-                                          "lastClassName": "dXBcqV",
-                                          "rules": Array [
-                                            [Function],
-                                          ],
-                                        },
-                                        "displayName": "Pagination__AWXPagination",
-                                        "foldedComponentIds": Array [],
-                                        "render": [Function],
-                                        "styledComponentId": "Pagination__AWXPagination-c2dclb-0",
-                                        "target": [Function],
-                                        "toString": [Function],
-                                        "warnTooManyClasses": [Function],
-                                        "withComponent": [Function],
-                                      }
-                                    }
-                                    forwardedRef={null}
+                                    firstIndex={1}
                                     itemCount={2}
+                                    itemsPerPageTitle="Items per page"
+                                    itemsTitle="items"
+                                    lastIndex={2}
                                     onPerPageSelect={[Function]}
-                                    onSetPage={[Function]}
-                                    page={1}
+                                    optionsToggle="Select"
                                     perPage={5}
                                     perPageOptions={
                                       Array [
@@ -2691,625 +2784,557 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                         },
                                       ]
                                     }
-                                    titles={
-                                      Object {
-                                        "currPage": "Current page",
-                                        "items": "items",
-                                        "itemsPerPage": "Items per page",
-                                        "optionsToggle": "Select",
-                                        "pages": "pages",
-                                        "paginationTitle": "Pagination",
-                                        "perPageSuffix": "per page",
-                                        "toFirstPage": "Go to first page",
-                                        "toLastPage": "Go to last page",
-                                        "toNextPage": "Go to next page",
-                                        "toPreviousPage": "Go to previous page",
-                                      }
-                                    }
-                                    variant="bottom"
+                                    perPageSuffix="per page"
+                                    toggleTemplate={[Function]}
+                                    widgetId="pagination-options-menu"
                                   >
-                                    <Pagination
-                                      className="Pagination__AWXPagination-c2dclb-0 dXBcqV"
-                                      dropDirection="up"
-                                      itemCount={2}
-                                      onFirstClick={[Function]}
-                                      onLastClick={[Function]}
-                                      onNextClick={[Function]}
-                                      onPageInput={[Function]}
-                                      onPerPageSelect={[Function]}
-                                      onPreviousClick={[Function]}
-                                      onSetPage={[Function]}
-                                      page={1}
-                                      perPage={5}
-                                      perPageOptions={
-                                        Array [
-                                          Object {
-                                            "title": "5",
-                                            "value": 5,
-                                          },
-                                          Object {
-                                            "title": "10",
-                                            "value": 10,
-                                          },
-                                          Object {
-                                            "title": "20",
-                                            "value": 20,
-                                          },
-                                          Object {
-                                            "title": "50",
-                                            "value": 50,
-                                          },
-                                        ]
-                                      }
-                                      titles={
-                                        Object {
-                                          "currPage": "Current page",
-                                          "items": "items",
-                                          "itemsPerPage": "Items per page",
-                                          "optionsToggle": "Select",
-                                          "pages": "pages",
-                                          "paginationTitle": "Pagination",
-                                          "perPageSuffix": "per page",
-                                          "toFirstPage": "Go to first page",
-                                          "toLastPage": "Go to last page",
-                                          "toNextPage": "Go to next page",
-                                          "toPreviousPage": "Go to previous page",
-                                        }
-                                      }
-                                      toggleTemplate={[Function]}
-                                      variant="bottom"
-                                      widgetId="pagination-options-menu"
+                                    <div
+                                      className="pf-c-options-menu"
                                     >
-                                      <div
-                                        className="pf-c-pagination pf-m-footer Pagination__AWXPagination-c2dclb-0 dXBcqV"
+                                      <span
+                                        hidden={true}
+                                        id="pagination-options-menu-label"
                                       >
-                                        <PaginationOptionsMenu
-                                          dropDirection="up"
-                                          firstIndex={1}
-                                          itemCount={2}
-                                          itemsPerPageTitle="Items per page"
-                                          itemsTitle="items"
-                                          lastIndex={2}
-                                          onPerPageSelect={[Function]}
-                                          optionsToggle="Select"
-                                          perPage={5}
-                                          perPageOptions={
-                                            Array [
-                                              Object {
-                                                "title": "5",
-                                                "value": 5,
-                                              },
-                                              Object {
-                                                "title": "10",
-                                                "value": 10,
-                                              },
-                                              Object {
-                                                "title": "20",
-                                                "value": 20,
-                                              },
-                                              Object {
-                                                "title": "50",
-                                                "value": 50,
-                                              },
-                                            ]
-                                          }
-                                          perPageSuffix="per page"
-                                          toggleTemplate={[Function]}
-                                          widgetId="pagination-options-menu"
-                                        >
-                                          <div
-                                            className="pf-c-options-menu"
-                                          >
-                                            <span
-                                              hidden={true}
-                                              id="pagination-options-menu-label"
-                                            >
-                                              Items per page
-                                              :
-                                            </span>
-                                            <Dropdown
-                                              className=""
-                                              direction="up"
-                                              dropdownItems={
-                                                Array [
-                                                  <Item
-                                                    className="pf-c-options-menu__menu-item pf-m-selected"
-                                                    component="button"
-                                                    data-action="per-page-5"
-                                                    href="#"
-                                                    isDisabled={false}
-                                                    isHovered={false}
-                                                    onClick={[Function]}
-                                                  >
-                                                    5
-                                                    <span
-                                                      className="pf-c-pagination__menu-text"
-                                                    >
-                                                       per page
-                                                    </span>
-                                                    <i
-                                                      className="pf-c-options-menu__menu-item-icon"
-                                                    >
-                                                      <CheckIcon
-                                                        color="currentColor"
-                                                        size="sm"
-                                                        title={null}
-                                                      />
-                                                    </i>
-                                                  </Item>,
-                                                  <Item
-                                                    className="pf-c-options-menu__menu-item"
-                                                    component="button"
-                                                    data-action="per-page-10"
-                                                    href="#"
-                                                    isDisabled={false}
-                                                    isHovered={false}
-                                                    onClick={[Function]}
-                                                  >
-                                                    10
-                                                    <span
-                                                      className="pf-c-pagination__menu-text"
-                                                    >
-                                                       per page
-                                                    </span>
-                                                  </Item>,
-                                                  <Item
-                                                    className="pf-c-options-menu__menu-item"
-                                                    component="button"
-                                                    data-action="per-page-20"
-                                                    href="#"
-                                                    isDisabled={false}
-                                                    isHovered={false}
-                                                    onClick={[Function]}
-                                                  >
-                                                    20
-                                                    <span
-                                                      className="pf-c-pagination__menu-text"
-                                                    >
-                                                       per page
-                                                    </span>
-                                                  </Item>,
-                                                  <Item
-                                                    className="pf-c-options-menu__menu-item"
-                                                    component="button"
-                                                    data-action="per-page-50"
-                                                    href="#"
-                                                    isDisabled={false}
-                                                    isHovered={false}
-                                                    onClick={[Function]}
-                                                  >
-                                                    50
-                                                    <span
-                                                      className="pf-c-pagination__menu-text"
-                                                    >
-                                                       per page
-                                                    </span>
-                                                  </Item>,
-                                                ]
-                                              }
-                                              isOpen={false}
-                                              isPlain={true}
-                                              onSelect={[Function]}
-                                              position="left"
-                                              toggle={
-                                                <OptionsToggle
-                                                  firstIndex={1}
-                                                  isOpen={false}
-                                                  itemCount={2}
-                                                  itemsTitle="items"
-                                                  lastIndex={2}
-                                                  onToggle={[Function]}
-                                                  optionsToggle="Select"
-                                                  toggleTemplate={[Function]}
-                                                  widgetId="pagination-options-menu"
-                                                />
-                                              }
-                                            >
-                                              <div
-                                                className="pf-c-dropdown pf-m-top"
-                                              >
-                                                <OptionsToggle
-                                                  ariaHasPopup={true}
-                                                  firstIndex={1}
-                                                  id="pf-toggle-id-1"
-                                                  isOpen={false}
-                                                  isPlain={true}
-                                                  itemCount={2}
-                                                  itemsTitle="items"
-                                                  key=".0"
-                                                  lastIndex={2}
-                                                  onEnter={[Function]}
-                                                  onToggle={[Function]}
-                                                  optionsToggle="Select"
-                                                  parentRef={
-                                                    <div
-                                                      class="pf-c-dropdown pf-m-top"
-                                                    >
-                                                      <div
-                                                        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
-                                                      >
-                                                        <span
-                                                          class="pf-c-options-menu__toggle-text"
-                                                        >
-                                                          <strong>
-                                                            1
-                                                             - 
-                                                            2
-                                                          </strong>
-                                                           of 
-                                                          <strong>
-                                                            2
-                                                          </strong>
-                                                           
-                                                          items
-                                                        </span>
-                                                        <button
-                                                          aria-expanded="false"
-                                                          aria-haspopup="listbox"
-                                                          aria-label="Select"
-                                                          aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                                                          class="pf-c-options-menu__toggle-button"
-                                                          id="pagination-options-menu-toggle"
-                                                          type="button"
-                                                        >
-                                                          <svg
-                                                            aria-hidden="true"
-                                                            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>
-                                                    </div>
-                                                  }
-                                                  toggleTemplate={[Function]}
-                                                  widgetId="pagination-options-menu"
-                                                >
-                                                  <div
-                                                    className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
-                                                  >
-                                                    <span
-                                                      className="pf-c-options-menu__toggle-text"
-                                                    >
-                                                      <ToggleTemplate
-                                                        firstIndex={1}
-                                                        itemCount={2}
-                                                        itemsTitle="items"
-                                                        lastIndex={2}
-                                                      >
-                                                        <strong>
-                                                          1
-                                                           - 
-                                                          2
-                                                        </strong>
-                                                         of 
-                                                        <strong>
-                                                          2
-                                                        </strong>
-                                                         
-                                                        items
-                                                      </ToggleTemplate>
-                                                    </span>
-                                                    <button
-                                                      aria-expanded={false}
-                                                      aria-haspopup="listbox"
-                                                      aria-label="Select"
-                                                      aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                                                      className="pf-c-options-menu__toggle-button"
-                                                      id="pagination-options-menu-toggle"
-                                                      onClick={[Function]}
-                                                      type="button"
-                                                    >
-                                                      <CaretDownIcon
-                                                        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 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>
-                                                  </div>
-                                                </OptionsToggle>
-                                              </div>
-                                            </Dropdown>
-                                          </div>
-                                        </PaginationOptionsMenu>
-                                        <Navigation
-                                          currPage="Current page"
-                                          lastPage={1}
-                                          onFirstClick={[Function]}
-                                          onLastClick={[Function]}
-                                          onNextClick={[Function]}
-                                          onPageInput={[Function]}
-                                          onPreviousClick={[Function]}
-                                          onSetPage={[Function]}
-                                          page={1}
-                                          pagesTitle="pages"
-                                          paginationTitle="Pagination"
-                                          toFirstPage="Go to first page"
-                                          toLastPage="Go to last page"
-                                          toNextPage="Go to next page"
-                                          toPreviousPage="Go to previous page"
-                                        >
-                                          <nav
-                                            aria-label="Pagination"
-                                            className="pf-c-pagination__nav"
-                                          >
-                                            <Button
-                                              aria-label="Go to first page"
-                                              className=""
+                                        Items per page
+                                        :
+                                      </span>
+                                      <Dropdown
+                                        className=""
+                                        direction="up"
+                                        dropdownItems={
+                                          Array [
+                                            <Item
+                                              className="pf-c-options-menu__menu-item pf-m-selected"
                                               component="button"
-                                              data-action="first"
-                                              isActive={false}
-                                              isBlock={false}
-                                              isDisabled={true}
-                                              isFocus={false}
-                                              isHover={false}
-                                              isInline={false}
+                                              data-action="per-page-5"
+                                              href="#"
+                                              isDisabled={false}
+                                              isHovered={false}
                                               onClick={[Function]}
-                                              type="button"
-                                              variant="plain"
                                             >
-                                              <button
-                                                aria-disabled={null}
-                                                aria-label="Go to first page"
-                                                className="pf-c-button pf-m-plain pf-m-disabled"
-                                                data-action="first"
-                                                disabled={true}
-                                                onClick={[Function]}
-                                                tabIndex={null}
-                                                type="button"
-                                              >
-                                                <AngleDoubleLeftIcon
-                                                  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="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-                                                      transform=""
-                                                    />
-                                                  </svg>
-                                                </AngleDoubleLeftIcon>
-                                              </button>
-                                            </Button>
-                                            <Button
-                                              aria-label="Go to previous page"
-                                              className=""
-                                              component="button"
-                                              data-action="previous"
-                                              isActive={false}
-                                              isBlock={false}
-                                              isDisabled={true}
-                                              isFocus={false}
-                                              isHover={false}
-                                              isInline={false}
-                                              onClick={[Function]}
-                                              type="button"
-                                              variant="plain"
-                                            >
-                                              <button
-                                                aria-disabled={null}
-                                                aria-label="Go to previous page"
-                                                className="pf-c-button pf-m-plain pf-m-disabled"
-                                                data-action="previous"
-                                                disabled={true}
-                                                onClick={[Function]}
-                                                tabIndex={null}
-                                                type="button"
-                                              >
-                                                <AngleLeftIcon
-                                                  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 256 512"
-                                                    width="1em"
-                                                  >
-                                                    <path
-                                                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                                                      transform=""
-                                                    />
-                                                  </svg>
-                                                </AngleLeftIcon>
-                                              </button>
-                                            </Button>
-                                            <div
-                                              className="pf-c-pagination__nav-page-select"
-                                            >
-                                              <input
-                                                aria-label="Current page"
-                                                className="pf-c-form-control"
-                                                max={1}
-                                                min="1"
-                                                onChange={[Function]}
-                                                type="number"
-                                                value={1}
-                                              />
+                                              5
                                               <span
-                                                aria-hidden="true"
+                                                className="pf-c-pagination__menu-text"
                                               >
-                                                of 
-                                                1
-                                                 
-                                                pages
+                                                 per page
                                               </span>
+                                              <i
+                                                className="pf-c-options-menu__menu-item-icon"
+                                              >
+                                                <CheckIcon
+                                                  color="currentColor"
+                                                  size="sm"
+                                                  title={null}
+                                                />
+                                              </i>
+                                            </Item>,
+                                            <Item
+                                              className="pf-c-options-menu__menu-item"
+                                              component="button"
+                                              data-action="per-page-10"
+                                              href="#"
+                                              isDisabled={false}
+                                              isHovered={false}
+                                              onClick={[Function]}
+                                            >
+                                              10
+                                              <span
+                                                className="pf-c-pagination__menu-text"
+                                              >
+                                                 per page
+                                              </span>
+                                            </Item>,
+                                            <Item
+                                              className="pf-c-options-menu__menu-item"
+                                              component="button"
+                                              data-action="per-page-20"
+                                              href="#"
+                                              isDisabled={false}
+                                              isHovered={false}
+                                              onClick={[Function]}
+                                            >
+                                              20
+                                              <span
+                                                className="pf-c-pagination__menu-text"
+                                              >
+                                                 per page
+                                              </span>
+                                            </Item>,
+                                            <Item
+                                              className="pf-c-options-menu__menu-item"
+                                              component="button"
+                                              data-action="per-page-50"
+                                              href="#"
+                                              isDisabled={false}
+                                              isHovered={false}
+                                              onClick={[Function]}
+                                            >
+                                              50
+                                              <span
+                                                className="pf-c-pagination__menu-text"
+                                              >
+                                                 per page
+                                              </span>
+                                            </Item>,
+                                          ]
+                                        }
+                                        isOpen={false}
+                                        isPlain={true}
+                                        onSelect={[Function]}
+                                        position="left"
+                                        toggle={
+                                          <OptionsToggle
+                                            firstIndex={1}
+                                            isOpen={false}
+                                            itemCount={2}
+                                            itemsTitle="items"
+                                            lastIndex={2}
+                                            onToggle={[Function]}
+                                            optionsToggle="Select"
+                                            toggleTemplate={[Function]}
+                                            widgetId="pagination-options-menu"
+                                          />
+                                        }
+                                      >
+                                        <div
+                                          className="pf-c-dropdown pf-m-top"
+                                        >
+                                          <OptionsToggle
+                                            ariaHasPopup={true}
+                                            firstIndex={1}
+                                            id="pf-toggle-id-1"
+                                            isOpen={false}
+                                            isPlain={true}
+                                            itemCount={2}
+                                            itemsTitle="items"
+                                            key=".0"
+                                            lastIndex={2}
+                                            onEnter={[Function]}
+                                            onToggle={[Function]}
+                                            optionsToggle="Select"
+                                            parentRef={
+                                              <div
+                                                class="pf-c-dropdown pf-m-top"
+                                              >
+                                                <div
+                                                  class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                                                >
+                                                  <span
+                                                    class="pf-c-options-menu__toggle-text"
+                                                  >
+                                                    <strong>
+                                                      1
+                                                       - 
+                                                      2
+                                                    </strong>
+                                                     of 
+                                                    <strong>
+                                                      2
+                                                    </strong>
+                                                     
+                                                    items
+                                                  </span>
+                                                  <button
+                                                    aria-expanded="false"
+                                                    aria-haspopup="listbox"
+                                                    aria-label="Select"
+                                                    aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
+                                                    class="pf-c-options-menu__toggle-button"
+                                                    id="pagination-options-menu-toggle"
+                                                    type="button"
+                                                  >
+                                                    <svg
+                                                      aria-hidden="true"
+                                                      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>
+                                              </div>
+                                            }
+                                            toggleTemplate={[Function]}
+                                            widgetId="pagination-options-menu"
+                                          >
+                                            <div
+                                              className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                                            >
+                                              <span
+                                                className="pf-c-options-menu__toggle-text"
+                                              >
+                                                <ToggleTemplate
+                                                  firstIndex={1}
+                                                  itemCount={2}
+                                                  itemsTitle="items"
+                                                  lastIndex={2}
+                                                >
+                                                  <strong>
+                                                    1
+                                                     - 
+                                                    2
+                                                  </strong>
+                                                   of 
+                                                  <strong>
+                                                    2
+                                                  </strong>
+                                                   
+                                                  items
+                                                </ToggleTemplate>
+                                              </span>
+                                              <button
+                                                aria-expanded={false}
+                                                aria-haspopup="listbox"
+                                                aria-label="Select"
+                                                aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
+                                                className="pf-c-options-menu__toggle-button"
+                                                id="pagination-options-menu-toggle"
+                                                onClick={[Function]}
+                                                type="button"
+                                              >
+                                                <CaretDownIcon
+                                                  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 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>
                                             </div>
-                                            <Button
-                                              aria-label="Go to next page"
-                                              className=""
-                                              component="button"
-                                              data-action="next"
-                                              isActive={false}
-                                              isBlock={false}
-                                              isDisabled={true}
-                                              isFocus={false}
-                                              isHover={false}
-                                              isInline={false}
-                                              onClick={[Function]}
-                                              type="button"
-                                              variant="plain"
+                                          </OptionsToggle>
+                                        </div>
+                                      </Dropdown>
+                                    </div>
+                                  </PaginationOptionsMenu>
+                                  <Navigation
+                                    currPage="Current page"
+                                    lastPage={1}
+                                    onFirstClick={[Function]}
+                                    onLastClick={[Function]}
+                                    onNextClick={[Function]}
+                                    onPageInput={[Function]}
+                                    onPreviousClick={[Function]}
+                                    onSetPage={[Function]}
+                                    page={1}
+                                    pagesTitle="pages"
+                                    paginationTitle="Pagination"
+                                    toFirstPage="Go to first page"
+                                    toLastPage="Go to last page"
+                                    toNextPage="Go to next page"
+                                    toPreviousPage="Go to previous page"
+                                  >
+                                    <nav
+                                      aria-label="Pagination"
+                                      className="pf-c-pagination__nav"
+                                    >
+                                      <Button
+                                        aria-label="Go to first page"
+                                        className=""
+                                        component="button"
+                                        data-action="first"
+                                        isActive={false}
+                                        isBlock={false}
+                                        isDisabled={true}
+                                        isFocus={false}
+                                        isHover={false}
+                                        isInline={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                        variant="plain"
+                                      >
+                                        <button
+                                          aria-disabled={null}
+                                          aria-label="Go to first page"
+                                          className="pf-c-button pf-m-plain pf-m-disabled"
+                                          data-action="first"
+                                          disabled={true}
+                                          onClick={[Function]}
+                                          tabIndex={null}
+                                          type="button"
+                                        >
+                                          <AngleDoubleLeftIcon
+                                            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"
                                             >
-                                              <button
-                                                aria-disabled={null}
-                                                aria-label="Go to next page"
-                                                className="pf-c-button pf-m-plain pf-m-disabled"
-                                                data-action="next"
-                                                disabled={true}
-                                                onClick={[Function]}
-                                                tabIndex={null}
-                                                type="button"
-                                              >
-                                                <AngleRightIcon
-                                                  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 256 512"
-                                                    width="1em"
-                                                  >
-                                                    <path
-                                                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                                                      transform=""
-                                                    />
-                                                  </svg>
-                                                </AngleRightIcon>
-                                              </button>
-                                            </Button>
-                                            <Button
-                                              aria-label="Go to last page"
-                                              className=""
-                                              component="button"
-                                              data-action="last"
-                                              isActive={false}
-                                              isBlock={false}
-                                              isDisabled={true}
-                                              isFocus={false}
-                                              isHover={false}
-                                              isInline={false}
-                                              onClick={[Function]}
-                                              type="button"
-                                              variant="plain"
+                                              <path
+                                                d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+                                                transform=""
+                                              />
+                                            </svg>
+                                          </AngleDoubleLeftIcon>
+                                        </button>
+                                      </Button>
+                                      <Button
+                                        aria-label="Go to previous page"
+                                        className=""
+                                        component="button"
+                                        data-action="previous"
+                                        isActive={false}
+                                        isBlock={false}
+                                        isDisabled={true}
+                                        isFocus={false}
+                                        isHover={false}
+                                        isInline={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                        variant="plain"
+                                      >
+                                        <button
+                                          aria-disabled={null}
+                                          aria-label="Go to previous page"
+                                          className="pf-c-button pf-m-plain pf-m-disabled"
+                                          data-action="previous"
+                                          disabled={true}
+                                          onClick={[Function]}
+                                          tabIndex={null}
+                                          type="button"
+                                        >
+                                          <AngleLeftIcon
+                                            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 256 512"
+                                              width="1em"
                                             >
-                                              <button
-                                                aria-disabled={null}
-                                                aria-label="Go to last page"
-                                                className="pf-c-button pf-m-plain pf-m-disabled"
-                                                data-action="last"
-                                                disabled={true}
-                                                onClick={[Function]}
-                                                tabIndex={null}
-                                                type="button"
-                                              >
-                                                <AngleDoubleRightIcon
-                                                  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="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-                                                      transform=""
-                                                    />
-                                                  </svg>
-                                                </AngleDoubleRightIcon>
-                                              </button>
-                                            </Button>
-                                          </nav>
-                                        </Navigation>
+                                              <path
+                                                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                                                transform=""
+                                              />
+                                            </svg>
+                                          </AngleLeftIcon>
+                                        </button>
+                                      </Button>
+                                      <div
+                                        className="pf-c-pagination__nav-page-select"
+                                      >
+                                        <input
+                                          aria-label="Current page"
+                                          className="pf-c-form-control"
+                                          max={1}
+                                          min="1"
+                                          onChange={[Function]}
+                                          type="number"
+                                          value={1}
+                                        />
+                                        <span
+                                          aria-hidden="true"
+                                        >
+                                          of 
+                                          1
+                                           
+                                          pages
+                                        </span>
                                       </div>
-                                    </Pagination>
-                                  </StyledComponent>
-                                </Pagination__AWXPagination>
-                              </I18n>
-                            </_default>
-                          </PaginatedDataList>
-                        </Route>
-                      </withRouter(PaginatedDataList)>
-                    </I18n>
-                  </WithI18n>
-                </OrganizationNotifications>
-              </Route>
-            </withRouter(OrganizationNotifications)>
-          </Component>
-        </Provider>
-      </Component>
-    </Provider>
-  </RootDialogProvider>
+                                      <Button
+                                        aria-label="Go to next page"
+                                        className=""
+                                        component="button"
+                                        data-action="next"
+                                        isActive={false}
+                                        isBlock={false}
+                                        isDisabled={true}
+                                        isFocus={false}
+                                        isHover={false}
+                                        isInline={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                        variant="plain"
+                                      >
+                                        <button
+                                          aria-disabled={null}
+                                          aria-label="Go to next page"
+                                          className="pf-c-button pf-m-plain pf-m-disabled"
+                                          data-action="next"
+                                          disabled={true}
+                                          onClick={[Function]}
+                                          tabIndex={null}
+                                          type="button"
+                                        >
+                                          <AngleRightIcon
+                                            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 256 512"
+                                              width="1em"
+                                            >
+                                              <path
+                                                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                                                transform=""
+                                              />
+                                            </svg>
+                                          </AngleRightIcon>
+                                        </button>
+                                      </Button>
+                                      <Button
+                                        aria-label="Go to last page"
+                                        className=""
+                                        component="button"
+                                        data-action="last"
+                                        isActive={false}
+                                        isBlock={false}
+                                        isDisabled={true}
+                                        isFocus={false}
+                                        isHover={false}
+                                        isInline={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                        variant="plain"
+                                      >
+                                        <button
+                                          aria-disabled={null}
+                                          aria-label="Go to last page"
+                                          className="pf-c-button pf-m-plain pf-m-disabled"
+                                          data-action="last"
+                                          disabled={true}
+                                          onClick={[Function]}
+                                          tabIndex={null}
+                                          type="button"
+                                        >
+                                          <AngleDoubleRightIcon
+                                            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="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+                                                transform=""
+                                              />
+                                            </svg>
+                                          </AngleDoubleRightIcon>
+                                        </button>
+                                      </Button>
+                                    </nav>
+                                  </Navigation>
+                                </div>
+                              </Pagination>
+                            </StyledComponent>
+                          </Pagination__AWXPagination>
+                        </I18n>
+                      </_default>
+                    </PaginatedDataList>
+                  </Route>
+                </withRouter(PaginatedDataList)>
+              </I18n>
+            </WithI18n>
+            <_default
+              isOpen={false}
+              onClose={[Function]}
+              title="Error!"
+              variant="danger"
+            >
+              <Modal
+                actions={Array []}
+                ariaDescribedById=""
+                className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                hideTitle={false}
+                isLarge={false}
+                isOpen={false}
+                isSmall={false}
+                onClose={[Function]}
+                title="Error!"
+                width={null}
+              >
+                <Portal
+                  containerInfo={<div />}
+                >
+                  <ModalContent
+                    actions={Array []}
+                    ariaDescribedById=""
+                    className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                    hideTitle={false}
+                    id="pf-modal-0"
+                    isLarge={false}
+                    isOpen={false}
+                    isSmall={false}
+                    onClose={[Function]}
+                    title="Error!"
+                    width={null}
+                  />
+                </Portal>
+              </Modal>
+            </_default>
+          </OrganizationNotifications>
+        </Route>
+      </withRouter(OrganizationNotifications)>
+    </I18n>
+  </WithI18n>
 </Wrap>
 `;
diff --git a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx
index 69f55fdbcf..e1f6c9c730 100644
--- a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx
+++ b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx
@@ -1,27 +1,15 @@
 import React from 'react';
 
-import { mountWithContexts } from '../../../enzymeHelpers';
+import { mountWithContexts, waitForElement } from '../../../enzymeHelpers';
 
 import OrganizationAdd from '../../../../src/pages/Organizations/screens/OrganizationAdd';
 import { OrganizationsAPI } from '../../../../src/api';
 
 jest.mock('../../../../src/api');
 
-const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
-
 describe('<OrganizationAdd />', () => {
-  let networkProviderValue;
-
-  beforeEach(() => {
-    networkProviderValue = {
-      handleHttpError: () => {}
-    };
-  });
-
   test('handleSubmit should post to api', () => {
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { network: networkProviderValue }
-    });
+    const wrapper = mountWithContexts(<OrganizationAdd />);
     const updatedOrgData = {
       name: 'new name',
       description: 'new description',
@@ -35,9 +23,10 @@ describe('<OrganizationAdd />', () => {
     const history = {
       push: jest.fn(),
     };
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { router: { history } }
-    });
+    const wrapper = mountWithContexts(
+      <OrganizationAdd />,
+      { context: { router: { history } } }
+    );
     expect(history.push).not.toHaveBeenCalled();
     wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
     expect(history.push).toHaveBeenCalledWith('/organizations');
@@ -47,15 +36,16 @@ describe('<OrganizationAdd />', () => {
     const history = {
       push: jest.fn(),
     };
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { router: { history } }
-    });
+    const wrapper = mountWithContexts(
+      <OrganizationAdd />,
+      { context: { router: { history } } }
+    );
     expect(history.push).not.toHaveBeenCalled();
     wrapper.find('button[aria-label="Close"]').prop('onClick')();
     expect(history.push).toHaveBeenCalledWith('/organizations');
   });
 
-  test('successful form submission should trigger redirect', async () => {
+  test('successful form submission should trigger redirect', async (done) => {
     const history = {
       push: jest.fn(),
     };
@@ -64,7 +54,7 @@ describe('<OrganizationAdd />', () => {
       description: 'new description',
       custom_virtualenv: 'Buzz',
     };
-    OrganizationsAPI.create.mockReturnValueOnce({
+    OrganizationsAPI.create.mockResolvedValueOnce({
       data: {
         id: 5,
         related: {
@@ -73,24 +63,23 @@ describe('<OrganizationAdd />', () => {
         ...orgData,
       }
     });
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { router: { history }, network: networkProviderValue }
-    });
-    wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [], []);
-    await sleep(0);
+    const wrapper = mountWithContexts(
+      <OrganizationAdd />,
+      { context: { router: { history } } }
+    );
+    await waitForElement(wrapper, 'button[aria-label="Save"]');
+    await wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [3], []);
     expect(history.push).toHaveBeenCalledWith('/organizations/5');
+    done();
   });
 
-  test('handleSubmit should post instance groups', async () => {
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { network: networkProviderValue }
-    });
+  test('handleSubmit should post instance groups', async (done) => {
     const orgData = {
       name: 'new name',
       description: 'new description',
       custom_virtualenv: 'Buzz',
     };
-    OrganizationsAPI.create.mockReturnValueOnce({
+    OrganizationsAPI.create.mockResolvedValueOnce({
       data: {
         id: 5,
         related: {
@@ -99,19 +88,22 @@ describe('<OrganizationAdd />', () => {
         ...orgData,
       }
     });
-    wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [3], []);
-    await sleep(0);
+    const wrapper = mountWithContexts(<OrganizationAdd />);
+    await waitForElement(wrapper, 'button[aria-label="Save"]');
+    await wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [3], []);
     expect(OrganizationsAPI.associateInstanceGroup)
       .toHaveBeenCalledWith(5, 3);
+    done();
   });
 
   test('AnsibleSelect component renders if there are virtual environments', () => {
     const config = {
       custom_virtualenvs: ['foo', 'bar'],
     };
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { network: networkProviderValue, config }
-    }).find('AnsibleSelect');
+    const wrapper = mountWithContexts(
+      <OrganizationAdd />,
+      { context: { config } }
+    ).find('AnsibleSelect');
     expect(wrapper.find('FormSelect')).toHaveLength(1);
     expect(wrapper.find('FormSelectOption')).toHaveLength(2);
   });
@@ -120,9 +112,10 @@ describe('<OrganizationAdd />', () => {
     const config = {
       custom_virtualenvs: [],
     };
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { network: networkProviderValue, config }
-    }).find('AnsibleSelect');
+    const wrapper = mountWithContexts(
+      <OrganizationAdd />,
+      { context: { config } }
+    ).find('AnsibleSelect');
     expect(wrapper.find('FormSelect')).toHaveLength(0);
   });
 });
diff --git a/__tests__/pages/Organizations/screens/OrganizationsList.test.jsx b/__tests__/pages/Organizations/screens/OrganizationsList.test.jsx
index c3e38f3a30..90ed0743b4 100644
--- a/__tests__/pages/Organizations/screens/OrganizationsList.test.jsx
+++ b/__tests__/pages/Organizations/screens/OrganizationsList.test.jsx
@@ -59,25 +59,13 @@ const mockAPIOrgsList = {
 
 describe('<OrganizationsList />', () => {
   let wrapper;
-  let api;
-
-  beforeEach(() => {
-    api = {
-      getOrganizations: () => {},
-      destroyOrganization: jest.fn(),
-    };
-  });
 
   test('initially renders succesfully', () => {
-    mountWithContexts(
-      <OrganizationsList />
-    );
+    mountWithContexts(<OrganizationsList />);
   });
 
   test('Puts 1 selected Org in state when handleSelect is called.', () => {
-    wrapper = mountWithContexts(
-      <OrganizationsList />
-    ).find('OrganizationsList');
+    wrapper = mountWithContexts(<OrganizationsList />).find('OrganizationsList');
 
     wrapper.setState({
       organizations: mockAPIOrgsList.data.results,
@@ -91,9 +79,7 @@ describe('<OrganizationsList />', () => {
   });
 
   test('Puts all Orgs in state when handleSelectAll is called.', () => {
-    wrapper = mountWithContexts(
-      <OrganizationsList />
-    );
+    wrapper = mountWithContexts(<OrganizationsList />);
     const list = wrapper.find('OrganizationsList');
     list.setState({
       organizations: mockAPIOrgsList.data.results,
@@ -108,16 +94,7 @@ describe('<OrganizationsList />', () => {
   });
 
   test('api is called to delete Orgs for each org in selected.', () => {
-    const fetchOrganizations = jest.fn(() => wrapper.find('OrganizationsList').setState({
-      organizations: []
-    }));
-    wrapper = mountWithContexts(
-      <OrganizationsList
-        fetchOrganizations={fetchOrganizations}
-      />, {
-        context: { network: { api } }
-      }
-    );
+    wrapper = mountWithContexts(<OrganizationsList />);
     const component = wrapper.find('OrganizationsList');
     wrapper.find('OrganizationsList').setState({
       organizations: mockAPIOrgsList.data.results,
@@ -130,14 +107,10 @@ describe('<OrganizationsList />', () => {
     expect(OrganizationsAPI.destroy).toHaveBeenCalledTimes(component.state('selected').length);
   });
 
-  test('call fetchOrganizations after org(s) have been deleted', () => {
-    const fetchOrgs = jest.spyOn(_OrganizationsList.prototype, 'fetchOrganizations');
+  test('call loadOrganizations after org(s) have been deleted', () => {
+    const fetchOrgs = jest.spyOn(_OrganizationsList.prototype, 'loadOrganizations');
     const event = { preventDefault: () => { } };
-    wrapper = mountWithContexts(
-      <OrganizationsList />, {
-        context: { network: { api } }
-      }
-    );
+    wrapper = mountWithContexts(<OrganizationsList />);
     wrapper.find('OrganizationsList').setState({
       organizations: mockAPIOrgsList.data.results,
       itemCount: 3,
@@ -153,13 +126,9 @@ describe('<OrganizationsList />', () => {
     const history = createMemoryHistory({
       initialEntries: ['organizations?order_by=name&page=1&page_size=5'],
     });
-    const handleError = jest.fn();
     wrapper = mountWithContexts(
-      <OrganizationsList />, {
-        context: {
-          router: { history }, network: { api, handleHttpError: handleError }
-        }
-      }
+      <OrganizationsList />,
+      { context: { router: { history } } }
     );
     await wrapper.setState({
       organizations: mockAPIOrgsList.data.results,
@@ -173,6 +142,5 @@ describe('<OrganizationsList />', () => {
     wrapper.update();
     const component = wrapper.find('OrganizationsList');
     component.instance().handleOrgDelete();
-    expect(handleError).toHaveBeenCalled();
   });
 });
diff --git a/__tests__/pages/Templates/TemplatesList.test.jsx b/__tests__/pages/Templates/TemplatesList.test.jsx
index aa071c29ed..38ed7263f8 100644
--- a/__tests__/pages/Templates/TemplatesList.test.jsx
+++ b/__tests__/pages/Templates/TemplatesList.test.jsx
@@ -1,21 +1,11 @@
 import React from 'react';
-import { mountWithContexts } from '../../enzymeHelpers';
+import { mountWithContexts, waitForElement } from '../../enzymeHelpers';
 import TemplatesList, { _TemplatesList } from '../../../src/pages/Templates/TemplatesList';
+import { UnifiedJobTemplatesAPI } from '../../../src/api';
 
 jest.mock('../../../src/api');
 
-const setDefaultState = (templatesList) => {
-  templatesList.setState({
-    itemCount: mockUnifiedJobTemplatesFromAPI.length,
-    isLoading: false,
-    isInitialized: true,
-    selected: [],
-    templates: mockUnifiedJobTemplatesFromAPI,
-  });
-  templatesList.update();
-};
-
-const mockUnifiedJobTemplatesFromAPI = [{
+const mockTemplates = [{
   id: 1,
   name: 'Template 1',
   url: '/templates/job_template/1',
@@ -47,6 +37,19 @@ const mockUnifiedJobTemplatesFromAPI = [{
 }];
 
 describe('<TemplatesList />', () => {
+  beforeEach(() => {
+    UnifiedJobTemplatesAPI.read.mockResolvedValue({
+      data: {
+        count: mockTemplates.length,
+        results: mockTemplates
+      }
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   test('initially renders succesfully', () => {
     mountWithContexts(
       <TemplatesList
@@ -55,46 +58,33 @@ describe('<TemplatesList />', () => {
       />
     );
   });
+
   test('Templates are retrieved from the api and the components finishes loading', async (done) => {
-    const readTemplates = jest.spyOn(_TemplatesList.prototype, 'readUnifiedJobTemplates');
-
-    const wrapper = mountWithContexts(<TemplatesList />).find('TemplatesList');
-
-    expect(wrapper.state('isLoading')).toBe(true);
-    await expect(readTemplates).toHaveBeenCalled();
-    wrapper.update();
-    expect(wrapper.state('isLoading')).toBe(false);
+    const loadUnifiedJobTemplates = jest.spyOn(_TemplatesList.prototype, 'loadUnifiedJobTemplates');
+    const wrapper = mountWithContexts(<TemplatesList />);
+    await waitForElement(wrapper, 'TemplatesList', (el) => el.state('contentLoading') === true);
+    expect(loadUnifiedJobTemplates).toHaveBeenCalled();
+    await waitForElement(wrapper, 'TemplatesList', (el) => el.state('contentLoading') === false);
     done();
   });
 
-  test('handleSelect is called when a template list item is selected', async () => {
+  test('handleSelect is called when a template list item is selected', async (done) => {
     const handleSelect = jest.spyOn(_TemplatesList.prototype, 'handleSelect');
-
     const wrapper = mountWithContexts(<TemplatesList />);
-
-    const templatesList = wrapper.find('TemplatesList');
-    setDefaultState(templatesList);
-
-    expect(templatesList.state('isLoading')).toBe(false);
+    await waitForElement(wrapper, 'TemplatesList', (el) => el.state('contentLoading') === false);
     wrapper.find('DataListCheck#select-jobTemplate-1').props().onChange();
     expect(handleSelect).toBeCalled();
-    templatesList.update();
-    expect(templatesList.state('selected').length).toBe(1);
+    await waitForElement(wrapper, 'TemplatesList', (el) => el.state('selected').length === 1);
+    done();
   });
 
-  test('handleSelectAll is called when a template list item is selected', async () => {
+  test('handleSelectAll is called when a template list item is selected', async (done) => {
     const handleSelectAll = jest.spyOn(_TemplatesList.prototype, 'handleSelectAll');
-
     const wrapper = mountWithContexts(<TemplatesList />);
-
-    const templatesList = wrapper.find('TemplatesList');
-    setDefaultState(templatesList);
-
-    expect(templatesList.state('isLoading')).toBe(false);
+    await waitForElement(wrapper, 'TemplatesList', (el) => el.state('contentLoading') === false);
     wrapper.find('Checkbox#select-all').props().onChange(true);
     expect(handleSelectAll).toBeCalled();
-    wrapper.update();
-    expect(templatesList.state('selected').length).toEqual(templatesList.state('templates')
-      .length);
+    await waitForElement(wrapper, 'TemplatesList', (el) => el.state('selected').length === 3);
+    done();
   });
 });
diff --git a/src/App.jsx b/src/App.jsx
index 75afb25e96..5e1ff9a28e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,19 +6,16 @@ import {
   Page,
   PageHeader as PFPageHeader,
   PageSidebar,
-  Button
 } from '@patternfly/react-core';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
 import styled from 'styled-components';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
 
-import { RootDialog } from './contexts/RootDialog';
-import { withNetwork } from './contexts/Network';
-import { Config } from './contexts/Config';
-import { RootAPI } from './api';
+import { ConfigAPI, MeAPI, RootAPI } from './api';
+import { ConfigProvider } from './contexts/Config';
 
-import AlertModal from './components/AlertModal';
 import About from './components/About';
+import AlertModal from './components/AlertModal';
 import NavExpandableGroup from './components/NavExpandableGroup';
 import BrandLogo from './components/BrandLogo';
 import PageHeaderToolbar from './components/PageHeaderToolbar';
@@ -46,129 +43,145 @@ class App extends Component {
       && window.innerWidth >= parseInt(global_breakpoint_md.value, 10);
 
     this.state = {
+      ansible_version: null,
+      custom_virtualenvs: null,
+      me: null,
+      version: null,
       isAboutModalOpen: false,
-      isNavOpen
+      isNavOpen,
+      configError: false,
     };
 
-    this.onLogout = this.onLogout.bind(this);
-    this.onAboutModalClose = this.onAboutModalClose.bind(this);
-    this.onAboutModalOpen = this.onAboutModalOpen.bind(this);
-    this.onNavToggle = this.onNavToggle.bind(this);
+    this.handleLogout = this.handleLogout.bind(this);
+    this.handleAboutClose = this.handleAboutClose.bind(this);
+    this.handleAboutOpen = this.handleAboutOpen.bind(this);
+    this.handleNavToggle = this.handleNavToggle.bind(this);
+    this.handleConfigErrorClose = this.handleConfigErrorClose.bind(this);
   }
 
-  async onLogout () {
-    const { handleHttpError } = this.props;
-    try {
-      await RootAPI.logout();
-      window.location.replace('/#/login');
-    } catch (err) {
-      handleHttpError(err);
-    }
+  async componentDidMount () {
+    await this.loadConfig();
   }
 
-  onAboutModalOpen () {
+  // eslint-disable-next-line class-methods-use-this
+  async handleLogout () {
+    await RootAPI.logout();
+    window.location.replace('/#/login');
+  }
+
+  handleAboutOpen () {
     this.setState({ isAboutModalOpen: true });
   }
 
-  onAboutModalClose () {
+  handleAboutClose () {
     this.setState({ isAboutModalOpen: false });
   }
 
-  onNavToggle () {
+  handleNavToggle () {
     this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
   }
 
-  render () {
-    const { isAboutModalOpen, isNavOpen } = this.state;
+  handleConfigErrorClose () {
+    this.setState({ configError: false });
+  }
 
-    const { render, routeGroups = [], navLabel = '', i18n } = this.props;
+  async loadConfig () {
+    try {
+      const [configRes, meRes] = await Promise.all([ConfigAPI.read(), MeAPI.read()]);
+      const { data: { ansible_version, custom_virtualenvs, version } } = configRes;
+      const { data: { results: [me] } } = meRes;
+
+      this.setState({ ansible_version, custom_virtualenvs, version, me });
+    } catch (err) {
+      this.setState({ configError: true });
+    }
+  }
+
+  render () {
+    const {
+      ansible_version,
+      custom_virtualenvs,
+      isAboutModalOpen,
+      isNavOpen,
+      me,
+      version,
+      configError,
+    } = this.state;
+    const {
+      i18n,
+      render = () => {},
+      routeGroups = [],
+      navLabel = '',
+    } = this.props;
+
+    const header = (
+      <PageHeader
+        showNavToggle
+        onNavToggle={this.handleNavToggle}
+        logo={<BrandLogo />}
+        logoProps={{ href: '/' }}
+        toolbar={(
+          <PageHeaderToolbar
+            loggedInUser={me}
+            isAboutDisabled={!version}
+            onAboutClick={this.handleAboutOpen}
+            onLogoutClick={this.handleLogout}
+          />
+        )}
+      />
+    );
+
+    const sidebar = (
+      <PageSidebar
+        isNavOpen={isNavOpen}
+        nav={(
+          <Nav aria-label={navLabel}>
+            <NavList>
+              {routeGroups.map(
+                ({ groupId, groupTitle, routes }) => (
+                  <NavExpandableGroup
+                    key={groupId}
+                    groupId={groupId}
+                    groupTitle={groupTitle}
+                    routes={routes}
+                  />
+                )
+              )}
+            </NavList>
+          </Nav>
+        )}
+      />
+    );
 
     return (
-      <Config>
-        {({ ansible_version, version, me }) => (
-          <RootDialog>
-            {({
-              title,
-              bodyText,
-              variant = 'info',
-              clearRootDialogMessage
-            }) => (
-              <Fragment>
-                {(title || bodyText) && (
-                  <AlertModal
-                    variant={variant}
-                    isOpen={!!(title || bodyText)}
-                    onClose={clearRootDialogMessage}
-                    title={title}
-                    actions={[
-                      <Button
-                        key="close"
-                        variant="secondary"
-                        onClick={clearRootDialogMessage}
-                      >
-                        {i18n._(t`Close`)}
-                      </Button>
-                    ]}
-                  >
-                    {bodyText}
-                  </AlertModal>
-                )}
-                <Page
-                  usecondensed="True"
-                  header={(
-                    <PageHeader
-                      showNavToggle
-                      onNavToggle={this.onNavToggle}
-                      logo={<BrandLogo />}
-                      logoProps={{ href: '/' }}
-                      toolbar={(
-                        <PageHeaderToolbar
-                          loggedInUser={me}
-                          isAboutDisabled={!version}
-                          onAboutClick={this.onAboutModalOpen}
-                          onLogoutClick={this.onLogout}
-                        />
-                      )}
-                    />
-                  )}
-                  sidebar={(
-                    <PageSidebar
-                      isNavOpen={isNavOpen}
-                      nav={(
-                        <Nav aria-label={navLabel}>
-                          <NavList>
-                            {routeGroups.map(
-                              ({ groupId, groupTitle, routes }) => (
-                                <NavExpandableGroup
-                                  key={groupId}
-                                  groupId={groupId}
-                                  groupTitle={groupTitle}
-                                  routes={routes}
-                                />
-                              )
-                            )}
-                          </NavList>
-                        </Nav>
-                      )}
-                    />
-                  )}
-                >
-                  {render && render({ routeGroups })}
-                </Page>
-                <About
-                  ansible_version={ansible_version}
-                  version={version}
-                  isOpen={isAboutModalOpen}
-                  onClose={this.onAboutModalClose}
-                />
-              </Fragment>
-            )}
-          </RootDialog>
-        )}
-      </Config>
+      <Fragment>
+        <Page
+          usecondensed="True"
+          header={header}
+          sidebar={sidebar}
+        >
+          <ConfigProvider value={{ ansible_version, custom_virtualenvs, me, version }}>
+            {render({ routeGroups })}
+          </ConfigProvider>
+        </Page>
+        <About
+          ansible_version={ansible_version}
+          version={version}
+          isOpen={isAboutModalOpen}
+          onClose={this.handleAboutClose}
+        />
+        <AlertModal
+          isOpen={configError}
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          onClose={this.handleConfigErrorClose}
+        >
+          {i18n._(t`Failed to retrieve configuration.`)}
+        </AlertModal>
+      </Fragment>
     );
   }
 }
 
 export { App as _App };
-export default withI18n()(withNetwork(App));
+export default withI18n()(App);
diff --git a/src/RootProvider.jsx b/src/RootProvider.jsx
index 1f334c3b4c..9165ae4d23 100644
--- a/src/RootProvider.jsx
+++ b/src/RootProvider.jsx
@@ -7,10 +7,6 @@ import {
   HashRouter
 } from 'react-router-dom';
 
-import { NetworkProvider } from './contexts/Network';
-import { RootDialogProvider } from './contexts/RootDialog';
-import { ConfigProvider } from './contexts/Config';
-
 import ja from '../build/locales/ja/messages';
 import en from '../build/locales/en/messages';
 
@@ -34,13 +30,7 @@ class RootProvider extends Component {
           language={language}
           catalogs={catalogs}
         >
-          <RootDialogProvider>
-            <NetworkProvider>
-              <ConfigProvider>
-                {children}
-              </ConfigProvider>
-            </NetworkProvider>
-          </RootDialogProvider>
+          {children}
         </I18nProvider>
       </HashRouter>
     );
diff --git a/src/api/mixins/Notifications.mixin.js b/src/api/mixins/Notifications.mixin.js
index 4672b9989b..bbc9048ad2 100644
--- a/src/api/mixins/Notifications.mixin.js
+++ b/src/api/mixins/Notifications.mixin.js
@@ -26,6 +26,36 @@ const NotificationsMixin = (parent) => class extends parent {
   disassociateNotificationTemplatesError (resourceId, notificationId) {
     return this.http.post(`${this.baseUrl}${resourceId}/notification_templates_error/`, { id: notificationId, disassociate: true });
   }
+
+  /**
+  * This is a helper method meant to simplify setting the "on" or "off" status of
+  * a related notification.
+  *
+  * @param[resourceId] - id of the base resource
+  * @param[notificationId] - id of the notification
+  * @param[notificationType] - the type of notification, options are "success" and "error"
+  * @param[associationState] - Boolean for associating or disassociating, options are true or false
+  */
+  // eslint-disable-next-line max-len
+  updateNotificationTemplateAssociation (resourceId, notificationId, notificationType, associationState) {
+    if (notificationType === 'success' && associationState === true) {
+      return this.associateNotificationTemplatesSuccess(resourceId, notificationId);
+    }
+
+    if (notificationType === 'success' && associationState === false) {
+      return this.disassociateNotificationTemplatesSuccess(resourceId, notificationId);
+    }
+
+    if (notificationType === 'error' && associationState === true) {
+      return this.associateNotificationTemplatesError(resourceId, notificationId);
+    }
+
+    if (notificationType === 'error' && associationState === false) {
+      return this.disassociateNotificationTemplatesSuccess(resourceId, notificationId);
+    }
+
+    throw new Error(`Unsupported notificationType, associationState combination: ${notificationType}, ${associationState}`);
+  }
 };
 
 export default NotificationsMixin;
diff --git a/src/components/AddRole/AddResourceRole.jsx b/src/components/AddRole/AddResourceRole.jsx
index a282521750..d9dc7642f5 100644
--- a/src/components/AddRole/AddResourceRole.jsx
+++ b/src/components/AddRole/AddResourceRole.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Wizard } from '@patternfly/react-core';
-import { withNetwork } from '../../contexts/Network';
 import SelectResourceStep from './SelectResourceStep';
 import SelectRoleStep from './SelectRoleStep';
 import SelectableCard from './SelectableCard';
@@ -245,4 +244,4 @@ AddResourceRole.defaultProps = {
 };
 
 export { AddResourceRole as _AddResourceRole };
-export default withI18n()(withNetwork(AddResourceRole));
+export default withI18n()(AddResourceRole);
diff --git a/src/components/ContentEmpty.jsx b/src/components/ContentEmpty.jsx
new file mode 100644
index 0000000000..c234845898
--- /dev/null
+++ b/src/components/ContentEmpty.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+import {
+  Title,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody
+} from '@patternfly/react-core';
+import { CubesIcon } from '@patternfly/react-icons';
+
+const ContentEmpty = ({ i18n, title = '', message = '' }) => (
+  <EmptyState>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title size="lg">
+      {title || i18n._(t`No items found.`)}
+    </Title>
+    <EmptyStateBody>
+      {message}
+    </EmptyStateBody>
+  </EmptyState>
+);
+
+export { ContentEmpty as _ContentEmpty };
+export default withI18n()(ContentEmpty);
diff --git a/src/components/ContentError.jsx b/src/components/ContentError.jsx
new file mode 100644
index 0000000000..b5721cc988
--- /dev/null
+++ b/src/components/ContentError.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+import {
+  Title,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody
+} from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+
+// TODO: Pass actual error as prop and display expandable details for network errors.
+const ContentError = ({ i18n }) => (
+  <EmptyState>
+    <EmptyStateIcon icon={ExclamationTriangleIcon} />
+    <Title size="lg">
+      {i18n._(t`Something went wrong...`)}
+    </Title>
+    <EmptyStateBody>
+      {i18n._(t`There was an error loading this content. Please reload the page.`)}
+    </EmptyStateBody>
+  </EmptyState>
+);
+
+export { ContentError as _ContentError };
+export default withI18n()(ContentError);
diff --git a/src/components/ContentLoading.jsx b/src/components/ContentLoading.jsx
new file mode 100644
index 0000000000..050ec82cb1
--- /dev/null
+++ b/src/components/ContentLoading.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+import {
+  EmptyState,
+  EmptyStateBody
+} from '@patternfly/react-core';
+
+// TODO: Better loading state - skeleton lines / spinner, etc.
+const ContentLoading = ({ i18n }) => (
+  <EmptyState>
+    <EmptyStateBody>
+      {i18n._(t`Loading...`)}
+    </EmptyStateBody>
+  </EmptyState>
+);
+
+export { ContentLoading as _ContentLoading };
+export default withI18n()(ContentLoading);
diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx
index 999bcb9e04..9d69ba7049 100644
--- a/src/components/Lookup/Lookup.jsx
+++ b/src/components/Lookup/Lookup.jsx
@@ -11,7 +11,6 @@ import {
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
-import { withNetwork } from '../../contexts/Network';
 import PaginatedDataList from '../PaginatedDataList';
 import DataListToolbar from '../DataListToolbar';
 import CheckboxListItem from '../ListItem';
@@ -53,8 +52,8 @@ class Lookup extends React.Component {
   }
 
   async getData () {
-    const { getItems, handleHttpError, location } = this.props;
-    const queryParams = parseNamespacedQueryString(this.qsConfig, location.search);
+    const { getItems, location: { search } } = this.props;
+    const queryParams = parseNamespacedQueryString(this.qsConfig, search);
 
     this.setState({ error: false });
     try {
@@ -66,7 +65,7 @@ class Lookup extends React.Component {
         count
       });
     } catch (err) {
-      handleHttpError(err) || this.setState({ error: true });
+      this.setState({ error: true });
     }
   }
 
@@ -214,4 +213,4 @@ Lookup.defaultProps = {
 };
 
 export { Lookup as _Lookup };
-export default withI18n()(withNetwork(withRouter(Lookup)));
+export default withI18n()(withRouter(Lookup));
diff --git a/src/components/NotifyAndRedirect.jsx b/src/components/NotifyAndRedirect.jsx
deleted file mode 100644
index 19a18ea62c..0000000000
--- a/src/components/NotifyAndRedirect.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { Fragment } from 'react';
-
-import { Redirect, withRouter } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-
-import { withRootDialog } from '../contexts/RootDialog';
-
-const NotifyAndRedirect = ({
-  to,
-  push,
-  from,
-  exact,
-  strict,
-  sensitive,
-  setRootDialogMessage,
-  location,
-  i18n
-}) => {
-  setRootDialogMessage({
-    title: '404',
-    bodyText: (
-      <Fragment>{i18n._(t`Cannot find route ${(<strong>{location.pathname}</strong>)}.`)}</Fragment>
-    ),
-    variant: 'warning'
-  });
-
-  return (
-    <Redirect
-      to={to}
-      push={push}
-      from={from}
-      exact={exact}
-      strict={strict}
-      sensitive={sensitive}
-    />
-  );
-};
-
-export { NotifyAndRedirect as _NotifyAndRedirect };
-export default withI18n()(withRootDialog(withRouter(NotifyAndRedirect)));
diff --git a/src/components/PaginatedDataList/PaginatedDataList.jsx b/src/components/PaginatedDataList/PaginatedDataList.jsx
index 8c82774e65..ee59abec79 100644
--- a/src/components/PaginatedDataList/PaginatedDataList.jsx
+++ b/src/components/PaginatedDataList/PaginatedDataList.jsx
@@ -1,18 +1,14 @@
 import React, { Fragment } from 'react';
 import PropTypes, { arrayOf, shape, string, bool } from 'prop-types';
-import {
-  DataList,
-  Title,
-  EmptyState,
-  EmptyStateIcon,
-  EmptyStateBody
-} from '@patternfly/react-core';
-import { CubesIcon } from '@patternfly/react-icons';
+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';
@@ -37,11 +33,6 @@ const EmptyStateControlsWrapper = styled.div`
 class PaginatedDataList extends React.Component {
   constructor (props) {
     super(props);
-
-    this.state = {
-      error: null,
-    };
-
     this.handleSetPage = this.handleSetPage.bind(this);
     this.handleSetPageSize = this.handleSetPageSize.bind(this);
     this.handleSort = this.handleSort.bind(this);
@@ -79,7 +70,10 @@ class PaginatedDataList extends React.Component {
   }
 
   render () {
+    const [orderBy, sortOrder] = this.getSortOrder();
     const {
+      contentError,
+      contentLoading,
       emptyStateControls,
       items,
       itemCount,
@@ -93,66 +87,67 @@ class PaginatedDataList extends React.Component {
       i18n,
       renderToolbar,
     } = this.props;
-    const { error } = this.state;
-    const [orderBy, sortOrder] = this.getSortOrder();
-    const queryParams = parseNamespacedQueryString(qsConfig, location.search);
     const columns = toolbarColumns.length ? toolbarColumns : [{ name: i18n._(t`Name`), key: 'name', isSortable: true }];
-    return (
-      <Fragment>
-        {error && (
-          <Fragment>
-            <div>{error.message}</div>
-            {error.response && (
-              <div>{error.response.data.detail}</div>
-            )}
-          </Fragment> // TODO: replace with proper error handling
-        )}
-        {items.length === 0 ? (
-          <Fragment>
+    const queryParams = parseNamespacedQueryString(qsConfig, location.search);
+
+    const itemDisplayName = ucFirst(pluralize(itemName));
+    const itemDisplayNamePlural = ucFirst(itemNamePlural || pluralize(itemName));
+
+    const dataListLabel = i18n._(t`${itemDisplayName} List`);
+    const emptyContentMessage = i18n._(t`Please add ${itemDisplayNamePlural} to populate this list `);
+    const emptyContentTitle = i18n._(t`No ${itemDisplayNamePlural} Found `);
+
+    let Content;
+    if (contentLoading && items.length <= 0) {
+      Content = (<ContentLoading />);
+    } else if (contentError) {
+      Content = (<ContentError />);
+    } else if (items.length <= 0) {
+      Content = (<ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />);
+    } else {
+      Content = (<DataList aria-label={dataListLabel}>{items.map(renderItem)}</DataList>);
+    }
+
+    if (items.length <= 0) {
+      return (
+        <Fragment>
+          {emptyStateControls && (
             <EmptyStateControlsWrapper>
               {emptyStateControls}
             </EmptyStateControlsWrapper>
+          )}
+          {emptyStateControls && (
             <div css="border-bottom: 1px solid #d2d2d2" />
-            <EmptyState>
-              <EmptyStateIcon icon={CubesIcon} />
-              <Title size="lg">
-                {i18n._(t`No ${ucFirst(itemNamePlural || pluralize(itemName))} Found `)}
-              </Title>
-              <EmptyStateBody>
-                {i18n._(t`Please add ${ucFirst(itemNamePlural || pluralize(itemName))} to populate this list `)}
-              </EmptyStateBody>
-            </EmptyState>
-          </Fragment>
-        ) : (
-          <Fragment>
-            {renderToolbar({
-              sortedColumnKey: orderBy,
-              sortOrder,
-              columns,
-              onSearch: () => { },
-              onSort: this.handleSort,
-            })}
-            <DataList aria-label={i18n._(t`${ucFirst(pluralize(itemName))} List`)}>
-              {items.map(item => (renderItem ? renderItem(item) : (
-                <PaginatedDataListItem key={item.id} item={item} />
-              )))}
-            </DataList>
-            <Pagination
-              variant="bottom"
-              itemCount={itemCount}
-              page={queryParams.page || 1}
-              perPage={queryParams.page_size}
-              perPageOptions={showPageSizeOptions ? [
-                { title: '5', value: 5 },
-                { title: '10', value: 10 },
-                { title: '20', value: 20 },
-                { title: '50', value: 50 }
-              ] : []}
-              onSetPage={this.handleSetPage}
-              onPerPageSelect={this.handleSetPageSize}
-            />
-          </Fragment>
-        )}
+          )}
+          {Content}
+        </Fragment>
+      );
+    }
+
+    return (
+      <Fragment>
+        {renderToolbar({
+          sortedColumnKey: orderBy,
+          sortOrder,
+          columns,
+          onSearch: () => { },
+          onSort: this.handleSort,
+        })}
+        {Content}
+        <Pagination
+          variant="bottom"
+          itemCount={itemCount}
+          page={queryParams.page || 1}
+          perPage={queryParams.page_size}
+          perPageOptions={showPageSizeOptions ? [
+            { title: '5', value: 5 },
+            { title: '10', value: 10 },
+            { title: '20', value: 20 },
+            { title: '50', value: 50 }
+          ] : []}
+          onSetPage={this.handleSetPage}
+          onPerPageSelect={this.handleSetPageSize}
+        />
       </Fragment>
     );
   }
@@ -178,14 +173,18 @@ PaginatedDataList.propTypes = {
   })),
   showPageSizeOptions: PropTypes.bool,
   renderToolbar: PropTypes.func,
+  contentLoading: PropTypes.bool,
+  contentError: PropTypes.bool,
 };
 
 PaginatedDataList.defaultProps = {
-  renderItem: null,
+  contentLoading: false,
+  contentError: false,
   toolbarColumns: [],
   itemName: 'item',
   itemNamePlural: '',
   showPageSizeOptions: true,
+  renderItem: (item) => (<PaginatedDataListItem key={item.id} item={item} />),
   renderToolbar: (props) => (<DataListToolbar {...props} />),
 };
 
diff --git a/src/contexts/Config.jsx b/src/contexts/Config.jsx
index 7660ff4771..231e6f8301 100644
--- a/src/contexts/Config.jsx
+++ b/src/contexts/Config.jsx
@@ -1,136 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 
-import { withNetwork } from './Network';
+// eslint-disable-next-line import/prefer-default-export
+export const ConfigContext = React.createContext({});
 
-import { ConfigAPI, MeAPI, RootAPI } from '../api';
-
-const ConfigContext = React.createContext({});
-
-class Provider extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      value: {
-        ansible_version: null,
-        custom_virtualenvs: null,
-        version: null,
-        custom_logo: null,
-        custom_login_info: null,
-        me: {},
-        ...props.value
-      }
-    };
-
-    this.fetchConfig = this.fetchConfig.bind(this);
-    this.fetchMe = this.fetchMe.bind(this);
-    this.updateConfig = this.updateConfig.bind(this);
-  }
-
-  componentDidMount () {
-    const { value } = this.props;
-    if (!value) {
-      this.fetchConfig();
-    }
-  }
-
-  updateConfig = config => {
-    const { ansible_version, custom_virtualenvs, version } = config;
-
-    this.setState(prevState => ({
-      value: {
-        ...prevState.value,
-        ansible_version,
-        custom_virtualenvs,
-        version
-      }
-    }));
-  };
-
-  async fetchMe () {
-    const { handleHttpError } = this.props;
-    try {
-      const {
-        data: {
-          results: [me]
-        }
-      } = await MeAPI.read();
-      this.setState(prevState => ({
-        value: {
-          ...prevState.value,
-          me
-        }
-      }));
-    } catch (err) {
-      handleHttpError(err)
-        || this.setState({
-          value: {
-            ansible_version: null,
-            custom_virtualenvs: null,
-            version: null,
-            custom_logo: null,
-            custom_login_info: null,
-            me: {}
-          }
-        });
-    }
-  }
-
-  async fetchConfig () {
-    const { handleHttpError } = this.props;
-
-    try {
-      const [configRes, rootRes, meRes] = await Promise.all([
-        ConfigAPI.read(),
-        RootAPI.read(),
-        MeAPI.read()
-      ]);
-      this.setState({
-        value: {
-          ansible_version: configRes.data.ansible_version,
-          custom_virtualenvs: configRes.data.custom_virtualenvs,
-          version: configRes.data.version,
-          custom_logo: rootRes.data.custom_logo,
-          custom_login_info: rootRes.data.custom_login_info,
-          me: meRes.data.results[0]
-        }
-      });
-    } catch (err) {
-      handleHttpError(err)
-        || this.setState({
-          value: {
-            ansible_version: null,
-            custom_virtualenvs: null,
-            version: null,
-            custom_logo: null,
-            custom_login_info: null,
-            me: {}
-          }
-        });
-    }
-  }
-
-  render () {
-    const { value } = this.state;
-
-    const { children } = this.props;
-
-    return (
-      <ConfigContext.Provider
-        value={{
-          ...value,
-          fetchMe: this.fetchMe,
-          updateConfig: this.updateConfig
-        }}
-      >
-        {children}
-      </ConfigContext.Provider>
-    );
-  }
-}
-
-export const ConfigProvider = withNetwork(Provider);
-
-export const Config = ({ children }) => (
-  <ConfigContext.Consumer>{value => children(value)}</ConfigContext.Consumer>
-);
+export const ConfigProvider = ConfigContext.Provider;
+export const Config = ConfigContext.Consumer;
diff --git a/src/contexts/Network.jsx b/src/contexts/Network.jsx
deleted file mode 100644
index 84628aba5e..0000000000
--- a/src/contexts/Network.jsx
+++ /dev/null
@@ -1,80 +0,0 @@
-
-import React, { Component } from 'react';
-
-import { withRouter } from 'react-router-dom';
-
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-
-import { withRootDialog } from './RootDialog';
-
-const NetworkContext = React.createContext({});
-
-class Provider extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      value: {
-        handleHttpError: err => {
-          if (err.response.status === 401) {
-            this.handle401();
-          } else if (err.response.status === 404) {
-            this.handle404();
-          }
-          return (err.response.status === 401 || err.response.status === 404);
-        },
-        ...props.value
-      }
-    };
-  }
-
-  handle401 () {
-    const { handle401, history, setRootDialogMessage, i18n } = this.props;
-    if (handle401) {
-      handle401();
-      return;
-    }
-    history.replace('/login');
-    setRootDialogMessage({
-      bodyText: i18n._(t`You have been logged out.`)
-    });
-  }
-
-  handle404 () {
-    const { handle404, history, setRootDialogMessage, i18n } = this.props;
-    if (handle404) {
-      handle404();
-      return;
-    }
-    history.replace('/home');
-    setRootDialogMessage({
-      title: i18n._(t`404`),
-      bodyText: i18n._(t`Cannot find resource.`),
-      variant: 'warning'
-    });
-  }
-
-  render () {
-    const { value } = this.state;
-
-    const { children } = this.props;
-
-    return (
-      <NetworkContext.Provider value={value}>
-        {children}
-      </NetworkContext.Provider>
-    );
-  }
-}
-
-export { Provider as _NetworkProvider };
-export const NetworkProvider = withI18n()(withRootDialog(withRouter(Provider)));
-
-export function withNetwork (Child) {
-  return (props) => (
-    <NetworkContext.Consumer>
-      {context => <Child {...props} {...context} />}
-    </NetworkContext.Consumer>
-  );
-}
diff --git a/src/contexts/RootDialog.jsx b/src/contexts/RootDialog.jsx
deleted file mode 100644
index d393da068d..0000000000
--- a/src/contexts/RootDialog.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { Component } from 'react';
-
-const RootDialogContext = React.createContext({});
-
-export class RootDialogProvider extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      value: {
-        title: null,
-        setRootDialogMessage: ({ title, bodyText, variant }) => {
-          const { value } = this.state;
-          this.setState({ value: { ...value, title, bodyText, variant } });
-        },
-        clearRootDialogMessage: () => {
-          const { value } = this.state;
-          this.setState({ value: { ...value, title: null, bodyText: null, variant: null } });
-        },
-        ...props.value
-      }
-    };
-  }
-
-  render () {
-    const {
-      children
-    } = this.props;
-
-    const {
-      value
-    } = this.state;
-
-    return (
-      <RootDialogContext.Provider value={value}>
-        {children}
-      </RootDialogContext.Provider>
-    );
-  }
-}
-
-export const RootDialog = ({ children }) => (
-  <RootDialogContext.Consumer>
-    {value => children(value)}
-  </RootDialogContext.Consumer>
-);
-
-export function withRootDialog (Child) {
-  return (props) => (
-    <RootDialogContext.Consumer>
-      {context => <Child {...props} {...context} />}
-    </RootDialogContext.Consumer>
-  );
-}
diff --git a/src/index.jsx b/src/index.jsx
index 62a1f72e86..e30b1a5b2c 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -13,15 +13,12 @@ import { t } from '@lingui/macro';
 import '@patternfly/react-core/dist/styles/base.css';
 import './app.scss';
 
-import { Config } from './contexts/Config';
-
-import { BrandName } from './variables';
-
 import Background from './components/Background';
-import NotifyAndRedirect from './components/NotifyAndRedirect';
 
 import RootProvider from './RootProvider';
 import App from './App';
+import { BrandName } from './variables';
+import { isAuthenticated } from './util/auth';
 
 import Applications from './pages/Applications';
 import Credentials from './pages/Credentials';
@@ -52,185 +49,188 @@ export function main (render) {
   const el = document.getElementById('app');
   document.title = `Ansible ${BrandName}`;
 
+  const defaultRedirect = () => (<Redirect to="/home" />);
+  const removeTrailingSlash = (
+    <Route
+      exact
+      strict
+      path="/*/"
+      render={({ history: { location: { pathname, search, hash } } }) => (
+        <Redirect to={`${pathname.slice(0, -1)}${search}${hash}`} />
+      )}
+    />
+  );
+  const loginRoutes = (
+    <Switch>
+      {removeTrailingSlash}
+      <Route
+        path="/login"
+        render={() => (
+          <Login isAuthenticated={isAuthenticated} />
+        )}
+      />
+      <Redirect to="/login" />
+    </Switch>
+  );
+
   return render(
     <RootProvider>
       <I18n>
         {({ i18n }) => (
           <Background>
-            <Switch>
-              <Route
-                exact
-                strict
-                path="/*/"
-                render={({ history: { location: { pathname, search, hash } } }) => (
-                  <Redirect to={`${pathname.slice(0, -1)}${search}${hash}`} />
-                )}
-              />
-              <Route
-                path="/login"
-                render={() => (
-                  <Config>
-                    {({ custom_logo, custom_login_info, fetchMe, updateConfig }) => (
-                      <Login
-                        logo={custom_logo}
-                        loginInfo={custom_login_info}
-                        fetchMe={fetchMe}
-                        updateConfig={updateConfig}
-                      />
-                    )}
-                  </Config>
-                )}
-              />
-              <Route exact path="/" render={() => <Redirect to="/home" />} />
-              <Route
-                render={() => (
-                  <App
-                    navLabel={i18n._(t`Primary Navigation`)}
-                    routeGroups={[
-                      {
-                        groupTitle: i18n._(t`Views`),
-                        groupId: 'views_group',
-                        routes: [
-                          {
-                            title: i18n._(t`Dashboard`),
-                            path: '/home',
-                            component: Dashboard
-                          },
-                          {
-                            title: i18n._(t`Jobs`),
-                            path: '/jobs',
-                            component: Jobs
-                          },
-                          {
-                            title: i18n._(t`Schedules`),
-                            path: '/schedules',
-                            component: Schedules
-                          },
-                          {
-                            title: i18n._(t`My View`),
-                            path: '/portal',
-                            component: Portal
-                          },
-                        ],
-                      },
-                      {
-                        groupTitle: i18n._(t`Resources`),
-                        groupId: 'resources_group',
-                        routes: [
-                          {
-                            title: i18n._(t`Templates`),
-                            path: '/templates',
-                            component: Templates
-                          },
-                          {
-                            title: i18n._(t`Credentials`),
-                            path: '/credentials',
-                            component: Credentials
-                          },
-                          {
-                            title: i18n._(t`Projects`),
-                            path: '/projects',
-                            component: Projects
-                          },
-                          {
-                            title: i18n._(t`Inventories`),
-                            path: '/inventories',
-                            component: Inventories
-                          },
-                          {
-                            title: i18n._(t`Inventory Scripts`),
-                            path: '/inventory_scripts',
-                            component: InventoryScripts
-                          },
-                        ],
-                      },
-                      {
-                        groupTitle: i18n._(t`Access`),
-                        groupId: 'access_group',
-                        routes: [
-                          {
-                            title: i18n._(t`Organizations`),
-                            path: '/organizations',
-                            component: Organizations
-                          },
-                          {
-                            title: i18n._(t`Users`),
-                            path: '/users',
-                            component: Users
-                          },
-                          {
-                            title: i18n._(t`Teams`),
-                            path: '/teams',
-                            component: Teams
-                          },
-                        ],
-                      },
-                      {
-                        groupTitle: i18n._(t`Administration`),
-                        groupId: 'administration_group',
-                        routes: [
-                          {
-                            title: i18n._(t`Credential Types`),
-                            path: '/credential_types',
-                            component: CredentialTypes
-                          },
-                          {
-                            title: i18n._(t`Notifications`),
-                            path: '/notification_templates',
-                            component: NotificationTemplates
-                          },
-                          {
-                            title: i18n._(t`Management Jobs`),
-                            path: '/management_jobs',
-                            component: ManagementJobs
-                          },
-                          {
-                            title: i18n._(t`Instance Groups`),
-                            path: '/instance_groups',
-                            component: InstanceGroups
-                          },
-                          {
-                            title: i18n._(t`Integrations`),
-                            path: '/applications',
-                            component: Applications
-                          },
-                        ],
-                      },
-                      {
-                        groupTitle: i18n._(t`Settings`),
-                        groupId: 'settings_group',
-                        routes: [
-                          {
-                            title: i18n._(t`Authentication`),
-                            path: '/auth_settings',
-                            component: AuthSettings
-                          },
-                          {
-                            title: i18n._(t`Jobs`),
-                            path: '/jobs_settings',
-                            component: JobsSettings
-                          },
-                          {
-                            title: i18n._(t`System`),
-                            path: '/system_settings',
-                            component: SystemSettings
-                          },
-                          {
-                            title: i18n._(t`User Interface`),
-                            path: '/ui_settings',
-                            component: UISettings
-                          },
-                          {
-                            title: i18n._(t`License`),
-                            path: '/license',
-                            component: License
-                          },
-                        ],
-                      },
-                    ]}
-                    render={({ routeGroups }) => (
-                      <Switch>
-                        {routeGroups
+            {!isAuthenticated() ? loginRoutes : (
+              <Switch>
+                {removeTrailingSlash}
+                <Route path="/login" render={defaultRedirect} />
+                <Route exact path="/" render={defaultRedirect} />
+                <Route
+                  render={() => (
+                    <App
+                      navLabel={i18n._(t`Primary Navigation`)}
+                      routeGroups={[
+                        {
+                          groupTitle: i18n._(t`Views`),
+                          groupId: 'views_group',
+                          routes: [
+                            {
+                              title: i18n._(t`Dashboard`),
+                              path: '/home',
+                              component: Dashboard
+                            },
+                            {
+                              title: i18n._(t`Jobs`),
+                              path: '/jobs',
+                              component: Jobs
+                            },
+                            {
+                              title: i18n._(t`Schedules`),
+                              path: '/schedules',
+                              component: Schedules
+                            },
+                            {
+                              title: i18n._(t`My View`),
+                              path: '/portal',
+                              component: Portal
+                            },
+                          ],
+                        },
+                        {
+                          groupTitle: i18n._(t`Resources`),
+                          groupId: 'resources_group',
+                          routes: [
+                            {
+                              title: i18n._(t`Templates`),
+                              path: '/templates',
+                              component: Templates
+                            },
+                            {
+                              title: i18n._(t`Credentials`),
+                              path: '/credentials',
+                              component: Credentials
+                            },
+                            {
+                              title: i18n._(t`Projects`),
+                              path: '/projects',
+                              component: Projects
+                            },
+                            {
+                              title: i18n._(t`Inventories`),
+                              path: '/inventories',
+                              component: Inventories
+                            },
+                            {
+                              title: i18n._(t`Inventory Scripts`),
+                              path: '/inventory_scripts',
+                              component: InventoryScripts
+                            },
+                          ],
+                        },
+                        {
+                          groupTitle: i18n._(t`Access`),
+                          groupId: 'access_group',
+                          routes: [
+                            {
+                              title: i18n._(t`Organizations`),
+                              path: '/organizations',
+                              component: Organizations
+                            },
+                            {
+                              title: i18n._(t`Users`),
+                              path: '/users',
+                              component: Users
+                            },
+                            {
+                              title: i18n._(t`Teams`),
+                              path: '/teams',
+                              component: Teams
+                            },
+                          ],
+                        },
+                        {
+                          groupTitle: i18n._(t`Administration`),
+                          groupId: 'administration_group',
+                          routes: [
+                            {
+                              title: i18n._(t`Credential Types`),
+                              path: '/credential_types',
+                              component: CredentialTypes
+                            },
+                            {
+                              title: i18n._(t`Notifications`),
+                              path: '/notification_templates',
+                              component: NotificationTemplates
+                            },
+                            {
+                              title: i18n._(t`Management Jobs`),
+                              path: '/management_jobs',
+                              component: ManagementJobs
+                            },
+                            {
+                              title: i18n._(t`Instance Groups`),
+                              path: '/instance_groups',
+                              component: InstanceGroups
+                            },
+                            {
+                              title: i18n._(t`Integrations`),
+                              path: '/applications',
+                              component: Applications
+                            },
+                          ],
+                        },
+                        {
+                          groupTitle: i18n._(t`Settings`),
+                          groupId: 'settings_group',
+                          routes: [
+                            {
+                              title: i18n._(t`Authentication`),
+                              path: '/auth_settings',
+                              component: AuthSettings
+                            },
+                            {
+                              title: i18n._(t`Jobs`),
+                              path: '/jobs_settings',
+                              component: JobsSettings
+                            },
+                            {
+                              title: i18n._(t`System`),
+                              path: '/system_settings',
+                              component: SystemSettings
+                            },
+                            {
+                              title: i18n._(t`User Interface`),
+                              path: '/ui_settings',
+                              component: UISettings
+                            },
+                            {
+                              title: i18n._(t`License`),
+                              path: '/license',
+                              component: License
+                            },
+                          ],
+                        },
+                      ]}
+                      render={({ routeGroups }) => (
+                        routeGroups
                           .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
                           .map(({ component: PageComponent, path }) => (
                             <Route
@@ -241,15 +241,12 @@ export function main (render) {
                               )}
                             />
                           ))
-                          .concat([
-                            <NotifyAndRedirect key="redirect" to="/" />
-                          ])}
-                      </Switch>
-                    )}
-                  />
-                )}
-              />
-            </Switch>
+                      )}
+                    />
+                  )}
+                />
+              </Switch>
+            )}
           </Background>
         )}
       </I18n>
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 39a12c1969..6a7ac25efa 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -7,13 +7,10 @@ import {
   LoginForm,
   LoginPage as PFLoginPage,
 } from '@patternfly/react-core';
-
-import { withRootDialog } from '../contexts/RootDialog';
-import { withNetwork } from '../contexts/Network';
 import { RootAPI } from '../api';
 import { BrandName } from '../variables';
 
-import logoImg from '../../images/brand-logo.svg';
+import brandLogo from '../../images/brand-logo.svg';
 
 const LoginPage = styled(PFLoginPage)`
   & .pf-c-brand {
@@ -28,80 +25,122 @@ class AWXLogin extends Component {
     this.state = {
       username: '',
       password: '',
-      isInputValid: true,
-      isLoading: false,
-      isAuthenticated: false
+      authenticationError: false,
+      validationError: false,
+      isAuthenticating: false,
+      isLoading: true,
+      logo: null,
+      loginInfo: null,
     };
 
-    this.onChangeUsername = this.onChangeUsername.bind(this);
-    this.onChangePassword = this.onChangePassword.bind(this);
-    this.onLoginButtonClick = this.onLoginButtonClick.bind(this);
+    this.handleChangeUsername = this.handleChangeUsername.bind(this);
+    this.handleChangePassword = this.handleChangePassword.bind(this);
+    this.handleLoginButtonClick = this.handleLoginButtonClick.bind(this);
+    this.loadCustomLoginInfo = this.loadCustomLoginInfo.bind(this);
   }
 
-  onChangeUsername (value) {
-    this.setState({ username: value, isInputValid: true });
+  async componentDidMount () {
+    await this.loadCustomLoginInfo();
   }
 
-  onChangePassword (value) {
-    this.setState({ password: value, isInputValid: true });
+  async loadCustomLoginInfo () {
+    this.setState({ isLoading: true });
+    try {
+      const { data: { custom_logo, custom_login_info } } = await RootAPI.read();
+      const logo = custom_logo ? `data:image/jpeg;${custom_logo}` : brandLogo;
+
+      this.setState({ logo, loginInfo: custom_login_info });
+    } catch (err) {
+      this.setState({ logo: brandLogo });
+    } finally {
+      this.setState({ isLoading: false });
+    }
   }
 
-  async onLoginButtonClick (event) {
-    const { username, password, isLoading } = this.state;
-    const { handleHttpError, clearRootDialogMessage, fetchMe, updateConfig } = this.props;
+  async handleLoginButtonClick (event) {
+    const { username, password, isAuthenticating } = this.state;
 
     event.preventDefault();
 
-    if (isLoading) {
+    if (isAuthenticating) {
       return;
     }
 
-    clearRootDialogMessage();
-    this.setState({ isLoading: true });
-
+    this.setState({ authenticationError: false, isAuthenticating: true });
     try {
-      const { data } = await RootAPI.login(username, password);
-      updateConfig(data);
-      await fetchMe();
-      this.setState({ isAuthenticated: true, isLoading: false });
-    } catch (error) {
-      handleHttpError(error) || this.setState({ isInputValid: false, isLoading: false });
+      // note: if authentication is successful, the appropriate cookie will be set automatically
+      // and isAuthenticated() (the source of truth) will start returning true.
+      await RootAPI.login(username, password);
+    } catch (err) {
+      if (err && err.response && err.response.status === 401) {
+        this.setState({ validationError: true });
+      } else {
+        this.setState({ authenticationError: true });
+      }
+    } finally {
+      this.setState({ isAuthenticating: false });
     }
   }
 
+  handleChangeUsername (value) {
+    this.setState({ username: value, validationError: false });
+  }
+
+  handleChangePassword (value) {
+    this.setState({ password: value, validationError: false });
+  }
+
   render () {
-    const { username, password, isInputValid, isAuthenticated } = this.state;
-    const { alt, loginInfo, logo, bodyText: errorMessage, i18n } = this.props;
-    const logoSrc = logo ? `data:image/jpeg;${logo}` : logoImg;
+    const {
+      authenticationError,
+      validationError,
+      username,
+      password,
+      isLoading,
+      logo,
+      loginInfo,
+    } = this.state;
+    const { alt, i18n, isAuthenticated } = this.props;
     // Setting BrandName to a variable here is necessary to get the jest tests
     // passing.  Attempting to use BrandName in the template literal results
     // in failing tests.
     const brandName = BrandName;
 
-    if (isAuthenticated) {
+    if (isLoading) {
+      return null;
+    }
+
+    if (isAuthenticated()) {
       return (<Redirect to="/" />);
     }
 
+    let helperText;
+    if (validationError) {
+      helperText = i18n._(t`Invalid username or password. Please try again.`);
+    } else {
+      helperText = i18n._(t`There was a problem signing in. Please try again.`);
+    }
+
     return (
       <LoginPage
-        brandImgSrc={logoSrc}
+        brandImgSrc={logo}
         brandImgAlt={alt || brandName}
         loginTitle={i18n._(t`Welcome to Ansible ${brandName}! Please Sign In.`)}
         textContent={loginInfo}
       >
         <LoginForm
-          className={errorMessage && 'pf-m-error'}
+          className={(authenticationError || validationError) ? 'pf-m-error' : ''}
           usernameLabel={i18n._(t`Username`)}
           passwordLabel={i18n._(t`Password`)}
-          showHelperText={!isInputValid || !!errorMessage}
-          helperText={errorMessage || i18n._(t`Invalid username or password. Please try again.`)}
+          showHelperText={(authenticationError || validationError)}
+          helperText={helperText}
           usernameValue={username}
           passwordValue={password}
-          isValidUsername={isInputValid}
-          isValidPassword={isInputValid}
-          onChangeUsername={this.onChangeUsername}
-          onChangePassword={this.onChangePassword}
-          onLoginButtonClick={this.onLoginButtonClick}
+          isValidUsername={!validationError}
+          isValidPassword={!validationError}
+          onChangeUsername={this.handleChangeUsername}
+          onChangePassword={this.handleChangePassword}
+          onLoginButtonClick={this.handleLoginButtonClick}
         />
       </LoginPage>
     );
@@ -109,4 +148,4 @@ class AWXLogin extends Component {
 }
 
 export { AWXLogin as _AWXLogin };
-export default withI18n()(withNetwork(withRootDialog(withRouter(AWXLogin))));
+export default withI18n()(withRouter(AWXLogin));
diff --git a/src/pages/Organizations/Organizations.jsx b/src/pages/Organizations/Organizations.jsx
index 00962dd43a..702876c78e 100644
--- a/src/pages/Organizations/Organizations.jsx
+++ b/src/pages/Organizations/Organizations.jsx
@@ -4,9 +4,6 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import { Config } from '../../contexts/Config';
-import { NetworkProvider } from '../../contexts/Network';
-import { withRootDialog } from '../../contexts/RootDialog';
-
 import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
 
 import OrganizationsList from './screens/OrganizationsList';
@@ -49,7 +46,7 @@ class Organizations extends Component {
   }
 
   render () {
-    const { match, history, location, setRootDialogMessage, i18n } = this.props;
+    const { match, history, location } = this.props;
     const { breadcrumbConfig } = this.state;
 
     return (
@@ -66,34 +63,17 @@ class Organizations extends Component {
           />
           <Route
             path={`${match.path}/:id`}
-            render={({ match: newRouteMatch }) => (
-              <NetworkProvider
-                handle404={() => {
-                  history.replace('/organizations');
-                  setRootDialogMessage({
-                    title: '404',
-                    bodyText: (
-                      <Fragment>
-                        {i18n._(t`Cannot find organization with ID`)}
-                        <strong>{` ${newRouteMatch.params.id}`}</strong>
-                        .
-                      </Fragment>
-                    ),
-                    variant: 'warning'
-                  });
-                }}
-              >
-                <Config>
-                  {({ me }) => (
-                    <Organization
-                      history={history}
-                      location={location}
-                      setBreadcrumb={this.setBreadcrumbConfig}
-                      me={me || {}}
-                    />
-                  )}
-                </Config>
-              </NetworkProvider>
+            render={() => (
+              <Config>
+                {({ me }) => (
+                  <Organization
+                    history={history}
+                    location={location}
+                    setBreadcrumb={this.setBreadcrumbConfig}
+                    me={me || {}}
+                  />
+                )}
+              </Config>
             )}
           />
           <Route
@@ -109,4 +89,4 @@ class Organizations extends Component {
 }
 
 export { Organizations as _Organizations };
-export default withI18n()(withRootDialog(withRouter(Organizations)));
+export default withI18n()(withRouter(Organizations));
diff --git a/src/pages/Organizations/components/InstanceGroupsLookup.jsx b/src/pages/Organizations/components/InstanceGroupsLookup.jsx
index 89a8f82fc7..3d26870c0b 100644
--- a/src/pages/Organizations/components/InstanceGroupsLookup.jsx
+++ b/src/pages/Organizations/components/InstanceGroupsLookup.jsx
@@ -7,8 +7,6 @@ import { QuestionCircleIcon } from '@patternfly/react-icons';
 
 import Lookup from '../../../components/Lookup';
 
-import { withNetwork } from '../../../contexts/Network';
-
 import { InstanceGroupsAPI } from '../../../api';
 
 const getInstanceGroups = async (params) => InstanceGroupsAPI.read(params);
@@ -66,4 +64,4 @@ InstanceGroupsLookup.defaultProps = {
   tooltip: '',
 };
 
-export default withI18n()(withNetwork(InstanceGroupsLookup));
+export default withI18n()(InstanceGroupsLookup);
diff --git a/src/pages/Organizations/components/OrganizationForm.jsx b/src/pages/Organizations/components/OrganizationForm.jsx
index 5e99e7d484..a17efbace7 100644
--- a/src/pages/Organizations/components/OrganizationForm.jsx
+++ b/src/pages/Organizations/components/OrganizationForm.jsx
@@ -14,7 +14,6 @@ import {
 } from '@patternfly/react-core';
 
 import { Config } from '../../../contexts/Config';
-import { withNetwork } from '../../../contexts/Network';
 import FormRow from '../../../components/FormRow';
 import FormField from '../../../components/FormField';
 import FormActionGroup from '../../../components/FormActionGroup/FormActionGroup';
@@ -210,4 +209,4 @@ OrganizationForm.contextTypes = {
 };
 
 export { OrganizationForm as _OrganizationForm };
-export default withI18n()(withNetwork(withRouter(OrganizationForm)));
+export default withI18n()(withRouter(OrganizationForm));
diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx
index 931736b3d5..71100980f7 100644
--- a/src/pages/Organizations/screens/Organization/Organization.jsx
+++ b/src/pages/Organizations/screens/Organization/Organization.jsx
@@ -3,9 +3,8 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Switch, Route, withRouter, Redirect } from 'react-router-dom';
 import { Card, CardHeader, PageSection } from '@patternfly/react-core';
-import { withNetwork } from '../../../../contexts/Network';
-import NotifyAndRedirect from '../../../../components/NotifyAndRedirect';
 import CardCloseButton from '../../../../components/CardCloseButton';
+import ContentError from '../../../../components/ContentError';
 import OrganizationAccess from './OrganizationAccess';
 import OrganizationDetail from './OrganizationDetail';
 import OrganizationEdit from './OrganizationEdit';
@@ -20,77 +19,74 @@ class Organization extends Component {
 
     this.state = {
       organization: null,
-      error: false,
-      loading: true,
+      contentLoading: true,
+      contentError: false,
+      isInitialized: false,
       isNotifAdmin: false,
       isAuditorOfThisOrg: false,
-      isAdminOfThisOrg: false
+      isAdminOfThisOrg: false,
     };
-
-    this.fetchOrganization = this.fetchOrganization.bind(this);
-    this.fetchOrganizationAndRoles = this.fetchOrganizationAndRoles.bind(this);
+    this.loadOrganization = this.loadOrganization.bind(this);
+    this.loadOrganizationAndRoles = this.loadOrganizationAndRoles.bind(this);
   }
 
-  componentDidMount () {
-    this.fetchOrganizationAndRoles();
+  async componentDidMount () {
+    await this.loadOrganizationAndRoles();
+    this.setState({ isInitialized: true });
   }
 
   async componentDidUpdate (prevProps) {
     const { location } = this.props;
     if (location !== prevProps.location) {
-      await this.fetchOrganization();
+      await this.loadOrganization();
     }
   }
 
-  async fetchOrganizationAndRoles () {
+  async loadOrganizationAndRoles () {
     const {
       match,
       setBreadcrumb,
-      handleHttpError
     } = this.props;
+    const id = parseInt(match.params.id, 10);
 
+    this.setState({ contentError: false, contentLoading: true });
     try {
-      const [{ data }, notifAdminRest, auditorRes, adminRes] = await Promise.all([
-        OrganizationsAPI.readDetail(parseInt(match.params.id, 10)),
-        OrganizationsAPI.read({
-          role_level: 'notification_admin_role',
-          page_size: 1
-        }),
-        OrganizationsAPI.read({
-          role_level: 'auditor_role',
-          id: parseInt(match.params.id, 10)
-        }),
-        OrganizationsAPI.read({
-          role_level: 'admin_role',
-          id: parseInt(match.params.id, 10)
-        })
+      const [{ data }, notifAdminRes, auditorRes, adminRes] = await Promise.all([
+        OrganizationsAPI.readDetail(id),
+        OrganizationsAPI.read({ page_size: 1, role_level: 'notification_admin_role' }),
+        OrganizationsAPI.read({ id, role_level: 'auditor_role' }),
+        OrganizationsAPI.read({ id, role_level: 'admin_role' }),
       ]);
       setBreadcrumb(data);
       this.setState({
         organization: data,
-        loading: false,
-        isNotifAdmin: notifAdminRest.data.results.length > 0,
+        isNotifAdmin: notifAdminRes.data.results.length > 0,
         isAuditorOfThisOrg: auditorRes.data.results.length > 0,
         isAdminOfThisOrg: adminRes.data.results.length > 0
       });
-    } catch (error) {
-      handleHttpError(error) || this.setState({ error: true, loading: false });
+    } catch (err) {
+      this.setState(({ contentError: true }));
+    } finally {
+      this.setState({ contentLoading: false });
     }
   }
 
-  async fetchOrganization () {
+  async loadOrganization () {
     const {
       match,
       setBreadcrumb,
-      handleHttpError
     } = this.props;
+    const id = parseInt(match.params.id, 10);
 
+    this.setState({ contentError: false, contentLoading: true });
     try {
-      const { data } = await OrganizationsAPI.readDetail(parseInt(match.params.id, 10));
+      const { data } = await OrganizationsAPI.readDetail(id);
       setBreadcrumb(data);
-      this.setState({ organization: data, loading: false });
-    } catch (error) {
-      handleHttpError(error) || this.setState({ error: true, loading: false });
+      this.setState({ organization: data });
+    } catch (err) {
+      this.setState(({ contentError: true }));
+    } finally {
+      this.setState({ contentLoading: false });
     }
   }
 
@@ -105,8 +101,9 @@ class Organization extends Component {
 
     const {
       organization,
-      error,
-      loading,
+      contentError,
+      contentLoading,
+      isInitialized,
       isNotifAdmin,
       isAuditorOfThisOrg,
       isAdminOfThisOrg
@@ -134,25 +131,28 @@ class Organization extends Component {
     }
 
     let cardHeader = (
-      loading ? '' : (
-        <CardHeader style={{ padding: 0 }}>
-          <React.Fragment>
-            <div className="awx-orgTabs-container">
-              <RoutedTabs
-                match={match}
-                history={history}
-                labeltext={i18n._(t`Organization detail tabs`)}
-                tabsArray={tabsArray}
-              />
-              <CardCloseButton linkTo="/organizations" />
-              <div
-                className="awx-orgTabs__bottom-border"
-              />
-            </div>
-          </React.Fragment>
-        </CardHeader>
-      )
+      <CardHeader style={{ padding: 0 }}>
+        <React.Fragment>
+          <div className="awx-orgTabs-container">
+            <RoutedTabs
+              match={match}
+              history={history}
+              labeltext={i18n._(t`Organization detail tabs`)}
+              tabsArray={tabsArray}
+            />
+            <CardCloseButton linkTo="/organizations" />
+            <div
+              className="awx-orgTabs__bottom-border"
+            />
+          </div>
+        </React.Fragment>
+      </CardHeader>
     );
+
+    if (!isInitialized) {
+      cardHeader = null;
+    }
+
     if (!match) {
       cardHeader = null;
     }
@@ -161,10 +161,20 @@ class Organization extends Component {
       cardHeader = null;
     }
 
+    if (!contentLoading && contentError) {
+      return (
+        <PageSection>
+          <Card className="awx-c-card">
+            <ContentError />
+          </Card>
+        </PageSection>
+      );
+    }
+
     return (
       <PageSection>
         <Card className="awx-c-card">
-          { cardHeader }
+          {cardHeader}
           <Switch>
             <Redirect
               from="/organizations/:id"
@@ -220,18 +230,12 @@ class Organization extends Component {
                 )}
               />
             )}
-            {organization && (
-              <NotifyAndRedirect
-                to={`/organizations/${match.params.id}/details`}
-              />
-            )}
           </Switch>
-          {error ? 'error!' : ''}
-          {loading ? 'loading...' : ''}
         </Card>
       </PageSection>
     );
   }
 }
-export default withI18n()(withNetwork(withRouter(Organization)));
+
+export default withI18n()(withRouter(Organization));
 export { Organization as _Organization };
diff --git a/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx b/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx
index 2e654d347f..f26e9c0b2b 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx
@@ -2,13 +2,17 @@ import React, { Fragment } from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import AlertModal from '../../../../components/AlertModal';
 import PaginatedDataList, { ToolbarAddButton } from '../../../../components/PaginatedDataList';
 import DataListToolbar from '../../../../components/DataListToolbar';
 import OrganizationAccessItem from '../../components/OrganizationAccessItem';
 import DeleteRoleConfirmationModal from '../../components/DeleteRoleConfirmationModal';
 import AddResourceRole from '../../../../components/AddRole/AddResourceRole';
-import { withNetwork } from '../../../../contexts/Network';
-import { getQSConfig, parseNamespacedQueryString } from '../../../../util/qs';
+import {
+  getQSConfig,
+  encodeQueryString,
+  parseNamespacedQueryString
+} from '../../../../util/qs';
 import { Organization } from '../../../../types';
 import { OrganizationsAPI, TeamsAPI, UsersAPI } from '../../../../api';
 
@@ -25,183 +29,191 @@ class OrganizationAccess extends React.Component {
 
   constructor (props) {
     super(props);
-
-    this.readOrgAccessList = this.readOrgAccessList.bind(this);
-    this.confirmRemoveRole = this.confirmRemoveRole.bind(this);
-    this.cancelRemoveRole = this.cancelRemoveRole.bind(this);
-    this.removeRole = this.removeRole.bind(this);
-    this.toggleAddModal = this.toggleAddModal.bind(this);
-    this.handleSuccessfulRoleAdd = this.handleSuccessfulRoleAdd.bind(this);
-
     this.state = {
-      isLoading: false,
-      isInitialized: false,
-      isAddModalOpen: false,
-      error: null,
-      itemCount: 0,
       accessRecords: [],
-      roleToDelete: null,
-      roleToDeleteAccessRecord: null,
+      contentError: false,
+      contentLoading: true,
+      deletionError: false,
+      deletionRecord: null,
+      deletionRole: null,
+      isAddModalOpen: false,
+      itemCount: 0,
     };
+    this.loadAccessList = this.loadAccessList.bind(this);
+    this.handleAddClose = this.handleAddClose.bind(this);
+    this.handleAddOpen = this.handleAddOpen.bind(this);
+    this.handleAddSuccess = this.handleAddSuccess.bind(this);
+    this.handleDeleteCancel = this.handleDeleteCancel.bind(this);
+    this.handleDeleteConfirm = this.handleDeleteConfirm.bind(this);
+    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
+    this.handleDeleteOpen = this.handleDeleteOpen.bind(this);
   }
 
   componentDidMount () {
-    this.readOrgAccessList();
+    this.loadAccessList();
   }
 
   componentDidUpdate (prevProps) {
     const { location } = this.props;
-    if (location !== prevProps.location) {
-      this.readOrgAccessList();
+
+    const prevParams = parseNamespacedQueryString(QS_CONFIG, prevProps.location.search);
+    const currentParams = parseNamespacedQueryString(QS_CONFIG, location.search);
+
+    if (encodeQueryString(currentParams) !== encodeQueryString(prevParams)) {
+      this.loadAccessList();
     }
   }
 
-  async readOrgAccessList () {
-    const { organization, handleHttpError, location } = this.props;
-    this.setState({ isLoading: true });
+  async loadAccessList () {
+    const { organization, location } = this.props;
+    const params = parseNamespacedQueryString(QS_CONFIG, location.search);
+
+    this.setState({ contentError: false, contentLoading: true });
     try {
-      const { data } = await OrganizationsAPI.readAccessList(
-        organization.id,
-        parseNamespacedQueryString(QS_CONFIG, location.search)
-      );
-      this.setState({
-        itemCount: data.count || 0,
-        accessRecords: data.results || [],
-        isLoading: false,
-        isInitialized: true,
-      });
+      const {
+        data: {
+          results: accessRecords = [],
+          count: itemCount = 0
+        }
+      } = await OrganizationsAPI.readAccessList(organization.id, params);
+      this.setState({ itemCount, accessRecords });
     } catch (error) {
-      handleHttpError(error) || this.setState({
-        error,
-        isLoading: false,
-      });
+      this.setState({ contentError: true });
+    } finally {
+      this.setState({ contentLoading: false });
     }
   }
 
-  confirmRemoveRole (role, accessRecord) {
+  handleDeleteOpen (deletionRole, deletionRecord) {
+    this.setState({ deletionRole, deletionRecord });
+  }
+
+  handleDeleteCancel () {
+    this.setState({ deletionRole: null, deletionRecord: null });
+  }
+
+  handleDeleteErrorClose () {
     this.setState({
-      roleToDelete: role,
-      roleToDeleteAccessRecord: accessRecord,
+      deletionError: false,
+      deletionRecord: null,
+      deletionRole: null
     });
   }
 
-  cancelRemoveRole () {
-    this.setState({
-      roleToDelete: null,
-      roleToDeleteAccessRecord: null
-    });
-  }
+  async handleDeleteConfirm () {
+    const { deletionRole, deletionRecord } = this.state;
 
-  async removeRole () {
-    const { handleHttpError } = this.props;
-    const { roleToDelete: role, roleToDeleteAccessRecord: accessRecord } = this.state;
-    if (!role || !accessRecord) {
+    if (!deletionRole || !deletionRecord) {
       return;
     }
-    const type = typeof role.team_id === 'undefined' ? 'users' : 'teams';
-    this.setState({ isLoading: true });
+
+    let promise;
+    if (typeof deletionRole.team_id !== 'undefined') {
+      promise = TeamsAPI.disassociateRole(deletionRole.team_id, deletionRole.id);
+    } else {
+      promise = UsersAPI.disassociateRole(deletionRecord.id, deletionRole.id);
+    }
+
+    this.setState({ contentLoading: true });
     try {
-      if (type === 'teams') {
-        await TeamsAPI.disassociateRole(role.team_id, role.id);
-      } else {
-        await UsersAPI.disassociateRole(accessRecord.id, role.id);
-      }
+      await promise.then(this.loadAccessList);
       this.setState({
-        isLoading: false,
-        roleToDelete: null,
-        roleToDeleteAccessRecord: null,
+        deletionRole: null,
+        deletionRecord: null
       });
-      this.readOrgAccessList();
     } catch (error) {
-      handleHttpError(error) || this.setState({
-        error,
-        isLoading: false,
+      this.setState({
+        contentLoading: false,
+        deletionError: true
       });
     }
   }
 
-  toggleAddModal () {
-    const { isAddModalOpen } = this.state;
-    this.setState({
-      isAddModalOpen: !isAddModalOpen,
-    });
+  handleAddClose () {
+    this.setState({ isAddModalOpen: false });
   }
 
-  handleSuccessfulRoleAdd () {
-    this.toggleAddModal();
-    this.readOrgAccessList();
+  handleAddOpen () {
+    this.setState({ isAddModalOpen: true });
+  }
+
+  handleAddSuccess () {
+    this.setState({ isAddModalOpen: false });
+    this.loadAccessList();
   }
 
   render () {
     const { organization, i18n } = this.props;
     const {
-      isLoading,
-      isInitialized,
+      accessRecords,
+      contentError,
+      contentLoading,
+      deletionRole,
+      deletionRecord,
+      deletionError,
       itemCount,
       isAddModalOpen,
-      accessRecords,
-      roleToDelete,
-      roleToDeleteAccessRecord,
-      error,
     } = this.state;
-
     const canEdit = organization.summary_fields.user_capabilities.edit;
+    const isDeleteModalOpen = !contentLoading && !deletionError && deletionRole;
 
-    if (error) {
-      // TODO: better error state
-      return <div>{error.message}</div>;
-    }
-    // TODO: better loading state
     return (
       <Fragment>
-        {isLoading && (<div>Loading...</div>)}
-        {roleToDelete && (
-          <DeleteRoleConfirmationModal
-            role={roleToDelete}
-            username={roleToDeleteAccessRecord.username}
-            onCancel={this.cancelRemoveRole}
-            onConfirm={this.removeRole}
-          />
-        )}
-        {isInitialized && (
-          <PaginatedDataList
-            items={accessRecords}
-            itemCount={itemCount}
-            itemName="role"
-            qsConfig={QS_CONFIG}
-            toolbarColumns={[
-              { name: i18n._(t`Name`), key: 'first_name', isSortable: true },
-              { name: i18n._(t`Username`), key: 'username', isSortable: true },
-              { name: i18n._(t`Last Name`), key: 'last_name', isSortable: true },
-            ]}
-            renderToolbar={(props) => (
-              <DataListToolbar
-                {...props}
-                additionalControls={canEdit ? [
-                  <ToolbarAddButton key="add" onClick={this.toggleAddModal} />
-                ] : null}
-              />
-            )}
-            renderItem={accessRecord => (
-              <OrganizationAccessItem
-                key={accessRecord.id}
-                accessRecord={accessRecord}
-                onRoleDelete={this.confirmRemoveRole}
-              />
-            )}
-          />
-        )}
+        <PaginatedDataList
+          contentError={contentError}
+          contentLoading={contentLoading}
+          items={accessRecords}
+          itemCount={itemCount}
+          itemName="role"
+          qsConfig={QS_CONFIG}
+          toolbarColumns={[
+            { name: i18n._(t`Name`), key: 'first_name', isSortable: true },
+            { name: i18n._(t`Username`), key: 'username', isSortable: true },
+            { name: i18n._(t`Last Name`), key: 'last_name', isSortable: true },
+          ]}
+          renderToolbar={(props) => (
+            <DataListToolbar
+              {...props}
+              additionalControls={canEdit ? [
+                <ToolbarAddButton key="add" onClick={this.handleAddOpen} />
+              ] : null}
+            />
+          )}
+          renderItem={accessRecord => (
+            <OrganizationAccessItem
+              key={accessRecord.id}
+              accessRecord={accessRecord}
+              onRoleDelete={this.handleDeleteOpen}
+            />
+          )}
+        />
         {isAddModalOpen && (
           <AddResourceRole
-            onClose={this.toggleAddModal}
-            onSave={this.handleSuccessfulRoleAdd}
+            onClose={this.handleAddClose}
+            onSave={this.handleAddSuccess}
             roles={organization.summary_fields.object_roles}
           />
         )}
+        {isDeleteModalOpen && (
+          <DeleteRoleConfirmationModal
+            role={deletionRole}
+            username={deletionRecord.username}
+            onCancel={this.handleDeleteCancel}
+            onConfirm={this.handleDeleteConfirm}
+          />
+        )}
+        <AlertModal
+          isOpen={deletionError}
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          onClose={this.handleDeleteErrorClose}
+        >
+          {i18n._(t`Failed to delete role`)}
+        </AlertModal>
       </Fragment>
     );
   }
 }
 
 export { OrganizationAccess as _OrganizationAccess };
-export default withI18n()(withNetwork(withRouter(OrganizationAccess)));
+export default withI18n()(withRouter(OrganizationAccess));
diff --git a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
index 6aafd74b45..34e44af61c 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
@@ -4,9 +4,11 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { CardBody as PFCardBody, Button } from '@patternfly/react-core';
 import styled from 'styled-components';
+
 import { DetailList, Detail } from '../../../../components/DetailList';
-import { withNetwork } from '../../../../contexts/Network';
 import { ChipGroup, Chip } from '../../../../components/Chip';
+import ContentError from '../../../../components/ContentError';
+import ContentLoading from '../../../../components/ContentLoading';
 import { OrganizationsAPI } from '../../../../api';
 
 const CardBody = styled(PFCardBody)`
@@ -18,8 +20,9 @@ class OrganizationDetail extends Component {
     super(props);
 
     this.state = {
+      contentError: false,
+      contentLoading: true,
       instanceGroups: [],
-      error: false
     };
     this.loadInstanceGroups = this.loadInstanceGroups.bind(this);
   }
@@ -29,25 +32,23 @@ class OrganizationDetail extends Component {
   }
 
   async loadInstanceGroups () {
-    const {
-      handleHttpError,
-      match
-    } = this.props;
+    const { match: { params: { id } } } = this.props;
+
+    this.setState({ contentLoading: true });
     try {
-      const {
-        data
-      } = await OrganizationsAPI.readInstanceGroups(match.params.id);
-      this.setState({
-        instanceGroups: [...data.results]
-      });
+      const { data: { results = [] } } = await OrganizationsAPI.readInstanceGroups(id);
+      this.setState({ instanceGroups: [...results] });
     } catch (err) {
-      handleHttpError(err) || this.setState({ error: true });
+      this.setState({ contentError: true });
+    } finally {
+      this.setState({ contentLoading: false });
     }
   }
 
   render () {
     const {
-      error,
+      contentLoading,
+      contentError,
       instanceGroups,
     } = this.state;
 
@@ -65,6 +66,14 @@ class OrganizationDetail extends Component {
       i18n
     } = this.props;
 
+    if (contentLoading) {
+      return (<ContentLoading />);
+    }
+
+    if (contentError) {
+      return (<ContentError />);
+    }
+
     return (
       <CardBody>
         <DetailList>
@@ -116,10 +125,9 @@ class OrganizationDetail extends Component {
             </Button>
           </div>
         )}
-        {error ? 'error!' : ''}
       </CardBody>
     );
   }
 }
 
-export default withI18n()(withRouter(withNetwork(OrganizationDetail)));
+export default withI18n()(withRouter(OrganizationDetail));
diff --git a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
index 677dfe94f3..258b052c79 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom';
 import { CardBody } from '@patternfly/react-core';
 import OrganizationForm from '../../components/OrganizationForm';
 import { Config } from '../../../../contexts/Config';
-import { withNetwork } from '../../../../contexts/Network';
+
 import { OrganizationsAPI } from '../../../../api';
 
 class OrganizationEdit extends Component {
@@ -22,13 +22,13 @@ class OrganizationEdit extends Component {
   }
 
   async handleSubmit (values, groupsToAssociate, groupsToDisassociate) {
-    const { organization, handleHttpError } = this.props;
+    const { organization } = this.props;
     try {
       await OrganizationsAPI.update(organization.id, values);
       await this.submitInstanceGroups(groupsToAssociate, groupsToDisassociate);
       this.handleSuccess();
     } catch (err) {
-      handleHttpError(err) || this.setState({ error: err });
+      this.setState({ error: err });
     }
   }
 
@@ -43,8 +43,7 @@ class OrganizationEdit extends Component {
   }
 
   async submitInstanceGroups (groupsToAssociate, groupsToDisassociate) {
-    const { organization, handleHttpError } = this.props;
-
+    const { organization } = this.props;
     try {
       await Promise.all(
         groupsToAssociate.map(id => OrganizationsAPI.associateInstanceGroup(organization.id, id))
@@ -55,7 +54,7 @@ class OrganizationEdit extends Component {
         )
       );
     } catch (err) {
-      handleHttpError(err) || this.setState({ error: err });
+      this.setState({ error: err });
     }
   }
 
@@ -90,4 +89,4 @@ OrganizationEdit.contextTypes = {
 };
 
 export { OrganizationEdit as _OrganizationEdit };
-export default withNetwork(withRouter(OrganizationEdit));
+export default withRouter(OrganizationEdit);
diff --git a/src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx b/src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx
index 6fd667f0d5..54274d5f2e 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx
@@ -1,7 +1,10 @@
 import React, { Component, Fragment } from 'react';
-import { number, shape, func, string, bool } from 'prop-types';
+import { number, shape, string, bool } from 'prop-types';
 import { withRouter } from 'react-router-dom';
-import { withNetwork } from '../../../../contexts/Network';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+import AlertModal from '../../../../components/AlertModal';
 import PaginatedDataList from '../../../../components/PaginatedDataList';
 import NotificationListItem from '../../../../components/NotificationsList/NotificationListItem';
 import { getQSConfig, parseNamespacedQueryString } from '../../../../util/qs';
@@ -22,194 +25,159 @@ const COLUMNS = [
 class OrganizationNotifications extends Component {
   constructor (props) {
     super(props);
-
-    this.readNotifications = this.readNotifications.bind(this);
-    this.readSuccessesAndErrors = this.readSuccessesAndErrors.bind(this);
-    this.toggleNotification = this.toggleNotification.bind(this);
-
     this.state = {
-      isInitialized: false,
-      isLoading: false,
-      error: null,
+      contentError: false,
+      contentLoading: true,
+      toggleError: false,
+      toggleLoading: false,
       itemCount: 0,
       notifications: [],
       successTemplateIds: [],
       errorTemplateIds: [],
     };
+    this.handleNotificationToggle = this.handleNotificationToggle.bind(this);
+    this.handleNotificationErrorClose = this.handleNotificationErrorClose.bind(this);
+    this.loadNotifications = this.loadNotifications.bind(this);
   }
 
   componentDidMount () {
-    this.readNotifications();
+    this.loadNotifications();
   }
 
   componentDidUpdate (prevProps) {
     const { location } = this.props;
     if (location !== prevProps.location) {
-      this.readNotifications();
+      this.loadNotifications();
     }
   }
 
-  async readNotifications () {
-    const { id, handleHttpError, location } = this.props;
+  async loadNotifications () {
+    const { id, location } = this.props;
     const params = parseNamespacedQueryString(QS_CONFIG, location.search);
-    this.setState({ isLoading: true });
-    try {
-      const { data } = await OrganizationsAPI.readNotificationTemplates(id, params);
-      this.setState(
-        {
-          itemCount: data.count || 0,
-          notifications: data.results || [],
-          isLoading: false,
-          isInitialized: true,
-        },
-        this.readSuccessesAndErrors
-      );
-    } catch (error) {
-      handleHttpError(error) || this.setState({
-        error,
-        isLoading: false,
-      });
-    }
-  }
 
-  async readSuccessesAndErrors () {
-    const { handleHttpError, id } = this.props;
-    const { notifications } = this.state;
-    if (!notifications.length) {
-      return;
-    }
-    const ids = notifications.map(n => n.id).join(',');
+    this.setState({ contentError: false, contentLoading: true });
     try {
-      const successTemplatesPromise = OrganizationsAPI.readNotificationTemplatesSuccess(
-        id,
-        { id__in: ids }
-      );
-      const errorTemplatesPromise = OrganizationsAPI.readNotificationTemplatesError(
-        id,
-        { id__in: ids }
-      );
+      const {
+        data: {
+          count: itemCount = 0,
+          results: notifications = [],
+        }
+      } = await OrganizationsAPI.readNotificationTemplates(id, params);
 
-      const { data: successTemplates } = await successTemplatesPromise;
-      const { data: errorTemplates } = await errorTemplatesPromise;
+      let idMatchParams;
+      if (notifications.length > 0) {
+        idMatchParams = { id__in: notifications.map(n => n.id).join(',') };
+      } else {
+        idMatchParams = {};
+      }
+
+      const [
+        { data: successTemplates },
+        { data: errorTemplates },
+      ] = await Promise.all([
+        OrganizationsAPI.readNotificationTemplatesSuccess(id, idMatchParams),
+        OrganizationsAPI.readNotificationTemplatesError(id, idMatchParams),
+      ]);
 
       this.setState({
+        itemCount,
+        notifications,
         successTemplateIds: successTemplates.results.map(s => s.id),
         errorTemplateIds: errorTemplates.results.map(e => e.id),
       });
-    } catch (error) {
-      handleHttpError(error) || this.setState({
-        error,
-        isLoading: false,
+    } catch {
+      this.setState({ contentError: true });
+    } finally {
+      this.setState({ contentLoading: false });
+    }
+  }
+
+  async handleNotificationToggle (notificationId, isCurrentlyOn, status) {
+    const { id } = this.props;
+
+    let stateArrayName;
+    if (status === 'success') {
+      stateArrayName = 'successTemplateIds';
+    } else {
+      stateArrayName = 'errorTemplateIds';
+    }
+
+    let stateUpdateFunction;
+    if (isCurrentlyOn) {
+      // when switching off, remove the toggled notification id from the array
+      stateUpdateFunction = (prevState) => ({
+        [stateArrayName]: prevState[stateArrayName].filter(i => i !== notificationId)
+      });
+    } else {
+      // when switching on, add the toggled notification id to the array
+      stateUpdateFunction = (prevState) => ({
+        [stateArrayName]: prevState[stateArrayName].concat(notificationId)
       });
     }
-  }
 
-  toggleNotification = (notificationId, isCurrentlyOn, status) => {
-    if (status === 'success') {
-      if (isCurrentlyOn) {
-        this.disassociateSuccess(notificationId);
-      } else {
-        this.associateSuccess(notificationId);
-      }
-    } else if (status === 'error') {
-      if (isCurrentlyOn) {
-        this.disassociateError(notificationId);
-      } else {
-        this.associateError(notificationId);
-      }
-    }
-  };
-
-  async associateSuccess (notificationId) {
-    const { id, handleHttpError } = this.props;
+    this.setState({ toggleLoading: true });
     try {
-      await OrganizationsAPI.associateNotificationTemplatesSuccess(id, notificationId);
-      this.setState(prevState => ({
-        successTemplateIds: [...prevState.successTemplateIds, notificationId]
-      }));
+      await OrganizationsAPI.updateNotificationTemplateAssociation(
+        id,
+        notificationId,
+        status,
+        !isCurrentlyOn
+      );
+      this.setState(stateUpdateFunction);
     } catch (err) {
-      handleHttpError(err) || this.setState({ error: true });
+      this.setState({ toggleError: true });
+    } finally {
+      this.setState({ toggleLoading: false });
     }
   }
 
-  async disassociateSuccess (notificationId) {
-    const { id, handleHttpError } = this.props;
-    try {
-      await OrganizationsAPI.disassociateNotificationTemplatesSuccess(id, notificationId);
-      this.setState((prevState) => ({
-        successTemplateIds: prevState.successTemplateIds
-          .filter((templateId) => templateId !== notificationId)
-      }));
-    } catch (err) {
-      handleHttpError(err) || this.setState({ error: true });
-    }
-  }
-
-  async associateError (notificationId) {
-    const { id, handleHttpError } = this.props;
-    try {
-      await OrganizationsAPI.associateNotificationTemplatesError(id, notificationId);
-      this.setState(prevState => ({
-        errorTemplateIds: [...prevState.errorTemplateIds, notificationId]
-      }));
-    } catch (err) {
-      handleHttpError(err) || this.setState({ error: true });
-    }
-  }
-
-  async disassociateError (notificationId) {
-    const { id, handleHttpError } = this.props;
-    try {
-      await OrganizationsAPI.disassociateNotificationTemplatesError(id, notificationId);
-      this.setState((prevState) => ({
-        errorTemplateIds: prevState.errorTemplateIds
-          .filter((templateId) => templateId !== notificationId)
-      }));
-    } catch (err) {
-      handleHttpError(err) || this.setState({ error: true });
-    }
+  handleNotificationErrorClose () {
+    this.setState({ toggleError: false });
   }
 
   render () {
-    const { canToggleNotifications } = this.props;
+    const { canToggleNotifications, i18n } = this.props;
     const {
-      notifications,
+      contentError,
+      contentLoading,
+      toggleError,
+      toggleLoading,
       itemCount,
-      isLoading,
-      isInitialized,
-      error,
+      notifications,
       successTemplateIds,
       errorTemplateIds,
     } = this.state;
 
-    if (error) {
-      // TODO: better error state
-      return <div>{error.message}</div>;
-    }
-    // TODO: better loading state
     return (
       <Fragment>
-        {isLoading && (<div>Loading...</div>)}
-        {isInitialized && (
-          <PaginatedDataList
-            items={notifications}
-            itemCount={itemCount}
-            itemName="notification"
-            qsConfig={QS_CONFIG}
-            toolbarColumns={COLUMNS}
-            renderItem={(notification) => (
-              <NotificationListItem
-                key={notification.id}
-                notification={notification}
-                detailUrl={`/notifications/${notification.id}`}
-                canToggleNotifications={canToggleNotifications}
-                toggleNotification={this.toggleNotification}
-                errorTurnedOn={errorTemplateIds.includes(notification.id)}
-                successTurnedOn={successTemplateIds.includes(notification.id)}
-              />
-            )}
-          />
-        )}
+        <PaginatedDataList
+          contentError={contentError}
+          contentLoading={contentLoading}
+          items={notifications}
+          itemCount={itemCount}
+          itemName="notification"
+          qsConfig={QS_CONFIG}
+          toolbarColumns={COLUMNS}
+          renderItem={(notification) => (
+            <NotificationListItem
+              key={notification.id}
+              notification={notification}
+              detailUrl={`/notifications/${notification.id}`}
+              canToggleNotifications={canToggleNotifications && !toggleLoading}
+              toggleNotification={this.handleNotificationToggle}
+              errorTurnedOn={errorTemplateIds.includes(notification.id)}
+              successTurnedOn={successTemplateIds.includes(notification.id)}
+            />
+          )}
+        />
+        <AlertModal
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          isOpen={toggleError && !toggleLoading}
+          onClose={this.handleNotificationErrorClose}
+        >
+          {i18n._(t`Failed to toggle notification.`)}
+        </AlertModal>
       </Fragment>
     );
   }
@@ -218,11 +186,10 @@ class OrganizationNotifications extends Component {
 OrganizationNotifications.propTypes = {
   id: number.isRequired,
   canToggleNotifications: bool.isRequired,
-  handleHttpError: func.isRequired,
   location: shape({
     search: string.isRequired,
   }).isRequired,
 };
 
 export { OrganizationNotifications as _OrganizationNotifications };
-export default withNetwork(withRouter(OrganizationNotifications));
+export default withI18n()(withRouter(OrganizationNotifications));
diff --git a/src/pages/Organizations/screens/Organization/OrganizationTeams.jsx b/src/pages/Organizations/screens/Organization/OrganizationTeams.jsx
index 5f0cd85e8d..afa0dac525 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationTeams.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationTeams.jsx
@@ -1,9 +1,8 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import PaginatedDataList from '../../../../components/PaginatedDataList';
 import { getQSConfig, parseNamespacedQueryString } from '../../../../util/qs';
-import { withNetwork } from '../../../../contexts/Network';
 import { OrganizationsAPI } from '../../../../api';
 
 const QS_CONFIG = getQSConfig('team', {
@@ -16,32 +15,32 @@ class OrganizationTeams extends React.Component {
   constructor (props) {
     super(props);
 
-    this.readOrganizationTeamsList = this.readOrganizationTeamsList.bind(this);
+    this.loadOrganizationTeamsList = this.loadOrganizationTeamsList.bind(this);
 
     this.state = {
-      isInitialized: false,
-      isLoading: false,
-      error: null,
+      contentError: false,
+      contentLoading: true,
       itemCount: 0,
       teams: [],
     };
   }
 
   componentDidMount () {
-    this.readOrganizationTeamsList();
+    this.loadOrganizationTeamsList();
   }
 
   componentDidUpdate (prevProps) {
     const { location } = this.props;
     if (location !== prevProps.location) {
-      this.readOrganizationTeamsList();
+      this.loadOrganizationTeamsList();
     }
   }
 
-  async readOrganizationTeamsList () {
-    const { id, handleHttpError, location } = this.props;
+  async loadOrganizationTeamsList () {
+    const { id, location } = this.props;
     const params = parseNamespacedQueryString(QS_CONFIG, location.search);
-    this.setState({ isLoading: true, error: null });
+
+    this.setState({ contentLoading: true, contentError: false });
     try {
       const {
         data: { count = 0, results = [] },
@@ -49,38 +48,25 @@ class OrganizationTeams extends React.Component {
       this.setState({
         itemCount: count,
         teams: results,
-        isLoading: false,
-        isInitialized: true,
-      });
-    } catch (error) {
-      handleHttpError(error) || this.setState({
-        error,
-        isLoading: false,
       });
+    } catch {
+      this.setState({ contentError: true });
+    } finally {
+      this.setState({ contentLoading: false });
     }
   }
 
   render () {
-    const { teams, itemCount, isLoading, isInitialized, error } = this.state;
-
-    if (error) {
-      // TODO: better error state
-      return <div>{error.message}</div>;
-    }
-
-    // TODO: better loading state
+    const { contentError, contentLoading, teams, itemCount } = this.state;
     return (
-      <Fragment>
-        {isLoading && (<div>Loading...</div>)}
-        {isInitialized && (
-          <PaginatedDataList
-            items={teams}
-            itemCount={itemCount}
-            itemName="team"
-            qsConfig={QS_CONFIG}
-          />
-        )}
-      </Fragment>
+      <PaginatedDataList
+        contentError={contentError}
+        contentLoading={contentLoading}
+        items={teams}
+        itemCount={itemCount}
+        itemName="team"
+        qsConfig={QS_CONFIG}
+      />
     );
   }
 }
@@ -90,4 +76,4 @@ OrganizationTeams.propTypes = {
 };
 
 export { OrganizationTeams as _OrganizationTeams };
-export default withNetwork(withRouter(OrganizationTeams));
+export default withRouter(OrganizationTeams);
diff --git a/src/pages/Organizations/screens/OrganizationAdd.jsx b/src/pages/Organizations/screens/OrganizationAdd.jsx
index d5a537a633..a4faed6058 100644
--- a/src/pages/Organizations/screens/OrganizationAdd.jsx
+++ b/src/pages/Organizations/screens/OrganizationAdd.jsx
@@ -12,7 +12,6 @@ import {
 } from '@patternfly/react-core';
 
 import { Config } from '../../../contexts/Config';
-import { withNetwork } from '../../../contexts/Network';
 import CardCloseButton from '../../../components/CardCloseButton';
 import OrganizationForm from '../components/OrganizationForm';
 import { OrganizationsAPI } from '../../../api';
@@ -20,29 +19,20 @@ import { OrganizationsAPI } from '../../../api';
 class OrganizationAdd extends React.Component {
   constructor (props) {
     super(props);
-
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
-    this.handleSuccess = this.handleSuccess.bind(this);
-
-    this.state = {
-      error: '',
-    };
+    this.state = { error: '' };
   }
 
   async handleSubmit (values, groupsToAssociate) {
-    const { handleHttpError } = this.props;
+    const { history } = this.props;
     try {
       const { data: response } = await OrganizationsAPI.create(values);
-      try {
-        await Promise.all(groupsToAssociate.map(id => OrganizationsAPI
-          .associateInstanceGroup(response.id, id)));
-        this.handleSuccess(response.id);
-      } catch (err) {
-        handleHttpError(err) || this.setState({ error: err });
-      }
-    } catch (err) {
-      this.setState({ error: err });
+      await Promise.all(groupsToAssociate.map(id => OrganizationsAPI
+        .associateInstanceGroup(response.id, id)));
+      history.push(`/organizations/${response.id}`);
+    } catch (error) {
+      this.setState({ error });
     }
   }
 
@@ -51,11 +41,6 @@ class OrganizationAdd extends React.Component {
     history.push('/organizations');
   }
 
-  handleSuccess (id) {
-    const { history } = this.props;
-    history.push(`/organizations/${id}`);
-  }
-
   render () {
     const { error } = this.state;
     const { i18n } = this.props;
@@ -94,4 +79,4 @@ OrganizationAdd.contextTypes = {
 };
 
 export { OrganizationAdd as _OrganizationAdd };
-export default withI18n()(withNetwork(withRouter(OrganizationAdd)));
+export default withI18n()(withRouter(OrganizationAdd));
diff --git a/src/pages/Organizations/screens/OrganizationsList.jsx b/src/pages/Organizations/screens/OrganizationsList.jsx
index c8bd1350c1..7d72efba76 100644
--- a/src/pages/Organizations/screens/OrganizationsList.jsx
+++ b/src/pages/Organizations/screens/OrganizationsList.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -8,13 +8,13 @@ import {
   PageSectionVariants,
 } from '@patternfly/react-core';
 
-import { withNetwork } from '../../../contexts/Network';
 import PaginatedDataList, {
   ToolbarDeleteButton,
   ToolbarAddButton
 } from '../../../components/PaginatedDataList';
 import DataListToolbar from '../../../components/DataListToolbar';
 import OrganizationListItem from '../components/OrganizationListItem';
+import AlertModal from '../../../components/AlertModal';
 import { getQSConfig, parseNamespacedQueryString } from '../../../util/qs';
 import { OrganizationsAPI } from '../../../api';
 
@@ -29,29 +29,30 @@ class OrganizationsList extends Component {
     super(props);
 
     this.state = {
-      error: null,
-      isLoading: true,
-      isInitialized: false,
+      contentLoading: true,
+      contentError: false,
+      deletionError: false,
       organizations: [],
-      selected: []
+      selected: [],
+      itemCount: 0,
+      actions: null,
     };
 
     this.handleSelectAll = this.handleSelectAll.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
-    this.fetchOptionsOrganizations = this.fetchOptionsOrganizations.bind(this);
-    this.fetchOrganizations = this.fetchOrganizations.bind(this);
     this.handleOrgDelete = this.handleOrgDelete.bind(this);
+    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
+    this.loadOrganizations = this.loadOrganizations.bind(this);
   }
 
   componentDidMount () {
-    this.fetchOptionsOrganizations();
-    this.fetchOrganizations();
+    this.loadOrganizations();
   }
 
   componentDidUpdate (prevProps) {
     const { location } = this.props;
     if (location !== prevProps.location) {
-      this.fetchOrganizations();
+      this.loadOrganizations();
     }
   }
 
@@ -72,63 +73,54 @@ class OrganizationsList extends Component {
     }
   }
 
+  handleDeleteErrorClose () {
+    this.setState({ deletionError: false });
+  }
+
   async handleOrgDelete () {
     const { selected } = this.state;
-    const { handleHttpError } = this.props;
-    let errorHandled;
 
+    this.setState({ contentLoading: true, deletionError: false });
     try {
       await Promise.all(selected.map((org) => OrganizationsAPI.destroy(org.id)));
-      this.setState({
-        selected: []
-      });
+      this.setState({ selected: [] });
     } catch (err) {
-      errorHandled = handleHttpError(err);
+      this.setState({ deletionError: true });
     } finally {
-      if (!errorHandled) {
-        this.fetchOrganizations();
-      }
+      await this.loadOrganizations();
     }
   }
 
-  async fetchOrganizations () {
-    const { handleHttpError, location } = this.props;
+  async loadOrganizations () {
+    const { location } = this.props;
+    const { actions: cachedActions } = this.state;
     const params = parseNamespacedQueryString(QS_CONFIG, location.search);
 
-    this.setState({ error: false, isLoading: true });
+    let optionsPromise;
+    if (cachedActions) {
+      optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
+    } else {
+      optionsPromise = OrganizationsAPI.readOptions();
+    }
 
+    const promises = Promise.all([
+      OrganizationsAPI.read(params),
+      optionsPromise,
+    ]);
+
+    this.setState({ contentError: false, contentLoading: true });
     try {
-      const { data } = await OrganizationsAPI.read(params);
-      const { count, results } = data;
-
-      const stateToUpdate = {
+      const [{ data: { count, results } }, { data: { actions } }] = await promises;
+      this.setState({
+        actions,
         itemCount: count,
         organizations: results,
         selected: [],
-        isLoading: false,
-        isInitialized: true,
-      };
-
-      this.setState(stateToUpdate);
+      });
     } catch (err) {
-      handleHttpError(err) || this.setState({ error: true, isLoading: false });
-    }
-  }
-
-  async fetchOptionsOrganizations () {
-    try {
-      const { data } = await OrganizationsAPI.readOptions();
-      const { actions } = data;
-
-      const stateToUpdate = {
-        canAdd: Object.prototype.hasOwnProperty.call(actions, 'POST')
-      };
-
-      this.setState(stateToUpdate);
-    } catch (err) {
-      this.setState({ error: true });
+      this.setState(({ contentError: true }));
     } finally {
-      this.setState({ isLoading: false });
+      this.setState({ contentLoading: false });
     }
   }
 
@@ -137,23 +129,26 @@ class OrganizationsList extends Component {
       medium,
     } = PageSectionVariants;
     const {
-      canAdd,
+      actions,
       itemCount,
-      error,
-      isLoading,
-      isInitialized,
+      contentError,
+      contentLoading,
+      deletionError,
       selected,
-      organizations
+      organizations,
     } = this.state;
     const { match, i18n } = this.props;
 
+    const canAdd = actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
     const isAllSelected = selected.length === organizations.length;
 
     return (
-      <PageSection variant={medium}>
-        <Card>
-          {isInitialized && (
+      <Fragment>
+        <PageSection variant={medium}>
+          <Card>
             <PaginatedDataList
+              contentError={contentError}
+              contentLoading={contentLoading}
               items={organizations}
               itemCount={itemCount}
               itemName="organization"
@@ -196,14 +191,20 @@ class OrganizationsList extends Component {
                   : null
               }
             />
-          )}
-          { isLoading ? <div>loading...</div> : '' }
-          { error ? <div>error</div> : '' }
-        </Card>
-      </PageSection>
+          </Card>
+        </PageSection>
+        <AlertModal
+          isOpen={deletionError}
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          onClose={this.handleDeleteErrorClose}
+        >
+          {i18n._(t`Failed to delete one or more organizations.`)}
+        </AlertModal>
+      </Fragment>
     );
   }
 }
 
 export { OrganizationsList as _OrganizationsList };
-export default withI18n()(withNetwork(withRouter(OrganizationsList)));
+export default withI18n()(withRouter(OrganizationsList));
diff --git a/src/pages/Templates/Templates.jsx b/src/pages/Templates/Templates.jsx
index 4a0e9d6470..bcbd27bdec 100644
--- a/src/pages/Templates/Templates.jsx
+++ b/src/pages/Templates/Templates.jsx
@@ -2,8 +2,6 @@ import React, { Component, Fragment } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Route, withRouter, Switch } from 'react-router-dom';
-import { NetworkProvider } from '../../contexts/Network';
-import { withRootDialog } from '../../contexts/RootDialog';
 
 import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
 import TemplatesList from './TemplatesList';
@@ -21,32 +19,12 @@ class Templates extends Component {
   }
 
   render () {
-    const { match, history, setRootDialogMessage, i18n } = this.props;
+    const { match } = this.props;
     const { breadcrumbConfig } = this.state;
     return (
       <Fragment>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
-          <Route
-            path={`${match.path}/:templateType/:id`}
-            render={({ match: newRouteMatch }) => (
-              <NetworkProvider
-                handle404={() => {
-                  history.replace('/templates');
-                  setRootDialogMessage({
-                    title: '404',
-                    bodyText: (
-                      <Fragment>
-                        {i18n._(t`Cannot find template with ID`)}
-                        <strong>{` ${newRouteMatch.params.id}`}</strong>
-                      </Fragment>
-                    ),
-                    variant: 'warning'
-                  });
-                }}
-              />
-            )}
-          />
           <Route
             path={`${match.path}`}
             render={() => (
@@ -60,4 +38,4 @@ class Templates extends Component {
 }
 
 export { Templates as _Templates };
-export default withI18n()(withRootDialog(withRouter(Templates)));
+export default withI18n()(withRouter(Templates));
diff --git a/src/pages/Templates/TemplatesList.jsx b/src/pages/Templates/TemplatesList.jsx
index e45c2d5aa4..673c940567 100644
--- a/src/pages/Templates/TemplatesList.jsx
+++ b/src/pages/Templates/TemplatesList.jsx
@@ -7,7 +7,6 @@ import {
   PageSection,
   PageSectionVariants,
 } from '@patternfly/react-core';
-import { withNetwork } from '../../contexts/Network';
 import { UnifiedJobTemplatesAPI } from '../../api';
 
 import { getQSConfig, parseNamespacedQueryString } from '../../util/qs';
@@ -29,25 +28,25 @@ class TemplatesList extends Component {
     super(props);
 
     this.state = {
-      error: null,
-      isLoading: true,
-      isInitialized: false,
+      contentError: false,
+      contentLoading: true,
       selected: [],
       templates: [],
+      itemCount: 0,
     };
-    this.readUnifiedJobTemplates = this.readUnifiedJobTemplates.bind(this);
+    this.loadUnifiedJobTemplates = this.loadUnifiedJobTemplates.bind(this);
     this.handleSelectAll = this.handleSelectAll.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
   }
 
   componentDidMount () {
-    this.readUnifiedJobTemplates();
+    this.loadUnifiedJobTemplates();
   }
 
   componentDidUpdate (prevProps) {
     const { location } = this.props;
     if (location !== prevProps.location) {
-      this.readUnifiedJobTemplates();
+      this.loadUnifiedJobTemplates();
     }
   }
 
@@ -66,33 +65,29 @@ class TemplatesList extends Component {
     }
   }
 
-  async readUnifiedJobTemplates () {
-    const { handleHttpError, location } = this.props;
-    this.setState({ error: false, isLoading: true });
+  async loadUnifiedJobTemplates () {
+    const { location } = this.props;
     const params = parseNamespacedQueryString(QS_CONFIG, location.search);
 
+    this.setState({ contentError: false, contentLoading: true });
     try {
-      const { data } = await UnifiedJobTemplatesAPI.read(params);
-      const { count, results } = data;
-
-      const stateToUpdate = {
+      const { data: { count, results } } = await UnifiedJobTemplatesAPI.read(params);
+      this.setState({
         itemCount: count,
         templates: results,
         selected: [],
-        isInitialized: true,
-        isLoading: false,
-      };
-      this.setState(stateToUpdate);
+      });
     } catch (err) {
-      handleHttpError(err) || this.setState({ error: true, isLoading: false });
+      this.setState({ contentError: true });
+    } finally {
+      this.setState({ contentLoading: false });
     }
   }
 
   render () {
     const {
-      error,
-      isInitialized,
-      isLoading,
+      contentError,
+      contentLoading,
       templates,
       itemCount,
       selected,
@@ -106,44 +101,43 @@ class TemplatesList extends Component {
     return (
       <PageSection variant={medium}>
         <Card>
-          {isInitialized && (
-            <PaginatedDataList
-              items={templates}
-              itemCount={itemCount}
-              itemName={i18n._(t`Template`)}
-              qsConfig={QS_CONFIG}
-              toolbarColumns={[
-                { name: i18n._(t`Name`), key: 'name', isSortable: true },
-                { name: i18n._(t`Modified`), key: 'modified', isSortable: true, isNumeric: true },
-                { name: i18n._(t`Created`), key: 'created', isSortable: true, isNumeric: true },
-              ]}
-              renderToolbar={(props) => (
-                <DatalistToolbar
-                  {...props}
-                  showSelectAll
-                  showExpandCollapse
-                  isAllSelected={isAllSelected}
-                  onSelectAll={this.handleSelectAll}
-                />
-              )}
-              renderItem={(template) => (
-                <TemplateListItem
-                  key={template.id}
-                  value={template.name}
-                  template={template}
-                  detailUrl={`${match.url}/${template.type}/${template.id}`}
-                  onSelect={() => this.handleSelect(template)}
-                  isSelected={selected.some(row => row.id === template.id)}
-                />
-              )}
-            />
-          )}
-          {isLoading ? <div>loading....</div> : ''}
-          {error ? <div>error</div> : '' }
+          <PaginatedDataList
+            contentError={contentError}
+            contentLoading={contentLoading}
+            items={templates}
+            itemCount={itemCount}
+            itemName={i18n._(t`Template`)}
+            qsConfig={QS_CONFIG}
+            toolbarColumns={[
+              { name: i18n._(t`Name`), key: 'name', isSortable: true },
+              { name: i18n._(t`Modified`), key: 'modified', isSortable: true, isNumeric: true },
+              { name: i18n._(t`Created`), key: 'created', isSortable: true, isNumeric: true },
+            ]}
+            renderToolbar={(props) => (
+              <DatalistToolbar
+                {...props}
+                showSelectAll
+                showExpandCollapse
+                isAllSelected={isAllSelected}
+                onSelectAll={this.handleSelectAll}
+              />
+            )}
+            renderItem={(template) => (
+              <TemplateListItem
+                key={template.id}
+                value={template.name}
+                template={template}
+                detailUrl={`${match.url}/${template.type}/${template.id}`}
+                onSelect={() => this.handleSelect(template)}
+                isSelected={selected.some(row => row.id === template.id)}
+              />
+            )}
+          />
         </Card>
       </PageSection>
     );
   }
 }
+
 export { TemplatesList as _TemplatesList };
-export default withI18n()(withNetwork(withRouter(TemplatesList)));
+export default withI18n()(withRouter(TemplatesList));
diff --git a/src/util/auth.js b/src/util/auth.js
new file mode 100644
index 0000000000..f83d1797b3
--- /dev/null
+++ b/src/util/auth.js
@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/prefer-default-export
+export function isAuthenticated () {
+  const parsed = (`; ${document.cookie}`).split('; userLoggedIn=');
+  if (parsed.length === 2) {
+    return parsed.pop().split(';').shift() === 'true';
+  }
+  return false;
+}