Type changes for teams page (#671)

* setup profile-setting page and retreat form page

* fixed userTeams type releted issue
This commit is contained in:
Shailesh Parmar 2021-10-05 18:28:39 +05:30 committed by GitHub
parent 12df7c6777
commit 1a0a9dfed3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 59 additions and 37 deletions

View File

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

View File

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

View File

@ -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"

View File

@ -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',

View File

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

View File

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

View File

@ -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,
};

View File

@ -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,

View File

@ -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 = (