From fb977f8dfae8b1f2c1a62e910b2107f05fb13824 Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Wed, 10 Apr 2024 15:32:45 -0400
Subject: [PATCH] [RHOAIENG-4648] UX content updates

---
 .../content/DeletePipelineRunsModal.tsx       |   6 +-
 .../pipelines/content/createRun/RunForm.tsx   |  59 ++++------
 .../pipelines/content/createRun/RunPage.tsx   |   5 +-
 .../pipelines/content/createRun/const.ts      |  10 +-
 .../contentSections/ExperimentSection.tsx     |   2 +-
 .../ParamsSection/ParamsSection.tsx           |   9 +-
 .../contentSections/PipelineSection.tsx       | 108 +++++++++++++-----
 .../PipelineVersionSection.tsx                |  51 ---------
 .../pipeline/SelectedTaskDrawerContent.tsx    |   2 +-
 .../PipelineRunDrawerRightContent.tsx         |   2 +-
 .../PipelineRunDrawerRightTabs.tsx            |   4 +-
 .../pipelineRun/PipelineRunTabDetails.tsx     |   4 +-
 .../pipelineRun/SelectedNodeDetailsTab.tsx    |   7 +-
 .../pipelines/content/tables/columns.ts       |   2 +-
 .../tables/pipelineRun/PipelineRunTable.tsx   |   2 +-
 .../GlobalPipelineExperimentsRoutes.tsx       |   2 +-
 .../compareRuns/ManageRunsTable.tsx           |   2 +-
 .../pages/pipelines/global/pipelines/const.ts |   2 +-
 18 files changed, 129 insertions(+), 150 deletions(-)
 delete mode 100644 frontend/src/concepts/pipelines/content/createRun/contentSections/PipelineVersionSection.tsx

