Merge pull request #2842 from DaoDaoNoCode/jira-rhoaieng-4985

Microcopy for pipelines v2

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

@@ -76,7 +76,7 @@ const mockActiveRuns = [
 const mockExperimentIds = [...new Set(mockActiveRuns.map((mockRun) => mockRun.experiment_id))];
 const mockVersionIds = [
   ...new Set(
-    mockActiveRuns.map((mockRun) => mockRun.pipeline_version_reference.pipeline_version_id),
+    mockActiveRuns.map((mockRun) => mockRun.pipeline_version_reference?.pipeline_version_id),
   ),
 ];
 const mockExperiments = mockExperimentIds.map((experimentId) =>
@@ -355,7 +355,7 @@ describe('Pipeline runs', () => {
           const selectedVersion = mockVersions.find(
             (mockVersion) =>
               mockVersion.pipeline_version_id ===
-              mockActiveRuns[0].pipeline_version_reference.pipeline_version_id,
+              mockActiveRuns[0].pipeline_version_reference?.pipeline_version_id,
           );
           if (!selectedVersion) {
             return;
@@ -439,7 +439,7 @@ describe('Pipeline runs', () => {
           activeRunsTable.mockGetActiveRuns(
             mockActiveRuns.filter(
               (mockRun) =>
-                mockRun.pipeline_version_reference.pipeline_version_id === 'test-version-1',
+                mockRun.pipeline_version_reference?.pipeline_version_id === 'test-version-1',
             ),
             projectName,
             1,
@@ -688,7 +688,7 @@ describe('Pipeline runs', () => {
           archivedRunsTable.mockGetArchivedRuns(
             mockArchivedRuns.filter(
               (mockRun) =>
-                mockRun.pipeline_version_reference.pipeline_version_id === 'test-version-1',
+                mockRun.pipeline_version_reference?.pipeline_version_id === 'test-version-1',
             ),
             projectName,
             1,

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

@@ -25,11 +25,11 @@ class PipelineRunsGlobal {
   }
 
   findActiveRunsTab() {
-    return cy.findByRole('tab', { name: 'Active tab' });
+    return cy.findByTestId('active-runs-tab');
   }
 
   findArchivedRunsTab() {
-    return cy.findByRole('tab', { name: 'Archived tab' });
+    return cy.findByTestId('archived-runs-tab');
   }
 
   findProjectSelect() {

frontend/src/concepts/pipelines/content/DeletePipelineRunsModal.tsx

@@ -13,11 +13,11 @@ type DeletePipelineRunsModalProps = {
   onClose: (deleted?: boolean) => void;
 } & (
   | {
-      type: PipelineRunType.Archived;
+      type: PipelineRunType.ARCHIVED;
       toDeleteResources: PipelineRunKFv2[];
     }
   | {
-      type: PipelineRunType.Scheduled;
+      type: PipelineRunType.SCHEDULED;
       toDeleteResources: PipelineRunJobKFv2[];
     }
 );
@@ -47,10 +47,10 @@ const DeletePipelineRunsModal: React.FC<DeletePipelineRunsModalProps> = ({
 
         let callFunc: (opts: K8sAPIOptions, id: string) => Promise<void>;
         switch (type) {
-          case PipelineRunType.Archived:
+          case PipelineRunType.ARCHIVED:
             callFunc = api.deletePipelineRun;
             break;
-          case PipelineRunType.Scheduled:
+          case PipelineRunType.SCHEDULED:
             callFunc = api.deletePipelineRunJob;
             break;
           default:
@@ -65,7 +65,7 @@ const DeletePipelineRunsModal: React.FC<DeletePipelineRunsModalProps> = ({
         if (resourceCount === 1) {
           callFunc(
             { signal: abortSignal },
-            type === PipelineRunType.Scheduled
+            type === PipelineRunType.SCHEDULED
               ? toDeleteResources[0].recurring_run_id
               : toDeleteResources[0].run_id,
           )
@@ -81,7 +81,7 @@ const DeletePipelineRunsModal: React.FC<DeletePipelineRunsModalProps> = ({
             toDeleteResources.map((_run, i) =>
               callFunc(
                 { signal: abortSignal },
-                type === PipelineRunType.Scheduled
+                type === PipelineRunType.SCHEDULED
                   ? toDeleteResources[i].recurring_run_id
                   : toDeleteResources[i].run_id,
               ),

frontend/src/concepts/pipelines/content/compareRuns/metricsSection/roc/RocCurveCompare.tsx

@@ -111,7 +111,7 @@ const RocCurveCompare: React.FC<RocCurveCompareProps> = ({ runArtifacts, isLoade
     <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
       <Split hasGutter>
         <SplitItem>
-          <Text>ROC Curve: multiple artifacts</Text>
+          <Text>ROC curve: multiple artifacts</Text>
         </SplitItem>
         <SplitItem>
           <DashboardHelpTooltip content="The receiver operating characteristic (ROC) curve shows the performance of a model at varying threshold values by plotting the true positive rate against the false positive rate." />

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

@@ -14,7 +14,7 @@ const CloneRunPage: React.FC<PathProps> = ({ breadcrumbPath, contextPath }) => {
   const [run, loaded, error] = useCloneRunData();
   const { runType: runTypeString } = useGetSearchParamValues([PipelineRunSearchParam.RunType]);
   const runType = asEnumMember(runTypeString, PipelineRunType);
-  const title = `Duplicate ${runTypeCategory[runType || PipelineRunType.Active]}`;
+  const title = `Duplicate ${runTypeCategory[runType || PipelineRunType.ACTIVE]}`;
 
   return (
     <ApplicationsPage

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

@@ -9,7 +9,7 @@ import { useGetSearchParamValues } from '~/utilities/useGetSearchParamValues';
 
 const CreateRunPage: React.FC<PathProps> = ({ breadcrumbPath, contextPath }) => {
   const { runType } = useGetSearchParamValues([PipelineRunSearchParam.RunType]);
-  const title = `${runType === PipelineRunType.Scheduled ? 'Schedule' : 'Create'} run`;
+  const title = `${runType === PipelineRunType.SCHEDULED ? 'Schedule' : 'Create'} run`;
 
   return (
     <ApplicationsPage

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Form, FormSection, Text } from '@patternfly/react-core';
+import { Form, FormSection } from '@patternfly/react-core';
 import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
 import { RunFormData, RunTypeOption } from '~/concepts/pipelines/content/createRun/types';
 import { ValueOf } from '~/typeHelpers';
@@ -9,8 +9,7 @@ import { useLatestPipelineVersion } from '~/concepts/pipelines/apiHooks/useLates
 import RunTypeSectionScheduled from '~/concepts/pipelines/content/createRun/contentSections/RunTypeSectionScheduled';
 import { PipelineVersionKFv2, RuntimeConfigParameters } from '~/concepts/pipelines/kfTypes';
 import { PipelineRunType } from '~/pages/pipelines/global/runs';
-import ExperimentSection from '~/concepts/pipelines/content/createRun/contentSections/ExperimentSection';
-import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
+import ProjectAndExperimentSection from '~/concepts/pipelines/content/createRun/contentSections/ProjectAndExperimentSection';
 import PipelineSection from './contentSections/PipelineSection';
 import { RunTypeSection } from './contentSections/RunTypeSection';
 import { CreateRunPageSections, runPageSectionTitles } from './const';
@@ -26,8 +25,7 @@ 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 isSchedule = runType === PipelineRunType.Scheduled;
+  const isSchedule = runType === PipelineRunType.SCHEDULED;
 
   const updateInputParams = React.useCallback(
     (version: PipelineVersionKFv2 | undefined) =>
@@ -55,19 +53,11 @@ const RunForm: React.FC<RunFormProps> = ({ data, runType, onValueChange }) => {
     <Form onSubmit={(e) => e.preventDefault()} maxWidth="500px">
       <RunTypeSection runType={runType} />
 
-      <FormSection
-        id={CreateRunPageSections.PROJECT}
-        title={runPageSectionTitles[CreateRunPageSections.PROJECT]}
-      >
-        <Text>{getProjectDisplayName(data.project)}</Text>
-      </FormSection>
-
-      {isExperimentsAvailable && (
-        <ExperimentSection
-          value={data.experiment}
-          onChange={(experiment) => onValueChange('experiment', experiment)}
-        />
-      )}
+      <ProjectAndExperimentSection
+        projectName={getProjectDisplayName(data.project)}
+        value={data.experiment}
+        onChange={(experiment) => onValueChange('experiment', experiment)}
+      />
 
       <FormSection
         id={isSchedule ? CreateRunPageSections.SCHEDULE_DETAILS : CreateRunPageSections.RUN_DETAILS}

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

@@ -27,8 +27,8 @@ import { PipelineRunSearchParam } from '~/concepts/pipelines/content/types';
 import { PipelineRunType } from '~/pages/pipelines/global/runs';
 import useExperimentById from '~/concepts/pipelines/apiHooks/useExperimentById';
 import { asEnumMember } from '~/utilities/utils';
-import { useIsAreaAvailable, SupportedArea } from '~/concepts/areas';
 import { routePipelineRunsNamespace } from '~/routes';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 
 type RunPageProps = {
   cloneRun?: PipelineRunKFv2 | PipelineRunJobKFv2 | null;
@@ -44,7 +44,7 @@ const RunPage: React.FC<RunPageProps> = ({ cloneRun, contextPath, testId }) => {
     PipelineRunSearchParam.TriggerType,
   ]);
   const triggerType = asEnumMember(triggerTypeString, ScheduledType);
-  const isSchedule = runType === PipelineRunType.Scheduled;
+  const isSchedule = runType === PipelineRunType.SCHEDULED;
 
   const cloneRunPipelineId = cloneRun?.pipeline_version_reference?.pipeline_id || '';
   const cloneRunVersionId = cloneRun?.pipeline_version_reference?.pipeline_version_id || '';
@@ -53,21 +53,19 @@ const RunPage: React.FC<RunPageProps> = ({ cloneRun, contextPath, testId }) => {
   const [cloneRunPipelineVersion] = usePipelineVersionById(cloneRunPipelineId, cloneRunVersionId);
   const [cloneRunPipeline] = usePipelineById(cloneRunPipelineId);
   const [runExperiment] = useExperimentById(cloneRunExperimentId || experimentId);
-
   const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status;
 
   const jumpToSections = Object.values(CreateRunPageSections).filter(
     (section) =>
       !(
-        (section === CreateRunPageSections.EXPERIMENT && !isExperimentsAvailable) ||
         (section === CreateRunPageSections.SCHEDULE_DETAILS && !isSchedule) ||
         (section === CreateRunPageSections.RUN_DETAILS && isSchedule)
       ),
   );
 
   const runTypeData: RunType = React.useMemo(
     () =>
-      runType === PipelineRunType.Scheduled
+      runType === PipelineRunType.SCHEDULED
         ? {
             type: RunTypeOption.SCHEDULED,
             data: {
@@ -90,9 +88,9 @@ const RunPage: React.FC<RunPageProps> = ({ cloneRun, contextPath, testId }) => {
   React.useEffect(() => {
     // set the data if the url run type is different from the form data run type
     if (
-      (runType === PipelineRunType.Scheduled &&
+      (runType === PipelineRunType.SCHEDULED &&
         formData.runType.type === RunTypeOption.ONE_TRIGGER) ||
-      (runType !== PipelineRunType.Scheduled && formData.runType.type === RunTypeOption.SCHEDULED)
+      (runType !== PipelineRunType.SCHEDULED && formData.runType.type === RunTypeOption.SCHEDULED)
     ) {
       setFormDataValue('runType', runTypeData);
     }
@@ -103,10 +101,21 @@ const RunPage: React.FC<RunPageProps> = ({ cloneRun, contextPath, testId }) => {
     [setFormDataValue],
   );
 
+  const runPageSectionTitlesEdited = isExperimentsAvailable
+    ? runPageSectionTitles
+    : {
+        ...runPageSectionTitles,
+        [CreateRunPageSections.PROJECT_AND_EXPERIMENT]: 'Project',
+      };
+
   return (
     <div data-testid={testId}>
       <PageSection isFilled variant="light">
-        <GenericSidebar sections={jumpToSections} titles={runPageSectionTitles} maxWidth={175}>
+        <GenericSidebar
+          sections={jumpToSections}
+          titles={runPageSectionTitlesEdited}
+          maxWidth={175}
+        >
           <RunForm
             data={formData}
             runType={runType as PipelineRunType}

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

@@ -72,7 +72,7 @@ const RunPageFooter: React.FC<RunPageFooterProps> = ({ data, contextPath }) => {
                   });
               }}
             >
-              {`${runType === PipelineRunType.Scheduled ? 'Schedule' : 'Create'} run`}
+              {`${runType === PipelineRunType.SCHEDULED ? 'Schedule' : 'Create'} run`}
             </Button>
           </SplitItem>
           <SplitItem>

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

@@ -19,8 +19,7 @@ export const RUN_OPTION_LABEL_SIZE = 100;
 
 export enum CreateRunPageSections {
   RUN_TYPE = 'run-section-run-type',
-  PROJECT = 'run-section-project',
-  EXPERIMENT = 'run-section-experiment',
+  PROJECT_AND_EXPERIMENT = 'run-section-project-and-experiment',
   RUN_DETAILS = 'run-section-details',
   SCHEDULE_DETAILS = 'run-section-schedule-details',
   PIPELINE = 'run-section-pipeline',
@@ -29,8 +28,7 @@ export enum CreateRunPageSections {
 
 export const runPageSectionTitles: Record<CreateRunPageSections, string> = {
   [CreateRunPageSections.RUN_TYPE]: 'Run type',
-  [CreateRunPageSections.PROJECT]: 'Project',
-  [CreateRunPageSections.EXPERIMENT]: 'Experiment',
+  [CreateRunPageSections.PROJECT_AND_EXPERIMENT]: 'Project and experiment',
   [CreateRunPageSections.RUN_DETAILS]: 'Run details',
   [CreateRunPageSections.SCHEDULE_DETAILS]: 'Schedule details',
   [CreateRunPageSections.PIPELINE]: 'Pipeline',

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

@@ -108,6 +108,7 @@ export const ParamsSection: React.FC<ParamsSectionProps> = ({
       data-testid={CreateRunPageSections.PARAMS}
       title={runPageSectionTitles[CreateRunPageSections.PARAMS]}
     >
+      Specify parameters required by pipelines.
       {renderContent()}
     </FormSection>
   );

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { FormGroup, FormSection, Stack, StackItem, Text } from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import { ExperimentKFv2 } from '~/concepts/pipelines/kfTypes';
+import {
+  CreateRunPageSections,
+  runPageSectionTitles,
+} from '~/concepts/pipelines/content/createRun/const';
+import ExperimentSelector from '~/concepts/pipelines/content/experiment/ExperimentSelector';
+import CreateExperimentButton from '~/concepts/pipelines/content/experiment/CreateExperimentButton';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
+
+type ExperimentSectionProps = {
+  projectName: string;
+  value: ExperimentKFv2 | null;
+  onChange: (experiment: ExperimentKFv2) => void;
+};
+
+const ProjectAndExperimentSection: React.FC<ExperimentSectionProps> = ({
+  projectName,
+  value,
+  onChange,
+}) => {
+  const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status;
+
+  return (
+    <FormSection
+      id={CreateRunPageSections.PROJECT_AND_EXPERIMENT}
+      title={
+        isExperimentsAvailable
+          ? runPageSectionTitles[CreateRunPageSections.PROJECT_AND_EXPERIMENT]
+          : 'Project'
+      }
+    >
+      <FormGroup label="Project">
+        <Text>{projectName}</Text>
+      </FormGroup>
+      {isExperimentsAvailable && (
+        <FormGroup label="Experiment" aria-label="Experiment" isRequired>
+          <Stack hasGutter>
+            <StackItem>
+              <ExperimentSelector selection={value?.display_name} onSelect={onChange} />
+            </StackItem>
+            <StackItem>
+              <CreateExperimentButton
+                variant="link"
+                icon={<PlusCircleIcon />}
+                onCreate={(experiment) => onChange(experiment)}
+              >
+                Create new experiment
+              </CreateExperimentButton>
+            </StackItem>
+          </Stack>
+        </FormGroup>
+      )}
+    </FormSection>
+  );
+};
+
+export default ProjectAndExperimentSection;