fix(kamelet): update template.from references to template.route.from after route structure change

- Update camel-component-filter.service.ts path checks from 'template.from'
  to 'template.route.from' to match new KameletVisualEntity.ROOT_PATH
- Update abstract-camel-visual-entity.ts canDragNode check for the same path
- Update camel-component-filter.service.test.ts unit test path accordingly
- Update e2e test branchingStepAddition.cy.ts edge path references
- Update e2e test stepCopy.cy.ts expected Kamelet copy structure to use
  spec.template.route.from instead of spec.template.from

Relates to KaotoIO#3841

Author: lordrip

packages/ui-tests/cypress/e2e/designer/basicNodeActions/stepCopy.cy.ts

@@ -107,15 +107,17 @@ describe('Tests for Design page', { browser: '!firefox' }, () => {
           types: { out: { mediaType: 'application/json' } },
           dependencies: ['camel:timer', 'camel:http', 'camel:kamelet'],
           template: {
-            from: {
-              id: 'from-1870',
-              uri: 'timer:user',
-              parameters: { period: '{{period}}' },
-              steps: [
-                { setBody: { id: 'setBody-3387', expression: { simple: {} } } },
-                { marshal: { id: 'marshal-1414' } },
-                { to: { uri: 'kamelet:sink', parameters: {} } },
-              ],
+            route: {
+              from: {
+                id: 'from-1870',
+                uri: 'timer:user',
+                parameters: { period: '{{period}}' },
+                steps: [
+                  { setBody: { id: 'setBody-3387', expression: { simple: {} } } },
+                  { marshal: { id: 'marshal-1414' } },
+                  { to: { uri: 'kamelet:sink', parameters: {} } },
+                ],
+              },
             },
           },
         },

packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepAddition.cy.ts

@@ -63,8 +63,8 @@ describe('Test for Branching actions from the canvas', () => {
     cy.checkNodeExist('activemq', 1);
     cy.checkEdgeExists(
       'eip-action',
-      'template.from.steps.1.choice.when.0.steps.1.setHeader',
-      'template.from.steps.1.choice.when.0.steps.2.to',
+      'template.route.from.steps.1.choice.when.0.steps.1.setHeader',
+      'template.route.from.steps.1.choice.when.0.steps.2.to',
     );
   });
 
@@ -79,8 +79,8 @@ describe('Test for Branching actions from the canvas', () => {
     cy.checkNodeExist('activemq', 1);
     cy.checkEdgeExists(
       'eip-action',
-      'template.from.steps.1.choice.when.0.steps.0.to',
-      'template.from.steps.1.choice.when.0.steps.1.to',
+      'template.route.from.steps.1.choice.when.0.steps.0.to',
+      'template.route.from.steps.1.choice.when.0.steps.1.to',
     );
   });
 
@@ -93,6 +93,6 @@ describe('Test for Branching actions from the canvas', () => {
     cy.chooseFromCatalog('component', 'activemq');
 
     cy.checkNodeExist('activemq', 1);
-    cy.checkEdgeExists('eip-action', 'template.from.steps.2.to', 'template.from.steps.3.filter');
+    cy.checkEdgeExists('eip-action', 'template.route.from.steps.2.to', 'template.route.from.steps.3.filter');
   });
 });

packages/ui-tests/cypress/fixtures/flows/kamelet/basic.yaml

@@ -24,18 +24,19 @@ spec:
     - camel:http
     - camel:kamelet
   template:
-    from:
-      id: from-1870
-      uri: timer:user
-      parameters:
-        period: "{{period}}"
-      steps:
-        - setBody:
-            id: setBody-3387
-            expression:
-              simple: {}
-        - marshal:
-            id: marshal-1414
-        - to:
-            uri: kamelet:sink
-            parameters: {}
+    route:
+      from:
+        id: from-1870
+        uri: timer:user
+        parameters:
+          period: '{{period}}'
+        steps:
+          - setBody:
+              id: setBody-3387
+              expression:
+                simple: {}
+          - marshal:
+              id: marshal-1414
+          - to:
+              uri: kamelet:sink
+              parameters: {}

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

@@ -236,7 +236,7 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
   canDragNode(path?: string) {
     if (!isDefined(path)) return false;
 
-    return path !== 'route' && path !== 'route.from' && path !== 'template.from';
+    return path !== 'route' && path !== 'route.from' && path !== 'template.route.from';
   }
 
   canDropOnNode(path?: string) {

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

@@ -338,7 +338,7 @@ describe('CamelComponentFilterService', () => {
     it('should not provide ProducerOnly components', () => {
       const filterFn = CamelComponentFilterService.getKameletCompatibleComponents(AddStepMode.ReplaceStep, {
         name: 'from',
-        path: 'template.from',
+        path: 'template.route.from',
         processorName: 'from' as keyof ProcessorDefinition,
         label: 'timer',
         isPlaceholder: false,

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

@@ -63,7 +63,7 @@ export class CamelComponentFilterService {
     const camelComponentFilter = this.getCamelCompatibleComponents(mode, visualEntityData, definition);
 
     /** For the `from` step we want to add kamelet:source and leverage the existing getCamelCompatibleComponents method */
-    if (mode === AddStepMode.ReplaceStep && visualEntityData.path === 'template.from') {
+    if (mode === AddStepMode.ReplaceStep && visualEntityData.path === 'template.route.from') {
       return (item: ITile) => {
         return (item.type === CatalogKind.Kamelet && item.name === 'source') || camelComponentFilter(item);
       };
@@ -82,7 +82,7 @@ export class CamelComponentFilterService {
   private static replaceFilter(mode: AddStepMode, visualEntityData: IVisualizationNodeData): TileFilter | undefined {
     if (
       mode === AddStepMode.ReplaceStep &&
-      (visualEntityData.path === 'route.from' || visualEntityData.path === 'template.from')
+      (visualEntityData.path === 'route.from' || visualEntityData.path === 'template.route.from')
     ) {
       /**
        * For the `from` step we want to show only components which are not `producerOnly`,