github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: layout refactor (#2532)

Browse Source 
* chore: layout refactor

* fix: profile auth issue

* chore: project setting layout refactor

* chore: workspace layout refactor

* chore: profile layout refactor

* chore: layout import refactor
This commit is contained in:
Anmol Singh Bhatia 2023-10-25 15:48:57 +05:30 committed by GitHub
parent d72d3da6de
commit cea39c758e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
39 changed files with 1496 additions and 2030 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/components/headers/index.ts
View File

@ -18,3 +18,4 @@ export * from "./project-draft-issues";
export * from "./project-archived-issue-details"; export * from "./project-archived-issue-details";
export * from "./project-archived-issues"; export * from "./project-archived-issues";
export * from "./project-issue-details"; export * from "./project-issue-details";
export * from "./user-profile";

25
web/components/headers/user-profile.tsx Normal file
View File

@ -0,0 +1,25 @@
import { FC } from "react";
import { useRouter } from "next/router";
// ui
import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
// hooks
import { observer } from "mobx-react-lite";
export const UserProfileHeader: FC = observer(() => {
const router = useRouter();
return (
<div
className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
>
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem title="User Profile" unshrinkTitle />
</Breadcrumbs>
</div>
</div>
</div>
);
});

9
web/components/profile/navbar.tsx
View File

@ -5,11 +5,9 @@ import Link from "next/link";
// components // components
import { ProfileIssuesFilter } from "components/profile"; import { ProfileIssuesFilter } from "components/profile";
// types
import { UserAuth } from "types";
type Props = { type Props = {
memberRole: UserAuth; isAuthorized: boolean;
}; };
const viewerTabs = [ const viewerTabs = [
@ -38,12 +36,11 @@ const adminTabs = [
}, },
]; ];
export const ProfileNavbar: React.FC<Props> = ({ memberRole }) => { export const ProfileNavbar: React.FC<Props> = ({ isAuthorized }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, userId } = router.query; const { workspaceSlug, userId } = router.query;
const tabsList = const tabsList = isAuthorized ? [...viewerTabs, ...adminTabs] : viewerTabs;
memberRole.isOwner || memberRole.isMember || memberRole.isViewer ? [...viewerTabs, ...adminTabs] : viewerTabs;
return ( return (
<div className="sticky -top-0.5 z-[1] md:static px-4 sm:px-5 flex items-center justify-between gap-4 bg-custom-background-100 border-b border-custom-border-300"> <div className="sticky -top-0.5 z-[1] md:static px-4 sm:px-5 flex items-center justify-between gap-4 bg-custom-background-100 border-b border-custom-border-300">

75
web/layouts/app-layout-legacy/app-header.tsx
View File

@ -1,75 +0,0 @@
// next imports
import { useRouter } from "next/router";
import Link from "next/link";
// icons
import { Menu } from "lucide-react";
// ui components
import { Tooltip } from "@plane/ui";
// hooks
import useProjectDetails from "hooks/use-project-details";
type Props = {
breadcrumbs?: JSX.Element;
left?: JSX.Element;
right?: JSX.Element;
setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
noHeader: boolean;
};
const { NEXT_PUBLIC_DEPLOY_URL } = process.env;
let plane_deploy_url = NEXT_PUBLIC_DEPLOY_URL;
if (typeof window !== "undefined" && !plane_deploy_url) {
plane_deploy_url = window.location.protocol + "//" + window.location.host + "/spaces";
}
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, noHeader }) => {
const { projectDetails } = useProjectDetails();
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
return (
<div
className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 px-5 py-4 ${
noHeader ? "md:hidden" : ""
}`}
>
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div className="block md:hidden">
<button
type="button"
className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
onClick={() => setToggleSidebar((prevData) => !prevData)}
>
<Menu className="h-5 w-5" />
</button>
</div>
<div>{breadcrumbs}</div>
{projectDetails && projectDetails?.is_deployed && (
<Link href={`${plane_deploy_url}/${workspaceSlug}/${projectId}`}>
<a target="_blank" rel="noreferrer">
<Tooltip tooltipContent="This project is public, and live on web." position="bottom-left">
<div className="transition-all flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 p-1 rounded overflow-hidden relative flex items-center gap-1 cursor-pointer group">
<div className="w-[14px] h-[14px] flex justify-center items-center">
<span className="material-symbols-rounded text-[14px]">radio_button_checked</span>
</div>
<div className="text-xs font-medium">Public</div>
<div className="w-[14px] h-[14px] hidden group-hover:flex justify-center items-center">
<span className="material-symbols-rounded text-[14px]">open_in_new</span>
</div>
</div>
</Tooltip>
</a>
</Link>
)}
<div className="flex-shrink-0">{left}</div>
</div>
<div className="flex-shrink-0">{right}</div>
</div>
);
};
export default Header;

43
web/layouts/app-layout-legacy/app-sidebar.tsx
View File

@ -1,43 +0,0 @@
import dynamic from "next/dynamic";
// components
import { WorkspaceHelpSection, WorkspaceSidebarDropdown, WorkspaceSidebarMenu } from "components/workspace";
const WorkspaceSidebarQuickAction = dynamic<{}>(
() => import("components/workspace/sidebar-quick-action").then((mod) => mod.WorkspaceSidebarQuickAction),
{
ssr: false,
}
);
import { ProjectSidebarList } from "components/project";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite";
export interface SidebarProps {
toggleSidebar: boolean;
setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
}
const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSidebar }) => {
const { theme: themeStore } = useMobxStore();
return (
<div
id="app-sidebar"
className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
themeStore?.sidebarCollapsed ? "" : "md:w-[280px]"
} ${toggleSidebar ? "left-0" : "-left-full md:left-0"}`}
>
<div className="flex h-full w-full flex-1 flex-col">
<WorkspaceSidebarDropdown />
<WorkspaceSidebarQuickAction />
<WorkspaceSidebarMenu />
<ProjectSidebarList />
<WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
</div>
</div>
);
});
export default Sidebar;

1
web/layouts/app-layout-legacy/layout.tsx
View File

@ -1 +0,0 @@
export const AppLayoutLegacy = () => <></>;

3
web/layouts/auth-layout-legacy/index.ts
View File

@ -1,3 +0,0 @@
export * from "./project-authorization-wrapper";
export * from "./workspace-authorization-wrapper";
export * from "./user-authorization-wrapper";

122
web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
View File

@ -1,122 +0,0 @@
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
// contexts
import { useProjectMyMembership, ProjectMemberProvider } from "contexts/project-member.context";
// layouts
import AppHeader from "layouts/app-layout-legacy/app-header";
import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
// components
import { NotAuthorizedView, JoinProject } from "components/auth-screens";
import { CommandPalette } from "components/command-palette";
// ui
import { Button, LayersIcon, Spinner } from "@plane/ui";
import { EmptyState } from "components/common";
// images
import emptyProject from "public/empty-state/project.svg";
type Props = {
children: React.ReactNode;
noHeader?: boolean;
bg?: "primary" | "secondary";
breadcrumbs?: JSX.Element;
left?: JSX.Element;
right?: JSX.Element;
};
export const ProjectAuthorizationWrapper: React.FC<Props> = (props) => (
<ProjectMemberProvider>
<ProjectAuthorizationWrapped {...props} />
</ProjectMemberProvider>
);
const ProjectAuthorizationWrapped: React.FC<Props> = ({
children,
noHeader = false,
bg = "primary",
breadcrumbs,
left,
right,
}) => {
const [toggleSidebar, setToggleSidebar] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { loading, error, memberRole: memberType } = useProjectMyMembership();
const settingsLayout = router.pathname.includes("/settings");
return (
<>
<CommandPalette />
<div className="relative flex h-screen w-full overflow-hidden">
<AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
{loading ? (
<div className="grid h-full w-full place-items-center p-4 bg-custom-background-100">
<div className="flex flex-col items-center gap-3 text-center">
<h3 className="text-xl">Loading your project...</h3>
<Spinner />
</div>
</div>
) : error?.status === 401 || error?.status === 403 ? (
<JoinProject />
) : error?.status === 404 ? (
<div className="container grid h-screen place-items-center bg-custom-background-100">
<EmptyState
title="No such project exists"
description="Try creating a new project"
image={emptyProject}
primaryButton={{
text: "Create Project",
onClick: () => {
const e = new KeyboardEvent("keydown", {
key: "p",
});
document.dispatchEvent(e);
},
}}
/>
</div>
) : settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
<NotAuthorizedView
actionButton={
<Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
<a>
<Button variant="primary" prependIcon={<LayersIcon color="white" />}>
Go to issues
</Button>
</a>
</Link>
}
type="project"
/>
) : (
<main
className={`relative flex h-full w-full flex-col overflow-hidden ${
bg === "primary"
? "bg-custom-background-100"
: bg === "secondary"
? "bg-custom-background-90"
: "bg-custom-background-80"
}`}
>
<AppHeader
breadcrumbs={breadcrumbs}
left={left}
right={right}
setToggleSidebar={setToggleSidebar}
noHeader={noHeader}
/>
<div className="h-full w-full overflow-hidden">
<div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
</div>
</main>
)}
</div>
</>
);
};

42
web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx
View File

@ -1,42 +0,0 @@
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { UserService } from "services/user.service";
// ui
import { Spinner } from "@plane/ui";
// fetch-keys
import { CURRENT_USER } from "constants/fetch-keys";
type Props = {
children: React.ReactNode;
};
// services
const userService = new UserService();
export const UserAuthorizationLayout: React.FC<Props> = ({ children }) => {
const router = useRouter();
const { data: currentUser, error } = useSWR(CURRENT_USER, () => userService.currentUser());
if (!currentUser && !error) {
return (
<div className="h-screen grid place-items-center p-4">
<div className="flex flex-col items-center gap-3 text-center">
<Spinner />
</div>
</div>
);
}
if (error) {
const redirectTo = router.asPath;
router.push(`/?next=${redirectTo}`);
return null;
}
return <>{children}</>;
};

123
web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
View File

@ -1,123 +0,0 @@
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { WorkspaceService } from "services/workspace.service";
// contexts
import { WorkspaceMemberProvider } from "contexts/workspace-member.context";
// layouts
import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
import AppHeader from "layouts/app-layout-legacy/app-header";
import { UserAuthorizationLayout } from "./user-authorization-wrapper";
// components
import { Button, LayersIcon, Spinner } from "@plane/ui";
import { NotAuthorizedView, NotAWorkspaceMember } from "components/auth-screens";
import { CommandPalette } from "components/command-palette";
// fetch-keys
import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
type Props = {
children: React.ReactNode;
noHeader?: boolean;
bg?: "primary" | "secondary";
breadcrumbs?: JSX.Element;
left?: JSX.Element;
right?: JSX.Element;
};
const workspaceService = new WorkspaceService();
export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
children,
noHeader = false,
bg = "primary",
breadcrumbs,
left,
right,
}) => {
const [toggleSidebar, setToggleSidebar] = useState(false);
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: workspaceMemberMe, error } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null,
workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug.toString()) : null
);
if (!workspaceMemberMe && !error)
return (
<div className="grid h-screen place-items-center p-4 bg-custom-background-100">
<div className="flex flex-col items-center gap-3 text-center">
<h3 className="text-xl">Loading your workspace...</h3>
<Spinner />
</div>
</div>
);
if (error?.status === 401 || error?.status === 403) return <NotAWorkspaceMember />;
// FIXME: show 404 for workspace not workspace member
if (error?.status === 404) {
return (
<div className="container flex h-screen items-center justify-center bg-custom-background-100">
<p className="text-2xl font-semibold">No such workspace exists. Create one?</p>
</div>
);
}
const settingsLayout = router.pathname.includes("/settings");
const memberType = {
isOwner: workspaceMemberMe?.role === 20,
isMember: workspaceMemberMe?.role === 15,
isViewer: workspaceMemberMe?.role === 10,
isGuest: workspaceMemberMe?.role === 5,
};
return (
<UserAuthorizationLayout>
<WorkspaceMemberProvider>
<CommandPalette />
<div className="relative flex h-screen w-full overflow-hidden">
<AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
{settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
<NotAuthorizedView
actionButton={
<Link href={`/${workspaceSlug}`}>
<a>
<Button className="flex items-center gap-1">
<LayersIcon height={16} width={16} color="white" /> Go to workspace
</Button>
</a>
</Link>
}
type="workspace"
/>
) : (
<main
className={`relative flex h-full w-full flex-col overflow-hidden ${
bg === "primary"
? "bg-custom-background-100"
: bg === "secondary"
? "bg-custom-background-90"
: "bg-custom-background-80"
}`}
>
<AppHeader
breadcrumbs={breadcrumbs}
left={left}
right={right}
setToggleSidebar={setToggleSidebar}
noHeader={noHeader}
/>
<div className="h-full w-full overflow-hidden">
<div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
</div>
</main>
)}
</div>
</WorkspaceMemberProvider>
</UserAuthorizationLayout>
);
};

