From ae4c23043b1931c4dbf07f8eb319feb7343c3e04 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Tue, 11 Jun 2024 11:53:47 -0400
Subject: [PATCH] [RHOAIENG-7428]: update pipelineRunLabel to correct colors

---
 .../content/pipelinesDetails/PipelineDetailsTitle.tsx    | 6 ++++--
 frontend/src/concepts/pipelines/content/utils.tsx        | 9 +++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/PipelineDetailsTitle.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/PipelineDetailsTitle.tsx
index 2616fe434d..7a02caa2df 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/PipelineDetailsTitle.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/PipelineDetailsTitle.tsx
@@ -15,7 +15,7 @@ const PipelineDetailsTitle: React.FC<RunJobTitleProps> = ({
   statusIcon,
   pipelineRunLabel,
 }) => {
-  const { icon, label } = computeRunStatus(run);
+  const { icon, label, color } = computeRunStatus(run);
 
   const isArchived = run.storage_state === StorageStateKF.ARCHIVED;
 
@@ -30,7 +30,9 @@ const PipelineDetailsTitle: React.FC<RunJobTitleProps> = ({
         )}
         {statusIcon && (
           <SplitItem>
-            <Label icon={icon}>{label}</Label>
+            <Label color={color} icon={icon}>
+              {label}
+            </Label>
           </SplitItem>
         )}
         {isArchived && (
diff --git a/frontend/src/concepts/pipelines/content/utils.tsx b/frontend/src/concepts/pipelines/content/utils.tsx
index 77379d92f1..1a972caae6 100644
--- a/frontend/src/concepts/pipelines/content/utils.tsx
+++ b/frontend/src/concepts/pipelines/content/utils.tsx
@@ -7,7 +7,7 @@ import {
   QuestionCircleIcon,
   SyncAltIcon,
 } from '@patternfly/react-icons';
-import { Icon } from '@patternfly/react-core';
+import { Icon, LabelProps } from '@patternfly/react-core';
 import {
   PipelineCoreResourceKFv2,
   PipelineRunJobKFv2,
@@ -20,6 +20,7 @@ import { relativeTime } from '~/utilities/time';
 export type RunStatusDetails = {
   icon: React.ReactNode;
   label: PipelineRunKFv2['state'] | string;
+  color?: LabelProps['color'];
   status?: React.ComponentProps<typeof Icon>['status'];
   details?: string;
   createdAt?: string;
@@ -36,6 +37,7 @@ export const computeRunStatus = (run?: PipelineRunKFv2 | null): RunStatusDetails
   let status: React.ComponentProps<typeof Icon>['status'];
   let details: string | undefined;
   let label: string;
+  let color: LabelProps['color'];
   const createdAt = relativeTime(Date.now(), new Date(run.created_at).getTime());
 
   switch (run.state) {
@@ -56,11 +58,13 @@ export const computeRunStatus = (run?: PipelineRunKFv2 | null): RunStatusDetails
     case RuntimeStateKF.SUCCEEDED:
       icon = <CheckCircleIcon />;
       status = 'success';
+      color = 'green';
       label = runtimeStateLabels[RuntimeStateKF.SUCCEEDED];
       break;
     case RuntimeStateKF.FAILED:
       icon = <ExclamationCircleIcon />;
       status = 'danger';
+      color = 'red';
       label = runtimeStateLabels[RuntimeStateKF.FAILED];
       details = run.error?.message;
       break;
@@ -70,6 +74,7 @@ export const computeRunStatus = (run?: PipelineRunKFv2 | null): RunStatusDetails
       break;
     case RuntimeStateKF.CANCELED:
       icon = <BanIcon />;
+      color = 'gold';
       label = runtimeStateLabels[RuntimeStateKF.CANCELED];
       break;
     case RuntimeStateKF.PAUSED:
@@ -83,7 +88,7 @@ export const computeRunStatus = (run?: PipelineRunKFv2 | null): RunStatusDetails
       details = run.state;
   }
 
-  return { icon, label, status, details, createdAt };
+  return { icon, label, color, status, details, createdAt };
 };
 
 export const getPipelineAndVersionDeleteString = (