diff --git a/client/src/components/EntityWatermark.tsx b/client/src/components/EntityWatermark.tsx index dd3c190d0f..8aad8595ef 100644 --- a/client/src/components/EntityWatermark.tsx +++ b/client/src/components/EntityWatermark.tsx @@ -18,10 +18,10 @@ import cx from "classnames"; import { CSSProperties } from "react"; -import { Folder, People, Person } from "react-bootstrap-icons"; +import { People, Person } from "react-bootstrap-icons"; interface EntityWatermarkProps { - type: "project" | "user" | "group"; + type: "user" | "group"; } export function EntityWatermark({ type }: EntityWatermarkProps) { const watermarkStyles: CSSProperties = { @@ -37,7 +37,6 @@ export function EntityWatermark({ type }: EntityWatermarkProps) { > {type === "group" && } {type === "user" && } - {type === "project" && } ); } diff --git a/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx b/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx index 6901361593..921f051be1 100644 --- a/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx +++ b/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx @@ -122,9 +122,7 @@ export default function ProjectListDisplay({ )} - {!data.total && emptyListElement && ( -

This group doesnt has projects yet.

- )} + {!data.total && emptyListElement} {data.projects.length > 0 && ( <>
diff --git a/client/src/features/usersV2/show/UserAvatar.tsx b/client/src/features/usersV2/show/UserAvatar.tsx index 3a5996143f..ca2c895d80 100644 --- a/client/src/features/usersV2/show/UserAvatar.tsx +++ b/client/src/features/usersV2/show/UserAvatar.tsx @@ -103,26 +103,3 @@ export function AvatarTypeWrap({ type, children }: AvatarType) {
); } - -interface AvatarType { - type: "User" | "Group"; - children: ReactNode; -} -export function AvatarTypeWrap({ type, children }: AvatarType) { - const styles: CSSProperties = { - width: "75px", - height: "65px", - }; - - return ( -
- {children} -
- -
-
- ); -} diff --git a/client/src/features/usersV2/show/UserShow.tsx b/client/src/features/usersV2/show/UserShow.tsx index 9801e88c2e..58db2b8f58 100644 --- a/client/src/features/usersV2/show/UserShow.tsx +++ b/client/src/features/usersV2/show/UserShow.tsx @@ -19,12 +19,14 @@ import { skipToken } from "@reduxjs/toolkit/query"; import cx from "classnames"; import { useEffect } from "react"; +import { InfoCircle, JournalAlbum } from "react-bootstrap-icons"; import { generatePath, useNavigate, useParams, } from "react-router-dom-v5-compat"; -import { Badge, Col, Row } from "reactstrap"; +import { Badge, Card, CardBody, CardHeader, Col, Row } from "reactstrap"; +import { EntityWatermark } from "../../../components/EntityWatermark.tsx"; import { Loader } from "../../../components/Loader"; import ContainerWrap from "../../../components/container/ContainerWrap"; @@ -34,13 +36,18 @@ import DataConnectorsBox from "../../dataConnectorsV2/components/DataConnectorsB import { useGetNamespacesByNamespaceSlugQuery } from "../../projectsV2/api/projectV2.enhanced-api"; import ProjectV2ListDisplay from "../../projectsV2/list/ProjectV2ListDisplay"; import UserNotFound from "../../projectsV2/notFound/UserNotFound"; -import { EntityPill } from "../../searchV2/components/SearchV2Results"; -import { useGetUserByIdQuery, useGetUserQuery } from "../api/users.api"; -import UserAvatar, { UserAvatarSize } from "./UserAvatar"; +import { + useGetUserByIdQuery, + useGetUserQuery, + UserWithId, +} from "../api/users.api"; +import UserAvatar, { AvatarTypeWrap, UserAvatarSize } from "./UserAvatar"; export default function UserShow() { const { username } = useParams<{ username: string }>(); - + const { data: currentUser } = useGetUserQuery(); + const isCurrentUser = + currentUser?.isLoggedIn && currentUser.username === username; const navigate = useNavigate(); const { @@ -50,6 +57,7 @@ export default function UserShow() { } = useGetNamespacesByNamespaceSlugQuery( username ? { namespaceSlug: username } : skipToken ); + const { data: user, isLoading: isLoadingUser, @@ -60,6 +68,11 @@ export default function UserShow() { : skipToken ); + const name = + user?.first_name && user?.last_name + ? `${user.first_name} ${user.last_name}` + : user?.first_name || user?.last_name; + const isLoading = isLoadingNamespace || isLoadingUser; const error = namespaceError ?? userError; @@ -82,68 +95,76 @@ export default function UserShow() { return ; } - const name = - user.first_name && user.last_name - ? `${user.first_name} ${user.last_name}` - : user.first_name || user.last_name; - - return ( - -
-
-
-
- -

{name ?? "Unknown user"}

-
- -
- - -
-
-

{`@${username}`}

-
+ const information = ( +
+
+

+ + Identifier: +

+
@{username}
+
+ ); -
-

Personal Projects

- {name ?? username} has no visible personal projects.

- } - /> -
-
- - - - - -
+ return ( + + + + + + + + + + + + + Collaborate on projects with anyone, with data, code, + and compute together in one place. +

+ ) : ( +

This user has no visible personal projects.

+ ) + } + /> + + + + +
+ + + + +
+

+ + Info +

+
+
+ {information} +
+ +
+ +
); } @@ -173,3 +194,34 @@ function ItsYouBadge({ username }: ItsYouBadgeProps) { return null; } + +function UserHeader({ + user, + username, + name, +}: { + user: UserWithId; + username: string; + name: string; +}) { + return ( +
+
+ + + +
+

{name}

+
+ +
+
+
+
+ ); +}