⚡ i18n feedback refactorings (#2597)

* ⚡ Create endpoint for node credential translation

* ⚡ Add API helper method in FE

* 🔨 Add creds JSON files to tsconfig

* ⚡ Refactor credentials loading

* ⚡ Refactor calls in CredentialConfig

* ✏️ Add dummy translations

* ⚡ Split translations per node

* 🔥 Remove deprecated method

* ⚡ Refactor nesting in collections

* 🚚 Rename topParameter methods for accuracy

* ✏️ Fill out GitHub dummy cred

* 🚚 Clarify naming for collection utils

* ✏️ Fill out dummy translation

* 🔥 Remove surplus colons

* 🔥 Remove logging

* ⚡ Restore missing space

* 🔥 Remove lingering colon

* ⚡ Add path to InputLabel calls

* ✏️ Fill out dummy translations

* 🐛 Fix multipleValuesButtonText logic

* ⚡ Add sample properties to be deleted

* ⚡ Render deeply nested params

* 📦 Update package-lock.json

* 🔥 remove logging

* ✏️ Add dummy value to Slack translation

* ✏️ Add placeholder to dummy translation

* ⚡ Fix placeholder rendering for button text

* 👕 Fix lint

* 🔥 Remove outdated comment

* 🐛 Pass in missing arg for placeholder

* ✏️ Fill out Slack translation

* ⚡ Add explanatory comment

* ✏️ Fill out dummy translation

* ✏️ Update documentation

* 🔥 Remove broken link

* ✏️ Add pending functionality

* ✏️ Fix indentation

* 🐛 Fix method call in CredentialEdit

* ⚡ Implement eventTriggerDescription

* 🐛 Fix table-json-binary radio buttons

* ✏️ Clarify usage of eventTriggerDescription

* 🔥 Remove unneeded arg

* 🐛 Fix display in CodeEdit and TextEdit

* 🔥 Remove logging

* ✏️ Add translation for test cred options

* ✏️ Add test for separate file in same dir

* ✏️ Add test for versioned node

* ✏️ Add test for node in grouped dir

* ✏️ Add minor clarifications

* ✏️ Add nested collection test

* ✏️ Add pending functionality

* ⚡ Generalize collections handling

* 🚚 Rename helper to remove redundancy

* 🚚 Improve naming in helpers

* ✏️ Improve helpers documentation

* ✏️ Improve i18n methods documentation

* 🚚 Make endpoint naming consistent

* ✏️ Add final newlines

* ✏️ Clean up JSON examples

* ⚡ Reuse i18n method

* ⚡ Improve utils readability

* ⚡ Return early if cred translation exists

* 🔥 Remove dummy translations

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -81,7 +81,7 @@ import CopyInput from '../CopyInput.vue';
 import CredentialInputs from './CredentialInputs.vue';
 import OauthButton from './OauthButton.vue';
 import { restApi } from '@/components/mixins/restApi';
-import { addNodeTranslation } from '@/plugins/i18n';
+import { addCredentialTranslation } from '@/plugins/i18n';
 import mixins from 'vue-typed-mixins';
 
 export default mixins(restApi).extend({
@@ -128,10 +128,20 @@ export default mixins(restApi).extend({
 		},
 	},
 	async beforeMount() {
-		if (this.$store.getters.defaultLocale !== 'en') {
-			await this.findCredentialTextRenderKeys();
-			await this.addNodeTranslationForCredential();
-		}
+		if (this.$store.getters.defaultLocale === 'en') return;
+
+		this.$store.commit('setActiveCredentialType', this.credentialType.name);
+
+		const key = `n8n-nodes-base.credentials.${this.credentialType.name}`;
+
+		if (this.$locale.exists(key)) return;
+
+		const credTranslation = await this.restApi().getCredentialTranslation(this.credentialType.name);
+
+		addCredentialTranslation(
+			{ [this.credentialType.name]: credTranslation },
+			this.$store.getters.defaultLocale,
+		);
 	},
 	computed: {
 		appName(): string {
@@ -139,6 +149,8 @@ export default mixins(restApi).extend({
 				return '';
 			}
 
+
+
 			const appName = getAppNameFromCredType(
 				(this.credentialType as ICredentialType).displayName,
 			);
@@ -177,47 +189,6 @@ export default mixins(restApi).extend({
 		},
 	},
 	methods: {
-		/**
-		 * Find the keys needed by the mixin to render credential text, and place them in the Vuex store.
-		 */
-		async findCredentialTextRenderKeys() {
-			const nodeTypes = await this.restApi().getNodeTypes();
-
-			// credential type name → node type name
-			const map = nodeTypes.reduce<Record<string, string>>((acc, cur) => {
-				if (!cur.credentials) return acc;
-
-				cur.credentials.forEach(cred => {
-					if (acc[cred.name]) return;
-					acc[cred.name] = cur.name;
-				});
-
-				return acc;
-			}, {});
-
-			const renderKeys = {
-				nodeType: map[this.credentialType.name],
-				credentialType: this.credentialType.name,
-			};
-
-			this.$store.commit('setCredentialTextRenderKeys', renderKeys);
-		},
-
-		/**
-		 * Add to the translation object the node translation for the credential in the modal.
-		 */
-		async addNodeTranslationForCredential() {
-			const { nodeType }: { nodeType: string } = this.$store.getters.credentialTextRenderKeys;
-			const version = await this.getCurrentNodeVersion(nodeType);
-			const nodeToBeFetched = [{ name: nodeType, version }];
-			const nodesInfo = await this.restApi().getNodesInformation(nodeToBeFetched);
-			const nodeInfo = nodesInfo.pop();
-
-			if (nodeInfo && nodeInfo.translation) {
-				addNodeTranslation(nodeInfo.translation, this.$store.getters.defaultLocale);
-			}
-		},
-
 		/**
 		 * Get the current version for a node type.
 		 */