Merge pull request #10040 from keithjgrant/6189-misc-tables

Convert Inventory sub-lists to tables

SUMMARY
Converts Inventory Access, Hosts, Groups, and Sources lists to tables
Addresses #6189
ISSUE TYPE

Feature Pull Request

COMPONENT NAME

UI

Reviewed-by: Kersom <None>
Reviewed-by: Marliana Lara <marliana.lara@gmail.com>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

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

@@ -30,9 +30,11 @@ export default function ActionsTd({ children, gridColumns, ...props }) {
     >
       <ActionsGrid numActions={numActions} gridColumns={gridColumns}>
         {React.Children.map(children, (child, i) =>
-          React.cloneElement(child, {
+          child
+            ? React.cloneElement(child, {
                 column: i + 1,
               })
+            : null
         )}
       </ActionsGrid>
     </Td>

awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-
 import { t } from '@lingui/macro';
 import { RolesAPI, TeamsAPI, UsersAPI } from '../../api';
 import AddResourceRole from '../AddRole/AddResourceRole';
 import AlertModal from '../AlertModal';
 import DataListToolbar from '../DataListToolbar';
-import PaginatedDataList, { ToolbarAddButton } from '../PaginatedDataList';
+import PaginatedTable, { HeaderRow, HeaderCell } from '../PaginatedTable';
+import { ToolbarAddButton } from '../PaginatedDataList';
 import { getQSConfig, parseQueryString } from '../../util/qs';
 import useRequest, { useDeleteItems } from '../../util/useRequest';
 import DeleteRoleConfirmationModal from './DeleteRoleConfirmationModal';
@@ -148,7 +148,7 @@ function ResourceAccessList({ apiModel, resource }) {
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         error={contentError}
         hasContentLoading={isLoading || isDeleteLoading}
         items={accessRecords}
@@ -156,20 +156,6 @@ function ResourceAccessList({ apiModel, resource }) {
         pluralizedItemName={t`Roles`}
         qsConfig={QS_CONFIG}
         toolbarSearchColumns={toolbarSearchColumns}
-        toolbarSortColumns={[
-          {
-            name: t`Username`,
-            key: 'username',
-          },
-          {
-            name: t`First Name`,
-            key: 'first_name',
-          },
-          {
-            name: t`Last Name`,
-            key: 'last_name',
-          },
-        ]}
         toolbarSearchableKeys={searchableKeys}
         toolbarRelatedSearchableKeys={relatedSearchableKeys}
         renderToolbar={props => (
@@ -188,7 +174,15 @@ function ResourceAccessList({ apiModel, resource }) {
             }
           />
         )}
-        renderItem={accessRecord => (
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
+            <HeaderCell sortKey="username">{t`Username`}</HeaderCell>
+            <HeaderCell sortKey="first_name">{t`First name`}</HeaderCell>
+            <HeaderCell sortKey="last_name">{t`Last name`}</HeaderCell>
+            <HeaderCell>{t`Roles`}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(accessRecord, index) => (
           <ResourceAccessListItem
             key={accessRecord.id}
             accessRecord={accessRecord}
@@ -197,6 +191,7 @@ function ResourceAccessList({ apiModel, resource }) {
               setDeletionRole(role);
               setShowDeleteModal(true);
             }}
+            rowIndex={index}
           />
         )}
       />

awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.test.jsx

@@ -137,10 +137,6 @@ describe('<ResourceAccessList />', () => {
     jest.clearAllMocks();
   });
 
-  test('initially renders successfully', () => {
-    expect(wrapper.find('PaginatedDataList')).toHaveLength(1);
-  });
-
   test('should fetch and display access records on mount', async () => {
     await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
     expect(OrganizationsAPI.readAccessList).toHaveBeenCalled();
@@ -203,7 +199,7 @@ describe('<ResourceAccessList />', () => {
     await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
 
     expect(
-      wrapper.find('PaginatedDataList').prop('toolbarSearchColumns')
+      wrapper.find('PaginatedTable').prop('toolbarSearchColumns')
     ).toStrictEqual([
       { isDefault: true, key: 'username__icontains', name: 'Username' },
       { key: 'first_name__icontains', name: 'First Name' },

awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx

@@ -1,29 +1,15 @@
 import 'styled-components/macro';
 import React from 'react';
 import { func } from 'prop-types';
-
 import { t } from '@lingui/macro';
-import {
+import { Chip } from '@patternfly/react-core';
-  Chip,
+import { Tr, Td } from '@patternfly/react-table';
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells as PFDataListItemCells,
-  Text,
-  TextContent,
-  TextVariants,
-} from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import DataListCell from '../DataListCell';
 
 import ChipGroup from '../ChipGroup';
 import { DetailList, Detail } from '../DetailList';
 import { AccessRecord } from '../../types';
 
-const DataListItemCells = styled(PFDataListItemCells)`
-  align-items: start;
-`;
-
 function ResourceAccessListItem({ accessRecord, onRoleDelete }) {
   ResourceAccessListItem.propTypes = {
     accessRecord: AccessRecord.isRequired,
@@ -67,43 +53,19 @@ function ResourceAccessListItem({ accessRecord, onRoleDelete }) {
   const [teamRoles, userRoles] = getRoleLists();
 
   return (
-    <DataListItem
+    <Tr id={`access-item-row-${accessRecord.id}`}>
-      aria-labelledby="access-list-item"
+      <Td id={`access-record-${accessRecord.id}`} dataLabel={t`Name`}>
-      key={accessRecord.id}
-      id={`${accessRecord.id}`}
-    >
-      <DataListItemRow>
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name">
-              {accessRecord.username && (
-                <TextContent>
         {accessRecord.id ? (
-                    <Text component={TextVariants.h6}>
+          <Link to={{ pathname: `/users/${accessRecord.id}/details` }}>
-                      <Link
-                        to={{ pathname: `/users/${accessRecord.id}/details` }}
-                        css="font-weight: bold"
-                      >
             {accessRecord.username}
           </Link>
-                    </Text>
         ) : (
-                    <Text component={TextVariants.h6} css="font-weight: bold">
+          accessRecord.username
-                      {accessRecord.username}
-                    </Text>
         )}
-                </TextContent>
+      </Td>
-              )}
+      <Td dataLabel={t`First name`}>{accessRecord.first_name}</Td>
-              {accessRecord.first_name || accessRecord.last_name ? (
+      <Td dataLabel={t`Last name`}>{accessRecord.first_name}</Td>
-                <DetailList stacked>
+      <Td dataLabel={t`Roles`}>
-                  <Detail
-                    label={t`Name`}
-                    value={`${accessRecord.first_name} ${accessRecord.last_name}`}
-                  />
-                </DetailList>
-              ) : null}
-            </DataListCell>,
-            <DataListCell key="roles">
         <DetailList stacked>
           {userRoles.length > 0 && (
             <Detail
@@ -126,11 +88,8 @@ function ResourceAccessListItem({ accessRecord, onRoleDelete }) {
             />
           )}
         </DetailList>
-            </DataListCell>,
+      </Td>
-          ]}
+    </Tr>
-        />
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.test.jsx

@@ -38,10 +38,14 @@ describe('<ResourceAccessListItem />', () => {
 
     await act(async () => {
       wrapper = mountWithContexts(
+        <table>
+          <tbody>
             <ResourceAccessListItem
               accessRecord={accessRecord}
               onRoleDelete={() => {}}
             />
+          </tbody>
+        </table>
       );
     });
 

awx/ui_next/src/screens/Host/HostList/HostListItem.jsx

@@ -17,6 +17,7 @@ function HostListItem({ host, isSelected, onSelect, detailUrl, rowIndex }) {
   return (
     <Tr id={`host-row-${host.id}`}>
       <Td
+        data-cy={labelId}
         select={{
           rowIndex,
           isSelected,

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx

@@ -1,53 +1,46 @@
 import React from 'react';
 import { bool, func, number, oneOfType, string } from 'prop-types';
-
 import { t } from '@lingui/macro';
 
-import {
+import { Button } from '@patternfly/react-core';
-  Button,
+import { Tr, Td } from '@patternfly/react-table';
-  DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Tooltip,
-} from '@patternfly/react-core';
 
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import DataListCell from '../../../components/DataListCell';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { Group } from '../../../types';
 
-function InventoryGroupItem({ group, inventoryId, isSelected, onSelect }) {
+function InventoryGroupItem({
+  group,
+  inventoryId,
+  isSelected,
+  onSelect,
+  rowIndex,
+}) {
   const labelId = `check-action-${group.id}`;
   const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`;
   const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
 
   return (
-    <DataListItem key={group.id} aria-labelledby={labelId} id={`${group.id}`}>
+    <Tr id={`group-row-${group.id}`}>
-      <DataListItemRow>
+      <Td
-        <DataListCheck
+        data-cy={labelId}
-          aria-labelledby={labelId}
+        select={{
-          id={`select-group-${group.id}`}
+          rowIndex,
-          checked={isSelected}
+          isSelected,
-          onChange={onSelect}
+          onSelect,
+        }}
       />
-        <DataListItemCells
+      <Td id={labelId} dataLabel={t`Name`}>
-          dataListCells={[
-            <DataListCell key="name">
         <Link to={`${detailUrl}`} id={labelId}>
           <b>{group.name}</b>
         </Link>
-            </DataListCell>,
+      </Td>
-          ]}
+      <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
-        />
+        <ActionItem
-        <DataListAction
+          visible={group.summary_fields.user_capabilities.edit}
-          aria-label={t`actions`}
+          tooltip={t`Edit group`}
-          aria-labelledby={labelId}
-          id={labelId}
         >
-          {group.summary_fields.user_capabilities.edit && (
-            <Tooltip content={t`Edit Group`} position="top">
           <Button
             ouiaId={`${group.id}-edit-button`}
             aria-label={t`Edit Group`}
@@ -57,11 +50,9 @@ function InventoryGroupItem({ group, inventoryId, isSelected, onSelect }) {
           >
             <PencilAltIcon />
           </Button>
-            </Tooltip>
+        </ActionItem>
-          )}
+      </ActionsTd>
-        </DataListAction>
+    </Tr>
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.test.jsx

@@ -18,12 +18,16 @@ describe('<InventoryGroupItem />', () => {
 
   beforeEach(() => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventoryGroupItem
             group={mockGroup}
             inventoryId={1}
             isSelected={false}
             onSelect={() => {}}
           />
+        </tbody>
+      </table>
     );
   });
 
@@ -40,12 +44,16 @@ describe('<InventoryGroupItem />', () => {
     copyMockGroup.summary_fields.user_capabilities.edit = false;
 
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventoryGroupItem
             group={copyMockGroup}
             inventoryId={1}
             isSelected={false}
             onSelect={() => {}}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
-
 import { t } from '@lingui/macro';
 import { Tooltip } from '@patternfly/react-core';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
@@ -8,9 +7,11 @@ import useSelected from '../../../util/useSelected';
 import useRequest from '../../../util/useRequest';
 import { InventoriesAPI } from '../../../api';
 import DataListToolbar from '../../../components/DataListToolbar';
-import PaginatedDataList, {
+import PaginatedTable, {
-  ToolbarAddButton,
+  HeaderRow,
-} from '../../../components/PaginatedDataList';
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import { ToolbarAddButton } from '../../../components/PaginatedDataList';
 
 import InventoryGroupItem from './InventoryGroupItem';
 import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';
@@ -104,7 +105,7 @@ function InventoryGroupsList() {
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={contentError}
         hasContentLoading={isLoading || isAdHocLaunchLoading}
         items={groups}
@@ -135,21 +136,22 @@ function InventoryGroupsList() {
             key: 'modified_by__username__icontains',
           },
         ]}
-        toolbarSortColumns={[
-          {
-            name: t`Name`,
-            key: 'name',
-          },
-        ]}
         toolbarSearchableKeys={searchableKeys}
         toolbarRelatedSearchableKeys={relatedSearchableKeys}
-        renderItem={item => (
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG}>
+            <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+            <HeaderCell>{t`Actions`}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(item, index) => (
           <InventoryGroupItem
             key={item.id}
             group={item}
             inventoryId={inventoryId}
             isSelected={selected.some(row => row.id === item.id)}
             onSelect={() => handleSelect(item)}
+            rowIndex={index}
           />
         )}
         renderToolbar={props => (

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx

@@ -93,15 +93,12 @@ describe('<InventoryGroupsList />', () => {
     });
     await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
   });
+
   afterEach(() => {
     jest.clearAllMocks();
     wrapper.unmount();
   });
 
-  test('initially renders successfully', () => {
-    expect(wrapper.find('InventoryGroupsList').length).toBe(1);
-  });
-
   test('should fetch groups from api and render them in the list', async () => {
     expect(InventoriesAPI.readGroups).toHaveBeenCalled();
     expect(wrapper.find('InventoryGroupItem').length).toBe(3);
@@ -109,52 +106,71 @@ describe('<InventoryGroupsList />', () => {
 
   test('should check and uncheck the row item', async () => {
     expect(
-      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(false);
 
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
+      wrapper
-        true
+        .find('.pf-c-table__check')
-      );
+        .first()
+        .find('input')
+        .invoke('onChange')(true);
     });
     wrapper.update();
     expect(
-      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(true);
 
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
+      wrapper
-        false
+        .find('.pf-c-table__check')
-      );
+        .first()
+        .find('input')
+        .invoke('onChange')(false);
     });
     wrapper.update();
     expect(
-      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(false);
   });
 
   test('should check all row items when select all is checked', async () => {
-    wrapper.find('DataListCheck').forEach(el => {
+    expect.assertions(9);
-      expect(el.props().checked).toBe(false);
+    wrapper.find('.pf-c-table__check').forEach(el => {
+      expect(el.find('input').props().checked).toBe(false);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(true);
     });
     wrapper.update();
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check').forEach(el => {
-      expect(el.props().checked).toBe(true);
+      expect(el.find('input').props().checked).toBe(true);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(false);
     });
     wrapper.update();
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check').forEach(el => {
-      expect(el.props().checked).toBe(false);
+      expect(el.find('input').props().checked).toBe(false);
     });
   });
 });
+
 describe('<InventoryGroupsList/> error handling', () => {
   let wrapper;
+
   beforeEach(() => {
     InventoriesAPI.readGroups.mockResolvedValue({
       data: {
@@ -182,10 +198,12 @@ describe('<InventoryGroupsList/> error handling', () => {
       })
     );
   });
+
   afterEach(() => {
     jest.clearAllMocks();
     wrapper.unmount();
   });
+
   test('should show content error when api throws error on initial render', async () => {
     InventoriesAPI.readGroupsOptions.mockImplementationOnce(() =>
       Promise.reject(new Error())
@@ -213,7 +231,11 @@ describe('<InventoryGroupsList/> error handling', () => {
     waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
 
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')();
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {

awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupItem.jsx

@@ -1,53 +1,45 @@
 import React from 'react';
 import { bool, func, number, oneOfType, string } from 'prop-types';
-
 import { t } from '@lingui/macro';
-
+import { Button } from '@patternfly/react-core';
-import {
+import { Tr, Td } from '@patternfly/react-table';
-  Button,
-  DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Tooltip,
-} from '@patternfly/react-core';
 
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import DataListCell from '../../../components/DataListCell';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { Group } from '../../../types';
 
-function InventoryHostGroupItem({ group, inventoryId, isSelected, onSelect }) {
+function InventoryHostGroupItem({
+  group,
+  inventoryId,
+  isSelected,
+  onSelect,
+  rowIndex,
+}) {
   const labelId = `check-action-${group.id}`;
   const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`;
   const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
 
   return (
-    <DataListItem key={group.id} aria-labelledby={labelId} id={`${group.id}`}>
+    <Tr id={`inventory-host-group-row-${group.id}`}>
-      <DataListItemRow>
+      <Td
-        <DataListCheck
+        data-cy={labelId}
-          aria-labelledby={labelId}
+        select={{
-          id={`select-group-${group.id}`}
+          rowIndex,
-          checked={isSelected}
+          isSelected,
-          onChange={onSelect}
+          onSelect,
+        }}
       />
-        <DataListItemCells
+      <Td id={labelId} dataLabel={t`Name`}>
-          dataListCells={[
-            <DataListCell key="name">
         <Link to={`${detailUrl}`} id={labelId}>
-                <b>{group.name}</b>
+          {group.name}
         </Link>
-            </DataListCell>,
+      </Td>
-          ]}
+      <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
-        />
+        <ActionItem
-        <DataListAction
+          visible={group.summary_fields.user_capabilities.edit}
-          aria-label={t`actions`}
+          tooltip={t`Edit group`}
-          aria-labelledby={labelId}
-          id={labelId}
         >
-          {group.summary_fields.user_capabilities.edit && (
-            <Tooltip content={t`Edit Group`} position="top">
           <Button
             ouiaId={`${group.id}-edit-button`}
             variant="plain"
@@ -56,11 +48,9 @@ function InventoryHostGroupItem({ group, inventoryId, isSelected, onSelect }) {
           >
             <PencilAltIcon />
           </Button>
-            </Tooltip>
+        </ActionItem>
-          )}
+      </ActionsTd>
-        </DataListAction>
+    </Tr>
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupItem.test.jsx

@@ -18,12 +18,16 @@ describe('<InventoryHostGroupItem />', () => {
 
   beforeEach(() => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventoryHostGroupItem
             group={mockGroup}
             inventoryId={1}
             isSelected={false}
             onSelect={() => {}}
           />
+        </tbody>
+      </table>
     );
   });
 
@@ -40,12 +44,16 @@ describe('<InventoryHostGroupItem />', () => {
     copyMockGroup.summary_fields.user_capabilities.edit = false;
 
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventoryHostGroupItem
             group={copyMockGroup}
             inventoryId={1}
             isSelected={false}
             onSelect={() => {}}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });

awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx

@@ -12,9 +12,11 @@ import { HostsAPI, InventoriesAPI } from '../../../api';
 import DataListToolbar from '../../../components/DataListToolbar';
 import AlertModal from '../../../components/AlertModal';
 import ErrorDetail from '../../../components/ErrorDetail';
-import PaginatedDataList, {
+import PaginatedTable, {
-  ToolbarAddButton,
+  HeaderRow,
-} from '../../../components/PaginatedDataList';
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import { ToolbarAddButton } from '../../../components/PaginatedDataList';
 import AssociateModal from '../../../components/AssociateModal';
 import DisassociateButton from '../../../components/DisassociateButton';
 import AdHocCommands from '../../../components/AdHocCommands/AdHocCommands';
@@ -146,7 +148,7 @@ function InventoryHostGroupsList() {
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={contentError}
         hasContentLoading={
           isLoading || isDisassociateLoading || isAdHocLaunchLoading
@@ -170,21 +172,22 @@ function InventoryHostGroupsList() {
             key: 'modified_by__username__icontains',
           },
         ]}
-        toolbarSortColumns={[
-          {
-            name: t`Name`,
-            key: 'name',
-          },
-        ]}
         toolbarSearchableKeys={searchableKeys}
         toolbarRelatedSearchableKeys={relatedSearchableKeys}
-        renderItem={item => (
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG}>
+            <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+            <HeaderCell>{t`Actions`}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(item, index) => (
           <InventoryHostGroupItem
             key={item.id}
             group={item}
             inventoryId={item.summary_fields.inventory.id}
             isSelected={selected.some(row => row.id === item.id)}
             onSelect={() => handleSelect(item)}
+            rowIndex={index}
           />
         )}
         renderToolbar={props => (

awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.test.jsx

@@ -114,46 +114,63 @@ describe('<InventoryHostGroupsList />', () => {
 
   test('should check and uncheck the row item', async () => {
     expect(
-      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(false);
 
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
+      wrapper
-        true
+        .find('.pf-c-table__check')
-      );
+        .first()
+        .find('input')
+        .invoke('onChange')(true);
     });
     wrapper.update();
     expect(
-      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(true);
 
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
+      wrapper
-        false
+        .find('.pf-c-table__check')
-      );
+        .first()
+        .find('input')
+        .invoke('onChange')(false);
     });
     wrapper.update();
     expect(
-      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(false);
   });
 
   test('should check all row items when select all is checked', async () => {
-    wrapper.find('DataListCheck').forEach(el => {
+    expect.assertions(9);
+    wrapper.find('.pf-c-table__check input').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(true);
     });
     wrapper.update();
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check input').forEach(el => {
       expect(el.props().checked).toBe(true);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(false);
     });
     wrapper.update();
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check input').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
   });
@@ -230,15 +247,15 @@ describe('<InventoryHostGroupsList />', () => {
   test('expected api calls are made for multi-disassociation', async () => {
     expect(HostsAPI.disassociateGroup).toHaveBeenCalledTimes(0);
     expect(HostsAPI.readAllGroups).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('DataListCheck').length).toBe(3);
+    expect(wrapper.find('.pf-c-table__check').length).toBe(3);
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check input').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(true);
     });
     wrapper.update();
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check input').forEach(el => {
       expect(el.props().checked).toBe(true);
     });
     wrapper.find('button[aria-label="Disassociate"]').simulate('click');

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx

@@ -1,71 +1,46 @@
 import React from 'react';
 import { string, bool, func } from 'prop-types';
-
 import { t } from '@lingui/macro';
-import {
+import { Button } from '@patternfly/react-core';
-  Button,
+import { Tr, Td } from '@patternfly/react-table';
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Tooltip,
-} from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import styled from 'styled-components';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
-import DataListCell from '../../../components/DataListCell';
 
 import HostToggle from '../../../components/HostToggle';
-import Sparkline from '../../../components/Sparkline';
 import { Host } from '../../../types';
 
-const DataListAction = styled(_DataListAction)`
+function InventoryHostItem({
-  align-items: center;
+  detailUrl,
-  display: grid;
+  editUrl,
-  grid-gap: 24px;
+  host,
-  grid-template-columns: min-content 40px;
+  isSelected,
-`;
+  onSelect,
-
+  rowIndex,
-function InventoryHostItem(props) {
+}) {
-  const { detailUrl, editUrl, host, isSelected, onSelect } = props;
-
-  const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
-    ...job,
-    type: 'job',
-  }));
-
   const labelId = `check-action-${host.id}`;
 
   return (
-    <DataListItem key={host.id} aria-labelledby={labelId} id={`${host.id}`}>
+    <Tr id={`host-row-${host.id}`}>
-      <DataListItemRow>
+      <Td
-        <DataListCheck
+        data-cy={labelId}
-          id={`select-host-${host.id}`}
+        select={{
-          checked={isSelected}
+          rowIndex,
-          onChange={onSelect}
+          isSelected,
-          aria-labelledby={labelId}
+          onSelect,
+        }}
       />
-        <DataListItemCells
+      <Td id={labelId} dataLabel={t`Name`}>
-          dataListCells={[
-            <DataListCell key="divider">
         <Link to={`${detailUrl}`}>
           <b>{host.name}</b>
         </Link>
-            </DataListCell>,
+      </Td>
-            <DataListCell key="recentJobs">
+      <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
-              <Sparkline jobs={recentPlaybookJobs} />
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={t`actions`}
-          aria-labelledby={labelId}
-          id={labelId}
-        >
         <HostToggle host={host} />
-          {host.summary_fields.user_capabilities?.edit && (
+        <ActionItem
-            <Tooltip content={t`Edit Host`} position="top">
+          visible={host.summary_fields.user_capabilities?.edit}
+          tooltip={t`Edit host`}
+        >
           <Button
             ouiaId={`${host.id}-edit-button`}
             variant="plain"
@@ -74,11 +49,9 @@ function InventoryHostItem(props) {
           >
             <PencilAltIcon />
           </Button>
-            </Tooltip>
+        </ActionItem>
-          )}
+      </ActionsTd>
-        </DataListAction>
+    </Tr>
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.test.jsx

@@ -31,12 +31,16 @@ describe('<InventoryHostItem />', () => {
 
   beforeEach(() => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventoryHostItem
             isSelected={false}
             detailUrl="/host/1"
             onSelect={() => {}}
             host={mockHost}
           />
+        </tbody>
+      </table>
     );
   });
 
@@ -52,12 +56,16 @@ describe('<InventoryHostItem />', () => {
     const copyMockHost = Object.assign({}, mockHost);
     copyMockHost.summary_fields.user_capabilities.edit = false;
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventoryHostItem
             isSelected={false}
             detailUrl="/host/1"
             onSelect={() => {}}
             host={copyMockHost}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
-
 import { t } from '@lingui/macro';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import { InventoriesAPI, HostsAPI } from '../../../api';
@@ -8,7 +7,11 @@ import useRequest, { useDeleteItems } from '../../../util/useRequest';
 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';
@@ -105,35 +108,21 @@ function InventoryHostList() {
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={contentError}
         hasContentLoading={isLoading || isDeleteLoading || isAdHocLaunchLoading}
         items={hosts}
         itemCount={hostCount}
         pluralizedItemName={t`Hosts`}
         qsConfig={QS_CONFIG}
-        toolbarColumns={[
-          {
-            name: t`Name`,
-            key: 'name',
-            isSortable: true,
-            isSearchable: true,
-          },
-          {
-            name: t`Modified`,
-            key: 'modified',
-            isSortable: true,
-            isNumeric: true,
-          },
-          {
-            name: t`Created`,
-            key: 'created',
-            isSortable: true,
-            isNumeric: true,
-          },
-        ]}
         toolbarSearchableKeys={searchableKeys}
         toolbarRelatedSearchableKeys={relatedSearchableKeys}
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG}>
+            <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+            <HeaderCell>{t`Actions`}</HeaderCell>
+          </HeaderRow>
+        }
         renderToolbar={props => (
           <DataListToolbar
             {...props}
@@ -164,14 +153,15 @@ function InventoryHostList() {
             ]}
           />
         )}
-        renderItem={o => (
+        renderRow={(host, index) => (
           <InventoryHostItem
-            key={o.id}
+            key={host.id}
-            host={o}
+            host={host}
-            detailUrl={`/inventories/inventory/${id}/hosts/${o.id}/details`}
+            detailUrl={`/inventories/inventory/${id}/hosts/${host.id}/details`}
-            editUrl={`/inventories/inventory/${id}/hosts/${o.id}/edit`}
+            editUrl={`/inventories/inventory/${id}/hosts/${host.id}/edit`}
-            isSelected={selected.some(row => row.id === o.id)}
+            isSelected={selected.some(row => row.id === host.id)}
-            onSelect={() => handleSelect(o)}
+            onSelect={() => handleSelect(host)}
+            rowIndex={index}
           />
         )}
         emptyStateControls={

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx

@@ -103,10 +103,6 @@ describe('<InventoryHostList />', () => {
     jest.resetAllMocks();
   });
 
-  test('initially renders successfully', () => {
-    expect(wrapper.find('InventoryHostList').length).toBe(1);
-  });
-
   test('should fetch hosts from api and render them in the list', async () => {
     expect(InventoriesAPI.readHosts).toHaveBeenCalled();
     expect(wrapper.find('InventoryHostItem').length).toBe(3);
@@ -114,49 +110,66 @@ describe('<InventoryHostList />', () => {
 
   test('should check and uncheck the row item', async () => {
     expect(
-      wrapper.find('DataListCheck[id="select-host-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(false);
 
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
+      wrapper
-        true
+        .find('.pf-c-table__check')
-      );
+        .first()
+        .find('input')
+        .invoke('onChange')(true);
     });
 
     wrapper.update();
     expect(
-      wrapper.find('DataListCheck[id="select-host-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(true);
 
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
+      wrapper
-        false
+        .find('.pf-c-table__check')
-      );
+        .first()
+        .find('input')
+        .invoke('onChange')(false);
     });
 
     wrapper.update();
     expect(
-      wrapper.find('DataListCheck[id="select-host-1"]').props().checked
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .props().checked
     ).toBe(false);
   });
 
   test('should check all row items when select all is checked', async () => {
-    wrapper.find('DataListCheck').forEach(el => {
+    expect.assertions(9);
-      expect(el.props().checked).toBe(false);
+    wrapper.find('.pf-c-table__check').forEach(el => {
+      expect(el.find('input').props().checked).toBe(false);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(true);
     });
     wrapper.update();
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check').forEach(el => {
-      expect(el.props().checked).toBe(true);
+      expect(el.find('input').props().checked).toBe(true);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(false);
     });
     wrapper.update();
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check').forEach(el => {
-      expect(el.props().checked).toBe(false);
+      expect(el.find('input').props().checked).toBe(false);
     });
   });
 
@@ -196,7 +209,11 @@ describe('<InventoryHostList />', () => {
 
   test('delete button is disabled if user does not have delete capabilities on a selected host', async () => {
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-host-3"]').invoke('onChange')();
+      wrapper
+        .find('.pf-c-table__check')
+        .at(2)
+        .find('input')
+        .invoke('onChange')();
     });
     wrapper.update();
     expect(wrapper.find('ToolbarDeleteButton button').props().disabled).toBe(
@@ -207,7 +224,11 @@ describe('<InventoryHostList />', () => {
   test('should call api delete hosts for each selected host', async () => {
     HostsAPI.destroy = jest.fn();
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
@@ -230,7 +251,11 @@ describe('<InventoryHostList />', () => {
       })
     );
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
@@ -252,7 +277,11 @@ describe('<InventoryHostList />', () => {
       Promise.reject(new Error())
     );
     await act(async () => {
-      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {

awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceList.jsx

@@ -9,7 +9,11 @@ import useRequest, {
 } from '../../../util/useRequest';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import { InventoriesAPI, InventorySourcesAPI } from '../../../api';
-import PaginatedDataList, {
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
@@ -148,7 +152,7 @@ function InventorySourceList() {
   );
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={fetchError}
         hasContentLoading={
           isLoading ||
@@ -208,21 +212,27 @@ function InventorySourceList() {
             ]}
           />
         )}
-        renderItem={inventorySource => {
+        headerRow={
-          let label;
+          <HeaderRow qsConfig={QS_CONFIG}>
-          sourceChoices.forEach(([scMatch, scLabel]) => {
+            <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
-            if (inventorySource.source === scMatch) {
+            <HeaderCell>{t`Status`}</HeaderCell>
-              label = scLabel;
+            <HeaderCell>{t`Type`}</HeaderCell>
+            <HeaderCell>{t`Actions`}</HeaderCell>
+          </HeaderRow>
         }
-          });
+        renderRow={(inventorySource, index) => {
+          const label = sourceChoices.find(
+            ([scMatch]) => inventorySource.source === scMatch
+          );
           return (
             <InventorySourceListItem
               key={inventorySource.id}
               source={inventorySource}
               onSelect={() => handleSelect(inventorySource)}
-              label={label}
+              label={label[1]}
               detailUrl={`${listUrl}${inventorySource.id}`}
               isSelected={selected.some(row => row.id === inventorySource.id)}
+              rowIndex={index}
             />
           );
         }}

awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceList.test.jsx

@@ -7,10 +7,7 @@ import {
   InventorySourcesAPI,
   WorkflowJobTemplateNodesAPI,
 } from '../../../api';
-import {
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-  mountWithContexts,
-  waitForElement,
-} from '../../../../testUtils/enzymeHelpers';
 
 import InventorySourceList from './InventorySourceList';
 
@@ -108,18 +105,15 @@ describe('<InventorySourceList />', () => {
         }
       );
     });
+    wrapper.update();
   });
+
   afterEach(() => {
     jest.clearAllMocks();
     global.console.debug = debug;
   });
 
-  test('should mount properly', async () => {
-    await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
-  });
-
   test('api calls should be made on mount', async () => {
-    await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
     expect(InventoriesAPI.readSources).toHaveBeenCalledWith('1', {
       not__source: '',
       order_by: 'name',
@@ -136,23 +130,16 @@ describe('<InventorySourceList />', () => {
   });
 
   test('source data should render properly', async () => {
-    await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
+    expect(wrapper.find('InventorySourceListItem')).toHaveLength(2);
     expect(
       wrapper
-        .find("DataListItem[aria-labelledby='check-action-1']")
+        .find('InventorySourceListItem')
-        .find('PFDataListCell[aria-label="name"]')
+        .first()
-        .text()
+        .prop('source')
-    ).toBe('Source Foo');
+    ).toEqual(sources.data.results[0]);
-    expect(
-      wrapper
-        .find("DataListItem[aria-labelledby='check-action-1']")
-        .find('PFDataListCell[aria-label="type"]')
-        .text()
-    ).toBe('EC2');
   });
 
   test('add button is not disabled and delete button is disabled', async () => {
-    await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
     const addButton = wrapper.find('ToolbarAddButton').find('Link');
     const deleteButton = wrapper.find('ToolbarDeleteButton').find('Button');
     expect(addButton.prop('aria-disabled')).toBe(false);
@@ -162,14 +149,23 @@ describe('<InventorySourceList />', () => {
   test('delete button becomes enabled and properly calls api to delete', async () => {
     const deleteButton = wrapper.find('ToolbarDeleteButton').find('Button');
 
-    await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
     expect(deleteButton.prop('isDisabled')).toBe(true);
 
     await act(async () =>
-      wrapper.find('DataListCheck#select-source-1').prop('onChange')({ id: 1 })
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('onChange')({ id: 1 })
     );
     wrapper.update();
-    expect(wrapper.find('input#select-source-1').prop('checked')).toBe(true);
+    expect(
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
+    ).toBe(true);
 
     await act(async () =>
       wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
@@ -199,10 +195,12 @@ describe('<InventorySourceList />', () => {
       })
     );
 
-    await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
-
     await act(async () =>
-      wrapper.find('DataListCheck#select-source-1').prop('onChange')({ id: 1 })
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('onChange')({ id: 1 })
     );
     wrapper.update();
 
@@ -249,8 +247,7 @@ describe('<InventorySourceList />', () => {
     await act(async () => {
       wrapper = mountWithContexts(<InventorySourceList />);
     });
-
+    wrapper.update();
-    await waitForElement(wrapper, 'ContentError', el => el.length > 0);
 
     expect(wrapper.find('ContentError').length).toBe(1);
   });
@@ -272,8 +269,7 @@ describe('<InventorySourceList />', () => {
     await act(async () => {
       wrapper = mountWithContexts(<InventorySourceList />);
     });
-
+    wrapper.update();
-    await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
 
     expect(wrapper.find('ContentError').length).toBe(1);
   });
@@ -291,7 +287,6 @@ describe('<InventorySourceList />', () => {
         },
       })
     );
-    await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
     await act(async () =>
       wrapper.find('Button[aria-label="Sync all"]').prop('onClick')()
     );
@@ -301,11 +296,6 @@ describe('<InventorySourceList />', () => {
   });
 
   test('should render sync all button and make api call to start sync for all', async () => {
-    await waitForElement(
-      wrapper,
-      'InventorySourceListItem',
-      el => el.length > 0
-    );
     const syncAllButton = wrapper.find('Button[aria-label="Sync all"]');
     expect(syncAllButton.length).toBe(1);
     await act(async () => syncAllButton.prop('onClick')());
@@ -359,11 +349,7 @@ describe('<InventorySourceList /> RBAC testing', () => {
         }
       );
     });
-    await waitForElement(
+    newWrapper.update();
-      newWrapper,
-      'InventorySourceList',
-      el => el.length > 0
-    );
     expect(newWrapper.find('ToolbarAddButton').length).toBe(0);
     jest.clearAllMocks();
   });
@@ -398,11 +384,7 @@ describe('<InventorySourceList /> RBAC testing', () => {
         }
       );
     });
-    await waitForElement(
+    newWrapper.update();
-      newWrapper,
-      'InventorySourceList',
-      el => el.length > 0
-    );
     expect(newWrapper.find('Button[aria-label="Sync All"]').length).toBe(0);
     jest.clearAllMocks();
   });

awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.jsx

@@ -1,23 +1,15 @@
 import React from 'react';
-
 import { Link } from 'react-router-dom';
 import { t } from '@lingui/macro';
-import {
+import { Button, Tooltip } from '@patternfly/react-core';
-  Button,
+import { Tr, Td } from '@patternfly/react-table';
-  DataListItem,
-  DataListItemRow,
-  DataListCheck,
-  DataListItemCells,
-  DataListCell,
-  DataListAction,
-  Tooltip,
-} from '@patternfly/react-core';
 import {
   ExclamationTriangleIcon as PFExclamationTriangleIcon,
   PencilAltIcon,
 } from '@patternfly/react-icons';
 import styled from 'styled-components';
 
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import StatusIcon from '../../../components/StatusIcon';
 import InventorySourceSyncButton from '../shared/InventorySourceSyncButton';
 
@@ -30,9 +22,9 @@ function InventorySourceListItem({
   source,
   isSelected,
   onSelect,
-
   detailUrl,
   label,
+  rowIndex,
 }) {
   const generateLastJobTooltip = job => {
     return (
@@ -58,41 +50,19 @@ function InventorySourceListItem({
 
   return (
     <>
-      <DataListItem aria-labelledby={`check-action-${source.id}`}>
+      <Tr id={`source-row-${source.id}`}>
-        <DataListItemRow>
+        <Td
-          <DataListCheck
+          data-cy={`check-action-${source.id}`}
-            id={`select-source-${source.id}`}
+          select={{
-            checked={isSelected}
+            rowIndex,
-            onChange={onSelect}
+            isSelected,
-            aria-labelledby={`check-action-${source.id}`}
+            onSelect,
+          }}
         />
-          <DataListItemCells
+        <Td dataLabel={t`Name`}>
-            dataListCells={[
-              <DataListCell key="status" isFilled={false}>
-                {source.summary_fields.last_job && (
-                  <Tooltip
-                    position="top"
-                    content={generateLastJobTooltip(
-                      source.summary_fields.last_job
-                    )}
-                    key={source.summary_fields.last_job.id}
-                  >
-                    <Link
-                      to={`/jobs/inventory/${source.summary_fields.last_job.id}`}
-                    >
-                      <StatusIcon
-                        status={source.summary_fields.last_job.status}
-                      />
-                    </Link>
-                  </Tooltip>
-                )}
-              </DataListCell>,
-              <DataListCell aria-label={t`name`} key="name">
-                <span>
           <Link to={`${detailUrl}/details`}>
             <b>{source.name}</b>
           </Link>
-                </span>
           {missingExecutionEnvironment && (
             <span>
               <Tooltip
@@ -104,21 +74,32 @@ function InventorySourceListItem({
               </Tooltip>
             </span>
           )}
-              </DataListCell>,
+        </Td>
-              <DataListCell aria-label={t`type`} key="type">
+        <Td dataLabel={t`Status`}>
-                {label}
+          {source.summary_fields.last_job && (
-              </DataListCell>,
+            <Tooltip
-            ]}
+              position="top"
-          />
+              content={generateLastJobTooltip(source.summary_fields.last_job)}
-          <DataListAction
+              key={source.summary_fields.last_job.id}
-            id="actions"
-            aria-labelledby="actions"
-            aria-label={t`actions`}
             >
-            {source.summary_fields.user_capabilities.start && (
+              <Link to={`/jobs/inventory/${source.summary_fields.last_job.id}`}>
-              <InventorySourceSyncButton source={source} />
+                <StatusIcon status={source.summary_fields.last_job.status} />
+              </Link>
+            </Tooltip>
           )}
-            {source.summary_fields.user_capabilities.edit && (
+        </Td>
+        <Td dataLabel={t`Type`}>{label}</Td>
+        <ActionsTd dataLabel={t`Actions`}>
+          <ActionItem
+            visible={source.summary_fields.user_capabilities.start}
+            tooltip={t`Sync`}
+          >
+            <InventorySourceSyncButton source={source} />
+          </ActionItem>
+          <ActionItem
+            visible={source.summary_fields.user_capabilities.edit}
+            tooltip={t`Edit`}
+          >
             <Button
               ouiaId={`${source.id}-edit-button`}
               aria-label={t`Edit Source`}
@@ -128,10 +109,9 @@ function InventorySourceListItem({
             >
               <PencilAltIcon />
             </Button>
-            )}
+          </ActionItem>
-          </DataListAction>
+        </ActionsTd>
-        </DataListItemRow>
+      </Tr>
-      </DataListItem>
     </>
   );
 }

awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.test.jsx

@@ -26,15 +26,20 @@ describe('<InventorySourceListItem />', () => {
     wrapper.unmount();
     jest.clearAllMocks();
   });
+
   test('should mount properly', () => {
     const onSelect = jest.fn();
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventorySourceListItem
             source={source}
             isSelected={false}
             onSelect={onSelect}
             label="Source Bar"
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('InventorySourceListItem').length).toBe(1);
   });
@@ -42,32 +47,35 @@ describe('<InventorySourceListItem />', () => {
   test('all buttons and text fields should render properly', () => {
     const onSelect = jest.fn();
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventorySourceListItem
             source={source}
             isSelected={false}
             onSelect={onSelect}
             label="Source Bar"
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('StatusIcon').length).toBe(1);
     expect(
       wrapper
         .find('Link')
-        .at(0)
+        .at(1)
         .prop('to')
     ).toBe('/jobs/inventory/664');
-    expect(wrapper.find('DataListCheck').length).toBe(1);
+    expect(wrapper.find('.pf-c-table__check').length).toBe(1);
-    expect();
     expect(
       wrapper
-        .find('DataListCell')
+        .find('Td')
         .at(1)
         .text()
     ).toBe('Foo');
     expect(
       wrapper
-        .find('DataListCell')
+        .find('Td')
-        .at(2)
+        .at(3)
         .text()
     ).toBe('Source Bar');
     expect(wrapper.find('InventorySourceSyncButton').length).toBe(1);
@@ -77,20 +85,32 @@ describe('<InventorySourceListItem />', () => {
   test('item should be checked', () => {
     const onSelect = jest.fn();
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventorySourceListItem
             source={source}
             isSelected
             onSelect={onSelect}
             label="Source Bar"
           />
+        </tbody>
+      </table>
     );
-    expect(wrapper.find('DataListCheck').length).toBe(1);
+    wrapper.update();
-    expect(wrapper.find('DataListCheck').prop('checked')).toBe(true);
+    expect(wrapper.find('.pf-c-table__check').length).toBe(1);
+    expect(
+      wrapper
+        .find('Td')
+        .first()
+        .prop('select').isSelected
+    ).toEqual(true);
   });
 
   test('should not render status icon', () => {
     const onSelect = jest.fn();
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventorySourceListItem
             source={{
               ...source,
@@ -103,6 +123,8 @@ describe('<InventorySourceListItem />', () => {
             onSelect={onSelect}
             label="Source Bar"
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('StatusIcon').length).toBe(0);
   });
@@ -110,14 +132,20 @@ describe('<InventorySourceListItem />', () => {
   test('should not render sync buttons', async () => {
     const onSelect = jest.fn();
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventorySourceListItem
             source={{
               ...source,
-          summary_fields: { user_capabilities: { start: false, edit: true } },
+              summary_fields: {
+                user_capabilities: { start: false, edit: true },
+              },
             }}
             isSelected={false}
             onSelect={onSelect}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('InventorySourceSyncButton').length).toBe(0);
     expect(wrapper.find('Button[aria-label="Edit Source"]').length).toBe(1);
@@ -126,15 +154,21 @@ describe('<InventorySourceListItem />', () => {
   test('should not render edit buttons', async () => {
     const onSelect = jest.fn();
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventorySourceListItem
             source={{
               ...source,
-          summary_fields: { user_capabilities: { start: true, edit: false } },
+              summary_fields: {
+                user_capabilities: { start: true, edit: false },
+              },
             }}
             isSelected={false}
             onSelect={onSelect}
             label="Source Bar"
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Button[aria-label="Edit Source"]').length).toBe(0);
     expect(wrapper.find('InventorySourceSyncButton').length).toBe(1);
@@ -143,6 +177,8 @@ describe('<InventorySourceListItem />', () => {
   test('should render warning about missing execution environment', () => {
     const onSelect = jest.fn();
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <InventorySourceListItem
             source={{
               ...source,
@@ -153,6 +189,8 @@ describe('<InventorySourceListItem />', () => {
             onSelect={onSelect}
             label="Source Bar"
           />
+        </tbody>
+      </table>
     );
     expect(
       wrapper.find('.missing-execution-environment').prop('content')