✨ Render header strings

packages/cli/src/Server.ts

@@ -1207,6 +1207,22 @@ class App {
 			),
 		);
 
+		// Returns node information based on node names and versions
+		this.app.get(
+			`/${this.restEndpoint}/node-translation-headers`,
+			ResponseHelper.send(
+				async (req: express.Request, res: express.Response): Promise<object | void> => {
+					const packagesPath = pathJoin(__dirname, '..', '..', '..');
+					const headersPath = pathJoin(packagesPath, 'nodes-base', 'dist', 'nodes', 'headers');
+					try {
+						return require(headersPath);
+					} catch (error) {
+						res.status(500).send('Failed to find headers file');
+					}
+				},
+			),
+		);
+
 		// ----------------------------------------
 		// Node-Types
 		// ----------------------------------------

packages/editor-ui/package.json

@@ -40,6 +40,7 @@
     "@types/express": "^4.17.6",
     "@types/file-saver": "^2.0.1",
     "@types/jest": "^26.0.13",
+    "@types/lodash.camelcase": "^4.3.6",
     "@types/lodash.get": "^4.4.6",
     "@types/lodash.set": "^4.3.6",
     "@types/node": "14.17.27",
@@ -69,15 +70,16 @@
     "jquery": "^3.4.1",
     "jshint": "^2.9.7",
     "jsplumb": "2.15.4",
+    "lodash.camelcase": "^4.3.0",
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "n8n-workflow": "~0.76.0",
-    "sass": "^1.26.5",
     "normalize-wheel": "^1.0.1",
     "prismjs": "^1.17.1",
     "quill": "^2.0.0-dev.3",
     "quill-autoformat": "^0.1.1",
+    "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "string-template-parser": "^1.2.6",
     "ts-jest": "^26.3.0",

packages/editor-ui/src/Interface.ts

@@ -130,6 +130,7 @@ export interface IRestApi {
 	getPastExecutions(filter: object, limit: number, lastId?: string | number, firstId?: string | number): Promise<IExecutionsListResponse>;
 	stopCurrentExecution(executionId: string): Promise<IExecutionsStopData>;
 	makeRestApiRequest(method: string, endpoint: string, data?: any): Promise<any>; // tslint:disable-line:no-any
+	getNodeTranslationHeaders(): Promise<INodeTranslationHeaders>;
 	getNodeTypes(onlyLatest?: boolean): Promise<INodeTypeDescription[]>;
 	getNodesInformation(nodeInfos: INodeTypeNameVersion[]): Promise<INodeTypeDescription[]>;
 	getNodeParameterOptions(nodeTypeAndVersion: INodeTypeNameVersion, path: string, methodName: string, currentNodeParameters: INodeParameters, credentials?: INodeCredentials): Promise<INodePropertyOptions[]>;
@@ -147,6 +148,15 @@ export interface IRestApi {
 	getTimezones(): Promise<IDataObject>;
 }
 
+export interface INodeTranslationHeaders {
+	data: {
+		[key: string]: {
+			displayName: string;
+			description: string;
+		},
+	};
+}
+
 export interface IBinaryDisplayData {
 	index: number;
 	key: string;

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

@@ -2,7 +2,9 @@
 	<div :class="$style.container">
 		<el-row>
 			<el-col :span="8" :class="$style.accessLabel">
-				<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.allowUseBy') }}</n8n-text>
+				<n8n-text :compact="true" :bold="true">
+					{{ $baseText('credentialEdit.credentialInfo.allowUseBy') }}
+				</n8n-text>
 			</el-col>
 			<el-col :span="16">
 				<div
@@ -11,7 +13,10 @@
 					:class="$style.valueLabel"
 				>
 					<el-checkbox
-						:label="node.displayName"
+						:label="$headerText({
+							key: `headers.${shortNodeType(node)}.displayName`,
+							fallback: node.displayName,
+						})"
 						:value="!!nodeAccess[node.name]"
 						@change="(val) => onNodeAccessChange(node.name, val)"
 					/>
@@ -20,7 +25,9 @@
 		</el-row>
 		<el-row v-if="currentCredential">
 			<el-col :span="8" :class="$style.label">
