From 457c6287a2ca5bc60f424ecc53378579ef2548e8 Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Mon, 13 May 2019 14:56:36 -0400
Subject: [PATCH] General cleanup.

- Fix tests.
- Update snapshots.
- Remove old import statement.
- Add element ids for Sort and Search Components.
---
 __tests__/components/DataListToolbar.test.jsx |   27 +-
 .../DeleteToolbarButton.test.jsx.snap         |  117 +-
 .../NotificationListItem.test.jsx.snap        |  544 ++--
 .../OrganizationNotifications.test.jsx.snap   | 2811 +++++++++++------
 .../DataListToolbar/DataListToolbar.jsx       |   87 +-
 src/components/Search/Search.jsx              |    1 +
 src/components/Sort/Sort.jsx                  |    3 +-
 src/index.jsx                                 |    1 -
 8 files changed, 2317 insertions(+), 1274 deletions(-)

diff --git a/__tests__/components/DataListToolbar.test.jsx b/__tests__/components/DataListToolbar.test.jsx
index 8bf673d693..c227291c77 100644
--- a/__tests__/components/DataListToolbar.test.jsx
+++ b/__tests__/components/DataListToolbar.test.jsx
@@ -57,10 +57,9 @@ describe('<DataListToolbar />', () => {
   });
 
   test('dropdown items sortable columns work', () => {
-    const sortDropdownToggleSelector = '.pf-l-toolbar__group.sortDropdownGroup .pf-l-toolbar__item button';
-    const sortDropdownItemsSelector = '.pf-l-toolbar__group.sortDropdownGroup button.pf-c-dropdown__menu-item';
-    const searchDropdownToggleSelector = '.pf-c-dropdown.searchKeyDropdown .pf-c-dropdown__toggle';
-    const searchDropdownItemsSelector = '.pf-c-dropdown.searchKeyDropdown button.pf-c-dropdown__menu-item';
+    const sortDropdownToggleSelector = 'button[id="awx-sort"]';
+    const searchDropdownToggleSelector = 'button[id="awx-search"]';
+    const dropdownMenuItems = 'DropdownMenu > ul';
 
     const multipleColumns = [
       { name: 'Foo', key: 'foo', isSortable: true },
@@ -80,12 +79,10 @@ describe('<DataListToolbar />', () => {
       />
     );
     const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector);
-    expect(sortDropdownToggle.length).toBe(2);
-    sortDropdownToggle.at(1).simulate('click');
-    sortDropdownToggle.at(0).simulate('click');
+    expect(sortDropdownToggle.length).toBe(1);
+    sortDropdownToggle.simulate('click');
     toolbar.update();
-
-    const sortDropdownItems = toolbar.find(sortDropdownItemsSelector);
+    const sortDropdownItems = toolbar.find(dropdownMenuItems).children();
     expect(sortDropdownItems.length).toBe(2);
 
     const mockedSortEvent = { target: { innerText: 'Bar' } };
@@ -101,13 +98,13 @@ describe('<DataListToolbar />', () => {
     toolbar.update();
 
     const sortDropdownToggleDescending = toolbar.find(sortDropdownToggleSelector);
-    expect(sortDropdownToggleDescending.length).toBe(2);
-    sortDropdownToggleDescending.at(1).simulate('click');
-    sortDropdownToggleDescending.at(0).simulate('click');
+    expect(sortDropdownToggleDescending.length).toBe(1);
+    sortDropdownToggleDescending.simulate('click');
     toolbar.update();
 
-    const sortDropdownItemsDescending = toolbar.find(sortDropdownItemsSelector);
+    const sortDropdownItemsDescending = toolbar.find(dropdownMenuItems).children();
     expect(sortDropdownItemsDescending.length).toBe(2);
+    sortDropdownToggleDescending.simulate('click'); // toggle close the sort dropdown
 
     const mockedSortEventDescending = { target: { innerText: 'Bar' } };
     sortDropdownItems.at(0).simulate('click', mockedSortEventDescending);
@@ -115,10 +112,10 @@ describe('<DataListToolbar />', () => {
 
     const searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
     expect(searchDropdownToggle.length).toBe(1);
-    searchDropdownToggle.at(0).simulate('click');
+    searchDropdownToggle.simulate('click');
     toolbar.update();
 
-    const searchDropdownItems = toolbar.find(searchDropdownItemsSelector);
+    const searchDropdownItems = toolbar.find(dropdownMenuItems).children();
     expect(searchDropdownItems.length).toBe(3);
 
     const mockedSearchEvent = { target: { innerText: 'Bar' } };
diff --git a/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap b/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap
index 3a181290d8..3315e9feb0 100644
--- a/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap
+++ b/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap
@@ -69,57 +69,92 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
         trigger="mouseenter focus"
         zIndex={9999}
       >
-        <Button
+        <ToolbarDeleteButton__Button
           aria-label="Delete"
-          className="awx-ToolBarBtn"
-          component="button"
-          isActive={false}
-          isBlock={false}
           isDisabled={true}
-          isFocus={false}
-          isHover={false}
           onClick={[Function]}
-          type="button"
           variant="plain"
         >
-          <button
-            aria-disabled={null}
+          <StyledComponent
             aria-label="Delete"
-            className="pf-c-button pf-m-plain pf-m-disabled awx-ToolBarBtn"
-            disabled={true}
+            forwardedComponent={
+              Object {
+                "$$typeof": Symbol(react.forward_ref),
+                "attrs": Array [],
+                "componentStyle": ComponentStyle {
+                  "componentId": "ToolbarDeleteButton__Button-sc-1e3r0eg-0",
+                  "isStatic": true,
+                  "lastClassName": "iyjqWq",
+                  "rules": Array [
+                    "width:30px;height:30px;display:flex;justify-content:center;margin-right:20px;border-radius:3px;padding:0;&:disabled{cursor:not-allowed;&:hover{background-color:white;> svg{color:#d2d2d2;}}}&:hover{background-color:#d9534f;> svg{color:white;}}",
+                  ],
+                },
+                "displayName": "ToolbarDeleteButton__Button",
+                "foldedComponentIds": Array [],
+                "render": [Function],
+                "styledComponentId": "ToolbarDeleteButton__Button-sc-1e3r0eg-0",
+                "target": [Function],
+                "toString": [Function],
+                "warnTooManyClasses": [Function],
+                "withComponent": [Function],
+              }
+            }
+            forwardedRef={null}
+            isDisabled={true}
             onClick={[Function]}
-            tabIndex={null}
-            type="button"
+            variant="plain"
           >
-            <TrashAltIcon
-              className="awx-ToolBarTrashCanIcon"
-              color="currentColor"
-              size="sm"
-              title={null}
+            <Button
+              aria-label="Delete"
+              className="ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
+              component="button"
+              isActive={false}
+              isBlock={false}
+              isDisabled={true}
+              isFocus={false}
+              isHover={false}
+              onClick={[Function]}
+              type="button"
+              variant="plain"
             >
-              <svg
-                aria-hidden={true}
-                aria-labelledby={null}
-                className="awx-ToolBarTrashCanIcon"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
-                viewBox="0 0 448 512"
-                width="1em"
+              <button
+                aria-disabled={null}
+                aria-label="Delete"
+                className="pf-c-button pf-m-plain pf-m-disabled ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
+                disabled={true}
+                onClick={[Function]}
+                tabIndex={null}
+                type="button"
               >
-                <path
-                  d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
-                  transform=""
-                />
-              </svg>
-            </TrashAltIcon>
-          </button>
-        </Button>
+                <TrashAltIcon
+                  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="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
+                      transform=""
+                    />
+                  </svg>
+                </TrashAltIcon>
+              </button>
+            </Button>
+          </StyledComponent>
+        </ToolbarDeleteButton__Button>
         <Portal
           containerInfo={
             <div>
diff --git a/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap b/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
index 47bf1aee3d..ad97bed524 100644
--- a/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
+++ b/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
@@ -41,20 +41,8 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
               className=""
               dataListCells={
                 Array [
-                  <DataListCell
-                    alignRight={false}
-                    className=""
-                    isFilled={true}
-                    isIcon={false}
-                    width={1}
-                  >
-                    <Link
-                      replace={false}
-                      style={
-                        Object {
-                          "marginRight": "1.5em",
-                        }
-                      }
+                  <ForwardRef>
+                    <ForwardRef
                       to={
                         Object {
                           "pathname": "/foo",
@@ -66,51 +54,33 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                       >
                         Foo
                       </b>
-                    </Link>
-                    <Badge
-                      className=""
+                    </ForwardRef>
+                    <ForwardRef
                       isRead={true}
-                      style={
-                        Object {
-                          "textTransform": "capitalize",
-                        }
-                      }
                     >
                       slack
-                    </Badge>
-                  </DataListCell>,
-                  <DataListCell
-                    alignRight={false}
-                    className=""
-                    isFilled={true}
-                    isIcon={false}
-                    style={
-                      Object {
-                        "display": "flex",
-                        "justifyContent": "flex-end",
-                      }
-                    }
-                    width={1}
+                    </ForwardRef>
+                  </ForwardRef>,
+                  <ForwardRef
+                    righthalf="true"
                   >
-                    <Switch
+                    <ForwardRef
                       aria-label="Toggle notification success"
-                      className=""
                       id="notification-9000-success-toggle"
                       isChecked={false}
                       isDisabled={false}
                       label="Successful"
                       onChange={[Function]}
                     />
-                    <Switch
+                    <ForwardRef
                       aria-label="Toggle notification failure"
-                      className=""
                       id="notification-9000-error-toggle"
                       isChecked={false}
                       isDisabled={false}
                       label="Failure"
                       onChange={[Function]}
                     />
-                  </DataListCell>,
+                  </ForwardRef>,
                 ]
               }
               key=".0"
@@ -119,170 +89,366 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
               <div
                 className="pf-c-data-list__item-content"
               >
-                <DataListCell
-                  alignRight={false}
-                  className=""
-                  isFilled={true}
-                  isIcon={false}
+                <NotificationListItem__DataListCell
                   key="name"
-                  width={1}
                 >
-                  <div
-                    className="pf-c-data-list__cell"
-                  >
-                    <Link
-                      replace={false}
-                      style={
-                        Object {
-                          "marginRight": "1.5em",
-                        }
-                      }
-                      to={
-                        Object {
-                          "pathname": "/foo",
-                        }
-                      }
-                    >
-                      <a
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "marginRight": "1.5em",
-                          }
-                        }
-                      >
-                        <b
-                          id="items-list-item-9000"
-                        >
-                          Foo
-                        </b>
-                      </a>
-                    </Link>
-                    <Badge
-                      className=""
-                      isRead={true}
-                      style={
-                        Object {
-                          "textTransform": "capitalize",
-                        }
-                      }
-                    >
-                      <span
-                        className="pf-c-badge pf-m-read"
-                        style={
-                          Object {
-                            "textTransform": "capitalize",
-                          }
-                        }
-                      >
-                        slack
-                      </span>
-                    </Badge>
-                  </div>
-                </DataListCell>
-                <DataListCell
-                  alignRight={false}
-                  className=""
-                  isFilled={true}
-                  isIcon={false}
-                  key="toggles"
-                  style={
-                    Object {
-                      "display": "flex",
-                      "justifyContent": "flex-end",
-                    }
-                  }
-                  width={1}
-                >
-                  <div
-                    className="pf-c-data-list__cell"
-                    style={
+                  <StyledComponent
+                    forwardedComponent={
                       Object {
-                        "display": "flex",
-                        "justifyContent": "flex-end",
+                        "$$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}
                   >
-                    <Switch
-                      aria-label="Toggle notification success"
-                      className=""
-                      id="notification-9000-success-toggle"
-                      isChecked={false}
-                      isDisabled={false}
-                      label="Successful"
-                      onChange={[Function]}
+                    <DataListCell
+                      alignRight={false}
+                      className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                      isFilled={true}
+                      isIcon={false}
+                      width={1}
                     >
-                      <label
-                        className="pf-c-switch"
-                        htmlFor="notification-9000-success-toggle"
+                      <div
+                        className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
                       >
-                        <input
+                        <Styled(Link)
+                          to={
+                            Object {
+                              "pathname": "/foo",
+                            }
+                          }
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-bdVaJa",
+                                  "isStatic": true,
+                                  "lastClassName": "eBseNd",
+                                  "rules": Array [
+                                    "margin-right: 1.5em;",
+                                  ],
+                                },
+                                "displayName": "Styled(Link)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-bdVaJa",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                            to={
+                              Object {
+                                "pathname": "/foo",
+                              }
+                            }
+                          >
+                            <Link
+                              className="sc-bdVaJa eBseNd"
+                              replace={false}
+                              to={
+                                Object {
+                                  "pathname": "/foo",
+                                }
+                              }
+                            >
+                              <a
+                                className="sc-bdVaJa eBseNd"
+                                onClick={[Function]}
+                              >
+                                <b
+                                  id="items-list-item-9000"
+                                >
+                                  Foo
+                                </b>
+                              </a>
+                            </Link>
+                          </StyledComponent>
+                        </Styled(Link)>
+                        <Styled(Badge)
+                          isRead={true}
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-bwzfXH",
+                                  "isStatic": true,
+                                  "lastClassName": "chTbOZ",
+                                  "rules": Array [
+                                    "text-transform: capitalize;",
+                                  ],
+                                },
+                                "displayName": "Styled(Badge)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-bwzfXH",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                            isRead={true}
+                          >
+                            <Badge
+                              className="sc-bwzfXH chTbOZ"
+                              isRead={true}
+                            >
+                              <span
+                                className="pf-c-badge pf-m-read sc-bwzfXH chTbOZ"
+                              >
+                                slack
+                              </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"
-                          checked={false}
-                          className="pf-c-switch__input"
-                          disabled={false}
                           id="notification-9000-success-toggle"
+                          isChecked={false}
+                          isDisabled={false}
+                          label="Successful"
                           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>
-                    <Switch
-                      aria-label="Toggle notification failure"
-                      className=""
-                      id="notification-9000-error-toggle"
-                      isChecked={false}
-                      isDisabled={false}
-                      label="Failure"
-                      onChange={[Function]}
-                    >
-                      <label
-                        className="pf-c-switch"
-                        htmlFor="notification-9000-error-toggle"
-                      >
-                        <input
+                          <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-9000-success-toggle"
+                            isChecked={false}
+                            isDisabled={false}
+                            label="Successful"
+                            onChange={[Function]}
+                          >
+                            <Switch
+                              aria-label="Toggle notification success"
+                              className="NotificationListItem__Switch-j7c411-1 ceuHGn"
+                              id="notification-9000-success-toggle"
+                              isChecked={false}
+                              isDisabled={false}
+                              label="Successful"
+                              onChange={[Function]}
+                            >
+                              <label
+                                className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                htmlFor="notification-9000-success-toggle"
+                              >
+                                <input
+                                  aria-label="Toggle notification success"
+                                  checked={false}
+                                  className="pf-c-switch__input"
+                                  disabled={false}
+                                  id="notification-9000-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"
-                          checked={false}
-                          className="pf-c-switch__input"
-                          disabled={false}
                           id="notification-9000-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"
                         >
-                          Failure
-                        </span>
-                        <span
-                          aria-hidden="true"
-                          className="pf-c-switch__label pf-m-off"
-                        >
-                          Failure
-                        </span>
-                      </label>
-                    </Switch>
-                  </div>
-                </DataListCell>
+                          <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-9000-error-toggle"
+                            isChecked={false}
+                            isDisabled={false}
+                            label="Failure"
+                            onChange={[Function]}
+                          >
+                            <Switch
+                              aria-label="Toggle notification failure"
+                              className="NotificationListItem__Switch-j7c411-1 ceuHGn"
+                              id="notification-9000-error-toggle"
+                              isChecked={false}
+                              isDisabled={false}
+                              label="Failure"
+                              onChange={[Function]}
+                            >
+                              <label
+                                className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                htmlFor="notification-9000-error-toggle"
+                              >
+                                <input
+                                  aria-label="Toggle notification failure"
+                                  checked={false}
+                                  className="pf-c-switch__input"
+                                  disabled={false}
+                                  id="notification-9000-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>
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 e7d882aac1..f804e903a0 100644
--- a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
+++ b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
@@ -222,117 +222,732 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                             update={true}
                             withHash={true}
                           >
-                            <div
-                              className="awx-toolbar"
-                            >
-                              <Level
-                                className=""
-                                gutter={null}
+                            <DataListToolbar__AWXToolbar>
+                              <StyledComponent
+                                forwardedComponent={
+                                  Object {
+                                    "$$typeof": Symbol(react.forward_ref),
+                                    "attrs": Array [],
+                                    "componentStyle": ComponentStyle {
+                                      "componentId": "DataListToolbar__AWXToolbar-ajzso8-0",
+                                      "isStatic": true,
+                                      "lastClassName": "bKIKDr",
+                                      "rules": Array [
+                                        "--awx-toolbar--BackgroundColor:var(--pf-global--BackgroundColor--light-100);--awx-toolbar--BorderColor:#ebebeb;--awx-toolbar--BorderWidth:var(--pf-global--BorderWidth--sm);--pf-global--target-size--MinHeight:0;--pf-global--target-size--MinWidth:0;--pf-global--FontSize--md:14px;border-bottom:var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);background-color:var(--awx-toolbar--BackgroundColor);display:flex;min-height:70px;flex-grow:1;",
+                                      ],
+                                    },
+                                    "displayName": "DataListToolbar__AWXToolbar",
+                                    "foldedComponentIds": Array [],
+                                    "render": [Function],
+                                    "styledComponentId": "DataListToolbar__AWXToolbar-ajzso8-0",
+                                    "target": "div",
+                                    "toString": [Function],
+                                    "warnTooManyClasses": [Function],
+                                    "withComponent": [Function],
+                                  }
+                                }
+                                forwardedRef={null}
                               >
                                 <div
-                                  className="pf-l-level"
+                                  className="DataListToolbar__AWXToolbar-ajzso8-0 bKIKDr"
                                 >
-                                  <LevelItem
-                                    style={
-                                      Object {
-                                        "display": "flex",
-                                        "flexBasis": "700px",
-                                      }
-                                    }
+                                  <DataListToolbar__Toolbar
+                                    marginleft={0}
                                   >
-                                    <div
-                                      style={
+                                    <StyledComponent
+                                      forwardedComponent={
                                         Object {
-                                          "display": "flex",
-                                          "flexBasis": "700px",
+                                          "$$typeof": Symbol(react.forward_ref),
+                                          "attrs": Array [],
+                                          "componentStyle": ComponentStyle {
+                                            "componentId": "DataListToolbar__Toolbar-ajzso8-1",
+                                            "isStatic": false,
+                                            "lastClassName": "dwCtVz",
+                                            "rules": Array [
+                                              "flex-grow:1;margin-left:",
+                                              [Function],
+                                              ";",
+                                            ],
+                                          },
+                                          "displayName": "DataListToolbar__Toolbar",
+                                          "foldedComponentIds": Array [],
+                                          "render": [Function],
+                                          "styledComponentId": "DataListToolbar__Toolbar-ajzso8-1",
+                                          "target": [Function],
+                                          "toString": [Function],
+                                          "warnTooManyClasses": [Function],
+                                          "withComponent": [Function],
                                         }
                                       }
+                                      forwardedRef={null}
+                                      marginleft={0}
                                     >
                                       <Toolbar
-                                        className={null}
-                                        style={
-                                          Object {
-                                            "flexGrow": "1",
-                                            "marginLeft": "20px",
-                                          }
-                                        }
+                                        className="DataListToolbar__Toolbar-ajzso8-1 dwCtVz"
+                                        marginleft={0}
                                       >
                                         <div
-                                          className="pf-l-toolbar"
-                                          style={
-                                            Object {
-                                              "flexGrow": "1",
-                                              "marginLeft": "20px",
-                                            }
-                                          }
+                                          className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 dwCtVz"
+                                          marginleft={0}
                                         >
-                                          <ToolbarGroup
-                                            className={null}
-                                            style={
-                                              Object {
-                                                "flexGrow": "1",
-                                              }
-                                            }
-                                          >
-                                            <div
-                                              className="pf-l-toolbar__group"
-                                              style={
+                                          <DataListToolbar__ColumnLeft>
+                                            <StyledComponent
+                                              forwardedComponent={
                                                 Object {
-                                                  "flexGrow": "1",
+                                                  "$$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}
                                             >
-                                              <ToolbarItem
-                                                className={null}
-                                                style={
-                                                  Object {
-                                                    "flexGrow": "1",
-                                                  }
-                                                }
+                                              <div
+                                                className="DataListToolbar__ColumnLeft-ajzso8-3 feZLWt"
                                               >
-                                                <div
-                                                  className="pf-l-toolbar__item"
-                                                  style={
-                                                    Object {
-                                                      "flexGrow": "1",
+                                                <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],
+                                                      }
                                                     }
-                                                  }
-                                                >
-                                                  <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",
-                                                        },
-                                                      ]
-                                                    }
-                                                    onSearch={[Function]}
-                                                    sortedColumnKey="name"
+                                                    forwardedRef={null}
                                                   >
-                                                    <I18n
-                                                      update={true}
-                                                      withHash={true}
+                                                    <ToolbarItem
+                                                      className="sc-bwzfXH iBEPfq"
                                                     >
                                                       <div
-                                                        className="pf-c-input-group"
+                                                        className="pf-l-toolbar__item sc-bwzfXH iBEPfq"
                                                       >
-                                                        <Dropdown
-                                                          className="searchKeyDropdown"
-                                                          direction="down"
+                                                        <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",
+                                                              },
+                                                            ]
+                                                          }
+                                                          onSearch={[Function]}
+                                                          sortedColumnKey="name"
+                                                        >
+                                                          <I18n
+                                                            update={true}
+                                                            withHash={true}
+                                                          >
+                                                            <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>
+                                                                        }
+                                                                      >
+                                                                        <DropdownToggle
+                                                                          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>
+                                                                        </DropdownToggle>
+                                                                      </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}
+                                                                    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>
+                                                          </I18n>
+                                                        </Search>
+                                                      </div>
+                                                    </ToolbarItem>
+                                                  </StyledComponent>
+                                                </Styled(ToolbarItem)>
+                                                <VerticalSeparator>
+                                                  <div>
+                                                    <span
+                                                      style={
+                                                        Object {
+                                                          "backgroundColor": "#d7d7d7",
+                                                          "content": "",
+                                                          "display": "inline-block",
+                                                          "height": "30px",
+                                                          "marginLeft": "20px",
+                                                          "marginRight": "20px",
+                                                          "verticalAlign": "middle",
+                                                          "width": "1px",
+                                                        }
+                                                      }
+                                                    />
+                                                  </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"
+                                                  >
+                                                    <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",
+                                                          },
+                                                        ]
+                                                      }
+                                                      onSort={[Function]}
+                                                      sortOrder="ascending"
+                                                      sortedColumnKey="name"
+                                                    >
+                                                      <I18n
+                                                        update={true}
+                                                        withHash={true}
+                                                      >
+                                                        <Sort__Dropdown
                                                           dropdownItems={
                                                             Array [
                                                               <Item
@@ -356,15 +971,18 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                             ]
                                                           }
                                                           isOpen={false}
