Convert WorkflowApprovalList to table

awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.jsx

@@ -55,7 +55,7 @@ function ScheduleListItem({ i18n, isSelected, onSelect, schedule, rowIndex }) {
           onSelect,
           disable: false,
         }}
-        dataLabel={i18n._(`Selected`)}
+        dataLabel={i18n._(t`Selected`)}
       />
       <Td id={labelId} dataLabel={i18n._(t`Name`)}>
         <Link to={`${scheduleBaseUrl}/details`}>

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalList.jsx

@@ -4,9 +4,11 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Card, PageSection } from '@patternfly/react-core';
 import { WorkflowApprovalsAPI } from '../../../api';
-import PaginatedDataList, {
-  ToolbarDeleteButton,
-} from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import { ToolbarDeleteButton } from '../../../components/PaginatedDataList';
 import AlertModal from '../../../components/AlertModal';
 import ErrorDetail from '../../../components/ErrorDetail';
 import DataListToolbar from '../../../components/DataListToolbar';
@@ -155,7 +157,7 @@ function WorkflowApprovalsList({ i18n }) {
     <>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={contentError}
             hasContentLoading={
               isWorkflowApprovalsLoading ||
@@ -181,16 +183,6 @@ function WorkflowApprovalsList({ i18n }) {
             ]}
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
-            toolbarSortColumns={[
-              {
-                name: i18n._(t`Name`),
-                key: 'name',
-              },
-              {
-                name: i18n._(t`Started`),
-                key: 'started',
-              },
-            ]}
             renderToolbar={props => (
               <DataListToolbar
                 {...props}
@@ -227,7 +219,15 @@ function WorkflowApprovalsList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={workflowApproval => (
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Job`)}</HeaderCell>
+                <HeaderCell sortKey="started">{i18n._(t`Started`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Status`)}</HeaderCell>
+              </HeaderRow>
+            }
+            renderRow={(workflowApproval, index) => (
               <WorkflowApprovalListItem
                 key={workflowApproval.id}
                 workflowApproval={workflowApproval}
@@ -237,6 +237,7 @@ function WorkflowApprovalsList({ i18n }) {
                 )}
                 onSelect={() => handleSelect(workflowApproval)}
                 onSuccessfulAction={fetchWorkflowApprovals}
+                rowIndex={index}
               />
             )}
           />

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListItem.jsx

@@ -2,27 +2,14 @@ import React from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { string, bool, func } from 'prop-types';
-import {
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Label,
-} from '@patternfly/react-core';
+import { Label } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import DataListCell from '../../../components/DataListCell';
 import { WorkflowApproval } from '../../../types';
 import { formatDateString } from '../../../util/dates';
 import WorkflowApprovalStatus from '../shared/WorkflowApprovalStatus';
 
-const StatusCell = styled(DataListCell)`
-  @media screen and (min-width: 768px) {
-    display: flex;
-    justify-content: flex-end;
-  }
-`;
-
 const JobLabel = styled.b`
   margin-right: 24px;
 `;
@@ -32,6 +19,7 @@ function WorkflowApprovalListItem({
   isSelected,
   onSelect,
   detailUrl,
+  rowIndex,
   i18n,
 }) {
   const labelId = `check-action-${workflowApproval.id}`;
@@ -62,44 +50,39 @@ function WorkflowApprovalListItem({
   };
 
   return (
-    <DataListItem
-      key={workflowApproval.id}
-      aria-labelledby={labelId}
-      id={`${workflowApproval.id}`}
-    >
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-workflowApproval-${workflowApproval.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="title">
-              <Link to={`${detailUrl}`}>
-                <b>{workflowApproval.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key="job">
-              <>
-                <JobLabel>{i18n._(t`Job`)}</JobLabel>
-                {workflowJob && workflowJob?.id ? (
-                  <Link to={`/jobs/workflow/${workflowJob?.id}`}>
-                    {`${workflowJob?.id} - ${workflowJob?.name}`}
-                  </Link>
-                ) : (
-                  i18n._(t`Deleted`)
-                )}
-              </>
-            </DataListCell>,
-            <StatusCell key="status">
-              <div>{getStatus()}</div>
-            </StatusCell>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
+    <Tr id={`workflow-approval-row-${workflowApproval.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+        dataLabel={i18n._(t`Selected`)}
+      />
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
+        <Link to={`${detailUrl}`}>
+          <b>{workflowApproval.name}</b>
+        </Link>
+      </Td>
+      <Td>
+        <>
+          <JobLabel>{i18n._(t`Job`)}</JobLabel>
+          {workflowJob && workflowJob?.id ? (
+            <Link to={`/jobs/workflow/${workflowJob?.id}`}>
+              {`${workflowJob?.id} - ${workflowJob?.name}`}
+            </Link>
+          ) : (
+            i18n._(t`Deleted`)
+          )}
+        </>
+      </Td>
+      <Td dataLabel={i18n._(t`Started`)}>
+        {formatDateString(workflowApproval.started)}
+      </Td>
+      <Td dataLabel={i18n._(t`Status`)}>
+        <div>{getStatus()}</div>
+      </Td>
+    </Tr>
   );
 }
 

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalListItem.test.jsx

@@ -12,91 +12,112 @@ describe('<WorkflowApprovalListItem />', () => {
   afterEach(() => {
     wrapper.unmount();
   });
+
   test('should display never expires status', () => {
     wrapper = mountWithContexts(
-      <WorkflowApprovalListItem
-        isSelected={false}
-        detailUrl={`/workflow_approvals/${workflowApproval.id}`}
-        onSelect={() => {}}
-        workflowApproval={workflowApproval}
-      />
+      <table>
+        <tbody>
+          <WorkflowApprovalListItem
+            isSelected={false}
+            detailUrl={`/workflow_approvals/${workflowApproval.id}`}
+            onSelect={() => {}}
+            workflowApproval={workflowApproval}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Label[children="Never expires"]').length).toBe(1);
   });
   test('should display timed out status', () => {
     wrapper = mountWithContexts(
-      <WorkflowApprovalListItem
-        isSelected={false}
-        detailUrl={`/workflow_approvals/${workflowApproval.id}`}
-        onSelect={() => {}}
-        workflowApproval={{
-          ...workflowApproval,
-          status: 'failed',
-          timed_out: true,
-        }}
-      />
+      <table>
+        <tbody>
+          <WorkflowApprovalListItem
+            isSelected={false}
+            detailUrl={`/workflow_approvals/${workflowApproval.id}`}
+            onSelect={() => {}}
+            workflowApproval={{
+              ...workflowApproval,
+              status: 'failed',
+              timed_out: true,
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Label[children="Timed out"]').length).toBe(1);
   });
   test('should display canceled status', () => {
     wrapper = mountWithContexts(
-      <WorkflowApprovalListItem
-        isSelected={false}
-        detailUrl={`/workflow_approvals/${workflowApproval.id}`}
-        onSelect={() => {}}
-        workflowApproval={{
-          ...workflowApproval,
-          canceled_on: '2020-10-09T19:59:26.974046Z',
-          status: 'canceled',
-        }}
-      />
+      <table>
+        <tbody>
+          <WorkflowApprovalListItem
+            isSelected={false}
+            detailUrl={`/workflow_approvals/${workflowApproval.id}`}
+            onSelect={() => {}}
+            workflowApproval={{
+              ...workflowApproval,
+              canceled_on: '2020-10-09T19:59:26.974046Z',
+              status: 'canceled',
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Label[children="Canceled"]').length).toBe(1);
   });
   test('should display approved status', () => {
     wrapper = mountWithContexts(
-      <WorkflowApprovalListItem
-        isSelected={false}
-        detailUrl={`/workflow_approvals/${workflowApproval.id}`}
-        onSelect={() => {}}
-        workflowApproval={{
-          ...workflowApproval,
-          status: 'successful',
-          summary_fields: {
-            ...workflowApproval.summary_fields,
-            approved_or_denied_by: {
-              id: 1,
-              username: 'admin',
-              first_name: '',
-              last_name: '',
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <WorkflowApprovalListItem
+            isSelected={false}
+            detailUrl={`/workflow_approvals/${workflowApproval.id}`}
+            onSelect={() => {}}
+            workflowApproval={{
+              ...workflowApproval,
+              status: 'successful',
+              summary_fields: {
+                ...workflowApproval.summary_fields,
+                approved_or_denied_by: {
+                  id: 1,
+                  username: 'admin',
+                  first_name: '',
+                  last_name: '',
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Label[children="Approved"]').length).toBe(1);
   });
   test('should display denied status', () => {
     wrapper = mountWithContexts(
-      <WorkflowApprovalListItem
-        isSelected={false}
-        detailUrl={`/workflow_approvals/${workflowApproval.id}`}
-        onSelect={() => {}}
-        workflowApproval={{
-          ...workflowApproval,
-          failed: true,
-          status: 'failed',
-          summary_fields: {
-            ...workflowApproval.summary_fields,
-            approved_or_denied_by: {
-              id: 1,
-              username: 'admin',
-              first_name: '',
-              last_name: '',
-            },
-          },
-        }}
-      />
+      <table>
+        <tbody>
+          <WorkflowApprovalListItem
+            isSelected={false}
+            detailUrl={`/workflow_approvals/${workflowApproval.id}`}
+            onSelect={() => {}}
+            workflowApproval={{
+              ...workflowApproval,
+              failed: true,
+              status: 'failed',
+              summary_fields: {
+                ...workflowApproval.summary_fields,
+                approved_or_denied_by: {
+                  id: 1,
+                  username: 'admin',
+                  first_name: '',
+                  last_name: '',
+                },
+              },
+            }}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Label[children="Denied"]').length).toBe(1);
   });