Add remaining expanded template list item details

This commit is contained in:
Marliana Lara 2021-04-08 16:03:46 -04:00
parent 725fe99df8
commit aa69a493b6
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
3 changed files with 115 additions and 28 deletions

View File

@ -225,25 +225,27 @@ function TemplateListItem({
<Td colSpan={4}>
<ExpandableRowContent>
<DetailList>
<Detail
label={i18n._(t`Description`)}
value={template.description}
dataCy={`template-${template.id}-description`}
/>
<Detail
label={i18n._(t`Activity`)}
value={<Sparkline jobs={summaryFields.recent_jobs} />}
dataCy={`template-${template.id}-activity`}
/>
{summaryFields.credentials && summaryFields.credentials.length && (
{summaryFields.organization && (
<Detail
label={i18n._(t`Credentials`)}
label={i18n._(t`Organization`)}
value={
<ChipGroup
numChips={5}
totalChips={summaryFields.credentials.length}
<Link
to={`/organizations/${summaryFields.organization.id}/details`}
>
{summaryFields.credentials.map(c => (
<CredentialChip key={c.id} credential={c} isReadOnly />
))}
</ChipGroup>
{summaryFields.organization.name}
</Link>
}
dataCy={`template-${template.id}-credentials`}
dataCy={`template-${template.id}-organization`}
/>
)}
{summaryFields.inventory ? (
@ -260,24 +262,6 @@ function TemplateListItem({
<DeletedDetail label={i18n._(t`Inventory`)} />
)
)}
{summaryFields.labels && summaryFields.labels.results.length > 0 && (
<Detail
label={i18n._(t`Labels`)}
value={
<ChipGroup
numChips={5}
totalChips={summaryFields.labels.results.length}
>
{summaryFields.labels.results.map(l => (
<Chip key={l.id} isReadOnly>
{l.name}
</Chip>
))}
</ChipGroup>
}
dataCy={`template-${template.id}-labels`}
/>
)}
{summaryFields.project && (
<Detail
label={i18n._(t`Project`)}
@ -294,6 +278,42 @@ function TemplateListItem({
value={formatDateString(template.modified)}
dataCy={`template-${template.id}-last-modified`}
/>
{summaryFields.credentials && summaryFields.credentials.length && (
<Detail
fullWidth
label={i18n._(t`Credentials`)}
value={
<ChipGroup
numChips={5}
totalChips={summaryFields.credentials.length}
>
{summaryFields.credentials.map(c => (
<CredentialChip key={c.id} credential={c} isReadOnly />
))}
</ChipGroup>
}
dataCy={`template-${template.id}-credentials`}
/>
)}
{summaryFields.labels && summaryFields.labels.results.length > 0 && (
<Detail
fullWidth
label={i18n._(t`Labels`)}
value={
<ChipGroup
numChips={5}
totalChips={summaryFields.labels.results.length}
>
{summaryFields.labels.results.map(l => (
<Chip key={l.id} isReadOnly>
{l.name}
</Chip>
))}
</ChipGroup>
}
dataCy={`template-${template.id}-labels`}
/>
)}
</DetailList>
</ExpandableRowContent>
</Td>

View File

@ -377,4 +377,66 @@ describe('<TemplateListItem />', () => {
'Custom virtual environment /var/lib/awx/env must be replaced by an execution environment.'
);
});
test('should render expected details in expanded section', async () => {
const wrapper = mountWithContexts(
<table>
<tbody>
<TemplateListItem
isSelected={false}
detailUrl="/templates/job_template/1/details"
template={{
...mockJobTemplateData,
description: 'mock description',
}}
/>
</tbody>
</table>
);
expect(
wrapper
.find('Tr')
.last()
.prop('isExpanded')
).toBe(false);
await act(async () =>
wrapper.find('button[aria-label="Details"]').simulate('click')
);
wrapper.update();
expect(
wrapper
.find('Tr')
.last()
.prop('isExpanded')
).toBe(true);
function assertDetail(label, value) {
expect(wrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
}
assertDetail('Description', 'mock description');
assertDetail('Organization', "Mike's Org");
assertDetail('Inventory', "Mike's Inventory");
assertDetail('Project', "Mike's Project");
expect(
wrapper.find('Detail[label="Credentials"]').containsAllMatchingElements([
<span>
<strong>SSH:</strong>Credential 1
</span>,
<span>
<strong>Awx:</strong>Credential 2
</span>,
])
).toEqual(true);
expect(
wrapper
.find('Detail[label="Labels"]')
.containsAllMatchingElements([<span>L_91o2</span>])
).toEqual(true);
expect(wrapper.find('Detail[label="Organization"] dd a').prop('href')).toBe(
'/organizations/1/details'
);
expect(wrapper.find(`Detail[label="Activity"] Sparkline`)).toHaveLength(1);
});
});

View File

@ -28,6 +28,11 @@
"webhook_key": "/api/v2/job_templates/7/webhook_key/"
},
"summary_fields": {
"organization": {
"id": 1,
"name": "Mike's Org",
"description": ""
},
"inventory": {
"id": 1,
"name": "Mike's Inventory",