From 421d8f215cdec4c5c49e8b2c19c55fb39ff6425b Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Mon, 14 Jun 2021 11:35:38 -0700
Subject: [PATCH] Convert lists to tables

- ProjectJobTemplatesList
- UserTokenList
---
 .../ProjectJobTemplatesList.jsx               |  63 ++--
 .../ProjectJobTemplatesListItem.jsx           | 168 ++++-----
 .../ProjectJobTemplatesListItem.test.jsx      | 336 ++++++++++--------
 .../User/UserTokenList/UserTokenList.jsx      |  36 +-
 .../User/UserTokenList/UserTokenList.test.jsx |  44 +--
 .../User/UserTokenList/UserTokenListItem.jsx  |  83 ++---
 .../UserTokenList/UserTokenListItem.test.jsx  | 117 ++++--
 awx/ui_next/src/screens/User/Users.test.jsx   |   3 +-
 8 files changed, 428 insertions(+), 422 deletions(-)

diff --git a/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesList.jsx b/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesList.jsx
index 7e3bd41738..d08a1b01a2 100644
--- a/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesList.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesList.jsx
@@ -7,7 +7,11 @@ import { JobTemplatesAPI } from '../../../api';
 import AlertModal from '../../../components/AlertModal';
 import DatalistToolbar from '../../../components/DataListToolbar';
 import ErrorDetail from '../../../components/ErrorDetail';
