Skip to content

Commit

Permalink
[RHOAIENG-3887] Run Schedules - UX cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
jpuzz0 committed Mar 14, 2024
1 parent a9d30c5 commit 30dd2bc
Show file tree
Hide file tree
Showing 14 changed files with 338 additions and 53 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,20 @@ describe('Pipelines', () => {
verifyRelativeURL(`/pipelines/${projectName}/pipelineRun/create`);
});

it('navigates to "Schedule run" page from pipeline row', () => {
pipelinesTable.find();
pipelinesTable
.findRowByName(initialMockPipeline.display_name)
.findByLabelText('Kebab toggle')
.click();

pipelinesTable
.findRowByName(initialMockPipeline.display_name)
.findByText('Schedule run')
.click();
verifyRelativeURL(`/pipelines/${projectName}/pipelineRun/create?runType=scheduled`);
});

it('navigate to create run page from pipeline version row', () => {
// Wait for the pipelines table to load
pipelinesTable.find();
Expand All @@ -225,7 +239,22 @@ describe('Pipelines', () => {
verifyRelativeURL(`/pipelines/${projectName}/pipelineRun/create`);
});

it('navigate to view runs page', () => {
it('navigates to "Schedule run" page from pipeline version row', () => {
pipelinesTable.find();
pipelinesTable.toggleExpandRowByIndex(0);
pipelinesTable
.findRowByName(initialMockPipelineVersion.display_name)
.findByLabelText('Kebab toggle')
.click();

pipelinesTable
.findRowByName(initialMockPipelineVersion.display_name)
.findByText('Schedule run')
.click();
verifyRelativeURL(`/pipelines/${projectName}/pipelineRun/create?runType=scheduled`);
});

it('navigate to view runs page from pipeline version row', () => {
// Wait for the pipelines table to load
pipelinesTable.find();
pipelinesTable.toggleExpandRowByIndex(0);
Expand All @@ -239,7 +268,22 @@ describe('Pipelines', () => {
.findRowByName(initialMockPipelineVersion.display_name)
.findByText('View runs')
.click();
verifyRelativeURL(`/pipelineRuns/${projectName}`);
verifyRelativeURL(`/pipelineRuns/${projectName}?runType=active`);
});

it('navigates to "Schedules" page from pipeline version row', () => {
pipelinesTable.find();
pipelinesTable.toggleExpandRowByIndex(0);
pipelinesTable
.findRowByName(initialMockPipelineVersion.display_name)
.findByLabelText('Kebab toggle')
.click();

pipelinesTable
.findRowByName(initialMockPipelineVersion.display_name)
.findByText('View schedules')
.click();
verifyRelativeURL(`/pipelineRuns/${projectName}?runType=scheduled`);
});
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -204,12 +204,26 @@ describe('Pipeline topology', () => {
verifyRelativeURL(`/pipelineRuns/${projectId}/pipelineRun/create`);
});

it('navigates to "Schedule run" page on "Schedule run" click', () => {
pipelineDetails.visit(projectId, mockVersion.pipeline_id, mockVersion.pipeline_version_id);
pipelineDetails.findActionsDropdown().click();
cy.findByText('Schedule run').click();
verifyRelativeURL(`/pipelineRuns/${projectId}/pipelineRun/create?runType=scheduled`);
});

it('Test pipeline details view runs navigation', () => {
pipelineDetails.visit(projectId, mockVersion.pipeline_id, mockVersion.pipeline_version_id);
pipelineDetails.findActionsDropdown().click();
cy.findByText('View runs').click();
verifyRelativeURL(`/pipelineRuns/${projectId}`);
});

it('navigates to "Schedules" on "View schedules" click', () => {
pipelineDetails.visit(projectId, mockVersion.pipeline_id, mockVersion.pipeline_version_id);
pipelineDetails.findActionsDropdown().click();
cy.findByText('View schedules').click();
verifyRelativeURL(`/pipelineRuns/${projectId}?runType=scheduled`);
});
});
});

Expand Down
45 changes: 27 additions & 18 deletions frontend/src/concepts/pipelines/content/createRun/RunForm.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { Form, FormGroup, FormSection, Text } from '@patternfly/react-core';
import { Form, FormSection, Text } from '@patternfly/react-core';
import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
import {
RunFormData,
Expand All @@ -17,6 +17,7 @@ import { PipelineRunType } from '~/pages/pipelines/global/runs';
import ExperimentSection from '~/concepts/pipelines/content/createRun/contentSections/ExperimentSection';
import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
import PipelineSection from './contentSections/PipelineSection';
import { RunTypeSection } from './contentSections/RunTypeSection';
import { CreateRunPageSections, runPageSectionTitles } from './const';
import { getInputDefinitionParams } from './utils';

Expand All @@ -30,7 +31,6 @@ const RunForm: React.FC<RunFormProps> = ({ data, runType, onValueChange }) => {
const [latestVersion] = useLatestPipelineVersion(data.pipeline?.pipeline_id);
const selectedVersion = data.version || latestVersion;
const paramsRef = React.useRef(data.params);

const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status;

const updateInputParams = React.useCallback(
Expand All @@ -56,17 +56,16 @@ const RunForm: React.FC<RunFormProps> = ({ data, runType, onValueChange }) => {
}, [latestVersion, onValueChange, updateInputParams]);

return (
<Form
maxWidth="500px"
onSubmit={(e) => {
e.preventDefault();
}}
>
<FormSection id="run-section-project-name" title="Project">
<FormGroup label="Project">
<Text>{getProjectDisplayName(data.project)}</Text>
</FormGroup>
<Form onSubmit={(e) => e.preventDefault()} maxWidth="500px">
<RunTypeSection runType={runType} />

<FormSection
id={CreateRunPageSections.PROJECT}
title={runPageSectionTitles[CreateRunPageSections.PROJECT]}
>
<Text>{getProjectDisplayName(data.project)}</Text>
</FormSection>

<FormSection
id={CreateRunPageSections.NAME_DESC}
aria-label={runPageSectionTitles[CreateRunPageSections.NAME_DESC]}
Expand All @@ -78,19 +77,22 @@ const RunForm: React.FC<RunFormProps> = ({ data, runType, onValueChange }) => {
setData={(nameDesc) => onValueChange('nameDesc', nameDesc)}
/>
</FormSection>

{isExperimentsAvailable && (
<ExperimentSection
value={data.experiment}
onChange={(experiment) => onValueChange('experiment', experiment)}
/>
)}

<PipelineSection
value={data.pipeline}
onChange={async (pipeline) => {
onValueChange('pipeline', pipeline);
onValueChange('version', undefined);
}}
/>

<PipelineVersionSection
selectedPipeline={data.pipeline}
value={selectedVersion}
Expand All @@ -99,14 +101,21 @@ const RunForm: React.FC<RunFormProps> = ({ data, runType, onValueChange }) => {
updateInputParams(version);
}}
/>

{runType === PipelineRunType.Scheduled && (
<RunTypeSectionScheduled
data={(data.runType as ScheduledRunType).data}
onChange={(scheduleData) =>
onValueChange('runType', { type: RunTypeOption.SCHEDULED, data: scheduleData })
}
/>
<FormSection
id={CreateRunPageSections.SCHEDULE_SETTINGS}
title={runPageSectionTitles[CreateRunPageSections.SCHEDULE_SETTINGS]}
>
<RunTypeSectionScheduled
data={(data.runType as ScheduledRunType).data}
onChange={(scheduleData) =>
onValueChange('runType', { type: RunTypeOption.SCHEDULED, data: scheduleData })
}
/>
</FormSection>
)}

<ParamsSection
runParams={data.params}
version={selectedVersion}
Expand Down
15 changes: 9 additions & 6 deletions frontend/src/concepts/pipelines/content/createRun/RunPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,14 @@ const RunPage: React.FC<RunPageProps> = ({ cloneRun, contextPath, testId }) => {

const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status;

const sections = isExperimentsAvailable
? Object.values(CreateRunPageSections)
: Object.values(CreateRunPageSections).filter(
(section) => section !== CreateRunPageSections.EXPERIMENT,
);
const jumpToSections = Object.values(CreateRunPageSections).filter(
(section) =>
!(
(section === CreateRunPageSections.EXPERIMENT && !isExperimentsAvailable) ||
(section === CreateRunPageSections.SCHEDULE_SETTINGS &&
runType !== PipelineRunType.Scheduled)
),
);

const [formData, setFormDataValue] = useRunFormData(cloneRun, {
runType: {
Expand All @@ -85,7 +88,7 @@ const RunPage: React.FC<RunPageProps> = ({ cloneRun, contextPath, testId }) => {
return (
<div data-testid={testId}>
<PageSection isFilled variant="light">
<GenericSidebar sections={sections} titles={runPageSectionTitles} maxWidth={175}>
<GenericSidebar sections={jumpToSections} titles={runPageSectionTitles} maxWidth={175}>
<RunForm
data={formData}
runType={runType as PipelineRunType}
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/concepts/pipelines/content/createRun/const.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,23 @@ export const DEFAULT_TIME = '12:00 AM';
export const RUN_OPTION_LABEL_SIZE = 100;

export enum CreateRunPageSections {
RUN_TYPE = 'run-section-run-type',
PROJECT = 'run-section-project',
NAME_DESC = 'run-section-name-desc',
EXPERIMENT = 'run-section-experiment',
PIPELINE = 'run-section-pipeline',
PIPELINE_VERSION = 'run-section-pipeline-version',
SCHEDULE_SETTINGS = 'run-section-schedule-settings',
PARAMS = 'run-section-params',
}

export const runPageSectionTitles: Record<CreateRunPageSections, string> = {
[CreateRunPageSections.RUN_TYPE]: 'Run type',
[CreateRunPageSections.PROJECT]: 'Project',
[CreateRunPageSections.NAME_DESC]: 'Name and description',
[CreateRunPageSections.EXPERIMENT]: 'Experiment',
[CreateRunPageSections.PIPELINE]: 'Pipeline',
[CreateRunPageSections.PIPELINE_VERSION]: 'Pipeline version',
[CreateRunPageSections.SCHEDULE_SETTINGS]: 'Schedule settings',
[CreateRunPageSections.PARAMS]: 'Parameters',
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React from 'react';

import { Alert, AlertActionCloseButton, Button, FormSection } from '@patternfly/react-core';
import { useNavigate, useParams } from 'react-router-dom';

import { PipelineRunTabTitle, PipelineRunType } from '~/pages/pipelines/global/runs';
import {
CreateRunPageSections,
runPageSectionTitles,
} from '~/concepts/pipelines/content/createRun/const';
import { PipelineRunSearchParam } from '~/concepts/pipelines/content/types';
import { routePipelineRunsNamespace } from '~/routes';

interface RunTypeSectionProps {
runType: PipelineRunType;
}

export const RunTypeSection: React.FC<RunTypeSectionProps> = ({ runType }) => {
const navigate = useNavigate();
const { namespace } = useParams();
const [isAlertOpen, setIsAlertOpen] = React.useState(true);

let runTypeValue = 'Run once immediately after creation';
let alertProps = {
title: 'Go to Schedules to create schedules that execute recurring runs',
label: `Go to ${PipelineRunTabTitle.Schedules}`,
navSearch: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Scheduled}`,
};

if (runType === PipelineRunType.Scheduled) {
runTypeValue = 'Schedule recurring run';
alertProps = {
title: 'Go to Active runs to create a run that executes once immediately after creation.',
label: `Go to ${PipelineRunTabTitle.Active}`,
navSearch: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Active}`,
};
}

return (
<FormSection
id={CreateRunPageSections.RUN_TYPE}
title={runPageSectionTitles[CreateRunPageSections.RUN_TYPE]}
>
{runTypeValue}

{isAlertOpen && (
<Alert
isInline
variant="info"
title={alertProps.title}
actionLinks={
<Button
isInline
variant="link"
onClick={() =>
navigate({
pathname: routePipelineRunsNamespace(namespace),
search: alertProps.navSearch,
})
}
>
{alertProps.label}
</Button>
}
actionClose={<AlertActionCloseButton onClose={() => setIsAlertOpen(false)} />}
/>
)}
</FormSection>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const PipelineDetailsActions: React.FC<PipelineDetailsActionsProps> = ({
<DropdownItem key="upload-version" onClick={() => setIsVersionImportModalOpen(true)}>
Upload new version
</DropdownItem>,
<DropdownSeparator key="separator-1" />,
<DropdownSeparator key="separator-create" />,
<DropdownItem
key="create-run"
onClick={() =>
Expand All @@ -62,6 +62,23 @@ const PipelineDetailsActions: React.FC<PipelineDetailsActionsProps> = ({
>
Create run
</DropdownItem>,
<DropdownItem
key="schedule-run"
onClick={() =>
navigate(
{
pathname: routePipelineRunCreateNamespace(namespace),
search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Scheduled}`,
},
{
state: { lastPipeline: pipeline, lastVersion: pipelineVersion },
},
)
}
>
Schedule run
</DropdownItem>,
<DropdownSeparator key="separator-view" />,
<DropdownItem
key="view-runs"
onClick={() =>
Expand All @@ -78,7 +95,23 @@ const PipelineDetailsActions: React.FC<PipelineDetailsActionsProps> = ({
>
View runs
</DropdownItem>,
<DropdownSeparator key="separator-2" />,
<DropdownItem
key="view-schedules"
onClick={() =>
navigate(
{
pathname: routePipelineRunsNamespace(namespace),
search: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Scheduled}`,
},
{
state: { lastVersion: pipelineVersion },
},
)
}
>
View schedules
</DropdownItem>,
<DropdownSeparator key="separator-delete" />,
<DropdownItem key="delete-pipeline-version" onClick={() => onDelete()}>
Delete pipeline version
</DropdownItem>,
Expand Down
Loading

0 comments on commit 30dd2bc

Please sign in to comment.