feat(DefaultTaskGroup): support status

patternfly · Apr 17, 2024 · ced63bc · ced63bc
1 parent 627ce40
commit ced63bc
Showing 1 changed file with 34 additions and 29 deletions.
diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import {
-  OnSelect,
-  WithDndDragProps,
-  ConnectDragSource,
-  ConnectDropTarget,
-} from '../../../behavior';
+import { OnSelect, WithDndDragProps, ConnectDragSource, ConnectDropTarget } from '../../../behavior';
 import { ShapeProps } from '../../../components';
 import { Dimensions } from '../../../geom';
 import { GraphElement, LabelPosition, BadgeLocation, isNode, Node } from '../../../types';
@@ -40,16 +35,17 @@ export interface DefaultTaskGroupProps {
   dragging?: boolean;
   /** Flag if drag operation is a regroup operation */
   dragRegroupable?: boolean;
-  /** RunStatus to depict */
+  /** RunStatus to depict, supported on collapsed groups only. 
+   * TODO: Support status indicators on expanded state.  */
   status?: RunStatus;
-  /** Flag indicating the status indicator */
+  /** Flag indicating the status indicator, supported on collapsed groups only */
   showStatusState?: boolean;
+  /** Statuses to show at when details are hidden, supported on collapsed groups only */
+  hiddenDetailsShownStatuses?: RunStatus[];
   /** 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 */
   hideDetailsAtMedium?: boolean;
-  /** Statuses to show at when details are hidden */
-  hiddenDetailsShownStatuses?: RunStatus[];
   /** Flag if the user is hovering on the node */
   hover?: boolean;
   /** Label for the node. Defaults to element.getLabel() */
@@ -124,16 +120,17 @@ export interface DefaultTaskGroupProps {
 
 type PipelinesDefaultGroupInnerProps = Omit<DefaultTaskGroupProps, 'element'> & { element: Node };
 
-const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerProps> = observer(({
-  className,
-  element,
-  badge,
-  onCollapseChange,
-  collapsedShadowCount,
-  recreateLayoutOnCollapseChange,
-  getEdgeCreationTypes,
-  ...rest
-}) => {
+const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerProps> = observer(
+  ({
+    className,
+    element,
+    badge,
+    onCollapseChange,
+    collapsedShadowCount,
+    recreateLayoutOnCollapseChange,
+    getEdgeCreationTypes,
+    ...rest
+  }) => {
     const childCount = element.getAllNodeChildren().length;
 
     const handleCollapse = action((group: Node, collapsed: boolean): void => {
@@ -148,11 +145,17 @@ const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerP
           const model = controller.toModel();
           const creationTypes: EdgeCreationTypes = getEdgeCreationTypes ? getEdgeCreationTypes() : {};
 
-          const pipelineNodes = model.nodes.filter((n) => n.type !== creationTypes.spacerNodeType).map((n) => ({
+          const pipelineNodes = model.nodes
+            .filter((n) => n.type !== creationTypes.spacerNodeType)
+            .map((n) => ({
               ...n,
               visible: true
             }));
-          const spacerNodes = getSpacerNodes(pipelineNodes, creationTypes.spacerNodeType, creationTypes.finallyNodeTypes);
+          const spacerNodes = getSpacerNodes(
+            pipelineNodes,
+            creationTypes.spacerNodeType,
+            creationTypes.finallyNodeTypes
+          );
           const nodes = [...pipelineNodes, ...spacerNodes];
           const edges = getEdgesFromNodes(
             pipelineNodes,
@@ -205,13 +208,15 @@ const DefaultTaskGroup: React.FunctionComponent<DefaultTaskGroupProps> = ({
     throw new Error('DefaultTaskGroup must be used only on Node elements');
   }
 
-  return <DefaultTaskGroupInner
-    element={element}
-    badgeColor={badgeColor}
-    badgeBorderColor={badgeBorderColor}
-    badgeTextColor={badgeTextColor}
-    {...rest}
-  />;
+  return (
+    <DefaultTaskGroupInner
+      element={element}
+      badgeColor={badgeColor}
+      badgeBorderColor={badgeBorderColor}
+      badgeTextColor={badgeTextColor}
+      {...rest}
+    />
+  );
 };
 
 export default DefaultTaskGroup;