convert JobList to PaginatedTable

awx/ui_next/src/components/JobList/JobList.jsx

@@ -7,7 +7,8 @@ import { Card } from '@patternfly/react-core';
 import AlertModal from '../AlertModal';
 import DatalistToolbar from '../DataListToolbar';
 import ErrorDetail from '../ErrorDetail';
-import PaginatedDataList, { ToolbarDeleteButton } from '../PaginatedDataList';
+import { ToolbarDeleteButton } from '../PaginatedDataList';
+import PaginatedTable, { HeaderRow, HeaderCell } from '../PaginatedTable';
 import useRequest, {
   useDeleteItems,
   useDismissableError,
@@ -27,7 +28,7 @@ import {
 } from '../../api';
 
 function JobList({ i18n, defaultParams, showTypeColumn = false }) {
-  const QS_CONFIG = getQSConfig(
+  const qsConfig = getQSConfig(
     'job',
     {
       page: 1,
@@ -49,7 +50,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
   } = useRequest(
     useCallback(
       async () => {
-        const params = parseQueryString(QS_CONFIG, location.search);
+        const params = parseQueryString(qsConfig, location.search);
         const [response, actionsResponse] = await Promise.all([
           UnifiedJobsAPI.read({ ...params }),
           UnifiedJobsAPI.readOptions(),
@@ -81,7 +82,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
   // TODO: update QS_CONFIG to be safe for deps array
   const fetchJobsById = useCallback(
     async ids => {
-      const params = parseQueryString(QS_CONFIG, location.search);
+      const params = parseQueryString(qsConfig, location.search);
       params.id__in = ids.join(',');
       const { data } = await UnifiedJobsAPI.read(params);
       return data.results;
@@ -89,7 +90,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
     [location.search] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const jobs = useWsJobs(results, fetchJobsById, QS_CONFIG);
+  const jobs = useWsJobs(results, fetchJobsById, qsConfig);
 
   const isAllSelected = selected.length === jobs.length && selected.length > 0;
 
@@ -145,7 +146,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
       );
     }, [selected]),
     {
-      qsConfig: QS_CONFIG,
+      qsConfig,
       allItemsSelected: isAllSelected,
       fetchItems: fetchJobs,
     }
@@ -176,14 +177,13 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
   return (
     <>
       <Card>
-        <PaginatedDataList
+        <PaginatedTable
           contentError={contentError}
           hasContentLoading={isLoading || isDeleteLoading || isCancelLoading}
           items={jobs}
           itemCount={count}
           pluralizedItemName={i18n._(t`Jobs`)}
-          qsConfig={QS_CONFIG}
+          qsConfig={qsConfig}
-          onRowClick={handleSelect}
           toolbarSearchColumns={[
             {
               name: i18n._(t`Name`),
@@ -233,32 +233,17 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
               key: 'job__limit',
             },
           ]}
-          toolbarSortColumns={[
+          headerRow={
-            {
+            <HeaderRow qsConfig={qsConfig}>
-              name: i18n._(t`Finish Time`),
+              <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
-              key: 'finished',
+              <HeaderCell sortKey="status">{i18n._(t`Status`)}</HeaderCell>
-            },
+              {showTypeColumn && <HeaderCell>{i18n._(t`Type`)}</HeaderCell>}
-            {
+              <HeaderCell sortKey="started">{i18n._(t`Start Time`)}</HeaderCell>
-              name: i18n._(t`ID`),
+              <HeaderCell sortKey="finished">
-              key: 'id',
+                {i18n._(t`Finish Time`)}
-            },
+              </HeaderCell>
-            {
+            </HeaderRow>
-              name: i18n._(t`Launched By`),
+          }
-              key: 'created_by__id',
-            },
-            {
-              name: i18n._(t`Name`),
-              key: 'name',
-            },
-            {
-              name: i18n._(t`Project`),
-              key: 'unified_job_template__project__id',
-            },
-            {
-              name: i18n._(t`Start Time`),
-              key: 'started',
-            },
-          ]}
           toolbarSearchableKeys={searchableKeys}
           toolbarRelatedSearchableKeys={relatedSearchableKeys}
           renderToolbar={props => (
@@ -267,7 +252,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
               showSelectAll
               isAllSelected={isAllSelected}
               onSelectAll={handleSelectAll}
-              qsConfig={QS_CONFIG}
+              qsConfig={qsConfig}
               additionalControls={[
                 <ToolbarDeleteButton
                   key="delete"
@@ -283,7 +268,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
               ]}
             />
           )}
-          renderItem={job => (
+          renderRow={job => (
             <JobListItem
               key={job.id}
               job={job}

awx/ui_next/src/components/JobList/JobListItem.jsx

@@ -2,33 +2,19 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 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 { RocketIcon } from '@patternfly/react-icons';
-import styled from 'styled-components';
+import { ActionsTd, ActionItem } from '../PaginatedTable';
-import DataListCell from '../DataListCell';
 import LaunchButton from '../LaunchButton';
-import StatusIcon from '../StatusIcon';
+import StatusLabel from '../StatusLabel';
 import { formatDateString } from '../../util/dates';
 import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
 
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: 40px;
-`;
-
 function JobListItem({
   i18n,
   job,
+  rowIndex,
   isSelected,
   onSelect,
   showTypeColumn = false,
@@ -45,66 +31,56 @@ function JobListItem({
   };
 
   return (
-    <DataListItem aria-labelledby={labelId} id={`${job.id}`}>
+    <Tr id={`job-row-${job.id}`}>
-      <DataListItemRow>
+      <Td
-        <DataListCheck
+        select={{
-          id={`select-job-${job.id}`}
+          rowIndex,
-          checked={isSelected}
+          isSelected,
-          onChange={onSelect}
+          onSelect,
-          aria-labelledby={labelId}
+          disable: false,
-        />
+        }}
-        <DataListItemCells
+      />
-          dataListCells={[
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-            <DataListCell key="status" isFilled={false}>
+        <span>
-              {job.status && <StatusIcon status={job.status} />}
+          <Link to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}>
-            </DataListCell>,
+            <b>
-            <DataListCell key="name">
+              {job.id} &mdash; {job.name}
-              <span>
+            </b>
-                <Link to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}>
+          </Link>
-                  <b>
+        </span>
-                    {job.id} &mdash; {job.name}
+      </Td>
-                  </b>
+      <Td dataLabel={i18n._(t`Status`)}>
-                </Link>
+        {job.status && <StatusLabel status={job.status} />}
-              </span>
+      </Td>
-            </DataListCell>,
+      {showTypeColumn && (
-            ...(showTypeColumn
+        <Td dataLabel={i18n._(t`Type`)}>{jobTypes[job.type]}</Td>
-              ? [
+      )}
-                  <DataListCell key="type" aria-label="type">
+      <Td dataLabel={i18n._(t`Start Time`)}>{formatDateString(job.started)}</Td>
-                    {jobTypes[job.type]}
+      <Td dataLabel={i18n._(t`Finish Time`)}>
-                  </DataListCell>,
+        {job.finished ? formatDateString(job.finished) : ''}
-                ]
+      </Td>
-              : []),
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
-            <DataListCell key="finished">
+        <ActionItem
-              {job.finished ? formatDateString(job.finished) : ''}
+          visible={
-            </DataListCell>,
+            job.type !== 'system_job' &&
-          ]}
+            job.summary_fields?.user_capabilities?.start
-        />
+          }
-        <DataListAction
+          tooltip={i18n._(t`Relaunch Job`)}
-          aria-label="actions"
-          aria-labelledby={labelId}
-          id={labelId}
         >
-          {job.type !== 'system_job' &&
+          <LaunchButton resource={job}>
-          job.summary_fields?.user_capabilities?.start ? (
+            {({ handleRelaunch }) => (
-            <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
+              <Button
-              <LaunchButton resource={job}>
+                variant="plain"
-                {({ handleRelaunch }) => (
+                onClick={handleRelaunch}
-                  <Button
+                aria-label={i18n._(t`Relaunch`)}
-                    variant="plain"
+              >
-                    onClick={handleRelaunch}
+                <RocketIcon />
-                    aria-label={i18n._(t`Relaunch`)}
+              </Button>
-                  >
+            )}
-                    <RocketIcon />
+          </LaunchButton>
-                  </Button>
+        </ActionItem>
-                )}
+      </ActionsTd>
-              </LaunchButton>
+    </Tr>
-            </Tooltip>
-          ) : (
-            ''
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

awx/ui_next/src/components/JobList/JobListItem.test.jsx

@@ -32,7 +32,11 @@ describe('<JobListItem />', () => {
       initialEntries: ['/jobs'],
     });
     wrapper = mountWithContexts(
-      <JobListItem job={mockJob} isSelected onSelect={() => {}} />,
+      <table>
+        <tbody>
+          <JobListItem job={mockJob} isSelected onSelect={() => {}} />
+        </tbody>
+      </table>,
       { context: { router: { history } } }
     );
   });
@@ -51,32 +55,40 @@ describe('<JobListItem />', () => {
 
   test('launch button hidden from users without launch capabilities', () => {
     wrapper = mountWithContexts(
-      <JobListItem
+      <table>
-        job={{
+        <tbody>
-          ...mockJob,
+          <JobListItem
-          summary_fields: { user_capabilities: { start: false } },
+            job={{
-        }}
+              ...mockJob,
-        detailUrl={`/jobs/playbook/${mockJob.id}`}
+              summary_fields: { user_capabilities: { start: false } },
-        onSelect={() => {}}
+            }}
-        isSelected={false}
+            detailUrl={`/jobs/playbook/${mockJob.id}`}
-      />
+            onSelect={() => {}}
+            isSelected={false}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('LaunchButton').length).toBe(0);
   });
 
   test('should hide type column when showTypeColumn is false', () => {
-    expect(wrapper.find('DataListCell[aria-label="type"]').length).toBe(0);
+    expect(wrapper.find('Td[dataLabel="Type"]').length).toBe(0);
   });
 
   test('should show type column when showTypeColumn is true', () => {
     wrapper = mountWithContexts(
-      <JobListItem
+      <table>
-        job={mockJob}
+        <tbody>
-        showTypeColumn
+          <JobListItem
-        isSelected
+            job={mockJob}
-        onSelect={() => {}}
+            showTypeColumn
-      />
+            isSelected
+            onSelect={() => {}}
+          />
+        </tbody>
+      </table>
     );
-    expect(wrapper.find('DataListCell[aria-label="type"]').length).toBe(1);
+    expect(wrapper.find('Td[dataLabel="Type"]').length).toBe(1);
   });
 });

awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx

@@ -47,12 +47,15 @@ export default function HeaderRow({ qsConfig, children }) {
     <Thead>
       <Tr>
         <Th />
-        {React.Children.map(children, child =>
+        {React.Children.map(
-          React.cloneElement(child, {
+          children,
-            onSort,
+          child =>
-            sortBy,
+            child &&
-            columnIndex: child.props.sortKey,
+            React.cloneElement(child, {
-          })
+              onSort,
+              sortBy,
+              columnIndex: child.props.sortKey,
+            })
         )}
       </Tr>
     </Thead>

awx/ui_next/src/components/PaginatedTable/HeaderRow.test.jsx

@@ -62,4 +62,20 @@ describe('<HeaderRow />', () => {
     const cell = wrapper.find('Th').at(2);
     expect(cell.prop('sort')).toEqual(null);
   });
+
+  test('should handle null children gracefully', async () => {
+    const nope = false;
+    const wrapper = mountWithContexts(
+      <table>
+        <HeaderRow qsConfig={qsConfig}>
+          <HeaderCell sortKey="one">One</HeaderCell>
+          {nope && <HeaderCell>Hidden</HeaderCell>}
+          <HeaderCell>Two</HeaderCell>
+        </HeaderRow>
+      </table>
+    );
+
+    const cells = wrapper.find('Th');
+    expect(cells).toHaveLength(3);
+  });
 });