convert project list to PaginatedTable

awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx

@@ -9,10 +9,14 @@ import useRequest, { useDeleteItems } from '../../../util/useRequest';
 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 useWsProjects from './useWsProjects';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 
@@ -116,7 +120,7 @@ function ProjectList({ i18n }) {
     <Fragment>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={contentError}
             hasContentLoading={hasContentLoading}
             items={projects}
@@ -160,12 +164,15 @@ function ProjectList({ i18n }) {
             ]}
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
-            toolbarSortColumns={[
+            headerRow={
-              {
+              <HeaderRow qsConfig={QS_CONFIG}>
-                name: i18n._(t`Name`),
+                <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
-                key: 'name',
+                <HeaderCell>{i18n._(t`Status`)}</HeaderCell>
-              },
+                <HeaderCell>{i18n._(t`Type`)}</HeaderCell>
-            ]}
+                <HeaderCell>{i18n._(t`Revision`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
+              </HeaderRow>
+            }
             renderToolbar={props => (
               <DataListToolbar
                 {...props}
@@ -191,14 +198,15 @@ function ProjectList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={o => (
+            renderRow={(project, index) => (
               <ProjectListItem
                 fetchProjects={fetchProjects}
-                key={o.id}
+                key={project.id}
-                project={o}
+                project={project}
-                detailUrl={`${match.url}/${o.id}`}
+                detailUrl={`${match.url}/${project.id}`}
-                isSelected={selected.some(row => row.id === o.id)}
+                isSelected={selected.some(row => row.id === project.id)}
-                onSelect={() => handleSelect(o)}
+                onSelect={() => handleSelect(project)}
+                rowIndex={index}
               />
             )}
             emptyStateControls={

awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx

@@ -2,37 +2,22 @@ import 'styled-components/macro';
 import React, { Fragment, useState, useCallback } from 'react';
 import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
-import {
+import { Button, Tooltip } 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 { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { formatDateString, timeOfDay } from '../../../util/dates';
 import { ProjectsAPI } from '../../../api';
 import ClipboardCopyButton from '../../../components/ClipboardCopyButton';
-import StatusIcon from '../../../components/StatusIcon';
+import StatusLabel from '../../../components/StatusLabel';
-import DataListCell from '../../../components/DataListCell';
 import { toTitleCase } from '../../../util/strings';
 import CopyButton from '../../../components/CopyButton';
 import ProjectSyncButton from '../shared/ProjectSyncButton';
 import { Project } from '../../../types';
 
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: repeat(3, 40px);
-`;
-
 const Label = styled.span`
   color: var(--pf-global--disabled-color--100);
 `;
@@ -42,8 +27,9 @@ function ProjectListItem({
   isSelected,
   onSelect,
   detailUrl,
-  i18n,
   fetchProjects,
+  rowIndex,
+  i18n,
 }) {
   const [isDisabled, setIsDisabled] = useState(false);
   ProjectListItem.propTypes = {
@@ -88,51 +74,41 @@ function ProjectListItem({
   }, []);
 
   const labelId = `check-action-${project.id}`;
+
   return (
-    <DataListItem
+    <Tr id={`${project.id}`}>
-      key={project.id}
+      <Td
-      aria-labelledby={labelId}
+        select={{
-      id={`${project.id}`}
+          rowIndex,
-    >
+          isSelected,
-      <DataListItemRow>
+          onSelect,
-        <DataListCheck
+        }}
-          id={`select-project-${project.id}`}
+        dataLabel={i18n._(t`Selected`)}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
       />
-        <DataListItemCells
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-          dataListCells={[
-            <DataListCell key="status" isFilled={false}>
-              {project.summary_fields.last_job && (
-                <Tooltip
-                  position="top"
-                  content={generateLastJobTooltip(
-                    project.summary_fields.last_job
-                  )}
-                  key={project.summary_fields.last_job.id}
-                >
-                  <Link
-                    to={`/jobs/project/${project.summary_fields.last_job.id}`}
-                  >
-                    <StatusIcon
-                      status={project.summary_fields.last_job.status}
-                    />
-                  </Link>
-                </Tooltip>
-              )}
-            </DataListCell>,
-            <DataListCell key="name">
         <Link id={labelId} to={`${detailUrl}`}>
           <b>{project.name}</b>
         </Link>
-            </DataListCell>,
+      </Td>
-            <DataListCell key="type">
+      <Td dataLabel={i18n._(t`Status`)}>
+        {project.summary_fields.last_job && (
+          <Tooltip
+            position="top"
+            content={generateLastJobTooltip(project.summary_fields.last_job)}
+            key={project.summary_fields.last_job.id}
+          >
+            <Link to={`/jobs/project/${project.summary_fields.last_job.id}`}>
+              <StatusLabel status={project.summary_fields.last_job.status} />
+            </Link>
+          </Tooltip>
+        )}
+      </Td>
+      <Td dataLabel={i18n._(t`Type`)}>
         {project.scm_type === ''
           ? i18n._(t`Manual`)
           : toTitleCase(project.scm_type)}
-            </DataListCell>,
+      </Td>
-            <DataListCell key="revision">
+      <Td dataLabel={i18n._(t`Revision`)}>
         {project.scm_revision.substring(0, 7)}
         {!project.scm_revision && (
           <Label aria-label={i18n._(t`copy to clipboard disabled`)}>
@@ -145,21 +121,18 @@ function ProjectListItem({
           copyTip={i18n._(t`Copy full revision to clipboard.`)}
           copiedSuccessTip={i18n._(t`Successfully copied to clipboard!`)}
         />
-            </DataListCell>,
+      </Td>
-          ]}
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
-        />
+        <ActionItem
-        <DataListAction
+          visible={project.summary_fields.user_capabilities.start}
-          aria-label={i18n._(t`actions`)}
+          tooltip={i18n._(t`Sync Project`)}
-          aria-labelledby={labelId}
-          id={labelId}
         >
-          {project.summary_fields.user_capabilities.start && (
-            <Tooltip content={i18n._(t`Sync Project`)} position="top">
           <ProjectSyncButton projectId={project.id} />
-            </Tooltip>
+        </ActionItem>
-          )}
+        <ActionItem
-          {project.summary_fields.user_capabilities.edit ? (
+          visible={project.summary_fields.user_capabilities.edit}
-            <Tooltip content={i18n._(t`Edit Project`)} position="top">
+          tooltip={i18n._(t`Edit Project`)}
+        >
           <Button
             isDisabled={isDisabled}
             aria-label={i18n._(t`Edit Project`)}
@@ -169,11 +142,8 @@ function ProjectListItem({
           >
             <PencilAltIcon />
           </Button>
-            </Tooltip>
+        </ActionItem>
-          ) : (
+        <ActionItem visible={project.summary_fields.user_capabilities.copy}>
-            ''
-          )}
-          {project.summary_fields.user_capabilities.copy && (
           <CopyButton
             copyItem={copyProject}
             isDisabled={isDisabled}
@@ -184,10 +154,9 @@ function ProjectListItem({
               errorMessage: i18n._(t`Failed to copy project.`),
             }}
           />
-          )}
+        </ActionItem>
-        </DataListAction>
+      </ActionsTd>
-      </DataListItemRow>
+    </Tr>
-    </DataListItem>
   );
 }
 export default withI18n()(ProjectListItem);

awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.test.jsx

@@ -10,6 +10,8 @@ jest.mock('../../../api/models/Projects');
 describe('<ProjectsListItem />', () => {
   test('launch button shown to users with start capabilities', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <ProjectsListItem
             isSelected={false}
             detailUrl="/project/1"
@@ -32,12 +34,16 @@ describe('<ProjectsListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ProjectSyncButton').exists()).toBeTruthy();
   });
 
   test('launch button hidden from users without start capabilities', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <ProjectsListItem
             isSelected={false}
             detailUrl="/project/1"
@@ -60,12 +66,16 @@ describe('<ProjectsListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ProjectSyncButton').exists()).toBeFalsy();
   });
 
   test('edit button shown to users with edit capabilities', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <ProjectsListItem
             isSelected={false}
             detailUrl="/project/1"
@@ -88,12 +98,16 @@ describe('<ProjectsListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });
 
   test('edit button hidden from users without edit capabilities', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <ProjectsListItem
             isSelected={false}
             detailUrl="/project/1"
@@ -116,6 +130,8 @@ describe('<ProjectsListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });
@@ -123,6 +139,8 @@ describe('<ProjectsListItem />', () => {
   test('should call api to copy project', async () => {
     ProjectsAPI.copy.mockResolvedValue();
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <ProjectsListItem
             isSelected={false}
             detailUrl="/project/1"
@@ -146,6 +164,8 @@ describe('<ProjectsListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
 
     await act(async () =>
@@ -159,6 +179,8 @@ describe('<ProjectsListItem />', () => {
     ProjectsAPI.copy.mockRejectedValue(new Error());
 
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <ProjectsListItem
             isSelected={false}
             detailUrl="/project/1"
@@ -182,6 +204,8 @@ describe('<ProjectsListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     await act(async () =>
       wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
@@ -192,6 +216,8 @@ describe('<ProjectsListItem />', () => {
   });
   test('should not render copy button', async () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <ProjectsListItem
             isSelected={false}
             detailUrl="/foo/bar"
@@ -215,11 +241,15 @@ describe('<ProjectsListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('CopyButton').length).toBe(0);
   });
   test('should render disabled copy to clipboard button', () => {
     const wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <ProjectsListItem
             isSelected={false}
             detailUrl="/project/1"
@@ -242,6 +272,8 @@ describe('<ProjectsListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(
       wrapper.find('span[aria-label="copy to clipboard disabled"]').text()