convert application list to tables

awx/ui_next/src/screens/Application/ApplicationsList/ApplicationList.test.jsx

@@ -48,6 +48,7 @@ describe('<ApplicationsList/>', () => {
     });
     await waitForElement(wrapper, 'ApplicationsList', el => el.length > 0);
   });
+
   test('should have data fetched and render 2 rows', async () => {
     ApplicationsAPI.read.mockResolvedValue(applications);
     ApplicationsAPI.readOptions.mockResolvedValue(options);
@@ -69,14 +70,20 @@ describe('<ApplicationsList/>', () => {
     waitForElement(wrapper, 'ApplicationsList', el => el.length > 0);
 
     wrapper
-      .find('input#select-application-1')
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
       .simulate('change', applications.data.results[0]);
 
     wrapper.update();
 
-    expect(wrapper.find('input#select-application-1').prop('checked')).toBe(
+    expect(
-      true
+      wrapper
-    );
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
+    ).toBe(true);
     await act(async () =>
       wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
     );
@@ -131,13 +138,21 @@ describe('<ApplicationsList/>', () => {
     });
     waitForElement(wrapper, 'ApplicationsList', el => el.length > 0);
 
-    wrapper.find('input#select-application-1').simulate('change', 'a');
+    wrapper
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
+      .simulate('change', 'a');
 
     wrapper.update();
 
-    expect(wrapper.find('input#select-application-1').prop('checked')).toBe(
+    expect(
-      true
+      wrapper
-    );
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
+    ).toBe(true);
     await act(async () =>
       wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
     );
@@ -163,6 +178,7 @@ describe('<ApplicationsList/>', () => {
     waitForElement(wrapper, 'ApplicationsList', el => el.length > 0);
     expect(wrapper.find('ToolbarAddButton').length).toBe(0);
   });
+
   test('should not render edit button for first list item', async () => {
     applications.data.results[0].summary_fields.user_capabilities.edit = false;
     ApplicationsAPI.read.mockResolvedValue(applications);

awx/ui_next/src/screens/Application/ApplicationsList/ApplicationListItem.jsx

@@ -1,104 +1,65 @@
 import React from 'react';
 import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
-import {
+import { Button } from '@patternfly/react-core';
-  Button,
+import { Tr, Td } from '@patternfly/react-table';
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Tooltip,
-} from '@patternfly/react-core';
-
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
 import { PencilAltIcon } from '@patternfly/react-icons';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { formatDateString } from '../../../util/dates';
 import { Application } from '../../../types';
-import DataListCell from '../../../components/DataListCell';
-
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: 40px;
-`;
-
-const Label = styled.b`
-  margin-right: 20px;
-`;
 
 function ApplicationListItem({
   application,
   isSelected,
   onSelect,
   detailUrl,
+  rowIndex,
   i18n,
 }) {
   const labelId = `check-action-${application.id}`;
   return (
-    <DataListItem
+    <Tr id={`application-row-${application.id}`}>
-      key={application.id}
+      <Td
-      aria-labelledby={labelId}
+        select={{
-      id={`${application.id}`}
+          rowIndex,
-    >
+          isSelected,
-      <DataListItemRow>
+          onSelect,
-        <DataListCheck
+        }}
-          id={`select-application-${application.id}`}
+        dataLabel={i18n._(t`Selected`)}
-          checked={isSelected}
+      />
-          onChange={onSelect}
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
-          aria-labelledby={labelId}
+        <Link to={`${detailUrl}`}>
-        />
+          <b>{application.name}</b>
-        <DataListItemCells
+        </Link>
-          dataListCells={[
+      </Td>
-            <DataListCell
+      <Td dataLabel={i18n._(t`Organization`)}>
-              key="divider"
+        <Link
-              aria-label={i18n._(t`application name`)}
+          to={`/organizations/${application.summary_fields.organization.id}`}
-            >
-              <Link to={`${detailUrl}`}>
-                <b>{application.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell
-              key="organization"
-              aria-label={i18n._(t`organization name`)}
-            >
-              <Link
-                to={`/organizations/${application.summary_fields.organization.id}`}
-              >
-                <b>{application.summary_fields.organization.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key="modified" aria-label={i18n._(t`last modified`)}>
-              <Label>{i18n._(t`Last Modified`)}</Label>
-              <span>{formatDateString(application.modified)}</span>
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
         >
-          {application.summary_fields.user_capabilities.edit ? (
+          <b>{application.summary_fields.organization.name}</b>
-            <Tooltip content={i18n._(t`Edit application`)} position="top">
+        </Link>
-              <Button
+      </Td>
-                aria-label={i18n._(t`Edit application`)}
+      <Td dataLabel={i18n._(t`Last Modified`)}>
-                variant="plain"
+        {formatDateString(application.modified)}
-                component={Link}
+      </Td>
-                to={`/applications/${application.id}/edit`}
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
-              >
+        <ActionItem
-                <PencilAltIcon />
+          visible={application.summary_fields.user_capabilities.edit}
-              </Button>
+          tooltip={i18n._(t`Edit application`)}
-            </Tooltip>
+        >
-          ) : (
+          <Button
-            ''
+            aria-label={i18n._(t`Edit application`)}
-          )}
+            variant="plain"
-        </DataListAction>
+            component={Link}
-      </DataListItemRow>
+            to={`/applications/${application.id}/edit`}
-    </DataListItem>
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 

awx/ui_next/src/screens/Application/ApplicationsList/ApplicationListItem.test.jsx

@@ -18,12 +18,16 @@ describe('<ApplicationListItem/>', () => {
   test('should mount successfully', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <ApplicationListItem
+        <table>
-          application={application}
+          <tbody>
-          detailUrl="/organizations/2/details"
+            <ApplicationListItem
-          isSelected={false}
+              application={application}
-          onSelect={() => {}}
+              detailUrl="/organizations/2/details"
-        />
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('ApplicationListItem').length).toBe(1);
@@ -31,38 +35,30 @@ describe('<ApplicationListItem/>', () => {
   test('should render the proper data', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <ApplicationListItem
+        <table>
-          application={application}
+          <tbody>
-          detailUrl="/organizations/2/details"
+            <ApplicationListItem
-          isSelected={false}
+              application={application}
-          onSelect={() => {}}
+              detailUrl="/organizations/2/details"
-        />
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(
-      wrapper.find('DataListCell[aria-label="application name"]').text()
+      wrapper
+        .find('Td')
+        .at(1)
+        .text()
     ).toBe('Foo');
     expect(
-      wrapper.find('DataListCell[aria-label="organization name"]').text()
+      wrapper
+        .find('Td')
+        .at(2)
+        .text()
     ).toBe('Organization');
-    expect(wrapper.find('input#select-application-1').prop('checked')).toBe(
-      false
-    );
     expect(wrapper.find('PencilAltIcon').length).toBe(1);
   });
-  test('should be checked', async () => {
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <ApplicationListItem
-          application={application}
-          detailUrl="/organizations/2/details"
-          isSelected
-          onSelect={() => {}}
-        />
-      );
-    });
-    expect(wrapper.find('input#select-application-1').prop('checked')).toBe(
-      true
-    );
-  });
 });

awx/ui_next/src/screens/Application/ApplicationsList/ApplicationsList.jsx

@@ -11,7 +11,11 @@ import AlertModal from '../../../components/AlertModal';
 
 import DatalistToolbar from '../../../components/DataListToolbar';
 import { ApplicationsAPI } from '../../../api';
-import PaginatedDataList, {
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import {
   ToolbarDeleteButton,
   ToolbarAddButton,
 } from '../../../components/PaginatedDataList';
@@ -104,7 +108,7 @@ function ApplicationsList({ i18n }) {
     <>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={error}
             hasContentLoading={isLoading || deleteLoading}
             items={applications}
@@ -123,24 +127,6 @@ function ApplicationsList({ i18n }) {
                 key: 'description__icontains',
               },
             ]}
-            toolbarSortColumns={[
-              {
-                name: i18n._(t`Name`),
-                key: 'name',
-              },
-              {
-                name: i18n._(t`Created`),
-                key: 'created',
-              },
-              {
-                name: i18n._(t`Organization`),
-                key: 'organization',
-              },
-              {
-                name: i18n._(t`Description`),
-                key: 'description',
-              },
-            ]}
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
             renderToolbar={props => (
@@ -170,7 +156,17 @@ function ApplicationsList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={application => (
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+                <HeaderCell sortKey="organization">
+                  {i18n._(t`Organization`)}
+                </HeaderCell>
+                <HeaderCell>{i18n._(t`Last Modified`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
+              </HeaderRow>
+            }
+            renderRow={(application, index) => (
               <ApplicationListItem
                 key={application.id}
                 value={application.name}
@@ -178,6 +174,7 @@ function ApplicationsList({ i18n }) {
                 detailUrl={`${match.url}/${application.id}/details`}
                 onSelect={() => handleSelect(application)}
                 isSelected={selected.some(row => row.id === application.id)}
+                rowIndex={index}
               />
             )}
             emptyStateControls={