-                                                          isPlain={false}
                                                           onSelect={[Function]}
                                                           onToggle={[Function]}
-                                                          position="left"
+                                                          style={
+                                                            Object {
+                                                              "marginRight": "20px",
+                                                            }
+                                                          }
                                                           toggle={
                                                             <DropdownToggle
                                                               className=""
                                                               iconComponent={[Function]}
-                                                              id=""
+                                                              id="awx-sort"
                                                               isActive={false}
                                                               isFocused={false}
                                                               isHovered={false}
@@ -377,550 +995,445 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                             </DropdownToggle>
                                                           }
                                                         >
-                                                          <div
-                                                            className="pf-c-dropdown searchKeyDropdown"
-                                                            onToggle={[Function]}
-                                                          >
-                                                            <DropdownToggle
-                                                              ariaHasPopup={true}
-                                                              className=""
-                                                              iconComponent={[Function]}
-                                                              id="pf-toggle-id-3"
-                                                              isActive={false}
-                                                              isFocused={false}
-                                                              isHovered={false}
-                                                              isOpen={false}
-                                                              isPlain={false}
-                                                              key=".0"
-                                                              onEnter={[Function]}
-                                                              onToggle={[Function]}
-                                                              parentRef={
-                                                                <div
-                                                                  class="pf-c-dropdown searchKeyDropdown"
+                                                          <StyledComponent
+                                                            dropdownItems={
+                                                              Array [
+                                                                <Item
+                                                                  className=""
+                                                                  component="button"
+                                                                  href="#"
+                                                                  isDisabled={false}
+                                                                  isHovered={false}
                                                                 >
-                                                                  <button
-                                                                    aria-expanded="false"
-                                                                    aria-haspopup="true"
-                                                                    class="pf-c-dropdown__toggle"
-                                                                    id="pf-toggle-id-3"
-                                                                    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>
+                                                                  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
-                                                                ariaHasPopup={true}
                                                                 className=""
-                                                                id="pf-toggle-id-3"
+                                                                iconComponent={[Function]}
+                                                                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 searchKeyDropdown"
+                                                                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>
+                                                                  }
+                                                                >
+                                                                  <DropdownToggle
+                                                                    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"
-                                                                      class="pf-c-dropdown__toggle"
-                                                                      id="pf-toggle-id-3"
+                                                                      aria-expanded={false}
+                                                                      aria-haspopup={true}
+                                                                      className="pf-c-dropdown__toggle"
+                                                                      disabled={false}
+                                                                      id="awx-sort"
+                                                                      onClick={[Function]}
+                                                                      onKeyDown={[Function]}
                                                                       type="button"
                                                                     >
                                                                       <span
-                                                                        class="pf-c-dropdown__toggle-text"
+                                                                        className="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"
+                                                                      <CaretDownIcon
+                                                                        className="pf-c-dropdown__toggle-icon"
+                                                                        color="currentColor"
+                                                                        size="sm"
+                                                                        title={null}
                                                                       >
-                                                                        <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>
+                                                                        <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>
-                                                                  </div>
-                                                                }
-                                                              >
-                                                                <button
-                                                                  aria-expanded={false}
-                                                                  aria-haspopup={true}
-                                                                  className="pf-c-dropdown__toggle"
-                                                                  disabled={false}
-                                                                  id="pf-toggle-id-3"
-                                                                  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>
-                                                              </DropdownToggle>
-                                                            </DropdownToggle>
-                                                          </div>
-                                                        </Dropdown>
-                                                        <TextInput
-                                                          aria-label="Search text input"
-                                                          className=""
-                                                          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"
-                                                            disabled={false}
-                                                            onChange={[Function]}
-                                                            readOnly={false}
-                                                            required={false}
-                                                            style={
-                                                              Object {
-                                                                "height": "30px",
-                                                              }
-                                                            }
-                                                            type="search"
-                                                            value=""
-                                                          />
-                                                        </TextInput>
-                                                        <Button
-                                                          aria-label="Search"
-                                                          className=""
-                                                          component="button"
-                                                          isActive={false}
-                                                          isBlock={false}
-                                                          isDisabled={false}
-                                                          isFocus={false}
-                                                          isHover={false}
-                                                          onClick={[Function]}
-                                                          type="button"
-                                                          variant="tertiary"
-                                                        >
-                                                          <button
-                                                            aria-disabled={null}
-                                                            aria-label="Search"
-                                                            className="pf-c-button pf-m-tertiary"
-                                                            disabled={false}
-                                                            onClick={[Function]}
-                                                            tabIndex={null}
-                                                            type="button"
-                                                          >
-                                                            <i
-                                                              aria-hidden="true"
-                                                              className="fas fa-search"
-                                                            />
-                                                          </button>
-                                                        </Button>
-                                                      </div>
-                                                    </I18n>
-                                                  </Search>
-                                                </div>
-                                              </ToolbarItem>
-                                              <VerticalSeparator>
-                                                <div>
-                                                  <span
-                                                    style={
-                                                      Object {
-                                                        "backgroundColor": "#d7d7d7",
-                                                        "content": "",
-                                                        "display": "inline-block",
-                                                        "height": "30px",
-                                                        "marginLeft": "20px",
-                                                        "marginRight": "20px",
-                                                        "verticalAlign": "middle",
-                                                        "width": "1px",
-                                                      }
-                                                    }
-                                                  />
-                                                </div>
-                                              </VerticalSeparator>
-                                            </div>
-                                          </ToolbarGroup>
-                                          <ToolbarGroup
-                                            className="sortDropdownGroup"
-                                          >
-                                            <div
-                                              className="pf-l-toolbar__group sortDropdownGroup"
-                                            >
-                                              <ToolbarItem
-                                                className={null}
-                                              >
-                                                <div
-                                                  className="pf-l-toolbar__item"
-                                                >
-                                                  <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",
-                                                        },
-                                                      ]
-                                                    }
-                                                    onSort={[Function]}
-                                                    sortOrder="ascending"
-                                                    sortedColumnKey="name"
-                                                  >
-                                                    <I18n
-                                                      update={true}
-                                                      withHash={true}
-                                                    >
-                                                      <Dropdown
-                                                        className=""
-                                                        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=""
-                                                            isActive={false}
-                                                            isFocused={false}
-                                                            isHovered={false}
-                                                            isOpen={false}
-                                                            isPlain={false}
-                                                            onToggle={[Function]}
-                                                            parentRef={null}
-                                                          >
-                                                            Name
-                                                          </DropdownToggle>
-                                                        }
-                                                      >
-                                                        <div
-                                                          className="pf-c-dropdown"
-                                                          onToggle={[Function]}
-                                                          style={
-                                                            Object {
-                                                              "marginRight": "20px",
-                                                            }
-                                                          }
-                                                        >
-                                                          <DropdownToggle
-                                                            ariaHasPopup={true}
-                                                            className=""
-                                                            iconComponent={[Function]}
-                                                            id="pf-toggle-id-4"
-                                                            isActive={false}
-                                                            isFocused={false}
-                                                            isHovered={false}
-                                                            isOpen={false}
-                                                            isPlain={false}
-                                                            key=".0"
-                                                            onEnter={[Function]}
-                                                            onToggle={[Function]}
-                                                            parentRef={
-                                                              <div
-                                                                class="pf-c-dropdown"
-                                                                style="margin-right: 20px;"
-                                                              >
-                                                                <button
-                                                                  aria-expanded="false"
-                                                                  aria-haspopup="true"
-                                                                  class="pf-c-dropdown__toggle"
-                                                                  id="pf-toggle-id-4"
-                                                                  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>
+                                                                  </DropdownToggle>
+                                                                </DropdownToggle>
                                                               </div>
-                                                            }
-                                                          >
-                                                            <DropdownToggle
-                                                              ariaHasPopup={true}
-                                                              className=""
-                                                              id="pf-toggle-id-4"
-                                                              isActive={false}
-                                                              isDisabled={false}
-                                                              isFocused={false}
-                                                              isHovered={false}
-                                                              isOpen={false}
-                                                              isPlain={false}
-                                                              onEnter={[Function]}
-                                                              onToggle={[Function]}
-                                                              parentRef={
-                                                                <div
-                                                                  class="pf-c-dropdown"
-                                                                  style="margin-right: 20px;"
-                                                                >
-                                                                  <button
-                                                                    aria-expanded="false"
-                                                                    aria-haspopup="true"
-                                                                    class="pf-c-dropdown__toggle"
-                                                                    id="pf-toggle-id-4"
-                                                                    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>
+                                                            </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}
+                                                              onClick={[Function]}
+                                                              type="button"
+                                                              variant="plain"
                                                             >
                                                               <button
