refactor RowHeightSettings component to EUI layout (#203606)

2025-04-24 01:38:56 -04:00 · 2025-01-30 09:12:02 +01:00 · 2025-01-30 09:12:02 +01:00 · a376e9b169
commit a376e9b169
parent 6607934859
38 changed files with 341 additions and 377 deletions
--- a/src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/summary_column.test.tsx
+++ b/src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/summary_column.test.tsx
@ -50,7 +50,7 @@ const getSummaryProps = (
  setCellProps: () => {},
  closePopover: () => {},
  density: DataGridDensity.COMPACT,
-  rowHeight: ROWS_HEIGHT_OPTIONS.single,
+  rowHeight: 1,
  onFilter: jest.fn(),
  shouldShowFieldHandler: () => true,
  core: corePluginMock.createStart(),
--- a/src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/summary_column.tsx
+++ b/src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/summary_column.tsx
@ -19,7 +19,6 @@ import {
  getLogDocumentOverview,
  getMessageFieldWithFallbacks,
 } from '@kbn/discover-utils';
-import { ROWS_HEIGHT_OPTIONS } from '@kbn/unified-data-table';
 import { Resource } from './resource';
 import { Content } from './content';
 import { createResourceFields, formatJsonDocumentForContent } from './utils';
@ -55,6 +54,9 @@ export const SummaryColumn = (props: AllSummaryColumnProps) => {
 // eslint-disable-next-line import/no-default-export
 export default SummaryColumn;

+const DEFAULT_ROW_COUNT = 1;
+const SINGLE_ROW_COUNT = 1;
+
 const SummaryCell = ({
  density: maybeNullishDensity,
  rowHeight: maybeNullishRowHeight,
@ -65,8 +67,8 @@ const SummaryCell = ({
  const density = maybeNullishDensity ?? DataGridDensity.COMPACT;
  const isCompressed = density === DataGridDensity.COMPACT;

-  const rowHeight = maybeNullishRowHeight ?? ROWS_HEIGHT_OPTIONS.single;
-  const isSingleLine = rowHeight === ROWS_HEIGHT_OPTIONS.single || rowHeight === 1;
+  const rowHeight = maybeNullishRowHeight ?? DEFAULT_ROW_COUNT;
+  const isSingleLine = rowHeight === SINGLE_ROW_COUNT;

  const resourceFields = createResourceFields(row, core, share);
  const shouldRenderResource = resourceFields.length > 0;
--- a/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.test.tsx
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.test.tsx
@ -584,16 +584,16 @@ describe('UnifiedDataTable', () => {
        });

        expect(component.find(EuiDataGrid).last().prop('sorting')).toMatchInlineSnapshot(`
-        Object {
-          "columns": Array [
-            Object {
-              "direction": "desc",
-              "id": "message",
-            },
-          ],
-          "onSort": [Function],
-        }
-      `);
+                  Object {
+                    "columns": Array [
+                      Object {
+                        "direction": "desc",
+                        "id": "message",
+                      },
+                    ],
+                    "onSort": [Function],
+                  }
+              `);
      },
      EXTENDED_JEST_TIMEOUT
    );
@ -612,20 +612,20 @@ describe('UnifiedDataTable', () => {
        });

        expect(component.find(EuiDataGrid).last().prop('sorting')).toMatchInlineSnapshot(`
-        Object {
-          "columns": Array [
-            Object {
-              "direction": "desc",
-              "id": "bytes",
-            },
-            Object {
-              "direction": "desc",
-              "id": "message",
-            },
-          ],
-          "onSort": [Function],
-        }
-      `);
+                  Object {
+                    "columns": Array [
+                      Object {
+                        "direction": "desc",
+                        "id": "bytes",
+                      },
+                      Object {
+                        "direction": "desc",
+                        "id": "message",
+                      },
+                    ],
+                    "onSort": [Function],
+                  }
+              `);
      },
      EXTENDED_JEST_TIMEOUT
    );
@ -644,31 +644,31 @@ describe('UnifiedDataTable', () => {

        expect(component.find(EuiDataGrid).first().prop('toolbarVisibility'))
          .toMatchInlineSnapshot(`
-        Object {
-          "additionalControls": null,
-          "showColumnSelector": false,
-          "showDisplaySelector": Object {
-            "additionalDisplaySettings": <React.Fragment>
-              <UnifiedDataTableAdditionalDisplaySettings
-                headerRowHeight="custom"
-                headerRowHeightLines={1}
-                onChangeRowHeight={[Function]}
-                onChangeRowHeightLines={[Function]}
-                onChangeSampleSize={[MockFunction]}
-                rowHeight="custom"
-                rowHeightLines={3}
-                sampleSize={150}
-              />
-            </React.Fragment>,
-            "allowDensity": false,
-            "allowResetButton": false,
-            "allowRowHeight": false,
-          },
-          "showFullScreenSelector": true,
-          "showKeyboardShortcuts": true,
-          "showSortSelector": true,
-        }
-      `);
+          Object {
+            "additionalControls": null,
+            "showColumnSelector": false,
+            "showDisplaySelector": Object {
+              "additionalDisplaySettings": <React.Fragment>
+                <UnifiedDataTableAdditionalDisplaySettings
+                  headerLineCountInput={1}
+                  headerRowHeight="custom"
+                  lineCountInput={3}
+                  onChangeRowHeight={[Function]}
+                  onChangeRowHeightLines={[Function]}
+                  onChangeSampleSize={[MockFunction]}
+                  rowHeight="custom"
+                  sampleSize={150}
+                />
+              </React.Fragment>,
+              "allowDensity": false,
+              "allowResetButton": false,
+              "allowRowHeight": false,
+            },
+            "showFullScreenSelector": true,
+            "showKeyboardShortcuts": true,
+            "showSortSelector": true,
+          }
+        `);
      },
      EXTENDED_JEST_TIMEOUT
    );
@ -684,30 +684,30 @@ describe('UnifiedDataTable', () => {

        expect(component.find(EuiDataGrid).first().prop('toolbarVisibility'))
          .toMatchInlineSnapshot(`
-        Object {
-          "additionalControls": null,
-          "showColumnSelector": false,
-          "showDisplaySelector": Object {
-            "additionalDisplaySettings": <React.Fragment>
-              <UnifiedDataTableAdditionalDisplaySettings
-                headerRowHeight="custom"
-                headerRowHeightLines={1}
-                onChangeRowHeight={[Function]}
-                onChangeRowHeightLines={[Function]}
-                rowHeight="custom"
-                rowHeightLines={3}
-                sampleSize={200}
-              />
-            </React.Fragment>,
-            "allowDensity": false,
-            "allowResetButton": false,
-            "allowRowHeight": false,
-          },
-          "showFullScreenSelector": true,
-          "showKeyboardShortcuts": true,
-          "showSortSelector": true,
-        }
-      `);
+          Object {
+            "additionalControls": null,
+            "showColumnSelector": false,
+            "showDisplaySelector": Object {
+              "additionalDisplaySettings": <React.Fragment>
+                <UnifiedDataTableAdditionalDisplaySettings
+                  headerLineCountInput={1}
+                  headerRowHeight="custom"
+                  lineCountInput={3}
+                  onChangeRowHeight={[Function]}
+                  onChangeRowHeightLines={[Function]}
+                  rowHeight="custom"
+                  sampleSize={200}
+                />
+              </React.Fragment>,
+              "allowDensity": false,
+              "allowResetButton": false,
+              "allowRowHeight": false,
+            },
+            "showFullScreenSelector": true,
+            "showKeyboardShortcuts": true,
+            "showSortSelector": true,
+          }
+        `);
      },
      EXTENDED_JEST_TIMEOUT
    );
--- a/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.tsx
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.tsx
@ -839,6 +839,7 @@ export const UnifiedDataTable = ({
  const {
    rowHeight: headerRowHeight,
    rowHeightLines: headerRowHeightLines,
+    lineCountInput: headerLineCountInput,
    onChangeRowHeight: onChangeHeaderRowHeight,
    onChangeRowHeightLines: onChangeHeaderRowHeightLines,
  } = useRowHeight({
@ -850,14 +851,15 @@ export const UnifiedDataTable = ({
    onUpdateRowHeight: onUpdateHeaderRowHeight,
  });

-  const { rowHeight, rowHeightLines, onChangeRowHeight, onChangeRowHeightLines } = useRowHeight({
-    storage,
-    consumer,
-    key: 'dataGridRowHeight',
-    configRowHeight: configRowHeight ?? ROWS_HEIGHT_OPTIONS.default,
-    rowHeightState,
-    onUpdateRowHeight,
-  });
+  const { rowHeight, rowHeightLines, lineCountInput, onChangeRowHeight, onChangeRowHeightLines } =
+    useRowHeight({
+      storage,
+      consumer,
+      key: 'dataGridRowHeight',
+      configRowHeight: configRowHeight ?? ROWS_HEIGHT_OPTIONS.default,
+      rowHeightState,
+      onUpdateRowHeight,
+    });

  const euiGridColumns = useMemo(
    () =>
@ -1063,23 +1065,22 @@ export const UnifiedDataTable = ({
          {onUpdateDataGridDensity ? <EuiHorizontalRule margin="s" /> : null}
          <UnifiedDataTableAdditionalDisplaySettings
            rowHeight={rowHeight}
-            rowHeightLines={rowHeightLines}
            onChangeRowHeight={onChangeRowHeight}
            onChangeRowHeightLines={onChangeRowHeightLines}
            headerRowHeight={headerRowHeight}
-            headerRowHeightLines={headerRowHeightLines}
            onChangeHeaderRowHeight={onChangeHeaderRowHeight}
            onChangeHeaderRowHeightLines={onChangeHeaderRowHeightLines}
            maxAllowedSampleSize={maxAllowedSampleSize}
            sampleSize={sampleSizeState}
            onChangeSampleSize={onUpdateSampleSize}
+            lineCountInput={lineCountInput}
+            headerLineCountInput={headerLineCountInput}
          />
        </>
      ),
    };
  }, [
    headerRowHeight,
-    headerRowHeightLines,
    maxAllowedSampleSize,
    onChangeHeaderRowHeight,
    onChangeHeaderRowHeightLines,
@ -1089,9 +1090,10 @@ export const UnifiedDataTable = ({
    onUpdateRowHeight,
    onUpdateSampleSize,
    rowHeight,
-    rowHeightLines,
    sampleSizeState,
    onUpdateDataGridDensity,
+    lineCountInput,
+    headerLineCountInput,
  ]);

  const toolbarVisibility = useMemo(
--- a/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_additional_display_settings.test.tsx
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_additional_display_settings.test.tsx
@ -29,9 +29,9 @@ const renderDisplaySettings = (
    <UnifiedDataTableAdditionalDisplaySettings
      sampleSize={10}
      rowHeight={RowHeightMode.custom}
-      rowHeightLines={10}
+      lineCountInput={10}
      headerRowHeight={RowHeightMode.custom}
-      headerRowHeightLines={5}
+      headerLineCountInput={5}
      {...props}
    />
  );
@ -47,9 +47,9 @@ describe('UnifiedDataTableAdditionalDisplaySettings', function () {
          sampleSize={10}
          onChangeSampleSize={onChangeSampleSizeMock}
          rowHeight={RowHeightMode.custom}
-          rowHeightLines={10}
+          lineCountInput={10}
          headerRowHeight={RowHeightMode.custom}
-          headerRowHeightLines={5}
+          headerLineCountInput={5}
        />
      );
      const input = findTestSubject(component, 'unifiedDataTableSampleSizeInput').last();
@ -84,9 +84,9 @@ describe('UnifiedDataTableAdditionalDisplaySettings', function () {
          sampleSize={50}
          onChangeSampleSize={onChangeSampleSizeMock}
          rowHeight={RowHeightMode.custom}
-          rowHeightLines={10}
+          lineCountInput={10}
          headerRowHeight={RowHeightMode.custom}
-          headerRowHeightLines={5}
+          headerLineCountInput={5}
        />
      );
      const input = findTestSubject(component, 'unifiedDataTableSampleSizeInput').last();
@ -118,9 +118,9 @@ describe('UnifiedDataTableAdditionalDisplaySettings', function () {
          sampleSize={200}
          onChangeSampleSize={onChangeSampleSizeMock}
          rowHeight={RowHeightMode.custom}
-          rowHeightLines={10}
+          lineCountInput={10}
          headerRowHeight={RowHeightMode.custom}
-          headerRowHeightLines={5}
+          headerLineCountInput={5}
        />
      );

@ -155,9 +155,9 @@ describe('UnifiedDataTableAdditionalDisplaySettings', function () {
          sampleSize={50}
          onChangeSampleSize={onChangeSampleSizeMock}
          rowHeight={RowHeightMode.custom}
-          rowHeightLines={10}
+          lineCountInput={10}
          headerRowHeight={RowHeightMode.custom}
-          headerRowHeightLines={5}
+          headerLineCountInput={5}
        />
      );
      const input = findTestSubject(component, 'unifiedDataTableSampleSizeInput').last();
@ -191,9 +191,9 @@ describe('UnifiedDataTableAdditionalDisplaySettings', function () {
          maxAllowedSampleSize={customSampleSize}
          onChangeSampleSize={onChangeSampleSizeMock}
          rowHeight={RowHeightMode.custom}
-          rowHeightLines={10}
+          lineCountInput={10}
          headerRowHeight={RowHeightMode.custom}
-          headerRowHeightLines={5}
+          headerLineCountInput={5}
        />
      );

@ -230,9 +230,9 @@ describe('UnifiedDataTableAdditionalDisplaySettings', function () {
          sampleSize={customSampleSize}
          onChangeSampleSize={onChangeSampleSizeMock}
          rowHeight={RowHeightMode.custom}
-          rowHeightLines={10}
+          lineCountInput={10}
          headerRowHeight={RowHeightMode.custom}
-          headerRowHeightLines={5}
+          headerLineCountInput={5}
        />
      );
      let input = findTestSubject(component, 'unifiedDataTableSampleSizeInput').last();
@ -264,12 +264,12 @@ describe('UnifiedDataTableAdditionalDisplaySettings', function () {
        onChangeRowHeight: jest.fn(),
        onChangeRowHeightLines: jest.fn(),
      });
-      expect(screen.getByLabelText('Cell row height')).toBeInTheDocument();
+      expect(screen.getByLabelText('Body cell lines')).toBeInTheDocument();
    });

    it('should not render rowHeight if onChangeRowHeight and onChangeRowHeightLines are undefined', () => {
      renderDisplaySettings();
-      expect(screen.queryByLabelText('Cell row height')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('Body cell lines')).not.toBeInTheDocument();
    });

    it('should call onChangeRowHeight and onChangeRowHeightLines when the rowHeight changes', async () => {
@ -280,9 +280,9 @@ describe('UnifiedDataTableAdditionalDisplaySettings', function () {
        onChangeRowHeight,
        onChangeRowHeightLines,
      });
-      fireEvent.change(screen.getByRole('slider', { hidden: true }), { target: { value: 5 } });
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: 5 } });
      expect(onChangeRowHeightLines).toHaveBeenCalledWith(5);
-      await userEvent.click(screen.getByRole('button', { name: 'Auto fit' }));
+      await userEvent.click(screen.getByRole('button', { name: 'Auto' }));
      expect(onChangeRowHeight).toHaveBeenCalledWith('auto');
    });
  });
@ -293,12 +293,12 @@ describe('UnifiedDataTableAdditionalDisplaySettings', function () {
        onChangeHeaderRowHeight: jest.fn(),
        onChangeHeaderRowHeightLines: jest.fn(),
      });
-      expect(screen.getByLabelText('Header row height')).toBeInTheDocument();
+      expect(screen.getByLabelText('Max header cell lines')).toBeInTheDocument();
    });

    it('should not render headerRowHeight if onChangeHeaderRowHeight and onChangeHeaderRowHeightLines are undefined', () => {
      renderDisplaySettings();
-      expect(screen.queryByLabelText('Header row height')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('Max header cell lines')).not.toBeInTheDocument();
    });

    it('should call onChangeHeaderRowHeight and onChangeHeaderRowHeightLines when the headerRowHeight changes', async () => {
@ -309,9 +309,9 @@ describe('UnifiedDataTableAdditionalDisplaySettings', function () {
        onChangeHeaderRowHeight,
        onChangeHeaderRowHeightLines,
      });
-      fireEvent.change(screen.getByRole('slider', { hidden: true }), { target: { value: 3 } });
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: 3 } });
      expect(onChangeHeaderRowHeightLines).toHaveBeenCalledWith(3);
-      await userEvent.click(screen.getByRole('button', { name: 'Auto fit' }));
+      await userEvent.click(screen.getByRole('button', { name: 'Auto' }));
      expect(onChangeHeaderRowHeight).toHaveBeenCalledWith('auto');
    });
  });
--- a/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_additional_display_settings.tsx
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_additional_display_settings.tsx
@ -20,16 +20,16 @@ export const RANGE_STEP_SAMPLE_SIZE = 10;

 export interface UnifiedDataTableAdditionalDisplaySettingsProps {
  rowHeight: RowHeightSettingsProps['rowHeight'];
-  rowHeightLines: RowHeightSettingsProps['rowHeightLines'];
  onChangeRowHeight?: (rowHeight: RowHeightSettingsProps['rowHeight']) => void;
  onChangeRowHeightLines?: (rowHeightLines: number) => void;
  headerRowHeight: RowHeightSettingsProps['rowHeight'];
-  headerRowHeightLines: RowHeightSettingsProps['rowHeightLines'];
  onChangeHeaderRowHeight?: (headerRowHeight: RowHeightSettingsProps['rowHeight']) => void;
  onChangeHeaderRowHeightLines?: (headerRowHeightLines: number) => void;
  maxAllowedSampleSize?: number;
  sampleSize: number;
  onChangeSampleSize?: (sampleSize: number) => void;
+  lineCountInput: number;
+  headerLineCountInput: number;
 }

 const defaultOnChangeSampleSize = () => {};
@ -38,16 +38,16 @@ export const UnifiedDataTableAdditionalDisplaySettings: React.FC<
  UnifiedDataTableAdditionalDisplaySettingsProps
 > = ({
  rowHeight,
-  rowHeightLines,
  onChangeRowHeight,
  onChangeRowHeightLines,
  headerRowHeight,
-  headerRowHeightLines,
  onChangeHeaderRowHeight,
  onChangeHeaderRowHeightLines,
  maxAllowedSampleSize = DEFAULT_MAX_ALLOWED_SAMPLE_SIZE,
  sampleSize,
  onChangeSampleSize,
+  lineCountInput,
+  headerLineCountInput,
 }) => {
  const [activeSampleSize, setActiveSampleSize] = useState<number | ''>(sampleSize);
  const minRangeSampleSize = Math.max(
@ -97,14 +97,14 @@ export const UnifiedDataTableAdditionalDisplaySettings: React.FC<
    settings.push(
      <RowHeightSettings
        rowHeight={headerRowHeight}
-        rowHeightLines={headerRowHeightLines}
        label={i18n.translate('unifiedDataTable.headerRowHeightLabel', {
-          defaultMessage: 'Header row height',
+          defaultMessage: 'Max header cell lines',
        })}
        onChangeRowHeight={onChangeHeaderRowHeight}
-        onChangeRowHeightLines={onChangeHeaderRowHeightLines}
+        onChangeLineCountInput={onChangeHeaderRowHeightLines}
        data-test-subj="unifiedDataTableHeaderRowHeightSettings"
        maxRowHeight={5}
+        lineCountInput={headerLineCountInput}
      />
    );
  }
@ -113,13 +113,13 @@ export const UnifiedDataTableAdditionalDisplaySettings: React.FC<
    settings.push(
      <RowHeightSettings
        rowHeight={rowHeight}
-        rowHeightLines={rowHeightLines}
        label={i18n.translate('unifiedDataTable.rowHeightLabel', {
-          defaultMessage: 'Cell row height',
+          defaultMessage: 'Body cell lines',
        })}
        onChangeRowHeight={onChangeRowHeight}
-        onChangeRowHeightLines={onChangeRowHeightLines}
+        onChangeLineCountInput={onChangeRowHeightLines}
        data-test-subj="unifiedDataTableRowHeightSettings"
+        lineCountInput={lineCountInput}
      />
    );
  }
--- a/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_columns.test.tsx
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_columns.test.tsx
@ -360,10 +360,6 @@ describe('Data table columns', function () {
      expect(deserializeHeaderRowHeight(ROWS_HEIGHT_OPTIONS.auto)).toBe(undefined);
    });

-    it('returns 1 for single', () => {
-      expect(deserializeHeaderRowHeight(ROWS_HEIGHT_OPTIONS.single)).toBe(1);
-    });
-
    it('returns the value for other values', () => {
      expect(deserializeHeaderRowHeight(2)).toBe(2);
    });
--- a/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_columns.tsx
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_columns.tsx
@ -288,8 +288,6 @@ function buildEuiGridColumn({
 export const deserializeHeaderRowHeight = (headerRowHeightLines: number) => {
  if (headerRowHeightLines === ROWS_HEIGHT_OPTIONS.auto) {
    return undefined;
-  } else if (headerRowHeightLines === ROWS_HEIGHT_OPTIONS.single) {
-    return 1;
  }

  return headerRowHeightLines;
--- a/src/platform/packages/shared/kbn-unified-data-table/src/components/row_height_settings.test.tsx
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/components/row_height_settings.test.tsx
@ -12,20 +12,31 @@ import userEvent from '@testing-library/user-event';
 import React, { useState } from 'react';
 import { RowHeightSettings, RowHeightSettingsProps } from '../..';

-const renderRowHeightSettings = ({ maxRowHeight }: { maxRowHeight?: number } = {}) => {
+const renderRowHeightSettings = ({
+  maxRowHeight,
+  onChangeRowHeightLines,
+}: {
+  maxRowHeight?: number;
+  onChangeRowHeightLines?: jest.Mock;
+} = {}) => {
  const Wrapper = () => {
    const [rowHeight, setRowHeight] = useState<RowHeightSettingsProps['rowHeight']>();
-    const [rowHeightLines, setRowHeightLines] = useState<number>();
+    const [lineCount, setLineCount] = useState<number>(3);
+
+    const onChange = (value: number) => {
+      setLineCount(value);
+      onChangeRowHeightLines?.(value);
+    };

    return (
      <RowHeightSettings
        label="Row height"
        rowHeight={rowHeight}
-        rowHeightLines={rowHeightLines}
        maxRowHeight={maxRowHeight}
        onChangeRowHeight={setRowHeight}
-        onChangeRowHeightLines={setRowHeightLines}
+        onChangeLineCountInput={onChange}
        data-test-subj="rowHeightSettings"
+        lineCountInput={lineCount}
      />
    );
  };
@ -34,43 +45,42 @@ const renderRowHeightSettings = ({ maxRowHeight }: { maxRowHeight?: number } = {
 };

 describe('RowHeightSettings', () => {
-  it('should set rowHeight when the selected button changes', async () => {
+  it('should set rowHight to Custom by default', async () => {
    renderRowHeightSettings();
-    expect(screen.getByRole('button', { name: 'Single', pressed: true })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Auto fit', pressed: false })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Custom', pressed: false })).toBeInTheDocument();
-    await userEvent.click(screen.getByRole('button', { name: 'Auto fit' }));
-    expect(screen.getByRole('button', { name: 'Single', pressed: false })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Auto fit', pressed: true })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Custom', pressed: false })).toBeInTheDocument();
-    await userEvent.click(screen.getByRole('button', { name: 'Custom' }));
-    expect(screen.getByRole('button', { name: 'Single', pressed: false })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Auto fit', pressed: false })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Auto', pressed: false })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Custom', pressed: true })).toBeInTheDocument();
  });

-  it('should show the range input when Custom is selected', async () => {
+  it('should set rowHeight when the selected button changes', async () => {
    renderRowHeightSettings();
-    expect(screen.queryByRole('slider', { hidden: true })).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Auto', pressed: false })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Custom', pressed: true })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Auto' }));
+    expect(screen.getByRole('button', { name: 'Auto', pressed: true })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Custom', pressed: false })).toBeInTheDocument();
    await userEvent.click(screen.getByRole('button', { name: 'Custom' }));
-    expect(screen.getByRole('slider', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Auto', pressed: false })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Custom', pressed: true })).toBeInTheDocument();
  });

-  it('should set rowHeightLines when the range input changes', async () => {
+  it('should disable FieldNumber when Auto is selected', async () => {
    renderRowHeightSettings();
-    await userEvent.click(screen.getByRole('button', { name: 'Custom' }));
-    const slider = screen.getByRole('slider', { hidden: true });
-    expect(slider).toHaveValue('2');
-    fireEvent.change(slider, { target: { value: 10 } });
-    expect(slider).toHaveValue('10');
+    await userEvent.click(screen.getByRole('button', { name: 'Auto' }));
+    expect(screen.getByRole('spinbutton')).toBeDisabled();
  });

-  it('should limit the range input to the maxRowHeight', async () => {
-    renderRowHeightSettings({ maxRowHeight: 5 });
-    await userEvent.click(screen.getByRole('button', { name: 'Custom' }));
-    const slider = screen.getByRole('slider', { hidden: true });
-    expect(slider).toHaveValue('2');
-    fireEvent.change(slider, { target: { value: 10 } });
-    expect(slider).toHaveValue('5');
+  it('field number should persevere previously selected Custom number after changing rowHight to Auto', async () => {
+    renderRowHeightSettings();
+
+    const fieldNumber = screen.getByRole('spinbutton');
+    expect(fieldNumber).toHaveValue(3);
+    fireEvent.change(fieldNumber, {
+      target: { value: 10 },
+    });
+    expect(fieldNumber).toHaveValue(10);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Auto' }));
+
+    expect(fieldNumber).toHaveValue(10);
  });
 });
--- a/src/platform/packages/shared/kbn-unified-data-table/src/components/row_height_settings.tsx
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/components/row_height_settings.tsx
@ -9,50 +9,44 @@

 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButtonGroup, EuiFormRow, EuiRange, htmlIdGenerator, useEuiTheme } from '@elastic/eui';
+import {
+  EuiButtonGroup,
+  EuiFormRow,
+  EuiFieldNumber,
+  EuiFlexGroup,
+  htmlIdGenerator,
+} from '@elastic/eui';

 export enum RowHeightMode {
  auto = 'auto',
-  single = 'single',
  custom = 'custom',
 }
 export interface RowHeightSettingsProps {
+  lineCountInput: number;
  rowHeight?: RowHeightMode;
-  rowHeightLines?: number;
  maxRowHeight?: number;
  label: string;
-  compressed?: boolean;
  onChangeRowHeight: (newHeightMode: RowHeightMode | undefined) => void;
-  onChangeRowHeightLines: (newRowHeightLines: number) => void;
+  onChangeLineCountInput: (newRowHeightLines: number) => void;
  'data-test-subj'?: string;
 }

 const idPrefix = htmlIdGenerator()();

 export function RowHeightSettings({
+  lineCountInput,
  label,
  rowHeight,
-  rowHeightLines,
-  compressed,
  onChangeRowHeight,
-  onChangeRowHeightLines,
+  onChangeLineCountInput,
  maxRowHeight,
  ['data-test-subj']: dataTestSubj,
 }: RowHeightSettingsProps) {
-  const { euiTheme } = useEuiTheme();
-
  const rowHeightModeOptions = [
-    {
-      id: `${idPrefix}${RowHeightMode.single}`,
-      label: i18n.translate('unifiedDataTable.rowHeight.single', {
-        defaultMessage: 'Single',
-      }),
-      'data-test-subj': `${dataTestSubj}_rowHeight_${RowHeightMode.single}`,
-    },
    {
      id: `${idPrefix}${RowHeightMode.auto}`,
      label: i18n.translate('unifiedDataTable.rowHeight.auto', {
-        defaultMessage: 'Auto fit',
+        defaultMessage: 'Auto',
      }),
      'data-test-subj': `${dataTestSubj}_rowHeight_${RowHeightMode.auto}`,
    },
@ -67,40 +61,40 @@ export function RowHeightSettings({

  return (
    <>
-      <EuiFormRow label={label} display="columnCompressed" data-test-subj={dataTestSubj}>
-        <>
+      <EuiFormRow
+        label={label}
+        aria-label={label}
+        display="columnCompressed"
+        data-test-subj={dataTestSubj}
+      >
+        <EuiFlexGroup gutterSize="s" responsive={false}>
          <EuiButtonGroup
            isFullWidth
+            css={{ flexShrink: 0, flexBasis: '66.6%' }}
            legend={label}
            buttonSize="compressed"
            options={rowHeightModeOptions}
-            idSelected={`${idPrefix}${rowHeight ?? RowHeightMode.single}`}
+            idSelected={`${idPrefix}${rowHeight ?? RowHeightMode.custom}`}
            onChange={(optionId) => {
              const newMode = optionId.replace(idPrefix, '') as RowHeightSettingsProps['rowHeight'];
              onChangeRowHeight(newMode);
            }}
            data-test-subj={`${dataTestSubj}_rowHeightButtonGroup`}
          />
-          {rowHeight === RowHeightMode.custom ? (
-            <EuiRange
-              compressed
-              fullWidth
-              showInput
-              min={1}
-              max={maxRowHeight ?? 20}
-              step={1}
-              value={rowHeightLines ?? 2}
-              onChange={(e) => {
-                const lineCount = Number(e.currentTarget.value);
-                onChangeRowHeightLines(lineCount);
-              }}
-              data-test-subj={`${dataTestSubj}_lineCountNumber`}
-              css={{
-                marginTop: compressed ? euiTheme.size.xs : euiTheme.size.m,
-              }}
-            />
-          ) : null}
-        </>
+          <EuiFieldNumber
+            compressed
+            value={lineCountInput}
+            onChange={(e) => {
+              const lineCount = Number(e.currentTarget.value);
+              onChangeLineCountInput(lineCount);
+            }}
+            min={1}
+            max={maxRowHeight ?? 20}
+            step={1}
+            disabled={rowHeight !== RowHeightMode.custom}
+            data-test-subj={`${dataTestSubj}_lineCountNumber`}
+          />
+        </EuiFlexGroup>
      </EuiFormRow>
    </>
  );
--- a/src/platform/packages/shared/kbn-unified-data-table/src/constants.ts
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/constants.ts
@ -17,12 +17,10 @@ export const ROWS_PER_PAGE_OPTIONS = [10, 25, 50, DEFAULT_ROWS_PER_PAGE, 250, 50
 /**
 * Row height might be a value from -1 to 20
 * A value of -1 automatically adjusts the row height to fit the contents.
- * A value of 0 displays the content in a single line.
 * A value from 1 to 20 represents number of lines of Document explorer row to display.
 */
 export const ROWS_HEIGHT_OPTIONS = {
  auto: -1,
-  single: 0,
  default: 3,
 } as const;
 export const defaultRowLineHeight = '1.6em';
--- a/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_row_height.test.tsx
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_row_height.test.tsx
@ -76,7 +76,7 @@ describe('useRowHeightsOptions', () => {
    expect(result.current.rowHeightLines).toEqual(CONFIG_ROW_HEIGHT);
  });

-  test('should apply rowHeight from configRowHeight instead of local storage value, since configRowHeight has been changed', () => {
+  it('should apply rowHeight from configRowHeight instead of local storage value, since configRowHeight has been changed', () => {
    const {
      hook: { result },
    } = renderRowHeightHook({
@ -113,12 +113,6 @@ describe('useRowHeightsOptions', () => {
      previousConfigRowHeight: CONFIG_ROW_HEIGHT,
    });
    expect(onUpdateRowHeight).toHaveBeenLastCalledWith(-1);
-    result.current.onChangeRowHeight?.(RowHeightMode.single);
-    expect(storage.get('discover:dataGridRowHeight')).toEqual({
-      previousRowHeight: 0,
-      previousConfigRowHeight: CONFIG_ROW_HEIGHT,
-    });
-    expect(onUpdateRowHeight).toHaveBeenLastCalledWith(0);
    result.current.onChangeRowHeight?.(RowHeightMode.custom);
    expect(storage.get('discover:dataGridRowHeight')).toEqual({
      previousRowHeight: CONFIG_ROW_HEIGHT,
@ -145,9 +139,9 @@ describe('useRowHeightsOptions', () => {
    const { hook, initialProps } = renderRowHeightHook({ rowHeightState: -1 });
    expect(hook.result.current.rowHeight).toEqual(RowHeightMode.auto);
    expect(hook.result.current.rowHeightLines).toEqual(-1);
-    hook.rerender({ ...initialProps, rowHeightState: 0 });
-    expect(hook.result.current.rowHeight).toEqual(RowHeightMode.single);
-    expect(hook.result.current.rowHeightLines).toEqual(0);
+    hook.rerender({ ...initialProps, rowHeightState: 0 }); // after removing "single" from UI, we can get "0" from legacy state, so we cast it to "custom" with 1 line count,
+    expect(hook.result.current.rowHeight).toEqual(RowHeightMode.custom);
+    expect(hook.result.current.rowHeightLines).toEqual(1);
    hook.rerender({ ...initialProps, rowHeightState: 3 });
    expect(hook.result.current.rowHeight).toEqual(RowHeightMode.custom);
    expect(hook.result.current.rowHeightLines).toEqual(3);
--- a/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_row_height.ts
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_row_height.ts
@ -8,7 +8,7 @@
 */

 import type { Storage } from '@kbn/kibana-utils-plugin/public';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { isValidRowHeight } from '../utils/validate_row_height';
 import {
  DataGridOptionsRecord,
@ -58,7 +58,7 @@ const resolveRowHeight = ({
    currentRowLines = configRowHeight;
  }

-  return currentRowLines;
+  return currentRowLines === 0 ? 1 : currentRowLines;
 };

 export const ROW_HEIGHT_STORAGE_KEY = 'dataGridRowHeight';
@ -98,36 +98,23 @@ export const useRowHeight = ({
    });
  }, [configRowHeight, consumer, key, rowHeightState, storage]);

+  const [lineCountInput, setLineCountInput] = useState(
+    rowHeightLines < 0 ? configRowHeight : rowHeightLines
+  );
+
  const rowHeight = useMemo<RowHeightSettingsProps['rowHeight']>(() => {
-    switch (rowHeightLines) {
-      case ROWS_HEIGHT_OPTIONS.auto:
-        return RowHeightMode.auto;
-      case ROWS_HEIGHT_OPTIONS.single:
-        return RowHeightMode.single;
-      default:
-        return RowHeightMode.custom;
-    }
+    return rowHeightLines === ROWS_HEIGHT_OPTIONS.auto ? RowHeightMode.auto : RowHeightMode.custom;
  }, [rowHeightLines]);

  const onChangeRowHeight = useCallback(
    (newRowHeight: RowHeightSettingsProps['rowHeight']) => {
-      let newRowHeightLines: number;
-
-      switch (newRowHeight) {
-        case RowHeightMode.auto:
-          newRowHeightLines = ROWS_HEIGHT_OPTIONS.auto;
-          break;
-        case RowHeightMode.single:
-          newRowHeightLines = ROWS_HEIGHT_OPTIONS.single;
-          break;
-        default:
-          newRowHeightLines = configRowHeight;
-      }
+      const newRowHeightLines =
+        newRowHeight === RowHeightMode.auto ? ROWS_HEIGHT_OPTIONS.auto : lineCountInput;

      updateStoredRowHeight(newRowHeightLines, configRowHeight, storage, consumer, key);
      onUpdateRowHeight?.(newRowHeightLines);
    },
-    [configRowHeight, consumer, key, onUpdateRowHeight, storage]
+    [configRowHeight, consumer, key, onUpdateRowHeight, storage, lineCountInput]
  );

  const onChangeRowHeightLines = useCallback(
@ -138,9 +125,16 @@ export const useRowHeight = ({
    [configRowHeight, consumer, key, onUpdateRowHeight, storage]
  );

+  useEffect(() => {
+    if (rowHeight === RowHeightMode.custom) {
+      setLineCountInput(rowHeightLines > 0 ? rowHeightLines : configRowHeight);
+    }
+  }, [rowHeightLines, configRowHeight, rowHeight]);
+
  return {
    rowHeight,
    rowHeightLines,
+    lineCountInput,
    onChangeRowHeight: onUpdateRowHeight ? onChangeRowHeight : undefined,
    onChangeRowHeightLines: onUpdateRowHeight ? onChangeRowHeightLines : undefined,
  };
--- a/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_row_heights_options.test.ts
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_row_heights_options.test.ts
@ -20,15 +20,6 @@ describe('useRowHeightsOptions', () => {
    expect(result.current.defaultHeight).toEqual('auto');
  });

-  it('should convert rowHeightLines 0 to undefined', () => {
-    const { result } = renderHook(() => {
-      return useRowHeightsOptions({
-        rowHeightLines: 0,
-      });
-    });
-    expect(result.current.defaultHeight).toEqual(undefined);
-  });
-
  it('should convert custom rowHeightLines to lineCount', () => {
    const { result } = renderHook(() => {
      return useRowHeightsOptions({
--- a/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_row_heights_options.ts
+++ b/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_row_heights_options.ts
@ -22,8 +22,6 @@ interface UseRowHeightProps {
 const deserializeRowHeight = (number: number): EuiDataGridRowHeightOption | undefined => {
  if (number === ROWS_HEIGHT_OPTIONS.auto) {
    return 'auto';
-  } else if (number === ROWS_HEIGHT_OPTIONS.single) {
-    return undefined;
  }

  return { lineCount: number }; // custom
--- a/src/platform/plugins/private/vis_types/table/public/convert_to_lens/configurations/index.test.ts
+++ b/src/platform/plugins/private/vis_types/table/public/convert_to_lens/configurations/index.test.ts
@ -65,8 +65,8 @@ describe('getConfiguration', () => {
          columnId: 'bucket-1',
        },
      ],
-      headerRowHeight: 'single',
-      rowHeight: 'single',
+      headerRowHeight: 'custom',
+      rowHeight: 'custom',
      layerId: 'test1',
      layerType: 'data',
      paging: {
--- a/src/platform/plugins/private/vis_types/table/public/convert_to_lens/configurations/index.ts
+++ b/src/platform/plugins/private/vis_types/table/public/convert_to_lens/configurations/index.ts
@ -17,7 +17,6 @@ import { TableVisParams } from '../../../common';

 enum RowHeightMode {
  auto = 'auto',
-  single = 'single',
  custom = 'custom',
 }

@ -55,8 +54,8 @@ const getRowHeight = (
 ): Pick<TableVisConfiguration, 'rowHeight' | 'headerRowHeight'> => {
  const { autoFitRowToContent } = params;
  return {
-    rowHeight: autoFitRowToContent ? RowHeightMode.auto : RowHeightMode.single,
-    headerRowHeight: autoFitRowToContent ? RowHeightMode.auto : RowHeightMode.single,
+    rowHeight: autoFitRowToContent ? RowHeightMode.auto : RowHeightMode.custom,
+    headerRowHeight: autoFitRowToContent ? RowHeightMode.auto : RowHeightMode.custom,
  };
 };

--- a/src/platform/plugins/shared/discover/public/components/data_types/logs/service_name_cell.test.tsx
+++ b/src/platform/plugins/shared/discover/public/components/data_types/logs/service_name_cell.test.tsx
@ -12,7 +12,7 @@ import { buildDataTableRecord, DataTableRecord } from '@kbn/discover-utils';
 import { dataViewMock } from '@kbn/discover-utils/src/__mocks__';
 import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
 import { render, screen } from '@testing-library/react';
-import { DataGridDensity, ROWS_HEIGHT_OPTIONS } from '@kbn/unified-data-table';
+import { DataGridDensity } from '@kbn/unified-data-table';
 import { getServiceNameCell } from './service_name_cell';
 import { CellRenderersExtensionParams } from '../../../context_awareness';

@ -44,7 +44,7 @@ const renderCell = (serviceNameField: string, record: DataTableRecord) => {
    },
    dataView: dataViewMock,
    density: DataGridDensity.COMPACT,
-    rowHeight: ROWS_HEIGHT_OPTIONS.single,
+    rowHeight: 1,
  };
  const ServiceNameCell = getServiceNameCell(serviceNameField, cellRenderersExtensionParamsMock);
  render(
--- a/src/platform/plugins/shared/visualizations/common/convert_to_lens/types/configurations.ts
+++ b/src/platform/plugins/shared/visualizations/common/convert_to_lens/types/configurations.ts
@ -193,7 +193,6 @@ export interface ColumnState {

 enum RowHeightMode {
  auto = 'auto',
-  single = 'single',
  custom = 'custom',
 }

--- a/test/functional/apps/discover/context_awareness/extensions/_get_default_app_state.ts
+++ b/test/functional/apps/discover/context_awareness/extensions/_get_default_app_state.ts
@ -110,9 +110,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
        await unifiedFieldList.clickFieldListItemRemove('message');
        await expectColumns(['@timestamp', 'Summary']);
        await dataGrid.clickGridSettings();
-        await dataGrid.changeRowHeightValue('Single');
+        await dataGrid.changeRowHeightValue('Auto');
        let rowHeightValue = await dataGrid.getCurrentRowHeightValue();
-        expect(rowHeightValue).to.be('Single');
+        expect(rowHeightValue).to.be('Auto');
        await testSubjects.click('discoverNewButton');
        await expectColumns(['@timestamp', 'log.level', 'message']);
        await dataGrid.clickGridSettings();
@ -192,9 +192,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
        await unifiedFieldList.clickFieldListItemRemove('message');
        await expectColumns(['@timestamp', 'Summary']);
        await dataGrid.clickGridSettings();
-        await dataGrid.changeRowHeightValue('Single');
+        await dataGrid.changeRowHeightValue('Auto');
        let rowHeightValue = await dataGrid.getCurrentRowHeightValue();
-        expect(rowHeightValue).to.be('Single');
+        expect(rowHeightValue).to.be('Auto');
        await testSubjects.click('discoverNewButton');
        await expectColumns(['@timestamp', 'log.level', 'message']);
        await dataGrid.clickGridSettings();
--- a/test/functional/apps/discover/group2_data_grid2/_data_grid_new_line.ts
+++ b/test/functional/apps/discover/group2_data_grid2/_data_grid_new_line.ts
@ -87,7 +87,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

      await dataGrid.clickGridSettings();
      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Custom');
-      await dataGrid.changeRowHeightValue('Auto fit');
+      await dataGrid.changeRowHeightValue('Auto');
      await dataGrid.clickGridSettings();

      cell = await dataGrid.getCellElementExcludingControlColumns(0, 0);
@ -96,8 +96,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      expect(await content.getComputedStyle('white-space')).to.be('pre-wrap');

      await dataGrid.clickGridSettings();
-      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Auto fit');
-      await dataGrid.changeRowHeightValue('Single');
+      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Auto');
+      await dataGrid.changeRowHeightValue('Custom');
+      await dataGrid.changeCustomRowHeightNumber(1);
      await dataGrid.clickGridSettings();

      cell = await dataGrid.getCellElementExcludingControlColumns(0, 0);
--- a/test/functional/apps/discover/group2_data_grid3/_data_grid_row_height.ts
+++ b/test/functional/apps/discover/group2_data_grid3/_data_grid_row_height.ts
@ -53,13 +53,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      await dataGrid.clickGridSettings();
      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Custom');

-      await dataGrid.changeRowHeightValue('Single');
+      await testSubjects.missingOrFail('resetDisplaySelector');
+
+      await dataGrid.changeRowHeightValue('Auto');

      // toggle the popover
      await dataGrid.clickGridSettings();
      await dataGrid.clickGridSettings();

-      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Single');
+      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Auto');

      // we hide "Reset to default" action in Discover
      await testSubjects.missingOrFail('resetDisplaySelector');
@ -67,28 +69,22 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      await dataGrid.changeRowHeightValue('Custom');

      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Custom');
-
-      await testSubjects.missingOrFail('resetDisplaySelector');
-
-      await dataGrid.changeRowHeightValue('Auto fit');
-
-      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Auto fit');
    });

    it('should persist the row height selection after reloading the page', async () => {
      await dataGrid.clickGridSettings();
-      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Auto fit');
+      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Custom');

-      await dataGrid.changeRowHeightValue('Single');
+      await dataGrid.changeRowHeightValue('Auto');

-      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Single');
+      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Auto');

      await browser.refresh();

      await discover.waitUntilSearchingHasFinished();
      await dataGrid.clickGridSettings();

-      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Single');
+      expect(await dataGrid.getCurrentRowHeightValue()).to.be('Auto');
    });

    it('should use the default header row height', async () => {
@ -103,13 +99,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      await dataGrid.clickGridSettings();
      expect(await dataGrid.getCurrentHeaderRowHeightValue()).to.be('Custom');

-      await dataGrid.changeHeaderRowHeightValue('Single');
+      await dataGrid.changeHeaderRowHeightValue('Auto');

      // toggle the popover
      await dataGrid.clickGridSettings();
      await dataGrid.clickGridSettings();

-      expect(await dataGrid.getCurrentHeaderRowHeightValue()).to.be('Single');
+      expect(await dataGrid.getCurrentHeaderRowHeightValue()).to.be('Auto');

      // we hide "Reset to default" action in Discover
      await testSubjects.missingOrFail('resetDisplaySelector');
@ -117,28 +113,22 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      await dataGrid.changeHeaderRowHeightValue('Custom');

      expect(await dataGrid.getCurrentHeaderRowHeightValue()).to.be('Custom');
-
-      await testSubjects.missingOrFail('resetDisplaySelector');
-
-      await dataGrid.changeHeaderRowHeightValue('Auto fit');
-
-      expect(await dataGrid.getCurrentHeaderRowHeightValue()).to.be('Auto fit');
    });

    it('should persist the header row height selection after reloading the page', async () => {
      await dataGrid.clickGridSettings();
-      expect(await dataGrid.getCurrentHeaderRowHeightValue()).to.be('Auto fit');
+      expect(await dataGrid.getCurrentHeaderRowHeightValue()).to.be('Custom');

-      await dataGrid.changeHeaderRowHeightValue('Single');
+      await dataGrid.changeHeaderRowHeightValue('Auto');

-      expect(await dataGrid.getCurrentHeaderRowHeightValue()).to.be('Single');
+      expect(await dataGrid.getCurrentHeaderRowHeightValue()).to.be('Auto');

      await browser.refresh();

      await discover.waitUntilSearchingHasFinished();
      await dataGrid.clickGridSettings();

-      expect(await dataGrid.getCurrentHeaderRowHeightValue()).to.be('Single');
+      expect(await dataGrid.getCurrentHeaderRowHeightValue()).to.be('Auto');
    });
  });
 }
--- a/test/functional/services/data_grid.ts
+++ b/test/functional/services/data_grid.ts
@ -625,6 +625,13 @@ export class DataGridService extends FtrService {
    await option.click();
  }

+  public async changeCustomRowHeightNumber(newValue: number) {
+    await this.testSubjects.setValue(
+      'unifiedDataTableRowHeightSettings_lineCountNumber',
+      newValue.toString()
+    );
+  }
+
  public async getCurrentHeaderRowHeightValue() {
    return await this.getCurrentRowHeightValue('header');
  }
--- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json
+++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@ -8007,7 +8007,6 @@
    "unifiedDataTable.removeFromComparison": "Retirer de la comparaison",
    "unifiedDataTable.rowHeight.auto": "Ajustement automatique",
    "unifiedDataTable.rowHeight.custom": "Personnalisé",
-    "unifiedDataTable.rowHeight.single": "Unique",
    "unifiedDataTable.rowHeightLabel": "Hauteur de ligne de cellule",
    "unifiedDataTable.sampleSizeSettings.sampleSizeLabel": "Taille de l'échantillon",
    "unifiedDataTable.selectAllDocs": "Tout sélectionner ({rowsCount})",
--- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json
+++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@ -7883,7 +7883,6 @@
    "unifiedDataTable.removeFromComparison": "比較から削除",
    "unifiedDataTable.rowHeight.auto": "自動的に合わせる",
    "unifiedDataTable.rowHeight.custom": "カスタム",
-    "unifiedDataTable.rowHeight.single": "単一",
    "unifiedDataTable.rowHeightLabel": "セル行高さ",
    "unifiedDataTable.sampleSizeSettings.sampleSizeLabel": "サンプルサイズ",
    "unifiedDataTable.selectAllDocs": "すべての{rowsCount}を選択",
--- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json
+++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@ -7764,7 +7764,6 @@
    "unifiedDataTable.removeFromComparison": "从对比中移除",
    "unifiedDataTable.rowHeight.auto": "自动适应",
    "unifiedDataTable.rowHeight.custom": "定制",
-    "unifiedDataTable.rowHeight.single": "单个",
    "unifiedDataTable.rowHeightLabel": "单元格行高",
    "unifiedDataTable.sampleSizeSettings.sampleSizeLabel": "样例大小",
    "unifiedDataTable.selectAllDocs": "选择所有 {rowsCount} 行",
--- a/x-pack/platform/plugins/shared/lens/common/types.ts
+++ b/x-pack/platform/plugins/shared/lens/common/types.ts
@ -99,6 +99,5 @@ export interface LegacyMetricState {

 export enum RowHeightMode {
  auto = 'auto',
-  single = 'single',
  custom = 'custom',
 }
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/constants.ts
+++ b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/constants.ts
@ -13,5 +13,10 @@ export const LENS_TOGGLE_ACTION = 'toggle';
 export const LENS_EDIT_PAGESIZE_ACTION = 'pagesize';
 export const DEFAULT_HEADER_ROW_HEIGHT_LINES = 3;
 export const DEFAULT_HEADER_ROW_HEIGHT = RowHeightMode.custom;
-export const DEFAULT_ROW_HEIGHT = RowHeightMode.single;
-export const DEFAULT_ROW_HEIGHT_LINES = 2;
+export const DEFAULT_ROW_HEIGHT = RowHeightMode.custom;
+export const DEFAULT_ROW_HEIGHT_LINES = 1;
+
+export enum ROW_HEIGHT_LINES_KEYS {
+  rowHeightLines = 'rowHeightLines',
+  headerRowHeightLines = 'headerRowHeightLines',
+}
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/toolbar.test.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/toolbar.test.tsx
@ -89,7 +89,7 @@ describe('datatable toolbar', () => {
      getPaginationSwitch,
    } = await renderAndOpenToolbar();

-    expect(getRowHeightValue()).toHaveTextContent(/single/i);
+    expect(getRowHeightValue()).toHaveTextContent(/custom/i);
    expect(getHeaderHeightValue()).toHaveTextContent(/custom/i);
    expect(getHeaderHeightCustomValue()).toHaveValue(3);
    expect(getPaginationSwitch()).not.toBeChecked();
@ -123,7 +123,7 @@ describe('datatable toolbar', () => {
  it('should change row height to "Auto" mode when selected', async () => {
    const { selectRowHeightOption } = await renderAndOpenToolbar();

-    selectRowHeightOption(/auto fit/i);
+    selectRowHeightOption(/auto/i);
    expect(defaultProps.setState).toHaveBeenCalledTimes(1);
    expect(defaultProps.setState).toHaveBeenCalledWith(
      expect.objectContaining({ rowHeight: 'auto' })
@ -147,13 +147,13 @@ describe('datatable toolbar', () => {
    expect(defaultProps.setState).toHaveBeenCalledTimes(1);
    expect(defaultProps.setState).toHaveBeenCalledWith({
      rowHeight: 'custom',
-      rowHeightLines: 2,
+      rowHeightLines: 1,
    });
  });

  it('should change header height to "Custom" mode', async () => {
    const { selectHeaderHeightOption } = await renderAndOpenToolbar({
-      headerRowHeight: 'single',
+      headerRowHeight: 'auto',
    });

    selectHeaderHeightOption(/custom/i);
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/toolbar.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/toolbar.tsx
@ -5,10 +5,10 @@
 * 2.0.
 */

-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFormRow, EuiSwitch, EuiToolTip } from '@elastic/eui';
-import { RowHeightSettings } from '@kbn/unified-data-table';
+import { RowHeightSettings, ROWS_HEIGHT_OPTIONS } from '@kbn/unified-data-table';
 import { ToolbarPopover } from '../../../shared_components';
 import type { VisualizationToolbarProps } from '../../../types';
 import type { DatatableVisualizationState } from '../visualization';
@ -17,41 +17,64 @@ import { DEFAULT_PAGE_SIZE } from './table_basic';
 import {
  DEFAULT_HEADER_ROW_HEIGHT,
  DEFAULT_HEADER_ROW_HEIGHT_LINES,
+  DEFAULT_ROW_HEIGHT,
  DEFAULT_ROW_HEIGHT_LINES,
+  ROW_HEIGHT_LINES_KEYS,
 } from './constants';

+type LineCounts = {
+  [key in keyof typeof ROW_HEIGHT_LINES_KEYS]: number;
+};
+
+const LEGACY_SINGLE_ROW_HEIGHT_MODE = 'single';
+
 export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisualizationState>) {
  const { state, setState } = props;
+
+  const [lineCounts, setLineCounts] = useState<LineCounts>({
+    [ROW_HEIGHT_LINES_KEYS.headerRowHeightLines]:
+      state.headerRowHeightLines && state.headerRowHeightLines > 0
+        ? state.headerRowHeightLines
+        : DEFAULT_HEADER_ROW_HEIGHT_LINES,
+    [ROW_HEIGHT_LINES_KEYS.rowHeightLines]:
+      state.rowHeightLines && state.rowHeightLines > 0
+        ? state.rowHeightLines
+        : DEFAULT_ROW_HEIGHT_LINES,
+  });
+
  const onChangeHeight = useCallback(
    (
      newHeightMode: RowHeightMode | undefined,
      heightProperty: string,
-      heightLinesProperty: string,
-      defaultRowHeight = DEFAULT_ROW_HEIGHT_LINES
+      heightLinesProperty: keyof typeof ROW_HEIGHT_LINES_KEYS
    ) => {
-      const rowHeightLines =
-        newHeightMode === RowHeightMode.single
-          ? 1
-          : newHeightMode !== RowHeightMode.auto
-          ? defaultRowHeight
-          : undefined;
+      const newRowHeightLines =
+        newHeightMode === RowHeightMode.auto
+          ? ROWS_HEIGHT_OPTIONS.auto
+          : lineCounts[heightLinesProperty];
+
      setState({
        ...state,
        [heightProperty]: newHeightMode,
-        [heightLinesProperty]: rowHeightLines,
+        [heightLinesProperty]: newRowHeightLines,
      });
    },
-    [setState, state]
+    [setState, state, lineCounts]
  );

  const onChangeHeightLines = useCallback(
-    (newRowHeightLines: number, heightLinesProperty: string) => {
+    (newRowHeightLines: number, heightLinesProperty: keyof typeof ROW_HEIGHT_LINES_KEYS) => {
      setState({
        ...state,
        [heightLinesProperty]: newRowHeightLines,
      });
+
+      setLineCounts({
+        ...lineCounts,
+        [heightLinesProperty]: newRowHeightLines,
+      });
    },
-    [setState, state]
+    [setState, state, lineCounts]
  );

  const onTogglePagination = useCallback(() => {
@ -76,37 +99,37 @@ export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisua
      >
        <RowHeightSettings
          rowHeight={state.headerRowHeight ?? DEFAULT_HEADER_ROW_HEIGHT}
-          rowHeightLines={state.headerRowHeightLines ?? DEFAULT_HEADER_ROW_HEIGHT_LINES}
          label={i18n.translate('xpack.lens.table.visualOptionsHeaderRowHeightLabel', {
-            defaultMessage: 'Header row height',
+            defaultMessage: 'Max header cell lines',
          })}
          onChangeRowHeight={(mode) =>
-            onChangeHeight(
-              mode,
-              'headerRowHeight',
-              'headerRowHeightLines',
-              DEFAULT_HEADER_ROW_HEIGHT_LINES
-            )
+            onChangeHeight(mode, 'headerRowHeight', ROW_HEIGHT_LINES_KEYS.headerRowHeightLines)
          }
-          onChangeRowHeightLines={(lines) => {
-            onChangeHeightLines(lines, 'headerRowHeightLines');
+          onChangeLineCountInput={(lines) => {
+            onChangeHeightLines(lines, ROW_HEIGHT_LINES_KEYS.headerRowHeightLines);
          }}
          data-test-subj="lnsHeaderHeightSettings"
          maxRowHeight={5}
-          compressed
+          lineCountInput={lineCounts[ROW_HEIGHT_LINES_KEYS.headerRowHeightLines]}
        />
        <RowHeightSettings
-          rowHeight={state.rowHeight}
-          rowHeightLines={state.rowHeightLines}
+          rowHeight={
+            // @ts-ignore - saved state can contain legacy row height mode
+            state.rowHeight === LEGACY_SINGLE_ROW_HEIGHT_MODE
+              ? RowHeightMode.custom
+              : state.rowHeight ?? DEFAULT_ROW_HEIGHT
+          }
          label={i18n.translate('xpack.lens.table.visualOptionsFitRowToContentLabel', {
-            defaultMessage: 'Cell row height',
+            defaultMessage: 'Body cell lines',
          })}
-          onChangeRowHeight={(mode) => onChangeHeight(mode, 'rowHeight', 'rowHeightLines')}
-          onChangeRowHeightLines={(lines) => {
-            onChangeHeightLines(lines, 'rowHeightLines');
+          onChangeRowHeight={(mode) =>
+            onChangeHeight(mode, 'rowHeight', ROW_HEIGHT_LINES_KEYS.rowHeightLines)
+          }
+          onChangeLineCountInput={(lines) => {
+            onChangeHeightLines(lines, ROW_HEIGHT_LINES_KEYS.rowHeightLines);
          }}
          data-test-subj="lnsRowHeightSettings"
-          compressed
+          lineCountInput={lineCounts[ROW_HEIGHT_LINES_KEYS.rowHeightLines]}
        />
        <EuiFormRow
          label={i18n.translate('xpack.lens.table.visualOptionsPaginateTable', {
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/visualization.test.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/visualization.test.tsx
@ -819,13 +819,6 @@ describe('Datatable Visualization', () => {
        getDatatableExpressionArgs({ ...defaultExpressionTableState }).fitRowToContent
      ).toEqual([false]);

-      expect(
-        getDatatableExpressionArgs({
-          ...defaultExpressionTableState,
-          rowHeight: RowHeightMode.single,
-        }).fitRowToContent
-      ).toEqual([false]);
-
      expect(
        getDatatableExpressionArgs({
          ...defaultExpressionTableState,
@ -846,22 +839,6 @@ describe('Datatable Visualization', () => {
        [1]
      );

-      expect(
-        getDatatableExpressionArgs({
-          ...defaultExpressionTableState,
-          rowHeight: RowHeightMode.single,
-        }).rowHeightLines
-      ).toEqual([1]);
-
-      // should ignore lines value based on mode
-      expect(
-        getDatatableExpressionArgs({
-          ...defaultExpressionTableState,
-          rowHeight: RowHeightMode.single,
-          rowHeightLines: 5,
-        }).rowHeightLines
-      ).toEqual([1]);
-
      expect(
        getDatatableExpressionArgs({
          ...defaultExpressionTableState,
@ -870,17 +847,17 @@ describe('Datatable Visualization', () => {
        }).rowHeightLines
      ).toEqual([5]);

-      // should fallback to 2 for custom in case it's not set
+      // should fallback to 1 for custom in case it's not set
      expect(
        getDatatableExpressionArgs({
          ...defaultExpressionTableState,
          rowHeight: RowHeightMode.custom,
        }).rowHeightLines
-      ).toEqual([2]);
+      ).toEqual([1]);
    });

    it('sets headerRowHeight && headerRowHeightLines correctly', () => {
-      // should fallback to 3 lines in case it's not set
+      // should fallback to 3 line in case it's not set
      expect(
        getDatatableExpressionArgs({ ...defaultExpressionTableState }).headerRowHeightLines
      ).toEqual([3]);
@ -890,13 +867,6 @@ describe('Datatable Visualization', () => {
        getDatatableExpressionArgs({ ...defaultExpressionTableState }).headerRowHeight
      ).toEqual([RowHeightMode.custom]);

-      expect(
-        getDatatableExpressionArgs({
-          ...defaultExpressionTableState,
-          headerRowHeight: RowHeightMode.single,
-        }).headerRowHeightLines
-      ).toEqual([1]);
-
      expect(
        getDatatableExpressionArgs({
          ...defaultExpressionTableState,
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/visualization.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/visualization.tsx
@ -50,7 +50,7 @@ import { DataTableToolbar } from './components/toolbar';
 import {
  DEFAULT_HEADER_ROW_HEIGHT,
  DEFAULT_HEADER_ROW_HEIGHT_LINES,
-  DEFAULT_ROW_HEIGHT,
+  DEFAULT_ROW_HEIGHT_LINES,
 } from './components/constants';
 import {
  defaultPaletteParams,
@ -639,12 +639,8 @@ export const getDatatableVisualization = ({
      sortingDirection: state.sorting?.direction || 'none',
      fitRowToContent: state.rowHeight === RowHeightMode.auto,
      headerRowHeight: state.headerRowHeight ?? DEFAULT_HEADER_ROW_HEIGHT,
-      rowHeightLines:
-        !state.rowHeight || state.rowHeight === DEFAULT_ROW_HEIGHT ? 1 : state.rowHeightLines ?? 2,
-      headerRowHeightLines:
-        state.headerRowHeight === RowHeightMode.single
-          ? 1
-          : state.headerRowHeightLines ?? DEFAULT_HEADER_ROW_HEIGHT_LINES,
+      rowHeightLines: state.rowHeightLines ?? DEFAULT_ROW_HEIGHT_LINES,
+      headerRowHeightLines: state.headerRowHeightLines ?? DEFAULT_HEADER_ROW_HEIGHT_LINES,
      pageSize: state.paging?.enabled ? state.paging.size : undefined,
    }).toAst();

--- a/x-pack/platform/plugins/shared/lens/server/migrations/common_migrations.ts
+++ b/x-pack/platform/plugins/shared/lens/server/migrations/common_migrations.ts
@ -228,7 +228,7 @@ export const commonEnhanceTableRowHeight = (
  const visState810 = attributes.state.visualization as VisState810;
  const newAttributes = cloneDeep(attributes);
  const vizState = newAttributes.state.visualization as VisState820;
-  vizState.rowHeight = visState810.fitRowToContent ? RowHeightMode.auto : RowHeightMode.single;
+  vizState.rowHeight = visState810.fitRowToContent ? RowHeightMode.auto : RowHeightMode.custom;
  vizState.rowHeightLines = visState810.fitRowToContent ? 2 : 1;
  return newAttributes as LensDocShape810<VisState820>;
 };
--- a/x-pack/platform/plugins/shared/lens/server/migrations/saved_object_migrations.test.ts
+++ b/x-pack/platform/plugins/shared/lens/server/migrations/saved_object_migrations.test.ts
@ -2068,7 +2068,7 @@ describe('Lens migrations', () => {
        );
      });

-      it('should migrate disabled fitRowToContent to new rowHeight: "single"', () => {
+      it('should migrate disabled fitRowToContent to new rowHeight: "custom" with 1 line height', () => {
        const result = SavedObjectsUtils.getMigrationFunction(migrations['8.2.0'])(
          getExample(false),
          context
@ -2078,7 +2078,7 @@ describe('Lens migrations', () => {

        expect(result.attributes.state.visualization as VisState820).toEqual(
          expect.objectContaining({
-            rowHeight: 'single',
+            rowHeight: 'custom',
            rowHeightLines: 1,
          })
        );
--- a/x-pack/solutions/observability/plugins/logs_explorer/common/constants.ts
+++ b/x-pack/solutions/observability/plugins/logs_explorer/common/constants.ts
@ -50,6 +50,7 @@ export const DEFAULT_COLUMNS = [
  // RESOURCE_FIELD_CONFIGURATION,
  //  CONTENT_FIELD_CONFIGURATION
 ];
+export const DEFAULT_ROW_COUNT = 1;
 export const DEFAULT_ROWS_PER_PAGE = 100;

 // List of prefixes which needs to be filtered out for Display in Content Column
--- a/x-pack/solutions/observability/plugins/logs_explorer/public/state_machines/logs_explorer_controller/src/defaults.ts
+++ b/x-pack/solutions/observability/plugins/logs_explorer/public/state_machines/logs_explorer_controller/src/defaults.ts
@ -5,10 +5,10 @@
 * 2.0.
 */

-import { ROWS_HEIGHT_OPTIONS } from '@kbn/unified-data-table';
 import {
  DEFAULT_COLUMNS,
  DEFAULT_ROWS_PER_PAGE,
+  DEFAULT_ROW_COUNT,
  LOG_LEVEL_FIELD,
 } from '../../../../common/constants';
 import { DefaultLogsExplorerControllerState } from './types';
@ -20,7 +20,7 @@ export const DEFAULT_CONTEXT: DefaultLogsExplorerControllerState = {
  grid: {
    columns: DEFAULT_COLUMNS,
    rows: {
-      rowHeight: ROWS_HEIGHT_OPTIONS.single,
+      rowHeight: DEFAULT_ROW_COUNT,
      rowsPerPage: DEFAULT_ROWS_PER_PAGE,
    },
  },
--- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
@ -263,12 +263,12 @@ describe('unified data table', () => {
      });
      expect(
        screen.getAllByTestId('unifiedDataTableRowHeightSettings_lineCountNumber')[0]
-      ).toHaveValue(String(rowHeight.initial));
+      ).toHaveValue(rowHeight.initial);

      fireEvent.change(
        screen.getAllByTestId('unifiedDataTableRowHeightSettings_lineCountNumber')[0],
        {
-          target: { value: String(rowHeight.new) },
+          target: { value: rowHeight.new },
        }
      );

--- a/x-pack/test_serverless/functional/test_suites/common/discover/context_awareness/extensions/_get_default_app_state.ts
+++ b/x-pack/test_serverless/functional/test_suites/common/discover/context_awareness/extensions/_get_default_app_state.ts
@ -113,9 +113,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
        await PageObjects.unifiedFieldList.clickFieldListItemRemove('message');
        await expectColumns(['@timestamp', 'Summary']);
        await dataGrid.clickGridSettings();
-        await dataGrid.changeRowHeightValue('Single');
+        await dataGrid.changeRowHeightValue('Auto');
        let rowHeightValue = await dataGrid.getCurrentRowHeightValue();
-        expect(rowHeightValue).to.be('Single');
+        expect(rowHeightValue).to.be('Auto');
        await testSubjects.click('discoverNewButton');
        await expectColumns(['@timestamp', 'log.level', 'message']);
        await dataGrid.clickGridSettings();
@ -196,9 +196,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
        await PageObjects.unifiedFieldList.clickFieldListItemRemove('message');
        await expectColumns(['@timestamp', 'Summary']);
        await dataGrid.clickGridSettings();
-        await dataGrid.changeRowHeightValue('Single');
+        await dataGrid.changeRowHeightValue('Auto');
        let rowHeightValue = await dataGrid.getCurrentRowHeightValue();
-        expect(rowHeightValue).to.be('Single');
+        expect(rowHeightValue).to.be('Auto');
        await testSubjects.click('discoverNewButton');
        await expectColumns(['@timestamp', 'log.level', 'message']);
        await dataGrid.clickGridSettings();