From 255d6ce3cd7fafc2cdf5bad082b4590d64614177 Mon Sep 17 00:00:00 2001
From: George Thomas <georgefsthomas@gmail.com>
Date: Mon, 16 May 2022 16:05:41 +0100
Subject: [PATCH] fix: Use non-empty edge IDs in React Flow trees

---
 .../src/TreeReactFlow/TreeReactFlow.tsx             | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/primer-components/src/TreeReactFlow/TreeReactFlow.tsx b/packages/primer-components/src/TreeReactFlow/TreeReactFlow.tsx
index 5dc8aec7..e386dc30 100644
--- a/packages/primer-components/src/TreeReactFlow/TreeReactFlow.tsx
+++ b/packages/primer-components/src/TreeReactFlow/TreeReactFlow.tsx
@@ -24,11 +24,14 @@ const convertTree = (
     data: { label: tree.label },
     position: { x, y },
   };
-  const thisToChildren: Edge[] = tree.childTrees.map((t) => ({
-    id: "",
-    source: id,
-    target: t.nodeId.toString(),
-  }));
+  const thisToChildren: Edge[] = tree.childTrees.map((t) => {
+    const target = t.nodeId.toString();
+    return {
+      id: JSON.stringify([id, target]),
+      source: id,
+      target,
+    };
+  });
   return {
     nodes: [thisNode, ...children.flatMap(({ nodes }) => nodes)],
     edges: [...thisToChildren, ...children.flatMap(({ edges }) => edges)],