[Discover] Data Grid Pagination Options

CHANGELOG.md

@@ -22,6 +22,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Workspace] Setup workspace skeleton and implement basic CRUD API ([#5075](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5075))
 - [Decouple] Add new cross compatibility check core service which export functionality for plugins to verify if their OpenSearch plugin counterpart is installed on the cluster or has incompatible version to configure the plugin behavior([#4710](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4710))
 - [Discover] Display inner properties in the left navigation bar [#5429](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5429)
+- [Discover] Added customizable pagination options based on Discover UI settings [#5610](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5610)
 
 ### 🐛 Bug Fixes
 
@@ -947,4 +948,4 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ### 🔩 Tests
 
-- Update caniuse to fix failed integration tests ([#2322](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2322))
+- Update caniuse to fix failed integration tests ([#2322](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2322))

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -16,6 +16,8 @@ import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_
 import { usePagination } from '../utils/use_pagination';
 import { SortOrder } from '../../../saved_searches/types';
 import { buildColumns } from '../../utils/columns';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { DiscoverServices } from '../../../build_services';
 
 export interface DataGridTableProps {
   columns: string[];
@@ -52,9 +54,11 @@ export const DataGridTable = ({
   isContextView = false,
   isLoading = false,
 }: DataGridTableProps) => {
+  const { services } = useOpenSearchDashboards<DiscoverServices>();
+
   const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
   const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
-  const pagination = usePagination(rowCount);
+  const pagination = usePagination({ rowCount, services });
 
   let adjustedColumns = buildColumns(columns);
   // handle case where the user removes selected filed and leaves only time column

src/plugins/discover/public/application/components/utils/page_size_options.test.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { defaultPageOptions, generatePageSizeOptions } from './page_size_options';
+
+describe('generatePageSizeOptions', () => {
+  it('generates default options and additional options based on sample size', () => {
+    const sampleSize = 1000;
+
+    const pageSizeOptions = generatePageSizeOptions(sampleSize);
+
+    // Expected result based on the provided sample size
+    const expectedOptions = [...defaultPageOptions, 500, 1000];
+
+    // Check if the generated options match the expected result
+    expect(pageSizeOptions).toEqual(expectedOptions);
+  });
+
+  it('handles edge case when sample size is less than maxSize', () => {
+    const sampleSize = 50;
+
+    // Call the function
+    const pageSizeOptions = generatePageSizeOptions(sampleSize);
+
+    // Check if the generated options match the expected result
+    expect(pageSizeOptions).toEqual(defaultPageOptions);
+  });
+
+  it('handles edge case when sample size is less than 0', () => {
+    const sampleSize = -10;
+
+    // Call the function
+    const pageSizeOptions = generatePageSizeOptions(sampleSize);
+
+    // Check if the generated options match the expected result
+    expect(pageSizeOptions).toEqual(defaultPageOptions);
+  });
+});

src/plugins/discover/public/application/components/utils/page_size_options.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { uniq } from 'lodash';
+
+/**
+ * Generates an array of pagination options based on the provided `sampleSize`.
+ * The array includes default values (25, 50, 100) and additional options derived from the `sampleSize` setting.
+ * Ensures uniqueness and sorts the array in ascending order, representing available page size options for pagination.
+ * @param {number} sampleSize - The sample size used to determine additional pagination options.
+ * @returns {number[]} - An array of available page size options.
+ */
+
+export const generatePageSizeOptions = (sampleSize: number): number[] => {
+  if (sampleSize && sampleSize > 0) {
+    const maxSize = 500;
+    const pageSizeFromSetting = [...Array(Math.floor(sampleSize / maxSize)).keys()].map(
+      (i) => (i + 1) * maxSize
+    );
+    return uniq([...defaultPageOptions, ...pageSizeFromSetting]).sort((a, b) => a - b);
+  }
+  return defaultPageOptions;
+};
+
+export const defaultPageOptions = [25, 50, 100];

src/plugins/discover/public/application/components/utils/use_pagination.test.ts

@@ -6,10 +6,17 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 import { usePagination } from './use_pagination';
 
+import { uiSettingsServiceMock } from '../../../../../../core/public/mocks';
+
 describe('usePagination', () => {
+  // TODO: create mock for DiscoverServices
+  const services: any = {
+    uiSettings: uiSettingsServiceMock.createSetupContract(),
+  };
+
   it('should initialize correctly with visParams and nRow', () => {
     const nRow = 30;
-    const { result } = renderHook(() => usePagination(nRow));
+    const { result } = renderHook(() => usePagination({ rowCount: nRow, services }));
 
     expect(result.current).toEqual({
       pageIndex: 0,
@@ -22,7 +29,7 @@ describe('usePagination', () => {
 
   it('should update pageSize correctly when calling onChangeItemsPerPage', () => {
     const nRow = 30;
-    const { result } = renderHook(() => usePagination(nRow));
+    const { result } = renderHook(() => usePagination({ rowCount: nRow, services }));
 
     act(() => {
       result.current?.onChangeItemsPerPage(20);
@@ -39,7 +46,7 @@ describe('usePagination', () => {
 
   it('should update pageIndex correctly when calling onChangePage', () => {
     const nRow = 30;
-    const { result } = renderHook(() => usePagination(nRow));
+    const { result } = renderHook(() => usePagination({ rowCount: nRow, services }));
 
     act(() => {
       result.current?.onChangePage(1);
@@ -56,7 +63,7 @@ describe('usePagination', () => {
 
   it('should correct pageIndex if it exceeds maximum page index after nRow or perPage change', () => {
     const nRow = 300;
-    const { result } = renderHook(() => usePagination(nRow));
+    const { result } = renderHook(() => usePagination({ rowCount: nRow, services }));
 
     act(() => {
       result.current?.onChangePage(4);

src/plugins/discover/public/application/components/utils/use_pagination.ts

@@ -4,13 +4,25 @@
  */
 
 import { useState, useMemo, useCallback } from 'react';
+import { DiscoverServices } from '../../../build_services';
+import { SAMPLE_SIZE_SETTING } from '../../../../common';
+import { generatePageSizeOptions } from './page_size_options';
+export interface Props {
+  services: DiscoverServices;
+  rowCount: number;
+}
+
+export const usePagination = ({ rowCount, services }: Props) => {
+  const { uiSettings } = services;
 
-export const usePagination = (rowCount: number) => {
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 100 });
   const pageCount = useMemo(() => Math.ceil(rowCount / pagination.pageSize), [
     rowCount,
     pagination,
   ]);
+  const sampleSize = uiSettings.get(SAMPLE_SIZE_SETTING);
+
+  const pageSizeOptions = generatePageSizeOptions(sampleSize);
 
   const onChangeItemsPerPage = useCallback(
     (pageSize: number) => setPagination((p) => ({ ...p, pageSize })),
@@ -31,9 +43,9 @@ export const usePagination = (rowCount: number) => {
             onChangePage,
             pageIndex: pagination.pageIndex > pageCount - 1 ? 0 : pagination.pageIndex,
             pageSize: pagination.pageSize,
-            pageSizeOptions: [25, 50, 100], // TODO: make this configurable
+            pageSizeOptions,
           }
         : undefined,
-    [pagination, onChangeItemsPerPage, onChangePage, pageCount]
+    [pagination, onChangeItemsPerPage, onChangePage, pageCount, pageSizeOptions]
   );
 };