fix(): Worked on the scroll to top of the page after pagination change (#5714)

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

@@ -9,6 +9,7 @@ import { LegacyBrowsePath } from './LegacyBrowsePath';
 import { PageRoutes } from '../../conf/Global';
 import { useEntityRegistry } from '../useEntityRegistry';
 import { Message } from '../shared/Message';
+import { scrollToTop } from '../shared/searchUtils';
 
 type BrowseResultsPageParams = {
     type: string;
@@ -44,6 +45,7 @@ export const BrowseResultsPage = () => {
     }
 
     const onChangePage = (newPage: number) => {
+        scrollToTop();
         history.push({
             pathname: rootPath,
             search: `&page=${newPage}`,

datahub-web-react/src/app/domain/DomainsList.tsx

@@ -12,6 +12,7 @@ import TabToolbar from '../entity/shared/components/styled/TabToolbar';
 import DomainListItem from './DomainListItem';
 import { SearchBar } from '../search/SearchBar';
 import { useEntityRegistry } from '../useEntityRegistry';
+import { scrollToTop } from '../shared/searchUtils';
 
 const DomainsContainer = styled.div``;
 
@@ -74,6 +75,7 @@ export const DomainsList = () => {
     const filteredDomains = domains.filter((domain) => !removedUrns.includes(domain.urn));
 
     const onChangePage = (newPage: number) => {
+        scrollToTop();
         setPage(newPage);
     };
 

datahub-web-react/src/app/entity/dataJob/tabs/RunsTab.tsx

@@ -14,6 +14,7 @@ import { CompactEntityNameList } from '../../../recommendations/renderer/compone
 import { ANTD_GRAY } from '../../shared/constants';
 import { useEntityData } from '../../shared/EntityContext';
 import { ReactComponent as LoadingSvg } from '../../../../images/datahub-logo-color-loading_pendulum.svg';
+import { scrollToTop } from '../../../shared/searchUtils';
 
 const ExternalUrlLink = styled.a`
     font-size: 16px;
@@ -141,6 +142,11 @@ export const RunsTab = () => {
         );
     }
 
+    const onChangePage = (newPage: number) => {
+        scrollToTop();
+        setPage(newPage);
+    };
+
     return (
         <>
             <Table dataSource={tableData} columns={columns} pagination={false} />
@@ -150,7 +156,7 @@ export const RunsTab = () => {
                     pageSize={PAGE_SIZE}
                     total={data?.dataJob?.runs?.total || 0}
                     showLessItems
-                    onChange={(newPage) => setPage(newPage)}
+                    onChange={onChangePage}
                     showSizeChanger={false}
                 />
             </PaginationControlContainer>

datahub-web-react/src/app/entity/dataset/profile/OperationsTab.tsx

@@ -19,6 +19,7 @@ import { CompactEntityNameList } from '../../../recommendations/renderer/compone
 import { ANTD_GRAY } from '../../shared/constants';
 import { useEntityData } from '../../shared/EntityContext';
 import { ReactComponent as LoadingSvg } from '../../../../images/datahub-logo-color-loading_pendulum.svg';
+import { scrollToTop } from '../../../shared/searchUtils';
 
 const ExternalUrlLink = styled.a`
     font-size: 16px;
@@ -150,6 +151,11 @@ export const OperationsTab = () => {
             parentTemplate: run?.parentTemplate?.relationships?.[0]?.entity,
         }));
 
+    const onChangePage = (newPage: number) => {
+        scrollToTop();
+        setPage(newPage);
+    };
+
     return (
         <>
             <ReadWriteButtonGroup>
@@ -181,7 +187,7 @@ export const OperationsTab = () => {
                             pageSize={PAGE_SIZE}
                             total={data?.dataset?.runs?.total || 0}
                             showLessItems
-                            onChange={(newPage) => setPage(newPage)}
+                            onChange={onChangePage}
                             showSizeChanger={false}
                         />
                     </PaginationControlContainer>

datahub-web-react/src/app/entity/group/GroupMembers.tsx

@@ -8,6 +8,7 @@ import { CorpUser, EntityType } from '../../../types.generated';
 import { CustomAvatar } from '../../shared/avatar';
 import { useEntityRegistry } from '../../useEntityRegistry';
 import { AddGroupMembersModal } from './AddGroupMembersModal';
+import { scrollToTop } from '../../shared/searchUtils';
 
 const ADD_MEMBER_STYLE = {
     backGround: '#ffffff',
@@ -96,6 +97,7 @@ export default function GroupMembers({ urn, pageSize, isExternalGroup, onChangeM
     const [removeGroupMembersMutation] = useRemoveGroupMembersMutation();
 
     const onChangeMembersPage = (newPage: number) => {
+        scrollToTop();
         setPage(newPage);
     };
 

datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx

@@ -270,7 +270,7 @@ export const EntityProfile = <T, U>({
                                 headerActionItems={headerActionItems}
                                 subHeader={subHeader}
                             />
-                            <Divider />
+                            <Divider style={{ marginBottom: '0' }} />
                             <EntitySidebar sidebarSections={sideBarSectionsWithDefaults} />
                         </>
                     )}

datahub-web-react/src/app/entity/user/UserGroups.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { useGetUserGroupsLazyQuery } from '../../../graphql/user.generated';
 import { CorpGroup, EntityRelationshipsResult, EntityType } from '../../../types.generated';
+import { scrollToTop } from '../../shared/searchUtils';
 import { useEntityRegistry } from '../../useEntityRegistry';
 
 type Props = {
@@ -81,6 +82,7 @@ export default function UserGroups({ urn, initialRelationships, pageSize }: Prop
     const [getGroups, { data: groupsData }] = useGetUserGroupsLazyQuery();
 
     const onChangeGroupsPage = (newPage: number) => {
+        scrollToTop();
         setPage(newPage);
         const start = (newPage - 1) * pageSize;
         getGroups({ variables: { urn, start, count: pageSize } });

datahub-web-react/src/app/identity/group/GroupList.tsx

@@ -12,6 +12,7 @@ import TabToolbar from '../../entity/shared/components/styled/TabToolbar';
 import CreateGroupModal from './CreateGroupModal';
 import { SearchBar } from '../../search/SearchBar';
 import { useEntityRegistry } from '../../useEntityRegistry';
+import { scrollToTop } from '../../shared/searchUtils';
 
 const GroupContainer = styled.div``;
 
@@ -61,6 +62,7 @@ export const GroupList = () => {
     const filteredGroups = groups.filter((group) => !removedUrns.includes(group.urn));
 
     const onChangePage = (newPage: number) => {
+        scrollToTop();
         setPage(newPage);
     };
 

datahub-web-react/src/app/identity/user/UserList.tsx

@@ -13,6 +13,7 @@ import { SearchBar } from '../../search/SearchBar';
 import { useEntityRegistry } from '../../useEntityRegistry';
 import ViewInviteTokenModal from './ViewInviteTokenModal';
 import { useGetAuthenticatedUser } from '../../useGetAuthenticatedUser';
+import { scrollToTop } from '../../shared/searchUtils';
 
 const UserContainer = styled.div``;
 
@@ -64,6 +65,7 @@ export const UserList = () => {
     const filteredUsers = users.filter((user) => !removedUrns.includes(user.urn));
 
     const onChangePage = (newPage: number) => {
+        scrollToTop();
         setPage(newPage);
     };
 

datahub-web-react/src/app/ingest/secret/SecretsList.tsx

@@ -16,6 +16,7 @@ import { SecretBuilderState } from './types';
 import { StyledTable } from '../../entity/shared/components/styled/StyledTable';
 import { SearchBar } from '../../search/SearchBar';
 import { useEntityRegistry } from '../../useEntityRegistry';
+import { scrollToTop } from '../../shared/searchUtils';
 
 const DeleteButtonContainer = styled.div`
     display: flex;
@@ -84,6 +85,7 @@ export const SecretsList = () => {
     };
 
     const onChangePage = (newPage: number) => {
+        scrollToTop();
         setPage(newPage);
     };
 

datahub-web-react/src/app/ingest/source/IngestionSourceList.tsx

@@ -22,6 +22,7 @@ import { useEntityRegistry } from '../../useEntityRegistry';
 import { ExecutionDetailsModal } from './ExecutionRequestDetailsModal';
 import RecipeViewerModal from './RecipeViewerModal';
 import IngestionSourceTable from './IngestionSourceTable';
+import { scrollToTop } from '../../shared/searchUtils';
 
 const SourceContainer = styled.div``;
 
@@ -223,6 +224,7 @@ export const IngestionSourceList = () => {
     };
 
     const onChangePage = (newPage: number) => {
+        scrollToTop();
         setPage(newPage);
     };
 

datahub-web-react/src/app/policy/ManagePolicies.tsx

@@ -32,6 +32,7 @@ import AvatarsGroup from './AvatarsGroup';
 import { useEntityRegistry } from '../useEntityRegistry';
 import { ANTD_GRAY } from '../entity/shared/constants';
 import { SearchBar } from '../search/SearchBar';
+import { scrollToTop } from '../shared/searchUtils';
 
 const PoliciesContainer = styled.div`
     padding-top: 20px;
@@ -199,6 +200,7 @@ export const ManagePolicies = () => {
     const policies = useMemo(() => policiesData?.listPolicies?.policies || [], [policiesData]);
 
     const onChangePage = (newPage: number) => {
+        scrollToTop();
         setPage(newPage);
     };
 

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

@@ -13,6 +13,7 @@ import { SearchCfg } from '../../conf';
 import { ENTITY_FILTER_NAME } from './utils/constants';
 import { GetSearchResultsParams } from '../entity/shared/components/styled/search/types';
 import { EntityAndType } from '../entity/shared/types';
+import { scrollToTop } from '../shared/searchUtils';
 
 type SearchPageParams = {
     type?: string;
@@ -89,6 +90,7 @@ export const SearchPage = () => {
     };
 
     const onChangePage = (newPage: number) => {
+        scrollToTop();
         navigateToSearchUrl({ type: activeType, query, page: newPage, filters, history });
     };
 

datahub-web-react/src/app/settings/AccessTokens.tsx

@@ -13,6 +13,7 @@ import { useGetAuthenticatedUser } from '../useGetAuthenticatedUser';
 import CreateTokenModal from './CreateTokenModal';
 import { useAppConfigQuery } from '../../graphql/app.generated';
 import { getLocaleTimezone } from '../shared/time/timeUtils';
+import { scrollToTop } from '../shared/searchUtils';
 
 const SourceContainer = styled.div`
     width: 100%;
@@ -200,6 +201,7 @@ export const AccessTokens = () => {
     ];
 
     const onChangePage = (newPage: number) => {
+        scrollToTop();
         setPage(newPage);
     };
 

datahub-web-react/src/app/shared/searchUtils.ts

@@ -0,0 +1,3 @@
+export function scrollToTop() {
+    window.scrollTo({ top: 0, left: 0 });
+}