convert ee template list, host group list to tables

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentTemplate/ExecutionEnvironmentTemplateList.jsx

@@ -8,7 +8,10 @@ import { ExecutionEnvironmentsAPI } from '../../../api';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import useRequest from '../../../util/useRequest';
 import DatalistToolbar from '../../../components/DataListToolbar';
-import PaginatedDataList from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderCell,
+  HeaderRow,
+} from '../../../components/PaginatedTable';
 
 import ExecutionEnvironmentTemplateListItem from './ExecutionEnvironmentTemplateListItem';
 
@@ -74,7 +77,7 @@ function ExecutionEnvironmentTemplateList({ executionEnvironment }) {
   return (
     <>
       <Card>
-        <PaginatedDataList
+        <PaginatedTable
           contentError={contentError}
           hasContentLoading={isLoading}
           items={templates}
@@ -106,24 +109,16 @@ function ExecutionEnvironmentTemplateList({ executionEnvironment }) {
               key: 'modified_by__username__icontains',
             },
           ]}
-          toolbarSortColumns={[
-            {
-              name: t`Name`,
-              key: 'name',
-            },
-            {
-              name: t`Created`,
-              key: 'created',
-            },
-            {
-              name: t`Modified`,
-              key: 'modified',
-            },
-          ]}
           renderToolbar={props => (
             <DatalistToolbar {...props} qsConfig={QS_CONFIG} />
           )}
-          renderItem={template => (
+          headerRow={
+            <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
+              <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+              <HeaderCell>{t`Type`}</HeaderCell>
+            </HeaderRow>
+          }
+          renderRow={template => (
             <ExecutionEnvironmentTemplateListItem
               key={template.id}
               template={template}

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentTemplate/ExecutionEnvironmentTemplateListItem.jsx

@@ -1,38 +1,20 @@
 import React from 'react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import {
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-} from '@patternfly/react-core';
-
-import DataListCell from '../../../components/DataListCell';
+import { Tr, Td } from '@patternfly/react-table';
 
 function ExecutionEnvironmentTemplateListItem({ template, detailUrl }) {
   return (
-    <DataListItem
-      key={template.id}
-      aria-labelledby={`check-action-${template.id}`}
-      id={`${template.id}`}
-    >
-      <DataListItemRow>
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name" aria-label={t`Name`}>
-              <Link to={`${detailUrl}`}>
-                <b>{template.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key="template-type" aria-label={t`Template type`}>
-              {template.type === 'job_template'
-                ? t`Job Template`
-                : t`Workflow Job Template`}
-            </DataListCell>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
+    <Tr id={`template-row-${template.id}`}>
+      <Td dataLabel={t`Name`}>
+        <Link to={`${detailUrl}`}>{template.name}</Link>
+      </Td>
+      <Td dataLabel={t`Type`}>
+        {template.type === 'job_template'
+          ? t`Job Template`
+          : t`Workflow Job Template`}
+      </Td>
+    </Tr>
   );
 }
 

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentTemplate/ExecutionEnvironmentTemplateListItem.test.jsx

@@ -16,33 +16,50 @@ describe('<ExecutionEnvironmentTemplateListItem/>', () => {
   test('should mount successfully', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <ExecutionEnvironmentTemplateListItem
-          template={template}
-          detailUrl={`/templates/${template.type}/${template.id}/details`}
-        />
+        <table>
+          <tbody>
+            <ExecutionEnvironmentTemplateListItem
+              template={template}
+              detailUrl={`/templates/${template.type}/${template.id}/details`}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('ExecutionEnvironmentTemplateListItem').length).toBe(1);
-    expect(wrapper.find('DataListCell[aria-label="Name"]').text()).toBe(
-      template.name
-    );
     expect(
-      wrapper.find('DataListCell[aria-label="Template type"]').text()
+      wrapper
+        .find('Td')
+        .at(0)
+        .text()
+    ).toBe(template.name);
+    expect(
+      wrapper
+        .find('Td')
+        .at(1)
+        .text()
     ).toBe('Job Template');
   });
 
   test('should distinguish template types', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <ExecutionEnvironmentTemplateListItem
-          template={{ ...template, type: 'workflow_job_template' }}
-          detailUrl={`/templates/${template.type}/${template.id}/details`}
-        />
+        <table>
+          <tbody>
+            <ExecutionEnvironmentTemplateListItem
+              template={{ ...template, type: 'workflow_job_template' }}
+              detailUrl={`/templates/${template.type}/${template.id}/details`}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('ExecutionEnvironmentTemplateListItem').length).toBe(1);
     expect(
-      wrapper.find('DataListCell[aria-label="Template type"]').text()
+      wrapper
+        .find('Td')
+        .at(1)
+        .text()
     ).toBe('Workflow Job Template');
   });
 });

awx/ui_next/src/screens/Host/HostGroups/HostGroupItem.jsx

