From 71f281b90da6f71db04c9b22dee9e5976b0abab4 Mon Sep 17 00:00:00 2001
From: jeanpaul <jeanpaul@users.noreply.github.com>
Date: Tue, 25 Mar 2025 09:13:28 +0100
Subject: [PATCH] fix(editor): Show left-hand NDV floating nodes in correct
 order (#14126)

---
 cypress/e2e/5-ndv.cy.ts                       | 43 +++++++++-
 cypress/fixtures/Floating_Nodes.json          | 81 +++++++++++++++++++
 .../src/components/NDVFloatingNodes.vue       |  2 +-
 3 files changed, 124 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index be784cdc46..4b67a0d988 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -1,5 +1,10 @@
 import { setCredentialValues } from '../composables/modals/credential-modal';
-import { clickCreateNewCredential, setParameterSelectByContent } from '../composables/ndv';
+import {
+	clickCreateNewCredential,
+	clickGetBackToCanvas,
+	setParameterSelectByContent,
+} from '../composables/ndv';
+import { openNode } from '../composables/workflow';
 import {
 	EDIT_FIELDS_SET_NODE_NAME,
 	MANUAL_TRIGGER_NODE_DISPLAY_NAME,
@@ -617,6 +622,42 @@ describe('NDV', () => {
 			// Sinse code tool require alphanumeric tool name it would also show an error(2 errors, 1 for each tool node)
 			cy.get('[class*=hasIssues]').should('have.length', 3);
 		});
+
+		it('should have the floating nodes in correct order', () => {
+			cy.createFixtureWorkflow('Floating_Nodes.json', 'Floating Nodes');
+
+			cy.ifCanvasVersion(
+				() => {},
+				() => {
+					// Needed in V2 as all nodes remain selected when clicking on a selected node
+					workflowPage.actions.deselectAll();
+				},
+			);
+
+			// The first merge node has the wires crossed, so `Edit Fields1` is first in the order of connected nodes
+			openNode('Merge');
+			getFloatingNodeByPosition('inputMain').should('exist');
+			getFloatingNodeByPosition('inputMain').should('have.length', 2);
+			getFloatingNodeByPosition('inputMain')
+				.first()
+				.should('have.attr', 'data-node-name', 'Edit Fields1');
+			getFloatingNodeByPosition('inputMain')
+				.last()
+				.should('have.attr', 'data-node-name', 'Edit Fields0');
+
+			clickGetBackToCanvas();
+
+			// The second merge node does not have wires crossed, so `Edit Fields0` is first
+			openNode('Merge1');
+			getFloatingNodeByPosition('inputMain').should('exist');
+			getFloatingNodeByPosition('inputMain').should('have.length', 2);
+			getFloatingNodeByPosition('inputMain')
+				.first()
+				.should('have.attr', 'data-node-name', 'Edit Fields0');
+			getFloatingNodeByPosition('inputMain')
+				.last()
+				.should('have.attr', 'data-node-name', 'Edit Fields1');
+		});
 	});
 
 	it('should show node name and version in settings', () => {
diff --git a/cypress/fixtures/Floating_Nodes.json b/cypress/fixtures/Floating_Nodes.json
index 6624c53ac6..01b715e027 100644
--- a/cypress/fixtures/Floating_Nodes.json
+++ b/cypress/fixtures/Floating_Nodes.json
@@ -87,6 +87,54 @@
         1600,
         740
       ]
+    },
+    {
+      "parameters": {},
+      "type": "n8n-nodes-base.merge",
+      "typeVersion": 3.1,
+      "position": [
+        440,
+        -140
+      ],
+      "id": "a00959d3-8d4b-40af-b4f2-35ca3d73fd84",
+      "name": "Merge"
+    },
+    {
+      "parameters": {
+        "options": {}
+      },
+      "type": "n8n-nodes-base.set",
+      "typeVersion": 3.4,
+      "position": [
+        -20,
+        -120
+      ],
+      "id": "a5cbc221-ccfd-4034-a648-6a192834af81",
+      "name": "Edit Fields0"
+    },
+    {
+      "parameters": {
+        "options": {}
+      },
+      "type": "n8n-nodes-base.set",
+      "typeVersion": 3.4,
+      "position": [
+        0,
+        100
+      ],
+      "id": "d3b4c17a-bee8-418b-a721-5debafd1ce11",
+      "name": "Edit Fields1"
+    },
+    {
+      "parameters": {},
+      "type": "n8n-nodes-base.merge",
+      "typeVersion": 3.1,
+      "position": [
+        440,
+        100
+      ],
+      "id": "b23a2a43-ffac-41a5-a265-054e21a57d70",
+      "name": "Merge1"
     }
   ],
   "pinData": {},
@@ -161,7 +209,40 @@
           }
         ]
       ]
+    },
+    "Edit Fields0": {
+      "main": [
+        [
+          {
+            "node": "Merge",
+            "type": "main",
+            "index": 1
+          },
+          {
+            "node": "Merge1",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Edit Fields1": {
+      "main": [
+        [
+          {
+            "node": "Merge",
+            "type": "main",
+            "index": 0
+          },
+          {
+            "node": "Merge1",
+            "type": "main",
+            "index": 1
+          }
+        ]
+      ]
     }
+
   },
   "active": false,
   "settings": {
diff --git a/packages/frontend/editor-ui/src/components/NDVFloatingNodes.vue b/packages/frontend/editor-ui/src/components/NDVFloatingNodes.vue
index 0265bdb955..1b76a8def1 100644
--- a/packages/frontend/editor-ui/src/components/NDVFloatingNodes.vue
+++ b/packages/frontend/editor-ui/src/components/NDVFloatingNodes.vue
@@ -76,7 +76,7 @@ const connectedNodes = computed<
 		).reverse(),
 		[FloatingNodePosition.left]: getINodesFromNames(
 			workflow.getParentNodes(rootName, NodeConnectionTypes.Main, 1),
-		),
+		).reverse(),
 	};
 });