feat(canvas): Add root containers for Camel Routes

Currently, when rendering two routes at the same time, there's no easy way to distinguish one from the other. This commit adds a root container to each route, with a label to identify them. fix: #767
KaotoIO · Feb 6, 2024 · 4a5aa3f · 4a5aa3f
1 parent 498ea65
commit 4a5aa3f
Show file tree

Hide file tree

Showing 16 changed files with 993 additions and 272 deletions.
diff --git a/packages/ui/src/components/Form/schema.service.ts b/packages/ui/src/components/Form/schema.service.ts
@@ -4,9 +4,21 @@ import { filterDOMProps, FilterDOMPropsKeys } from 'uniforms';
 import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
 
 export class SchemaService {
+  static readonly DROPDOWN_PLACEHOLDER = 'Select an option...';
+  static readonly OMIT_FORM_FIELDS = [
+    'from',
+    'expression',
+    'dataFormatType',
+    'outputs',
+    'steps',
+    'when',
+    'otherwise',
+    'doCatch',
+    'doFinally',
+    'uri',
+  ];
   private readonly ajv: Ajv;
   private readonly FILTER_DOM_PROPS = ['$comment', 'additionalProperties'];
-  static readonly DROPDOWN_PLACEHOLDER = 'Select an option...';
 
   constructor() {
     this.ajv = new Ajv({

diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx
@@ -22,7 +22,6 @@ import { act } from 'react-dom/test-utils';
 import { RouteDefinition } from '@kaoto-next/camel-catalog/types';
 
 describe('CanvasForm', () => {
-  const omitFields = ['expression', 'dataFormatType', 'outputs', 'steps', 'when', 'otherwise', 'doCatch', 'doFinally'];
   const schemaService = new SchemaService();
 
   const schema = {
@@ -179,11 +178,12 @@ describe('CanvasForm', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
+      const setHeaderNode = rootNode.getChildren()![0].getChildren()![0];
       const selectedNode = {
         id: '1',
         type: 'node',
         data: {
-          vizNode: rootNode.getChildren()![0],
+          vizNode: setHeaderNode,
         },
       };
 
@@ -242,11 +242,12 @@ describe('CanvasForm', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
+      const setHeaderNode = rootNode.getChildren()![0].getChildren()![0];
       const selectedNode = {
         id: '1',
         type: 'node',
         data: {
-          vizNode: rootNode.getChildren()![0],
+          vizNode: setHeaderNode,
         },
       };
 
@@ -306,11 +307,12 @@ describe('CanvasForm', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
+      const marshalNode = rootNode.getChildren()![0].getChildren()![0];
       const selectedNode = {
         id: '1',
         type: 'node',
         data: {
-          vizNode: rootNode.getChildren()![0],
+          vizNode: marshalNode,
         },
       };
 
@@ -339,6 +341,7 @@ describe('CanvasForm', () => {
       expect(camelRoute.from.steps[0].marshal!.avro).toBeDefined();
       expect(camelRoute.from.steps[0].marshal!.id).toEqual('modified');
     });
+
     it('main form => dataformat', async () => {
       const camelRoute = {
         from: {
@@ -354,11 +357,12 @@ describe('CanvasForm', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
+      const marshalNode = rootNode.getChildren()![0].getChildren()![0];
       const selectedNode = {
         id: '1',
         type: 'node',
         data: {
-          vizNode: rootNode.getChildren()![0],
+          vizNode: marshalNode,
         },
       };
 
@@ -405,11 +409,12 @@ describe('CanvasForm', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
+      const loadBalanceNode = rootNode.getChildren()![0].getChildren()![0];
       const selectedNode = {
         id: '1',
         type: 'node',
         data: {
-          vizNode: rootNode.getChildren()![0],
+          vizNode: loadBalanceNode,
         },
       };
 
@@ -438,6 +443,7 @@ describe('CanvasForm', () => {
       expect(camelRoute.from.steps[0].loadBalance!.weighted).toBeDefined();
       expect(camelRoute.from.steps[0].loadBalance!.id).toEqual('modified');
     });
+
     it('main form => loadbalancer', async () => {
       const camelRoute = {
         from: {
@@ -453,11 +459,12 @@ describe('CanvasForm', () => {
       } as RouteDefinition;
       const entity = new CamelRouteVisualEntity(camelRoute);
       const rootNode: IVisualizationNode = entity.toVizNode();
+      const loadBalanceNode = rootNode.getChildren()![0].getChildren()![0];
       const selectedNode = {
         id: '1',
         type: 'node',
         data: {
-          vizNode: rootNode.getChildren()![0],
+          vizNode: loadBalanceNode,
         },
       };
 
@@ -503,7 +510,7 @@ describe('CanvasForm', () => {
         render(
           <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
             <AutoForm schema={schema!} model={{}} onChangeModel={() => {}}>
-              <AutoFields omitFields={omitFields} />
+              <AutoFields omitFields={SchemaService.OMIT_FORM_FIELDS} />
             </AutoForm>
           </AutoField.componentDetectorContext.Provider>,
         );
@@ -526,7 +533,7 @@ describe('CanvasForm', () => {
         render(
           <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
             <AutoForm schema={bridge!} model={{}} onChangeModel={() => {}}>
-              <AutoFields omitFields={omitFields} />
+              <AutoFields omitFields={SchemaService.OMIT_FORM_FIELDS} />
             </AutoForm>
           </AutoField.componentDetectorContext.Provider>,
         );
@@ -549,7 +556,7 @@ describe('CanvasForm', () => {
         render(
           <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
             <AutoForm schema={bridge!} model={{}} onChangeModel={() => {}}>
-              <AutoFields omitFields={omitFields} />
+              <AutoFields omitFields={SchemaService.OMIT_FORM_FIELDS} />
             </AutoForm>
           </AutoField.componentDetectorContext.Provider>,
         );

diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx
@@ -17,19 +17,6 @@ interface CanvasFormProps {
   selectedNode: CanvasNode;
 }
 
-const omitFields = [
-  'from',
-  'expression',
-  'dataFormatType',
-  'outputs',
-  'steps',
-  'when',
-  'otherwise',
-  'doCatch',
-  'doFinally',
-  'uri',
-];
-
 export const CanvasForm: FunctionComponent<CanvasFormProps> = (props) => {
   const entitiesContext = useContext(EntitiesContext);
   const formRef = useRef<typeof AutoForm>();
@@ -103,7 +90,7 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = (props) => {
               onChange={handleOnChangeIndividualProp}
               data-testid="autoform"
             >
-              <AutoFields omitFields={omitFields} />
+              <AutoFields omitFields={SchemaService.OMIT_FORM_FIELDS} />
               <ErrorsField />
             </AutoForm>
           </AutoField.componentDetectorContext.Provider>