diff --git a/frontend/src/concepts/pipelines/content/DeletePipelineRunsModal.tsx b/frontend/src/concepts/pipelines/content/DeletePipelineRunsModal.tsx
index f65941e531..d69f43f1a0 100644
--- 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
index 644c615fbb..d7e2906fde 100644
--- 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,9 +62,20 @@ 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"
@@ -72,45 +83,23 @@ const RunForm: React.FC<RunFormProps> = ({ data, runType, onValueChange }) => {
           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
index 6cf3f8bf99..3ed8a78cee 100644
--- 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
index 409531e427..0fb21101c0 100644
--- 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
index 1f66b01c3c..2e7e8b4340 100644
--- 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/frontend/src/concepts/pipelines/content/createRun/contentSections/ParamsSection/ParamsSection.tsx b/frontend/src/concepts/pipelines/content/createRun/contentSections/ParamsSection/ParamsSection.tsx
index 57698494f1..93b84f9919 100644
--- a/frontend/src/concepts/pipelines/content/createRun/contentSections/ParamsSection/ParamsSection.tsx
+++ b/frontend/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
index bd2b749976..6aa2fedaf0 100644
--- 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
deleted file mode 100644
index 865ae8c561..0000000000
--- a/frontend/src/concepts/pipelines/content/createRun/contentSections/PipelineVersionSection.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as 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, PipelineVersionKFv2 } from '~/concepts/pipelines/kfTypes';
-import ImportPipelineVersionButton from '~/concepts/pipelines/content/import/ImportPipelineVersionButton';
-import PipelineVersionSelector from '~/concepts/pipelines/content/pipelineSelector/PipelineVersionSelector';
-
-type PipelineVersionSectionProps = {
-  selectedPipeline: PipelineKFv2 | null;
-  value: PipelineVersionKFv2 | null;
-  onChange: (version: PipelineVersionKFv2, pipeline?: PipelineKFv2 | null) => void;
-};
-
-const PipelineVersionSection: React.FC<PipelineVersionSectionProps> = ({
-  selectedPipeline,
-  value,
-  onChange,
-}) => (
-  <FormSection
-    id={CreateRunPageSections.PIPELINE_VERSION}
-    title={runPageSectionTitles[CreateRunPageSections.PIPELINE_VERSION]}
-  >
-    <FormGroup>
-      <Stack hasGutter>
-        <StackItem>
-          <PipelineVersionSelector
-            selection={value?.display_name}
-            pipelineId={selectedPipeline?.pipeline_id}
-            onSelect={(version) => {
-              onChange(version);
-            }}
-          />
-        </StackItem>
-        <StackItem>
-          <ImportPipelineVersionButton
-            selectedPipeline={selectedPipeline}
-            variant="link"
-            icon={<PlusCircleIcon />}
-            onCreate={(pipelineVersion, pipeline) => onChange(pipelineVersion, pipeline)}
-          />
-        </StackItem>
-      </Stack>
-    </FormGroup>
-  </FormSection>
-);
-
-export default PipelineVersionSection;
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/SelectedTaskDrawerContent.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/SelectedTaskDrawerContent.tsx
index 4cc4eaa75d..3f630498ea 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/SelectedTaskDrawerContent.tsx
+++ b/frontend/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/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx
index 56b5f30859..6240bb6b87 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx
+++ b/frontend/src/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/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx
index e7087d5755..655ce72af6 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx
+++ b/frontend/src/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/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabDetails.tsx
index 4d2f24712f..3cbb90490f 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabDetails.tsx
+++ b/frontend/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)),
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeDetailsTab.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeDetailsTab.tsx
index 80930fdc4a..c43f6a3bf9 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeDetailsTab.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeDetailsTab.tsx
@@ -7,6 +7,7 @@ import {
 import { relativeDuration } from '~/utilities/time';
 import { RuntimeStateKF } from '~/concepts/pipelines/kfTypes';
 import { PipelineTask } from '~/concepts/pipelines/topology';
+import { translateStatusForNode } from '~/concepts/pipelines/topology/parseUtils';
 
 type SelectedNodeDetailsTabProps = {
   task: PipelineTask;
@@ -35,14 +36,14 @@ const SelectedNodeDetailsTab: React.FC<SelectedNodeDetailsTabProps> = ({ task })
         taskName,
         {
           key: 'Status',
-          value: state ?? '-',
+          value: translateStatusForNode(state) ?? '-',
         },
         {
-          key: 'Started at',
+          key: 'Started',
           value: startDate ? asTimestamp(startDate) : '-',
         },
         {
-          key: 'Finished at',
+          key: 'Finished',
           value: endDate ? asTimestamp(endDate) : '-',
         },
         {
diff --git a/frontend/src/concepts/pipelines/content/tables/columns.ts b/frontend/src/concepts/pipelines/content/tables/columns.ts
index 060cc5c73d..b232fc6e4a 100644
--- a/frontend/src/concepts/pipelines/content/tables/columns.ts
+++ b/frontend/src/concepts/pipelines/content/tables/columns.ts
@@ -22,7 +22,7 @@ export const pipelineColumns: SortableData<PipelineKFv2>[] = [
     width: 40,
   },
   {
-    label: 'Versions',
+    label: 'Total versions',
     field: 'versions',
     sortable: false,
     width: 20,
diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx
index 02994b4880..826e58c869 100644
--- a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx
+++ b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx
@@ -104,7 +104,7 @@ const PipelineRunTable: React.FC<PipelineRunTableProps> = ({
 
   const compareRunsAction =
     isExperimentsAvailable && experimentId ? (
-      <Tooltip content="Select up to 10 runs to compare">
+      <Tooltip content="Select up to 10 runs to compare.">
         <Button
           key="compare-runs"
           data-testid="compare-runs-button"
diff --git a/frontend/src/pages/pipelines/GlobalPipelineExperimentsRoutes.tsx b/frontend/src/pages/pipelines/GlobalPipelineExperimentsRoutes.tsx
index c94f78d4dd..135993b28d 100644
--- a/frontend/src/pages/pipelines/GlobalPipelineExperimentsRoutes.tsx
+++ b/frontend/src/pages/pipelines/GlobalPipelineExperimentsRoutes.tsx
@@ -40,7 +40,7 @@ const GlobalPipelineExperimentsRoutes: React.FC = () => (
         element={
           <GlobalPipelineRuns
             breadcrumb={<ExperimentRunsListBreadcrumb />}
-            description="Manage and view your experiment and runs."
+            description="Manage your experiment runs and schedules."
             getRedirectPath={experimentsBaseRoute}
           />
         }
diff --git a/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsTable.tsx b/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsTable.tsx
index c9b67de3e1..23f07c791e 100644
--- a/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsTable.tsx
+++ b/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsTable.tsx
@@ -106,7 +106,7 @@ export const ManageRunsTable: React.FC<ManageRunsTableProps> = ({
         bottomToolbarContent={
           <ToolbarGroup>
             <ToolbarItem>
-              <Tooltip content="Select up to 10 runs to compare">
+              <Tooltip content="Select up to 10 runs to compare.">
                 <Button
                   data-testid="manage-runs-update-button"
                   onClick={() =>
diff --git a/frontend/src/pages/pipelines/global/pipelines/const.ts b/frontend/src/pages/pipelines/global/pipelines/const.ts
index 563562963c..f167dddb06 100644
--- a/frontend/src/pages/pipelines/global/pipelines/const.ts
+++ b/frontend/src/pages/pipelines/global/pipelines/const.ts
@@ -1,2 +1,2 @@
 export const pipelinesPageTitle = 'Pipelines';
-export const pipelinesPageDescription = 'Manage your pipelines.';
+export const pipelinesPageDescription = 'Manage your pipelines and their versions.';