feat(DefaultTaskGroup): Allow for a custom status icon in DefaultTaskGroup (patternfly#242)

Author: jeff-phillips-18

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

packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskNode.tsx

@@ -4,13 +4,15 @@ import {
   DEFAULT_LAYER,
   GraphElement,
   Layer,
+  RunStatus,
   ScaleDetailsLevel,
   TaskNode,
   TOP_LAYER,
   useHover,
   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>

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
     }
   };

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 */