Convert more lists to tables

- Smart Inventory Hosts List
- Organization EE List
- Organization Teams list

awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.jsx

@@ -3,7 +3,10 @@ import { useLocation } from 'react-router-dom';
 
 import { t } from '@lingui/macro';
 import DataListToolbar from '../../../components/DataListToolbar';
-import PaginatedDataList from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
 import SmartInventoryHostListItem from './SmartInventoryHostListItem';
 import useRequest from '../../../util/useRequest';
 import useSelected from '../../../util/useSelected';
@@ -44,9 +47,13 @@ function SmartInventoryHostList({ inventory }) {
     }
   );
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    hosts
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(hosts);
 
   useEffect(() => {
     fetchHosts();
@@ -54,14 +61,14 @@ function SmartInventoryHostList({ inventory }) {
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={contentError}
         hasContentLoading={isLoading || isAdHocLaunchLoading}
         items={hosts}
         itemCount={count}
         pluralizedItemName={t`Hosts`}
         qsConfig={QS_CONFIG}
-        onRowClick={handleSelect}
+        clearSelected={clearSelected}
         toolbarSearchColumns={[
           {
             name: t`Name`,
@@ -77,20 +84,12 @@ function SmartInventoryHostList({ inventory }) {
             key: 'modified_by__username',
           },
         ]}
-        toolbarSortColumns={[
-          {
-            name: t`Name`,
-            key: 'name',
-          },
-        ]}
         renderToolbar={props => (
           <DataListToolbar
             {...props}
             showSelectAll
             isAllSelected={isAllSelected}
-            onSelectAll={isSelected =>
-              setSelected(isSelected ? [...hosts] : [])
-            }
+            onSelectAll={selectAll}
             qsConfig={QS_CONFIG}
             additionalControls={
               inventory?.summary_fields?.user_capabilities?.adhoc
@@ -105,13 +104,21 @@ function SmartInventoryHostList({ inventory }) {
             }
           />
         )}
-        renderItem={host => (
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG}>
+            <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+            <HeaderCell>{t`Recent jobs`}</HeaderCell>
+            <HeaderCell>{t`Inventory`}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(host, index) => (
           <SmartInventoryHostListItem
             key={host.id}
             host={host}
             detailUrl={`/inventories/smart_inventory/${inventory.id}/hosts/${host.id}/details`}
             isSelected={selected.some(row => row.id === host.id)}
             onSelect={() => handleSelect(host)}
+            rowIndex={index}
           />
         )}
       />

awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.test.jsx

@@ -50,18 +50,19 @@ describe('<SmartInventoryHostList />', () => {
   });
 
   test('should select and deselect all items', async () => {
+    expect.assertions(6);
     act(() => {
       wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
     });
     wrapper.update();
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check input').forEach(el => {
       expect(el.props().checked).toEqual(true);
     });
     act(() => {
       wrapper.find('DataListToolbar').invoke('onSelectAll')(false);
     });
     wrapper.update();
-    wrapper.find('DataListCheck').forEach(el => {
+    wrapper.find('.pf-c-table__check input').forEach(el => {
       expect(el.props().checked).toEqual(false);
     });
   });

awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostListItem.jsx

@@ -5,57 +5,45 @@ import { string, bool, func } from 'prop-types';
 import { t } from '@lingui/macro';
 import 'styled-components/macro';
 
-import {
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-} from '@patternfly/react-core';
-import DataListCell from '../../../components/DataListCell';
+import { Tr, Td } from '@patternfly/react-table';
 import Sparkline from '../../../components/Sparkline';
 import { Host } from '../../../types';
 
-function SmartInventoryHostListItem({ detailUrl, host, isSelected, onSelect }) {
+function SmartInventoryHostListItem({
+  detailUrl,
+  host,
+  isSelected,
+  onSelect,
+  rowIndex,
+}) {
   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}`}>
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-host-${host.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name">
-              <Link to={`${detailUrl}`}>
-                <b>{host.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key="recentJobs">
-              <Sparkline jobs={recentPlaybookJobs} />
-            </DataListCell>,
-            <DataListCell key="inventory">
-              <>
-                <b css="margin-right: 24px">{t`Inventory`}</b>
-                <Link
-                  to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
-                >
-                  {host.summary_fields.inventory.name}
-                </Link>
-              </>
-            </DataListCell>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
+    <Tr id={`host-row-${host.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+      />
+      <Td dataLabel={t`Name`}>
+        <Link to={`${detailUrl}`}>{host.name}</Link>
+      </Td>
+      <Td dataLabel={t`Recent jobs`}>
+        <Sparkline jobs={recentPlaybookJobs} />
+      </Td>
+      <Td dataLabel={t`Inventory`}>
+        <Link
+          to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
+        >
+          {host.summary_fields.inventory.name}
+        </Link>
+      </Td>
+    </Tr>
   );
 }
 

awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostListItem.test.jsx

@@ -24,12 +24,16 @@ describe('<SmartInventoryHostListItem />', () => {
 
   beforeEach(() => {
     wrapper = mountWithContexts(
-      <SmartInventoryHostListItem
-        detailUrl="/inventories/smart_inventory/1/hosts/2"
-        host={mockHost}
-        isSelected={false}
-        onSelect={() => {}}
-      />
+      <table>
+        <tbody>
+          <SmartInventoryHostListItem
+            detailUrl="/inventories/smart_inventory/1/hosts/2"
+            host={mockHost}
+            isSelected={false}
+            onSelect={() => {}}
+          />
+        </tbody>
+      </table>
     );
   });
 
@@ -38,10 +42,10 @@ describe('<SmartInventoryHostListItem />', () => {
   });
 
   test('should render expected row cells', () => {
-    const cells = wrapper.find('DataListCell');
-    expect(cells).toHaveLength(3);
-    expect(cells.at(0).text()).toEqual('Host Two');
-    expect(cells.at(1).find('Sparkline').length).toEqual(1);
-    expect(cells.at(2).text()).toContain('Inv 1');
+    const cells = wrapper.find('Td');
+    expect(cells).toHaveLength(4);
+    expect(cells.at(1).text()).toEqual('Host Two');
+    expect(cells.at(2).find('Sparkline').length).toEqual(1);
+    expect(cells.at(3).text()).toEqual('Inv 1');
   });
 });

awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.jsx

@@ -7,7 +7,10 @@ import { Card } from '@patternfly/react-core';
 import { OrganizationsAPI } from '../../../api';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import useRequest from '../../../util/useRequest';
-import PaginatedDataList from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
 import DatalistToolbar from '../../../components/DataListToolbar';
 
 import OrganizationExecEnvListItem from './OrganizationExecEnvListItem';
@@ -69,7 +72,7 @@ function OrganizationExecEnvList({ organization }) {
   return (
     <>
       <Card>
-        <PaginatedDataList
+        <PaginatedTable
           contentError={contentError}
           hasContentLoading={isLoading}
           items={executionEnvironments}
@@ -98,32 +101,21 @@ function OrganizationExecEnvList({ organization }) {
               key: 'modified_by__username__icontains',
             },
           ]}
-          toolbarSortColumns={[
-            {
-              name: t`Name`,
-              key: 'name',
-            },
-            {
-              name: t`Image`,
-              key: 'image',
-            },
-            {
-              name: t`Created`,
-              key: 'created',
-            },
-            {
-              name: t`Modified`,
-              key: 'modified',
-            },
-          ]}
           renderToolbar={props => (
             <DatalistToolbar {...props} qsConfig={QS_CONFIG} />
           )}
-          renderItem={executionEnvironment => (
+          headerRow={
+            <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
+              <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+              <HeaderCell sortKey="image">{t`Image`}</HeaderCell>
+            </HeaderRow>
+          }
+          renderRow={(executionEnvironment, index) => (
             <OrganizationExecEnvListItem
               key={executionEnvironment.id}
               executionEnvironment={executionEnvironment}
               detailUrl={`/execution_environments/${executionEnvironment.id}`}
+              rowIndex={index}
             />
           )}
         />

awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx

@@ -3,42 +3,18 @@ import { string } from 'prop-types';
 
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import {
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-} from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 
-import DataListCell from '../../../components/DataListCell';
 import { ExecutionEnvironment } from '../../../types';
 
 function OrganizationExecEnvListItem({ executionEnvironment, detailUrl }) {
-  const labelId = `check-action-${executionEnvironment.id}`;
-
   return (
-    <DataListItem
-      key={executionEnvironment.id}
-      aria-labelledby={labelId}
-      id={`${executionEnvironment.id}`}
-    >
-      <DataListItemRow>
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name" aria-label={t`Execution environment name`}>
-              <Link to={`${detailUrl}`}>
-                <b>{executionEnvironment.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell
-              key="image"
-              aria-label={t`Execution environment image`}
-            >
-              {executionEnvironment.image}
-            </DataListCell>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
+    <Tr id={`ee-row-${executionEnvironment.id}`}>
+      <Td dataLabel={t`Name`}>
+        <Link to={`${detailUrl}`}>{executionEnvironment.name}</Link>
+      </Td>
+      <Td dataLabel={t`Image`}>{executionEnvironment.image}</Td>
+    </Tr>
   );
 }
 

awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.test.jsx

@@ -19,10 +19,14 @@ describe('<OrganizationExecEnvListItem/>', () => {
   test('should mount successfully', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <OrganizationExecEnvListItem
-          executionEnvironment={executionEnvironment}
-          detailUrl="execution_environments/1/details"
-        />
+        <table>
+          <tbody>
+            <OrganizationExecEnvListItem
+              executionEnvironment={executionEnvironment}
+              detailUrl="execution_environments/1/details"
+            />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('OrganizationExecEnvListItem').length).toBe(1);
@@ -31,15 +35,20 @@ describe('<OrganizationExecEnvListItem/>', () => {
   test('should render the proper data', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <OrganizationExecEnvListItem
-          executionEnvironment={executionEnvironment}
-          detailUrl="execution_environments/1/details"
-        />
+        <table>
+          <tbody>
+            <OrganizationExecEnvListItem
+              executionEnvironment={executionEnvironment}
+              detailUrl="execution_environments/1/details"
+            />
+          </tbody>
+        </table>
       );
     });
     expect(
       wrapper
-        .find('DataListCell[aria-label="Execution environment image"]')
+        .find('Td')
+        .at(1)
         .text()
     ).toBe(executionEnvironment.image);
   });

awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeamList.jsx

@@ -4,7 +4,10 @@ import { useLocation } from 'react-router-dom';
 
 import { t } from '@lingui/macro';
 import { OrganizationsAPI } from '../../../api';
-import PaginatedDataList from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import useRequest from '../../../util/useRequest';
 import OrganizationTeamListItem from './OrganizationTeamListItem';
@@ -54,7 +57,7 @@ function OrganizationTeamList({ id }) {
   }, [fetchTeams]);
 
   return (
-    <PaginatedDataList
+    <PaginatedTable
       contentError={error}
       hasContentLoading={isLoading}
       items={teams}
@@ -76,15 +79,15 @@ function OrganizationTeamList({ id }) {
           key: 'modified_by__username__icontains',
         },
       ]}
-      toolbarSortColumns={[
-        {
-          name: t`Name`,
-          key: 'name',
-        },
-      ]}
       toolbarSearchableKeys={searchableKeys}
       toolbarRelatedSearchableKeys={relatedSearchableKeys}
-      renderItem={item => (
+      headerRow={
+        <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
+          <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+          <HeaderCell>{t`Actions`}</HeaderCell>
+        </HeaderRow>
+      }
+      renderRow={item => (
         <OrganizationTeamListItem
           key={item.id}
           value={item.name}

awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeamList.test.jsx

@@ -93,7 +93,8 @@ describe('<OrganizationTeamList />', () => {
     });
   });
 
-  test('should pass fetched teams to PaginatedDatalist', async () => {
+  test('should pass fetched teams to PaginatedTable', async () => {
+    // expect.assertions(7);
     let wrapper;
     await act(async () => {
       wrapper = mountWithContexts(
@@ -103,10 +104,8 @@ describe('<OrganizationTeamList />', () => {
     await sleep(0);
     wrapper.update();
 
-    const list = wrapper.find('PaginatedDataList');
-    list.find('DataListCell').forEach((el, index) => {
-      expect(el.text()).toBe(listData.data.results[index].name);
-    });
+    const list = wrapper.find('PaginatedTable');
+    expect(list.prop('items')).toEqual(listData.data.results);
     expect(list.prop('itemCount')).toEqual(listData.data.count);
     expect(list.prop('qsConfig')).toEqual({
       namespace: 'team',

awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeamListItem.jsx

@@ -1,58 +1,37 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import {
-  Button,
-  DataListAction,
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  Tooltip,
-} from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 import { t } from '@lingui/macro';
 
 import { PencilAltIcon } from '@patternfly/react-icons';
-import DataListCell from '../../../components/DataListCell';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 
 function OrganizationTeamListItem({ team, detailUrl }) {
-  const labelId = `check-action-${team.id}`;
-
   return (
-    <DataListItem aria-labelledby={labelId} id={`${team.id}`}>
-      <DataListItemRow>
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="divider">
-              <span>
-                <Link to={`${detailUrl}/details`}>
-                  <b aria-label={t`team name`}>{team.name}</b>
-                </Link>
-              </span>
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={t`actions`}
-          aria-labelledby={labelId}
-          id={labelId}
+    <Tr id={`team-row-${team.id}`}>
+      <Td dataLabel={t`Name`}>
+        <Link to={`${detailUrl}/details`}>{team.name}</Link>
+      </Td>
+      <ActionsTd dataLabel={t`Actions`}>
+        <ActionItem
+          visible={team.summary_fields.user_capabilities.edit}
+          tooltip={t`Edit Team`}
         >
-          {team.summary_fields.user_capabilities.edit && (
-            <Tooltip content={t`Edit Team`} position="top">
-              <Button
-                ouiaId={`${team.id}-edit-button`}
-                aria-label={t`Edit Team`}
-                css="grid-column: 2"
-                variant="plain"
-                component={Link}
-                to={`${detailUrl}/edit`}
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+          <Button
+            ouiaId={`${team.id}-edit-button`}
+            aria-label={t`Edit Team`}
+            css="grid-column: 2"
+            variant="plain"
+            component={Link}
+            to={`${detailUrl}/edit`}
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 

awx/ui_next/src/screens/Organization/OrganizationTeams/OrgnizationTeamListItem.test.jsx

@@ -17,7 +17,11 @@ describe('<OrganizationTeamListItem />', () => {
   test('should mount properly', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <OrganizationTeamListItem team={team} detailUrl="/teams/1" />
+        <table>
+          <tbody>
+            <OrganizationTeamListItem team={team} detailUrl="/teams/1" />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('OrganizationTeamListItem').length).toBe(1);
@@ -26,10 +30,19 @@ describe('<OrganizationTeamListItem />', () => {
   test('should render proper data', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <OrganizationTeamListItem team={team} detailUrl="/teams/1" />
+        <table>
+          <tbody>
+            <OrganizationTeamListItem team={team} detailUrl="/teams/1" />
+          </tbody>
+        </table>
       );
     });
-    expect(wrapper.find(`b[aria-label="team name"]`).text()).toBe('one');
+    expect(
+      wrapper
+        .find(`Td`)
+        .first()
+        .text()
+    ).toBe('one');
     expect(wrapper.find('PencilAltIcon').length).toBe(1);
   });
 
@@ -37,7 +50,11 @@ describe('<OrganizationTeamListItem />', () => {
     team.summary_fields.user_capabilities.edit = false;
     await act(async () => {
       wrapper = mountWithContexts(
-        <OrganizationTeamListItem team={team} detailUrl="/teams/1" />
+        <table>
+          <tbody>
+            <OrganizationTeamListItem team={team} detailUrl="/teams/1" />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('PencilAltIcon').length).toBe(0);