From 00934279c6c1418c970d9e53436a4f9269500d0e Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Sat, 15 Jul 2023 12:06:51 +0530 Subject: [PATCH] fix(ui): user page scroll issue on tabs and pagination (#12424) * fix user page scroll on tabs and pagination too * changes as per comments * fix unit test --- .../components/Users/Users.component.test.tsx | 3 +- .../src/components/Users/Users.component.tsx | 83 ++++++++++--------- .../src/components/Users/Users.interface.ts | 5 +- .../ui/src/components/Users/Users.style.less | 8 +- .../searched-data/SearchedData.interface.ts | 1 - .../components/searched-data/SearchedData.tsx | 7 +- .../src/pages/UserPage/UserPage.component.tsx | 62 ++++++++------ .../src/pages/UserPage/UserPage.interface.ts | 19 +++++ .../ui/src/pages/UserPage/UserPage.test.tsx | 1 + 9 files changed, 108 insertions(+), 81 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.interface.ts diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx index 0d23467e1e3..885f3e1be63 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx @@ -139,8 +139,7 @@ const mockProp = { updateThreadHandler: jest.fn(), setFeedFilter: jest.fn(), threadType: 'Task' as ThreadType.Task, - onFollowingEntityPaginate: jest.fn(), - onOwnedEntityPaginate: jest.fn(), + handlePaginate: jest.fn(), onSwitchChange: jest.fn(), }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx index 5ed8822abf2..96b21c3a216 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx @@ -11,7 +11,17 @@ * limitations under the License. */ -import { Card, Image, Input, Select, Space, Tabs, Typography } from 'antd'; +import { + Card, + Col, + Image, + Input, + Row, + Select, + Space, + Tabs, + Typography, +} from 'antd'; import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg'; import { ReactComponent as IconTeamsGrey } from 'assets/svg/teams-grey.svg'; import { AxiosError } from 'axios'; @@ -80,8 +90,7 @@ const Users = ({ isLoggedinUser, isAuthDisabled, username, - onFollowingEntityPaginate, - onOwnedEntityPaginate, + handlePaginate, }: Props) => { const { tab = UserPageTabs.ACTIVITY } = useParams<{ tab: UserPageTabs }>(); const [displayName, setDisplayName] = useState(userData.displayName); @@ -692,48 +701,42 @@ const Users = ({ } return ( - + + {entityData.data.length ? ( + + ) : ( + + + {tab === UserPageTabs.MY_DATA + ? t('server.you-have-not-action-anything-yet', { + action: t('label.owned-lowercase'), + }) + : t('server.you-have-not-action-anything-yet', { + action: t('label.followed-lowercase'), + })} + + + )} + + + {showSummaryPanel && entityDetails && ( + - ) - } - rightPanelWidth={400}> - {entityData.data.length ? ( - - ) : ( - - - {tab === UserPageTabs.MY_DATA - ? t('server.you-have-not-action-anything-yet', { - action: t('label.owned-lowercase'), - }) - : t('server.you-have-not-action-anything-yet', { - action: t('label.followed-lowercase'), - })} - - + )} - + ); } case UserPageTabs.ACTIVITY: diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.interface.ts index 2b22f23ce3f..d33700940fd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.interface.ts @@ -19,21 +19,18 @@ export interface Props { followingEntities: { data: SearchedDataProps['data']; total: number; - currPage: number; }; ownedEntities: { data: SearchedDataProps['data']; total: number; - currPage: number; }; username: string; isUserEntitiesLoading: boolean; isAdminUser: boolean; isLoggedinUser: boolean; isAuthDisabled: boolean; + handlePaginate: (page: string | number) => void; updateUserDetails: (data: Partial) => Promise; - onFollowingEntityPaginate: (page: string | number) => void; - onOwnedEntityPaginate: (page: string | number) => void; } export enum UserPageTabs { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.style.less b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.style.less index 6f8f62cc9d5..eaff82c8e70 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.style.less @@ -29,8 +29,12 @@ } .user-page-layout { - height: @users-page-tabs-height; - .page-layout-rightpanel { + .user-layout-scroll { + height: @users-page-tabs-height; + overflow-y: scroll; + } + + .user-page-layout-right-panel { padding-right: 0 !important; background-color: @white; border: 1px solid @border-color; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.interface.ts index e75d2d94337..25110349235 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.interface.ts @@ -91,5 +91,4 @@ export interface SearchedDataProps { entityType: string ) => void; filter?: Qs.ParsedQs; - currentPage?: number; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx index 22765c3de6b..e575155fa72 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx @@ -48,7 +48,6 @@ const SearchedData: React.FC = ({ selectedEntityId, handleSummaryPanelDisplay, filter, - currentPage, }) => { const searchResultCards = useMemo(() => { return data.map(({ _source: table, highlight }, index) => { @@ -159,11 +158,7 @@ const SearchedData: React.FC = ({ { + const history = useHistory(); const { t } = useTranslation(); const { username, tab = UserProfileTab.ACTIVITY } = useParams<{ [key: string]: string }>(); @@ -46,17 +54,26 @@ const UserPage = () => { const [isUserEntitiesLoading, setIsUserEntitiesLoading] = useState(false); - const [followingEntities, setFollowingEntities] = useState({ + const [followingEntities, setFollowingEntities] = + useState({ + data: [], + total: 0, + }); + const [ownedEntities, setOwnedEntities] = useState({ data: [], total: 0, - currPage: 1, - }); - const [ownedEntities, setOwnedEntities] = useState({ - data: [], - total: 0, - currPage: 1, }); + const { page = 1 } = useMemo( + () => + Qs.parse( + location.search.startsWith('?') + ? location.search.substr(1) + : location.search + ), + [location.search] + ); + const fetchUserData = () => { setUserData({} as User); getUserByName(username, 'profile,roles,teams') @@ -95,16 +112,14 @@ const UserPage = () => { const fetchEntities = async ( fetchOwnedEntities = false, - handleEntity: Dispatch> + handleEntity: Dispatch> ) => { - const entity = fetchOwnedEntities ? ownedEntities : followingEntities; - if (userData.id) { setIsUserEntitiesLoading(true); try { const response = await searchData( '', - entity.currPage, + Number(page), PAGE_SIZE, getQueryFilters(fetchOwnedEntities), '', @@ -118,14 +133,12 @@ const UserPage = () => { handleEntity({ data: hits, total, - currPage: entity.currPage, }); } else { const total = 0; handleEntity({ data: [], total, - currPage: entity.currPage, }); } } catch (error) { @@ -141,12 +154,10 @@ const UserPage = () => { } }; - const handleFollowingEntityPaginate = (page: string | number) => { - setFollowingEntities((pre) => ({ ...pre, currPage: page as number })); - }; - - const handleOwnedEntityPaginate = (page: string | number) => { - setOwnedEntities((pre) => ({ ...pre, currPage: page as number })); + const handleEntityPaginate = (page: string | number) => { + history.push({ + search: Qs.stringify({ page }), + }); }; const ErrorPlaceholder = () => { @@ -189,6 +200,7 @@ const UserPage = () => { return ( { updateUserDetails={updateUserDetails} userData={userData} username={username} - onFollowingEntityPaginate={handleFollowingEntityPaginate} - onOwnedEntityPaginate={handleOwnedEntityPaginate} /> ); } else { @@ -214,13 +224,13 @@ const UserPage = () => { if (tab === UserProfileTab.FOLLOWING) { fetchEntities(false, setFollowingEntities); } - }, [followingEntities.currPage, tab, userData]); + }, [page, tab, userData]); useEffect(() => { if (tab === UserProfileTab.MY_DATA) { fetchEntities(true, setOwnedEntities); } - }, [ownedEntities.currPage, tab, userData]); + }, [page, tab, userData]); useEffect(() => { setCurrentLoggedInUser(AppState.getCurrentUserDetails()); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.interface.ts b/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.interface.ts new file mode 100644 index 00000000000..d2c0f01b61f --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.interface.ts @@ -0,0 +1,19 @@ +/* + * Copyright 2023 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { SearchEntityHits } from 'utils/APIUtils'; + +export interface UserAssetsDataType { + data: SearchEntityHits; + total: number; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.test.tsx index 7b76feabd42..8601bcc20df 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.test.tsx @@ -104,6 +104,7 @@ jest.mock('components/authentication/auth-provider/AuthProvider', () => { }); jest.mock('react-router-dom', () => ({ + useHistory: jest.fn(), useParams: jest.fn().mockImplementation(() => ({ username: 'xyz' })), useLocation: jest.fn().mockImplementation(() => new URLSearchParams()), }));