Table Panel: Move inspector into drawer component (#88196)

* Move inspector into drawer component

* Fix up naming

* fix betterer lint issue

---------

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

.betterer.results

@@ -725,7 +725,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "2"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
-    "packages/grafana-ui/src/components/Table/TableCellInspectModal.tsx:5381": [
+    "packages/grafana-ui/src/components/Table/TableCellInspector.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "packages/grafana-ui/src/components/Table/reducer.ts:5381": [

.betterer.results.json

@@ -1657,7 +1657,7 @@
           "count": 1
         },
         {
-          "path": "/packages/grafana-ui/src/components/Table/TableCellInspectModal.tsx",
+          "path": "/packages/grafana-ui/src/components/Table/TableCellInspector.tsx",
           "count": 1
         },
         {

packages/grafana-ui/src/components/Table/CellActions.tsx

@@ -5,7 +5,7 @@ import { IconButton } from '../IconButton/IconButton';
 import { Stack } from '../Layout/Stack/Stack';
 import { TooltipPlacement } from '../Tooltip';
 
-import { TableCellInspectModal } from './TableCellInspectModal';
+import { TableCellInspector } from './TableCellInspector';
 import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableCellProps } from './types';
 import { getTextAlign } from './utils';
 
@@ -70,7 +70,7 @@ export function CellActions({ field, cell, previewMode, showFilters, onCellFilte
       </div>
 
       {isInspecting && (
-        <TableCellInspectModal
+        <TableCellInspector
           mode={previewMode}
           value={cell.value}
           onDismiss={() => {

packages/grafana-ui/src/components/Table/TableCellInspector.tsx

@@ -2,16 +2,16 @@ import { isString } from 'lodash';
 import React from 'react';
 
 import { ClipboardButton } from '../ClipboardButton/ClipboardButton';
-import { Modal } from '../Modal/Modal';
+import { Drawer } from '../Drawer/Drawer';
 import { CodeEditor } from '../Monaco/CodeEditor';
 
-interface TableCellInspectModalProps {
+interface TableCellInspectorProps {
   value: any;
   onDismiss: () => void;
   mode: 'code' | 'text';
 }
 
-export function TableCellInspectModal({ value, onDismiss, mode }: TableCellInspectModalProps) {
+export function TableCellInspector({ value, onDismiss, mode }: TableCellInspectorProps) {
   let displayValue = value;
   if (isString(value)) {
     const trimmedValue = value.trim();
@@ -36,7 +36,7 @@ export function TableCellInspectModal({ value, onDismiss, mode }: TableCellInspe
   }
 
   return (
-    <Modal onDismiss={onDismiss} isOpen={true} title="Inspect value">
+    <Drawer onClose={onDismiss} title="Inspect value">
       {mode === 'code' ? (
         <CodeEditor
           width="100%"
@@ -50,11 +50,9 @@ export function TableCellInspectModal({ value, onDismiss, mode }: TableCellInspe
       ) : (
         <pre>{text}</pre>
       )}
-      <Modal.ButtonRow>
-        <ClipboardButton icon="copy" getText={() => text}>
-          Copy to Clipboard
-        </ClipboardButton>
-      </Modal.ButtonRow>
-    </Modal>
+      <ClipboardButton icon="copy" getText={() => text}>
+        Copy to Clipboard
+      </ClipboardButton>
+    </Drawer>
   );
 }