chore: Changes the pagination API of the Select component (#15802)

superset-frontend/src/components/Select/Select.stories.tsx

@@ -340,15 +340,18 @@ export const AsyncSelect = ({
   const fetchUserListPage = useCallback(
     (
       search: string,
-      offset: number,
+      page: number,
-      limit: number,
+      pageSize: number,
     ): Promise<OptionsTypePage> => {
       const username = search.trim().toLowerCase();
       return new Promise(resolve => {
         let results = getResults(username);
         const totalCount = results.length;
-        results = results.splice(offset, limit);
+        const start = page * pageSize;
-        setRequestLog(offset + results.length, totalCount, username);
+        const deleteCount =
+          start + pageSize < totalCount ? pageSize : totalCount - start;
+        results = results.splice(start, deleteCount);
+        setRequestLog(start + results.length, totalCount, username);
         setTimeout(() => {
           resolve({ data: results, totalCount });
         }, responseTime * 1000);

superset-frontend/src/components/Select/Select.tsx

@@ -66,8 +66,8 @@ export type OptionsTypePage = {
 
 export type OptionsPagePromise = (
   search: string,
-  offset: number,
+  page: number,
-  limit: number,
+  pageSize: number,
 ) => Promise<OptionsTypePage>;
 
 export interface SelectProps extends PickedSelectProps {
@@ -125,7 +125,7 @@ const StyledError = styled.div`
 const MAX_TAG_COUNT = 4;
 const TOKEN_SEPARATORS = [',', '\n', '\t', ';'];
 const DEBOUNCE_TIMEOUT = 500;
-const DEFAULT_PAGE_SIZE = 50;
+const DEFAULT_PAGE_SIZE = 100;
 const EMPTY_OPTIONS: OptionsType = [];
 
 const Error = ({ error }: { error: string }) => (
@@ -162,7 +162,7 @@ const Select = ({
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
-  const [offset, setOffset] = useState(0);
+  const [page, setPage] = useState(0);
   const [totalCount, setTotalCount] = useState(0);
   const fetchedQueries = useRef(new Set<string>());
   const mappedMode = isSingleMode
@@ -269,14 +269,14 @@ const Select = ({
   };
 
   const handlePaginatedFetch = useMemo(
-    () => (value: string, offset: number, limit: number) => {
+    () => (value: string, page: number, pageSize: number) => {
-      const key = `${value};${offset};${limit}`;
+      const key = `${value};${page};${pageSize}`;
       if (fetchedQueries.current.has(key)) {
         return;
       }
       setLoading(true);
       const fetchOptions = options as OptionsPagePromise;
-      fetchOptions(value, offset, limit)
+      fetchOptions(value, page, pageSize)
         .then(({ data, totalCount }: OptionsTypePage) => {
           handleData(data);
           fetchedQueries.current.add(key);
@@ -321,14 +321,12 @@ const Select = ({
     const vScroll = e.currentTarget;
     const thresholdReached =
       vScroll.scrollTop > (vScroll.scrollHeight - vScroll.offsetHeight) * 0.7;
-    const hasMoreData = offset + pageSize < totalCount;
+    const hasMoreData = page * pageSize + pageSize < totalCount;
 
     if (!isLoading && isAsync && hasMoreData && thresholdReached) {
-      const newOffset = offset + pageSize;
+      const newPage = page + 1;
-      const limit =
+      handlePaginatedFetch(searchedValue, newPage, pageSize);
-        newOffset + pageSize > totalCount ? totalCount - newOffset : pageSize;
+      setPage(newPage);
-      handlePaginatedFetch(searchedValue, newOffset, limit);
-      setOffset(newOffset);
     }
   };
 
@@ -363,9 +361,9 @@ const Select = ({
   useEffect(() => {
     const foundOption = hasOption(searchedValue, selectOptions);
     if (isAsync && !foundOption) {
-      const offset = 0;
+      const page = 0;
-      handlePaginatedFetch(searchedValue, offset, pageSize);
+      handlePaginatedFetch(searchedValue, page, pageSize);
-      setOffset(offset);
+      setPage(page);
     }
   }, [isAsync, searchedValue, selectOptions, pageSize, handlePaginatedFetch]);
 

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DatasetSelect.tsx

@@ -27,8 +27,6 @@ import {
 } from 'src/utils/getClientErrorObject';
 import { datasetToSelectOption } from './utils';
 
-const PAGE_SIZE = 50;
-
 const localCache = new Map<string, any>();
 
 const cachedSupersetGet = cacheWrapper(
@@ -61,17 +59,16 @@ const DatasetSelect = ({
     [],
   );
 
-  // TODO Change offset and limit to page and pageSize
   const loadDatasetOptions = async (
     search: string,
-    offset: number,
+    page: number,
-    limit: number, // eslint-disable-line @typescript-eslint/no-unused-vars
+    pageSize: number,
   ) => {
     const searchColumn = 'table_name';
     const query = rison.encode({
       filters: [{ col: searchColumn, opr: 'ct', value: search }],
-      page: Math.floor(offset / PAGE_SIZE),
+      page,
-      page_size: PAGE_SIZE,
+      page_size: pageSize,
       order_column: searchColumn,
       order_direction: 'asc',
     });
@@ -111,7 +108,6 @@ const DatasetSelect = ({
     <Select
       ariaLabel={t('Dataset')}
       value={value?.value}
-      pageSize={PAGE_SIZE}
       options={loadDatasetOptions}
       onChange={onChange}
     />