chore(Canvas): Use enum for NodeLabel setting

relates: https://issues.redhat.com/browse/KTO-441
follow up: #1221

packages/ui/src/models/settings/localstorage-settings-adapter.test.ts

@@ -1,6 +1,6 @@
 import { LocalStorageKeys } from '../local-storage-keys';
 import { LocalStorageSettingsAdapter } from './localstorage-settings-adapter';
-import { SettingsModel } from './settings.model';
+import { NodeLabelType, SettingsModel } from './settings.model';
 
 describe('LocalStorageSettingsAdapter', () => {
   it('should create an instance with the default settings', () => {
@@ -11,7 +11,7 @@ describe('LocalStorageSettingsAdapter', () => {
 
   it('should save and retrieve settings', () => {
     const adapter = new LocalStorageSettingsAdapter();
-    const newSettings: SettingsModel = { catalogUrl: 'http://example.com', nodeLabel: 'description' };
+    const newSettings: SettingsModel = { catalogUrl: 'http://example.com', nodeLabel: NodeLabelType.Description };
 
     adapter.saveSettings(newSettings);
 
@@ -30,7 +30,7 @@ describe('LocalStorageSettingsAdapter', () => {
     const localStorageSetItemSpy = jest.spyOn(Storage.prototype, 'setItem');
 
     const adapter = new LocalStorageSettingsAdapter();
-    const newSettings: SettingsModel = { catalogUrl: 'http://example.com', nodeLabel: 'description' };
+    const newSettings: SettingsModel = { catalogUrl: 'http://example.com', nodeLabel: NodeLabelType.Description };
 
     adapter.saveSettings(newSettings);
 

packages/ui/src/models/settings/settings.model.ts

@@ -1,6 +1,11 @@
+export const enum NodeLabelType {
+  Id = 'id',
+  Description = 'description',
+}
+
 export interface ISettingsModel {
   catalogUrl: string;
-  nodeLabel: string;
+  nodeLabel: NodeLabelType;
 }
 
 export interface AbstractSettingsAdapter {
@@ -10,7 +15,7 @@ export interface AbstractSettingsAdapter {
 
 export class SettingsModel implements ISettingsModel {
   catalogUrl: string = '';
-  nodeLabel: string = 'description';
+  nodeLabel: NodeLabelType = NodeLabelType.Description;
 
   constructor(options: Partial<ISettingsModel> = {}) {
     Object.assign(this, options);

packages/ui/src/models/visualization/base-visual-entity.ts

@@ -1,6 +1,7 @@
 import { DefinedComponent } from '../camel-catalog-index';
 import { BaseCamelEntity, EntityType } from '../camel/entities';
 import { KaotoSchemaDefinition } from '../kaoto-schema';
+import { NodeLabelType } from '../settings/settings.model';
 
 /**
  * BaseVisualCamelEntity
@@ -18,7 +19,7 @@ export interface BaseVisualCamelEntity extends BaseCamelEntity {
   setId: (id: string) => void;
 
   /** Given a path, get the component label */
-  getNodeLabel: (path?: string, labelType?: string) => string;
+  getNodeLabel: (path?: string, labelType?: NodeLabelType) => string;
 
   /** Given a path, get the component tooltip content */
   getTooltipContent: (path?: string) => string;
@@ -75,7 +76,7 @@ export interface IVisualizationNode<T extends IVisualizationNodeData = IVisualiz
   getBaseEntity(): BaseVisualCamelEntity | undefined;
 
   /** This method returns the label to be used by the canvas nodes */
-  getNodeLabel(labelType?: string): string;
+  getNodeLabel(labelType?: NodeLabelType): string;
 
   /** This method returns the tooltip content to be used by the canvas nodes */
   getTooltipContent(): string;

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

@@ -5,6 +5,7 @@ import { ROOT_PATH, getArrayProperty, getValue, setValue } from '../../../utils'
 import { NodeIconResolver, NodeIconType } from '../../../utils/node-icon-resolver';
 import { DefinedComponent } from '../../camel-catalog-index';
 import { EntityType } from '../../camel/entities';
+import { NodeLabelType } from '../../settings/settings.model';
 import {
   AddStepMode,
   BaseVisualCamelEntity,
@@ -33,7 +34,7 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
     return this.id;
   }
 
-  getNodeLabel(path?: string, labelType?: string): string {
+  getNodeLabel(path?: string, labelType?: NodeLabelType): string {
     if (!path) return '';
 
     const componentModel = getValue(this.route, path);

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

@@ -5,6 +5,7 @@ import { camelRouteJson } from '../../../stubs/camel-route';
 import { ROOT_PATH } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import { KaotoSchemaDefinition } from '../../kaoto-schema';
+import { NodeLabelType } from '../../settings/settings.model';
 import { IVisualizationNode } from '../base-visual-entity';
 import { CamelRouteVisualEntity, isCamelFrom, isCamelRoute } from './camel-route-visual-entity';
 import { CamelComponentSchemaService } from './support/camel-component-schema.service';
@@ -89,9 +90,9 @@ describe('Camel Route', () => {
       const getNodeLabelSpy = jest.spyOn(CamelComponentSchemaService, 'getNodeLabel');
       jest.spyOn(CamelComponentSchemaService, 'getCamelComponentLookup').mockReturnValueOnce(lookupValue);
 
-      const label = camelEntity.getNodeLabel('from', 'id');
+      const label = camelEntity.getNodeLabel('from', NodeLabelType.Id);
 
-      expect(getNodeLabelSpy).toHaveBeenCalledWith(lookupValue, camelRouteJson.route.from, 'id');
+      expect(getNodeLabelSpy).toHaveBeenCalledWith(lookupValue, camelRouteJson.route.from, NodeLabelType.Id);
       expect(label).toEqual('timer');
     });
   });

packages/ui/src/models/visualization/flows/support/camel-component-schema.service.test.ts

@@ -4,6 +4,7 @@ import { getFirstCatalogMap } from '../../../../stubs/test-load-catalog';
 import { CamelUriHelper, ROOT_PATH } from '../../../../utils';
 import { ICamelProcessorDefinition } from '../../../camel-processors-catalog';
 import { CatalogKind } from '../../../catalog-kind';
+import { NodeLabelType } from '../../../settings/settings.model';
 import { CamelCatalogService } from '../camel-catalog.service';
 import { CamelComponentSchemaService } from './camel-component-schema.service';
 
@@ -340,6 +341,26 @@ describe('CamelComponentSchemaService', () => {
         expect(label).toEqual(result);
       },
     );
+
+    it('should favor `id` when asked for the label', () => {
+      const label = CamelComponentSchemaService.getNodeLabel(
+        { processorName: 'to', componentName: 'log' },
+        { id: 'to-1234', description: 'My Logger', uri: 'log' },
+        NodeLabelType.Id,
+      );
+
+      expect(label).toEqual('to-1234');
+    });
+
+    it('should favor `description` when asked for the label', () => {
+      const label = CamelComponentSchemaService.getNodeLabel(
+        { processorName: 'to', componentName: 'log' },
+        { id: 'to-1234', description: 'My Logger', uri: 'log' },
+        NodeLabelType.Description,
+      );
+
+      expect(label).toEqual('My Logger');
+    });
   });
 
   describe('getTooltipContent', () => {

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

@@ -1,10 +1,11 @@
 import { ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import cloneDeep from 'lodash/cloneDeep';
-import { CamelUriHelper, ParsedParameters, ROOT_PATH, isDefined } from '../../../../utils';
+import { CamelUriHelper, ParsedParameters, ROOT_PATH, getValue, isDefined } from '../../../../utils';
 import { ICamelComponentDefinition } from '../../../camel-components-catalog';
 import { CatalogKind } from '../../../catalog-kind';
 import { IKameletDefinition } from '../../../kamelets-catalog';
 import { KaotoSchemaDefinition } from '../../../kaoto-schema';
+import { NodeLabelType } from '../../../settings/settings.model';
 import { VisualComponentSchema } from '../../base-visual-entity';
 import { CamelCatalogService } from '../camel-catalog.service';
 import { CamelProcessorStepsProperties, ICamelElementLookupResult } from './camel-component-types';
@@ -65,18 +66,27 @@ export class CamelComponentSchemaService {
     return this.getCamelElement(previousPathSegment as keyof ProcessorDefinition, definition);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  static getNodeLabel(camelElementLookup: ICamelElementLookupResult, definition?: any, labelType?: string): string {
-    if (typeof definition?.description === 'string' && labelType !== 'id' && definition.description !== '') {
-      return definition.description;
+  static getNodeLabel(
+    camelElementLookup: ICamelElementLookupResult,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    definition?: any,
+    labelType?: NodeLabelType,
+  ): string {
+    const id: string | undefined = getValue(definition, 'id');
+    if (labelType === NodeLabelType.Id && id) {
+      return id;
+    }
+
+    const description: string | undefined = getValue(definition, 'description');
+    if (description) {
+      return description;
     }
 
     if (camelElementLookup.componentName !== undefined) {
       return camelElementLookup.componentName;
     }
 
     const uriString = CamelUriHelper.getUriString(definition);
-    const id = definition?.id;
     switch (camelElementLookup.processorName) {
       case 'route' as keyof ProcessorDefinition:
       case 'errorHandler' as keyof ProcessorDefinition:

packages/ui/src/models/visualization/visualization-node.test.ts

@@ -1,4 +1,5 @@
 import { camelRouteJson } from '../../stubs/camel-route';
+import { NodeLabelType } from '../settings';
 import { BaseVisualCamelEntity, IVisualizationNode } from './base-visual-entity';
 import { CamelRouteVisualEntity } from './flows';
 import { createVisualizationNode } from './visualization-node';
@@ -41,9 +42,9 @@ describe('VisualizationNode', () => {
       } as unknown as BaseVisualCamelEntity;
 
       node = createVisualizationNode('test', { path: 'test-path', entity: visualEntity });
-      const label = node.getNodeLabel('id');
+      const label = node.getNodeLabel(NodeLabelType.Id);
 
-      expect(getNodeLabelSpy).toHaveBeenCalledWith(node.data.path, 'id');
+      expect(getNodeLabelSpy).toHaveBeenCalledWith(node.data.path, NodeLabelType.Id);
       expect(label).toEqual('test-label');
     });
 

packages/ui/src/models/visualization/visualization-node.ts

@@ -1,5 +1,6 @@
 import { getCamelRandomId } from '../../camel-utils/camel-random-id';
 import { DefinedComponent } from '../camel-catalog-index';
+import { NodeLabelType } from '../settings/settings.model';
 import {
   AddStepMode,
   BaseVisualCamelEntity,
@@ -44,7 +45,7 @@ class VisualizationNode<T extends IVisualizationNodeData = IVisualizationNodeDat
     return this.getRootNode().data.entity;
   }
 
-  getNodeLabel(labelType?: string): string {
+  getNodeLabel(labelType?: NodeLabelType): string {
     return this.getBaseEntity()?.getNodeLabel(this.data.path, labelType) ?? this.id;
   }