49
web/layouts/profile-layout.tsx
View File

@ -1,49 +0,0 @@
import { useRouter } from "next/router";
// hooks
import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
// components
import { ProfileNavbar, ProfileSidebar } from "components/profile";
// ui
import { Breadcrumbs, BreadcrumbItem } from "@plane/ui";
type Props = {
children: React.ReactNode;
className?: string;
};
export const ProfileAuthWrapper = (props: Props) => {
const router = useRouter();
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem title="User Profile" />
</Breadcrumbs>
}
>
<ProfileLayout {...props} />
</WorkspaceAuthorizationLayout>
);
};
const ProfileLayout: React.FC<Props> = ({ children, className }) => {
const { memberRole } = useWorkspaceMyMembership();
return (
<div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
<ProfileSidebar />
<div className="md:h-full w-full flex flex-col md:overflow-hidden">
<ProfileNavbar memberRole={memberRole} />
{memberRole.isOwner || memberRole.isMember || memberRole.isViewer ? (
<div className={`md:h-full w-full overflow-hidden ${className}`}>{children}</div>
) : (
<div className="h-full w-full grid place-items-center text-custom-text-200">
You do not have the permission to access this page.
</div>
)}
</div>
</div>
);
};

1
web/layouts/profile-layout/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./layout";

44
web/layouts/profile-layout/layout.tsx Normal file
View File

@ -0,0 +1,44 @@
import useSWR from "swr";
import { useRouter } from "next/router";
// services
import { WorkspaceService } from "services/workspace.service";
// components
import { ProfileNavbar, ProfileSidebar } from "components/profile";
// constants
import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
type Props = {
children: React.ReactNode;
className?: string;
};
// services
const workspaceService = new WorkspaceService();
export const ProfileAuthWrapper: React.FC<Props> = ({ children, className }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: memberDetails } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug.toString()) : null,
workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug.toString()) : null
);
const isAuthorized = memberDetails?.role === 20 || memberDetails?.role === 15 || memberDetails?.role === 10;
return (
<div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
<ProfileSidebar />
<div className="md:h-full w-full flex flex-col md:overflow-hidden">
<ProfileNavbar isAuthorized={isAuthorized} />
{isAuthorized ? (
<div className={`md:h-full w-full overflow-hidden ${className}`}>{children}</div>
) : (
<div className="h-full w-full grid place-items-center text-custom-text-200">
You do not have the permission to access this page.
</div>
)}
</div>
</div>
);
};

2
web/layouts/setting-layout/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./project-setting-layout";
export * from "./workspace-setting-layout";

34
web/layouts/setting-layout/project-setting-layout/layout.tsx
View File

@ -1,40 +1,20 @@
import { FC, ReactNode } from "react"; import { FC, ReactNode } from "react";
// layouts
import { UserAuthWrapper, ProjectAuthWrapper, WorkspaceAuthWrapper } from "layouts/auth-layout";
// components // components
import { AppSidebar } from "layouts/app-layout";
import { ProjectSettingsSidebar } from "./sidebar"; import { ProjectSettingsSidebar } from "./sidebar";
export interface IProjectSettingLayout { export interface IProjectSettingLayout {
children: ReactNode; children: ReactNode;
header: ReactNode;
} }
export const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => { export const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
const { children, header } = props; const { children } = props;
return ( return (
<> <div className="flex gap-2 h-full w-full overflow-x-hidden overflow-y-scroll">
<UserAuthWrapper> <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<WorkspaceAuthWrapper> <ProjectSettingsSidebar />
<ProjectAuthWrapper> </div>
<div className="relative flex h-screen w-full overflow-hidden"> {children}
<AppSidebar /> </div>
<main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
{header}
<div className="h-full w-full overflow-hidden">
<div className="flex gap-2 relative h-full w-full overflow-x-hidden overflow-y-scroll">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<ProjectSettingsSidebar />
</div>
{children}
</div>
</div>
</main>
</div>
</ProjectAuthWrapper>
</WorkspaceAuthWrapper>
</UserAuthWrapper>
</>
); );
}; };

32
web/layouts/setting-layout/workspace-setting-layout/layout.tsx
View File

@ -1,38 +1,20 @@
import { FC, ReactNode } from "react"; import { FC, ReactNode } from "react";
// layouts
import { UserAuthWrapper, WorkspaceAuthWrapper } from "layouts/auth-layout";
// components // components
import { AppSidebar } from "layouts/app-layout";
import { WorkspaceSettingsSidebar } from "./sidebar"; import { WorkspaceSettingsSidebar } from "./sidebar";
export interface IWorkspaceSettingLayout { export interface IWorkspaceSettingLayout {
children: ReactNode; children: ReactNode;
header: ReactNode;
} }
export const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = (props) => { export const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = (props) => {
const { children, header } = props; const { children } = props;
return ( return (
<> <div className="flex gap-2 h-full w-full overflow-x-hidden overflow-y-scroll">
<UserAuthWrapper> <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<WorkspaceAuthWrapper> <WorkspaceSettingsSidebar />
<div className="relative flex h-screen w-full overflow-hidden"> </div>
<AppSidebar /> {children}
<main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100"> </div>
{header}
<div className="h-full w-full overflow-hidden">
<div className="flex gap-2 relative h-full w-full overflow-x-hidden overflow-y-scroll">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<WorkspaceSettingsSidebar />
</div>
{children}
</div>
</div>
</main>
</div>
</WorkspaceAuthWrapper>
</UserAuthWrapper>
</>
); );
}; };

123
web/pages/[workspaceSlug]/me/my-issues.tsx
View File

@ -1,123 +0,0 @@
import React, { useEffect } from "react";
import { useRouter } from "next/router";
// icons
import { Plus } from "lucide-react";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
// hooks
import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
// components
import { MyIssuesView, MyIssuesViewOptions } from "components/issues";
// ui
import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
// types
import type { NextPage } from "next";
import useUser from "hooks/use-user";
const MyIssuesPage: NextPage = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { user } = useUser();
const { filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString());
const tabsList = [
{
key: "assigned",
label: "Assigned",
selected: (filters?.assignees ?? []).length > 0,
onClick: () => {
setFilters({
assignees: [user?.id ?? ""],
created_by: null,
subscriber: null,
});
},
},
{
key: "created",
label: "Created",
selected: (filters?.created_by ?? []).length > 0,
onClick: () => {
setFilters({
assignees: null,
created_by: [user?.id ?? ""],
subscriber: null,
});
},
},
{
key: "subscribed",
label: "Subscribed",
selected: (filters?.subscriber ?? []).length > 0,
onClick: () => {
setFilters({
assignees: null,
created_by: null,
subscriber: [user?.id ?? ""],
});
},
},
];
useEffect(() => {
if (!filters || !user) return;
if (!filters.assignees && !filters.created_by && !filters.subscriber) {
setFilters({
assignees: [user.id],
});
return;
}
}, [filters, setFilters, user]);
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem title="My Issues" />
</Breadcrumbs>
}
right={
<div className="flex items-center gap-2">
<MyIssuesViewOptions />
<Button
variant="primary"
prependIcon={<Plus />}
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
Add Issue
</Button>
</div>
}
>
<div className="h-full w-full flex flex-col overflow-hidden">
<div className="px-4 sm:px-5 border-b border-custom-border-300">
<div className="flex items-center overflow-x-scroll">
{tabsList.map((tab) => (
<button
key={tab.key}
type="button"
onClick={tab.onClick}
className={`border-b-2 p-4 text-sm font-medium outline-none whitespace-nowrap ${
tab.selected ? "border-custom-primary-100 text-custom-primary-100" : "border-transparent"
}`}
>
{tab.label}
</button>
))}
</div>
</div>
<MyIssuesView />
</div>
</WorkspaceAuthorizationLayout>
);
};
export default MyIssuesPage;

289
web/pages/[workspaceSlug]/me/profile/activity.tsx
View File

