From 01173b12e5e42cee025050e915af7e30890bbd4e Mon Sep 17 00:00:00 2001 From: Gage Krumbach Date: Thu, 4 Apr 2024 14:20:42 -0500 Subject: [PATCH] Fix run type switch link in createRunPage and RunPage --- .../e2e/pipelines/PipelineCreateRuns.cy.ts | 31 +++++++++++++++++++ .../cypress/pages/pipelines/createRunPage.ts | 4 +++ .../pipelines/content/createRun/RunForm.tsx | 10 ++---- .../pipelines/content/createRun/RunPage.tsx | 27 +++++++++++++--- .../contentSections/RunTypeSection.tsx | 20 +++++------- 5 files changed, 67 insertions(+), 25 deletions(-) diff --git a/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineCreateRuns.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineCreateRuns.cy.ts index d37e1cecea..4bb988bbcf 100644 --- a/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineCreateRuns.cy.ts +++ b/frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineCreateRuns.cy.ts @@ -87,6 +87,20 @@ describe('Pipeline create runs', () => { }); }); + it('switches to scheduled runs from triggered', () => { + // Mock experiments, pipelines & versions for form select dropdowns + createRunPage.mockGetExperiments(mockExperiments); + createRunPage.mockGetPipelines([mockPipeline]); + createRunPage.mockGetPipelineVersions([mockPipelineVersion], mockPipelineVersion.pipeline_id); + + // Navigate to the 'Create run' page + pipelineRunsGlobal.findCreateRunButton().click(); + verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create`); + createRunPage.find(); + createRunPage.findRunTypeSwitchLink().click(); + cy.url().should('include', '?runType=scheduled'); + }); + it('creates an active run', () => { const createRunParams: Partial = { display_name: 'New run', @@ -477,6 +491,23 @@ describe('Pipeline create runs', () => { pipelineRunsGlobal.findSchedulesTab().click(); }); + it('switches to scheduled runs from triggered', () => { + // Mock experiments, pipelines & versions for form select dropdowns + createSchedulePage.mockGetExperiments(mockExperiments); + createSchedulePage.mockGetPipelines([mockPipeline]); + createSchedulePage.mockGetPipelineVersions( + [mockPipelineVersion], + mockPipelineVersion.pipeline_id, + ); + + // Navigate to the 'Create run' page + pipelineRunsGlobal.findScheduleRunButton().click(); + verifyRelativeURL(`/pipelineRuns/${projectName}/pipelineRun/create?runType=scheduled`); + createSchedulePage.find(); + createSchedulePage.findRunTypeSwitchLink().click(); + cy.url().should('include', '?runType=active'); + }); + it('creates a schedule', () => { const createRecurringRunParams: Partial = { display_name: 'New job', diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/createRunPage.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/createRunPage.ts index 5c8a06517f..5bf7d478be 100644 --- a/frontend/src/__tests__/cypress/cypress/pages/pipelines/createRunPage.ts +++ b/frontend/src/__tests__/cypress/cypress/pages/pipelines/createRunPage.ts @@ -42,6 +42,10 @@ export class CreateRunPage { return cy.findByTestId('run-description'); } + findRunTypeSwitchLink(): Cypress.Chainable> { + return this.find().findByTestId('run-type-section-alert-link'); + } + findExperimentSelect(): Cypress.Chainable> { return this.find().findByTestId('experiment-toggle-button'); } diff --git a/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx b/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx index d12b52f924..644c615fbb 100644 --- a/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx +++ b/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx @@ -1,11 +1,7 @@ import * as React from 'react'; import { Form, FormSection, Text } from '@patternfly/react-core'; import NameDescriptionField from '~/concepts/k8s/NameDescriptionField'; -import { - RunFormData, - RunTypeOption, - ScheduledRunType, -} from '~/concepts/pipelines/content/createRun/types'; +import { RunFormData, RunTypeOption } from '~/concepts/pipelines/content/createRun/types'; import { ValueOf } from '~/typeHelpers'; import { ParamsSection } from '~/concepts/pipelines/content/createRun/contentSections/ParamsSection'; import { getProjectDisplayName } from '~/pages/projects/utils'; @@ -102,13 +98,13 @@ const RunForm: React.FC = ({ data, runType, onValueChange }) => { }} /> - {runType === PipelineRunType.Scheduled && ( + {runType === PipelineRunType.Scheduled && data.runType.type === RunTypeOption.SCHEDULED && ( onValueChange('runType', { type: RunTypeOption.SCHEDULED, data: scheduleData }) } diff --git a/frontend/src/concepts/pipelines/content/createRun/RunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/RunPage.tsx index ce6177e9ec..6de5df5ca3 100644 --- a/frontend/src/concepts/pipelines/content/createRun/RunPage.tsx +++ b/frontend/src/concepts/pipelines/content/createRun/RunPage.tsx @@ -17,6 +17,7 @@ import usePipelineVersionById from '~/concepts/pipelines/apiHooks/usePipelineVer import usePipelineById from '~/concepts/pipelines/apiHooks/usePipelineById'; import { RunFormData, + RunType, RunTypeOption, ScheduledType, } from '~/concepts/pipelines/content/createRun/types'; @@ -63,9 +64,9 @@ const RunPage: React.FC = ({ cloneRun, contextPath, testId }) => { ), ); - const [formData, setFormDataValue] = useRunFormData(cloneRun, { - runType: { - ...(runType === PipelineRunType.Scheduled + const runTypeData: RunType = React.useMemo( + () => + runType === PipelineRunType.Scheduled ? { type: RunTypeOption.SCHEDULED, data: { @@ -73,13 +74,29 @@ const RunPage: React.FC = ({ cloneRun, contextPath, testId }) => { triggerType: triggerType || ScheduledType.PERIODIC, }, } - : { type: RunTypeOption.ONE_TRIGGER }), - }, + : { type: RunTypeOption.ONE_TRIGGER }, + [runType, triggerType], + ); + + const [formData, setFormDataValue] = useRunFormData(cloneRun, { + runType: runTypeData, pipeline: location.state?.lastPipeline || cloneRunPipeline, version: location.state?.lastVersion || cloneRunPipelineVersion, experiment: runExperiment, }); + // need to correctly set runType after switching between run types as the form data is not updated automatically + React.useEffect(() => { + // set the data if the url run type is different from the form data run type + if ( + (runType === PipelineRunType.Scheduled && + formData.runType.type === RunTypeOption.ONE_TRIGGER) || + (runType !== PipelineRunType.Scheduled && formData.runType.type === RunTypeOption.SCHEDULED) + ) { + setFormDataValue('runType', runTypeData); + } + }, [formData.runType.type, runType, runTypeData, setFormDataValue]); + const onValueChange = React.useCallback( (key: keyof RunFormData, value: ValueOf) => setFormDataValue(key, value), [setFormDataValue], diff --git a/frontend/src/concepts/pipelines/content/createRun/contentSections/RunTypeSection.tsx b/frontend/src/concepts/pipelines/content/createRun/contentSections/RunTypeSection.tsx index b71556d29e..db301b936b 100644 --- a/frontend/src/concepts/pipelines/content/createRun/contentSections/RunTypeSection.tsx +++ b/frontend/src/concepts/pipelines/content/createRun/contentSections/RunTypeSection.tsx @@ -8,8 +8,7 @@ import { CreateRunPageSections, runPageSectionTitles, } from '~/concepts/pipelines/content/createRun/const'; -import { PipelineRunSearchParam } from '~/concepts/pipelines/content/types'; -import { runsBaseRoute } from '~/routes'; +import { createRunRoute, scheduleRunRoute } from '~/routes'; import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas'; interface RunTypeSectionProps { @@ -26,7 +25,8 @@ export const RunTypeSection: React.FC = ({ runType }) => { let alertProps = { title: 'Go to Schedules to create schedules that execute recurring runs', label: `Go to ${PipelineRunTabTitle.Schedules}`, - navSearch: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Scheduled}`, + search: '?runType=scheduled', + pathname: scheduleRunRoute(namespace, isExperimentsAvailable ? experimentId : undefined), }; if (runType === PipelineRunType.Scheduled) { @@ -34,7 +34,8 @@ export const RunTypeSection: React.FC = ({ runType }) => { alertProps = { title: 'Go to Active runs to create a run that executes once immediately after creation.', label: `Go to ${PipelineRunTabTitle.Active} runs`, - navSearch: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Active}`, + search: '?runType=active', + pathname: createRunRoute(namespace, isExperimentsAvailable ? experimentId : undefined), }; } @@ -54,15 +55,8 @@ export const RunTypeSection: React.FC = ({ runType }) => {