✨ Set up i18n

.gitignore

@@ -10,8 +10,5 @@ yarn.lock
 google-generated-credentials.json
 _START_PACKAGE
 .env
-.vscode/*
-!.vscode/extensions.json
 .idea
-vetur.config.js
 nodelinter.config.json

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "vetur.experimental.templateInterpolationService": true,
+}

packages/cli/config/index.ts

@@ -689,6 +689,13 @@ const config = convict({
 			},
 		},
 	},
+
+	defaultLocale: {
+		doc: 'Default locale for the UI',
+		format: String,
+		default: 'en',
+		env: 'N8N_DEFAULT_LOCALE',
+	},
 });
 
 // Overwrite default configuration with settings which got defined in

packages/cli/src/Interfaces.ts

@@ -394,6 +394,7 @@ export interface IN8nUISettings {
 	instanceId: string;
 	telemetry: ITelemetrySettings;
 	personalizationSurvey: IPersonalizationSurvey;
+	defaultLocale: string;
 }
 
 export interface IPersonalizationSurveyAnswers {

packages/cli/src/Server.ts

@@ -280,6 +280,7 @@ class App {
 			personalizationSurvey: {
 				shouldShow: false,
 			},
+			defaultLocale: config.get('defaultLocale'),
 		};
 	}
 

packages/editor-ui/package.json

@@ -29,7 +29,8 @@
     "n8n-design-system": "~0.6.0",
     "timeago.js": "^4.0.2",
     "v-click-outside": "^3.1.2",
-    "vue-fragment": "^1.5.2"
+    "vue-fragment": "^1.5.2",
+    "vue-i18n": "^8.26.7"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",

packages/editor-ui/src/Interface.ts

@@ -470,6 +470,7 @@ export interface IN8nUISettings {
 	instanceId: string;
 	personalizationSurvey?: IPersonalizationSurvey;
 	telemetry: ITelemetrySettings;
+	defaultLocale: string;
 }
 
 export interface IWorkflowSettings extends IWorkflowSettingsWorkflow {
@@ -583,6 +584,7 @@ export interface IRootState {
 	activeActions: string[];
 	activeNode: string | null;
 	baseUrl: string;
+	defaultLocale: string;
 	endpointWebhook: string;
 	endpointWebhookTest: string;
 	executionId: string | null;

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

@@ -1,18 +1,18 @@
 <template>
 	<span>
-		<el-dialog class="n8n-about" :visible="dialogVisible" append-to-body width="50%" title="About n8n" :before-close="closeDialog">
+		<el-dialog class="n8n-about" :visible="dialogVisible" append-to-body width="50%" :title="$baseText('about.aboutN8n')" :before-close="closeDialog">
 			<div>
 				<el-row>
 					<el-col :span="8" class="info-name">
-						n8n Version:
+						{{ $baseText('about.n8nVersion') }}
 					</el-col>
 					<el-col :span="16">
-						{{versionCli}}
+						{{ versionCli }}
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="8" class="info-name">
-						Source Code:
+						{{ $baseText('about.sourceCode') }}
 					</el-col>
 					<el-col :span="16">
 						<a href="https://github.com/n8n-io/n8n" target="_blank">https://github.com/n8n-io/n8n</a>
@@ -20,15 +20,17 @@
 				</el-row>
 				<el-row>
 					<el-col :span="8" class="info-name">
-						License:
+						{{ $baseText('about.license') }}
 					</el-col>
 					<el-col :span="16">
-						<a href="https://github.com/n8n-io/n8n/blob/master/packages/cli/LICENSE.md" target="_blank">Apache 2.0 with Commons Clause</a>
+						<a href="https://github.com/n8n-io/n8n/blob/master/packages/cli/LICENSE.md" target="_blank">
+							{{ $baseText('about.apacheWithCommons20Clause') }}
+						</a>
 					</el-col>
 				</el-row>
 
 				<div class="action-buttons">
-					<n8n-button @click="closeDialog" label="Close" />
+					<n8n-button @click="closeDialog" :label="$baseText('about.close')" />
 				</div>
 			</div>
 		</el-dialog>

packages/editor-ui/src/components/mixins/genericHelpers.ts

@@ -1,9 +1,10 @@
 import { showMessage } from '@/components/mixins/showMessage';
+import { translate } from '@/components/mixins/translate';
 import { debounce } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
 
-export const genericHelpers = mixins(showMessage).extend({
+export const genericHelpers = mixins(showMessage, translate).extend({
 	data () {
 		return {
 			loadingService: null as any | null, // tslint:disable-line:no-any

packages/editor-ui/src/components/mixins/translate.ts

@@ -0,0 +1,203 @@
+// import { TranslationPath } from '@/Interface';
+import Vue from 'vue';
+
+/**
+ * Mixin to translate:
+ * - base strings, i.e. any string that is not node- or credentials-specific,
+ * - specific strings,
+ * 	- node-specific strings, i.e. those in `NodeView.vue`,
+ * 	- credentials-specific strings, i.e. those in `EditCredentials.vue`.
+ */
+export const translate = Vue.extend({
+	computed: {
+		/**
+		 * Node type for the active node in `NodeView.vue`.
+		 */
+		activeNodeType (): string {
+			return this.$store.getters.activeNode.type;
+		},
+	},
+
+	methods: {
+		// -----------------------------------------
+		//               main methods
+		// -----------------------------------------
+
+		/**
+		 * Translate a base string. Called directly in Vue templates.
+		 * Optionally, [interpolate a variable](https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting).
+		 */
+		$baseText(
+			key: string,
+			options?: { interpolate?: { [key: string]: string } },
+		): string {
+			const translatedBaseString = options && options.interpolate
+				? this.$t(key, options.interpolate)
+				: this.$t(key);
+
+			return translatedBaseString.toString();
+		},
+
+		/**
+		 * Translate a node- or credentials-specific string.
+		 * Called in-mixin by node- or credentials-specific methods,
+		 * which are called directly in Vue templates.
+		 */
+		translateSpecific(
+			{ key, fallback }: { key: string, fallback: string },
+		): string {
+			return this.$te(key) ? this.$t(key).toString() : fallback;
+		},
+
+		// -----------------------------------------
+		//           node-specific methods
+		// -----------------------------------------
+
+		/**
+		 * Translate a top-level node parameter name, i.e. leftmost parameter in `NodeView.vue`.
+		 */
+		$translateNodeParameterName(
+			{ name: parameterName, displayName }: { name: string; displayName: string; },
+		) {
+			return this.translateSpecific({
+				key: `${this.activeNodeType}.parameters.${parameterName}.displayName`,
+				fallback: displayName,
+			});
+		},
+
+		/**
+		 * Translate a top-level parameter description for a node or for credentials.
+		 */
+		 $translateDescription(
+			{ name: parameterName, description }: { name: string; description: string; },
+		) {
+			return this.translateSpecific({
+				key: `${this.activeNodeType}.parameters.${parameterName}.description`,
+				fallback: description,
+			});
+		},
+
+		/**
+		 * Translate the name for an option in a `collection` or `fixed collection` parameter,
+		 * e.g. an option name in an "Additional Options" fixed collection.
+		 */
+		$translateCollectionOptionName(
+			{ name: parameterName }: { name: string; },
+			{ name: optionName, displayName }: { name: string; displayName: string; },
+		) {
+			return this.translateSpecific({
+				key: `${this.activeNodeType}.parameters.${parameterName}.options.${optionName}.displayName`,
+				fallback: displayName,
+			});
+		},
+
+		/**
+		 * Translate the label for a button that adds another field-input pair to a collection.
+		 */
+		$translateMultipleValueButtonText(
+			{ name: parameterName, typeOptions: { multipleValueButtonText } }:
+			{ name: string, typeOptions: { multipleValueButtonText: string } },
+		) {
+			return this.translateSpecific({
+				key: `${this.activeNodeType}.parameters.${parameterName}.multipleValueButtonText`,
+				fallback: multipleValueButtonText,
+			});
+		},
+
+		// -----------------------------------------
+		//          creds-specific methods
+		// -----------------------------------------
+
+		/**
+		 * Translate a credentials property name, i.e. leftmost parameter in `CredentialsEdit.vue`.
+		 */
+		 $translateCredentialsPropertyName(
+			{ name: parameterName, displayName }: { name: string; displayName: string; },
+			{ nodeType, credentialsName }: { nodeType: string, credentialsName: string; },
+		) {
+			if (['clientId', 'clientSecret'].includes(parameterName)) {
+				return this.$t(`oauth2.${parameterName}`);
+			}
+
+			return this.translateSpecific({
+				key: `${nodeType}.credentials.${credentialsName}.${parameterName}.displayName`,
+				fallback: displayName,
+			});
+		},
+
+		/**
+		 * Translate a credentials property description, i.e. label tooltip in `CredentialsEdit.vue`.
+		 */
+		$translateCredentialsPropertyDescription(
+			{ name: parameterName, description }: { name: string; description: string; },
+			{ nodeType, credentialsName }: { nodeType: string, credentialsName: string; },
+		) {
+			return this.translateSpecific({
+				key: `${nodeType}.credentials.${credentialsName}.${parameterName}.description`,
+				fallback: description,
+			});
+		},
+
+		// -----------------------------------------
+		//     node- and creds-specific methods
+		// -----------------------------------------
+
+		/**
+		 * Translate the placeholder inside the input field for a string-type parameter.
+		 */
+		$translatePlaceholder(
+			{ name: parameterName, placeholder }: { name: string; placeholder: string; },
+			isCredential = false,
+			{ nodeType, credentialsName } = { nodeType: '', credentialsName: '' },
+		) {
+			const key = isCredential
+				? `${nodeType}.credentials.${credentialsName}.placeholder`
+				: `${this.activeNodeType}.parameters.${parameterName}.placeholder`;
+
+			return this.translateSpecific({
+				key,
+				fallback: placeholder,
+			});
+		},
+
+		/**
+		 * Translate the name for an option in an `options` parameter,
+		 * e.g. an option name in a "Resource" or "Operation" dropdown menu.
+		 */
+		$translateOptionsOptionName(
+			{ name: parameterName }: { name: string },
+			{ value: optionName, name: displayName }: { value: string; name: string; },
+			isCredential = false,
+			{ nodeType, credentialsName } = { nodeType: '', credentialsName: '' },
+		) {
+			const key = isCredential
+				? `${nodeType}.credentials.${credentialsName}.options.${optionName}.displayName`
+				: `${this.activeNodeType}.parameters.${parameterName}.options.${optionName}.displayName`;
+
+			return this.translateSpecific({
+				key,
+				fallback: displayName,
+			});
+		},
+
+		/**
+		 * Translate the description for an option in an `options` parameter,
+		 * e.g. an option name in a "Resource" or "Operation" dropdown menu.
+		 */
+		$translateOptionsOptionDescription(
+			{ name: parameterName }: { name: string },
+			{ value: optionName, description }: { value: string; description: string; },
+			isCredential = false,
+			{ nodeType, credentialsName } = { nodeType: '', credentialsName: '' },
+		) {
+			const key = isCredential
+				? `${nodeType}.credentials.${credentialsName}.options.${optionName}.description`
+				: `${this.activeNodeType}.parameters.${parameterName}.options.${optionName}.description`;
+
+			return this.translateSpecific({
+				key,
+				fallback: description,
+			});
+		},
+	},
+});

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

