[8.13] [Discover] Support grid column settings on Surrounding Documen…

…ts page (elastic#177003) (elastic#177231) # Backport This will backport the following commits from `main` to `8.13`: - [[Discover] Support grid column settings on Surrounding Documents page (elastic#177003)](elastic#177003)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
kibanamachine · Feb 19, 2024 · 08c27fd · 08c27fd
1 parent 1dc7a70
commit 08c27fd
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 6 deletions.
diff --git 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<DiscoverGridSettings>();
 
   const [expandedDoc, setExpandedDoc] = useState<DataTableRecord | undefined>();
   const isAnchorLoading =
@@ -148,6 +151,15 @@ export function ContextAppContent({
     [addFilter, dataView, onAddColumn, onRemoveColumn]
   );
 
+  const onResize = useCallback(
+    (colSettings) => {
+      setGridSettings((currentGridSettings) =>
+        onResizeGridColumn(colSettings, currentGridSettings)
+      );
+    },
+    [setGridSettings]
+  );
+
   return (
     <Fragment>
       <WrapperWithPadding>
@@ -209,6 +221,8 @@ export function ContextAppContent({
               renderDocumentView={renderDocumentView}
               services={services}
               configHeaderRowHeight={3}
+              settings={gridSettings}
+              onResize={onResize}
             />
           </CellActionsProvider>
         </div>

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