From d483a9630821c4d02192a2ea8a4660309cae6235 Mon Sep 17 00:00:00 2001
From: Lokananda Prabhu <lprabhu@redhat.com>
Date: Wed, 10 Apr 2024 12:53:32 +0530
Subject: [PATCH] Added status for TaskRun in details page heading

---
 .../tasks-details-pages/TaskRunDetailsPage.tsx         | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/pipelines-tasks/tasks-details-pages/TaskRunDetailsPage.tsx b/src/components/pipelines-tasks/tasks-details-pages/TaskRunDetailsPage.tsx
index 7116b5ba..0cecc27b 100644
--- a/src/components/pipelines-tasks/tasks-details-pages/TaskRunDetailsPage.tsx
+++ b/src/components/pipelines-tasks/tasks-details-pages/TaskRunDetailsPage.tsx
@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
 import * as React from 'react';
 import { useParams } from 'react-router-dom-v5-compat';
 import { ArchiveIcon } from '@patternfly/react-icons';
+import { ResourceStatus } from '@openshift-console/dynamic-plugin-sdk';
 import DetailsPage from '../../details-page/DetailsPage';
 import { getReferenceForModel } from '../../pipelines-overview/utils';
 import { TaskRunModel } from '../../../models';
@@ -23,12 +24,18 @@ import {
   RESOURCE_LOADED_FROM_RESULTS_ANNOTATION,
 } from '../../../consts';
 import { LoadingBox } from '../../status/status-box';
+import { taskRunStatus } from '../../utils/pipeline-utils';
+import Status from '../../status/Status';
 
 const TaskRunDetailsPage = () => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   const params = useParams();
   const { name, ns: namespace } = params;
   const [data, loaded] = useTaskRun(namespace, name);
+  const trStatus = React.useMemo(
+    () => loaded && data && taskRunStatus(data),
+    [loaded, data],
+  );
   const resourceTitleFunc = React.useMemo(() => {
     return (
       <div className="taskrun-details-page">
@@ -42,6 +49,9 @@ const TaskRunDetailsPage = () => {
             <ArchiveIcon className="pipelinerun-details-page__results-indicator" />
           </Tooltip>
         )}
+        <ResourceStatus>
+          <Status status={trStatus}></Status>
+        </ResourceStatus>
       </div>
     );
   }, [data]);