fix(editor): simplifying localisation functions

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

@@ -14,15 +14,12 @@
 				>
 					<el-checkbox
 						v-if="credentialPermissions.updateNodeAccess"
-						:label="$locale.headerText({
+						:label="$locale.headerText(`headers.${shortNodeType(node)}.displayName`, node.displayName)"
-							key: `headers.${shortNodeType(node)}.displayName`,
-							fallback: node.displayName,
-						})"
 						:value="!!nodeAccess[node.name]"
 						@change="(val) => onNodeAccessChange(node.name, val)"
 					/>
 					<n8n-text v-else>
-						{{ $locale.headerText({ key: `headers.${shortNodeType(node)}.displayName`, fallback: node.displayName })}}
+						{{ $locale.headerText(`headers.${shortNodeType(node)}.displayName`, node.displayName)}}
 					</n8n-text>
 				</div>
 			</el-col>

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

@@ -252,10 +252,7 @@ export default mixins(
 		},
 		nodeTitle (): string {
 			if (this.data.name === 'Start') {
-				return this.$locale.headerText({
+				return this.$locale.headerText(`headers.start.displayName`, 'Start');
-					key: `headers.start.displayName`,
-					fallback: 'Start',
-				});
 			}
 
 			return this.data.name;

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

@@ -9,11 +9,7 @@
 		<div>
 			<div :class="$style.details">
 				<span :class="$style.name">
-					{{ $locale.headerText({
+					{{ $locale.headerText(`headers.${shortNodeType}.displayName`, nodeType.displayName) }}
-							key: `headers.${shortNodeType}.displayName`,
-							fallback: nodeType.displayName,
-						})
-					}}
 				</span>
 				<span v-if="isTrigger" :class="$style['trigger-icon']">
 					<trigger-icon />
@@ -30,11 +26,7 @@
 				</n8n-tooltip>
 			</div>
 			<div :class="$style.description">
-				{{ $locale.headerText({
+				{{ $locale.headerText(`headers.${shortNodeType}.description`, nodeType.description) }}
-						key: `headers.${shortNodeType}.description`,
-						fallback: nodeType.description,
-					})
-				}}
 			</div>
 
 			<div :class="$style['draggable-data-transfer']" ref="draggableDataTransfer" />

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

@@ -171,11 +171,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 		nodeTypeName(): string {
 			if (this.nodeType) {
 				const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
-
+				return this.$locale.headerText(`headers.${shortNodeType}.displayName`, this.nodeType.name);
-				return this.$locale.headerText({
-					key: `headers.${shortNodeType}.displayName`,
-					fallback: this.nodeType.name,
-				});
 			}
 
 			return '';
@@ -183,11 +179,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 		nodeTypeDescription(): string {
 			if (this.nodeType && this.nodeType.description) {
 				const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
-
+				return this.$locale.headerText(`headers.${shortNodeType}.description`, this.nodeType.description);
-				return this.$locale.headerText({
-					key: `headers.${shortNodeType}.description`,
-					fallback: this.nodeType.description,
-				});
 			} else {
 				return this.$locale.baseText('nodeSettings.noDescriptionFound');
 			}

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

@@ -696,10 +696,7 @@ export default mixins(
 
 					allNodesData.push(
 						{
-							name: this.$locale.headerText({
+							name: this.$locale.headerText(`headers.${shortNodeType}.displayName`, nodeName),
-								key: `headers.${shortNodeType}.displayName`,
-								fallback: nodeName,
-							}),
 							options: this.sortOptions(nodeOptions),
 						},
 					);

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

@@ -77,9 +77,7 @@ export class I18nClass {
 	/**
 	 * Render a string of dynamic text, i.e. a string with a constructed path to the localized value.
 	 */
-	private dynamicRender(
+	private dynamicRender(key: string, fallback = ''): string {
-		{ key, fallback }: { key: string; fallback: string; },
-	) {
 		return this.i18n.te(key) ? this.i18n.t(key).toString() : fallback;
 	}
 
@@ -87,8 +85,8 @@ export class I18nClass {
 	 * Render a string of header text (a node's name and description),
 	 * used variously in the nodes panel, under the node icon, etc.
 	 */
-	headerText(arg: { key: string; fallback: string; }) {
+	headerText(key: string, fallback = '') {
-		return this.dynamicRender(arg);
+		return this.dynamicRender(key, fallback);
 	}
 
 	/**
@@ -108,16 +106,10 @@ export class I18nClass {
 				{ name: parameterName, displayName }: INodeProperties,
 			) {
 				if (['clientId', 'clientSecret'].includes(parameterName)) {
-					return context.dynamicRender({
+					return context.dynamicRender(`_reusableDynamicText.oauth2.${parameterName}`, displayName);
-						key: `_reusableDynamicText.oauth2.${parameterName}`,
-						fallback: displayName,
-					});
 				}
 
-				return context.dynamicRender({
+				return context.dynamicRender(`${credentialPrefix}.${parameterName}.displayName`, displayName);
-					key: `${credentialPrefix}.${parameterName}.displayName`,
-					fallback: displayName,
-				});
 			},
 
 			/**
@@ -126,10 +118,7 @@ export class I18nClass {
 			hint(
 				{ name: parameterName, hint }: INodeProperties,
 			) {
-				return context.dynamicRender({
+				return context.dynamicRender(`${credentialPrefix}.${parameterName}.hint`, hint);
-					key: `${credentialPrefix}.${parameterName}.hint`,
-					fallback: hint ?? '',
-				});
 			},
 
 			/**
@@ -138,10 +127,7 @@ export class I18nClass {
 			inputLabelDescription(
 				{ name: parameterName, description }: INodeProperties,
 			) {
-				return context.dynamicRender({
+				return context.dynamicRender(`${credentialPrefix}.${parameterName}.description`, description);
-					key: `${credentialPrefix}.${parameterName}.description`,
-					fallback: description ?? '',
-				});
 			},
 
 			/**
@@ -151,10 +137,7 @@ export class I18nClass {
 				{ name: parameterName }: INodeProperties,
 				{ value: optionName, name: displayName }: INodePropertyOptions,
 			) {
-				return context.dynamicRender({
+				return context.dynamicRender(`${credentialPrefix}.${parameterName}.options.${optionName}.displayName`, displayName);
-					key: `${credentialPrefix}.${parameterName}.options.${optionName}.displayName`,
-					fallback: displayName,
-				});
 			},
 
 			/**
@@ -164,10 +147,7 @@ export class I18nClass {
 				{ name: parameterName }: INodeProperties,
 				{ value: optionName, description }: INodePropertyOptions,
 			) {
-				return context.dynamicRender({
+				return context.dynamicRender(`${credentialPrefix}.${parameterName}.options.${optionName}.description`, description);
-					key: `${credentialPrefix}.${parameterName}.options.${optionName}.description`,
-					fallback: description ?? '',
-				});
 			},
 
 			/**
@@ -176,10 +156,7 @@ export class I18nClass {
 			placeholder(
 				{ name: parameterName, placeholder }: INodeProperties,
 			) {
-				return context.dynamicRender({
+				return context.dynamicRender(`${credentialPrefix}.${parameterName}.placeholder`, placeholder);
-					key: `${credentialPrefix}.${parameterName}.placeholder`,
-					fallback: placeholder ?? '',
-				});
 			},
 		};
 	}
@@ -203,11 +180,7 @@ export class I18nClass {
 				path: string,
 			) {
 				const middleKey = deriveMiddleKey(path, parameter);
-
+				return context.dynamicRender(`${initialKey}.${middleKey}.displayName`, parameter.displayName);
-				return context.dynamicRender({
-					key: `${initialKey}.${middleKey}.displayName`,
-					fallback: parameter.displayName,
-				});
 			},
 
 			/**
@@ -218,11 +191,7 @@ export class I18nClass {
 				path: string,
 			) {
 				const middleKey = deriveMiddleKey(path, parameter);
-
+				return context.dynamicRender(`${initialKey}.${middleKey}.description`, parameter.description);
-				return context.dynamicRender({
-					key: `${initialKey}.${middleKey}.description`,
-					fallback: parameter.description ?? '',
-				});
 			},
 
 			/**
@@ -233,11 +202,7 @@ export class I18nClass {
 				path: string,
 			) {
 				const middleKey = deriveMiddleKey(path, parameter);
-
+				return context.dynamicRender(`${initialKey}.${middleKey}.hint`, parameter.hint);
-				return context.dynamicRender({
-					key: `${initialKey}.${middleKey}.hint`,
-					fallback: parameter.hint ?? '',
-				});
 			},
 
 			/**
@@ -257,10 +222,7 @@ export class I18nClass {
 					middleKey = insertOptionsAndValues(pathSegments).join('.');
 				}
 
-				return context.dynamicRender({
+				return context.dynamicRender(`${initialKey}.${middleKey}.placeholder`, parameter.placeholder);
-					key: `${initialKey}.${middleKey}.placeholder`,
-					fallback: parameter.placeholder ?? '',
-				});
 			},
 
 			/**
@@ -279,10 +241,7 @@ export class I18nClass {
 					middleKey = insertOptionsAndValues(pathSegments).join('.');
 				}
 
-				return context.dynamicRender({
+				return context.dynamicRender(`${initialKey}.${middleKey}.options.${optionName}.displayName`, displayName);
-					key: `${initialKey}.${middleKey}.options.${optionName}.displayName`,
-					fallback: displayName,
-				});
 			},
 
 			/**
@@ -301,10 +260,7 @@ export class I18nClass {
 					middleKey = insertOptionsAndValues(pathSegments).join('.');
 				}
 
-				return context.dynamicRender({
+				return context.dynamicRender(`${initialKey}.${middleKey}.options.${optionName}.description`, description);
-					key: `${initialKey}.${middleKey}.options.${optionName}.description`,
-					fallback: description ?? '',
-				});
 			},
 
 			/**
@@ -324,10 +280,7 @@ export class I18nClass {
 					middleKey = insertOptionsAndValues(pathSegments).join('.');
 				}
 
-				return context.dynamicRender({
+				return context.dynamicRender(`${initialKey}.${middleKey}.options.${optionName}.displayName`, displayName);
-					key: `${initialKey}.${middleKey}.options.${optionName}.displayName`,
-					fallback: displayName,
-				});
 			},
 
 			/**
@@ -337,20 +290,14 @@ export class I18nClass {
 			multipleValueButtonText(
 				{ name: parameterName, typeOptions}: INodeProperties,
 			) {
-				return context.dynamicRender({
+				return context.dynamicRender(`${initialKey}.${parameterName}.multipleValueButtonText`, typeOptions?.multipleValueButtonText);
-					key: `${initialKey}.${parameterName}.multipleValueButtonText`,
-					fallback: typeOptions!.multipleValueButtonText!,
-				});
 			},
 
 			eventTriggerDescription(
 				nodeType: string,
 				eventTriggerDescription: string,
 			) {
-				return context.dynamicRender({
+				return context.dynamicRender(`n8n-nodes-base.nodes.${nodeType}.nodeView.eventTriggerDescription`, eventTriggerDescription);
-					key: `n8n-nodes-base.nodes.${nodeType}.nodeView.eventTriggerDescription`,
-					fallback: eventTriggerDescription,
-				});
 			},
 		};
 	}

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

@@ -555,10 +555,7 @@ export default mixins(
 				this.updateNodesExecutionIssues();
 			},
 			translateName(type: string, originalName: string) {
-				return this.$locale.headerText({
+				return this.$locale.headerText(`headers.${this.$locale.shortNodeType(type)}.displayName`, originalName);
-					key: `headers.${this.$locale.shortNodeType(type)}.displayName`,
-					fallback: originalName,
-				});
 			},
 			getUniqueNodeName({
 				originalName,