IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-21 14:03:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Move inspector into drawer component

* Fix up naming

* fix betterer lint issue

---------

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
This commit is contained in:
Kyle Cunningham 2024-05-29 15:33:05 -05:00 committed by GitHub
parent 7334f71e09
commit f5346e3e2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.betterer.results
View File

@ -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": [

2
.betterer.results.json
View File

@ -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
},
{

4
packages/grafana-ui/src/components/Table/CellActions.tsx
View File

@ -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={() => {

18
packages/grafana-ui/src/components/Table/TableCellInspectModal.tsx → packages/grafana-ui/src/components/Table/TableCellInspector.tsx
View File

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