openshift · openshift-merge-robot · Feb 25, 2020 · Feb 17, 2020
diff --git a/frontend/packages/dev-console/src/components/topology/componentFactory.ts b/frontend/packages/dev-console/src/components/topology/componentFactory.ts
@@ -32,6 +32,7 @@ import {
   groupWorkloadDropTargetSpec,
   edgeDragSourceSpec,
   graphEventSourceDropTargetSpec,
+  noDropTargetSpec,
   createConnectorCallback,
   removeConnectorCallback,
   MOVE_CONNECTOR_DROP_TYPE,
@@ -70,6 +71,10 @@ type NodeProps = {
   element: Node;
 };
 
+const withNoDrop = () => {
+  return withDndDrop<any, any, {}, NodeProps>(noDropTargetSpec);
+};
+
 class ComponentFactory {
   private hasServiceBinding: boolean;
 
@@ -85,7 +90,7 @@ class ComponentFactory {
     return (kind, type): ComponentType<{ element: GraphElement }> | undefined => {
       switch (type) {
         case TYPE_HELM_RELEASE:
-          return withSelection(false, true)(HelmRelease);
+          return withSelection(false, true)(withNoDrop()(HelmRelease));
         case TYPE_HELM_WORKLOAD:
           return withCreateConnector(createConnectorCallback(this.hasServiceBinding))(
             withDndDrop<
@@ -124,7 +129,7 @@ class ComponentFactory {
             ),
           );
         case TYPE_OPERATOR_BACKED_SERVICE:
-          return withSelection(false, true)(OperatorBackedService);
+          return withSelection(false, true)(withNoDrop()(OperatorBackedService));
         case TYPE_OPERATOR_WORKLOAD:
           return withCreateConnector(createConnectorCallback(this.hasServiceBinding))(
             withEditReviewAccess('patch')(
@@ -182,7 +187,7 @@ class ComponentFactory {
                   nodeContextMenu,
                   document.getElementById('modal-container'),
                   'odc-topology-context-menu',
-                )(EventSource),
+                )(withNoDrop()(EventSource)),
               ),
             ),
           );
@@ -196,7 +201,7 @@ class ComponentFactory {
                 nodeContextMenu,
                 document.getElementById('modal-container'),
                 'odc-topology-context-menu',
-              )(RevisionNode),
+              )(withNoDrop()(RevisionNode)),
             ),
           );
         case TYPE_REVISION_TRAFFIC:

diff --git a/frontend/packages/dev-console/src/components/topology/componentUtils.ts b/frontend/packages/dev-console/src/components/topology/componentUtils.ts
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   Modifiers,
   Edge,
@@ -18,7 +19,7 @@ import { K8sResourceKind } from '@console/internal/module/k8s';
 import { createConnection } from './components/createConnection';
 import { removeConnection } from './components/removeConnection';
 import { moveNodeToGroup } from './components/moveNodeToGroup';
-import { TYPE_CONNECTS_TO, TYPE_WORKLOAD, TYPE_KNATIVE_SERVICE, TYPE_EVENT_SOURCE } from './const';
+import { TYPE_WORKLOAD, TYPE_KNATIVE_SERVICE, TYPE_EVENT_SOURCE } from './const';
 import './components/GraphComponent.scss';
 import { graphContextMenu, groupContextMenu } from './nodeContextMenu';
 import { errorModal } from '@console/internal/components/modals';
@@ -44,6 +45,8 @@ const REGROUP_OPERATION = 'regroup';
 
 const editOperations = [REGROUP_OPERATION, MOVE_CONNECTOR_OPERATION, CREATE_CONNECTOR_OPERATION];
 
