[UnifiedDataTable] Add density configuration

packages/kbn-unified-data-table/README.md

@@ -52,6 +52,8 @@ Props description:
 | **externalCustomRenderers** | (optional)Record<string,(props: EuiDataGridCellValueElementProps) => React.ReactNode>; | An optional settings for a specified fields rendering like links. Applied only for the listed fields rendering. |
 | **consumer** | (optional)string | Name of the UnifiedDataTable consumer component or application. |
 | **componentsTourSteps** | (optional)Record<string,string> | Optional key/value pairs to set guided onboarding steps ids for a data table components included to guided tour. |
+| **showDensitySelector** | (optional)boolean | Optional boolean to toggle whether or not to show the density selector. |
+| **onUpdateDensity** | (optional)(EuiDataGridStyle) => void; | Optional callback when the density configuration is modified. |
 
 *Required **services** list:
 ```

packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.test.tsx

@@ -108,7 +108,7 @@ describe('CompareDocuments', () => {
         "data-test-subj": "unifiedDataTableCompareDocuments",
         "gridStyle": Object {
           "border": "horizontal",
-          "cellPadding": "l",
+          "cellPadding": "s",
           "fontSize": "s",
           "header": "underline",
           "rowHover": "highlight",

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

@@ -381,17 +381,19 @@ describe('UnifiedDataTable', () => {
           "additionalControls": null,
           "showColumnSelector": false,
           "showDisplaySelector": Object {
-            "additionalDisplaySettings": <UnifiedDataTableAdditionalDisplaySettings
-              headerRowHeight="custom"
-              headerRowHeightLines={1}
-              onChangeRowHeight={[Function]}
-              onChangeRowHeightLines={[Function]}
-              onChangeSampleSize={[MockFunction]}
-              rowHeight="custom"
-              rowHeightLines={3}
-              sampleSize={150}
-            />,
-            "allowDensity": false,
+            "additionalDisplaySettings": <React.Fragment>
+
+              <UnifiedDataTableAdditionalDisplaySettings
+                headerRowHeight="custom"
+                headerRowHeightLines={1}
+                onChangeRowHeight={[Function]}
+                onChangeRowHeightLines={[Function]}
+                onChangeSampleSize={[MockFunction]}
+                rowHeight="custom"
+                rowHeightLines={3}
+                sampleSize={150}
+              />
+            </React.Fragment>,
             "allowResetButton": false,
             "allowRowHeight": false,
           },
@@ -413,16 +415,18 @@ describe('UnifiedDataTable', () => {
           "additionalControls": null,
           "showColumnSelector": false,
           "showDisplaySelector": Object {
-            "additionalDisplaySettings": <UnifiedDataTableAdditionalDisplaySettings
-              headerRowHeight="custom"
-              headerRowHeightLines={1}
-              onChangeRowHeight={[Function]}
-              onChangeRowHeightLines={[Function]}
-              rowHeight="custom"
-              rowHeightLines={3}
-              sampleSize={200}
-            />,
-            "allowDensity": false,
+            "additionalDisplaySettings": <React.Fragment>
+
+              <UnifiedDataTableAdditionalDisplaySettings
+                headerRowHeight="custom"
+                headerRowHeightLines={1}
+                onChangeRowHeight={[Function]}
+                onChangeRowHeightLines={[Function]}
+                rowHeight="custom"
+                rowHeightLines={3}
+                sampleSize={200}
+              />
+            </React.Fragment>,
             "allowResetButton": false,
             "allowRowHeight": false,
           },
@@ -711,7 +715,7 @@ describe('UnifiedDataTable', () => {
 
       expect(grid.hasClass('euiDataGrid--bordersHorizontal')).toBeTruthy();
       expect(grid.hasClass('euiDataGrid--fontSizeSmall')).toBeTruthy();
-      expect(grid.hasClass('euiDataGrid--paddingLarge')).toBeTruthy();
+      expect(grid.hasClass('euiDataGrid--paddingSmall')).toBeTruthy();
       expect(grid.hasClass('euiDataGrid--rowHoverHighlight')).toBeTruthy();
       expect(grid.hasClass('euiDataGrid--headerUnderline')).toBeTruthy();
       expect(grid.hasClass('euiDataGrid--stripes')).toBeTruthy();

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

@@ -31,6 +31,7 @@ import {
   EuiDataGridProps,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import {
@@ -75,7 +76,6 @@ import {
 import { useRowHeightsOptions } from '../hooks/use_row_heights_options';
 import {
   DEFAULT_ROWS_PER_PAGE,
-  GRID_STYLE,
   ROWS_HEIGHT_OPTIONS,
   toolbarVisibility as toolbarVisibilityDefaults,
 } from '../constants';
@@ -90,6 +90,7 @@ import {
   getColorIndicatorControlColumn,
   type ColorIndicatorControlColumnParams,
 } from './custom_control_columns';
+import { useDataGridStyle } from '../hooks/use_data_grid_style';
 
 export type SortOrder = [string, string];
 
@@ -232,6 +233,14 @@ export interface UnifiedDataTableProps {
    * Update row height state
    */
   onUpdateRowHeight?: (rowHeight: number) => void;
+  /**
+   * Whether or not to show the density selector
+   */
+  showDensitySelector?: boolean;
+  /**
+   * Callback when the data grid style configuration is modified
+   */
+  onUpdateDataGridStyle?: (dataGridStyle: EuiDataGridStyle) => void;
   /**
    * Is text base lang mode enabled
    */
@@ -467,6 +476,8 @@ export const UnifiedDataTable = ({
   cellContext,
   renderCellPopover,
   getRowIndicator,
+  showDensitySelector = false,
+  onUpdateDataGridStyle,
 }: UnifiedDataTableProps) => {
   const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } =
     services;
@@ -610,6 +621,12 @@ export const UnifiedDataTable = ({
     return getShouldShowFieldHandler(dataViewFields, dataView, showMultiFields);
   }, [dataView, showMultiFields]);
 
+  const { dataGridStyle, onChangeDataGridStyle } = useDataGridStyle({
+    storage,
+    consumer,
+    onUpdateDataGridStyle,
+  });
+
   /**
    * Cell rendering
    */
@@ -625,6 +642,7 @@ export const UnifiedDataTable = ({
         maxEntries: maxDocFieldsDisplayed,
         externalCustomRenderers,
         isPlainRecord,
+        isCompressed: dataGridStyle.fontSize === 's',
       }),
     [
       dataView,
@@ -635,6 +653,7 @@ export const UnifiedDataTable = ({
       fieldFormats,
       externalCustomRenderers,
       isPlainRecord,
+      dataGridStyle,
     ]
   );
 
@@ -940,29 +959,30 @@ export const UnifiedDataTable = ({
   );
 
   const showDisplaySelector = useMemo(() => {
-    const options: EuiDataGridToolBarVisibilityDisplaySelectorOptions = {};
-
-    if (onUpdateRowHeight) {
-      options.allowDensity = false;
-    }
+    const options: EuiDataGridToolBarVisibilityDisplaySelectorOptions = {
+      ...(showDensitySelector && { allowDensity: showDensitySelector }),
+    };
 
     if (onUpdateRowHeight || onUpdateHeaderRowHeight || onUpdateSampleSize) {
       options.allowRowHeight = false;
       options.allowResetButton = false;
       options.additionalDisplaySettings = (
-        <UnifiedDataTableAdditionalDisplaySettings
-          rowHeight={rowHeight}
-          rowHeightLines={rowHeightLines}
-          onChangeRowHeight={onChangeRowHeight}
-          onChangeRowHeightLines={onChangeRowHeightLines}
-          headerRowHeight={headerRowHeight}
-          headerRowHeightLines={headerRowHeightLines}
-          onChangeHeaderRowHeight={onChangeHeaderRowHeight}
-          onChangeHeaderRowHeightLines={onChangeHeaderRowHeightLines}
-          maxAllowedSampleSize={maxAllowedSampleSize}
-          sampleSize={sampleSizeState}
-          onChangeSampleSize={onUpdateSampleSize}
-        />
+        <>
+          {showDensitySelector ? <EuiHorizontalRule margin="s" /> : ''}
+          <UnifiedDataTableAdditionalDisplaySettings
+            rowHeight={rowHeight}
+            rowHeightLines={rowHeightLines}
+            onChangeRowHeight={onChangeRowHeight}
+            onChangeRowHeightLines={onChangeRowHeightLines}
+            headerRowHeight={headerRowHeight}
+            headerRowHeightLines={headerRowHeightLines}
+            onChangeHeaderRowHeight={onChangeHeaderRowHeight}
+            onChangeHeaderRowHeightLines={onChangeHeaderRowHeightLines}
+            maxAllowedSampleSize={maxAllowedSampleSize}
+            sampleSize={sampleSizeState}
+            onChangeSampleSize={onUpdateSampleSize}
+          />
+        </>
       );
     }
 
@@ -981,6 +1001,7 @@ export const UnifiedDataTable = ({
     rowHeight,
     rowHeightLines,
     sampleSizeState,
+    showDensitySelector,
   ]);
 
   const inMemory = useMemo(() => {
@@ -1053,6 +1074,12 @@ export const UnifiedDataTable = ({
     );
   }
 
+  const gridStyle: EuiDataGridStyle = {
+    ...dataGridStyle,
+    onChange: onChangeDataGridStyle,
+    ...gridStyleOverride,
+  };
+
   return (
     <UnifiedDataTableContext.Provider value={unifiedDataTableContextValue}>
       <span className="unifiedDataTable__inner">
@@ -1107,7 +1134,7 @@ export const UnifiedDataTable = ({
               toolbarVisibility={toolbarVisibility}
               rowHeightsOptions={rowHeightsOptions}
               inMemory={inMemory}
-              gridStyle={gridStyleOverride ?? GRID_STYLE}
+              gridStyle={gridStyle}
               renderCustomGridBody={renderCustomGridBody}
               renderCustomToolbar={renderCustomToolbarFn}
               trailingControlColumns={customTrailingControlColumn}

packages/kbn-unified-data-table/src/components/source_document.tsx

@@ -37,6 +37,7 @@ export function SourceDocument({
   fieldFormats,
   dataTestSubj = 'discoverCellDescriptionList',
   className,
+  isCompressed = true,
 }: {
   useTopLevelObjectColumns: boolean;
   row: DataTableRecord;
@@ -48,6 +49,7 @@ export function SourceDocument({
   fieldFormats: FieldFormatsStart;
   dataTestSubj?: string;
   className?: string;
+  isCompressed?: boolean;
 }) {
   const pairs: FormattedHit = useTopLevelObjectColumns
     ? getTopLevelObjectPairs(row.raw, columnId, dataView, shouldShowFieldHandler).slice(
@@ -59,7 +61,7 @@ export function SourceDocument({
   return (
     <EuiDescriptionList
       type="inline"
-      compressed
+      compressed={isCompressed}
       className={classnames('unifiedDataTable__descriptionList', CELL_CLASS, className)}
       data-test-subj={dataTestSubj}
     >

packages/kbn-unified-data-table/src/constants.ts

@@ -27,10 +27,11 @@ export const defaultMonacoEditorWidth = 370;
 export const defaultTimeColumnWidth = 212;
 export const kibanaJSON = 'kibana-json';
 
+// Matches the EuiDataGrid "compact" density options
 export const GRID_STYLE: EuiDataGridStyle = {
   border: 'horizontal',
   fontSize: 's',
-  cellPadding: 'l',
+  cellPadding: 's',
   rowHover: 'highlight',
   header: 'underline',
   stripes: true,

packages/kbn-unified-data-table/src/hooks/use_data_grid_style.test.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { EuiDataGridStyle } from '@elastic/eui';
+import type { Storage } from '@kbn/kibana-utils-plugin/public';
+import { renderHook } from '@testing-library/react-hooks';
+import { useDataGridStyle } from './use_data_grid_style';
+
+const localStorageMock = {
+  get: jest.fn(),
+  set: jest.fn(),
+};
+
+describe('useDataGridStyle', () => {
+  beforeEach(() => {
+    localStorageMock.get.mockClear();
+    localStorageMock.set.mockClear();
+  });
+
+  it('should read from local storage', () => {
+    localStorageMock.get.mockReturnValue({ foo: 'bar' });
+    const { result } = renderHook(() =>
+      useDataGridStyle({
+        storage: localStorageMock as unknown as Storage,
+        consumer: 'discover',
+      })
+    );
+    const {
+      current: { dataGridStyle },
+    } = result;
+    expect(dataGridStyle).toMatchInlineSnapshot(`
+      Object {
+        "foo": "bar",
+      }
+    `);
+  });
+
+  it('should update local storage when onChangeDataGridStyle is called', () => {
+    const { result } = renderHook(() =>
+      useDataGridStyle({
+        storage: localStorageMock as unknown as Storage,
+        consumer: 'discover',
+      })
+    );
+    const {
+      current: { onChangeDataGridStyle },
+    } = result;
+
+    const newValue: EuiDataGridStyle = { border: 'all', footer: 'shade' };
+    onChangeDataGridStyle(newValue);
+
+    expect(localStorageMock.set).toBeCalledWith('discover:dataGridStyle', newValue);
+  });
+
+  it('should call provided onUpdateDataGridStyle with the updated value', () => {
+    const onUpdateDataGridStyle = jest.fn();
+    const { result } = renderHook(() =>
+      useDataGridStyle({
+        storage: localStorageMock as unknown as Storage,
+        consumer: 'discover',
+        onUpdateDataGridStyle,
+      })
+    );
+    const {
+      current: { onChangeDataGridStyle },
+    } = result;
+
+    const newValue: EuiDataGridStyle = { border: 'all', footer: 'shade' };
+    onChangeDataGridStyle(newValue);
+
+    expect(onUpdateDataGridStyle).toBeCalledWith(newValue);
+  });
+});