[UnifiedDataTable] Add density configuration (#188495)

## Summary Resolves #186007. Adds a density configuration for the `UnifiedDataTable`. By default, this configuration will not be shown unless an `onUpdateDataGridDensity`handler is passed to the `UnifiedDataTable`. It defaults to `compact`. It persists to `localStorage` when updated. https://github.com/user-attachments/assets/8523301c-7cf5-4854-bbbc-b6767d996c32 ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Bhavya RM <[email protected]>
elastic · Aug 19, 2024 · 22dc10c · 22dc10c
1 parent a0474ae
commit 22dc10c
Show file tree

Hide file tree

Showing 43 changed files with 558 additions and 145 deletions.
diff --git a/packages/kbn-unified-data-table/README.md b/packages/kbn-unified-data-table/README.md
@@ -50,7 +50,8 @@ Props description:
 | **visibleCellActions** | (optional)number | An optional value for a custom number of the visible cell actions in the table. By default is up to 3. |
 | **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. |
+| **componentsTourSteps** | (optional)Record<string,string> | Optional key/value pairs to set guided onboarding steps ids for a data table components included to guided tour. |~~~~
+| **onUpdateDataGridDensity** | (optional)(DataGridDensity) => void; | Optional callback when the data grid density configuration is modified. |
 
 *Required **services** list:
 ```

diff --git a/packages/kbn-unified-data-table/index.ts b/packages/kbn-unified-data-table/index.ts
@@ -14,7 +14,7 @@ export {
 } from './src/components/row_height_settings';
 export { getDisplayedColumns } from './src/utils/columns';
 export { getTextBasedColumnsMeta } from './src/utils/get_columns_meta';
-export { ROWS_HEIGHT_OPTIONS } from './src/constants';
+export { ROWS_HEIGHT_OPTIONS, DataGridDensity } from './src/constants';
 
 export { JSONCodeEditorCommonMemoized } from './src/components/json_code_editor/json_code_editor_common';
 

diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.test.tsx b/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",

diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.tsx
@@ -24,7 +24,7 @@ import { AdditionalFieldGroups } from '@kbn/unified-field-list';
 import { memoize } from 'lodash';
 import React, { useMemo, useState } from 'react';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
-import { GRID_STYLE } from '../../constants';
+import { DATA_GRID_STYLE_DEFAULT } from '../../constants';
 import { ComparisonControls } from './comparison_controls';
 import { renderComparisonToolbar } from './comparison_toolbar';
 import { useComparisonCellValue } from './hooks/use_comparison_cell_value';
@@ -55,7 +55,7 @@ export interface CompareDocumentsProps {
 
 const COMPARISON_ROW_HEIGHT: EuiDataGridRowHeightsOptions = { defaultHeight: 'auto' };
 const COMPARISON_IN_MEMORY: EuiDataGridInMemory = { level: 'sorting' };
-const COMPARISON_GRID_STYLE: EuiDataGridStyle = { ...GRID_STYLE, stripes: undefined };
+const COMPARISON_GRID_STYLE: EuiDataGridStyle = { ...DATA_GRID_STYLE_DEFAULT, stripes: undefined };
 
 const getStorageKey = (consumer: string, key: string) => `${consumer}:dataGridComparison${key}`;
 

diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
@@ -423,16 +423,18 @@ 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}
-            />,
+            "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,
@@ -455,15 +457,17 @@ describe('UnifiedDataTable', () => {
           "additionalControls": null,
           "showColumnSelector": false,
           "showDisplaySelector": Object {
-            "additionalDisplaySettings": <UnifiedDataTableAdditionalDisplaySettings
-              headerRowHeight="custom"
-              headerRowHeightLines={1}
-              onChangeRowHeight={[Function]}
-              onChangeRowHeightLines={[Function]}
-              rowHeight="custom"
-              rowHeightLines={3}
-              sampleSize={200}
-            />,
+            "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,
@@ -741,7 +745,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();

diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx
@@ -26,9 +26,10 @@ import {
   EuiDataGridInMemory,
   EuiDataGridControlColumn,
   EuiDataGridCustomBodyProps,
-  EuiDataGridToolBarVisibilityDisplaySelectorOptions,
   EuiDataGridStyle,
   EuiDataGridProps,
+  EuiHorizontalRule,
+  EuiDataGridToolBarVisibilityDisplaySelectorOptions,
 } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import {
@@ -45,6 +46,7 @@ import type { ThemeServiceStart } from '@kbn/react-kibana-context-common';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { AdditionalFieldGroups } from '@kbn/unified-field-list';
+import { DATA_GRID_DENSITY_STYLE_MAP, useDataGridDensity } from '../hooks/use_data_grid_density';
 import {
   UnifiedDataTableSettings,
   ValueToStringConverter,
@@ -70,10 +72,11 @@ import { getSchemaDetectors } from './data_table_schema';
 import { DataTableDocumentToolbarBtn } from './data_table_document_selection';
 import { useRowHeightsOptions } from '../hooks/use_row_heights_options';
 import {
+  DATA_GRID_STYLE_DEFAULT,
   DEFAULT_ROWS_PER_PAGE,
-  GRID_STYLE,
   ROWS_HEIGHT_OPTIONS,
   toolbarVisibility as toolbarVisibilityDefaults,
+  DataGridDensity,
 } from '../constants';
 import { UnifiedDataTableFooter } from './data_table_footer';
 import { UnifiedDataTableAdditionalDisplaySettings } from './data_table_additional_display_settings';
@@ -232,6 +235,14 @@ export interface UnifiedDataTableProps {
    * Update row height state
    */
   onUpdateRowHeight?: (rowHeight: number) => void;
+  /**
+   * Density from state
+   */
+  dataGridDensityState?: DataGridDensity;
+  /**
+   * Callback when the data grid density configuration is modified
+   */
+  onUpdateDataGridDensity?: (dataGridDensity: DataGridDensity) => void;
   /**
    * Is text base lang mode enabled
    */
@@ -468,6 +479,8 @@ export const UnifiedDataTable = ({
   cellContext,
   renderCellPopover,
   getRowIndicator,
+  dataGridDensityState,
+  onUpdateDataGridDensity,
 }: UnifiedDataTableProps) => {
   const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } =
     services;
@@ -610,6 +623,23 @@ export const UnifiedDataTable = ({
     return getShouldShowFieldHandler(dataViewFields, dataView, showMultiFields);
   }, [dataView, showMultiFields]);
 
+  const { dataGridDensity, onChangeDataGridDensity } = useDataGridDensity({
+    storage,
+    consumer,
+    dataGridDensityState,
+    onUpdateDataGridDensity,
+  });
+
+  const gridStyle = useMemo<EuiDataGridStyle>(
+    () => ({
+      ...DATA_GRID_STYLE_DEFAULT,
+      ...DATA_GRID_DENSITY_STYLE_MAP[dataGridDensity],
+      onChange: onChangeDataGridDensity,
+      ...gridStyleOverride,
+    }),
+    [dataGridDensity, onChangeDataGridDensity, gridStyleOverride]
+  );
+
   /**
    * Cell rendering
    */
@@ -625,6 +655,7 @@ export const UnifiedDataTable = ({
         maxEntries: maxDocFieldsDisplayed,
         externalCustomRenderers,
         isPlainRecord,
+        isCompressed: dataGridDensity === DataGridDensity.COMPACT,
       }),
     [
       dataView,
@@ -635,6 +666,7 @@ export const UnifiedDataTable = ({
       fieldFormats,
       externalCustomRenderers,
       isPlainRecord,
+      dataGridDensity,
     ]
   );
 
@@ -950,34 +982,41 @@ export const UnifiedDataTable = ({
     [renderCustomToolbar, additionalControls]
   );
 
-  const showDisplaySelector = useMemo(() => {
-    const options: EuiDataGridToolBarVisibilityDisplaySelectorOptions = {};
-
-    if (onUpdateRowHeight) {
-      options.allowDensity = false;
-    }
-
-    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}
-        />
-      );
+  const showDisplaySelector = useMemo(():
+    | EuiDataGridToolBarVisibilityDisplaySelectorOptions
+    | undefined => {
+    if (
+      !onUpdateDataGridDensity &&
+      !onUpdateRowHeight &&
+      !onUpdateHeaderRowHeight &&
+      !onUpdateSampleSize
+    ) {
+      return;
     }
 
-    return Object.keys(options).length ? options : undefined;
+    return {
+      allowDensity: Boolean(onUpdateDataGridDensity),
+      allowRowHeight: false,
+      allowResetButton: false,
+      additionalDisplaySettings: (
+        <>
+          {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}
+          />
+        </>
+      ),
+    };
   }, [
     headerRowHeight,
     headerRowHeightLines,
@@ -992,6 +1031,7 @@ export const UnifiedDataTable = ({
     rowHeight,
     rowHeightLines,
     sampleSizeState,
+    onUpdateDataGridDensity,
   ]);
 
   const inMemory = useMemo(() => {
@@ -1101,6 +1141,8 @@ export const UnifiedDataTable = ({
             />
           ) : (
             <EuiDataGridMemoized
+              // Using this as the `key` is a workaround for https://github.com/elastic/eui/issues/7962. This forces a re-render if the density is changed.
+              key={dataGridDensity}
               id={dataGridId}
               aria-describedby={randomId}
               aria-labelledby={ariaLabelledBy}
@@ -1118,7 +1160,7 @@ export const UnifiedDataTable = ({
               toolbarVisibility={toolbarVisibility}
               rowHeightsOptions={rowHeightsOptions}
               inMemory={inMemory}
-              gridStyle={gridStyleOverride ?? GRID_STYLE}
+              gridStyle={gridStyle}
               renderCustomGridBody={renderCustomGridBody}
               renderCustomToolbar={renderCustomToolbarFn}
               trailingControlColumns={trailingControlColumns}

diff --git a/packages/kbn-unified-data-table/src/components/source_document.tsx b/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}
     >

diff --git a/packages/kbn-unified-data-table/src/constants.ts b/packages/kbn-unified-data-table/src/constants.ts
@@ -5,13 +5,12 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { EuiDataGridStyle } from '@elastic/eui';
+import type { EuiDataGridStyle } from '@elastic/eui';
 
 export const DEFAULT_CONTROL_COLUMN_WIDTH = 24;
 
 export const DEFAULT_ROWS_PER_PAGE = 100;
 export const MAX_LOADED_GRID_ROWS = 10000;
-
 export const ROWS_PER_PAGE_OPTIONS = [10, 25, 50, DEFAULT_ROWS_PER_PAGE, 250, 500];
 /**
  * Row height might be a value from -1 to 20
@@ -29,13 +28,27 @@ export const defaultMonacoEditorWidth = 370;
 export const defaultTimeColumnWidth = 212;
 export const kibanaJSON = 'kibana-json';
 
-export const GRID_STYLE: EuiDataGridStyle = {
-  border: 'horizontal',
+export const DATA_GRID_STYLE_COMPACT: EuiDataGridStyle = {
+  cellPadding: 's',
   fontSize: 's',
+};
+
+export const DATA_GRID_STYLE_NORMAL: EuiDataGridStyle = {
+  cellPadding: 'm',
+  fontSize: 'm',
+};
+
+export const DATA_GRID_STYLE_EXPANDED: EuiDataGridStyle = {
   cellPadding: 'l',
+  fontSize: 'l',
+};
+
+export const DATA_GRID_STYLE_DEFAULT: EuiDataGridStyle = {
+  ...DATA_GRID_STYLE_COMPACT,
+  border: 'horizontal',
+  stripes: true,
   rowHover: 'highlight',
   header: 'underline',
-  stripes: true,
 };
 
 export const toolbarVisibility = {
@@ -44,3 +57,9 @@ export const toolbarVisibility = {
     allowReorder: true,
   },
 };
+
+export enum DataGridDensity {
+  COMPACT = 'compact',
+  NORMAL = 'normal',
+  EXPANDED = 'expanded',
+}