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,106 +74,89 @@ 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}
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-          aria-labelledby={labelId}
+        <Link id={labelId} to={`${detailUrl}`}>
+          <b>{project.name}</b>
+        </Link>
+      </Td>
+      <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)}
+      </Td>
+      <Td dataLabel={i18n._(t`Revision`)}>
+        {project.scm_revision.substring(0, 7)}
+        {!project.scm_revision && (
+          <Label aria-label={i18n._(t`copy to clipboard disabled`)}>
+            {i18n._(t`Sync for revision`)}
+          </Label>
+        )}
+        <ClipboardCopyButton
+          isDisabled={!project.scm_revision}
+          stringToCopy={project.scm_revision}
+          copyTip={i18n._(t`Copy full revision to clipboard.`)}
+          copiedSuccessTip={i18n._(t`Successfully copied to clipboard!`)}
         />
-        <DataListItemCells
+      </Td>
-          dataListCells={[
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
-            <DataListCell key="status" isFilled={false}>
+        <ActionItem
-              {project.summary_fields.last_job && (
+          visible={project.summary_fields.user_capabilities.start}
-                <Tooltip
+          tooltip={i18n._(t`Sync Project`)}
-                  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>,
-            <DataListCell key="type">
-              {project.scm_type === ''
-                ? i18n._(t`Manual`)
-                : toTitleCase(project.scm_type)}
-            </DataListCell>,
-            <DataListCell key="revision">
-              {project.scm_revision.substring(0, 7)}
-              {!project.scm_revision && (
-                <Label aria-label={i18n._(t`copy to clipboard disabled`)}>
-                  {i18n._(t`Sync for revision`)}
-                </Label>
-              )}
-              <ClipboardCopyButton
-                isDisabled={!project.scm_revision}
-                stringToCopy={project.scm_revision}
-                copyTip={i18n._(t`Copy full revision to clipboard.`)}
-                copiedSuccessTip={i18n._(t`Successfully copied to clipboard!`)}
-              />
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
         >
-          {project.summary_fields.user_capabilities.start && (
+          <ProjectSyncButton projectId={project.id} />
-            <Tooltip content={i18n._(t`Sync Project`)} position="top">
+        </ActionItem>
-              <ProjectSyncButton projectId={project.id} />
+        <ActionItem
-            </Tooltip>
+          visible={project.summary_fields.user_capabilities.edit}
-          )}
+          tooltip={i18n._(t`Edit Project`)}
-          {project.summary_fields.user_capabilities.edit ? (
+        >
-            <Tooltip content={i18n._(t`Edit Project`)} position="top">
+          <Button
-              <Button
+            isDisabled={isDisabled}
-                isDisabled={isDisabled}
+            aria-label={i18n._(t`Edit Project`)}
-                aria-label={i18n._(t`Edit Project`)}
+            variant="plain"
-                variant="plain"
+            component={Link}
-                component={Link}
+            to={`/projects/${project.id}/edit`}
-                to={`/projects/${project.id}/edit`}
+          >
-              >
+            <PencilAltIcon />
-                <PencilAltIcon />
+          </Button>
-              </Button>
+        </ActionItem>
-            </Tooltip>
+        <ActionItem visible={project.summary_fields.user_capabilities.copy}>
-          ) : (
+          <CopyButton
-            ''
+            copyItem={copyProject}
-          )}
+            isDisabled={isDisabled}
-          {project.summary_fields.user_capabilities.copy && (
+            onCopyStart={handleCopyStart}
-            <CopyButton
+            onCopyFinish={handleCopyFinish}
-              copyItem={copyProject}
+            helperText={{
-              isDisabled={isDisabled}
+              tooltip: i18n._(t`Copy Project`),
-              onCopyStart={handleCopyStart}
+              errorMessage: i18n._(t`Failed to copy project.`),
-              onCopyFinish={handleCopyFinish}
+            }}
-              helperText={{
+          />
-                tooltip: i18n._(t`Copy Project`),
+        </ActionItem>
-                errorMessage: i18n._(t`Failed to copy project.`),
+      </ActionsTd>
-              }}
+    </Tr>
-            />
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 export default withI18n()(ProjectListItem);

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

@@ -10,112 +10,128 @@ jest.mock('../../../api/models/Projects');
 describe('<ProjectsListItem />', () => {
   test('launch button shown to users with start capabilities', () => {
     const wrapper = mountWithContexts(
-      <ProjectsListItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/project/1"
+          <ProjectsListItem
-        onSelect={() => {}}
+            isSelected={false}
-        project={{
+            detailUrl="/project/1"
-          id: 1,
+            onSelect={() => {}}
-          name: 'Project 1',
+            project={{
-          url: '/api/v2/projects/1',
+              id: 1,
-          type: 'project',
+              name: 'Project 1',
-          scm_type: 'git',
+              url: '/api/v2/projects/1',
-          scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
+              type: 'project',
-          summary_fields: {
+              scm_type: 'git',
-            last_job: {
+              scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
-              id: 9000,
+              summary_fields: {
-              status: 'successful',
+                last_job: {
-            },
+                  id: 9000,
-            user_capabilities: {
+                  status: 'successful',
-              start: true,
+                },
-            },
+                user_capabilities: {
-          },
+                  start: true,
-        }}
+                },
-      />
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ProjectSyncButton').exists()).toBeTruthy();
   });
 
   test('launch button hidden from users without start capabilities', () => {
     const wrapper = mountWithContexts(
-      <ProjectsListItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/project/1"
+          <ProjectsListItem
-        onSelect={() => {}}
+            isSelected={false}
-        project={{
+            detailUrl="/project/1"
-          id: 1,
+            onSelect={() => {}}
-          name: 'Project 1',
+            project={{
-          url: '/api/v2/projects/1',
+              id: 1,
-          type: 'project',
+              name: 'Project 1',
-          scm_type: 'git',
+              url: '/api/v2/projects/1',
-          scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
+              type: 'project',
-          summary_fields: {
+              scm_type: 'git',
-            last_job: {
+              scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
-              id: 9000,
+              summary_fields: {
-              status: 'successful',
+                last_job: {
-            },
+                  id: 9000,
-            user_capabilities: {
+                  status: 'successful',
-              start: false,
+                },
-            },
+                user_capabilities: {
-          },
+                  start: false,
-        }}
+                },
-      />
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('ProjectSyncButton').exists()).toBeFalsy();
   });
 
   test('edit button shown to users with edit capabilities', () => {
     const wrapper = mountWithContexts(
-      <ProjectsListItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/project/1"
+          <ProjectsListItem
-        onSelect={() => {}}
+            isSelected={false}
-        project={{
+            detailUrl="/project/1"
-          id: 1,
+            onSelect={() => {}}
-          name: 'Project 1',
+            project={{
-          url: '/api/v2/projects/1',
+              id: 1,
-          type: 'project',
+              name: 'Project 1',
-          scm_type: 'git',
+              url: '/api/v2/projects/1',
-          scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
+              type: 'project',
-          summary_fields: {
+              scm_type: 'git',
-            last_job: {
+              scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
-              id: 9000,
+              summary_fields: {
-              status: 'successful',
+                last_job: {
-            },
+                  id: 9000,
-            user_capabilities: {
+                  status: 'successful',
-              edit: true,
+                },
-            },
+                user_capabilities: {
-          },
+                  edit: true,
-        }}
+                },
-      />
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });
 
   test('edit button hidden from users without edit capabilities', () => {
     const wrapper = mountWithContexts(
-      <ProjectsListItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/project/1"
+          <ProjectsListItem
-        onSelect={() => {}}
+            isSelected={false}
-        project={{
+            detailUrl="/project/1"
-          id: 1,
+            onSelect={() => {}}
-          name: 'Project 1',
+            project={{
-          url: '/api/v2/projects/1',
+              id: 1,
-          type: 'project',
+              name: 'Project 1',
-          scm_type: 'git',
+              url: '/api/v2/projects/1',
-          scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
+              type: 'project',
-          summary_fields: {
+              scm_type: 'git',
-            last_job: {
+              scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
-              id: 9000,
+              summary_fields: {
-              status: 'successful',
+                last_job: {
-            },
+                  id: 9000,
-            user_capabilities: {
+                  status: 'successful',
-              edit: false,
+                },
-            },
+                user_capabilities: {
-          },
+                  edit: false,
-        }}
+                },
-      />
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });
@@ -123,29 +139,33 @@ describe('<ProjectsListItem />', () => {
   test('should call api to copy project', async () => {
     ProjectsAPI.copy.mockResolvedValue();
     const wrapper = mountWithContexts(
-      <ProjectsListItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/project/1"
+          <ProjectsListItem
-        onSelect={() => {}}
+            isSelected={false}
-        project={{
+            detailUrl="/project/1"
-          id: 1,
+            onSelect={() => {}}
-          name: 'Project 1',
+            project={{
-          url: '/api/v2/projects/1',
+              id: 1,
-          type: 'project',
+              name: 'Project 1',
-          scm_type: 'git',
+              url: '/api/v2/projects/1',
-          scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
+              type: 'project',
-          summary_fields: {
+              scm_type: 'git',
-            last_job: {
+              scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
-              id: 9000,
+              summary_fields: {
-              status: 'successful',
+                last_job: {
-            },
+                  id: 9000,
-            user_capabilities: {
+                  status: 'successful',
-              edit: false,
+                },
-              copy: true,
+                user_capabilities: {
-            },
+                  edit: false,
-          },
+                  copy: true,
-        }}
+                },
-      />
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
 
     await act(async () =>
@@ -159,29 +179,33 @@ describe('<ProjectsListItem />', () => {
     ProjectsAPI.copy.mockRejectedValue(new Error());
 
     const wrapper = mountWithContexts(
-      <ProjectsListItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/project/1"
+          <ProjectsListItem
-        onSelect={() => {}}
+            isSelected={false}
-        project={{
+            detailUrl="/project/1"
-          id: 1,
+            onSelect={() => {}}
-          name: 'Project 1',
+            project={{
-          url: '/api/v2/projects/1',
+              id: 1,
-          type: 'project',
+              name: 'Project 1',
-          scm_type: 'git',
+              url: '/api/v2/projects/1',
-          scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
+              type: 'project',
-          summary_fields: {
+              scm_type: 'git',
-            last_job: {
+              scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
-              id: 9000,
+              summary_fields: {
-              status: 'successful',
+                last_job: {
-            },
+                  id: 9000,
-            user_capabilities: {
+                  status: 'successful',
-              edit: false,
+                },
-              copy: true,
+                user_capabilities: {
-            },
+                  edit: false,
-          },
+                  copy: true,
-        }}
+                },
-      />
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     await act(async () =>
       wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
@@ -192,56 +216,64 @@ describe('<ProjectsListItem />', () => {
   });
   test('should not render copy button', async () => {
     const wrapper = mountWithContexts(
-      <ProjectsListItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/foo/bar"
+          <ProjectsListItem
-        onSelect={() => {}}
+            isSelected={false}
-        project={{
+            detailUrl="/foo/bar"
-          id: 1,
+            onSelect={() => {}}
-          name: 'Project 1',
+            project={{
-          url: '/api/v2/projects/1',
+              id: 1,
-          type: 'project',
+              name: 'Project 1',
-          scm_type: 'git',
+              url: '/api/v2/projects/1',
-          scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
+              type: 'project',
-          summary_fields: {
+              scm_type: 'git',
-            last_job: {
+              scm_revision: '7788f7erga0jijodfgsjisiodf98sdga9hg9a98gaf',
-              id: 9000,
+              summary_fields: {
-              status: 'successful',
+                last_job: {
-            },
+                  id: 9000,
-            user_capabilities: {
+                  status: 'successful',
-              edit: false,
+                },
-              copy: false,
+                user_capabilities: {
-            },
+                  edit: false,
-          },
+                  copy: false,
-        }}
+                },
-      />
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('CopyButton').length).toBe(0);
   });
   test('should render disabled copy to clipboard button', () => {
     const wrapper = mountWithContexts(
-      <ProjectsListItem
+      <table>
-        isSelected={false}
+        <tbody>
-        detailUrl="/project/1"
+          <ProjectsListItem
-        onSelect={() => {}}
+            isSelected={false}
-        project={{
+            detailUrl="/project/1"
-          id: 1,
+            onSelect={() => {}}
-          name: 'Project 1',
+            project={{
-          url: '/api/v2/projects/1',
+              id: 1,
-          type: 'project',
+              name: 'Project 1',
-          scm_type: 'git',
+              url: '/api/v2/projects/1',
-          scm_revision: '',
+              type: 'project',
-          summary_fields: {
+              scm_type: 'git',
-            last_job: {
+              scm_revision: '',
-              id: 9000,
+              summary_fields: {
-              status: 'successful',
+                last_job: {
-            },
+                  id: 9000,
-            user_capabilities: {
+                  status: 'successful',
-              edit: true,
+                },
-            },
+                user_capabilities: {
-          },
+                  edit: true,
-        }}
+                },
-      />
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(
       wrapper.find('span[aria-label="copy to clipboard disabled"]').text()