diff --git a/packages/kbn-unified-data-table/index.ts b/packages/kbn-unified-data-table/index.ts index 1b61591fcac9c..8f7e711bebcad 100644 --- 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 index 3a408637651ed..ff2fb71ca1c35 100644 --- 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(() => { - 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 index 3b91f18c4d731..f4dada8c6bb60 100644 --- 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 & { + 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(() => { diff --git a/src/plugins/discover/public/application/context/context_app_content.tsx b/src/plugins/discover/public/application/context/context_app_content.tsx index 3a36508413027..b6b4be221377a 100644 --- 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 index 930f008724afd..2fe2a4f5a8f93 100644 --- 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 index 6d8a627a6eda1..23e06062d166b 100644 --- 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 { +interface DiscoverGridEmbeddableProps extends Omit { 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, ]);