feat(editor): Implement custom edge to support loops (no-changelog) (#10171)

Co-authored-by: Alex Grozav <alex@grozav.com>

packages/editor-ui/src/composables/useCanvasMapping.spec.ts

@@ -20,6 +20,7 @@ import {
 	createCanvasConnectionId,
 } from '@/utils/canvasUtilsV2';
 import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
+import { MarkerType } from '@vue-flow/core';
 
 beforeEach(() => {
 	const pinia = createPinia();
@@ -87,6 +88,7 @@ describe('useCanvasMapping', () => {
 					data: {
 						id: manualTriggerNode.id,
 						name: manualTriggerNode.name,
+						subtitle: '',
 						type: manualTriggerNode.type,
 						typeVersion: expect.anything(),
 						disabled: false,
@@ -381,6 +383,7 @@ describe('useCanvasMapping', () => {
 					},
 					id: connectionId,
 					label: '',
+					markerEnd: MarkerType.ArrowClosed,
 					source,
 					sourceHandle,
 					target,
@@ -469,6 +472,7 @@ describe('useCanvasMapping', () => {
 					},
 					id: connectionIdA,
 					label: '',
+					markerEnd: MarkerType.ArrowClosed,
 					source: sourceA,
 					sourceHandle: sourceHandleA,
 					target: targetA,
@@ -496,6 +500,7 @@ describe('useCanvasMapping', () => {
 					target: targetB,
 					targetHandle: targetHandleB,
 					type: 'canvas-edge',
+					markerEnd: MarkerType.ArrowClosed,
 					animated: false,
 				},
 			]);

packages/editor-ui/src/composables/useCanvasMapping.ts

@@ -33,8 +33,10 @@ import type {
 } from 'n8n-workflow';
 import { NodeHelpers } from 'n8n-workflow';
 import type { INodeUi } from '@/Interface';
-import { STICKY_NODE_TYPE, WAIT_TIME_UNLIMITED } from '@/constants';
+import { CUSTOM_API_CALL_KEY, STICKY_NODE_TYPE, WAIT_TIME_UNLIMITED } from '@/constants';
 import { sanitizeHtml } from '@/utils/htmlUtils';
+import { MarkerType } from '@vue-flow/core';
+import { useNodeHelpers } from './useNodeHelpers';
 
 export function useCanvasMapping({
 	nodes,
@@ -48,6 +50,7 @@ export function useCanvasMapping({
 	const i18n = useI18n();
 	const workflowsStore = useWorkflowsStore();
 	const nodeTypesStore = useNodeTypesStore();
+	const nodeHelpers = useNodeHelpers();
 
 	function createStickyNoteRenderType(node: INodeUi): CanvasNodeStickyNoteRender {
 		return {
@@ -97,9 +100,30 @@ export function useCanvasMapping({
 			}, {}) ?? {},
 	);
 
+	const nodeSubtitleById = computed(() => {
+		return nodes.value.reduce<Record<string, string>>((acc, node) => {
+			try {
+				const nodeTypeDescription = nodeTypesStore.getNodeType(node.type, node.typeVersion);
+				if (!nodeTypeDescription) {
+					return acc;
+				}
+
+				const nodeSubtitle =
+					nodeHelpers.getNodeSubtitle(node, nodeTypeDescription, workflowObject.value) ?? '';
+				if (nodeSubtitle.includes(CUSTOM_API_CALL_KEY)) {
+					return acc;
+				}
+
+				acc[node.id] = nodeSubtitle;
+			} catch (e) {}
+
+			return acc;
+		}, {});
+	});
+
 	const nodeInputsById = computed(() =>
 		nodes.value.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
-			const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
+			const nodeTypeDescription = nodeTypesStore.getNodeType(node.type, node.typeVersion);
 			const workflowObjectNode = workflowObject.value.getNode(node.name);
 
 			acc[node.id] =
@@ -110,6 +134,7 @@ export function useCanvasMapping({
 								workflowObjectNode,
 								nodeTypeDescription,
 							),
+							nodeTypeDescription.inputNames ?? [],
 						)
 					: [];
 
@@ -119,7 +144,7 @@ export function useCanvasMapping({
 
 	const nodeOutputsById = computed(() =>
 		nodes.value.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
-			const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
+			const nodeTypeDescription = nodeTypesStore.getNodeType(node.type, node.typeVersion);
 			const workflowObjectNode = workflowObject.value.getNode(node.name);
 
 			acc[node.id] =
@@ -130,6 +155,7 @@ export function useCanvasMapping({
 								workflowObjectNode,
 								nodeTypeDescription,
 							),
+							nodeTypeDescription.outputNames ?? [],
 						)
 					: [];
 
@@ -260,6 +286,7 @@ export function useCanvasMapping({
 			const data: CanvasNodeData = {
 				id: node.id,
 				name: node.name,
+				subtitle: nodeSubtitleById.value[node.id] ?? '',
 				type: node.type,
 				typeVersion: node.typeVersion,
 				disabled: !!node.disabled,
@@ -313,6 +340,7 @@ export function useCanvasMapping({
 					type,
 					label,
 					animated: data.status === 'running',
+					markerEnd: MarkerType.ArrowClosed,
 				};
 			},
 		);

packages/editor-ui/src/composables/useCanvasNode.spec.ts

@@ -42,6 +42,7 @@ describe('useCanvasNode', () => {
 			data: ref({
 				id: 'node1',
 				name: 'Node 1',
+				subtitle: '',
 				type: 'nodeType1',
 				typeVersion: 1,
 				disabled: true,

packages/editor-ui/src/composables/useCanvasNode.ts

@@ -15,6 +15,7 @@ export function useCanvasNode() {
 			node?.data.value ?? {
 				id: '',
 				name: '',
+				subtitle: '',
 				type: '',
 				typeVersion: 1,
 				disabled: false,
@@ -37,6 +38,7 @@ export function useCanvasNode() {
 	const id = computed(() => node?.id.value ?? '');
 	const label = computed(() => node?.label.value ?? '');
 
+	const subtitle = computed(() => data.value.subtitle);
 	const name = computed(() => data.value.name);
 	const inputs = computed(() => data.value.inputs);
 	const outputs = computed(() => data.value.outputs);
@@ -66,6 +68,7 @@ export function useCanvasNode() {
 		id,
 		name,
 		label,
+		subtitle,
 		inputs,
 		outputs,
 		connections,