feat(Canvas): Add quick icon edge end

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/controller.service.ts

@@ -18,7 +18,7 @@ import {
   Visualization,
   withPanZoom,
 } from '@patternfly/react-topology';
-import { CustomGroupWithSelection, CustomNodeWithSelection, NoBendpointsEdge } from '../Custom';
+import { CustomGroupWithSelection, CustomNodeWithSelection, NoBendpointsEdge, EdgeEndWithButton } from '../Custom';
 import { LayoutType } from './canvas.models';
 
 export class ControllerService {
@@ -109,6 +109,8 @@ export class ControllerService {
     switch (type) {
       case 'group':
         return CustomGroupWithSelection;
+      case 'edge-end':
+        return EdgeEndWithButton;
       default:
         switch (kind) {
           case ModelKind.graph:

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/Canvas/flow.service.ts

@@ -64,9 +64,12 @@ export class FlowService {
 
   private static getEdgesFromVizNode(vizNodeParam: IVisualizationNode): CanvasEdge[] {
     const edges: CanvasEdge[] = [];
+    const nodeInteractions = vizNodeParam.getNodeInteraction();
 
     if (vizNodeParam.getNextNode() !== undefined) {
       edges.push(this.getEdge(vizNodeParam.id, vizNodeParam.getNextNode()!.id));
+    } else if (nodeInteractions.canHaveNextStep) {
+      edges.push(this.getEdgeEnd(vizNodeParam.id));
     }
 
     return edges;
@@ -111,4 +114,14 @@ export class FlowService {
       edgeStyle: EdgeStyle.solid,
     };
   }
+
+  private static getEdgeEnd(source: string): CanvasEdge {
+    return {
+      id: `${source}-end`,
+      type: 'edge-end',
+      source,
+      target: source,
+      edgeStyle: EdgeStyle.dashed,
+    };
+  }
 }

packages/ui/src/components/Visualization/Custom/ContextMenu/ItemAddStep.tsx

@@ -1,34 +1,49 @@
 import { ContextMenuItem } from '@patternfly/react-topology';
 import { FunctionComponent, PropsWithChildren, useCallback, useContext } from 'react';
 import { IDataTestID } from '../../../../models';
-import { AddStepMode, IVisualizationNode } from '../../../../models/visualization/base-visual-entity';
+import {
+  AddStepMode,
+  IVisualizationNode,
+  IVisualizationNodeData,
+} from '../../../../models/visualization/base-visual-entity';
 import { CatalogModalContext } from '../../../../providers/catalog-modal.provider';
 import { EntitiesContext } from '../../../../providers/entities.provider';
+import { EntitiesContextResult } from '../../../../hooks';
 
 interface ItemAddStepProps extends PropsWithChildren<IDataTestID> {
   mode: AddStepMode.PrependStep | AddStepMode.AppendStep;
   vizNode: IVisualizationNode;
 }
 
-export const ItemAddStep: FunctionComponent<ItemAddStepProps> = (props) => {
-  const entitiesContext = useContext(EntitiesContext);
-  const catalogModalContext = useContext(CatalogModalContext);
+export const addNode = async (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  catalogModalContext: any,
+  entitiesContext: EntitiesContextResult | null,
+  vizNode: IVisualizationNode<IVisualizationNodeData>,
+  mode: AddStepMode = AddStepMode.AppendStep,
+) => {
+  if (!vizNode || !entitiesContext) return;
 
-  const onAddNode = useCallback(async () => {
-    if (!props.vizNode || !entitiesContext) return;
+  /** Get compatible nodes and the location where can be introduced */
+  const compatibleNodes = entitiesContext.camelResource.getCompatibleComponents(mode, vizNode.data);
+
+  /** Open Catalog modal, filtering the compatible nodes */
+  const definedComponent = await catalogModalContext?.getNewComponent(compatibleNodes);
+  if (!definedComponent) return;
 
-    /** Get compatible nodes and the location where can be introduced */
-    const compatibleNodes = entitiesContext.camelResource.getCompatibleComponents(props.mode, props.vizNode.data);
+  /** Add new node to the entities */
+  vizNode.addBaseEntityStep(definedComponent, mode);
 
-    /** Open Catalog modal, filtering the compatible nodes */
-    const definedComponent = await catalogModalContext?.getNewComponent(compatibleNodes);
-    if (!definedComponent) return;
+  /** Update entity */
+  entitiesContext.updateEntitiesFromCamelResource();
+};
 
-    /** Add new node to the entities */
-    props.vizNode.addBaseEntityStep(definedComponent, props.mode);
+export const ItemAddStep: FunctionComponent<ItemAddStepProps> = (props) => {
+  const entitiesContext = useContext(EntitiesContext);
+  const catalogModalContext = useContext(CatalogModalContext);
 
-    /** Update entity */
-    entitiesContext.updateEntitiesFromCamelResource();
+  const onAddNode = useCallback(async () => {
+    addNode(catalogModalContext, entitiesContext, props.vizNode, props.mode);
   }, [catalogModalContext, entitiesContext, props.mode, props.vizNode]);
 
   return (

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

@@ -0,0 +1,57 @@
+import { PlusIcon } from '@patternfly/react-icons';
+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';
+
+type DefaultEdgeProps = Parameters<typeof DefaultEdge>[0];
+interface EdgeEndProps extends DefaultEdgeProps {
+  /** We're not providing Data to edges */
+  element: GraphElement<EdgeModel, unknown>;
+}
+
+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() === LayoutType.DagreHorizontal;
+  const endPoint = element.getEndPoint();
+
+  const onAdd = useCallback(() => {
+    addNode(catalogModalContext, entitiesContext, vizNode);
+  }, [catalogModalContext, entitiesContext, vizNode]);
+
+  let x = endPoint.x;
+  let y = endPoint.y;
+  if (isHorizontal) {
+    x += 14;
+  } else {
+    y += 4;
+  }
+
+  return (
+    <DefaultEdge
+      element={element}
+      startTerminalType={EdgeTerminalType.none}
+      endTerminalType={EdgeTerminalType.none}
+      {...rest}
+    >
+      <g data-testid={`custom-edge__${element?.getId()}`}>
+        <Decorator showBackground radius={14} x={x} y={y} icon={<PlusIcon />} onClick={onAdd} />
+      </g>
+    </DefaultEdge>
+  );
+});

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

@@ -1,7 +1,68 @@
-import { BaseEdge, Point } from '@patternfly/react-topology';
+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() === LayoutType.DagreHorizontal;
+      const parentPos = parent.getPosition();
+      const parentSize = parent.getDimensions();
+      let x, y;
+      if (isHorizontal) {
+        if (parent.getType() === 'group') {
+          x = parentPos.x + parentSize.width / 2.0;
+          y = parentPos.y;
+        } else {
+          x = parentPos.x + parentSize.width;
+          y = parentPos.y + parentSize.height / 2.0;
+        }
+      } else {
+        if (parent.getType() === 'group') {
+          x = parentPos.x;
+          y = parentPos.y + parentSize.height / 2.0;
+        } else {
+          x = parentPos.x + parentSize.width / 2.0;
+          y = parentPos.y + parentSize.height;
+        }
+      }
+      return new Point(x, y);
+    }
+
+    return super.getStartPoint();
+  }
+
+  getEndPoint(): Point {
+    if (this.getTarget() === this.getSource()) {
+      const parent = getTopCollapsedParent(this.getSource());
+      const isHorizontal = this.getGraph().getLayout() === LayoutType.DagreHorizontal;
+      const parentPos = parent.getPosition();
+      const parentSize = parent.getDimensions();
+      let x, y;
+      if (isHorizontal) {
+        if (parent.getType() === 'group') {
+          x = parentPos.x + parentSize.width / 2.0 + 15;
+          y = parentPos.y;
+        } else {
+          x = parentPos.x + parentSize.width / 2.0 + 55;
+          y = parentPos.y + parentSize.height / 2.0;
+        }
+      } else {
+        if (parent.getType() === 'group') {
+          x = parentPos.x;
+          y = parentPos.y + parentSize.height / 2.0 + 15;
+        } else {
+          x = parentPos.x + parentSize.width / 2.0;
+          y = parentPos.y + parentSize.height / 2.0 + 85;
+        }
+      }
+      return new Point(x, y);
+    }
+
+    return super.getEndPoint();
+  }
 }

packages/ui/src/components/Visualization/Custom/index.ts

@@ -1,3 +1,4 @@
 export * from './Group/CustomGroup';
 export * from './NoBendingEdge';
 export * from './Node/CustomNode';
+export * from './Edge/EdgeEnd';

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",
+  },
 ]
 `;