feat(Edge): Use Decorator for adding a + icon

packages/ui-tests/cypress/e2e/codeEditor/multiFlowEditor.cy.ts

@@ -56,7 +56,8 @@ describe('Test for Multi route actions from the code editor', () => {
     cy.editorDeleteLine(7, 4);
     cy.openDesignPage();
     cy.showAllRoutes();
-    cy.get('[data-id^="log"]').should('have.length', 1);
+    /** We check how many nodes are remaining */
+    cy.get('[data-id^="log"][data-kind="node"]').should('have.length', 1);
     cy.get('[data-testid="flows-list-route-count"]').should('have.text', '2/2');
   });
 

packages/ui-tests/cypress/e2e/designer/multiflow/multiFlowDesigner.cy.ts

@@ -101,7 +101,8 @@ describe('Test for Multi route actions from the canvas', () => {
     cy.addNewRoute();
 
     cy.showAllRoutes();
-    cy.get('[data-id^="log"]').should('have.length', 3);
+    /** We check how many nodes are remaining */
+    cy.get('[data-id^="log"][data-kind="node"]').should('have.length', 3);
     cy.get('[data-testid="flows-list-route-count"]').should('have.text', '3/3');
   });
 });

packages/ui/src/components/Visualization/Canvas/flow.service.test.ts

