[Data Exploerer] Persist line height

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

@@ -29,6 +29,7 @@ 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[];
@@ -72,9 +73,10 @@ 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 { lineCount, toolbarOptions } = useToolbarOptions();
+  const { toolbarOptions } = useToolbarOptions();
   const [pageSizeLimit, isShortDots, hideTimeColumn, defaultSortOrder] = useMemo(() => {
     return [
       services.uiSettings.get(SAMPLE_SIZE_SETTING),
@@ -100,10 +102,10 @@ export const DataGridTable = ({
   const rowHeightsOptions = useMemo(
     () => ({
       defaultHeight: {
-        lineCount,
+        lineCount: metadata?.lineCount || (includeSourceInColumns ? 3 : 1),
       },
     }),
-    [lineCount]
+    [includeSourceInColumns, metadata?.lineCount]
   );
 
   const onColumnSort = useCallback(
@@ -113,8 +115,9 @@ export const DataGridTable = ({
     [onSort]
   );
 
-  const renderCellValue = useMemo(() => fetchTableDataCell(indexPattern, rows), [
+  const renderCellValue = useMemo(() => fetchTableDataCell(indexPattern, rows, isShortDots), [
     indexPattern,
+    isShortDots,
     rows,
   ]);
 

src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.test.tsx

@@ -66,7 +66,7 @@ const customizedIndexPatternMock = getMockedIndexPatternWithCustomizedFields(
 
 describe('Testing fetchTableDataCell function', () => {
   it('should display empty span if no data', () => {
-    const DataGridTableCellValue = fetchTableDataCell(indexPatternMock, dataRowsMock);
+    const DataGridTableCellValue = fetchTableDataCell(indexPatternMock, dataRowsMock, false);
     const comp = shallow(
       <DataGridTableCellValue
         rowIndex={100}
@@ -86,7 +86,7 @@ describe('Testing fetchTableDataCell function', () => {
   });
 
   it('should display empty span if field is not defined in index pattern', () => {
-    const DataGridTableCellValue = fetchTableDataCell(indexPatternMock, dataRowsMock);
+    const DataGridTableCellValue = fetchTableDataCell(indexPatternMock, dataRowsMock, false);
     const comp = shallow(
       <DataGridTableCellValue
         rowIndex={0}
@@ -106,7 +106,11 @@ describe('Testing fetchTableDataCell function', () => {
   });
 
   it('should display JSON string representation of the data if columnId is _source and isDetails is false', () => {
-    const DataGridTableCellValue = fetchTableDataCell(customizedIndexPatternMock, dataRowsMock);
+    const DataGridTableCellValue = fetchTableDataCell(
+      customizedIndexPatternMock,
+      dataRowsMock,
+      false
+    );
     const comp = shallow(
       <DataGridTableCellValue
         rowIndex={0}
@@ -130,7 +134,11 @@ describe('Testing fetchTableDataCell function', () => {
   });
 
   it('should display EuiDescriptionList if columnId is _source and isDetails is false', () => {
-    const DataGridTableCellValue = fetchTableDataCell(customizedIndexPatternMock, dataRowsMock);
+    const DataGridTableCellValue = fetchTableDataCell(
+      customizedIndexPatternMock,
+      dataRowsMock,
+      false
+    );
     const comp = shallow(
       <DataGridTableCellValue
         rowIndex={0}
@@ -165,7 +173,11 @@ describe('Testing fetchTableDataCell function', () => {
   });
 
   it('should correctly display data if columnId is in index pattern and is not _source', () => {
-    const DataGridTableCellValue = fetchTableDataCell(customizedIndexPatternMock, dataRowsMock);
+    const DataGridTableCellValue = fetchTableDataCell(
+      customizedIndexPatternMock,
+      dataRowsMock,
+      false
+    );
     const comp = shallow(
       <DataGridTableCellValue
         rowIndex={0}

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

@@ -51,7 +51,8 @@ export function fetchSourceTypeDataCell(
 
 export const fetchTableDataCell = (
   idxPattern: IndexPattern,
-  dataRows: OpenSearchSearchHit[] | undefined
+  dataRows: OpenSearchSearchHit[] | undefined,
+  isShortDots: boolean
 ) => ({ rowIndex, columnId, isDetails }: EuiDataGridCellValueElementProps) => {
   const singleRow = dataRows ? (dataRows[rowIndex] as Record<string, unknown>) : undefined;
   const flattenedRows = dataRows ? dataRows.map((hit) => idxPattern.flattenHit(hit)) : [];
@@ -73,7 +74,7 @@ export const fetchTableDataCell = (
   }
 
   if (fieldInfo?.type === '_source') {
-    return fetchSourceTypeDataCell(idxPattern, singleRow, columnId, isDetails);
+    return fetchSourceTypeDataCell(idxPattern, singleRow, columnId, isDetails, isShortDots);
   }
 
   const formattedValue = idxPattern.formatField(singleRow, columnId);

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

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

src/plugins/discover/public/application/utils/state_management/discover_slice.tsx

@@ -43,6 +43,15 @@ export interface DiscoverState {
    * since the last save
    */
   isDirty?: boolean;
+  /**
+   * Metadata for the view
+   */
+  metadata?: {
+    /**
+     * Number of lines to display per row
+     */
+    lineCount?: number;
+  };
 }
 
 export interface DiscoverRootState extends RootState {
@@ -170,6 +179,15 @@ export const discoverSlice = createSlice({
         isDirty: false,
       };
     },
+    setMetadata(state, action: PayloadAction<Partial<DiscoverState['metadata']>>) {
+      return {
+        ...state,
+        metadata: {
+          ...state.metadata,
+          ...action.payload,
+        },
+      };
+    },
   },
 });
 
@@ -185,5 +203,6 @@ export const {
   setState,
   updateState,
   setSavedSearchId,
+  setMetadata,
 } = discoverSlice.actions;
 export const { reducer } = discoverSlice;