Type locale.baseText() to i18n keys

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

@@ -91,7 +91,10 @@ export default mixins(showMessage).extend({
 		},
 		title(): string {
 			const user = this.userToDelete && (this.userToDelete.fullName || this.userToDelete.email);
-			return this.$locale.baseText('settings.users.deleteUser', { interpolate: { user }});
+			return this.$locale.baseText(
+				'settings.users.deleteUser',
+				{ interpolate: { user: user || '' }},
+			);
 		},
 		enabled(): boolean {
 			if (this.isPending) {
@@ -138,7 +141,10 @@ export default mixins(showMessage).extend({
 				if (this.transferId) {
 					const getUserById = this.$store.getters['users/getUserById'];
 					const transferUser: IUser = getUserById(this.transferId);
-					message = this.$locale.baseText('settings.users.transferredToUser', { interpolate: { user: transferUser.fullName }});
+					message = this.$locale.baseText(
+						'settings.users.transferredToUser',
+						{ interpolate: { user: transferUser.fullName || '' }},
+					);
 				}
 
 				this.$showMessage({

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

@@ -106,7 +106,10 @@ export default mixins(showMessage).extend({
 		},
 		buttonLabel(): string {
 			if (this.emailsCount > 1) {
-				return this.$locale.baseText('settings.users.inviteXUser', { interpolate: { count: this.emailsCount }});
+				return this.$locale.baseText(
+					'settings.users.inviteXUser',
+					{ interpolate: { count: this.emailsCount.toString() }},
+				);
 			}
 
 			return this.$locale.baseText('settings.users.inviteUser');

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

@@ -125,13 +125,16 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			if (this.nodeType !== null && this.nodeType.hasOwnProperty('eventTriggerDescription')) {
 				const nodeName = this.$locale.shortNodeType(this.nodeType.name);
 				const { eventTriggerDescription } = this.nodeType;
-				return this.$locale.nodeText().eventTriggerDescription(nodeName, eventTriggerDescription);
+				return this.$locale.nodeText().eventTriggerDescription(
+					nodeName,
+					eventTriggerDescription || '',
+				);
 			} else {
 				return this.$locale.baseText(
 					'node.waitingForYouToCreateAnEventIn',
 					{
 						interpolate: {
-							nodeType: this.nodeType && getTriggerNodeServiceName(this.nodeType.displayName),
+							nodeType: this.nodeType ? getTriggerNodeServiceName(this.nodeType.displayName) : '',
 						},
 					},
 				);

packages/editor-ui/src/components/NodeCreator/CategoryItem.vue

@@ -15,6 +15,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import camelcase from 'lodash.camelcase';
+import { CategoryName } from '@/plugins/i18n';
 
 export default Vue.extend({
 	props: ['item'],
@@ -24,8 +25,8 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		renderCategoryName(categoryName: string) {
-			const key = `nodeCreator.categoryNames.${categoryName}`;
+		renderCategoryName(categoryName: CategoryName) {
+			const key = `nodeCreator.categoryNames.${categoryName}` as const;
 
 			return this.$locale.exists(key) ? this.$locale.baseText(key) : categoryName;
 		},
@@ -56,4 +57,4 @@ export default Vue.extend({
 	width: 12px;
 	color: $--node-creator-arrow-color;
 }
-</style>
+</style>

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

@@ -330,7 +330,7 @@ export default mixins(
 								interpolate: {
 									defaultValue: this.defaultValues.saveDataErrorExecution === 'all'
 										? this.$locale.baseText('workflowSettings.saveDataErrorExecutionOptions.save')
-										: this.$locale.baseText('workflowSettings.saveDataErrorExecutionOptions.doNotsave'),
+										: this.$locale.baseText('workflowSettings.saveDataErrorExecutionOptions.doNotSave'),
 								},
 							},
 						),

packages/editor-ui/src/plugins/i18n/index.ts

@@ -14,7 +14,7 @@ import {
 	locale,
 } from 'n8n-design-system';
 
-const englishBaseText = require('./locales/en');
+import englishBaseText from './locales/en.json';
 
 Vue.use(VueI18n);
 locale.use('en');
@@ -62,8 +62,8 @@ export class I18nClass {
 	 * Render a string of base text, i.e. a string with a fixed path to the localized value. Optionally allows for [interpolation](https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting) when the localized value contains a string between curly braces.
 	 */
 	baseText(
-		key: string,
-		options?: { adjustToNumber: number; interpolate: { [key: string]: string } },
+		key: BaseTextKey,
+		options?: { adjustToNumber?: number; interpolate?: { [key: string]: string } },
 	): string {
 		if (options && options.adjustToNumber) {
 			return this.i18n.tc(key, options.adjustToNumber, options && options.interpolate).toString();
@@ -469,3 +469,23 @@ export function addHeaders(
 		Object.assign(i18nInstance.messages[language], { headers }),
 	);
 }
+
+// ----------------------------------
+//             typings
+// ----------------------------------
+
+declare module 'vue/types/vue' {
+	interface Vue {
+		$locale: I18nClass;
+	}
+}
+
+type GetBaseTextKey<T> = T extends `_${string}` ? never :  T;
+
+export type BaseTextKey = GetBaseTextKey<keyof typeof englishBaseText>;
+
+type GetCategoryName<T> = T extends `nodeCreator.categoryNames.${infer C}`
+	? C
+	: never;
+
+export type CategoryName = GetCategoryName<keyof typeof englishBaseText>;

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

@@ -1,4 +1,9 @@
 {
+	"_reusableBaseText.cancel": "Cancel",
+	"_reusableBaseText.name": "Name",
+	"_reusableBaseText.save": "Save",
+	"_reusableDynamicText.oauth2.clientId": "Client ID",
+	"_reusableDynamicText.oauth2.clientSecret": "Client Secret",
 	"about.aboutN8n": "About n8n",
 	"about.close": "Close",
 	"about.license": "License",
@@ -44,10 +49,8 @@
 	"auth.setup.ownerAccountBenefits": "Setting up an owner account allows you to invite others, and prevents people using n8n without an account",
 	"auth.setup.settingUpOwnerError": "Problem setting up owner",
 	"auth.setup.setupConfirmation.concatEntities": "{workflows} and {credentials}",
-	"auth.setup.setupConfirmation.credentialsCount": "{count} credentials",
-	"auth.setup.setupConfirmation.oneCredentialCount": "{count} credential",
-	"auth.setup.setupConfirmation.oneWorkflowCount": "{count} existing workflow",
-	"auth.setup.setupConfirmation.workflowsCount": "{count} existing workflows",
+	"auth.setup.setupConfirmation.credentials": "{count} credential | {count} credentials",
+	"auth.setup.setupConfirmation.existingWorkflows": "{count} existing workflow | {count} existing workflows",
 	"auth.setup.setupOwner": "Set up owner account",
 	"auth.setup.skipOwnerSetupQuestion": "Skip owner account setup?",
 	"auth.setup.skipSetup": "Skip setup",
@@ -573,11 +576,6 @@
 	"pushConnection.showMessage.title": "Workflow executed successfully",
 	"pushConnectionTracker.cannotConnectToServer": "You have a connection issue or the server is down. <br />n8n should reconnect automatically once the issue is resolved.",
 	"pushConnectionTracker.connectionLost": "Connection lost",
-	"reusableBaseText.cancel": "Cancel",
-	"reusableBaseText.name": "Name",
-	"reusableBaseText.save": "Save",
-	"reusableDynamicText.oauth2.clientId": "Client ID",
-	"reusableDynamicText.oauth2.clientSecret": "Client Secret",
 	"runData.binary": "Binary",
 	"runData.copyItemPath": "Copy Item Path",
 	"runData.copyParameterPath": "Copy Parameter Path",

packages/editor-ui/src/views/SettingsUsersView.vue

@@ -83,7 +83,10 @@ export default mixins(showMessage).extend({
 					this.$showToast({
 						type: 'success',
 						title: this.$locale.baseText('settings.users.inviteResent'),
-						message: this.$locale.baseText('settings.users.emailSentTo', { interpolate: { email: user.email } }),
+						message: this.$locale.baseText(
+							'settings.users.emailSentTo',
+							{ interpolate: { email: user.email || '' } },
+						),
 					});
 				} catch (e) {
 					this.$showError(e, this.$locale.baseText('settings.users.userReinviteError'));

packages/editor-ui/src/views/SetupView.vue

@@ -103,8 +103,19 @@ export default mixins(
 				return true;
 			}
 
-			const workflows = this.workflowsCount > 0 ? this.$locale.baseText(this.workflowsCount === 1 ? 'auth.setup.setupConfirmation.oneWorkflowCount' : 'auth.setup.setupConfirmation.workflowsCount', { interpolate: { count: this.workflowsCount } }) : '';
-			const credentials = this.credentialsCount > 0 ? this.$locale.baseText(this.credentialsCount === 1? 'auth.setup.setupConfirmation.oneCredentialCount' : 'auth.setup.setupConfirmation.credentialsCount', { interpolate: { count: this.credentialsCount } }) : '';
+			const workflows = this.workflowsCount > 0
+				? this.$locale.baseText(
+					'auth.setup.setupConfirmation.existingWorkflows',
+					{ adjustToNumber: this.workflowsCount },
+				)
+				: '';
+
+			const credentials = this.credentialsCount > 0
+				? this.$locale.baseText(
+					'auth.setup.setupConfirmation.credentials',
+					{ adjustToNumber: this.credentialsCount },
+				)
+				: '';
 
 			const entities = workflows && credentials ? this.$locale.baseText('auth.setup.setupConfirmation.concatEntities', {interpolate: { workflows, credentials }}) : (workflows || credentials);
 			return await this.confirmMessage(

packages/editor-ui/tsconfig.json

@@ -13,6 +13,7 @@
 		"esModuleInterop": true,
 		"allowSyntheticDefaultImports": true,
 		"useUnknownInCatchVariables": false,
+		"resolveJsonModule": true,
 		"sourceMap": true,
 		"baseUrl": ".",
 		"types": [

packages/editor-ui/tslint.json

@@ -2,7 +2,8 @@
 	"linterOptions": {
 		"exclude": [
 			"node_modules/**/*",
-			"../../node_modules/**/*"
+			"../../node_modules/**/*",
+			"**/*.json"
 		]
 	},
 	"defaultSeverity": "error",