From 44e3e720f349b052b8ecca23af2bdbadd8d5c83d 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
---
 .../visualization/flows/pipe-visual-entity.test.ts    | 11 +++++++++++
 .../models/visualization/flows/pipe-visual-entity.ts  |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

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[] {