feat(Canvas): Use path+scope as VizNode ID

Currently, when transforming a flow into `VisualizationNodes`, the nodes `Id`s are randomly generated, causing that whenever there's a change in the structure of the flow, previous `Id`s change. This commit uses the `path` + `scope` so the `VisualizationNodes` IDs are stable between interacting with the flow.
KaotoIO · Dec 13, 2024 · 548d4fa · 548d4fa
1 parent 15def29
commit 548d4fa
Show file tree

Hide file tree

Showing 25 changed files with 930 additions and 575 deletions.
diff --git a/packages/ui-tests/cypress/e2e/codeEditor/malformedFlows.cy.ts b/packages/ui-tests/cypress/e2e/codeEditor/malformedFlows.cy.ts
@@ -43,7 +43,7 @@ describe('Test for Multi route actions from the code editor', () => {
     cy.openDesignPage();
     cy.checkNodeExist('id', 1);
     cy.openStepConfigurationTab('id');
-    cy.get('[data-ouia-component-id^="OUIA-Generated-Title"]').should('have.text', 'id');
+    cy.get('[data-ouia-component-id^="OUIA-Generated-Title"]').should('have.text', 'route.from.steps.1.id');
     cy.closeStepConfigurationTab();
     // Related issue to provide more info https://github.com/KaotoIO/kaoto/issues/309
     // verify the route wasn't removed and left for the user to repair

diff --git a/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepAddition.cy.ts b/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepAddition.cy.ts
@@ -61,7 +61,10 @@ describe('Test for Branching actions from the canvas', () => {
     cy.chooseFromCatalog('component', 'activemq');
 
     cy.checkNodeExist('activemq', 1);
-    cy.checkEdgeExists('setHeader', 'activemq');
+    cy.checkEdgeExists(
+      'template.from.steps.1.choice.when.0.steps.1.setHeader',
+      'template.from.steps.1.choice.when.0.steps.2.to',
+    );
   });
 
   it('User prepends a step in a branch from the canvas (first in the branch)', () => {
@@ -73,7 +76,10 @@ describe('Test for Branching actions from the canvas', () => {
     cy.chooseFromCatalog('component', 'activemq');
 
     cy.checkNodeExist('activemq', 1);
-    cy.checkEdgeExists('activemq', 'digitalocean');
+    cy.checkEdgeExists(
+      'template.from.steps.1.choice.when.0.steps.0.to',
+      'template.from.steps.1.choice.when.0.steps.1.to',
+    );
   });
 
   it('User prepends a step to a step whose previous step contains branches', () => {
@@ -85,6 +91,6 @@ describe('Test for Branching actions from the canvas', () => {
     cy.chooseFromCatalog('component', 'activemq');
 
     cy.checkNodeExist('activemq', 1);
-    cy.checkEdgeExists('activemq', 'filter');
+    cy.checkEdgeExists('template.from.steps.2.to', 'template.from.steps.3.filter');
   });
 });
diff --git a/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts b/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts
@@ -12,7 +12,7 @@ describe('Test for missing config props canvas warnings', () => {
 
     cy.checkNodeExist('github', 1);
 
-    cy.get('[data-id^="github"] g')
+    cy.get('[data-id^="camel-route|route.from.steps.1.to"] g')
       .find('span[data-warning="true"].pf-v5-c-icon')
       .should('have.attr', 'title', '3 required parameters are not yet configured: [ type,repoName,repoOwner ]');
 
@@ -21,7 +21,7 @@ describe('Test for missing config props canvas warnings', () => {
     cy.interactWithConfigInputObject('parameters.repoName', 'test');
     cy.closeStepConfigurationTab();
 
-    cy.get('[data-id^="github"] g')
+    cy.get('[data-id^="camel-route|route.from.steps.1.to"] g')
       .find('span[data-warning="true"].pf-v5-c-icon')
       .should('have.attr', 'title', '2 required parameters are not yet configured: [ type,repoOwner ]');
   });
@@ -30,7 +30,7 @@ describe('Test for missing config props canvas warnings', () => {
     cy.uploadFixture('flows/pipe/errorHandler.yaml');
     cy.openDesignPage();
 
-    cy.get('[data-id^="delay-action"] g')
+    cy.get('[data-id^="webhook-binding|delay-action"] g')
       .find('span[data-warning="true"].pf-v5-c-icon')
       .should('have.attr', 'title', '1 required parameter is not yet configured: [ milliseconds ]');
 
@@ -39,6 +39,8 @@ describe('Test for missing config props canvas warnings', () => {
     cy.interactWithConfigInputObject('milliseconds', '1000');
     cy.closeStepConfigurationTab();
 
-    cy.get('[data-id^="delay-action"] g').find('span[data-warning="true"].pf-v5-c-icon').should('not.exist');
+    cy.get('[data-id^="webhook-binding|delay-action"] g')
+      .find('span[data-warning="true"].pf-v5-c-icon')
+      .should('not.exist');
   });
 });
diff --git a/packages/ui-tests/cypress/support/next-commands/design.ts b/packages/ui-tests/cypress/support/next-commands/design.ts
@@ -106,13 +106,13 @@ Cypress.Commands.add('checkNodeExist', (inputName, nodesCount) => {
 });
 
 Cypress.Commands.add('checkEdgeExists', (sourceName: string, targetName: string) => {
-  const idPattern = sourceName + '-\\d+-to-' + targetName + '-\\d+';
+  const idPattern = `${sourceName} >>> ${targetName}`;
   // Check if an element with the matching id exists
   cy.get('g').should(($elements) => {
     // Use Cypress commands to check if any element matches the id pattern
     const matchingElementExists = $elements.toArray().some((element) => {
       const dataId = Cypress.$(element).attr('data-id');
-      return dataId && dataId.match(idPattern);
+      return dataId === idPattern;
     });
     // Assert that at least one matching element exists
     expect(matchingElementExists).to.be.true;

diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
@@ -74,7 +74,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
 
     entities.forEach((entity) => {
       if (visibleFlows[entity.id]) {
-        const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(entity.toVizNode());
+        const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(entity.id, entity.toVizNode());
         nodes.push(...childNodes);
         edges.push(...childEdges);
       }

diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx
@@ -16,7 +16,7 @@ describe('CanvasSideBar', () => {
     const camelResource = new CamelRouteResource();
     camelResource.addNewEntity(EntityType.Route);
     const visualEntity = camelResource.getVisualEntities()[0];
-    selectedNode = FlowService.getFlowDiagram(visualEntity.toVizNode()).nodes[0];
+    selectedNode = FlowService.getFlowDiagram('test', visualEntity.toVizNode()).nodes[0];
     Provider = TestProvidersWrapper({ camelResource }).Provider;
   });
 

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
@@ -53,7 +53,7 @@ describe('CanvasForm', () => {
 
   beforeEach(() => {
     camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[2]; // choice
   });
 
@@ -146,7 +146,7 @@ describe('CanvasForm', () => {
     const flowId = camelRouteVisualEntity.id;
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -183,7 +183,7 @@ describe('CanvasForm', () => {
     const flowId = camelRouteVisualEntity.id;
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -221,7 +221,7 @@ describe('CanvasForm', () => {
     const newName = 'MyNewId';
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -261,7 +261,7 @@ describe('CanvasForm', () => {
     const newName = 'MyNewName';
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(kameletVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', kameletVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -293,7 +293,7 @@ describe('CanvasForm', () => {
   describe('should show the User-updated field under the modified tab', () => {
     beforeEach(() => {
       camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-      const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+      const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
       selectedNode = nodes[0]; // timer
     });
 
@@ -630,7 +630,7 @@ describe('CanvasForm', () => {
   describe('should show the Required field under the required tab', () => {
     beforeEach(() => {
       camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-      const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+      const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
       selectedNode = nodes[0]; // timer
     });
 

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`CanvasForm should render 1`] = `
           >
             <img
               alt="icon"
-              class="form-header__icon-log-1234"
+              class="form-header__icon-test|route.from.steps.1.choice.when.0.steps.0.log"
               src=""
             />
             <h2
@@ -32,7 +32,7 @@ exports[`CanvasForm should render 1`] = `
               data-ouia-component-type="PF5/Title"
               data-ouia-safe="true"
             >
-              log
+              route.from.steps.1.choice.when.0.steps.0.log
             </h2>
           </div>
           <div