Merge pull request #10131 from AlexSCorey/10088-ConverTeamsSubTabstoTables

Converts Teams Roles tab to tables

SUMMARY
Addresses #10088.  Converts The Roles tab inside of Teams to tables view.
E2E workflows triggered
ISSUE TYPE

Feature Pull Request

COMPONENT NAME

UI

ADDITIONAL INFORMATION

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

awx/ui_next/src/components/AppContainer/NavExpandableGroup.jsx

@@ -59,7 +59,7 @@ class NavExpandableGroup extends Component {
 
 NavExpandableGroup.propTypes = {
   groupId: PropTypes.string.isRequired,
-  groupTitle: PropTypes.string.isRequired,
+  groupTitle: PropTypes.element.isRequired,
   routes: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 

awx/ui_next/src/components/Pagination/Pagination.jsx

@@ -4,7 +4,6 @@ import {
   Pagination as PFPagination,
   DropdownDirection,
 } from '@patternfly/react-core';
-import {} from '@lingui/core';
 import { t } from '@lingui/macro';
 
 const AWXPagination = styled(PFPagination)`

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

@@ -1,63 +1,33 @@
 import React from 'react';
 
 import { t } from '@lingui/macro';
-import {
+import { Chip } from '@patternfly/react-core';
-  DataListItem,
+import { Tr, Td } from '@patternfly/react-table';
-  DataListItemCells,
-  DataListItemRow,
-  Chip,
-} from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
-import { DetailList, Detail } from '../../../components/DetailList';
-import DataListCell from '../../../components/DataListCell';
 
-function TeamRoleListItem({ role, detailUrl, onSelect }) {
+import { Link } from 'react-router-dom';
-  const labelId = `teamRole-${role.id}`;
+
+function TeamRoleListItem({ role, detailUrl, onDisassociate }) {
   return (
-    <DataListItem key={role.id} aria-labelledby={labelId} id={`${role.id}`}>
+    <Tr id={`role-item-row-${role.id}`}>
-      <DataListItemRow>
+      <Td dataLabel={t`Resource Name`}>
-        <DataListItemCells
+        <Link to={{ pathname: `${detailUrl}` }}>
-          dataListCells={[
+          <b>{role.summary_fields.resource_name}</b>
-            <DataListCell key="name" aria-label={t`resource name`}>
+        </Link>
-              <Link to={`${detailUrl}`} id={labelId}>
+      </Td>
-                <b>{role.summary_fields.resource_name}</b>
+      <Td dataLabel={t`Type`}>
-              </Link>
+        {role.summary_fields.resource_type_display_name}
-            </DataListCell>,
+      </Td>
-            <DataListCell key="type" aria-label={t`resource type`}>
+      <Td dataLabel={t`Role`}>
-              {role.summary_fields && (
+        <Chip
-                <DetailList stacked>
+          key={role.name}
-                  <Detail
+          aria-label={role.name}
-                    label={t`Type`}
+          onClick={() => onDisassociate(role)}
-                    value={role.summary_fields.resource_type_display_name}
+          isReadOnly={!role.summary_fields.user_capabilities.unattach}
-                  />
+        >
-                </DetailList>
+          {role.name}
-              )}
+        </Chip>
-            </DataListCell>,
+      </Td>
-            <DataListCell key="role" aria-label={t`resource role`}>
+    </Tr>
-              {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>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
   );
 }
 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('Td[dataLabel="Resource Name"]').text()).toBe(
-    expect(
+      'template delete project'
-      wrapper.find('PFDataListCell[aria-label="resource name"]').text()
+    );
-    ).toBe('template delete project');
+    expect(wrapper.find('Td[dataLabel="Type"]').text()).toContain(
-    expect(
+      'Job Template'
-      wrapper.find('PFDataListCell[aria-label="resource type"]').text()
+    );
-    ).toContain('Job Template');
+    expect(wrapper.find('Td[dataLabel="Role"]').text()).toContain('Admin');
-    expect(
-      wrapper.find('PFDataListCell[aria-label="resource 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';
@@ -133,7 +136,7 @@ function TeamRolesList({ me, team }) {
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={contentError}
         hasContentLoading={isLoading || isDisassociateLoading}
         items={roles}
@@ -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 => {
+            onDisassociate={setRoleToDisassociate}
-              setRoleToDisassociate(item);
+            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(
+    expect(
-      '/templates/job_template/15/details'
+      wrapper
-    );
+        .find('Tr#role-item-row-2')
-    expect(wrapper.find(`Link#teamRole-3`).prop('to')).toBe(
+        .find(`LinkAnchor`)
-      '/templates/workflow_job_template/16/details'
+        .prop('href')
-    );
+    ).toBe('/templates/job_template/15/details');
-    expect(wrapper.find('Link#teamRole-4').prop('to')).toBe(
+    expect(
-      '/credentials/75/details'
+      wrapper
-    );
+        .find('Tr#role-item-row-3')
-    expect(wrapper.find('Link#teamRole-5').prop('to')).toBe(
+        .find(`LinkAnchor`)
-      '/inventories/inventory/76/details'
+        .prop('href')
-    );
+    ).toBe('/templates/workflow_job_template/16/details');
-    expect(wrapper.find('Link#teamRole-6').prop('to')).toBe(
+    expect(
-      '/inventories/smart_inventory/77/details'
+      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({