From 6d76bca8591fb27b55efbf91ccf408b50f90a68d Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Wed, 25 Aug 2021 12:09:19 +0200
Subject: [PATCH] Fix dependency graph with new nodes

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .changeset/thirty-seas-bathe.md               |  5 +++++
 .../DependencyGraph/DependencyGraph.test.tsx  | 22 +++++++++++++++++++
 .../DependencyGraph/DependencyGraph.tsx       |  2 +-
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/thirty-seas-bathe.md

diff --git a/.changeset/thirty-seas-bathe.md b/.changeset/thirty-seas-bathe.md
new file mode 100644
index 0000000000..eb82ec1fdf
--- /dev/null
+++ b/.changeset/thirty-seas-bathe.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Handle changes to nodes passed into `<DependencyGraph>` correctly.
diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.test.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.test.tsx
index 2020c2ba65..d1d0eac36e 100644
--- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.test.tsx
+++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.test.tsx
@@ -49,6 +49,28 @@ describe('<DependencyGraph />', () => {
     expect(queryAllByTestId(LABEL_TEST_ID)).toHaveLength(0);
   });
 
+  it('update render if already referenced nodes are added later', async () => {
+    const { getByText, queryAllByTestId, findAllByTestId, rerender } = render(
+      <DependencyGraph nodes={nodes.slice(0, 2)} edges={edges} />,
+    );
+
+    let renderedNodes = await findAllByTestId(NODE_TEST_ID);
+    expect(renderedNodes).toHaveLength(2);
+    expect(getByText(nodes[0].id)).toBeInTheDocument();
+    expect(getByText(nodes[1].id)).toBeInTheDocument();
+    expect(queryAllByTestId(EDGE_TEST_ID)).toHaveLength(2);
+    expect(queryAllByTestId(LABEL_TEST_ID)).toHaveLength(0);
+
+    rerender(<DependencyGraph nodes={nodes} edges={edges} />);
+
+    renderedNodes = await findAllByTestId(NODE_TEST_ID);
+    expect(renderedNodes).toHaveLength(3);
+    expect(getByText(nodes[0].id)).toBeInTheDocument();
+    expect(getByText(nodes[1].id)).toBeInTheDocument();
+    expect(queryAllByTestId(EDGE_TEST_ID)).toHaveLength(2);
+    expect(queryAllByTestId(LABEL_TEST_ID)).toHaveLength(0);
+  });
+
   it('renders edge labels if present', async () => {
     const labeledEdges = [
       { ...edges[0], label: 'first' },
diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
index bf018b13c8..436eda614c 100644
--- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
+++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
@@ -171,7 +171,7 @@ export function DependencyGraph({
         .nodes()
         .find(nodeId => node.id === nodeId);
 
-      if (existingNode) {
+      if (existingNode && graph.current.node(existingNode)) {
         const { width, height, x, y } = graph.current.node(existingNode);
         graph.current.setNode(existingNode, { ...node, width, height, x, y });
       } else {