From e1b6e1509c245824e59786e6f0e096f213c2f7b5 Mon Sep 17 00:00:00 2001 From: Alex Corey Date: Thu, 6 May 2021 11:59:47 -0400 Subject: [PATCH 1/2] Converts Teams Roles tab to tables --- .../Team/TeamRoles/TeamRoleListItem.jsx | 83 +++++++------------ .../Team/TeamRoles/TeamRoleListItem.test.jsx | 18 ++-- .../screens/Team/TeamRoles/TeamRolesList.jsx | 27 ++++-- .../Team/TeamRoles/TeamRolesList.test.jsx | 45 ++++++---- 4 files changed, 85 insertions(+), 88 deletions(-) diff --git a/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.jsx b/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.jsx index 2902057444..ac6f3e75d7 100644 --- a/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.jsx +++ b/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 ( - - - - - {role.summary_fields.resource_name} - - , - - {role.summary_fields && ( - - - - )} - , - - {role.name && ( - - onSelect(role)} - isReadOnly={ - !role.summary_fields.user_capabilities.unattach - } - > - {role.name} - - } - /> - - )} - , - ]} + + + + {role.summary_fields.resource_name} + + + + {role.summary_fields.resource_type_display_name} + + + onDisassociate(role)} + isReadOnly={!role.summary_fields.user_capabilities.unattach} + > + {role.name} + + } /> - - + + ); } export default TeamRoleListItem; diff --git a/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx b/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx index 3e446a34a8..031adcdccc 100644 --- a/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx +++ b/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx @@ -36,17 +36,15 @@ describe('', () => { 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( - )} - renderItem={role => ( + headerRow={ + + {t`Resource Name`} + {t`Type`} + {t`Role`} + + } + renderRow={(role, index) => ( { - 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`} , diff --git a/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.test.jsx b/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.test.jsx index 2b6158a174..1ab2d0755a 100644 --- a/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.test.jsx +++ b/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.test.jsx @@ -194,21 +194,36 @@ describe('', () => { }); 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({ From 5a1810e191d9b4e4c0f0d1c723331bed24601816 Mon Sep 17 00:00:00 2001 From: Alex Corey Date: Fri, 7 May 2021 11:26:50 -0400 Subject: [PATCH 2/2] fxes pagination and removes console warnings --- .../AppContainer/NavExpandableGroup.jsx | 2 +- .../src/components/Pagination/Pagination.jsx | 1 - .../Team/TeamRoles/TeamRoleListItem.jsx | 21 +++++++------------ .../screens/Team/TeamRoles/TeamRolesList.jsx | 4 ++-- 4 files changed, 11 insertions(+), 17 deletions(-) diff --git a/awx/ui_next/src/components/AppContainer/NavExpandableGroup.jsx b/awx/ui_next/src/components/AppContainer/NavExpandableGroup.jsx index 45c3b91fae..80d7c2dc2c 100644 --- a/awx/ui_next/src/components/AppContainer/NavExpandableGroup.jsx +++ b/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, }; diff --git a/awx/ui_next/src/components/Pagination/Pagination.jsx b/awx/ui_next/src/components/Pagination/Pagination.jsx index 139cda4ad4..dbf4b3e092 100644 --- a/awx/ui_next/src/components/Pagination/Pagination.jsx +++ b/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)` diff --git a/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.jsx b/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.jsx index ac6f3e75d7..d298faa65f 100644 --- a/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.jsx +++ b/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.jsx @@ -5,7 +5,6 @@ import { Chip } from '@patternfly/react-core'; import { Tr, Td } from '@patternfly/react-table'; import { Link } from 'react-router-dom'; -import { Detail } from '../../../components/DetailList'; function TeamRoleListItem({ role, detailUrl, onDisassociate }) { return ( @@ -19,18 +18,14 @@ function TeamRoleListItem({ role, detailUrl, onDisassociate }) { {role.summary_fields.resource_type_display_name} - onDisassociate(role)} - isReadOnly={!role.summary_fields.user_capabilities.unattach} - > - {role.name} - - } - /> + onDisassociate(role)} + isReadOnly={!role.summary_fields.user_capabilities.unattach} + > + {role.name} + ); diff --git a/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.jsx b/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.jsx index d32814c061..fbe9c99063 100644 --- a/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.jsx +++ b/awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.jsx @@ -39,7 +39,7 @@ function TeamRolesList({ me, team }) { request: fetchRoles, error: contentError, result: { - // roleCount, + roleCount, roles, isAdminOfOrg, relatedSearchableKeys, @@ -140,7 +140,7 @@ function TeamRolesList({ me, team }) { contentError={contentError} hasContentLoading={isLoading || isDisassociateLoading} items={roles} - itemCount={0} + itemCount={roleCount} pluralizedItemName={t`Team Roles`} qsConfig={QS_CONFIG} toolbarSearchColumns={[