From e8f521ef0783a8af834852c8c1131e3883b70de1 Mon Sep 17 00:00:00 2001
From: Ankit keshari <86347578+Ankit-Keshari-Vituity@users.noreply.github.com>
Date: Thu, 25 Aug 2022 03:50:52 +0530
Subject: [PATCH] fix(): Worked on the scroll to top of the page after
pagination change (#5714)
---
datahub-web-react/src/app/browse/BrowseResultsPage.tsx | 2 ++
datahub-web-react/src/app/domain/DomainsList.tsx | 2 ++
datahub-web-react/src/app/entity/dataJob/tabs/RunsTab.tsx | 8 +++++++-
.../src/app/entity/dataset/profile/OperationsTab.tsx | 8 +++++++-
datahub-web-react/src/app/entity/group/GroupMembers.tsx | 2 ++
.../entity/shared/containers/profile/EntityProfile.tsx | 2 +-
datahub-web-react/src/app/entity/user/UserGroups.tsx | 2 ++
datahub-web-react/src/app/identity/group/GroupList.tsx | 2 ++
datahub-web-react/src/app/identity/user/UserList.tsx | 2 ++
datahub-web-react/src/app/ingest/secret/SecretsList.tsx | 2 ++
.../src/app/ingest/source/IngestionSourceList.tsx | 2 ++
datahub-web-react/src/app/policy/ManagePolicies.tsx | 2 ++
datahub-web-react/src/app/search/SearchPage.tsx | 2 ++
datahub-web-react/src/app/settings/AccessTokens.tsx | 2 ++
datahub-web-react/src/app/shared/searchUtils.ts | 3 +++
15 files changed, 40 insertions(+), 3 deletions(-)
create mode 100644 datahub-web-react/src/app/shared/searchUtils.ts
diff --git a/datahub-web-react/src/app/browse/BrowseResultsPage.tsx b/datahub-web-react/src/app/browse/BrowseResultsPage.tsx
index aab4d3505d..952104d55e 100644
--- a/datahub-web-react/src/app/browse/BrowseResultsPage.tsx
+++ b/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}`,
diff --git a/datahub-web-react/src/app/domain/DomainsList.tsx b/datahub-web-react/src/app/domain/DomainsList.tsx
index e689dc5bc5..e1ea290b5d 100644
--- a/datahub-web-react/src/app/domain/DomainsList.tsx
+++ b/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);
};
diff --git a/datahub-web-react/src/app/entity/dataJob/tabs/RunsTab.tsx b/datahub-web-react/src/app/entity/dataJob/tabs/RunsTab.tsx
index d60524fe65..24478e2eaa 100644
--- a/datahub-web-react/src/app/entity/dataJob/tabs/RunsTab.tsx
+++ b/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 (
<>
@@ -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}
/>
diff --git a/datahub-web-react/src/app/entity/dataset/profile/OperationsTab.tsx b/datahub-web-react/src/app/entity/dataset/profile/OperationsTab.tsx
index 2da34f65a5..1ffcb5716d 100644
--- a/datahub-web-react/src/app/entity/dataset/profile/OperationsTab.tsx
+++ b/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 (
<>
@@ -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}
/>
diff --git a/datahub-web-react/src/app/entity/group/GroupMembers.tsx b/datahub-web-react/src/app/entity/group/GroupMembers.tsx
index cd55e48a52..f88a300170 100644
--- a/datahub-web-react/src/app/entity/group/GroupMembers.tsx
+++ b/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);
};
diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx
index f8c69fc7ae..222e2f6f0b 100644
--- a/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx
+++ b/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx
@@ -270,7 +270,7 @@ export const EntityProfile = ({
headerActionItems={headerActionItems}
subHeader={subHeader}
/>
-
+
)}
diff --git a/datahub-web-react/src/app/entity/user/UserGroups.tsx b/datahub-web-react/src/app/entity/user/UserGroups.tsx
index bfc621ad4f..500ada626b 100644
--- a/datahub-web-react/src/app/entity/user/UserGroups.tsx
+++ b/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 } });
diff --git a/datahub-web-react/src/app/identity/group/GroupList.tsx b/datahub-web-react/src/app/identity/group/GroupList.tsx
index 1c4a7ffb90..912d4c474e 100644
--- a/datahub-web-react/src/app/identity/group/GroupList.tsx
+++ b/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);
};
diff --git a/datahub-web-react/src/app/identity/user/UserList.tsx b/datahub-web-react/src/app/identity/user/UserList.tsx
index 9e7b19cef6..6a110c7f21 100644
--- a/datahub-web-react/src/app/identity/user/UserList.tsx
+++ b/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);
};
diff --git a/datahub-web-react/src/app/ingest/secret/SecretsList.tsx b/datahub-web-react/src/app/ingest/secret/SecretsList.tsx
index 3ad59836f8..70ecf015ea 100644
--- a/datahub-web-react/src/app/ingest/secret/SecretsList.tsx
+++ b/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);
};
diff --git a/datahub-web-react/src/app/ingest/source/IngestionSourceList.tsx b/datahub-web-react/src/app/ingest/source/IngestionSourceList.tsx
index b85e55d649..f3ee8df7c0 100644
--- a/datahub-web-react/src/app/ingest/source/IngestionSourceList.tsx
+++ b/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);
};
diff --git a/datahub-web-react/src/app/policy/ManagePolicies.tsx b/datahub-web-react/src/app/policy/ManagePolicies.tsx
index 26a4eab51b..3e08958763 100644
--- a/datahub-web-react/src/app/policy/ManagePolicies.tsx
+++ b/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);
};
diff --git a/datahub-web-react/src/app/search/SearchPage.tsx b/datahub-web-react/src/app/search/SearchPage.tsx
index ccc3f2240e..6e61e0d3c3 100644
--- a/datahub-web-react/src/app/search/SearchPage.tsx
+++ b/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 });
};
diff --git a/datahub-web-react/src/app/settings/AccessTokens.tsx b/datahub-web-react/src/app/settings/AccessTokens.tsx
index 6e46884f6d..f058355c53 100644
--- a/datahub-web-react/src/app/settings/AccessTokens.tsx
+++ b/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);
};
diff --git a/datahub-web-react/src/app/shared/searchUtils.ts b/datahub-web-react/src/app/shared/searchUtils.ts
new file mode 100644
index 0000000000..7c468e3dbd
--- /dev/null
+++ b/datahub-web-react/src/app/shared/searchUtils.ts
@@ -0,0 +1,3 @@
+export function scrollToTop() {
+ window.scrollTo({ top: 0, left: 0 });
+}