convert HostList to PaginatedTable

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

@@ -8,10 +8,14 @@ import { HostsAPI } from '../../../api';
 import AlertModal from '../../../components/AlertModal';
 import DataListToolbar from '../../../components/DataListToolbar';
 import ErrorDetail from '../../../components/ErrorDetail';
-import PaginatedDataList, {
+import {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
 import useRequest, { useDeleteItems } from '../../../util/useRequest';
 import {
   encodeQueryString,
@@ -130,7 +134,7 @@ function HostList({ i18n }) {
   return (
     <PageSection>
       <Card>
-        <PaginatedDataList
+        <PaginatedTable
           contentError={contentError}
           hasContentLoading={isLoading || isDeleteLoading}
           items={hosts}
@@ -157,14 +161,14 @@ function HostList({ i18n }) {
               key: 'modified_by__username__icontains',
             },
           ]}
-          toolbarSortColumns={[
-            {
-              name: i18n._(t`Name`),
-              key: 'name',
-            },
-          ]}
           toolbarSearchableKeys={searchableKeys}
           toolbarRelatedSearchableKeys={relatedSearchableKeys}
+          headerRow={
+            <HeaderRow qsConfig={QS_CONFIG}>
+              <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+              <HeaderCell>{i18n._(t`Inventory`)}</HeaderCell>
+            </HeaderRow>
+          }
           renderToolbar={props => (
             <DataListToolbar
               {...props}
@@ -193,13 +197,14 @@ function HostList({ i18n }) {
               ]}
             />
           )}
-          renderItem={host => (
+          renderRow={(host, index) => (
             <HostListItem
               key={host.id}
               host={host}
               detailUrl={`${match.url}/${host.id}/details`}
               isSelected={selected.some(row => row.id === host.id)}
               onSelect={() => handleSelect(host)}
+              rowIndex={index}
             />
           )}
           emptyStateControls={

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

@@ -134,8 +134,9 @@ describe('<HostList />', () => {
 
     act(() => {
       wrapper
-        .find('input#select-host-1')
-        .closest('DataListCheck')
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
         .invoke('onChange')();
     });
     wrapper.update();
@@ -147,8 +148,9 @@ describe('<HostList />', () => {
     ).toEqual(true);
     act(() => {
       wrapper
-        .find('input#select-host-1')
-        .closest('DataListCheck')
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
         .invoke('onChange')();
     });
     wrapper.update();

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

@@ -1,91 +1,67 @@
 import 'styled-components/macro';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import {
-  Button,
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  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 styled from 'styled-components';
-import DataListCell from '../../../components/DataListCell';
-
-import Sparkline from '../../../components/Sparkline';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { Host } from '../../../types';
 import HostToggle from '../../../components/HostToggle';
 
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 24px;
-  grid-template-columns: 92px 40px;
-`;
-
-function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
+function HostListItem({
+  i18n,
+  host,
+  isSelected,
+  onSelect,
+  detailUrl,
+  rowIndex,
+}) {
   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={host.summary_fields.recent_jobs} />
-            </DataListCell>,
-            <DataListCell key="inventory">
-              {host.summary_fields.inventory && (
-                <Fragment>
-                  <b css="margin-right: 24px">{i18n._(t`Inventory`)}</b>
-                  <Link
-                    to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
-                  >
-                    {host.summary_fields.inventory.name}
-                  </Link>
-                </Fragment>
-              )}
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
+    <Tr id={`host-row-${host.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+        dataLabel={i18n._(t`Selected`)}
+      />
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
+        <Link to={`${detailUrl}`}>
+          <b>{host.name}</b>
+        </Link>
+      </Td>
+      <Td dataLabel={i18n._(t`Inventory`)}>
+        {host.summary_fields.inventory && (
+          <Link
+            to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
+          >
+            {host.summary_fields.inventory.name}
+          </Link>
+        )}
+      </Td>
+      <ActionsTd dataLabel={i18n._(t`Actions`)} gridColumns="auto 40px">
+        <HostToggle host={host} />
+        <ActionItem
+          visible={host.summary_fields.user_capabilities.edit}
+          tooltip={i18n._(t`Edit Host`)}
         >
-          <HostToggle host={host} />
-          {host.summary_fields.user_capabilities.edit ? (
-            <Tooltip content={i18n._(t`Edit Host`)} position="top">
-              <Button
-                aria-label={i18n._(t`Edit Host`)}
-                variant="plain"
-                component={Link}
-                to={`/hosts/${host.id}/edit`}
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          ) : (
-            ''
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+          <Button
+            aria-label={i18n._(t`Edit Host`)}
+            variant="plain"
+            component={Link}
+            to={`/hosts/${host.id}/edit`}
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 

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

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