mirror of
https://github.com/ansible/awx.git
synced 2026-01-11 10:00:01 -03:30
Convert lists to tables
- ProjectJobTemplatesList - UserTokenList
This commit is contained in:
Keith J. Grant
Shane McDonald
parent
3db92ca668
commit
421d8f215c
@ -7,7 +7,11 @@ import { JobTemplatesAPI } from '../../../api';
|
||||
import AlertModal from '../../../components/AlertModal';
|
||||
import DatalistToolbar from '../../../components/DataListToolbar';
|
||||
import ErrorDetail from '../../../components/ErrorDetail';
|
||||
import PaginatedDataList, {
|
||||
import PaginatedTable, {
|
||||
HeaderRow,
|
||||
HeaderCell,
|
||||
} from '../../../components/PaginatedTable';
|
||||
import {
|
||||
ToolbarAddButton,
|
||||
ToolbarDeleteButton,
|
||||
} from '../../../components/PaginatedDataList';
|
||||
@ -70,9 +74,13 @@ function ProjectJobTemplatesList() {
|
||||
fetchTemplates();
|
||||
}, [fetchTemplates]);
|
||||
|
||||
const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
|
||||
jobTemplates
|
||||
);
|
||||
const {
|
||||
selected,
|
||||
isAllSelected,
|
||||
handleSelect,
|
||||
clearSelected,
|
||||
selectAll,
|
||||
} = useSelected(jobTemplates);
|
||||
|
||||
const {
|
||||
isLoading: isDeleteLoading,
|
||||
@ -94,7 +102,7 @@ function ProjectJobTemplatesList() {
|
||||
|
||||
const handleTemplateDelete = async () => {
|
||||
await deleteTemplates();
|
||||
setSelected([]);
|
||||
clearSelected();
|
||||
};
|
||||
|
||||
const canAddJT =
|
||||
@ -107,14 +115,14 @@ function ProjectJobTemplatesList() {
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
<PaginatedTable
|
||||
contentError={contentError}
|
||||
hasContentLoading={isDeleteLoading || isLoading}
|
||||
items={jobTemplates}
|
||||
itemCount={itemCount}
|
||||
pluralizedItemName={t`Job templates`}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={handleSelect}
|
||||
clearSelected={clearSelected}
|
||||
toolbarSearchColumns={[
|
||||
{
|
||||
name: t`Name`,
|
||||
@ -130,32 +138,6 @@ function ProjectJobTemplatesList() {
|
||||
key: 'modified_by__username__icontains',
|
||||
},
|
||||
]}
|
||||
toolbarSortColumns={[
|
||||
{
|
||||
name: t`Inventory`,
|
||||
key: 'job_template__inventory__id',
|
||||
},
|
||||
{
|
||||
name: t`Last job run`,
|
||||
key: 'last_job_run',
|
||||
},
|
||||
{
|
||||
name: t`Modified`,
|
||||
key: 'modified',
|
||||
},
|
||||
{
|
||||
name: t`Name`,
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
name: t`Project`,
|
||||
key: 'jobtemplate__project__id',
|
||||
},
|
||||
{
|
||||
name: t`Type`,
|
||||
key: 'type',
|
||||
},
|
||||
]}
|
||||
toolbarSearchableKeys={searchableKeys}
|
||||
toolbarRelatedSearchableKeys={relatedSearchableKeys}
|
||||
renderToolbar={props => (
|
||||
@ -163,9 +145,7 @@ function ProjectJobTemplatesList() {
|
||||
{...props}
|
||||
showSelectAll
|
||||
isAllSelected={isAllSelected}
|
||||
onSelectAll={isSelected =>
|
||||
setSelected(isSelected ? [...jobTemplates] : [])
|
||||
}
|
||||
onSelectAll={selectAll}
|
||||
qsConfig={QS_CONFIG}
|
||||
additionalControls={[
|
||||
...(canAddJT ? [addButton] : []),
|
||||
@ -178,7 +158,15 @@ function ProjectJobTemplatesList() {
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={template => (
|
||||
headerRow={
|
||||
<HeaderRow qsConfig={QS_CONFIG}>
|
||||
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
|
||||
<HeaderCell sortKey="type">{t`Type`}</HeaderCell>
|
||||
<HeaderCell>{t`Recent jobs`}</HeaderCell>
|
||||
<HeaderCell>{t`Actions`}</HeaderCell>
|
||||
</HeaderRow>
|
||||
}
|
||||
renderRow={(template, index) => (
|
||||
<ProjectTemplatesListItem
|
||||
key={template.id}
|
||||
value={template.name}
|
||||
@ -186,6 +174,7 @@ function ProjectJobTemplatesList() {
|
||||
detailUrl={`/templates/${template.type}/${template.id}/details`}
|
||||
onSelect={() => handleSelect(template)}
|
||||
isSelected={selected.some(row => row.id === template.id)}
|
||||
rowIndex={index}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={canAddJT && addButton}
|
||||
|
||||
@ -1,36 +1,21 @@
|
||||
import 'styled-components/macro';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Button,
|
||||
DataListAction as _DataListAction,
|
||||
DataListCheck,
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
Tooltip,
|
||||
} from '@patternfly/react-core';
|
||||
import { t } from '@lingui/macro';
|
||||
|
||||
import { Button, Tooltip } from '@patternfly/react-core';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
import {
|
||||
ExclamationTriangleIcon,
|
||||
PencilAltIcon,
|
||||
RocketIcon,
|
||||
} from '@patternfly/react-icons';
|
||||
import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
import DataListCell from '../../../components/DataListCell';
|
||||
|
||||
import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
|
||||
import { LaunchButton } from '../../../components/LaunchButton';
|
||||
import Sparkline from '../../../components/Sparkline';
|
||||
import { toTitleCase } from '../../../util/strings';
|
||||
|
||||
const DataListAction = styled(_DataListAction)`
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-gap: 16px;
|
||||
grid-template-columns: repeat(2, 40px);
|
||||
`;
|
||||
|
||||
const ExclamationTriangleIconWarning = styled(ExclamationTriangleIcon)`
|
||||
color: var(--pf-global--warning-color--100);
|
||||
margin-left: 18px;
|
||||
@ -41,8 +26,8 @@ function ProjectJobTemplateListItem({
|
||||
isSelected,
|
||||
onSelect,
|
||||
detailUrl,
|
||||
rowIndex,
|
||||
}) {
|
||||
const labelId = `check-action-${template.id}`;
|
||||
const canLaunch = template.summary_fields.user_capabilities.start;
|
||||
|
||||
const missingResourceIcon =
|
||||
@ -57,90 +42,75 @@ function ProjectJobTemplateListItem({
|
||||
!template.execution_environment;
|
||||
|
||||
return (
|
||||
<DataListItem aria-labelledby={labelId} id={`${template.id}`}>
|
||||
<DataListItemRow>
|
||||
<DataListCheck
|
||||
id={`select-jobTemplate-${template.id}`}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-labelledby={labelId}
|
||||
/>
|
||||
<DataListItemCells
|
||||
dataListCells={[
|
||||
<DataListCell key="divider">
|
||||
<span>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{template.name}</b>
|
||||
</Link>
|
||||
</span>
|
||||
{missingResourceIcon && (
|
||||
<span>
|
||||
<Tooltip
|
||||
content={t`Resources are missing from this template.`}
|
||||
position="right"
|
||||
>
|
||||
<ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
{missingExecutionEnvironment && (
|
||||
<span>
|
||||
<Tooltip
|
||||
content={t`Custom virtual environment ${template.custom_virtualenv} must be replaced by an execution environment.`}
|
||||
position="right"
|
||||
className="missing-execution-environment"
|
||||
>
|
||||
<ExclamationTriangleIconWarning />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</DataListCell>,
|
||||
<DataListCell key="type">
|
||||
{toTitleCase(template.type)}
|
||||
</DataListCell>,
|
||||
<DataListCell key="sparkline">
|
||||
<Sparkline jobs={template.summary_fields.recent_jobs} />
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
<DataListAction
|
||||
aria-label={t`actions`}
|
||||
aria-labelledby={labelId}
|
||||
id={labelId}
|
||||
<Tr id={`template-row-${template.id}`}>
|
||||
<Td
|
||||
select={{
|
||||
rowIndex,
|
||||
isSelected,
|
||||
onSelect,
|
||||
}}
|
||||
/>
|
||||
<Td dataLabel={t`Name`}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
{template.name}
|
||||
{missingResourceIcon && (
|
||||
<Tooltip
|
||||
content={t`Resources are missing from this template.`}
|
||||
position="right"
|
||||
>
|
||||
<ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
|
||||
</Tooltip>
|
||||
)}
|
||||
{missingExecutionEnvironment && (
|
||||
<Tooltip
|
||||
content={t`Custom virtual environment ${template.custom_virtualenv} must be replaced by an execution environment.`}
|
||||
position="right"
|
||||
className="missing-execution-environment"
|
||||
>
|
||||
<ExclamationTriangleIconWarning />
|
||||
</Tooltip>
|
||||
)}
|
||||
</Link>
|
||||
</Td>
|
||||
<Td dataLabel={t`Type`}>{toTitleCase(template.type)}</Td>
|
||||
<Td dataLabel={t`Recent jobs`}>
|
||||
<Sparkline jobs={template.summary_fields.recent_jobs} />
|
||||
</Td>
|
||||
<ActionsTd dataLabel={t`Actions`}>
|
||||
<ActionItem
|
||||
visible={canLaunch && template.type === 'job_template'}
|
||||
tooltip={t`Launch Template`}
|
||||
>
|
||||
{canLaunch && template.type === 'job_template' && (
|
||||
<Tooltip content={t`Launch Template`} position="top">
|
||||
<LaunchButton resource={template}>
|
||||
{({ handleLaunch, isLaunching }) => (
|
||||
<Button
|
||||
ouiaId={`${template.id}-launch-button`}
|
||||
css="grid-column: 1"
|
||||
variant="plain"
|
||||
onClick={handleLaunch}
|
||||
isDisabled={isLaunching}
|
||||
>
|
||||
<RocketIcon />
|
||||
</Button>
|
||||
)}
|
||||
</LaunchButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
{template.summary_fields.user_capabilities.edit && (
|
||||
<Tooltip content={t`Edit Template`} position="top">
|
||||
<LaunchButton resource={template}>
|
||||
{({ handleLaunch, isLaunching }) => (
|
||||
<Button
|
||||
ouiaId={`${template.id}-edit-button`}
|
||||
css="grid-column: 2"
|
||||
ouiaId={`${template.id}-launch-button`}
|
||||
css="grid-column: 1"
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={`/templates/${template.type}/${template.id}/edit`}
|
||||
onClick={handleLaunch}
|
||||
isDisabled={isLaunching}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
<RocketIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</DataListAction>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
)}
|
||||
</LaunchButton>
|
||||
</ActionItem>
|
||||
<ActionItem
|
||||
visible={template.summary_fields.user_capabilities.edit}
|
||||
tooltip={t`Edit Template`}
|
||||
>
|
||||
<Button
|
||||
ouiaId={`${template.id}-edit-button`}
|
||||
css="grid-column: 2"
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={`/templates/${template.type}/${template.id}/edit`}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</Button>
|
||||
</ActionItem>
|
||||
</ActionsTd>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -7,157 +7,195 @@ import ProjectJobTemplatesListItem from './ProjectJobTemplatesListItem';
|
||||
describe('<ProjectJobTemplatesListItem />', () => {
|
||||
test('launch button shown to users with start capabilities', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
start: true,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
start: true,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('LaunchButton').exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('launch button hidden from users without start capabilities', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
start: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
start: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('LaunchButton').exists()).toBeFalsy();
|
||||
});
|
||||
|
||||
test('edit button shown to users with edit capabilities', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: true,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: true,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('edit button hidden from users without edit capabilities', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
|
||||
});
|
||||
|
||||
test('missing resource icon is shown.', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(true);
|
||||
});
|
||||
|
||||
test('missing resource icon is not shown when there is a project and an inventory.', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
project: { name: 'Foo', id: 2 },
|
||||
inventory: { name: 'Bar', id: 2 },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
project: { name: 'Foo', id: 2 },
|
||||
inventory: { name: 'Bar', id: 2 },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
|
||||
});
|
||||
|
||||
test('missing resource icon is not shown when inventory is prompt_on_launch, and a project', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
ask_inventory_on_launch: true,
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
project: { name: 'Foo', id: 2 },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
ask_inventory_on_launch: true,
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
project: { name: 'Foo', id: 2 },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
|
||||
});
|
||||
test('missing resource icon is not shown type is workflow_job_template', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'workflow_job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'workflow_job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
|
||||
});
|
||||
@ -166,19 +204,23 @@ describe('<ProjectJobTemplatesListItem />', () => {
|
||||
initialEntries: ['/projects/1/job_templates'],
|
||||
});
|
||||
const wrapper = mountWithContexts(
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
detailUrl="/templates/job_template/2/details"
|
||||
template={{
|
||||
id: 2,
|
||||
name: 'Template 2',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>,
|
||||
<table>
|
||||
<tbody>
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
detailUrl="/templates/job_template/2/details"
|
||||
template={{
|
||||
id: 2,
|
||||
name: 'Template 2',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>,
|
||||
{ context: { router: { history } } }
|
||||
);
|
||||
wrapper.find('Link').simulate('click', { button: 0 });
|
||||
@ -189,22 +231,26 @@ describe('<ProjectJobTemplatesListItem />', () => {
|
||||
|
||||
test('should render warning about missing execution environment', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: true,
|
||||
},
|
||||
},
|
||||
custom_virtualenv: '/var/lib/awx/env',
|
||||
execution_environment: null,
|
||||
}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<ProjectJobTemplatesListItem
|
||||
isSelected={false}
|
||||
template={{
|
||||
id: 1,
|
||||
name: 'Template 1',
|
||||
url: '/templates/job_template/1',
|
||||
type: 'job_template',
|
||||
summary_fields: {
|
||||
user_capabilities: {
|
||||
edit: true,
|
||||
},
|
||||
},
|
||||
custom_virtualenv: '/var/lib/awx/env',
|
||||
execution_environment: null,
|
||||
}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
|
||||
expect(
|
||||
|
||||
@ -3,7 +3,11 @@ import { useLocation, useParams } from 'react-router-dom';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
import { getQSConfig, parseQueryString } from '../../../util/qs';
|
||||
import PaginatedDataList, {
|
||||
import PaginatedTable, {
|
||||
HeaderRow,
|
||||
HeaderCell,
|
||||
} from '../../../components/PaginatedTable';
|
||||
import {
|
||||
ToolbarAddButton,
|
||||
ToolbarDeleteButton,
|
||||
} from '../../../components/PaginatedDataList';
|
||||
@ -68,9 +72,13 @@ function UserTokenList() {
|
||||
fetchTokens();
|
||||
}, [fetchTokens]);
|
||||
|
||||
const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
|
||||
tokens
|
||||
);
|
||||
const {
|
||||
selected,
|
||||
isAllSelected,
|
||||
handleSelect,
|
||||
clearSelected,
|
||||
selectAll,
|
||||
} = useSelected(tokens);
|
||||
|
||||
const {
|
||||
isLoading: isDeleteLoading,
|
||||
@ -91,21 +99,21 @@ function UserTokenList() {
|
||||
);
|
||||
const handleDelete = async () => {
|
||||
await deleteTokens();
|
||||
setSelected([]);
|
||||
clearSelected();
|
||||
};
|
||||
|
||||
const canAdd = true;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatedDataList
|
||||
<PaginatedTable
|
||||
contentError={error}
|
||||
hasContentLoading={isLoading || isDeleteLoading}
|
||||
items={tokens}
|
||||
itemCount={itemCount}
|
||||
pluralizedItemName={t`Tokens`}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={handleSelect}
|
||||
clearSelected={clearSelected}
|
||||
toolbarSearchColumns={[
|
||||
{
|
||||
name: t`Application name`,
|
||||
@ -147,9 +155,7 @@ function UserTokenList() {
|
||||
showSelectAll
|
||||
isAllSelected={isAllSelected}
|
||||
qsConfig={QS_CONFIG}
|
||||
onSelectAll={isSelected =>
|
||||
setSelected(isSelected ? [...tokens] : [])
|
||||
}
|
||||
onSelectAll={selectAll}
|
||||
additionalControls={[
|
||||
...(canAdd
|
||||
? [
|
||||
@ -168,7 +174,14 @@ function UserTokenList() {
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={token => (
|
||||
headerRow={
|
||||
<HeaderRow qsConfig={QS_CONFIG}>
|
||||
<HeaderCell sortKey="application__name">{t`Name`}</HeaderCell>
|
||||
<HeaderCell sortKey="scope">{t`Scope`}</HeaderCell>
|
||||
<HeaderCell sortKey="expires">{t`Expires`}</HeaderCell>
|
||||
</HeaderRow>
|
||||
}
|
||||
renderRow={(token, index) => (
|
||||
<UserTokensListItem
|
||||
key={token.id}
|
||||
token={token}
|
||||
@ -176,6 +189,7 @@ function UserTokenList() {
|
||||
handleSelect(token);
|
||||
}}
|
||||
isSelected={selected.some(row => row.id === token.id)}
|
||||
rowIndex={index}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={
|
||||
|
||||
@ -143,32 +143,6 @@ describe('<UserTokenList />', () => {
|
||||
expect(wrapper.find('UserTokenList').length).toBe(1);
|
||||
});
|
||||
|
||||
test('edit button should be disabled', async () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<UserTokenList />);
|
||||
});
|
||||
waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
|
||||
});
|
||||
|
||||
test('should enable edit button', async () => {
|
||||
UsersAPI.readTokens.mockResolvedValue(tokens);
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<UserTokenList />);
|
||||
});
|
||||
waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
|
||||
expect(
|
||||
wrapper.find('DataListCheck[id="select-token-3"]').props().checked
|
||||
).toBe(false);
|
||||
await act(async () => {
|
||||
wrapper.find('DataListCheck[id="select-token-3"]').invoke('onChange')(
|
||||
true
|
||||
);
|
||||
});
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('DataListCheck[id="select-token-3"]').props().checked
|
||||
).toBe(true);
|
||||
});
|
||||
test('delete button should be disabled', async () => {
|
||||
UsersAPI.readTokens.mockResolvedValue(tokens);
|
||||
await act(async () => {
|
||||
@ -179,6 +153,7 @@ describe('<UserTokenList />', () => {
|
||||
true
|
||||
);
|
||||
});
|
||||
|
||||
test('should select and then delete item properly', async () => {
|
||||
UsersAPI.readTokens.mockResolvedValue(tokens);
|
||||
await act(async () => {
|
||||
@ -190,13 +165,17 @@ describe('<UserTokenList />', () => {
|
||||
);
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('DataListCheck[aria-labelledby="check-action-3"]')
|
||||
.find('.pf-c-table__check')
|
||||
.at(2)
|
||||
.find('input')
|
||||
.prop('onChange')(tokens.data.results[0]);
|
||||
});
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper
|
||||
.find('DataListCheck[aria-labelledby="check-action-3"]')
|
||||
.find('.pf-c-table__check')
|
||||
.at(2)
|
||||
.find('input')
|
||||
.prop('checked')
|
||||
).toBe(true);
|
||||
expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
|
||||
@ -213,6 +192,7 @@ describe('<UserTokenList />', () => {
|
||||
wrapper.update();
|
||||
expect(TokensAPI.destroy).toHaveBeenCalledWith(3);
|
||||
});
|
||||
|
||||
test('should select and then delete item properly', async () => {
|
||||
UsersAPI.readTokens.mockResolvedValue(tokens);
|
||||
TokensAPI.destroy.mockRejectedValue(
|
||||
@ -236,13 +216,17 @@ describe('<UserTokenList />', () => {
|
||||
);
|
||||
await act(async () => {
|
||||
wrapper
|
||||
.find('DataListCheck[aria-labelledby="check-action-3"]')
|
||||
.find('.pf-c-table__check')
|
||||
.at(2)
|
||||
.find('input')
|
||||
.prop('onChange')(tokens.data.results[0]);
|
||||
});
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper
|
||||
.find('DataListCheck[aria-labelledby="check-action-3"]')
|
||||
.find('.pf-c-table__check')
|
||||
.at(2)
|
||||
.find('input')
|
||||
.prop('checked')
|
||||
).toBe(true);
|
||||
expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
|
||||
|
||||
@ -2,74 +2,31 @@ import React from 'react';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
DataListItemCells,
|
||||
DataListCheck,
|
||||
DataListItemRow,
|
||||
DataListItem,
|
||||
} from '@patternfly/react-core';
|
||||
import styled from 'styled-components';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
import { toTitleCase } from '../../../util/strings';
|
||||
|
||||
import { formatDateString } from '../../../util/dates';
|
||||
import DataListCell from '../../../components/DataListCell';
|
||||
|
||||
const Label = styled.b`
|
||||
margin-right: 20px;
|
||||
`;
|
||||
|
||||
const NameLabel = styled.b`
|
||||
margin-right: 5px;
|
||||
`;
|
||||
|
||||
function UserTokenListItem({ token, isSelected, onSelect }) {
|
||||
function UserTokenListItem({ token, isSelected, onSelect, rowIndex }) {
|
||||
const { id } = useParams();
|
||||
const labelId = `check-action-${token.id}`;
|
||||
return (
|
||||
<DataListItem key={token.id} aria-labelledby={labelId} id={`${token.id}`}>
|
||||
<DataListItemRow>
|
||||
<DataListCheck
|
||||
id={`select-token-${token.id}`}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-labelledby={labelId}
|
||||
/>
|
||||
<DataListItemCells
|
||||
dataListCells={[
|
||||
<DataListCell aria-label={t`Token type`} key="type">
|
||||
<Link to={`/users/${id}/tokens/${token.id}/details`}>
|
||||
{token.summary_fields?.application
|
||||
? t`Application access token`
|
||||
: t`Personal access token`}
|
||||
</Link>
|
||||
</DataListCell>,
|
||||
<DataListCell
|
||||
aria-label={t`Application name`}
|
||||
key="applicationName"
|
||||
>
|
||||
{token.summary_fields?.application && (
|
||||
<span>
|
||||
<NameLabel>{t`Application`}</NameLabel>
|
||||
<Link
|
||||
to={`/applications/${token.summary_fields.application.id}/details`}
|
||||
>
|
||||
{token.summary_fields.application.name}
|
||||
</Link>
|
||||
</span>
|
||||
)}
|
||||
</DataListCell>,
|
||||
<DataListCell aria-label={t`Scope`} key="scope">
|
||||
<Label>{t`Scope`}</Label>
|
||||
{toTitleCase(token.scope)}
|
||||
</DataListCell>,
|
||||
<DataListCell aria-label={t`Expiration`} key="expiration">
|
||||
<Label>{t`Expires`}</Label>
|
||||
{formatDateString(token.expires)}
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
<Tr id={`token-row-${token.id}`}>
|
||||
<Td
|
||||
select={{
|
||||
rowIndex,
|
||||
isSelected,
|
||||
onSelect,
|
||||
}}
|
||||
/>
|
||||
<Td dataLabel={t`Name`}>
|
||||
<Link to={`/users/${id}/tokens/${token.id}/details`}>
|
||||
{token.summary_fields?.application
|
||||
? token.summary_fields.application.name
|
||||
: `Personal access token`}
|
||||
</Link>
|
||||
</Td>
|
||||
<Td dataLabel={t`Scope`}>{toTitleCase(token.scope)}</Td>
|
||||
<Td dataLabel={t`Expires`}>{formatDateString(token.expires)}</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -39,7 +39,13 @@ describe('<UserTokenListItem />', () => {
|
||||
let wrapper;
|
||||
test('should mount properly', async () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<UserTokenListItem token={token} />);
|
||||
wrapper = mountWithContexts(
|
||||
<table>
|
||||
<tbody>
|
||||
<UserTokenListItem token={token} />
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
});
|
||||
expect(wrapper.find('UserTokenListItem').length).toBe(1);
|
||||
});
|
||||
@ -47,62 +53,101 @@ describe('<UserTokenListItem />', () => {
|
||||
test('should render application access token row properly', async () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(
|
||||
<UserTokenListItem isSelected={false} token={token} />
|
||||
<table>
|
||||
<tbody>
|
||||
<UserTokenListItem isSelected={false} token={token} />
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
});
|
||||
expect(wrapper.find('DataListCheck').prop('checked')).toBe(false);
|
||||
expect(wrapper.find('PFDataListCell[aria-label="Token type"]').text()).toBe(
|
||||
'Application access token'
|
||||
);
|
||||
expect(
|
||||
wrapper.find('PFDataListCell[aria-label="Application name"]').text()
|
||||
).toContain('Foobar app');
|
||||
expect(wrapper.find('PFDataListCell[aria-label="Scope"]').text()).toContain(
|
||||
'Read'
|
||||
);
|
||||
wrapper
|
||||
.find('Td')
|
||||
.first()
|
||||
.prop('select').isSelected
|
||||
).toBe(false);
|
||||
expect(
|
||||
wrapper.find('PFDataListCell[aria-label="Expiration"]').text()
|
||||
wrapper
|
||||
.find('Td')
|
||||
.at(1)
|
||||
.text()
|
||||
).toBe('Foobar app');
|
||||
expect(
|
||||
wrapper
|
||||
.find('Td')
|
||||
.at(2)
|
||||
.text()
|
||||
).toContain('Read');
|
||||
expect(
|
||||
wrapper
|
||||
.find('Td')
|
||||
.at(3)
|
||||
.text()
|
||||
).toContain('10/25/3019, 3:06:43 PM');
|
||||
});
|
||||
|
||||
test('should render personal access token row properly', async () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(
|
||||
<UserTokenListItem
|
||||
isSelected={false}
|
||||
token={{
|
||||
...token,
|
||||
refresh_token: null,
|
||||
application: null,
|
||||
scope: 'write',
|
||||
summary_fields: {
|
||||
user: token.summary_fields.user,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<UserTokenListItem
|
||||
isSelected={false}
|
||||
token={{
|
||||
...token,
|
||||
refresh_token: null,
|
||||
application: null,
|
||||
scope: 'write',
|
||||
summary_fields: {
|
||||
user: token.summary_fields.user,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
});
|
||||
expect(wrapper.find('DataListCheck').prop('checked')).toBe(false);
|
||||
expect(wrapper.find('PFDataListCell[aria-label="Token type"]').text()).toBe(
|
||||
'Personal access token'
|
||||
);
|
||||
expect(
|
||||
wrapper.find('PFDataListCell[aria-label="Application name"]').text()
|
||||
).toBe('');
|
||||
expect(wrapper.find('PFDataListCell[aria-label="Scope"]').text()).toContain(
|
||||
'Write'
|
||||
);
|
||||
wrapper
|
||||
.find('Td')
|
||||
.first()
|
||||
.prop('select').isSelected
|
||||
).toBe(false);
|
||||
expect(
|
||||
wrapper.find('PFDataListCell[aria-label="Expiration"]').text()
|
||||
wrapper
|
||||
.find('Td')
|
||||
.at(1)
|
||||
.text()
|
||||
).toEqual('Personal access token');
|
||||
expect(
|
||||
wrapper
|
||||
.find('Td')
|
||||
.at(2)
|
||||
.text()
|
||||
).toEqual('Write');
|
||||
expect(
|
||||
wrapper
|
||||
.find('Td')
|
||||
.at(3)
|
||||
.text()
|
||||
).toContain('10/25/3019, 3:06:43 PM');
|
||||
});
|
||||
|
||||
test('should be checked', async () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(
|
||||
<UserTokenListItem isSelected token={token} />
|
||||
<table>
|
||||
<tbody>
|
||||
<UserTokenListItem isSelected token={token} />
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
});
|
||||
expect(wrapper.find('DataListCheck').prop('checked')).toBe(true);
|
||||
expect(
|
||||
wrapper
|
||||
.find('Td')
|
||||
.first()
|
||||
.prop('select').isSelected
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
@ -11,7 +11,8 @@ jest.mock('react-router-dom', () => ({
|
||||
|
||||
describe('<Users />', () => {
|
||||
test('initially renders successfully', () => {
|
||||
mountWithContexts(<Users />);
|
||||
const wrapper = mountWithContexts(<Users />);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test('should display a breadcrumb heading', () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user