From 4ed7af0806bbdf5034d7a8162c1718f13c340dad Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Wed, 11 Dec 2024 09:11:21 +0100
Subject: [PATCH] Handle input index

---
 .../src/components/N8nTabs/Tabs.vue           | 30 +++++++++++++++----
 packages/editor-ui/src/Interface.ts           |  1 +
 packages/editor-ui/src/components/RunData.vue | 12 ++++++++
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index 53e2a7da569..4773dc7bb29 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -12,6 +12,7 @@ interface TabOptions {
 	tooltip?: string;
 	align?: 'left' | 'right';
 	to?: RouteLocationRaw;
+	disabled?: boolean;
 }
 
 interface TabsProps {
@@ -61,7 +62,11 @@ const emit = defineEmits<{
 }>();
 
 const handleTooltipClick = (tab: Value, event: MouseEvent) => emit('tooltipClick', tab, event);
-const handleTabClick = (tab: Value) => emit('update:modelValue', tab);
+const handleTabClick = (props: TabOptions) => {
+	if (!props.disabled) {
+		emit('update:modelValue', props.value);
+	}
+};
 
 const scroll = (left: number) => {
 	const container = tabs.value;
@@ -93,11 +98,11 @@ const scrollRight = () => scroll(50);
 						<div @click="handleTooltipClick(option.value, $event)" v-n8n-html="option.tooltip" />
 					</template>
 					<a
-						v-if="option.href"
+						v-if="option.href && !option.disabled"
 						target="_blank"
 						:href="option.href"
 						:class="[$style.link, $style.tab]"
-						@click="() => handleTabClick(option.value)"
+						@click="() => handleTabClick(option)"
 					>
 						<div>
 							{{ option.label }}
@@ -107,7 +112,7 @@ const scrollRight = () => scroll(50);
 						</div>
 					</a>
 					<router-link
-						v-else-if="option.to"
+						v-else-if="option.to && !option.disabled"
 						:to="option.to"
 						:class="[$style.tab, { [$style.activeTab]: modelValue === option.value }]"
 					>
@@ -116,9 +121,13 @@ const scrollRight = () => scroll(50);
 					</router-link>
 					<div
 						v-else
-						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
+						:class="{
+							[$style.tab]: true,
+							[$style.activeTab]: modelValue === option.value,
+							[$style.tabDisabled]: option.disabled,
+						}"
 						:data-test-id="`tab-${option.value}`"
-						@click="() => handleTabClick(option.value)"
+						@click="() => handleTabClick(option)"
 					>
 						<N8nIcon v-if="option.icon" :icon="option.icon" size="small" />
 						<span v-if="option.label">{{ option.label }}</span>
@@ -174,6 +183,15 @@ const scrollRight = () => scroll(50);
 	}
 }
 
+.tabDisabled {
+	color: var(--color-background-base);
+	cursor: auto;
+
+	&:hover {
+		color: var(--color-background-base);
+	}
+}
+
 .activeTab {
 	color: var(--color-primary);
 	padding-bottom: var(--spacing-2xs);
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index a2a1e8e065c..280b179230d 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1150,6 +1150,7 @@ export interface ITab<Value extends string | number = string | number> {
 	icon?: string;
 	align?: 'right';
 	tooltip?: string;
+	disabled?: boolean;
 }
 
 export interface ITabBarItem {
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 803bc86a0e6..a47476424e4 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -398,6 +398,16 @@ const binaryData = computed(() => {
 });
 const inputHtml = computed(() => String(inputData.value[0]?.json?.html ?? ''));
 const currentOutputIndex = computed(() => {
+	if (isPaneTypeInput.value) {
+		// In the input panel we find the matching input by value
+		for (let i = 0; i <= maxOutputIndex.value; i++) {
+			if (getRawInputData(props.runIndex, i).length) {
+				return i;
+			}
+		}
+		return 0;
+	}
+
 	if (props.overrideOutputs?.length && !props.overrideOutputs.includes(outputIndex.value)) {
 		return props.overrideOutputs[0];
 	}
@@ -443,6 +453,8 @@ const branches = computed(() => {
 			label:
 				(search.value && itemsCount) || totalItemsCount ? `${outputName} (${items})` : outputName,
 			value: i,
+			// In inputPane we have exactly one active input branch
+			disabled: isPaneTypeInput.value && currentOutputIndex.value !== i,
 		});
 	}
 	return result;