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/editor-ui/src/components/NodeIcon.vue

@@ -1,34 +1,37 @@
 <template>
-	<div class="node-icon-wrapper" :style="iconStyleData">
-		<div v-if="nodeIconData !== null" class="icon">
-			<img v-if="nodeIconData.type === 'file'" :src="nodeIconData.fileBuffer || nodeIconData.path" :style="imageStyleData" />
-			<font-awesome-icon v-else :icon="nodeIconData.icon || nodeIconData.path" :style="fontStyleData" />
-		</div>
-		<div v-else class="node-icon-placeholder">
-			{{nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
-		</div>
-	</div>
+	<n8n-node-icon
+		:type="type"
+		:src="iconSource.path || iconSource.fileBuffer"
+		:name="iconSource.icon"
+		:color="color"
+		:disabled="disabled"
+		:size="size"
+		:circle="circle"
+		: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 {
-	type: string;
-	path?: string;
-	fileExtension?: string;
-	fileBuffer?: string;
+interface NodeIconSource {
+		path?: string;
+		fileBuffer?: string;
+		icon?: 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 : '';
-			if (!this.size) {
-				return {color};
-			}
-
-			return {
-				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();
+			let iconType = 'unknown';
+			if (nodeType) {
+				if ((nodeType as IVersionNode).iconData) {
+					iconType = (nodeType as IVersionNode).iconData.type;
+				} else if (nodeType.icon) {
+					iconType = nodeType.icon.split(':')[0] === 'file' ? 'file' : 'icon';
 				}
-
-				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);
 }