From 437472811e4399c18eea5ed1a88307b74e572215 Mon Sep 17 00:00:00 2001
From: Kyle Cunningham <codeincarnate@users.noreply.github.com>
Date: Tue, 3 Sep 2024 15:27:14 -0500
Subject: [PATCH] Table: Fix nested table overlap when table is sorted (#92716)

---
 .betterer.results                                |  3 +--
 .../grafana-ui/src/components/Table/RowsList.tsx |  7 +++++--
 .../src/components/Table/TableCellInspector.tsx  | 16 ++++++++++++----
 public/locales/en-US/grafana.json                |  1 +
 public/locales/pseudo-LOCALE/grafana.json        |  1 +
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 2f9307b0639..7dfcd646d68 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -835,8 +835,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
     "packages/grafana-ui/src/components/Table/TableCellInspector.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "packages/grafana-ui/src/components/Table/reducer.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
diff --git a/packages/grafana-ui/src/components/Table/RowsList.tsx b/packages/grafana-ui/src/components/Table/RowsList.tsx
index 7e00eded5bb..4d3d7a1afb4 100644
--- a/packages/grafana-ui/src/components/Table/RowsList.tsx
+++ b/packages/grafana-ui/src/components/Table/RowsList.tsx
@@ -398,12 +398,15 @@ export const RowsList = (props: RowsListProps) => {
     }
   };
 
+  // Key the virtualizer for expanded rows
+  const expandedKey = Object.keys(tableState.expanded).join('|');
+
   return (
     <>
       <CustomScrollbar onScroll={handleScroll} hideHorizontalTrack={true} scrollTop={scrollTop}>
         <VariableSizeList
-          // This component needs an unmount/remount when row height or page changes
-          key={rowHeight + pageIndex}
+          // This component needs an unmount/remount when row height, page changes, or expanded rows change
+          key={`${rowHeight}${pageIndex}${expandedKey}`}
           height={listHeight}
           itemCount={itemCount}
           itemSize={getItemSize}
diff --git a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
index f3edf906ab6..24d6bcc649a 100644
--- a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
+++ b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
@@ -1,6 +1,7 @@
 import { isString } from 'lodash';
 import { useState } from 'react';
 
+import { Trans } from '../../utils/i18n';
 import { ClipboardButton } from '../ClipboardButton/ClipboardButton';
 import { Drawer } from '../Drawer/Drawer';
 import { Stack } from '../Layout/Stack/Stack';
@@ -13,6 +14,7 @@ export enum TableCellInspectorMode {
 }
 
 interface TableCellInspectorProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any;
   onDismiss: () => void;
   mode: TableCellInspectorMode;
@@ -28,11 +30,17 @@ export function TableCellInspector({ value, onDismiss, mode }: TableCellInspecto
     if (trimmedValue[0] === '{' || trimmedValue[0] === '[' || mode === 'code') {
       try {
         value = JSON.parse(value);
-        displayValue = JSON.stringify(value, null, '');
-      } catch {}
+        displayValue = JSON.stringify(value, null, '  ');
+      } catch (error: any) {
+        // Display helpful error to help folks diagnose json errors
+        console.log(
+          'Failed to parse JSON in Table cell inspector (this will cause JSON to not print nicely): ',
+          error.message
+        );
+      }
     }
   } else {
-    displayValue = JSON.stringify(value, null, '');
+    displayValue = JSON.stringify(value);
   }
   let text = displayValue;
 
@@ -63,7 +71,7 @@ export function TableCellInspector({ value, onDismiss, mode }: TableCellInspecto
     <Drawer onClose={onDismiss} title="Inspect value" tabs={tabBar}>
       <Stack direction="column" gap={2}>
         <ClipboardButton icon="copy" getText={() => text} style={{ marginLeft: 'auto', width: '200px' }}>
-          Copy to Clipboard
+          <Trans>Copy to Clipboard</Trans>
         </ClipboardButton>
         {currentMode === 'code' ? (
           <CodeEditor
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 1fe44ea4c33..543169e2276 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -378,6 +378,7 @@
       "placeholder": "Search all"
     }
   },
+  "Copy to Clipboard": "Copy to Clipboard",
   "correlations": {
     "add-new": "Add new",
     "alert": {
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index c8e15f1d979..7cce200ebd5 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -378,6 +378,7 @@
       "placeholder": "Ŝęäřčĥ äľľ"
     }
   },
+  "Copy to Clipboard": "Cőpy ŧő Cľįpþőäřđ",
   "correlations": {
     "add-new": "Åđđ ʼnęŵ",
     "alert": {