fix(Entities): Connect from with route object

Currently, the `from` object is disconnected from the `route` object,
and in order to make the `VisualizationNodes` IDs static, we need to
connect the entire tree.

packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx

@@ -174,7 +174,7 @@ describe('CanvasForm', () => {
       fireEvent.click(closeSideBarButton);
     });
 
-    expect(camelRouteVisualEntity.route.description).toBeUndefined();
+    expect(camelRouteVisualEntity.entityDef.route.description).toBeUndefined();
   });
 
   it("should serialize empty strings(with space characters) `' '` as `undefined`", async () => {
@@ -209,7 +209,7 @@ describe('CanvasForm', () => {
       fireEvent.click(closeSideBarButton);
     });
 
-    expect(camelRouteVisualEntity.route.description).toBeUndefined();
+    expect(camelRouteVisualEntity.entityDef.route.description).toBeUndefined();
   });
 
   it('should allow consumers to update the Camel Route ID', async () => {

packages/ui/src/hooks/entities.test.tsx

@@ -3,7 +3,7 @@ import { CamelResource, SourceSchemaType } from '../models/camel';
 import { CamelRouteVisualEntity } from '../models/visualization/flows';
 import { camelRouteJson, camelRouteYaml } from '../stubs/camel-route';
 import { camelRouteYaml_1_1_original, camelRouteYaml_1_1_updated } from '../stubs/camel-route-yaml-1.1';
-import { EventNotifier, setValue } from '../utils';
+import { EventNotifier } from '../utils';
 import { useEntities } from './entities';
 
 describe('useEntities', () => {
@@ -52,7 +52,7 @@ describe('useEntities', () => {
     });
 
     act(() => {
-      setValue(result.current.visualEntities[0], 'route.from.parameters.bindingMode', 'off');
+      result.current.visualEntities[0].updateModel('route.from.parameters.bindingMode', 'off');
       result.current.updateSourceCodeFromEntities();
     });
 

packages/ui/src/models/camel/__snapshots__/camel-resource.test.ts.snap

@@ -3,29 +3,26 @@
 exports[`createCamelResource should create an empty KameletResource if no args is specified 1`] = `
 [
   {
-    "route": {
-      "from": {
-        "id": "from-1234",
-        "parameters": {
-          "period": "{{period}}",
-          "timerName": "user",
-        },
-        "steps": [
-          {
-            "to": {
-              "parameters": {
-                "httpUri": "random-data-api.com/api/v2/users",
-              },
-              "uri": "https",
+    "from": {
+      "id": "from-1234",
+      "parameters": {
+        "period": "{{period}}",
+        "timerName": "user",
+      },
+      "steps": [
+        {
+          "to": {
+            "parameters": {
+              "httpUri": "random-data-api.com/api/v2/users",
             },
+            "uri": "https",
           },
-          {
-            "to": "kamelet:sink",
-          },
-        ],
-        "uri": "timer",
-      },
-      "id": "kamelet-1234",
+        },
+        {
+          "to": "kamelet:sink",
+        },
+      ],
+      "uri": "timer",
     },
   },
 ]

packages/ui/src/models/camel/__snapshots__/kamelet-resource.test.ts.snap

@@ -176,29 +176,26 @@ exports[`KameletResource should create a new KameletResource with a kamelet 1`]
 exports[`KameletResource should get the visual entities (Camel Route Visual Entity) 1`] = `
 [
   {
-    "route": {
-      "from": {
-        "id": "from-1234",
-        "parameters": {
-          "period": "{{period}}",
-          "timerName": "user",
-        },
-        "steps": [
-          {
-            "to": {
-              "parameters": {
-                "httpUri": "random-data-api.com/api/v2/users",
-              },
-              "uri": "https",
+    "from": {
+      "id": "from-1234",
+      "parameters": {
+        "period": "{{period}}",
+        "timerName": "user",
+      },
+      "steps": [
+        {
+          "to": {
+            "parameters": {
+              "httpUri": "random-data-api.com/api/v2/users",
             },
+            "uri": "https",
           },
-          {
-            "to": "kamelet:sink",
-          },
-        ],
-        "uri": "timer",
-      },
-      "id": "kamelet-1234",
+        },
+        {
+          "to": "kamelet:sink",
+        },
+      ],
+      "uri": "timer",
     },
   },
 ]

packages/ui/src/models/camel/camel-resource.test.ts

@@ -59,7 +59,7 @@ describe('createCamelResource', () => {
     expect(resource.getType()).toEqual(SourceSchemaType.Route);
     expect(resource.getVisualEntities().length).toEqual(1);
     const vis = resource.getVisualEntities()[0] as CamelRouteVisualEntity;
-    expect(vis.route.from?.uri).toBeDefined();
+    expect(vis.entityDef.route.from?.uri).toBeDefined();
   });
 
   // TODO

packages/ui/src/models/camel/kamelet-resource.ts

@@ -62,7 +62,7 @@ export class KameletResource extends CamelKResource implements RouteTemplateBean
      * the CamelRouteVisualEntity.
      */
     set(this.resource, 'metadata.name', this.flow.getId());
-    set(this.resource, 'spec.template.from', this.flow.route.from);
+    set(this.resource, 'spec.template.from', this.flow.entityDef.template.from);
     set(this.resource, 'spec.template.beans', this.beans?.parent.beans);
     return this.resource as IKameletDefinition;
   }

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

@@ -14,6 +14,9 @@ export interface BaseVisualCamelEntity extends BaseCamelEntity {
   id: string;
   type: EntityType;
 
+  /** Return the root path of the entity */
+  getRootPath: () => string;
+
   getId: () => string;
 
   setId: (id: string) => void;

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

@@ -134,9 +134,9 @@ describe('AbstractCamelVisualEntity', () => {
   describe('updateModel', () => {
     it('should update the model with the new value', () => {
       const newUri = 'timer';
-      abstractVisualEntity.updateModel('from', { uri: newUri });
+      abstractVisualEntity.updateModel('route.from', { uri: newUri });
 
-      expect(abstractVisualEntity.route.from.uri).toEqual(newUri);
+      expect(abstractVisualEntity.entityDef.route.from.uri).toEqual(newUri);
     });
 
     it('should delegate the serialization to the `CamelComponentSchemaService`', () => {

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

@@ -1,6 +1,6 @@
 import { ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { SchemaService } from '../../../components/Form/schema.service';
-import { ROOT_PATH, getArrayProperty, getValue, setValue } from '../../../utils';
+import { getArrayProperty, getValue, setValue } from '../../../utils';
 import { NodeIconResolver, NodeIconType } from '../../../utils/node-icon-resolver';
 import { DefinedComponent } from '../../camel-catalog-index';
 import { EntityType } from '../../camel/entities';
@@ -21,10 +21,11 @@ import { CamelProcessorStepsProperties, CamelRouteVisualEntityData } from './sup
 import { ModelValidationService } from './support/validators/model-validation.service';
 
 export abstract class AbstractCamelVisualEntity<T extends object> implements BaseVisualCamelEntity {
-  constructor(public route: T) {}
+  constructor(public entityDef: T) {}
 
   abstract id: string;
   abstract type: EntityType;
+  abstract getRootPath(): string;
   abstract setId(id: string): void;
   abstract toJSON(): unknown;
   protected abstract getRootUri(): string | undefined;
@@ -35,8 +36,8 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
 
   getNodeLabel(path?: string, labelType?: NodeLabelType): string {
     if (!path) return '';
+    const componentModel = getValue(this.entityDef, path);
 
-    const componentModel = getValue(this.route, path);
     const label = CamelComponentSchemaService.getNodeLabel(
       CamelComponentSchemaService.getCamelComponentLookup(path, componentModel),
       componentModel,
@@ -48,7 +49,7 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
 
   getTooltipContent(path?: string): string {
     if (!path) return '';
-    const componentModel = getValue(this.route, path);
+    const componentModel = getValue(this.entityDef, path);
 
     const content = CamelComponentSchemaService.getTooltipContent(
       CamelComponentSchemaService.getCamelComponentLookup(path, componentModel),
@@ -60,7 +61,7 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
   getComponentSchema(path?: string): VisualComponentSchema | undefined {
     if (!path) return undefined;
 
-    const componentModel = getValue(this.route, path);
+    const componentModel = getValue(this.entityDef, path);
     const visualComponentSchema = CamelComponentSchemaService.getVisualComponentSchema(path, componentModel);
 
     /** Overriding parameters with an empty object When the parameters property is mistakenly set to null */
@@ -79,21 +80,21 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
     if (!path) return;
     const updatedValue = CamelComponentSchemaService.getMultiValueSerializedDefinition(path, value);
 
-    setValue(this.route, path, updatedValue);
+    setValue(this.entityDef, path, updatedValue);
   }
 
   /**
    * Add a step to the route
    *
    * path examples:
-   *      from
-   *      from.steps.0.setHeader
-   *      from.steps.1.choice.when.0
-   *      from.steps.1.choice.when.0.steps.0.setHeader
-   *      from.steps.1.choice.otherwise
-   *      from.steps.1.choice.otherwise.steps.0.setHeader
-   *      from.steps.2.doTry.doCatch.0
-   *      from.steps.2.doTry.doCatch.0.steps.0.setHeader
+   *      route.from
+   *      route.from.steps.0.setHeader
+   *      route.from.steps.1.choice.when.0
+   *      route.from.steps.1.choice.when.0.steps.0.setHeader
+   *      route.from.steps.1.choice.otherwise
+   *      route.from.steps.1.choice.otherwise.steps.0.setHeader
+   *      route.from.steps.2.doTry.doCatch.0
+   *      route.from.steps.2.doTry.doCatch.0.steps.0.setHeader
    */
   addStep(options: {
     definedComponent: DefinedComponent;
@@ -120,7 +121,7 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
      * If the last segment is a string and the penultimate is a number, it means the target is member of an array
      * therefore we need to look for the array and insert the element at the given index + 1
      *
-     * f.i. from.steps.0.setHeader
+     * f.i. route.from.steps.0.setHeader
      * penultimate: 0
      * last: setHeader
      */
@@ -131,7 +132,7 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
       /** If we're in Replace mode, we need to delete the existing step */
       const deleteCount = options.mode === AddStepMode.ReplaceStep ? 1 : 0;
 
-      const stepsArray: ProcessorDefinition[] = getValue(this.route, pathArray.slice(0, -2), []);
+      const stepsArray: ProcessorDefinition[] = getValue(this.entityDef, pathArray.slice(0, -2), []);
       stepsArray.splice(desiredStartIndex, deleteCount, defaultValue);
 
       return;
@@ -148,10 +149,10 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
      * If the last segment is a number, it means the target object is a member of an array
      * therefore we need to look for the array and remove the element at the given index
      *
-     * f.i. from.steps.1.choice.when.0
+     * f.i. route.from.steps.1.choice.when.0
      * last: 0
      */
-    let array = getValue(this.route, pathArray.slice(0, -1), []);
+    let array = getValue(this.entityDef, pathArray.slice(0, -1), []);
     if (Number.isInteger(Number(last)) && Array.isArray(array)) {
       array.splice(Number(last), 1);
 
@@ -162,11 +163,11 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
      * If the last segment is a word and the penultimate is a number, it means the target is an object
      * potentially a Processor, that belongs to an array, therefore we remove it entirely
      *
-     * f.i. from.steps.1.choice
+     * f.i. route.from.steps.1.choice
      * last: choice
-     * penultimate: 1
+     * penultimate: 1`
      */
-    array = getValue(this.route, pathArray.slice(0, -2), []);
+    array = getValue(this.entityDef, pathArray.slice(0, -2), []);
     if (!Number.isInteger(Number(last)) && Number.isInteger(Number(penultimate)) && Array.isArray(array)) {
       array.splice(Number(penultimate), 1);
 
@@ -177,11 +178,11 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
      * If both the last and penultimate segment are words, it means the target is a property of an object
      * therefore we delete it
      *
-     * f.i. from.steps.1.choice.otherwise
+     * f.i. route.from.steps.1.choice.otherwise
      * last: otherwise
      * penultimate: choice
      */
-    const object = getValue(this.route, pathArray.slice(0, -1), {});
+    const object = getValue(this.entityDef, pathArray.slice(0, -1), {});
     if (!Number.isInteger(Number(last)) && !Number.isInteger(Number(penultimate)) && typeof object === 'object') {
       delete object[last];
     }
@@ -195,7 +196,7 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
     const canHaveSpecialChildren = Object.keys(stepsProperties).length > 1;
     const canReplaceStep = CamelComponentSchemaService.canReplaceStep(processorName);
     const canRemoveStep = !CamelComponentSchemaService.DISABLED_REMOVE_STEPS.includes(processorName);
-    const canRemoveFlow = data.path === ROOT_PATH;
+    const canRemoveFlow = data.path === this.getRootPath();
     const canBeDisabled = CamelComponentSchemaService.canBeDisabled(processorName);
 
     return {
@@ -218,21 +219,21 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
   }
 
   toVizNode(): IVisualizationNode {
-    const routeGroupNode = createVisualizationNode('route', {
-      path: ROOT_PATH,
+    const routeGroupNode = createVisualizationNode(this.getRootPath(), {
+      path: this.getRootPath(),
       entity: this,
       isGroup: true,
       icon: NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity),
       processorName: 'route',
     });
 
     const fromNode = NodeMapperService.getVizNode(
-      'from',
+      `${this.getRootPath()}.from`,
       {
         processorName: 'from' as keyof ProcessorDefinition,
         componentName: CamelComponentSchemaService.getComponentNameFromUri(this.getRootUri()!),
       },
-      this.route,
+      this.entityDef,
     );
 
     if (!this.getRootUri()) {
@@ -270,9 +271,9 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
     if (property === undefined) return;
 
     if (property.type === 'single-clause') {
-      setValue(this.route, `${options.data.path}.${property.name}`, defaultValue);
+      setValue(this.entityDef, `${options.data.path}.${property.name}`, defaultValue);
     } else {
-      const arrayPath = getArrayProperty(this.route, `${options.data.path}.${property.name}`);
+      const arrayPath = getArrayProperty(this.entityDef, `${options.data.path}.${property.name}`);
       arrayPath.unshift(defaultValue);
     }
   }

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

@@ -16,6 +16,7 @@ import { NodeMapperService } from './nodes/node-mapper.service';
 export class CamelErrorHandlerVisualEntity implements BaseVisualCamelEntity {
   id: string;
   readonly type = EntityType.ErrorHandler;
+  static readonly ROOT_PATH = 'errorHandler';
 
   constructor(public errorHandlerDef: { errorHandler: ErrorHandlerDeserializer } = { errorHandler: {} }) {
     const id = getCamelRandomId('errorHandler');
@@ -34,6 +35,10 @@ export class CamelErrorHandlerVisualEntity implements BaseVisualCamelEntity {
     );
   }
 
+  getRootPath(): string {
+    return CamelErrorHandlerVisualEntity.ROOT_PATH;
+  }
+
   getId(): string {
     return this.id;
   }
@@ -125,7 +130,7 @@ export class CamelErrorHandlerVisualEntity implements BaseVisualCamelEntity {
 
   toVizNode(): IVisualizationNode<IVisualizationNodeData> {
     const errorHandlerGroupNode = NodeMapperService.getVizNode(
-      'errorHandler',
+      this.getRootPath(),
       { processorName: 'errorHandler' as keyof ProcessorDefinition },
       this.errorHandlerDef,
     );

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

@@ -56,6 +56,10 @@ export class CamelInterceptFromVisualEntity
     );
   }
 
+  getRootPath(): string {
+    return CamelInterceptFromVisualEntity.ROOT_PATH;
+  }
+
   getId(): string {
     return this.id;
   }