fix(editor): Fix node icon in node creator header (#9782)

n8n-io · Jun 18, 2024 · b7d356f · b7d356f
1 parent 08c6e9b
commit b7d356f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 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
@@ -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
@@ -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
@@ -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();
+};