✨ Render base strings

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

@@ -22,94 +22,94 @@
 				<el-submenu index="workflow" title="Workflow" popperClass="sidebar-popper">
 					<template slot="title">
 						<font-awesome-icon icon="network-wired"/>&nbsp;
-						<span slot="title" class="item-title-root">Workflows</span>
+						<span slot="title" class="item-title-root">{{ $baseText('mainSidebar.workflows') }}</span>
 					</template>
 
 					<n8n-menu-item index="workflow-new">
 						<template slot="title">
 							<font-awesome-icon icon="file"/>&nbsp;
-							<span slot="title" class="item-title">New</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.new') }}</span>
 						</template>
 					</n8n-menu-item>
 					<n8n-menu-item index="workflow-open">
 						<template slot="title">
 							<font-awesome-icon icon="folder-open"/>&nbsp;
-							<span slot="title" class="item-title">Open</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.open') }}</span>
 						</template>
 					</n8n-menu-item>
 					<n8n-menu-item index="workflow-save">
 						<template slot="title">
 							<font-awesome-icon icon="save"/>
-							<span slot="title" class="item-title">Save</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.save') }}</span>
 						</template>
 					</n8n-menu-item>
 					<n8n-menu-item index="workflow-duplicate" :disabled="!currentWorkflow">
 						<template slot="title">
 							<font-awesome-icon icon="copy"/>
-							<span slot="title" class="item-title">Duplicate</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.duplicate') }}</span>
 						</template>
 					</n8n-menu-item>
 					<n8n-menu-item index="workflow-delete" :disabled="!currentWorkflow">
 						<template slot="title">
 							<font-awesome-icon icon="trash"/>
-							<span slot="title" class="item-title">Delete</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.delete') }}</span>
 						</template>
 					</n8n-menu-item>
 					<n8n-menu-item index="workflow-download">
 						<template slot="title">
 							<font-awesome-icon icon="file-download"/>
-							<span slot="title" class="item-title">Download</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.download') }}</span>
 						</template>
 					</n8n-menu-item>
 					<n8n-menu-item index="workflow-import-url">
 						<template slot="title">
 							<font-awesome-icon icon="cloud"/>
-							<span slot="title" class="item-title">Import from URL</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.importFromUrl') }}</span>
 						</template>
 					</n8n-menu-item>
 					<n8n-menu-item index="workflow-import-file">
 						<template slot="title">
 							<font-awesome-icon icon="hdd"/>
-							<span slot="title" class="item-title">Import from File</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.importFromFile') }}</span>
 						</template>
 					</n8n-menu-item>
 					<n8n-menu-item index="workflow-settings" :disabled="!currentWorkflow">
 						<template slot="title">
 							<font-awesome-icon icon="cog"/>
-							<span slot="title" class="item-title">Settings</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.settings') }}</span>
 						</template>
 					</n8n-menu-item>
 				</el-submenu>
 
-				<el-submenu index="credentials" title="Credentials" popperClass="sidebar-popper">
+				<el-submenu index="credentials" :title="$baseText('mainSidebar.credentials')" popperClass="sidebar-popper">
 					<template slot="title">
 						<font-awesome-icon icon="key"/>&nbsp;
-						<span slot="title" class="item-title-root">Credentials</span>
+						<span slot="title" class="item-title-root">{{ $baseText('mainSidebar.credentials') }}</span>
 					</template>
 
 					<n8n-menu-item index="credentials-new">
 						<template slot="title">
 							<font-awesome-icon icon="file"/>
-							<span slot="title" class="item-title">New</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.new') }}</span>
 						</template>
 					</n8n-menu-item>
 					<n8n-menu-item index="credentials-open">
 						<template slot="title">
 							<font-awesome-icon icon="folder-open"/>
-							<span slot="title" class="item-title">Open</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.open') }}</span>
 						</template>
 					</n8n-menu-item>
 				</el-submenu>
 
 				<n8n-menu-item index="executions">
 					<font-awesome-icon icon="tasks"/>&nbsp;
-					<span slot="title" class="item-title-root">Executions</span>
+					<span slot="title" class="item-title-root">{{ $baseText('mainSidebar.executions') }}</span>
 				</n8n-menu-item>
 
 				<el-submenu index="help" class="help-menu" title="Help" popperClass="sidebar-popper">
 					<template slot="title">
 						<font-awesome-icon icon="question"/>&nbsp;
-						<span slot="title" class="item-title-root">Help</span>
+						<span slot="title" class="item-title-root">{{ $baseText('mainSidebar.help') }}</span>
 					</template>
 
 					<MenuItemsIterator :items="helpMenuItems" :afterItemClick="trackHelpItemClick" />
