Adds popout for extra vars on Job Details view

This commit is contained in:
Alex Corey
2021-09-21 13:36:27 -04:00
parent 0ac3a377fd
commit 6af27fffbc
2 changed files with 25 additions and 31 deletions

View File

@@ -17,7 +17,7 @@ import {
import { CardBody, CardActionsRow } from 'components/Card'; import { CardBody, CardActionsRow } from 'components/Card';
import ChipGroup from 'components/ChipGroup'; import ChipGroup from 'components/ChipGroup';
import CredentialChip from 'components/CredentialChip'; import CredentialChip from 'components/CredentialChip';
import { VariablesInput as _VariablesInput } from 'components/CodeEditor'; import { VariablesDetail } from 'components/CodeEditor';
import DeleteButton from 'components/DeleteButton'; import DeleteButton from 'components/DeleteButton';
import ErrorDetail from 'components/ErrorDetail'; import ErrorDetail from 'components/ErrorDetail';
import { LaunchButton, ReLaunchDropDown } from 'components/LaunchButton'; import { LaunchButton, ReLaunchDropDown } from 'components/LaunchButton';
@@ -29,12 +29,6 @@ import { toTitleCase } from 'util/strings';
import { formatDateString } from 'util/dates'; import { formatDateString } from 'util/dates';
import { Job } from 'types'; import { Job } from 'types';
const VariablesInput = styled(_VariablesInput)`
.pf-c-form__label {
--pf-c-form__label--FontWeight: var(--pf-global--FontWeight--bold);
}
`;
const StatusDetailValue = styled.div` const StatusDetailValue = styled.div`
align-items: center; align-items: center;
display: inline-grid; display: inline-grid;
@@ -420,9 +414,8 @@ function JobDetail({ job, inventorySourceLabels }) {
label={t`Last Modified`} label={t`Last Modified`}
date={job.modified} date={job.modified}
/> />
</DetailList>
{job.extra_vars && ( {job.extra_vars && (
<VariablesInput <VariablesDetail
css="margin: 20px 0" css="margin: 20px 0"
id="job-variables" id="job-variables"
readOnly readOnly
@@ -433,7 +426,7 @@ function JobDetail({ job, inventorySourceLabels }) {
/> />
)} )}
{job.artifacts && ( {job.artifacts && (
<VariablesInput <VariablesDetail
css="margin: 20px 0" css="margin: 20px 0"
id="job-artifacts" id="job-artifacts"
readOnly readOnly
@@ -443,6 +436,7 @@ function JobDetail({ job, inventorySourceLabels }) {
name="artifacts" name="artifacts"
/> />
)} )}
</DetailList>
<CardActionsRow> <CardActionsRow>
{job.type !== 'system_job' && {job.type !== 'system_job' &&
job.summary_fields.user_capabilities.start && job.summary_fields.user_capabilities.start &&

View File

@@ -251,7 +251,7 @@ describe('<JobDetail />', () => {
wrapper.find('button[aria-label="Delete"]').simulate('click'); wrapper.find('button[aria-label="Delete"]').simulate('click');
await sleep(1); await sleep(1);
wrapper.update(); wrapper.update();
const modal = wrapper.find('Modal'); const modal = wrapper.find('Modal[aria-label="Alert modal"]');
expect(modal.length).toBe(1); expect(modal.length).toBe(1);
modal.find('button[aria-label="Confirm Delete"]').simulate('click'); modal.find('button[aria-label="Confirm Delete"]').simulate('click');
expect(JobsAPI.destroy).toHaveBeenCalledTimes(1); expect(JobsAPI.destroy).toHaveBeenCalledTimes(1);
@@ -272,7 +272,7 @@ describe('<JobDetail />', () => {
); );
wrapper = mountWithContexts(<JobDetail job={mockJobData} />); wrapper = mountWithContexts(<JobDetail job={mockJobData} />);
wrapper.find('button[aria-label="Delete"]').simulate('click'); wrapper.find('button[aria-label="Delete"]').simulate('click');
const modal = wrapper.find('Modal'); const modal = wrapper.find('Modal[aria-label="Alert modal"]');
expect(modal.length).toBe(1); expect(modal.length).toBe(1);
await act(async () => { await act(async () => {
modal.find('button[aria-label="Confirm Delete"]').simulate('click'); modal.find('button[aria-label="Confirm Delete"]').simulate('click');