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 `` 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('', () => { expect(queryAllByTestId(LABEL_TEST_ID)).toHaveLength(0); }); + it('update render if already referenced nodes are added later', async () => { + const { getByText, queryAllByTestId, findAllByTestId, rerender } = render( + , + ); + + 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(); + + 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 {