mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-11-01 02:56:10 +00:00
Type changes for teams page (#671)
* setup profile-setting page and retreat form page * fixed userTeams type releted issue
This commit is contained in:
parent
12df7c6777
commit
1a0a9dfed3
@ -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> = [];
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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}`)
|
||||
: [];
|
||||
|
||||
@ -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,
|
||||
name: user.name,
|
||||
description: user.description || '',
|
||||
name: user.name || '',
|
||||
id: user.id,
|
||||
};
|
||||
|
||||
|
||||
@ -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,
|
||||
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 (
|
||||
<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) => {
|
||||
const Dataset = { description: dataset.name, name: dataset.type };
|
||||
{currentTeam?.owns?.map((dataset, index) => {
|
||||
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,
|
||||
|
||||
@ -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 = (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user