fix table height persist on context page

Signed-off-by: Ashwin P Chandran <[email protected]>

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -4,12 +4,7 @@
  */
 
 import React, { useState, useMemo, useCallback } from 'react';
-import {
-  EuiDataGrid,
-  EuiDataGridSorting,
-  EuiDataGridToolBarVisibilityOptions,
-  EuiPanel,
-} from '@elastic/eui';
+import { EuiDataGrid, EuiDataGridSorting, EuiPanel } from '@elastic/eui';
 import { IndexPattern, getServices } from '../../../opensearch_dashboards_services';
 import { fetchTableDataCell } from './data_grid_table_cell_value';
 import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
@@ -29,7 +24,6 @@ import { LegacyDiscoverTable } from '../default_discover_table/default_discover_
 import { getNewDiscoverSetting } from '../utils/local_storage';
 import { SortDirection, SortOrder } from '../../../saved_searches/types';
 import { useToolbarOptions } from './data_grid_toolbar';
-import { useSelector } from '../../utils/state_management';
 
 export interface DataGridTableProps {
   columns: string[];
@@ -73,10 +67,9 @@ export const DataGridTable = ({
   showPagination,
 }: DataGridTableProps) => {
   const services = getServices();
-  const { metadata } = useSelector((state) => state.discover);
   const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
   const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
-  const { toolbarOptions } = useToolbarOptions();
+  const { toolbarOptions, lineCount } = useToolbarOptions();
   const [pageSizeLimit, isShortDots, hideTimeColumn, defaultSortOrder] = useMemo(() => {
     return [
       services.uiSettings.get(SAMPLE_SIZE_SETTING),
@@ -102,10 +95,10 @@ export const DataGridTable = ({
   const rowHeightsOptions = useMemo(
     () => ({
       defaultHeight: {
-        lineCount: metadata?.lineCount || (includeSourceInColumns ? 3 : 1),
+        lineCount: lineCount || (includeSourceInColumns ? 3 : 1),
       },
     }),
-    [includeSourceInColumns, metadata?.lineCount]
+    [includeSourceInColumns, lineCount]
   );
 
   const onColumnSort = useCallback(

src/plugins/discover/public/application/components/data_grid/data_grid_toolbar.tsx

@@ -11,25 +11,23 @@ import {
   EuiRange,
 } from '@elastic/eui';
 import React, { useState } from 'react';
-import { setMetadata, useDispatch, useSelector } from '../../utils/state_management';
+import { useLocalStorage } from 'react-use';
 
-const AddtitionalControls = () => {
-  const { metadata } = useSelector((state) => state.discover);
-  const dispatch = useDispatch();
+const AddtitionalControls = ({
+  setLineCount,
+  lineCount,
+}: {
+  setLineCount: (lineCount: number) => void;
+  lineCount: number;
+}) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
-  const [localLineCount, setLocalLineCount] = useState(metadata?.lineCount || 1);
-
   const handleRangeChange = (e: any) => {
-    setLocalLineCount(Number(e.target.value));
-  };
-
-  const handleRangeUpdateComplete = () => {
-    dispatch(setMetadata({ lineCount: localLineCount }));
+    setLineCount(Number(e.target.value));
   };
 
   const onButtonClick = () => setIsPopoverOpen((open) => !open);
-  const closePopover = () => setIsPopoverOpen(false);
+  const closePopover = () => {};
 
   const button = (
     <EuiButtonEmpty
@@ -47,33 +45,37 @@ const AddtitionalControls = () => {
     <EuiPopover button={button} isOpen={isPopoverOpen} closePopover={closePopover}>
       <EuiFormRow label="Line Count" display="rowCompressed">
         <EuiRange
-          value={localLineCount}
+          value={lineCount}
           min={1}
           max={50}
           compressed
           name="Line Count"
           showInput
           onChange={handleRangeChange}
-          onMouseUp={handleRangeUpdateComplete}
-          onBlur={handleRangeUpdateComplete}
         />
       </EuiFormRow>
     </EuiPopover>
   );
 };
 
-export const useToolbarOptions = () => {
-  const toolbarOptions: EuiDataGridToolBarVisibilityOptions = {
+export const useToolbarOptions = (): {
+  toolbarOptions: EuiDataGridToolBarVisibilityOptions | boolean;
+  lineCount: number;
+} => {
+  const [lineCount, setLineCount] = useLocalStorage('discover:lineCount', 1);
+
+  const toolbarOptions = {
     showColumnSelector: {
       allowHide: false,
       allowReorder: true,
     },
     showStyleSelector: false,
     showFullScreenSelector: false,
-    additionalControls: <AddtitionalControls />,
+    additionalControls: <AddtitionalControls setLineCount={setLineCount} lineCount={lineCount} />,
   };
 
   return {
     toolbarOptions,
+    lineCount,
   };
 };

src/plugins/discover/public/application/components/doc_views/context_app.tsx

@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo, Fragment } from 'react';
-import { useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { SurrDocType } from './context/api/context';
 import { ActionBar } from './context/components/action_bar/action_bar';
 import { CONTEXT_STEP_SETTING, DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
@@ -84,7 +83,7 @@ export function ContextApp({
   );
 
   return (
-    <Fragment>
+    <>
       <ActionBar
         defaultStepSize={defaultStepSize}
         docCount={predecessorCount}
@@ -103,7 +102,6 @@ export function ContextApp({
           onFilter={onAddFilter}
           onMoveColumn={() => {}}
           onRemoveColumn={() => {}}
-          onReorderColumn={() => {}}
           onSetColumns={() => {}}
           onSort={() => {}}
           sort={sort}
@@ -122,6 +120,6 @@ export function ContextApp({
         onChangeCount={onChangeCount}
         type={SurrDocType.SUCCESSORS}
       />
-    </Fragment>
+    </>
   );
 }