-                                                                aria-expanded={false}
-                                                                aria-haspopup={true}
-                                                                className="pf-c-dropdown__toggle"
+                                                                aria-disabled={null}
+                                                                aria-label="Sort"
+                                                                className="pf-c-button pf-m-plain sc-bdVaJa delFyH"
                                                                 disabled={false}
-                                                                id="pf-toggle-id-4"
                                                                 onClick={[Function]}
-                                                                onKeyDown={[Function]}
+                                                                tabIndex={null}
                                                                 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={
+                                                                <Sort__IconWrapper>
+                                                                  <StyledComponent
+                                                                    forwardedComponent={
                                                                       Object {
-                                                                        "verticalAlign": "-0.125em",
+                                                                        "$$typeof": Symbol(react.forward_ref),
+                                                                        "attrs": Array [],
+                                                                        "componentStyle": ComponentStyle {
+                                                                          "componentId": "Sort__IconWrapper-sc-21g5aw-1",
+                                                                          "isStatic": true,
+                                                                          "lastClassName": "fTwElO",
+                                                                          "rules": Array [
+                                                                            "> svg{font-size:18px;}",
+                                                                          ],
+                                                                        },
+                                                                        "displayName": "Sort__IconWrapper",
+                                                                        "foldedComponentIds": Array [],
+                                                                        "render": [Function],
+                                                                        "styledComponentId": "Sort__IconWrapper-sc-21g5aw-1",
+                                                                        "target": "span",
+                                                                        "toString": [Function],
+                                                                        "warnTooManyClasses": [Function],
+                                                                        "withComponent": [Function],
                                                                       }
                                                                     }
-                                                                    viewBox="0 0 320 512"
-                                                                    width="1em"
+                                                                    forwardedRef={null}
                                                                   >
-                                                                    <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>
+                                                                    <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>
-                                                            </DropdownToggle>
-                                                          </DropdownToggle>
-                                                        </div>
-                                                      </Dropdown>
-                                                      <Button
-                                                        aria-label="Sort"
-                                                        className=""
-                                                        component="button"
-                                                        isActive={false}
-                                                        isBlock={false}
-                                                        isDisabled={false}
-                                                        isFocus={false}
-                                                        isHover={false}
-                                                        onClick={[Function]}
-                                                        type="button"
-                                                        variant="plain"
-                                                      >
-                                                        <button
-                                                          aria-disabled={null}
-                                                          aria-label="Sort"
-                                                          className="pf-c-button pf-m-plain"
-                                                          disabled={false}
-                                                          onClick={[Function]}
-                                                          tabIndex={null}
-                                                          type="button"
-                                                        >
-                                                          <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>
-                                                        </button>
-                                                      </Button>
-                                                    </I18n>
-                                                  </Sort>
-                                                </div>
-                                              </ToolbarItem>
-                                            </div>
-                                          </ToolbarGroup>
+                                                            </Button>
+                                                          </StyledComponent>
+                                                        </Styled(Button)>
+                                                      </I18n>
+                                                    </Sort>
+                                                  </div>
+                                                </ToolbarItem>
+                                                <DataListToolbar__AdditionalControlsWrapper>
+                                                  <StyledComponent
+                                                    forwardedComponent={
+                                                      Object {
+                                                        "$$typeof": Symbol(react.forward_ref),
+                                                        "attrs": Array [],
+                                                        "componentStyle": ComponentStyle {
+                                                          "componentId": "DataListToolbar__AdditionalControlsWrapper-ajzso8-5",
+                                                          "isStatic": true,
+                                                          "lastClassName": "cAcBQW",
+                                                          "rules": Array [
+                                                            "display:flex;flex-grow:1;justify-content:flex-end;",
+                                                          ],
+                                                        },
+                                                        "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 cAcBQW"
+                                                    />
+                                                  </StyledComponent>
+                                                </DataListToolbar__AdditionalControlsWrapper>
+                                              </div>
+                                            </StyledComponent>
+                                          </DataListToolbar__ColumnRight>
                                         </div>
                                       </Toolbar>
-                                    </div>
-                                  </LevelItem>
-                                  <LevelItem>
-                                    <div />
-                                  </LevelItem>
+                                    </StyledComponent>
+                                  </DataListToolbar__Toolbar>
                                 </div>
-                              </Level>
-                            </div>
+                              </StyledComponent>
+                            </DataListToolbar__AWXToolbar>
                           </I18n>
                         </DataListToolbar>
                         <DataList
@@ -974,20 +1487,8 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                           className=""
                                           dataListCells={
                                             Array [
-                                              <DataListCell
-                                                alignRight={false}
-                                                className=""
-                                                isFilled={true}
-                                                isIcon={false}
-                                                width={1}
-                                              >
-                                                <Link
-                                                  replace={false}
-                                                  style={
-                                                    Object {
-                                                      "marginRight": "1.5em",
-                                                    }
-                                                  }
+                                              <ForwardRef>
+                                                <ForwardRef
                                                   to={
                                                     Object {
                                                       "pathname": "/notifications/1",
@@ -999,51 +1500,33 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                   >
                                                     Notification one
                                                   </b>
-                                                </Link>
-                                                <Badge
-                                                  className=""
+                                                </ForwardRef>
+                                                <ForwardRef
                                                   isRead={true}
-                                                  style={
-                                                    Object {
-                                                      "textTransform": "capitalize",
-                                                    }
-                                                  }
                                                 >
                                                   email
-                                                </Badge>
-                                              </DataListCell>,
-                                              <DataListCell
-                                                alignRight={false}
-                                                className=""
-                                                isFilled={true}
-                                                isIcon={false}
-                                                style={
-                                                  Object {
-                                                    "display": "flex",
-                                                    "justifyContent": "flex-end",
-                                                  }
-                                                }
-                                                width={1}
+                                                </ForwardRef>
+                                              </ForwardRef>,
+                                              <ForwardRef
+                                                righthalf="true"
                                               >
-                                                <Switch
+                                                <ForwardRef
                                                   aria-label="Toggle notification success"
-                                                  className=""
                                                   id="notification-1-success-toggle"
                                                   isChecked={true}
                                                   isDisabled={false}
                                                   label="Successful"
                                                   onChange={[Function]}
                                                 />
-                                                <Switch
+                                                <ForwardRef
                                                   aria-label="Toggle notification failure"
-                                                  className=""
                                                   id="notification-1-error-toggle"
                                                   isChecked={false}
                                                   isDisabled={false}
                                                   label="Failure"
                                                   onChange={[Function]}
                                                 />
-                                              </DataListCell>,
+                                              </ForwardRef>,
                                             ]
                                           }
                                           key=".0"
@@ -1052,170 +1535,366 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                           <div
                                             className="pf-c-data-list__item-content"
                                           >
-                                            <DataListCell
-                                              alignRight={false}
-                                              className=""
-                                              isFilled={true}
-                                              isIcon={false}
+                                            <NotificationListItem__DataListCell
                                               key="name"
-                                              width={1}
                                             >
-                                              <div
-                                                className="pf-c-data-list__cell"
-                                              >
-                                                <Link
-                                                  replace={false}
-                                                  style={
-                                                    Object {
-                                                      "marginRight": "1.5em",
-                                                    }
-                                                  }
-                                                  to={
-                                                    Object {
-                                                      "pathname": "/notifications/1",
-                                                    }
-                                                  }
-                                                >
-                                                  <a
-                                                    onClick={[Function]}
-                                                    style={
-                                                      Object {
-                                                        "marginRight": "1.5em",
-                                                      }
-                                                    }
-                                                  >
-                                                    <b
-                                                      id="items-list-item-1"
-                                                    >
-                                                      Notification one
-                                                    </b>
-                                                  </a>
-                                                </Link>
-                                                <Badge
-                                                  className=""
-                                                  isRead={true}
-                                                  style={
-                                                    Object {
-                                                      "textTransform": "capitalize",
-                                                    }
-                                                  }
-                                                >
-                                                  <span
-                                                    className="pf-c-badge pf-m-read"
-                                                    style={
-                                                      Object {
-                                                        "textTransform": "capitalize",
-                                                      }
-                                                    }
-                                                  >
-                                                    email
-                                                  </span>
-                                                </Badge>
-                                              </div>
-                                            </DataListCell>
-                                            <DataListCell
-                                              alignRight={false}
-                                              className=""
-                                              isFilled={true}
-                                              isIcon={false}
-                                              key="toggles"
-                                              style={
-                                                Object {
-                                                  "display": "flex",
-                                                  "justifyContent": "flex-end",
-                                                }
-                                              }
-                                              width={1}
-                                            >
-                                              <div
-                                                className="pf-c-data-list__cell"
-                                                style={
+                                              <StyledComponent
+                                                forwardedComponent={
                                                   Object {
-                                                    "display": "flex",
-                                                    "justifyContent": "flex-end",
+                                                    "$$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}
                                               >
-                                                <Switch
-                                                  aria-label="Toggle notification success"
-                                                  className=""
-                                                  id="notification-1-success-toggle"
-                                                  isChecked={true}
-                                                  isDisabled={false}
-                                                  label="Successful"
-                                                  onChange={[Function]}
+                                                <DataListCell
+                                                  alignRight={false}
+                                                  className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                                                  isFilled={true}
+                                                  isIcon={false}
+                                                  width={1}
                                                 >
-                                                  <label
-                                                    className="pf-c-switch"
-                                                    htmlFor="notification-1-success-toggle"
+                                                  <div
+                                                    className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
                                                   >
-                                                    <input
+                                                    <Styled(Link)
+                                                      to={
+                                                        Object {
+                                                          "pathname": "/notifications/1",
+                                                        }
+                                                      }
+                                                    >
+                                                      <StyledComponent
+                                                        forwardedComponent={
+                                                          Object {
+                                                            "$$typeof": Symbol(react.forward_ref),
+                                                            "attrs": Array [],
+                                                            "componentStyle": ComponentStyle {
+                                                              "componentId": "sc-htpNat",
+                                                              "isStatic": true,
+                                                              "lastClassName": "dlcYLn",
+                                                              "rules": Array [
+                                                                "margin-right: 1.5em;",
+                                                              ],
+                                                            },
+                                                            "displayName": "Styled(Link)",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "sc-htpNat",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
+                                                        to={
+                                                          Object {
+                                                            "pathname": "/notifications/1",
+                                                          }
+                                                        }
+                                                      >
+                                                        <Link
+                                                          className="sc-htpNat dlcYLn"
+                                                          replace={false}
+                                                          to={
+                                                            Object {
+                                                              "pathname": "/notifications/1",
+                                                            }
+                                                          }
+                                                        >
+                                                          <a
+                                                            className="sc-htpNat dlcYLn"
+                                                            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-bxivhb",
+                                                              "isStatic": true,
+                                                              "lastClassName": "iZoxgU",
+                                                              "rules": Array [
+                                                                "text-transform: capitalize;",
+                                                              ],
+                                                            },
+                                                            "displayName": "Styled(Badge)",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "sc-bxivhb",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
+                                                        isRead={true}
+                                                      >
+                                                        <Badge
+                                                          className="sc-bxivhb iZoxgU"
+                                                          isRead={true}
+                                                        >
+                                                          <span
+                                                            className="pf-c-badge pf-m-read sc-bxivhb iZoxgU"
+                                                          >
+                                                            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"
-                                                      checked={true}
-                                                      className="pf-c-switch__input"
-                                                      disabled={false}
                                                       id="notification-1-success-toggle"
+                                                      isChecked={true}
+                                                      isDisabled={false}
+                                                      label="Successful"
                                                       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>
-                                                <Switch
-                                                  aria-label="Toggle notification failure"
-                                                  className=""
-                                                  id="notification-1-error-toggle"
-                                                  isChecked={false}
-                                                  isDisabled={false}
-                                                  label="Failure"
-                                                  onChange={[Function]}
-                                                >
-                                                  <label
-                                                    className="pf-c-switch"
-                                                    htmlFor="notification-1-error-toggle"
-                                                  >
-                                                    <input
+                                                      <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"
-                                                      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"
                                                     >
-                                                      Failure
-                                                    </span>
-                                                    <span
-                                                      aria-hidden="true"
-                                                      className="pf-c-switch__label pf-m-off"
-                                                    >
-                                                      Failure
-                                                    </span>
-                                                  </label>
-                                                </Switch>
-                                              </div>
-                                            </DataListCell>
+                                                      <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]}
+                                                      >
+                                                        <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>
@@ -1266,20 +1945,8 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                           className=""
                                           dataListCells={
                                             Array [
-                                              <DataListCell
-                                                alignRight={false}
-                                                className=""
-                                                isFilled={true}
-                                                isIcon={false}
-                                                width={1}
-                                              >
-                                                <Link
-                                                  replace={false}
-                                                  style={
-                                                    Object {
-                                                      "marginRight": "1.5em",
-                                                    }
-                                                  }
+                                              <ForwardRef>
+                                                <ForwardRef
                                                   to={
                                                     Object {
                                                       "pathname": "/notifications/2",
@@ -1291,51 +1958,33 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                   >
                                                     Notification two
                                                   </b>
-                                                </Link>
-                                                <Badge
-                                                  className=""
+                                                </ForwardRef>
+                                                <ForwardRef
                                                   isRead={true}
-                                                  style={
-                                                    Object {
-                                                      "textTransform": "capitalize",
-                                                    }
-                                                  }
                                                 >
                                                   email
-                                                </Badge>
-                                              </DataListCell>,
-                                              <DataListCell
-                                                alignRight={false}
-                                                className=""
-                                                isFilled={true}
-                                                isIcon={false}
-                                                style={
-                                                  Object {
-                                                    "display": "flex",
-                                                    "justifyContent": "flex-end",
-                                                  }
-                                                }
-                                                width={1}
+                                                </ForwardRef>
+                                              </ForwardRef>,
+                                              <ForwardRef
+                                                righthalf="true"
                                               >
-                                                <Switch
+                                                <ForwardRef
                                                   aria-label="Toggle notification success"
-                                                  className=""
                                                   id="notification-2-success-toggle"
                                                   isChecked={false}
                                                   isDisabled={false}
                                                   label="Successful"
                                                   onChange={[Function]}
                                                 />
-                                                <Switch
+                                                <ForwardRef
                                                   aria-label="Toggle notification failure"
-                                                  className=""
                                                   id="notification-2-error-toggle"
                                                   isChecked={true}
                                                   isDisabled={false}
                                                   label="Failure"
                                                   onChange={[Function]}
                                                 />
-                                              </DataListCell>,
+                                              </ForwardRef>,
                                             ]
                                           }
                                           key=".0"
@@ -1344,170 +1993,366 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                           <div
                                             className="pf-c-data-list__item-content"
                                           >
-                                            <DataListCell
-                                              alignRight={false}
-                                              className=""
-                                              isFilled={true}
-                                              isIcon={false}
+                                            <NotificationListItem__DataListCell
                                               key="name"
-                                              width={1}
                                             >
-                                              <div
-                                                className="pf-c-data-list__cell"
-                                              >
-                                                <Link
-                                                  replace={false}
-                                                  style={
-                                                    Object {
-                                                      "marginRight": "1.5em",
-                                                    }
-                                                  }
-                                                  to={
-                                                    Object {
-                                                      "pathname": "/notifications/2",
-                                                    }
-                                                  }
-                                                >
-                                                  <a
-                                                    onClick={[Function]}
-                                                    style={
-                                                      Object {
-                                                        "marginRight": "1.5em",
-                                                      }
-                                                    }
-                                                  >
-                                                    <b
-                                                      id="items-list-item-2"
-                                                    >
-                                                      Notification two
-                                                    </b>
-                                                  </a>
-                                                </Link>
-                                                <Badge
-                                                  className=""
-                                                  isRead={true}
-                                                  style={
-                                                    Object {
-                                                      "textTransform": "capitalize",
-                                                    }
-                                                  }
-                                                >
-                                                  <span
-                                                    className="pf-c-badge pf-m-read"
-                                                    style={
-                                                      Object {
-                                                        "textTransform": "capitalize",
-                                                      }
-                                                    }
-                                                  >
-                                                    email
-                                                  </span>
-                                                </Badge>
-                                              </div>
-                                            </DataListCell>
-                                            <DataListCell
-                                              alignRight={false}
-                                              className=""
-                                              isFilled={true}
-                                              isIcon={false}
-                                              key="toggles"
-                                              style={
-                                                Object {
-                                                  "display": "flex",
-                                                  "justifyContent": "flex-end",
-                                                }
-                                              }
-                                              width={1}
-                                            >
-                                              <div
-                                                className="pf-c-data-list__cell"
-                                                style={
+                                              <StyledComponent
+                                                forwardedComponent={
                                                   Object {
-                                                    "display": "flex",
-                                                    "justifyContent": "flex-end",
+                                                    "$$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}
                                               >
-                                                <Switch
-                                                  aria-label="Toggle notification success"
-                                                  className=""
-                                                  id="notification-2-success-toggle"
-                                                  isChecked={false}
-                                                  isDisabled={false}
-                                                  label="Successful"
-                                                  onChange={[Function]}
+                                                <DataListCell
+                                                  alignRight={false}
+                                                  className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                                                  isFilled={true}
+                                                  isIcon={false}
+                                                  width={1}
                                                 >
-                                                  <label
-                                                    className="pf-c-switch"
-                                                    htmlFor="notification-2-success-toggle"
+                                                  <div
+                                                    className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
                                                   >
-                                                    <input
+                                                    <Styled(Link)
+                                                      to={
+                                                        Object {
+                                                          "pathname": "/notifications/2",
+                                                        }
+                                                      }
+                                                    >
+                                                      <StyledComponent
+                                                        forwardedComponent={
+                                                          Object {
+                                                            "$$typeof": Symbol(react.forward_ref),
+                                                            "attrs": Array [],
+                                                            "componentStyle": ComponentStyle {
+                                                              "componentId": "sc-htpNat",
+                                                              "isStatic": true,
+                                                              "lastClassName": "dlcYLn",
+                                                              "rules": Array [
+                                                                "margin-right: 1.5em;",
+                                                              ],
+                                                            },
+                                                            "displayName": "Styled(Link)",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "sc-htpNat",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
+                                                        to={
+                                                          Object {
+                                                            "pathname": "/notifications/2",
+                                                          }
+                                                        }
+                                                      >
+                                                        <Link
+                                                          className="sc-htpNat dlcYLn"
+                                                          replace={false}
+                                                          to={
+                                                            Object {
+                                                              "pathname": "/notifications/2",
+                                                            }
+                                                          }
+                                                        >
+                                                          <a
+                                                            className="sc-htpNat dlcYLn"
+                                                            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-bxivhb",
+                                                              "isStatic": true,
+                                                              "lastClassName": "iZoxgU",
+                                                              "rules": Array [
+                                                                "text-transform: capitalize;",
+                                                              ],
+                                                            },
+                                                            "displayName": "Styled(Badge)",
+                                                            "foldedComponentIds": Array [],
+                                                            "render": [Function],
+                                                            "styledComponentId": "sc-bxivhb",
+                                                            "target": [Function],
+                                                            "toString": [Function],
+                                                            "warnTooManyClasses": [Function],
+                                                            "withComponent": [Function],
+                                                          }
+                                                        }
+                                                        forwardedRef={null}
+                                                        isRead={true}
+                                                      >
+                                                        <Badge
+                                                          className="sc-bxivhb iZoxgU"
+                                                          isRead={true}
+                                                        >
+                                                          <span
+                                                            className="pf-c-badge pf-m-read sc-bxivhb iZoxgU"
+                                                          >
+                                                            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"
-                                                      checked={false}
-                                                      className="pf-c-switch__input"
-                                                      disabled={false}
                                                       id="notification-2-success-toggle"
+                                                      isChecked={false}
+                                                      isDisabled={false}
+                                                      label="Successful"
                                                       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>
-                                                <Switch
-                                                  aria-label="Toggle notification failure"
-                                                  className=""
-                                                  id="notification-2-error-toggle"
-                                                  isChecked={true}
-                                                  isDisabled={false}
-                                                  label="Failure"
-                                                  onChange={[Function]}
-                                                >
-                                                  <label
-                                                    className="pf-c-switch"
-                                                    htmlFor="notification-2-error-toggle"
-                                                  >
-                                                    <input
+                                                      <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"
-                                                      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"
                                                     >
-                                                      Failure
-                                                    </span>
-                                                    <span
-                                                      aria-hidden="true"
-                                                      className="pf-c-switch__label pf-m-off"
-                                                    >
-                                                      Failure
-                                                    </span>
-                                                  </label>
-                                                </Switch>
-                                              </div>
-                                            </DataListCell>
+                                                      <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]}
+                                                      >
+                                                        <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>
@@ -1625,7 +2470,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                       ariaHasPopup={true}
                                       className="togglePageSize"
                                       iconComponent={[Function]}
-                                      id="pf-toggle-id-5"
+                                      id="pf-toggle-id-1"
                                       isActive={false}
                                       isFocused={false}
                                       isHovered={false}
@@ -1642,7 +2487,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                             aria-expanded="false"
                                             aria-haspopup="true"
                                             class="pf-c-dropdown__toggle togglePageSize"
-                                            id="pf-toggle-id-5"
+                                            id="pf-toggle-id-1"
                                             type="button"
                                           >
                                             <span
@@ -1672,7 +2517,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                       <DropdownToggle
                                         ariaHasPopup={true}
                                         className="togglePageSize"
-                                        id="pf-toggle-id-5"
+                                        id="pf-toggle-id-1"
                                         isActive={false}
                                         isDisabled={false}
                                         isFocused={false}
@@ -1689,7 +2534,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                               aria-expanded="false"
                                               aria-haspopup="true"
                                               class="pf-c-dropdown__toggle togglePageSize"
-                                              id="pf-toggle-id-5"
+                                              id="pf-toggle-id-1"
                                               type="button"
                                             >
                                               <span
@@ -1721,7 +2566,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                           aria-haspopup={true}
                                           className="pf-c-dropdown__toggle togglePageSize"
                                           disabled={false}
-                                          id="pf-toggle-id-5"
+                                          id="pf-toggle-id-1"
                                           onClick={[Function]}
                                           onKeyDown={[Function]}
                                           type="button"
diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx
index f55f57a693..2d62608d4a 100644
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/src/components/DataListToolbar/DataListToolbar.jsx
@@ -33,7 +33,7 @@ const AWXToolbar = styled.div`
 
 const Toolbar = styled(PFToolbar)`
   flex-grow: 1;
-  margin-left: ${props => (props.noleftmargin ? '0' : '20px')};
+  margin-left: ${props => (props.marginleft ? '0' : '20px')};
 `;
 
 const ToolbarGroup = styled(PFToolbarGroup)`
@@ -55,7 +55,6 @@ const ColumnLeft = styled.div`
 `;
 
 const ColumnRight = styled(ColumnLeft)`
-  margin-left: 60px;
   padding: 8px 0 10px 0;
 
   @media screen and (min-width: 980px) {
@@ -93,10 +92,10 @@ class DataListToolbar extends React.Component {
       <I18n>
         {({ i18n }) => (
           <AWXToolbar>
-            <Toolbar noleftmargin={noLeftMargin}>
-              { showSelectAll && (
-                <Fragment>
-                  <ColumnLeft>
+            <Toolbar marginleft={noLeftMargin ? 1 : 0}>
+              <ColumnLeft>
+                { showSelectAll && (
+                  <Fragment>
                     <ToolbarItem>
                       <Checkbox
                         checked={isAllSelected}
@@ -106,47 +105,47 @@ class DataListToolbar extends React.Component {
                       />
                     </ToolbarItem>
                     <VerticalSeparator />
-                    <ToolbarItem css="flex-grow: 1;">
-                      <Search
-                        columns={columns}
-                        onSearch={onSearch}
-                        sortedColumnKey={sortedColumnKey}
+                  </Fragment>
+                )}
+                <ToolbarItem css="flex-grow: 1;">
+                  <Search
+                    columns={columns}
+                    onSearch={onSearch}
+                    sortedColumnKey={sortedColumnKey}
+                  />
+                </ToolbarItem>
+                <VerticalSeparator />
+              </ColumnLeft>
+              <ColumnRight>
+                <ToolbarItem>
+                  <Sort
+                    columns={columns}
+                    onSort={onSort}
+                    sortOrder={sortOrder}
+                    sortedColumnKey={sortedColumnKey}
+                  />
+                </ToolbarItem>
+                { (showExpandCollapse || additionalControls.length) ? (
+                  <VerticalSeparator />
+                ) : null}
+                {showExpandCollapse && (
+                  <Fragment>
+                    <ToolbarGroup>
+                      <ExpandCollapse
+                        isCompact={isCompact}
+                        onCompact={onCompact}
+                        onExpand={onExpand}
                       />
-                    </ToolbarItem>
-                    <VerticalSeparator />
-                  </ColumnLeft>
-                  <ColumnRight>
-                    <ToolbarItem>
-                      <Sort
-                        columns={columns}
-                        onSort={onSort}
-                        sortOrder={sortOrder}
-                        sortedColumnKey={sortedColumnKey}
-                      />
-                    </ToolbarItem>
-                    { (showExpandCollapse || additionalControls.length) ? (
+                    </ToolbarGroup>
+                    { additionalControls && (
                       <VerticalSeparator />
-                    ) : null}
-                    {showExpandCollapse && (
-                      <Fragment>
-                        <ToolbarGroup>
-                          <ExpandCollapse
-                            isCompact={isCompact}
-                            onCompact={onCompact}
-                            onExpand={onExpand}
-                          />
-                        </ToolbarGroup>
-                        { additionalControls && (
-                          <VerticalSeparator />
-                        )}
-                      </Fragment>
                     )}
-                    <AdditionalControlsWrapper>
-                      {additionalControls}
-                    </AdditionalControlsWrapper>
-                  </ColumnRight>
-                </Fragment>
-              )}
+                  </Fragment>
+                )}
+                <AdditionalControlsWrapper>
+                  {additionalControls}
+                </AdditionalControlsWrapper>
+              </ColumnRight>
             </Toolbar>
           </AWXToolbar>
 
diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx
index 8b12a1b0ec..7223a8d9fe 100644
--- a/src/components/Search/Search.jsx
+++ b/src/components/Search/Search.jsx
@@ -118,6 +118,7 @@ class Search extends React.Component {
               isOpen={isSearchDropdownOpen}
               toggle={(
                 <DropdownToggle
+                  id="awx-search"
                   onToggle={this.handleDropdownToggle}
                 >
                   {searchColumnName}
diff --git a/src/components/Sort/Sort.jsx b/src/components/Sort/Sort.jsx
index 283bfb2dc3..966f1b8d2a 100644
--- a/src/components/Sort/Sort.jsx
+++ b/src/components/Sort/Sort.jsx
@@ -31,7 +31,7 @@ const Dropdown = styled(PFDropdown)`
         width: auto;
       }
 
-      > svg { /* carret icon */
+      > svg { /* caret icon */
         margin: 0px;
         padding-top: 3px;
         padding-left: 3px;
@@ -121,6 +121,7 @@ class Sort extends React.Component {
                 isOpen={isSortDropdownOpen}
                 toggle={(
                   <DropdownToggle
+                    id="awx-sort"
                     onToggle={this.handleDropdownToggle}
                   >
                     {sortedColumnName}
diff --git a/src/index.jsx b/src/index.jsx
index ef03c44108..4b961c6405 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -13,7 +13,6 @@ import { t } from '@lingui/macro';
 import '@patternfly/react-core/dist/styles/base.css';
 import './app.scss';
 import './components/Pagination/styles.scss';
-import './components/DataListToolbar/styles.scss';
 import './components/SelectedList/styles.scss';
 import './components/AddRole/styles.scss';