@@ -0,0 +1,56 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import englishBaseText from './locales/en';
+import axios from 'axios';
+
+Vue.use(VueI18n);
+
+console.log('About to initialize i18n');
+
+export const i18n = new VueI18n({
+	locale: 'en',
+	fallbackLocale: 'en',
+	messages: englishBaseText,
+	silentTranslationWarn: true,
+});
+
+const loadedLanguages = ['en'];
+
+function setLanguage(language: string): string {
+	i18n.locale = language;
+	axios.defaults.headers.common['Accept-Language'] = language;
+	document!.querySelector('html')!.setAttribute('lang', language);
+	return language;
+}
+
+export async function loadLanguage(language?: string) {
+	console.log(`loadLanguage called with ${language}`);
+
+	if (!language) return Promise.resolve();
+
+	if (i18n.locale === language) {
+		return Promise.resolve(setLanguage(language));
+	}
+
+	if (loadedLanguages.includes(language)) {
+		return Promise.resolve(setLanguage(language));
+	}
+
+	const { default: { [language]: messages }} = require(`./locales/${language}`);
+	i18n.setLocaleMessage(language, messages);
+	loadedLanguages.push(language);
+
+	return setLanguage(language);
+}
+
+export function addNodeTranslations(translations: { [key: string]: string | object }) {
+	const lang = Object.keys(translations)[0];
+	const messages = translations[lang];
+	const newNodesBase = {
+		'n8n-nodes-base': Object.assign(
+			i18n.messages[lang]['n8n-nodes-base'],
+			messages,
+		),
+	};
+	i18n.setLocaleMessage(lang, Object.assign(i18n.messages[lang], newNodesBase));
+}

packages/editor-ui/src/i18n/locales/de.ts

