From 00bac5c9298b815dd3f7d6b78c88a2f8b8b5cfb5 Mon Sep 17 00:00:00 2001 From: Aniket Katkar <51777795+aniketkatkar97@users.noreply.github.com> Date: Tue, 8 Nov 2022 16:42:00 +0530 Subject: [PATCH] Fix #8481 (UI): Changed how team assets are shown similar to explore page (#8526) * Changed how entity details are shown in 'My Data' and 'Following' tabs on user details page * Changed how team assets are shown similar to explore page * removed isUndefined as isEmpty will cover that * - Renamed 'GlossaryTermAssets' interface to 'AssetsDataType' to use it commonly and made the required changes for where it was used - Code optimisation to reuse repeated code blocks - Localization changes for 'UserPage' * - Code optimisation by using common util functions - Localization changes for 'TeamsPage' and 'TeamDetailsV1' - Fixed spelling mistakes --- .../components/TeamDetails/TeamDetailsV1.tsx | 68 +++++---- .../src/interface/teamsAndUsers.interface.ts | 4 +- .../ui/src/locale/languages/en-us.json | 9 +- .../ui/src/pages/teams/TeamsPage.tsx | 129 +++++++++++++----- 4 files changed, 146 insertions(+), 64 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx index d8e8ea7c7a8..6ed220c5b51 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx @@ -38,6 +38,7 @@ import { reactivateTeam } from '../../axiosAPIs/teamsAPI'; import { getTeamAndUserDetailsPath, getUserPath, + LIST_SIZE, PAGE_SIZE_MEDIUM, } from '../../constants/constants'; import { TEAMS_DOCS } from '../../constants/docs.constants'; @@ -54,13 +55,13 @@ import { User, } from '../../generated/entity/teams/user'; import { EntityReference } from '../../generated/type/entityReference'; +import { Paging } from '../../generated/type/paging'; import { TeamDetailsProp } from '../../interface/teamsAndUsers.interface'; -import jsonData from '../../jsons/en'; import AddAttributeModal from '../../pages/RolesPage/AddAttributeModal/AddAttributeModal'; -import UserCard from '../../pages/teams/UserCard'; import { commonUserDetailColumns, getEntityName, + getTierFromEntityInfo, hasEditAccess, } from '../../utils/CommonUtils'; import { filterEntityAssets } from '../../utils/EntityUtils'; @@ -83,6 +84,7 @@ import EntitySummaryDetails from '../common/EntitySummaryDetails/EntitySummaryDe import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder'; import NextPrevious from '../common/next-previous/NextPrevious'; import Searchbar from '../common/searchbar/Searchbar'; +import TableDataCard from '../common/table-data-card/TableDataCard'; import TabsPane from '../common/TabsPane/TabsPane'; import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component'; import { TitleBreadcrumbProps } from '../common/title-breadcrumb/title-breadcrumb.interface'; @@ -115,6 +117,7 @@ interface PlaceholderProps { } const TeamDetailsV1 = ({ + assets, hasAccess, currentTeam, currentTeamUsers, @@ -139,6 +142,7 @@ const TeamDetailsV1 = ({ handleAddUser, removeUserFromTeam, afterDeleteAction, + onAssetsPaginate, }: TeamDetailsProp) => { const { t } = useTranslation(); const isOrganization = currentTeam.name === TeamType.Organization; @@ -550,7 +554,9 @@ const TeamDetailsV1 = ({ } catch (error) { showErrorToast( error as AxiosError, - jsonData['api-error-messages']['fetch-user-permission-error'] + t('message.entity-fetch-error', { + entity: 'User Permissions', + }) ); } finally { setLoading(false); @@ -801,7 +807,7 @@ const TeamDetailsV1 = ({ * Check for current team datasets and return the dataset cards * @returns - dataset cards */ - const getDatasetCards = () => { + const getAssetDetailCards = () => { const ownData = filterEntityAssets(currentTeam?.owns || []); if (ownData.length <= 0) { @@ -823,26 +829,38 @@ const TeamDetailsV1 = ({ } return ( - <> -
- {' '} - {ownData.map((dataset, index) => { - const Dataset = { - displayName: dataset.displayName || dataset.name || '', - type: dataset.type, - fqn: dataset.fullyQualifiedName || '', - id: dataset.id, - name: dataset.name, - }; - - return ( - - ); - })} -
- +
+ {assets.data.map((entity, index) => ( +
+ +
+ ))} + {assets.total > LIST_SIZE && assets.data.length > 0 && ( + + )} +
); }; @@ -1116,7 +1134,7 @@ const TeamDetailsV1 = ({ {currentTab === 2 && getUserCards()} - {currentTab === 3 && getDatasetCards()} + {currentTab === 3 && getAssetDetailCards()} {currentTab === 4 && (isEmpty(currentTeam.defaultRoles || []) ? ( diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/teamsAndUsers.interface.ts b/openmetadata-ui/src/main/resources/ui/src/interface/teamsAndUsers.interface.ts index 89497fde719..c21b893a13c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/interface/teamsAndUsers.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/interface/teamsAndUsers.interface.ts @@ -12,7 +12,7 @@ */ import { Operation } from 'fast-json-patch'; -import { FormErrorData } from 'Models'; +import { AssetsDataType, FormErrorData } from 'Models'; import { UserType } from '../enums/user.enum'; import { Team } from '../generated/entity/teams/team'; import { @@ -90,6 +90,7 @@ export interface TeamsAndUsersProps { export interface TeamDetailsProp { currentTeam: Team; teams?: Team[]; + assets: AssetsDataType; currentTeamUsers: User[]; teamUserPagin: Paging; currentTeamUserPage: number; @@ -114,6 +115,7 @@ export interface TeamDetailsProp { handleLeaveTeamClick: (id: string, data: Operation[]) => Promise; childTeams: Team[]; showDeletedTeam: boolean; + onAssetsPaginate: (page: string | number) => void; onShowDeletedTeamChange: (checked: boolean) => void; onTeamExpand: ( loading?: boolean, diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json index 4565dcfe591..1376667ea3a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json @@ -198,7 +198,6 @@ "start-date": "Start Date", "view-dag": "View Dag", "search-team": "Search Team", - "end-date": "End Date", "show-deleted": "Show deleted", "add-bot": "Add Bot", "search-for-bots": "Search for bots...", @@ -233,7 +232,13 @@ "no-owned-entities": "You have not owned anything yet.", "entity-fetch-error": "Error while fetching {{entity}}", "feed-post-error": "Error while posting the message!", - "unexpected-error": "An unexpected error occurred." + "unexpected-error": "An unexpected error occurred.", + "entity-creation-error": "Error while creating {{entity}}", + "entity-updation-error": "Error while updating {{entity}}", + "join-team-success": "Team joined successfully!", + "leave-team-success": "Left the team successfully!", + "join-team-error": "Error while joining the team!", + "leave-team-error": "Error while leaving the team!" }, "server": { "unexpected-response": "Unexpected response from server!" diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/TeamsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/TeamsPage.tsx index a12b89c23cd..1f7871de59a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/TeamsPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/TeamsPage.tsx @@ -13,9 +13,10 @@ import { AxiosError } from 'axios'; import { compare, Operation } from 'fast-json-patch'; -import { cloneDeep, isUndefined } from 'lodash'; -import { SearchResponse } from 'Models'; +import { cloneDeep, isEmpty, isUndefined } from 'lodash'; +import { AssetsDataType, FormattedTableData, SearchResponse } from 'Models'; import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { useHistory, useParams } from 'react-router-dom'; import AppState from '../../AppState'; import { useAuthContext } from '../../authentication/auth-provider/AuthProvider'; @@ -38,10 +39,12 @@ import TeamDetailsV1 from '../../components/TeamDetails/TeamDetailsV1'; import Teams from '../../components/TeamDetails/Teams'; import { INITIAL_PAGING_VALUE, + LIST_SIZE, PAGE_SIZE_MEDIUM, pagingObject, } from '../../constants/constants'; import { NO_PERMISSION_TO_VIEW } from '../../constants/HelperTextUtil'; +import { myDataSearchIndex } from '../../constants/Mydata.constants'; import { SearchIndex } from '../../enums/search.enum'; import { CreateTeam, TeamType } from '../../generated/api/teams/createTeam'; import { EntityReference } from '../../generated/entity/data/table'; @@ -49,8 +52,7 @@ import { Team } from '../../generated/entity/teams/team'; import { User } from '../../generated/entity/teams/user'; import { Paging } from '../../generated/type/paging'; import { useAuth } from '../../hooks/authHooks'; -import jsonData from '../../jsons/en'; -import { formatUsersResponse } from '../../utils/APIUtils'; +import { formatDataResponse, formatUsersResponse } from '../../utils/APIUtils'; import { getEntityName } from '../../utils/CommonUtils'; import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils'; import { getSettingPath, getTeamsWithFqnPath } from '../../utils/RouterUtils'; @@ -60,6 +62,7 @@ import AddUsersModalV1 from './AddUsersModalV1'; const TeamsPage = () => { const history = useHistory(); + const { t } = useTranslation(); const { getEntityPermissionByFqn } = usePermissionProvider(); const { isAdminUser } = useAuth(); const { isAuthDisabled } = useAuthContext(); @@ -79,6 +82,11 @@ const TeamsPage = () => { const [isAddingTeam, setIsAddingTeam] = useState(false); const [isAddingUsers, setIsAddingUsers] = useState(false); const [isLoading, setIsLoading] = useState(false); + const [assets, setAssets] = useState({ + data: [], + total: 0, + currPage: 1, + }); const [entityPermissions, setEntityPermissions] = useState(DEFAULT_ENTITY_PERMISSION); @@ -156,10 +164,7 @@ const TeamsPage = () => { setAllTeam(modifiedTeams); } } catch (error) { - showErrorToast( - error as AxiosError, - jsonData['api-error-messages']['unexpected-server-response'] - ); + showErrorToast(error as AxiosError, t('server.unexpected-response')); } loading && setIsDataLoading((isDataLoading) => --isDataLoading); }; @@ -207,13 +212,10 @@ const TeamsPage = () => { getCurrentTeamUsers(data.name); setSelectedTeam(data); } else { - throw jsonData['api-error-messages']['unexpected-server-response']; + throw t('server.unexpected-response'); } } catch (error) { - showErrorToast( - error as AxiosError, - jsonData['api-error-messages']['unexpected-server-response'] - ); + showErrorToast(error as AxiosError, t('server.unexpected-response')); } setIsPageLoading(false); }; @@ -242,7 +244,9 @@ const TeamsPage = () => { } catch (error) { showErrorToast( error as AxiosError, - jsonData['api-error-messages']['create-team-error'] + t('message.entity-creation-error', { + entity: 'Team', + }) ); } finally { setIsLoading(false); @@ -287,13 +291,15 @@ const TeamsPage = () => { } resolve(); } else { - throw jsonData['api-error-messages']['unexpected-server-response']; + throw t('server.unexpected-response'); } }) .catch((error: AxiosError) => { showErrorToast( error, - jsonData['api-error-messages']['update-team-error'] + t('message.entity-updation-error', { + entity: 'Team', + }) ); reject(); }); @@ -322,16 +328,13 @@ const TeamsPage = () => { if (res) { AppState.updateUserDetails(res); fetchTeamByFqn(selectedTeam.name); - showSuccessToast( - jsonData['api-success-messages']['join-team-success'], - 2000 - ); + showSuccessToast(t('message.join-team-success'), 2000); } else { - throw jsonData['api-error-messages']['join-team-error']; + throw t('message.join-team-error'); } }) .catch((err: AxiosError) => { - showErrorToast(err, jsonData['api-error-messages']['join-team-error']); + showErrorToast(err, t('message.join-team-error')); // setIsRightPanelLoading(false); }); }; @@ -345,20 +348,14 @@ const TeamsPage = () => { if (res) { AppState.updateUserDetails(res); fetchTeamByFqn(selectedTeam.name); - showSuccessToast( - jsonData['api-success-messages']['leave-team-success'], - 2000 - ); + showSuccessToast(t('message.leave-team-success'), 2000); resolve(); } else { - throw jsonData['api-error-messages']['leave-team-error']; + throw t('message.leave-team-error'); } }) .catch((err: AxiosError) => { - showErrorToast( - err, - jsonData['api-error-messages']['leave-team-error'] - ); + showErrorToast(err, t('message.leave-team-error')); // setIsRightPanelLoading(false); }); }); @@ -380,13 +377,15 @@ const TeamsPage = () => { if (res) { fetchTeamByFqn(res.name); } else { - throw jsonData['api-error-messages']['unexpected-server-response']; + throw t('server.unexpected-response'); } }) .catch((error: AxiosError) => { showErrorToast( error, - jsonData['api-error-messages']['update-team-error'] + t('message.entity-updation-error', { + entity: 'Team', + }) ); }) .finally(() => { @@ -416,13 +415,15 @@ const TeamsPage = () => { if (res) { fetchTeamByFqn(res.name); } else { - throw jsonData['api-error-messages']['unexpected-server-response']; + throw t('server.unexpected-response'); } }) .catch((error: AxiosError) => { showErrorToast( error, - jsonData['api-error-messages']['update-team-error'] + t('message.entity-updation-error', { + entity: 'Team', + }) ); }) .finally(() => { @@ -454,7 +455,7 @@ const TeamsPage = () => { if (response) { fetchTeamByFqn(response.name); } else { - throw jsonData['api-error-messages']['unexpected-server-response']; + throw t('server.unexpected-response'); } } catch (error) { showErrorToast(error as AxiosError); @@ -474,6 +475,60 @@ const TeamsPage = () => { setShowDeletedTeam(checked); }; + const fetchAssets = () => { + searchData( + `owner.id:${selectedTeam.id}`, + assets.currPage, + LIST_SIZE, + ``, + '', + '', + myDataSearchIndex + ) + .then((res: SearchResponse) => { + const hits = res?.data?.hits?.hits; + if (hits?.length > 0) { + const data = formatDataResponse(hits); + const total = res.data.hits.total.value; + setAssets({ + data, + total, + currPage: assets.currPage, + }); + } else { + const data = [] as FormattedTableData[]; + const total = 0; + setAssets({ + data, + total, + currPage: assets.currPage, + }); + } + }) + .catch((err: AxiosError) => { + showErrorToast( + err, + t('message.entity-fetch-error', { + entity: 'Team Assets', + }) + ); + }); + }; + + const handleAssetsPaginate = (page: string | number) => { + setAssets((pre) => ({ ...pre, currPage: page as number })); + }; + + useEffect(() => { + if (!isEmpty(selectedTeam) && !isUndefined(selectedTeam)) { + fetchAssets(); + } + }, [selectedTeam]); + + useEffect(() => { + fetchAssets(); + }, [assets.currPage]); + useEffect(() => { if ( (entityPermissions.ViewAll || entityPermissions.ViewBasic) && @@ -510,6 +565,7 @@ const TeamsPage = () => { ) : ( { teamUserPaginHandler={userPagingHandler} teamUsersSearchText={userSearchValue} updateTeamHandler={updateTeamHandler} + onAssetsPaginate={handleAssetsPaginate} onDescriptionUpdate={onDescriptionUpdate} onShowDeletedTeamChange={handleShowDeletedTeam} onTeamExpand={fetchAllTeams}