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,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 {
+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
+      />
-          dataListCells={[
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-            <DataListCell key="name">
+        <Link to={`${detailUrl}`}>
-              <Link to={`${detailUrl}`}>
+          <b>{host.name}</b>
-                <b>{host.name}</b>
+        </Link>
-              </Link>
+      </Td>
-            </DataListCell>,
+      <Td dataLabel={i18n._(t`Inventory`)}>
-            <DataListCell key="recentJobs">
+        {host.summary_fields.inventory && (
-              <Sparkline jobs={host.summary_fields.recent_jobs} />
+          <Link
-            </DataListCell>,
+            to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
-            <DataListCell key="inventory">
+          >
-              {host.summary_fields.inventory && (
+            {host.summary_fields.inventory.name}
-                <Fragment>
+          </Link>
-                  <b css="margin-right: 24px">{i18n._(t`Inventory`)}</b>
+        )}
-                  <Link
+      </Td>
-                    to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
+      <ActionsTd dataLabel={i18n._(t`Actions`)} gridColumns="auto 40px">
-                  >
+        <HostToggle host={host} />
-                    {host.summary_fields.inventory.name}
+        <ActionItem
-                  </Link>
+          visible={host.summary_fields.user_capabilities.edit}
-                </Fragment>
+          tooltip={i18n._(t`Edit Host`)}
-              )}
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
         >
-          <HostToggle host={host} />
+          <Button
-          {host.summary_fields.user_capabilities.edit ? (
+            aria-label={i18n._(t`Edit Host`)}
-            <Tooltip content={i18n._(t`Edit Host`)} position="top">
+            variant="plain"
-              <Button
+            component={Link}
-                aria-label={i18n._(t`Edit Host`)}
+            to={`/hosts/${host.id}/edit`}
-                variant="plain"
+          >
-                component={Link}
+            <PencilAltIcon />
-                to={`/hosts/${host.id}/edit`}
+          </Button>
-              >
+        </ActionItem>
-                <PencilAltIcon />
+      </ActionsTd>
-              </Button>
+    </Tr>
-            </Tooltip>
-          ) : (
-            ''
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

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

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