✨ Render header strings

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

@@ -1,15 +1,25 @@
-<template functional>
-	<div :class="{[$style['node-item']]: true, [$style.bordered]: props.bordered}">
-		<NodeIcon :class="$style['node-icon']" :nodeType="props.nodeType" />
+<template>
+	<div :class="{[$style['node-item']]: true, [$style.bordered]: bordered}">
+		<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>