convert NotificationList to tables

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}
           />
         )}
       />

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();

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 {
+import { Switch } from '@patternfly/react-core';
-  DataListAction as _DataListAction,
+import { Tr, Td } from '@patternfly/react-table';
-  DataListItem,
+import { ActionsTd, ActionItem } from '../PaginatedTable';
-  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;
-`;
 
 function NotificationListItem({
   canToggleNotifications,
@@ -37,38 +21,20 @@ function NotificationListItem({
   showApprovalsToggle,
 }) {
   return (
-    <DataListItem
+    <Tr id={`notification-row-${notification.id}`}>
-      aria-labelledby={`items-list-item-${notification.id}`}
+      <Td id={`notification-${notification.id}`} dataLabel={i18n._(t`Name`)}>
-      key={notification.id}
+        <Link to={`${detailUrl}`}>
-      id={`${notification.id}`}
+          <b>{notification.name}</b>
-    >
-      <DataListItemRow>
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name">
-              <Link
-                to={{
-                  pathname: detailUrl,
-                }}
-              >
-                <b id={`items-list-item-${notification.id}`}>
-                  {notification.name}
-                </b>
         </Link>
-            </DataListCell>,
+      </Td>
-            <DataListCell key="type">
+      <Td dataLabel={i18n._(t`Type`)}>
-              <Label>{i18n._(t`Type `)}</Label>
         {typeLabels[notification.notification_type]}
-            </DataListCell>,
+      </Td>
-          ]}
+      <ActionsTd
-        />
+        dataLabel={i18n._(t`Options`)}
-        <DataListAction
+        gridColumns="120px 120px 120px 120px"
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={`items-list-item-${notification.id}`}
-          id={`items-list-item-${notification.id}`}
-          columns={showApprovalsToggle ? 4 : 3}
       >
-          {showApprovalsToggle && (
+        <ActionItem visible={showApprovalsToggle}>
           <Switch
             id={`notification-${notification.id}-approvals-toggle`}
             label={i18n._(t`Approval`)}
@@ -84,7 +50,8 @@ function NotificationListItem({
             }
             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>
+        </ActionItem>
-      </DataListItemRow>
+      </ActionsTd>
-    </DataListItem>
+    </Tr>
   );
 }
 

awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx

@@ -30,6 +30,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('initially renders succesfully and displays correct label', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationListItem
             notification={mockNotif}
             toggleNotification={toggleNotification}
@@ -37,6 +39,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
             canToggleNotifications
             typeLabels={typeLabels}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('NotificationListItem')).toMatchSnapshot();
     expect(wrapper.find('Switch').length).toBe(3);
@@ -44,6 +48,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('shows approvals toggle when configured', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationListItem
             notification={mockNotif}
             toggleNotification={toggleNotification}
@@ -52,12 +58,16 @@ describe('<NotificationListItem 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(
+      <table>
+        <tbody>
           <NotificationListItem
             notification={mockNotif}
             toggleNotification={toggleNotification}
@@ -65,16 +75,17 @@ describe('<NotificationListItem canToggleNotifications />', () => {
             canToggleNotifications
             typeLabels={typeLabels}
           />
+        </tbody>
+      </table>
     );
-    const typeCell = wrapper
+    const typeCell = wrapper.find('Td').at(1);
-      .find('DataListCell')
-      .at(1)
-      .find('div');
     expect(typeCell.text()).toContain('Slack');
   });
 
   test('handles approvals click when toggle is on', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationListItem
             notification={mockNotif}
             approvalsTurnedOn
@@ -84,6 +95,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
             typeLabels={typeLabels}
             showApprovalsToggle
           />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification approvals"]')
@@ -95,6 +108,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles approvals click when toggle is off', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationListItem
             notification={mockNotif}
             approvalsTurnedOn={false}
@@ -104,6 +119,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
             typeLabels={typeLabels}
             showApprovalsToggle
           />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification approvals"]')
@@ -114,6 +131,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles started click when toggle is on', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationListItem
             notification={mockNotif}
             startedTurnedOn
@@ -122,6 +141,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
             canToggleNotifications
             typeLabels={typeLabels}
           />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification start"]')
@@ -132,6 +153,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles started click when toggle is off', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationListItem
             notification={mockNotif}
             startedTurnedOn={false}
@@ -140,6 +163,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
             canToggleNotifications
             typeLabels={typeLabels}
           />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification start"]')
@@ -150,6 +175,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles success click when toggle is on', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationListItem
             notification={mockNotif}
             successTurnedOn
@@ -158,6 +185,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
             canToggleNotifications
             typeLabels={typeLabels}
           />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification success"]')
@@ -168,6 +197,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles success click when toggle is off', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationListItem
             notification={mockNotif}
             successTurnedOn={false}
@@ -176,6 +207,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
             canToggleNotifications
             typeLabels={typeLabels}
           />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification success"]')
@@ -186,6 +219,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles error click when toggle is on', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationListItem
             notification={mockNotif}
             errorTurnedOn
@@ -194,6 +229,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
             canToggleNotifications
             typeLabels={typeLabels}
           />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification failure"]')
@@ -204,6 +241,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles error click when toggle is off', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <NotificationListItem
             notification={mockNotif}
             errorTurnedOn={false}
@@ -212,6 +251,8 @@ describe('<NotificationListItem canToggleNotifications />', () => {
             canToggleNotifications
             typeLabels={typeLabels}
           />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification failure"]')

awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap

@@ -24,99 +24,37 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
     }
   }
 >
-  <DataListItem
+  <Tr
-    aria-labelledby="items-list-item-9000"
+    id="notification-row-9000"
+  >
+    <TrBase
+      id="notification-row-9000"
+      innerRef={null}
+    >
+      <tr
         className=""
-    id="9000"
+        data-ouia-component-id="OUIA-Generated-TableRow-1"
-    isExpanded={false}
+        data-ouia-component-type="PF4/TableRow"
-    key="9000"
+        data-ouia-safe={true}
+        hidden={false}
+        id="notification-row-9000"
       >
-    <li
+        <Td
-      aria-labelledby="items-list-item-9000"
+          dataLabel="Name"
-      className="pf-c-data-list__item"
+          id="notification-9000"
-      id="9000"
         >
-      <DataListItemRow
+          <TdBase
-        key=".0"
+            dataLabel="Name"
-        rowid="items-list-item-9000"
+            id="notification-9000"
+            innerRef={null}
           >
-        <div
+            <td
-          className="pf-c-data-list__item-row"
+              className=""
-        >
+              data-label="Name"
-          <DataListItemCells
+              id="notification-9000"
-            dataListCells={
-              Array [
-                <ForwardRef(Styled(PFDataListCell))>
-                  <ForwardRef
-                    to={
-                      Object {
-                        "pathname": "/foo",
-                      }
-                    }
-                  >
-                    <b
-                      id="items-list-item-9000"
-                    >
-                      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"
-          >
-            <div
-              className="pf-c-data-list__item-content"
-            >
-              <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={
+                to="/foo"
-                          Object {
-                            "pathname": "/foo",
-                          }
-                        }
               >
                 <LinkAnchor
                   href="/foo"
@@ -126,153 +64,165 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                     href="/foo"
                     onClick={[Function]}
                   >
-                            <b
+                    <b>
-                              id="items-list-item-9000"
-                            >
                       Foo
                     </b>
                   </a>
                 </LinkAnchor>
               </Link>
-                    </div>
+            </td>
-                  </PFDataListCell>
+          </TdBase>
-                </StyledComponent>
+        </Td>
-              </DataListCell>
+        <Td
-              <DataListCell
+          dataLabel="Type"
-                key="type"
         >
-                <StyledComponent
+          <TdBase
-                  forwardedComponent={
+            dataLabel="Type"
-                    Object {
+            innerRef={null}
-                      "$$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
+            <td
-                    className="sc-bdVaJa kruorc"
+              className=""
+              data-label="Type"
             >
-                    <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>
+            </td>
-                  </PFDataListCell>
+          </TdBase>
-                </StyledComponent>
+        </Td>
-              </DataListCell>
+        <ActionsTd
-            </div>
+          dataLabel="Options"
-          </DataListItemCells>
+          gridColumns="120px 120px 120px 120px"
-          <Styled(DataListAction)
+        >
-            aria-label="actions"
+          <ActionsTd___StyledTd
-            aria-labelledby="items-list-item-9000"
+            _css={160}
-            columns={3}
+            dataLabel="Options"
-            id="items-list-item-9000"
-            key=".1"
-            rowid="items-list-item-9000"
           >
             <StyledComponent
-              aria-label="actions"
+              _css={160}
-              aria-labelledby="items-list-item-9000"
+              dataLabel="Options"
-              columns={3}
               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 [
-                      "
+                      "text-align:right;--pf-c-table--cell--Width:",
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: ",
                       [Function],
-                      ";
+                      "px;",
-",
                     ],
                   },
-                  "displayName": "Styled(DataListAction)",
+                  "displayName": "ActionsTd___StyledTd",
                   "foldedComponentIds": Array [],
                   "render": [Function],
-                  "styledComponentId": "sc-bwzfXH",
+                  "styledComponentId": "ActionsTd___StyledTd-sc-1ys3lw-1",
-                  "target": [Function],
+                  "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
+              <Td
-                aria-label="actions"
+                _css={160}
-                aria-labelledby="items-list-item-9000"
+                className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
-                className="sc-bwzfXH llKtln"
+                dataLabel="Options"
-                columns={3}
+              >
-                id="items-list-item-9000"
+                <TdBase
-                rowid="items-list-item-9000"
+                  _css={160}
+                  className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
+                  dataLabel="Options"
+                  innerRef={null}
+                >
+                  <td
+                    _css={160}
+                    className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
+                    data-label="Options"
+                  >
+                    <ActionsGrid
+                      gridColumns="120px 120px 120px 120px"
+                      numActions={4}
+                    >
+                      <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}
                       >
                         <div
-                  className="pf-c-data-list__item-action sc-bwzfXH llKtln"
+                          className="ActionsTd__ActionsGrid-sc-1ys3lw-0 dkSSIN"
-                  columns={3}
+                        >
-                  rowid="items-list-item-9000"
+                          <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"
@@ -319,6 +269,49 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                                       </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"
@@ -364,6 +357,49 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                                       </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"
@@ -410,12 +446,20 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                                     </label>
                                   </Switch>
                                 </div>
-              </DataListAction>
                               </StyledComponent>
-          </Styled(DataListAction)>
+                            </ActionItem___StyledDiv>
+                          </ActionItem>
                         </div>
-      </DataListItemRow>
+                      </StyledComponent>
-    </li>
+                    </ActionsGrid>
-  </DataListItem>
+                  </td>
+                </TdBase>
+              </Td>
+            </StyledComponent>
+          </ActionsTd___StyledTd>
+        </ActionsTd>
+      </tr>
+    </TrBase>
+  </Tr>
 </NotificationListItem>
 `;

awx/ui_next/src/components/PaginatedTable/ActionItem.jsx

@@ -13,9 +13,13 @@ export default function ActionItem({ column, tooltip, visible, children }) {
         grid-column: ${column};
       `}
     >
+      {tooltip ? (
         <Tooltip content={tooltip} position="top">
           <div>{children}</div>
         </Tooltip>
+      ) : (
+        children
+      )}
     </div>
   );
 }

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,