@@ -117,7 +117,7 @@
 					<n8n-menu-item index="help-about">
 						<template slot="title">
 							<font-awesome-icon class="about-icon" icon="info"/>
-							<span slot="title" class="item-title">About n8n</span>
+							<span slot="title" class="item-title">{{ $baseText('mainSidebar.aboutN8n') }}</span>
 						</template>
 					</n8n-menu-item>
 				</el-submenu>
@@ -155,6 +155,7 @@ import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
 
 import { genericHelpers } from '@/components/mixins/genericHelpers';
+import { renderText } from '@/components/mixins/renderText';
 import { restApi } from '@/components/mixins/restApi';
 import { showMessage } from '@/components/mixins/showMessage';
 import { titleChange } from '@/components/mixins/titleChange';
@@ -168,42 +169,10 @@ import { mapGetters } from 'vuex';
 import MenuItemsIterator from './MainSidebarMenuItemsIterator.vue';
 import { CREDENTIAL_LIST_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
 
-const helpMenuItems: IMenuItem[] = [
-	{
-		id: 'docs',
-		type: 'link',
-		properties: {
-			href: 'https://docs.n8n.io',
-			title: 'Documentation',
-			icon: 'book',
-			newWindow: true,
-		},
-	},
-	{
-		id: 'forum',
-		type: 'link',
-		properties: {
-			href: 'https://community.n8n.io',
-			title: 'Forum',
-			icon: 'users',
-			newWindow: true,
-		},
-	},
-	{
-		id: 'examples',
-		type: 'link',
-		properties: {
-			href: 'https://n8n.io/workflows',
-			title: 'Workflows',
-			icon: 'network-wired',
-			newWindow: true,
-		},
-	},
-];
-
 export default mixins(
 	genericHelpers,
 	restApi,
+	renderText,
 	showMessage,
 	titleChange,
 	workflowHelpers,
@@ -225,7 +194,6 @@ export default mixins(
 				basePath: this.$store.getters.getBaseUrl,
 				executionsListDialogVisible: false,
 				stopExecutionInProgress: false,
-				helpMenuItems,
 			};
 		},
 		computed: {
@@ -236,6 +204,40 @@ export default mixins(
 				'hasVersionUpdates',
 				'nextVersions',
 			]),
+			helpMenuItems (): object[] {
+				return [
+					{
+						id: 'docs',
+						type: 'link',
+						properties: {
+							href: 'https://docs.n8n.io',
+							title: this.$baseText('mainSidebar.helpMenuItems.documentation'),
+							icon: 'book',
+							newWindow: true,
+						},
+					},
+					{
+						id: 'forum',
+						type: 'link',
+						properties: {
+							href: 'https://community.n8n.io',
+							title: this.$baseText('mainSidebar.helpMenuItems.forum'),
+							icon: 'users',
+							newWindow: true,
+						},
+					},
+					{
+						id: 'examples',
+						type: 'link',
+						properties: {
+							href: 'https://n8n.io/workflows',
+							title: this.$baseText('mainSidebar.helpMenuItems.workflows'),
+							icon: 'network-wired',
+							newWindow: true,
+						},
+					},
+				];
+			},
 			exeuctionId (): string | undefined {
 				return this.$route.params.id;
 			},
@@ -322,12 +324,19 @@ export default mixins(
 					this.stopExecutionInProgress = true;
 					await this.restApi().stopCurrentExecution(executionId);
 					this.$showMessage({
-						title: 'Execution stopped',
-						message: `The execution with the id "${executionId}" got stopped!`,
+						title: this.$baseText('mainSidebar.showMessage.stopExecution.title'),
+						message: this.$baseText(
+							'mainSidebar.showMessage.stopExecution.message',
+							{ interpolate: { executionId }},
+						),
 						type: 'success',
 					});
 				} catch (error) {
-					this.$showError(error, 'Problem stopping execution', 'There was a problem stopping the execuction:');
+					this.$showError(
+						error,
+						this.$baseText('mainSidebar.showError.stopExecution.title'),
+						this.$baseText('mainSidebar.showError.stopExecution.message') + ':',
+					);
 				}
 				this.stopExecutionInProgress = false;
 			},