@@ -1,5 +1,4 @@
-import { createVisualizationNode } from '../../../models/visualization';
-import { BaseVisualCamelEntity } from '../../../models/visualization/base-visual-entity';
+import { CamelRouteVisualEntity, createVisualizationNode } from '../../../models/visualization';
 import { FlowService } from './flow.service';
 
 describe('FlowService', () => {
@@ -86,18 +85,7 @@ describe('FlowService', () => {
     });
 
     it('should return a group node for a multiple nodes VisualizationNode with a group', () => {
-      const routeNode = createVisualizationNode('route', {
-        entity: { getId: () => 'myId' } as BaseVisualCamelEntity,
-        isGroup: true,
-      });
-
-      const fromNode = createVisualizationNode('timer', {
-        path: 'from',
-        icon: undefined,
-        processorName: 'from',
-        componentName: 'timer',
-      });
-      routeNode.addChild(fromNode);
+      const routeNode = new CamelRouteVisualEntity({ from: { uri: 'timer:clock', steps: [] } }).toVizNode();
 
       const { nodes, edges } = FlowService.getFlowDiagram(routeNode);
 

packages/ui/src/components/Visualization/Custom/Edge/EdgeEnd.tsx

@@ -1,53 +1,57 @@
-import { DefaultEdge, Edge, EdgeModel, EdgeTerminalType, observer } from '@patternfly/react-topology';
-import { Button, Tooltip } from '@patternfly/react-core';
 import { PlusIcon } from '@patternfly/react-icons';
-import './CustomEdge.scss';
-import { addNode } from '../ContextMenu/ItemAddStep';
-import { CatalogModalContext, EntitiesContext } from '../../../../providers';
-import { useContext } from 'react';
+import {
+  Decorator,
+  DefaultEdge,
+  EdgeModel,
+  EdgeTerminalType,
+  GraphElement,
+  isEdge,
+  observer,
+} from '@patternfly/react-topology';
+import { FunctionComponent, useCallback, useContext } from 'react';
 import { IVisualizationNode } from '../../../../models';
+import { CatalogModalContext, EntitiesContext } from '../../../../providers';
+import { addNode } from '../ContextMenu/ItemAddStep';
+import { LayoutType } from '../../Canvas';
 
-interface EdgeEndProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  element: Edge<EdgeModel, any>;
+type DefaultEdgeProps = Parameters<typeof DefaultEdge>[0];
+interface EdgeEndProps extends DefaultEdgeProps {
+  /** We're not providing Data to edges */
+  element: GraphElement<EdgeModel, unknown>;
 }
 
-const EdgeEnd: React.FC<EdgeEndProps> = observer(({ element, ...rest }) => {
+export const EdgeEndWithButton: FunctionComponent<EdgeEndProps> = observer(({ element, ...rest }) => {
+  if (!isEdge(element)) {
+    throw new Error('EdgeEndWithButton must be used only on Edge elements');
+  }
   const entitiesContext = useContext(EntitiesContext);
   const catalogModalContext = useContext(CatalogModalContext);
   const vizNode: IVisualizationNode = element.getSource().getData()?.vizNode;
-  const isHorizontal = element.getGraph().getLayout() === 'DagreHorizontal';
+  const isHorizontal = element.getGraph().getLayout() === LayoutType.DagreHorizontal;
   const endPoint = element.getEndPoint();
-  let x, y;
+
+  const onAdd = useCallback(() => {
+    addNode(catalogModalContext, entitiesContext, vizNode);
+  }, [catalogModalContext, entitiesContext, vizNode]);
+
+  let x = endPoint.x;
+  let y = endPoint.y;
   if (isHorizontal) {
-    x = endPoint.x;
-    y = endPoint.y - 12;
+    x += 12;
   } else {
-    x = endPoint.x - 12;
-    y = endPoint.y;
+    y += 4;
   }
-  const onAdd = () => {
-    addNode(catalogModalContext, entitiesContext, vizNode);
-  };
+
   return (
     <DefaultEdge
       element={element}
       startTerminalType={EdgeTerminalType.none}
       endTerminalType={EdgeTerminalType.none}
-      className="custom-edge"
       {...rest}
     >
       <g data-testid={`custom-edge__${element?.getId()}`}>
-        <foreignObject x={x} y={y} width="24" height="24" className="custom-edge">
-          <Tooltip content="Append">
-            <Button variant="plain" className="custom-edge__end" onClick={onAdd}>
-              <PlusIcon size={40} />
-            </Button>
-          </Tooltip>
-        </foreignObject>
+        <Decorator showBackground radius={12} x={x} y={y} icon={<PlusIcon />} onClick={onAdd} />
       </g>
     </DefaultEdge>
   );
 });
-
-export const EdgeEndWithButton: typeof DefaultEdge = EdgeEnd as typeof DefaultEdge;

packages/ui/src/components/Visualization/Custom/NoBendingEdge.tsx

@@ -1,13 +1,15 @@
 import { BaseEdge, getTopCollapsedParent, Point } from '@patternfly/react-topology';
+import { LayoutType } from '../Canvas';
 
 export class NoBendpointsEdge extends BaseEdge {
   getBendpoints(): Point[] {
     return [];
   }
+
   getStartPoint(): Point {
     if (this.getTarget() === this.getSource()) {
       const parent = getTopCollapsedParent(this.getSource());
-      const isHorizontal = this.getGraph().getLayout() === 'DagreHorizontal';
+      const isHorizontal = this.getGraph().getLayout() === LayoutType.DagreHorizontal;
       const parentPos = parent.getPosition();
       const parentSize = parent.getDimensions();
       let x, y;
@@ -29,14 +31,15 @@ export class NoBendpointsEdge extends BaseEdge {
         }
       }
       return new Point(x, y);
-    } else {
-      return super.getStartPoint();
     }
+
+    return super.getStartPoint();
   }
+
   getEndPoint(): Point {
     if (this.getTarget() === this.getSource()) {
       const parent = getTopCollapsedParent(this.getSource());
-      const isHorizontal = this.getGraph().getLayout() === 'DagreHorizontal';
+      const isHorizontal = this.getGraph().getLayout() === LayoutType.DagreHorizontal;
       const parentPos = parent.getPosition();
       const parentSize = parent.getDimensions();
       let x, y;
@@ -58,8 +61,8 @@ export class NoBendpointsEdge extends BaseEdge {
         }
       }
       return new Point(x, y);
-    } else {
-      return super.getEndPoint();
     }
+
+    return super.getEndPoint();
   }
 }

packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap

@@ -4922,12 +4922,33 @@ exports[`Nodes and Edges should generate edges for steps with branches 2`] = `
     "target": "choice-1234",
     "type": "edge",
   },
+  {
+    "edgeStyle": "dashed",
+    "id": "setHeader-1234-end",
+    "source": "setHeader-1234",
+    "target": "setHeader-1234",
+    "type": "edge-end",
+  },
+  {
+    "edgeStyle": "dashed",
+    "id": "log-1234-end",
+    "source": "log-1234",
+    "target": "log-1234",
+    "type": "edge-end",
+  },
   {
     "edgeStyle": "solid",
     "id": "choice-1234-to-sql-1234",
     "source": "choice-1234",
     "target": "sql-1234",
     "type": "edge",
   },
+  {
+    "edgeStyle": "dashed",
+    "id": "sql-1234-end",
+    "source": "sql-1234",
+    "target": "sql-1234",
+    "type": "edge-end",
+  },
 ]
 `;