update tests based on i18n changes

__tests__/__snapshots__/enzymeHelpers.test.jsx.snap

@@ -21,29 +21,28 @@ exports[`mountWithContexts injected ConfigProvider should mount and render with
 
 exports[`mountWithContexts injected I18nProvider should mount and render 1`] = `
 <div>
-  <I18n
+  <span>
-    update={true}
+    Text content
-    withHash={true}
+  </span>
-  >
-    <span>
-      Text content
-    </span>
-  </I18n>
 </div>
 `;
 
 exports[`mountWithContexts injected I18nProvider should mount and render deeply nested consumer 1`] = `
 <Parent>
-  <Child>
+  <WithI18n>
     <I18n
       update={true}
       withHash={true}
     >
-      <div>
+      <Component
-        Text content
+        i18n={"/i18n/"}
-      </div>
+      >
+        <div>
+          Text content
+        </div>
+      </Component>
     </I18n>
-  </Child>
+  </WithI18n>
 </Parent>
 `;
 

__tests__/components/AddResourceRole.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { mountWithContexts } from '../enzymeHelpers';
-import AddResourceRole from '../../src/components/AddRole/AddResourceRole';
+import AddResourceRole, { _AddResourceRole } from '../../src/components/AddRole/AddResourceRole';
 
-describe('<AddResourceRole />', () => {
+describe('<_AddResourceRole />', () => {
   const readUsers = jest.fn().mockResolvedValue({
     data: {
       count: 2,
@@ -31,21 +31,23 @@ describe('<AddResourceRole />', () => {
   };
   test('initially renders without crashing', () => {
     shallow(
-      <AddResourceRole
+      <_AddResourceRole
         api={api}
         onClose={() => {}}
         onSave={() => {}}
         roles={roles}
+        i18n={{ _: val => val.toString() }}
       />
     );
   });
   test('handleRoleCheckboxClick properly updates state', () => {
     const wrapper = shallow(
-      <AddResourceRole
+      <_AddResourceRole
         api={api}
         onClose={() => {}}
         onSave={() => {}}
         roles={roles}
+        i18n={{ _: val => val.toString() }}
       />
     );
     wrapper.setState({
@@ -76,11 +78,12 @@ describe('<AddResourceRole />', () => {
   });
   test('handleResourceCheckboxClick properly updates state', () => {
     const wrapper = shallow(
-      <AddResourceRole
+      <_AddResourceRole
         api={api}
         onClose={() => {}}
         onSave={() => {}}
         roles={roles}
+        i18n={{ _: val => val.toString() }}
       />
     );
     wrapper.setState({
@@ -106,14 +109,13 @@ describe('<AddResourceRole />', () => {
     }]);
   });
   test('clicking user/team cards updates state', () => {
-    const spy = jest.spyOn(AddResourceRole.prototype, 'handleResourceSelect');
+    const spy = jest.spyOn(_AddResourceRole.prototype, 'handleResourceSelect');
     const wrapper = mountWithContexts(
       <AddResourceRole
         onClose={() => {}}
         onSave={() => {}}
-        api={api}
         roles={roles}
-      />
+      />, { context: { network: { api, handleHttpError: () => {} } } }
     ).find('AddResourceRole');
     const selectableCardWrapper = wrapper.find('SelectableCard');
     expect(selectableCardWrapper.length).toBe(2);
@@ -126,11 +128,12 @@ describe('<AddResourceRole />', () => {
   });
   test('readUsers and readTeams call out to corresponding api functions', () => {
     const wrapper = shallow(
-      <AddResourceRole
+      <_AddResourceRole
         api={api}
         onClose={() => {}}
         onSave={() => {}}
         roles={roles}
+        i18n={{ _: val => val.toString() }}
       />
     );
     wrapper.instance().readUsers({
@@ -150,11 +153,12 @@ describe('<AddResourceRole />', () => {
 
   test('handleResourceSelect clears out selected lists and sets selectedResource', () => {
     const wrapper = shallow(
-      <AddResourceRole
+      <_AddResourceRole
         api={api}
         onClose={() => {}}
         onSave={() => {}}
         roles={roles}
+        i18n={{ _: val => val.toString() }}
       />
     );
     wrapper.setState({
@@ -193,11 +197,10 @@ describe('<AddResourceRole />', () => {
     const handleSave = jest.fn();
     const wrapper = mountWithContexts(
       <AddResourceRole
-        api={api}
         onClose={() => {}}
         onSave={handleSave}
         roles={roles}
-      />
+      />, { context: { network: { api, handleHttpError: () => {} } } }
     ).find('AddResourceRole');
     wrapper.setState({
       selectedResource: 'users',

__tests__/components/AnsibleSelect.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mountWithContexts } from '../enzymeHelpers';
 import AnsibleSelect from '../../src/components/AnsibleSelect';
+import { _AnsibleSelect } from '../../src/components/AnsibleSelect/AnsibleSelect';
 
 const label = 'test select';
 const mockData = ['/venv/baz/', '/venv/ansible/'];
@@ -18,7 +19,7 @@ describe('<AnsibleSelect />', () => {
   });
 
   test('calls "onSelectChange" on dropdown select change', () => {
-    const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange');
+    const spy = jest.spyOn(_AnsibleSelect.prototype, 'onSelectChange');
     const wrapper = mountWithContexts(
       <AnsibleSelect
         value="foo"

__tests__/components/Lookup.test.jsx

@@ -216,6 +216,7 @@ describe('<Lookup />', () => {
         getItems={getItems}
         handleHttpError={() => {}}
         location={{ history }}
+        i18n={{ _: val => val.toString() }}
       />
     );
 

__tests__/components/NotifyAndRedirect.test.jsx

@@ -11,6 +11,7 @@ describe('<NotifyAndRedirect />', () => {
         to="foo"
         setRootDialogMessage={setRootDialogMessage}
         location={{ pathname: 'foo' }}
+        i18n={{ _: val => val.toString() }}
       />
     );
     expect(setRootDialogMessage).toHaveBeenCalled();

__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap

@@ -2,202 +2,202 @@
 
 exports[`<ToolbarDeleteButton /> should render button 1`] = `
 <ToolbarDeleteButton
+  i18n={"/i18n/"}
   itemName="item"
   itemsToDelete={Array []}
   onDelete={[Function]}
 >
-  <I18n
+  <Tooltip
-    update={true}
+    appendTo={[Function]}
-    withHash={true}
+    className={null}
+    content="Select a row to delete"
+    enableFlip={true}
+    entryDelay={500}
+    exitDelay={500}
+    maxWidth="18.75rem"
+    position="left"
+    trigger="mouseenter focus"
+    zIndex={9999}
   >
-    <Tooltip
+    <Tippy
+      animateFill={false}
       appendTo={[Function]}
-      className={null}
+      content={
-      content="Select a row to delete"
+        <div
-      enableFlip={true}
+          className="pf-c-tooltip"
-      entryDelay={500}
+          role="tooltip"
-      exitDelay={500}
+        >
+          <TooltipArrow
+            className={null}
+          />
+          <TooltipContent
+            className={null}
+          >
+            Select a row to delete
+          </TooltipContent>
+        </div>
+      }
+      delay={
+        Array [
+          500,
+          500,
+        ]
+      }
+      distance={15}
+      flip={true}
+      lazy={true}
       maxWidth="18.75rem"
-      position="left"
+      onCreate={[Function]}
+      performance={true}
+      placement="left"
+      popperOptions={
+        Object {
+          "modifiers": Object {
+            "hide": Object {
+              "enabled": true,
+            },
+            "preventOverflow": Object {
+              "enabled": true,
+            },
+          },
+        }
+      }
+      theme="pf-tippy"
       trigger="mouseenter focus"
       zIndex={9999}
     >
-      <Tippy
+      <ToolbarDeleteButton__Button
-        animateFill={false}
+        aria-label="Delete"
-        appendTo={[Function]}
+        className="awx-ToolBarBtn"
-        content={
+        isDisabled={true}
-          <div
+        onClick={[Function]}
-            className="pf-c-tooltip"
+        variant="plain"
-            role="tooltip"
-          >
-            <TooltipArrow
-              className={null}
-            />
-            <TooltipContent
-              className={null}
-            >
-              Select a row to delete
-            </TooltipContent>
-          </div>
-        }
-        delay={
-          Array [
-            500,
-            500,
-          ]
-        }
-        distance={15}
-        flip={true}
-        lazy={true}
-        maxWidth="18.75rem"
-        onCreate={[Function]}
-        performance={true}
-        placement="left"
-        popperOptions={
-          Object {
-            "modifiers": Object {
-              "hide": Object {
-                "enabled": true,
-              },
-              "preventOverflow": Object {
-                "enabled": true,
-              },
-            },
-          }
-        }
-        theme="pf-tippy"
-        trigger="mouseenter focus"
-        zIndex={9999}
       >
-        <ToolbarDeleteButton__Button
+        <StyledComponent
           aria-label="Delete"
+          className="awx-ToolBarBtn"
+          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]}
           variant="plain"
         >
-          <StyledComponent
+          <Button
             aria-label="Delete"
