feat(search) Allow users to update the number of search results per p…

…age (#5212) Co-authored-by: Chris Collins <chriscollins@Chriss-MBP-2-3.lan>
datahub-project · Jun 24, 2022 · 4c9554e · 4c9554e
1 parent 68762a2
commit 4c9554e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git 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}
             />
         </SearchablePage>
     );

diff --git 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<SearchResultsInterface | null | undefined>;
     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 = ({
                                 <PaginationControlContainer>
                                     <Pagination
                                         current={page}
-                                        pageSize={SearchCfg.RESULTS_PER_PAGE}
+                                        pageSize={numResultsPerPage}
                                         total={totalResults}
                                         showLessItems
                                         onChange={onChangePage}
-                                        showSizeChanger={false}
+                                        showSizeChanger={totalResults > SearchCfg.RESULTS_PER_PAGE}
+                                        onShowSizeChange={updateNumResults}
+                                        pageSizeOptions={['10', '20', '50']}
                                     />
                                 </PaginationControlContainer>
                                 {authenticatedUserUrn && (