From 44061448f83ee06602eb1bdef66d3499c4f95808 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Mon, 6 Oct 2025 11:32:59 +0200 Subject: [PATCH] Get rid of visualizer "missing key" errors in browser console MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- .changeset/two-emus-like.md | 5 +++++ .../src/components/AppVisualizerPage/TextVisualizer.tsx | 8 ++++---- 2 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 .changeset/two-emus-like.md diff --git a/.changeset/two-emus-like.md b/.changeset/two-emus-like.md new file mode 100644 index 0000000000..e8af7a7fa0 --- /dev/null +++ b/.changeset/two-emus-like.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-app-visualizer': patch +--- + +Ensure that the text rendering has react keys for all elements diff --git a/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx b/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx index b388da80b4..4385ba0938 100644 --- a/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx +++ b/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx @@ -63,15 +63,15 @@ function nodeToText( .filter(e => options?.showDisabled || e.instance) .sort((a, b) => a.spec.id.localeCompare(b.spec.id)); if (children.length === 0) { - return mkDiv(`${key} []`, { indent: true }); + return mkDiv(`${key} []`, { key, indent: true }); } return mkDiv( [ - mkDiv(`${key} [`), + mkDiv(`${key} [`, { key: 'start' }), ...children.map(e => - mkDiv(nodeToText(e, options), { indent: true }), + mkDiv(nodeToText(e, options), { indent: true, key: e.spec.id }), ), - mkDiv(']'), + mkDiv(']', { key: 'end' }), ], { key, indent: true }, );