feat(editor): Use i18n component instead od v-html for localization

* feat(editor): Export i18n instance and bind it to Vue instance

* feat(editor): Audit usage of v-html and replace with alternatives where possible

* 🔀 Fix conflicted element in RunDataTable

* ♻️ Refactor issues elements with the new TitledList component

* 🐛 Fixing unknown node modal dialog content rendering

Co-authored-by: Milorad Filipovic <milorad@n8n.io>
This commit is contained in:
OlegIvaniv
2022-09-05 16:36:22 +02:00
committed by GitHub
parent bbd967bbdf
commit 287533e6c8
16 changed files with 141 additions and 65 deletions

View File

@@ -6,13 +6,13 @@
<div v-if="!data.disabled" :class="{'node-info-icon': true, 'shift-icon': shiftOutputCount}">
<div v-if="hasIssues" class="node-issues">
<n8n-tooltip placement="bottom" >
<div slot="content" v-html="nodeIssues"></div>
<titled-list slot="content" :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />
<font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip>
</div>
<div v-else-if="waiting" class="waiting">
<n8n-tooltip placement="bottom">
<div slot="content" v-html="waiting"></div>
<div slot="content" v-text="waiting"></div>
<font-awesome-icon icon="clock" />
</n8n-tooltip>
</div>
@@ -105,6 +105,7 @@ import {
} from 'n8n-workflow';
import NodeIcon from '@/components/NodeIcon.vue';
import TitledList from '@/components/TitledList.vue';
import mixins from 'vue-typed-mixins';
@@ -121,6 +122,7 @@ export default mixins(
).extend({
name: 'Node',
components: {
TitledList,
NodeIcon,
},
computed: {
@@ -200,14 +202,12 @@ export default mixins(
executing: this.isExecuting,
};
},
nodeIssues (): string {
nodeIssues (): string[] {
if (this.data.issues === undefined) {
return '';
return [];
}
const nodeIssues = NodeHelpers.nodeIssuesToString(this.data.issues, this.data);
return `${this.$locale.baseText('node.issues')}:<br />&nbsp;&nbsp;- ` + nodeIssues.join('<br />&nbsp;&nbsp;- ');
return NodeHelpers.nodeIssuesToString(this.data.issues, this.data);
},
nodeDisabledIcon (): string {
if (this.data.disabled === false) {