fix: Show input names when node has multiple inputs (#10434)

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) {
+function title(nodeName: string, length = 30) {
-	const truncated = nodeName.substring(0, 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>

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;

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 {