@@ -3,64 +3,50 @@ import { bool, func, number, oneOfType, string } from 'prop-types';
 
 import { t } from '@lingui/macro';
 
-import {
-  Button,
-  DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Tooltip,
-} from '@patternfly/react-core';
-
+import { Button } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 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 HostGroupItem({ group, inventoryId, isSelected, onSelect }) {
+function HostGroupItem({ 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}`}>
-      <DataListItemRow>
-        <DataListCheck
-          aria-labelledby={labelId}
-          id={`select-group-${group.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name">
-              <Link to={`${detailUrl}`} id={labelId}>
-                <b>{group.name}</b>
-              </Link>
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={t`actions`}
-          aria-labelledby={labelId}
-          id={labelId}
+    <Tr id={`group-row-${group.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+        dataLabel={t`Selected`}
+      />
+      <Td dataLabel={t`Name`}>
+        {' '}
+        <Link to={`${detailUrl}`} id={labelId}>
+          <b>{group.name}</b>
+        </Link>
+      </Td>
+      <ActionsTd dataLabel={t`Actions`}>
+        <ActionItem
+          visible={group.summary_fields.user_capabilities.edit}
+          tooltip={t`Edit Group`}
         >
-          {group.summary_fields.user_capabilities.edit && (
-            <Tooltip content={t`Edit Group`} position="top">
-              <Button
-                ouiaId={`${group.id}-edit-button`}
-                variant="plain"
-                component={Link}
-                to={editUrl}
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+          <Button
+            ouiaId={`${group.id}-edit-button`}
+            variant="plain"
+            component={Link}
+            to={editUrl}
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 

awx/ui_next/src/screens/Host/HostGroups/HostGroupItem.test.jsx

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

awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx

@@ -11,9 +11,11 @@ import useSelected from '../../../util/useSelected';
 import { HostsAPI, InventoriesAPI } from '../../../api';
 import AlertModal from '../../../components/AlertModal';
 import ErrorDetail from '../../../components/ErrorDetail';
-import PaginatedDataList, {
-  ToolbarAddButton,
-} from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderCell,
+  HeaderRow,
+} from '../../../components/PaginatedTable';
+import { ToolbarAddButton } from '../../../components/PaginatedDataList';
 import AssociateModal from '../../../components/AssociateModal';
 import DisassociateButton from '../../../components/DisassociateButton';
 import DataListToolbar from '../../../components/DataListToolbar';
@@ -82,9 +84,13 @@ function HostGroupsList({ host }) {
     fetchGroups();
   }, [fetchGroups]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    groups
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(groups);
 
   const {
     isLoading: isDisassociateLoading,
@@ -105,7 +111,7 @@ function HostGroupsList({ host }) {
 
   const handleDisassociate = async () => {
     await disassociateHosts();
-    setSelected([]);
+    clearSelected();
   };
 
   const fetchGroupsToAssociate = useCallback(
@@ -146,13 +152,13 @@ function HostGroupsList({ host }) {
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={contentError}
         hasContentLoading={isLoading || isDisassociateLoading}
         items={groups}
         itemCount={itemCount}
         qsConfig={QS_CONFIG}
-        onRowClick={handleSelect}
+        clearSelected={clearSelected}
         toolbarSearchColumns={[
           {
             name: t`Name`,
@@ -168,15 +174,15 @@ function HostGroupsList({ host }) {
             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) => (
           <HostGroupItem
             key={item.id}
             group={item}
@@ -184,6 +190,7 @@ function HostGroupsList({ host }) {
             inventoryId={item.summary_fields.inventory.id}
             isSelected={selected.some(row => row.id === item.id)}
             onSelect={() => handleSelect(item)}
+            rowIndex={index}
           />
         )}
         renderToolbar={props => (
@@ -191,9 +198,7 @@ function HostGroupsList({ host }) {
             {...props}
             showSelectAll
             isAllSelected={isAllSelected}
-            onSelectAll={isSelected =>
-              setSelected(isSelected ? [...groups] : [])
-            }
+            onSelectAll={selectAll}
             qsConfig={QS_CONFIG}
             additionalControls={[
               ...(canAdd

awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.test.jsx

@@ -122,46 +122,63 @@ describe('<HostGroupsList />', () => {
 
   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')(
-        true
-      );
+      wrapper
+        .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')(
-        false
-      );
+      wrapper
+        .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);
     });
   });
@@ -236,17 +253,18 @@ describe('<HostGroupsList />', () => {
   });
 
   test('expected api calls are made for multi-disassociation', async () => {
+    expect.assertions(11);
     expect(HostsAPI.disassociateGroup).toHaveBeenCalledTimes(0);
     expect(HostsAPI.readAllGroups).toHaveBeenCalledTimes(1);
-    expect(wrapper.find('DataListCheck').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');