From 2419a592b452ebf53216da2c6fb1d428e6ad922a Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 4 Feb 2021 14:46:29 -0800
Subject: [PATCH] convert NotificationList to tables

---
 .../NotificationList/NotificationList.jsx     |  26 +-
 .../NotificationList.test.jsx                 |   4 -
 .../NotificationList/NotificationListItem.jsx | 111 +--
 .../NotificationListItem.test.jsx             | 227 +++---
 .../NotificationListItem.test.jsx.snap        | 758 +++++++++---------
 .../components/PaginatedTable/ActionItem.jsx  |  10 +-
 .../components/PaginatedTable/HeaderRow.jsx   |  13 +-
 7 files changed, 607 insertions(+), 542 deletions(-)

diff --git a/awx/ui_next/src/components/NotificationList/NotificationList.jsx b/awx/ui_next/src/components/NotificationList/NotificationList.jsx
index 4bdba17027..4422dc8c01 100644
--- a/awx/ui_next/src/components/NotificationList/NotificationList.jsx
+++ b/awx/ui_next/src/components/NotificationList/NotificationList.jsx
@@ -6,7 +6,7 @@ import { t } from '@lingui/macro';
 import AlertModal from '../AlertModal';
 import ErrorDetail from '../ErrorDetail';
 import NotificationListItem from './NotificationListItem';
-import PaginatedDataList from '../PaginatedDataList';
+import PaginatedTable, { HeaderRow, HeaderCell } from '../PaginatedTable';
 import { getQSConfig, parseQueryString } from '../../util/qs';
 import useRequest from '../../util/useRequest';
 import { NotificationTemplatesAPI } from '../../api';
