feat(Canvas): Use CustomNode for collapsed groups

* hover over toolbar working
* centered toolbar for containers
* removed phantom-rect
* add disable icon within boundaries
* add exclamation mark before the label
* red-color the exclamation mark and the label
* decrease node width
* add label background to hide the edge

packages/ui/src/components/Visualization/Canvas/Canvas.tsx

@@ -90,7 +90,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
       },
     };
 
-    controller.fromModel(model, true);
+    controller.fromModel(model, false);
     setInitialized(true);
   }, [controller, entities, visibleFlows]);
 

packages/ui/src/components/Visualization/Canvas/StepToolbar/StepToolbar.tsx

@@ -3,6 +3,8 @@ import {
   BanIcon,
   CheckIcon,
   CodeBranchIcon,
+  CompressArrowsAltIcon,
+  ExpandArrowsAltIcon,
   PlusIcon,
   PowerOffIcon,
   SyncAltIcon,
@@ -20,11 +22,20 @@ import { useReplaceStep } from '../../Custom/hooks/replace-step.hook';
 import './StepToolbar.scss';
 
 interface IStepToolbar extends IDataTestID {
-  className?: string;
   vizNode: IVisualizationNode;
+  className?: string;
+  isCollapsed?: boolean;
+  /** Toggle node collapse / expand */
+  onCollapseToggle?: () => void;
 }
 
-export const StepToolbar: FunctionComponent<IStepToolbar> = ({ vizNode, className, 'data-testid': dataTestId }) => {
+export const StepToolbar: FunctionComponent<IStepToolbar> = ({
+  vizNode,
+  className,
+  isCollapsed = false,
+  onCollapseToggle,
+  'data-testid': dataTestId,
+}) => {
   const { canHaveChildren, canHaveSpecialChildren, canBeDisabled, canReplaceStep, canRemoveStep, canRemoveFlow } =
     vizNode.getNodeInteraction();
   const { onInsertStep } = useInsertStep(vizNode);
@@ -78,15 +89,7 @@ export const StepToolbar: FunctionComponent<IStepToolbar> = ({ vizNode, classNam
             event.stopPropagation();
           }}
         >
-          {isDisabled ? (
-            <>
-              <CheckIcon />
-            </>
-          ) : (
-            <>
-              <BanIcon />
-            </>
-          )}
+          {isDisabled ? <CheckIcon /> : <BanIcon />}
         </Button>
       )}
 
@@ -120,6 +123,21 @@ export const StepToolbar: FunctionComponent<IStepToolbar> = ({ vizNode, classNam
         </Button>
       )}
 
+      {onCollapseToggle && (
+        <Button
+          className="step-toolbar__button"
+          data-testid="step-toolbar-button-collapse"
+          variant="secondary"
+          title={isCollapsed ? 'Expand step' : 'Collapse step'}
+          onClick={(event) => {
+            onCollapseToggle();
+            event.stopPropagation();
+          }}
+        >
+          {isCollapsed ? <ExpandArrowsAltIcon /> : <CompressArrowsAltIcon />}
+        </Button>
+      )}
+
       {canRemoveStep && (
         <Button
           className="step-toolbar__button"

packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts

@@ -3,9 +3,16 @@ import { LayoutType } from './canvas.models';
 
 export class CanvasDefaults {
   static readonly DEFAULT_LAYOUT = LayoutType.DagreVertical;
+  static readonly DEFAULT_SIDEBAR_WIDTH = 500;
+  static readonly DEFAULT_LABEL_WIDTH = 150;
+  static readonly DEFAULT_LABEL_HEIGHT = 32;
+
   static readonly DEFAULT_NODE_SHAPE = NodeShape.rect;
-  static readonly DEFAULT_NODE_WIDTH = 150;
+  static readonly DEFAULT_NODE_WIDTH = 90;
   static readonly DEFAULT_NODE_HEIGHT = 85;
-  static readonly DEFAULT_GROUP_PADDING = 65;
-  static readonly DEFAULT_SIDEBAR_WIDTH = 500;
+
+  static readonly DEFAULT_GROUP_PADDING = 40;
+
+  static readonly STEP_TOOLBAR_WIDTH = 350;
+  static readonly STEP_TOOLBAR_HEIGHT = 60;
 }