feat(Canvas): Pass Icon type to better find appropriate icons

packages/ui-tests/stories/canvas/CanvasSideBar.stories.tsx

@@ -5,6 +5,7 @@ import {
   IVisualizationNode,
   IVisualizationNodeData,
   NodeIconResolver,
+  NodeIconType,
   VisibleFlowsProvider,
   VisualComponentSchema,
   camelRouteJson,
@@ -25,7 +26,7 @@ const selectedNode: CanvasNode = {
         label: 'log-sink',
         path: 'sink',
         isPlaceholder: false,
-        icon: NodeIconResolver.getIcon('log'),
+        icon: NodeIconResolver.getIcon('log', NodeIconType.EIP),
       } as IVisualizationNodeData,
       id: 'log-sink-6839',
       nextNode: undefined,
@@ -101,7 +102,7 @@ const Template: StoryFn<typeof CanvasSideBar> = (args) => {
 
 export const ProcessorNode = Template.bind({});
 ProcessorNode.args = {
-  selectedNode: selectedNode,
+  selectedNode,
 };
 
 export const SelectedUnknownNode = Template.bind({});

packages/ui/src/components/IconResolver/IconResolver.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 import { CatalogKind } from '../../models';
-import { NodeIconResolver } from '../../utils/node-icon-resolver';
+import { NodeIconResolver, NodeIconType } from '../../utils/node-icon-resolver';
 import { ITile } from '../Catalog/Catalog.models';
 
 interface IconResolverProps {
@@ -14,16 +14,18 @@ export const IconResolver: FunctionComponent<PropsWithChildren<IconResolverProps
       return (
         <img
           className={props.className}
-          src={NodeIconResolver.getIcon(`kamelet:${props.tile.name}`)}
+          src={NodeIconResolver.getIcon(`kamelet:${props.tile.name}`, NodeIconType.Kamelet)}
           alt="kamelet icon"
         />
       );
     case CatalogKind.Processor:
     case CatalogKind.Component:
+      // eslint-disable-next-line no-case-declarations
+      const iconType = props.tile.type === CatalogKind.Processor ? NodeIconType.EIP : NodeIconType.Component;
       return (
         <img
           className={props.className}
-          src={NodeIconResolver.getIcon(props.tile.name)}
+          src={NodeIconResolver.getIcon(props.tile.name, iconType)}
           alt={`${props.tile.type} icon`}
         />
       );

packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.ts

@@ -2,7 +2,7 @@
 import { ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { SchemaService } from '../../../components/Form/schema.service';
 import { ROOT_PATH, getArrayProperty, getValue, setValue } from '../../../utils';
-import { NodeIconResolver } from '../../../utils/node-icon-resolver';
+import { NodeIconResolver, NodeIconType } from '../../../utils/node-icon-resolver';
 import { DefinedComponent } from '../../camel-catalog-index';
 import { EntityType } from '../../camel/entities';
 import {
@@ -217,7 +217,7 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
       path: ROOT_PATH,
       entity: this,
       isGroup: true,
-      icon: NodeIconResolver.getIcon(this.type),
+      icon: NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity),
     });
 
     const fromNode = CamelStepsService.getVizNodeFromProcessor(

packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.ts

@@ -2,7 +2,7 @@ import { ErrorHandlerBuilderDeserializer, ProcessorDefinition } from '@kaoto/cam
 import { getCamelRandomId } from '../../../camel-utils/camel-random-id';
 import { SchemaService } from '../../../components/Form/schema.service';
 import { useSchemasStore } from '../../../store';
-import { getValue, isDefined, setValue } from '../../../utils';
+import { NodeIconResolver, NodeIconType, getValue, isDefined, setValue } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import {
   BaseVisualCamelEntity,
@@ -131,6 +131,7 @@ export class CamelErrorHandlerVisualEntity implements BaseVisualCamelEntity {
     );
     errorHandlerGroupNode.data.entity = this;
     errorHandlerGroupNode.data.isGroup = true;
+    errorHandlerGroupNode.data.icon = NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity);
 
     return errorHandlerGroupNode;
   }

packages/ui/src/models/visualization/flows/camel-intercept-from-visual-entity.ts

@@ -1,6 +1,6 @@
 import { InterceptFrom, ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { getCamelRandomId } from '../../../camel-utils/camel-random-id';
-import { isDefined } from '../../../utils';
+import { NodeIconResolver, NodeIconType, isDefined } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import {
   BaseVisualCamelEntity,
@@ -103,6 +103,7 @@ export class CamelInterceptFromVisualEntity
     );
     interceptFromGroupNode.data.entity = this;
     interceptFromGroupNode.data.isGroup = true;
+    interceptFromGroupNode.data.icon = NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity);
 
     return interceptFromGroupNode;
   }

packages/ui/src/models/visualization/flows/camel-intercept-send-to-endpoint-visual-entity.ts

@@ -1,6 +1,6 @@
 import { InterceptSendToEndpoint, ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { getCamelRandomId } from '../../../camel-utils/camel-random-id';
-import { isDefined } from '../../../utils';
+import { NodeIconResolver, NodeIconType, isDefined } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import {
   BaseVisualCamelEntity,
@@ -115,6 +115,7 @@ export class CamelInterceptSendToEndpointVisualEntity
     );
     interceptSendToEndpointGroupNode.data.entity = this;
     interceptSendToEndpointGroupNode.data.isGroup = true;
+    interceptSendToEndpointGroupNode.data.icon = NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity);
 
     return interceptSendToEndpointGroupNode;
   }

