[RHOAIENG-3887] Run Schedules - UX cleanup

frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelineRuns.cy.ts

@@ -224,7 +224,7 @@ describe('Pipeline runs', () => {
           pipelineRunsGlobal.findArchivedRunsTab().click();
           verifyRelativeURL(`/pipelineRuns/${projectName}?runType=archived`);
           pipelineRunsGlobal.findActiveRunsTab().click();
-          verifyRelativeURL(`/pipelineRuns/${projectName}`);
+          verifyRelativeURL(`/pipelineRuns/${projectName}?runType=active`);
           pipelineRunsGlobal.findSchedulesTab().click();
           verifyRelativeURL(`/pipelineRuns/${projectName}?runType=scheduled`);
         });

frontend/src/__tests__/cypress/cypress/e2e/pipelines/Pipelines.cy.ts

@@ -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();
@@ -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);
@@ -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`);
   });
 });
 

frontend/src/__tests__/cypress/cypress/e2e/pipelines/PipelinesTopology.cy.ts

@@ -204,11 +204,25 @@ 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}`);
+        verifyRelativeURL(`/pipelineRuns/${projectId}?runType=active`);
+      });
+
+      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`);
       });
     });
   });

frontend/src/concepts/pipelines/content/createRun/RunForm.tsx

@@ -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,
@@ -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';
 
@@ -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(
@@ -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]}
@@ -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}
@@ -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}

frontend/src/concepts/pipelines/content/createRun/RunPage.tsx

@@ -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: {
@@ -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}

frontend/src/concepts/pipelines/content/createRun/const.ts

@@ -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',
 };

frontend/src/concepts/pipelines/content/createRun/contentSections/RunTypeSection.tsx

@@ -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>
+  );
+};

frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx

@@ -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={() =>
@@ -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={() =>
@@ -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>,