-				<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.created') }}</n8n-text>
+				<n8n-text :compact="true" :bold="true">
+					{{ $baseText('credentialEdit.credentialInfo.created') }}
+				</n8n-text>
 			</el-col>
 			<el-col :span="16" :class="$style.valueLabel">
 				<n8n-text :compact="true"><TimeAgo :date="currentCredential.createdAt" :capitalize="true" /></n8n-text>
@@ -28,7 +35,9 @@
 		</el-row>
 		<el-row v-if="currentCredential">
 			<el-col :span="8" :class="$style.label">
-				<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.lastModified') }}</n8n-text>
+				<n8n-text :compact="true" :bold="true">
+					{{ $baseText('credentialEdit.credentialInfo.lastModified') }}
+				</n8n-text>
 			</el-col>
 			<el-col :span="16" :class="$style.valueLabel">
 				<n8n-text :compact="true"><TimeAgo :date="currentCredential.updatedAt" :capitalize="true" /></n8n-text>
@@ -36,7 +45,9 @@
 		</el-row>
 		<el-row v-if="currentCredential">
 			<el-col :span="8" :class="$style.label">
-				<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.id') }}</n8n-text>
+				<n8n-text :compact="true" :bold="true">
+					{{ $baseText('credentialEdit.credentialInfo.id') }}
+				</n8n-text>
 			</el-col>
 			<el-col :span="16" :class="$style.valueLabel">
 				<n8n-text :compact="true">{{ currentCredential.id }}</n8n-text>
@@ -51,6 +62,7 @@ import { renderText } from '../mixins/renderText';
 
 import TimeAgo from '../TimeAgo.vue';
 import mixins from 'vue-typed-mixins';
+import { INodeTypeDescription } from 'n8n-workflow';
 
 export default mixins(renderText).extend({
 	name: 'CredentialInfo',
@@ -65,6 +77,9 @@ export default mixins(renderText).extend({
 				value,
 			});
 		},
+		shortNodeType(nodeType: INodeTypeDescription) {
+			return nodeType.name.replace('n8n-nodes-base.', '');
+		},
 	},
 });
 </script>

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

@@ -33,6 +33,15 @@ export default mixins(genericHelpers).extend({
 				return path.split('.').reduce((acc, part) => acc && acc[part], obj);
 			};
 
+			if (this.keyName === 'name' && this.node.type.startsWith('n8n-nodes-base.')) {
+				const shortNodeType = this.node.type.replace('n8n-nodes-base.', '');
+
+				return this.$headerText({
+					key: `headers.${shortNodeType}.displayName`,
+					fallback: getDescendantProp(this.node, this.keyName),
+				});
+			}
+
 			return getDescendantProp(this.node, this.keyName);
 		},
 	},

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

@@ -114,7 +114,12 @@
 
 					</template>
 				</el-table-column>
-				<el-table-column property="mode" :label="$baseText('executionsList.mode')" width="100" align="center"></el-table-column>
+				<el-table-column property="mode" :label="$baseText('executionsList.mode')" width="100" align="center">
+					<!-- TODO i18n <template slot-scope="scope">
+						{{convertToDisplayDate(scope.row.startedAt)}}<br />
+						<small v-if="scope.row.id">ID: {{scope.row.id}}</small>
+					</template> -->
+				</el-table-column>
 				<el-table-column :label="$baseText('executionsList.runningTime')" width="150" align="center">
 					<template slot-scope="scope">
 						<span v-if="scope.row.stoppedAt === undefined">

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

@@ -1,19 +1,31 @@
-<template functional>
+<template>
 	<div :class="$style.category">
-		<span :class="$style.name">{{ props.item.category }}</span>
+		<span :class="$style.name">
+			{{ $baseText(`nodeCreator.categoryNames.${categoryName}`) }}
+		</span>
 		<font-awesome-icon
 			:class="$style.arrow"
 			icon="chevron-down"
-			v-if="props.item.properties.expanded"
+			v-if="item.properties.expanded"
 		/>
 		<font-awesome-icon :class="$style.arrow" icon="chevron-up" v-else />
 	</div>
 </template>
 
 <script lang="ts">
-export default {
+import Vue from 'vue';
+import camelcase from 'lodash.camelcase';
+import { renderText } from '@/components/mixins/renderText';
+import mixins from 'vue-typed-mixins';
+
+export default mixins(renderText).extend({
 	props: ['item'],
-};
+	computed: {
+		categoryName() {
+			return camelcase(this.item.category);
+		},
+	},
+});
 </script>
 
 

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

