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, {
+import PaginatedTable, {
-  ToolbarDeleteButton,
+  HeaderRow,
-} from '../../../components/PaginatedDataList';
+  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 {
+import { Label } from '@patternfly/react-core';
-  DataListCheck,
+import { Tr, Td } from '@patternfly/react-table';
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Label,
-} from '@patternfly/react-core';
 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,26 +50,21 @@ function WorkflowApprovalListItem({
   };
 
   return (
-    <DataListItem
+    <Tr id={`workflow-approval-row-${workflowApproval.id}`}>
-      key={workflowApproval.id}
+      <Td
-      aria-labelledby={labelId}
+        select={{
-      id={`${workflowApproval.id}`}
+          rowIndex,
-    >
+          isSelected,
-      <DataListItemRow>
+          onSelect,
-        <DataListCheck
+        }}
-          id={`select-workflowApproval-${workflowApproval.id}`}
+        dataLabel={i18n._(t`Selected`)}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
       />
-        <DataListItemCells
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-          dataListCells={[
-            <DataListCell key="title">
         <Link to={`${detailUrl}`}>
           <b>{workflowApproval.name}</b>
         </Link>
-            </DataListCell>,
+      </Td>
-            <DataListCell key="job">
+      <Td>
         <>
           <JobLabel>{i18n._(t`Job`)}</JobLabel>
           {workflowJob && workflowJob?.id ? (
@@ -92,14 +75,14 @@ function WorkflowApprovalListItem({
             i18n._(t`Deleted`)
           )}
         </>
-            </DataListCell>,
+      </Td>
-            <StatusCell key="status">
+      <Td dataLabel={i18n._(t`Started`)}>
+        {formatDateString(workflowApproval.started)}
+      </Td>
+      <Td dataLabel={i18n._(t`Status`)}>
         <div>{getStatus()}</div>
-            </StatusCell>,
+      </Td>
-          ]}
+    </Tr>
-        />
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 

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

@@ -12,19 +12,26 @@ describe('<WorkflowApprovalListItem />', () => {
   afterEach(() => {
     wrapper.unmount();
   });
+
   test('should display never expires status', () => {
     wrapper = mountWithContexts(
+      <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(
+      <table>
+        <tbody>
           <WorkflowApprovalListItem
             isSelected={false}
             detailUrl={`/workflow_approvals/${workflowApproval.id}`}
@@ -35,11 +42,15 @@ describe('<WorkflowApprovalListItem />', () => {
               timed_out: true,
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Label[children="Timed out"]').length).toBe(1);
   });
   test('should display canceled status', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <WorkflowApprovalListItem
             isSelected={false}
             detailUrl={`/workflow_approvals/${workflowApproval.id}`}
@@ -50,11 +61,15 @@ describe('<WorkflowApprovalListItem />', () => {
               status: 'canceled',
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Label[children="Canceled"]').length).toBe(1);
   });
   test('should display approved status', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <WorkflowApprovalListItem
             isSelected={false}
             detailUrl={`/workflow_approvals/${workflowApproval.id}`}
@@ -73,11 +88,15 @@ describe('<WorkflowApprovalListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Label[children="Approved"]').length).toBe(1);
   });
   test('should display denied status', () => {
     wrapper = mountWithContexts(
+      <table>
+        <tbody>
           <WorkflowApprovalListItem
             isSelected={false}
             detailUrl={`/workflow_approvals/${workflowApproval.id}`}
@@ -97,6 +116,8 @@ describe('<WorkflowApprovalListItem />', () => {
               },
             }}
           />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Label[children="Denied"]').length).toBe(1);
   });