refactor RowHeightSettings component to EUI layout

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(),

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;

src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.test.tsx

@@ -577,16 +577,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
     );
@@ -605,20 +605,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
     );
@@ -637,31 +637,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
     );
@@ -677,30 +677,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
     );

src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.tsx

@@ -812,6 +812,7 @@ export const UnifiedDataTable = ({
   const {
     rowHeight: headerRowHeight,
     rowHeightLines: headerRowHeightLines,
+    lineCountInput: headerLineCountInput,
     onChangeRowHeight: onChangeHeaderRowHeight,
     onChangeRowHeightLines: onChangeHeaderRowHeightLines,
   } = useRowHeight({
@@ -823,14 +824,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(
     () =>
@@ -1021,23 +1023,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,
@@ -1047,9 +1048,10 @@ export const UnifiedDataTable = ({
     onUpdateRowHeight,
     onUpdateSampleSize,
     rowHeight,
-    rowHeightLines,
     sampleSizeState,
     onUpdateDataGridDensity,
+    lineCountInput,
+    headerLineCountInput,
   ]);
 
   const toolbarVisibility = useMemo(