@@ -11,9 +11,9 @@
 			/>
 			<div class="type-selector">
 				<el-tabs v-model="selectedType" stretch>
-					<el-tab-pane label="All" :name="ALL_NODE_FILTER"></el-tab-pane>
+					<el-tab-pane :label="$baseText('nodeCreator.mainPanel.all')" :name="ALL_NODE_FILTER"></el-tab-pane>
-					<el-tab-pane label="Regular" :name="REGULAR_NODE_FILTER"></el-tab-pane>
+					<el-tab-pane :label="$baseText('nodeCreator.mainPanel.regular')" :name="REGULAR_NODE_FILTER"></el-tab-pane>
-					<el-tab-pane label="Trigger" :name="TRIGGER_NODE_FILTER"></el-tab-pane>
+					<el-tab-pane :label="$baseText('nodeCreator.mainPanel.trigger')" :name="TRIGGER_NODE_FILTER"></el-tab-pane>
 				</el-tabs>
 			</div>
 			<div v-if="searchFilter.length === 0" class="scrollable">
@@ -55,9 +55,10 @@ import { INodeCreateElement, INodeItemProps, ISubcategoryItemProps } from '@/Int
 import { ALL_NODE_FILTER, CORE_NODES_CATEGORY, REGULAR_NODE_FILTER, TRIGGER_NODE_FILTER } from '@/constants';
 import SlideTransition from '../transitions/SlideTransition.vue';
 import { matchesNodeType, matchesSelectType } from './helpers';
