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

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

@@ -1,76 +1,56 @@
 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 {
+import { Button } from '@patternfly/react-core';
-  Button,
+import { Tr, Td } from '@patternfly/react-table';
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  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 Sparkline from '../../../components/Sparkline';
 import { Host } from '../../../types';
 import HostToggle from '../../../components/HostToggle';
 
-const DataListAction = styled(_DataListAction)`
+function HostListItem({
-  align-items: center;
+  i18n,
-  display: grid;
+  host,
-  grid-gap: 24px;
+  isSelected,
-  grid-template-columns: 92px 40px;
+  onSelect,
-`;
+  detailUrl,
-
+  rowIndex,
-function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
+}) {
   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
+        select={{
-          id={`select-host-${host.id}`}
+          rowIndex,
-          checked={isSelected}
+          isSelected,
-          onChange={onSelect}
+          onSelect,
-          aria-labelledby={labelId}
+        }}
+        dataLabel={i18n._(t`Selected`)}
       />
-        <DataListItemCells
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-          dataListCells={[
-            <DataListCell key="name">
         <Link to={`${detailUrl}`}>
           <b>{host.name}</b>
         </Link>
-            </DataListCell>,
+      </Td>
-            <DataListCell key="recentJobs">
+      <Td dataLabel={i18n._(t`Inventory`)}>
-              <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>,
+      </Td>
-          ]}
+      <ActionsTd dataLabel={i18n._(t`Actions`)} gridColumns="auto 40px">
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
-        >
         <HostToggle host={host} />
-          {host.summary_fields.user_capabilities.edit ? (
+        <ActionItem
-            <Tooltip content={i18n._(t`Edit Host`)} position="top">
+          visible={host.summary_fields.user_capabilities.edit}
+          tooltip={i18n._(t`Edit Host`)}
+        >
           <Button
             aria-label={i18n._(t`Edit Host`)}
             variant="plain"
@@ -79,13 +59,9 @@ function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
           >
             <PencilAltIcon />
           </Button>
-            </Tooltip>
+        </ActionItem>
-          ) : (
+      </ActionsTd>
-            ''
+    </Tr>
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

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

@@ -25,12 +25,16 @@ describe('<HostsListItem />', () => {
 
   beforeEach(() => {
     wrapper = mountWithContexts(
+      <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(
+      <table>
+        <tbody>
           <HostsListItem
             isSelected={false}
             detailUrl="/host/1"
             onSelect={() => {}}
             host={copyMockHost}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });