Update DefaultTaskGroup custom icon to use BanIcon (#3489)

opendatahub-io · Nov 22, 2024 · b5f39ca · b5f39ca
1 parent 537caad
commit b5f39ca
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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
@@ -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,21 +69,25 @@ 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
         centerLabelOnEdge
         labelPosition={LabelPosition.top}
         showStatusState
         scaleNode={hover && detailsLevel !== ScaleDetailsLevel.high}
+        customStatusIcon={status === RunStatus.Cancelled ? <BanIcon /> : undefined}
         showLabelOnHover
         status={status}
         hiddenDetailsShownStatuses={[