Merge pull request #2 from davismcphee/fix-default-density-and-row-he…

…ight Fix default grid density and row height passed to `getCellRenderers`
tonyghiani · Sep 26, 2024 · 4afb2a0 · 4afb2a0
2 parents 456d268 + 9ff0c54
commit 4afb2a0
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 44 deletions.
diff --git a/packages/kbn-unified-data-table/index.ts b/packages/kbn-unified-data-table/index.ts
@@ -38,3 +38,6 @@ export {
   getRenderCustomToolbarWithElements,
   renderCustomToolbar,
 } from './src/components/custom_toolbar/render_custom_toolbar';
+
+export { getDataGridDensity } from './src/hooks/use_data_grid_density';
+export { getRowHeight } from './src/hooks/use_row_height';
diff --git a/packages/kbn-unified-data-table/src/hooks/use_data_grid_density.ts b/packages/kbn-unified-data-table/src/hooks/use_data_grid_density.ts
@@ -30,8 +30,6 @@ interface UseDataGridDensityProps {
   onUpdateDataGridDensity?: (density: DataGridDensity) => void;
 }
 
-export const DATA_GRID_DENSITY_STORAGE_KEY = 'dataGridDensity';
-
 export function getDensityFromStyle(style: EuiDataGridStyle) {
   return style.cellPadding === DATA_GRID_STYLE_COMPACT.cellPadding &&
     style.fontSize === DATA_GRID_STYLE_COMPACT.fontSize
@@ -42,24 +40,30 @@ export function getDensityFromStyle(style: EuiDataGridStyle) {
     : DataGridDensity.EXPANDED;
 }
 
+const DATA_GRID_DENSITY_STORAGE_KEY = 'dataGridDensity';
+const getStorageKey = (consumer: string) => `${consumer}:${DATA_GRID_DENSITY_STORAGE_KEY}`;
+
+export const getDataGridDensity = (storage: Storage, consumer: string): DataGridDensity => {
+  return storage.get(getStorageKey(consumer)) ?? DataGridDensity.COMPACT;
+};
+
 export const useDataGridDensity = ({
   storage,
   consumer,
   dataGridDensityState,
   onUpdateDataGridDensity,
 }: UseDataGridDensityProps) => {
-  const storageKey = `${consumer}:${DATA_GRID_DENSITY_STORAGE_KEY}`;
   const dataGridDensity = useMemo<DataGridDensity>(() => {
-    return dataGridDensityState ?? storage.get(storageKey) ?? DataGridDensity.COMPACT;
-  }, [dataGridDensityState, storage, storageKey]);
+    return dataGridDensityState ?? getDataGridDensity(storage, consumer);
+  }, [consumer, dataGridDensityState, storage]);
 
   const onChangeDataGridDensity = useCallback(
     (gridStyle: EuiDataGridStyle) => {
       const newDensity = getDensityFromStyle(gridStyle);
-      storage.set(storageKey, newDensity);
+      storage.set(getStorageKey(consumer), newDensity);
       onUpdateDataGridDensity?.(newDensity);
     },
-    [storageKey, storage, onUpdateDataGridDensity]
+    [storage, consumer, onUpdateDataGridDensity]
   );
 
   return {

diff --git a/packages/kbn-unified-data-table/src/hooks/use_row_height.ts b/packages/kbn-unified-data-table/src/hooks/use_row_height.ts
@@ -27,6 +27,59 @@ interface UseRowHeightProps {
   onUpdateRowHeight?: (rowHeight: number) => void;
 }
 
+interface ResolveRowHeightParams {
+  storage: Storage;
+  consumer: string;
+  key: string;
+  configRowHeight: number;
+  rowHeightState?: number;
+}
+
+const resolveRowHeight = ({
+  storage,
+  consumer,
+  key,
+  configRowHeight,
+  rowHeightState,
+}: ResolveRowHeightParams): number => {
+  const rowHeightFromLS = getStoredRowHeight(storage, consumer, key);
+
+  const configHasNotChanged = (
+    localStorageRecord: DataGridOptionsRecord | null
+  ): localStorageRecord is DataGridOptionsRecord =>
+    localStorageRecord !== null && configRowHeight === localStorageRecord.previousConfigRowHeight;
+
+  let currentRowLines: number;
+  if (isValidRowHeight(rowHeightState)) {
+    currentRowLines = rowHeightState;
+  } else if (configHasNotChanged(rowHeightFromLS)) {
+    currentRowLines = rowHeightFromLS.previousRowHeight;
+  } else {
+    currentRowLines = configRowHeight;
+  }
+
+  return currentRowLines;
+};
+
+export const ROW_HEIGHT_STORAGE_KEY = 'dataGridRowHeight';
+
+export const getRowHeight = ({
+  storage,
+  consumer,
+  rowHeightState,
+  configRowHeight,
+}: Pick<ResolveRowHeightParams, 'storage' | 'consumer' | 'rowHeightState'> & {
+  configRowHeight?: number;
+}) => {
+  return resolveRowHeight({
+    storage,
+    consumer,
+    key: ROW_HEIGHT_STORAGE_KEY,
+    configRowHeight: configRowHeight ?? ROWS_HEIGHT_OPTIONS.default,
+    rowHeightState,
+  });
+};
+
 export const useRowHeight = ({
   storage,
   consumer,
@@ -36,23 +89,13 @@ export const useRowHeight = ({
   onUpdateRowHeight,
 }: UseRowHeightProps) => {
   const rowHeightLines = useMemo(() => {
-    const rowHeightFromLS = getStoredRowHeight(storage, consumer, key);
-
-    const configHasNotChanged = (
-      localStorageRecord: DataGridOptionsRecord | null
-    ): localStorageRecord is DataGridOptionsRecord =>
-      localStorageRecord !== null && configRowHeight === localStorageRecord.previousConfigRowHeight;
-
-    let currentRowLines: number;
-    if (isValidRowHeight(rowHeightState)) {
-      currentRowLines = rowHeightState;
-    } else if (configHasNotChanged(rowHeightFromLS)) {
-      currentRowLines = rowHeightFromLS.previousRowHeight;
-    } else {
-      currentRowLines = configRowHeight;
-    }
-
-    return currentRowLines;
+    return resolveRowHeight({
+      storage,
+      consumer,
+      key,
+      configRowHeight,
+      rowHeightState,
+    });
   }, [configRowHeight, consumer, key, rowHeightState, storage]);
 
   const rowHeight = useMemo<RowHeightSettingsProps['rowHeight']>(() => {

diff --git a/src/plugins/discover/public/application/context/context_app_content.tsx b/src/plugins/discover/public/application/context/context_app_content.tsx
@@ -29,10 +29,10 @@ import {
   SHOW_MULTIFIELDS,
 } from '@kbn/discover-utils';
 import {
-  DataGridDensity,
   DataLoadingState,
-  ROWS_HEIGHT_OPTIONS,
   UnifiedDataTableProps,
+  getDataGridDensity,
+  getRowHeight,
 } from '@kbn/unified-data-table';
 import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { useQuerySubscriber } from '@kbn/unified-field-list';
@@ -175,16 +175,21 @@ export function ContextAppContent({
     [grid, setAppState]
   );
 
+  const configRowHeight = services.uiSettings.get(ROW_HEIGHT_OPTION);
   const getCellRenderersAccessor = useProfileAccessor('getCellRenderers');
   const cellRenderers = useMemo(() => {
     const getCellRenderers = getCellRenderersAccessor(() => ({}));
     return getCellRenderers({
       actions: { addFilter },
       dataView,
-      density: DataGridDensity.COMPACT,
-      rowHeight: ROWS_HEIGHT_OPTIONS.single,
+      density: getDataGridDensity(services.storage, 'discover'),
+      rowHeight: getRowHeight({
+        storage: services.storage,
+        consumer: 'discover',
+        configRowHeight,
+      }),
     });
-  }, [addFilter, dataView, getCellRenderersAccessor]);
+  }, [addFilter, configRowHeight, dataView, getCellRenderersAccessor, services.storage]);
 
   const dataSource = useMemo(() => createDataSource({ dataView, query: undefined }), [dataView]);
   const { filters } = useQuerySubscriber({ data: services.data });
@@ -259,7 +264,7 @@ export function ContextAppContent({
               setExpandedDoc={setExpandedDoc}
               onFilter={addFilter}
               onSetColumns={onSetColumns}
-              configRowHeight={services.uiSettings.get(ROW_HEIGHT_OPTION)}
+              configRowHeight={configRowHeight}
               showMultiFields={services.uiSettings.get(SHOW_MULTIFIELDS)}
               maxDocFieldsDisplayed={services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)}
               renderDocumentView={renderDocumentView}

diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx
@@ -29,9 +29,11 @@ import {
   type DataTableColumnsMeta,
   getTextBasedColumnsMeta,
   getRenderCustomToolbarWithElements,
-  type DataGridDensity,
+  DataGridDensity,
   UnifiedDataTableProps,
   UseColumnsProps,
+  getDataGridDensity,
+  getRowHeight,
 } from '@kbn/unified-data-table';
 import {
   DOC_HIDE_TIME_COLUMN_SETTING,
@@ -307,14 +309,20 @@ function DiscoverDocumentsComponent({
     [dataView, onAddColumn, onAddFilter, onRemoveColumn, query, savedSearch.id, setExpandedDoc]
   );
 
+  const configRowHeight = uiSettings.get(ROW_HEIGHT_OPTION);
   const cellRendererParams: CellRenderersExtensionParams = useMemo(
     () => ({
       actions: { addFilter: onAddFilter },
       dataView,
-      density,
-      rowHeight,
+      density: density ?? getDataGridDensity(services.storage, 'discover'),
+      rowHeight: getRowHeight({
+        storage: services.storage,
+        consumer: 'discover',
+        rowHeightState: rowHeight,
+        configRowHeight,
+      }),
     }),
-    [onAddFilter, dataView, density, rowHeight]
+    [onAddFilter, dataView, density, services.storage, rowHeight, configRowHeight]
   );
 
   const { rowAdditionalLeadingControls } = useDiscoverCustomization('data_table') || {};
@@ -469,7 +477,7 @@ function DiscoverDocumentsComponent({
                 sampleSizeState={getAllowedSampleSize(sampleSizeState, services.uiSettings)}
                 onUpdateSampleSize={!isEsqlMode ? onUpdateSampleSize : undefined}
                 onFieldEdited={onFieldEdited}
-                configRowHeight={uiSettings.get(ROW_HEIGHT_OPTION)}
+                configRowHeight={configRowHeight}
                 showMultiFields={uiSettings.get(SHOW_MULTIFIELDS)}
                 maxDocFieldsDisplayed={uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)}
                 renderDocumentView={renderDocumentView}

diff --git a/src/plugins/discover/public/embeddable/components/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/components/saved_search_grid.tsx
@@ -17,6 +17,8 @@ import {
   type DataTableColumnsMeta,
   DataLoadingState as DiscoverGridLoadingState,
   getRenderCustomToolbarWithElements,
+  getDataGridDensity,
+  getRowHeight,
 } from '@kbn/unified-data-table';
 import { DiscoverGrid } from '../../components/discover_grid';
 import './saved_search_grid.scss';
@@ -25,8 +27,7 @@ import { SavedSearchEmbeddableBase } from './saved_search_embeddable_base';
 import { TotalDocuments } from '../../application/main/components/total_documents/total_documents';
 import { useProfileAccessor } from '../../context_awareness';
 
-export interface DiscoverGridEmbeddableProps
-  extends Omit<UnifiedDataTableProps, 'sampleSizeState'> {
+interface DiscoverGridEmbeddableProps extends Omit<UnifiedDataTableProps, 'sampleSizeState'> {
   sampleSizeState: number; // a required prop
   totalHitCount?: number;
   query?: AggregateQuery | Query;
@@ -36,11 +37,6 @@ export interface DiscoverGridEmbeddableProps
   savedSearchId?: string;
 }
 
-export type DiscoverGridEmbeddableSearchProps = Omit<
-  DiscoverGridEmbeddableProps,
-  'sampleSizeState' | 'loadingState' | 'query'
->;
-
 export const DiscoverGridMemoized = React.memo(DiscoverGrid);
 
 export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) {
@@ -98,13 +94,21 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) {
     return getCellRenderers({
       actions: { addFilter: props.onFilter },
       dataView: props.dataView,
-      density: gridProps.dataGridDensityState,
-      rowHeight: gridProps.rowHeightState,
+      density:
+        gridProps.dataGridDensityState ?? getDataGridDensity(props.services.storage, 'discover'),
+      rowHeight: getRowHeight({
+        storage: props.services.storage,
+        consumer: 'discover',
+        rowHeightState: gridProps.rowHeightState,
+        configRowHeight: props.configRowHeight,
+      }),
     });
   }, [
     getCellRenderersAccessor,
     props.onFilter,
     props.dataView,
+    props.services.storage,
+    props.configRowHeight,
     gridProps.dataGridDensityState,
     gridProps.rowHeightState,
   ]);