Converts Teams Roles tab to tables

awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.jsx

@@ -1,63 +1,38 @@
 import React from 'react';
 
 import { t } from '@lingui/macro';
-import {
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Chip,
-} from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
-import { DetailList, Detail } from '../../../components/DetailList';
-import DataListCell from '../../../components/DataListCell';
+import { Chip } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 
-function TeamRoleListItem({ role, detailUrl, onSelect }) {
-  const labelId = `teamRole-${role.id}`;
+import { Link } from 'react-router-dom';
+import { Detail } from '../../../components/DetailList';
+
+function TeamRoleListItem({ role, detailUrl, onDisassociate }) {
   return (
-    <DataListItem key={role.id} aria-labelledby={labelId} id={`${role.id}`}>
-      <DataListItemRow>
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name" aria-label={t`resource name`}>
-              <Link to={`${detailUrl}`} id={labelId}>
-                <b>{role.summary_fields.resource_name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key="type" aria-label={t`resource type`}>
-              {role.summary_fields && (
-                <DetailList stacked>
-                  <Detail
-                    label={t`Type`}
-                    value={role.summary_fields.resource_type_display_name}
-                  />
-                </DetailList>
-              )}
-            </DataListCell>,
-            <DataListCell key="role" aria-label={t`resource role`}>
-              {role.name && (
-                <DetailList stacked>
-                  <Detail
-                    label={t`Role`}
-                    value={
-                      <Chip
-                        key={role.name}
-                        aria-label={role.name}
-                        onClick={() => onSelect(role)}
-                        isReadOnly={
-                          !role.summary_fields.user_capabilities.unattach
-                        }
-                      >
-                        {role.name}
-                      </Chip>
-                    }
-                  />
-                </DetailList>
-              )}
-            </DataListCell>,
-          ]}
+    <Tr id={`role-item-row-${role.id}`}>
+      <Td dataLabel={t`Resource Name`}>
+        <Link to={{ pathname: `${detailUrl}` }}>
+          <b>{role.summary_fields.resource_name}</b>
+        </Link>
+      </Td>
+      <Td dataLabel={t`Type`}>
+        {role.summary_fields.resource_type_display_name}
+      </Td>
+      <Td dataLabel={t`Role`}>
+        <Detail
+          value={
+            <Chip
+              key={role.name}
+              aria-label={role.name}
+              onClick={() => onDisassociate(role)}
+              isReadOnly={!role.summary_fields.user_capabilities.unattach}
+            >
+              {role.name}
+            </Chip>
+          }
         />
-      </DataListItemRow>
-    </DataListItem>
+      </Td>
+    </Tr>
   );
 }
 export default TeamRoleListItem;

awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx

@@ -36,17 +36,15 @@ describe('<TeamRoleListItem/>', () => {
         detailUrl="/templates/job_template/15/details"
       />
     );
-
-    expect(
-      wrapper.find('PFDataListCell[aria-label="resource name"]').text()
-    ).toBe('template delete project');
-    expect(
-      wrapper.find('PFDataListCell[aria-label="resource type"]').text()
-    ).toContain('Job Template');
-    expect(
-      wrapper.find('PFDataListCell[aria-label="resource role"]').text()
-    ).toContain('Admin');
+    expect(wrapper.find('Td[dataLabel="Resource Name"]').text()).toBe(
+      'template delete project'
+    );
+    expect(wrapper.find('Td[dataLabel="Type"]').text()).toContain(
+      'Job Template'
+    );
+    expect(wrapper.find('Td[dataLabel="Role"]').text()).toContain('Admin');
   });