@@ -0,0 +1,787 @@
+export default {
+	de: {
+		about: {
+			aboutN8n: 'Deutsch',
+			apacheWithCommons20Clause: 'Deutsch',
+			close: 'Deutsch',
+			license: 'Deutsch',
+			n8nVersion: 'Deutsch',
+			sourceCode: 'Deutsch',
+		},
+		binaryDataDisplay: {
+			backToList: 'Deutsch',
+			dataToDisplayDidNotGetFound: 'Deutsch',
+		},
+		collectionParameter: {
+			chooseOptionToAdd: 'Deutsch',
+			currentlyNoPropertiesExist: 'Deutsch',
+		},
+		credentialsEdit: {
+			createNewCredentials: 'Deutsch',
+			credentialType: 'Deutsch',
+			needHelp: 'Deutsch',
+			nodeDocumentation: 'Deutsch',
+			openCredentialDocs: 'Deutsch',
+			showError: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+			showMessage: {
+				credentialsCreated: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				credentialsUpdated: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				credentialTypeNull1: {
+					message: 'Deutsch {credentialName} Deutsch?',
+					title: 'Deutsch',
+				},
+				credentialTypeNull2: {
+					message: 'Deutsch {credentialName} Deutsch?',
+					title: 'Deutsch',
+				},
+				currentCredentialsUndefined1: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				currentCredentialsUndefined2: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				editCredentialsIdUndefined: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+			title: 'Deutsch',
+		},
+		credentialsInput: {
+			access: 'Deutsch',
+			addAtLeastOneNodeWhichHasAccessToTheCredentials: 'Deutsch',
+			connected: 'Deutsch',
+			create: 'Deutsch',
+			credentialData: 'Deutsch',
+			credentialsName: 'Deutsch',
+			enterAllRequiredProperties: 'Deutsch',
+			important: 'Deutsch',
+			noAccess: 'Deutsch',
+			nodesWithAccess: 'Deutsch',
+			notConnected: 'Deutsch',
+			oAuth2CallbackUrl: 'Deutsch',
+			save: 'Deutsch',
+			showError: {
+				createCredentials: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				oAuthCredentialAuthorize: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				updateCredentials: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+			showMessage: {
+				copyCallbackUrl: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				receiveMessage: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+		},
+		credentialsList: {
+			addNew: 'Deutsch',
+			confirmMessage: {
+				cancelButtonText: 'Deutsch',
+				confirmButtonText: 'Deutsch',
+				headline: 'Deutsch',
+				message: 'Deutsch',
+			},
+			createNewCredentials: 'Deutsch',
+			credentials: 'Deutsch',
+			editCredentials: 'Deutsch',
+			deleteCredentials: 'Deutsch',
+			showError: {
+				deleteCredential: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				loadCredentials: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+			showMessage: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+			tableLabels: {
+				name: 'Deutsch',
+				type: 'Deutsch',
+				created: 'Deutsch',
+				updated: 'Deutsch',
+				operations: 'Deutsch',
+			},
+			yourSavedCredentials: 'Deutsch',
+		},
+		dataDisplay: {
+			needHelp: 'Deutsch',
+			nodeDocumentation: 'Deutsch',
+			openDocumentationFor: 'Deutsch',
+		},
+		duplicateWorkflowDialog: {
+			cancel: 'Deutsch',
+			chooseOrCreateATag: 'Deutsch',
+			duplicateWorkflow: 'Deutsch',
+			enterWorkflowName: 'Deutsch',
+			save: 'Deutsch',
+			showMessage: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+		},
+		executionsList: {
+			allWorkflows: 'Deutsch',
+			anyStatus: 'Deutsch',
+			autoRefresh: 'Deutsch',
+			checkAll: 'Deutsch',
+			confirmMessage: {
+				cancelButtonText: 'Deutsch',
+				confirmButtonText: 'Deutsch',
+				headline: 'Deutsch',
+				message: 'Deutsch',
+			},
+			error: 'Deutsch',
+			filters: 'Deutsch',
+			loadMore: 'Deutsch',
+			mode: 'Deutsch',
+			name: 'Deutsch',
+			openPastExecution: 'Deutsch',
+			retryExecution: 'Deutsch',
+			retryOf: 'Deutsch',
+			retryWithCurrentlySavedWorkflow: 'Deutsch',
+			retryWithOriginalworkflow: 'Deutsch',
+			running: 'Deutsch',
+			runningParens: 'Deutsch',
+			runningTime: 'Deutsch',
+			selected: 'Deutsch',
+			showError: {
+				handleDeleteSelected: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				loadMore: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				loadWorkflows: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				refreshData: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				retryExecution: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				stopExecution: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+			showMessage: {
+				handleDeleteSelected: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				retrySuccessfulFalse: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				retrySuccessfulTrue: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				stopExecution: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+			startedAtId: 'Deutsch',
+			status: 'Deutsch',
+			statusTooltipText: {
+				theWorkflowExecutionFailed: 'Deutsch',
+				theWorkflowExecutionFailedButTheRetryWasSuccessful: 'Deutsch',
+				theWorkflowExecutionIsProbablyStillRunning: 'Deutsch',
+				theWorkflowExecutionWasARetryOfAndFailed: 'Deutsch',
+				theWorkflowExecutionWasARetryOfAndItWasSuccessful: 'Deutsch',
+				theWorkflowExecutionWasSuccessful: 'Deutsch',
+				theWorkflowIsCurrentlyExecuting: 'Deutsch',
+			},
+			success: 'Deutsch',
+			successRetry: 'Deutsch',
+			unknown: 'Deutsch',
+			workflowExecutions: 'Deutsch',
+		},
+		expressionEdit: {
+			editExpression: 'Deutsch',
+			expression: 'Deutsch',
+			result: 'Deutsch',
+			variableSelector: 'Deutsch',
+		},
+		fixedCollectionParameter: {
+			chooseOptionToAdd: 'Deutsch ooo',
+			currentlyNoItemsExist: 'Deutsch',
+		},
+		genericHelpers: {
+			showMessage: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+		},
+		mainSideBar: {
+			aboutN8n: 'Deutsch',
+			confirmMessage: {
+				cancelButtonText: 'Deutsch',
+				confirmButtonText: 'Deutsch',
+				headline: 'Deutsch',
+				message: 'Deutsch',
+			},
+			credentials: 'Deutsch',
+			delete: 'Deutsch',
+			download: 'Deutsch',
+			duplicate: 'Deutsch',
+			executions: 'Deutsch',
+			help: 'Deutsch',
+			helpMenuItems: {
+				documentation: 'Deutsch',
+				forum: 'Deutsch',
+				workflows: 'Deutsch',
+			},
+			importFromFile: 'Deutsch',
+			importFromUrl: 'Deutsch',
+			new: 'Deutsch',
+			open: 'Deutsch',
+			prompt: {
+				cancel: 'Deutsch',
+				import: 'Deutsch',
+				importWorkflowFromUrl: 'Deutsch',
+				invalidUrl: 'Deutsch',
+				workflowUrl: 'Deutsch',
+			},
+			save: 'Deutsch',
+			settings: 'Deutsch',
+			showError: {
+				handleSelect: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				stopExecution: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+			showMessage: {
+				handleFileImport: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				handleSelect1: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				handleSelect2: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				handleSelect3: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				stopExecution: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+			workflow: 'Deutsch',
+			workflows: 'Deutsch',
+		},
+		multipleParameter: {
+			currentlyNoItemsExist: 'Deutsch',
+		},
+		nodeCredentials: {
+			credentials: 'Deutsch',
+			showMessage: {
+				message: 'Deutsch'
+				,
+				title: 'Deutsch',
+			},
+		},
+		nodeErrorView: {
+			cause: 'Deutsch',
+			dataBelowMayContain: 'Deutsch',
+			details: 'Deutsch',
+			error: 'Deutsch',
+			httpCode: 'Deutsch',
+			showMessage: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+			stack: 'Deutsch',
+			time: 'Deutsch',
+		},
+		nodeSettings: {
+			settings: {
+				alwaysOutputData: {
+					description: 'Deutsch',
+					displayName: 'Deutsch',
+				},
+				color: {
+					description: 'Deutsch',
+					displayName: 'Deutsch',
+				},
+				continueOnFail: {
+					description: 'Deutsch',
+					displayName: 'Deutsch',
+				},
+				executeOnce: {
+					description: 'Deutsch',
+					displayName: 'Deutsch',
+				},
+				maxTries: {
+					description: 'Deutsch',
+					displayName: 'Deutsch',
+				},
+				notes: {
+					description: 'Deutsch',
+					displayName: 'Deutsch',
+				},
+				notesInFlow: {
+					description: 'Deutsch',
+					displayName: 'Deutsch',
+				},
+				retryOnFail: {
+					description: 'Deutsch',
+					displayName: 'Deutsch',
+				},
+				waitBetweenTries: {
+					description: 'Deutsch',
+					displayName: 'Deutsch',
+				},
+			},
+			theNodeIsNotValidAsItsTypeIsUnknown: 'Deutsch',
+			thisNodeDoesNotHaveAnyParameters: 'Deutsch',
+		},
+		nodeView: {
+			confirmMessage: {
+				beforeRouteLeave: {
+					cancelButtonText: 'Deutsch',
+					confirmButtonText: 'Deutsch',
+					headline: 'Deutsch',
+					message: 'Deutsch',
+				},
+				initView: {
+					cancelButtonText: 'Deutsch',
+					confirmButtonText: 'Deutsch',
+					headline: 'Deutsch',
+					message: 'Deutsch',
+				},
+				receivedCopyPasteData: {
+					cancelButtonText: 'Deutsch',
+					confirmButtonText: 'Deutsch',
+					headline: 'Deutsch',
+					message: 'Deutsch',
+				},
+			},
+			executesTheWorkflowFromTheStartOrWebhookNode: 'Deutsch',
+			prompt: {
+				cancel: 'Deutsch',
+				invalidName: 'Deutsch',
+				newName: 'Deutsch',
+				rename: 'Deutsch',
+				renameNode: 'Deutsch',
+			},
+			runButtonText: {
+				executeWorkflow: 'Deutsch',
+				executingWorkflow: 'Deutsch',
+				waitingForWebhookCall: 'Deutsch',
+			},
+			showError: {
+				getWorkflowDataFromUrl: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				importWorkflowData: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				mounted1: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				mounted2: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				openExecution: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				openWorkflow: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				stopExecution: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				stopWaitingForWebhook: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+			showMessage: {
+				addNodeButton: {
+					message: 'Deutsch'
+					,
+					title: 'Deutsch',
+				},
+				keyDown: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				showMaxNodeTypeError: {
+					message: {
+						singular: 'Deutsch',
+						plural: 'Deutsch',
+					},
+					title: 'Deutsch',
+				},
+				stopExecutionCatch: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				stopExecutionTry: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				stopWaitingForWebhook: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+			stopCurrentExecution: 'Deutsch',
+			stoppingCurrentExecution: 'Deutsch',
+		},
+		nodeWebhooks: {
+			displayUrlFor: 'Deutsch',
+			showMessage: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+			webhookUrls: 'Deutsch',
+		},
+		noTagsView: {
+			createATag: 'Deutsch',
+			readyToOrganizeYourWorkflows: 'Deutsch',
+			withWorkflowTagsYouReFree: 'Deutsch',
+		},
+		oauth2: {
+			clientId: 'Deutsch',
+			clientSecret: 'Deutsch',
+		},
+		parameterInput: {
+			addExpression: 'Deutsch',
+			removeExpression: 'Deutsch',
+			resetValue: 'Deutsch',
+			selectDateAndTime: 'Deutsch',
+		},
+		pushConnection: {
+			showMessage: {
+				runDataExecutedFinishedFalse: {
+					message: {
+						errorMessage1: 'Deutsch',
+						errorMessage2: 'Deutsch',
+					},
+					title: 'Deutsch',
+				},
+				runDataExecutedFinishedTrue: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+		},
+		pushConnectionTracker: {
+			cannotConnectToServer: 'Deutsch',
+			connectionLost: 'Deutsch',
+		},
+		runData: {
+			copyItemPath: 'Deutsch',
+			copyParameterPath: 'Deutsch',
+			copyValue: 'Deutsch',
+			dataOfExecution: 'Deutsch',
+			dataReturnedByTheNodeWillDisplayHere: 'Deutsch',
+			displayDataAnyway: 'Deutsch',
+			entriesExistButThey: 'Deutsch',
+			executeNode: 'Deutsch',
+			executionTime: 'Deutsch',
+			fileExtension: 'Deutsch',
+			fileName: 'Deutsch',
+			items: 'Deutsch',
+			mimeType: 'Deutsch',
+			ms: 'Deutsch',
+			noBinaryDataFound: 'Deutsch',
+			noData: 'Deutsch',
+			nodeReturnedALargeAmountOfData: 'Deutsch',
+			noTextDataFound: 'Deutsch',
+			output: 'Deutsch',
+			showBinaryData: 'Deutsch',
+			startTime: 'Deutsch',
+			theNodeContains: 'Deutsch',
+		},
+		saveWorkflowButton: {
+			save: 'Deutsch',
+			saved: 'Deutsch',
+		},
+		tagsDropdown: {
+			manageTags: 'Deutsch',
+			noMatchingTagsExist: 'Deutsch',
+			noTagsExist: 'Deutsch',
+			showError: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+			typeToCreateATag: 'Deutsch',
+		},
+		tagsManager: {
+			couldNotDeleteTag: 'Deutsch',
+			done: 'Deutsch',
+			manageTags: 'Deutsch',
+			showError: {
+				onCreate: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				onDelete: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				onUpdate: {
+					message: 'Deutsch'
+					,
+					title: 'Deutsch',
+				},
+			},
+			showMessage: {
+				onDelete: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				onUpdate: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+		},
+		tagsTable: {
+			areYouSureYouWantToDeleteThisTag: 'Deutsch',
+			cancel: 'Deutsch',
+			createTag: 'Deutsch',
+			deleteTag: 'Deutsch',
+			editTag: 'Deutsch',
+			name: 'Deutsch',
+			saveChanges: 'Deutsch',
+			usage: 'Deutsch',
+		},
+		tagsTableHeader: {
+			addNew: 'Deutsch',
+			searchTags: 'Deutsch',
+		},
+		tagsView: {
+			inUse: {
+				singular: 'Deutsch',
+				plural: 'Deutsch',
+			},
+			notBeingUsed: 'Deutsch',
+		},
+		variableSelectorItem: {
+			empty: 'Deutsch',
+			selectItem: 'Deutsch',
+		},
+		workflowActivator: {
+			activateWorkflow: 'Deutsch',
+			confirmMessage: {
+				cancelButtonText: 'Deutsch',
+				confirmButtonText: 'Deutsch',
+				headline: 'Deutsch',
+				message: 'Deutsch',
+			},
+			deactivateWorkflow: 'Deutsch',
+			showError: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+			showMessage: {
+				activeChangedNodesIssuesExistTrue: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				activeChangedWorkflowIdUndefined: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				displayActivationError: {
+					message: {
+						catchBlock: 'Deutsch',
+						errorDataNotUndefined: 'Deutsch',
+						errorDataUndefined: 'Deutsch',
+					},
+					title: 'Deutsch',
+				},
+			},
+			theWorkflowIsSetToBeActiveBut: 'Deutsch',
+		},
+		workflowDetails: {
+			active: 'Deutsch',
+			addTag: 'Deutsch',
+			showMessage: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+		},
+		workflowHelpers: {
+			showMessage: {
+				saveAsNewWorkflow: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				saveCurrentWorkflow: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+		},
+		workflowOpen: {
+			active: 'Deutsch',
+			confirmMessage: {
+				cancelButtonText: 'Deutsch',
+				confirmButtonText: 'Deutsch',
+				headline: 'Deutsch',
+				message: 'Deutsch',
+			},
+			created: 'Deutsch',
+			filterByTags: 'Deutsch',
+			name: 'Deutsch',
+			openWorkflow: 'Deutsch',
+			searchWorkflows: 'Deutsch',
+			showError: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+			showMessage: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+			updated: 'Deutsch',
+		},
+		workflowRun: {
+			showError: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+			showMessage: {
+				message: 'Deutsch',
+				title: 'Deutsch',
+			},
+		},
+		workflowSettings: {
+			editExpression: 'Deutsch',
+			errorWorkflow: 'Deutsch',
+			helpTexts: {
+				errorWorkflow: 'Deutsch',
+				executionTimeout: 'Deutsch',
+				executionTimeoutToggle: 'Deutsch',
+				saveDataErrorExecution: 'Deutsch',
+				saveDataSuccessExecution: 'Deutsch',
+				saveExecutionProgress: 'Deutsch',
+				saveManualExecutions: 'Deutsch',
+				timezone: 'Deutsch',
+			},
+			hours: 'Deutsch',
+			minutes: 'Deutsch',
+			noWorkflow: 'Deutsch',
+			save: 'Deutsch',
+			saveDataErrorExecution: 'Deutsch',
+			saveDataErrorExecutionOptions: {
+				defaultSave: 'Deutsch',
+				doNotSave: 'Deutsch',
+				save: 'Deutsch',
+			},
+			saveDataSuccessExecution: 'Deutsch',
+			saveDataSuccessExecutionOptions: {
+				defaultSave: 'Deutsch',
+				doNotSave: 'Deutsch',
+				save: 'Deutsch',
+			},
+			saveExecutionProgress: 'Deutsch',
+			saveExecutionProgressOptions: {
+				defaultSave: 'Deutsch',
+				no: 'Deutsch',
+				yes: 'Deutsch',
+			},
+			saveManualExecutions: 'Deutsch',
+			saveManualOptions: {
+				defaultSave: 'Deutsch',
+				no: 'Deutsch',
+				yes: 'Deutsch',
+			},
+			seconds: 'Deutsch',
+			showError: {
+				openDialog: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				saveSettings1: {
+					errorMessage: 'Deutsch',
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				saveSettings2: {
+					errorMessage: 'Deutsch',
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				saveSettings3: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+			showMessage: {
+				openDialog: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+				saveSettings: {
+					message: 'Deutsch',
+					title: 'Deutsch',
+				},
+			},
+			timeoutAfter: 'Deutsch',
+			timeoutWorkflow: 'Deutsch',
+			timezone: 'Deutsch',
+			workflowSettings: 'Deutsch',
+		},
+
+		'n8n-nodes-base': {}, // required for node translation
+	},
+};

packages/editor-ui/src/i18n/locales/en.ts

@@ -0,0 +1,784 @@
+export default {
+	en: {
+		about: {
+			aboutN8n: 'About n8n',
+			apacheWithCommons20Clause: 'Apache 2.0 with Commons Clause',
+			close: 'Close',
+			license: 'License',
+			n8nVersion: 'n8n Version',
+			sourceCode: 'Source Code',
+		},
+		binaryDataDisplay: {
+			backToList: 'Back to list',
+			dataToDisplayDidNotGetFound: 'Data to display did not get found',
+		},
+		collectionParameter: {
+			chooseOptionToAdd: 'Choose Option To Add',
+			currentlyNoPropertiesExist: 'Currently no properties exist',
+		},
+		credentialsEdit: {
+			createNewCredentials: 'Create New Credentials',
+			credentialType: 'Credential type',
+			needHelp: 'Need help?',
+			nodeDocumentation: 'Node Documentation',
+			openCredentialDocs: 'Open credential docs',
+			showError: {
+				message: 'There was a problem loading the credentials',
+				title: 'Problem loading credentials',
+			},
+			showMessage: {
+				credentialsCreated: {
+					message: 'credentials were successfully created!',
+					title: 'Credentials created',
+				},
+				credentialsUpdated: {
+					message: 'credentials were successfully updated!',
+					title: 'Credentials updated',
+				},
+				credentialTypeNull1: {
+					message: 'Credentials of type {credentialsType} are not known.',
+					title: 'Credential type not known',
+				},
+				credentialTypeNull2: {
+					message: 'Credentials of type {credentialsType} are not known.',
+					title: 'Credential type not known',
+				},
+				currentCredentialsUndefined1: {
+					message: 'Could not find the credentials with the id',
+					title: 'Credentials not found',
+				},
+				currentCredentialsUndefined2: {
+					message: 'No credentials could be loaded!',
+					title: 'Problem loading credentials',
+				},
+				editCredentialsIdUndefined: {
+					message: 'The ID of the credentials which should be edited is missing!',
+					title: 'Credential ID missing',
+				},
+			},
+			title: 'Edit Credentials',
+		},
+		credentialsInput: {
+			access: 'Access',
+			addAtLeastOneNodeWhichHasAccessToTheCredentials: 'Add at least one node which has access to the credentials!',
+			connected: 'Connected',
+			create: 'Create',
+			credentialData: 'Credential Data',
+			credentialsName: 'Credentials Name',
+			enterAllRequiredProperties: 'Enter all required properties',
+			important: 'Important',
+			noAccess: 'No Access',
+			nodesWithAccess: 'Nodes with access',
+			notConnected: 'Not connected',
+			oAuth2CallbackUrl: 'OAuth Callback URL',
+			save: 'Save',
+			showError: {
+				createCredentials: {
+					message: 'There was a problem creating the credentials',
+					title: 'Problem Creating Credentials',
+				},
+				oAuthCredentialAuthorize: {
+					message: 'Error generating authorization URL',
+					title: 'OAuth Authorization Error',
+				},
+				updateCredentials: {
+					message: 'There was a problem updating the credentials',
+					title: 'Problem Updating Credentials',
+				},
+			},
+			showMessage: {
+				copyCallbackUrl: {
+					message: 'Callback URL was successfully copied!',
+					title: 'Copied',
+				},
+				receiveMessage: {
+					message: 'Connected successfully!',
+					title: 'Connected',
+				},
+			},
+		},
+		credentialsList: {
+			addNew: 'Add New',
+			confirmMessage: {
+				cancelButtonText: '',
+				confirmButtonText: 'Yes, delete!',
+				headline: 'Delete Credentials?',
+				message: 'Are you sure you want to delete {credentialName} credentials?',
+			},
+			createNewCredentials: 'Create New Credentials',
+			credentials: 'Credentials',
+			editCredentials: 'Edit Credentials',
+			deleteCredentials: 'Delete Credentials',
+			showError: {
+				deleteCredential: {
+					message: 'There was a problem deleting the credentials',
+					title: 'Problem deleting credentials',
+				},
+				loadCredentials: {
+					message: 'There was a problem loading the credentials',
+					title: 'Problem loading credentials',
+				},
+			},
+			showMessage: {
+				message: 'The credential {credentialsName} got deleted!',
+				title: 'Credentials deleted',
+			},
+			tableLabels: {
+				name: 'Name',
+				type: 'Type',
+				created: 'Created',
+				updated: 'Updated',
+				operations: 'Operations',
+			},
+			yourSavedCredentials: 'Your saved credentials',
+		},
+		dataDisplay: {
+			needHelp: 'Need help?',
+			nodeDocumentation: 'Node Documentation',
+			openDocumentationFor: 'Open {nodeTypeDisplayName} documentation',
+		},
+		duplicateWorkflowDialog: {
+			cancel: 'Cancel',
+			chooseOrCreateATag: 'Choose or create a tag',
+			duplicateWorkflow: 'Duplicate Workflow',
+			enterWorkflowName: 'Enter workflow name',
+			save: 'Save',
+			showMessage: {
+				message: 'Please enter a name.',
+				title: 'Name missing',
+			},
+		},
+		executionsList: {
+			allWorkflows: 'All Workflows',
+			anyStatus: 'Any Status',
+			autoRefresh: 'Auto refresh',
+			checkAll: 'Check all',
+			confirmMessage: {
+				cancelButtonText: '',
+				confirmButtonText: 'Yes, delete!',
+				headline: 'Delete Executions?',
+				message: 'Are you sure that you want to delete the {numSelected} selected executions?',
+			},
+			error: 'Error',
+			filters: 'Filters',
+			loadMore: 'Load More',
+			mode: 'Mode',
+			name: 'Name',
+			openPastExecution: 'Open Past Execution',
+			retryExecution: 'Retry execution',
+			retryOf: 'Retry of',
+			retryWithCurrentlySavedWorkflow: 'Retry with currently saved workflow',
+			retryWithOriginalworkflow: 'Retry with original workflow',
+			running: 'Running',
+			runningParens: 'running',
+			runningTime: 'Running Time',
+			selected: 'Selected',
+			showError: {
+				handleDeleteSelected: {
+					message: 'There was a problem deleting the executions',
+					title: 'Problem deleting executions',
+				},
+				loadMore: {
+					message: 'There was a problem loading the workflows',
+					title: 'Problem loading workflows',
+				},
+				loadWorkflows: {
+					message: 'There was a problem loading the workflows',
+					title: 'Problem loading workflows',
+				},
+				refreshData: {
+					message: 'There was a problem loading the data',
+					title: 'Problem loading',
+				},
+				retryExecution: {
+					message: 'There was a problem with the retry',
+					title: 'Problem with retry',
+				},
+				stopExecution: {
+					message: 'There was a problem stopping the execuction',
+					title: 'Problem stopping execution',
+				},
+			},
+			showMessage: {
+				handleDeleteSelected: {
+					message: 'The executions got deleted!',
+					title: 'Execution deleted',
+				},
+				retrySuccessfulFalse: {
+					message: 'The retry was not successful!',
+					title: 'Retry unsuccessful',
+				},
+				retrySuccessfulTrue: {
+					message: 'The retry was successful!',
+					title: 'Retry successful',
+				},
+				stopExecution: {
+					message: 'The execution with the id {activeExecutionId} got stopped!',
+					title: 'Execution stopped',
+				},
+			},
+			startedAtId: 'Started At / ID',
+			status: 'Status',
+			statusTooltipText: {
+				theWorkflowExecutionFailed: 'The workflow execution failed.',
+				theWorkflowExecutionFailedButTheRetryWasSuccessful: 'The workflow execution failed but the retry {entryRetrySuccessId} was successful.',
+				theWorkflowExecutionIsProbablyStillRunning: 'The workflow execution is probably still running but it may have crashed and n8n cannot safely tell. ',
+				theWorkflowExecutionWasARetryOfAndFailed: 'The workflow execution was a retry of {entryRetryOf} and failed.<br />New retries have to be,started from the original execution.',
+				theWorkflowExecutionWasARetryOfAndItWasSuccessful: 'The workflow execution was a retry of {entryRetryOf} and it was successful.',
+				theWorkflowExecutionWasSuccessful: 'The worklow execution was successful.',
+				theWorkflowIsCurrentlyExecuting: 'The worklow is currently executing.',
+			},
+			success: 'Success',
+			successRetry: 'Success retry',
+			unknown: 'Unknown',
+			workflowExecutions: 'Workflow Executions',
+		},
+		expressionEdit: {
+			editExpression: 'Edit Expression',
+			expression: 'Expression',
+			result: 'Result',
+			variableSelector: 'Variable Selector',
+		},
+		fixedCollectionParameter: {
+			chooseOptionToAdd: 'Choose Option To Add',
+			currentlyNoItemsExist: 'Currently no items exist',
+		},
+		genericHelpers: {
+			showMessage: {
+				message: 'The workflow can not be edited as a past execution gets displayed. To make changed either open the original workflow of which the execution gets displayed or save it under a new name first.',
+				title: 'Workflow can not be changed!',
+			},
+		},
+		mainSideBar: {
+			aboutN8n: 'About n8n',
+			confirmMessage: {
+				cancelButtonText: '',
+				confirmButtonText: 'Yes, delete!',
+				headline: 'Delete Workflow?',
+				message: 'Are you sure that you want to delete the workflow {workflowName}?',
+			},
+			credentials: 'Credentials',
+			delete: 'Delete',
+			download: 'Download',
+			duplicate: 'Duplicate',
+			executions: 'Executions',
+			help: 'Help',
+			helpMenuItems: {
+				documentation: 'Documentation',
+				forum: 'Forum',
+				workflows: 'workflows',
+			},
+			importFromFile: 'Import from File',
+			importFromUrl: 'Import from URL',
+			new: 'New',
+			open: 'Open',
+			prompt: {
+				cancel: 'Cancel',
+				import: 'Import',
+				importWorkflowFromUrl: 'Import Workflow from URL',
+				invalidUrl: 'Invalid URL',
+				workflowUrl: 'Workflow URL',
+			},
+			save: 'Save',
+			settings: 'Settings',
+			showError: {
+				handleSelect: {
+					message: 'There was a problem deleting the workflow',
+					title: 'Problem deleting the workflow',
+				},
+				stopExecution: {
+					message: 'There was a problem stopping the execuction',
+					title: 'Problem stopping execution',
+				},
+			},
+			showMessage: {
+				handleFileImport: {
+					message: 'The file does not contain valid JSON data.',
+					title: 'Could not import file',
+				},
+				handleSelect1: {
+					message: 'The workflow {workflowName} got deleted.',
+					title: 'Workflow got deleted',
+				},
+				handleSelect2: {
+					message: 'A new workflow got created',
+					title: 'Workflow created',
+				},
+				handleSelect3: {
+					message: 'A new workflow got created',
+					title: 'Workflow created',
+				},
+				stopExecution: {
+					message: 'The execution with the id {executionId} got stopped!',
+					title: 'Execution stopped',
+				},
+			},
+			workflow: 'Workflow',
+			workflows: 'Workflows',
+		},
+		multipleParameter: {
+			currentlyNoItemsExist: 'Currently no items exist',
+		},
+		nodeCredentials: {
+			credentials: 'Credentials',
+			showMessage: {
+				message: 'The credentials named {name} of type {credentialType} could not be found!',
+				title: 'Credentials not found',
+			},
+		},
+		nodeErrorView: {
+			cause: 'Cause',
+			dataBelowMayContain: 'Data below may contain sensitive information. Proceed with caution when sharing.',
+			details: 'Details',
+			error: 'ERROR',
+			httpCode: 'HTTP-Code',
+			showMessage: {
+				message: '',
+				title: 'Copied to clipboard',
+			},
+			stack: 'Stack',
+			time: 'Time',
+		},
+		nodeSettings: {
+			settings: {
+				alwaysOutputData: {
+					description: 'If active, the node will return an empty item even if the <br />node returns no data during an initial execution. Be careful setting <br />this on IF-Nodes as it could cause an infinite loop.',
+					displayName: 'Always Output Data',
+				},
+				color: {
+					description: 'The color of the node in the flow.',
+					displayName: 'Node Color',
+				},
+				continueOnFail: {
+					description: 'If active, the workflow continues even if this node\'s <br />execution fails. When this occurs, the node passes along input data from<br />previous nodes - so your workflow should account for unexpected output data.',
+					displayName: 'Continue On Fail',
+				},
+				executeOnce: {
+					description: 'If active, the node executes only once, with data<br /> from the first item it recieves.',
+					displayName: 'Execute Once',
+				},
+				maxTries: {
+					description: 'Number of times Retry On Fail should attempt to execute the node <br />before stopping and returning the execution as failed.',
+					displayName: 'Max. Tries',
+				},
+				notes: {
+					description: 'Optional note to save with the node.',
+					displayName: 'Notes',
+				},
+				notesInFlow: {
+					description: 'If active, the note above will display in the flow as a subtitle.',
+					displayName: 'Display note in flow?',
+				},
+				retryOnFail: {
+					description: 'If active, the node tries to execute a failed attempt <br /> multiple times until it succeeds.',
+					displayName: 'Retry On Fail',
+				},
+				waitBetweenTries: {
+					description: 'How long to wait between each attempt. Value in ms.',
+					displayName: 'Wait Between Tries',
+				},
+			},
+			theNodeIsNotValidAsItsTypeIsUnknown: 'The node is not valid as its type {nodeType} is unknown.',
+			thisNodeDoesNotHaveAnyParameters: 'This node does not have any parameters.',
+		},
+		nodeView: {
+			confirmMessage: {
+				beforeRouteLeave: {
+					cancelButtonText: '',
+					confirmButtonText: 'Yes, switch workflows and forget changes',
+					headline: 'Save your Changes?',
+					message: 'When you switch workflows your current workflow changes will be lost.',
+				},
+				initView: {
+					cancelButtonText: '',
+					confirmButtonText: 'Yes, switch workflows and forget changes',
+					headline: 'Save your Changes?',
+					message: 'When you switch workflows your current workflow changes will be lost.',
+				},
+				receivedCopyPasteData: {
+					cancelButtonText: '',
+					confirmButtonText: 'Yes, import!',
+					headline: 'Import Workflow from URL?',
+					message: 'Import workflow from this URL:<br /><i>{plainTextData}<i>',
+				},
+			},
+			executesTheWorkflowFromTheStartOrWebhookNode: 'Executes the Workflow from the Start or Webhook Node.',
+			prompt: {
+				cancel: 'Cancel',
+				invalidName: 'Invalid Name',
+				newName: 'New Name',
+				rename: 'Rename',
+				renameNode: 'Rename Node',
+			},
+			runButtonText: {
+				executeWorkflow: 'Execute Workflow',
+				executingWorkflow: 'Executing Workflow',
+				waitingForWebhookCall: 'Waiting for Webhook-Call',
+			},
+			showError: {
+				getWorkflowDataFromUrl: {
+					message: 'There was a problem loading the workflow data from URL',
+					title: 'Problem loading workflow',
+				},
+				importWorkflowData: {
+					message: 'There was a problem importing workflow data',
+					title: 'Problem importing workflow',
+				},
+				mounted1: {
+					message: 'There was a problem loading init data',
+					title: 'Init Problem',
+				},
+				mounted2: {
+					message: 'There was a problem initializing the workflow',
+					title: 'Init Problem',
+				},
+				openExecution: {
+					message: 'There was a problem opening the execution',
+					title: 'Problem loading execution',
+				},
+				openWorkflow: {
+					message: 'There was a problem opening the workflow',
+					title: 'Problem opening workflow',
+				},
+				stopExecution: {
+					message: 'There was a problem stopping the execuction',
+					title: 'Problem stopping execution',
+				},
+				stopWaitingForWebhook: {
+					message: 'There was a problem deleting webhook',
+					title: 'Problem deleting the test-webhook',
+				},
+			},
+			showMessage: {
+				addNodeButton: {
+					message: 'Node of type {nodeTypeName} could not be created as it is not known.',
+					title: 'Could not create node!',
+				},
+				keyDown: {
+					message: 'A new workflow got created!',
+					title: 'Created',
+				},
+				showMaxNodeTypeError: {
+					message: {
+						singular: 'Node can not be created because in a workflow max. {maxNodes} node of type {nodeTypeDataDisplayName} is allowed!',
+						plural: 'Node can not be created because in a workflow max. {maxNodes} nodes of type {nodeTypeDataDisplayName} are allowed!',
+					},
+					title: 'Could not create node!',
+				},
+				stopExecutionCatch: {
+					message: 'Unable to stop operation in time. Workflow finished executing already.',
+					title: 'Workflow finished executing',
+				},
+				stopExecutionTry: {
+					message: 'The execution with the id {executionId} got stopped!',
+					title: 'Execution stopped',
+				},
+				stopWaitingForWebhook: {
+					message: 'The webhook got deleted!',
+					title: 'Webhook got deleted',
+				},
+			},
+			stopCurrentExecution: 'Stop current execution',
+			stoppingCurrentExecution: 'Stopping current execution',
+		},
+		nodeWebhooks: {
+			displayUrlFor: 'Display URL for',
+			showMessage: {
+				message: 'The webhook URL was successfully copied!',
+				title: 'Copied',
+			},
+			webhookUrls: 'Webhook URLs',
+		},
+		noTagsView: {
+			createATag: 'Create a tag',
+			readyToOrganizeYourWorkflows: 'Ready to organize your workflows?',
+			withWorkflowTagsYouReFree: 'With workflow tags, you\'re free to create the perfect tagging system for your flows',
+		},
+		oauth2: {
+			clientId: 'Client ID',
+			clientSecret: 'Client Secret',
+		},
+		parameterInput: {
+			addExpression: 'Add Expression',
+			removeExpression: 'Remove Expression',
+			resetValue: 'Reset Value',
+			selectDateAndTime: 'Select date and time',
+		},
+		pushConnection: {
+			showMessage: {
+				runDataExecutedFinishedFalse: {
+					message: {
+						errorMessage1: 'There was a problem executing the workflow!',
+						errorMessage2: 'There was a problem executing the workflow:<br /><strong>{receivedError}</strong>',
+					},
+					title: 'Problem executing workflow',
+				},
+				runDataExecutedFinishedTrue: {
+					message: 'Workflow did get executed successfully!',
+					title: 'Workflow got executed',
+				},
+			},
+		},
+		pushConnectionTracker: {
+			cannotConnectToServer: 'Cannot connect to server.<br />It is either down or you have a connection issue. <br />It should reconnect automatically once the issue is resolved.',
+			connectionLost: 'Connection lost',
+		},
+		runData: {
+			copyItemPath: 'Copy Item Path',
+			copyParameterPath: 'Copy Parameter Path',
+			copyValue: 'Copy Value',
+			dataOfExecution: 'Data of Execution',
+			dataReturnedByTheNodeWillDisplayHere: 'Data returned by this node will display here.',
+			displayDataAnyway: 'Display Data Anyway',
+			entriesExistButThey: 'Entries exist but they do not contain any JSON data.',
+			executeNode: 'Execute Node',
+			executionTime: 'Execution Time',
+			fileExtension: 'File Extension',
+			fileName: 'File Name',
+			items: 'Items',
+			mimeType: 'Mime Type',
+			ms: 'ms',
+			noBinaryDataFound: 'No binary data found',
+			noData: 'No data',
+			nodeReturnedALargeAmountOfData: 'Node returned a large amount of data',
+			noTextDataFound: 'No text data found',
+			output: 'Output',
+			showBinaryData: 'Show Binary Data',
+			startTime: 'Start Time',
+			theNodeContains: 'The node contains {numberOfKb} KB of data.<br />Displaying it could cause problems!<br /><br />If you do decide to display it, avoid the JSON view!',
+		},
+		saveWorkflowButton: {
+			save: 'Save',
+			saved: 'Saved',
+		},
+		tagsDropdown: {
+			manageTags: 'Manage tags',
+			noMatchingTagsExist: 'No matching tags exist',
+			noTagsExist: 'No tags exist',
+			showError: {
+				message: 'A problem occurred when trying to create the {name} tag',
+				title: 'New tag was not created',
+			},
+			typeToCreateATag: 'Type to create a tag',
+		},
+		tagsManager: {
+			couldNotDeleteTag: 'Could not delete tag',
+			done: 'Done',
+			manageTags: 'Manage tags',
+			showError: {
+				onCreate: {
+					message: 'A problem occurred when trying to create the {escapedName} tag',
+					title: 'New tag was not created',
+				},
+				onDelete: {
+					message: 'A problem occurred when trying to delete the {escapedName} tag',
+					title: 'Tag was not deleted',
+				},
+				onUpdate: {
+					message: 'A problem occurred when trying to update the {escapedName} tag',
+					title: 'Tag was not updated',
+				},
+			},
+			showMessage: {
+				onDelete: {
+					message: 'A problem occurred when trying to delete the {escapedName} tag',
+					title: 'Tag was deleted',
+				},
+				onUpdate: {
+					message: 'The {escapedOldName} tag was successfully updated to {escapedName}',
+					title: 'Tag was updated',
+				},
+			},
+		},
+		tagsTable: {
+			areYouSureYouWantToDeleteThisTag: 'Are you sure you want to delete this tag?',
+			cancel: 'Cancel',
+			createTag: 'Create tag',
+			deleteTag: 'Delete tag',
+			editTag: 'Edit Tag',
+			name: 'Name',
+			saveChanges: 'Save changes',
+			usage: 'Usage',
+		},
+		tagsTableHeader: {
+			addNew: 'Add new',
+			searchTags: 'Search Tags',
+		},
+		tagsView: {
+			inUse: {
+				singular: '{count} workflow',
+				plural: '{count} workflows',
+			},
+			notBeingUsed: 'Not being used',
+		},
+		variableSelectorItem: {
+			empty: '--- EMPTY ---',
+			selectItem: 'Select Item',
+		},
+		workflowActivator: {
+			activateWorkflow: 'Activate workflow',
+			confirmMessage: {
+				cancelButtonText: '',
+				confirmButtonText: 'Yes, activate and save!',
+				headline: 'Activate and save?',
+				message: 'When you activate the workflow all currently unsaved changes of the workflow will be saved.',
+			},
+			deactivateWorkflow: 'Deactivate workflow',
+			showError: {
+				message: 'There was a problem and the workflow could not be {newStateName}',
+				title: 'Problem',
+			},
+			showMessage: {
+				activeChangedNodesIssuesExistTrue: {
+					message: 'It is only possible to activate a workflow when all issues on all nodes got resolved!',
+					title: 'Problem activating workflow',
+				},
+				activeChangedWorkflowIdUndefined: {
+					message: 'The workflow did not get saved yet so can not be set active!',
+					title: 'Problem activating workflow',
+				},
+				displayActivationError: {
+					message: {
+						catchBlock: 'Sorry there was a problem requesting the error',
+						errorDataNotUndefined: 'The following error occurred on workflow activation:<br /><i>{message}</i>',
+						errorDataUndefined: 'Sorry there was a problem. No error got found to display.',
+					},
+					title: 'Problem activating workflow',
+				},
+			},
+			theWorkflowIsSetToBeActiveBut: 'The workflow is set to be active but could not be started.<br />Click to display error message.',
+		},
+		workflowDetails: {
+			active: 'Active',
+			addTag: 'Add tag',
+			showMessage: {
+				message: 'Please enter a name, or press \'esc\' to go back to the old one.',
+				title: 'Name missing',
+			},
+		},
+		workflowHelpers: {
+			showMessage: {
+				saveAsNewWorkflow: {
+					message: 'There was a problem saving the workflow',
+					title: 'Problem saving workflow',
+				},
+				saveCurrentWorkflow: {
+					message: 'There was a problem saving the workflow',
+					title: 'Problem saving workflow',
+				},
+			},
+		},
+		workflowOpen: {
+			active: 'Active',
+			confirmMessage: {
+				cancelButtonText: '',
+				confirmButtonText: 'Yes, switch workflows and forget changes',
+				headline: 'Save your Changes?',
+				message: 'When you switch workflows your current workflow changes will be lost.',
+			},
+			created: 'Created',
+			filterByTags: 'Filter by tags...',
+			name: 'Name',
+			openWorkflow: 'Open Workflow',
+			searchWorkflows: 'Deutsch',
+			showError: {
+				message: 'There was a problem loading the workflows',
+				title: 'Problem loading workflows',
+			},
+			showMessage: {
+				message: 'This is the current workflow',
+				title: 'Already open',
+			},
+			updated: 'Updated',
+		},
+		workflowRun: {
+			showError: {
+				message: 'There was a problem running the workflow',
+				title: 'Problem running workflow',
+			},
+			showMessage: {
+				message: 'The workflow has issues. Please fix them first',
+				title: 'Workflow can not be executed',
+			},
+		},
+		workflowSettings: {
+			editExpression: 'Edit Expression',
+			errorWorkflow: 'Error Workflow',
+			helpTexts: {
+				errorWorkflow: 'The workflow to run in case the current one fails.<br />To function correctly that workflow has to contain an \'Error Trigger\' node!',
+				executionTimeout: 'After what time the workflow should timeout.',
+				executionTimeoutToggle: 'Cancel workflow execution after defined time',
+				saveDataErrorExecution: 'If data data of executions should be saved in case they failed.',
+				saveDataSuccessExecution: 'If data data of executions should be saved in case they succeed.',
+				saveExecutionProgress: 'If data should be saved after each node, allowing you to resume in case of errors from where it stopped. May increase latency.',
+				saveManualExecutions: 'If data data of executions should be saved when started manually from the editor.',
+				timezone: 'The timezone in which the workflow should run. Gets for example used by \'Cron\' node.',
+			},
+			hours: 'hours',
+			minutes: 'minutes',
+			noWorkflow: '- No Workflow -',
+			save: 'Save',
+			saveDataErrorExecution: 'Save Data Error Execution',
+			saveDataErrorExecutionOptions: {
+				defaultSave: 'Default - ({defaultValue})',
+				doNotSave: 'Do not save',
+				save: 'Save',
+			},
+			saveDataSuccessExecution: 'Save Data Success Execution',
+			saveDataSuccessExecutionOptions: {
+				defaultSave: 'Default - ({defaultValue})',
+				doNotSave: 'Do not save',
+				save: 'Save',
+			},
+			saveExecutionProgress: 'Save Execution Progress',
+			saveExecutionProgressOptions: {
+				defaultSave: 'Default - ({defaultValue})',
+				no: 'No',
+				yes: 'Yes',
+			},
+			saveManualExecutions: 'Save Manual Executions',
+			saveManualOptions: {
+				defaultSave: 'Default - ({defaultValue})',
+				no: 'No',
+				yes: 'Yes',
+			},
+			seconds: 'seconds',
+			showError: {
+				openDialog: {
+					message: 'The following error occurred loading the data',
+					title: 'Problem loading settings',
+				},
+				saveSettings1: {
+					errorMessage: 'timeout is activated but set to 0',
+					message: 'There was a problem saving the settings',
+					title: 'Problem saving settings',
+				},
+				saveSettings2: {
+					errorMessage: 'Maximum Timeout is: {hours} hours, {minutes} minutes, {seconds} seconds',
+					message: 'Set timeout is exceeding the maximum timeout!',
+					title: 'Problem saving settings',
+				},
+				saveSettings3: {
+					message: 'There was a problem saving the settings',
+					title: 'Problem saving settings',
+				},
+			},
+			showMessage: {
+				openDialog: {
+					message: 'No workflow active to display settings of.',
+					title: 'No workflow active',
+				},
+				saveSettings: {
+					message: 'The workflow settings got saved!',
+					title: 'Settings saved',
+				},
+			},
+			timeoutAfter: 'Timeout After',
+			timeoutWorkflow: 'Timeout Workflow',
+			timezone: 'Timezone',
+			workflowSettings: 'Workflow Settings',
+		},
+
+		'n8n-nodes-base': {}, // required for node translation
+	},
+};

packages/editor-ui/src/main.ts

@@ -18,6 +18,7 @@ import router from './router';
 
 import { runExternalHook } from './components/mixins/externalHooks';
 import { TelemetryPlugin } from './plugins/telemetry';
+import { i18n } from './i18n';
 
 import { store } from './store';
 
@@ -31,6 +32,7 @@ Vue.use(TelemetryPlugin);
 new Vue({
 	router,
 	store,
+	i18n,
 	render: h => h(App),
 }).$mount('#app');
 

packages/editor-ui/src/modules/settings.ts

@@ -55,6 +55,7 @@ const module: Module<ISettingsState, IRootState> = {
 			context.commit('setInstanceId', settings.instanceId, {root: true});
 			context.commit('setOauthCallbackUrls', settings.oauthCallbackUrls, {root: true});
 			context.commit('setN8nMetadata', settings.n8nMetadata || {}, {root: true});
+			context.commit('setDefaultLocale', settings.defaultLocale, {root: true});
 			context.commit('versions/setVersionNotificationSettings', settings.versionNotifications, {root: true});
 			context.commit('setTelemetry', settings.telemetry, {root: true});
 

packages/editor-ui/src/store.ts

@@ -48,6 +48,7 @@ const state: IRootState = {
 	activeNode: null,
 	// @ts-ignore
 	baseUrl: process.env.VUE_APP_URL_BASE_API ? process.env.VUE_APP_URL_BASE_API : (window.BASE_PATH === '/%BASE_PATH%/' ? '/' : window.BASE_PATH),
+	defaultLocale: 'en',
 	endpointWebhook: 'webhook',
 	endpointWebhookTest: 'webhook-test',
 	executionId: null,
@@ -552,6 +553,9 @@ export const store = new Vuex.Store({
 		setN8nMetadata(state, metadata: IDataObject) {
 			Vue.set(state, 'n8nMetadata', metadata);
 		},
+		setDefaultLocale(state, locale: string) {
+			Vue.set(state, 'defaultLocale', locale);
+		},
 		setActiveNode (state, nodeName: string) {
 			state.activeNode = nodeName;
 		},
@@ -717,6 +721,9 @@ export const store = new Vuex.Store({
 		n8nMetadata: (state): object => {
 			return state.n8nMetadata;
 		},
+		defaultLocale: (state): string => {
+			return state.defaultLocale;
+		},
 
 		// Push Connection
 		pushConnectionActive: (state): boolean => {

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

@@ -166,6 +166,7 @@ import {
 	IExecutionsSummary,
 } from '../Interface';
 import { mapGetters } from 'vuex';
+import { loadLanguage } from '@/i18n';
 
 const NODE_SIZE = 100;
 const DEFAULT_START_POSITION_X = 250;
@@ -238,6 +239,11 @@ export default mixins(
 				},
 				deep: true,
 			},
+
+			defaultLocale (newLocale, oldLocale) {
+				console.log(`Switching locale from ${oldLocale} to ${newLocale}`);
+				loadLanguage(newLocale);
+			},
 		},
 		async beforeRouteLeave(to, from, next) {
 			const result = this.$store.getters.getStateIsDirty;
@@ -258,6 +264,9 @@ export default mixins(
 			...mapGetters('ui', [
 				'sidebarMenuCollapsed',
 			]),
+			defaultLocale (): string {
+				return this.$store.getters.defaultLocale;
+			},
 			activeNode (): INodeUi | null {
 				return this.$store.getters.activeNode;
 			},

packages/editor-ui/vue.config.js

@@ -1,5 +1,8 @@
 module.exports = {
-	chainWebpack: config => config.resolve.symlinks(false),
+	chainWebpack: config => {
+		config.resolve.symlinks(false);
+		// config.plugins.delete("prefetch"); // enable when language package grows
+	},
 	// transpileDependencies: [
 	//   // 'node_modules/quill'
 	//   /\/node_modules\/quill\//
@@ -8,6 +11,12 @@ module.exports = {
 		webpackBundleAnalyzer: {
 			openAnalyzer: false,
 		},
+		i18n: {
+			locale: "en",
+			fallbackLocale: "en",
+			localeDir: "./src/i18n/locales",
+			enableInSFC: false,
+		},
 	},
 	configureWebpack: {
 		devServer: {

vetur.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  projects: [
+    './packages/editor-ui',
+  ],
+}