Fix run type switch link in createRunPage and RunPage

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<PipelineRunKFv2> = {
         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<PipelineRunJobKFv2> = {
         display_name: 'New job',

frontend/src/__tests__/cypress/cypress/pages/pipelines/createRunPage.ts

@@ -42,6 +42,10 @@ export class CreateRunPage {
     return cy.findByTestId('run-description');
   }
 
+  findRunTypeSwitchLink(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('run-type-section-alert-link');
+  }
+
   findExperimentSelect(): Cypress.Chainable<JQuery<HTMLElement>> {
     return this.find().findByTestId('experiment-toggle-button');
   }

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

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,23 +64,39 @@ const RunPage: React.FC<RunPageProps> = ({ cloneRun, contextPath, testId }) => {
       ),
   );
 
-  const [formData, setFormDataValue] = useRunFormData(cloneRun, {
-    runType: {
-      ...(runType === PipelineRunType.Scheduled
+  const runTypeData: RunType = React.useMemo(
+    () =>
+      runType === PipelineRunType.Scheduled
         ? {
             type: RunTypeOption.SCHEDULED,
             data: {
               ...DEFAULT_PERIODIC_DATA,
               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<RunFormData>) => setFormDataValue(key, value),
     [setFormDataValue],

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,15 +25,17 @@ export const RunTypeSection: React.FC<RunTypeSectionProps> = ({ 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) {
     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} runs`,
-      navSearch: `?${PipelineRunSearchParam.RunType}=${PipelineRunType.Active}`,
+      search: '?runType=active',
+      pathname: createRunRoute(namespace, isExperimentsAvailable ? experimentId : undefined),
     };
   }
 
@@ -54,15 +55,8 @@ export const RunTypeSection: React.FC<RunTypeSectionProps> = ({ runType }) => {
             <Button
               isInline
               variant="link"
-              onClick={() =>
-                navigate({
-                  pathname: runsBaseRoute(
-                    namespace,
-                    isExperimentsAvailable ? experimentId : undefined,
-                  ),
-                  search: alertProps.navSearch,
-                })
-              }
+              onClick={() => navigate({ pathname: alertProps.pathname, search: alertProps.search })}
+              data-testid="run-type-section-alert-link"
             >
               {alertProps.label}
             </Button>