chore(Canvas): Split CanvasService in ControllerService and `Flow…

…Service` Split `CanvasService` for better separation of concerns. fix: KaotoIO#1329
lordrip · Aug 19, 2024 · e939cb7 · e939cb7
1 parent a72d5f2
commit e939cb7
Show file tree

Hide file tree

Showing 8 changed files with 725 additions and 237 deletions.
diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
@@ -35,6 +35,7 @@ import { CanvasSideBar } from './CanvasSideBar';
 import { CanvasDefaults } from './canvas.defaults';
 import { CanvasEdge, CanvasNode, LayoutType } from './canvas.models';
 import { CanvasService } from './canvas.service';
+import { FlowService } from './flow.service';
 
 interface CanvasProps {
   contextToolbar?: ReactNode;
@@ -162,7 +163,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
 
     entities.forEach((entity) => {
       if (visibleFlows[entity.id]) {
-        const { nodes: childNodes, edges: childEdges } = CanvasService.getFlowDiagram(entity.toVizNode());
+        const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(entity.toVizNode());
         nodes.push(...childNodes);
         edges.push(...childEdges);
       }

diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx
@@ -15,19 +15,19 @@ import {
 import { IVisualizationNode, VisualComponentSchema } from '../../../models/visualization/base-visual-entity';
 import { VisualFlowsApi } from '../../../models/visualization/flows/support/flows-visibility';
 import {
-  VisibleFlowsContext,
-  VisibleFlowsProvider,
   CanvasFormTabsContext,
   CanvasFormTabsProvider,
+  VisibleFlowsContext,
+  VisibleFlowsProvider,
 } from '../../../providers';
 import { EntitiesContext, EntitiesProvider } from '../../../providers/entities.provider';
 import { camelRouteJson, kameletJson } from '../../../stubs';
 import { getFirstCatalogMap } from '../../../stubs/test-load-catalog';
+import { ROOT_PATH } from '../../../utils';
 import { CanvasForm } from './CanvasForm';
 import { CanvasNode } from './canvas.models';
-import { CanvasService } from './canvas.service';
 import { FormTabsModes } from './canvasformtabs.modes';
-import { ROOT_PATH } from '../../../utils';
+import { FlowService } from './flow.service';
 
 describe('CanvasForm', () => {
   let camelRouteVisualEntity: CamelRouteVisualEntity;
@@ -54,7 +54,7 @@ describe('CanvasForm', () => {
 
   beforeEach(() => {
     camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-    const { nodes } = CanvasService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[2]; // choice
   });
 
@@ -175,7 +175,7 @@ describe('CanvasForm', () => {
     const flowId = camelRouteVisualEntity.id;
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = CanvasService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -210,7 +210,7 @@ describe('CanvasForm', () => {
     const flowId = camelRouteVisualEntity.id;
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = CanvasService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -246,7 +246,7 @@ describe('CanvasForm', () => {
     const newName = 'MyNewId';
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = CanvasService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -284,7 +284,7 @@ describe('CanvasForm', () => {
     const newName = 'MyNewName';
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = CanvasService.getFlowDiagram(kameletVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram(kameletVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -312,7 +312,7 @@ describe('CanvasForm', () => {
   describe('should show the User-updated field under the modified tab', () => {
     beforeEach(() => {
       camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-      const { nodes } = CanvasService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+      const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
       selectedNode = nodes[0]; // timer
     });
 
@@ -640,7 +640,7 @@ describe('CanvasForm', () => {
   describe('should show the Required field under the required tab', () => {
     beforeEach(() => {
       camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-      const { nodes } = CanvasService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+      const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
       selectedNode = nodes[0]; // timer
     });