Type changes for teams page (#671)

* setup profile-setting page and retreat form page

* fixed userTeams type releted issue

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<User> = [];

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';

catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx

@@ -131,7 +131,7 @@ const Appbar: React.FC = (): JSX.Element => {
 
     return (
       <span data-testid="greeting-text">
-        Welcome, <span className="tw-font-medium">{name.split(' ')[0]}</span>
+        Welcome, <span className="tw-font-medium">{name?.split(' ')[0]}</span>
       </span>
     );
   };
@@ -286,7 +286,7 @@ const Appbar: React.FC = (): JSX.Element => {
                 ]}
                 icon={
                   <>
-                    {appState.userDetails.profile?.images.image512 ? (
+                    {appState?.userDetails?.profile?.images?.image512 ? (
                       <div className="profile-image tw-mr-1">
                         <img
                           alt="user"

catalog-rest-service/src/main/resources/ui/src/components/my-data-details/ManageTab.tsx

@@ -62,7 +62,7 @@ const ManageTab: FunctionComponent<Props> = ({
       ? 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<Props> = ({
     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<Props> = ({
 
       return [
         {
-          name: user.displayName,
+          name: user.displayName || user.name || '',
           value: user.id,
           group: 'Users',
           type: 'user',
@@ -98,7 +98,7 @@ const ManageTab: FunctionComponent<Props> = ({
       return user
         ? [
             {
-              name: user.displayName,
+              name: user.displayName || user.name,
               value: user.id,
               group: 'Users',
               type: 'user',

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<string, string>;
   };
 
-  export type UserTeam = {
-    description: string;
-    displayName?: string;
-    href: string;
-    id: string;
-    name: string;
-    type: string;
-  };
-
   export type User = {
     displayName: string;
     isBot: boolean;

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}`)
         : [];

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<UserTeam>;
@@ -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,
+          description: user.description || '',
-          name: user.name,
+          name: user.name || '',
           id: user.id,
         };
 

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<Array<Team>>([]);
   const [currentTeam, setCurrentTeam] = useState<Team>();
@@ -159,7 +167,7 @@ const TeamsPage = () => {
               setCurrentTab(1);
             }}>
             Users
-            {getCountBadge(currentTeam?.users.length)}
+            {getCountBadge(currentTeam?.users?.length)}
           </button>
           <button
             className={`tw-pb-2 tw-px-4 tw-gh-tabs ${getActiveTabClass(2)}`}
@@ -168,7 +176,7 @@ const TeamsPage = () => {
               setCurrentTab(2);
             }}>
             Assets
-            {getCountBadge(currentTeam?.owns.length)}
+            {getCountBadge(currentTeam?.owns?.length)}
           </button>
         </nav>
       </div>
@@ -176,7 +184,7 @@ const TeamsPage = () => {
   };
 
   const getUserCards = () => {
-    if ((currentTeam?.users.length as number) <= 0) {
+    if ((currentTeam?.users?.length as number) <= 0) {
       return (
         <div className="tw-flex tw-flex-col tw-items-center tw-place-content-center tw-mt-40 tw-gap-1">
           <p>There are not any users added yet.</p>
@@ -200,10 +208,10 @@ const TeamsPage = () => {
         <div
           className="tw-grid xl:tw-grid-cols-4 md:tw-grid-cols-2 tw-gap-4"
           data-testid="user-card-container">
-          {currentTeam?.users.map((user, index) => {
+          {currentTeam?.users?.map((user, index) => {
             const User = {
-              description: user.description,
+              description: user.description || '',
-              name: user.name,
+              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 (
         <div className="tw-flex tw-flex-col tw-items-center tw-place-content-center tw-mt-40 tw-gap-1">
           <p>Your team does not have any dataset</p>
@@ -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) => {
+          {currentTeam?.owns?.map((dataset, index) => {
-            const Dataset = { description: dataset.name, name: dataset.type };
+            const Dataset = {
+              description: dataset.name || '',
+              name: dataset.type,
+            };
 
             return (
               <UserCard isDataset isIconVisible item={Dataset} key={index} />
@@ -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,

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<UserTeam> => {
     retVal = AppState.userTeams;
   }
 
-  return retVal;
+  return retVal || [];
 };
 
 export const getTabClasses = (