+const regroupTypes = [TYPE_WORKLOAD, TYPE_KNATIVE_SERVICE, TYPE_EVENT_SOURCE];
+
 const highlightNodeOperations = [MOVE_CONNECTOR_OPERATION, CREATE_CONNECTOR_OPERATION];
 
 const canDropEdgeOnNode = (operation: string, edge: Edge, node: Node): boolean => {
@@ -162,17 +165,13 @@ const graphWorkloadDropTargetSpec: DropTargetSpec<
   { dragEditInProgress: boolean },
   GraphProps
 > = {
-  accept: [
-    TYPE_WORKLOAD,
-    TYPE_KNATIVE_SERVICE,
-    TYPE_EVENT_SOURCE,
-    TYPE_CONNECTS_TO,
-    CREATE_CONNECTOR_DROP_TYPE,
-  ],
+  accept: [...regroupTypes, CREATE_CONNECTOR_DROP_TYPE],
+  hitTest: () => true,
   canDrop: (item, monitor, props) => {
     return (
-      (monitor.getOperation() === REGROUP_OPERATION && item.getParent() !== props.element) ||
-      monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE
+      monitor.isOver({ shallow: monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE }) &&
+      ((monitor.getOperation() === REGROUP_OPERATION && item.getParent() !== props.element) ||
+        monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE)
     );
   },
   collect: (monitor) => ({
@@ -187,14 +186,18 @@ const groupWorkloadDropTargetSpec: DropTargetSpec<
   { droppable: boolean; dropTarget: boolean; canDrop: boolean },
   any
 > = {
-  accept: [TYPE_WORKLOAD, TYPE_EVENT_SOURCE, TYPE_KNATIVE_SERVICE, CREATE_CONNECTOR_DROP_TYPE],
+  accept: [...regroupTypes, CREATE_CONNECTOR_DROP_TYPE],
   canDrop: (item, monitor) =>
-    monitor.getOperation() === REGROUP_OPERATION ||
-    monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE,
+    monitor.isOver({ shallow: monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE }) &&
+    (monitor.getOperation() === REGROUP_OPERATION ||
+      monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE),
   collect: (monitor) => ({
     droppable: monitor.isDragging() && monitor.getOperation() === REGROUP_OPERATION,
-    dropTarget: monitor.isOver({ shallow: true }),
-    canDrop: monitor.canDrop(),
+    dropTarget: monitor.isOver({ shallow: monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE }),
+    canDrop:
+      monitor.isDragging() &&
+      (monitor.getOperation() === REGROUP_OPERATION ||
+        monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE),
   }),
   dropHint: 'create',
 };
@@ -205,12 +208,18 @@ const graphEventSourceDropTargetSpec: DropTargetSpec<
   { canDrop: boolean; dropTarget: boolean; edgeDragging: boolean },
   NodeProps
 > = {
-  accept: [MOVE_EV_SRC_CONNECTOR_DROP_TYPE],
+  accept: [CREATE_CONNECTOR_DROP_TYPE, MOVE_EV_SRC_CONNECTOR_DROP_TYPE],
   canDrop: (item, monitor, props) => {
-    return item.getSource() !== props.element;
+    return (
+      monitor.getOperation() === MOVE_EV_SRC_CONNECTOR_DROP_TYPE &&
+      item.getSource() !== props.element
+    );
   },
   collect: (monitor, props) => ({
-    canDrop: monitor.canDrop(),
+    canDrop:
+      monitor.isDragging() &&
+      monitor.getOperation() === MOVE_EV_SRC_CONNECTOR_DROP_TYPE &&
+      monitor.canDrop(),
     dropTarget: monitor.isOver({ shallow: true }),
     edgeDragging: nodesEdgeIsDragging(monitor, props),
   }),
@@ -254,6 +263,13 @@ const edgeDragSourceSpec = (
   }),
 });
 
+const noDropTargetSpec: DropTargetSpec<GraphElement, any, {}, { element: GraphElement }> = {
+  accept: [...regroupTypes, CREATE_CONNECTOR_DROP_TYPE],
+  canDrop: () => {
+    return false;
+  },
+};
+
 const createConnectorCallback = (serviceBinding: boolean) => (
   source: Node,
   target: Node | Graph,
@@ -288,6 +304,7 @@ export {
   groupWorkloadDropTargetSpec,
   graphEventSourceDropTargetSpec,
   edgeDragSourceSpec,
+  noDropTargetSpec,
   createConnectorCallback,
   removeConnectorCallback,
   MOVE_CONNECTOR_DROP_TYPE,

diff --git a/frontend/packages/dev-console/src/components/topology/components/GraphComponent.scss b/frontend/packages/dev-console/src/components/topology/components/GraphComponent.scss
@@ -1,9 +1,14 @@
+@import '../topology-utils';
+
 .odc-m-drag-active {
   cursor: grab !important;
+  .topology-create-connector {
+    pointer-events: none;
+  }
 }
 
 .topology-connector__remove-bg {
-  fill: var(--pf-global--active-color--400);
+  fill: #{$interactive-stroke-color};
   cursor: pointer;
   .odc-m-drag-active & {
     display: none;

diff --git a/frontend/packages/dev-console/src/components/topology/components/edges/BaseEdge.scss b/frontend/packages/dev-console/src/components/topology/components/edges/BaseEdge.scss
@@ -12,6 +12,8 @@
   --edge--active--fill: var(--edge--active--stroke);
   --edge--drag-active--opacity: #{$de-emphasize-opacity};
   --edge__arrow--cursor: default;
+  --edge--interactive--stroke: #{$interactive-stroke-color};
+  --edge--interactive--fill: var(--edge--interactive--stroke);
 
   cursor: var(--edge--cursor);
   stroke: var(--edge--stroke);
@@ -23,16 +25,24 @@
     stroke-dasharray: var(--edge--stroke-dasharray);
   }
 
-  &.is-hover,
-  &.is-selected,
-  &.is-dragging {
+  &.is-selected {
     fill: var(--edge--active--fill);
     stroke: var(--edge--active--stroke);
     .odc-base-edge__link,
     .topology-connector-arrow {
       stroke: var(--edge--active--stroke);
     }
   }
+
+  &.is-hover,
+  &.is-dragging {
+    fill: var(--edge--interactive--fill);
+    stroke: var(--edge--interactive--stroke);
+    .odc-base-edge__link,
+    .topology-connector-arrow {
+      stroke: var(--edge--interactive--stroke);
+    }
+  }
   .topology-connector-arrow {
     cursor: var(--edge__arrow--cursor);
     stroke: var(--edge--stroke);
@@ -48,10 +58,14 @@
 
 .odc-m-drag-active {
   .odc-base-edge {
+    pointer-events: none;
     opacity: var(--edge--drag-active--opacity);
     &.is-dragging {
       opacity: var(--edge--opacity);
     }
+    .topology-connector-arrow {
+      pointer-events: none;
+    }
   }
 }
 .odc-m-filter-active {

diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.scss b/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.scss
@@ -5,7 +5,7 @@
   cursor: pointer;
 
   .odc-m-drag-active & {
-    cursor: grab;
+    pointer-events: none;
   }
 
   &__bg {

diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.tsx b/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.tsx
@@ -1,17 +1,14 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
-import { Node, observer, WithSelectionProps } from '@console/topology';
-import { RootState } from '@console/internal/redux';
-import { getTopologyFilters, TopologyFilters } from '../../filters/filter-utils';
+import { Node, observer, WithSelectionProps, WithDndDropProps } from '@console/topology';
 import HelmReleaseNode from './HelmReleaseNode';
 import HelmReleaseGroup from './HelmReleaseGroup';
 
 import './HelmRelease.scss';
 
 export type HelmReleaseProps = {
   element: Node;
-  filters: TopologyFilters;
-} & WithSelectionProps;
+} & WithSelectionProps &
+  WithDndDropProps;
 
 const HelmRelease: React.FC<HelmReleaseProps> = (props) => {
   if (
@@ -25,8 +22,4 @@ const HelmRelease: React.FC<HelmReleaseProps> = (props) => {
   return <HelmReleaseGroup {...props} />;
 };
 
-const HelmReleaseState = (state: RootState) => ({
-  filters: getTopologyFilters(state),
-});
-
-export default connect(HelmReleaseState)(observer(HelmRelease));
+export default observer(HelmRelease);
diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseGroup.tsx b/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseGroup.tsx
@@ -7,37 +7,45 @@ import {
   createSvgIdUrl,
   useDragNode,
   WithSelectionProps,
+  WithDndDropProps,
   observer,
   useCombineRefs,
 } from '@console/topology';
 import NodeShadows, { NODE_SHADOW_FILTER_ID_HOVER, NODE_SHADOW_FILTER_ID } from '../NodeShadows';
 import SvgBoxedText from '../../../svg/SvgBoxedText';
 import useSearchFilter from '../../filters/useSearchFilter';
+import { nodeDragSourceSpec } from '../../componentUtils';
+import { TYPE_HELM_RELEASE } from '../../const';
 
 export type HelmReleaseGroupProps = {
   element: Node;
-} & WithSelectionProps;
+} & WithSelectionProps &
+  WithDndDropProps;
 
-const HelmReleaseGroup: React.FC<HelmReleaseGroupProps> = ({ element, onSelect, selected }) => {
+const HelmReleaseGroup: React.FC<HelmReleaseGroupProps> = ({
+  element,
+  onSelect,
+  selected,
+  dndDropRef,
+}) => {
   const [hover, hoverRef] = useHover();
   const [labelHover, labelHoverRef] = useHover();
   const { x, y, width, height } = element.getBounds();
-  const [{ dragging }, dragNodeRef] = useDragNode({
-    collect: (monitor) => ({
-      dragging: monitor.isDragging(),
-    }),
+  const [{ dragging }, dragNodeRef] = useDragNode(nodeDragSourceSpec(TYPE_HELM_RELEASE, false), {
+    element,
   });
-  const [{ labelDragging }, dragLabelRef] = useDragNode({
-    collect: (monitor) => ({
-      labelDragging: monitor.isDragging(),
-    }),
-  });
-  const refs = useCombineRefs(dragNodeRef, hoverRef);
+  const [{ dragging: labelDragging }, dragLabelRef] = useDragNode(
+    nodeDragSourceSpec(TYPE_HELM_RELEASE, false),
+    {
+      element,
+    },
+  );
+  const refs = useCombineRefs(dragNodeRef, dndDropRef, hoverRef);
   const [filtered] = useSearchFilter(element.getLabel());
   return (
     <>
       <NodeShadows />
-      <Layer id={dragging ? undefined : 'groups'}>
+      <Layer id={dragging || labelDragging ? undefined : 'groups'}>
         <g
           className={classNames('odc-helm-release', {
             'is-dragging': dragging || labelDragging,

diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseNode.tsx b/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseNode.tsx
@@ -8,26 +8,33 @@ import {
   createSvgIdUrl,
   useDragNode,
   WithSelectionProps,
+  WithDndDropProps,
   observer,
   useCombineRefs,
 } from '@console/topology';
 import NodeShadows, { NODE_SHADOW_FILTER_ID_HOVER, NODE_SHADOW_FILTER_ID } from '../NodeShadows';
 import useSearchFilter from '../../filters/useSearchFilter';
 import GroupNode from '../nodes/GroupNode';
+import { nodeDragSourceSpec } from '../../componentUtils';
+import { TYPE_HELM_RELEASE } from '../../const';
 
 export type HelmReleaseNodeProps = {
   element: Node;
-} & WithSelectionProps;
+} & WithSelectionProps &
+  WithDndDropProps;
 
-const HelmReleaseNode: React.FC<HelmReleaseNodeProps> = ({ element, onSelect, selected }) => {
+const HelmReleaseNode: React.FC<HelmReleaseNodeProps> = ({
+  element,
+  onSelect,
+  selected,
+  dndDropRef,
+}) => {
   useAnchor((e: Node) => new RectAnchor(e, 4));
   const [hover, hoverRef] = useHover();
-  const [{ dragging }, dragNodeRef] = useDragNode({
-    collect: (monitor) => ({
-      dragging: monitor.isDragging(),
-    }),
+  const [{ dragging }, dragNodeRef] = useDragNode(nodeDragSourceSpec(TYPE_HELM_RELEASE, false), {
+    element,
   });
-  const refs = useCombineRefs<SVGRectElement>(dragNodeRef, hoverRef);
+  const refs = useCombineRefs<SVGRectElement>(dragNodeRef, dndDropRef, hoverRef);
   const [filtered] = useSearchFilter(element.getLabel());
   const { width, height } = element.getBounds();
 

diff --git a/frontend/packages/dev-console/src/components/topology/components/nodes/Application.scss b/frontend/packages/dev-console/src/components/topology/components/nodes/Application.scss
@@ -5,7 +5,7 @@
   outline: none;
   cursor: pointer;
   .odc-m-drag-active & {
-    cursor: grab;
+    pointer-events: none;
   }
 
   &__bg {