diff --git a/superset-frontend/src/components/Select/Select.stories.tsx b/superset-frontend/src/components/Select/Select.stories.tsx index bfbf4b3e53..5955176f53 100644 --- a/superset-frontend/src/components/Select/Select.stories.tsx +++ b/superset-frontend/src/components/Select/Select.stories.tsx @@ -340,15 +340,18 @@ export const AsyncSelect = ({ const fetchUserListPage = useCallback( ( search: string, - offset: number, - limit: number, + page: number, + pageSize: number, ): Promise => { const username = search.trim().toLowerCase(); return new Promise(resolve => { let results = getResults(username); const totalCount = results.length; - results = results.splice(offset, limit); - setRequestLog(offset + results.length, totalCount, username); + const start = page * pageSize; + 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); diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx index 4ba71adce9..e24547b0b9 100644 --- a/superset-frontend/src/components/Select/Select.tsx +++ b/superset-frontend/src/components/Select/Select.tsx @@ -66,8 +66,8 @@ export type OptionsTypePage = { export type OptionsPagePromise = ( search: string, - offset: number, - limit: number, + page: number, + pageSize: number, ) => Promise; 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()); const mappedMode = isSingleMode @@ -269,14 +269,14 @@ const Select = ({ }; const handlePaginatedFetch = useMemo( - () => (value: string, offset: number, limit: number) => { - const key = `${value};${offset};${limit}`; + () => (value: string, page: number, pageSize: number) => { + 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 limit = - newOffset + pageSize > totalCount ? totalCount - newOffset : pageSize; - handlePaginatedFetch(searchedValue, newOffset, limit); - setOffset(newOffset); + const newPage = page + 1; + handlePaginatedFetch(searchedValue, newPage, pageSize); + setPage(newPage); } }; @@ -363,9 +361,9 @@ const Select = ({ useEffect(() => { const foundOption = hasOption(searchedValue, selectOptions); if (isAsync && !foundOption) { - const offset = 0; - handlePaginatedFetch(searchedValue, offset, pageSize); - setOffset(offset); + const page = 0; + handlePaginatedFetch(searchedValue, page, pageSize); + setPage(page); } }, [isAsync, searchedValue, selectOptions, pageSize, handlePaginatedFetch]); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DatasetSelect.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DatasetSelect.tsx index b06cd4a70c..c3d589cda1 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DatasetSelect.tsx +++ b/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(); 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, - limit: number, // eslint-disable-line @typescript-eslint/no-unused-vars + page: number, + pageSize: number, ) => { const searchColumn = 'table_name'; const query = rison.encode({ filters: [{ col: searchColumn, opr: 'ct', value: search }], - page: Math.floor(offset / PAGE_SIZE), - page_size: PAGE_SIZE, + page, + page_size: pageSize, order_column: searchColumn, order_direction: 'asc', }); @@ -111,7 +108,6 @@ const DatasetSelect = ({