mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): simplifying localisation functions

Browse source
This commit is contained in:
Csaba Tuncsik 2022-11-03 11:45:06 +01:00
parent 25d4a5077d
commit 3d93ccf0cf
7 changed files with 28 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
View file

@ -14,15 +14,12 @@
>
<el-checkbox
v-if="credentialPermissions.updateNodeAccess"
:label="$locale.headerText({
key: `headers.${shortNodeType(node)}.displayName`,
fallback: node.displayName,
})"
:label="$locale.headerText(`headers.${shortNodeType(node)}.displayName`, 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>

5
packages/editor-ui/src/components/Node.vue
View file

@ -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;

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

@ -9,11 +9,7 @@
<div>
<div :class="$style.details">
<span :class="$style.name">
{{ $locale.headerText({
key: `headers.${shortNodeType}.displayName`,
fallback: nodeType.displayName,
})
}}
{{ $locale.headerText(`headers.${shortNodeType}.displayName`, 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({
key: `headers.${shortNodeType}.description`,
fallback: nodeType.description,
})
}}
{{ $locale.headerText(`headers.${shortNodeType}.description`, nodeType.description) }}
</div>
<div :class="$style['draggable-data-transfer']" ref="draggableDataTransfer" />

12
packages/editor-ui/src/components/NodeSettings.vue
View file

@ -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');
}

5
packages/editor-ui/src/components/VariableSelector.vue
View file

@ -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),
},
);

91
packages/editor-ui/src/plugins/i18n/index.ts
View file

@ -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);
},
};
}

5
packages/editor-ui/src/views/NodeView.vue
View file

@ -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,