refactor(editor): Implemented NodeIcon design system component (#3727)

* ✨ Implemented `NodeIcon` design system component

* ✨ Updated editor to use N8nNodeIcon component, removed HoverableNodeIcon

* ➕ Adding design system types import to editor-ui

* ✔️ Fixing linting errors

* 👌 Updating `NodeIcon` component based on review feedback

* 👌 Minor changes to `NodeIcon` component

* 👌 Removing unnecessary `Vue.use statement

* 🐛 Fixing unknown node icon bug and adding click listener to node icon component

* 💄 Removing unnecessary pointer cursor from the `NodeIcon` component

* 💄 Adding pointer cursor to node icons in the template details

* 💄 Updating node icon size in collections page

packages/design-system/src/components/N8nNodeIcon/NodeIcon.stories.ts

@@ -0,0 +1,40 @@
+/* tslint:disable:variable-name */
+import N8nNodeIcon from "./NodeIcon.vue";
+import { StoryFn } from '@storybook/vue';
+
+export default {
+	title: 'Atoms/NodeIcon',
+	component: N8nNodeIcon,
+};
+
+const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nNodeIcon,
+	},
+	template: '<n8n-node-icon v-bind="$props"></n8n-node-icon>',
+});
+
+export const FileIcon = DefaultTemplate.bind({});
+FileIcon.args = {
+	type: 'file',
+	src: 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/cartman.svg',
+	size: 200,
+};
+
+export const FontIcon = DefaultTemplate.bind({});
+FontIcon.args = {
+	type: 'icon',
+	name: 'cogs',
+	size: 200,
+};
+
+export const Hoverable = DefaultTemplate.bind({});
+Hoverable.args = {
+	type: 'icon',
+	name: 'heart',
+	color: 'red',
+	size: 200,
+	nodeTypeName: 'We ❤️ n8n',
+	showTooltip: true,
+};

packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue

@@ -0,0 +1,135 @@
+<template>
+	<div class="n8n-node-icon">
+		<div
+			:class="{
+				[$style['node-icon-wrapper']]: true,
+				[$style['circle']]: this.circle,
+				[$style['disabled']]: this.disabled,
+			}"
+			:style="iconStyleData"
+			v-on="$listeners"
+		>
+			<n8n-tooltip placement="top" :disabled="!showTooltip">
+				<template #content>{{ nodeTypeName }}</template>
+				<div v-if="type !== 'unknown'" :class="$style['icon']">
+					<img v-if="type === 'file'" :src="src" :class="$style['node-icon-image']" />
+					<font-awesome-icon v-else :icon="name" :style="fontStyleData" />
+				</div>
+				<div v-else :class="$style['node-icon-placeholder']">
+					{{ nodeTypeName? nodeTypeName.charAt(0) : '?' }}
+					?
+				</div>
+			</n8n-tooltip>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import N8nTooltip from '../N8nTooltip';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+export default Vue.extend({
+	name: 'n8n-node-icon',
+	components: {
+		N8nTooltip,
+		FontAwesomeIcon,
+	},
+	props: {
+		type: {
+			type: String,
+			required: true,
+			validator: (value: string): boolean =>
+				['file', 'icon', 'unknown'].includes(value),
+		},
+		src: {
+			type: String,
+		},
+		name: {
+			type: String,
+		},
+		nodeTypeName: {
+			type: String,
+		},
+		size: {
+			type: Number,
+		},
+		disabled: {
+			type: Boolean,
+		},
+		circle: {
+			type: Boolean,
+		},
+		color: {
+			type: String,
+		},
+		showTooltip: {
+			type: Boolean,
+		},
+	},
+	computed: {
+		iconStyleData (): object {
+			if(!this.size) {
+				return {
+					color: this.color || '',
+				};
+			}
+			return {
+				color: this.color || '',
+				width: `${this.size}px`,
+				height: `${this.size}px`,
+				'font-size': `${this.size}px`,
+				'line-height': `${this.size}px`,
+			};
+		},
+		fontStyleData (): object {
+			return {
+				'max-width': `${this.size}px`,
+			};
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.node-icon-wrapper {
+	width: 26px;
+	height: 26px;
+	border-radius: var(--border-radius-small);
+	color: #444;
+	line-height: 26px;
+	font-size: 1.1em;
+	overflow: hidden;
+	text-align: center;
+	font-weight: bold;
+	font-size: 20px;
+}
+
+.icon {
+	height: 100%;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.node-icon-placeholder {
+	text-align: center;
+}
+
+.node-icon-image {
+	width: 100%;
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.circle {
+	border-radius: 50%;
+}
+
+.disabled {
+	color: '#ccc';
+	-webkit-filter: contrast(40%) brightness(1.5) grayscale(100%);
+			filter: contrast(40%) brightness(1.5) grayscale(100%);
+}
+</style>

packages/design-system/src/components/N8nNodeIcon/index.ts

@@ -0,0 +1,3 @@
+import N8nNodeIcon from './NodeIcon.vue';
+
+export default N8nNodeIcon;

packages/design-system/src/components/index.ts

@@ -57,6 +57,7 @@ import N8nLoading from './N8nLoading';
 import N8nMarkdown from './N8nMarkdown';
 import N8nMenu from './N8nMenu';
 import N8nMenuItem from './N8nMenuItem';
+import N8nNodeIcon from './N8nNodeIcon';
 import N8nNotice from './N8nNotice';
 import N8nLink from './N8nLink';
 import N8nOption from './N8nOption';
@@ -103,6 +104,7 @@ export {
 	N8nMenu,
 	N8nMenuItem,
 	N8nNotice,
+	N8nNodeIcon,
 	N8nOption,
 	N8nPulse,
 	N8nRadioButtons,

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

@@ -1,34 +1,37 @@
 <template>
-	<div class="node-icon-wrapper" :style="iconStyleData">
+	<n8n-node-icon
-		<div v-if="nodeIconData !== null" class="icon">
+		:type="type"
-			<img v-if="nodeIconData.type === 'file'" :src="nodeIconData.fileBuffer || nodeIconData.path" :style="imageStyleData" />
+		:src="iconSource.path || iconSource.fileBuffer"
-			<font-awesome-icon v-else :icon="nodeIconData.icon || nodeIconData.path" :style="fontStyleData" />
+		:name="iconSource.icon"
-		</div>
+		:color="color"
-		<div v-else class="node-icon-placeholder">
+		:disabled="disabled"
-			{{nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
+		:size="size"
-		</div>
+		:circle="circle"
-	</div>
+		:nodeTypeName="nodeType ? nodeType.displayName : ''"
+		:showTooltip="showTooltip"
+		@click="(e) => $emit('click')"
+	></n8n-node-icon>
 </template>
 
 <script lang="ts">
-
 import { IVersionNode } from '@/Interface';
 import { INodeTypeDescription } from 'n8n-workflow';
 import Vue from 'vue';
 
-interface NodeIconData {
+interface NodeIconSource {
-	type: string;
+		path?: string;
-	path?: string;
+		fileBuffer?: string;
-	fileExtension?: string;
+		icon?: string;
-	fileBuffer?: string;
 }
 
 export default Vue.extend({
 	name: 'NodeIcon',
 	props: {
-		nodeType: {},
+		nodeType: {
+		},
 		size: {
 			type: Number,
+			required: false,
 		},
 		disabled: {
 			type: Boolean,
@@ -38,106 +41,60 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		showTooltip: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
-		iconStyleData (): object {
+		type (): string {
 			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
-			const color = nodeType ? nodeType.defaults && nodeType!.defaults.color : '';
+			let iconType = 'unknown';
-			if (!this.size) {
+			if (nodeType) {
-				return {color};
+				if ((nodeType as IVersionNode).iconData) {
-			}
+					iconType = (nodeType as IVersionNode).iconData.type;
-
+				} else if (nodeType.icon) {
-			return {
+					iconType = nodeType.icon.split(':')[0] === 'file' ? 'file' : 'icon';
-				color,
-				width: this.size + 'px',
-				height: this.size + 'px',
-				'font-size': this.size + 'px',
-				'line-height': this.size + 'px',
-				'border-radius': this.circle ? '50%': '2px',
-				...(this.disabled && {
-					color: 'var(--color-text-light)',
-					'-webkit-filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
-					'filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
-				}),
-			};
-		},
-		fontStyleData (): object {
-			return {
-				'max-width': this.size + 'px',
-			};
-		},
-		imageStyleData (): object {
-			return {
-				width: '100%',
-				'max-width': '100%',
-				'max-height': '100%',
-			};
-		},
-		isSvgIcon (): boolean {
-			if (this.nodeIconData && this.nodeIconData.type === 'file' && this.nodeIconData.fileExtension === 'svg') {
-				return true;
-			}
-			return false;
-		},
-		nodeIconData (): null | NodeIconData {
-			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
-			if (nodeType === null) {
-				return null;
-			}
-
-			if ((nodeType as IVersionNode).iconData) {
-				return (nodeType as IVersionNode).iconData;
-			}
-
-			const restUrl = this.$store.getters.getRestUrl;
-
-			if (nodeType.icon) {
-				let type, path;
-				[type, path] = nodeType.icon.split(':');
-				const returnData: NodeIconData = {
-					type,
-					path,
-				};
-
-				if (type === 'file') {
-					returnData.path = restUrl + '/node-icon/' + nodeType.name;
-					returnData.fileExtension = path.split('.').slice(-1).join();
 				}
-
-				return returnData;
 			}
-			return null;
+			return iconType;
+		},
+		color () : string {
+			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
+			if (nodeType && nodeType.defaults && nodeType.defaults.color) {
+				return nodeType.defaults.color.toString();
+			}
+			return '';
+		},
+		iconSource () : NodeIconSource {
+			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
+			const restUrl = this.$store.getters.getRestUrl;
+			const iconSource = {} as NodeIconSource;
+
+			if (nodeType) {
+				// If node type has icon data, use it
+				if ((nodeType as IVersionNode).iconData) {
+					return {
+						icon: (nodeType as IVersionNode).iconData.icon,
+						fileBuffer: (nodeType as IVersionNode).iconData.fileBuffer,
+					};
+				}
+				// Otherwise, extract it from icon prop
+				if (nodeType.icon) {
+					let type, path;
+					[type, path] = nodeType.icon.split(':');
+					if (type === 'file') {
+						iconSource.path = `${restUrl}/node-icon/${nodeType.name}`;
+					} else {
+						iconSource.icon = path;
+					}
+				}
+			}
+			return iconSource;
 		},
 	},
 });
 </script>
 
 <style lang="scss">
-
-.node-icon-wrapper {
-	width: 26px;
-	height: 26px;
-	border-radius: 2px;
-	color: #444;
-	line-height: 26px;
-	font-size: 1.1em;
-	overflow: hidden;
-	text-align: center;
-	font-weight: bold;
-	font-size: 20px;
-
-	.icon {
-		height: 100%;
-		width: 100%;
-
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.node-icon-placeholder {
-		text-align: center;
-	}
-}
-
 </style>

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

@@ -1,7 +1,11 @@
 <template>
 	<div :class="$style.list">
 		<div v-for="node in slicedNodes" :class="[$style.container, $style[size]]" :key="node.name">
-			<HoverableNodeIcon :nodeType="node" :size="size === 'md'? 24: 18" :title="node.name" />
+			<NodeIcon
+				:nodeType="node"
+				:size="size === 'md'? 24: 18"
+				:showTooltip="true"
+			/>
 		</div>
 		<div :class="[$style.button, size === 'md' ? $style.buttonMd : $style.buttonSm]" v-if="filteredCoreNodes.length > limit + 1">
 			+{{ hiddenNodes }}
@@ -10,14 +14,11 @@
 </template>
 
 <script lang="ts">
-import HoverableNodeIcon from '@/components/HoverableNodeIcon.vue';
+import NodeIcon from '@/components/NodeIcon.vue';
-
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { ITemplatesNode } from '@/Interface';
-
 import mixins from 'vue-typed-mixins';
 import { filterTemplateNodes } from './helpers';
-
 export default mixins(genericHelpers).extend({
 	name: 'NodeList',
 	props: {
@@ -34,7 +35,7 @@ export default mixins(genericHelpers).extend({
 		},
 	},
 	components: {
-		HoverableNodeIcon,
+		NodeIcon,
 	},
 	computed: {
 		filteredCoreNodes() {
@@ -67,20 +68,16 @@ export default mixins(genericHelpers).extend({
 	justify-content: flex-end;
 	align-items: center;
 }
-
 .container {
 	position: relative;
 	display: block;
 }
-
 .sm {
 	margin-left: var(--spacing-2xs);
 }
-
 .md {
 	margin-left: var(--spacing-xs);
 }
-
 .button {
 	top: 0px;
 	position: relative;
@@ -94,14 +91,12 @@ export default mixins(genericHelpers).extend({
 	font-weight: var(--font-weight-bold);
 	color: var(--color-text-base);
 }
-
 .buttonSm {
 	margin-left: var(--spacing-2xs);
 	width: 20px;
 	min-width: 20px;
 	height: 20px;
 }
-
 .buttonMd {
 	margin-left: var(--spacing-xs);
 	width: 24px;

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

@@ -9,10 +9,10 @@
 					:key="node.name"
 					:class="$style.icon"
 				>
-					<HoverableNodeIcon
+					<NodeIcon
 						:nodeType="node"
-						:title="node.name"
 						:size="24"
+						:showTooltip="true"
 						@click="redirectToSearchPage(node)"
 					/>
 				</div>
@@ -48,13 +48,10 @@
 </template>
 <script lang="ts">
 import Vue from 'vue';
-
 import TemplateDetailsBlock from '@/components/TemplateDetailsBlock.vue';
-import HoverableNodeIcon from '@/components/HoverableNodeIcon.vue';
+import NodeIcon from '@/components/NodeIcon.vue';
-
 import { abbreviateNumber, filterTemplateNodes } from '@/components/helpers';
 import { ITemplatesNode } from '@/Interface';
-
 export default Vue.extend({
 	name: 'TemplateDetails',
 	props: {
@@ -69,7 +66,7 @@ export default Vue.extend({
 		},
 	},
 	components: {
-		HoverableNodeIcon,
+		NodeIcon,
 		TemplateDetailsBlock,
 	},
 	methods: {
@@ -91,12 +88,11 @@ export default Vue.extend({
 	display: flex;
 	flex-wrap: wrap;
 }
-
 .icon {
 	margin-right: var(--spacing-xs);
 	margin-bottom: var(--spacing-xs);
+	cursor: pointer;
 }
-
 .text {
 	padding-bottom: var(--spacing-xs);
 }

packages/editor-ui/src/plugins/components.ts

@@ -65,6 +65,7 @@ import {
 	N8nMarkdown,
 	N8nMenu,
 	N8nMenuItem,
+	N8nNodeIcon,
 	N8nNotice,
 	N8nOption,
 	N8nRadioButtons,
@@ -109,6 +110,7 @@ Vue.use(N8nLink);
 Vue.component('n8n-markdown', N8nMarkdown);
 Vue.use(N8nMenu);
 Vue.use(N8nMenuItem);
+Vue.component('n8n-node-icon', N8nNodeIcon);
 Vue.component('n8n-notice', N8nNotice);
 Vue.use(N8nOption);
 Vue.use(N8nPulse);

packages/editor-ui/src/shims-vue.d.ts

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import 'n8n-design-system/src/shims-element-ui';
 
 declare module '*.vue' {
 	import Vue from 'vue';