From b5f39ca85e7c4f2d11b56986023b6fa3ecf18627 Mon Sep 17 00:00:00 2001
From: Purva Naik <pnaik@redhat.com>
Date: Fri, 22 Nov 2024 05:41:27 +0530
Subject: [PATCH] Update DefaultTaskGroup custom icon to use BanIcon (#3489)

---
 frontend/package-lock.json                            |  8 ++++----
 frontend/package.json                                 |  2 +-
 .../concepts/topology/PipelineDefaultTaskGroup.tsx    | 11 ++++++++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6605c2daa8..a63f9afc59 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -25,7 +25,7 @@
         "@patternfly/react-table": "^5.4.0",
         "@patternfly/react-templates": "^1.1.0",
         "@patternfly/react-tokens": "^5.4.0",
-        "@patternfly/react-topology": "^5.4.0",
+        "@patternfly/react-topology": "^5.4.1",
         "@patternfly/react-virtualized-extension": "^5.1.0",
         "@segment/analytics-next": "^1.72.0",
         "@types/classnames": "^2.3.1",
@@ -4389,9 +4389,9 @@
       "integrity": "sha512-KONkwCVOMyklhuuaYeYgcAsGtCBQXnsBGZeolhOdSzr2Mj0RVSW0oMrQPgZuPVzhhC/kbqgClHJJl6xuG9xheA=="
     },
     "node_modules/@patternfly/react-topology": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-topology/-/react-topology-5.4.0.tgz",
-      "integrity": "sha512-WGPunNm8HAQSkkTn0N05vFdNer9UOHWduTBXdyvuVAr/fQZrgglvplJe4qdMPOmT3R/8aVyGJP7itxV2J2b8EA==",
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-topology/-/react-topology-5.4.1.tgz",
+      "integrity": "sha512-3tgldDj7qKIGFKTQ1gyrwr3a/VDa/I5w0RBPqicppywvFygPrfi2NlK1Mt+3rtGW5R/fG64tzOcyZKx/y2Wpvw==",
       "dependencies": {
         "@dagrejs/dagre": "1.1.2",
         "@patternfly/react-core": "^5.1.1",
diff --git a/frontend/package.json b/frontend/package.json
index a0959cd005..d38ea0e411 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -68,7 +68,7 @@
     "@patternfly/react-table": "^5.4.0",
     "@patternfly/react-templates": "^1.1.0",
     "@patternfly/react-tokens": "^5.4.0",
-    "@patternfly/react-topology": "^5.4.0",
+    "@patternfly/react-topology": "^5.4.1",
     "@patternfly/react-virtualized-extension": "^5.1.0",
     "@segment/analytics-next": "^1.72.0",
     "@types/classnames": "^2.3.1",
diff --git a/frontend/src/concepts/topology/PipelineDefaultTaskGroup.tsx b/frontend/src/concepts/topology/PipelineDefaultTaskGroup.tsx
index 3e1fa77b52..ed43ba0e24 100644
--- a/frontend/src/concepts/topology/PipelineDefaultTaskGroup.tsx
+++ b/frontend/src/concepts/topology/PipelineDefaultTaskGroup.tsx
@@ -16,6 +16,7 @@ import {
   LabelPosition,
 } from '@patternfly/react-topology';
 import { Flex, FlexItem, Popover, Stack, StackItem } from '@patternfly/react-core';
+import { BanIcon } from '@patternfly/react-icons';
 import { PipelineNodeModelExpanded, StandardTaskNodeData } from '~/concepts/topology/types';
 import NodeStatusIcon from '~/concepts/topology/NodeStatusIcon';
 import { ExecutionStateKF } from '~/concepts/pipelines/kfTypes';
@@ -68,14 +69,17 @@ const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerP
       }
     }, [state, runStatus]);
 
-    // TODO, Update canceled status icon with BanIcon when PF topology is updated
-    // https://issues.redhat.com/browse/RHOAIENG-14822
     const groupNode = (
       <DefaultTaskGroup
         element={element}
         collapsible
         recreateLayoutOnCollapseChange
-        GroupLabelComponent={TaskGroupPillLabel}
+        GroupLabelComponent={(props) => (
+          <TaskGroupPillLabel
+            {...props}
+            customStatusIcon={status === RunStatus.Cancelled ? <BanIcon /> : undefined}
+          />
+        )}
         selected={selected}
         onSelect={onSelect}
         hideDetailsAtMedium
@@ -83,6 +87,7 @@ const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerP
         labelPosition={LabelPosition.top}
         showStatusState
         scaleNode={hover && detailsLevel !== ScaleDetailsLevel.high}
+        customStatusIcon={status === RunStatus.Cancelled ? <BanIcon /> : undefined}
         showLabelOnHover
         status={status}
         hiddenDetailsShownStatuses={[