From d58fa7c5792bf6d1562b7dcf9c315c07755a497b Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 27 May 2024 16:51:45 +0200
Subject: [PATCH 01/11] Overhaul input selector in NDV

---
 .../editor-ui/src/components/InputPanel.vue   | 154 +++++++++------
 .../src/components/NodeDetailsView.vue        |   1 +
 .../editor-ui/src/components/OutputPanel.vue  |  16 +-
 packages/editor-ui/src/components/RunData.vue | 182 +++++++++++-------
 .../src/components/RunDataSearch.vue          |  16 +-
 .../__tests__/RunDataSearch.test.ts           |   2 +-
 .../src/plugins/i18n/locales/en.json          |   4 +-
 7 files changed, 236 insertions(+), 139 deletions(-)

diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index ea8b591c8cd64..071483f787687 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -1,6 +1,7 @@
 <template>
 	<RunData
 		:node="currentNode"
+		:workflow="workflow"
 		:run-index="runIndex"
 		:linked-runs="linkedRuns"
 		:can-link-runs="!mappedNode && canLinkRuns"
@@ -23,41 +24,11 @@
 		@run-change="onRunIndexChange"
 		@table-mounted="$emit('tableMounted', $event)"
 		@search="$emit('search', $event)"
+		@input-node-change="onInputNodeChange"
 	>
 		<template #header>
 			<div :class="$style.titleSection">
-				<n8n-select
-					v-if="parentNodes.length"
-					teleported
-					size="small"
-					:model-value="currentNodeName"
-					:no-data-text="$locale.baseText('ndv.input.noNodesFound')"
-					:placeholder="$locale.baseText('ndv.input.parentNodes')"
-					filterable
-					data-test-id="ndv-input-select"
-					@update:model-value="onInputNodeChange"
-				>
-					<template #prepend>
-						<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
-					</template>
-					<n8n-option
-						v-for="node of parentNodes"
-						:key="node.name"
-						:value="node.name"
-						class="node-option"
-						:label="`${truncate(node.name)} ${getMultipleNodesText(node.name)}`"
-						data-test-id="ndv-input-option"
-					>
-						<span>{{ truncate(node.name) }}&nbsp;</span>
-						<span v-if="getMultipleNodesText(node.name)">{{
-							getMultipleNodesText(node.name)
-						}}</span>
-						<span v-else>{{
-							$locale.baseText('ndv.input.nodeDistance', { adjustToNumber: node.depth })
-						}}</span>
-					</n8n-option>
-				</n8n-select>
-				<span v-else :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
+				<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
 				<n8n-radio-buttons
 					v-if="isActiveNodeConfig && !readOnly"
 					:options="inputModes"
@@ -66,6 +37,41 @@
 				/>
 			</div>
 		</template>
+		<template #input-selector>
+			<n8n-select
+				v-if="parentNodes.length && currentNodeName"
+				:model-value="currentNodeName"
+				:no-data-text="$locale.baseText('ndv.input.noNodesFound')"
+				:placeholder="$locale.baseText('ndv.input.parentNodes')"
+				:class="$style.inputSelector"
+				teleported
+				size="small"
+				filterable
+				data-test-id="ndv-input-select"
+				@update:model-value="onInputNodeChange"
+			>
+				<template #prefix>
+					<NodeIcon :node-type="getNodeTypeFromName(currentNodeName)" :size="14" :shrink="false" />
+				</template>
+				<n8n-option
+					v-for="node of parentNodes"
+					:key="node.name"
+					:value="node.name"
+					:class="$style.nodeOption"
+					:label="`${nodeOptionTitle(node.name)} ${getMultipleNodesText(node.name)}`"
+					data-test-id="ndv-input-option"
+				>
+					<NodeIcon
+						:class="$style.nodeOptionIcon"
+						:node-type="getNodeTypeFromName(node.name)"
+						:size="14"
+						:shrink="false"
+					/>
+					<span :class="$style.nodeOptionTitle">{{ nodeOptionTitle(node.name) }}&nbsp;</span>
+					<span :class="$style.nodeOptionSubtitle">{{ nodeOptionSubtitle(node) }}</span>
+				</n8n-option>
+			</n8n-select>
+		</template>
 		<template v-if="isMappingMode" #before-data>
 			<!--
 						Hide the run linking buttons for both input and ouput panels when in 'Mapping Mode' because the run indices wouldn't match.
