binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2025] chore: profile page enhancements (#5209)

Browse source 
* chore: user layout and header updated

* chore: user page sidebar improvement

* fix: your work redirection

* fix: profile section mobile navigation dropdown

* chore: profile layout improvement

* chore: profile header improvement

* fix: profile section header improvement

* fix: app sidebar your work active indicator

* chore: profile sidebar improvement

* chore: user menu code refactor

* chore: header code refactor

* chore: user menu code refactor

* fix: build error
This commit is contained in:
Anmol Singh Bhatia 2024-07-24 17:52:12 +05:30 • committed by GitHub
parent 58f203dd38
commit 4d978c1a8c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 117 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
View file

@ -6,44 +6,53 @@ import { observer } from "mobx-react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { ChevronDown, PanelRight } from "lucide-react";
import { IUserProfileProjectSegregation } from "@plane/types";
import { Breadcrumbs, CustomMenu } from "@plane/ui";
import { BreadcrumbLink } from "@/components/common";
// components
import { ProfileIssuesFilter } from "@/components/profile";
import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
import { EUserWorkspaceRoles } from "@/constants/workspace";
import { cn } from "@/helpers/common.helper";
import { useAppTheme, useUser } from "@/hooks/store";
type TUserProfileHeader = {
userProjectsData: IUserProfileProjectSegregation | undefined;
type?: string | undefined;
showProfileIssuesFilter?: boolean;
};
export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
const { type = undefined } = props;
const { userProjectsData, type = undefined, showProfileIssuesFilter } = props;
// router
const { workspaceSlug, userId } = useParams();
// store hooks
const { toggleProfileSidebar, profileSidebarCollapsed } = useAppTheme();
const {
membership: { currentWorkspaceRole },
data: currentUser,
} = useUser();
// derived values
const AUTHORIZED_ROLES = [20, 15, 10];
const isAuthorized = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.VIEWER;
if (!currentWorkspaceRole) return null;
const isAuthorized = AUTHORIZED_ROLES.includes(currentWorkspaceRole);
const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
const userName = `${userProjectsData?.user_data?.first_name} ${userProjectsData?.user_data?.last_name}`;
const isCurrentUser = currentUser?.id === userId;
const breadcrumbLabel = `${isCurrentUser ? "Your" : userName} Activity`;
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div className="flex w-full justify-between">
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
link={<BreadcrumbLink href="/profile" label="Activity Overview" />}
/>
<Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={breadcrumbLabel} disableTooltip />} />
</Breadcrumbs>
<div className="hidden md:flex md:items-center">{showProfileIssuesFilter && <ProfileIssuesFilter />}</div>
<div className="flex gap-4 md:hidden">
<CustomMenu
maxHeight={"md"}

61
web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
View file

@ -2,19 +2,25 @@
import { observer } from "mobx-react";
import { useParams, usePathname } from "next/navigation";
import useSWR from "swr";
// components
import { AppHeader, ContentWrapper } from "@/components/core";
import { ProfileSidebar } from "@/components/profile";
// constants
import { USER_PROFILE_PROJECT_SEGREGATION } from "@/constants/fetch-keys";
import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
import { EUserWorkspaceRoles } from "@/constants/workspace";
// hooks
import { useUser } from "@/hooks/store";
import useSize from "@/hooks/use-window-size";
// local components
import { UserService } from "@/services/user.service";
import { UserProfileHeader } from "./header";
import { ProfileIssuesMobileHeader } from "./mobile-header";
import { ProfileNavbar } from "./navbar";
const userService = new UserService();
type Props = {
children: React.ReactNode;
};
@ -30,6 +36,16 @@ const UseProfileLayout: React.FC<Props> = observer((props) => {
const {
membership: { currentWorkspaceRole },
} = useUser();
const windowSize = useSize();
const isSmallerScreen = windowSize[0] >= 768;
const { data: userProjectsData } = useSWR(
workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
workspaceSlug && userId
? () => userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
: null
);
// derived values
const isAuthorized = currentWorkspaceRole && AUTHORIZED_ROLES.includes(currentWorkspaceRole);
const isAuthorizedPath =
@ -43,25 +59,36 @@ const UseProfileLayout: React.FC<Props> = observer((props) => {
<>
{/* Passing the type prop from the current route value as we need the header as top most component.
TODO: We are depending on the route path to handle the mobile header type. If the path changes, this logic will break. */}
<AppHeader
header={<UserProfileHeader type={currentTab?.label} />}
mobileHeader={isIssuesTab && <ProfileIssuesMobileHeader />}
/>
<ContentWrapper>
<div className="h-full w-full flex md:overflow-hidden">
<div className="flex w-full flex-col md:h-full md:overflow-hidden">
<ProfileNavbar isAuthorized={!!isAuthorized} showProfileIssuesFilter={isIssuesTab} />
{isAuthorized || !isAuthorizedPath ? (
<div className={`w-full overflow-hidden md:h-full`}>{children}</div>
) : (
<div className="grid h-full w-full place-items-center text-custom-text-200">
You do not have the permission to access this page.
<div className="h-full w-full md:flex md:overflow-hidden">
<div className="h-full w-full md:overflow-hidden">
<AppHeader
header={
<UserProfileHeader
type={currentTab?.label}
userProjectsData={userProjectsData}
showProfileIssuesFilter={isIssuesTab}
/>
}
mobileHeader={isIssuesTab && <ProfileIssuesMobileHeader />}
/>
<ContentWrapper>
<div className="h-full w-full flex flex-row md:flex-col md:overflow-hidden">
<div className="flex w-full flex-col md:h-full md:overflow-hidden">
<ProfileNavbar isAuthorized={!!isAuthorized} />
{isAuthorized || !isAuthorizedPath ? (
<div className={`w-full overflow-hidden h-full`}>{children}</div>
) : (
<div className="grid h-full w-full place-items-center text-custom-text-200">
You do not have the permission to access this page.
</div>
)}
</div>
)}
</div>
<ProfileSidebar />
{!isSmallerScreen && <ProfileSidebar userProjectsData={userProjectsData} />}
</div>
</ContentWrapper>
</div>
</ContentWrapper>
{isSmallerScreen && <ProfileSidebar userProjectsData={userProjectsData} />}
</div>
</>
);
});

11
web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
View file

@ -4,31 +4,29 @@ import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
// components
import { ProfileIssuesFilter } from "@/components/profile";
// constants
import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
type Props = {
isAuthorized: boolean;
showProfileIssuesFilter?: boolean;
};
export const ProfileNavbar: React.FC<Props> = (props) => {
const { isAuthorized, showProfileIssuesFilter } = props;
const { isAuthorized } = props;
const { workspaceSlug, userId } = useParams();
const pathname = usePathname();
const pathname = usePathname();
const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
return (
<div className="sticky -top-0.5 z-10 hidden md:flex items-center justify-between gap-4 border-b border-custom-border-300 bg-custom-background-100 px-4 sm:px-5 md:static">
<div className="sticky -top-0.5 hidden md:flex items-center justify-between gap-4 border-b border-custom-border-300 bg-custom-background-100 px-4 sm:px-5 md:static">
<div className="flex items-center overflow-x-scroll">
{tabsList.map((tab) => (
<Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
<span
className={`flex whitespace-nowrap border-b-2 p-4 text-sm font-medium outline-none ${
pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}/`
pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`
? "border-custom-primary-100 text-custom-primary-100"
: "border-transparent"
}`}
@ -38,7 +36,6 @@ const pathname = usePathname();
</Link>
))}
</div>
{showProfileIssuesFilter && <ProfileIssuesFilter />}
</div>
);
};