packages/ui/src/models/visualization/flows/camel-intercept-visual-entity.ts

@@ -1,6 +1,6 @@
 import { Intercept, ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { getCamelRandomId } from '../../../camel-utils/camel-random-id';
-import { isDefined } from '../../../utils';
+import { NodeIconResolver, NodeIconType, isDefined } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import {
   BaseVisualCamelEntity,
@@ -86,6 +86,7 @@ export class CamelInterceptVisualEntity
     );
     interceptGroupNode.data.entity = this;
     interceptGroupNode.data.isGroup = true;
+    interceptGroupNode.data.icon = NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity);
 
     return interceptGroupNode;
   }

packages/ui/src/models/visualization/flows/camel-on-completion-visual-entity.ts

@@ -1,6 +1,6 @@
 import { OnCompletion, ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { getCamelRandomId } from '../../../camel-utils/camel-random-id';
-import { isDefined } from '../../../utils';
+import { NodeIconResolver, NodeIconType, isDefined } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import {
   BaseVisualCamelEntity,
@@ -88,6 +88,7 @@ export class CamelOnCompletionVisualEntity
     );
     onCompletionGroupNode.data.entity = this;
     onCompletionGroupNode.data.isGroup = true;
+    onCompletionGroupNode.data.icon = NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity);
 
     return onCompletionGroupNode;
   }

packages/ui/src/models/visualization/flows/camel-on-exception-visual-entity.ts

@@ -1,6 +1,6 @@
 import { OnException, ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { getCamelRandomId } from '../../../camel-utils/camel-random-id';
-import { isDefined } from '../../../utils';
+import { NodeIconResolver, NodeIconType, isDefined } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import {
   BaseVisualCamelEntity,
@@ -88,6 +88,7 @@ export class CamelOnExceptionVisualEntity
     );
     onExceptionGroupNode.data.entity = this;
     onExceptionGroupNode.data.isGroup = true;
+    onExceptionGroupNode.data.icon = NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity);
 
     return onExceptionGroupNode;
   }

packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.ts

@@ -3,7 +3,7 @@ import Ajv, { ValidateFunction } from 'ajv-draft-04';
 import addFormats from 'ajv-formats';
 import { getCamelRandomId } from '../../../camel-utils/camel-random-id';
 import { SchemaService } from '../../../components/Form/schema.service';
-import { isDefined, setValue } from '../../../utils';
+import { NodeIconResolver, NodeIconType, isDefined, setValue } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import { CatalogKind } from '../../catalog-kind';
 import {
@@ -125,6 +125,7 @@ export class CamelRestConfigurationVisualEntity implements BaseVisualCamelEntity
     );
     restConfigurationGroupNode.data.entity = this;
     restConfigurationGroupNode.data.isGroup = true;
+    restConfigurationGroupNode.data.icon = NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity);
 
     return restConfigurationGroupNode;
   }

packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.ts

@@ -3,7 +3,7 @@ import Ajv, { ValidateFunction } from 'ajv-draft-04';
 import addFormats from 'ajv-formats';
 import { getCamelRandomId } from '../../../camel-utils/camel-random-id';
 import { SchemaService } from '../../../public-api';
-import { NodeIconResolver, getValue, isDefined, setValue } from '../../../utils';
+import { NodeIconResolver, NodeIconType, getValue, isDefined, setValue } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import { CatalogKind } from '../../catalog-kind';
 import { KaotoSchemaDefinition } from '../../kaoto-schema';
@@ -144,7 +144,7 @@ export class CamelRouteConfigurationVisualEntity
       path: CamelRouteConfigurationVisualEntity.ROOT_PATH,
       entity: this,
       isGroup: true,
-      icon: NodeIconResolver.getIcon(this.type),
+      icon: NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity),
       processorName: CamelRouteConfigurationVisualEntity.ROOT_PATH,
     });
 

