convert instance group list to tables

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.jsx

@@ -8,9 +8,11 @@ import { InstanceGroupsAPI } from '../../../api';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import useRequest, { useDeleteItems } from '../../../util/useRequest';
 import useSelected from '../../../util/useSelected';
-import PaginatedDataList, {
-  ToolbarDeleteButton,
-} from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import { ToolbarDeleteButton } from '../../../components/PaginatedDataList';
 import ErrorDetail from '../../../components/ErrorDetail';
 import AlertModal from '../../../components/AlertModal';
 import DatalistToolbar from '../../../components/DataListToolbar';
@@ -189,7 +191,7 @@ function InstanceGroupList({ i18n }) {
     <>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={contentError}
             hasContentLoading={isLoading || deleteLoading}
             items={instanceGroups}
@@ -220,7 +222,18 @@ function InstanceGroupList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={instanceGroup => (
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Type`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Running Jobs`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Total Jobs`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Instances`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Capacity`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
+              </HeaderRow>
+            }
+            renderRow={(instanceGroup, index) => (
               <InstanceGroupListItem
                 key={instanceGroup.id}
                 value={instanceGroup.name}
@@ -228,6 +241,7 @@ function InstanceGroupList({ i18n }) {
                 detailUrl={getDetailUrl(instanceGroup)}
                 onSelect={() => handleSelect(instanceGroup)}
                 isSelected={selected.some(row => row.id === instanceGroup.id)}
+                rowIndex={index}
               />
             )}
             emptyStateControls={canAdd && addButton}

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.test.jsx

@@ -71,13 +71,19 @@ describe('<InstanceGroupList />', () => {
     await waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
 
     wrapper
-      .find('input#select-instance-groups-1')
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
       .simulate('change', instanceGroups);
     wrapper.update();
 
-    expect(wrapper.find('input#select-instance-groups-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')();
@@ -102,16 +108,22 @@ describe('<InstanceGroupList />', () => {
     });
     await waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
 
-    const instanceGroupIndex = [1, 2, 3];
+    const instanceGroupIndex = [0, 1, 2];
 
     instanceGroupIndex.forEach(element => {
       wrapper
-        .find(`input#select-instance-groups-${element}`)
+        .find('.pf-c-table__check')
+        .at(element)
+        .find('input')
         .simulate('change', instanceGroups);
       wrapper.update();
 
       expect(
-        wrapper.find(`input#select-instance-groups-${element}`).prop('checked')
+        wrapper
+          .find('.pf-c-table__check')
+          .at(element)
+          .find('input')
+          .prop('checked')
       ).toBe(true);
     });
 
@@ -159,11 +171,19 @@ describe('<InstanceGroupList />', () => {
     });
     waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
 
-    wrapper.find('input#select-instance-groups-1').simulate('change', 'a');
+    wrapper
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
+      .simulate('change', 'a');
     wrapper.update();
-    expect(wrapper.find('input#select-instance-groups-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')()

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx

@@ -5,48 +5,18 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import 'styled-components/macro';
 import {
-  Badge as PFBadge,
   Button,
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
   Label,
   Progress,
   ProgressMeasureLocation,
   ProgressSize,
-  Tooltip,
 } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
-
-import _DataListCell from '../../../components/DataListCell';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { InstanceGroup } from '../../../types';
 
-const DataListCell = styled(_DataListCell)`
-  white-space: nowrap;
-`;
-
-const Badge = styled(PFBadge)`
-  margin-left: 8px;
-`;
-
-const ListGroup = styled.span`
-  margin-left: 12px;
-
-  &:first-of-type {
-    margin-left: 0;
-  }
-`;
-
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: 40px;
-`;
-
 const Unavailable = styled.span`
   color: var(--pf-global--danger-color--200);
 `;
@@ -56,6 +26,7 @@ function InstanceGroupListItem({
   detailUrl,
   isSelected,
   onSelect,
+  rowIndex,
   i18n,
 }) {
   const labelId = `check-action-${instanceGroup.id}`;
@@ -104,98 +75,50 @@ function InstanceGroupListItem({
   };
 
   return (
-    <DataListItem
-      key={instanceGroup.id}
-      aria-labelledby={labelId}
-      id={`${instanceGroup.id} `}
-    >
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-instance-groups-${instanceGroup.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell
-              key="name"
-              aria-label={i18n._(t`instance group name`)}
-            >
-              <span id={labelId}>
-                <Link to={`${detailUrl}`}>
-                  <b>{instanceGroup.name}</b>
-                </Link>
-              </span>
-              {verifyInstanceGroup(instanceGroup)}
-            </DataListCell>,
-
-            <DataListCell
-              key="type"
-              aria-label={i18n._(t`instance group type`)}
-            >
-              <b css="margin-right: 24px">{i18n._(t`Type`)}</b>
-              <span id={labelId}>
-                {isContainerGroup(instanceGroup)
-                  ? i18n._(t`Container group`)
-                  : i18n._(t`Instance group`)}
-              </span>
-            </DataListCell>,
-            <DataListCell
-              key="related-field-counts"
-              aria-label={i18n._(t`instance counts`)}
-              width={2}
-            >
-              <ListGroup>
-                <b>{i18n._(t`Running jobs`)}</b>
-                <Badge isRead>{instanceGroup.jobs_running}</Badge>
-              </ListGroup>
-              <ListGroup>
-                <b>{i18n._(t`Total jobs`)}</b>
-                <Badge isRead>{instanceGroup.jobs_total}</Badge>
-              </ListGroup>
-
-              {!instanceGroup.is_containerized ? (
-                <ListGroup>
-                  <b>{i18n._(t`Instances`)}</b>
-                  <Badge isRead>{instanceGroup.instances}</Badge>
-                </ListGroup>
-              ) : null}
-            </DataListCell>,
-
-            <DataListCell
-              key="capacity"
-              aria-label={i18n._(t`instance group used capacity`)}
-            >
-              {usedCapacity(instanceGroup)}
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
+    <Tr id={`ig-row-${instanceGroup.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+        dataLabel={i18n._(t`Selected`)}
+      />
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
+        <Link to={`${detailUrl}`}>
+          <b>{instanceGroup.name}</b>
+          {verifyInstanceGroup(instanceGroup)}
+        </Link>
+      </Td>
+      <Td dataLabel={i18n._(t`Type`)}>
+        {isContainerGroup(instanceGroup)
+          ? i18n._(t`Container group`)
+          : i18n._(t`Instance group`)}
+      </Td>
+      <Td dataLabel={i18n._(t`Running jobs`)}>{instanceGroup.jobs_running}</Td>
+      <Td dataLabel={i18n._(t`Total jobs`)}>{instanceGroup.jobs_total}</Td>
+      <Td dataLabel={i18n._(t`Instances`)}>{instanceGroup.instances}</Td>
+      <Td dataLabel={i18n._(t`Capacity`)}>{usedCapacity(instanceGroup)}</Td>
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
+        <ActionItem
+          visible={instanceGroup.summary_fields.user_capabilities.edit}
+          tooltip={i18n._(t`Edit instance group`)}
         >
-          {instanceGroup.summary_fields.user_capabilities.edit && (
-            <Tooltip content={i18n._(t`Edit instance group`)} position="top">
-              <Button
-                aria-label={i18n._(t`Edit instance group`)}
-                variant="plain"
-                component={Link}
-                to={
-                  isContainerGroup(instanceGroup)
-                    ? `/instance_groups/container_group/${instanceGroup.id}/edit`
-                    : `/instance_groups/${instanceGroup.id}/edit`
-                }
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+          <Button
+            aria-label={i18n._(t`Edit instance group`)}
+            variant="plain"
+            component={Link}
+            to={
+              isContainerGroup(instanceGroup)
+                ? `/instance_groups/container_group/${instanceGroup.id}/edit`
+                : `/instance_groups/${instanceGroup.id}/edit`
+            }
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 InstanceGroupListItem.prototype = {

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.test.jsx

@@ -47,12 +47,16 @@ describe('<InstanceGroupListItem/>', () => {
   test('should mount successfully', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[1]}
-          detailUrl="instance_groups/1/details"
-          isSelected={false}
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <InstanceGroupListItem
+              instanceGroup={instanceGroups[1]}
+              detailUrl="instance_groups/1/details"
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('InstanceGroupListItem').length).toBe(1);
@@ -61,73 +65,81 @@ describe('<InstanceGroupListItem/>', () => {
   test('should render the proper data instance group', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[0]}
-          detailUrl="instance_groups/1/details"
-          isSelected={false}
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <InstanceGroupListItem
+              instanceGroup={instanceGroups[0]}
+              detailUrl="instance_groups/1/details"
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(
-      wrapper.find('PFDataListCell[aria-label="instance group name"]').text()
+      wrapper
+        .find('Td')
+        .at(1)
+        .text()
     ).toBe('Foo');
     expect(wrapper.find('Progress').prop('value')).toBe(40);
     expect(
-      wrapper.find('PFDataListCell[aria-label="instance group type"]').text()
-    ).toBe('TypeInstance group');
+      wrapper
+        .find('Td')
+        .at(2)
+        .text()
+    ).toBe('Instance group');
     expect(wrapper.find('PencilAltIcon').length).toBe(1);
-    expect(wrapper.find('input#select-instance-groups-1').prop('checked')).toBe(
-      false
+    expect(wrapper.find('.pf-c-table__check input').prop('checked')).toBe(
+      undefined
     );
   });
 
   test('should render the proper data container group', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[1]}
-          detailUrl="instance_groups/2/details"
-          isSelected={false}
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <InstanceGroupListItem
+              instanceGroup={instanceGroups[1]}
+              detailUrl="instance_groups/2/details"
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(
-      wrapper.find('PFDataListCell[aria-label="instance group name"]').text()
+      wrapper
+        .find('Td')
+        .at(1)
+        .text()
     ).toBe('Bar');
 
     expect(
-      wrapper.find('PFDataListCell[aria-label="instance group type"]').text()
-    ).toBe('TypeContainer group');
+      wrapper
+        .find('Td')
+        .at(2)
+        .text()
+    ).toBe('Container group');
     expect(wrapper.find('PencilAltIcon').length).toBe(0);
   });
 
-  test('should be checked', async () => {
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[0]}
-          detailUrl="instance_groups/1/details"
-          isSelected
-          onSelect={() => {}}
-        />
-      );
-    });
-    expect(wrapper.find('input#select-instance-groups-1').prop('checked')).toBe(
-      true
-    );
-  });
-
   test('edit button shown to users with edit capabilities', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[0]}
-          detailUrl="instance_groups/1/details"
-          isSelected
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <InstanceGroupListItem
+              instanceGroup={instanceGroups[0]}
+              detailUrl="instance_groups/1/details"
+              isSelected
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
 
@@ -137,12 +149,16 @@ describe('<InstanceGroupListItem/>', () => {
   test('edit button hidden from users without edit capabilities', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[1]}
-          detailsUrl="instance_group/2/details"
-          isSelected
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <InstanceGroupListItem
+              instanceGroup={instanceGroups[1]}
+              detailsUrl="instance_group/2/details"
+              isSelected
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });