Fix closing of k8s pod drawer when data reloads (#21415)

* Add ID property to the table displaying kubernetes pods to avoid closing the info sidebar when the data reloads and needs to rerender.

Signed-off-by: Simon Stamm <simon.stamm@tui.com>

* Correct formatting

Signed-off-by: Simon Stamm <simon.stamm@tui.com>

* Change sideboard to drawer

Co-authored-by: Jamie Klassen <jklassen@vmware.com>
Signed-off-by: Simon Stamm <simon@stammtec.de>

---------

Signed-off-by: Simon Stamm <simon.stamm@tui.com>
Signed-off-by: Simon Stamm <simon@stammtec.de>
Co-authored-by: Jamie Klassen <jklassen@vmware.com>

.changeset/large-weeks-accept.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-kubernetes-react': patch
+---
+
+Add ID property to the table displaying kubernetes pods to avoid closing the info sidebar when the data reloads and needs to rerender.

plugins/kubernetes-react/src/components/Pods/PodsTable.tsx

@@ -125,6 +125,11 @@ const Memory = ({ clusterName, pod }: { clusterName: string; pod: Pod }) => {
 export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => {
   const cluster = useContext(ClusterContext);
   const defaultColumns: TableColumn<Pod>[] = [
+    {
+      title: 'ID',
+      field: 'metadata.uid',
+      hidden: true,
+    },
     {
       title: 'name',
       highlight: true,
@@ -176,7 +181,14 @@ export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => {
     <div style={tableStyle}>
       <Table
         options={{ paging: true, search: false, emptyRowsWhenPaging: false }}
-        data={pods as Pod[]}
+        // It was observed that in some instances the pod drawer closes when new data (like CPU usage) is available and the table reloads.
+        // Mapping the metadata UID to the tables ID fixes this problem.
+        data={
+          (pods as Pod[]).map((pod: Pod) => ({
+            ...pod,
+            id: pod?.metadata?.uid,
+          })) as any as Pod[]
+        }
         columns={columns}
       />
     </div>