From 04dd4760e173bfc8a938413a5915d63291da8afe Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 17 May 2024 17:18:15 +0200
Subject: [PATCH] fix(editor): Fix i18n translation addition (#9451)

---
 .../CredentialEdit/CredentialConfig.vue       |  7 ++-
 packages/editor-ui/src/plugins/i18n/index.ts  | 59 +++++--------------
 2 files changed, 19 insertions(+), 47 deletions(-)

diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index 226e0f7fab..b1e5dfa07b 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -186,6 +186,7 @@ export default defineComponent({
 		},
 		parentTypes: {
 			type: Array as PropType<string[]>,
+			default: () => [],
 		},
 		credentialData: {},
 		credentialId: {
@@ -274,7 +275,7 @@ export default defineComponent({
 				return '';
 			}
 
-			const appName = getAppNameFromCredType((this.credentialType as ICredentialType).displayName);
+			const appName = getAppNameFromCredType(this.credentialType.displayName);
 
 			return (
 				appName ||
@@ -282,13 +283,13 @@ export default defineComponent({
 			);
 		},
 		credentialTypeName(): string {
-			return (this.credentialType as ICredentialType)?.name;
+			return this.credentialType?.name;
 		},
 		credentialOwnerName(): string {
 			return this.credentialsStore.getCredentialOwnerNameById(`${this.credentialId}`);
 		},
 		documentationUrl(): string {
-			const type = this.credentialType as ICredentialType;
+			const type = this.credentialType;
 			const activeNode = this.ndvStore.activeNode;
 			const isCommunityNode = activeNode ? isCommunityPackageName(activeNode.type) : false;
 
diff --git a/packages/editor-ui/src/plugins/i18n/index.ts b/packages/editor-ui/src/plugins/i18n/index.ts
index 999393189d..b120829c0a 100644
--- a/packages/editor-ui/src/plugins/i18n/index.ts
+++ b/packages/editor-ui/src/plugins/i18n/index.ts
@@ -1,7 +1,6 @@
 import type { Plugin } from 'vue';
 import axios from 'axios';
 import { createI18n } from 'vue-i18n';
-import type { I18nOptions } from 'vue-i18n';
 import { locale } from 'n8n-design-system';
 import type { INodeProperties, INodePropertyCollection, INodePropertyOptions } from 'n8n-workflow';
 
@@ -437,9 +436,7 @@ async function setLanguage(language: string) {
 	return language;
 }
 
-export async function loadLanguage(language?: string) {
-	if (!language) return;
-
+export async function loadLanguage(language: string) {
 	if (i18nInstance.global.locale === language) {
 		return await setLanguage(language);
 	}
@@ -466,25 +463,15 @@ export async function loadLanguage(language?: string) {
  */
 export function addNodeTranslation(
 	nodeTranslation: { [nodeType: string]: object },
-	language: keyof I18nOptions['messages'],
+	language: string,
 ) {
-	const oldNodesBase: { nodes: {} } = i18nInstance.global.messages[language]['n8n-nodes-base'] ?? {
-		nodes: {},
+	const newMessages = {
+		'n8n-nodes-base': {
+			nodes: nodeTranslation,
+		},
 	};
 
-	const updatedNodes = {
-		...oldNodesBase.nodes,
-		...nodeTranslation,
-	};
-
-	const newNodesBase = {
-		'n8n-nodes-base': Object.assign(oldNodesBase, { nodes: updatedNodes }),
-	};
-
-	i18nInstance.global.setLocaleMessage(
-		language,
-		Object.assign(i18nInstance.global.messages[language], newNodesBase),
-	);
+	i18nInstance.global.mergeLocaleMessage(language, newMessages);
 }
 
 /**
@@ -492,38 +479,22 @@ export function addNodeTranslation(
  */
 export function addCredentialTranslation(
 	nodeCredentialTranslation: { [credentialType: string]: object },
-	language: keyof I18nOptions['messages'],
+	language: string,
 ) {
-	const oldNodesBase: { credentials: {} } = i18nInstance.global.messages[language][
-		'n8n-nodes-base'
-	] || { credentials: {} };
-
-	const updatedCredentials = {
-		...oldNodesBase.credentials,
-		...nodeCredentialTranslation,
+	const newMessages = {
+		'n8n-nodes-base': {
+			credentials: nodeCredentialTranslation,
+		},
 	};
 
-	const newNodesBase = {
-		'n8n-nodes-base': Object.assign(oldNodesBase, { credentials: updatedCredentials }),
-	};
-
-	i18nInstance.global.setLocaleMessage(
-		language,
-		Object.assign(i18nInstance.global.messages[language], newNodesBase),
-	);
+	i18nInstance.global.mergeLocaleMessage(language, newMessages);
 }
 
 /**
  * Add a node's header strings to the i18n instance's `messages` object.
  */
-export function addHeaders(
-	headers: INodeTranslationHeaders,
-	language: keyof I18nOptions['messages'],
-) {
-	i18nInstance.global.setLocaleMessage(
-		language,
-		Object.assign(i18nInstance.global.messages[language], { headers }),
-	);
+export function addHeaders(headers: INodeTranslationHeaders, language: string) {
+	i18nInstance.global.mergeLocaleMessage(language, { headers });
 }
 
 export const i18n: I18nClass = new I18nClass();