From 8ce024a3ced9fe63bc99ebe6b285e9ed27edcd76 Mon Sep 17 00:00:00 2001
From: "Ricardo M." <lordrip@gmail.com>
Date: Wed, 8 Jan 2025 12:29:48 +0100
Subject: [PATCH] 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: https://github.com/KaotoIO/kaoto/issues/1873
---
 .../cypress/e2e/codeEditor/sourceCodeActions.cy.ts    |  4 ++--
 .../propsWarnings/mandatoryPropsWarnings.cy.ts        |  4 ++--
 .../visualization/flows/pipe-visual-entity.test.ts    | 11 +++++++++++
 .../models/visualization/flows/pipe-visual-entity.ts  |  2 +-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/ui-tests/cypress/e2e/codeEditor/sourceCodeActions.cy.ts b/packages/ui-tests/cypress/e2e/codeEditor/sourceCodeActions.cy.ts
index 832fbeedc..0450032f2 100644
--- 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
index 72289b7ba..d10acfa39 100644
--- 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
index 0f0c4fca3..af008d951 100644
--- 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
index f117f20b7..5812afbf7 100644
--- 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[] {