Feat(DND): Enable Simple DND

packages/ui/src/components/Visualization/Custom/Group/CustomGroupCollapsible.tsx

@@ -2,7 +2,7 @@ import { isNode, observer } from '@patternfly/react-topology';
 import { FunctionComponent } from 'react';
 import { useCollapseStep } from '../hooks/collapse-step.hook';
 import { CustomNodeWithSelection } from '../Node/CustomNode';
-import { CustomGroupExpanded } from './CustomGroupExpanded';
+import { CustomGroupExpendedWithDndDrop } from './CustomGroupExpanded';
 import { CustomGroupProps } from './Group.models';
 
 export const CustomGroupCollapsible: FunctionComponent<CustomGroupProps> = observer(
@@ -26,7 +26,7 @@ export const CustomGroupCollapsible: FunctionComponent<CustomGroupProps> = obser
     }
 
     return (
-      <CustomGroupExpanded
+      <CustomGroupExpendedWithDndDrop
         {...rest}
         element={element}
         onCollapseToggle={() => {

packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.scss

@@ -10,6 +10,10 @@
       background-color: var(--custom-node-BackgroundColor);
       text-align: left;
 
+      &__dropTarget {
+        border: 4px dashed var(--custom-node-BorderColor);
+      }
+
       &__title {
         display: flex;
         position: relative;

packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx

@@ -2,7 +2,10 @@ import { Icon } from '@patternfly/react-core';
 import { BanIcon } from '@patternfly/react-icons';
 import {
   AnchorEnd,
+  DropTargetSpec,
   GROUPS_LAYER,
+  GraphElement,
+  GraphElementProps,
   Layer,
   Node,
   Rect,
@@ -12,6 +15,7 @@ import {
   useAnchor,
   useHover,
   useSelection,
+  withDndDrop,
 } from '@patternfly/react-topology';
 import { FunctionComponent, useContext, useRef } from 'react';
 import { IVisualizationNode, NodeToolbarTrigger } from '../../../../models';
@@ -21,9 +25,10 @@ import { CanvasDefaults } from '../../Canvas/canvas.defaults';
 import { TargetAnchor } from '../target-anchor';
 import './CustomGroupExpanded.scss';
 import { CustomGroupProps } from './Group.models';
+import clsx from 'clsx';
 
-export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer(
-  ({ element, onContextMenu, onCollapseToggle }) => {
+const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer(
+  ({ element, onContextMenu, onCollapseToggle, dndDropRef, hover, droppable, canDrop }) => {
     if (!isNode(element)) {
       throw new Error('CustomGroupExpanded must be used only on Node elements');
     }
@@ -39,7 +44,7 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer
       CanvasDefaults.HOVER_DELAY_IN,
       CanvasDefaults.HOVER_DELAY_OUT,
     );
-    const boxRef = useRef<Rect>(element.getBounds());
+    const boxRef = useRef<Rect | null>(null);
     const shouldShowToolbar =
       settingsAdapter.getSettings().nodeToolbarTrigger === NodeToolbarTrigger.onHover
         ? isGHover || isToolbarHover || isSelected
@@ -53,7 +58,9 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer
       return null;
     }
 
-    boxRef.current = element.getBounds();
+    if (!droppable || !boxRef.current) {
+      boxRef.current = element.getBounds();
+    }
     const toolbarWidth = Math.max(CanvasDefaults.STEP_TOOLBAR_WIDTH, boxRef.current.width);
     const toolbarX = boxRef.current.x + (boxRef.current.width - toolbarWidth) / 2;
     const toolbarY = boxRef.current.y - CanvasDefaults.STEP_TOOLBAR_HEIGHT;
@@ -72,13 +79,18 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer
           onContextMenu={onContextMenu}
         >
           <foreignObject
+            ref={dndDropRef}
             data-nodelabel={label}
             x={boxRef.current.x}
             y={boxRef.current.y}
             width={boxRef.current.width}
             height={boxRef.current.height}
           >
-            <div className="custom-group__container">
+            <div
+              className={clsx('custom-group__container', {
+                'custom-group__container__dropTarget': canDrop && hover,
+              })}
+            >
               <div className="custom-group__container__title" title={tooltipContent}>
                 <img src={vizNode.data.icon} />
                 <span title={label}>{label}</span>
@@ -116,3 +128,23 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer
     );
   },
 );
+
+const groupDropTargetSpec: DropTargetSpec<GraphElement, unknown, object, GraphElementProps> = {
+  accept: ['#node#'],
+  canDrop: (item, _monitor, props) => {
+    if (!!props && (item as Node).getData().vizNode.parentNode.id !== (props.element as Node).getData().vizNode.id) {
+      return (
+        (item as Node).getData().vizNode.parentNode.id === (props.element as Node).getData().vizNode.parentNode?.id
+      );
+    } else {
+      return false;
+    }
+  },
+  collect: (monitor) => ({
+    droppable: monitor.isDragging(),
+    hover: monitor.isOver(),
+    canDrop: monitor.canDrop(),
+  }),
+};
+
+export const CustomGroupExpendedWithDndDrop = withDndDrop(groupDropTargetSpec)(CustomGroupExpanded);

packages/ui/src/components/Visualization/Custom/Group/Group.models.ts

@@ -1,9 +1,18 @@
-import type { ElementModel, GraphElement, DefaultGroup as TopologyDefaultGroup } from '@patternfly/react-topology';
+import type {
+  ConnectDropTarget,
+  ElementModel,
+  GraphElement,
+  DefaultGroup as TopologyDefaultGroup,
+} from '@patternfly/react-topology';
 import { CanvasNode } from '../../Canvas';
 
 type DefaultGroupProps = Parameters<typeof TopologyDefaultGroup>[0];
 export interface CustomGroupProps extends DefaultGroupProps {
   element: GraphElement<ElementModel, CanvasNode['data']>;
   /** Toggle node collapse / expand */
   onCollapseToggle?: () => void;
+  dndDropRef?: ConnectDropTarget;
+  hover?: boolean;
+  droppable?: boolean;
+  canDrop?: boolean;
 }

packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss

@@ -9,6 +9,11 @@
       flex-flow: column nowrap;
       justify-content: space-around;
 
+      &__dropTarget {
+        border: 3px dashed var(--pf-v5-global--BorderColor--100);
+        border-radius: 5px;
+      }
+
       &__image {
         position: relative;
         display: flex;