feat(editor): Add node name and version to NDV node settings (#7731)

<img width="580" alt="image"
src="https://github.com/n8n-io/n8n/assets/8850410/85ac1c6e-9116-436a-a2ed-8d0ac162a287">

<img width="580" alt="image"
src="https://github.com/n8n-io/n8n/assets/8850410/08b37377-cef5-4f80-80c0-addfdd37f728">

---------

Co-authored-by: Giulio Andreini <andreini@netseven.it>

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -35,6 +35,7 @@
 					<div
 						v-else
 						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
+						:data-test-id="`tab-${option.value}`"
 						@click="() => handleTabClick(option.value)"
 					>
 						<n8n-icon v-if="option.icon" :icon="option.icon" size="medium" />

packages/editor-ui/src/components/NodeSettings.vue

@@ -152,6 +152,17 @@
 					@valueChanged="valueChanged"
 					@parameterBlur="onParameterBlur"
 				/>
+				<div class="node-version" data-test-id="node-version">
+					{{
+						$locale.baseText('nodeSettings.nodeVersion', {
+							interpolate: {
+								node: nodeType?.displayName as string,
+								version: node.typeVersion.toString(),
+							},
+						})
+					}}
+					<span>({{ nodeVersionTag }})</span>
+				</div>
 			</div>
 		</div>
 		<n8n-block-ui :show="blockUI" />
@@ -258,6 +269,29 @@ export default defineComponent({
 
 			return '';
 		},
+		nodeTypeVersions(): number[] {
+			if (!this.node) return [];
+			return this.nodeTypesStore.getNodeVersions(this.node.type);
+		},
+		latestVersion(): number {
+			return Math.max(...this.nodeTypeVersions);
+		},
+		isLatestNodeVersion(): boolean {
+			return this.latestVersion === this.node?.typeVersion;
+		},
+		nodeVersionTag(): string {
+			if (!this.nodeType || this.nodeType.hidden) {
+				return this.$locale.baseText('nodeSettings.deprecated');
+			}
+
+			if (this.isLatestNodeVersion) {
+				return this.$locale.baseText('nodeSettings.latest');
+			}
+
+			return this.$locale.baseText('nodeSettings.latestVersion', {
+				interpolate: { version: this.latestVersion.toString() },
+			});
+		},
 		nodeTypeDescription(): string {
 			if (this.nodeType?.description) {
 				const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
@@ -1126,6 +1160,14 @@ export default defineComponent({
 	top: -25px;
 }
 
+.node-version {
+	border-top: var(--border-base);
+	font-size: var(--font-size-xs);
+	font-size: var(--font-size-2xs);
+	padding: var(--spacing-xs) 0 var(--spacing-2xs) 0;
+	color: var(--color-text-light);
+}
+
 .parameter-value {
 	input.expression {
 		border-style: dashed;

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -995,6 +995,11 @@
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeSettings.hasForeignCredential": "To edit this node, either:<br/>a) Ask {owner} to share the credential with you, or<br/>b) Duplicate the node and add your own credential",
+	"nodeSettings.latest": "Latest",
+	"nodeSettings.deprecated": "Deprecated",
+	"nodeSettings.latestVersion": "Latest version: {version}",
+	"nodeSettings.nodeVersion": "{node} node version {version}",
+	"nodeView.addNode": "Add node",
 	"nodeView.openNodesPanel": "Open nodes panel",
 	"nodeView.addATriggerNodeFirst": "Add a <a data-action='showNodeCreator'>Trigger Node</a> first",
 	"nodeView.addOrEnableTriggerNode": "<a data-action='showNodeCreator'>Add</a> or enable a Trigger node to execute the workflow",

packages/editor-ui/src/stores/nodeTypes.store.ts

@@ -84,6 +84,11 @@ export const useNodeTypesStore = defineStore(STORES.NODE_TYPES, {
 				return nodeType ?? null;
 			};
 		},
+		getNodeVersions() {
+			return (nodeTypeName: string): number[] => {
+				return Object.keys(this.nodeTypes[nodeTypeName] ?? {}).map(Number);
+			};
+		},
 		getCredentialOnlyNodeType() {
 			return (nodeTypeName: string, version?: number): INodeTypeDescription | null => {
 				const credentialName = getCredentialTypeName(nodeTypeName);