+
   test('should render deletable chip', () => {
     wrapper = mountWithContexts(
       <TeamRoleListItem

awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.jsx

@@ -14,7 +14,10 @@ import { CubesIcon } from '@patternfly/react-icons';
 import { TeamsAPI, RolesAPI, UsersAPI } from '../../../api';
 import useRequest, { useDeleteItems } from '../../../util/useRequest';
 import DataListToolbar from '../../../components/DataListToolbar';
-import PaginatedDataList from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderCell,
+  HeaderRow,
+} from '../../../components/PaginatedTable';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import ErrorDetail from '../../../components/ErrorDetail';
 import AlertModal from '../../../components/AlertModal';
@@ -36,7 +39,7 @@ function TeamRolesList({ me, team }) {
     request: fetchRoles,
     error: contentError,
     result: {
-      roleCount,
+      // roleCount,
       roles,
       isAdminOfOrg,
       relatedSearchableKeys,
@@ -133,11 +136,11 @@ function TeamRolesList({ me, team }) {
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={contentError}
         hasContentLoading={isLoading || isDisassociateLoading}
         items={roles}
-        itemCount={roleCount}
+        itemCount={0}
         pluralizedItemName={t`Team Roles`}
         qsConfig={QS_CONFIG}
         toolbarSearchColumns={[
@@ -172,14 +175,20 @@ function TeamRolesList({ me, team }) {
             ]}
           />
         )}
-        renderItem={role => (
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
+            <HeaderCell>{t`Resource Name`}</HeaderCell>
+            <HeaderCell>{t`Type`}</HeaderCell>
+            <HeaderCell sortKey="id">{t`Role`}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(role, index) => (
           <TeamRoleListItem
             key={role.id}
             role={role}
             detailUrl={detailUrl(role)}
-            onSelect={item => {
-              setRoleToDisassociate(item);
-            }}
+            onDisassociate={setRoleToDisassociate}
+            index={index}
           />
         )}
       />
@@ -197,7 +206,7 @@ function TeamRolesList({ me, team }) {
               key="disassociate"
               variant="danger"
               aria-label={t`confirm disassociate`}
-              onClick={() => disassociateRole()}
+              onClick={disassociateRole}
             >
               {t`Disassociate`}
             </Button>,

awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.test.jsx

@@ -194,21 +194,36 @@ describe('<TeamRolesList />', () => {
     });
     waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
 
-    expect(wrapper.find(`Link#teamRole-2`).prop('to')).toBe(
-      '/templates/job_template/15/details'
-    );
-    expect(wrapper.find(`Link#teamRole-3`).prop('to')).toBe(
-      '/templates/workflow_job_template/16/details'
-    );
-    expect(wrapper.find('Link#teamRole-4').prop('to')).toBe(
-      '/credentials/75/details'
-    );
-    expect(wrapper.find('Link#teamRole-5').prop('to')).toBe(
-      '/inventories/inventory/76/details'
-    );
-    expect(wrapper.find('Link#teamRole-6').prop('to')).toBe(
-      '/inventories/smart_inventory/77/details'
-    );
+    expect(
+      wrapper
+        .find('Tr#role-item-row-2')
+        .find(`LinkAnchor`)
+        .prop('href')
+    ).toBe('/templates/job_template/15/details');
+    expect(
+      wrapper
+        .find('Tr#role-item-row-3')
+        .find(`LinkAnchor`)
+        .prop('href')
+    ).toBe('/templates/workflow_job_template/16/details');
+    expect(
+      wrapper
+        .find('Tr#role-item-row-4')
+        .find('LinkAnchor')
+        .prop('href')
+    ).toBe('/credentials/75/details');
+    expect(
+      wrapper
+        .find('Tr#role-item-row-5')
+        .find('LinkAnchor')
+        .prop('href')
+    ).toBe('/inventories/inventory/76/details');
+    expect(
+      wrapper
+        .find('Tr#role-item-row-6')
+        .find('LinkAnchor')
+        .prop('href')
+    ).toBe('/inventories/smart_inventory/77/details');
   });
   test('should not render add button when user cannot edit team and is not an admin of the org', async () => {
     UsersAPI.readAdminOfOrganizations.mockResolvedValueOnce({