-            forwardedComponent={
+            className="awx-ToolBarBtn ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
-              Object {
+            component="button"
-                "$$typeof": Symbol(react.forward_ref),
+            isActive={false}
-                "attrs": Array [],
+            isBlock={false}
-                "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}
+            isFocus={false}
+            isHover={false}
             onClick={[Function]}
+            type="button"
             variant="plain"
           >
-            <Button
+            <button
+              aria-disabled={null}
               aria-label="Delete"
-              className="ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
+              className="pf-c-button pf-m-plain pf-m-disabled awx-ToolBarBtn ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
-              component="button"
+              disabled={true}
-              isActive={false}
-              isBlock={false}
-              isDisabled={true}
-              isFocus={false}
-              isHover={false}
               onClick={[Function]}
+              tabIndex={null}
               type="button"
-              variant="plain"
             >
-              <button
+              <TrashAltIcon
-                aria-disabled={null}
+                className="awx-ToolBarTrashCanIcon"
-                aria-label="Delete"
+                color="currentColor"
-                className="pf-c-button pf-m-plain pf-m-disabled ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
+                size="sm"
-                disabled={true}
+                title={null}
-                onClick={[Function]}
-                tabIndex={null}
-                type="button"
               >
-                <TrashAltIcon
+                <svg
-                  color="currentColor"
+                  aria-hidden={true}
-                  size="sm"
+                  aria-labelledby={null}
-                  title={null}
+                  className="awx-ToolBarTrashCanIcon"
-                >
+                  fill="currentColor"
-                  <svg
+                  height="1em"
-                    aria-hidden={true}
+                  role="img"
-                    aria-labelledby={null}
+                  style={
-                    fill="currentColor"
+                    Object {
-                    height="1em"
+                      "verticalAlign": "-0.125em",
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
                     }
-                    viewBox="0 0 448 512"
+                  }
-                    width="1em"
+                  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>
-              <div
-                class="pf-c-tooltip"
-                role="tooltip"
-              >
-                <div
-                  class="pf-c-tooltip__arrow"
-                />
-                <div
-                  class="pf-c-tooltip__content"
                 >
-                  Select a row to delete
+                  <path
-                </div>
+                    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"
-              </div>
+                    transform=""
-            </div>
+                  />
-          }
+                </svg>
-        >
+              </TrashAltIcon>
-          <div
+            </button>
-            className="pf-c-tooltip"
+          </Button>
-            role="tooltip"
+        </StyledComponent>
-          >
+      </ToolbarDeleteButton__Button>
-            <TooltipArrow
+      <Portal
-              className={null}
+        containerInfo={
+          <div>
+            <div
+              class="pf-c-tooltip"
+              role="tooltip"
             >
               <div
-                className="pf-c-tooltip__arrow"
+                class="pf-c-tooltip__arrow"
               />
-            </TooltipArrow>
-            <TooltipContent
-              className={null}
-            >
               <div
-                className="pf-c-tooltip__content"
+                class="pf-c-tooltip__content"
               >
                 Select a row to delete
               </div>
-            </TooltipContent>
+            </div>
           </div>
-        </Portal>
+        }
-      </Tippy>
+      >
-    </Tooltip>
+        <div
-  </I18n>
+          className="pf-c-tooltip"
+          role="tooltip"
+        >
+          <TooltipArrow
+            className={null}
+          >
+            <div
+              className="pf-c-tooltip__arrow"
+            />
+          </TooltipArrow>
+          <TooltipContent
+            className={null}
+          >
+            <div
+              className="pf-c-tooltip__content"
+            >
+              Select a row to delete
+            </div>
+          </TooltipContent>
+        </div>
+      </Portal>
+    </Tippy>
+  </Tooltip>
 </ToolbarDeleteButton>
 `;

__tests__/components/SelectResourceStep.test.jsx

@@ -3,7 +3,7 @@ import { createMemoryHistory } from 'history';
 import { shallow } from 'enzyme';
 import { mountWithContexts } from '../enzymeHelpers';
 import { sleep } from '../testUtils';
-import SelectResourceStep, { _SelectResourceStep } from '../../src/components/AddRole/SelectResourceStep';
+import SelectResourceStep from '../../src/components/AddRole/SelectResourceStep';
 
 describe('<SelectResourceStep />', () => {
   const columns = [
@@ -67,15 +67,14 @@ describe('<SelectResourceStep />', () => {
       initialEntries: ['/organizations/1/access?resource.page=1&resource.order_by=-username'],
     });
     const wrapper = await mountWithContexts(
-      <_SelectResourceStep
+      <SelectResourceStep
         columns={columns}
         displayKey="username"
         onRowClick={() => {}}
         onSearch={handleSearch}
         selectedResourceRows={selectedResourceRows}
         sortedColumnKey="username"
-        location={history.location}
+      />, { context: { router: { history, route: { location: history.location } } } }
-      />
     ).find('SelectResourceStep');
     await wrapper.instance().readResourceList();
     expect(handleSearch).toHaveBeenCalledWith({

__tests__/components/SelectRoleStep.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { shallow } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import SelectRoleStep from '../../src/components/AddRole/SelectRoleStep';
 
 describe('<SelectRoleStep />', () => {
@@ -42,7 +43,7 @@ describe('<SelectRoleStep />', () => {
   });
   test('clicking role fires onRolesClick callback', () => {
     const onRolesClick = jest.fn();
-    wrapper = mount(
+    wrapper = mountWithContexts(
       <SelectRoleStep
         onRolesClick={onRolesClick}
         roles={roles}

__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap

@@ -5,6 +5,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
   canToggleNotifications={true}
   detailUrl="/foo"
   errorTurnedOn={false}
+  i18n={"/i18n/"}
   notification={
     Object {
       "id": 9000,
@@ -15,446 +16,526 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
   successTurnedOn={false}
   toggleNotification={[MockFunction]}
 >
-  <I18n
+  <DataListItem
-    update={true}
+    aria-labelledby="items-list-item-9000"
-    withHash={true}
+    className=""
+    isExpanded={false}
+    key="9000"
   >
-    <DataListItem
+    <li
       aria-labelledby="items-list-item-9000"
-      className=""
+      className="pf-c-data-list__item"
-      isExpanded={false}
-      key="9000"
     >
-      <li
+      <DataListItemRow
-        aria-labelledby="items-list-item-9000"
+        className=""
-        className="pf-c-data-list__item"
+        key=".0"
+        rowid="items-list-item-9000"
       >
-        <DataListItemRow
+        <div
-          className=""
+          className="pf-c-data-list__item-row"
-          key=".0"
-          rowid="items-list-item-9000"
         >
-          <div
+          <DataListItemCells
-            className="pf-c-data-list__item-row"
+            className=""
-          >
+            dataListCells={
-            <DataListItemCells
+              Array [
-              className=""
+                <ForwardRef>
-              dataListCells={
-                Array [
-                  <ForwardRef>
-                    <ForwardRef
-                      to={
-                        Object {
-                          "pathname": "/foo",
-                        }
-                      }
-                    >
-                      <b
-                        id="items-list-item-9000"
-                      >
-                        Foo
-                      </b>
-                    </ForwardRef>
-                    <ForwardRef
-                      isRead={true}
-                    >
-                      slack
-                    </ForwardRef>
-                  </ForwardRef>,
                   <ForwardRef
-                    righthalf="true"
+                    to={
-                  >
-                    <ForwardRef
-                      aria-label="Toggle notification success"
-                      id="notification-9000-success-toggle"
-                      isChecked={false}
-                      isDisabled={false}
-                      label="Successful"
-                      onChange={[Function]}
-                    />
-                    <ForwardRef
-                      aria-label="Toggle notification failure"
-                      id="notification-9000-error-toggle"
-                      isChecked={false}
-                      isDisabled={false}
-                      label="Failure"
-                      onChange={[Function]}
-                    />
-                  </ForwardRef>,
-                ]
-              }
-              key=".0"
-              rowid="items-list-item-9000"
-            >
-              <div
-                className="pf-c-data-list__item-content"
-              >
-                <NotificationListItem__DataListCell
-                  key="name"
-                >
-                  <StyledComponent
-                    forwardedComponent={
                       Object {
-                        "$$typeof": Symbol(react.forward_ref),
+                        "pathname": "/foo",
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "NotificationListItem__DataListCell-j7c411-0",
-                          "isStatic": false,
-                          "lastClassName": "hoXOpW",
-                          "rules": Array [
-                            "display:flex;justify-content:",
-                            [Function],
-                            ";padding-bottom:",
-                            [Function],
-                            ";@media screen and (min-width:768px){justify-content:",
-                            [Function],
-                            ";padding-bottom:0;}",
-                          ],
-                        },
-                        "displayName": "NotificationListItem__DataListCell",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
-                        "target": [Function],
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
                       }
                     }
-                    forwardedRef={null}
                   >
-                    <DataListCell
+                    <b
-                      alignRight={false}
+                      id="items-list-item-9000"
-                      className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
-                      isFilled={true}
-                      isIcon={false}
-                      width={1}
                     >
-                      <div
+                      Foo
-                        className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                    </b>
+                  </ForwardRef>
+                  <ForwardRef
+                    isRead={true}
+                  >
+                    slack
+                  </ForwardRef>
+                </ForwardRef>,
+                <ForwardRef
+                  righthalf="true"
+                >
+                  <ForwardRef
+                    aria-label="Toggle notification success"
+                    id="notification-9000-success-toggle"
+                    isChecked={false}
+                    isDisabled={false}
+                    label="Successful"
+                    onChange={[Function]}
+                  />
+                  <ForwardRef
+                    aria-label="Toggle notification failure"
+                    id="notification-9000-error-toggle"
+                    isChecked={false}
+                    isDisabled={false}
+                    label="Failure"
+                    onChange={[Function]}
+                  />
+                </ForwardRef>,
+              ]
+            }
+            key=".0"
+            rowid="items-list-item-9000"
+          >
+            <div
+              className="pf-c-data-list__item-content"
+            >
+              <NotificationListItem__DataListCell
+                key="name"
+              >
+                <StyledComponent
+                  forwardedComponent={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "attrs": Array [],
+                      "componentStyle": ComponentStyle {
+                        "componentId": "NotificationListItem__DataListCell-j7c411-0",
+                        "isStatic": false,
+                        "lastClassName": "hoXOpW",
+                        "rules": Array [
+                          "display:flex;justify-content:",
+                          [Function],
+                          ";padding-bottom:",
+                          [Function],
+                          ";@media screen and (min-width:768px){justify-content:",
+                          [Function],
+                          ";padding-bottom:0;}",
+                        ],
+                      },
+                      "displayName": "NotificationListItem__DataListCell",
+                      "foldedComponentIds": Array [],
+                      "render": [Function],
+                      "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
+                      "target": [Function],
+                      "toString": [Function],
+                      "warnTooManyClasses": [Function],
+                      "withComponent": [Function],
+                    }
+                  }
+                  forwardedRef={null}
+                >
+                  <DataListCell
+                    alignRight={false}
+                    className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                    isFilled={true}
+                    isIcon={false}
+                    width={1}
+                  >
+                    <div
+                      className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
+                    >
+                      <Styled(Link)
+                        to={
+                          Object {
+                            "pathname": "/foo",
+                          }
+                        }
                       >
-                        <Styled(Link)
+                        <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",
                             }
                           }
                         >
-                          <StyledComponent
+                          <Link
-                            forwardedComponent={
+                            className="sc-bdVaJa eBseNd"
-                              Object {
+                            replace={false}
-                                "$$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
+                            <a
                               className="sc-bdVaJa eBseNd"
-                              replace={false}
+                              onClick={[Function]}
-                              to={
-                                Object {
-                                  "pathname": "/foo",
-                                }
-                              }
                             >
-                              <a
+                              <b
-                                className="sc-bdVaJa eBseNd"
+                                id="items-list-item-9000"
-                                onClick={[Function]}
                               >
-                                <b
+                                Foo
-                                  id="items-list-item-9000"
+                              </b>
-                                >
+                            </a>
-                                  Foo
+                          </Link>
-                                </b>
+                        </StyledComponent>
-                              </a>
+                      </Styled(Link)>
-                            </Link>
+                      <Styled(Badge)
-                          </StyledComponent>
+                        isRead={true}
-                        </Styled(Link)>
+                      >
-                        <Styled(Badge)
+                        <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}
                         >
-                          <StyledComponent
+                          <Badge
-                            forwardedComponent={
+                            className="sc-bwzfXH chTbOZ"
-                              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
+                            <span
-                              className="sc-bwzfXH chTbOZ"
+                              className="pf-c-badge pf-m-read sc-bwzfXH chTbOZ"
-                              isRead={true}
                             >
-                              <span
+                              slack
-                                className="pf-c-badge pf-m-read sc-bwzfXH chTbOZ"
+                            </span>
-                              >
+                          </Badge>
-                                slack
+                        </StyledComponent>
-                              </span>
+                      </Styled(Badge)>
-                            </Badge>
+                    </div>
-                          </StyledComponent>
+                  </DataListCell>
-                        </Styled(Badge)>
+                </StyledComponent>
-                      </div>
+              </NotificationListItem__DataListCell>
-                    </DataListCell>
+              <NotificationListItem__DataListCell
-                  </StyledComponent>
+                key="toggles"
-                </NotificationListItem__DataListCell>
+                righthalf="true"
-                <NotificationListItem__DataListCell
+              >
-                  key="toggles"
+                <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"
                 >
-                  <StyledComponent
+                  <DataListCell
-                    forwardedComponent={
+                    alignRight={false}
-                      Object {
+                    className="NotificationListItem__DataListCell-j7c411-0 hoXOpW"
-                        "$$typeof": Symbol(react.forward_ref),
+                    isFilled={true}
-                        "attrs": Array [],
+                    isIcon={false}
-                        "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"
+                    width={1}
                   >
-                    <DataListCell
+                    <div
-                      alignRight={false}
+                      className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 hoXOpW"
-                      className="NotificationListItem__DataListCell-j7c411-0 hoXOpW"
-                      isFilled={true}
-                      isIcon={false}
                       righthalf="true"
-                      width={1}
                     >
-                      <div
+                      <NotificationListItem__Switch
-                        className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 hoXOpW"
+                        aria-label="Toggle notification success"
-                        righthalf="true"
+                        id="notification-9000-success-toggle"
+                        isChecked={false}
+                        isDisabled={false}
+                        label="Successful"
+                        onChange={[Function]}
                       >
-                        <NotificationListItem__Switch
+                        <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]}
                         >
-                          <StyledComponent
+                          <Switch
                             aria-label="Toggle notification success"
-                            forwardedComponent={
+                            className="NotificationListItem__Switch-j7c411-1 ceuHGn"
-                              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
+                            <label
-                              aria-label="Toggle notification success"
+                              className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
-                              className="NotificationListItem__Switch-j7c411-1 ceuHGn"
+                              htmlFor="notification-9000-success-toggle"
-                              id="notification-9000-success-toggle"
-                              isChecked={false}
-                              isDisabled={false}
-                              label="Successful"
-                              onChange={[Function]}
                             >
-                              <label
+                              <input
-                                className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                aria-label="Toggle notification success"
-                                htmlFor="notification-9000-success-toggle"
+                                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"
                               >
-                                <input
+                                Successful
-                                  aria-label="Toggle notification success"
+                              </span>
-                                  checked={false}
+                              <span
-                                  className="pf-c-switch__input"
+                                aria-hidden="true"
-                                  disabled={false}
+                                className="pf-c-switch__label pf-m-off"
-                                  id="notification-9000-success-toggle"
+                              >
-                                  onChange={[Function]}
+                                Successful
-                                  type="checkbox"
+                              </span>
-                                />
+                            </label>
-                                <span
+                          </Switch>
-                                  className="pf-c-switch__toggle"
+                        </StyledComponent>
-                                />
+                      </NotificationListItem__Switch>
-                                <span
+                      <NotificationListItem__Switch
-                                  aria-hidden="true"
+                        aria-label="Toggle notification failure"
-                                  className="pf-c-switch__label pf-m-on"
+                        id="notification-9000-error-toggle"
-                                >
+                        isChecked={false}
-                                  Successful
+                        isDisabled={false}
-                                </span>
+                        label="Failure"
-                                <span
+                        onChange={[Function]}
-                                  aria-hidden="true"
+                      >
-                                  className="pf-c-switch__label pf-m-off"
+                        <StyledComponent
-                                >
-                                  Successful
-                                </span>
-                              </label>
-                            </Switch>
-                          </StyledComponent>
-                        </NotificationListItem__Switch>
-                        <NotificationListItem__Switch
                           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]}
                         >
-                          <StyledComponent
+                          <Switch
                             aria-label="Toggle notification failure"
-                            forwardedComponent={
+                            className="NotificationListItem__Switch-j7c411-1 ceuHGn"
-                              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
+                            <label
-                              aria-label="Toggle notification failure"
+                              className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
-                              className="NotificationListItem__Switch-j7c411-1 ceuHGn"
+                              htmlFor="notification-9000-error-toggle"
-                              id="notification-9000-error-toggle"
-                              isChecked={false}
-                              isDisabled={false}
-                              label="Failure"
-                              onChange={[Function]}
                             >
-                              <label
+                              <input
-                                className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                aria-label="Toggle notification failure"
-                                htmlFor="notification-9000-error-toggle"
+                                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"
                               >
-                                <input
+                                Failure
-                                  aria-label="Toggle notification failure"
+                              </span>
-                                  checked={false}
+                              <span
-                                  className="pf-c-switch__input"
+                                aria-hidden="true"
-                                  disabled={false}
+                                className="pf-c-switch__label pf-m-off"
-                                  id="notification-9000-error-toggle"
+                              >
-                                  onChange={[Function]}
+                                Failure
-                                  type="checkbox"
+                              </span>
-                                />
+                            </label>
-                                <span
+                          </Switch>
-                                  className="pf-c-switch__toggle"
+                        </StyledComponent>
-                                />
+                      </NotificationListItem__Switch>
-                                <span
+                    </div>
-                                  aria-hidden="true"
+                  </DataListCell>
-                                  className="pf-c-switch__label pf-m-on"
+                </StyledComponent>
-                                >
+              </NotificationListItem__DataListCell>
-                                  Failure
+            </div>
-                                </span>
+          </DataListItemCells>
-                                <span
+          <NotificationListItem__Switch
-                                  aria-hidden="true"
+            aria-label="Toggle notification failure"
-                                  className="pf-c-switch__label pf-m-off"
+            id="notification-9000-error-toggle"
-                                >
+            isChecked={false}
-                                  Failure
+            isDisabled={false}
-                                </span>
+            key=".1"
-                              </label>
+            label="Failure"
-                            </Switch>
+            onChange={[Function]}
-                          </StyledComponent>
+            rowid="items-list-item-9000"
-                        </NotificationListItem__Switch>
+          >
-                      </div>
+            <StyledComponent
-                    </DataListCell>
+              aria-label="Toggle notification failure"
-                  </StyledComponent>
+              forwardedComponent={
-                </NotificationListItem__DataListCell>
+                Object {
-              </div>
+                  "$$typeof": Symbol(react.forward_ref),
-            </DataListItemCells>
+                  "attrs": Array [],
-          </div>
+                  "componentStyle": ComponentStyle {
-        </DataListItemRow>
+                    "componentId": "NotificationListItem__Switch-j7c411-1",
-      </li>
+                    "isStatic": true,
-    </DataListItem>
+                    "lastClassName": "ceuHGn",
-  </I18n>
+                    "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]}
+              rowid="items-list-item-9000"
+            >
+              <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]}
+                rowid="items-list-item-9000"
+              >
+                <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]}
+                    rowid="items-list-item-9000"
+                    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>
+      </DataListItemRow>
+    </li>
+  </DataListItem>
 </NotificationListItem>
 `;

__tests__/enzymeHelpers.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-// import { mount } from 'enzyme';
+import { withI18n } from '@lingui/react';
-import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { mountWithContexts } from './enzymeHelpers';
 import { Config } from '../src/contexts/Config';
@@ -11,26 +10,19 @@ import { withRootDialog } from '../src/contexts/RootDialog';
 describe('mountWithContexts', () => {
   describe('injected I18nProvider', () => {
     test('should mount and render', () => {
-      const wrapper = mountWithContexts(
+      const Child = withI18n()(({ i18n }) => (
         <div>
-          <I18n>
+          <span>{i18n._(t`Text content`)}</span>
-            {({ i18n }) => (
-              <span>{i18n._(t`Text content`)}</span>
-            )}
-          </I18n>
         </div>
-      );
+      ));
+      const wrapper = mountWithContexts(<Child />);
       expect(wrapper.find('div')).toMatchSnapshot();
     });
 
     test('should mount and render deeply nested consumer', () => {
-      const Child = () => (
+      const Child = withI18n()(({ i18n }) => (
-        <I18n>
+        <div>{i18n._(t`Text content`)}</div>
-          {({ i18n }) => (
+      ));
-            <div>{i18n._(t`Text content`)}</div>
-          )}
-        </I18n>
-      );
       const Parent = () => (<Child />);
       const wrapper = mountWithContexts(<Parent />);
       expect(wrapper.find('Parent')).toMatchSnapshot();

__tests__/pages/Applications.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import Applications from '../../src/pages/Applications';
 
 describe('<Applications />', () => {
@@ -8,7 +8,7 @@ describe('<Applications />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<Applications />);
+    pageWrapper = mountWithContexts(<Applications />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/AuthSettings.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import AuthSettings from '../../src/pages/AuthSettings';
 
 describe('<AuthSettings />', () => {
@@ -8,7 +8,7 @@ describe('<AuthSettings />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<AuthSettings />);
+    pageWrapper = mountWithContexts(<AuthSettings />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/CredentialTypes.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import CredentialTypes from '../../src/pages/CredentialTypes';
 
 describe('<CredentialTypes />', () => {
@@ -8,7 +8,7 @@ describe('<CredentialTypes />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<CredentialTypes />);
+    pageWrapper = mountWithContexts(<CredentialTypes />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/Credentials.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import Credentials from '../../src/pages/Credentials';
 
 describe('<Credentials />', () => {
@@ -8,7 +8,7 @@ describe('<Credentials />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<Credentials />);
+    pageWrapper = mountWithContexts(<Credentials />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/Dashboard.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import Dashboard from '../../src/pages/Dashboard';
 
 describe('<Dashboard />', () => {
@@ -8,7 +8,7 @@ describe('<Dashboard />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<Dashboard />);
+    pageWrapper = mountWithContexts(<Dashboard />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/InstanceGroups.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import InstanceGroups from '../../src/pages/InstanceGroups';
 
 describe('<InstanceGroups />', () => {
@@ -8,7 +8,7 @@ describe('<InstanceGroups />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<InstanceGroups />);
+    pageWrapper = mountWithContexts(<InstanceGroups />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/Inventories.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import Inventories from '../../src/pages/Inventories';
 
 describe('<Inventories />', () => {
@@ -8,7 +8,7 @@ describe('<Inventories />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<Inventories />);
+    pageWrapper = mountWithContexts(<Inventories />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/InventoryScripts.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import InventoryScripts from '../../src/pages/InventoryScripts';
 
 describe('<InventoryScripts />', () => {
@@ -8,7 +8,7 @@ describe('<InventoryScripts />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<InventoryScripts />);
+    pageWrapper = mountWithContexts(<InventoryScripts />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/Jobs.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import Jobs from '../../src/pages/Jobs';
 
 describe('<Jobs />', () => {
@@ -8,7 +8,7 @@ describe('<Jobs />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<Jobs />);
+    pageWrapper = mountWithContexts(<Jobs />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/JobsSettings.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import JobsSettings from '../../src/pages/JobsSettings';
 
 describe('<JobsSettings />', () => {
@@ -8,7 +8,7 @@ describe('<JobsSettings />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<JobsSettings />);
+    pageWrapper = mountWithContexts(<JobsSettings />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/License.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import License from '../../src/pages/License';
 
 describe('<License />', () => {
@@ -8,7 +8,7 @@ describe('<License />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<License />);
+    pageWrapper = mountWithContexts(<License />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/Login.test.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { mountWithContexts } from '../enzymeHelpers';
-import { mount } from 'enzyme';
-import { I18nProvider } from '@lingui/react';
 import { asyncFlush } from '../../jest.setup';
-import { _AWXLogin } from '../../src/pages/Login';
+import AWXLogin from '../../src/pages/Login';
 import APIClient from '../../src/api';
 
 describe('<Login />', () => {
@@ -18,6 +16,12 @@ describe('<Login />', () => {
 
   const api = new APIClient({});
 
+  const mountLogin = () => {
+    loginWrapper = mountWithContexts(<AWXLogin />, { context: { network: {
+      api, handleHttpError: () => {}
+    } } });
+  };
+
   const findChildren = () => {
     awxLogin = loginWrapper.find('AWXLogin');
     loginPage = loginWrapper.find('LoginPage');
@@ -28,22 +32,13 @@ describe('<Login />', () => {
     loginHeaderLogo = loginPage.find('img');
   };
 
-  beforeEach(() => {
-    loginWrapper = mount(
-      <MemoryRouter>
-        <I18nProvider>
-          <_AWXLogin api={api} clearRootDialogMessage={() => {}} handleHttpError={() => {}} />
-        </I18nProvider>
-      </MemoryRouter>
-    );
-    findChildren();
-  });
-
   afterEach(() => {
     loginWrapper.unmount();
   });
 
   test('initially renders without crashing', () => {
+    mountLogin();
+    findChildren();
     expect(loginWrapper.length).toBe(1);
     expect(loginPage.length).toBe(1);
     expect(loginForm.length).toBe(1);
@@ -58,13 +53,7 @@ describe('<Login />', () => {
   });
 
   test('custom logo renders Brand component with correct src and alt', () => {
-    loginWrapper = mount(
+    loginWrapper = mountWithContexts(<AWXLogin logo="images/foo.jpg" alt="Foo Application" />);
-      <MemoryRouter>
-        <I18nProvider>
-          <_AWXLogin api={api} logo="images/foo.jpg" alt="Foo Application" />
-        </I18nProvider>
-      </MemoryRouter>
-    );
     findChildren();
     expect(loginHeaderLogo.length).toBe(1);
     expect(loginHeaderLogo.props().src).toBe('data:image/jpeg;images/foo.jpg');
@@ -72,13 +61,7 @@ describe('<Login />', () => {
   });
 
   test('default logo renders Brand component with correct src and alt', () => {
-    loginWrapper = mount(
+    mountLogin();
-      <MemoryRouter>
-        <I18nProvider>
-          <_AWXLogin api={api} />
-        </I18nProvider>
-      </MemoryRouter>
-    );
     findChildren();
     expect(loginHeaderLogo.length).toBe(1);
     expect(loginHeaderLogo.props().src).toBe('tower-logo-header.svg');
@@ -86,6 +69,8 @@ describe('<Login />', () => {
   });
 
   test('state maps to un/pw input value props', () => {
+    mountLogin();
+    findChildren();
     awxLogin.setState({ username: 'un', password: 'pw' });
     expect(awxLogin.state().username).toBe('un');
     expect(awxLogin.state().password).toBe('pw');
@@ -95,6 +80,8 @@ describe('<Login />', () => {
   });
 
   test('updating un/pw clears out error', () => {
+    mountLogin();
+    findChildren();
     awxLogin.setState({ isInputValid: false });
     expect(loginWrapper.find('.pf-c-form__helper-text.pf-m-error').length).toBe(1);
     usernameInput.instance().value = 'uname';
@@ -113,6 +100,8 @@ describe('<Login />', () => {
 
   test('api.login not called when loading', () => {
     api.login = jest.fn().mockImplementation(() => Promise.resolve({}));
+    mountLogin();
+    findChildren();
     expect(awxLogin.state().isLoading).toBe(false);
     awxLogin.setState({ isLoading: true });
     submitButton.simulate('click');
@@ -121,6 +110,8 @@ describe('<Login />', () => {
 
   test('submit calls api.login successfully', async () => {
     api.login = jest.fn().mockImplementation(() => Promise.resolve({}));
+    mountLogin();
+    findChildren();
     expect(awxLogin.state().isLoading).toBe(false);
     awxLogin.setState({ username: 'unamee', password: 'pwordd' });
     submitButton.simulate('click');
@@ -137,6 +128,8 @@ describe('<Login />', () => {
       err.response = { status: 401, message: 'problem' };
       return Promise.reject(err);
     });
+    mountLogin();
+    findChildren();
     expect(awxLogin.state().isLoading).toBe(false);
     expect(awxLogin.state().isInputValid).toBe(true);
     awxLogin.setState({ username: 'unamee', password: 'pwordd' });
@@ -155,6 +148,8 @@ describe('<Login />', () => {
       err.response = { status: 500, message: 'problem' };
       return Promise.reject(err);
     });
+    mountLogin();
+    findChildren();
     expect(awxLogin.state().isLoading).toBe(false);
     awxLogin.setState({ username: 'unamee', password: 'pwordd' });
     submitButton.simulate('click');
@@ -166,6 +161,8 @@ describe('<Login />', () => {
   });
 
   test('render Redirect to / when already authenticated', () => {
+    mountLogin();
+    findChildren();
     awxLogin.setState({ isAuthenticated: true });
     const redirectElem = loginWrapper.find('Redirect');
     expect(redirectElem.length).toBe(1);

__tests__/pages/ManagementJobs.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import ManagementJobs from '../../src/pages/ManagementJobs';
 
 describe('<ManagementJobs />', () => {
@@ -8,7 +8,7 @@ describe('<ManagementJobs />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<ManagementJobs />);
+    pageWrapper = mountWithContexts(<ManagementJobs />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/NotifcationTemplates.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import NotificationTemplates from '../../src/pages/NotificationTemplates';
 
 describe('<NotificationTemplates />', () => {
@@ -8,7 +8,7 @@ describe('<NotificationTemplates />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<NotificationTemplates />);
+    pageWrapper = mountWithContexts(<NotificationTemplates />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/Organizations/components/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap

@@ -2,6 +2,7 @@
 
 exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
 <DeleteRoleConfirmationModal
+  i18n={"/i18n/"}
   onCancel={[Function]}
   onConfirm={[Function]}
   role={
@@ -16,11 +17,47 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
   }
   username="jane"
 >
-  <I18n
+  <_default
-    update={true}
+    actions={
-    withHash={true}
+      Array [
+        <Button
+          aria-label="Confirm delete"
+          className=""
+          component="button"
+          isActive={false}
+          isBlock={false}
+          isDisabled={false}
+          isFocus={false}
+          isHover={false}
+          onClick={[Function]}
+          type="button"
+          variant="danger"
+        >
+          Delete
+        </Button>,
+        <Button
+          aria-label={null}
+          className=""
+          component="button"
+          isActive={false}
+          isBlock={false}
+          isDisabled={false}
+          isFocus={false}
+          isHover={false}
+          onClick={[Function]}
+          type="button"
+          variant="secondary"
+        >
+          Cancel
+        </Button>,
+      ]
+    }
+    isOpen={true}
+    onClose={[Function]}
+    title="Remove {0} Access"
+    variant="danger"
   >
-    <_default
+    <Modal
       actions={
         Array [
           <Button
@@ -55,377 +92,237 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
           </Button>,
         ]
       }
+      ariaDescribedById=""
+      className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+      hideTitle={false}
+      isLarge={false}
       isOpen={true}
+      isSmall={false}
       onClose={[Function]}
-      title="Remove Team Access"
+      title="Remove {0} Access"
-      variant="danger"
+      width={null}
     >
-      <Modal
+      <Portal
-        actions={
+        containerInfo={
-          Array [
+          <div>
-            <Button
+            <div
-              aria-label="Confirm delete"
+              class="pf-c-backdrop"
-              className=""
-              component="button"
-              isActive={false}
-              isBlock={false}
-              isDisabled={false}
-              isFocus={false}
-              isHover={false}
-              onClick={[Function]}
-              type="button"
-              variant="danger"
             >
-              Delete
-            </Button>,
-            <Button
-              aria-label={null}
-              className=""
-              component="button"
-              isActive={false}
-              isBlock={false}
-              isDisabled={false}
-              isFocus={false}
-              isHover={false}
-              onClick={[Function]}
-              type="button"
-              variant="secondary"
-            >
-              Cancel
-            </Button>,
-          ]
-        }
-        ariaDescribedById=""
-        className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
-        hideTitle={false}
-        isLarge={false}
-        isOpen={true}
-        isSmall={false}
-        onClose={[Function]}
-        title="Remove Team Access"
-        width={null}
-      >
-        <Portal
-          containerInfo={
-            <div>
               <div
-                class="pf-c-backdrop"
+                class="pf-l-bullseye"
               >
                 <div
                   class="pf-l-bullseye"
                 >
                   <div
-                    class="pf-l-bullseye"
+                    aria-describedby="pf-modal-0"
+                    aria-label="Remove {0} Access"
+                    aria-modal="true"
+                    class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                    role="dialog"
                   >
-                    <div
+                    <button
-                      aria-describedby="pf-modal-0"
+                      aria-label="Close"
-                      aria-label="Remove Team Access"
+                      class="pf-c-button pf-m-plain"
-                      aria-modal="true"
+                      type="button"
-                      class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
-                      role="dialog"
                     >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style="vertical-align: -0.125em;"
+                        viewBox="0 0 352 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                          transform=""
+                        />
+                      </svg>
+                    </button>
+                    <h3
+                      class="pf-c-title pf-m-2xl"
+                    >
+                       
+                      Remove {0} Access
+                       
+                    </h3>
+                    <div
+                      class="pf-c-modal-box__body"
+                      id="pf-modal-0"
+                    >
+                      Are you sure you want to remove {0} access from {1}?  Doing so affects all members of the team.
+                      <br />
+                      <br />
+                      If you {0} want to remove access for this particular user, please remove them from the team.
+                      <svg
+                        aria-hidden="true"
+                        class="at-c-alertModal__icon"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style="vertical-align: -0.125em;"
+                        viewBox="0 0 512 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                          transform=""
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="pf-c-modal-box__footer"
+                    >
+                       
                       <button
-                        aria-label="Close"
+                        aria-label="Confirm delete"
-                        class="pf-c-button pf-m-plain"
+                        class="pf-c-button pf-m-danger"
                         type="button"
                       >
-                        <svg
+                        Delete
-                          aria-hidden="true"
-                          fill="currentColor"
-                          height="1em"
-                          role="img"
-                          style="vertical-align: -0.125em;"
-                          viewBox="0 0 352 512"
-                          width="1em"
-                        >
-                          <path
-                            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                            transform=""
-                          />
-                        </svg>
                       </button>
-                      <h3
+                      <button
-                        class="pf-c-title pf-m-2xl"
+                        class="pf-c-button pf-m-secondary"
+                        type="button"
                       >
-                         
+                        Cancel
-                        Remove Team Access
+                      </button>
-                         
+                       
-                      </h3>
-                      <div
-                        class="pf-c-modal-box__body"
-                        id="pf-modal-0"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="at-c-alertModal__icon"
-                          fill="currentColor"
-                          height="1em"
-                          role="img"
-                          style="vertical-align: -0.125em;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                        >
-                          <path
-                            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                            transform=""
-                          />
-                        </svg>
-                      </div>
-                      <div
-                        class="pf-c-modal-box__footer"
-                      >
-                         
-                        <button
-                          aria-label="Confirm delete"
-                          class="pf-c-button pf-m-danger"
-                          type="button"
-                        >
-                          Delete
-                        </button>
-                        <button
-                          class="pf-c-button pf-m-secondary"
-                          type="button"
-                        >
-                          Cancel
-                        </button>
-                         
-                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          }
+          </div>
-        >
+        }
-          <ModalContent
+      >
-            actions={
+        <ModalContent
-              Array [
+          actions={
-                <Button
+            Array [
-                  aria-label="Confirm delete"
+              <Button
-                  className=""
+                aria-label="Confirm delete"
-                  component="button"
+                className=""
-                  isActive={false}
+                component="button"
-                  isBlock={false}
+                isActive={false}
-                  isDisabled={false}
+                isBlock={false}
-                  isFocus={false}
+                isDisabled={false}
-                  isHover={false}
+                isFocus={false}
-                  onClick={[Function]}
+                isHover={false}
-                  type="button"
+                onClick={[Function]}
-                  variant="danger"
+                type="button"
-                >
+                variant="danger"
-                  Delete
-                </Button>,
-                <Button
-                  aria-label={null}
-                  className=""
-                  component="button"
-                  isActive={false}
-                  isBlock={false}
-                  isDisabled={false}
-                  isFocus={false}
-                  isHover={false}
-                  onClick={[Function]}
-                  type="button"
-                  variant="secondary"
-                >
-                  Cancel
-                </Button>,
-              ]
-            }
-            ariaDescribedById=""
-            className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
-            hideTitle={false}
-            id="pf-modal-0"
-            isLarge={false}
-            isOpen={true}
-            isSmall={false}
-            onClose={[Function]}
-            title="Remove Team Access"
-            width={null}
-          >
-            <Backdrop
-              className=""
-            >
-              <div
-                className="pf-c-backdrop"
               >
-                <Bullseye
+                Delete
-                  className=""
+              </Button>,
-                  component="div"
+              <Button
+                aria-label={null}
+                className=""
+                component="button"
+                isActive={false}
+                isBlock={false}
+                isDisabled={false}
+                isFocus={false}
+                isHover={false}
+                onClick={[Function]}
+                type="button"
+                variant="secondary"
+              >
+                Cancel
+              </Button>,
+            ]
+          }
+          ariaDescribedById=""
+          className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+          hideTitle={false}
+          id="pf-modal-0"
+          isLarge={false}
+          isOpen={true}
+          isSmall={false}
+          onClose={[Function]}
+          title="Remove {0} Access"
+          width={null}
+        >
+          <Backdrop
+            className=""
+          >
+            <div
+              className="pf-c-backdrop"
+            >
+              <Bullseye
+                className=""
+                component="div"
+              >
+                <div
+                  className="pf-l-bullseye"
                 >
-                  <div
+                  <FocusTrap
+                    _createFocusTrap={[Function]}
+                    active={true}
                     className="pf-l-bullseye"
-                  >
+                    focusTrapOptions={
-                    <FocusTrap
+                      Object {
-                      _createFocusTrap={[Function]}
+                        "clickOutsideDeactivates": true,
-                      active={true}
-                      className="pf-l-bullseye"
-                      focusTrapOptions={
-                        Object {
-                          "clickOutsideDeactivates": true,
-                        }
                       }
-                      paused={false}
+                    }
-                      tag="div"
+                    paused={false}
+                    tag="div"
+                  >
+                    <div
+                      className="pf-l-bullseye"
                     >
-                      <div
+                      <ModalBox
-                        className="pf-l-bullseye"
+                        className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                        id="pf-modal-0"
+                        isLarge={false}
+                        isSmall={false}
+                        style={
+                          Object {
+                            "width": null,
+                          }
+                        }
+                        title="Remove {0} Access"
                       >
-                        <ModalBox
+                        <div
-                          className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                          aria-describedby="pf-modal-0"
-                          id="pf-modal-0"
+                          aria-label="Remove {0} Access"
-                          isLarge={false}
+                          aria-modal="true"
-                          isSmall={false}
+                          className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                          role="dialog"
                           style={
                             Object {
                               "width": null,
                             }
                           }
-                          title="Remove Team Access"
                         >
-                          <div
+                          <ModalBoxCloseButton
-                            aria-describedby="pf-modal-0"
+                            className=""
-                            aria-label="Remove Team Access"
+                            onClose={[Function]}
-                            aria-modal="true"
-                            className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
-                            role="dialog"
-                            style={
-                              Object {
-                                "width": null,
-                              }
-                            }
                           >
-                            <ModalBoxCloseButton
+                            <Button
+                              aria-label="Close"
                               className=""
-                              onClose={[Function]}
+                              component="button"
+                              isActive={false}
+                              isBlock={false}
+                              isDisabled={false}
+                              isFocus={false}
+                              isHover={false}
+                              onClick={[Function]}
+                              type="button"
+                              variant="plain"
                             >
-                              <Button
+                              <button
+                                aria-disabled={null}
                                 aria-label="Close"
-                                className=""
+                                className="pf-c-button pf-m-plain"
-                                component="button"
+                                disabled={false}
-                                isActive={false}
-                                isBlock={false}
-                                isDisabled={false}
-                                isFocus={false}
-                                isHover={false}
                                 onClick={[Function]}
+                                tabIndex={null}
                                 type="button"
-                                variant="plain"
                               >
-                                <button
+                                <TimesIcon
-                                  aria-disabled={null}
-                                  aria-label="Close"
-                                  className="pf-c-button pf-m-plain"
-                                  disabled={false}
-                                  onClick={[Function]}
-                                  tabIndex={null}
-                                  type="button"
-                                >
-                                  <TimesIcon
-                                    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 352 512"
-                                      width="1em"
-                                    >
-                                      <path
-                                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                                        transform=""
-                                      />
-                                    </svg>
-                                  </TimesIcon>
-                                </button>
-                              </Button>
-                            </ModalBoxCloseButton>
-                            <ModalBoxHeader
-                              className=""
-                              hideTitle={false}
-                            >
-                              <Title
-                                className=""
-                                headingLevel="h3"
-                                size="2xl"
-                              >
-                                <h3
-                                  className="pf-c-title pf-m-2xl"
-                                >
-                                   
-                                  Remove Team Access
-                                   
-                                </h3>
-                              </Title>
-                            </ModalBoxHeader>
-                            <ModalBoxBody
-                              className=""
-                              id="pf-modal-0"
-                            >
-                              <div
-                                className="pf-c-modal-box__body"
-                                id="pf-modal-0"
-                              >
-                                <WithI18n
-                                  components={
-                                    Array [
-                                      <b />,
-                                      <b />,
-                                      <br />,
-                                      <br />,
-                                      <b />,
-                                      <i />,
-                                    ]
-                                  }
-                                  id="Are you sure you want to remove<0> {0} </0>access from<1> {1}</1>?  Doing so affects all members of the team.<2/><3/>If you<4><5> only </5></4>want to remove access for this particular user, please remove them from the team."
-                                  values={
-                                    Object {
-                                      "0": "Member",
-                                      "1": "The Team",
-                                    }
-                                  }
-                                >
-                                  <I18n
-                                    update={true}
-                                    withHash={true}
-                                  >
-                                    <Trans
-                                      components={
-                                        Array [
-                                          <b />,
-                                          <b />,
-                                          <br />,
-                                          <br />,
-                                          <b />,
-                                          <i />,
-                                        ]
-                                      }
-                                      i18n={"/i18n/"}
-                                      id="Are you sure you want to remove<0> {0} </0>access from<1> {1}</1>?  Doing so affects all members of the team.<2/><3/>If you<4><5> only </5></4>want to remove access for this particular user, please remove them from the team."
-                                      values={
-                                        Object {
-                                          "0": "Member",
-                                          "1": "The Team",
-                                        }
-                                      }
-                                    >
-                                      <Render
-                                        value={null}
-                                      />
-                                    </Trans>
-                                  </I18n>
-                                </WithI18n>
-                                <ExclamationCircleIcon
-                                  className="at-c-alertModal__icon"
                                   color="currentColor"
                                   size="sm"
                                   title={null}
@@ -433,7 +330,6 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                                   <svg
                                     aria-hidden={true}
                                     aria-labelledby={null}
-                                    className="at-c-alertModal__icon"
                                     fill="currentColor"
                                     height="1em"
                                     role="img"
@@ -442,91 +338,150 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                                         "verticalAlign": "-0.125em",
                                       }
                                     }
-                                    viewBox="0 0 512 512"
+                                    viewBox="0 0 352 512"
                                     width="1em"
                                   >
                                     <path
-                                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                                       transform=""
                                     />
                                   </svg>
-                                </ExclamationCircleIcon>
+                                </TimesIcon>
-                              </div>
+                              </button>
-                            </ModalBoxBody>
+                            </Button>
-                            <ModalBoxFooter
+                          </ModalBoxCloseButton>
+                          <ModalBoxHeader
+                            className=""
+                            hideTitle={false}
+                          >
+                            <Title
                               className=""
+                              headingLevel="h3"
+                              size="2xl"
                             >
-                              <div
+                              <h3
-                                className="pf-c-modal-box__footer"
+                                className="pf-c-title pf-m-2xl"
                               >
                                  
-                                <Button
+                                Remove {0} Access
-                                  aria-label="Confirm delete"
-                                  className=""
-                                  component="button"
-                                  isActive={false}
-                                  isBlock={false}
-                                  isDisabled={false}
-                                  isFocus={false}
-                                  isHover={false}
-                                  key="delete"
-                                  onClick={[Function]}
-                                  type="button"
-                                  variant="danger"
-                                >
-                                  <button
-                                    aria-disabled={null}
-                                    aria-label="Confirm delete"
-                                    className="pf-c-button pf-m-danger"
-                                    disabled={false}
-                                    onClick={[Function]}
-                                    tabIndex={null}
-                                    type="button"
-                                  >
-                                    Delete
-                                  </button>
-                                </Button>
-                                <Button
-                                  aria-label={null}
-                                  className=""
-                                  component="button"
-                                  isActive={false}
-                                  isBlock={false}
-                                  isDisabled={false}
-                                  isFocus={false}
-                                  isHover={false}
-                                  key="cancel"
-                                  onClick={[Function]}
-                                  type="button"
-                                  variant="secondary"
-                                >
-                                  <button
-                                    aria-disabled={null}
-                                    aria-label={null}
-                                    className="pf-c-button pf-m-secondary"
-                                    disabled={false}
-                                    onClick={[Function]}
-                                    tabIndex={null}
-                                    type="button"
-                                  >
-                                    Cancel
-                                  </button>
-                                </Button>
                                  
-                              </div>
+                              </h3>
-                            </ModalBoxFooter>
+                            </Title>
-                          </div>
+                          </ModalBoxHeader>
-                        </ModalBox>
+                          <ModalBoxBody
-                      </div>
+                            className=""
-                    </FocusTrap>
+                            id="pf-modal-0"
-                  </div>
+                          >
-                </Bullseye>
+                            <div
-              </div>
+                              className="pf-c-modal-box__body"
-            </Backdrop>
+                              id="pf-modal-0"
-          </ModalContent>
+                            >
-        </Portal>
+                              Are you sure you want to remove {0} access from {1}?  Doing so affects all members of the team.
-      </Modal>
+                              <br />
-    </_default>
+                              <br />
-  </I18n>
+                              If you {0} want to remove access for this particular user, please remove them from the team.
+                              <ExclamationCircleIcon
+                                className="at-c-alertModal__icon"
+                                color="currentColor"
+                                size="sm"
+                                title={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  aria-labelledby={null}
+                                  className="at-c-alertModal__icon"
+                                  fill="currentColor"
+                                  height="1em"
+                                  role="img"
+                                  style={
+                                    Object {
+                                      "verticalAlign": "-0.125em",
+                                    }
+                                  }
+                                  viewBox="0 0 512 512"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                                    transform=""
+                                  />
+                                </svg>
+                              </ExclamationCircleIcon>
+                            </div>
+                          </ModalBoxBody>
+                          <ModalBoxFooter
+                            className=""
+                          >
+                            <div
+                              className="pf-c-modal-box__footer"
+                            >
+                               
+                              <Button
+                                aria-label="Confirm delete"
+                                className=""
+                                component="button"
+                                isActive={false}
+                                isBlock={false}
+                                isDisabled={false}
+                                isFocus={false}
+                                isHover={false}
+                                key="delete"
+                                onClick={[Function]}
+                                type="button"
+                                variant="danger"
+                              >
+                                <button
+                                  aria-disabled={null}
+                                  aria-label="Confirm delete"
+                                  className="pf-c-button pf-m-danger"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  tabIndex={null}
+                                  type="button"
+                                >
+                                  Delete
+                                </button>
+                              </Button>
+                              <Button
+                                aria-label={null}
+                                className=""
+                                component="button"
+                                isActive={false}
+                                isBlock={false}
+                                isDisabled={false}
+                                isFocus={false}
+                                isHover={false}
+                                key="cancel"
+                                onClick={[Function]}
+                                type="button"
+                                variant="secondary"
+                              >
+                                <button
+                                  aria-disabled={null}
+                                  aria-label={null}
+                                  className="pf-c-button pf-m-secondary"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  tabIndex={null}
+                                  type="button"
+                                >
+                                  Cancel
+                                </button>
+                              </Button>
+                               
+                            </div>
+                          </ModalBoxFooter>
+                        </div>
+                      </ModalBox>
+                    </div>
+                  </FocusTrap>
+                </div>
+              </Bullseye>
+            </div>
+          </Backdrop>
+        </ModalContent>
+      </Portal>
+    </Modal>
+  </_default>
 </DeleteRoleConfirmationModal>
 `;

__tests__/pages/Organizations/components/__snapshots__/OrganizationAccessItem.test.jsx.snap

@@ -29,43 +29,146 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
       "username": "jane",
     }
   }
+  i18n={"/i18n/"}
   onRoleDelete={[Function]}
 >
-  <I18n
+  <DataListItem
-    update={true}
+    aria-labelledby="access-list-item"
-    withHash={true}
+    className=""
+    isExpanded={false}
+    key="2"
   >
-    <DataListItem
+    <li
       aria-labelledby="access-list-item"
-      className=""
+      className="pf-c-data-list__item"
-      isExpanded={false}
-      key="2"
     >
-      <li
+      <DataListItemRow
-        aria-labelledby="access-list-item"
+        className=""
-        className="pf-c-data-list__item"
+        key=".0"
+        rowid="access-list-item"
       >
-        <DataListItemRow
+        <div
-          className=""
+          className="pf-c-data-list__item-row"
-          key=".0"
-          rowid="access-list-item"
         >
-          <div
+          <DataListItemCells
-            className="pf-c-data-list__item-row"
+            className=""
-          >
+            dataListCells={
-            <DataListItemCells
+              Array [
-              className=""
+                <DataListCell
-              dataListCells={
+                  alignRight={false}
-                Array [
+                  className=""
-                  <DataListCell
+                  isFilled={true}
-                    alignRight={false}
+                  isIcon={false}
+                  width={1}
+                >
+                  <TextContent
                     className=""
-                    isFilled={true}
+                    style={
-                    isIcon={false}
+                      Object {
-                    width={1}
+                        "display": "grid",
+                        "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
+                      }
+                    }
                   >
-                    <TextContent
+                    <Link
+                      replace={false}
+                      to={
+                        Object {
+                          "pathname": "/bar",
+                        }
+                      }
+                    >
+                      <Text
+                        className=""
+                        component="h6"
+                        style={
+                          Object {
+                            "fontWeight": "700",
+                            "lineHeight": "24px",
+                            "marginRight": "20px",
+                          }
+                        }
+                      >
+                        jane
+                      </Text>
+                    </Link>
+                  </TextContent>
+                  <Detail
+                    customStyles={null}
+                    label="Name"
+                    url={null}
+                    value="jane brown"
+                  />
+                </DataListCell>,
+                <DataListCell
+                  alignRight={false}
+                  className=""
+                  isFilled={true}
+                  isIcon={false}
+                  width={1}
+                >
+                  <ul
+                    style={
+                      Object {
+                        "display": "flex",
+                        "flexWrap": "wrap",
+                      }
+                    }
+                  >
+                    <Text
                       className=""
+                      component="h6"
+                      style={
+                        Object {
+                          "fontWeight": "700",
+                          "lineHeight": "24px",
+                          "marginRight": "20px",
+                        }
+                      }
+                    >
+                      Team Roles
+                    </Text>
+                    <Chip
+                      className="awx-c-chip"
+                      closeBtnAriaLabel="close"
+                      isOverflowChip={false}
+                      onClick={[Function]}
+                      tooltipPosition="top"
+                    >
+                      Member
+                    </Chip>
+                  </ul>
+                </DataListCell>,
+              ]
+            }
+            key=".0"
+            rowid="access-list-item"
+          >
+            <div
+              className="pf-c-data-list__item-content"
+            >
+              <DataListCell
+                alignRight={false}
+                className=""
+                isFilled={true}
+                isIcon={false}
+                key="name"
+                width={1}
+              >
+                <div
+                  className="pf-c-data-list__cell"
+                >
+                  <TextContent
+                    className=""
+                    style={
+                      Object {
+                        "display": "grid",
+                        "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
+                      }
+                    }
+                  >
+                    <div
+                      className="pf-c-content"
                       style={
                         Object {
                           "display": "grid",
@@ -81,167 +184,8 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                           }
                         }
                       >
-                        <Text
+                        <a
-                          className=""
+                          onClick={[Function]}
-                          component="h6"
-                          style={
-                            Object {
-                              "fontWeight": "700",
-                              "lineHeight": "24px",
-                              "marginRight": "20px",
-                            }
-                          }
-                        >
-                          jane
-                        </Text>
-                      </Link>
-                    </TextContent>
-                    <Detail
-                      customStyles={null}
-                      label="Name"
-                      url={null}
-                      value="jane brown"
-                    />
-                  </DataListCell>,
-                  <DataListCell
-                    alignRight={false}
-                    className=""
-                    isFilled={true}
-                    isIcon={false}
-                    width={1}
-                  >
-                    <ul
-                      style={
-                        Object {
-                          "display": "flex",
-                          "flexWrap": "wrap",
-                        }
-                      }
-                    >
-                      <Text
-                        className=""
-                        component="h6"
-                        style={
-                          Object {
-                            "fontWeight": "700",
-                            "lineHeight": "24px",
-                            "marginRight": "20px",
-                          }
-                        }
-                      >
-                        Team Roles
-                      </Text>
-                      <Chip
-                        className="awx-c-chip"
-                        closeBtnAriaLabel="close"
-                        isOverflowChip={false}
-                        onClick={[Function]}
-                        tooltipPosition="top"
-                      >
-                        Member
-                      </Chip>
-                    </ul>
-                  </DataListCell>,
-                ]
-              }
-              key=".0"
-              rowid="access-list-item"
-            >
-              <div
-                className="pf-c-data-list__item-content"
-              >
-                <DataListCell
-                  alignRight={false}
-                  className=""
-                  isFilled={true}
-                  isIcon={false}
-                  key="name"
-                  width={1}
-                >
-                  <div
-                    className="pf-c-data-list__cell"
-                  >
-                    <TextContent
-                      className=""
-                      style={
-                        Object {
-                          "display": "grid",
-                          "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
-                        }
-                      }
-                    >
-                      <div
-                        className="pf-c-content"
-                        style={
-                          Object {
-                            "display": "grid",
-                            "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
-                          }
-                        }
-                      >
-                        <Link
-                          replace={false}
-                          to={
-                            Object {
-                              "pathname": "/bar",
-                            }
-                          }
-                        >
-                          <a
-                            onClick={[Function]}
-                          >
-                            <Text
-                              className=""
-                              component="h6"
-                              style={
-                                Object {
-                                  "fontWeight": "700",
-                                  "lineHeight": "24px",
-                                  "marginRight": "20px",
-                                }
-                              }
-                            >
-                              <h6
-                                className=""
-                                data-pf-content={true}
-                                style={
-                                  Object {
-                                    "fontWeight": "700",
-                                    "lineHeight": "24px",
-                                    "marginRight": "20px",
-                                  }
-                                }
-                              >
-                                jane
-                              </h6>
-                            </Text>
-                          </a>
-                        </Link>
-                      </div>
-                    </TextContent>
-                    <Detail
-                      customStyles={null}
-                      label="Name"
-                      url={null}
-                      value="jane brown"
-                    >
-                      <TextContent
-                        className=""
-                        style={
-                          Object {
-                            "display": "grid",
-                            "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
-                          }
-                        }
-                      >
-                        <div
-                          className="pf-c-content"
-                          style={
-                            Object {
-                              "display": "grid",
-                              "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
-                            }
-                          }
                         >
                           <Text
                             className=""
@@ -265,70 +209,40 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                                 }
                               }
                             >
-                              Name
+                              jane
                             </h6>
                           </Text>
-                          <Text
+                        </a>
-                            className=""
+                      </Link>
-                            component="p"
+                    </div>
-                            style={
+                  </TextContent>
-                              Object {
+                  <Detail
-                                "lineHeight": "28px",
+                    customStyles={null}
-                                "overflow": "visible",
+                    label="Name"
-                              }
+                    url={null}
-                            }
+                    value="jane brown"
-                          >
-                            <p
-                              className=""
-                              data-pf-content={true}
-                              style={
-                                Object {
-                                  "lineHeight": "28px",
-                                  "overflow": "visible",
-                                }
-                              }
-                            >
-                              jane brown
-                            </p>
-                          </Text>
-                        </div>
-                      </TextContent>
-                    </Detail>
-                  </div>
-                </DataListCell>
-                <DataListCell
-                  alignRight={false}
-                  className=""
-                  isFilled={true}
-                  isIcon={false}
-                  key="roles"
-                  width={1}
-                >
-                  <div
-                    className="pf-c-data-list__cell"
                   >
-                    <ul
+                    <TextContent
+                      className=""
                       style={
                         Object {
-                          "display": "flex",
+                          "display": "grid",
-                          "flexWrap": "wrap",
+                          "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
                         }
                       }
                     >
-                      <Text
+                      <div
-                        className=""
+                        className="pf-c-content"
-                        component="h6"
                         style={
                           Object {
-                            "fontWeight": "700",
+                            "display": "grid",
-                            "lineHeight": "24px",
+                            "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
-                            "marginRight": "20px",
                           }
                         }
                       >
-                        <h6
+                        <Text
                           className=""
-                          data-pf-content={true}
+                          component="h6"
                           style={
                             Object {
                               "fontWeight": "700",
@@ -337,103 +251,185 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                             }
                           }
                         >
-                          Team Roles
+                          <h6
-                        </h6>
+                            className=""
-                      </Text>
+                            data-pf-content={true}
-                      <Chip
+                            style={
-                        className="awx-c-chip"
+                              Object {
-                        closeBtnAriaLabel="close"
+                                "fontWeight": "700",
-                        isOverflowChip={false}
+                                "lineHeight": "24px",
-                        key="3"
+                                "marginRight": "20px",
-                        onClick={[Function]}
+                              }
-                        tooltipPosition="top"
+                            }
-                      >
-                        <GenerateId
-                          prefix="pf-random-id-"
-                        >
-                          <li
-                            className="pf-c-chip awx-c-chip"
                           >
-                            <span
+                            Name
-                              className="pf-c-chip__text"
+                          </h6>
-                              id="pf-random-id-0"
+                        </Text>
-                            >
+                        <Text
-                              Member
+                          className=""
-                            </span>
+                          component="p"
-                            <ChipButton
+                          style={
+                            Object {
+                              "lineHeight": "28px",
+                              "overflow": "visible",
+                            }
+                          }
+                        >
+                          <p
+                            className=""
+                            data-pf-content={true}
+                            style={
+                              Object {
+                                "lineHeight": "28px",
+                                "overflow": "visible",
+                              }
+                            }
+                          >
+                            jane brown
+                          </p>
+                        </Text>
+                      </div>
+                    </TextContent>
+                  </Detail>
+                </div>
+              </DataListCell>
+              <DataListCell
+                alignRight={false}
+                className=""
+                isFilled={true}
+                isIcon={false}
+                key="roles"
+                width={1}
+              >
+                <div
+                  className="pf-c-data-list__cell"
+                >
+                  <ul
+                    style={
+                      Object {
+                        "display": "flex",
+                        "flexWrap": "wrap",
+                      }
+                    }
+                  >
+                    <Text
+                      className=""
+                      component="h6"
+                      style={
+                        Object {
+                          "fontWeight": "700",
+                          "lineHeight": "24px",
+                          "marginRight": "20px",
+                        }
+                      }
+                    >
+                      <h6
+                        className=""
+                        data-pf-content={true}
+                        style={
+                          Object {
+                            "fontWeight": "700",
+                            "lineHeight": "24px",
+                            "marginRight": "20px",
+                          }
+                        }
+                      >
+                        Team Roles
+                      </h6>
+                    </Text>
+                    <Chip
+                      className="awx-c-chip"
+                      closeBtnAriaLabel="close"
+                      isOverflowChip={false}
+                      key="3"
+                      onClick={[Function]}
+                      tooltipPosition="top"
+                    >
+                      <GenerateId
+                        prefix="pf-random-id-"
+                      >
+                        <li
+                          className="pf-c-chip awx-c-chip"
+                        >
+                          <span
+                            className="pf-c-chip__text"
+                            id="pf-random-id-0"
+                          >
+                            Member
+                          </span>
+                          <ChipButton
+                            aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
+                            ariaLabel="close"
+                            className=""
+                            id="remove_pf-random-id-0"
+                            onClick={[Function]}
+                          >
+                            <Button
+                              aria-label="close"
                               aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
-                              ariaLabel="close"
                               className=""
+                              component="button"
                               id="remove_pf-random-id-0"
+                              isActive={false}
+                              isBlock={false}
+                              isDisabled={false}
+                              isFocus={false}
+                              isHover={false}
                               onClick={[Function]}
+                              type="button"
+                              variant="plain"
                             >
-                              <Button
+                              <button
+                                aria-disabled={null}
                                 aria-label="close"
                                 aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
-                                className=""
+                                className="pf-c-button pf-m-plain"
-                                component="button"
+                                disabled={false}
                                 id="remove_pf-random-id-0"
-                                isActive={false}
-                                isBlock={false}
-                                isDisabled={false}
-                                isFocus={false}
-                                isHover={false}
                                 onClick={[Function]}
+                                tabIndex={null}
                                 type="button"
-                                variant="plain"
                               >
-                                <button
+                                <TimesCircleIcon
-                                  aria-disabled={null}
+                                  aria-hidden="true"
-                                  aria-label="close"
+                                  color="currentColor"
-                                  aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
+                                  size="sm"
-                                  className="pf-c-button pf-m-plain"
+                                  title={null}
-                                  disabled={false}
-                                  id="remove_pf-random-id-0"
-                                  onClick={[Function]}
-                                  tabIndex={null}
-                                  type="button"
                                 >
-                                  <TimesCircleIcon
+                                  <svg
                                     aria-hidden="true"
-                                    color="currentColor"
+                                    aria-labelledby={null}
-                                    size="sm"
+                                    fill="currentColor"
-                                    title={null}
+                                    height="1em"
-                                  >
+                                    role="img"
-                                    <svg
+                                    style={
-                                      aria-hidden="true"
+                                      Object {
-                                      aria-labelledby={null}
+                                        "verticalAlign": "-0.125em",
-                                      fill="currentColor"
-                                      height="1em"
-                                      role="img"
-                                      style={
-                                        Object {
-                                          "verticalAlign": "-0.125em",
-                                        }
                                       }
-                                      viewBox="0 0 512 512"
+                                    }
-                                      width="1em"
+                                    viewBox="0 0 512 512"
-                                    >
+                                    width="1em"
-                                      <path
+                                  >
-                                        d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+                                    <path
-                                        transform=""
+                                      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
-                                      />
+                                      transform=""
-                                    </svg>
+                                    />
-                                  </TimesCircleIcon>
+                                  </svg>
-                                </button>
+                                </TimesCircleIcon>
-                              </Button>
+                              </button>
-                            </ChipButton>
+                            </Button>
-                          </li>
+                          </ChipButton>
-                        </GenerateId>
+                        </li>
-                      </Chip>
+                      </GenerateId>
-                    </ul>
+                    </Chip>
-                  </div>
+                  </ul>
-                </DataListCell>
+                </div>
-              </div>
+              </DataListCell>
-            </DataListItemCells>
+            </div>
-          </div>
+          </DataListItemCells>
-        </DataListItemRow>
+        </div>
-      </li>
+      </DataListItemRow>
-    </DataListItem>
+    </li>
-  </I18n>
+  </DataListItem>
 </OrganizationAccessItem>
 `;

__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationAccess.test.jsx.snap

@@ -5,6 +5,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
   api={"/api/"}
   handleHttpError={[Function]}
   history={"/history/"}
+  i18n={"/i18n/"}
   location={
     Object {
       "hash": "",

__tests__/pages/Portal.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import Portal from '../../src/pages/Portal';
 
 describe('<Portal />', () => {
@@ -8,7 +8,7 @@ describe('<Portal />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<Portal />);
+    pageWrapper = mountWithContexts(<Portal />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/Projects.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import Projects from '../../src/pages/Projects';
 
 describe('<Projects />', () => {
@@ -8,7 +8,7 @@ describe('<Projects />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<Projects />);
+    pageWrapper = mountWithContexts(<Projects />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/Schedules.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import Schedules from '../../src/pages/Schedules';
 
 describe('<Schedules />', () => {
@@ -8,7 +8,7 @@ describe('<Schedules />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<Schedules />);
+    pageWrapper = mountWithContexts(<Schedules />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/SystemSettings.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import SystemSettings from '../../src/pages/SystemSettings';
 
 describe('<SystemSettings />', () => {
@@ -8,7 +8,7 @@ describe('<SystemSettings />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<SystemSettings />);
+    pageWrapper = mountWithContexts(<SystemSettings />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/Teams.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import Teams from '../../src/pages/Teams';
 
 describe('<Teams />', () => {
@@ -8,7 +8,7 @@ describe('<Teams />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<Teams />);
+    pageWrapper = mountWithContexts(<Teams />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/Templates.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import Templates from '../../src/pages/Templates';
 
 describe('<Templates />', () => {
@@ -8,7 +8,7 @@ describe('<Templates />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<Templates />);
+    pageWrapper = mountWithContexts(<Templates />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/UISettings.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import UISettings from '../../src/pages/UISettings';
 
 describe('<UISettings />', () => {
@@ -8,7 +8,7 @@ describe('<UISettings />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<UISettings />);
+    pageWrapper = mountWithContexts(<UISettings />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/pages/Users.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithContexts } from '../enzymeHelpers';
 import Users from '../../src/pages/Users';
 
 describe('<Users />', () => {
@@ -8,7 +8,7 @@ describe('<Users />', () => {
   let title;
 
   beforeEach(() => {
-    pageWrapper = mount(<Users />);
+    pageWrapper = mountWithContexts(<Users />);
     pageSections = pageWrapper.find('PageSection');
     title = pageWrapper.find('Title');
   });

__tests__/util/validators.test.js

@@ -1,34 +1,36 @@
 import { required, maxLength } from '../../src/util/validators';
 
+const i18n = { _: val => val };
+
 describe('validators', () => {
   test('required returns undefined if value given', () => {
-    expect(required()('some value')).toBeUndefined();
+    expect(required(null, i18n)('some value')).toBeUndefined();
-    expect(required('oops')('some value')).toBeUndefined();
+    expect(required('oops', i18n)('some value')).toBeUndefined();
   });
 
   test('required returns default message if value missing', () => {
-    expect(required()('')).toEqual('This field must not be blank');
+    expect(required(null, i18n)('')).toEqual({ id: 'This field must not be blank' });
   });
 
   test('required returns custom message if value missing', () => {
-    expect(required('oops')('')).toEqual('oops');
+    expect(required('oops', i18n)('')).toEqual('oops');
   });
 
   test('required interprets white space as empty value', () => {
-    expect(required()(' ')).toEqual('This field must not be blank');
+    expect(required(null, i18n)(' ')).toEqual({ id: 'This field must not be blank' });
-    expect(required()('\t')).toEqual('This field must not be blank');
+    expect(required(null, i18n)('\t')).toEqual({ id: 'This field must not be blank' });
   });
 
   test('maxLength accepts value below max', () => {
-    expect(maxLength(10)('snazzy')).toBeUndefined();
+    expect(maxLength(10, i18n)('snazzy')).toBeUndefined();
   });
 
   test('maxLength accepts value equal to max', () => {
-    expect(maxLength(10)('abracadbra')).toBeUndefined();
+    expect(maxLength(10, i18n)('abracadbra')).toBeUndefined();
   });
 
   test('maxLength rejects value above max', () => {
-    expect(maxLength(8)('abracadbra'))
+    expect(maxLength(8, i18n)('abracadbra'))
-      .toEqual('This field must not exceed 8 characters');
+      .toEqual({ id: 'This field must not exceed {max} characters', values: { max: 8 } });
   });
 });

src/components/AddRole/AddResourceRole.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Wizard } from '@patternfly/react-core';
+import { withNetwork } from '../../contexts/Network';
 import SelectResourceStep from './SelectResourceStep';
 import SelectRoleStep from './SelectRoleStep';
 import SelectableCard from './SelectableCard';
@@ -249,4 +250,5 @@ AddResourceRole.defaultProps = {
   roles: {}
 };
 
-export default withI18n()(AddResourceRole);
+export { AddResourceRole as _AddResourceRole };
+export default withI18n()(withNetwork(AddResourceRole));

src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -58,4 +58,5 @@ AnsibleSelect.propTypes = {
   value: PropTypes.string.isRequired,
 };
 
+export { AnsibleSelect as _AnsibleSelect };
 export default withI18n()(AnsibleSelect);

src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -113,7 +113,7 @@ class PaginatedDataList extends React.Component {
     const { error } = this.state;
     const [orderBy, sortOrder] = this.getSortOrder();
     const queryParams = parseNamespacedQueryString(qsConfig, location.search);
-    const columns = toolbarColumns || [{ name: i18n._(t`Name`), key: 'name', isSortable: true }];
+    const columns = toolbarColumns.length ? toolbarColumns : [{ name: i18n._(t`Name`), key: 'name', isSortable: true }];
     return (
       <Fragment>
         {error && (
@@ -141,7 +141,7 @@ class PaginatedDataList extends React.Component {
                 <DataListToolbar
                   sortedColumnKey={orderBy}
                   sortOrder={sortOrder}
-                  columns={toolbarColumns}
+                  columns={columns}
                   onSearch={() => { }}
                   onSort={this.handleSort}
                   showSelectAll={showSelectAll}

src/components/Pagination/Pagination.jsx

@@ -187,13 +187,15 @@ class Pagination extends Component {
                 className="awx-pagination__page-input-form"
                 onSubmit={this.onSubmit}
               >
-                {i18n._(t`Page ${(<TextInput
+                {i18n._(t`Page `)}
+                <TextInput
                   className="awx-pagination__page-input"
                   aria-label={i18n._(t`Page Number`)}
                   value={value}
                   type="text"
                   onChange={this.onPageChange}
-                />)} of ${pageCount}`)}
+                />
+                {i18n._(t` of ${pageCount}`)}
               </form>
               <div className="pf-c-input-group">
                 <Button

src/pages/Organizations/components/OrganizationListItem.jsx

@@ -94,7 +94,7 @@ class OrganizationListItem extends React.Component {
                 </Badge>
               </ListGroup>
             </DataListCell>,
-            <DataListCell>
+            <DataListCell key="teams">
               <ListGroup>
                 {i18n._(t`Teams`)}
                 <Badge isRead>

src/pages/Organizations/screens/Organization/OrganizationAccess.jsx

@@ -188,7 +188,6 @@ class OrganizationAccess extends React.Component {
           <AddResourceRole
             onClose={this.toggleAddModal}
             onSave={this.handleSuccessfulRoleAdd}
-            api={api}
             roles={organization.summary_fields.object_roles}
           />
         )}