Table: Fix nested table overlap when table is sorted (#92716)

.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"],

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}

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

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": {

public/locales/pseudo-LOCALE/grafana.json

@@ -378,6 +378,7 @@
       "placeholder": "Ŝęäřčĥ äľľ"
     }
   },
+  "Copy to Clipboard": "Cőpy ŧő Cľįpþőäřđ",
   "correlations": {
     "add-new": "Åđđ ʼnęŵ",
     "alert": {