feat(canvas): support drag-and-drop of compatible groups regardless of collapsed or expanded state

shivamG640 · lordrip · commit cf8617599961 · 2026-03-16T08:58:41.000-04:00
diff --git a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.scss b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.scss
@@ -79,19 +79,19 @@
       }
 
       &__dropTarget-right {
-        border-right: var(--custom-group-border-dropTarget);
+        border-right: var(--custom-component-border-dropTarget);
       }
 
       &__dropTarget-left {
-        border-left: var(--custom-group-border-dropTarget);
+        border-left: var(--custom-component-border-dropTarget);
       }
 
       &__possibleDropTarget-right {
-        border-right: var(--custom-group-border-possibleDropTarget);
+        border-right: var(--custom-component-border-possibleDropTarget);
       }
 
       &__possibleDropTarget-left {
-        border-left: var(--custom-group-border-possibleDropTarget);
+        border-left: var(--custom-component-border-possibleDropTarget);
       }
     }
 
diff --git a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx
@@ -39,7 +39,12 @@ import { IconResolver } from '../../../IconResolver';
 import { NodeInteractionAddonContext } from '../../../registers/interactions/node-interaction-addon.provider';
 import { CanvasDefaults } from '../../Canvas/canvas.defaults';
 import { StepToolbar } from '../../Canvas/StepToolbar/StepToolbar';
-import { canDragGroup, GROUP_DRAG_TYPE } from '../customComponentUtils';
+import {
+  canDragGroup,
+  getDropTargetContainerClassNames,
+  GROUP_DRAG_TYPE,
+  NODE_DRAG_TYPE,
+} from '../customComponentUtils';
 import { FloatingCircle } from '../FloatingCircle/FloatingCircle';
 import { CustomNodeContainer } from '../Node/CustomNodeContainer';
 import { checkNodeDropCompatibility, getNodeDragAndDropDirection, handleValidNodeDrop } from '../Node/CustomNodeUtils';