-import PaginatedDataList, {
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
@@ -70,9 +74,13 @@ function ProjectJobTemplatesList() {
     fetchTemplates();
   }, [fetchTemplates]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    jobTemplates
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(jobTemplates);
 
   const {
     isLoading: isDeleteLoading,
@@ -94,7 +102,7 @@ function ProjectJobTemplatesList() {
 
   const handleTemplateDelete = async () => {
     await deleteTemplates();
-    setSelected([]);
+    clearSelected();
   };
 
   const canAddJT =
@@ -107,14 +115,14 @@ function ProjectJobTemplatesList() {
   return (
     <>
       <Card>
-        <PaginatedDataList
+        <PaginatedTable
           contentError={contentError}
           hasContentLoading={isDeleteLoading || isLoading}
           items={jobTemplates}
           itemCount={itemCount}
           pluralizedItemName={t`Job templates`}
           qsConfig={QS_CONFIG}
-          onRowClick={handleSelect}
+          clearSelected={clearSelected}
           toolbarSearchColumns={[
             {
               name: t`Name`,
@@ -130,32 +138,6 @@ function ProjectJobTemplatesList() {
               key: 'modified_by__username__icontains',
             },
           ]}
-          toolbarSortColumns={[
-            {
-              name: t`Inventory`,
-              key: 'job_template__inventory__id',
-            },
-            {
-              name: t`Last job run`,
-              key: 'last_job_run',
-            },
-            {
-              name: t`Modified`,
-              key: 'modified',
-            },
-            {
-              name: t`Name`,
-              key: 'name',
-            },
-            {
-              name: t`Project`,
-              key: 'jobtemplate__project__id',
-            },
-            {
-              name: t`Type`,
-              key: 'type',
-            },
-          ]}
           toolbarSearchableKeys={searchableKeys}
           toolbarRelatedSearchableKeys={relatedSearchableKeys}
           renderToolbar={props => (
@@ -163,9 +145,7 @@ function ProjectJobTemplatesList() {
               {...props}
               showSelectAll
               isAllSelected={isAllSelected}
-              onSelectAll={isSelected =>
-                setSelected(isSelected ? [...jobTemplates] : [])
-              }
+              onSelectAll={selectAll}
               qsConfig={QS_CONFIG}
               additionalControls={[
                 ...(canAddJT ? [addButton] : []),
@@ -178,7 +158,15 @@ function ProjectJobTemplatesList() {
               ]}
             />
           )}
-          renderItem={template => (
+          headerRow={
+            <HeaderRow qsConfig={QS_CONFIG}>
+              <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+              <HeaderCell sortKey="type">{t`Type`}</HeaderCell>
+              <HeaderCell>{t`Recent jobs`}</HeaderCell>
+              <HeaderCell>{t`Actions`}</HeaderCell>
+            </HeaderRow>
+          }
+          renderRow={(template, index) => (
             <ProjectTemplatesListItem
               key={template.id}
               value={template.name}
@@ -186,6 +174,7 @@ function ProjectJobTemplatesList() {
               detailUrl={`/templates/${template.type}/${template.id}/details`}
               onSelect={() => handleSelect(template)}
               isSelected={selected.some(row => row.id === template.id)}
+              rowIndex={index}
             />
           )}
           emptyStateControls={canAddJT && addButton}
diff --git a/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx b/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx
index 388a65cbc7..455d83fedb 100644
--- a/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx
@@ -1,36 +1,21 @@
 import 'styled-components/macro';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import {
-  Button,
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  Tooltip,
-} from '@patternfly/react-core';
-import { t } from '@lingui/macro';
-
+import { Button, Tooltip } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 import {
   ExclamationTriangleIcon,
   PencilAltIcon,
   RocketIcon,
 } from '@patternfly/react-icons';
+import { t } from '@lingui/macro';
 import styled from 'styled-components';
-import DataListCell from '../../../components/DataListCell';
 
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { LaunchButton } from '../../../components/LaunchButton';
 import Sparkline from '../../../components/Sparkline';
 import { toTitleCase } from '../../../util/strings';
 
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: repeat(2, 40px);
-`;
-
 const ExclamationTriangleIconWarning = styled(ExclamationTriangleIcon)`
   color: var(--pf-global--warning-color--100);
   margin-left: 18px;
@@ -41,8 +26,8 @@ function ProjectJobTemplateListItem({
   isSelected,
   onSelect,
   detailUrl,
+  rowIndex,
 }) {
-  const labelId = `check-action-${template.id}`;
   const canLaunch = template.summary_fields.user_capabilities.start;
 
   const missingResourceIcon =
@@ -57,90 +42,75 @@ function ProjectJobTemplateListItem({
     !template.execution_environment;
 
   return (
-    <DataListItem aria-labelledby={labelId} id={`${template.id}`}>
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-jobTemplate-${template.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="divider">
-              <span>
-                <Link to={`${detailUrl}`}>
-                  <b>{template.name}</b>
-                </Link>
-              </span>
-              {missingResourceIcon && (
-                <span>
-                  <Tooltip
-                    content={t`Resources are missing from this template.`}
-                    position="right"
-                  >
-                    <ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
-                  </Tooltip>
-                </span>
-              )}
-              {missingExecutionEnvironment && (
-                <span>
-                  <Tooltip
-                    content={t`Custom virtual environment ${template.custom_virtualenv} must be replaced by an execution environment.`}
-                    position="right"
-                    className="missing-execution-environment"
-                  >
-                    <ExclamationTriangleIconWarning />
-                  </Tooltip>
-                </span>
-              )}
-            </DataListCell>,
-            <DataListCell key="type">
-              {toTitleCase(template.type)}
-            </DataListCell>,
-            <DataListCell key="sparkline">
-              <Sparkline jobs={template.summary_fields.recent_jobs} />
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={t`actions`}
-          aria-labelledby={labelId}
-          id={labelId}
+    <Tr id={`template-row-${template.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+      />
+      <Td dataLabel={t`Name`}>
+        <Link to={`${detailUrl}`}>
+          {template.name}
+          {missingResourceIcon && (
+            <Tooltip
+              content={t`Resources are missing from this template.`}
+              position="right"
+            >
+              <ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
+            </Tooltip>
+          )}
+          {missingExecutionEnvironment && (
+            <Tooltip
+              content={t`Custom virtual environment ${template.custom_virtualenv} must be replaced by an execution environment.`}
+              position="right"
+              className="missing-execution-environment"
+            >
+              <ExclamationTriangleIconWarning />
+            </Tooltip>
+          )}
+        </Link>
+      </Td>
+      <Td dataLabel={t`Type`}>{toTitleCase(template.type)}</Td>
+      <Td dataLabel={t`Recent jobs`}>
+        <Sparkline jobs={template.summary_fields.recent_jobs} />
+      </Td>
+      <ActionsTd dataLabel={t`Actions`}>
+        <ActionItem
+          visible={canLaunch && template.type === 'job_template'}
+          tooltip={t`Launch Template`}
         >
-          {canLaunch && template.type === 'job_template' && (
-            <Tooltip content={t`Launch Template`} position="top">
-              <LaunchButton resource={template}>
-                {({ handleLaunch, isLaunching }) => (
-                  <Button
-                    ouiaId={`${template.id}-launch-button`}
-                    css="grid-column: 1"
-                    variant="plain"
-                    onClick={handleLaunch}
-                    isDisabled={isLaunching}
-                  >
-                    <RocketIcon />
-                  </Button>
-                )}
-              </LaunchButton>
-            </Tooltip>
-          )}
-          {template.summary_fields.user_capabilities.edit && (
-            <Tooltip content={t`Edit Template`} position="top">
+          <LaunchButton resource={template}>
+            {({ handleLaunch, isLaunching }) => (
               <Button
-                ouiaId={`${template.id}-edit-button`}
-                css="grid-column: 2"
+                ouiaId={`${template.id}-launch-button`}
+                css="grid-column: 1"
                 variant="plain"
-                component={Link}
-                to={`/templates/${template.type}/${template.id}/edit`}
+                onClick={handleLaunch}
+                isDisabled={isLaunching}
               >
-                <PencilAltIcon />
+                <RocketIcon />
               </Button>
-            </Tooltip>
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+            )}
+          </LaunchButton>
+        </ActionItem>
+        <ActionItem
+          visible={template.summary_fields.user_capabilities.edit}
+          tooltip={t`Edit Template`}
+        >
+          <Button
+            ouiaId={`${template.id}-edit-button`}
+            css="grid-column: 2"
+            variant="plain"
+            component={Link}
+            to={`/templates/${template.type}/${template.id}/edit`}
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 
diff --git a/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.test.jsx b/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.test.jsx
index 895d76a807..d61ed8f720 100644
--- a/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.test.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.test.jsx
@@ -7,157 +7,195 @@ import ProjectJobTemplatesListItem from './ProjectJobTemplatesListItem';
 describe('<ProjectJobTemplatesListItem />', () => {
   test('launch button shown to users with start capabilities', () => {
     const wrapper = mountWithContexts(
-      <ProjectJobTemplatesListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              start: true,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <ProjectJobTemplatesListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  start: true,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('LaunchButton').exists()).toBeTruthy();
   });
+
   test('launch button hidden from users without start capabilities', () => {
     const wrapper = mountWithContexts(
-      <ProjectJobTemplatesListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              start: false,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <ProjectJobTemplatesListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  start: false,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('LaunchButton').exists()).toBeFalsy();
   });
+
   test('edit button shown to users with edit capabilities', () => {
     const wrapper = mountWithContexts(
-      <ProjectJobTemplatesListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: true,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <ProjectJobTemplatesListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  edit: true,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });
+
   test('edit button hidden from users without edit capabilities', () => {
     const wrapper = mountWithContexts(
-      <ProjectJobTemplatesListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <ProjectJobTemplatesListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });
+
   test('missing resource icon is shown.', () => {
     const wrapper = mountWithContexts(
-      <ProjectJobTemplatesListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <ProjectJobTemplatesListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(true);
   });
+
   test('missing resource icon is not shown when there is a project and an inventory.', () => {
     const wrapper = mountWithContexts(
-      <ProjectJobTemplatesListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-            project: { name: 'Foo', id: 2 },
-            inventory: { name: 'Bar', id: 2 },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <ProjectJobTemplatesListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+                project: { name: 'Foo', id: 2 },
+                inventory: { name: 'Bar', id: 2 },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
+
   test('missing resource icon is not shown when inventory is prompt_on_launch, and a project', () => {
     const wrapper = mountWithContexts(
-      <ProjectJobTemplatesListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          ask_inventory_on_launch: true,
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-            project: { name: 'Foo', id: 2 },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <ProjectJobTemplatesListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              ask_inventory_on_launch: true,
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+                project: { name: 'Foo', id: 2 },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
   test('missing resource icon is not shown type is workflow_job_template', () => {
     const wrapper = mountWithContexts(
-      <ProjectJobTemplatesListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'workflow_job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <ProjectJobTemplatesListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'workflow_job_template',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
@@ -166,19 +204,23 @@ describe('<ProjectJobTemplatesListItem />', () => {
       initialEntries: ['/projects/1/job_templates'],
     });
     const wrapper = mountWithContexts(
-      <ProjectJobTemplatesListItem
-        isSelected={false}
-        detailUrl="/templates/job_template/2/details"
-        template={{
-          id: 2,
-          name: 'Template 2',
-          summary_fields: {
-            user_capabilities: {
-              edit: false,
-            },
-          },
-        }}
-      />,
+      <table>
+        <tbody>
+          <ProjectJobTemplatesListItem
+            isSelected={false}
+            detailUrl="/templates/job_template/2/details"
+            template={{
+              id: 2,
+              name: 'Template 2',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>,
       { context: { router: { history } } }
     );
     wrapper.find('Link').simulate('click', { button: 0 });
@@ -189,22 +231,26 @@ describe('<ProjectJobTemplatesListItem />', () => {
 
   test('should render warning about missing execution environment', () => {
     const wrapper = mountWithContexts(
-      <ProjectJobTemplatesListItem
-        isSelected={false}
-        template={{
-          id: 1,
-          name: 'Template 1',
-          url: '/templates/job_template/1',
-          type: 'job_template',
-          summary_fields: {
-            user_capabilities: {
-              edit: true,
-            },
-          },
-          custom_virtualenv: '/var/lib/awx/env',
-          execution_environment: null,
-        }}
-      />
+      <table>
+        <tbody>
+          <ProjectJobTemplatesListItem
+            isSelected={false}
+            template={{
+              id: 1,
+              name: 'Template 1',
+              url: '/templates/job_template/1',
+              type: 'job_template',
+              summary_fields: {
+                user_capabilities: {
+                  edit: true,
+                },
+              },
+              custom_virtualenv: '/var/lib/awx/env',
+              execution_environment: null,
+            }}
+          />
+        </tbody>
+      </table>
     );
 
     expect(
diff --git a/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.jsx b/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.jsx
index 2c111d9be3..034d52d4cb 100644
--- a/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.jsx
@@ -3,7 +3,11 @@ import { useLocation, useParams } from 'react-router-dom';
 
 import { t } from '@lingui/macro';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
-import PaginatedDataList, {
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
@@ -68,9 +72,13 @@ function UserTokenList() {
     fetchTokens();
   }, [fetchTokens]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    tokens
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(tokens);
 
   const {
     isLoading: isDeleteLoading,
@@ -91,21 +99,21 @@ function UserTokenList() {
   );
   const handleDelete = async () => {
     await deleteTokens();
-    setSelected([]);
+    clearSelected();
   };
 
   const canAdd = true;
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={error}
         hasContentLoading={isLoading || isDeleteLoading}
         items={tokens}
         itemCount={itemCount}
         pluralizedItemName={t`Tokens`}
         qsConfig={QS_CONFIG}
-        onRowClick={handleSelect}
+        clearSelected={clearSelected}
         toolbarSearchColumns={[
           {
             name: t`Application name`,
@@ -147,9 +155,7 @@ function UserTokenList() {
             showSelectAll
             isAllSelected={isAllSelected}
             qsConfig={QS_CONFIG}
-            onSelectAll={isSelected =>
-              setSelected(isSelected ? [...tokens] : [])
-            }
+            onSelectAll={selectAll}
             additionalControls={[
               ...(canAdd
                 ? [
@@ -168,7 +174,14 @@ function UserTokenList() {
             ]}
           />
         )}
-        renderItem={token => (
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG}>
+            <HeaderCell sortKey="application__name">{t`Name`}</HeaderCell>
+            <HeaderCell sortKey="scope">{t`Scope`}</HeaderCell>
+            <HeaderCell sortKey="expires">{t`Expires`}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(token, index) => (
           <UserTokensListItem
             key={token.id}
             token={token}
@@ -176,6 +189,7 @@ function UserTokenList() {
               handleSelect(token);
             }}
             isSelected={selected.some(row => row.id === token.id)}
+            rowIndex={index}
           />
         )}
         emptyStateControls={
diff --git a/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.test.jsx b/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.test.jsx
index 2b05d2ef35..983df13629 100644
--- a/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.test.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.test.jsx
@@ -143,32 +143,6 @@ describe('<UserTokenList />', () => {
     expect(wrapper.find('UserTokenList').length).toBe(1);
   });
 
-  test('edit button should be disabled', async () => {
-    await act(async () => {
-      wrapper = mountWithContexts(<UserTokenList />);
-    });
-    waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
-  });
-
-  test('should enable edit button', async () => {
-    UsersAPI.readTokens.mockResolvedValue(tokens);
-    await act(async () => {
-      wrapper = mountWithContexts(<UserTokenList />);
-    });
-    waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
-    expect(
-      wrapper.find('DataListCheck[id="select-token-3"]').props().checked
-    ).toBe(false);
-    await act(async () => {
-      wrapper.find('DataListCheck[id="select-token-3"]').invoke('onChange')(
-        true
-      );
-    });
-    wrapper.update();
-    expect(
-      wrapper.find('DataListCheck[id="select-token-3"]').props().checked
-    ).toBe(true);
-  });
   test('delete button should be disabled', async () => {
     UsersAPI.readTokens.mockResolvedValue(tokens);
     await act(async () => {
@@ -179,6 +153,7 @@ describe('<UserTokenList />', () => {
       true
     );
   });
+
   test('should select and then delete item properly', async () => {
     UsersAPI.readTokens.mockResolvedValue(tokens);
     await act(async () => {
@@ -190,13 +165,17 @@ describe('<UserTokenList />', () => {
     );
     await act(async () => {
       wrapper
-        .find('DataListCheck[aria-labelledby="check-action-3"]')
+        .find('.pf-c-table__check')
+        .at(2)
+        .find('input')
         .prop('onChange')(tokens.data.results[0]);
     });
     wrapper.update();
     expect(
       wrapper
-        .find('DataListCheck[aria-labelledby="check-action-3"]')
+        .find('.pf-c-table__check')
+        .at(2)
+        .find('input')
         .prop('checked')
     ).toBe(true);
     expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
@@ -213,6 +192,7 @@ describe('<UserTokenList />', () => {
     wrapper.update();
     expect(TokensAPI.destroy).toHaveBeenCalledWith(3);
   });
+
   test('should select and then delete item properly', async () => {
     UsersAPI.readTokens.mockResolvedValue(tokens);
     TokensAPI.destroy.mockRejectedValue(
@@ -236,13 +216,17 @@ describe('<UserTokenList />', () => {
     );
     await act(async () => {
       wrapper
-        .find('DataListCheck[aria-labelledby="check-action-3"]')
+        .find('.pf-c-table__check')
+        .at(2)
+        .find('input')
         .prop('onChange')(tokens.data.results[0]);
     });
     wrapper.update();
     expect(
       wrapper
-        .find('DataListCheck[aria-labelledby="check-action-3"]')
+        .find('.pf-c-table__check')
+        .at(2)
+        .find('input')
         .prop('checked')
     ).toBe(true);
     expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
diff --git a/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.jsx b/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.jsx
index 5248802e1e..df246aa5d9 100644
--- a/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.jsx
@@ -2,74 +2,31 @@ import React from 'react';
 import { Link, useParams } from 'react-router-dom';
 
 import { t } from '@lingui/macro';
-import {
-  DataListItemCells,
-  DataListCheck,
-  DataListItemRow,
-  DataListItem,
-} from '@patternfly/react-core';
-import styled from 'styled-components';
+import { Tr, Td } from '@patternfly/react-table';
 import { toTitleCase } from '../../../util/strings';
-
 import { formatDateString } from '../../../util/dates';
-import DataListCell from '../../../components/DataListCell';
 
-const Label = styled.b`
-  margin-right: 20px;
-`;
-
-const NameLabel = styled.b`
-  margin-right: 5px;
-`;
-
-function UserTokenListItem({ token, isSelected, onSelect }) {
+function UserTokenListItem({ token, isSelected, onSelect, rowIndex }) {
   const { id } = useParams();
-  const labelId = `check-action-${token.id}`;
   return (
-    <DataListItem key={token.id} aria-labelledby={labelId} id={`${token.id}`}>
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-token-${token.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell aria-label={t`Token type`} key="type">
-              <Link to={`/users/${id}/tokens/${token.id}/details`}>
-                {token.summary_fields?.application
-                  ? t`Application access token`
-                  : t`Personal access token`}
-              </Link>
-            </DataListCell>,
-            <DataListCell
-              aria-label={t`Application name`}
-              key="applicationName"
-            >
-              {token.summary_fields?.application && (
-                <span>
-                  <NameLabel>{t`Application`}</NameLabel>
-                  <Link
-                    to={`/applications/${token.summary_fields.application.id}/details`}
-                  >
-                    {token.summary_fields.application.name}
-                  </Link>
-                </span>
-              )}
-            </DataListCell>,
-            <DataListCell aria-label={t`Scope`} key="scope">
-              <Label>{t`Scope`}</Label>
-              {toTitleCase(token.scope)}
-            </DataListCell>,
-            <DataListCell aria-label={t`Expiration`} key="expiration">
-              <Label>{t`Expires`}</Label>
-              {formatDateString(token.expires)}
-            </DataListCell>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
+    <Tr id={`token-row-${token.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+      />
+      <Td dataLabel={t`Name`}>
+        <Link to={`/users/${id}/tokens/${token.id}/details`}>
+          {token.summary_fields?.application
+            ? token.summary_fields.application.name
+            : `Personal access token`}
+        </Link>
+      </Td>
+      <Td dataLabel={t`Scope`}>{toTitleCase(token.scope)}</Td>
+      <Td dataLabel={t`Expires`}>{formatDateString(token.expires)}</Td>
+    </Tr>
   );
 }
 
diff --git a/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.test.jsx b/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.test.jsx
index 87bc06401c..9d36114e90 100644
--- a/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.test.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.test.jsx
@@ -39,7 +39,13 @@ describe('<UserTokenListItem />', () => {
   let wrapper;
   test('should mount properly', async () => {
     await act(async () => {
-      wrapper = mountWithContexts(<UserTokenListItem token={token} />);
+      wrapper = mountWithContexts(
+        <table>
+          <tbody>
+            <UserTokenListItem token={token} />
+          </tbody>
+        </table>
+      );
     });
     expect(wrapper.find('UserTokenListItem').length).toBe(1);
   });
@@ -47,62 +53,101 @@ describe('<UserTokenListItem />', () => {
   test('should render application access token row properly', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <UserTokenListItem isSelected={false} token={token} />
+        <table>
+          <tbody>
+            <UserTokenListItem isSelected={false} token={token} />
+          </tbody>
+        </table>
       );
     });
-    expect(wrapper.find('DataListCheck').prop('checked')).toBe(false);
-    expect(wrapper.find('PFDataListCell[aria-label="Token type"]').text()).toBe(
-      'Application access token'
-    );
     expect(
-      wrapper.find('PFDataListCell[aria-label="Application name"]').text()
-    ).toContain('Foobar app');
-    expect(wrapper.find('PFDataListCell[aria-label="Scope"]').text()).toContain(
-      'Read'
-    );
+      wrapper
+        .find('Td')
+        .first()
+        .prop('select').isSelected
+    ).toBe(false);
     expect(
-      wrapper.find('PFDataListCell[aria-label="Expiration"]').text()
+      wrapper
+        .find('Td')
+        .at(1)
+        .text()
+    ).toBe('Foobar app');
+    expect(
+      wrapper
+        .find('Td')
+        .at(2)
+        .text()
+    ).toContain('Read');
+    expect(
+      wrapper
+        .find('Td')
+        .at(3)
+        .text()
     ).toContain('10/25/3019, 3:06:43 PM');
   });
 
   test('should render personal access token row properly', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <UserTokenListItem
-          isSelected={false}
-          token={{
-            ...token,
-            refresh_token: null,
-            application: null,
-            scope: 'write',
-            summary_fields: {
-              user: token.summary_fields.user,
-            },
-          }}
-        />
+        <table>
+          <tbody>
+            <UserTokenListItem
+              isSelected={false}
+              token={{
+                ...token,
+                refresh_token: null,
+                application: null,
+                scope: 'write',
+                summary_fields: {
+                  user: token.summary_fields.user,
+                },
+              }}
+            />
+          </tbody>
+        </table>
       );
     });
-    expect(wrapper.find('DataListCheck').prop('checked')).toBe(false);
-    expect(wrapper.find('PFDataListCell[aria-label="Token type"]').text()).toBe(
-      'Personal access token'
-    );
     expect(
-      wrapper.find('PFDataListCell[aria-label="Application name"]').text()
-    ).toBe('');
-    expect(wrapper.find('PFDataListCell[aria-label="Scope"]').text()).toContain(
-      'Write'
-    );
+      wrapper
+        .find('Td')
+        .first()
+        .prop('select').isSelected
+    ).toBe(false);
     expect(
-      wrapper.find('PFDataListCell[aria-label="Expiration"]').text()
+      wrapper
+        .find('Td')
+        .at(1)
+        .text()
+    ).toEqual('Personal access token');
+    expect(
+      wrapper
+        .find('Td')
+        .at(2)
+        .text()
+    ).toEqual('Write');
+    expect(
+      wrapper
+        .find('Td')
+        .at(3)
+        .text()
     ).toContain('10/25/3019, 3:06:43 PM');
   });
 
   test('should be checked', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <UserTokenListItem isSelected token={token} />
+        <table>
+          <tbody>
+            <UserTokenListItem isSelected token={token} />
+          </tbody>
+        </table>
       );
     });
-    expect(wrapper.find('DataListCheck').prop('checked')).toBe(true);
+    expect(
+      wrapper
+        .find('Td')
+        .first()
+        .prop('select').isSelected
+    ).toBe(true);
   });
 });
diff --git a/awx/ui_next/src/screens/User/Users.test.jsx b/awx/ui_next/src/screens/User/Users.test.jsx
index 862934e99b..146599b762 100644
--- a/awx/ui_next/src/screens/User/Users.test.jsx
+++ b/awx/ui_next/src/screens/User/Users.test.jsx
@@ -11,7 +11,8 @@ jest.mock('react-router-dom', () => ({
 
 describe('<Users />', () => {
   test('initially renders successfully', () => {
-    mountWithContexts(<Users />);
+    const wrapper = mountWithContexts(<Users />);
+    wrapper.unmount();
   });
 
   test('should display a breadcrumb heading', () => {