+import { renderText } from '../mixins/renderText';
 
 
-export default mixins(externalHooks).extend({
+export default mixins(externalHooks, renderText).extend({
 	name: 'NodeCreateList',
 	components: {
 		ItemIterator,

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

@@ -4,27 +4,31 @@
 			<NoResultsIcon />
 		</div>
 		<div class="title">
-			<div>We didn't make that... yet</div>
+			<div>
+				{{ $baseText('nodeCreator.noResults.weDidntMakeThatYet') }}
+			</div>
 			<div class="action">
-				Don’t worry, you can probably do it with the
+				{{ $baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
-				<a @click="selectHttpRequest">HTTP Request</a> or
+				<a @click="selectHttpRequest">{{ $baseText('nodeCreator.noResults.httpRequest') }}</a> or
-				<a @click="selectWebhook">Webhook</a> node
+				<a @click="selectWebhook">{{ $baseText('nodeCreator.noResults.webhook') }}</a> {{ $baseText('nodeCreator.noResults.node') }}
 			</div>
 		</div>
 
 		<div class="request">
-			<div>Want us to make it faster?</div>
+			<div>
+				{{ $baseText('nodeCreator.noResults.wantUsToMakeItFaster') }}
+			</div>
 			<div>
 				<a
 					:href="REQUEST_NODE_FORM_URL"
 					target="_blank"
 				>
-					<span>Request the node</span>&nbsp;
+					<span>{{ $baseText('nodeCreator.noResults.requestTheNode') }}</span>&nbsp;
 					<span>
 						<font-awesome-icon
 							class="external"
 							icon="external-link-alt"
-							title="Request the node"
+							:title="$baseText('nodeCreator.noResults.requestTheNode')"
 						/>
 					</span>
 				</a>
@@ -37,10 +41,11 @@
 <script lang="ts">
 import { HTTP_REQUEST_NODE_TYPE, REQUEST_NODE_FORM_URL, WEBHOOK_NODE_TYPE } from '@/constants';
 import Vue from 'vue';
-
+import { renderText } from '../mixins/renderText';
+import mixins from 'vue-typed-mixins';
 import NoResultsIcon from './NoResultsIcon.vue';
 
-export default Vue.extend({
+export default mixins(renderText).extend({
 	name: 'NoResults',
 	components: {
 		NoResultsIcon,

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

@@ -1,15 +1,25 @@
-<template functional>
+<template>
-	<div :class="{[$style['node-item']]: true, [$style.bordered]: props.bordered}">
+	<div :class="{[$style['node-item']]: true, [$style.bordered]: bordered}">
-		<NodeIcon :class="$style['node-icon']" :nodeType="props.nodeType" />
+		<NodeIcon :class="$style['node-icon']" :nodeType="nodeType" />
 		<div>
 			<div :class="$style.details">
-				<span :class="$style.name">{{props.nodeType.displayName}}</span>
+				<span :class="$style.name">
+					{{ $headerText({
+							key: `headers.${shortNodeType}.displayName`,
+							fallback: nodeType.displayName,
+						})
+					}}
+				</span>
 				<span :class="$style['trigger-icon']">
-					<TriggerIcon v-if="$options.isTrigger(props.nodeType)" />
+					<TriggerIcon v-if="$options.isTrigger(nodeType)" />
 				</span>
 			</div>
 			<div :class="$style.description">
-				{{props.nodeType.description}}
+				{{ $headerText({
+						key: `headers.${shortNodeType}.description`,
+						fallback: nodeType.description,
+					})
+				}}
 			</div>
 		</div>
 	</div>
@@ -23,20 +33,30 @@ import { INodeTypeDescription } from 'n8n-workflow';
 import NodeIcon from '../NodeIcon.vue';
 import TriggerIcon from '../TriggerIcon.vue';
 
+import mixins from 'vue-typed-mixins';
+import { renderText } from '@/components/mixins/renderText';
+
 Vue.component('NodeIcon', NodeIcon);
 Vue.component('TriggerIcon', TriggerIcon);
 
-export default {
+export default mixins(renderText).extend({
+	name: 'NodeItem',
 	props: [
 		'active',
 		'filter',
 		'nodeType',
 		'bordered',
 	],
+	computed: {
+		shortNodeType() {
+			return this.nodeType.name.replace('n8n-nodes-base.', '');
+		},
+	},
+	// @ts-ignore
 	isTrigger (nodeType: INodeTypeDescription): boolean {
 		return nodeType.group.includes('trigger');
 	},
-};
+});
 </script>
 
 <style lang="scss" module>

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

@@ -5,7 +5,7 @@
 		</div>
 		<div class="text">
 			<input
-				placeholder="Search nodes..."
+				:placeholder="$baseText('nodeCreator.searchBar.searchNodes')"
 				ref="input"
 				:value="value"
 				@input="onInput"
@@ -22,8 +22,9 @@
 import mixins from 'vue-typed-mixins';
 
 import { externalHooks } from '@/components/mixins/externalHooks';
+import { renderText } from '../mixins/renderText';
 
-export default mixins(externalHooks).extend({
+export default mixins(externalHooks, renderText).extend({
 	name: "SearchBar",
 	props: ["value", "eventBus"],
 	mounted() {

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

@@ -1,9 +1,11 @@
-<template functional>
+<template>
 	<div :class="$style.subcategory">
 		<div :class="$style.details">
-			<div :class="$style.title">{{ props.item.properties.subcategory }}</div>
+			<div :class="$style.title">
-			<div v-if="props.item.properties.description" :class="$style.description">
+				{{ $baseText(`nodeCreator.subcategoryNames.${subcategoryName}`) }}
-				{{ props.item.properties.description }}
+			</div>
+			<div v-if="item.properties.description" :class="$style.description">
+				{{ $baseText(`nodeCreator.subcategoryDescriptions.${subcategoryDescription}`) }}
 			</div>
 		</div>
 		<div :class="$style.action">
@@ -13,9 +15,22 @@
 </template>
 
 <script lang="ts">
-export default {
+import camelcase from 'lodash.camelcase';
+import { renderText } from '@/components/mixins/renderText';
+import mixins from 'vue-typed-mixins';
+
+export default mixins(renderText).extend({
 	props: ['item'],
-};
+	computed: {
+		subcategoryName() {
+			return camelcase(this.item.properties.subcategory);
+		},
+		subcategoryDescription() {
+			const firstWord = this.item.properties.description.split(' ').shift() || '';
+			return firstWord.toLowerCase().replace(/,/g, '');
+		},
+	},
+});
 </script>
 
 

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

@@ -4,7 +4,9 @@
 			<div class="clickable" @click="onBackArrowClick">
 				<font-awesome-icon class="back-arrow" icon="arrow-left" />
 			</div>
-			<span>{{ title }}</span>
+			<span>
+				{{ $baseText(`nodeCreator.subcategoryNames.${subcategoryName}`) }}
+			</span>
 		</div>
 
 		<div class="scrollable">
@@ -18,17 +20,26 @@
 </template>
 
 <script lang="ts">
+import camelcase from 'lodash.camelcase';
 import { INodeCreateElement } from '@/Interface';
 import Vue from 'vue';
 
 import ItemIterator from './ItemIterator.vue';
 
-export default Vue.extend({
+import { renderText } from '@/components/mixins/renderText';
+import mixins from 'vue-typed-mixins';
+
+export default mixins(renderText).extend({
 	name: 'SubcategoryPanel',
 	components: {
 		ItemIterator,
 	},
 	props: ['title', 'elements', 'activeIndex'],
+	computed: {
+		subcategoryName() {
+			return camelcase(this.title);
+		},
+	},
 	methods: {
 		selected(element: INodeCreateElement) {
 			this.$emit('selected', element);

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

@@ -95,9 +95,26 @@ export default mixins(
 
 				return null;
 			},
+			nodeTypeName(): string {
+				if (this.nodeType) {
+					const shortNodeType = this.nodeType.name.replace('n8n-nodes-base.', '');
+
+					return this.$headerText({
+						key: `headers.${shortNodeType}.displayName`,
+						fallback: this.nodeType.name,
+					});
+				}
+
+				return '';
+			},
 			nodeTypeDescription (): string {
 				if (this.nodeType && this.nodeType.description) {
-					return this.nodeType.description;
+					const shortNodeType = this.nodeType.name.replace('n8n-nodes-base.', '');
+
+					return this.$headerText({
+						key: `headers.${shortNodeType}.description`,
+						fallback: this.nodeType.description,
+					});
 				} else {
 					return this.$baseText('nodeSettings.noDescriptionFound');
 				}

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

@@ -19,10 +19,19 @@ export const renderText = Vue.extend({
 		},
 
 		/**
-		 * Render a string of dynamic text, i.e. a string with a constructed path to the localized value in the node text object, either in the credentials modal (`$credText`) or in the node view (`$nodeView`). **Private method**, to be called only from the two namespaces within this mixin.
+		 * Render a string of dynamic header text, used in the nodes panel and in the node view.
+		 */
+		$headerText(arg: { key: string; fallback: string; }) {
+			return this.__render(arg);
+		},
+
+		/**
+		 * Render a string of dynamic text, i.e. a string with a constructed path to the localized value in the node text object - in the credentials modal (`$credText`), in the node view (`$nodeText`), or in the headers (`$headerText`) in the nodes panel and node view. _Private method_, to be called only from within this mixin.
+		 *
+		 * Unlike in `$baseText`, the fallback has to be set manually for dynamic text.
 		 */
 		__render(
-			{ key, fallback }: { key: string, fallback: string },
+			{ key, fallback }: { key: string; fallback: string; },
 		) {
 			return this.$te(key) ? this.$t(key).toString() : fallback;
 		},

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

@@ -16,6 +16,7 @@ import {
 	IWorkflowShortResponse,
 	IRestApi,
 	IWorkflowDataUpdate,
+	INodeTranslationHeaders,
 } from '@/Interface';
 import {
 	IDataObject,
@@ -78,6 +79,10 @@ export const restApi = Vue.extend({
 					return self.restApi().makeRestApiRequest('POST', `/executions-current/${executionId}/stop`);
 				},
 
+				getNodeTranslationHeaders: (): Promise<INodeTranslationHeaders> => {
+					return self.restApi().makeRestApiRequest('GET', '/node-translation-headers');
+				},
+
 				// Returns all node-types
 				getNodeTypes: (onlyLatest = false): Promise<INodeTypeDescription[]> => {
 					return self.restApi().makeRestApiRequest('GET', `/node-types`, {onlyLatest});

packages/editor-ui/src/constants.ts

@@ -71,7 +71,7 @@ export const CUSTOM_NODES_CATEGORY = 'Custom Nodes';
 export const SUBCATEGORY_DESCRIPTIONS: {
 	[category: string]: { [subcategory: string]: string };
 } = {
-	'Core Nodes': {
+	'Core Nodes': { // this - all subkeys are set from codex
 		Flow: 'Branches, core triggers, merge data',
 		Files:  'Work with CSV, XML, text, images etc.',
 		'Data Transformation': 'Manipulate data fields, run code',

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

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 import englishBaseText from './locales/en';
 import axios from 'axios';
-import path from 'path';
+import { INodeTranslationHeaders } from '@/Interface';
 
 Vue.use(VueI18n);
 
@@ -27,6 +27,7 @@ function setLanguage(language: string) {
 }
 
 export async function loadLanguage(language?: string) {
+	// TODO i18n: Remove next line
 	console.log(`loadLanguage called with ${language}`); // eslint-disable-line no-console
 
 	if (!language) return Promise.resolve();
@@ -39,11 +40,11 @@ export async function loadLanguage(language?: string) {
 		return Promise.resolve(setLanguage(language));
 	}
 
-	const baseText = require(`./locales/${language}`).default; // TODO i18n: `path.join()`
+	const baseText = require(`./locales/${language}`).default;
 	i18n.setLocaleMessage(language, baseText);
 	loadedLanguages.push(language);
 
-	return setLanguage(language);
+	setLanguage(language);
 }
 
 export function addNodeTranslation(
@@ -65,3 +66,16 @@ export function addNodeTranslation(
 		Object.assign(i18n.messages[language], newNodesBase),
 	);
 }
+
+export function addHeaders(
+	headers: INodeTranslationHeaders,
+	language: string,
+) {
+	i18n.setLocaleMessage(
+		language,
+		Object.assign(i18n.messages[language], { headers }),
+	);
+
+	// TODO i18n: Remove next line
+	console.log(i18n.messages.de.headers); // eslint-disable-line no-console
+}

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

@@ -5,6 +5,52 @@ export default {
 			clientSecret: '🇩🇪 Client Secret',
 		},
 	},
+	nodeCreator: {
+		categoryNames: {
+			coreNodes: '🇩🇪 Core Nodes',
+			customNodes: '🇩🇪 Custom Nodes',
+			suggestedNodes: '🇩🇪 Suggested Nodes ✨',
+			analytics: '🇩🇪 Analytics',
+			communication: '🇩🇪 Communication',
+			dataStorage: '🇩🇪 Data & Storage',
+			development: '🇩🇪 Development',
+			financeAccounting: '🇩🇪 Finance & Accounting',
+			marketingContent: '🇩🇪 Marketing & Content',
+			productivity: '🇩🇪 Productivity',
+			sales: '🇩🇪 Sales',
+			utility: '🇩🇪 Utility',
+			miscellaneous: '🇩🇪 Miscellaneous',
+		},
+		subcategoryNames: {
+			dataTransformation: '🇩🇪 Data Transformation',
+			flow: '🇩🇪 Flow',
+			files: '🇩🇪 Files',
+			helpers: '🇩🇪 Helpers',
+		},
+		subcategoryDescriptions: {
+			manipulate: '🇩🇪 Manipulate data fields, run code',
+			branches: '🇩🇪 Branches, core triggers, merge data',
+			work: '🇩🇪 Work with CSV, XML, text, images etc.',
+			http: '🇩🇪 HTTP Requests (API calls), date and time, scrape HTML',
+		},
+		mainPanel: {
+			all: '🇩🇪 All',
+			regular: '🇩🇪 Regular',
+			trigger: '🇩🇪 Trigger',
+		},
+		searchBar: {
+			searchNodes: '🇩🇪 Search nodes...',
+		},
+		noResults: {
+			weDidntMakeThatYet: "🇩🇪 We didn't make that... yet",
+			dontWorryYouCanProbablyDoItWithThe: '🇩🇪 Don’t worry, you can probably do it with the {httpRequest} or {webhook} node',
+			httpRequest: '🇩🇪 HTTP Request',
+			webhook: '🇩🇪 Webhook',
+			node: '🇩🇪 node',
+			wantUsToMakeItFaster: '🇩🇪 Want us to make it faster?',
+			requestTheNode: '🇩🇪 Request the node',
+		},
+	},
 	textEdit: {
 		edit: '🇩🇪 Edit',
 	},

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

@@ -1,4 +1,50 @@
 export default {
+	nodeCreator: {
+		categoryNames: {
+			coreNodes: 'Core Nodes',
+			customNodes: 'Custom Nodes',
+			suggestedNodes: 'Suggested Nodes ✨',
+			analytics: 'Analytics',
+			communication: 'Communication',
+			dataStorage: 'Data & Storage',
+			development: 'Development',
+			financeAccounting: 'Finance & Accounting',
+			marketingContent: 'Marketing & Content',
+			productivity: 'Productivity',
+			sales: 'Sales',
+			utility: 'Utility',
+			miscellaneous: 'Miscellaneous',
+		},
+		subcategoryNames: {
+			dataTransformation: 'Data Transformation',
+			flow: 'Flow',
+			files: 'Files',
+			helpers: 'Helpers',
+		},
+		subcategoryDescriptions: {
+			manipulate: 'Manipulate data fields, run code',
+			branches: 'Branches, core triggers, merge data',
+			work: 'Work with CSV, XML, text, images etc.',
+			http: 'HTTP Requests (API calls), date and time, scrape HTML',
+		},
+		mainPanel: {
+			all: 'All',
+			regular: 'Regular',
+			trigger: 'Trigger',
+		},
+		searchBar: {
+			searchNodes: 'Search nodes...',
+		},
+		noResults: {
+			weDidntMakeThatYet: "We didn't make that... yet",
+			dontWorryYouCanProbablyDoItWithThe: 'Don’t worry, you can probably do it with the {httpRequest} or {webhook} node',
+			httpRequest: 'HTTP Request',
+			webhook: 'Webhook',
+			node: 'node',
+			wantUsToMakeItFaster: 'Want us to make it faster?',
+			requestTheNode: 'Request the node',
+		},
+	},
 	textEdit: {
 		edit: 'Edit',
 	},

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

@@ -170,7 +170,11 @@ import {
 	IExecutionsSummary,
 } from '../Interface';
 import { mapGetters } from 'vuex';
-import { loadLanguage, addNodeTranslation } from '@/i18n';
+import {
+	loadLanguage,
+	addNodeTranslation,
+	addHeaders,
+} from '@/i18n';
 
 const NODE_SIZE = 100;
 const DEFAULT_START_POSITION_X = 250;
@@ -245,9 +249,13 @@ export default mixins(
 				deep: true,
 			},
 
-			defaultLocale (newLocale, oldLocale) {
+			async defaultLocale (newLocale, oldLocale) {
+				// TODO i18n: Remove next line
 				console.log(`Switching locale from ${oldLocale} to ${newLocale}`); // eslint-disable-line no-console
 				loadLanguage(newLocale);
+
+				const headers = await this.restApi().getNodeTranslationHeaders();
+				addHeaders(headers, this.$store.getters.defaultLocale);
 			},
 		},
 		async beforeRouteLeave(to, from, next) {

packages/nodes-base/gulpfile.js

@@ -1,11 +1,141 @@
-const { src, dest } = require('gulp');
+const { existsSync, promises: { writeFile } } = require('fs');
+const path = require('path');
+const { task, src, dest } = require('gulp');
+
+const ALLOWED_HEADER_KEYS = ['displayName', 'description'];
+const PURPLE_ANSI_COLOR_CODE = 35;
+
+task('build:icons', copyIcons);
 
 function copyIcons() {
-	src('nodes/**/*.{png,svg}')
+	src('nodes/**/*.{png,svg}').pipe(dest('dist/nodes'))
-		.pipe(dest('dist/nodes'))
 
-	return src('credentials/**/*.{png,svg}')
+	return src('credentials/**/*.{png,svg}').pipe(dest('dist/credentials'));
-		.pipe(dest('dist/credentials'));
 }
 
-exports.default = copyIcons;
+task('build:translations', writeHeadersAndTranslations);
+
+/**
+ * Write all node translation headers at `/dist/nodes/headers.js` and write
+ * each node translation at `/dist/nodes/<node>/translations/<language>.js`
+ */
+function writeHeadersAndTranslations(done) {
+	checkLocale();
+
+	const paths = getTranslationPaths();
+	const { headers, translations } = getHeadersAndTranslations(paths);
+
+	const headersDestinationPath = path.join(__dirname, 'dist', 'nodes', 'headers.js');
+
+	writeDestinationFile(headersDestinationPath, headers);
+
+	log('Headers translation file written to:');
+	log(headersDestinationPath, { bulletpoint: true });
+
+	translations.forEach(t => {
+		writeDestinationFile(t.destinationPath, t.content);
+	});
+
+	log('Main translation files written to:');
+	translations.forEach(t => log(t.destinationPath, { bulletpoint: true }))
+
+	done();
+}
+
+function getTranslationPaths() {
+	const destinationPaths = require('./package.json').n8n.nodes;
+	const { N8N_DEFAULT_LOCALE: locale } = process.env;
+	const seen = {};
+
+	return destinationPaths.reduce((acc, cur) => {
+		const sourcePath = path.join(
+			__dirname,
+			cur.split('/').slice(1, -1).join('/'),
+			'translations',
+			`${locale}.ts`,
+		);
+
+		if (existsSync(sourcePath) && !seen[sourcePath]) {
+			seen[sourcePath] = true;
+
+			const destinationPath = path.join(
+				__dirname,
+				cur.split('/').slice(0, -1).join('/'),
+				'translations',
+				`${locale}.js`,
+			);
+
+			acc.push({
+				source: sourcePath,
+				destination: destinationPath,
+			});
+		};
+
+		return acc;
+	}, []);
+}
+
+function getHeadersAndTranslations(paths) {
+	return paths.reduce((acc, cur) => {
+		const translation = require(cur.source);
+		const nodeType = Object.keys(translation).pop();
+		const { header } = translation[nodeType];
+
+		if (isValidHeader(header, ALLOWED_HEADER_KEYS)) {
+			acc.headers[nodeType] = header;
+		}
+
+		acc.translations.push({
+			destinationPath: cur.destination,
+			content: translation,
+		});
+
+		return acc;
+	}, { headers: {}, translations: [] });
+}
+
+
+// ----------------------------------
+//             helpers
+// ----------------------------------
+
+function isValidHeader(header, allowedHeaderKeys) {
+	if (!header) return false;
+
+	const headerKeys = Object.keys(header);
+
+	return headerKeys.length > 0 &&
+		headerKeys.every(key => allowedHeaderKeys.includes(key));
+}
+
+function checkLocale() {
+	const { N8N_DEFAULT_LOCALE: locale } = process.env;
+
+	log(`Default locale set to: ${colorize(PURPLE_ANSI_COLOR_CODE, locale || 'en')}`);
+
+	if (!locale || locale === 'en') {
+		log('No translation required - Skipping translations build...');
+		return;
+	};
+}
+
+function writeDestinationFile(destinationPath, data) {
+	writeFile(
+		destinationPath,
+		`module.exports = ${JSON.stringify(data, null, 2)}`,
+	);
+}
+
+const log = (string, { bulletpoint } = { bulletpoint: false }) => {
+	if (bulletpoint) {
+		process.stdout.write(
+			colorize(PURPLE_ANSI_COLOR_CODE, `- ${string}\n`),
+		);
+		return;
+	};
+
+	process.stdout.write(`${string}\n`);
+};
+
+const colorize = (ansiColorCode, string) =>
+	['\033[', ansiColorCode, 'm', string, '\033[0m'].join('')

packages/nodes-base/nodes/Bitwarden/translations/de.ts

@@ -1,5 +1,9 @@
 module.exports = {
 	bitwarden: {
+		header: {
+			displayName: '🇩🇪 Bitwarden',
+			description: '🇩🇪 Consume Bitwarden API',
+		},
 		credentialsModal: {
 			bitwardenApi: {
 				environment: {

packages/nodes-base/nodes/Github/translations/de.ts

@@ -1,5 +1,9 @@
 module.exports = {
 	github: {
+		header: {
+			displayName: '🇩🇪 GitHub',
+			description: '🇩🇪 Consume GitHub API',
+		},
 		credentialsModal: {
 			githubOAuth2Api: {
 				server: {

packages/nodes-base/package.json

@@ -16,7 +16,8 @@
   "types": "dist/src/index.d.ts",
   "scripts": {
     "dev": "npm run watch",
-    "build": "tsc && gulp",
+    "build": "tsc && gulp build:icons && gulp build:translations",
+    "build:translations": "gulp build:translations",
     "format": "cd ../.. && node_modules/prettier/bin-prettier.js packages/nodes-base/**/**.ts --write",
     "lint": "tslint -p tsconfig.json -c tslint.json",
     "lintfix": "tslint --fix -p tsconfig.json -c tslint.json",