Skip to content

Commit

Permalink
chore(Canvas): Split CanvasService in ControllerService and `Flow…
Browse files Browse the repository at this point in the history 
…Service`

Split `CanvasService` for better separation of concerns.

fix: KaotoIO#1329
  • Loading branch information
@lordrip
lordrip committed Aug 19, 2024
1 parent a72d5f2 commit 1d03cc7
Show file tree
Hide file tree
Showing 8 changed files with 252 additions and 245 deletions.
3 changes: 2 additions & 1 deletion packages/ui/src/components/Visualization/Canvas/Canvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down
22 changes: 11 additions & 11 deletions packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
});

Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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
});

Expand Down Expand Up @@ -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
});

Expand Down
16 changes: 8 additions & 8 deletions ...__snapshots__/canvas.service.test.ts.snap → ...s/__snapshots__/flow.service.test.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CanvasService getFlowDiagram should return nodes and edges for a group with children 1`] = `
exports[`FlowService getFlowDiagram should return nodes and edges for a group with children 1`] = `
[
{
"data": {
Expand Down Expand Up @@ -206,9 +206,9 @@ exports[`CanvasService getFlowDiagram should return nodes and edges for a group
]
`;

exports[`CanvasService getFlowDiagram should return nodes and edges for a group with children 2`] = `[]`;
exports[`FlowService getFlowDiagram should return nodes and edges for a group with children 2`] = `[]`;

exports[`CanvasService getFlowDiagram should return nodes and edges for a multiple nodes VisualizationNode 1`] = `
exports[`FlowService getFlowDiagram should return nodes and edges for a multiple nodes VisualizationNode 1`] = `
[
{
"data": {
Expand Down Expand Up @@ -381,7 +381,7 @@ exports[`CanvasService getFlowDiagram should return nodes and edges for a multip
]
`;

exports[`CanvasService getFlowDiagram should return nodes and edges for a multiple nodes VisualizationNode 2`] = `
exports[`FlowService getFlowDiagram should return nodes and edges for a multiple nodes VisualizationNode 2`] = `
[
{
"edgeStyle": "solid",
Expand All @@ -393,7 +393,7 @@ exports[`CanvasService getFlowDiagram should return nodes and edges for a multip
]
`;

exports[`CanvasService getFlowDiagram should return nodes and edges for a simple VisualizationNode 1`] = `
exports[`FlowService getFlowDiagram should return nodes and edges for a simple VisualizationNode 1`] = `
[
{
"data": {
Expand Down Expand Up @@ -425,9 +425,9 @@ exports[`CanvasService getFlowDiagram should return nodes and edges for a simple
]
`;

exports[`CanvasService getFlowDiagram should return nodes and edges for a simple VisualizationNode 2`] = `[]`;
exports[`FlowService getFlowDiagram should return nodes and edges for a simple VisualizationNode 2`] = `[]`;

exports[`CanvasService getFlowDiagram should return nodes and edges for a two-nodes VisualizationNode 1`] = `
exports[`FlowService getFlowDiagram should return nodes and edges for a two-nodes VisualizationNode 1`] = `
[
{
"data": {
Expand Down Expand Up @@ -478,4 +478,4 @@ exports[`CanvasService getFlowDiagram should return nodes and edges for a two-no
]
`;

exports[`CanvasService getFlowDiagram should return nodes and edges for a two-nodes VisualizationNode 2`] = `[]`;
exports[`FlowService getFlowDiagram should return nodes and edges for a two-nodes VisualizationNode 2`] = `[]`;
109 changes: 0 additions & 109 deletions packages/ui/src/components/Visualization/Canvas/canvas.service.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,12 @@ import {
ModelKind,
Visualization,
} from '@patternfly/react-topology';
import { createVisualizationNode } from '../../../models/visualization';
import { BaseVisualCamelEntity } from '../../../models/visualization/base-visual-entity';
import { CustomGroupWithSelection } from '../Custom';
import { CanvasDefaults } from './canvas.defaults';
import { LayoutType } from './canvas.models';
import { CanvasService } from './canvas.service';

describe('CanvasService', () => {
beforeEach(() => {
CanvasService.nodes = [];
CanvasService.edges = [];
});

it('should start with an empty nodes array', () => {
expect(CanvasService.nodes).toEqual([]);
});

it('should start with an empty edges array', () => {
expect(CanvasService.edges).toEqual([]);
});

it('should allow consumers to create a new controller and register its factories', () => {
const layoutFactorySpy = jest.spyOn(Visualization.prototype, 'registerLayoutFactory');
const componentFactorySpy = jest.spyOn(Visualization.prototype, 'registerComponentFactory');
Expand Down Expand Up @@ -104,98 +89,4 @@ describe('CanvasService', () => {

expect(layoutFactory).toBeInstanceOf(layout);
});

describe('getFlowDiagram', () => {
it('should return nodes and edges for a simple VisualizationNode', () => {
const vizNode = createVisualizationNode('node', {});

const { nodes, edges } = CanvasService.getFlowDiagram(vizNode);

expect(nodes).toMatchSnapshot();
expect(edges).toMatchSnapshot();
});

it('should return nodes and edges for a group with children', () => {
const groupVizNode = createVisualizationNode('group', { isGroup: true });
const child1VizNode = createVisualizationNode('child1', {});
const child2VizNode = createVisualizationNode('child2', {});
groupVizNode.addChild(child1VizNode);
groupVizNode.addChild(child2VizNode);

const { nodes, edges } = CanvasService.getFlowDiagram(groupVizNode);

expect(nodes).toMatchSnapshot();
expect(edges).toMatchSnapshot();
});

it('should return nodes and edges for a two-nodes VisualizationNode', () => {
const vizNode = createVisualizationNode('node', {});
const childNode = createVisualizationNode('child', {});
vizNode.addChild(childNode);

const { nodes, edges } = CanvasService.getFlowDiagram(vizNode);

expect(nodes).toMatchSnapshot();
expect(edges).toMatchSnapshot();
});

it('should return nodes and edges for a multiple nodes VisualizationNode', () => {
const vizNode = createVisualizationNode('node', {});

const setHeaderNode = createVisualizationNode('set-header', {});
vizNode.setNextNode(setHeaderNode);
setHeaderNode.setPreviousNode(vizNode);

const choiceNode = createVisualizationNode('choice', {});
setHeaderNode.setNextNode(choiceNode);
choiceNode.setPreviousNode(setHeaderNode);

const directNode = createVisualizationNode('direct', {});
choiceNode.setNextNode(directNode);
directNode.setPreviousNode(choiceNode);

const whenNode = createVisualizationNode('when', {});
choiceNode.addChild(whenNode);

const otherwiseNode = createVisualizationNode('otherwise', {});
choiceNode.addChild(otherwiseNode);

const whenLeafNode = createVisualizationNode('when-leaf', {});
whenNode.addChild(whenLeafNode);

const processNode = createVisualizationNode('process', {});
otherwiseNode.addChild(processNode);
const logNode = createVisualizationNode('log', {});
processNode.addChild(logNode);

const { nodes, edges } = CanvasService.getFlowDiagram(vizNode);

expect(nodes).toMatchSnapshot();
expect(edges).toMatchSnapshot();
});

it('should return a group node for a multiple nodes VisualizationNode with a group', () => {
const routeNode = createVisualizationNode('route', {
entity: { getId: () => 'myId' } as BaseVisualCamelEntity,
isGroup: true,
});

const fromNode = createVisualizationNode('timer', {
path: 'from',
icon: undefined,
processorName: 'from',
componentName: 'timer',
});
routeNode.addChild(fromNode);

const { nodes, edges } = CanvasService.getFlowDiagram(routeNode);

expect(nodes).toHaveLength(2);
expect(edges).toHaveLength(0);

const group = nodes[nodes.length - 1];
expect(group.children).toEqual(['timer-1234']);
expect(group.group).toBeTruthy();
});
});
});
Loading

0 comments on commit 1d03cc7

Please sign in to comment.