From 2a1b615da402636a8ac3577abd01b25e5118740d Mon Sep 17 00:00:00 2001
From: Jeff Phillips <jephilli@redhat.com>
Date: Tue, 22 Oct 2024 07:18:27 -0400
Subject: [PATCH] feat(DefaultTaskGroup): Allow for a custom status icon in
 DefaultTaskGroup (#242)

---
 .../src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx       | 9 ++++++++-
 .../src/demos/pipelineGroupsDemo/DemoTaskNode.tsx        | 3 +++
 .../pipelineGroupsDemo/createDemoPipelineGroupsNodes.ts  | 4 ++--
 .../src/pipelines/components/groups/DefaultTaskGroup.tsx | 2 ++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
index f07457e3..64774f28 100644
--- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
+++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
@@ -15,6 +15,7 @@ import {
   RunStatus,
   TaskGroupPillLabel
 } from '@patternfly/react-topology';
+import { BanIcon } from '@patternfly/react-icons';
 import { DEFAULT_TASK_HEIGHT, GROUP_TASK_WIDTH } from './createDemoPipelineGroupsNodes';
 
 type DemoTaskGroupProps = {
@@ -43,12 +44,18 @@ const DemoTaskGroup: React.FunctionComponent<DemoTaskGroupProps> = ({ element, .
         collapsible
         collapsedWidth={GROUP_TASK_WIDTH}
         collapsedHeight={DEFAULT_TASK_HEIGHT}
-        GroupLabelComponent={TaskGroupPillLabel}
+        GroupLabelComponent={(props) => (
+          <TaskGroupPillLabel
+            {...props}
+            customStatusIcon={data.status === RunStatus.Cancelled ? <BanIcon /> : undefined}
+          />
+        )}
         element={element as Node}
         centerLabelOnEdge
         recreateLayoutOnCollapseChange
         getEdgeCreationTypes={getEdgeCreationTypes}
         scaleNode={hover && detailsLevel !== ScaleDetailsLevel.high}
+        customStatusIcon={data.status === RunStatus.Cancelled ? <BanIcon /> : undefined}
         showLabelOnHover
         hideDetailsAtMedium
         showStatusState
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskNode.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskNode.tsx
index 24e5bcf3..4633ced2 100644
--- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskNode.tsx
+++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskNode.tsx
@@ -4,6 +4,7 @@ import {
   DEFAULT_LAYER,
   GraphElement,
   Layer,
+  RunStatus,
   ScaleDetailsLevel,
   TaskNode,
   TOP_LAYER,
@@ -11,6 +12,7 @@ import {
   WithContextMenuProps,
   WithSelectionProps
 } from '@patternfly/react-topology';
+import { BanIcon } from '@patternfly/react-icons';
 
 type DemoTaskNodeProps = {
   element: GraphElement;
@@ -31,6 +33,7 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({ element, ...
           showStatusState
           status={data.status}
           hideDetailsAtMedium
+          customStatusIcon={data.status === RunStatus.Cancelled ? <BanIcon /> : undefined}
           {...rest}
         />
       </g>
diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/createDemoPipelineGroupsNodes.ts b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/createDemoPipelineGroupsNodes.ts
index 582f0a54..d19f6788 100644
--- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/createDemoPipelineGroupsNodes.ts
+++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/createDemoPipelineGroupsNodes.ts
@@ -159,7 +159,7 @@ export const createExecution3 = (runAfter?: string): [string, PipelineNodeModel[
     },
     runAfterTasks: [task_3_1.id],
     data: {
-      status: RunStatus.Succeeded,
+      status: RunStatus.Cancelled,
       isDependency: true
     }
   };
@@ -294,7 +294,7 @@ export const createExecution3 = (runAfter?: string): [string, PipelineNodeModel[
       padding: [NODE_PADDING_VERTICAL, NODE_PADDING_HORIZONTAL]
     },
     data: {
-      status: RunStatus.Succeeded,
+      status: RunStatus.Cancelled,
       isDependency: true
     }
   };
diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx
index 4a5b8cb6..dc51271c 100644
--- a/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx
+++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx
@@ -43,6 +43,8 @@ export interface DefaultTaskGroupProps {
   showStatusState?: boolean;
   /** Statuses to show at when details are hidden, supported on collapsed groups only */
   hiddenDetailsShownStatuses?: RunStatus[];
+  /** Custom icon to use as the status icon (for collapsed groups, or if using a GroupLabelComponent that accepts a customStatus icon, such as TaskGroupPillLabel). */
+  customStatusIcon?: React.ReactNode;
   /** Flag indicating the node should be scaled, best on hover of the node at lowest scale level */
   scaleNode?: boolean;
   /** Flag to hide details at medium scale */