@@ -169,7 +169,7 @@ function NotificationList({
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={contentError}
         hasContentLoading={isLoading}
         items={notifications}
@@ -211,19 +211,18 @@ function NotificationList({
             key: 'modified_by__username__icontains',
           },
         ]}
-        toolbarSortColumns={[
-          {
-            name: i18n._(t`Name`),
-            key: 'name',
-          },
-          {
-            name: i18n._(t`Type`),
-            key: 'notification_type',
-          },
-        ]}
         toolbarSearchableKeys={searchableKeys}
         toolbarRelatedSearchableKeys={relatedSearchableKeys}
-        renderItem={notification => (
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
+            <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+            <HeaderCell sortKey="notification_type">
+              {i18n._(t`Type`)}
+            </HeaderCell>
+            <HeaderCell>{i18n._(t`Options`)}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(notification, index) => (
           <NotificationListItem
             key={notification.id}
             notification={notification}
@@ -239,6 +238,7 @@ function NotificationList({
             successTurnedOn={successTemplateIds.includes(notification.id)}
             typeLabels={typeLabels}
             showApprovalsToggle={showApprovalsToggle}
+            rowIndex={index}
           />
         )}
       />
diff --git a/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx b/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx
index 071eb45e9f..720b2f15c0 100644
--- a/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx
+++ b/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx
@@ -87,10 +87,6 @@ describe('<NotificationList />', () => {
     wrapper.unmount();
   });
 
-  test('initially renders succesfully', () => {
-    expect(wrapper.find('PaginatedDataList')).toHaveLength(1);
-  });
-
   test('should render list fetched of items', () => {
     expect(NotificationTemplatesAPI.read).toHaveBeenCalled();
     expect(NotificationTemplatesAPI.readOptions).toHaveBeenCalled();
diff --git a/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx b/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx
index 8419db0977..5b0fc2fad7 100644
--- a/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx
+++ b/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx
@@ -3,25 +3,9 @@ import { shape, number, string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import {
-  DataListAction as _DataListAction,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Switch,
-} from '@patternfly/react-core';
-import styled from 'styled-components';
-import DataListCell from '../DataListCell';
-
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: ${props => `repeat(${props.columns}, max-content)`};
-`;
-const Label = styled.b`
-  margin-right: 20px;
-`;
+import { Switch } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
+import { ActionsTd, ActionItem } from '../PaginatedTable';
 
 function NotificationListItem({
   canToggleNotifications,
@@ -37,54 +21,37 @@ function NotificationListItem({
   showApprovalsToggle,
 }) {
   return (
-    <DataListItem
-      aria-labelledby={`items-list-item-${notification.id}`}
-      key={notification.id}
-      id={`${notification.id}`}
-    >
-      <DataListItemRow>
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name">
-              <Link
-                to={{
-                  pathname: detailUrl,
-                }}
-              >
-                <b id={`items-list-item-${notification.id}`}>
-                  {notification.name}
-                </b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key="type">
-              <Label>{i18n._(t`Type `)}</Label>
-              {typeLabels[notification.notification_type]}
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={`items-list-item-${notification.id}`}
-          id={`items-list-item-${notification.id}`}
-          columns={showApprovalsToggle ? 4 : 3}
-        >
-          {showApprovalsToggle && (
-            <Switch
-              id={`notification-${notification.id}-approvals-toggle`}
-              label={i18n._(t`Approval`)}
-              labelOff={i18n._(t`Approval`)}
-              isChecked={approvalsTurnedOn}
-              isDisabled={!canToggleNotifications}
-              onChange={() =>
-                toggleNotification(
-                  notification.id,
-                  approvalsTurnedOn,
-                  'approvals'
-                )
-              }
-              aria-label={i18n._(t`Toggle notification approvals`)}
-            />
-          )}
+    <Tr id={`notification-row-${notification.id}`}>
+      <Td id={`notification-${notification.id}`} dataLabel={i18n._(t`Name`)}>
+        <Link to={`${detailUrl}`}>
+          <b>{notification.name}</b>
+        </Link>
+      </Td>
+      <Td dataLabel={i18n._(t`Type`)}>
+        {typeLabels[notification.notification_type]}
+      </Td>
+      <ActionsTd
+        dataLabel={i18n._(t`Options`)}
+        gridColumns="120px 120px 120px 120px"
+      >
+        <ActionItem visible={showApprovalsToggle}>
+          <Switch
+            id={`notification-${notification.id}-approvals-toggle`}
+            label={i18n._(t`Approval`)}
+            labelOff={i18n._(t`Approval`)}
+            isChecked={approvalsTurnedOn}
+            isDisabled={!canToggleNotifications}
+            onChange={() =>
+              toggleNotification(
+                notification.id,
+                approvalsTurnedOn,
+                'approvals'
+              )
+            }
+            aria-label={i18n._(t`Toggle notification approvals`)}
+          />
+        </ActionItem>
+        <ActionItem visible>
           <Switch
             id={`notification-${notification.id}-started-toggle`}
             label={i18n._(t`Start`)}
@@ -96,6 +63,8 @@ function NotificationListItem({
             }
             aria-label={i18n._(t`Toggle notification start`)}
           />
+        </ActionItem>
+        <ActionItem visible>
           <Switch
             id={`notification-${notification.id}-success-toggle`}
             label={i18n._(t`Success`)}
@@ -107,6 +76,8 @@ function NotificationListItem({
             }
             aria-label={i18n._(t`Toggle notification success`)}
           />
+        </ActionItem>
+        <ActionItem visible>
           <Switch
             id={`notification-${notification.id}-error-toggle`}
             label={i18n._(t`Failure`)}
@@ -118,9 +89,9 @@ function NotificationListItem({
             }
             aria-label={i18n._(t`Toggle notification failure`)}
           />
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 
diff --git a/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx b/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx
index 22afb5373b..983525db04 100644
--- a/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx
+++ b/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx
@@ -30,13 +30,17 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('initially renders succesfully and displays correct label', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('NotificationListItem')).toMatchSnapshot();
     expect(wrapper.find('Switch').length).toBe(3);
@@ -44,46 +48,55 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('shows approvals toggle when configured', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-        showApprovalsToggle
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+            showApprovalsToggle
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Switch').length).toBe(4);
   });
 
-  test('displays correct label in correct column', () => {
+  test('displays correct type', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
-    const typeCell = wrapper
-      .find('DataListCell')
-      .at(1)
-      .find('div');
+    const typeCell = wrapper.find('Td').at(1);
     expect(typeCell.text()).toContain('Slack');
   });
 
   test('handles approvals click when toggle is on', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        approvalsTurnedOn
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-        showApprovalsToggle
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            approvalsTurnedOn
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+            showApprovalsToggle
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification approvals"]')
@@ -95,15 +108,19 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles approvals click when toggle is off', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        approvalsTurnedOn={false}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-        showApprovalsToggle
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            approvalsTurnedOn={false}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+            showApprovalsToggle
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification approvals"]')
@@ -114,14 +131,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles started click when toggle is on', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        startedTurnedOn
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            startedTurnedOn
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification start"]')
@@ -132,14 +153,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles started click when toggle is off', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        startedTurnedOn={false}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            startedTurnedOn={false}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification start"]')
@@ -150,14 +175,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles success click when toggle is on', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        successTurnedOn
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            successTurnedOn
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification success"]')
@@ -168,14 +197,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles success click when toggle is off', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        successTurnedOn={false}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            successTurnedOn={false}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification success"]')
@@ -186,14 +219,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles error click when toggle is on', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        errorTurnedOn
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            errorTurnedOn
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification failure"]')
@@ -204,14 +241,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles error click when toggle is off', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        errorTurnedOn={false}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            errorTurnedOn={false}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification failure"]')
diff --git a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
index 7303fdbd7d..eaf045d78d 100644
--- a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
+++ b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
@@ -24,398 +24,442 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
     }
   }
 >
-  <DataListItem
-    aria-labelledby="items-list-item-9000"
-    className=""
-    id="9000"
-    isExpanded={false}
-    key="9000"
+  <Tr
+    id="notification-row-9000"
   >
-    <li
-      aria-labelledby="items-list-item-9000"
-      className="pf-c-data-list__item"
-      id="9000"
+    <TrBase
+      id="notification-row-9000"
+      innerRef={null}
     >
-      <DataListItemRow
-        key=".0"
-        rowid="items-list-item-9000"
+      <tr
+        className=""
+        data-ouia-component-id="OUIA-Generated-TableRow-1"
+        data-ouia-component-type="PF4/TableRow"
+        data-ouia-safe={true}
+        hidden={false}
+        id="notification-row-9000"
       >
-        <div
-          className="pf-c-data-list__item-row"
+        <Td
+          dataLabel="Name"
+          id="notification-9000"
         >
-          <DataListItemCells
-            dataListCells={
-              Array [
-                <ForwardRef(Styled(PFDataListCell))>
-                  <ForwardRef
-                    to={
-                      Object {
-                        "pathname": "/foo",
-                      }
-                    }
+          <TdBase
+            dataLabel="Name"
+            id="notification-9000"
+            innerRef={null}
+          >
+            <td
+              className=""
+              data-label="Name"
+              id="notification-9000"
+            >
+              <Link
+                to="/foo"
+              >
+                <LinkAnchor
+                  href="/foo"
+                  navigate={[Function]}
+                >
+                  <a
+                    href="/foo"
+                    onClick={[Function]}
                   >
-                    <b
-                      id="items-list-item-9000"
-                    >
+                    <b>
                       Foo
                     </b>
-                  </ForwardRef>
-                </ForwardRef(Styled(PFDataListCell))>,
-                <ForwardRef(Styled(PFDataListCell))>
-                  <ForwardRef(styled.b)>
-                    Type
-                  </ForwardRef(styled.b)>
-                  Slack
-                </ForwardRef(Styled(PFDataListCell))>,
-              ]
-            }
-            key=".0"
-            rowid="items-list-item-9000"
+                  </a>
+                </LinkAnchor>
+              </Link>
+            </td>
+          </TdBase>
+        </Td>
+        <Td
+          dataLabel="Type"
+        >
+          <TdBase
+            dataLabel="Type"
+            innerRef={null}
           >
-            <div
-              className="pf-c-data-list__item-content"
+            <td
+              className=""
+              data-label="Type"
             >
-              <DataListCell
-                key="name"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-bdVaJa",
-                        "isStatic": false,
-                        "lastClassName": "kruorc",
-                        "rules": Array [
-                          "
-  word-break: break-word;
-",
-                        ],
-                      },
-                      "displayName": "DataListCell",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-bdVaJa",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <PFDataListCell
-                    className="sc-bdVaJa kruorc"
-                  >
-                    <div
-                      className="pf-c-data-list__cell sc-bdVaJa kruorc"
-                    >
-                      <Link
-                        to={
-                          Object {
-                            "pathname": "/foo",
-                          }
-                        }
-                      >
-                        <LinkAnchor
-                          href="/foo"
-                          navigate={[Function]}
-                        >
-                          <a
-                            href="/foo"
-                            onClick={[Function]}
-                          >
-                            <b
-                              id="items-list-item-9000"
-                            >
-                              Foo
-                            </b>
-                          </a>
-                        </LinkAnchor>
-                      </Link>
-                    </div>
-                  </PFDataListCell>
-                </StyledComponent>
-              </DataListCell>
-              <DataListCell
-                key="type"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-bdVaJa",
-                        "isStatic": false,
-                        "lastClassName": "kruorc",
-                        "rules": Array [
-                          "
-  word-break: break-word;
-",
-                        ],
-                      },
-                      "displayName": "DataListCell",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-bdVaJa",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <PFDataListCell
-                    className="sc-bdVaJa kruorc"
-                  >
-                    <div
-                      className="pf-c-data-list__cell sc-bdVaJa kruorc"
-                    >
-                      <styled.b>
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-htpNat",
-                                "isStatic": false,
-                                "lastClassName": "jyYvCB",
-                                "rules": Array [
-                                  "
-  margin-right: 20px;
-",
-                                ],
-                              },
-                              "displayName": "styled.b",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "sc-htpNat",
-                              "target": "b",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                        >
-                          <b
-                            className="sc-htpNat jyYvCB"
-                          >
-                            Type
-                          </b>
-                        </StyledComponent>
-                      </styled.b>
-                      Slack
-                    </div>
-                  </PFDataListCell>
-                </StyledComponent>
-              </DataListCell>
-            </div>
-          </DataListItemCells>
-          <Styled(DataListAction)
-            aria-label="actions"
-            aria-labelledby="items-list-item-9000"
-            columns={3}
-            id="items-list-item-9000"
-            key=".1"
-            rowid="items-list-item-9000"
+              Slack
+            </td>
+          </TdBase>
+        </Td>
+        <ActionsTd
+          dataLabel="Options"
+          gridColumns="120px 120px 120px 120px"
+        >
+          <ActionsTd___StyledTd
+            _css={160}
+            dataLabel="Options"
           >
             <StyledComponent
-              aria-label="actions"
-              aria-labelledby="items-list-item-9000"
-              columns={3}
+              _css={160}
+              dataLabel="Options"
               forwardedComponent={
                 Object {
                   "$$typeof": Symbol(react.forward_ref),
                   "attrs": Array [],
                   "componentStyle": ComponentStyle {
-                    "componentId": "sc-bwzfXH",
+                    "componentId": "ActionsTd___StyledTd-sc-1ys3lw-1",
                     "isStatic": false,
-                    "lastClassName": "llKtln",
+                    "lastClassName": "dIDjZI",
                     "rules": Array [
-                      "
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: ",
+                      "text-align:right;--pf-c-table--cell--Width:",
                       [Function],
-                      ";
-",
+                      "px;",
                     ],
                   },
-                  "displayName": "Styled(DataListAction)",
+                  "displayName": "ActionsTd___StyledTd",
                   "foldedComponentIds": Array [],
                   "render": [Function],
-                  "styledComponentId": "sc-bwzfXH",
-                  "target": [Function],
+                  "styledComponentId": "ActionsTd___StyledTd-sc-1ys3lw-1",
+                  "target": Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "displayName": "Td",
+                    "render": [Function],
+                  },
                   "toString": [Function],
                   "warnTooManyClasses": [Function],
                   "withComponent": [Function],
                 }
               }
               forwardedRef={null}
-              id="items-list-item-9000"
-              rowid="items-list-item-9000"
             >
-              <DataListAction
-                aria-label="actions"
-                aria-labelledby="items-list-item-9000"
-                className="sc-bwzfXH llKtln"
-                columns={3}
-                id="items-list-item-9000"
-                rowid="items-list-item-9000"
+              <Td
+                _css={160}
+                className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
+                dataLabel="Options"
               >
-                <div
-                  className="pf-c-data-list__item-action sc-bwzfXH llKtln"
-                  columns={3}
-                  rowid="items-list-item-9000"
+                <TdBase
+                  _css={160}
+                  className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
+                  dataLabel="Options"
+                  innerRef={null}
                 >
-                  <Switch
-                    aria-label="Toggle notification start"
-                    id="notification-9000-started-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Start"
-                    labelOff="Start"
-                    onChange={[Function]}
+                  <td
+                    _css={160}
+                    className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
+                    data-label="Options"
                   >
-                    <label
-                      className="pf-c-switch"
-                      data-ouia-component-id="OUIA-Generated-Switch-1"
-                      data-ouia-component-type="PF4/Switch"
-                      data-ouia-safe={true}
-                      htmlFor="notification-9000-started-toggle"
+                    <ActionsGrid
+                      gridColumns="120px 120px 120px 120px"
+                      numActions={4}
                     >
-                      <input
-                        aria-label="Toggle notification start"
-                        aria-labelledby={null}
-                        checked={false}
-                        className="pf-c-switch__input"
-                        disabled={false}
-                        id="notification-9000-started-toggle"
-                        onChange={[Function]}
-                        type="checkbox"
-                      />
-                      <span
-                        className="pf-c-switch__toggle"
-                      />
-                      <span
-                        aria-hidden="true"
-                        className="pf-c-switch__label pf-m-on"
-                        id={null}
+                      <StyledComponent
+                        forwardedComponent={
+                          Object {
+                            "$$typeof": Symbol(react.forward_ref),
+                            "attrs": Array [],
+                            "componentStyle": ComponentStyle {
+                              "componentId": "ActionsTd__ActionsGrid-sc-1ys3lw-0",
+                              "isStatic": false,
+                              "lastClassName": "dkSSIN",
+                              "rules": Array [
+                                "display:grid;grid-gap:16px;align-items:center;",
+                                [Function],
+                              ],
+                            },
+                            "displayName": "ActionsGrid",
+                            "foldedComponentIds": Array [],
+                            "render": [Function],
+                            "styledComponentId": "ActionsTd__ActionsGrid-sc-1ys3lw-0",
+                            "target": "div",
+                            "toString": [Function],
+                            "warnTooManyClasses": [Function],
+                            "withComponent": [Function],
+                          }
+                        }
+                        forwardedRef={null}
+                        gridColumns="120px 120px 120px 120px"
+                        numActions={4}
                       >
-                        Start
-                      </span>
-                      <span
-                        aria-hidden="true"
-                        className="pf-c-switch__label pf-m-off"
-                        id={null}
-                      >
-                        Start
-                      </span>
-                    </label>
-                  </Switch>
-                  <Switch
-                    aria-label="Toggle notification success"
-                    id="notification-9000-success-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Success"
-                    labelOff="Success"
-                    onChange={[Function]}
-                  >
-                    <label
-                      className="pf-c-switch"
-                      data-ouia-component-id="OUIA-Generated-Switch-2"
-                      data-ouia-component-type="PF4/Switch"
-                      data-ouia-safe={true}
-                      htmlFor="notification-9000-success-toggle"
-                    >
-                      <input
-                        aria-label="Toggle notification success"
-                        aria-labelledby={null}
-                        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"
-                        id={null}
-                      >
-                        Success
-                      </span>
-                      <span
-                        aria-hidden="true"
-                        className="pf-c-switch__label pf-m-off"
-                        id={null}
-                      >
-                        Success
-                      </span>
-                    </label>
-                  </Switch>
-                  <Switch
-                    aria-label="Toggle notification failure"
-                    id="notification-9000-error-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Failure"
-                    labelOff="Failure"
-                    onChange={[Function]}
-                  >
-                    <label
-                      className="pf-c-switch"
-                      data-ouia-component-id="OUIA-Generated-Switch-3"
-                      data-ouia-component-type="PF4/Switch"
-                      data-ouia-safe={true}
-                      htmlFor="notification-9000-error-toggle"
-                    >
-                      <input
-                        aria-label="Toggle notification failure"
-                        aria-labelledby={null}
-                        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"
-                        id={null}
-                      >
-                        Failure
-                      </span>
-                      <span
-                        aria-hidden="true"
-                        className="pf-c-switch__label pf-m-off"
-                        id={null}
-                      >
-                        Failure
-                      </span>
-                    </label>
-                  </Switch>
-                </div>
-              </DataListAction>
+                        <div
+                          className="ActionsTd__ActionsGrid-sc-1ys3lw-0 dkSSIN"
+                        >
+                          <ActionItem
+                            column={1}
+                            key=".0"
+                            visible={false}
+                          />
+                          <ActionItem
+                            column={2}
+                            key=".1"
+                            visible={true}
+                          >
+                            <ActionItem___StyledDiv
+                              _css={2}
+                            >
+                              <StyledComponent
+                                _css={2}
+                                forwardedComponent={
+                                  Object {
+                                    "$$typeof": Symbol(react.forward_ref),
+                                    "attrs": Array [],
+                                    "componentStyle": ComponentStyle {
+                                      "componentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                      "isStatic": false,
+                                      "lastClassName": "gydHvj",
+                                      "rules": Array [
+                                        "grid-column:",
+                                        [Function],
+                                        ";",
+                                      ],
+                                    },
+                                    "displayName": "ActionItem___StyledDiv",
+                                    "foldedComponentIds": Array [],
+                                    "render": [Function],
+                                    "styledComponentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                    "target": "div",
+                                    "toString": [Function],
+                                    "warnTooManyClasses": [Function],
+                                    "withComponent": [Function],
+                                  }
+                                }
+                                forwardedRef={null}
+                              >
+                                <div
+                                  className="ActionItem___StyledDiv-sc-1x1z9nz-0 cSmxUZ"
+                                >
+                                  <Switch
+                                    aria-label="Toggle notification start"
+                                    id="notification-9000-started-toggle"
+                                    isChecked={false}
+                                    isDisabled={false}
+                                    label="Start"
+                                    labelOff="Start"
+                                    onChange={[Function]}
+                                  >
+                                    <label
+                                      className="pf-c-switch"
+                                      data-ouia-component-id="OUIA-Generated-Switch-1"
+                                      data-ouia-component-type="PF4/Switch"
+                                      data-ouia-safe={true}
+                                      htmlFor="notification-9000-started-toggle"
+                                    >
+                                      <input
+                                        aria-label="Toggle notification start"
+                                        aria-labelledby={null}
+                                        checked={false}
+                                        className="pf-c-switch__input"
+                                        disabled={false}
+                                        id="notification-9000-started-toggle"
+                                        onChange={[Function]}
+                                        type="checkbox"
+                                      />
+                                      <span
+                                        className="pf-c-switch__toggle"
+                                      />
+                                      <span
+                                        aria-hidden="true"
+                                        className="pf-c-switch__label pf-m-on"
+                                        id={null}
+                                      >
+                                        Start
+                                      </span>
+                                      <span
+                                        aria-hidden="true"
+                                        className="pf-c-switch__label pf-m-off"
+                                        id={null}
+                                      >
+                                        Start
+                                      </span>
+                                    </label>
+                                  </Switch>
+                                </div>
+                              </StyledComponent>
+                            </ActionItem___StyledDiv>
+                          </ActionItem>
+                          <ActionItem
+                            column={3}
+                            key=".2"
+                            visible={true}
+                          >
+                            <ActionItem___StyledDiv
+                              _css={3}
+                            >
+                              <StyledComponent
+                                _css={3}
+                                forwardedComponent={
+                                  Object {
+                                    "$$typeof": Symbol(react.forward_ref),
+                                    "attrs": Array [],
+                                    "componentStyle": ComponentStyle {
+                                      "componentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                      "isStatic": false,
+                                      "lastClassName": "gydHvj",
+                                      "rules": Array [
+                                        "grid-column:",
+                                        [Function],
+                                        ";",
+                                      ],
+                                    },
+                                    "displayName": "ActionItem___StyledDiv",
+                                    "foldedComponentIds": Array [],
+                                    "render": [Function],
+                                    "styledComponentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                    "target": "div",
+                                    "toString": [Function],
+                                    "warnTooManyClasses": [Function],
+                                    "withComponent": [Function],
+                                  }
+                                }
+                                forwardedRef={null}
+                              >
+                                <div
+                                  className="ActionItem___StyledDiv-sc-1x1z9nz-0 fZyHIW"
+                                >
+                                  <Switch
+                                    aria-label="Toggle notification success"
+                                    id="notification-9000-success-toggle"
+                                    isChecked={false}
+                                    isDisabled={false}
+                                    label="Success"
+                                    labelOff="Success"
+                                    onChange={[Function]}
+                                  >
+                                    <label
+                                      className="pf-c-switch"
+                                      data-ouia-component-id="OUIA-Generated-Switch-2"
+                                      data-ouia-component-type="PF4/Switch"
+                                      data-ouia-safe={true}
+                                      htmlFor="notification-9000-success-toggle"
+                                    >
+                                      <input
+                                        aria-label="Toggle notification success"
+                                        aria-labelledby={null}
+                                        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"
+                                        id={null}
+                                      >
+                                        Success
+                                      </span>
+                                      <span
+                                        aria-hidden="true"
+                                        className="pf-c-switch__label pf-m-off"
+                                        id={null}
+                                      >
+                                        Success
+                                      </span>
+                                    </label>
+                                  </Switch>
+                                </div>
+                              </StyledComponent>
+                            </ActionItem___StyledDiv>
+                          </ActionItem>
+                          <ActionItem
+                            column={4}
+                            key=".3"
+                            visible={true}
+                          >
+                            <ActionItem___StyledDiv
+                              _css={4}
+                            >
+                              <StyledComponent
+                                _css={4}
+                                forwardedComponent={
+                                  Object {
+                                    "$$typeof": Symbol(react.forward_ref),
+                                    "attrs": Array [],
+                                    "componentStyle": ComponentStyle {
+                                      "componentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                      "isStatic": false,
+                                      "lastClassName": "gydHvj",
+                                      "rules": Array [
+                                        "grid-column:",
+                                        [Function],
+                                        ";",
+                                      ],
+                                    },
+                                    "displayName": "ActionItem___StyledDiv",
+                                    "foldedComponentIds": Array [],
+                                    "render": [Function],
+                                    "styledComponentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                    "target": "div",
+                                    "toString": [Function],
+                                    "warnTooManyClasses": [Function],
+                                    "withComponent": [Function],
+                                  }
+                                }
+                                forwardedRef={null}
+                              >
+                                <div
+                                  className="ActionItem___StyledDiv-sc-1x1z9nz-0 gydHvj"
+                                >
+                                  <Switch
+                                    aria-label="Toggle notification failure"
+                                    id="notification-9000-error-toggle"
+                                    isChecked={false}
+                                    isDisabled={false}
+                                    label="Failure"
+                                    labelOff="Failure"
+                                    onChange={[Function]}
+                                  >
+                                    <label
+                                      className="pf-c-switch"
+                                      data-ouia-component-id="OUIA-Generated-Switch-3"
+                                      data-ouia-component-type="PF4/Switch"
+                                      data-ouia-safe={true}
+                                      htmlFor="notification-9000-error-toggle"
+                                    >
+                                      <input
+                                        aria-label="Toggle notification failure"
+                                        aria-labelledby={null}
+                                        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"
+                                        id={null}
+                                      >
+                                        Failure
+                                      </span>
+                                      <span
+                                        aria-hidden="true"
+                                        className="pf-c-switch__label pf-m-off"
+                                        id={null}
+                                      >
+                                        Failure
+                                      </span>
+                                    </label>
+                                  </Switch>
+                                </div>
+                              </StyledComponent>
+                            </ActionItem___StyledDiv>
+                          </ActionItem>
+                        </div>
+                      </StyledComponent>
+                    </ActionsGrid>
+                  </td>
+                </TdBase>
+              </Td>
             </StyledComponent>
-          </Styled(DataListAction)>
-        </div>
-      </DataListItemRow>
-    </li>
-  </DataListItem>
+          </ActionsTd___StyledTd>
+        </ActionsTd>
+      </tr>
+    </TrBase>
+  </Tr>
 </NotificationListItem>
 `;
diff --git a/awx/ui_next/src/components/PaginatedTable/ActionItem.jsx b/awx/ui_next/src/components/PaginatedTable/ActionItem.jsx
index f9c423fee3..5d4f22d12f 100644
--- a/awx/ui_next/src/components/PaginatedTable/ActionItem.jsx
+++ b/awx/ui_next/src/components/PaginatedTable/ActionItem.jsx
@@ -13,9 +13,13 @@ export default function ActionItem({ column, tooltip, visible, children }) {
         grid-column: ${column};
       `}
     >
-      <Tooltip content={tooltip} position="top">
-        <div>{children}</div>
-      </Tooltip>
+      {tooltip ? (
+        <Tooltip content={tooltip} position="top">
+          <div>{children}</div>
+        </Tooltip>
+      ) : (
+        children
+      )}
     </div>
   );
 }
diff --git a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
index cec9a984ef..a7b076da57 100644
--- a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
+++ b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
@@ -13,7 +13,12 @@ const Th = styled(PFTh)`
   --pf-c-table--cell--Overflow: initial;
 `;
 
-export default function HeaderRow({ qsConfig, isExpandable, children }) {
+export default function HeaderRow({
+  qsConfig,
+  isExpandable,
+  isSelectable,
+  children,
+}) {
   const location = useLocation();
   const history = useHistory();
 
@@ -49,7 +54,7 @@ export default function HeaderRow({ qsConfig, isExpandable, children }) {
     <Thead>
       <Tr>
         {isExpandable && <Th />}
-        <Th />
+        {isSelectable && <Th />}
         {React.Children.map(
           children,
           child =>
@@ -66,6 +71,10 @@ export default function HeaderRow({ qsConfig, isExpandable, children }) {
   );
 }
 
+HeaderRow.defaultProps = {
+  isSelectable: true,
+};
+
 export function HeaderCell({
   sortKey,
   onSort,