From cc9a883731bb5bdda675dad20a0bb66c07a1c862 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Wed, 27 Nov 2024 00:32:12 -0400 Subject: [PATCH 1/2] Clean up pagination handling in Unified Data Table --- .../src/components/data_table.tsx | 83 ++++++------------- .../unified_components/data_table/index.tsx | 6 +- .../timeline/unified_components/index.tsx | 10 ++- 3 files changed, 37 insertions(+), 62 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index 46ca224567b33..bcd8281bcb2ec 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -30,6 +30,7 @@ import { EuiDataGridProps, EuiHorizontalRule, EuiDataGridToolBarVisibilityDisplaySelectorOptions, + EuiDataGridPaginationProps, } from '@elastic/eui'; import type { DataView } from '@kbn/data-views-plugin/public'; import { @@ -261,6 +262,12 @@ export interface UnifiedDataTableProps { * Update rows per page state */ onUpdateRowsPerPage?: (rowsPerPage: number) => void; + /** + * + * this callback is triggered when user navigates to a different page + * + */ + onUpdatePageIndex?: (pageIndex: number) => void; /** * Configuration option to limit sample size slider */ @@ -420,12 +427,6 @@ export interface UnifiedDataTableProps { * @param row */ getRowIndicator?: ColorIndicatorControlColumnParams['getRowIndicator']; - /** - * - * this callback is triggered when user navigates to a different page - * - */ - onChangePage?: (pageIndex: number) => void; } export const EuiDataGridMemoized = React.memo(EuiDataGrid); @@ -470,6 +471,7 @@ export const UnifiedDataTable = ({ isPlainRecord = false, rowsPerPageState, onUpdateRowsPerPage, + onUpdatePageIndex, onFieldEdited, services, renderCustomGridBody, @@ -499,7 +501,6 @@ export const UnifiedDataTable = ({ getRowIndicator, dataGridDensityState, onUpdateDataGridDensity, - onChangePage: onChangePageProp, }: UnifiedDataTableProps) => { const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } = services; @@ -603,74 +604,42 @@ export const UnifiedDataTable = ({ typeof rowsPerPageState === 'number' && rowsPerPageState > 0 ? rowsPerPageState : DEFAULT_ROWS_PER_PAGE; - const [pagination, setPagination] = useState({ - pageIndex: 0, - pageSize: currentPageSize, - }); + const [currentPageIndex, setCurrentPageIndex] = useState(0); const rowCount = useMemo(() => (displayedRows ? displayedRows.length : 0), [displayedRows]); const pageCount = useMemo( - () => Math.ceil(rowCount / pagination.pageSize), - [rowCount, pagination] + () => Math.ceil(rowCount / currentPageSize), + [currentPageSize, rowCount] ); - const paginationObj = useMemo(() => { + const pagination = useMemo(() => { const onChangeItemsPerPage = (pageSize: number) => { onUpdateRowsPerPage?.(pageSize); }; const onChangePage = (pageIndex: number) => { - setPagination((paginationData) => ({ ...paginationData, pageIndex })); + setCurrentPageIndex(pageIndex); + onUpdatePageIndex?.(pageIndex); }; return isPaginationEnabled ? { onChangeItemsPerPage, onChangePage, - pageIndex: pagination.pageIndex > pageCount - 1 ? 0 : pagination.pageIndex, - pageSize: pagination.pageSize, - pageSizeOptions: rowsPerPageOptions ?? getRowsPerPageOptions(pagination.pageSize), + pageIndex: currentPageIndex > pageCount - 1 ? 0 : currentPageIndex, + pageSize: currentPageSize, + pageSizeOptions: rowsPerPageOptions ?? getRowsPerPageOptions(currentPageSize), } : undefined; }, [ + currentPageIndex, + currentPageSize, isPaginationEnabled, - pagination.pageIndex, - pagination.pageSize, + onUpdatePageIndex, + onUpdateRowsPerPage, pageCount, rowsPerPageOptions, - onUpdateRowsPerPage, ]); - useEffect(() => { - /* - * Only for pageSize - * Sync pageSize with consumer provided pageSize - */ - setPagination((paginationData) => - paginationData.pageSize === currentPageSize - ? paginationData - : { ...paginationData, pageSize: currentPageSize } - ); - }, [currentPageSize]); - - useEffect(() => { - /* - * Only for pageIndex - * Sync pagination with EUI calculated pageIndex - * - */ - setPagination((prevPagination) => ({ - ...prevPagination, - pageIndex: paginationObj?.pageIndex ?? 0, - })); - }, [paginationObj?.pageIndex]); - - useEffect(() => { - /* - * Propagate new pageIndex to the consumer - */ - onChangePageProp?.(pagination.pageIndex); - }, [pagination.pageIndex, onChangePageProp]); - const unifiedDataTableContextValue = useMemo( () => ({ expanded: expandedDoc, @@ -683,8 +652,8 @@ export const UnifiedDataTable = ({ valueToStringConverter, componentsTourSteps, isPlainRecord, - pageIndex: isPaginationEnabled ? paginationObj?.pageIndex : 0, - pageSize: isPaginationEnabled ? paginationObj?.pageSize : displayedRows.length, + pageIndex: isPaginationEnabled ? pagination?.pageIndex : 0, + pageSize: isPaginationEnabled ? pagination?.pageSize : displayedRows.length, }), [ componentsTourSteps, @@ -697,7 +666,7 @@ export const UnifiedDataTable = ({ onFilter, setExpandedDoc, selectedDocsState, - paginationObj, + pagination, valueToStringConverter, ] ); @@ -1181,7 +1150,7 @@ export const UnifiedDataTable = ({ data-test-subj="docTable" leadingControlColumns={leadingControlColumns} onColumnResize={onResize} - pagination={paginationObj} + pagination={pagination} renderCellValue={renderCellValue} ref={dataGridRef} rowCount={rowCount} @@ -1210,7 +1179,7 @@ export const UnifiedDataTable = ({ rowCount={rowCount} sampleSize={sampleSizeState} pageCount={pageCount} - pageIndex={paginationObj?.pageIndex} + pageIndex={pagination?.pageIndex} totalHits={totalHits} onFetchMoreRecords={onFetchMoreRecords} data={data} diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx index 95560c16cafb3..99e00547f1c33 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx @@ -79,7 +79,7 @@ type CommonDataTableProps = { | 'renderCustomGridBody' | 'trailingControlColumns' | 'isSortEnabled' - | 'onChangePage' + | 'onUpdatePageIndex' >; interface DataTableProps extends CommonDataTableProps { @@ -110,7 +110,7 @@ export const TimelineDataTableComponent: React.FC = memo( onSort, onFilter, leadingControlColumns, - onChangePage, + onUpdatePageIndex, }) { const dispatch = useDispatch(); @@ -426,7 +426,7 @@ export const TimelineDataTableComponent: React.FC = memo( renderCustomGridBody={finalRenderCustomBodyCallback} trailingControlColumns={finalTrailControlColumns} externalControlColumns={leadingControlColumns} - onChangePage={onChangePage} + onUpdatePageIndex={onUpdatePageIndex} /> diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx index 6dbeea031a1f7..efa09eae6ca15 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx @@ -114,7 +114,7 @@ interface Props { dataView: DataView; trailingControlColumns?: EuiDataGridProps['trailingControlColumns']; leadingControlColumns?: EuiDataGridProps['leadingControlColumns']; - onChangePage?: UnifiedDataTableProps['onChangePage']; + onChangePage?: UnifiedDataTableProps['onUpdatePageIndex']; } const UnifiedTimelineComponent: React.FC = ({ @@ -444,7 +444,13 @@ const UnifiedTimelineComponent: React.FC = ({ onFilter={onAddFilter as DocViewFilterFn} trailingControlColumns={trailingControlColumns} leadingControlColumns={leadingControlColumns} - onChangePage={onChangePage} + onUpdatePageIndex={useCallback( + (pageIndex: number) => { + console.log('pageIndex', pageIndex); + onChangePage?.(pageIndex); + }, + [onChangePage] + )} /> From 2ecf1da524830470fa76e10e7d251a9abfe3d3b6 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Wed, 27 Nov 2024 00:46:29 -0400 Subject: [PATCH 2/2] Remove console log --- .../components/timeline/unified_components/index.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx index efa09eae6ca15..d177d6f3cd4c7 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx @@ -444,13 +444,7 @@ const UnifiedTimelineComponent: React.FC = ({ onFilter={onAddFilter as DocViewFilterFn} trailingControlColumns={trailingControlColumns} leadingControlColumns={leadingControlColumns} - onUpdatePageIndex={useCallback( - (pageIndex: number) => { - console.log('pageIndex', pageIndex); - onChangePage?.(pageIndex); - }, - [onChangePage] - )} + onUpdatePageIndex={onChangePage} />