packages/ui/src/models/visualization/flows/support/camel-steps.service.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-case-declarations */
 import { DoCatch, ProcessorDefinition, When1 } from '@kaoto/camel-catalog/types';
 import { getValue } from '../../../../utils';
-import { NodeIconResolver } from '../../../../utils/node-icon-resolver';
+import { NodeIconResolver, NodeIconType } from '../../../../utils/node-icon-resolver';
 import { IVisualizationNode } from '../../base-visual-entity';
 import { createVisualizationNode } from '../../visualization-node';
 import { CamelComponentSchemaService } from './camel-component-schema.service';
@@ -17,9 +17,10 @@ export class CamelStepsService {
     componentLookup: ICamelElementLookupResult,
     entityDefinition: unknown,
   ): IVisualizationNode {
+    const nodeIconType = componentLookup.componentName ? NodeIconType.Component : NodeIconType.EIP;
     const data: CamelRouteVisualEntityData = {
       path,
-      icon: NodeIconResolver.getIcon(CamelComponentSchemaService.getIconName(componentLookup)),
+      icon: NodeIconResolver.getIcon(CamelComponentSchemaService.getIconName(componentLookup), nodeIconType),
       processorName: componentLookup.processorName,
       componentName: componentLookup.componentName,
     };

packages/ui/src/utils/node-icon-resolver.ts

@@ -121,40 +121,34 @@ import workday from '../assets/components/workday.svg';
 import xslt from '../assets/components/xslt2.png';
 
 import { CatalogKind } from '../models/catalog-kind';
-import { IKameletDefinition } from '../models/kamelets-catalog';
 import { CamelCatalogService } from '../models/visualization/flows/camel-catalog.service';
 import { EntityType } from '../models/camel/entities';
 
-export class NodeIconResolver {
-  static getIcon(elementName: string | undefined): string {
-    if (elementName?.startsWith('kamelet:')) {
-      const kameletDefinition = CamelCatalogService.getComponent(
-        CatalogKind.Kamelet,
-        elementName.replace('kamelet:', ''),
-      ) as IKameletDefinition | undefined;
-
-      return kameletDefinition?.metadata.annotations['camel.apache.org/kamelet.icon'] ?? this.getUnknownIcon();
-    }
-
-    let icon = this.getComponentIcon(elementName);
-    if (icon !== undefined) {
-      return icon;
-    }
+export const enum NodeIconType {
+  Component,
+  EIP,
+  Kamelet,
+  VisualEntity,
+}
 
-    icon = this.getEIPIcon(elementName);
-    if (icon !== undefined) {
-      return icon;
+export class NodeIconResolver {
+  static getIcon(elementName: string | undefined, type: NodeIconType): string {
+    if (!elementName) {
+      return this.getUnknownIcon();
     }
 
-    icon = this.getVisualEntityIcon(elementName);
-    if (icon !== undefined) {
-      return icon;
+    if (elementName.startsWith('kamelet') || type === NodeIconType.Kamelet) {
+      return this.getKameletIcon(elementName) ?? this.getUnknownIcon();
     }
 
-    if (elementName === '') {
-      return this.getUnknownIcon();
+    switch (type) {
+      case NodeIconType.Component:
+        return this.getComponentIcon(elementName) ?? this.getDefaultCamelIcon();
+      case NodeIconType.EIP:
+        return this.getEIPIcon(elementName) ?? this.getDefaultCamelIcon();
+      case NodeIconType.VisualEntity:
+        return this.getVisualEntityIcon(elementName) ?? this.getDefaultCamelIcon();
     }
-    return this.getDefaultCamelIcon();
   }
 
   static getUnknownIcon(): string {
@@ -169,7 +163,16 @@ export class NodeIconResolver {
     return generic_component;
   }
 
-  private static getComponentIcon(elementName?: string): string | undefined {
+  private static getKameletIcon(elementName: string): string | undefined {
+    const kameletDefinition = CamelCatalogService.getComponent(
+      CatalogKind.Kamelet,
+      elementName.replace('kamelet:', ''),
+    );
+
+    return kameletDefinition?.metadata.annotations['camel.apache.org/kamelet.icon'];
+  }
+
+  private static getComponentIcon(elementName: string): string | undefined {
     switch (elementName) {
       case 'activemq':
         return activemq;
@@ -615,7 +618,7 @@ export class NodeIconResolver {
     }
   }
 
-  private static getEIPIcon(elementName?: string): string | undefined {
+  private static getEIPIcon(elementName: string): string | undefined {
     switch (elementName) {
       case 'aggregate':
         return aggregate;
@@ -743,7 +746,7 @@ export class NodeIconResolver {
     }
   }
 
-  private static getVisualEntityIcon(elementName?: string): string | undefined {
+  private static getVisualEntityIcon(elementName: string): string | undefined {
     switch (elementName) {
       case EntityType.Route:
         return route;