DRAFT: refactor(entities,resources): Decouple parsing from entities hook into a separate serializer class

packages/ui/src/components/InlineEdit/routeIdValidator.test.ts

@@ -18,7 +18,7 @@ describe('routeIdValidator', () => {
   });
 
   it('should return sucess if the name is unique', () => {
-    const resource = new CamelRouteResource(camelRouteJson);
+    const resource = new CamelRouteResource([camelRouteJson]);
     const visualEntities = resource.getVisualEntities();
     jest.spyOn(visualEntities[0], 'getId').mockReturnValue('flow-1234');
 
@@ -28,7 +28,7 @@ describe('routeIdValidator', () => {
   });
 
   it('should return an error if the name is not unique', () => {
-    const resource = new CamelRouteResource(camelRouteJson);
+    const resource = new CamelRouteResource([camelRouteJson]);
     const visualEntities = resource.getVisualEntities();
     jest.spyOn(visualEntities[0], 'getId').mockReturnValue('flow-1234');
 
@@ -39,7 +39,7 @@ describe('routeIdValidator', () => {
   });
 
   it('should return an error if the name is not a valid URI', () => {
-    const resource = new CamelRouteResource(camelRouteJson);
+    const resource = new CamelRouteResource([camelRouteJson]);
     const visualEntities = resource.getVisualEntities();
     jest.spyOn(visualEntities[0], 'getId').mockReturnValue('flow-1234');
 
@@ -50,7 +50,7 @@ describe('routeIdValidator', () => {
   });
 
   it('should return an error if the name is not unique neither a valid URI', () => {
-    const resource = new CamelRouteResource(camelRouteJson);
+    const resource = new CamelRouteResource([camelRouteJson]);
     const visualEntities = resource.getVisualEntities();
     jest.spyOn(visualEntities[0], 'getId').mockReturnValue('The amazing Route');
 

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

@@ -77,7 +77,7 @@ describe('Canvas', () => {
   });
 
   it('should be able to delete the routes', async () => {
-    const camelResource = new CamelRouteResource(camelRouteJson);
+    const camelResource = new CamelRouteResource([camelRouteJson]);
     const routeEntities = camelResource.getVisualEntities();
     const removeSpy = jest.spyOn(camelResource, 'removeEntity');
 

packages/ui/src/components/Visualization/Custom/ContextMenu/ItemEnableAllSteps.test.tsx

@@ -20,7 +20,7 @@ describe('ItemEnableAllSteps', () => {
   });
 
   it('should NOT render an ItemEnableAllSteps if there are not at least 2 or more disabled steps', () => {
-    const camelResource = new CamelRouteResource(camelRouteJson);
+    const camelResource = new CamelRouteResource([camelRouteJson]);
     const visualEntity = camelResource.getVisualEntities()[0];
     const { nodes, edges } = FlowService.getFlowDiagram(visualEntity.toVizNode());
 
@@ -50,7 +50,7 @@ describe('ItemEnableAllSteps', () => {
   });
 
   it('should call updateModel and updateEntitiesFromCamelResource on click', async () => {
-    const camelResource = new CamelRouteResource(camelRouteWithDisabledSteps);
+    const camelResource = new CamelRouteResource([camelRouteWithDisabledSteps]);
     const visualEntity = camelResource.getVisualEntities()[0];
     const { nodes, edges } = FlowService.getFlowDiagram(visualEntity.toVizNode());
 

packages/ui/src/components/Visualization/Custom/ContextMenu/NodeContextMenu.test.tsx

@@ -107,7 +107,7 @@ describe('NodeContextMenu', () => {
   });
 
   it('should render an ItemEnableAllSteps', () => {
-    const camelResource = new CamelRouteResource(camelRouteWithDisabledSteps);
+    const camelResource = new CamelRouteResource([camelRouteWithDisabledSteps]);
     const visualEntity = camelResource.getVisualEntities()[0];
     const { nodes, edges } = FlowService.getFlowDiagram(visualEntity.toVizNode());
 

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

@@ -59,12 +59,14 @@ describe('useEntities', () => {
     expect(notifierSpy).toHaveBeenCalledWith('entities:updated', camelRouteYaml_1_1_updated);
   });
 
-  it('should notifiy subscribers when the entities are updated', () => {
+  it('should notify subscribers when the entities are updated', () => {
     const notifierSpy = jest.spyOn(eventNotifier, 'next');
     const { result } = renderHook(() => useEntities());
 
     act(() => {
+      console.log('result.current.camelResource:', result.current.camelResource);
       result.current.camelResource.addNewEntity();
+      console.log('result.current.camelResource:', result.current.camelResource);
       result.current.updateSourceCodeFromEntities();
     });
 
@@ -162,69 +164,4 @@ describe('useEntities', () => {
 `,
     );
   });
-
-  describe('comments', () => {
-    it(`should store code's comments`, () => {
-      const code = `# This is a comment
-      # An indented comment
-
-- route:
-    id: route-1234
-    from:
-      id: from-1234
-      uri: timer
-      parameters:
-        period: "1000"
-        timerName: template
-      # This comment won't be stored
-      steps:
-        - log:
-            id: log-1234
-            message: \${body}
-`;
-
-      const { result } = renderHook(() => useEntities());
-
-      act(() => {
-        eventNotifier.next('code:updated', code);
-      });
-
-      expect(result.current.camelResource.getComments()).toEqual([
-        '# This is a comment',
-        '      # An indented comment',
-        '',
-      ]);
-    });
-
-    it('should add comments to the source code', () => {
-      const notifierSpy = jest.spyOn(eventNotifier, 'next');
-      const { result } = renderHook(() => useEntities());
-
-      act(() => {
-        result.current.camelResource.setComments(['# This is a comment', '      # An indented comment', '']);
-        result.current.camelResource.addNewEntity();
-        result.current.updateSourceCodeFromEntities();
-      });
-
-      expect(notifierSpy).toHaveBeenCalledWith(
-        'entities:updated',
-        `# This is a comment
-      # An indented comment
-
-- route:
-    id: route-1234
-    from:
-      id: from-1234
-      uri: timer
-      parameters:
-        period: "1000"
-        timerName: template
-      steps:
-        - log:
-            id: log-1234
-            message: \${body}
-`,
-      );
-    });
-  });
 });

packages/ui/src/hooks/entities.ts

@@ -1,21 +1,10 @@
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
-import { parse, stringify } from 'yaml';
-import { CamelResource, SourceSchemaType, createCamelResource } from '../models/camel';
+
+import { CamelResource, SourceSchemaType } from '../models/camel';
 import { BaseCamelEntity } from '../models/camel/entities';
 import { BaseVisualCamelEntity } from '../models/visualization/base-visual-entity';
 import { EventNotifier } from '../utils';
-
-/**
- * Regular expression to match commented lines, regardless of indentation
- * Given the following examples, the regular expression should match the comments:
- * ```
- * # This is a comment
- *     # This is an indented comment
- *# This is an indented comment
- * ```
- * The regular expression should match the first three lines
- */
-const COMMENTED_LINES_REGEXP = /^\s*#.*$/;
+import { CamelResourceFactory } from '../models/camel/camel-resource-factory';
 
 export interface EntitiesContextResult {
   entities: BaseCamelEntity[];
@@ -49,7 +38,7 @@ export interface EntitiesContextResult {
 
 export const useEntities = (): EntitiesContextResult => {
   const eventNotifier = EventNotifier.getInstance();
-  const [camelResource, setCamelResource] = useState<CamelResource>(createCamelResource());
+  const [camelResource, setCamelResource] = useState<CamelResource>(CamelResourceFactory.createCamelResource());
   const [entities, setEntities] = useState<BaseCamelEntity[]>([]);
   const [visualEntities, setVisualEntities] = useState<BaseVisualCamelEntity[]>([]);
 
@@ -58,36 +47,18 @@ export const useEntities = (): EntitiesContextResult => {
    */
   useLayoutEffect(() => {
     return eventNotifier.subscribe('code:updated', (code) => {
-      /** Extract comments from the source code */
-      const lines = code.split('\n');
-      const comments: string[] = [];
-      for (const line of lines) {
-        if (line.trim() === '' || COMMENTED_LINES_REGEXP.test(line)) {
-          comments.push(line);
-        } else {
-          break;
-        }
-      }
-
-      const rawEntities = parse(code);
-      const camelResource = createCamelResource(rawEntities);
-      camelResource.setComments(comments);
+      const camelResource = CamelResourceFactory.createCamelResource(code);
       const entities = camelResource.getEntities();
       const visualEntities = camelResource.getVisualEntities();
+
       setCamelResource(camelResource);
       setEntities(entities);
       setVisualEntities(visualEntities);
     });
   }, [eventNotifier]);
 
   const updateSourceCodeFromEntities = useCallback(() => {
-    let code = stringify(camelResource, { sortMapEntries: camelResource.sortFn, schema: 'yaml-1.1' }) || '';
-
-    if (camelResource.getComments().length > 0) {
-      const comments = camelResource.getComments().join('\n');
-      code = comments + '\n' + code;
-    }
-
+    const code = camelResource.toString();
     eventNotifier.next('entities:updated', code);
   }, [camelResource, eventNotifier]);
 
@@ -105,7 +76,7 @@ export const useEntities = (): EntitiesContextResult => {
 
   const setCurrentSchemaType = useCallback(
     (type: SourceSchemaType) => {
-      setCamelResource(createCamelResource(type));
+      setCamelResource(CamelResourceFactory.createCamelResource(type));
       updateEntitiesFromCamelResource();
     },
     [updateEntitiesFromCamelResource],

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createCamelResource should create an empty KameletResource if no args is specified 1`] = `
+exports[`CamelResourceFactory.createCamelResource should create an empty KameletResource if no args is specified 1`] = `
 [
   {
     "from": {

packages/ui/src/models/camel/camel-k-resource-factory.ts

@@ -0,0 +1,35 @@
+import { SourceSchemaType } from './source-schema-type';
+import { CamelResource } from './camel-resource';
+import { IntegrationResource } from './integration-resource';
+import { KameletResource } from './kamelet-resource';
+import { KameletBindingResource } from './kamelet-binding-resource';
+import { PipeResource } from './pipe-resource';
+import { IKameletDefinition } from '../kamelets-catalog';
+import {
+  Integration as IntegrationType,
+  KameletBinding as KameletBindingType,
+  Pipe as PipeType,
+} from '@kaoto/camel-catalog/types';
+
+export class CamelKResourceFactory {
+  static getCamelKResource(
+    json?: IntegrationType | IKameletDefinition | KameletBindingType | PipeType,
+    type?: SourceSchemaType,
+  ): CamelResource | undefined {
+    const jsonRecord = json ? (json as Record<string, unknown>) : {};
+
+    if ((jsonRecord && typeof json === 'object' && 'kind' in jsonRecord) || type) {
+      switch (jsonRecord['kind'] || type) {
+        case SourceSchemaType.Integration:
+          return new IntegrationResource(json as IntegrationType);
+        case SourceSchemaType.Kamelet:
+          return new KameletResource(json as IKameletDefinition);
+        case SourceSchemaType.KameletBinding:
+          return new KameletBindingResource(json as KameletBindingType);
+        case SourceSchemaType.Pipe:
+          return new PipeResource(json as PipeType);
+      }
+    }
+    return undefined;
+  }
+}

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

@@ -11,6 +11,7 @@
 import { BaseVisualCamelEntityDefinition, CamelResource } from './camel-resource';
 import { BaseCamelEntity } from './entities';
 import { SourceSchemaType } from './source-schema-type';
+import { CamelResourceSerializer, YamlCamelResourceSerializer } from '../../serializers';
 
 export type CamelKType = IntegrationType | IKameletDefinition | KameletBindingType | PipeType;
 
@@ -25,14 +26,17 @@
 
 export abstract class CamelKResource implements CamelResource {
   static readonly PARAMETERS_ORDER = ['apiVersion', 'kind', 'metadata', 'spec', 'source', 'steps', 'sink'];
+  // static serializer = new YamlResourceSerializer();
   readonly sortFn = createCamelPropertiesSorter(CamelKResource.PARAMETERS_ORDER) as (a: unknown, b: unknown) => number;
   protected resource: CamelKType;
   private metadata?: MetadataEntity;
-  private comments: string[] = [];
 
-  constructor(resource?: CamelKType) {
-    if (resource) {
-      this.resource = resource;
+  constructor(
+    parsedResource: unknown,
+    private readonly serializer: CamelResourceSerializer = new YamlCamelResourceSerializer(),
+  ) {
+    if (parsedResource) {
+      this.resource = parsedResource as CamelKType;
     } else {
       this.resource = {
         apiVersion: CAMEL_K_K8S_API_VERSION_V1,
@@ -94,12 +98,15 @@
   getCompatibleComponents(_mode: AddStepMode, _visualEntityData: IVisualizationNodeData): TileFilter | undefined {
     return undefined;
   }
+  getSerializer() {
+    return this.serializer;
+  }
 
-  setComments(comments: string[]) {
-    this.comments = comments;
+  setSerializer(_serializer: CamelResourceSerializer): void {
+    /** Not supported by default */
   }
 
-  getComments(): string[] {
-    return this.comments;
+  toString(): string {
+    return this.serializer.serialize(this);
   }
 }

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

@@ -0,0 +1,32 @@
+import { SourceSchemaType } from './source-schema-type';
+import { CamelResource } from './camel-resource';
+import { CamelResourceSerializer, XmlCamelResourceSerializer, YamlCamelResourceSerializer } from '../../serializers';
+import { CamelRouteResource } from './camel-route-resource';
+import { CamelKResourceFactory } from './camel-k-resource-factory';
+import { CamelYamlDsl, Integration, KameletBinding, Pipe } from '@kaoto/camel-catalog/types';
+import { IKameletDefinition } from '../kamelets-catalog';
+
+export class CamelResourceFactory {
+  /**
+   * Creates a CamelResource based on the given {@link type} and {@link source}. If
+   * both are not specified, a default empty {@link CamelRouteResource} is created.
+   * If only {@link type} is specified, an empty {@link CamelResource} of the given
+   * {@link type} is created.
+   * @param type
+   * @param source
+   */
+  static createCamelResource(source?: string, type?: SourceSchemaType): CamelResource {
+    const serializer: CamelResourceSerializer = XmlCamelResourceSerializer.isApplicable(source)
+      ? new XmlCamelResourceSerializer()
+      : new YamlCamelResourceSerializer();
+
+    const parsedCode = typeof source === 'string' ? serializer.parse(source) : source;
+    const resource = CamelKResourceFactory.getCamelKResource(
+      parsedCode as Integration | KameletBinding | Pipe | IKameletDefinition,
+      type,
+    );
+
+    if (resource) return resource;
+    return new CamelRouteResource(parsedCode as CamelYamlDsl, serializer);
+  }
+}