From a482a7a98fc16a4efad27eac38dd67eafe4b64a6 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 19 Feb 2024 19:56:05 +0100 Subject: [PATCH] [Discover] Support grid column settings on Surrounding Documents page (#177003) - Closes https://github.com/elastic/kibana/issues/174485 ### Summary This PR keeps track of column resizing on Surrounding documents page: if user resizes columns and thne loads more documents, the grid will rerender accordingly and it will keep custom column widths. ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --- .../context/context_app_content.tsx | 14 +++++ .../components/layout/discover_documents.tsx | 8 +-- .../utils/on_resize_grid_column.test.tsx | 56 +++++++++++++++++++ .../public/utils/on_resize_grid_column.ts | 21 +++++++ 4 files changed, 93 insertions(+), 6 deletions(-) create mode 100644 src/plugins/discover/public/utils/on_resize_grid_column.test.tsx create mode 100644 src/plugins/discover/public/utils/on_resize_grid_column.ts diff --git a/src/plugins/discover/public/application/context/context_app_content.tsx b/src/plugins/discover/public/application/context/context_app_content.tsx index fadb561aada0bb..f0dc48a1905e72 100644 --- a/src/plugins/discover/public/application/context/context_app_content.tsx +++ b/src/plugins/discover/public/application/context/context_app_content.tsx @@ -14,6 +14,7 @@ import type { DataView } from '@kbn/data-views-plugin/public'; import { SortDirection } from '@kbn/data-plugin/public'; import type { SortOrder } from '@kbn/saved-search-plugin/public'; import { CellActionsProvider } from '@kbn/cell-actions'; +import type { DiscoverGridSettings } from '@kbn/saved-search-plugin/common'; import type { DataTableRecord } from '@kbn/discover-utils/types'; import { type SearchResponseWarning, @@ -38,6 +39,7 @@ import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from './services/constants'; import { DocTableContext } from '../../components/doc_table/doc_table_context'; import { useDiscoverServices } from '../../hooks/use_discover_services'; import { DiscoverGridFlyout } from '../../components/discover_grid_flyout'; +import { onResizeGridColumn } from '../../utils/on_resize_grid_column'; export interface ContextAppContentProps { columns: string[]; @@ -92,6 +94,7 @@ export function ContextAppContent({ }: ContextAppContentProps) { const { uiSettings: config, uiActions } = useDiscoverServices(); const services = useDiscoverServices(); + const [gridSettings, setGridSettings] = useState(); const [expandedDoc, setExpandedDoc] = useState(); const isAnchorLoading = @@ -148,6 +151,15 @@ export function ContextAppContent({ [addFilter, dataView, onAddColumn, onRemoveColumn] ); + const onResize = useCallback( + (colSettings) => { + setGridSettings((currentGridSettings) => + onResizeGridColumn(colSettings, currentGridSettings) + ); + }, + [setGridSettings] + ); + return ( @@ -209,6 +221,8 @@ export function ContextAppContent({ renderDocumentView={renderDocumentView} services={services} configHeaderRowHeight={3} + settings={gridSettings} + onResize={onResize} /> diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx index c0147009f6f8e7..1d77cd50afd6c9 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx @@ -66,6 +66,7 @@ import { useSavedSearchInitial } from '../../services/discover_state_provider'; import { useFetchMoreRecords } from './use_fetch_more_records'; import { SelectedVSAvailableCallout } from './selected_vs_available_callout'; import { useDiscoverCustomization } from '../../../../customizations'; +import { onResizeGridColumn } from '../../../../utils/on_resize_grid_column'; const containerStyles = css` position: relative; @@ -86,12 +87,7 @@ export const onResize = ( stateContainer: DiscoverStateContainer ) => { const state = stateContainer.appState.getState(); - const grid = { ...(state.grid || {}) }; - const newColumns = { ...(grid.columns || {}) }; - newColumns[colSettings.columnId] = { - width: Math.round(colSettings.width), - }; - const newGrid = { ...grid, columns: newColumns }; + const newGrid = onResizeGridColumn(colSettings, state.grid); stateContainer.appState.update({ grid: newGrid }); }; diff --git a/src/plugins/discover/public/utils/on_resize_grid_column.test.tsx b/src/plugins/discover/public/utils/on_resize_grid_column.test.tsx new file mode 100644 index 00000000000000..a334e629864842 --- /dev/null +++ b/src/plugins/discover/public/utils/on_resize_grid_column.test.tsx @@ -0,0 +1,56 @@ +/* + * 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 { onResizeGridColumn } from './on_resize_grid_column'; + +describe('Discover onResizeGridColumn', () => { + test('should handle empty initial value', () => { + const newGrid = onResizeGridColumn( + { + columnId: 'test', + width: 50, + }, + undefined + ); + + expect(newGrid).toMatchInlineSnapshot(` + Object { + "columns": Object { + "test": Object { + "width": 50, + }, + }, + } + `); + }); + + test('should set rounded width to state on resize column', () => { + const grid = { columns: { timestamp: { width: 173 }, someField: { width: 197 } } }; + + const newGrid = onResizeGridColumn( + { + columnId: 'someField', + width: 205.5435345534, + }, + grid + ); + + expect(newGrid).toMatchInlineSnapshot(` + Object { + "columns": Object { + "someField": Object { + "width": 206, + }, + "timestamp": Object { + "width": 173, + }, + }, + } + `); + }); +}); diff --git a/src/plugins/discover/public/utils/on_resize_grid_column.ts b/src/plugins/discover/public/utils/on_resize_grid_column.ts new file mode 100644 index 00000000000000..cacbc2085b22fc --- /dev/null +++ b/src/plugins/discover/public/utils/on_resize_grid_column.ts @@ -0,0 +1,21 @@ +/* + * 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 type { DiscoverGridSettings } from '@kbn/saved-search-plugin/common'; + +export const onResizeGridColumn = ( + colSettings: { columnId: string; width: number }, + gridState: DiscoverGridSettings | undefined +): DiscoverGridSettings => { + const grid = { ...(gridState || {}) }; + const newColumns = { ...(grid.columns || {}) }; + newColumns[colSettings.columnId] = { + width: Math.round(colSettings.width), + }; + return { ...grid, columns: newColumns }; +};