fix(React): Fix Browse Pagination Bug (#2168)

Co-authored-by: John Joyce <john@acryl.io>

datahub-web-react/src/app/browse/BrowseResults.tsx

@@ -5,11 +5,15 @@ import { BrowseResultGroup, EntityType, Entity } from '../../types.generated';
 import BrowseResultCard from './BrowseResultCard';
 import { useEntityRegistry } from '../useEntityRegistry';
 
+const styles = {
+    browseCard: { marginTop: 20 },
+};
+
 interface Props {
     type: EntityType;
     title: string;
     rootPath: string;
-    pageStart: number;
+    page: number;
     pageSize: number;
     totalResults: number;
     groups: Array<BrowseResultGroup>;
@@ -24,7 +28,7 @@ export const BrowseResults = ({
     type,
     title,
     rootPath,
-    pageStart,
+    page,
     pageSize,
     totalResults,
     entities,
@@ -43,7 +47,7 @@ export const BrowseResults = ({
                         </Col>
                     ))}
                     {entities.map((entity) => (
-                        <Col span={24}>
+                        <Col style={styles.browseCard} span={24}>
                             {entityRegistry.renderBrowse(type, entity)}
                             <Divider />
                         </Col>
@@ -51,9 +55,10 @@ export const BrowseResults = ({
                     <Col span={24}>
                         <Pagination
                             style={{ width: '100%', display: 'flex', justifyContent: 'center', paddingTop: 16 }}
-                            current={pageStart}
+                            current={page}
                             pageSize={pageSize}
-                            total={totalResults / pageSize}
+                            total={totalResults}
+                            showTitle
                             showLessItems
                             onChange={onChangePage}
                         />

datahub-web-react/src/app/browse/BrowseResultsPage.tsx

@@ -26,7 +26,7 @@ export const BrowseResultsPage = () => {
     const params = QueryString.parse(location.search);
     const entityType = entityRegistry.getTypeFromPathName(type);
     const path = rootPath.split('/').slice(3);
-    const page = Number(params.page) || 1;
+    const page: number = params.page && Number(params.page as string) > 0 ? Number(params.page as string) : 1;
 
     const { data, loading, error } = useGetBrowseResultsQuery({
         variables: {
@@ -66,8 +66,8 @@ export const BrowseResultsPage = () => {
                     type={entityType}
                     rootPath={rootPath}
                     title={path.length > 0 ? path[path.length - 1] : entityRegistry.getCollectionName(entityType)}
+                    page={page}
                     pageSize={BrowseCfg.RESULTS_PER_PAGE}
-                    pageStart={page * BrowseCfg.RESULTS_PER_PAGE}
                     groups={data.browse.metadata.groups}
                     entities={data.browse.entities}
                     totalResults={data.browse.total}

datahub-web-react/src/app/search/EntityGroupSearchResults.tsx

@@ -2,7 +2,6 @@ import { ArrowRightOutlined } from '@ant-design/icons';
 import { Button, Card, Divider, List, Space, Typography } from 'antd';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
-import { SearchCfg } from '../../conf';
 import { useGetSearchResultsQuery } from '../../graphql/search.generated';
 import { EntityType } from '../../types.generated';
 import { IconStyleType } from '../entity/Entity';
@@ -23,6 +22,8 @@ interface Props {
     query: string;
 }
 
+const RESULTS_PER_GROUP = 3;
+
 export const EntityGroupSearchResults = ({ type, query }: Props) => {
     const history = useHistory();
     const entityRegistry = useEntityRegistry();
@@ -32,7 +33,7 @@ export const EntityGroupSearchResults = ({ type, query }: Props) => {
                 type,
                 query,
                 start: 0,
-                count: SearchCfg.RESULTS_PER_PAGE,
+                count: RESULTS_PER_GROUP,
                 filters: null,
             },
         },

datahub-web-react/src/app/search/EntitySearchResults.tsx

@@ -135,7 +135,7 @@ export const EntitySearchResults = ({ type, query, page, filters, onChangeFilter
             <Row justify="center" style={styles.paginationRow}>
                 <Pagination
                     current={page}
-                    pageSize={pageSize}
+                    pageSize={SearchCfg.RESULTS_PER_PAGE}
                     total={totalResults}
                     showLessItems
                     onChange={onChangePage}

datahub-web-react/src/conf/Browse.tsx

@@ -1,4 +1,4 @@
 /*
     Number of results shown per browse results page
 */
-export const RESULTS_PER_PAGE = 20;
+export const RESULTS_PER_PAGE = 10;