mirror of
https://github.com/ansible/awx.git
synced 2024-10-27 09:25:10 +03:00
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>
This commit is contained in:
commit
82af78fe33
@ -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,
|
||||
};
|
||||
|
||||
|
@ -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)`
|
||||
|
@ -1,63 +1,33 @@
|
||||
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';
|
||||
|
||||
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>,
|
||||
]}
|
||||
/>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
<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`}>
|
||||
<Chip
|
||||
key={role.name}
|
||||
aria-label={role.name}
|
||||
onClick={() => onDisassociate(role)}
|
||||
isReadOnly={!role.summary_fields.user_capabilities.unattach}
|
||||
>
|
||||
{role.name}
|
||||
</Chip>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
export default TeamRoleListItem;
|
||||
|
@ -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
|
||||
|
@ -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 => {
|
||||
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>,
|
||||
|
@ -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({
|
||||
|
Loading…
Reference in New Issue
Block a user