From 9cdf02634f2a337a0433d653e80fee533d7042f4 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 1 Mar 2023 16:30:55 +0100 Subject: [PATCH 1/9] [Discover] Resizable cell popover and larger JSON popover --- .../discover_grid/discover_grid.scss | 19 ++++++++++ .../discover_grid/discover_grid.tsx | 2 ++ .../discover_grid/get_render_cell_popover.tsx | 33 +++++++++++++++++ .../discover_grid/get_render_cell_value.tsx | 36 ++++++++++--------- 4 files changed, 73 insertions(+), 17 deletions(-) create mode 100644 src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.scss b/src/plugins/discover/public/components/discover_grid/discover_grid.scss index a80f2cd6b5534..0244e28a8215c 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.scss +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.scss @@ -39,7 +39,26 @@ font-family: $euiCodeFontFamily; } +.euiDataGridRowCell__popover:has(.dscDiscoverGrid__cellPopoverWrapper) { + min-width: 100px; + min-height: 100px; + width: max-content; + max-width: 800px !important; + max-height: 800px !important; + + & > div { + height: 100%; + } +} + +.euiDataGridRowCell__popover:has(.dscDiscoverGrid__cellPopoverValue) { + resize: both; + width: 400px; +} + .dscDiscoverGrid__cellPopover { + height: 100%; + // Fixes https://github.com/elastic/kibana/issues/145216 in Chrome .lines-content.monaco-editor-background { overflow: unset !important; diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx index d571de95f074d..91d393c04513d 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx @@ -33,6 +33,7 @@ import { getSchemaDetectors } from './discover_grid_schema'; import { DiscoverGridFlyout } from './discover_grid_flyout'; import { DiscoverGridContext } from './discover_grid_context'; import { getRenderCellValueFn } from './get_render_cell_value'; +import { getRenderCellPopoverFn } from './get_render_cell_popover'; import { DiscoverGridSettings } from './types'; import { getEuiGridColumns, @@ -601,6 +602,7 @@ export const DiscoverGrid = ({ onColumnResize={onResize} pagination={paginationObj} renderCellValue={renderCellValue} + renderCellPopover={getRenderCellPopoverFn} ref={dataGridRef} rowCount={rowCount} schemaDetectors={schemaDetectors} diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx new file mode 100644 index 0000000000000..f48afb7008aa2 --- /dev/null +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx @@ -0,0 +1,33 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { css } from '@emotion/react'; +import { EuiDataGridProps, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; + +const containerStyles = css` + height: 100%; +`; + +export const getRenderCellPopoverFn: EuiDataGridProps['renderCellPopover'] = ({ + cellActions, + children, +}) => { + return ( + + {children} + {cellActions} + + ); +}; diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx index bfea84e45dd6b..27fb9b57a9eff 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx @@ -19,11 +19,11 @@ import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, + EuiText, } from '@elastic/eui'; import { FieldFormatsStart } from '@kbn/field-formats-plugin/public'; import { DiscoverGridContext } from './discover_grid_context'; import { JsonCodeEditor } from '../json_code_editor/json_code_editor'; -import { defaultMonacoEditorWidth } from './constants'; import { formatFieldValue } from '../../utils/format_value'; import { formatHit } from '../../utils/format_hit'; import { DataTableRecord, EsHitRecord } from '../../types'; @@ -203,8 +203,8 @@ function renderPopoverContent({ @@ -214,20 +214,22 @@ function renderPopoverContent({ return ( - + + + {closeButton} From 2dea2a3aeddf29f791696808a446ce7f866d8391 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 1 Mar 2023 16:43:28 +0100 Subject: [PATCH 2/9] [Discover] Some updates --- .../discover/public/components/discover_grid/discover_grid.scss | 2 +- .../public/components/discover_grid/get_render_cell_value.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.scss b/src/plugins/discover/public/components/discover_grid/discover_grid.scss index 0244e28a8215c..49d5a19950cdb 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.scss +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.scss @@ -42,7 +42,7 @@ .euiDataGridRowCell__popover:has(.dscDiscoverGrid__cellPopoverWrapper) { min-width: 100px; min-height: 100px; - width: max-content; + width: 516px; max-width: 800px !important; max-height: 800px !important; diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx index 27fb9b57a9eff..f294601f999ea 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx @@ -204,7 +204,7 @@ function renderPopoverContent({ From 1447383512a4dcd8d87242d4bb02199a0b88b9cd Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 1 Mar 2023 16:56:58 +0100 Subject: [PATCH 3/9] [Discover] Some updates --- .../public/components/discover_grid/discover_grid.scss | 4 +++- .../components/discover_grid/get_render_cell_value.tsx | 9 +++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.scss b/src/plugins/discover/public/components/discover_grid/discover_grid.scss index 49d5a19950cdb..0c4c37efe50ee 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.scss +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.scss @@ -43,8 +43,9 @@ min-width: 100px; min-height: 100px; width: 516px; - max-width: 800px !important; + max-width: 900px !important; max-height: 800px !important; + resize: horizontal; & > div { height: 100%; @@ -54,6 +55,7 @@ .euiDataGridRowCell__popover:has(.dscDiscoverGrid__cellPopoverValue) { resize: both; width: 400px; + height: 150px; } .dscDiscoverGrid__cellPopover { diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx index f294601f999ea..b7d1da25e7bcd 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx @@ -29,6 +29,7 @@ import { formatHit } from '../../utils/format_hit'; import { DataTableRecord, EsHitRecord } from '../../types'; import { useDiscoverServices } from '../../hooks/use_discover_services'; import { MAX_DOC_FIELDS_DISPLAYED } from '../../../common'; +import { defaultMonacoEditorWidth } from './constants'; import { type ShouldShowFieldInTableHandler } from '../../utils/get_should_show_field_handler'; const CELL_CLASS = 'dscDiscoverGrid__cellValue'; @@ -200,12 +201,8 @@ function renderPopoverContent({ {closeButton} - - + + ); From 652b845bfb9c07dfdcd96797ea2ce825708c92cf Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 5 Apr 2023 16:14:16 +0200 Subject: [PATCH 4/9] [Discover] Use eui api --- .../discover_grid/discover_grid.scss | 23 +++++---- .../discover_grid/discover_grid.tsx | 4 +- .../discover_grid/get_render_cell_popover.tsx | 48 ++++++++++++------- .../get_render_cell_value.test.tsx | 6 +-- .../discover_grid/get_render_cell_value.tsx | 2 +- 5 files changed, 50 insertions(+), 33 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.scss b/src/plugins/discover/public/components/discover_grid/discover_grid.scss index 0c4c37efe50ee..b5e63c5a44f8b 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.scss +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.scss @@ -39,26 +39,29 @@ font-family: $euiCodeFontFamily; } -.euiDataGridRowCell__popover:has(.dscDiscoverGrid__cellPopoverWrapper) { +.dscDiscoverGrid__cellPopover { min-width: 100px; min-height: 100px; - width: 516px; max-width: 900px !important; max-height: 800px !important; - resize: horizontal; + + &.dscDiscoverGrid__cellPopover--withJson { + resize: horizontal; + width: 516px; + } + + &:not(.dscDiscoverGrid__cellPopover--withJson) { + resize: both; + width: 400px; + height: 150px; + } & > div { height: 100%; } } -.euiDataGridRowCell__popover:has(.dscDiscoverGrid__cellPopoverValue) { - resize: both; - width: 400px; - height: 150px; -} - -.dscDiscoverGrid__cellPopover { +.dscDiscoverGrid__cellPopoverValueContainer { height: 100%; // Fixes https://github.com/elastic/kibana/issues/145216 in Chrome diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx index 91d393c04513d..a3165dd123545 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx @@ -381,6 +381,8 @@ export const DiscoverGrid = ({ [dataView, displayedRows, useNewFieldsApi, shouldShowFieldHandler, services.uiSettings] ); + const renderCellPopover = useMemo(() => getRenderCellPopoverFn(), []); + /** * Render variables */ @@ -602,7 +604,7 @@ export const DiscoverGrid = ({ onColumnResize={onResize} pagination={paginationObj} renderCellValue={renderCellValue} - renderCellPopover={getRenderCellPopoverFn} + renderCellPopover={renderCellPopover} ref={dataGridRef} rowCount={rowCount} schemaDetectors={schemaDetectors} diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx index f48afb7008aa2..9d4f8ff676804 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx @@ -6,28 +6,40 @@ * Side Public License, v 1. */ -import React from 'react'; +import React, { useEffect } from 'react'; import { css } from '@emotion/react'; +import classnames from 'classnames'; import { EuiDataGridProps, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; const containerStyles = css` height: 100%; `; -export const getRenderCellPopoverFn: EuiDataGridProps['renderCellPopover'] = ({ - cellActions, - children, -}) => { - return ( - - {children} - {cellActions} - - ); -}; +export const getRenderCellPopoverFn = + (): EuiDataGridProps['renderCellPopover'] => + ({ cellActions, setCellPopoverProps, children }) => { + useEffect(() => { + setCellPopoverProps({ + panelClassName: classnames('dscDiscoverGrid__cellPopover', { + 'dscDiscoverGrid__cellPopover--withJson': + children && + typeof children === 'object' && + 'props' in children && + children.props?.schema === 'kibana-json', + }), + }); + }, [setCellPopoverProps, children]); + + return ( + + {children} + {cellActions} + + ); + }; diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx index 6307d221fa394..3940879956562 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx @@ -248,7 +248,7 @@ describe('Discover grid cell rendering', function () { ); expect(component).toMatchInlineSnapshot(` From cc69478b3b3ce2392143caa71f3a34790c88797e Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 5 Apr 2023 16:51:48 +0200 Subject: [PATCH 5/9] [Discover] Update styles --- .../public/components/discover_grid/discover_grid.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.scss b/src/plugins/discover/public/components/discover_grid/discover_grid.scss index b5e63c5a44f8b..4de2d9e8dadee 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.scss +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.scss @@ -40,20 +40,20 @@ } .dscDiscoverGrid__cellPopover { - min-width: 100px; - min-height: 100px; + min-height: 140px; max-width: 900px !important; - max-height: 800px !important; &.dscDiscoverGrid__cellPopover--withJson { resize: horizontal; + min-width: 516px; width: 516px; } &:not(.dscDiscoverGrid__cellPopover--withJson) { resize: both; + min-width: 300px; width: 400px; - height: 150px; + max-height: 390px !important; } & > div { From 5555c831933099f11e981644caffdd95de9f3b74 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 5 Apr 2023 16:54:20 +0200 Subject: [PATCH 6/9] [Discover] Remove redundant class --- .../components/discover_grid/get_render_cell_popover.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx index 9d4f8ff676804..aa82223c8710c 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx @@ -31,13 +31,7 @@ export const getRenderCellPopoverFn = }, [setCellPopoverProps, children]); return ( - + {children} {cellActions} From 4afb920f50125ab2ecf50eb4753f18ad9d2ee0c9 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 5 Apr 2023 17:00:00 +0200 Subject: [PATCH 7/9] [Discover] Update snapshots --- .../get_render_cell_value.test.tsx | 75 ++++++++++++++----- .../discover_grid/get_render_cell_value.tsx | 7 +- 2 files changed, 61 insertions(+), 21 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx index 3940879956562..df58a4bda7331 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx @@ -120,7 +120,7 @@ describe('Discover grid cell rendering', function () { /> ); expect(component.html()).toMatchInlineSnapshot( - `"
100
"` + `"
100
"` ); }); @@ -146,7 +146,7 @@ describe('Discover grid cell rendering', function () { /> ); expect(component.html()).toMatchInlineSnapshot( - `"
100
"` + `"
100
"` ); findTestSubject(component, 'docTableClosePopover').simulate('click'); expect(closePopoverMockFn).toHaveBeenCalledTimes(1); @@ -275,9 +275,21 @@ describe('Discover grid cell rendering', function () { - + @@ -507,9 +518,21 @@ describe('Discover grid cell rendering', function () { - + @@ -671,9 +693,21 @@ describe('Discover grid cell rendering', function () { - + @@ -865,16 +898,18 @@ describe('Discover grid cell rendering', function () { responsive={false} > - + + /> + {closeButton} - + From ff5832cb23e1c47c14274d4b155b1f5722ef0e4a Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 5 Apr 2023 17:36:12 +0200 Subject: [PATCH 8/9] [Discover] Add tests --- .../get_render_cell_popover.test.tsx | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/plugins/discover/public/components/discover_grid/get_render_cell_popover.test.tsx diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.test.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.test.tsx new file mode 100644 index 0000000000000..6f7f336c1577c --- /dev/null +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.test.tsx @@ -0,0 +1,57 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { mount } from 'enzyme'; +import { getRenderCellPopoverFn } from './get_render_cell_popover'; +import { EuiDataGridCellPopoverElementProps } from '@elastic/eui'; + +describe('Discover grid cell popover rendering', function () { + const DiscoverGridCellPopover = getRenderCellPopoverFn() as React.FC< + Pick + >; + const CellValue = ({ schema }: { schema: string }) => { + return
{schema}
; + }; + + it('renders correctly', () => { + const setMock = jest.fn(); + const component = mount( + {'test'}} + setCellPopoverProps={setMock} + > + + + ); + expect(component.html()).toMatchInlineSnapshot( + `"
string
"` + ); + expect(setMock).toHaveBeenCalledWith({ + panelClassName: 'dscDiscoverGrid__cellPopover', + }); + }); + + it('renders correctly for json view', () => { + const setMock = jest.fn(); + const component = mount( + {'test'}} + setCellPopoverProps={setMock} + > + + + ); + expect(component.html()).toMatchInlineSnapshot( + `"
kibana-json
"` + ); + expect(setMock).toHaveBeenCalledWith({ + panelClassName: 'dscDiscoverGrid__cellPopover dscDiscoverGrid__cellPopover--withJson', + }); + }); +}); From 17cbe9b91cf994f73ec1c0e837e643eaf04852be Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 3 May 2023 17:29:10 +0200 Subject: [PATCH 9/9] [Discover] Change the signature --- .../discover_grid/discover_grid.tsx | 6 +-- ...sx => discover_grid_cell_popover.test.tsx} | 6 +-- .../discover_grid_cell_popover.tsx | 39 +++++++++++++++++++ .../discover_grid/get_render_cell_popover.tsx | 39 ------------------- 4 files changed, 42 insertions(+), 48 deletions(-) rename src/plugins/discover/public/components/discover_grid/{get_render_cell_popover.test.tsx => discover_grid_cell_popover.test.tsx} (87%) create mode 100644 src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.tsx delete mode 100644 src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx index 9285bdab045a5..2a9c29cf40b75 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx @@ -30,9 +30,9 @@ import { DataViewFieldEditorStart } from '@kbn/data-view-field-editor-plugin/pub import { DocViewFilterFn } from '../../services/doc_views/doc_views_types'; import { getSchemaDetectors } from './discover_grid_schema'; import { DiscoverGridFlyout } from './discover_grid_flyout'; +import { DiscoverGridCellPopover } from './discover_grid_cell_popover'; import { DiscoverGridContext } from './discover_grid_context'; import { getRenderCellValueFn } from './get_render_cell_value'; -import { getRenderCellPopoverFn } from './get_render_cell_popover'; import { DiscoverGridSettings } from './types'; import { getEuiGridColumns, @@ -379,8 +379,6 @@ export const DiscoverGrid = ({ [dataView, displayedRows, useNewFieldsApi, shouldShowFieldHandler, services.uiSettings] ); - const renderCellPopover = useMemo(() => getRenderCellPopoverFn(), []); - /** * Render variables */ @@ -602,7 +600,7 @@ export const DiscoverGrid = ({ onColumnResize={onResize} pagination={paginationObj} renderCellValue={renderCellValue} - renderCellPopover={renderCellPopover} + renderCellPopover={DiscoverGridCellPopover} ref={dataGridRef} rowCount={rowCount} schemaDetectors={schemaDetectors} diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.test.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.test.tsx similarity index 87% rename from src/plugins/discover/public/components/discover_grid/get_render_cell_popover.test.tsx rename to src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.test.tsx index 6f7f336c1577c..94b44b257b0e5 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.test.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.test.tsx @@ -8,13 +8,9 @@ import React from 'react'; import { mount } from 'enzyme'; -import { getRenderCellPopoverFn } from './get_render_cell_popover'; -import { EuiDataGridCellPopoverElementProps } from '@elastic/eui'; +import { DiscoverGridCellPopover } from './discover_grid_cell_popover'; describe('Discover grid cell popover rendering', function () { - const DiscoverGridCellPopover = getRenderCellPopoverFn() as React.FC< - Pick - >; const CellValue = ({ schema }: { schema: string }) => { return
{schema}
; }; diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.tsx new file mode 100644 index 0000000000000..4d37cfe793715 --- /dev/null +++ b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.tsx @@ -0,0 +1,39 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { useEffect } from 'react'; +import { css } from '@emotion/react'; +import classnames from 'classnames'; +import { EuiDataGridCellPopoverElementProps, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; + +const containerStyles = css` + height: 100%; +`; + +export const DiscoverGridCellPopover: React.FC< + Pick +> = ({ cellActions, setCellPopoverProps, children }) => { + useEffect(() => { + setCellPopoverProps({ + panelClassName: classnames('dscDiscoverGrid__cellPopover', { + 'dscDiscoverGrid__cellPopover--withJson': + children && + typeof children === 'object' && + 'props' in children && + children.props?.schema === 'kibana-json', + }), + }); + }, [setCellPopoverProps, children]); + + return ( + + {children} + {cellActions} + + ); +}; diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx deleted file mode 100644 index aa82223c8710c..0000000000000 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_popover.tsx +++ /dev/null @@ -1,39 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { useEffect } from 'react'; -import { css } from '@emotion/react'; -import classnames from 'classnames'; -import { EuiDataGridProps, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; - -const containerStyles = css` - height: 100%; -`; - -export const getRenderCellPopoverFn = - (): EuiDataGridProps['renderCellPopover'] => - ({ cellActions, setCellPopoverProps, children }) => { - useEffect(() => { - setCellPopoverProps({ - panelClassName: classnames('dscDiscoverGrid__cellPopover', { - 'dscDiscoverGrid__cellPopover--withJson': - children && - typeof children === 'object' && - 'props' in children && - children.props?.schema === 'kibana-json', - }), - }); - }, [setCellPopoverProps, children]); - - return ( - - {children} - {cellActions} - - ); - };