From 393723af3922b140ee205b39d4c21733aa7b4ac9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 29 Nov 2021 09:34:59 +0100
Subject: [PATCH] :bug: Fix rendering for node titles

---
 packages/editor-ui/src/components/Node.vue | 54 +++++++++++++++++++---
 packages/editor-ui/src/store.ts            | 13 ++++++
 2 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 1425659d1a..4914be06b6 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -50,13 +50,9 @@
 			<div :class="{'disabled-linethrough': true, success: workflowDataItems > 0}" v-if="showDisabledLinethrough"></div>
 		</div>
 		<div class="node-description">
-			<div class="node-name" :title="data.name">
+			<div class="node-name" :title="nodeTitle">
 				<p>
-					{{ this.$headerText({
-							key: `headers.${shortNodeType}.displayName`,
-							fallback: data.name,
-						})
-					}}
+					{{ nodeTitle }}
 				</p>
 				<p v-if="data.disabled">({{ $baseText('node.disabled') }}}</p>
 			</div>
@@ -164,6 +160,23 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, renderText, workflow
 		shortNodeType (): string {
 			return this.$shortNodeType(this.data.type);
 		},
+		nodeTitle (): string {
+			const node = this.data;
+
+			const nodeName = this.$headerText({
+				key: `headers.${this.$shortNodeType(node.type)}.displayName`,
+				fallback: node.name,
+			});
+
+			if (!/\d$/.test(node.name)) return nodeName;
+
+			const nativeDuplicateSuffix = this.getDuplicateSuffix(node, { fromNative: true });
+
+			if (nativeDuplicateSuffix) return nodeName + nativeDuplicateSuffix;
+
+			return nodeName + this.getDuplicateSuffix(node, { fromStandard: true });
+
+		},
 		waiting (): string | undefined {
 			const workflowExecution = this.$store.getters.getWorkflowExecution;
 
@@ -272,6 +285,35 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, renderText, workflow
 				this.$emit('duplicateNode', this.data.name);
 			});
 		},
+
+		/**
+		 * Extract the duplicate number suffix from a node name:
+		 * - from a node name natively ending in a number, e.g. `'S31'` → `'1'`
+		 * - from a standard node name, e.g. `'GitHub1'` → `'1'`
+		 */
+		getDuplicateSuffix(
+			node: INodeUi,
+			{ fromNative, fromStandard }: { fromNative?: true; fromStandard?: true; },
+		) {
+			if (fromNative) {
+				const { nativelyNumberSuffixedNodeNames: natives } = this.$store.getters;
+				const found = natives.find((native: string) => node.name.includes(native));
+
+				if (!found) return null;
+
+				return node.name.split(found).pop()!;
+			}
+
+			if (fromStandard) {
+				const match = node.name.match(/(.*)(?<duplicateSuffix>\d)$/);
+				if (!match || !match.groups || !match.groups.duplicateSuffix) return null;
+
+				return match.groups.duplicateSuffix;
+			}
+
+			throw new Error('Either "fromNative" or "fromStandard" must be specified');
+		},
+
 		setNodeActive () {
 			this.$store.commit('setActiveNode', this.data.name);
 		},
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index 4a6224037b..611c659f80 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -818,6 +818,19 @@ export const store = new Vuex.Store({
 		allNodeTypes: (state): INodeTypeDescription[] => {
 			return state.nodeTypes;
 		},
+
+		/**
+		 * Getter for node display names ending with a number: `'S3'`, `'MSG91'`, etc.
+		 */
+		nativelyNumberSuffixedNodeNames: (_, getters): string[] => {
+			const allNodeTypes: INodeTypeDescription[] = getters.allNodeTypes;
+
+			return allNodeTypes.reduce<string[]>((acc, cur) => {
+				if (/\d$/.test(cur.displayName)) acc.push(cur.displayName);
+				return acc;
+			}, []);
+		},
+
 		nodeType: (state, getters) => (nodeType: string, typeVersion?: number): INodeTypeDescription | null => {
 			const foundType = state.nodeTypes.find(typeData => {
 				return typeData.name === nodeType && typeData.version === (typeVersion || typeData.defaultVersion || DEFAULT_NODETYPE_VERSION);