fix(Pipe): Use path as ID

Currently, the Kamelet name is being used as ID for the canvas node, causing to have duplicated IDs when a Kamelet is added twice or more times in a Pipe. The fix is to use the `path` instead. fix: #1873
KaotoIO · Jan 8, 2025 · 8ce024a · 8ce024a
1 parent 91ec9a6
commit 8ce024a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/packages/ui-tests/cypress/e2e/codeEditor/sourceCodeActions.cy.ts b/packages/ui-tests/cypress/e2e/codeEditor/sourceCodeActions.cy.ts
@@ -6,13 +6,13 @@ describe('Test source code editor', () => {
   it('loads the YAML editor and deletes steps, check with visualization', () => {
     cy.uploadFixture('flows/kameletBinding/kafkaSourceSink.yaml');
     cy.openDesignPage();
-    cy.get('[data-id^="json-deserialize-action"]').should('exist');
+    cy.get('[data-id^="Updated integration|steps.0"]').should('exist');
     cy.openSourceCode();
     cy.editorDeleteLine(19, 5);
 
     // CHECK that the code editor contains the new timer source step
     cy.openDesignPage();
-    cy.checkNodeExist('json-deserialize-action', 0);
+    cy.checkNodeExist('Updated integration|steps.0', 0);
   });
 
   it('User adds step to the YAML', () => {

diff --git a/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts b/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts
@@ -30,7 +30,7 @@ describe('Test for missing config props canvas warnings', () => {
     cy.uploadFixture('flows/pipe/errorHandler.yaml');
     cy.openDesignPage();
 
-    cy.get('[data-id^="webhook-binding|delay-action"] g')
+    cy.get('[data-id^="webhook-binding"] g[data-nodelabel="delay-action"]')
       .find('span[data-warning="true"].pf-v5-c-icon')
       .should('have.attr', 'title', '1 required parameter is not yet configured: [ milliseconds ]');
 
@@ -39,7 +39,7 @@ describe('Test for missing config props canvas warnings', () => {
     cy.interactWithConfigInputObject('milliseconds', '1000');
     cy.closeStepConfigurationTab();
 
-    cy.get('[data-id^="webhook-binding|delay-action"] g')
+    cy.get('[data-id^="webhook-binding"] g[data-nodelabel="delay-action"]')
       .find('span[data-warning="true"].pf-v5-c-icon')
       .should('not.exist');
   });

diff --git a/packages/ui/src/models/visualization/flows/pipe-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/pipe-visual-entity.test.ts
@@ -168,6 +168,17 @@ describe('Pipe', () => {
       expect(vizNode.data.path).toEqual(PipeVisualEntity.ROOT_PATH);
     });
 
+    it('should use the path as the node id', () => {
+      const vizNode = pipeVisualEntity.toVizNode();
+      const sourceNode = vizNode.getChildren()![0];
+      const stepNode = sourceNode.getNextNode()!;
+      const sinkNode = stepNode.getNextNode()!;
+
+      expect(sourceNode.id).toEqual('source');
+      expect(stepNode.id).toEqual('steps.0');
+      expect(sinkNode.id).toEqual('sink');
+    });
+
     it('should use the uri as the node label', () => {
       const vizNode = pipeVisualEntity.toVizNode();
 

diff --git a/packages/ui/src/models/visualization/flows/pipe-visual-entity.ts b/packages/ui/src/models/visualization/flows/pipe-visual-entity.ts
@@ -292,7 +292,7 @@ export class PipeVisualEntity implements BaseVisualCamelEntity {
       icon,
     };
 
-    return createVisualizationNode(step?.ref?.name ?? path, data);
+    return createVisualizationNode(path, data);
   }
 
   private getVizNodesFromSteps(steps: PipeStep[] = []): IVisualizationNode[] {
-Original file line number
+Diff line change
@@ Expand Up @@
           icon,
         };
-        return createVisualizationNode(step?.ref?.name ?? path, data);
+        return createVisualizationNode(path, data);
       }
       private getVizNodesFromSteps(steps: PipeStep[] = []): IVisualizationNode[] {
@@ Expand Down @@