@ -4,7 +4,8 @@ import Link from "next/link";
// services // services
import { UserService } from "services/user.service"; import { UserService } from "services/user.service";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { WorkspaceSettingLayout } from "layouts/setting-layout";
import { AppLayout } from "layouts/app-layout";
// components // components
import { ActivityIcon, ActivityMessage } from "components/core"; import { ActivityIcon, ActivityMessage } from "components/core";
import { RichReadOnlyEditor } from "@plane/rich-text-editor"; import { RichReadOnlyEditor } from "@plane/rich-text-editor";
@ -30,160 +31,164 @@ const ProfileActivity = () => {
); );
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="My Profile Activity" />}> <AppLayout header={<WorkspaceSettingHeader title="My Profile Activity" />}>
{userActivity ? ( <WorkspaceSettingLayout>
<section className="pr-9 py-8 w-full overflow-y-auto"> {userActivity ? (
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <section className="pr-9 py-8 w-full overflow-y-auto">
<h3 className="text-xl font-medium">Activity</h3> <div className="flex items-center py-3.5 border-b border-custom-border-200">
</div> <h3 className="text-xl font-medium">Activity</h3>
<div className={`flex flex-col gap-2 py-4 w-full`}> </div>
<ul role="list" className="-mb-4"> <div className={`flex flex-col gap-2 py-4 w-full`}>
{userActivity.results.map((activityItem: any) => { <ul role="list" className="-mb-4">
if (activityItem.field === "comment") { {userActivity.results.map((activityItem: any) => {
return ( if (activityItem.field === "comment") {
<div key={activityItem.id} className="mt-2"> return (
<div className="relative flex items-start space-x-3"> <div key={activityItem.id} className="mt-2">
<div className="relative px-1"> <div className="relative flex items-start space-x-3">
{activityItem.field ? ( <div className="relative px-1">
activityItem.new_value === "restore" && ( {activityItem.field ? (
<History className="h-3.5 w-3.5 text-custom-text-200" /> activityItem.new_value === "restore" && (
) <History className="h-3.5 w-3.5 text-custom-text-200" />
) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? ( )
<img ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
src={activityItem.actor_detail.avatar} <img
alt={activityItem.actor_detail.display_name} src={activityItem.actor_detail.avatar}
height={30} alt={activityItem.actor_detail.display_name}
width={30} height={30}
className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white" width={30}
/> className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
) : ( />
<div ) : (
className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`} <div
> className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
{activityItem.actor_detail.display_name?.charAt(0)} >
</div> {activityItem.actor_detail.display_name?.charAt(0)}
)} </div>
)}
<span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white"> <span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
<MessageSquare className="h-6 w-6 !text-2xl text-custom-text-200" aria-hidden="true" /> <MessageSquare className="h-6 w-6 !text-2xl text-custom-text-200" aria-hidden="true" />
</span> </span>
</div>
<div className="min-w-0 flex-1">
<div>
<div className="text-xs">
{activityItem.actor_detail.is_bot
? activityItem.actor_detail.first_name + " Bot"
: activityItem.actor_detail.display_name}
</div>
<p className="mt-0.5 text-xs text-custom-text-200">
Commented {timeAgo(activityItem.created_at)}
</p>
</div> </div>
<div className="issue-comments-section p-0"> <div className="min-w-0 flex-1">
<RichReadOnlyEditor <div>
value={activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value} <div className="text-xs">
customClassName="text-xs border border-custom-border-200 bg-custom-background-100" {activityItem.actor_detail.is_bot
noBorder ? activityItem.actor_detail.first_name + " Bot"
borderOnFocus={false} : activityItem.actor_detail.display_name}
/> </div>
<p className="mt-0.5 text-xs text-custom-text-200">
Commented {timeAgo(activityItem.created_at)}
</p>
</div>
<div className="issue-comments-section p-0">
<RichReadOnlyEditor
value={activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value}
customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
noBorder
borderOnFocus={false}
/>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> );
); }
}
const message = const message =
activityItem.verb === "created" && activityItem.verb === "created" &&
activityItem.field !== "cycles" && activityItem.field !== "cycles" &&
activityItem.field !== "modules" && activityItem.field !== "modules" &&
activityItem.field !== "attachment" && activityItem.field !== "attachment" &&
activityItem.field !== "link" && activityItem.field !== "link" &&
activityItem.field !== "estimate" ? ( activityItem.field !== "estimate" ? (
<span className="text-custom-text-200"> <span className="text-custom-text-200">
created{" "} created{" "}
<Link href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}> <Link href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}>
<a className="inline-flex items-center hover:underline"> <a className="inline-flex items-center hover:underline">
this issue. <ExternalLinkIcon className="ml-1 h-3.5 w-3.5" /> this issue. <ExternalLinkIcon className="ml-1 h-3.5 w-3.5" />
</a> </a>
</Link> </Link>
</span> </span>
) : activityItem.field ? ( ) : activityItem.field ? (
<ActivityMessage activity={activityItem} showIssue /> <ActivityMessage activity={activityItem} showIssue />
) : ( ) : (
"created the issue." "created the issue."
); );
if ("field" in activityItem && activityItem.field !== "updated_by") { if ("field" in activityItem && activityItem.field !== "updated_by") {
return ( return (
<li key={activityItem.id}> <li key={activityItem.id}>
<div className="relative pb-1"> <div className="relative pb-1">
<div className="relative flex items-center space-x-2"> <div className="relative flex items-center space-x-2">
<> <>
<div> <div>
<div className="relative px-1.5"> <div className="relative px-1.5">
<div className="mt-1.5"> <div className="mt-1.5">
<div className="flex h-6 w-6 items-center justify-center"> <div className="flex h-6 w-6 items-center justify-center">
{activityItem.field ? ( {activityItem.field ? (
activityItem.new_value === "restore" ? ( activityItem.new_value === "restore" ? (
<History className="h-5 w-5 text-custom-text-200" /> <History className="h-5 w-5 text-custom-text-200" />
) : (
<ActivityIcon activity={activityItem} />
)
) : activityItem.actor_detail.avatar &&
activityItem.actor_detail.avatar !== "" ? (
<img
src={activityItem.actor_detail.avatar}
alt={activityItem.actor_detail.display_name}
height={24}
width={24}
className="rounded-full h-full w-full object-cover"
/>
) : ( ) : (
<ActivityIcon activity={activityItem} /> <div
) className={`grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? ( >
<img {activityItem.actor_detail.display_name?.charAt(0)}
src={activityItem.actor_detail.avatar} </div>
alt={activityItem.actor_detail.display_name} )}
height={24} </div>
width={24}
className="rounded-full h-full w-full object-cover"
/>
) : (
<div
className={`grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
>
{activityItem.actor_detail.display_name?.charAt(0)}
</div>
)}
</div> </div>
</div> </div>
</div> </div>
</div> <div className="min-w-0 flex-1 py-4 border-b border-custom-border-200">
<div className="min-w-0 flex-1 py-4 border-b border-custom-border-200"> <div className="text-sm text-custom-text-200 break-words">
<div className="text-sm text-custom-text-200 break-words"> {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
{activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? ( <span className="text-gray font-medium">Plane</span>
<span className="text-gray font-medium">Plane</span> ) : activityItem.actor_detail.is_bot ? (
) : activityItem.actor_detail.is_bot ? ( <span className="text-gray font-medium">
<span className="text-gray font-medium"> {activityItem.actor_detail.first_name} Bot
{activityItem.actor_detail.first_name} Bot </span>
</span> ) : (
) : ( <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
<Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}> <a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a>
<a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a> </Link>
</Link> )}{" "}
)}{" "} {message}{" "}
{message} <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span> <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
</div>
</div> </div>
</div> </>
</> </div>
</div> </div>
</div> </li>
</li> );
); }
} })}
})} </ul>
</ul> </div>
</div> </section>
</section> ) : (
) : ( <Loader className="space-y-5">
<Loader className="space-y-5"> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> </Loader>
</Loader> )}
)} </WorkspaceSettingLayout>
</WorkspaceSettingLayout> </AppLayout>
); );
}; };

451
web/pages/[workspaceSlug]/me/profile/index.tsx
View File

@ -9,7 +9,8 @@ import { UserService } from "services/user.service";
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import { ImagePickerPopover, ImageUploadModal } from "components/core"; import { ImagePickerPopover, ImageUploadModal } from "components/core";
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
@ -143,252 +144,254 @@ const Profile: NextPage = () => {
})); }));
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="My Profile" />}> <AppLayout header={<WorkspaceSettingHeader title="My Profile" />}>
<ImageUploadModal <WorkspaceSettingLayout>
isOpen={isImageUploadModalOpen} <ImageUploadModal
onClose={() => setIsImageUploadModalOpen(false)} isOpen={isImageUploadModalOpen}
isRemoving={isRemoving} onClose={() => setIsImageUploadModalOpen(false)}
handleDelete={() => handleDelete(myProfile?.avatar, true)} isRemoving={isRemoving}
onSuccess={(url) => { handleDelete={() => handleDelete(myProfile?.avatar, true)}
setValue("avatar", url); onSuccess={(url) => {
handleSubmit(onSubmit)(); setValue("avatar", url);
setIsImageUploadModalOpen(false); handleSubmit(onSubmit)();
}} setIsImageUploadModalOpen(false);
value={watch("avatar") !== "" ? watch("avatar") : undefined} }}
userImage value={watch("avatar") !== "" ? watch("avatar") : undefined}
/> userImage
{myProfile ? ( />
<form onSubmit={handleSubmit(onSubmit)}> {myProfile ? (
<div className={`flex flex-col gap-8 pr-9 py-9 w-full overflow-y-auto`}> <form onSubmit={handleSubmit(onSubmit)} className="h-full w-full">
<div className="relative h-44 w-full mt-6"> <div className={`flex flex-col gap-8 pr-9 py-9 w-full overflow-y-auto`}>
<img <div className="relative h-44 w-full mt-6">
src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"} <img
className="h-44 w-full rounded-lg object-cover" src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
alt={myProfile?.first_name ?? "Cover image"} className="h-44 w-full rounded-lg object-cover"
/> alt={myProfile?.first_name ?? "Cover image"}
<div className="flex items-end justify-between absolute left-8 -bottom-6"> />
<div className="flex gap-3"> <div className="flex items-end justify-between absolute left-8 -bottom-6">
<div className="flex items-center justify-center bg-custom-background-90 h-16 w-16 rounded-lg"> <div className="flex gap-3">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}> <div className="flex items-center justify-center bg-custom-background-90 h-16 w-16 rounded-lg">
{!watch("avatar") || watch("avatar") === "" ? ( <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
<div className="h-16 w-16 rounded-md bg-custom-background-80 p-2"> {!watch("avatar") || watch("avatar") === "" ? (
<User2 className="h-full w-full text-custom-text-200" /> <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
</div> <User2 className="h-full w-full text-custom-text-200" />
) : ( </div>
<div className="relative h-16 w-16 overflow-hidden"> ) : (
<img <div className="relative h-16 w-16 overflow-hidden">
src={watch("avatar")} <img
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg" src={watch("avatar")}
onClick={() => setIsImageUploadModalOpen(true)} className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
alt={myProfile.display_name} onClick={() => setIsImageUploadModalOpen(true)}
/> alt={myProfile.display_name}
</div> />
)} </div>
</button> )}
</button>
</div>
</div> </div>
</div> </div>
</div>
<div className="flex absolute right-3 bottom-3"> <div className="flex absolute right-3 bottom-3">
<Controller <Controller
control={control} control={control}
name="cover_image" name="cover_image"
render={() => ( render={() => (
<ImagePickerPopover <ImagePickerPopover
label={"Change cover"} label={"Change cover"}
onChange={(imageUrl) => { onChange={(imageUrl) => {
setValue("cover_image", imageUrl); setValue("cover_image", imageUrl);
}} }}
control={control} control={control}
value={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"} value={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
/> />
)} )}
/> />
</div>
</div>
<div className="flex item-center justify-between px-8 mt-4">
<div className="flex flex-col">
<div className="flex item-center text-lg font-semibold text-custom-text-100">
<span>{`${watch("first_name")} ${watch("last_name")}`}</span>
</div> </div>
<span className="text-sm tracking-tight">{watch("email")}</span>
</div> </div>
<Link href={`/${workspaceSlug}/profile/${myProfile.id}`}> <div className="flex item-center justify-between px-8 mt-4">
<a className="flex item-center cursor-pointer gap-2 h-4 leading-4 text-sm text-custom-primary-100"> <div className="flex flex-col">
<span className="h-4 w-4"> <div className="flex item-center text-lg font-semibold text-custom-text-100">
<UserCircle2 className="h-4 w-4" /> <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
</span> </div>
View Profile <span className="text-sm tracking-tight">{watch("email")}</span>
</a> </div>
</Link>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 px-8"> <Link href={`/${workspaceSlug}/profile/${myProfile.id}`}>
<div className="flex flex-col gap-1"> <a className="flex item-center cursor-pointer gap-2 h-4 leading-4 text-sm text-custom-primary-100">
<h4 className="text-sm">First Name</h4> <span className="h-4 w-4">
<Controller <UserCircle2 className="h-4 w-4" />
control={control} </span>
name="first_name" View Profile
render={({ field: { value, onChange, ref } }) => ( </a>
<Input </Link>
id="first_name"
name="first_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.first_name)}
placeholder="Enter your first name"
className="rounded-md font-medium w-full"
/>
)}
/>
</div> </div>
<div className="flex flex-col gap-1"> <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 px-8">
<h4 className="text-sm">Last Name</h4> <div className="flex flex-col gap-1">
<h4 className="text-sm">First Name</h4>
<Controller
control={control}
name="first_name"
render={({ field: { value, onChange, ref } }) => (
<Input
id="first_name"
name="first_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.first_name)}
placeholder="Enter your first name"
className="rounded-md font-medium w-full"
/>
)}
/>
</div>
<Controller <div className="flex flex-col gap-1">
control={control} <h4 className="text-sm">Last Name</h4>
name="last_name"
render={({ field: { value, onChange, ref } }) => (
<Input
id="last_name"
name="last_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.last_name)}
placeholder="Enter your last name"
className="rounded-md font-medium w-full"
/>
)}
/>
</div>
<div className="flex flex-col gap-1"> <Controller
<h4 className="text-sm">Email</h4> control={control}
<Controller name="last_name"
control={control} render={({ field: { value, onChange, ref } }) => (
name="email" <Input
render={({ field: { value, onChange, ref } }) => ( id="last_name"
<Input name="last_name"
id="email" type="text"
name="email" value={value}
type="email" onChange={onChange}
value={value} ref={ref}
onChange={onChange} hasError={Boolean(errors.last_name)}
ref={ref} placeholder="Enter your last name"
hasError={Boolean(errors.email)} className="rounded-md font-medium w-full"
placeholder="Enter your last name" />
className="rounded-md font-medium w-full" )}
disabled />
/> </div>
)}
/>
</div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Role</h4> <h4 className="text-sm">Email</h4>
<Controller <Controller
name="role" control={control}
control={control} name="email"
rules={{ required: "This field is required" }} render={({ field: { value, onChange, ref } }) => (
render={({ field: { value, onChange } }) => ( <Input
<CustomSelect id="email"
value={value} name="email"
onChange={onChange} type="email"
label={value ? value.toString() : "Select your role"} value={value}
buttonClassName={errors.role ? "border-red-500 bg-red-500/10" : ""} onChange={onChange}
width="w-full" ref={ref}
input hasError={Boolean(errors.email)}
> placeholder="Enter your last name"
{USER_ROLES.map((item) => ( className="rounded-md font-medium w-full"
<CustomSelect.Option key={item.value} value={item.value}> disabled
{item.label} />
</CustomSelect.Option> )}
))} />
</CustomSelect> </div>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a role</span>}
</div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Display name </h4> <h4 className="text-sm">Role</h4>
<Controller <Controller
control={control} name="role"
name="display_name" control={control}
rules={{ rules={{ required: "This field is required" }}
required: "Display name is required.", render={({ field: { value, onChange } }) => (
validate: (value) => { <CustomSelect
if (value.trim().length < 1) return "Display name can't be empty."; value={value}
onChange={onChange}
label={value ? value.toString() : "Select your role"}
buttonClassName={errors.role ? "border-red-500 bg-red-500/10" : ""}
width="w-full"
input
>
{USER_ROLES.map((item) => (
<CustomSelect.Option key={item.value} value={item.value}>
{item.label}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a role</span>}
</div>
if (value.split(" ").length > 1) return "Display name can't have two consecutive spaces."; <div className="flex flex-col gap-1">
<h4 className="text-sm">Display name </h4>
<Controller
control={control}
name="display_name"
rules={{
required: "Display name is required.",
validate: (value) => {
if (value.trim().length < 1) return "Display name can't be empty.";
if (value.replace(/\s/g, "").length < 1) if (value.split(" ").length > 1) return "Display name can't have two consecutive spaces.";
return "Display name must be at least 1 characters long.";
if (value.replace(/\s/g, "").length > 20) if (value.replace(/\s/g, "").length < 1)
return "Display name must be less than 20 characters long."; return "Display name must be at least 1 characters long.";
return true; if (value.replace(/\s/g, "").length > 20)
}, return "Display name must be less than 20 characters long.";
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="display_name"
name="display_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.display_name)}
placeholder="Enter your display name"
className="w-full"
/>
)}
/>
</div>
<div className="flex flex-col gap-1"> return true;
<h4 className="text-sm">Timezone </h4> },
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="display_name"
name="display_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.display_name)}
placeholder="Enter your display name"
className="w-full"
/>
)}
/>
</div>
<Controller <div className="flex flex-col gap-1">
name="user_timezone" <h4 className="text-sm">Timezone </h4>
control={control}
rules={{ required: "This field is required" }}
render={({ field: { value, onChange } }) => (
<CustomSearchSelect
value={value}
label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
options={timeZoneOptions}
onChange={onChange}
optionsClassName="w-full"
input
/>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a role</span>}
</div>
<div className="flex items-center justify-between py-2"> <Controller
<Button variant="primary" type="submit" loading={isSubmitting}> name="user_timezone"
{isSubmitting ? "Updating Profile..." : "Update Profile"} control={control}
</Button> rules={{ required: "This field is required" }}
render={({ field: { value, onChange } }) => (
<CustomSearchSelect
value={value}
label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
options={timeZoneOptions}
onChange={onChange}
optionsClassName="w-full"
input
/>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a role</span>}
</div>
<div className="flex items-center justify-between py-2">
<Button variant="primary" type="submit" loading={isSubmitting}>
{isSubmitting ? "Updating Profile..." : "Update Profile"}
</Button>
</div>
</div> </div>
</div> </div>
</form>
) : (
<div className="grid h-full w-full place-items-center px-4 sm:px-0">
<Spinner />
</div> </div>
</form> )}
) : ( </WorkspaceSettingLayout>
<div className="grid h-full w-full place-items-center px-4 sm:px-0"> </AppLayout>
<Spinner />
</div>
)}
</WorkspaceSettingLayout>
); );
}; };

45
web/pages/[workspaceSlug]/me/profile/preferences.tsx
View File

@ -5,7 +5,8 @@ import { useTheme } from "next-themes";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import { CustomThemeSelector, ThemeSwitch } from "components/core"; import { CustomThemeSelector, ThemeSwitch } from "components/core";
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
@ -44,29 +45,31 @@ const ProfilePreferencesPage = observer(() => {
}; };
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="My Profile Preferences" />}> <AppLayout header={<WorkspaceSettingHeader title="My Profile Preferences" />}>
{userStore.currentUser ? ( <WorkspaceSettingLayout>
<div className="pr-9 py-8 w-full overflow-y-auto"> {userStore.currentUser ? (
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <div className="pr-9 py-8 w-full overflow-y-auto">
<h3 className="text-xl font-medium">Preferences</h3> <div className="flex items-center py-3.5 border-b border-custom-border-200">
</div> <h3 className="text-xl font-medium">Preferences</h3>
<div className="grid grid-cols-12 gap-4 sm:gap-16 py-6">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold text-custom-text-100">Theme</h4>
<p className="text-sm text-custom-text-200">Select or customize your interface color scheme.</p>
</div> </div>
<div className="col-span-12 sm:col-span-6"> <div className="grid grid-cols-12 gap-4 sm:gap-16 py-6">
<ThemeSwitch value={currentTheme} onChange={handleThemeChange} /> <div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold text-custom-text-100">Theme</h4>
<p className="text-sm text-custom-text-200">Select or customize your interface color scheme.</p>
</div>
<div className="col-span-12 sm:col-span-6">
<ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
</div>
</div> </div>
{userTheme?.theme === "custom" && <CustomThemeSelector />}
</div> </div>
{userTheme?.theme === "custom" && <CustomThemeSelector />} ) : (
</div> <div className="grid h-full w-full place-items-center px-4 sm:px-0">
) : ( <Spinner />
<div className="grid h-full w-full place-items-center px-4 sm:px-0"> </div>
<Spinner /> )}
</div> </WorkspaceSettingLayout>
)} </AppLayout>
</WorkspaceSettingLayout>
); );
}); });

8
web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
View File

@ -3,11 +3,11 @@ import type { NextPage } from "next";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// contexts
import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
// layouts // layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/profile-layout"; import { ProfileAuthWrapper } from "layouts/profile-layout";
// components // components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/profile-issues-root"; import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/profile-issues-root";
import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/profile-issues-root"; import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/profile-issues-root";
// hooks // hooks
@ -45,7 +45,7 @@ const ProfileAssignedIssues: NextPage = observer(() => {
const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout; const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
return ( return (
<ProfileIssuesContextProvider> <AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper> <ProfileAuthWrapper>
{profileIssuesStore.loader ? ( {profileIssuesStore.loader ? (
<div>Loading...</div> <div>Loading...</div>
@ -59,7 +59,7 @@ const ProfileAssignedIssues: NextPage = observer(() => {
</div> </div>
)} )}
</ProfileAuthWrapper> </ProfileAuthWrapper>
</ProfileIssuesContextProvider> </AppLayout>
); );
}); });

8
web/pages/[workspaceSlug]/profile/[userId]/created.tsx
View File

@ -1,20 +1,20 @@
import React from "react"; import React from "react";
// contexts
import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
// layouts // layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/profile-layout"; import { ProfileAuthWrapper } from "layouts/profile-layout";
// components // components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesView } from "components/profile"; import { ProfileIssuesView } from "components/profile";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
const ProfileCreatedIssues: NextPage = () => ( const ProfileCreatedIssues: NextPage = () => (
<ProfileIssuesContextProvider> <AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper> <ProfileAuthWrapper>
<ProfileIssuesView /> <ProfileIssuesView />
</ProfileAuthWrapper> </ProfileAuthWrapper>
</ProfileIssuesContextProvider> </AppLayout>
); );
export default ProfileCreatedIssues; export default ProfileCreatedIssues;

24
web/pages/[workspaceSlug]/profile/[userId]/index.tsx
View File

@ -7,8 +7,10 @@ import useSWR from "swr";
// services // services
import { UserService } from "services/user.service"; import { UserService } from "services/user.service";
// layouts // layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/profile-layout"; import { ProfileAuthWrapper } from "layouts/profile-layout";
// components // components
import { UserProfileHeader } from "components/headers";
import { import {
ProfileActivity, ProfileActivity,
ProfilePriorityDistribution, ProfilePriorityDistribution,
@ -43,17 +45,19 @@ const ProfileOverview: NextPage = () => {
}); });
return ( return (
<ProfileAuthWrapper> <AppLayout header={<UserProfileHeader />}>
<div className="h-full w-full px-5 md:px-9 py-5 space-y-7 overflow-y-auto"> <ProfileAuthWrapper>
<ProfileStats userProfile={userProfile} /> <div className="h-full w-full px-5 md:px-9 py-5 space-y-7 overflow-y-auto">
<ProfileWorkload stateDistribution={stateDistribution} /> <ProfileStats userProfile={userProfile} />
<div className="grid grid-cols-1 xl:grid-cols-2 items-stretch gap-5"> <ProfileWorkload stateDistribution={stateDistribution} />
<ProfilePriorityDistribution userProfile={userProfile} /> <div className="grid grid-cols-1 xl:grid-cols-2 items-stretch gap-5">
<ProfileStateDistribution stateDistribution={stateDistribution} userProfile={userProfile} /> <ProfilePriorityDistribution userProfile={userProfile} />
<ProfileStateDistribution stateDistribution={stateDistribution} userProfile={userProfile} />
</div>
<ProfileActivity />
</div> </div>
<ProfileActivity /> </ProfileAuthWrapper>
</div> </AppLayout>
</ProfileAuthWrapper>
); );
}; };

8
web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
View File

@ -1,20 +1,20 @@
import React from "react"; import React from "react";
// contexts
import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
// layouts // layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/profile-layout"; import { ProfileAuthWrapper } from "layouts/profile-layout";
// components // components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesView } from "components/profile"; import { ProfileIssuesView } from "components/profile";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
const ProfileSubscribedIssues: NextPage = () => ( const ProfileSubscribedIssues: NextPage = () => (
<ProfileIssuesContextProvider> <AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper> <ProfileAuthWrapper>
<ProfileIssuesView /> <ProfileIssuesView />
</ProfileAuthWrapper> </ProfileAuthWrapper>
</ProfileIssuesContextProvider> </AppLayout>
); );
export default ProfileSubscribedIssues; export default ProfileSubscribedIssues;

23
web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
View File

@ -7,7 +7,8 @@ import useSWR, { mutate } from "swr";
// services // services
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// hooks // hooks
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
import useProjectDetails from "hooks/use-project-details"; import useProjectDetails from "hooks/use-project-details";
@ -70,15 +71,17 @@ const AutomationsSettings: NextPage = () => {
const isAdmin = memberDetails?.role === 20; const isAdmin = memberDetails?.role === 20;
return ( return (
<ProjectSettingLayout header={<ProjectSettingHeader title="Automations Settings" />}> <AppLayout header={<ProjectSettingHeader title="Automations Settings" />} withProjectWrapper>
<section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> <ProjectSettingLayout>
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<h3 className="text-xl font-medium">Automations</h3> <div className="flex items-center py-3.5 border-b border-custom-border-200">
</div> <h3 className="text-xl font-medium">Automations</h3>
<AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} /> </div>
<AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} /> <AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />
</section> <AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />
</ProjectSettingLayout> </section>
</ProjectSettingLayout>
</AppLayout>
); );
}; };

28
web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
View File

@ -7,7 +7,8 @@ import { ProjectService, ProjectEstimateService } from "services/project";
// hooks // hooks
import useProjectDetails from "hooks/use-project-details"; import useProjectDetails from "hooks/use-project-details";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// components // components
import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates"; import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates";
import { ProjectSettingHeader } from "components/headers"; import { ProjectSettingHeader } from "components/headers";
@ -98,18 +99,17 @@ const EstimatesSettings: NextPage = () => {
}; };
return ( return (
<> <AppLayout header={<ProjectSettingHeader title="Estimates Settings" />} withProjectWrapper>
<CreateUpdateEstimateModal <ProjectSettingLayout>
isOpen={estimateFormOpen} <CreateUpdateEstimateModal
data={estimateToUpdate} isOpen={estimateFormOpen}
handleClose={() => { data={estimateToUpdate}
setEstimateFormOpen(false); handleClose={() => {
setEstimateToUpdate(undefined); setEstimateFormOpen(false);
}} setEstimateToUpdate(undefined);
user={user} }}
/> user={user}
/>
<ProjectSettingLayout header={<ProjectSettingHeader title="Estimates Settings" />}>
<div className="pr-9 py-8 w-full overflow-y-auto"> <div className="pr-9 py-8 w-full overflow-y-auto">
<section className="flex items-center justify-between py-3.5 border-b border-custom-border-200"> <section className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
<h3 className="text-xl font-medium">Estimates</h3> <h3 className="text-xl font-medium">Estimates</h3>
@ -172,7 +172,7 @@ const EstimatesSettings: NextPage = () => {
)} )}
</div> </div>
</ProjectSettingLayout> </ProjectSettingLayout>
</> </AppLayout>
); );
}; };

93
web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
View File

@ -6,7 +6,8 @@ import useSWR, { mutate } from "swr";
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
import { TrackEventService, MiscellaneousEventType } from "services/track_event.service"; import { TrackEventService, MiscellaneousEventType } from "services/track_event.service";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
@ -136,52 +137,54 @@ const FeaturesSettings: NextPage = () => {
const isAdmin = memberDetails?.role === 20; const isAdmin = memberDetails?.role === 20;
return ( return (
<ProjectSettingLayout header={<ProjectSettingHeader title="Features Settings" />}> <AppLayout header={<ProjectSettingHeader title="Features Settings" />} withProjectWrapper>
<section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> <ProjectSettingLayout>
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<h3 className="text-xl font-medium">Features</h3> <div className="flex items-center py-3.5 border-b border-custom-border-200">
</div> <h3 className="text-xl font-medium">Features</h3>
<div> </div>
{featuresList.map((feature) => ( <div>
<div {featuresList.map((feature) => (
key={feature.property} <div
className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4" key={feature.property}
> className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4"
<div className="flex items-start gap-3"> >
<div className="flex items-center justify-center p-3 rounded bg-custom-background-90"> <div className="flex items-start gap-3">
{feature.icon} <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
</div> {feature.icon}
<div className=""> </div>
<h4 className="text-sm font-medium">{feature.title}</h4> <div className="">
<p className="text-sm text-custom-text-200 tracking-tight">{feature.description}</p> <h4 className="text-sm font-medium">{feature.title}</h4>
<p className="text-sm text-custom-text-200 tracking-tight">{feature.description}</p>
</div>
</div> </div>
<ToggleSwitch
value={projectDetails?.[feature.property as keyof IProject]}
onChange={() => {
trackEventService.trackMiscellaneousEvent(
{
workspaceId: (projectDetails?.workspace as any)?.id,
workspaceSlug,
projectId,
projectIdentifier: projectDetails?.identifier,
projectName: projectDetails?.name,
},
getEventType(feature.title, !projectDetails?.[feature.property as keyof IProject]),
user as IUser
);
handleSubmit({
[feature.property]: !projectDetails?.[feature.property as keyof IProject],
});
}}
disabled={!isAdmin}
size="sm"
/>
</div> </div>
<ToggleSwitch ))}
value={projectDetails?.[feature.property as keyof IProject]} </div>
onChange={() => { </section>
trackEventService.trackMiscellaneousEvent( </ProjectSettingLayout>
{ </AppLayout>
workspaceId: (projectDetails?.workspace as any)?.id,
workspaceSlug,
projectId,
projectIdentifier: projectDetails?.identifier,
projectName: projectDetails?.name,
},
getEventType(feature.title, !projectDetails?.[feature.property as keyof IProject]),
user as IUser
);
handleSubmit({
[feature.property]: !projectDetails?.[feature.property as keyof IProject],
});
}}
disabled={!isAdmin}
size="sm"
/>
</div>
))}
</div>
</section>
</ProjectSettingLayout>
); );
}; };

53
web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
View File

@ -3,7 +3,8 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// components // components
import { ProjectSettingHeader } from "components/headers"; import { ProjectSettingHeader } from "components/headers";
import { import {
@ -18,9 +19,6 @@ import type { NextPage } from "next";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// services
// const projectService = new ProjectService();
const GeneralSettings: NextPage = observer(() => { const GeneralSettings: NextPage = observer(() => {
const { project: projectStore } = useMobxStore(); const { project: projectStore } = useMobxStore();
// states // states
@ -42,33 +40,34 @@ const GeneralSettings: NextPage = observer(() => {
// const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network")); // const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
const isAdmin = projectDetails?.member_role === 20; const isAdmin = projectDetails?.member_role === 20;
console.log("isAdmin", isAdmin);
return ( return (
<ProjectSettingLayout header={<ProjectSettingHeader title="General Settings" />}> <AppLayout header={<ProjectSettingHeader title="General Settings" />} withProjectWrapper>
{projectDetails && ( <ProjectSettingLayout>
<DeleteProjectModal {projectDetails && (
project={projectDetails} <DeleteProjectModal
isOpen={Boolean(selectProject)} project={projectDetails}
onClose={() => setSelectedProject(null)} isOpen={Boolean(selectProject)}
/> onClose={() => setSelectedProject(null)}
)}
<div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
{projectDetails && workspaceSlug ? (
<ProjectDetailsForm project={projectDetails} workspaceSlug={workspaceSlug.toString()} isAdmin={isAdmin} />
) : (
<ProjectDetailsFormLoader />
)}
{isAdmin && (
<DeleteProjectSection
projectDetails={projectDetails}
handleDelete={() => setSelectedProject(projectDetails.id ?? null)}
/> />
)} )}
</div>
</ProjectSettingLayout> <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
{projectDetails && workspaceSlug ? (
<ProjectDetailsForm project={projectDetails} workspaceSlug={workspaceSlug.toString()} isAdmin={isAdmin} />
) : (
<ProjectDetailsFormLoader />
)}
{isAdmin && (
<DeleteProjectSection
projectDetails={projectDetails}
handleDelete={() => setSelectedProject(projectDetails.id ?? null)}
/>
)}
</div>
</ProjectSettingLayout>
</AppLayout>
); );
}); });

71
web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
View File

@ -5,7 +5,8 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// services // services
import { IntegrationService } from "services/integrations"; import { IntegrationService } from "services/integrations";
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
@ -50,40 +51,42 @@ const ProjectIntegrations: NextPage = () => {
const isAdmin = projectDetails?.member_role === 20; const isAdmin = projectDetails?.member_role === 20;
return ( return (
<ProjectSettingLayout header={<ProjectSettingHeader title="Integrations Settings" />}> <AppLayout header={<ProjectSettingHeader title="Integrations Settings" />}>
<div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> <ProjectSettingLayout>
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<h3 className="text-xl font-medium">Integrations</h3> <div className="flex items-center py-3.5 border-b border-custom-border-200">
</div> <h3 className="text-xl font-medium">Integrations</h3>
{workspaceIntegrations ? ( </div>
workspaceIntegrations.length > 0 ? ( {workspaceIntegrations ? (
<div> workspaceIntegrations.length > 0 ? (
{workspaceIntegrations.map((integration) => ( <div>
<SingleIntegration key={integration.integration_detail.id} integration={integration} /> {workspaceIntegrations.map((integration) => (
))} <SingleIntegration key={integration.integration_detail.id} integration={integration} />
</div> ))}
</div>
) : (
<EmptyState
title="You haven't configured integrations"
description="Configure GitHub and other integrations to sync your project issues."
image={emptyIntegration}
primaryButton={{
text: "Configure now",
onClick: () => router.push(`/${workspaceSlug}/settings/integrations`),
}}
disabled={!isAdmin}
/>
)
) : ( ) : (
<EmptyState <Loader className="space-y-5">
title="You haven't configured integrations" <Loader.Item height="40px" />
description="Configure GitHub and other integrations to sync your project issues." <Loader.Item height="40px" />
image={emptyIntegration} <Loader.Item height="40px" />
primaryButton={{ <Loader.Item height="40px" />
text: "Configure now", </Loader>
onClick: () => router.push(`/${workspaceSlug}/settings/integrations`), )}
}} </div>
disabled={!isAdmin} </ProjectSettingLayout>
/> </AppLayout>
)
) : (
<Loader className="space-y-5">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
)}
</div>
</ProjectSettingLayout>
); );
}; };

149
web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
View File

@ -9,7 +9,8 @@ import useUserAuth from "hooks/use-user-auth";
// services // services
import { IssueLabelService } from "services/issue"; import { IssueLabelService } from "services/issue";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// components // components
import { import {
CreateUpdateLabelInline, CreateUpdateLabelInline,
@ -92,43 +93,60 @@ const LabelsSettings: NextPage = () => {
onClose={() => setSelectDeleteLabel(null)} onClose={() => setSelectDeleteLabel(null)}
user={user} user={user}
/> />
<ProjectSettingLayout header={<ProjectSettingHeader title="Labels Settings" />}> <AppLayout header={<ProjectSettingHeader title="Labels Settings" />}>
<section className="pr-9 py-8 gap-10 w-full overflow-y-auto"> <ProjectSettingLayout>
<div className="flex items-center justify-between py-3.5 border-b border-custom-border-200"> <section className="pr-9 py-8 gap-10 w-full overflow-y-auto">
<h3 className="text-xl font-medium">Labels</h3> <div className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
<h3 className="text-xl font-medium">Labels</h3>
<Button variant="primary" onClick={newLabel} size="sm"> <Button variant="primary" onClick={newLabel} size="sm">
Add label Add label
</Button> </Button>
</div> </div>
<div className="space-y-3 py-6 h-full w-full"> <div className="space-y-3 py-6 h-full w-full">
{labelForm && ( {labelForm && (
<CreateUpdateLabelInline <CreateUpdateLabelInline
labelForm={labelForm} labelForm={labelForm}
setLabelForm={setLabelForm} setLabelForm={setLabelForm}
isUpdating={isUpdating} isUpdating={isUpdating}
labelToUpdate={labelToUpdate} labelToUpdate={labelToUpdate}
onClose={() => { onClose={() => {
setLabelForm(false); setLabelForm(false);
setIsUpdating(false); setIsUpdating(false);
setLabelToUpdate(null); setLabelToUpdate(null);
}} }}
ref={scrollToRef} ref={scrollToRef}
/> />
)} )}
<> <>
{issueLabels ? ( {issueLabels ? (
issueLabels.length > 0 ? ( issueLabels.length > 0 ? (
issueLabels.map((label) => { issueLabels.map((label) => {
const children = issueLabels?.filter((l) => l.parent === label.id); const children = issueLabels?.filter((l) => l.parent === label.id);
if (children && children.length === 0) { if (children && children.length === 0) {
if (!label.parent) if (!label.parent)
return (
<SingleLabel
key={label.id}
label={label}
addLabelToGroup={() => addLabelToGroup(label)}
editLabel={(label) => {
editLabel(label);
scrollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}}
handleLabelDelete={() => setSelectDeleteLabel(label)}
/>
);
} else
return ( return (
<SingleLabel <SingleLabelGroup
key={label.id} key={label.id}
label={label} label={label}
addLabelToGroup={() => addLabelToGroup(label)} labelChildren={children}
addLabelToGroup={addLabelToGroup}
editLabel={(label) => { editLabel={(label) => {
editLabel(label); editLabel(label);
scrollToRef.current?.scrollIntoView({ scrollToRef.current?.scrollIntoView({
@ -136,49 +154,34 @@ const LabelsSettings: NextPage = () => {
}); });
}} }}
handleLabelDelete={() => setSelectDeleteLabel(label)} handleLabelDelete={() => setSelectDeleteLabel(label)}
user={user}
/> />
); );
} else })
return ( ) : (
<SingleLabelGroup <EmptyState
key={label.id} title="No labels yet"
label={label} description="Create labels to help organize and filter issues in you project"
labelChildren={children} image={emptyLabel}
addLabelToGroup={addLabelToGroup} primaryButton={{
editLabel={(label) => { text: "Add label",
editLabel(label); onClick: () => newLabel(),
scrollToRef.current?.scrollIntoView({ }}
behavior: "smooth", />
}); )
}}
handleLabelDelete={() => setSelectDeleteLabel(label)}
user={user}
/>
);
})
) : ( ) : (
<EmptyState <Loader className="space-y-5">
title="No labels yet" <Loader.Item height="40px" />
description="Create labels to help organize and filter issues in you project" <Loader.Item height="40px" />
image={emptyLabel} <Loader.Item height="40px" />
primaryButton={{ <Loader.Item height="40px" />
text: "Add label", </Loader>
onClick: () => newLabel(), )}
}} </>
/> </div>
) </section>
) : ( </ProjectSettingLayout>
<Loader className="space-y-5"> </AppLayout>
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
)}
</>
</div>
</section>
</ProjectSettingLayout>
</> </>
); );
}; };

444
web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
View File

@ -12,7 +12,8 @@ import useProjectMembers from "hooks/use-project-members";
import useProjectDetails from "hooks/use-project-details"; import useProjectDetails from "hooks/use-project-details";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// components // components
import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove"; import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
import SendProjectInvitationModal from "components/project/send-project-invitation-modal"; import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
@ -196,234 +197,239 @@ const MembersSettings: NextPage = () => {
const isAdmin = memberDetails?.role === 20; const isAdmin = memberDetails?.role === 20;
return ( return (
<ProjectSettingLayout header={<ProjectSettingHeader title="Members Settings" />}> <AppLayout header={<ProjectSettingHeader title="Members Settings" />}>
<ConfirmProjectMemberRemove <ProjectSettingLayout>
isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)} <ConfirmProjectMemberRemove
onClose={() => { isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
setSelectedRemoveMember(null); onClose={() => {
setSelectedInviteRemoveMember(null); setSelectedRemoveMember(null);
}} setSelectedInviteRemoveMember(null);
data={members.find((item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember)} }}
handleDelete={async () => { data={members.find((item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember)}
if (!activeWorkspace || !projectDetails) return; handleDelete={async () => {
if (selectedRemoveMember) { if (!activeWorkspace || !projectDetails) return;
await projectService.deleteProjectMember(activeWorkspace.slug, projectDetails.id, selectedRemoveMember); if (selectedRemoveMember) {
mutateMembers((prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember), false); await projectService.deleteProjectMember(activeWorkspace.slug, projectDetails.id, selectedRemoveMember);
} mutateMembers(
if (selectedInviteRemoveMember) { (prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
await projectInvitationService.deleteProjectInvitation( false
activeWorkspace.slug, );
projectDetails.id, }
selectedInviteRemoveMember if (selectedInviteRemoveMember) {
); await projectInvitationService.deleteProjectInvitation(
mutateInvitations( activeWorkspace.slug,
(prevData: any) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember), projectDetails.id,
false selectedInviteRemoveMember
); );
} mutateInvitations(
setToastAlert({ (prevData: any) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
type: "success", false
message: "Member removed successfully", );
title: "Success", }
}); setToastAlert({
}} type: "success",
/> message: "Member removed successfully",
<SendProjectInvitationModal title: "Success",
isOpen={inviteModal} });
setIsOpen={setInviteModal} }}
members={members} />
user={user} <SendProjectInvitationModal
onSuccess={() => mutateMembers()} isOpen={inviteModal}
/> setIsOpen={setInviteModal}
<section className={`pr-9 py-8 w-full overflow-y-auto`}> members={members}
<div className="flex items-center py-3.5 border-b border-custom-border-200"> user={user}
<h3 className="text-xl font-medium">Defaults</h3> onSuccess={() => mutateMembers()}
</div> />
<div className="flex flex-col gap-2 pb-4 w-full"> <section className={`pr-9 py-8 w-full overflow-y-auto`}>
<div className="flex items-center py-8 gap-4 w-full"> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<div className="flex flex-col gap-2 w-1/2"> <h3 className="text-xl font-medium">Defaults</h3>
<h4 className="text-sm">Project Lead</h4> </div>
<div className=""> <div className="flex flex-col gap-2 pb-4 w-full">
{projectDetails ? ( <div className="flex items-center py-8 gap-4 w-full">
<Controller <div className="flex flex-col gap-2 w-1/2">
control={control} <h4 className="text-sm">Project Lead</h4>
name="project_lead" <div className="">
render={({ field: { value } }) => ( {projectDetails ? (
<MemberSelect <Controller
value={value} control={control}
onChange={(val: string) => { name="project_lead"
submitChanges({ project_lead: val }); render={({ field: { value } }) => (
}} <MemberSelect
isDisabled={!isAdmin} value={value}
/> onChange={(val: string) => {
)} submitChanges({ project_lead: val });
/> }}
) : ( isDisabled={!isAdmin}
<Loader className="h-9 w-full"> />
<Loader.Item width="100%" height="100%" /> )}
</Loader> />
)} ) : (
<Loader className="h-9 w-full">
<Loader.Item width="100%" height="100%" />
</Loader>
)}
</div>
</div> </div>
</div>
<div className="flex flex-col gap-2 w-1/2"> <div className="flex flex-col gap-2 w-1/2">
<h4 className="text-sm">Default Assignee</h4> <h4 className="text-sm">Default Assignee</h4>
<div className=""> <div className="">
{projectDetails ? ( {projectDetails ? (
<Controller <Controller
control={control} control={control}
name="default_assignee" name="default_assignee"
render={({ field: { value } }) => ( render={({ field: { value } }) => (
<MemberSelect <MemberSelect
value={value} value={value}
onChange={(val: string) => { onChange={(val: string) => {
submitChanges({ default_assignee: val }); submitChanges({ default_assignee: val });
}} }}
isDisabled={!isAdmin} isDisabled={!isAdmin}
/> />
)} )}
/> />
) : ( ) : (
<Loader className="h-9 w-full"> <Loader className="h-9 w-full">
<Loader.Item width="100%" height="100%" /> <Loader.Item width="100%" height="100%" />
</Loader> </Loader>
)} )}
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200"> <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
<h4 className="text-xl font-medium">Members</h4> <h4 className="text-xl font-medium">Members</h4>
<Button variant="primary" onClick={() => setInviteModal(true)}> <Button variant="primary" onClick={() => setInviteModal(true)}>
Add Member Add Member
</Button> </Button>
</div> </div>
{!projectMembers || !projectInvitations ? ( {!projectMembers || !projectInvitations ? (
<Loader className="space-y-5"> <Loader className="space-y-5">
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
</Loader> </Loader>
) : ( ) : (
<div className="divide-y divide-custom-border-200"> <div className="divide-y divide-custom-border-200">
{members.length > 0 {members.length > 0
? members.map((member) => ( ? members.map((member) => (
<div key={member.id} className="flex items-center justify-between px-3.5 py-[18px]"> <div key={member.id} className="flex items-center justify-between px-3.5 py-[18px]">
<div className="flex items-center gap-x-6 gap-y-2"> <div className="flex items-center gap-x-6 gap-y-2">
{member.avatar && member.avatar !== "" ? ( {member.avatar && member.avatar !== "" ? (
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white"> <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
<img <img
src={member.avatar} src={member.avatar}
alt={member.display_name} alt={member.display_name}
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg" className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
/> />
</div> </div>
) : member.display_name || member.email ? ( ) : member.display_name || member.email ? (
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white"> <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
{(member.display_name || member.email)?.charAt(0)} {(member.display_name || member.email)?.charAt(0)}
</div> </div>
) : (
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
?
</div>
)}
<div>
{member.member ? (
<Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
<a className="text-sm">
<span>
{member.first_name} {member.last_name}
</span>
<span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
</a>
</Link>
) : ( ) : (
<h4 className="text-sm">{member.display_name || member.email}</h4> <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
?
</div>
)} )}
{isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>} <div>
{member.member ? (
<Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
<a className="text-sm">
<span>
{member.first_name} {member.last_name}
</span>
<span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
</a>
</Link>
) : (
<h4 className="text-sm">{member.display_name || member.email}</h4>
)}
{isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
</div>
</div>
<div className="flex items-center gap-3 text-xs">
{!member.member && (
<div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
Pending
</div>
)}
<CustomSelect
customButton={
<div className="flex item-center gap-1">
<span
className={`flex items-center text-sm font-medium ${
member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
}`}
>
{ROLE[member.role as keyof typeof ROLE]}
</span>
{member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />}
</div>
}
value={member.role}
onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
if (!activeWorkspace || !projectDetails) return;
mutateMembers(
(prevData: any) =>
prevData.map((m: any) => (m.id === member.id ? { ...m, role: value } : m)),
false
);
projectService
.updateProjectMember(activeWorkspace.slug, projectDetails.id, member.id, {
role: value,
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "An error occurred while updating member role. Please try again.",
});
});
}}
disabled={
member.memberId === user?.id ||
!member.member ||
(currentUser && currentUser.role !== 20 && currentUser.role < member.role)
}
>
{Object.keys(ROLE).map((key) => {
if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null;
return (
<CustomSelect.Option key={key} value={key}>
<>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
</CustomSelect.Option>
);
})}
</CustomSelect>
<CustomMenu ellipsis disabled={!isAdmin}>
<CustomMenu.MenuItem
onClick={() => {
if (member.member) setSelectedRemoveMember(member.id);
else setSelectedInviteRemoveMember(member.id);
}}
>
<span className="flex items-center justify-start gap-2">
<X className="h-4 w-4" />
<span> {member.memberId !== user?.id ? "Remove member" : "Leave project"}</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div> </div>
</div> </div>
<div className="flex items-center gap-3 text-xs"> ))
{!member.member && ( : null}
<div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500"> </div>
Pending )}
</div> </section>
)} </ProjectSettingLayout>
<CustomSelect </AppLayout>
customButton={
<div className="flex item-center gap-1">
<span
className={`flex items-center text-sm font-medium ${
member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
}`}
>
{ROLE[member.role as keyof typeof ROLE]}
</span>
{member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />}
</div>
}
value={member.role}
onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
if (!activeWorkspace || !projectDetails) return;
mutateMembers(
(prevData: any) =>
prevData.map((m: any) => (m.id === member.id ? { ...m, role: value } : m)),
false
);
projectService
.updateProjectMember(activeWorkspace.slug, projectDetails.id, member.id, {
role: value,
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "An error occurred while updating member role. Please try again.",
});
});
}}
disabled={
member.memberId === user?.id ||
!member.member ||
(currentUser && currentUser.role !== 20 && currentUser.role < member.role)
}
>
{Object.keys(ROLE).map((key) => {
if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null;
return (
<CustomSelect.Option key={key} value={key}>
<>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
</CustomSelect.Option>
);
})}
</CustomSelect>
<CustomMenu ellipsis disabled={!isAdmin}>
<CustomMenu.MenuItem
onClick={() => {
if (member.member) setSelectedRemoveMember(member.id);
else setSelectedInviteRemoveMember(member.id);
}}
>
<span className="flex items-center justify-start gap-2">
<X className="h-4 w-4" />
<span> {member.memberId !== user?.id ? "Remove member" : "Leave project"}</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
))
: null}
</div>
)}
</section>
</ProjectSettingLayout>
); );
}; };

143
web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
View File

@ -10,7 +10,8 @@ import { ProjectStateService } from "services/project";
import useProjectDetails from "hooks/use-project-details"; import useProjectDetails from "hooks/use-project-details";
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// components // components
import { CreateUpdateStateInline, DeleteStateModal, SingleState, StateGroup } from "components/states"; import { CreateUpdateStateInline, DeleteStateModal, SingleState, StateGroup } from "components/states";
import { ProjectSettingHeader } from "components/headers"; import { ProjectSettingHeader } from "components/headers";
@ -57,81 +58,83 @@ const StatesSettings: NextPage = () => {
onClose={() => setSelectDeleteState(null)} onClose={() => setSelectDeleteState(null)}
user={user} user={user}
/> />
<ProjectSettingLayout header={<ProjectSettingHeader title="States Settings" />}> <AppLayout header={<ProjectSettingHeader title="States Settings" />}>
<div className="pr-9 py-8 gap-10 w-full overflow-y-auto"> <ProjectSettingLayout>
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
<h3 className="text-xl font-medium">States</h3> <div className="flex items-center py-3.5 border-b border-custom-border-200">
</div> <h3 className="text-xl font-medium">States</h3>
<div className="space-y-8 py-6"> </div>
{states && projectDetails && orderedStateGroups ? ( <div className="space-y-8 py-6">
Object.keys(orderedStateGroups).map((key) => { {states && projectDetails && orderedStateGroups ? (
if (orderedStateGroups[key].length !== 0) Object.keys(orderedStateGroups).map((key) => {
return ( if (orderedStateGroups[key].length !== 0)
<div key={key} className="flex flex-col gap-2"> return (
<div className="flex w-full justify-between"> <div key={key} className="flex flex-col gap-2">
<h4 className="text-base font-medium text-custom-text-200 capitalize">{key}</h4> <div className="flex w-full justify-between">
<button <h4 className="text-base font-medium text-custom-text-200 capitalize">{key}</h4>
type="button" <button
className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none" type="button"
onClick={() => setActiveGroup(key as keyof StateGroup)} className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
> onClick={() => setActiveGroup(key as keyof StateGroup)}
<Plus className="h-4 w-4" /> >
</button> <Plus className="h-4 w-4" />
</div> </button>
<div className="flex flex-col gap-2 rounded"> </div>
{key === activeGroup && ( <div className="flex flex-col gap-2 rounded">
<CreateUpdateStateInline {key === activeGroup && (
groupLength={orderedStateGroups[key].length} <CreateUpdateStateInline
onClose={() => { groupLength={orderedStateGroups[key].length}
setActiveGroup(null); onClose={() => {
setSelectedState(null); setActiveGroup(null);
}} setSelectedState(null);
data={null} }}
selectedGroup={key as keyof StateGroup} data={null}
user={user} selectedGroup={key as keyof StateGroup}
/>
)}
{orderedStateGroups[key].map((state, index) =>
state.id !== selectedState ? (
<SingleState
key={state.id}
index={index}
state={state}
statesList={statesList ?? []}
handleEditState={() => setSelectedState(state.id)}
handleDeleteState={() => setSelectDeleteState(state.id)}
user={user} user={user}
/> />
) : ( )}
<div className="border-b border-custom-border-200 last:border-b-0" key={state.id}> {orderedStateGroups[key].map((state, index) =>
<CreateUpdateStateInline state.id !== selectedState ? (
onClose={() => { <SingleState
setActiveGroup(null); key={state.id}
setSelectedState(null); index={index}
}} state={state}
groupLength={orderedStateGroups[key].length} statesList={statesList ?? []}
data={statesList?.find((state) => state.id === selectedState) ?? null} handleEditState={() => setSelectedState(state.id)}
selectedGroup={key as keyof StateGroup} handleDeleteState={() => setSelectDeleteState(state.id)}
user={user} user={user}
/> />
</div> ) : (
) <div className="border-b border-custom-border-200 last:border-b-0" key={state.id}>
)} <CreateUpdateStateInline
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
}}
groupLength={orderedStateGroups[key].length}
data={statesList?.find((state) => state.id === selectedState) ?? null}
selectedGroup={key as keyof StateGroup}
user={user}
/>
</div>
)
)}
</div>
</div> </div>
</div> );
); })
}) ) : (
) : ( <Loader className="space-y-5 md:w-2/3">
<Loader className="space-y-5 md:w-2/3"> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> </Loader>
</Loader> )}
)} </div>
</div> </div>
</div> </ProjectSettingLayout>
</ProjectSettingLayout> </AppLayout>
</> </>
); );
}; };

37
web/pages/[workspaceSlug]/settings/billing.tsx
View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// component // component
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
// ui // ui
@ -9,24 +10,26 @@ import { Button } from "@plane/ui";
import type { NextPage } from "next"; import type { NextPage } from "next";
const BillingSettings: NextPage = () => ( const BillingSettings: NextPage = () => (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}> <AppLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}>
<section className="pr-9 py-8 w-full overflow-y-auto"> <WorkspaceSettingLayout>
<div> <section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<h3 className="text-xl font-medium">Billing & Plans</h3>
</div>
</div>
<div className="px-4 py-6">
<div> <div>
<h4 className="text-md mb-1 leading-6">Current plan</h4> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p> <h3 className="text-xl font-medium">Billing & Plans</h3>
<a href="https://plane.so/pricing" target="_blank" rel="noreferrer"> </div>
<Button variant="neutral-primary">View Plans</Button>
</a>
</div> </div>
</div> <div className="px-4 py-6">
</section> <div>
</WorkspaceSettingLayout> <h4 className="text-md mb-1 leading-6">Current plan</h4>
<p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
<a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
<Button variant="neutral-primary">View Plans</Button>
</a>
</div>
</div>
</section>
</WorkspaceSettingLayout>
</AppLayout>
); );
export default BillingSettings; export default BillingSettings;

22
web/pages/[workspaceSlug]/settings/exports.tsx
View File

@ -1,20 +1,24 @@
// layout
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import { WorkspaceSettingHeader } from "components/headers";
import ExportGuide from "components/exporter/guide"; import ExportGuide from "components/exporter/guide";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
// helper // helper
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout";
import { WorkspaceSettingHeader } from "components/headers";
const ImportExport: NextPage = () => ( const ImportExport: NextPage = () => (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Export Settings" />}> <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
<div className="pr-9 py-8 w-full overflow-y-auto"> <WorkspaceSettingLayout>
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <div className="pr-9 py-8 w-full overflow-y-auto">
<h3 className="text-xl font-medium">Exports</h3> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<h3 className="text-xl font-medium">Exports</h3>
</div>
<ExportGuide />
</div> </div>
<ExportGuide /> </WorkspaceSettingLayout>
</div> </AppLayout>
</WorkspaceSettingLayout>
); );
export default ImportExport; export default ImportExport;

21
web/pages/[workspaceSlug]/settings/imports.tsx
View File

@ -1,20 +1,23 @@
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import { AppLayout } from "layouts/app-layout";
import IntegrationGuide from "components/integration/guide"; import IntegrationGuide from "components/integration/guide";
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
const ImportExport: NextPage = () => ( const ImportExport: NextPage = () => (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Import Settings" />}> <AppLayout header={<WorkspaceSettingHeader title="Import Settings" />}>
<section className="pr-9 py-8 w-full overflow-y-auto"> <WorkspaceSettingLayout>
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <section className="pr-9 py-8 w-full overflow-y-auto">
<h3 className="text-xl font-medium">Imports</h3> <div className="flex items-center py-3.5 border-b border-custom-border-200">
</div> <h3 className="text-xl font-medium">Imports</h3>
<IntegrationGuide /> </div>
</section> <IntegrationGuide />
</WorkspaceSettingLayout> </section>
</WorkspaceSettingLayout>
</AppLayout>
); );
export default ImportExport; export default ImportExport;

393
web/pages/[workspaceSlug]/settings/index.tsx
View File

@ -13,7 +13,8 @@ import { FileService } from "services/file.service";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import { ImageUploadModal } from "components/core"; import { ImageUploadModal } from "components/core";
import { DeleteWorkspaceModal } from "components/workspace"; import { DeleteWorkspaceModal } from "components/workspace";
@ -152,207 +153,209 @@ const WorkspaceSettings: NextPage = () => {
const isAdmin = memberDetails?.role === 20; const isAdmin = memberDetails?.role === 20;
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="General Settings" />}> <AppLayout header={<WorkspaceSettingHeader title="General Settings" />}>
<ImageUploadModal <WorkspaceSettingLayout>
isOpen={isImageUploadModalOpen} <ImageUploadModal
onClose={() => setIsImageUploadModalOpen(false)} isOpen={isImageUploadModalOpen}
isRemoving={isImageRemoving} onClose={() => setIsImageUploadModalOpen(false)}
handleDelete={() => handleDelete(activeWorkspace?.logo)} isRemoving={isImageRemoving}
onSuccess={(imageUrl) => { handleDelete={() => handleDelete(activeWorkspace?.logo)}
setIsImageUploading(true); onSuccess={(imageUrl) => {
setValue("logo", imageUrl); setIsImageUploading(true);
setIsImageUploadModalOpen(false); setValue("logo", imageUrl);
handleSubmit(onSubmit)().then(() => setIsImageUploading(false)); setIsImageUploadModalOpen(false);
}} handleSubmit(onSubmit)().then(() => setIsImageUploading(false));
value={watch("logo")} }}
/> value={watch("logo")}
<DeleteWorkspaceModal />
isOpen={isOpen} <DeleteWorkspaceModal
onClose={() => { isOpen={isOpen}
setIsOpen(false); onClose={() => {
}} setIsOpen(false);
data={activeWorkspace ?? null} }}
user={user} data={activeWorkspace ?? null}
/> user={user}
{activeWorkspace ? ( />
<div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> {activeWorkspace ? (
<div className="flex gap-5 items-center pb-7 border-b border-custom-border-200"> <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<div className="flex flex-col gap-1"> <div className="flex gap-5 items-center pb-7 border-b border-custom-border-200">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}> <div className="flex flex-col gap-1">
{watch("logo") && watch("logo") !== null && watch("logo") !== "" ? ( <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
<div className="relative mx-auto flex h-14 w-14">
<img
src={watch("logo")!}
className="absolute top-0 left-0 h-full w-full object-cover rounded-md"
alt="Workspace Logo"
/>
</div>
) : (
<div className="relative flex h-14 w-14 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
{activeWorkspace?.name?.charAt(0) ?? "N"}
</div>
)}
</button>
</div>
<div className="flex flex-col gap-1">
<h3 className="text-lg font-semibold leading-6">{watch("name")}</h3>
<span className="text-sm tracking-tight">{`${
typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "")
}/${activeWorkspace.slug}`}</span>
<div className="flex item-center gap-2.5">
<button
className="flex items-center gap-1.5 text-xs text-left text-custom-primary-100 font-medium"
onClick={() => setIsImageUploadModalOpen(true)}
disabled={!isAdmin}
>
{watch("logo") && watch("logo") !== null && watch("logo") !== "" ? ( {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
<> <div className="relative mx-auto flex h-14 w-14">
<Pencil className="h-3 w-3" /> <img
Edit logo src={watch("logo")!}
</> className="absolute top-0 left-0 h-full w-full object-cover rounded-md"
alt="Workspace Logo"
/>
</div>
) : ( ) : (
"Upload logo" <div className="relative flex h-14 w-14 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
{activeWorkspace?.name?.charAt(0) ?? "N"}
</div>
)} )}
</button> </button>
</div> </div>
</div> <div className="flex flex-col gap-1">
</div> <h3 className="text-lg font-semibold leading-6">{watch("name")}</h3>
<span className="text-sm tracking-tight">{`${
<div className="flex flex-col gap-8 my-10"> typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "")
<div className="grid grid-col grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-10 w-full"> }/${activeWorkspace.slug}`}</span>
<div className="flex flex-col gap-1 "> <div className="flex item-center gap-2.5">
<h4 className="text-sm">Workspace Name</h4> <button
<Controller className="flex items-center gap-1.5 text-xs text-left text-custom-primary-100 font-medium"
control={control} onClick={() => setIsImageUploadModalOpen(true)}
name="name" disabled={!isAdmin}
rules={{
required: "Name is required",
maxLength: {
value: 80,
message: "Workspace name should not exceed 80 characters",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="name"
name="name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Name"
className="rounded-md font-medium w-full"
disabled={!isAdmin}
/>
)}
/>
</div>
<div className="flex flex-col gap-1 ">
<h4 className="text-sm">Company Size</h4>
<Controller
name="organization_size"
control={control}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
onChange={onChange}
label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"}
width="w-full"
input
disabled={!isAdmin}
>
{ORGANIZATION_SIZE?.map((item) => (
<CustomSelect.Option key={item} value={item}>
{item}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
</div>
<div className="flex flex-col gap-1 ">
<h4 className="text-sm">Workspace URL</h4>
<Controller
control={control}
name="url"
render={({ field: { onChange, ref } }) => (
<Input
id="url"
name="url"
type="url"
value={`${
typeof window !== "undefined" &&
window.location.origin.replace("http://", "").replace("https://", "")
}/${activeWorkspace.slug}`}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.url)}
className="w-full"
disabled
/>
)}
/>
</div>
</div>
<div className="flex items-center justify-between py-2">
<Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isAdmin}>
{isSubmitting ? "Updating..." : "Update Workspace"}
</Button>
</div>
</div>
{isAdmin && (
<Disclosure as="div" className="border-t border-custom-border-400">
{({ open }) => (
<div className="w-full">
<Disclosure.Button
as="button"
type="button"
className="flex items-center justify-between w-full py-4"
> >
<span className="text-xl tracking-tight">Delete Workspace</span> {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
{/* <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" /> */} <>
{open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />} <Pencil className="h-3 w-3" />
</Disclosure.Button> Edit logo
</>
<Transition ) : (
show={open} "Upload logo"
enter="transition duration-100 ease-out" )}
enterFrom="transform opacity-0" </button>
enterTo="transform opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
<Disclosure.Panel>
<div className="flex flex-col gap-8">
<span className="text-sm tracking-tight">
The danger zone of the workspace delete page is a critical area that requires careful
consideration and attention. When deleting a workspace, all of the data and resources within
that workspace will be permanently removed and cannot be recovered.
</span>
<div>
<Button variant="danger" onClick={() => setIsOpen(true)}>
Delete my workspace
</Button>
</div>
</div>
</Disclosure.Panel>
</Transition>
</div> </div>
)} </div>
</Disclosure> </div>
)}
</div> <div className="flex flex-col gap-8 my-10">
) : ( <div className="grid grid-col grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-10 w-full">
<div className="flex items-center justify-center h-full w-full px-4 sm:px-0"> <div className="flex flex-col gap-1 ">
<Spinner /> <h4 className="text-sm">Workspace Name</h4>
</div> <Controller
)} control={control}
</WorkspaceSettingLayout> name="name"
rules={{
required: "Name is required",
maxLength: {
value: 80,
message: "Workspace name should not exceed 80 characters",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="name"
name="name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Name"
className="rounded-md font-medium w-full"
disabled={!isAdmin}
/>
)}
/>
</div>
<div className="flex flex-col gap-1 ">
<h4 className="text-sm">Company Size</h4>
<Controller
name="organization_size"
control={control}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
onChange={onChange}
label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"}
width="w-full"
input
disabled={!isAdmin}
>
{ORGANIZATION_SIZE?.map((item) => (
<CustomSelect.Option key={item} value={item}>
{item}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
</div>
<div className="flex flex-col gap-1 ">
<h4 className="text-sm">Workspace URL</h4>
<Controller
control={control}
name="url"
render={({ field: { onChange, ref } }) => (
<Input
id="url"
name="url"
type="url"
value={`${
typeof window !== "undefined" &&
window.location.origin.replace("http://", "").replace("https://", "")
}/${activeWorkspace.slug}`}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.url)}
className="w-full"
disabled
/>
)}
/>
</div>
</div>
<div className="flex items-center justify-between py-2">
<Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isAdmin}>
{isSubmitting ? "Updating..." : "Update Workspace"}
</Button>
</div>
</div>
{isAdmin && (
<Disclosure as="div" className="border-t border-custom-border-400">
{({ open }) => (
<div className="w-full">
<Disclosure.Button
as="button"
type="button"
className="flex items-center justify-between w-full py-4"
>
<span className="text-xl tracking-tight">Delete Workspace</span>
{/* <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" /> */}
{open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
</Disclosure.Button>
<Transition
show={open}
enter="transition duration-100 ease-out"
enterFrom="transform opacity-0"
enterTo="transform opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
<Disclosure.Panel>
<div className="flex flex-col gap-8">
<span className="text-sm tracking-tight">
The danger zone of the workspace delete page is a critical area that requires careful
consideration and attention. When deleting a workspace, all of the data and resources within
that workspace will be permanently removed and cannot be recovered.
</span>
<div>
<Button variant="danger" onClick={() => setIsOpen(true)}>
Delete my workspace
</Button>
</div>
</div>
</Disclosure.Panel>
</Transition>
</div>
)}
</Disclosure>
)}
</div>
) : (
<div className="flex items-center justify-center h-full w-full px-4 sm:px-0">
<Spinner />
</div>
)}
</WorkspaceSettingLayout>
</AppLayout>
); );
}; };

39
web/pages/[workspaceSlug]/settings/integrations.tsx
View File

@ -7,7 +7,8 @@ import useSWR from "swr";
// services // services
import { IntegrationService } from "services/integrations"; import { IntegrationService } from "services/integrations";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import { SingleIntegrationCard } from "components/integration"; import { SingleIntegrationCard } from "components/integration";
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
@ -32,23 +33,25 @@ const WorkspaceIntegrations: NextPage = () => {
); );
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Export Settings" />}> <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
<section className="pr-9 py-8 w-full overflow-y-auto"> <WorkspaceSettingLayout>
<IntegrationAndImportExportBanner bannerName="Integrations" /> <section className="pr-9 py-8 w-full overflow-y-auto">
<div> <IntegrationAndImportExportBanner bannerName="Integrations" />
{appIntegrations ? ( <div>
appIntegrations.map((integration) => ( {appIntegrations ? (
<SingleIntegrationCard key={integration.id} integration={integration} /> appIntegrations.map((integration) => (
)) <SingleIntegrationCard key={integration.id} integration={integration} />
) : ( ))
<Loader className="space-y-2.5 mt-4"> ) : (
<Loader.Item height="89px" /> <Loader className="space-y-2.5 mt-4">
<Loader.Item height="89px" /> <Loader.Item height="89px" />
</Loader> <Loader.Item height="89px" />
)} </Loader>
</div> )}
</section> </div>
</WorkspaceSettingLayout> </section>
</WorkspaceSettingLayout>
</AppLayout>
); );
}; };

409
web/pages/[workspaceSlug]/settings/members.tsx
View File

@ -12,7 +12,8 @@ import useToast from "hooks/use-toast";
import useUser from "hooks/use-user"; import useUser from "hooks/use-user";
import useWorkspaceMembers from "hooks/use-workspace-members"; import useWorkspaceMembers from "hooks/use-workspace-members";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove"; import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove";
import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal"; import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
@ -92,218 +93,220 @@ const MembersSettings: NextPage = () => {
}; };
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Members Settings" />}> <AppLayout header={<WorkspaceSettingHeader title="Members Settings" />}>
<ConfirmWorkspaceMemberRemove <WorkspaceSettingLayout>
isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)} <ConfirmWorkspaceMemberRemove
onClose={() => { isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
setSelectedRemoveMember(null); onClose={() => {
setSelectedInviteRemoveMember(null); setSelectedRemoveMember(null);
}} setSelectedInviteRemoveMember(null);
data={ }}
selectedRemoveMember data={
? members.find((item) => item.id === selectedRemoveMember) selectedRemoveMember
: selectedInviteRemoveMember ? members.find((item) => item.id === selectedRemoveMember)
? members.find((item) => item.id === selectedInviteRemoveMember) : selectedInviteRemoveMember
: null ? members.find((item) => item.id === selectedInviteRemoveMember)
} : null
handleDelete={async () => {
if (!workspaceSlug) return;
if (selectedRemoveMember) {
workspaceService
.deleteWorkspaceMember(workspaceSlug as string, selectedRemoveMember)
.catch((err) => {
const error = err?.error;
setToastAlert({
type: "error",
title: "Error",
message: error || "Something went wrong",
});
})
.finally(() => {
mutateMembers((prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember));
});
} }
if (selectedInviteRemoveMember) { handleDelete={async () => {
mutateInvitations( if (!workspaceSlug) return;
(prevData: any) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember), if (selectedRemoveMember) {
false workspaceService
); .deleteWorkspaceMember(workspaceSlug as string, selectedRemoveMember)
workspaceService .catch((err) => {
.deleteWorkspaceInvitations(workspaceSlug as string, selectedInviteRemoveMember) const error = err?.error;
.then(() => { setToastAlert({
setToastAlert({ type: "error",
type: "success", title: "Error",
title: "Success", message: error || "Something went wrong",
message: "Member removed successfully", });
})
.finally(() => {
mutateMembers((prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember));
}); });
}) }
.catch((err) => { if (selectedInviteRemoveMember) {
const error = err?.error; mutateInvitations(
setToastAlert({ (prevData: any) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
type: "error", false
title: "Error", );
message: error || "Something went wrong", workspaceService
.deleteWorkspaceInvitations(workspaceSlug as string, selectedInviteRemoveMember)
.then(() => {
setToastAlert({
type: "success",
title: "Success",
message: "Member removed successfully",
});
})
.catch((err) => {
const error = err?.error;
setToastAlert({
type: "error",
title: "Error",
message: error || "Something went wrong",
});
})
.finally(() => {
mutateInvitations();
}); });
}) }
.finally(() => { setSelectedRemoveMember(null);
mutateInvitations(); setSelectedInviteRemoveMember(null);
}); }}
} />
setSelectedRemoveMember(null); <SendWorkspaceInvitationModal
setSelectedInviteRemoveMember(null); isOpen={inviteModal}
}} setIsOpen={setInviteModal}
/> workspace_slug={workspaceSlug as string}
<SendWorkspaceInvitationModal user={user}
isOpen={inviteModal} onSuccess={handleInviteModalSuccess}
setIsOpen={setInviteModal} />
workspace_slug={workspaceSlug as string} <section className="pr-9 py-8 w-full overflow-y-auto">
user={user} <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
onSuccess={handleInviteModalSuccess} <h4 className="text-xl font-medium">Members</h4>
/> <Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>
<section className="pr-9 py-8 w-full overflow-y-auto"> Add Member
<div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200"> </Button>
<h4 className="text-xl font-medium">Members</h4> </div>
<Button variant="primary" size="sm" onClick={() => setInviteModal(true)}> {!workspaceMembers || !workspaceInvitations ? (
Add Member <Loader className="space-y-5">
</Button> <Loader.Item height="40px" />
</div> <Loader.Item height="40px" />
{!workspaceMembers || !workspaceInvitations ? ( <Loader.Item height="40px" />
<Loader className="space-y-5"> <Loader.Item height="40px" />
<Loader.Item height="40px" /> </Loader>
<Loader.Item height="40px" /> ) : (
<Loader.Item height="40px" /> <div className="divide-y divide-custom-border-200">
<Loader.Item height="40px" /> {members.length > 0
</Loader> ? members.map((member) => (
) : ( <div key={member.id} className="group flex items-center justify-between px-3.5 py-[18px]">
<div className="divide-y divide-custom-border-200"> <div className="flex items-center gap-x-8 gap-y-2">
{members.length > 0 {member.avatar && member.avatar !== "" ? (
? members.map((member) => (
<div key={member.id} className="group flex items-center justify-between px-3.5 py-[18px]">
<div className="flex items-center gap-x-8 gap-y-2">
{member.avatar && member.avatar !== "" ? (
<Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
<a className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
<img
src={member.avatar}
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
alt={member.display_name || member.email}
/>
</a>
</Link>
) : member.display_name || member.email ? (
<Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
<a className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize bg-gray-700 text-white">
{(member.display_name || member.email)?.charAt(0)}
</a>
</Link>
) : (
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize bg-gray-700 text-white">
?
</div>
)}
<div>
{member.member ? (
<Link href={`/${workspaceSlug}/profile/${member.memberId}`}> <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
<a className="text-sm"> <a className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
<span> <img
{member.first_name} {member.last_name} src={member.avatar}
</span> className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
<span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span> alt={member.display_name || member.email}
/>
</a>
</Link>
) : member.display_name || member.email ? (
<Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
<a className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize bg-gray-700 text-white">
{(member.display_name || member.email)?.charAt(0)}
</a> </a>
</Link> </Link>
) : ( ) : (
<h4 className="text-sm cursor-default">{member.display_name || member.email}</h4> <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize bg-gray-700 text-white">
?
</div>
)} )}
{isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>} <div>
{member.member ? (
<Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
<a className="text-sm">
<span>
{member.first_name} {member.last_name}
</span>
<span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
</a>
</Link>
) : (
<h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
)}
{isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
</div>
</div>
<div className="flex items-center gap-3 text-xs">
{!member?.status && (
<div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
<p>Pending</p>
</div>
)}
{member?.status && !member?.accountCreated && (
<div className="mr-2 flex items-center justify-center rounded-full bg-blue-500/20 px-2 py-1 text-center text-xs text-blue-500">
<p>Account not created</p>
</div>
)}
<CustomSelect
customButton={
<div className="flex item-center gap-1">
<span
className={`flex items-center text-sm font-medium ${
member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
}`}
>
{ROLE[member.role as keyof typeof ROLE]}
</span>
{member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />}
</div>
}
value={member.role}
onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
if (!workspaceSlug) return;
mutateMembers(
(prevData: any) =>
prevData?.map((m: any) => (m.id === member.id ? { ...m, role: value } : m)),
false
);
workspaceService
.updateWorkspaceMember(workspaceSlug?.toString(), member.id, {
role: value,
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "An error occurred while updating member role. Please try again.",
});
});
}}
disabled={
member.memberId === currentUser?.member.id ||
!member.status ||
(currentUser && currentUser.role !== 20 && currentUser.role < member.role)
}
>
{Object.keys(ROLE).map((key) => {
if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null;
return (
<CustomSelect.Option key={key} value={key}>
<>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
</CustomSelect.Option>
);
})}
</CustomSelect>
<CustomMenu ellipsis>
<CustomMenu.MenuItem
onClick={() => {
if (member.member) {
setSelectedRemoveMember(member.id);
} else {
setSelectedInviteRemoveMember(member.id);
}
}}
>
<span className="flex items-center justify-start gap-2">
<X className="h-4 w-4" />
<span> {user?.id === member.memberId ? "Leave" : "Remove member"}</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div> </div>
</div> </div>
<div className="flex items-center gap-3 text-xs"> ))
{!member?.status && ( : null}
<div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500"> </div>
<p>Pending</p> )}
</div> </section>
)} </WorkspaceSettingLayout>
{member?.status && !member?.accountCreated && ( </AppLayout>
<div className="mr-2 flex items-center justify-center rounded-full bg-blue-500/20 px-2 py-1 text-center text-xs text-blue-500">
<p>Account not created</p>
</div>
)}
<CustomSelect
customButton={
<div className="flex item-center gap-1">
<span
className={`flex items-center text-sm font-medium ${
member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
}`}
>
{ROLE[member.role as keyof typeof ROLE]}
</span>
{member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />}
</div>
}
value={member.role}
onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
if (!workspaceSlug) return;
mutateMembers(
(prevData: any) =>
prevData?.map((m: any) => (m.id === member.id ? { ...m, role: value } : m)),
false
);
workspaceService
.updateWorkspaceMember(workspaceSlug?.toString(), member.id, {
role: value,
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "An error occurred while updating member role. Please try again.",
});
});
}}
disabled={
member.memberId === currentUser?.member.id ||
!member.status ||
(currentUser && currentUser.role !== 20 && currentUser.role < member.role)
}
>
{Object.keys(ROLE).map((key) => {
if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null;
return (
<CustomSelect.Option key={key} value={key}>
<>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
</CustomSelect.Option>
);
})}
</CustomSelect>
<CustomMenu ellipsis>
<CustomMenu.MenuItem
onClick={() => {
if (member.member) {
setSelectedRemoveMember(member.id);
} else {
setSelectedInviteRemoveMember(member.id);
}
}}
>
<span className="flex items-center justify-start gap-2">
<X className="h-4 w-4" />
<span> {user?.id === member.memberId ? "Leave" : "Remove member"}</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
))
: null}
</div>
)}
</section>
</WorkspaceSettingLayout>
); );
}; };

39
web/pages/[workspaceSlug]/workspace-views/issues.tsx
View File

@ -1,39 +0,0 @@
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
// components
// import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
// import { WorkspaceViewIssues } from "components/issues/workspace-views/workpace-view-issues";
// ui
import { PrimaryButton } from "components/ui";
// icons
import { CheckCircle, Plus } from "lucide-react";
const WorkspaceView = () => (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle className="h-4 w-4 stroke-[1.5]" />
<span className="text-sm font-medium">Workspace issues</span>
</div>
}
right={
<div className="flex items-center gap-2">
{/* <WorkspaceIssuesViewOptions /> */}
<PrimaryButton
className="flex items-center gap-2"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
<Plus className="h-4 w-4" />
Add Issue
</PrimaryButton>
</div>
}
>
{/* <WorkspaceViewIssues /> */}
</WorkspaceAuthorizationLayout>
);
export default WorkspaceView;