From 3d93ccf0cf4f62b07c49871825f4a518766ca470 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Thu, 3 Nov 2022 11:45:06 +0100 Subject: [PATCH] fix(editor): simplifying localisation functions --- .../CredentialEdit/CredentialInfo.vue | 7 +- packages/editor-ui/src/components/Node.vue | 5 +- .../components/Node/NodeCreator/NodeItem.vue | 12 +-- .../editor-ui/src/components/NodeSettings.vue | 12 +-- .../src/components/VariableSelector.vue | 5 +- packages/editor-ui/src/plugins/i18n/index.ts | 91 ++++--------------- packages/editor-ui/src/views/NodeView.vue | 5 +- 7 files changed, 28 insertions(+), 109 deletions(-) diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue index 3920ad357a..6001a1472f 100644 --- a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue +++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue @@ -14,15 +14,12 @@ > - {{ $locale.headerText({ key: `headers.${shortNodeType(node)}.displayName`, fallback: node.displayName })}} + {{ $locale.headerText(`headers.${shortNodeType(node)}.displayName`, node.displayName)}} diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 53720bb9ed..aae555ba29 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/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({ - key: `headers.start.displayName`, - fallback: 'Start', - }); + return this.$locale.headerText(`headers.start.displayName`, 'Start'); } return this.data.name; diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue index 574f55f77b..25fc8678dd 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue +++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue @@ -9,11 +9,7 @@
- {{ $locale.headerText({ - key: `headers.${shortNodeType}.displayName`, - fallback: nodeType.displayName, - }) - }} + {{ $locale.headerText(`headers.${shortNodeType}.displayName`, nodeType.displayName) }} @@ -30,11 +26,7 @@
- {{ $locale.headerText({ - key: `headers.${shortNodeType}.description`, - fallback: nodeType.description, - }) - }} + {{ $locale.headerText(`headers.${shortNodeType}.description`, nodeType.description) }}
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index 71f3dc8c5d..3d2d8a830f 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/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({ - key: `headers.${shortNodeType}.displayName`, - fallback: this.nodeType.name, - }); + return this.$locale.headerText(`headers.${shortNodeType}.displayName`, 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({ - key: `headers.${shortNodeType}.description`, - fallback: this.nodeType.description, - }); + return this.$locale.headerText(`headers.${shortNodeType}.description`, this.nodeType.description); } else { return this.$locale.baseText('nodeSettings.noDescriptionFound'); } diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue index 10cc87dd5e..80fd98eff0 100644 --- a/packages/editor-ui/src/components/VariableSelector.vue +++ b/packages/editor-ui/src/components/VariableSelector.vue @@ -696,10 +696,7 @@ export default mixins( allNodesData.push( { - name: this.$locale.headerText({ - key: `headers.${shortNodeType}.displayName`, - fallback: nodeName, - }), + name: this.$locale.headerText(`headers.${shortNodeType}.displayName`, nodeName), options: this.sortOptions(nodeOptions), }, ); diff --git a/packages/editor-ui/src/plugins/i18n/index.ts b/packages/editor-ui/src/plugins/i18n/index.ts index 15a7a63647..ff0b30cc0e 100644 --- a/packages/editor-ui/src/plugins/i18n/index.ts +++ b/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( - { key, fallback }: { key: string; fallback: string; }, - ) { + private dynamicRender(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; }) { - return this.dynamicRender(arg); + headerText(key: string, fallback = '') { + return this.dynamicRender(key, fallback); } /** @@ -108,16 +106,10 @@ export class I18nClass { { name: parameterName, displayName }: INodeProperties, ) { if (['clientId', 'clientSecret'].includes(parameterName)) { - return context.dynamicRender({ - key: `_reusableDynamicText.oauth2.${parameterName}`, - fallback: displayName, - }); + return context.dynamicRender(`_reusableDynamicText.oauth2.${parameterName}`, displayName); } - return context.dynamicRender({ - key: `${credentialPrefix}.${parameterName}.displayName`, - fallback: displayName, - }); + return context.dynamicRender(`${credentialPrefix}.${parameterName}.displayName`, displayName); }, /** @@ -126,10 +118,7 @@ export class I18nClass { hint( { name: parameterName, hint }: INodeProperties, ) { - return context.dynamicRender({ - key: `${credentialPrefix}.${parameterName}.hint`, - fallback: hint ?? '', - }); + return context.dynamicRender(`${credentialPrefix}.${parameterName}.hint`, hint); }, /** @@ -138,10 +127,7 @@ export class I18nClass { inputLabelDescription( { name: parameterName, description }: INodeProperties, ) { - return context.dynamicRender({ - key: `${credentialPrefix}.${parameterName}.description`, - fallback: description ?? '', - }); + return context.dynamicRender(`${credentialPrefix}.${parameterName}.description`, description); }, /** @@ -151,10 +137,7 @@ export class I18nClass { { name: parameterName }: INodeProperties, { value: optionName, name: displayName }: INodePropertyOptions, ) { - return context.dynamicRender({ - key: `${credentialPrefix}.${parameterName}.options.${optionName}.displayName`, - fallback: displayName, - }); + return context.dynamicRender(`${credentialPrefix}.${parameterName}.options.${optionName}.displayName`, displayName); }, /** @@ -164,10 +147,7 @@ export class I18nClass { { name: parameterName }: INodeProperties, { value: optionName, description }: INodePropertyOptions, ) { - return context.dynamicRender({ - key: `${credentialPrefix}.${parameterName}.options.${optionName}.description`, - fallback: description ?? '', - }); + return context.dynamicRender(`${credentialPrefix}.${parameterName}.options.${optionName}.description`, description); }, /** @@ -176,10 +156,7 @@ export class I18nClass { placeholder( { name: parameterName, placeholder }: INodeProperties, ) { - return context.dynamicRender({ - key: `${credentialPrefix}.${parameterName}.placeholder`, - fallback: placeholder ?? '', - }); + return context.dynamicRender(`${credentialPrefix}.${parameterName}.placeholder`, placeholder); }, }; } @@ -203,11 +180,7 @@ export class I18nClass { path: string, ) { const middleKey = deriveMiddleKey(path, parameter); - - return context.dynamicRender({ - key: `${initialKey}.${middleKey}.displayName`, - fallback: parameter.displayName, - }); + return context.dynamicRender(`${initialKey}.${middleKey}.displayName`, parameter.displayName); }, /** @@ -218,11 +191,7 @@ export class I18nClass { path: string, ) { const middleKey = deriveMiddleKey(path, parameter); - - return context.dynamicRender({ - key: `${initialKey}.${middleKey}.description`, - fallback: parameter.description ?? '', - }); + return context.dynamicRender(`${initialKey}.${middleKey}.description`, parameter.description); }, /** @@ -233,11 +202,7 @@ export class I18nClass { path: string, ) { const middleKey = deriveMiddleKey(path, parameter); - - return context.dynamicRender({ - key: `${initialKey}.${middleKey}.hint`, - fallback: parameter.hint ?? '', - }); + return context.dynamicRender(`${initialKey}.${middleKey}.hint`, parameter.hint); }, /** @@ -257,10 +222,7 @@ export class I18nClass { middleKey = insertOptionsAndValues(pathSegments).join('.'); } - return context.dynamicRender({ - key: `${initialKey}.${middleKey}.placeholder`, - fallback: parameter.placeholder ?? '', - }); + return context.dynamicRender(`${initialKey}.${middleKey}.placeholder`, parameter.placeholder); }, /** @@ -279,10 +241,7 @@ export class I18nClass { middleKey = insertOptionsAndValues(pathSegments).join('.'); } - return context.dynamicRender({ - key: `${initialKey}.${middleKey}.options.${optionName}.displayName`, - fallback: displayName, - }); + return context.dynamicRender(`${initialKey}.${middleKey}.options.${optionName}.displayName`, displayName); }, /** @@ -301,10 +260,7 @@ export class I18nClass { middleKey = insertOptionsAndValues(pathSegments).join('.'); } - return context.dynamicRender({ - key: `${initialKey}.${middleKey}.options.${optionName}.description`, - fallback: description ?? '', - }); + return context.dynamicRender(`${initialKey}.${middleKey}.options.${optionName}.description`, description); }, /** @@ -324,10 +280,7 @@ export class I18nClass { middleKey = insertOptionsAndValues(pathSegments).join('.'); } - return context.dynamicRender({ - key: `${initialKey}.${middleKey}.options.${optionName}.displayName`, - fallback: displayName, - }); + return context.dynamicRender(`${initialKey}.${middleKey}.options.${optionName}.displayName`, displayName); }, /** @@ -337,20 +290,14 @@ export class I18nClass { multipleValueButtonText( { name: parameterName, typeOptions}: INodeProperties, ) { - return context.dynamicRender({ - key: `${initialKey}.${parameterName}.multipleValueButtonText`, - fallback: typeOptions!.multipleValueButtonText!, - }); + return context.dynamicRender(`${initialKey}.${parameterName}.multipleValueButtonText`, typeOptions?.multipleValueButtonText); }, eventTriggerDescription( nodeType: string, eventTriggerDescription: string, ) { - return context.dynamicRender({ - key: `n8n-nodes-base.nodes.${nodeType}.nodeView.eventTriggerDescription`, - fallback: eventTriggerDescription, - }); + return context.dynamicRender(`n8n-nodes-base.nodes.${nodeType}.nodeView.eventTriggerDescription`, eventTriggerDescription); }, }; } diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 02152c21a2..2cca3f47df 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/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({ - key: `headers.${this.$locale.shortNodeType(type)}.displayName`, - fallback: originalName, - }); + return this.$locale.headerText(`headers.${this.$locale.shortNodeType(type)}.displayName`, originalName); }, getUniqueNodeName({ originalName,