@@ -163,7 +169,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { type PropType, defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import type { INodeUi } from '@/Interface';
 import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
@@ -176,6 +182,7 @@ import type {
 } from 'n8n-workflow';
 import RunData from './RunData.vue';
 import NodeExecuteButton from './NodeExecuteButton.vue';
+import NodeIcon from './NodeIcon.vue';
 import WireMeUp from './WireMeUp.vue';
 import {
 	CRON_NODE_TYPE,
@@ -192,7 +199,7 @@ type MappingMode = 'debugging' | 'mapping';
 
 export default defineComponent({
 	name: 'InputPanel',
-	components: { RunData, NodeExecuteButton, WireMeUp },
+	components: { RunData, NodeExecuteButton, WireMeUp, NodeIcon },
 	props: {
 		currentNodeName: {
 			type: String,
@@ -204,7 +211,10 @@ export default defineComponent({
 		linkedRuns: {
 			type: Boolean,
 		},
-		workflow: {},
+		workflow: {
+			type: Object as PropType<Workflow>,
+			required: true,
+		},
 		canLinkRuns: {
 			type: Boolean,
 		},
@@ -262,10 +272,10 @@ export default defineComponent({
 		isActiveNodeConfig(): boolean {
 			let inputs = this.activeNodeType?.inputs ?? [];
 			let outputs = this.activeNodeType?.outputs ?? [];
-			if (this.activeNode !== null && this.currentWorkflow !== null) {
-				const node = this.currentWorkflow.getNode(this.activeNode.name);
-				inputs = NodeHelpers.getNodeInputs(this.currentWorkflow, node!, this.activeNodeType!);
-				outputs = NodeHelpers.getNodeOutputs(this.currentWorkflow, node!, this.activeNodeType!);
+			if (this.activeNode !== null && this.workflow !== null) {
+				const node = this.workflow.getNode(this.activeNode.name);
+				inputs = NodeHelpers.getNodeInputs(this.workflow, node!, this.activeNodeType!);
+				outputs = NodeHelpers.getNodeOutputs(this.workflow, node!, this.activeNodeType!);
 			} else {
 				// If we can not figure out the node type we set no outputs
 				if (!Array.isArray(inputs)) {
@@ -319,21 +329,19 @@ export default defineComponent({
 		workflowRunning(): boolean {
 			return this.uiStore.isActionActive('workflowRunning');
 		},
-		currentWorkflow(): Workflow {
-			return this.workflow as Workflow;
-		},
+
 		activeNode(): INodeUi | null {
 			return this.ndvStore.activeNode;
 		},
 
 		rootNode(): string {
-			const workflow = this.currentWorkflow;
+			const workflow = this.workflow;
 			const rootNodes = workflow.getChildNodes(this.activeNode?.name ?? '', 'ALL_NON_MAIN');
 
 			return rootNodes[0];
 		},
 		rootNodesParents(): string[] {
-			const workflow = this.currentWorkflow;
+			const workflow = this.workflow;
 			const parentNodes = [...workflow.getParentNodes(this.rootNode, 'main')].reverse();
 
 			return parentNodes;
@@ -363,9 +371,7 @@ export default defineComponent({
 			if (!this.activeNode) {
 				return [];
 			}
-			const nodes: IConnectedNode[] = (this.workflow as Workflow).getParentNodesByDepth(
-				this.activeNode.name,
-			);
+			const nodes = this.workflow.getParentNodesByDepth(this.activeNode.name);
 
 			return nodes.filter(
 				({ name }, i) =>
@@ -440,7 +446,7 @@ export default defineComponent({
 			this.onRunIndexChange(0);
 			this.onUnlinkRun();
 		},
-		getMultipleNodesText(nodeName?: string): string {
+		getMultipleNodesText(nodeName: string): string {
 			if (
 				!nodeName ||
 				!this.isMultiInputNode ||
@@ -450,7 +456,7 @@ export default defineComponent({
 				return '';
 
 			const activeNodeConnections =
-				this.currentWorkflow.connectionsByDestinationNode[this.activeNode.name].main || [];
+				this.workflow.connectionsByDestinationNode[this.activeNode.name].main || [];
 			// Collect indexes of connected nodes
 			const connectedInputIndexes = activeNodeConnections.reduce((acc: number[], node, index) => {
 				if (node[0] && node[0].node === nodeName) return [...acc, index];
@@ -502,16 +508,28 @@ export default defineComponent({
 				});
 			}
 		},
-		truncate(nodeName: string) {
+		nodeOptionTitle(nodeName: string) {
 			const truncated = nodeName.substring(0, 30);
 			if (truncated.length < nodeName.length) {
 				return `${truncated}...`;
 			}
 			return truncated;
 		},
+		nodeOptionSubtitle(node: IConnectedNode) {
+			const multipleNodesText = this.getMultipleNodesText(node.name);
+			if (multipleNodesText) return multipleNodesText;
+
+			return this.$locale.baseText('ndv.input.nodeDistance', { adjustToNumber: node.depth });
+		},
 		activatePane() {
 			this.$emit('activatePane');
 		},
+		getNodeTypeFromName(nodeName: string) {
+			const node = this.workflowsStore.getNodeByName(nodeName);
+
+			if (!node) return null;
+			return this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+		},
 	},
 });
 </script>
@@ -521,6 +539,7 @@ export default defineComponent({
 	width: max-content;
 	padding: 0 var(--spacing-s) var(--spacing-s);
 }
+
 .titleSection {
 	display: flex;
 	max-width: 300px;
@@ -570,22 +589,37 @@ export default defineComponent({
 .title {
 	text-transform: uppercase;
 	color: var(--color-text-light);
-	letter-spacing: 3px;
 	font-size: var(--font-size-s);
 	font-weight: var(--font-weight-bold);
 }
-</style>
 
-<style lang="scss" scoped>
-.node-option {
-	font-weight: var(--font-weight-regular) !important;
+.inputSelector {
+	max-width: 240px;
 
-	span {
-		color: var(--color-text-light);
+	:global(.el-input--suffix .el-input__inner) {
+		padding-right: var(--spacing-l);
 	}
+}
 
-	&.selected > span {
-		color: var(--color-primary);
-	}
+.nodeOption {
+	--select-option-padding: 0 var(--spacing-s);
+	display: flex;
+	align-items: center;
+	font-size: var(--font-size-2xs);
+	gap: var(--spacing-4xs);
+}
+
+.nodeOptionIcon {
+	padding-right: var(--spacing-5xs);
+}
+
+.nodeOptionTitle {
+	color: var(--color-text-dark);
+	font-weight: var(--font-weight-regular);
+}
+
+.nodeOptionSubtitle {
+	color: var(--color-text-light);
+	font-weight: var(--font-weight-regular);
 }
 </style>
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 7822f32dc9916..fe7d3a960ed9d 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -85,6 +85,7 @@
 				<template #output>
 					<OutputPanel
 						data-test-id="output-panel"
+						:workflow="workflow"
 						:can-link-runs="canLinkRuns"
 						:run-index="outputRun"
 						:linked-runs="linked"
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index 485108cf503dc..e78321238211e 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -2,6 +2,7 @@
 	<RunData
 		ref="runData"
 		:node="node"
+		:workflow="workflow"
 		:run-index="runIndex"
 		:linked-runs="linkedRuns"
 		:can-link-runs="canLinkRuns"
@@ -100,9 +101,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { type PropType, defineComponent } from 'vue';
 import type { IExecutionResponse, INodeUi } from '@/Interface';
-import type { INodeTypeDescription, IRunData, IRunExecutionData, ITaskData } from 'n8n-workflow';
+import type {
+	INodeTypeDescription,
+	IRunData,
+	IRunExecutionData,
+	ITaskData,
+	Workflow,
+} from 'n8n-workflow';
 import RunData from './RunData.vue';
 import RunInfo from './RunInfo.vue';
 import { mapStores, storeToRefs } from 'pinia';
@@ -129,6 +136,10 @@ export default defineComponent({
 	name: 'OutputPanel',
 	components: { RunData, RunInfo, RunDataAi },
 	props: {
+		workflow: {
+			type: Object as PropType<Workflow>,
+			required: true,
+		},
 		runIndex: {
 			type: Number,
 			required: true,
@@ -366,7 +377,6 @@ export default defineComponent({
 .title {
 	text-transform: uppercase;
 	color: var(--color-text-light);
-	letter-spacing: 3px;
 	font-weight: var(--font-weight-bold);
 	font-size: var(--font-size-s);
 }
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 9fb9b203a7b88..437083044f842 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -111,45 +111,51 @@
 			:class="$style.runSelector"
 			data-test-id="run-selector"
 		>
-			<div :class="$style.runSelectorWrapper">
-				<n8n-select
+			<slot name="input-selector"></slot>
+
+			<n8n-select
+				size="small"
+				:model-value="runIndex"
+				:class="$style.runSelectorInner"
+				teleported
+				@update:model-value="onRunIndexChange"
+				@click.stop
+			>
+				<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
+				<n8n-option
+					v-for="option in maxRunIndex + 1"
+					:key="option"
+					:label="getRunLabel(option)"
+					:value="option - 1"
+				></n8n-option>
+			</n8n-select>
+
+			<n8n-tooltip v-if="canLinkRuns" placement="right">
+				<template #content>
+					{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
+				</template>
+				<n8n-icon-button
+					class="linkRun"
+					:icon="linkedRuns ? 'unlink' : 'link'"
+					text
+					type="tertiary"
 					size="small"
-					:model-value="runIndex"
-					teleported
-					@update:model-value="onRunIndexChange"
-					@click.stop
-				>
-					<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
-					<n8n-option
-						v-for="option in maxRunIndex + 1"
-						:key="option"
-						:label="getRunLabel(option)"
-						:value="option - 1"
-					></n8n-option>
-				</n8n-select>
-				<n8n-tooltip v-if="canLinkRuns" placement="right">
-					<template #content>
-						{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
-					</template>
-					<n8n-icon-button
-						class="linkRun"
-						:icon="linkedRuns ? 'unlink' : 'link'"
-						text
-						type="tertiary"
-						size="small"
-						@click="toggleLinkRuns"
-					/>
-				</n8n-tooltip>
-				<slot name="run-info"></slot>
-			</div>
+					@click="toggleLinkRuns"
+				/>
+			</n8n-tooltip>
+
+			<slot name="run-info"></slot>
+
 			<RunDataSearch
-				v-if="showIOSearch"
+				v-if="showIOSearch && searchLocation === 'runs'"
 				v-model="search"
+				:class="$style.search"
 				:pane-type="paneType"
 				:is-area-active="isPaneActive"
 				@focus="activatePane"
 			/>
 		</div>
+
 		<slot name="before-data" />
 
 		<n8n-callout
@@ -171,8 +177,9 @@
 				:options="branches"
 				@update:model-value="onBranchChange"
 			/>
+
 			<RunDataSearch
-				v-if="showIOSearch"
+				v-if="showIOSearch && searchLocation === 'outputs'"
 				v-model="search"
 				:pane-type="paneType"
 				:is-area-active="isPaneActive"
@@ -188,10 +195,12 @@
 				!isArtificialRecoveredEventItem
 			"
 			v-show="!editMode.enabled && !hasRunError"
-			:class="$style.itemsCount"
+			:class="[$style.itemsCount, { [$style.muted]: maxRunIndex === 0 }]"
 			data-test-id="ndv-items-count"
 		>
-			<n8n-text v-if="search">
+			<slot v-if="maxRunIndex === 0" name="input-selector"></slot>
+
+			<n8n-text v-if="search" :class="$style.itemsText">
 				{{
 					$locale.baseText('ndv.search.items', {
 						adjustToNumber: unfilteredDataCount,
@@ -199,7 +208,7 @@
 					})
 				}}
 			</n8n-text>
-			<n8n-text v-else>
+			<n8n-text v-else :class="$style.itemsText">
 				{{
 					$locale.baseText('ndv.output.items', {
 						adjustToNumber: dataCount,
@@ -207,9 +216,11 @@
 					})
 				}}
 			</n8n-text>
+
 			<RunDataSearch
-				v-if="showIOSearch"
+				v-if="showIOSearch && searchLocation === 'items'"
 				v-model="search"
+				:class="$style.search"
 				:pane-type="paneType"
 				:is-area-active="isPaneActive"
 				@focus="activatePane"
@@ -568,6 +579,7 @@ import type {
 	IRunExecutionData,
 	NodeHint,
 	NodeError,
+	Workflow,
 } from 'n8n-workflow';
 import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
 
@@ -647,6 +659,10 @@ export default defineComponent({
 			type: Object as PropType<INodeUi | null>,
 			default: null,
 		},
+		workflow: {
+			type: Object as PropType<Workflow>,
+			required: true,
+		},
 		runIndex: {
 			type: Number,
 			required: true,
@@ -925,9 +941,11 @@ export default defineComponent({
 		rawInputData(): INodeExecutionData[] {
 			return this.getRawInputData(this.runIndex, this.currentOutputIndex, this.connectionType);
 		},
+		unfilteredInputData(): INodeExecutionData[] {
+			return this.getPinDataOrLiveData(this.rawInputData);
+		},
 		inputData(): INodeExecutionData[] {
-			const pinOrLiveData = this.getPinDataOrLiveData(this.rawInputData);
-			return this.getFilteredData(pinOrLiveData);
+			return this.getFilteredData(this.unfilteredInputData);
 		},
 		inputDataPage(): INodeExecutionData[] {
 			const offset = this.pageSize * (this.currentPage - 1);
@@ -1016,20 +1034,29 @@ export default defineComponent({
 			return this.sourceControlStore.preferences.branchReadOnly;
 		},
 		showIOSearch(): boolean {
-			return this.hasNodeRun && !this.hasRunError;
+			return this.hasNodeRun && !this.hasRunError && this.unfilteredInputData.length > 0;
+		},
+		searchLocation() {
+			if (this.maxRunIndex > 0) {
+				return 'runs';
+			}
+
+			if (this.maxOutputIndex > 0 && this.branches.length > 1) {
+				return 'outputs';
+			}
+
+			return 'items';
 		},
 		showIoSearchNoMatchContent(): boolean {
 			return this.hasNodeRun && !this.inputData.length && !!this.search;
 		},
 		parentNodeOutputData(): INodeExecutionData[] {
-			const workflow = this.workflowsStore.getCurrentWorkflow();
-
-			const parentNode = workflow.getParentNodesByDepth(this.node?.name ?? '')[0];
+			const parentNode = this.workflow.getParentNodesByDepth(this.node?.name ?? '')[0];
 			let parentNodeData: INodeExecutionData[] = [];
 
 			if (parentNode?.name) {
 				parentNodeData = this.nodeHelpers.getNodeInputData(
-					workflow.getNode(parentNode?.name),
+					this.workflow.getNode(parentNode?.name),
 					this.runIndex,
 					this.outputIndex,
 					'input',
@@ -1124,11 +1151,10 @@ export default defineComponent({
 	methods: {
 		getResolvedNodeOutputs() {
 			if (this.node && this.nodeType) {
-				const workflow = this.workflowsStore.getCurrentWorkflow();
-				const workflowNode = workflow.getNode(this.node.name);
+				const workflowNode = this.workflow.getNode(this.node.name);
 
 				if (workflowNode) {
-					const outputs = NodeHelpers.getNodeOutputs(workflow, workflowNode, this.nodeType);
+					const outputs = NodeHelpers.getNodeOutputs(this.workflow, workflowNode, this.nodeType);
 					return outputs;
 				}
 			}
@@ -1162,12 +1188,11 @@ export default defineComponent({
 		},
 		getNodeHints(): NodeHint[] {
 			if (this.node && this.nodeType) {
-				const workflow = this.workflowsStore.getCurrentWorkflow();
-				const workflowNode = workflow.getNode(this.node.name);
+				const workflowNode = this.workflow.getNode(this.node.name);
 
 				if (workflowNode) {
 					const executionHints = this.executionHints;
-					const nodeHints = NodeHelpers.getNodeHints(workflow, workflowNode, this.nodeType, {
+					const nodeHints = NodeHelpers.getNodeHints(this.workflow, workflowNode, this.nodeType, {
 						runExecutionData: this.workflowExecution?.data ?? null,
 						runIndex: this.runIndex,
 						connectionInputData: this.parentNodeOutputData,
@@ -1423,16 +1448,20 @@ export default defineComponent({
 			}
 		},
 		getRunLabel(option: number) {
-			let itemsCount = 0;
-			for (let i = 0; i <= this.maxOutputIndex; i++) {
-				itemsCount += this.getPinDataOrLiveData(this.getRawInputData(option - 1, i)).length;
-			}
-			const items = this.$locale.baseText('ndv.output.items', {
-				adjustToNumber: itemsCount,
-				interpolate: { count: itemsCount },
+			// let itemsCount = 0;
+			// for (let i = 0; i <= this.maxOutputIndex; i++) {
+			// 	itemsCount += this.getPinDataOrLiveData(this.getRawInputData(option - 1, i)).length;
+			// }
+			// const items = this.$locale.baseText('ndv.output.items', {
+			// 	adjustToNumber: itemsCount,
+			// 	interpolate: { count: itemsCount },
+			// });
+			// const itemsLabel = itemsCount > 0 ? ` (${items})` : '';
+			// return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
+
+			return this.$locale.baseText('ndv.output.of', {
+				interpolate: { current: option, total: this.maxRunIndex + 1 },
 			});
-			const itemsLabel = itemsCount > 0 ? ` (${items})` : '';
-			return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
 		},
 		getRawInputData(
 			runIndex: number,
@@ -1720,29 +1749,50 @@ export default defineComponent({
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	padding-right: var(--spacing-s);
 	margin-bottom: var(--spacing-s);
 }
 
 .itemsCount {
 	display: flex;
-	justify-content: space-between;
 	align-items: center;
-	margin-left: var(--spacing-s);
-	margin-bottom: var(--spacing-s);
+	gap: var(--spacing-2xs);
+	padding-left: var(--spacing-s);
+	padding-right: var(--spacing-s);
+	padding-bottom: var(--spacing-s);
+
+	.itemsText {
+		flex-shrink: 0;
+		overflow-x: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	&.muted .itemsText {
+		color: var(--color-text-light);
+		font-size: var(--font-size-2xs);
+	}
 }
 
 .runSelector {
 	padding-left: var(--spacing-s);
+	padding-right: var(--spacing-s);
 	padding-bottom: var(--spacing-s);
 	display: flex;
-	width: 100%;
+	gap: var(--spacing-4xs);
 	align-items: center;
-	justify-content: space-between;
+
+	:global(.el-input--suffix .el-input__inner) {
+		padding-right: var(--spacing-l);
+	}
 }
 
-.runSelectorWrapper {
-	display: flex;
-	align-items: center;
+.search {
+	margin-left: auto;
+}
+
+.runSelectorInner {
+	max-width: 120px;
 }
 
 .pagination {
diff --git a/packages/editor-ui/src/components/RunDataSearch.vue b/packages/editor-ui/src/components/RunDataSearch.vue
index 9918a004a1cdc..03a843345132e 100644
--- a/packages/editor-ui/src/components/RunDataSearch.vue
+++ b/packages/editor-ui/src/components/RunDataSearch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { computed, ref, onMounted, onUnmounted, type StyleValue } from 'vue';
 import { useI18n } from '@/composables/useI18n';
 import type { NodePanelType } from '@/Interface';
 
@@ -9,7 +9,9 @@ type Props = {
 	isAreaActive?: boolean;
 };
 
-const INITIAL_WIDTH = '34px';
+const COLLAPSED_WIDTH = '34px';
+const OPEN_WIDTH = '200px';
+const OPEN_MIN_WIDTH = '120px';
 
 const emit = defineEmits<{
 	(event: 'update:modelValue', value: Props['modelValue']): void;
@@ -24,7 +26,6 @@ const props = withDefaults(defineProps<Props>(), {
 const locale = useI18n();
 
 const inputRef = ref<HTMLInputElement | null>(null);
-const maxWidth = ref(INITIAL_WIDTH);
 const opened = ref(false);
 const placeholder = computed(() =>
 	props.paneType === 'input'
@@ -32,6 +33,10 @@ const placeholder = computed(() =>
 		: locale.baseText('ndv.search.placeholder.output'),
 );
 
+const style = computed<StyleValue>(() =>
+	opened.value ? { maxWidth: OPEN_WIDTH, minWidth: OPEN_MIN_WIDTH } : { maxWidth: COLLAPSED_WIDTH },
+);
+
 const documentKeyHandler = (event: KeyboardEvent) => {
 	const isTargetFormElementOrEditable =
 		event.target instanceof HTMLInputElement ||
@@ -50,14 +55,12 @@ const onSearchUpdate = (value: string) => {
 };
 const onFocus = () => {
 	opened.value = true;
-	maxWidth.value = '30%';
 	inputRef.value?.select();
 	emit('focus');
 };
 const onBlur = () => {
 	if (!props.modelValue) {
 		opened.value = false;
-		maxWidth.value = INITIAL_WIDTH;
 	}
 };
 onMounted(() => {
@@ -76,7 +79,7 @@ onUnmounted(() => {
 			[$style.ioSearch]: true,
 			[$style.ioSearchOpened]: opened,
 		}"
-		:style="{ maxWidth }"
+		:style="style"
 		:model-value="modelValue"
 		:placeholder="placeholder"
 		size="small"
@@ -94,7 +97,6 @@ onUnmounted(() => {
 @import '@/styles/variables';
 
 .ioSearch {
-	margin-right: var(--spacing-s);
 	transition: max-width 0.3s $ease-out-expo;
 
 	.ioSearchIcon {
diff --git a/packages/editor-ui/src/components/__tests__/RunDataSearch.test.ts b/packages/editor-ui/src/components/__tests__/RunDataSearch.test.ts
index 55634aeab25f9..9b2fddb17facf 100644
--- a/packages/editor-ui/src/components/__tests__/RunDataSearch.test.ts
+++ b/packages/editor-ui/src/components/__tests__/RunDataSearch.test.ts
@@ -67,7 +67,7 @@ describe('RunDataSearch', () => {
 			},
 		});
 
-		const input = getByRole('textbox');
+		const input = getByRole<HTMLInputElement>('textbox');
 
 		await userEvent.click(input);
 		expect(emitted().focus).toHaveLength(1);
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 32384906d4f42..6bd1af6addc4e 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -892,7 +892,7 @@
 	"ndv.execute.workflowAlreadyRunning": "Workflow is already running",
 	"ndv.featureRequest": "I wish this node would...",
 	"ndv.input": "Input",
-	"ndv.input.nodeDistance": "({count} node back) | ({count} nodes back)",
+	"ndv.input.nodeDistance": "{count} node back | {count} nodes back",
 	"ndv.input.noNodesFound": "No nodes found",
 	"ndv.input.mapping": "Mapping",
 	"ndv.input.debugging": "Debugging",
@@ -925,7 +925,7 @@
 	"ndv.output.noOutputData.message.settingsOption": "> \"Always Output Data\".",
 	"ndv.output.noOutputData.title": "No output data returned",
 	"ndv.output.noOutputDataInBranch": "No output data in this branch",
-	"ndv.output.of": " of ",
+	"ndv.output.of": "{current} of {total}",
 	"ndv.output.pageSize": "Page Size",
 	"ndv.output.run": "Run",
 	"ndv.output.runNodeHint": "Test this node to output data",

From 135845978d9e4a3562fbfc8521054d9733b8fcbb Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 27 May 2024 17:11:46 +0200
Subject: [PATCH 02/11] Remove commented code

---
 packages/editor-ui/src/components/RunData.vue | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 437083044f842..1ecc097dce62c 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1448,17 +1448,6 @@ export default defineComponent({
 			}
 		},
 		getRunLabel(option: number) {
-			// let itemsCount = 0;
-			// for (let i = 0; i <= this.maxOutputIndex; i++) {
-			// 	itemsCount += this.getPinDataOrLiveData(this.getRawInputData(option - 1, i)).length;
-			// }
-			// const items = this.$locale.baseText('ndv.output.items', {
-			// 	adjustToNumber: itemsCount,
-			// 	interpolate: { count: itemsCount },
-			// });
-			// const itemsLabel = itemsCount > 0 ? ` (${items})` : '';
-			// return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
-
 			return this.$locale.baseText('ndv.output.of', {
 				interpolate: { current: option, total: this.maxRunIndex + 1 },
 			});

From 711f498f78d7f1865d9a6f2efaecf0d012f2aa52 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Tue, 28 May 2024 13:44:33 +0200
Subject: [PATCH 03/11] Fix review feedback

---
 .../editor-ui/src/components/InputPanel.vue   | 54 +++++++++++++------
 .../editor-ui/src/components/OutputPanel.vue  |  1 +
 packages/editor-ui/src/components/RunData.vue | 13 +++--
 packages/editor-ui/src/utils/typesUtils.ts    |  4 ++
 4 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 071483f787687..1626c2ad760fb 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -39,7 +39,7 @@
 		</template>
 		<template #input-selector>
 			<n8n-select
-				v-if="parentNodes.length && currentNodeName"
+				v-if="inputSelectorNodes.length && currentNodeName"
 				:model-value="currentNodeName"
 				:no-data-text="$locale.baseText('ndv.input.noNodesFound')"
 				:placeholder="$locale.baseText('ndv.input.parentNodes')"
@@ -51,10 +51,15 @@
 				@update:model-value="onInputNodeChange"
 			>
 				<template #prefix>
-					<NodeIcon :node-type="getNodeTypeFromName(currentNodeName)" :size="14" :shrink="false" />
+					<NodeIcon
+						:disabled="currentNode?.disabled"
+						:node-type="currentNodeType"
+						:size="14"
+						:shrink="false"
+					/>
 				</template>
 				<n8n-option
-					v-for="node of parentNodes"
+					v-for="{ node, type, depth } of inputSelectorNodes"
 					:key="node.name"
 					:value="node.name"
 					:class="$style.nodeOption"
@@ -62,13 +67,14 @@
 					data-test-id="ndv-input-option"
 				>
 					<NodeIcon
-						:class="$style.nodeOptionIcon"
-						:node-type="getNodeTypeFromName(node.name)"
+						:disabled="node?.disabled"
+						:node-type="type"
 						:size="14"
 						:shrink="false"
+						:class="$style.nodeOptionIcon"
 					/>
 					<span :class="$style.nodeOptionTitle">{{ nodeOptionTitle(node.name) }}&nbsp;</span>
-					<span :class="$style.nodeOptionSubtitle">{{ nodeOptionSubtitle(node) }}</span>
+					<span :class="$style.nodeOptionSubtitle">{{ nodeOptionSubtitle(node.name, depth) }}</span>
 				</n8n-option>
 			</n8n-select>
 		</template>
@@ -194,6 +200,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
+import { isPresent } from '@/utils/typesUtils';
 
 type MappingMode = 'debugging' | 'mapping';
 
@@ -360,6 +367,11 @@ export default defineComponent({
 
 			return this.workflowsStore.getNodeByName(this.currentNodeName ?? '');
 		},
+		currentNodeType(): INodeTypeDescription | null {
+			if (!this.currentNode) return null;
+
+			return this.nodeTypesStore.getNodeType(this.currentNode.type, this.currentNode.typeVersion);
+		},
 		connectedCurrentNodeOutputs(): number[] | undefined {
 			const search = this.parentNodes.find(({ name }) => name === this.currentNodeName);
 			if (search) {
@@ -380,6 +392,20 @@ export default defineComponent({
 					nodes.findIndex((node) => node.name === name) === i,
 			);
 		},
+		inputSelectorNodes() {
+			return this.parentNodes
+				.map((parent) => {
+					const node = this.workflowsStore.getNodeByName(parent.name);
+					if (!node) return null;
+
+					return {
+						node,
+						type: this.nodeTypesStore.getNodeType(node.type, node.typeVersion),
+						depth: parent.depth,
+					};
+				})
+				.filter(isPresent);
+		},
 		currentNodeDepth(): number {
 			const node = this.parentNodes.find(
 				(node) => this.currentNode && node.name === this.currentNode.name,
@@ -515,21 +541,15 @@ export default defineComponent({
 			}
 			return truncated;
 		},
-		nodeOptionSubtitle(node: IConnectedNode) {
-			const multipleNodesText = this.getMultipleNodesText(node.name);
+		nodeOptionSubtitle(nodeName: string, depth: number) {
+			const multipleNodesText = this.getMultipleNodesText(nodeName);
 			if (multipleNodesText) return multipleNodesText;
 
-			return this.$locale.baseText('ndv.input.nodeDistance', { adjustToNumber: node.depth });
+			return this.$locale.baseText('ndv.input.nodeDistance', { adjustToNumber: depth });
 		},
 		activatePane() {
 			this.$emit('activatePane');
 		},
-		getNodeTypeFromName(nodeName: string) {
-			const node = this.workflowsStore.getNodeByName(nodeName);
-
-			if (!node) return null;
-			return this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-		},
 	},
 });
 </script>
@@ -589,6 +609,7 @@ export default defineComponent({
 .title {
 	text-transform: uppercase;
 	color: var(--color-text-light);
+	letter-spacing: 3px;
 	font-size: var(--font-size-s);
 	font-weight: var(--font-weight-bold);
 }
@@ -597,6 +618,7 @@ export default defineComponent({
 	max-width: 240px;
 
 	:global(.el-input--suffix .el-input__inner) {
+		padding-left: calc(var(--spacing-l) + var(--spacing-4xs));
 		padding-right: var(--spacing-l);
 	}
 }
@@ -610,7 +632,7 @@ export default defineComponent({
 }
 
 .nodeOptionIcon {
-	padding-right: var(--spacing-5xs);
+	padding-right: var(--spacing-4xs);
 }
 
 .nodeOptionTitle {
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index e78321238211e..083e8920181bc 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -377,6 +377,7 @@ export default defineComponent({
 .title {
 	text-transform: uppercase;
 	color: var(--color-text-light);
+	letter-spacing: 3px;
 	font-weight: var(--font-weight-bold);
 	font-size: var(--font-size-s);
 }
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 1ecc097dce62c..2887aea8b8f3f 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1448,9 +1448,16 @@ export default defineComponent({
 			}
 		},
 		getRunLabel(option: number) {
-			return this.$locale.baseText('ndv.output.of', {
-				interpolate: { current: option, total: this.maxRunIndex + 1 },
+			let itemsCount = 0;
+			for (let i = 0; i <= this.maxOutputIndex; i++) {
+				itemsCount += this.getPinDataOrLiveData(this.getRawInputData(option - 1, i)).length;
+			}
+			const items = this.$locale.baseText('ndv.output.items', {
+				adjustToNumber: itemsCount,
+				interpolate: { count: itemsCount },
 			});
+			const itemsLabel = itemsCount > 0 ? ` (${items})` : '';
+			return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
 		},
 		getRawInputData(
 			runIndex: number,
@@ -1781,7 +1788,7 @@ export default defineComponent({
 }
 
 .runSelectorInner {
-	max-width: 120px;
+	max-width: 160px;
 }
 
 .pagination {
diff --git a/packages/editor-ui/src/utils/typesUtils.ts b/packages/editor-ui/src/utils/typesUtils.ts
index 776bc2fc63f4a..a3c3d8469222e 100644
--- a/packages/editor-ui/src/utils/typesUtils.ts
+++ b/packages/editor-ui/src/utils/typesUtils.ts
@@ -161,3 +161,7 @@ export const getObjectKeys = <T extends object, K extends keyof T>(o: T): K[] =>
 export const tryToParseNumber = (value: string): number | string => {
 	return isNaN(+value) ? value : +value;
 };
+
+export function isPresent<T>(arg: T): arg is Exclude<T, null | undefined> {
+	return arg !== null && arg !== undefined;
+}

From 116aa31cfd1a8f8cc0578927ea82e269ce3e796f Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Tue, 28 May 2024 15:00:44 +0200
Subject: [PATCH 04/11] Add deactivated text for disabled nodes

---
 packages/editor-ui/src/components/InputPanel.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 1626c2ad760fb..abaa68bab1da9 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -67,13 +67,17 @@
 					data-test-id="ndv-input-option"
 				>
 					<NodeIcon
-						:disabled="node?.disabled"
+						:disabled="node.disabled"
 						:node-type="type"
 						:size="14"
 						:shrink="false"
 						:class="$style.nodeOptionIcon"
 					/>
-					<span :class="$style.nodeOptionTitle">{{ nodeOptionTitle(node.name) }}&nbsp;</span>
+					<span :class="$style.nodeOptionTitle">
+						{{ nodeOptionTitle(node.name) }}
+						<span v-if="node.disabled">({{ $locale.baseText('node.disabled') }})</span>
+					</span>
+
 					<span :class="$style.nodeOptionSubtitle">{{ nodeOptionSubtitle(node.name, depth) }}</span>
 				</n8n-option>
 			</n8n-select>

From 85aaadc5efa1a7b61d7390675d29706bd6ae9760 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 29 May 2024 10:16:30 +0200
Subject: [PATCH 05/11] Lighter text color for disabled node in select

---
 packages/editor-ui/src/components/InputPanel.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index abaa68bab1da9..e450f85323670 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -62,7 +62,7 @@
 					v-for="{ node, type, depth } of inputSelectorNodes"
 					:key="node.name"
 					:value="node.name"
-					:class="$style.nodeOption"
+					:class="[$style.nodeOption, { [$style.disabled]: node.disabled }]"
 					:label="`${nodeOptionTitle(node.name)} ${getMultipleNodesText(node.name)}`"
 					data-test-id="ndv-input-option"
 				>
@@ -644,6 +644,10 @@ export default defineComponent({
 	font-weight: var(--font-weight-regular);
 }
 
+.disabled .nodeOptionTitle {
+	color: var(--color-text-light);
+}
+
 .nodeOptionSubtitle {
 	color: var(--color-text-light);
 	font-weight: var(--font-weight-regular);

From ae2add880be2b342c30479208c583c5388615ec6 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 29 May 2024 10:23:04 +0200
Subject: [PATCH 06/11] Remove unused output

---
 packages/editor-ui/src/components/InputPanel.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index e450f85323670..bb1c5f11c788e 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -24,7 +24,6 @@
 		@run-change="onRunIndexChange"
 		@table-mounted="$emit('tableMounted', $event)"
 		@search="$emit('search', $event)"
-		@input-node-change="onInputNodeChange"
 	>
 		<template #header>
 			<div :class="$style.titleSection">

From 3129dec320aea909810c9bad6f6c864a086f1c93 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 29 May 2024 10:46:32 +0200
Subject: [PATCH 07/11] Finetune select width

---
 packages/editor-ui/src/components/InputPanel.vue | 2 +-
 packages/editor-ui/src/components/RunData.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index bb1c5f11c788e..d605c0e8e69d0 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -618,7 +618,7 @@ export default defineComponent({
 }
 
 .inputSelector {
-	max-width: 240px;
+	max-width: 224px;
 
 	:global(.el-input--suffix .el-input__inner) {
 		padding-left: calc(var(--spacing-l) + var(--spacing-4xs));
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 2887aea8b8f3f..6ca9acbedc9ee 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1788,7 +1788,7 @@ export default defineComponent({
 }
 
 .runSelectorInner {
-	max-width: 160px;
+	max-width: 172px;
 }
 
 .pagination {

From 62c7071d6e69136a8c3dbbfbd4dd337fa6a11036 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 30 May 2024 11:18:37 +0200
Subject: [PATCH 08/11] Add input selector for mapping mode + other fixes

---
 .../src/components/InputNodeSelect.vue        | 193 ++++++++++++++++
 .../editor-ui/src/components/InputPanel.vue   | 211 ++++--------------
 packages/editor-ui/src/components/RunData.vue |  57 +++--
 .../src/plugins/i18n/locales/en.json          |   1 -
 4 files changed, 270 insertions(+), 192 deletions(-)
 create mode 100644 packages/editor-ui/src/components/InputNodeSelect.vue

diff --git a/packages/editor-ui/src/components/InputNodeSelect.vue b/packages/editor-ui/src/components/InputNodeSelect.vue
new file mode 100644
index 0000000000000..d8a38b830bfda
--- /dev/null
+++ b/packages/editor-ui/src/components/InputNodeSelect.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { useI18n } from '@/composables/useI18n';
+import { useNDVStore } from '@/stores/ndv.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { isPresent } from '@/utils/typesUtils';
+import type { IConnectedNode, Workflow } from 'n8n-workflow';
+import { computed } from 'vue';
+import NodeIcon from './NodeIcon.vue';
+
+type Props = {
+	nodes: IConnectedNode[];
+	workflow: Workflow;
+	modelValue: string | null;
+};
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+	(event: 'update:model-value', value: string): void;
+}>();
+
+const i18n = useI18n();
+const workflowsStore = useWorkflowsStore();
+const nodeTypesStore = useNodeTypesStore();
+const ndvStore = useNDVStore();
+
+const selectedInputNode = computed(() => workflowsStore.getNodeByName(props.modelValue ?? ''));
+
+const selectedInputNodeType = computed(() => {
+	const node = selectedInputNode.value;
+	if (!node) return null;
+
+	return nodeTypesStore.getNodeType(node.type, node.typeVersion);
+});
+
+const inputNodes = computed(() =>
+	props.nodes
+		.map((node) => {
+			const fullNode = workflowsStore.getNodeByName(node.name);
+			if (!fullNode) return null;
+
+			return {
+				node: fullNode,
+				type: nodeTypesStore.getNodeType(fullNode.type, fullNode.typeVersion),
+				depth: node.depth,
+			};
+		})
+		.filter(isPresent),
+);
+
+const activeNode = computed(() => ndvStore.activeNode);
+
+const activeNodeType = computed(() => {
+	const node = activeNode.value;
+	if (!node) return null;
+
+	return nodeTypesStore.getNodeType(node.type, node.typeVersion);
+});
+
+const isMultiInputNode = computed(() => {
+	const nodeType = activeNodeType.value;
+	return nodeType !== null && nodeType.inputs.length > 1;
+});
+
+function getMultipleNodesText(nodeName: string): string {
+	if (
+		!nodeName ||
+		!isMultiInputNode.value ||
+		!activeNode.value ||
+		!activeNodeType.value?.inputNames
+	)
+		return '';
+
+	const activeNodeConnections =
+		props.workflow.connectionsByDestinationNode[activeNode.value.name].main || [];
+	// Collect indexes of connected nodes
+	const connectedInputIndexes = activeNodeConnections.reduce((acc: number[], node, index) => {
+		if (node[0] && node[0].node === nodeName) return [...acc, index];
+		return acc;
+	}, []);
+
+	// Match connected input indexes to their names specified by active node
+	const connectedInputs = connectedInputIndexes.map(
+		(inputIndex) => activeNodeType.value?.inputNames?.[inputIndex],
+	);
+
+	if (connectedInputs.length === 0) return '';
+
+	return `(${connectedInputs.join(' & ')})`;
+}
+
+function title(nodeName: string) {
+	const truncated = nodeName.substring(0, 30);
+	if (truncated.length < nodeName.length) {
+		return `${truncated}...`;
+	}
+	return truncated;
+}
+
+function subtitle(nodeName: string, depth: number) {
+	const multipleNodesText = getMultipleNodesText(nodeName);
+	if (multipleNodesText) return multipleNodesText;
+	return i18n.baseText('ndv.input.nodeDistance', { adjustToNumber: depth });
+}
+
+function onInputNodeChange(value: string) {
+	emit('update:model-value', value);
+}
+</script>
+
+<template>
+	<n8n-select
+		:model-value="modelValue"
+		:no-data-text="i18n.baseText('ndv.input.noNodesFound')"
+		:placeholder="i18n.baseText('ndv.input.parentNodes')"
+		:class="$style.select"
+		teleported
+		size="small"
+		filterable
+		data-test-id="ndv-input-select"
+		@update:model-value="onInputNodeChange"
+	>
+		<template #prefix>
+			<NodeIcon
+				:disabled="selectedInputNode?.disabled"
+				:node-type="selectedInputNodeType"
+				:size="14"
+				:shrink="false"
+			/>
+		</template>
+
+		<n8n-option
+			v-for="{ node, type, depth } of inputNodes"
+			:key="node.name"
+			:value="node.name"
+			:class="[$style.node, { [$style.disabled]: node.disabled }]"
+			:label="`${title(node.name)} ${getMultipleNodesText(node.name)}`"
+			data-test-id="ndv-input-option"
+		>
+			<NodeIcon
+				:disabled="node.disabled"
+				:node-type="type"
+				:size="14"
+				:shrink="false"
+				:class="$style.icon"
+			/>
+			<span :class="$style.title">
+				{{ title(node.name) }}
+				<span v-if="node.disabled">({{ i18n.baseText('node.disabled') }})</span>
+			</span>
+
+			<span :class="$style.subtitle">{{ subtitle(node.name, depth) }}</span>
+		</n8n-option>
+	</n8n-select>
+</template>
+
+<style lang="scss" module>
+.select {
+	max-width: 224px;
+
+	:global(.el-input--suffix .el-input__inner) {
+		padding-left: calc(var(--spacing-l) + var(--spacing-4xs));
+		padding-right: var(--spacing-l);
+	}
+}
+
+.node {
+	--select-option-padding: 0 var(--spacing-s);
+	display: flex;
+	align-items: center;
+	font-size: var(--font-size-2xs);
+	gap: var(--spacing-4xs);
+}
+
+.icon {
+	padding-right: var(--spacing-4xs);
+}
+
+.title {
+	color: var(--color-text-dark);
+	font-weight: var(--font-weight-regular);
+}
+
+.disabled .title {
+	color: var(--color-text-light);
+}
+
+.subtitle {
+	color: var(--color-text-light);
+	font-weight: var(--font-weight-regular);
+}
+</style>
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index d605c0e8e69d0..ac5ad8b056973 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -37,49 +37,13 @@
 			</div>
 		</template>
 		<template #input-selector>
-			<n8n-select
-				v-if="inputSelectorNodes.length && currentNodeName"
+			<InputNodeSelect
+				v-if="parentNodes.length && currentNodeName"
 				:model-value="currentNodeName"
-				:no-data-text="$locale.baseText('ndv.input.noNodesFound')"
-				:placeholder="$locale.baseText('ndv.input.parentNodes')"
-				:class="$style.inputSelector"
-				teleported
-				size="small"
-				filterable
-				data-test-id="ndv-input-select"
+				:workflow="workflow"
+				:nodes="parentNodes"
 				@update:model-value="onInputNodeChange"
-			>
-				<template #prefix>
-					<NodeIcon
-						:disabled="currentNode?.disabled"
-						:node-type="currentNodeType"
-						:size="14"
-						:shrink="false"
-					/>
-				</template>
-				<n8n-option
-					v-for="{ node, type, depth } of inputSelectorNodes"
-					:key="node.name"
-					:value="node.name"
-					:class="[$style.nodeOption, { [$style.disabled]: node.disabled }]"
-					:label="`${nodeOptionTitle(node.name)} ${getMultipleNodesText(node.name)}`"
-					data-test-id="ndv-input-option"
-				>
-					<NodeIcon
-						:disabled="node.disabled"
-						:node-type="type"
-						:size="14"
-						:shrink="false"
-						:class="$style.nodeOptionIcon"
-					/>
-					<span :class="$style.nodeOptionTitle">
-						{{ nodeOptionTitle(node.name) }}
-						<span v-if="node.disabled">({{ $locale.baseText('node.disabled') }})</span>
-					</span>
-
-					<span :class="$style.nodeOptionSubtitle">{{ nodeOptionSubtitle(node.name, depth) }}</span>
-				</n8n-option>
-			</n8n-select>
+			/>
 		</template>
 		<template v-if="isMappingMode" #before-data>
 			<!--
@@ -88,21 +52,12 @@
 				-->
 			<component :is="'style'">button.linkRun { display: none }</component>
 			<div :class="$style.mappedNode">
-				<n8n-select
+				<InputNodeSelect
 					:model-value="mappedNode"
-					size="small"
-					teleported
+					:workflow="workflow"
+					:nodes="rootNodesParents"
 					@update:model-value="onMappedNodeSelected"
-					@click.stop
-				>
-					<template #prepend>{{ $locale.baseText('ndv.input.previousNode') }}</template>
-					<n8n-option
-						v-for="nodeName in rootNodesParents"
-						:key="nodeName"
-						:label="nodeName"
-						:value="nodeName"
-					/>
-				</n8n-select>
+				/>
 			</div>
 		</template>
 		<template #node-not-run>
@@ -178,38 +133,37 @@
 </template>
 
 <script lang="ts">
-import { type PropType, defineComponent } from 'vue';
-import { mapStores } from 'pinia';
 import type { INodeUi } from '@/Interface';
-import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
-import type {
-	ConnectionTypes,
-	IConnectedNode,
-	INodeOutputConfiguration,
-	INodeTypeDescription,
-	Workflow,
-} from 'n8n-workflow';
-import RunData from './RunData.vue';
-import NodeExecuteButton from './NodeExecuteButton.vue';
-import NodeIcon from './NodeIcon.vue';
-import WireMeUp from './WireMeUp.vue';
 import {
 	CRON_NODE_TYPE,
 	INTERVAL_NODE_TYPE,
 	MANUAL_TRIGGER_NODE_TYPE,
 	START_NODE_TYPE,
 } from '@/constants';
-import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
-import { isPresent } from '@/utils/typesUtils';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import type {
+	ConnectionTypes,
+	IConnectedNode,
+	INodeOutputConfiguration,
+	INodeTypeDescription,
+	Workflow,
+} from 'n8n-workflow';
+import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
+import { mapStores } from 'pinia';
+import { defineComponent, type PropType } from 'vue';
+import InputNodeSelect from './InputNodeSelect.vue';
+import NodeExecuteButton from './NodeExecuteButton.vue';
+import RunData from './RunData.vue';
+import WireMeUp from './WireMeUp.vue';
 
 type MappingMode = 'debugging' | 'mapping';
 
 export default defineComponent({
 	name: 'InputPanel',
-	components: { RunData, NodeExecuteButton, WireMeUp, NodeIcon },
+	components: { RunData, NodeExecuteButton, WireMeUp, InputNodeSelect },
 	props: {
 		currentNodeName: {
 			type: String,
@@ -243,6 +197,17 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	emits: [
+		'itemHover',
+		'tableMounted',
+		'linkRun',
+		'unlinkRun',
+		'runChange',
+		'search',
+		'changeInputNode',
+		'execute',
+		'activatePane',
+	],
 	data() {
 		return {
 			showDraggableHintWithDelay: false,
@@ -350,9 +315,11 @@ export default defineComponent({
 
 			return rootNodes[0];
 		},
-		rootNodesParents(): string[] {
+		rootNodesParents() {
 			const workflow = this.workflow;
-			const parentNodes = [...workflow.getParentNodes(this.rootNode, 'main')].reverse();
+			const parentNodes = [...workflow.getParentNodes(this.rootNode, 'main')]
+				.reverse()
+				.map((parent): IConnectedNode => ({ name: parent, depth: 1, indicies: [] }));
 
 			return parentNodes;
 		},
@@ -370,11 +337,6 @@ export default defineComponent({
 
 			return this.workflowsStore.getNodeByName(this.currentNodeName ?? '');
 		},
-		currentNodeType(): INodeTypeDescription | null {
-			if (!this.currentNode) return null;
-
-			return this.nodeTypesStore.getNodeType(this.currentNode.type, this.currentNode.typeVersion);
-		},
 		connectedCurrentNodeOutputs(): number[] | undefined {
 			const search = this.parentNodes.find(({ name }) => name === this.currentNodeName);
 			if (search) {
@@ -395,23 +357,9 @@ export default defineComponent({
 					nodes.findIndex((node) => node.name === name) === i,
 			);
 		},
-		inputSelectorNodes() {
-			return this.parentNodes
-				.map((parent) => {
-					const node = this.workflowsStore.getNodeByName(parent.name);
-					if (!node) return null;
-
-					return {
-						node,
-						type: this.nodeTypesStore.getNodeType(node.type, node.typeVersion),
-						depth: parent.depth,
-					};
-				})
-				.filter(isPresent);
-		},
 		currentNodeDepth(): number {
 			const node = this.parentNodes.find(
-				(node) => this.currentNode && node.name === this.currentNode.name,
+				(parent) => this.currentNode && parent.name === this.currentNode.name,
 			);
 			return node ? node.depth : -1;
 		},
@@ -430,7 +378,7 @@ export default defineComponent({
 				this.onRunIndexChange(-1);
 				if (val === 'mapping') {
 					this.onUnlinkRun();
-					this.mappedNode = this.rootNodesParents[0];
+					this.mappedNode = this.rootNodesParents[0]?.name ?? null;
 				} else {
 					this.mappedNode = null;
 				}
@@ -475,32 +423,6 @@ export default defineComponent({
 			this.onRunIndexChange(0);
 			this.onUnlinkRun();
 		},
-		getMultipleNodesText(nodeName: string): string {
-			if (
-				!nodeName ||
-				!this.isMultiInputNode ||
-				!this.activeNode ||
-				this.activeNodeType?.inputNames === undefined
-			)
-				return '';
-
-			const activeNodeConnections =
-				this.workflow.connectionsByDestinationNode[this.activeNode.name].main || [];
-			// Collect indexes of connected nodes
-			const connectedInputIndexes = activeNodeConnections.reduce((acc: number[], node, index) => {
-				if (node[0] && node[0].node === nodeName) return [...acc, index];
-				return acc;
-			}, []);
-
-			// Match connected input indexes to their names specified by active node
-			const connectedInputs = connectedInputIndexes.map(
-				(inputIndex) => this.activeNodeType?.inputNames?.[inputIndex],
-			);
-
-			if (connectedInputs.length === 0) return '';
-
-			return `(${connectedInputs.join(' & ')})`;
-		},
 		onNodeExecute() {
 			this.$emit('execute');
 			if (this.activeNode) {
@@ -537,19 +459,6 @@ export default defineComponent({
 				});
 			}
 		},
-		nodeOptionTitle(nodeName: string) {
-			const truncated = nodeName.substring(0, 30);
-			if (truncated.length < nodeName.length) {
-				return `${truncated}...`;
-			}
-			return truncated;
-		},
-		nodeOptionSubtitle(nodeName: string, depth: number) {
-			const multipleNodesText = this.getMultipleNodesText(nodeName);
-			if (multipleNodesText) return multipleNodesText;
-
-			return this.$locale.baseText('ndv.input.nodeDistance', { adjustToNumber: depth });
-		},
 		activatePane() {
 			this.$emit('activatePane');
 		},
@@ -559,7 +468,6 @@ export default defineComponent({
 
 <style lang="scss" module>
 .mappedNode {
-	width: max-content;
 	padding: 0 var(--spacing-s) var(--spacing-s);
 }
 
@@ -616,39 +524,4 @@ export default defineComponent({
 	font-size: var(--font-size-s);
 	font-weight: var(--font-weight-bold);
 }
-
-.inputSelector {
-	max-width: 224px;
-
-	:global(.el-input--suffix .el-input__inner) {
-		padding-left: calc(var(--spacing-l) + var(--spacing-4xs));
-		padding-right: var(--spacing-l);
-	}
-}
-
-.nodeOption {
-	--select-option-padding: 0 var(--spacing-s);
-	display: flex;
-	align-items: center;
-	font-size: var(--font-size-2xs);
-	gap: var(--spacing-4xs);
-}
-
-.nodeOptionIcon {
-	padding-right: var(--spacing-4xs);
-}
-
-.nodeOptionTitle {
-	color: var(--color-text-dark);
-	font-weight: var(--font-weight-regular);
-}
-
-.disabled .nodeOptionTitle {
-	color: var(--color-text-light);
-}
-
-.nodeOptionSubtitle {
-	color: var(--color-text-light);
-	font-weight: var(--font-weight-regular);
-}
 </style>
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 6ca9acbedc9ee..106f0014fd13d 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -111,7 +111,7 @@
 			:class="$style.runSelector"
 			data-test-id="run-selector"
 		>
-			<slot name="input-selector"></slot>
+			<slot v-if="extraControlsLocation === 'runs'" name="input-selector"></slot>
 
 			<n8n-select
 				size="small"
@@ -147,7 +147,7 @@
 			<slot name="run-info"></slot>
 
 			<RunDataSearch
-				v-if="showIOSearch && searchLocation === 'runs'"
+				v-if="showIOSearch && extraControlsLocation === 'runs'"
 				v-model="search"
 				:class="$style.search"
 				:pane-type="paneType"
@@ -169,22 +169,26 @@
 
 		<div
 			v-if="maxOutputIndex > 0 && branches.length > 1"
-			:class="$style.tabs"
+			:class="$style.outputs"
 			data-test-id="branches"
 		>
-			<n8n-tabs
-				:model-value="currentOutputIndex"
-				:options="branches"
-				@update:model-value="onBranchChange"
-			/>
+			<slot v-if="extraControlsLocation === 'outputs'" name="input-selector"></slot>
 
-			<RunDataSearch
-				v-if="showIOSearch && searchLocation === 'outputs'"
-				v-model="search"
-				:pane-type="paneType"
-				:is-area-active="isPaneActive"
-				@focus="activatePane"
-			/>
+			<div :class="$style.tabs">
+				<n8n-tabs
+					:model-value="currentOutputIndex"
+					:options="branches"
+					@update:model-value="onBranchChange"
+				/>
+
+				<RunDataSearch
+					v-if="showIOSearch && extraControlsLocation === 'outputs'"
+					v-model="search"
+					:pane-type="paneType"
+					:is-area-active="isPaneActive"
+					@focus="activatePane"
+				/>
+			</div>
 		</div>
 
 		<div
@@ -195,10 +199,10 @@
 				!isArtificialRecoveredEventItem
 			"
 			v-show="!editMode.enabled && !hasRunError"
-			:class="[$style.itemsCount, { [$style.muted]: maxRunIndex === 0 }]"
+			:class="[$style.itemsCount, { [$style.muted]: paneType === 'input' && maxRunIndex === 0 }]"
 			data-test-id="ndv-items-count"
 		>
-			<slot v-if="maxRunIndex === 0" name="input-selector"></slot>
+			<slot v-if="extraControlsLocation === 'items'" name="input-selector"></slot>
 
 			<n8n-text v-if="search" :class="$style.itemsText">
 				{{
@@ -218,7 +222,7 @@
 			</n8n-text>
 
 			<RunDataSearch
-				v-if="showIOSearch && searchLocation === 'items'"
+				v-if="showIOSearch && extraControlsLocation === 'items'"
 				v-model="search"
 				:class="$style.search"
 				:pane-type="paneType"
@@ -816,7 +820,7 @@ export default defineComponent({
 			}
 
 			const schemaView = { label: this.$locale.baseText('runData.schema'), value: 'schema' };
-			if (this.isPaneTypeInput && !isEmpty(this.jsonData)) {
+			if (this.isPaneTypeInput) {
 				defaults.unshift(schemaView);
 			} else {
 				defaults.push(schemaView);
@@ -830,6 +834,7 @@ export default defineComponent({
 				defaults.unshift({ label: 'HTML', value: 'html' });
 			}
 
+			console.log(defaults);
 			return defaults;
 		},
 		hasNodeRun(): boolean {
@@ -1036,7 +1041,7 @@ export default defineComponent({
 		showIOSearch(): boolean {
 			return this.hasNodeRun && !this.hasRunError && this.unfilteredInputData.length > 0;
 		},
-		searchLocation() {
+		extraControlsLocation() {
 			if (this.maxRunIndex > 0) {
 				return 'runs';
 			}
@@ -1741,12 +1746,20 @@ export default defineComponent({
 	height: 100%;
 }
 
+.outputs {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-s);
+	padding-left: var(--spacing-s);
+	padding-right: var(--spacing-s);
+	padding-bottom: var(--spacing-s);
+}
+
 .tabs {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding-right: var(--spacing-s);
-	margin-bottom: var(--spacing-s);
+	min-height: 30px;
 }
 
 .itemsCount {
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 6bd1af6addc4e..d57b70d25f4f9 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -897,7 +897,6 @@
 	"ndv.input.mapping": "Mapping",
 	"ndv.input.debugging": "Debugging",
 	"ndv.input.parentNodes": "Parent nodes",
-	"ndv.input.previousNode": "Previous node",
 	"ndv.input.tooMuchData.title": "Input data is huge",
 	"ndv.input.noOutputDataInBranch": "No input data in this branch",
 	"ndv.input.noOutputDataInNode": "Node did not output any data. n8n stops executing the workflow when a node has no output data.",

From f1966637b4b9e3f963acf0aac4a64c207143a902 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 30 May 2024 15:48:17 +0200
Subject: [PATCH 09/11] Show new selector on node that has not run

---
 .../editor-ui/src/components/InputPanel.vue   |  2 +-
 packages/editor-ui/src/components/RunData.vue | 23 +++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index ac5ad8b056973..ead2b66e16525 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -36,7 +36,7 @@
 				/>
 			</div>
 		</template>
-		<template #input-selector>
+		<template #input-select>
 			<InputNodeSelect
 				v-if="parentNodes.length && currentNodeName"
 				:model-value="currentNodeName"
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 106f0014fd13d..935c8eae82a62 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -58,6 +58,7 @@
 					data-test-id="ndv-run-data-display-mode"
 					@update:model-value="onDisplayModeChange"
 				/>
+
 				<n8n-icon-button
 					v-if="canPinData && !isReadOnlyRoute && !readOnlyEnv"
 					v-show="!editMode.enabled"
@@ -105,13 +106,17 @@
 			</div>
 		</div>
 
+		<div v-if="extraControlsLocation === 'header'" :class="$style.inputSelect">
+			<slot name="input-select"></slot>
+		</div>
+
 		<div
 			v-if="maxRunIndex > 0"
 			v-show="!editMode.enabled"
 			:class="$style.runSelector"
 			data-test-id="run-selector"
 		>
-			<slot v-if="extraControlsLocation === 'runs'" name="input-selector"></slot>
+			<slot v-if="extraControlsLocation === 'runs'" name="input-select"></slot>
 
 			<n8n-select
 				size="small"
@@ -172,7 +177,7 @@
 			:class="$style.outputs"
 			data-test-id="branches"
 		>
-			<slot v-if="extraControlsLocation === 'outputs'" name="input-selector"></slot>
+			<slot v-if="extraControlsLocation === 'outputs'" name="input-select"></slot>
 
 			<div :class="$style.tabs">
 				<n8n-tabs
@@ -202,7 +207,7 @@
 			:class="[$style.itemsCount, { [$style.muted]: paneType === 'input' && maxRunIndex === 0 }]"
 			data-test-id="ndv-items-count"
 		>
-			<slot v-if="extraControlsLocation === 'items'" name="input-selector"></slot>
+			<slot v-if="extraControlsLocation === 'items'" name="input-select"></slot>
 
 			<n8n-text v-if="search" :class="$style.itemsText">
 				{{
@@ -1042,10 +1047,8 @@ export default defineComponent({
 			return this.hasNodeRun && !this.hasRunError && this.unfilteredInputData.length > 0;
 		},
 		extraControlsLocation() {
-			if (this.maxRunIndex > 0) {
-				return 'runs';
-			}
-
+			if (!this.hasNodeRun) return 'header';
+			if (this.maxRunIndex > 0) return 'runs';
 			if (this.maxOutputIndex > 0 && this.branches.length > 1) {
 				return 'outputs';
 			}
@@ -1783,6 +1786,12 @@ export default defineComponent({
 	}
 }
 
+.inputSelect {
+	padding-left: var(--spacing-s);
+	padding-right: var(--spacing-s);
+	padding-bottom: var(--spacing-s);
+}
+
 .runSelector {
 	padding-left: var(--spacing-s);
 	padding-right: var(--spacing-s);

From 00588e5707fd7998248c4a7694101e98c6746071 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 30 May 2024 15:59:36 +0200
Subject: [PATCH 10/11] Fix e2e

---
 cypress/pages/ndv.ts                          |  6 ++++--
 packages/editor-ui/src/components/RunData.vue | 13 +++++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/cypress/pages/ndv.ts b/cypress/pages/ndv.ts
index 23a9882747a04..6adca4befde96 100644
--- a/cypress/pages/ndv.ts
+++ b/cypress/pages/ndv.ts
@@ -63,7 +63,9 @@ export class NDV extends BasePage {
 		httpRequestNotice: () => cy.getByTestId('node-parameters-http-notice'),
 		nthParam: (n: number) => cy.getByTestId('node-parameters').find('.parameter-item').eq(n),
 		inputRunSelector: () => this.getters.inputPanel().findChildByTestId('run-selector'),
+		inputLinkRun: () => this.getters.inputPanel().findChildByTestId('link-run'),
 		outputRunSelector: () => this.getters.outputPanel().findChildByTestId('run-selector'),
+		outputLinkRun: () => this.getters.outputPanel().findChildByTestId('link-run'),
 		outputHoveringItem: () => this.getters.outputPanel().findChildByTestId('hovering-item'),
 		inputHoveringItem: () => this.getters.inputPanel().findChildByTestId('hovering-item'),
 		outputBranches: () => this.getters.outputPanel().findChildByTestId('branches'),
@@ -228,10 +230,10 @@ export class NDV extends BasePage {
 			getVisibleSelect().find('.el-select-dropdown__item').contains(runName).click();
 		},
 		toggleOutputRunLinking: () => {
-			this.getters.outputRunSelector().find('button').click();
+			this.getters.outputLinkRun().click();
 		},
 		toggleInputRunLinking: () => {
-			this.getters.inputRunSelector().find('button').click();
+			this.getters.inputLinkRun().click();
 		},
 		switchOutputBranch: (name: string) => {
 			this.getters.outputBranches().get('span').contains(name).click();
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 935c8eae82a62..a1db4cbbbefd6 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -110,19 +110,15 @@
 			<slot name="input-select"></slot>
 		</div>
 
-		<div
-			v-if="maxRunIndex > 0"
-			v-show="!editMode.enabled"
-			:class="$style.runSelector"
-			data-test-id="run-selector"
-		>
+		<div v-if="maxRunIndex > 0" v-show="!editMode.enabled" :class="$style.runSelector">
 			<slot v-if="extraControlsLocation === 'runs'" name="input-select"></slot>
 
 			<n8n-select
-				size="small"
 				:model-value="runIndex"
 				:class="$style.runSelectorInner"
+				size="small"
 				teleported
+				data-test-id="run-selector"
 				@update:model-value="onRunIndexChange"
 				@click.stop
 			>
@@ -140,11 +136,12 @@
 					{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
 				</template>
 				<n8n-icon-button
-					class="linkRun"
 					:icon="linkedRuns ? 'unlink' : 'link'"
+					class="linkRun"
 					text
 					type="tertiary"
 					size="small"
+					data-test-id="link-run"
 					@click="toggleLinkRuns"
 				/>
 			</n8n-tooltip>

From 17433f0380fdf6e89b799d33342a683407173095 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 31 May 2024 17:45:36 +0200
Subject: [PATCH 11/11] Remove console.log

---
 packages/editor-ui/src/components/RunData.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index a1db4cbbbefd6..5937425a09ce4 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -836,7 +836,6 @@ export default defineComponent({
 				defaults.unshift({ label: 'HTML', value: 'html' });
 			}
 
-			console.log(defaults);
 			return defaults;
 		},
 		hasNodeRun(): boolean {