yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-09-01 05:13:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ankit keshari 2022-08-25 03:50:52 +05:30 committed by GitHub
parent d7bdfc2b86
commit e8f521ef07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 40 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
datahub-web-react/src/app/browse/BrowseResultsPage.tsx
View File

@ -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}`,

2
datahub-web-react/src/app/domain/DomainsList.tsx
View File

@ -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);
};

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

@ -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>

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

@ -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>

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

@ -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);
};

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

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

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

@ -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 } });

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

@ -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);
};

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

@ -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);
};

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

@ -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);
};

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

@ -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);
};

2
datahub-web-react/src/app/policy/ManagePolicies.tsx
View File

@ -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);
};

2
datahub-web-react/src/app/search/SearchPage.tsx
View File

@ -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 });
};

2
datahub-web-react/src/app/settings/AccessTokens.tsx
View File

@ -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);
};

3
datahub-web-react/src/app/shared/searchUtils.ts Normal file
View File

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