Updates per review comments

frontend/packages/dev-console/src/components/topology/componentFactory.ts

@@ -66,6 +66,7 @@ import { withEditReviewAccess } from './withEditReviewAccess';
 import HelmRelease from './components/groups/HelmRelease';
 import AggregateEdge from './components/edges/AggregateEdge';
 import TrafficConnector from './components/edges/TrafficConnector';
+import CreateConnector from './components/edges/CreateConnector';
 
 type NodeProps = {
   element: Node;
@@ -94,9 +95,8 @@ class ComponentFactory {
     this.hasServiceBinding = value;
   }
 
-  withAddResourceConnector = () => {
-    return withCreateConnector(createConnectorCallback(this.hasServiceBinding), 'Add Resource');
-  };
+  withAddResourceConnector = () =>
+    withCreateConnector(createConnectorCallback(this.hasServiceBinding), CreateConnector);
 
   getFactory = (): TopologyComponentFactory => {
     return (kind, type): React.ComponentType<{ element: GraphElement }> | undefined => {

frontend/packages/dev-console/src/components/topology/componentUtils.ts

@@ -145,7 +145,7 @@ const nodeDropTargetSpec: DropTargetSpec<
   accept: [MOVE_CONNECTOR_DROP_TYPE, CREATE_CONNECTOR_DROP_TYPE],
   canDrop: (item, monitor, props) => {
     if (isEdge(item)) {
-      return item.getSource() !== props.element && item.getTarget() !== props.element;
+      return canDropEdgeOnNode(monitor.getOperation(), item, props.element);
     }
     if (item === props.element) {
       return false;
@@ -177,11 +177,10 @@ const graphWorkloadDropTargetSpec: DropTargetSpec<
   collect: (monitor) => {
     const dragEditInProgress =
       monitor.isDragging() && editOperations.includes(monitor.getOperation());
-    const dropHints = monitor.getDropHints() || [];
     const dragCreate =
       dragEditInProgress &&
-      monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE &&
-      dropHints[dropHints.length - 1] === 'create';
+      (monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE ||
+        monitor.getItemType() === MOVE_CONNECTOR_DROP_TYPE);
     return {
       dragEditInProgress,
       dragCreate,
@@ -258,7 +257,7 @@ const edgeDragSourceSpec = (
   },
   end: (dropResult, monitor, props) => {
     props.element.setEndPoint();
-    if (monitor.didDrop() && dropResult) {
+    if (monitor.didDrop() && dropResult && canDropEdgeOnNode('', props.element, dropResult)) {
       callback(
         props.element.getSource(),
         dropResult,

frontend/packages/dev-console/src/components/topology/components/GraphComponent.scss

@@ -1,9 +1,9 @@
 @import '../topology-utils';
 
 .odc-m-drag-active {
-  cursor: no-drop !important;
+  cursor: no-drop;
   &.odc-m-valid-drop-target {
-    cursor: grab !important;
+    cursor: grab;
     .odc-m-drag-create {
       cursor: none;
     }

frontend/packages/dev-console/src/components/topology/components/edges/BaseEdge.scss

@@ -1,7 +1,6 @@
 @import '../../topology-utils';
 
 .odc-base-edge {
-  --edge--drag-active--cursor: grab;
   --edge--stroke-width: 2px;
   --edge--stroke-dasharray: 0;
   --edge--stroke: #{$default-edge-stroke-color};

frontend/packages/dev-console/src/components/topology/components/edges/CreateConnector.scss

@@ -0,0 +1,11 @@
+@import '../../topology-utils';
+
+.odc-create-connector {
+  cursor: pointer;
+  &.is-dragging {
+    pointer-events: none;
+  }
+  &.topology-default-create-connector {
+    --create-connector-color: #{$interactive-stroke-color};
+  }
+}

frontend/packages/dev-console/src/components/topology/components/edges/CreateConnector.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import * as classNames from 'classnames';
+import { CreateConnectorRenderer, DefaultCreateConnector } from '@console/topology';
+
+import './CreateConnector.scss';
+
+const CreateConnector: CreateConnectorRenderer = ({ startPoint, endPoint, dragging, hints }) => {
+  const [hover, setHover] = React.useState(false);
+  const unsetHandle = React.useRef<number>();
+
+  React.useEffect(() => {
+    setHover(false);
+    clearTimeout(unsetHandle.current);
+    unsetHandle.current = window.setTimeout(() => {
+      setHover(dragging);
+    }, 2000);
+    return () => {
+      clearTimeout(unsetHandle.current);
+    };
+  }, [endPoint.x, endPoint.y, dragging]);
+
+  const classes = classNames('odc-create-connector', { 'is-dragging': dragging });
+  return (
+    <DefaultCreateConnector
+      className={classes}
+      startPoint={startPoint}
+      endPoint={endPoint}
+      dragging={dragging}
+      hints={hints}
+      tipContents={hover && dragging ? 'Add Resources' : null}
+    />
+  );
+};
+
+export default CreateConnector;

frontend/packages/topology/src/behavior/dnd-types.ts

@@ -53,7 +53,7 @@ export type Unregister = () => void;
 export interface DndManager {
   registerSource(source: DragSource): [string, Unregister];
   registerTarget(target: DropTarget): [string, Unregister];
-  getDropHints(): string[] | undefined;
+  getDropHints(): string[];
   canDragSource(sourceId: string | undefined): boolean;
   canDropOnTarget(targetId: string | undefined): boolean;
   hasDropTarget(): boolean;
@@ -156,7 +156,7 @@ export interface HandlerManager {
 }
 
 export interface DragSourceMonitor extends HandlerManager {
-  getDropHints(): string[] | undefined;
+  getDropHints(): string[];
   canDrag(): boolean;
   isCancelled(): boolean;
   isDragging(): boolean;
@@ -174,7 +174,7 @@ export interface DropTargetMonitor extends HandlerManager {
   isDragging(): boolean;
   isOver(options?: { shallow?: boolean }): boolean;
   hasDropTarget(): boolean;
-  getDropHints(): string[] | undefined;
+  getDropHints(): string[];
   getItemType(): Identifier | undefined;
   getItem(): any;
   getDropResult(): any;

frontend/packages/topology/src/behavior/useDndDrag.tsx

@@ -95,7 +95,7 @@ export const useDndDrag = <
       receiveHandlerId: (sourceId: string | undefined): void => {
         idRef.current = sourceId;
       },
-      getDropHints: (): string[] | undefined => {
+      getDropHints: (): string[] => {
         return dndManager.getDropHints();
       },
       canDrag: (): boolean => {

frontend/packages/topology/src/behavior/useDndDrop.tsx

@@ -57,7 +57,7 @@ export const useDndDrop = <
       hasDropTarget: (): boolean => {
         return dndManager.hasDropTarget();
       },
-      getDropHints: (): string[] | undefined => {
+      getDropHints: (): string[] => {
         return dndManager.getDropHints();
       },
       isOver(options?: { shallow?: boolean }): boolean {

frontend/packages/topology/src/behavior/useDndManager.tsx

@@ -46,15 +46,15 @@ export class DndManagerImpl implements DndManager {
   private targets: { [key: string]: DropTarget } = {};
 
   @computed
-  get dropHints(): string[] | undefined {
+  get dropHints(): string[] {
     return this.state.targetIds
       ? (this.state.targetIds
           .map((id) => {
             const target = this.getTarget(id);
-            return target ? target.dropHint(this) : undefined;
+            return target ? target.dropHint(this) : [];
           })
           .filter((x) => x) as string[])
-      : undefined;
+      : [];
   }
 
   registerSource(source: DragSource): [string, Unregister] {
@@ -79,7 +79,7 @@ export class DndManagerImpl implements DndManager {
     ];
   }
 
-  getDropHints(): string[] | undefined {
+  getDropHints(): string[] {
     return this.dropHints;
   }