From 1a0a9dfed338d139fb44fa968f3e4bd12d5d3687 Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Tue, 5 Oct 2021 18:28:39 +0530 Subject: [PATCH] Type changes for teams page (#671) * setup profile-setting page and retreat form page * fixed userTeams type releted issue --- .../src/main/resources/ui/src/AppState.ts | 10 +++++- .../ui/src/auth-provider/AuthProvider.tsx | 3 +- .../ui/src/components/app-bar/Appbar.tsx | 4 +-- .../components/my-data-details/ManageTab.tsx | 10 +++--- .../resources/ui/src/interface/types.d.ts | 10 +----- .../resources/ui/src/pages/my-data/index.tsx | 2 +- .../ui/src/pages/teams/AddUsersModal.tsx | 13 ++++--- .../resources/ui/src/pages/teams/index.tsx | 35 ++++++++++++------- .../resources/ui/src/utils/CommonUtils.tsx | 9 +++-- 9 files changed, 59 insertions(+), 37 deletions(-) diff --git a/catalog-rest-service/src/main/resources/ui/src/AppState.ts b/catalog-rest-service/src/main/resources/ui/src/AppState.ts index 7cb4af606b3..d98bc37f51d 100644 --- a/catalog-rest-service/src/main/resources/ui/src/AppState.ts +++ b/catalog-rest-service/src/main/resources/ui/src/AppState.ts @@ -16,7 +16,15 @@ */ import { makeAutoObservable } from 'mobx'; -import { ClientAuth, NewUser, User, UserTeam } from 'Models'; +import { ClientAuth, NewUser } from 'Models'; +import { + EntityReference as UserTeams, + User, +} from './generated/entity/teams/user'; + +type UserTeam = { + displayName?: string; +} & UserTeams; class AppState { users: Array = []; diff --git a/catalog-rest-service/src/main/resources/ui/src/auth-provider/AuthProvider.tsx b/catalog-rest-service/src/main/resources/ui/src/auth-provider/AuthProvider.tsx index 1e609a87299..c45a2e17558 100644 --- a/catalog-rest-service/src/main/resources/ui/src/auth-provider/AuthProvider.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/auth-provider/AuthProvider.tsx @@ -19,7 +19,7 @@ import { AxiosResponse } from 'axios'; import { CookieStorage } from 'cookie-storage'; import { isEmpty, isNil } from 'lodash'; import { observer } from 'mobx-react'; -import { NewUser, User } from 'Models'; +import { NewUser } from 'Models'; import { UserManager, WebStorageStateStore } from 'oidc-client'; import React, { ComponentType, @@ -44,6 +44,7 @@ import { FirstTimeUserModal } from '../components/Modals/FirstTimeUserModal/Firs import { COOKIE_VERSION } from '../components/Modals/WhatsNewModal/whatsNewData'; import { oidcTokenKey, ROUTES } from '../constants/constants'; import { ClientErrors } from '../enums/axios.enum'; +import { User } from '../generated/entity/teams/user'; import { useAuth } from '../hooks/authHooks'; import useToastContext from '../hooks/useToastContext'; import SigninPage from '../pages/login'; diff --git a/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx b/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx index bbdab807652..ca19ec52cbc 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx @@ -131,7 +131,7 @@ const Appbar: React.FC = (): JSX.Element => { return ( - Welcome, {name.split(' ')[0]} + Welcome, {name?.split(' ')[0]} ); }; @@ -286,7 +286,7 @@ const Appbar: React.FC = (): JSX.Element => { ]} icon={ <> - {appState.userDetails.profile?.images.image512 ? ( + {appState?.userDetails?.profile?.images?.image512 ? (
user = ({ ? appState.users[0] : undefined; const teams = getUserTeams().map((team) => ({ - name: team?.displayName || team.name, + name: team?.displayName || team.name || '', value: team.id, group: 'Teams', type: 'team', @@ -71,14 +71,14 @@ const ManageTab: FunctionComponent = ({ if (user?.isAdmin) { const users = appState.users .map((user) => ({ - name: user.displayName, + name: user.displayName || user.name || '', value: user.id, group: 'Users', type: 'user', })) .filter((u) => u.value != user.id); const teams = appState.userTeams.map((team) => ({ - name: team.displayName || team.name, + name: team.displayName || team.name || '', value: team.id, group: 'Teams', type: 'team', @@ -86,7 +86,7 @@ const ManageTab: FunctionComponent = ({ return [ { - name: user.displayName, + name: user.displayName || user.name || '', value: user.id, group: 'Users', type: 'user', @@ -98,7 +98,7 @@ const ManageTab: FunctionComponent = ({ return user ? [ { - name: user.displayName, + name: user.displayName || user.name, value: user.id, group: 'Users', type: 'user', diff --git a/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts b/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts index a65c8923864..c5f9d2ed2ae 100644 --- a/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts +++ b/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts @@ -17,6 +17,7 @@ declare module 'Models' { import { TagLabel } from '../generated/type/tagLabel'; + export type Match = { params: { searchQuery: string; @@ -170,15 +171,6 @@ declare module 'Models' { images: Record; }; - export type UserTeam = { - description: string; - displayName?: string; - href: string; - id: string; - name: string; - type: string; - }; - export type User = { displayName: string; isBot: boolean; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx index 9253fb3b10c..c86d6e7b982 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx @@ -59,7 +59,7 @@ const MyDataPage: React.FC = (): React.ReactElement => { }; const getFilters = (): string => { - if (filter === 'owner') { + if (filter === 'owner' && AppState.userDetails.teams) { const userTeams = !isEmpty(AppState.userDetails) ? AppState.userDetails.teams.map((team) => `${filter}:${team.id}`) : []; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/teams/AddUsersModal.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/teams/AddUsersModal.tsx index 544e6bd66a5..eedd6f135c3 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/teams/AddUsersModal.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/teams/AddUsersModal.tsx @@ -1,8 +1,13 @@ -import { UserTeam } from 'Models'; import React, { useState } from 'react'; import { Button } from '../../components/buttons/Button/Button'; import Searchbar from '../../components/common/searchbar/Searchbar'; +import { EntityReference as UserTeams } from '../../generated/entity/teams/user'; import UserCard from './UserCard'; + +type UserTeam = { + displayName?: string; +} & UserTeams; + type Props = { header: string; list: Array; @@ -32,13 +37,13 @@ const AddUsersModal = ({ header, list, onCancel, onSave }: Props) => { .filter((user) => { return ( user.description?.includes(searchText) || - user.name.includes(searchText) + user?.name?.includes(searchText) ); }) .map((user, index) => { const User = { - description: user.description, - name: user.name, + description: user.description || '', + name: user.name || '', id: user.id, }; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx index 1272c4ff8cf..3b8724b2d04 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx @@ -18,7 +18,6 @@ import { AxiosError, AxiosResponse } from 'axios'; import { compare } from 'fast-json-patch'; import { observer } from 'mobx-react'; -import { Team, User, UserTeam } from 'Models'; import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import AppState from '../../AppState'; @@ -40,12 +39,21 @@ import { ERROR404, TITLE_FOR_NON_ADMIN_ACTION, } from '../../constants/constants'; +import { Team } from '../../generated/entity/teams/team'; +import { + EntityReference as UserTeams, + User, +} from '../../generated/entity/teams/user'; import { getCountBadge } from '../../utils/CommonUtils'; import SVGIcons from '../../utils/SvgUtils'; import AddUsersModal from './AddUsersModal'; import Form from './Form'; import UserCard from './UserCard'; +type UserTeam = { + displayName?: string; +} & UserTeams; + const TeamsPage = () => { const [teams, setTeams] = useState>([]); const [currentTeam, setCurrentTeam] = useState(); @@ -159,7 +167,7 @@ const TeamsPage = () => { setCurrentTab(1); }}> Users - {getCountBadge(currentTeam?.users.length)} + {getCountBadge(currentTeam?.users?.length)}
@@ -176,7 +184,7 @@ const TeamsPage = () => { }; const getUserCards = () => { - if ((currentTeam?.users.length as number) <= 0) { + if ((currentTeam?.users?.length as number) <= 0) { return (

There are not any users added yet.

@@ -200,10 +208,10 @@ const TeamsPage = () => {
- {currentTeam?.users.map((user, index) => { + {currentTeam?.users?.map((user, index) => { const User = { - description: user.description, - name: user.name, + description: user.description || '', + name: user.name || '', id: user.id, }; @@ -222,7 +230,7 @@ const TeamsPage = () => { }; const getDatasetCards = () => { - if ((currentTeam?.owns.length as number) <= 0) { + if ((currentTeam?.owns?.length as number) <= 0) { return (

Your team does not have any dataset

@@ -246,8 +254,11 @@ const TeamsPage = () => { className="tw-grid xl:tw-grid-cols-4 md:tw-grid-cols-2 tw-gap-4" data-testid="dataset-card"> {' '} - {currentTeam?.owns.map((dataset, index) => { - const Dataset = { description: dataset.name, name: dataset.type }; + {currentTeam?.owns?.map((dataset, index) => { + const Dataset = { + description: dataset.name || '', + name: dataset.type, + }; return ( @@ -319,7 +330,7 @@ const TeamsPage = () => { const getUniqueUserList = () => { const uniqueList = userList .filter((user) => { - const teamUser = currentTeam?.users.some( + const teamUser = currentTeam?.users?.some( (teamUser) => user.id === teamUser.id ); @@ -327,7 +338,7 @@ const TeamsPage = () => { }) .map((user) => { return { - description: user.displayName, + description: user.displayName || '', id: user.id, href: user.href, name: user.name, diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx b/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx index 564fda86385..a8fb6c9f620 100644 --- a/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx @@ -1,5 +1,5 @@ import { isEmpty } from 'lodash'; -import { RecentlyViewed, RecentlyViewedData, UserTeam } from 'Models'; +import { RecentlyViewed, RecentlyViewedData } from 'Models'; import React from 'react'; import { reactLocalStorage } from 'reactjs-localstorage'; import AppState from '../AppState'; @@ -7,8 +7,13 @@ import { LOCALSTORAGE_RECENTLY_VIEWED, TITLE_FOR_NON_OWNER_ACTION, } from '../constants/constants'; +import { EntityReference as UserTeams } from '../generated/entity/teams/user'; import { countBackground } from './styleconstant'; +type UserTeam = { + displayName?: string; +} & UserTeams; + export const arraySorterByKey = ( key: string, sortDescending = false @@ -99,7 +104,7 @@ export const getUserTeams = (): Array => { retVal = AppState.userTeams; } - return retVal; + return retVal || []; }; export const getTabClasses = (