diff --git a/datahub-web-react/src/app/search/SearchPage.tsx b/datahub-web-react/src/app/search/SearchPage.tsx index 589b36b7444d6e..15769b3e29b914 100644 --- a/datahub-web-react/src/app/search/SearchPage.tsx +++ b/datahub-web-react/src/app/search/SearchPage.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import * as QueryString from 'query-string'; import { useHistory, useLocation, useParams } from 'react-router'; import { Alert } from 'antd'; @@ -39,13 +39,15 @@ export const SearchPage = () => { .filter((filter) => filter.field === ENTITY_FILTER_NAME) .map((filter) => filter.value.toUpperCase() as EntityType); + const [numResultsPerPage, setNumResultsPerPage] = useState(SearchCfg.RESULTS_PER_PAGE); + const { data, loading, error } = useGetSearchResultsForMultipleQuery({ variables: { input: { types: entityFilters, query, - start: (page - 1) * SearchCfg.RESULTS_PER_PAGE, - count: SearchCfg.RESULTS_PER_PAGE, + start: (page - 1) * numResultsPerPage, + count: numResultsPerPage, filters: filtersWithoutEntities, }, }, @@ -118,6 +120,8 @@ export const SearchPage = () => { loading={loading} onChangeFilters={onChangeFilters} onChangePage={onChangePage} + numResultsPerPage={numResultsPerPage} + setNumResultsPerPage={setNumResultsPerPage} /> ); diff --git a/datahub-web-react/src/app/search/SearchResults.tsx b/datahub-web-react/src/app/search/SearchResults.tsx index a152265c843960..199389ea59f2b6 100644 --- a/datahub-web-react/src/app/search/SearchResults.tsx +++ b/datahub-web-react/src/app/search/SearchResults.tsx @@ -137,6 +137,8 @@ interface Props { }) => Promise; entityFilters: EntityType[]; filtersWithoutEntities: FacetFilterInput[]; + numResultsPerPage: number; + setNumResultsPerPage: (numResults: number) => void; } export const SearchResults = ({ @@ -151,6 +153,8 @@ export const SearchResults = ({ callSearchOnVariables, entityFilters, filtersWithoutEntities, + numResultsPerPage, + setNumResultsPerPage, }: Props) => { const pageStart = searchResponse?.start || 0; const pageSize = searchResponse?.count || 0; @@ -175,6 +179,10 @@ export const SearchResults = ({ onChangeFilters(newFilters); }; + const updateNumResults = (_currentNum: number, newNum: number) => { + setNumResultsPerPage(newNum); + }; + const history = useHistory(); const combinedSiblingSearchResults = combineSiblingsInSearchResults(searchResponse?.searchResults); @@ -257,11 +265,13 @@ export const SearchResults = ({ SearchCfg.RESULTS_PER_PAGE} + onShowSizeChange={updateNumResults} + pageSizeOptions={['10', '20', '50']} /> {authenticatedUserUrn && (