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

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();
 

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