@@ -120,10 +125,10 @@ export const CustomGroupExpandedInner: FunctionComponent<CustomGroupProps> = obs
       GraphElementProps
     > = useMemo(
       () => ({
-        accept: [GROUP_DRAG_TYPE],
+        accept: [NODE_DRAG_TYPE, GROUP_DRAG_TYPE],
         canDrop: (item, _monitor, _props) => {
           // Ensure that the node is not dropped onto itself
-          if (item === element) return false;
+          if ((item as Node) === element) return false;
 
           return checkNodeDropCompatibility(
             item.getData()?.vizNode,
@@ -161,10 +166,15 @@ export const CustomGroupExpandedInner: FunctionComponent<CustomGroupProps> = obs
       element.getData().vizNode.data.path.slice(0, draggedVizNode?.data.path.length) === draggedVizNode?.data.path;
     const gCombinedRef = useCombineRefs<SVGGElement>(gHoverRef, dragGroupRef);
 
-    let dropDirection: 'forward' | 'backward' | null = null;
-    if (dndDropProps.droppable && dndDropProps.canDrop && draggedVizNode) {
-      dropDirection = getNodeDragAndDropDirection(draggedVizNode, groupVizNode, false);
-    }
+    const dropDirection: 'forward' | 'backward' | null =
+      dndDropProps.droppable && dndDropProps.canDrop && draggedVizNode
+        ? getNodeDragAndDropDirection(draggedVizNode, groupVizNode, false)
+        : null;
+
+    const mainContainerClassNames = {
+      [`custom-group__container__draggedGroup`]: isDraggingGroup || refreshGroup,
+      ...getDropTargetContainerClassNames('custom-group__container', dropDirection, dndDropProps.hover),
+    };
 
     const box = element.getBounds();
     if (!dndDropProps.droppable || !boxRef.current) {
@@ -199,13 +209,7 @@ export const CustomGroupExpandedInner: FunctionComponent<CustomGroupProps> = obs
           >
             <div
               data-testid={`${groupVizNode.getId()}|${groupVizNode.id}`}
-              className={clsx('custom-group__container', {
-                'custom-group__container__draggedGroup': isDraggingGroup || refreshGroup,
-                'custom-group__container__dropTarget-right': dropDirection === 'forward' && dndDropProps.hover,
-                'custom-group__container__dropTarget-left': dropDirection === 'backward' && dndDropProps.hover,
-                'custom-group__container__possibleDropTarget-right': dropDirection === 'forward' && !dndDropProps.hover,
-                'custom-group__container__possibleDropTarget-left': dropDirection === 'backward' && !dndDropProps.hover,
-              })}
+              className={clsx('custom-group__container', mainContainerClassNames)}
             >
               <div className="custom-group__container__text" title={tooltipContent}>
                 {doesHaveWarnings ? (
diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss
@@ -10,6 +10,24 @@
       flex-flow: column nowrap;
       justify-content: space-around;
 
+      &__dropTarget-right {
+        border-right: var(--custom-component-border-dropTarget);
+        border-radius: var(--custom-node-BorderRadius);
+      }
+
+      &__dropTarget-left {
+        border-left: var(--custom-component-border-dropTarget);
+        border-radius: var(--custom-node-BorderRadius);
+      }
+
+      &__possibleDropTarget-right {
+        border-right: var(--custom-component-border-possibleDropTarget);
+      }
+
+      &__possibleDropTarget-left {
+        border-left: var(--custom-component-border-possibleDropTarget);
+      }
+
       &__draggable {
         @include dnd.cursor-grab;
       }
diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx
@@ -41,10 +41,10 @@ import { CanvasDefaults } from '../../Canvas/canvas.defaults';
 import { CanvasNode } from '../../Canvas/canvas.models';
 import { StepToolbar } from '../../Canvas/StepToolbar/StepToolbar';
 import { NodeContextMenuFn } from '../ContextMenu/NodeContextMenu';
-import { GROUP_DRAG_TYPE, NODE_DRAG_TYPE } from '../customComponentUtils';
+import { getDropTargetContainerClassNames, GROUP_DRAG_TYPE, NODE_DRAG_TYPE } from '../customComponentUtils';
 import { TargetAnchor } from '../target-anchor';
 import { CustomNodeContainer } from './CustomNodeContainer';
-import { checkNodeDropCompatibility, handleValidNodeDrop } from './CustomNodeUtils';
+import { checkNodeDropCompatibility, getNodeDragAndDropDirection, handleValidNodeDrop } from './CustomNodeUtils';
 
 type DefaultNodeProps = Parameters<typeof DefaultNode>[0];
 
@@ -98,6 +98,16 @@ const CustomNodeLabel: FunctionComponent<CustomNodeLabelProps> = ({
   </foreignObject>
 );
 
+function getShouldShowToolbar(
+  trigger: NodeToolbarTrigger | undefined,
+  isGHover: boolean,
+  isToolbarHover: boolean,
+  selected: boolean | undefined,
+): boolean {
+  const isHoverTrigger = trigger === NodeToolbarTrigger.onHover;
+  return isHoverTrigger ? isGHover || isToolbarHover || !!selected : !!selected;
+}
+
 const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
   ({ element, onContextMenu, onCollapseToggle, selected, onSelect }) => {
     if (!isNode(element)) {
@@ -125,10 +135,12 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
       CanvasDefaults.HOVER_DELAY_OUT,
     );
     const childCount = element.getAllNodeChildren().length;
-    const shouldShowToolbar =
-      settingsAdapter.getSettings().nodeToolbarTrigger === NodeToolbarTrigger.onHover
-        ? isGHover || isToolbarHover || selected
-        : selected;
+    const shouldShowToolbar = getShouldShowToolbar(
+      settingsAdapter.getSettings().nodeToolbarTrigger,
+      isGHover,
+      isToolbarHover,
+      selected,
+    );
     const canDragNode = vizNode?.canDragNode() ?? false;
 
     const hasSomeInteractions = useMemo(
@@ -158,7 +170,7 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
       DragObjectWithType,
       DragSpecOperationType<EditableDragOperationType>,
       GraphElement,
-      { node: GraphElement | undefined },
+      object,
       GraphElementProps
     > = useMemo(
       () => ({
@@ -174,9 +186,6 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
             element.getGraph().layout();
           }
         },
-        collect: (monitor) => ({
-          node: monitor.getItem(),
-        }),
       }),
       [canDragNode, element, entitiesContext, nodeInteractionAddonContext],
     );
@@ -194,7 +203,7 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
       GraphElementProps
     > = useMemo(
       () => ({
-        accept: [NODE_DRAG_TYPE],
+        accept: [NODE_DRAG_TYPE, GROUP_DRAG_TYPE],
         canDrop: (item, _monitor, _props) => {
           const targetNode = element;
           const draggedNode = item as Node;
@@ -226,10 +235,10 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
       [element, vizNode, entitiesContext, catalogModalContext],
     );
 
-    const [dragNodeProps, dragNodeRef] = useDragNode(nodeDragSourceSpec);
+    const [, dragNodeRef] = useDragNode(nodeDragSourceSpec);
     const [dndDropProps, dndDropRef] = useDndDrop(customNodeDropTargetSpec);
     const gCombinedRef = useCombineRefs<SVGGElement>(gHoverRef, dragNodeRef);
-    const isDraggingNode = dragNodeProps.node?.getId() === element.getId();
+    const isDraggingNode = dndDropProps.dragItem?.getId() === element.getId();
     const isDraggingNodeType = dndDropProps.dragItemType === NODE_DRAG_TYPE;
     const isDraggingGroupType = dndDropProps.dragItemType === GROUP_DRAG_TYPE;
     const draggedVizNode = dndDropProps.dragItem?.getData().vizNode;
@@ -249,8 +258,25 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
     const toolbarX = (box.width - toolbarWidth) / 2;
     const toolbarY = CanvasDefaults.STEP_TOOLBAR_HEIGHT * -1;
 
+    const dropDirection: 'forward' | 'backward' | null =
+      dndDropProps.droppable && dndDropProps.canDrop && draggedVizNode
+        ? getNodeDragAndDropDirection(draggedVizNode, vizNode, false)
+        : null;
+
+    const showMainNodeContainer = !dndDropProps.droppable || isDraggingNodeType || !isDraggingWithinGroup;
+    const showLabelWhenDragging =
+      (isDraggingNodeType && !isDraggingNode) || (isDraggingGroupType && !isDraggingWithinGroup);
+    const showToolbarSection = !dndDropProps.droppable && shouldShowToolbar && hasSomeInteractions;
+    const layerId = isDraggingWithinGroup ? TOP_LAYER : DEFAULT_LAYER;
+
+    const mainContainerClassNames = {
+      ...getDropTargetContainerClassNames('custom-node__container', dropDirection, dndDropProps.hover),
+      ['custom-node__container__draggable']: canDragNode,
+      ['custom-node__container__draggedNode']: isDraggedNode,
+    };
+
     return (
-      <Layer id={isDraggingWithinGroup ? TOP_LAYER : DEFAULT_LAYER} data-lastupdate={lastUpdate}>
+      <Layer id={layerId} data-lastupdate={lastUpdate}>
         <g
           ref={gCombinedRef}
           className="custom-node"
@@ -266,21 +292,14 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
           {/** The original node (appears when nothing is dragging, it also acts as the dragged node when node drag action is performed.
            * When a group/container is being dragged, the within-group nodes are hidden but the rest of the nodes show this original node.
            */}
-          {(!dndDropProps.droppable || isDraggingNodeType || !isDraggingWithinGroup) && (
+          {showMainNodeContainer && (
             <CustomNodeContainer
               width={box.width}
               height={box.height}
               dataNodelabel={label}
-              foreignObjectRef={dndDropRef}
+              foreignObjectRef={isDraggingNode ? null : dndDropRef}
               dataTestId={vizNode.id}
-              containerClassNames={{
-                'custom-node__container__dropTarget':
-                  dndDropProps.droppable && dndDropProps.canDrop && dndDropProps.hover,
-                'custom-node__container__possibleDropTargets':
-                  dndDropProps.canDrop && dndDropProps.droppable && !dndDropProps.hover,
-                'custom-node__container__draggable': canDragNode,
-                'custom-node__container__draggedNode': isDraggedNode,
-              }}
+              containerClassNames={mainContainerClassNames}
               vizNode={vizNode}
               tooltipContent={tooltipContent}
               childCount={childCount}
@@ -298,9 +317,7 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
               dataNodelabel={label}
               transform={`translate(${boxXRef.current - box.x}, ${boxYRef.current - box.y})`}
               dataTestId={`${vizNode.id}-dummy`}
-              containerClassNames={{
-                'custom-node__container__draggedNode': isDraggedNode,
-              }}
+              containerClassNames={{ 'custom-node__container__draggedNode': isDraggedNode }}
               vizNode={vizNode}
               tooltipContent={tooltipContent}
               childCount={childCount}
@@ -309,8 +326,9 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
               isDisabled={isDisabled}
             />
           )}
+
           {/** This label, appears for the node which are not dragging */}
-          {label && ((isDraggingNodeType && !isDraggingNode) || (isDraggingGroupType && !isDraggingWithinGroup)) && (
+          {label && showLabelWhenDragging && (
             <CustomNodeLabel
               label={label}
               doesHaveWarnings={doesHaveWarnings}
@@ -341,7 +359,7 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
             />
           )}
 
-          {!dndDropProps.droppable && shouldShowToolbar && hasSomeInteractions && (
+          {showToolbarSection && (
             <Layer id={TOP_LAYER}>
               <foreignObject
                 ref={toolbarHoverRef}
diff --git a/packages/ui/src/components/Visualization/Custom/_custom.scss b/packages/ui/src/components/Visualization/Custom/_custom.scss
@@ -17,9 +17,8 @@
   --custom-node-BorderColor-hover: var(--pf-t--global--border--color--hover);
   --custom-component-dropTarget: var(--pf-t--global--color--status--success--default);
   --custom-component-possibleDropTarget: var(--pf-t--global--color--brand--100);
-  --custom-group-border-dropTarget: 8px solid var(--custom-component-dropTarget);
-  --custom-group-border-possibleDropTarget: 8px dashed var(--custom-component-possibleDropTarget);
-  --custom-node-BorderColor-possibleDropTargets: var(--pf-t--global--border--color--default);
+  --custom-component-border-dropTarget: 8px solid var(--custom-component-dropTarget);
+  --custom-component-border-possibleDropTarget: 8px dashed var(--custom-component-possibleDropTarget);
   --custom-node-BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --custom-node-BorderRadius: 10px;
   --custom-node-Shadow: var(--pf-t--global--box-shadow--md);
diff --git a/packages/ui/src/components/Visualization/Custom/customComponentUtils.test.ts b/packages/ui/src/components/Visualization/Custom/customComponentUtils.test.ts
@@ -5,7 +5,70 @@ import { AddStepMode, IVisualizationNode } from '../../../models/visualization/b
 import { CamelComponentSchemaService } from '../../../models/visualization/flows/support/camel-component-schema.service';
 import { CamelRouteVisualEntityData } from '../../../models/visualization/flows/support/camel-component-types';
 import { EntitiesContextResult } from '../../../providers';
-import { canDragGroup, canDropOnEdge } from './customComponentUtils';
+import { canDragGroup, canDropOnEdge, getDropTargetContainerClassNames } from './customComponentUtils';
+
+describe('getDropTargetContainerClassNames', () => {
+  const prefix = 'custom-node__container';
+
+  it('returns dropTarget-right true when direction is forward and hover is true', () => {
+    const result = getDropTargetContainerClassNames(prefix, 'forward', true);
+
+    expect(Object.keys(result)).toHaveLength(4);
+    expect(result[`${prefix}__dropTarget-right`]).toBe(true);
+    expect(result[`${prefix}__dropTarget-left`]).toBe(false);
+    expect(result[`${prefix}__possibleDropTarget-right`]).toBe(false);
+    expect(result[`${prefix}__possibleDropTarget-left`]).toBe(false);
+  });
+
+  it('returns possibleDropTarget-right true when direction is forward and hover is false', () => {
+    const result = getDropTargetContainerClassNames(prefix, 'forward', false);
+
+    expect(Object.keys(result)).toHaveLength(4);
+    expect(result[`${prefix}__dropTarget-right`]).toBe(false);
+    expect(result[`${prefix}__dropTarget-left`]).toBe(false);
+    expect(result[`${prefix}__possibleDropTarget-right`]).toBe(true);
+    expect(result[`${prefix}__possibleDropTarget-left`]).toBe(false);
+  });
+
+  it('returns dropTarget-left true when direction is backward and hover is true', () => {
+    const result = getDropTargetContainerClassNames(prefix, 'backward', true);
+
+    expect(Object.keys(result)).toHaveLength(4);
+    expect(result[`${prefix}__dropTarget-right`]).toBe(false);
+    expect(result[`${prefix}__dropTarget-left`]).toBe(true);
+    expect(result[`${prefix}__possibleDropTarget-right`]).toBe(false);
+    expect(result[`${prefix}__possibleDropTarget-left`]).toBe(false);
+  });
+
+  it('returns possibleDropTarget-left true when direction is backward and hover is false', () => {
+    const result = getDropTargetContainerClassNames(prefix, 'backward', false);
+
+    expect(Object.keys(result)).toHaveLength(4);
+    expect(result[`${prefix}__dropTarget-right`]).toBe(false);
+    expect(result[`${prefix}__dropTarget-left`]).toBe(false);
+    expect(result[`${prefix}__possibleDropTarget-right`]).toBe(false);
+    expect(result[`${prefix}__possibleDropTarget-left`]).toBe(true);
+  });
+
+  it('returns all drop-target flags false when dropDirection is null', () => {
+    const result = getDropTargetContainerClassNames(prefix, null, true);
+
+    expect(Object.keys(result)).toHaveLength(4);
+    expect(result[`${prefix}__dropTarget-right`]).toBe(false);
+    expect(result[`${prefix}__dropTarget-left`]).toBe(false);
+    expect(result[`${prefix}__possibleDropTarget-right`]).toBe(false);
+    expect(result[`${prefix}__possibleDropTarget-left`]).toBe(false);
+  });
+
+  it('uses a custom prefix for class names', () => {
+    const customPrefix = 'custom-group__container__';
+    const result = getDropTargetContainerClassNames(customPrefix, 'forward', true);
+
+    expect(Object.keys(result)).toHaveLength(4);
+    expect(result[`${customPrefix}__dropTarget-right`]).toBe(true);
+    expect(result).not.toHaveProperty(`${prefix}__dropTarget-right`);
+  });
+});
 
 describe('canDropOnEdge', () => {
   const getMockVizNode = (id: string): IVisualizationNode => {
diff --git a/packages/ui/src/components/Visualization/Custom/customComponentUtils.ts b/packages/ui/src/components/Visualization/Custom/customComponentUtils.ts
@@ -7,6 +7,19 @@ import { EntitiesContextResult } from '../../../providers';
 const NODE_DRAG_TYPE = '#node#';
 const GROUP_DRAG_TYPE = '#group#';
 
+type DropDirection = 'forward' | 'backward' | null;
+
+const getDropTargetContainerClassNames = (
+  prefix: string,
+  dropDirection: DropDirection,
+  hover: boolean,
+): Record<string, boolean> => ({
+  [`${prefix}__dropTarget-right`]: dropDirection === 'forward' && hover,
+  [`${prefix}__dropTarget-left`]: dropDirection === 'backward' && hover,
+  [`${prefix}__possibleDropTarget-right`]: dropDirection === 'forward' && !hover,
+  [`${prefix}__possibleDropTarget-left`]: dropDirection === 'backward' && !hover,
+});
+
 const canDropOnEdge = (
   draggedVizNode: IVisualizationNode,
   potentialEdge: Edge<EdgeModel, unknown>,
@@ -59,4 +72,4 @@ const canDragGroup = (groupVizNode?: IVisualizationNode): boolean => {
   return true;
 };
 
-export { canDragGroup, canDropOnEdge, GROUP_DRAG_TYPE, NODE_DRAG_TYPE };
+export { canDragGroup, canDropOnEdge, getDropTargetContainerClassNames, GROUP_DRAG_TYPE, NODE_DRAG_TYPE };

Original file line number	Diff line number	Diff line change
`@@ -79,19 +79,19 @@`
`79`	`79`	`}`
`80`	`80`
`81`	`81`	`&__dropTarget-right {`
`82`		`- border-right: var(--custom-group-border-dropTarget);`
	`82`	`+ border-right: var(--custom-component-border-dropTarget);`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`&__dropTarget-left {`
`86`		`- border-left: var(--custom-group-border-dropTarget);`
	`86`	`+ border-left: var(--custom-component-border-dropTarget);`
`87`	`87`	`}`
`88`	`88`
`89`	`89`	`&__possibleDropTarget-right {`
`90`		`- border-right: var(--custom-group-border-possibleDropTarget);`
	`90`	`+ border-right: var(--custom-component-border-possibleDropTarget);`
`91`	`91`	`}`
`92`	`92`
`93`	`93`	`&__possibleDropTarget-left {`
`94`		`- border-left: var(--custom-group-border-possibleDropTarget);`
	`94`	`+ border-left: var(--custom-component-border-possibleDropTarget);`
`95`	`95`	`}`
`96`	`96`	`}`
`97`	`97`