@@ -351,8 +360,8 @@ export default mixins(
 						worflowData = JSON.parse(data as string);
 					} catch (error) {
 						this.$showMessage({
-							title: 'Could not import file',
-							message: `The file does not contain valid JSON data.`,
+							title: this.$baseText('mainSidebar.showMessage.handleFileImport.title'),
+							message: this.$baseText('mainSidebar.showMessage.handleFileImport.message'),
 							type: 'error',
 						});
 						return;
@@ -374,17 +383,30 @@ export default mixins(
 					(this.$refs.importFile as HTMLInputElement).click();
 				} else if (key === 'workflow-import-url') {
 					try {
-						const promptResponse = await this.$prompt(`Workflow URL:`, 'Import Workflow from URL:', {
-							confirmButtonText: 'Import',
-							cancelButtonText: 'Cancel',
-							inputErrorMessage: 'Invalid URL',
-							inputPattern: /^http[s]?:\/\/.*\.json$/i,
-						}) as MessageBoxInputData;
+						const promptResponse = await this.$prompt(
+							this.$baseText('mainSidebar.prompt.workflowUrl') + ':',
+							this.$baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
+							{
+								confirmButtonText: this.$baseText('mainSidebar.prompt.import'),
+								cancelButtonText: this.$baseText('mainSidebar.prompt.cancel'),
+								inputErrorMessage: this.$baseText('mainSidebar.prompt.invalidUrl'),
+								inputPattern: /^http[s]?:\/\/.*\.json$/i,
+							},
+						) as MessageBoxInputData;
 
 						this.$root.$emit('importWorkflowUrl', { url: promptResponse.value });
 					} catch (e) {}
 				} else if (key === 'workflow-delete') {
-					const deleteConfirmed = await this.confirmMessage(`Are you sure that you want to delete the workflow "${this.workflowName}"?`, 'Delete Workflow?', 'warning', 'Yes, delete!');
+					const deleteConfirmed = await this.confirmMessage(
+						this.$baseText(
+							'mainSidebar.confirmMessage.workflowDelete.message',
+							{ interpolate: { workflowName: this.workflowName } },
+						),
+						this.$baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
+						'warning',
+						this.$baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
+						this.$baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
+					);
 
 					if (deleteConfirmed === false) {
 						return;
@@ -393,15 +415,22 @@ export default mixins(
 					try {
 						await this.restApi().deleteWorkflow(this.currentWorkflow);
 					} catch (error) {
-						this.$showError(error, 'Problem deleting the workflow', 'There was a problem deleting the workflow:');
+						this.$showError(
+							error,
+							this.$baseText('mainSidebar.showError.stopExecution.title'),
+							this.$baseText('mainSidebar.showError.stopExecution.message') + ':',
+						);
 						return;
 					}
 					this.$store.commit('setStateDirty', false);
 					// Reset tab title since workflow is deleted.
 					this.$titleReset();
 					this.$showMessage({
-						title: 'Workflow was deleted',
-						message: `The workflow "${this.workflowName}" was deleted!`,
+						title: this.$baseText('mainSidebar.showMessage.handleSelect1.title'),
+						message: this.$baseText(
+							'mainSidebar.showMessage.handleSelect1.message',
+							{ interpolate: { workflowName: this.workflowName }},
+						),
 						type: 'success',
 					});
 
@@ -436,7 +465,13 @@ export default mixins(
 				} else if (key === 'workflow-new') {
 					const result = this.$store.getters.getStateIsDirty;
 					if(result) {
-						const importConfirm = await this.confirmMessage(`When you switch workflows your current workflow changes will be lost.`, 'Save your Changes?', 'warning', 'Yes, switch workflows and forget changes');
+						const importConfirm = await this.confirmMessage(
+							this.$baseText('mainSidebar.confirmMessage.workflowNew.message'),
+							this.$baseText('mainSidebar.confirmMessage.workflowNew.headline'),
+							'warning',
+							this.$baseText('mainSidebar.confirmMessage.workflowNew.confirmButton'),
+							this.$baseText('mainSidebar.confirmMessage.workflowNew.cancelButton'),
+						);
 						if (importConfirm === true) {
 							this.$store.commit('setStateDirty', false);
 							if (this.$router.currentRoute.name === 'NodeViewNew') {
@@ -446,8 +481,8 @@ export default mixins(
 							}
 
 							this.$showMessage({
-								title: 'Workflow created',
-								message: 'A new workflow got created!',
+								title: this.$baseText('mainSidebar.showMessage.handleSelect2.title'),
+								message: this.$baseText('mainSidebar.showMessage.handleSelect2.message'),
 								type: 'success',
 							});
 						}
@@ -457,8 +492,8 @@ export default mixins(
 						}
 
 						this.$showMessage({
-							title: 'Workflow created',
-							message: 'A new workflow got created!',
+							title: this.$baseText('mainSidebar.showMessage.handleSelect3.title'),
+							message: this.$baseText('mainSidebar.showMessage.handleSelect3.message'),
 							type: 'success',
 						});
 					}