Merge pull request #2697 from jpuzz0/RHOAIENG-4648-ux-content-updates

[RHOAIENG-4648] UX content updates
opendatahub-io · Apr 11, 2024 · 5c9b8be · 5c9b8be
2 parents e120a40 + fb977f8
commit 5c9b8be
Show file tree

Hide file tree

Showing 18 changed files with 129 additions and 150 deletions.
diff --git a/frontend/src/concepts/pipelines/content/DeletePipelineRunsModal.tsx b/frontend/src/concepts/pipelines/content/DeletePipelineRunsModal.tsx
@@ -102,8 +102,10 @@ const DeletePipelineRunsModal: React.FC<DeletePipelineRunsModalProps> = ({
       }
       testId={`delete-${typeCategory}-modal`}
     >
-      {resourceCount <= 1 ? (
-        <>This action cannot be undone.</>
+      {resourceCount === 1 ? (
+        <>
+          <b>{toDeleteResources[0].display_name}</b> and all of its resources will be deleted.
+        </>
       ) : (
         <Stack hasGutter>
           <StackItem>

diff --git a/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx b/frontend/src/concepts/pipelines/content/createRun/RunForm.tsx
@@ -5,7 +5,6 @@ import { RunFormData, RunTypeOption } from '~/concepts/pipelines/content/createR
 import { ValueOf } from '~/typeHelpers';
 import { ParamsSection } from '~/concepts/pipelines/content/createRun/contentSections/ParamsSection';
 import { getProjectDisplayName } from '~/pages/projects/utils';
-import PipelineVersionSection from '~/concepts/pipelines/content/createRun/contentSections/PipelineVersionSection';
 import { useLatestPipelineVersion } from '~/concepts/pipelines/apiHooks/useLatestPipelineVersion';
 import RunTypeSectionScheduled from '~/concepts/pipelines/content/createRun/contentSections/RunTypeSectionScheduled';
 import { PipelineVersionKFv2, RuntimeConfigParameters } from '~/concepts/pipelines/kfTypes';
@@ -28,6 +27,7 @@ const RunForm: React.FC<RunFormProps> = ({ data, runType, onValueChange }) => {
   const selectedVersion = data.version || latestVersion;
   const paramsRef = React.useRef(data.params);
   const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status;
+  const isSchedule = runType === PipelineRunType.Scheduled;
 
   const updateInputParams = React.useCallback(
     (version: PipelineVersionKFv2 | undefined) =>
@@ -62,55 +62,44 @@ const RunForm: React.FC<RunFormProps> = ({ data, runType, onValueChange }) => {
         <Text>{getProjectDisplayName(data.project)}</Text>
       </FormSection>
 
+      {isExperimentsAvailable && (
+        <ExperimentSection
+          value={data.experiment}
+          onChange={(experiment) => onValueChange('experiment', experiment)}
+        />
+      )}
+
       <FormSection
-        id={CreateRunPageSections.NAME_DESC}
-        aria-label={runPageSectionTitles[CreateRunPageSections.NAME_DESC]}
+        id={isSchedule ? CreateRunPageSections.SCHEDULE_DETAILS : CreateRunPageSections.RUN_DETAILS}
+        title={
+          runPageSectionTitles[
+            isSchedule ? CreateRunPageSections.SCHEDULE_DETAILS : CreateRunPageSections.RUN_DETAILS
+          ]
+        }
       >
         <NameDescriptionField
           nameFieldId="run-name"
           descriptionFieldId="run-description"
           data={data.nameDesc}
           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}
-        onChange={(version) => {
-          onValueChange('version', version);
-          updateInputParams(version);
-        }}
-      />
 
-      {runType === PipelineRunType.Scheduled && data.runType.type === RunTypeOption.SCHEDULED && (
-        <FormSection
-          id={CreateRunPageSections.SCHEDULE_SETTINGS}
-          title={runPageSectionTitles[CreateRunPageSections.SCHEDULE_SETTINGS]}
-        >
+        {isSchedule && data.runType.type === RunTypeOption.SCHEDULED && (
           <RunTypeSectionScheduled
             data={data.runType.data}
             onChange={(scheduleData) =>
               onValueChange('runType', { type: RunTypeOption.SCHEDULED, data: scheduleData })
             }
           />
-        </FormSection>
-      )}
+        )}
+      </FormSection>
+
+      <PipelineSection
+        pipeline={data.pipeline}
+        version={selectedVersion}
+        onValueChange={onValueChange}
+        updateInputParams={updateInputParams}
+      />
 
       <ParamsSection
         runParams={data.params}

diff --git a/frontend/src/concepts/pipelines/content/createRun/RunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/RunPage.tsx
@@ -44,6 +44,7 @@ const RunPage: React.FC<RunPageProps> = ({ cloneRun, contextPath, testId }) => {
     PipelineRunSearchParam.TriggerType,
   ]);
   const triggerType = asEnumMember(triggerTypeString, ScheduledType);
+  const isSchedule = runType === PipelineRunType.Scheduled;
 
   const cloneRunPipelineId = cloneRun?.pipeline_version_reference?.pipeline_id || '';
   const cloneRunVersionId = cloneRun?.pipeline_version_reference?.pipeline_version_id || '';
@@ -59,8 +60,8 @@ const RunPage: React.FC<RunPageProps> = ({ cloneRun, contextPath, testId }) => {
     (section) =>
       !(
         (section === CreateRunPageSections.EXPERIMENT && !isExperimentsAvailable) ||
-        (section === CreateRunPageSections.SCHEDULE_SETTINGS &&
-          runType !== PipelineRunType.Scheduled)
+        (section === CreateRunPageSections.SCHEDULE_DETAILS && !isSchedule) ||
+        (section === CreateRunPageSections.RUN_DETAILS && isSchedule)
       ),
   );
 

diff --git a/frontend/src/concepts/pipelines/content/createRun/const.ts b/frontend/src/concepts/pipelines/content/createRun/const.ts
@@ -20,21 +20,19 @@ 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',
+  RUN_DETAILS = 'run-section-details',
+  SCHEDULE_DETAILS = 'run-section-schedule-details',
   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.RUN_DETAILS]: 'Run details',
+  [CreateRunPageSections.SCHEDULE_DETAILS]: 'Schedule details',
   [CreateRunPageSections.PIPELINE]: 'Pipeline',
-  [CreateRunPageSections.PIPELINE_VERSION]: 'Pipeline version',
-  [CreateRunPageSections.SCHEDULE_SETTINGS]: 'Schedule settings',
   [CreateRunPageSections.PARAMS]: 'Parameters',
 };
diff --git a/frontend/src/concepts/pipelines/content/createRun/contentSections/ExperimentSection.tsx b/frontend/src/concepts/pipelines/content/createRun/contentSections/ExperimentSection.tsx
@@ -19,7 +19,7 @@ const ExperimentSection: React.FC<ExperimentSectionProps> = ({ value, onChange }
     id={CreateRunPageSections.EXPERIMENT}
     title={runPageSectionTitles[CreateRunPageSections.EXPERIMENT]}
   >
-    <FormGroup>
+    <FormGroup label="Experiment" isRequired>
       <Stack hasGutter>
         <StackItem>
           <ExperimentSelector selection={value?.display_name} onSelect={onChange} />

diff --git a/.../src/concepts/pipelines/content/createRun/contentSections/ParamsSection/ParamsSection.tsx b/.../src/concepts/pipelines/content/createRun/contentSections/ParamsSection/ParamsSection.tsx
@@ -49,7 +49,7 @@ export const ParamsSection: React.FC<ParamsSectionProps> = ({
       return <Alert variant="info" isInline isPlain title="This pipeline has no parameters." />;
     }
 
-    const formGroups = Object.entries(runParams).map(([label, value]) => {
+    return Object.entries(runParams).map(([label, value]) => {
       const inputDefinitionParams = getInputDefinitionParams(version);
       const { parameterType, isOptional, description } = inputDefinitionParams?.[label] || {};
       const inputProps = {
@@ -100,13 +100,6 @@ export const ParamsSection: React.FC<ParamsSectionProps> = ({
         </FormGroup>
       );
     });
-
-    return (
-      <>
-        <HelperText>Specify parameters required by the pipeline.</HelperText>
-        {formGroups}
-      </>
-    );
   };
 
   return (

diff --git a/frontend/src/concepts/pipelines/content/createRun/contentSections/PipelineSection.tsx b/frontend/src/concepts/pipelines/content/createRun/contentSections/PipelineSection.tsx
@@ -1,44 +1,90 @@
-import * as React from 'react';
+import React from 'react';
+
 import { FormGroup, FormSection, Stack, StackItem } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons';
+
 import {
   CreateRunPageSections,
   runPageSectionTitles,
 } from '~/concepts/pipelines/content/createRun/const';
-import { PipelineKFv2 } from '~/concepts/pipelines/kfTypes';
+import { PipelineKFv2, PipelineVersionKFv2 } from '~/concepts/pipelines/kfTypes';
 import PipelineSelector from '~/concepts/pipelines/content/pipelineSelector/PipelineSelector';
 import ImportPipelineButton from '~/concepts/pipelines/content/import/ImportPipelineButton';
+import PipelineVersionSelector from '~/concepts/pipelines/content/pipelineSelector/PipelineVersionSelector';
+import RunForm from '~/concepts/pipelines/content/createRun/RunForm';
+import ImportPipelineVersionButton from '~/concepts/pipelines/content/import/ImportPipelineVersionButton';
 
-type PipelineSectionProps = {
-  value: PipelineKFv2 | null;
-  onChange: (pipeline: PipelineKFv2) => void;
+type PipelineSectionProps = Pick<React.ComponentProps<typeof RunForm>, 'onValueChange'> & {
+  pipeline: PipelineKFv2 | null;
+  version: PipelineVersionKFv2 | null;
+  updateInputParams: (version: PipelineVersionKFv2 | undefined) => void;
 };
 
-const PipelineSection: React.FC<PipelineSectionProps> = ({ value, onChange }) => (
-  <FormSection
-    id={CreateRunPageSections.PIPELINE}
-    title={runPageSectionTitles[CreateRunPageSections.PIPELINE]}
-  >
-    <FormGroup>
-      <Stack hasGutter>
-        <StackItem>
-          <PipelineSelector
-            selection={value?.display_name}
-            onSelect={(pipeline) => onChange(pipeline)}
-          />
-        </StackItem>
-        <StackItem>
-          <ImportPipelineButton
-            variant="link"
-            icon={<PlusCircleIcon />}
-            onCreate={(pipeline) => onChange(pipeline)}
-          >
-            Create new pipeline
-          </ImportPipelineButton>
-        </StackItem>
-      </Stack>
-    </FormGroup>
-  </FormSection>
-);
+const PipelineSection: React.FC<PipelineSectionProps> = ({
+  pipeline,
+  version,
+  onValueChange,
+  updateInputParams,
+}) => {
+  const onPipelineChange = React.useCallback(
+    (value: PipelineKFv2) => {
+      onValueChange('pipeline', value);
+      onValueChange('version', undefined);
+    },
+    [onValueChange],
+  );
+
+  const onVersionChange = React.useCallback(
+    (value: PipelineVersionKFv2) => {
+      onValueChange('version', value);
+      updateInputParams(value);
+    },
+    [onValueChange, updateInputParams],
+  );
+
+  return (
+    <FormSection
+      id={CreateRunPageSections.PIPELINE}
+      title={runPageSectionTitles[CreateRunPageSections.PIPELINE]}
+    >
+      <FormGroup label="Pipeline" isRequired>
+        <Stack hasGutter>
+          <StackItem>
+            <PipelineSelector selection={pipeline?.display_name} onSelect={onPipelineChange} />
+          </StackItem>
+          <StackItem>
+            <ImportPipelineButton
+              variant="link"
+              icon={<PlusCircleIcon />}
+              onCreate={onPipelineChange}
+            >
+              Create new pipeline
+            </ImportPipelineButton>
+          </StackItem>
+        </Stack>
+      </FormGroup>
+
+      <FormGroup label="Pipeline version" isRequired>
+        <Stack hasGutter>
+          <StackItem>
+            <PipelineVersionSelector
+              selection={version?.display_name}
+              pipelineId={pipeline?.pipeline_id}
+              onSelect={onVersionChange}
+            />
+          </StackItem>
+          <StackItem>
+            <ImportPipelineVersionButton
+              selectedPipeline={pipeline}
+              variant="link"
+              icon={<PlusCircleIcon />}
+              onCreate={onVersionChange}
+            />
+          </StackItem>
+        </Stack>
+      </FormGroup>
+    </FormSection>
+  );
+};
 
 export default PipelineSection;
diff --git a/frontend/src/concepts/pipelines/content/createRun/contentSections/PipelineVersionSection.tsx b/frontend/src/concepts/pipelines/content/createRun/contentSections/PipelineVersionSection.tsx
diff --git a/...nd/src/concepts/pipelines/content/pipelinesDetails/pipeline/SelectedTaskDrawerContent.tsx b/...nd/src/concepts/pipelines/content/pipelinesDetails/pipeline/SelectedTaskDrawerContent.tsx
@@ -29,7 +29,7 @@ const SelectedTaskDrawerContent: React.FC<SelectedTaskDrawerContentProps> = ({ t
     >
       <DrawerHead>
         <Title headingLevel="h2" size="xl">
-          {task.name} {task.type === 'artifact' ? 'artifact details' : ''}
+          {task.name} {task.type === 'artifact' ? 'Artifact details' : ''}
         </Title>
         <DrawerActions>
           <DrawerCloseButton onClick={onClose} />

diff --git a/...concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx b/...concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx
@@ -34,7 +34,7 @@ const PipelineRunDrawerRightContent: React.FC<PipelineRunDrawerRightContentProps
     >
       <DrawerHead>
         <Title headingLevel="h2" size="xl">
-          {task.name} {task.type === 'artifact' ? 'artifact details' : ''}
+          {task.name} {task.type === 'artifact' ? 'Artifact details' : ''}
         </Title>
         {task.status?.podName && <Text component="small">{task.status.podName}</Text>}
         <DrawerActions>

diff --git a/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx b/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx
@@ -19,8 +19,8 @@ enum PipelineRunNodeTabs {
 }
 
 const PipelineRunNodeTabsTitles = {
-  [PipelineRunNodeTabs.INPUT_OUTPUT]: 'Input / Output',
-  [PipelineRunNodeTabs.DETAILS]: 'Details',
+  [PipelineRunNodeTabs.INPUT_OUTPUT]: 'Input/Output',
+  [PipelineRunNodeTabs.DETAILS]: 'Task details',
   [PipelineRunNodeTabs.VOLUMES]: 'Volumes',
   [PipelineRunNodeTabs.LOGS]: 'Logs',
 };

diff --git a/...end/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabDetails.tsx b/...end/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabDetails.tsx
@@ -76,9 +76,9 @@ const PipelineRunTabDetails: React.FC<PipelineRunTabDetailsProps> = ({
     { key: 'Workflow name', value: workflowName },
     ...(!isPipelineRunJob(pipelineRunKF)
       ? [
-          { key: 'Created at', value: asTimestamp(new Date(pipelineRunKF.created_at)) },
+          { key: 'Started', value: asTimestamp(new Date(pipelineRunKF.created_at)) },
           {
-            key: 'Finished at',
+            key: 'Finished',
             value: isEmptyDateKF(pipelineRunKF.finished_at)
               ? 'N/A'
               : asTimestamp(new Date(pipelineRunKF.finished_at)),