Get rid of visualizer "missing key" errors in browser console

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.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

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 },
         );