From f67c0710e1024d7b28b997b9c676ba63a5047d45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= <raul00gm@gmail.com>
Date: Mon, 21 Oct 2024 13:54:49 +0200
Subject: [PATCH] fix(editor): Fix Adding nodes one after the other also adds
 connections (no-changelog) (#11312)

Co-authored-by: Alex Grozav <alex@grozav.com>
---
 .../src/components/canvas/WorkflowCanvas.vue  |  1 +
 .../__tests__/useCanvasOperations.spec.ts     | 22 +++++++++++++++++++
 .../src/composables/useCanvasOperations.ts    | 15 ++++++++-----
 packages/editor-ui/src/views/NodeView.v2.vue  | 14 +++++++-----
 4 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
index e90c64350a..d6097f3cb6 100644
--- a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
+++ b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
@@ -56,6 +56,7 @@ const { nodes: mappedNodes, connections: mappedConnections } = useCanvasMapping(
 		<div :class="$style.canvas">
 			<Canvas
 				v-if="workflow"
+				:id="id"
 				:nodes="mappedNodes"
 				:connections="mappedConnections"
 				:show-bug-reporting-button="showBugReportingButton"
diff --git a/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts b/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
index a6129a7bfa..9a702fc141 100644
--- a/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
+++ b/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
@@ -613,6 +613,28 @@ describe('useCanvasOperations', () => {
 			expect(setNodePositionByIdSpy).toHaveBeenCalledWith(nodes[1].id, expect.any(Object));
 			expect(setNodePositionByIdSpy).toHaveBeenCalledWith(nodes[2].id, expect.any(Object));
 		});
+
+		it('should return newly added nodes', async () => {
+			const workflowsStore = mockedStore(useWorkflowsStore);
+			const nodeTypesStore = useNodeTypesStore();
+			const nodeTypeName = 'type';
+			const nodes = [
+				mockNode({ name: 'Node 1', type: nodeTypeName, position: [30, 40] }),
+				mockNode({ name: 'Node 2', type: nodeTypeName, position: [100, 240] }),
+			];
+
+			workflowsStore.getCurrentWorkflow.mockReturnValue(
+				createTestWorkflowObject(workflowsStore.workflow),
+			);
+
+			nodeTypesStore.nodeTypes = {
+				[nodeTypeName]: { 1: mockNodeTypeDescription({ name: nodeTypeName }) },
+			};
+
+			const { addNodes } = useCanvasOperations({ router });
+			const added = await addNodes(nodes, {});
+			expect(added.length).toBe(2);
+		});
 	});
 
 	describe('revertAddNode', () => {
diff --git a/packages/editor-ui/src/composables/useCanvasOperations.ts b/packages/editor-ui/src/composables/useCanvasOperations.ts
index d1f7259886..8b95b2c70e 100644
--- a/packages/editor-ui/src/composables/useCanvasOperations.ts
+++ b/packages/editor-ui/src/composables/useCanvasOperations.ts
@@ -494,6 +494,7 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 	) {
 		let insertPosition = options.position;
 		let lastAddedNode: INodeUi | undefined;
+		const addedNodes: INodeUi[] = [];
 
 		const nodesWithTypeVersion = nodes.map((node) => {
 			const typeVersion =
@@ -516,7 +517,7 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 			const nodeTypeDescription = requireNodeTypeDescription(node.type, node.typeVersion);
 
 			try {
-				lastAddedNode = addNode(
+				const newNode = addNode(
 					{
 						...node,
 						position,
@@ -528,6 +529,8 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 						isAutoAdd,
 					},
 				);
+				lastAddedNode = newNode;
+				addedNodes.push(newNode);
 			} catch (error) {
 				toast.showError(error, i18n.baseText('error'));
 				console.error(error);
@@ -552,6 +555,8 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 		if (!options.keepPristine) {
 			uiStore.stateIsDirty = true;
 		}
+
+		return addedNodes;
 	}
 
 	function updatePositionForNodeWithMultipleInputs(node: INodeUi) {
@@ -605,6 +610,10 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 			historyStore.pushCommandToUndo(new AddNodeCommand(nodeData));
 		}
 
+		if (!options.isAutoAdd) {
+			createConnectionToLastInteractedWithNode(nodeData, options);
+		}
+
 		void nextTick(() => {
 			workflowsStore.setNodePristine(nodeData.name, true);
 
@@ -613,10 +622,6 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 			nodeHelpers.updateNodeCredentialIssues(nodeData);
 			nodeHelpers.updateNodeInputIssues(nodeData);
 
-			if (!options.isAutoAdd) {
-				createConnectionToLastInteractedWithNode(nodeData, options);
-			}
-
 			if (options.telemetry) {
 				trackAddNode(nodeData, options);
 			}
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index d292019974..e4dbc6a4a4 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -859,8 +859,12 @@ async function onAddNodesAndConnections(
 		return;
 	}
 
-	await addNodes(nodes, { dragAndDrop, position, trackHistory: true, telemetry: true });
-	await nextTick();
+	const addedNodes = await addNodes(nodes, {
+		dragAndDrop,
+		position,
+		trackHistory: true,
+		telemetry: true,
+	});
 
 	const offsetIndex = editableWorkflow.value.nodes.length - nodes.length;
 	const mappedConnections: CanvasConnectionCreateData[] = connections.map(({ from, to }) => {
@@ -886,9 +890,8 @@ async function onAddNodesAndConnections(
 
 	addConnections(mappedConnections);
 
-	void nextTick(() => {
-		uiStore.resetLastInteractedWith();
-	});
+	uiStore.resetLastInteractedWith();
+	selectNodes([addedNodes[addedNodes.length - 1].id]);
 }
 
 async function onRevertAddNode({ node }: { node: INodeUi }) {
@@ -1565,6 +1568,7 @@ onBeforeUnmount(() => {
 <template>
 	<WorkflowCanvas
 		v-if="editableWorkflow && editableWorkflowObject && !isLoading"
+		:id="editableWorkflow.id"
 		:workflow="editableWorkflow"
 		:workflow-object="editableWorkflowObject"
 		:fallback-nodes="fallbackNodes"