From dc4261ae7eca6cf277404cd514c90fad42f14ae0 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 17 Dec 2024 10:59:55 +0100
Subject: [PATCH] fix(editor): Set RunData outputIndex based on incoming data
 (#12182)

---
 cypress/e2e/5-ndv.cy.ts                       | 14 +++
 ...anches_of_same_parent_false_populated.json | 94 +++++++++++++++++++
 packages/editor-ui/src/components/RunData.vue | 16 +++-
 3 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 cypress/fixtures/Test_ndv_two_branches_of_same_parent_false_populated.json

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index a10dbc94e6..e8215db38f 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -862,4 +862,18 @@ describe('NDV', () => {
 			.contains('To search field contents rather than just names, use Table or JSON view')
 			.should('exist');
 	});
+
+	it('ADO-2931 - should handle multiple branches of the same input with the first branch empty correctly', () => {
+		cy.createFixtureWorkflow('Test_ndv_two_branches_of_same_parent_false_populated.json');
+		workflowPage.actions.zoomToFit();
+		workflowPage.actions.openNode('DebugHelper');
+		ndv.getters.inputPanel().should('be.visible');
+		ndv.getters.outputPanel().should('be.visible');
+		ndv.actions.execute();
+		// This ensures we rendered the inputPanel
+		ndv.getters
+			.inputPanel()
+			.find('[data-test-id=run-data-schema-item]')
+			.should('contain.text', 'a1');
+	});
 });
diff --git a/cypress/fixtures/Test_ndv_two_branches_of_same_parent_false_populated.json b/cypress/fixtures/Test_ndv_two_branches_of_same_parent_false_populated.json
new file mode 100644
index 0000000000..056a35a786
--- /dev/null
+++ b/cypress/fixtures/Test_ndv_two_branches_of_same_parent_false_populated.json
@@ -0,0 +1,94 @@
+{
+	"nodes": [
+		{
+			"parameters": {
+				"conditions": {
+					"options": {
+						"caseSensitive": true,
+						"leftValue": "",
+						"typeValidation": "strict",
+						"version": 2
+					},
+					"conditions": [
+						{
+							"id": "6f0cf983-824b-4339-a5de-6b374a23b4b0",
+							"leftValue": "={{ $json.a }}",
+							"rightValue": 3,
+							"operator": {
+								"type": "number",
+								"operation": "equals"
+							}
+						}
+					],
+					"combinator": "and"
+				},
+				"options": {}
+			},
+			"type": "n8n-nodes-base.if",
+			"typeVersion": 2.2,
+			"position": [220, 0],
+			"id": "1755282a-ec4a-4d02-a833-0316ca413cc4",
+			"name": "If"
+		},
+		{
+			"parameters": {},
+			"type": "n8n-nodes-base.manualTrigger",
+			"typeVersion": 1,
+			"position": [0, 0],
+			"id": "de1e7acf-12d8-4e56-ba42-709ffb397db2",
+			"name": "When clicking ‘Test workflow’"
+		},
+		{
+			"parameters": {
+				"category": "randomData"
+			},
+			"type": "n8n-nodes-base.debugHelper",
+			"typeVersion": 1,
+			"position": [580, 0],
+			"id": "86440d33-f833-453c-bcaa-fff7e0083501",
+			"name": "DebugHelper",
+			"alwaysOutputData": true
+		}
+	],
+	"connections": {
+		"If": {
+			"main": [
+				[
+					{
+						"node": "DebugHelper",
+						"type": "main",
+						"index": 0
+					}
+				],
+				[
+					{
+						"node": "DebugHelper",
+						"type": "main",
+						"index": 0
+					}
+				]
+			]
+		},
+		"When clicking ‘Test workflow’": {
+			"main": [
+				[
+					{
+						"node": "If",
+						"type": "main",
+						"index": 0
+					}
+				]
+			]
+		}
+	},
+	"pinData": {
+		"When clicking ‘Test workflow’": [
+			{
+				"a": 1
+			},
+			{
+				"a": 2
+			}
+		]
+	}
+}
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index a0d859ec5c..5c5fa0dbac 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -544,6 +544,10 @@ watch(node, (newNode, prevNode) => {
 
 watch(hasNodeRun, () => {
 	if (props.paneType === 'output') setDisplayMode();
+	else {
+		// InputPanel relies on the outputIndex to check if we have data
+		outputIndex.value = determineInitialOutputIndex();
+	}
 });
 
 watch(
@@ -1077,9 +1081,19 @@ function getDataCount(
 	return getFilteredData(pinOrLiveData).length;
 }
 
+function determineInitialOutputIndex() {
+	for (let i = 0; i <= maxOutputIndex.value; i++) {
+		if (getRawInputData(props.runIndex, i).length) {
+			return i;
+		}
+	}
+
+	return 0;
+}
+
 function init() {
 	// Reset the selected output index every time another node gets selected
-	outputIndex.value = 0;
+	outputIndex.value = determineInitialOutputIndex();
 	refreshDataSize();
 	closeBinaryDataDisplay();
 	let outputTypes: NodeConnectionType[] = [];