From b7d356f49cdd5d9e63e1aeffecb25da0fc906d6a Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Tue, 18 Jun 2024 10:05:18 +0200
Subject: [PATCH] fix(editor): Fix node icon in node creator header (#9782)

---
 .../Node/NodeCreator/Modes/NodesMode.vue        | 17 ++++++++++-------
 packages/editor-ui/src/components/NodeIcon.vue  | 16 +++++++---------
 packages/editor-ui/src/utils/nodeTypesUtils.ts  |  9 +++++++++
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
index c8c7583d47204..42fcd815e0cba 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
@@ -24,6 +24,8 @@ import CategorizedItemsRenderer from '../Renderers/CategorizedItemsRenderer.vue'
 import NoResults from '../Panel/NoResults.vue';
 import { useI18n } from '@/composables/useI18n';
 import { useTelemetry } from '@/composables/useTelemetry';
+import { getNodeIcon, getNodeIconColor, getNodeIconUrl } from '@/utils/nodeTypesUtils';
+import { useUIStore } from '@/stores/ui.store';
 
 export interface Props {
 	rootView: 'trigger' | 'action';
@@ -35,6 +37,8 @@ const emit = defineEmits({
 
 const i18n = useI18n();
 const telemetry = useTelemetry();
+const uiStore = useUIStore();
+const rootStore = useRootStore();
 
 const { mergedNodes, actions } = useNodeCreatorStore();
 const { baseUrl } = useRootStore();
@@ -86,11 +90,10 @@ function onSelected(item: INodeCreateElement) {
 			return;
 		}
 
-		const icon = item.properties.iconUrl
-			? `${baseUrl}${item.properties.iconUrl}`
-			: typeof item.properties.icon === 'string'
-				? item.properties.icon?.split(':')[1]
-				: undefined;
+		const iconUrl = getNodeIconUrl(item.properties, uiStore.appliedTheme);
+		const icon = iconUrl
+			? rootStore.baseUrl + iconUrl
+			: getNodeIcon(item.properties, uiStore.appliedTheme)?.split(':')[1];
 
 		const transformedActions = nodeActions?.map((a) =>
 			transformNodeType(a, item.properties.displayName, 'action'),
@@ -100,9 +103,9 @@ function onSelected(item: INodeCreateElement) {
 			subcategory: item.properties.displayName,
 			title: item.properties.displayName,
 			nodeIcon: {
-				color: item.properties.defaults?.color?.toString(),
+				color: getNodeIconColor(item.properties),
 				icon,
-				iconType: item.properties.iconUrl ? 'file' : 'icon',
+				iconType: iconUrl ? 'file' : 'icon',
 			},
 
 			rootView: activeViewStack.value.rootView,
diff --git a/packages/editor-ui/src/components/NodeIcon.vue b/packages/editor-ui/src/components/NodeIcon.vue
index 11e76ff22f9a4..2c3539d45c0e8 100644
--- a/packages/editor-ui/src/components/NodeIcon.vue
+++ b/packages/editor-ui/src/components/NodeIcon.vue
@@ -19,7 +19,12 @@
 import type { IVersionNode, SimplifiedNodeType } from '@/Interface';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useUIStore } from '@/stores/ui.store';
-import { getBadgeIconUrl, getNodeIcon, getNodeIconUrl } from '@/utils/nodeTypesUtils';
+import {
+	getBadgeIconUrl,
+	getNodeIcon,
+	getNodeIconColor,
+	getNodeIconUrl,
+} from '@/utils/nodeTypesUtils';
 import type { INodeTypeDescription } from 'n8n-workflow';
 import { computed } from 'vue';
 
@@ -75,14 +80,7 @@ const iconType = computed(() => {
 	return 'unknown';
 });
 
-const color = computed(() => {
-	const nodeType = props.nodeType;
-
-	if (nodeType && 'iconColor' in nodeType && nodeType.iconColor) {
-		return `var(--color-node-icon-${nodeType.iconColor})`;
-	}
-	return nodeType?.defaults?.color?.toString() ?? props.colorDefault ?? '';
-});
+const color = computed(() => getNodeIconColor(props.nodeType) ?? props.colorDefault ?? '');
 
 const iconSource = computed<NodeIconSource>(() => {
 	const nodeType = props.nodeType;
diff --git a/packages/editor-ui/src/utils/nodeTypesUtils.ts b/packages/editor-ui/src/utils/nodeTypesUtils.ts
index 6f319418c60c8..7ca076a1d3e26 100644
--- a/packages/editor-ui/src/utils/nodeTypesUtils.ts
+++ b/packages/editor-ui/src/utils/nodeTypesUtils.ts
@@ -471,3 +471,12 @@ export const getBadgeIconUrl = (
 ): string | null => {
 	return getThemedValue(nodeType.badgeIconUrl, theme);
 };
+
+export const getNodeIconColor = (
+	nodeType?: INodeTypeDescription | SimplifiedNodeType | IVersionNode | null,
+) => {
+	if (nodeType && 'iconColor' in nodeType && nodeType.iconColor) {
+		return `var(--color-node-icon-${nodeType.iconColor})`;
+	}
+	return nodeType?.defaults?.color?.toString();
+};