diff --git a/packages/grafana-ui/src/components/Table/TableCellInspector.test.tsx b/packages/grafana-ui/src/components/Table/TableCellInspector.test.tsx new file mode 100644 index 00000000000..c4a6e823add --- /dev/null +++ b/packages/grafana-ui/src/components/Table/TableCellInspector.test.tsx @@ -0,0 +1,17 @@ +import { screen, render } from '@testing-library/react'; + +import { TableCellInspector, TableCellInspectorMode } from './TableCellInspector'; + +describe('TableCellInspector', () => { + it.each([ + { type: 'string', value: 'simple string' }, + { type: 'number', value: 12345 }, + { type: 'object', value: { key: 'value', anotherKey: 42 } }, + { type: 'array', value: [1, 2, 3, 4, 5] }, + { type: 'null', value: null }, + { type: 'undefined', value: undefined }, + ])('should successfully render for input of type $type', ({ value }) => { + render( {}} mode={TableCellInspectorMode.text} />); + expect(screen.getByText('Copy to Clipboard')).toBeInTheDocument(); + }); +}); diff --git a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx index 10169328ba4..e1ecae5b355 100644 --- a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx +++ b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx @@ -18,15 +18,21 @@ export enum TableCellInspectorMode { } interface TableCellInspectorProps { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - value: string; + value: unknown; onDismiss: () => void; mode: TableCellInspectorMode; } +const toString = (value: unknown): string => { + if (typeof value === 'string') { + return value; + } + return value?.toString?.() ?? ''; +}; + export function TableCellInspector({ value, onDismiss, mode }: TableCellInspectorProps) { const [currentMode, setMode] = useState(mode); - const text = value.trim(); + const text = toString(value).trim(); const styles = useStyles2(getStyles); const tabs = [