From 973956cc26c78c329ff6eb6934d4f0a24060c87c Mon Sep 17 00:00:00 2001
From: Michael Kret <88898367+michael-radency@users.noreply.github.com>
Date: Mon, 19 Aug 2024 16:28:07 +0300
Subject: [PATCH] fix: Show input names when node has multiple inputs (#10434)

---
 .../src/components/InputNodeSelect.vue        | 17 +++++++++--
 .../src/components/RunDataSchema.vue          | 29 ++++++++++++++++++-
 packages/editor-ui/src/stores/ndv.store.ts    | 20 +++++++++++++
 3 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/InputNodeSelect.vue b/packages/editor-ui/src/components/InputNodeSelect.vue
index 0f340ab0bd..c7550a76c6 100644
--- a/packages/editor-ui/src/components/InputNodeSelect.vue
+++ b/packages/editor-ui/src/components/InputNodeSelect.vue
@@ -63,6 +63,15 @@ const isMultiInputNode = computed(() => {
 	return nodeType !== null && nodeType.inputs.length > 1;
 });
 
+const connectedTo = (nodeName: string) => {
+	const connections = ndvStore.ndvNodeInputNumber[nodeName];
+	if (!connections) return '';
+	if (connections.length === 1) {
+		return `Input ${ndvStore.ndvNodeInputNumber[nodeName]}`;
+	}
+	return `Inputs ${ndvStore.ndvNodeInputNumber[nodeName].join(', ')}`;
+};
+
 function getMultipleNodesText(nodeName: string): string {
 	if (
 		!nodeName ||
@@ -90,8 +99,8 @@ function getMultipleNodesText(nodeName: string): string {
 	return `(${connectedInputs.join(' & ')})`;
 }
 
-function title(nodeName: string) {
-	const truncated = nodeName.substring(0, 30);
+function title(nodeName: string, length = 30) {
+	const truncated = nodeName.substring(0, length);
 	if (truncated.length < nodeName.length) {
 		return `${truncated}...`;
 	}
@@ -150,7 +159,9 @@ function onInputNodeChange(value: string) {
 				<span v-if="node.disabled">({{ i18n.baseText('node.disabled') }})</span>
 			</span>
 
-			<span :class="$style.subtitle">{{ subtitle(node.name, depth) }}</span>
+			<span :class="$style.subtitle">{{
+				connectedTo(node.name) ? connectedTo(node.name) : subtitle(node.name, depth)
+			}}</span>
 		</n8n-option>
 	</n8n-select>
 </template>
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index acb9f8a576..fcb31ddde8 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -110,6 +110,24 @@ const filteredNodes = computed(() =>
 	nodes.value.filter((node) => !props.search || !isDataEmpty(node.schema)),
 );
 
+const nodeAdditionalInfo = (node: INodeUi) => {
+	const returnData: string[] = [];
+	if (node.disabled) {
+		returnData.push(i18n.baseText('node.disabled'));
+	}
+
+	const connections = ndvStore.ndvNodeInputNumber[node.name];
+	if (connections) {
+		if (connections.length === 1) {
+			returnData.push(`Input ${connections}`);
+		} else {
+			returnData.push(`Inputs ${connections.join(', ')}`);
+		}
+	}
+
+	return returnData.length ? `(${returnData.join(' | ')})` : '';
+};
+
 const isDataEmpty = (schema: Schema | null) => {
 	if (!schema) return true;
 	// Utilize the generated schema instead of looping over the entire data again
@@ -292,7 +310,9 @@ watch(
 
 					<div :class="$style.title">
 						{{ currentNode.node.name }}
-						<span v-if="currentNode.node.disabled">({{ $locale.baseText('node.disabled') }})</span>
+						<span v-if="nodeAdditionalInfo(currentNode.node)" :class="$style.subtitle">{{
+							nodeAdditionalInfo(currentNode.node)
+						}}</span>
 					</div>
 					<font-awesome-icon
 						v-if="currentNode.nodeType.group.includes('trigger')"
@@ -478,6 +498,13 @@ watch(
 	cursor: pointer;
 }
 
+.subtitle {
+	margin-left: auto;
+	padding-left: var(--spacing-2xs);
+	color: var(--color-text-light);
+	font-weight: var(--font-weight-regular);
+}
+
 .header {
 	display: flex;
 	align-items: center;
diff --git a/packages/editor-ui/src/stores/ndv.store.ts b/packages/editor-ui/src/stores/ndv.store.ts
index dbaf8c94a1..1e7d5da363 100644
--- a/packages/editor-ui/src/stores/ndv.store.ts
+++ b/packages/editor-ui/src/stores/ndv.store.ts
@@ -177,6 +177,26 @@ export const useNDVStore = defineStore(STORES.NDV, {
 		isNDVOpen(): boolean {
 			return this.activeNodeName !== null;
 		},
+		ndvNodeInputNumber() {
+			const returnData: { [nodeName: string]: number[] } = {};
+			const workflow = useWorkflowsStore().getCurrentWorkflow();
+			const activeNodeConections = (
+				workflow.connectionsByDestinationNode[this.activeNode?.name || ''] ?? {}
+			).main;
+
+			if (!activeNodeConections || activeNodeConections.length < 2) return returnData;
+
+			for (const [index, connection] of activeNodeConections.entries()) {
+				for (const node of connection) {
+					if (!returnData[node.node]) {
+						returnData[node.node] = [];
+					}
+					returnData[node.node].push(index + 1);
+				}
+			}
+
+			return returnData;
+		},
 	},
 	actions: {
 		setActiveNodeName(nodeName: string | null): void {