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: settings page refactoring (#2477)

Browse Source 
* chore: implemented project layout and integrated sidebar component

* chore: implemented workspace layout and integrated sidebar component
This commit is contained in:
Anmol Singh Bhatia 2023-10-18 19:17:02 +05:30 committed by GitHub
parent 0ec0ca133a
commit c270c8689f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 1708 additions and 1747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/common/empty-state.tsx
View File

@ -15,7 +15,6 @@ type Props = {
onClick: () => void; onClick: () => void;
}; };
secondaryButton?: React.ReactNode; secondaryButton?: React.ReactNode;
isFullScreen?: boolean;
disabled?: boolean; disabled?: boolean;
}; };
@ -25,10 +24,9 @@ export const EmptyState: React.FC<Props> = ({
image, image,
primaryButton, primaryButton,
secondaryButton, secondaryButton,
isFullScreen = true,
disabled = false, disabled = false,
}) => ( }) => (
<div className={`h-full w-full mx-auto grid place-items-center p-8 ${isFullScreen ? "md:w-4/5 lg:w-3/5" : ""}`}> <div className={`flex items-center justify-center h-full w-full`}>
<div className="text-center flex flex-col items-center w-full"> <div className="text-center flex flex-col items-center w-full">
<Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} /> <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} />
<h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6> <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6>

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

@ -11,3 +11,5 @@ export * from "./projects";
export * from "./profile-preferences"; export * from "./profile-preferences";
export * from "./cycles"; export * from "./cycles";
export * from "./modules"; export * from "./modules";
export * from "./project-settings";
export * from "./workspace-settings";

57
web/components/headers/project-settings.tsx Normal file
View File

@ -0,0 +1,57 @@
import { FC } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
// ui
import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
// helper
import { truncateText } from "helpers/string.helper";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite";
export interface IProjectSettingHeader {
title: string;
}
export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props) => {
const { title } = props;
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const { project: projectStore } = useMobxStore();
const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
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 className="block md:hidden">
<button
type="button"
className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
onClick={() => router.back()}
>
<ArrowLeft fontSize={14} strokeWidth={2} />
</button>
</div>
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title={title} unshrinkTitle />
</Breadcrumbs>
</div>
</div>
</div>
);
});

66
web/components/headers/workspace-settings.tsx Normal file
View File

@ -0,0 +1,66 @@
import { FC } from "react";
import useSWR from "swr";
import { useRouter } from "next/router";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
// ui
import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
// hooks
import { observer } from "mobx-react-lite";
// services
import { WorkspaceService } from "services/workspace.service";
// helpers
import { truncateText } from "helpers/string.helper";
// constant
import { WORKSPACE_DETAILS } from "constants/fetch-keys";
const workspaceService = new WorkspaceService();
export interface IWorkspaceSettingHeader {
title: string;
}
export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((props) => {
const { title } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
);
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 className="block md:hidden">
<button
type="button"
className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
onClick={() => router.back()}
>
<ArrowLeft fontSize={14} strokeWidth={2} />
</button>
</div>
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title={title} unshrinkTitle />
</Breadcrumbs>
</div>
</div>
</div>
);
});

1
web/components/notifications/notification-popover.tsx
View File

@ -173,7 +173,6 @@ export const NotificationPopover = () => {
title="You're updated with all the notifications" title="You're updated with all the notifications"
description="You have read all the notifications." description="You have read all the notifications."
image={emptyNotification} image={emptyNotification}
isFullScreen={false}
/> />
</div> </div>
) )

63
web/components/project/delete-project-section.tsx Normal file
View File

@ -0,0 +1,63 @@
import React from "react";
// ui
import { Disclosure, Transition } from "@headlessui/react";
import { Button, Loader } from "@plane/ui";
// icons
import { ChevronDown, ChevronUp } from "lucide-react";
// types
import { IProject } from "types";
export interface IDeleteProjectSection {
projectDetails: IProject;
handleDelete: () => void;
}
export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) => {
const { projectDetails, handleDelete } = props;
return (
<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 Project</span>
{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 project delete page is a critical area that requires careful consideration and
attention. When deleting a project, all of the data and resources within that project will be
permanently removed and cannot be recovered.
</span>
<div>
{projectDetails ? (
<div>
<Button variant="danger" onClick={handleDelete}>
Delete my project
</Button>
</div>
) : (
<Loader className="mt-2 w-full">
<Loader.Item height="38px" width="144px" />
</Loader>
)}
</div>
</div>
</Disclosure.Panel>
</Transition>
</div>
)}
</Disclosure>
);
};

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

@ -14,3 +14,4 @@ export * from "./card";
export * from "./join-project-modal"; export * from "./join-project-modal";
export * from "./form"; export * from "./form";
export * from "./form-loader"; export * from "./form-loader";
export * from "./delete-project-section";

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

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

38
web/layouts/setting-layout/project-setting-layout/layout.tsx Normal file
View File

@ -0,0 +1,38 @@
import { FC, ReactNode } from "react";
// layouts
import { UserAuthWrapper, ProjectAuthWrapper } from "layouts/auth-layout";
// components
import { AppSidebar } from "layouts/app-layout";
import { ProjectSettingsSidebar } from "./sidebar";
export interface IProjectSettingLayout {
children: ReactNode;
header: ReactNode;
}
export const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
const { children, header } = props;
return (
<>
<UserAuthWrapper>
<ProjectAuthWrapper>
<div className="relative flex h-screen w-full overflow-hidden">
<AppSidebar />
<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>
</UserAuthWrapper>
</>
);
};

70
web/layouts/setting-layout/project-setting-layout/sidebar.tsx Normal file
View File

@ -0,0 +1,70 @@
import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
export const ProjectSettingsSidebar = () => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const projectLinks: Array<{
label: string;
href: string;
}> = [
{
label: "General",
href: `/${workspaceSlug}/projects/${projectId}/settings`,
},
{
label: "Members",
href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
},
{
label: "Features",
href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
},
{
label: "States",
href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
},
{
label: "Labels",
href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
},
{
label: "Integrations",
href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
},
{
label: "Estimates",
href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
},
{
label: "Automations",
href: `/${workspaceSlug}/projects/${projectId}/settings/automations`,
},
];
return (
<div className="flex flex-col gap-6 w-80 px-5">
<div className="flex flex-col gap-2">
<span className="text-xs text-custom-sidebar-text-400 font-semibold">SETTINGS</span>
<div className="flex flex-col gap-1 w-full">
{projectLinks.map((link) => (
<Link key={link.href} href={link.href}>
<a>
<div
className={`px-4 py-2 text-sm font-medium rounded-md ${
(link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
}`}
>
{link.label}
</div>
</a>
</Link>
))}
</div>
</div>
</div>
);
};

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

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

38
web/layouts/setting-layout/workspace-setting-layout/layout.tsx Normal file
View File

@ -0,0 +1,38 @@
import { FC, ReactNode } from "react";
// layouts
import { UserAuthWrapper, WorkspaceAuthWrapper } from "layouts/auth-layout";
// components
import { AppSidebar } from "layouts/app-layout";
import { WorkspaceSettingsSidebar } from "./sidebar";
export interface IWorkspaceSettingLayout {
children: ReactNode;
header: ReactNode;
}
export const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = (props) => {
const { children, header } = props;
return (
<>
<UserAuthWrapper>
<WorkspaceAuthWrapper>
<div className="relative flex h-screen w-full overflow-hidden">
<AppSidebar />
<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">
<WorkspaceSettingsSidebar />
</div>
{children}
</div>
</div>
</main>
</div>
</WorkspaceAuthWrapper>
</UserAuthWrapper>
</>
);
};

101
web/layouts/setting-layout/workspace-setting-layout/sidebar.tsx Normal file
View File

@ -0,0 +1,101 @@
import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
export const WorkspaceSettingsSidebar = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
const workspaceLinks: Array<{
label: string;
href: string;
}> = [
{
label: "General",
href: `/${workspaceSlug}/settings`,
},
{
label: "Members",
href: `/${workspaceSlug}/settings/members`,
},
{
label: "Billing & Plans",
href: `/${workspaceSlug}/settings/billing`,
},
{
label: "Integrations",
href: `/${workspaceSlug}/settings/integrations`,
},
{
label: "Imports",
href: `/${workspaceSlug}/settings/imports`,
},
{
label: "Exports",
href: `/${workspaceSlug}/settings/exports`,
},
];
const profileLinks: Array<{
label: string;
href: string;
}> = [
{
label: "Profile",
href: `/${workspaceSlug}/me/profile`,
},
{
label: "Activity",
href: `/${workspaceSlug}/me/profile/activity`,
},
{
label: "Preferences",
href: `/${workspaceSlug}/me/profile/preferences`,
},
];
return (
<div className="flex flex-col gap-6 w-80 px-5">
<div className="flex flex-col gap-2">
<span className="text-xs text-custom-sidebar-text-400 font-semibold">SETTINGS</span>
<div className="flex flex-col gap-1 w-full">
{workspaceLinks.map((link) => (
<Link key={link.href} href={link.href}>
<a>
<div
className={`px-4 py-2 text-sm font-medium rounded-md ${
(link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
}`}
>
{link.label}
</div>
</a>
</Link>
))}
</div>
</div>
<div className="flex flex-col gap-2">
<span className="text-xs text-custom-sidebar-text-400 font-semibold">My Account</span>
<div className="flex flex-col gap-1 w-full">
{profileLinks.map((link) => (
<Link key={link.href} href={link.href}>
<a>
<div
className={`px-4 py-2 text-sm font-medium rounded-md ${
(link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
}`}
>
{link.label}
</div>
</a>
</Link>
))}
</div>
</div>
</div>
);
};

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

@ -4,19 +4,19 @@ import Link from "next/link";
// services // services
import { UserService } from "services/user.service"; import { UserService } from "services/user.service";
// layouts // layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy"; import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-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";
import { WorkspaceSettingHeader } from "components/headers";
// icons // icons
import { History, MessageSquare } from "lucide-react"; import { History, MessageSquare } from "lucide-react";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, ExternalLinkIcon, Loader } from "@plane/ui"; import { ExternalLinkIcon, Loader } from "@plane/ui";
// fetch-keys // fetch-keys
import { USER_ACTIVITY } from "constants/fetch-keys"; import { USER_ACTIVITY } from "constants/fetch-keys";
// helper // helper
import { timeAgo } from "helpers/date-time.helper"; import { timeAgo } from "helpers/date-time.helper";
import { SettingsSidebar } from "components/project";
const userService = new UserService(); const userService = new UserService();
@ -30,174 +30,160 @@ const ProfileActivity = () => {
); );
return ( return (
<WorkspaceAuthorizationLayout <WorkspaceSettingLayout header={<WorkspaceSettingHeader title="My Profile Activity" />}>
breadcrumbs={ {userActivity ? (
<Breadcrumbs onBack={() => router.back()}> <section className="pr-9 py-8 w-full overflow-y-auto">
<BreadcrumbItem title="My Profile Activity" /> <div className="flex items-center py-3.5 border-b border-custom-border-200">
</Breadcrumbs> <h3 className="text-xl font-medium">Activity</h3>
} </div>
> <div className={`flex flex-col gap-2 py-4 w-full`}>
<div className="flex flex-row gap-2 h-full"> <ul role="list" className="-mb-4">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0"> {userActivity.results.map((activityItem: any) => {
<SettingsSidebar /> if (activityItem.field === "comment") {
</div> return (
<div key={activityItem.id} className="mt-2">
<div className="relative flex items-start space-x-3">
<div className="relative px-1">
{activityItem.field ? (
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
src={activityItem.actor_detail.avatar}
alt={activityItem.actor_detail.display_name}
height={30}
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`}
>
{activityItem.actor_detail.display_name?.charAt(0)}
</div>
)}
{userActivity ? ( <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">
<section className="pr-9 py-8 w-full overflow-y-auto"> <MessageSquare className="h-6 w-6 !text-2xl text-custom-text-200" aria-hidden="true" />
<div className="flex items-center py-3.5 border-b border-custom-border-200"> </span>
<h3 className="text-xl font-medium">Activity</h3> </div>
</div> <div className="min-w-0 flex-1">
<div className={`flex flex-col gap-2 py-4 w-full`}> <div>
<ul role="list" className="-mb-4"> <div className="text-xs">
{userActivity.results.map((activityItem: any) => { {activityItem.actor_detail.is_bot
if (activityItem.field === "comment") { ? activityItem.actor_detail.first_name + " Bot"
return ( : activityItem.actor_detail.display_name}
<div key={activityItem.id} className="mt-2"> </div>
<div className="relative flex items-start space-x-3"> <p className="mt-0.5 text-xs text-custom-text-200">
<div className="relative px-1"> Commented {timeAgo(activityItem.created_at)}
{activityItem.field ? ( </p>
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
src={activityItem.actor_detail.avatar}
alt={activityItem.actor_detail.display_name}
height={30}
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`}
>
{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">
<MessageSquare className="h-6 w-6 !text-2xl text-custom-text-200" aria-hidden="true" />
</span>
</div> </div>
<div className="min-w-0 flex-1"> <div className="issue-comments-section p-0">
<div> <RichReadOnlyEditor
<div className="text-xs"> value={activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value}
{activityItem.actor_detail.is_bot customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
? activityItem.actor_detail.first_name + " Bot" noBorder
: activityItem.actor_detail.display_name} borderOnFocus={false}
</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"
/>
) : ( ) : (
<div <ActivityIcon activity={activityItem} />
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 !== "" ? (
{activityItem.actor_detail.display_name?.charAt(0)} <img
</div> src={activityItem.actor_detail.avatar}
)} alt={activityItem.actor_detail.display_name}
</div> height={24}
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 className="min-w-0 flex-1 py-4 border-b border-custom-border-200"> </div>
<div className="text-sm text-custom-text-200 break-words"> <div className="min-w-0 flex-1 py-4 border-b border-custom-border-200">
{activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? ( <div className="text-sm text-custom-text-200 break-words">
<span className="text-gray font-medium">Plane</span> {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
) : activityItem.actor_detail.is_bot ? ( <span className="text-gray font-medium">Plane</span>
<span className="text-gray font-medium"> ) : activityItem.actor_detail.is_bot ? (
{activityItem.actor_detail.first_name} Bot <span className="text-gray font-medium">
</span> {activityItem.actor_detail.first_name} Bot
) : ( </span>
<Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}> ) : (
<a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a> <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
</Link> <a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a>
)}{" "} </Link>
{message}{" "} )}{" "}
<span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span> {message} <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
</div>
</div> </div>
</> </div>
</div> </>
</div> </div>
</li> </div>
); </li>
} );
})} }
</ul> })}
</div> </ul>
</section> </div>
) : ( </section>
<Loader className="space-y-5"> ) : (
<Loader.Item height="40px" /> <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> <Loader.Item height="40px" />
)} </Loader>
</div> )}
</WorkspaceAuthorizationLayout> </WorkspaceSettingLayout>
); );
}; };

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

@ -9,12 +9,12 @@ 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 { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy"; import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout";
// components // components
import { ImagePickerPopover, ImageUploadModal } from "components/core"; import { ImagePickerPopover, ImageUploadModal } from "components/core";
import { SettingsSidebar } from "components/project"; import { WorkspaceSettingHeader } from "components/headers";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "@plane/ui"; import { Button, Input, Spinner } from "@plane/ui";
import { CustomSearchSelect, CustomSelect } from "components/ui"; import { CustomSearchSelect, CustomSelect } from "components/ui";
// icons // icons
import { User2, UserCircle2 } from "lucide-react"; import { User2, UserCircle2 } from "lucide-react";
@ -144,13 +144,7 @@ const Profile: NextPage = () => {
})); }));
return ( return (
<WorkspaceAuthorizationLayout <WorkspaceSettingLayout header={<WorkspaceSettingHeader title="My Profile" />}>
breadcrumbs={
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem title="My Profile" />
</Breadcrumbs>
}
>
<ImageUploadModal <ImageUploadModal
isOpen={isImageUploadModalOpen} isOpen={isImageUploadModalOpen}
onClose={() => setIsImageUploadModalOpen(false)} onClose={() => setIsImageUploadModalOpen(false)}
@ -166,231 +160,226 @@ const Profile: NextPage = () => {
/> />
{myProfile ? ( {myProfile ? (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="flex flex-row gap-2 h-full"> <div className={`flex flex-col gap-8 pr-9 py-9 w-full overflow-y-auto`}>
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0"> <div className="relative h-44 w-full mt-6">
<SettingsSidebar /> <img
</div> src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
<div className={`flex flex-col gap-8 pr-9 py-9 w-full overflow-y-auto`}> className="h-44 w-full rounded-lg object-cover"
<div className="relative h-44 w-full mt-6"> alt={myProfile?.first_name ?? "Cover image"}
<img />
src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"} <div className="flex items-end justify-between absolute left-8 -bottom-6">
className="h-44 w-full rounded-lg object-cover" <div className="flex gap-3">
alt={myProfile?.first_name ?? "Cover image"} <div className="flex items-center justify-center bg-custom-background-90 h-16 w-16 rounded-lg">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
{!watch("avatar") || watch("avatar") === "" ? (
<div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
<User2 className="h-full w-full text-custom-text-200" />
</div>
) : (
<div className="relative h-16 w-16 overflow-hidden">
<img
src={watch("avatar")}
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
onClick={() => setIsImageUploadModalOpen(true)}
alt={myProfile.display_name}
/>
</div>
)}
</button>
</div>
</div>
</div>
<div className="flex absolute right-3 bottom-3">
<Controller
control={control}
name="cover_image"
render={() => (
<ImagePickerPopover
label={"Change cover"}
onChange={(imageUrl) => {
setValue("cover_image", imageUrl);
}}
control={control}
value={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
/>
)}
/> />
<div className="flex items-end justify-between absolute left-8 -bottom-6"> </div>
<div className="flex gap-3"> </div>
<div className="flex items-center justify-center bg-custom-background-90 h-16 w-16 rounded-lg">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
{!watch("avatar") || watch("avatar") === "" ? (
<div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
<User2 className="h-full w-full text-custom-text-200" />
</div>
) : (
<div className="relative h-16 w-16 overflow-hidden">
<img
src={watch("avatar")}
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
onClick={() => setIsImageUploadModalOpen(true)}
alt={myProfile.display_name}
/>
</div>
)}
</button>
</div>
</div>
</div>
<div className="flex absolute right-3 bottom-3"> <div className="flex item-center justify-between px-8 mt-4">
<Controller <div className="flex flex-col">
control={control} <div className="flex item-center text-lg font-semibold text-custom-text-100">
name="cover_image" <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
render={() => (
<ImagePickerPopover
label={"Change cover"}
onChange={(imageUrl) => {
setValue("cover_image", imageUrl);
}}
control={control}
value={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
/>
)}
/>
</div> </div>
<span className="text-sm tracking-tight">{watch("email")}</span>
</div> </div>
<div className="flex item-center justify-between px-8 mt-4"> <Link href={`/${workspaceSlug}/profile/${myProfile.id}`}>
<div className="flex flex-col"> <a className="flex item-center cursor-pointer gap-2 h-4 leading-4 text-sm text-custom-primary-100">
<div className="flex item-center text-lg font-semibold text-custom-text-100"> <span className="h-4 w-4">
<span>{`${watch("first_name")} ${watch("last_name")}`}</span> <UserCircle2 className="h-4 w-4" />
</div> </span>
<span className="text-sm tracking-tight">{watch("email")}</span> View Profile
</div> </a>
</Link>
</div>
<Link href={`/${workspaceSlug}/profile/${myProfile.id}`}> <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 px-8">
<a className="flex item-center cursor-pointer gap-2 h-4 leading-4 text-sm text-custom-primary-100"> <div className="flex flex-col gap-1">
<span className="h-4 w-4"> <h4 className="text-sm">First Name</h4>
<UserCircle2 className="h-4 w-4" /> <Controller
</span> control={control}
View Profile name="first_name"
</a> render={({ field: { value, onChange, ref } }) => (
</Link> <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> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 px-8"> <div className="flex flex-col gap-1">
<div className="flex flex-col gap-1"> <h4 className="text-sm">Last Name</h4>
<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>
<div className="flex flex-col gap-1"> <Controller
<h4 className="text-sm">Last Name</h4> control={control}
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>
<Controller <div className="flex flex-col gap-1">
control={control} <h4 className="text-sm">Email</h4>
name="last_name" <Controller
render={({ field: { value, onChange, ref } }) => ( control={control}
<Input name="email"
id="last_name" render={({ field: { value, onChange, ref } }) => (
name="last_name" <Input
type="text" id="email"
value={value} name="email"
onChange={onChange} type="email"
ref={ref} value={value}
hasError={Boolean(errors.last_name)} onChange={onChange}
placeholder="Enter your last name" ref={ref}
className="rounded-md font-medium w-full" hasError={Boolean(errors.email)}
/> 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">Email</h4> <h4 className="text-sm">Role</h4>
<Controller <Controller
control={control} name="role"
name="email" control={control}
render={({ field: { value, onChange, ref } }) => ( rules={{ required: "This field is required" }}
<Input render={({ field: { value, onChange } }) => (
id="email" <CustomSelect
name="email" value={value}
type="email" onChange={onChange}
value={value} label={value ? value.toString() : "Select your role"}
onChange={onChange} buttonClassName={errors.role ? "border-red-500 bg-red-500/10" : ""}
ref={ref} width="w-full"
hasError={Boolean(errors.email)} input
placeholder="Enter your last name" >
className="rounded-md font-medium w-full" {USER_ROLES.map((item) => (
disabled <CustomSelect.Option key={item.value} value={item.value}>
/> {item.label}
)} </CustomSelect.Option>
/> ))}
</div> </CustomSelect>
)}
/>
{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">Role</h4> <h4 className="text-sm">Display name </h4>
<Controller <Controller
name="role" control={control}
control={control} name="display_name"
rules={{ required: "This field is required" }} rules={{
render={({ field: { value, onChange } }) => ( required: "Display name is required.",
<CustomSelect validate: (value) => {
value={value} if (value.trim().length < 1) return "Display name can't be empty.";
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>
<div className="flex flex-col gap-1"> if (value.split(" ").length > 1) return "Display name can't have two consecutive spaces.";
<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.split(" ").length > 1) return "Display name can't have two consecutive spaces."; if (value.replace(/\s/g, "").length < 1)
return "Display name must be at least 1 characters long.";
if (value.replace(/\s/g, "").length < 1) if (value.replace(/\s/g, "").length > 20)
return "Display name must be at least 1 characters long."; return "Display name must be less than 20 characters long.";
if (value.replace(/\s/g, "").length > 20) return true;
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>
return true; <div className="flex flex-col gap-1">
}, <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>
<div className="flex flex-col gap-1"> <Controller
<h4 className="text-sm">Timezone </h4> name="user_timezone"
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>
<Controller <div className="flex items-center justify-between py-2">
name="user_timezone" <Button variant="primary" type="submit" loading={isSubmitting}>
control={control} {isSubmitting ? "Updating Profile..." : "Update Profile"}
rules={{ required: "This field is required" }} </Button>
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>
</div> </div>
@ -400,7 +389,7 @@ const Profile: NextPage = () => {
<Spinner /> <Spinner />
</div> </div>
)} )}
</WorkspaceAuthorizationLayout> </WorkspaceSettingLayout>
); );
}; };

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

@ -5,11 +5,10 @@ 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 { AppLayout } from "layouts/app-layout"; import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout";
// components // components
import { CustomThemeSelector, ThemeSwitch } from "components/core"; import { CustomThemeSelector, ThemeSwitch } from "components/core";
import { SettingsSidebar } from "components/project"; import { WorkspaceSettingHeader } from "components/headers";
import { ProfilePreferencesHeader } from "components/headers";
// ui // ui
import { Spinner } from "@plane/ui"; import { Spinner } from "@plane/ui";
// constants // constants
@ -45,37 +44,29 @@ const ProfilePreferencesPage = observer(() => {
}; };
return ( return (
<AppLayout header={<ProfilePreferencesHeader />}> <WorkspaceSettingLayout header={<WorkspaceSettingHeader title="My Profile Preferences" />}>
<> {userStore.currentUser ? (
{userStore.currentUser ? ( <div className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex flex-row gap-2 h-full"> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0"> <h3 className="text-xl font-medium">Preferences</h3>
<SettingsSidebar /> </div>
<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="pr-9 py-8 w-full overflow-y-auto"> <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<h3 className="text-xl font-medium">Preferences</h3>
</div>
<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 className="col-span-12 sm:col-span-6">
<ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
</div>
</div>
{userTheme?.theme === "custom" && <CustomThemeSelector />}
</div> </div>
</div> </div>
) : ( {userTheme?.theme === "custom" && <CustomThemeSelector />}
<div className="grid h-full w-full place-items-center px-4 sm:px-0"> </div>
<Spinner /> ) : (
</div> <div className="grid h-full w-full place-items-center px-4 sm:px-0">
)} <Spinner />
</> </div>
</AppLayout> )}
</WorkspaceSettingLayout>
); );
}); });

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

@ -1,30 +1,25 @@
import React from "react"; import React from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Link from "next/link";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
// services // services
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
// layouts // layouts
import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; import { ProjectSettingLayout } from "layouts/setting-layout/project-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";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// components // components
import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation"; import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation";
import { SettingsSidebar } from "components/project"; import { ProjectSettingHeader } from "components/headers";
// ui
import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
import { IProject } from "types"; import { IProject } from "types";
// constant // constant
import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys"; import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
// services // services
const projectService = new ProjectService(); const projectService = new ProjectService();
@ -75,35 +70,15 @@ const AutomationsSettings: NextPage = () => {
const isAdmin = memberDetails?.role === 20; const isAdmin = memberDetails?.role === 20;
return ( return (
<ProjectAuthorizationWrapper <ProjectSettingLayout header={<ProjectSettingHeader title="Automations Settings" />}>
breadcrumbs={ <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<Breadcrumbs onBack={() => router.back()}> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<BreadcrumbItem <h3 className="text-xl font-medium">Automations</h3>
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Automations Settings" unshrinkTitle />
</Breadcrumbs>
}
>
<div className="flex flex-row gap-2 h-full">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<SettingsSidebar />
</div> </div>
<section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> <AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />
<h3 className="text-xl font-medium">Automations</h3> </section>
</div> </ProjectSettingLayout>
<AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />
<AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />
</section>
</div>
</ProjectAuthorizationWrapper>
); );
}; };

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

@ -1,21 +1,21 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Link from "next/link";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
// services // services
import { ProjectService, ProjectEstimateService } from "services/project"; 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 { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout";
// components // components
import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates"; import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates";
import { SettingsSidebar } from "components/project"; import { ProjectSettingHeader } from "components/headers";
//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";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui"; import { Button, Loader } from "@plane/ui";
import { EmptyState } from "components/common"; import { EmptyState } from "components/common";
// icons // icons
import { Plus } from "lucide-react"; import { Plus } from "lucide-react";
@ -26,8 +26,6 @@ import { IEstimate, IProject } from "types";
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys // fetch-keys
import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys"; import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
// services // services
const projectService = new ProjectService(); const projectService = new ProjectService();
@ -110,89 +108,70 @@ const EstimatesSettings: NextPage = () => {
}} }}
user={user} user={user}
/> />
<ProjectAuthorizationWrapper
breadcrumbs={ <ProjectSettingLayout header={<ProjectSettingHeader title="Estimates Settings" />}>
<Breadcrumbs onBack={() => router.back()}> <div className="pr-9 py-8 w-full overflow-y-auto">
<BreadcrumbItem <section className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
link={ <h3 className="text-xl font-medium">Estimates</h3>
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}> <div className="col-span-12 space-y-5 sm:col-span-7">
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}> <div className="flex items-center gap-2">
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p> <Button
</a> variant="primary"
</Link> onClick={() => {
} setEstimateToUpdate(undefined);
/> setEstimateFormOpen(true);
<BreadcrumbItem title="Estimates Settings" unshrinkTitle /> }}
</Breadcrumbs> >
} Add Estimate
> </Button>
<div className="flex flex-row gap-2 h-full"> {projectDetails?.estimate && (
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0"> <Button variant="neutral-primary" onClick={disableEstimates}>
<SettingsSidebar /> Disable Estimates
</div> </Button>
<div className="pr-9 py-8 flex flex-col w-full overflow-y-auto"> )}
<section className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200"> </div>
<h3 className="text-xl font-medium">Estimates</h3> </div>
<div className="col-span-12 space-y-5 sm:col-span-7"> </section>
<div className="flex items-center gap-2"> {estimatesList ? (
<Button estimatesList.length > 0 ? (
variant="primary" <section className="h-full bg-custom-background-100 overflow-y-auto">
onClick={() => { {estimatesList.map((estimate) => (
<SingleEstimate
key={estimate.id}
estimate={estimate}
editEstimate={(estimate) => editEstimate(estimate)}
handleEstimateDelete={(estimateId) => removeEstimate(estimateId)}
user={user}
/>
))}
</section>
) : (
<div className="h-full w-full overflow-y-auto">
<EmptyState
title="No estimates yet"
description="Estimates help you communicate the complexity of an issue."
image={emptyEstimate}
primaryButton={{
icon: <Plus className="h-4 w-4" />,
text: "Add Estimate",
onClick: () => {
setEstimateToUpdate(undefined); setEstimateToUpdate(undefined);
setEstimateFormOpen(true); setEstimateFormOpen(true);
}} },
> }}
Add Estimate />
</Button>
{projectDetails?.estimate && (
<Button variant="neutral-primary" onClick={disableEstimates}>
Disable Estimates
</Button>
)}
</div>
</div> </div>
</section> )
{estimatesList ? ( ) : (
estimatesList.length > 0 ? ( <Loader className="mt-5 space-y-5">
<section className="h-full bg-custom-background-100 overflow-y-auto"> <Loader.Item height="40px" />
{estimatesList.map((estimate) => ( <Loader.Item height="40px" />
<SingleEstimate <Loader.Item height="40px" />
key={estimate.id} <Loader.Item height="40px" />
estimate={estimate} </Loader>
editEstimate={(estimate) => editEstimate(estimate)} )}
handleEstimateDelete={(estimateId) => removeEstimate(estimateId)}
user={user}
/>
))}
</section>
) : (
<div className="h-full w-full overflow-y-auto">
<EmptyState
title="No estimates yet"
description="Estimates help you communicate the complexity of an issue."
image={emptyEstimate}
primaryButton={{
icon: <Plus className="h-4 w-4" />,
text: "Add Estimate",
onClick: () => {
setEstimateToUpdate(undefined);
setEstimateFormOpen(true);
},
}}
/>
</div>
)
) : (
<Loader className="mt-5 space-y-5">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
)}
</div>
</div> </div>
</ProjectAuthorizationWrapper> </ProjectSettingLayout>
</> </>
); );
}; };

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

@ -1,20 +1,19 @@
import React from "react"; import React from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Link from "next/link";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
// services // services
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 { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; import { ProjectSettingLayout } from "layouts/setting-layout/project-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";
// components // components
import { SettingsSidebar } from "components/project"; import { ProjectSettingHeader } from "components/headers";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, ContrastIcon, DiceIcon, ToggleSwitch } from "@plane/ui"; import { ContrastIcon, DiceIcon, ToggleSwitch } from "@plane/ui";
// icons // icons
import { FileText, Inbox, Layers } from "lucide-react"; import { FileText, Inbox, Layers } from "lucide-react";
// types // types
@ -22,8 +21,6 @@ import { IProject, IUser } from "types";
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys // fetch-keys
import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys"; import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const featuresList = [ const featuresList = [
{ {
@ -139,72 +136,52 @@ const FeaturesSettings: NextPage = () => {
const isAdmin = memberDetails?.role === 20; const isAdmin = memberDetails?.role === 20;
return ( return (
<ProjectAuthorizationWrapper <ProjectSettingLayout header={<ProjectSettingHeader title="Features Settings" />}>
breadcrumbs={ <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<Breadcrumbs onBack={() => router.back()}> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<BreadcrumbItem <h3 className="text-xl font-medium">Features</h3>
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Features Settings" unshrinkTitle />
</Breadcrumbs>
}
>
<div className="flex flex-row gap-2 h-full">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<SettingsSidebar />
</div> </div>
<section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> <div>
<div className="flex items-center py-3.5 border-b border-custom-border-200"> {featuresList.map((feature) => (
<h3 className="text-xl font-medium">Features</h3> <div
</div> 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"
{featuresList.map((feature) => ( >
<div <div className="flex items-start gap-3">
key={feature.property} <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4" {feature.icon}
> </div>
<div className="flex items-start gap-3"> <div className="">
<div className="flex items-center justify-center p-3 rounded bg-custom-background-90"> <h4 className="text-sm font-medium">{feature.title}</h4>
{feature.icon} <p className="text-sm text-custom-text-200 tracking-tight">{feature.description}</p>
</div>
<div className="">
<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
</div> value={projectDetails?.[feature.property as keyof IProject]}
</section> onChange={() => {
</div> trackEventService.trackMiscellaneousEvent(
</ProjectAuthorizationWrapper> {
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>
); );
}; };

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

@ -1,28 +1,25 @@
import { useState } from "react"; import { useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr"; import useSWR from "swr";
import { Disclosure, Transition } from "@headlessui/react";
// layouts // layouts
import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout";
// services
import { ProjectService } from "services/project";
// components // components
import { DeleteProjectModal, ProjectDetailsForm, ProjectDetailsFormLoader, SettingsSidebar } from "components/project"; import { ProjectSettingHeader } from "components/headers";
import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui"; import {
import { ChevronDown, ChevronUp } from "lucide-react"; DeleteProjectModal,
// helpers DeleteProjectSection,
import { truncateText } from "helpers/string.helper"; ProjectDetailsForm,
ProjectDetailsFormLoader,
} from "components/project";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys // fetch-keys
import { USER_PROJECT_VIEW } from "constants/fetch-keys";
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 // services
const projectService = new ProjectService(); // const projectService = new ProjectService();
const GeneralSettings: NextPage = observer(() => { const GeneralSettings: NextPage = observer(() => {
const { project: projectStore } = useMobxStore(); const { project: projectStore } = useMobxStore();
@ -33,9 +30,6 @@ const GeneralSettings: NextPage = observer(() => {
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
// derived values // derived values
const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null; const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
console.log("projectDetails", projectDetails);
console.log("condition", workspaceSlug && projectId && !projectDetails);
console.log("wow", projectId);
// api call to fetch project details // api call to fetch project details
useSWR( useSWR(
workspaceSlug && projectId ? "PROJECT_DETAILS" : null, workspaceSlug && projectId ? "PROJECT_DETAILS" : null,
@ -43,36 +37,15 @@ const GeneralSettings: NextPage = observer(() => {
? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString()) ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
: null : null
); );
// API call to fetch user privileges
const { data: memberDetails } = useSWR(
workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
workspaceSlug && projectId
? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
: null
);
// const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network); // const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network);
// const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network")); // const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
const isAdmin = memberDetails?.role === 20; const isAdmin = projectDetails?.member_role === 20;
console.log("isAdmin", isAdmin);
return ( return (
<ProjectAuthorizationWrapper <ProjectSettingLayout header={<ProjectSettingHeader title="General Settings" />}>
breadcrumbs={
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="General Settings" unshrinkTitle />
</Breadcrumbs>
}
>
{projectDetails && ( {projectDetails && (
<DeleteProjectModal <DeleteProjectModal
project={projectDetails} project={projectDetails}
@ -81,69 +54,21 @@ const GeneralSettings: NextPage = observer(() => {
/> />
)} )}
<div className="flex flex-row gap-2 h-full"> <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0"> {projectDetails && workspaceSlug ? (
<SettingsSidebar /> <ProjectDetailsForm project={projectDetails} workspaceSlug={workspaceSlug.toString()} isAdmin={isAdmin} />
</div> ) : (
<div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> <ProjectDetailsFormLoader />
{projectDetails && workspaceSlug ? ( )}
<ProjectDetailsForm project={projectDetails} workspaceSlug={workspaceSlug.toString()} isAdmin={isAdmin} />
) : (
<ProjectDetailsFormLoader />
)}
{isAdmin && ( {isAdmin && (
<Disclosure as="div" className="border-t border-custom-border-400"> <DeleteProjectSection
{({ open }) => ( projectDetails={projectDetails}
<div className="w-full"> handleDelete={() => setSelectedProject(projectDetails.id ?? null)}
<Disclosure.Button />
as="button" )}
type="button"
className="flex items-center justify-between w-full py-4"
>
<span className="text-xl tracking-tight">Delete Project</span>
{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 project delete page is a critical area that requires careful
consideration and attention. When deleting a project, all of the data and resources within
that project will be permanently removed and cannot be recovered.
</span>
<div>
{projectDetails ? (
<div>
<Button variant="danger" onClick={() => setSelectedProject(projectDetails.id ?? null)}>
Delete my project
</Button>
</div>
) : (
<Loader className="mt-2 w-full">
<Loader.Item height="38px" width="144px" />
</Loader>
)}
</div>
</div>
</Disclosure.Panel>
</Transition>
</div>
)}
</Disclosure>
)}
</div>
</div> </div>
</ProjectAuthorizationWrapper> </ProjectSettingLayout>
); );
}); });

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

@ -1,29 +1,29 @@
import React from "react"; import React from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr"; import useSWR from "swr";
// layouts // layouts
import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout";
// services // services
import { IntegrationService } from "services/integrations"; import { IntegrationService } from "services/integrations";
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
// components // components
import { SettingsSidebar, SingleIntegration } from "components/project"; import { SingleIntegration } from "components/project";
import { ProjectSettingHeader } from "components/headers";
// ui // ui
import { EmptyState } from "components/common"; import { EmptyState } from "components/common";
import { BreadcrumbItem, Breadcrumbs, Loader } from "@plane/ui"; import { Loader } from "@plane/ui";
// images // images
import emptyIntegration from "public/empty-state/integration.svg"; import emptyIntegration from "public/empty-state/integration.svg";
// types // types
import { IProject } from "types"; import { IProject } from "types";
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys // fetch-keys
import { PROJECT_DETAILS, USER_PROJECT_VIEW, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys"; import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
// helper // helper
import { truncateText } from "helpers/string.helper"; // import { useMobxStore } from "lib/mobx/store-provider";
// services // services
const integrationService = new IntegrationService(); const integrationService = new IntegrationService();
@ -33,6 +33,10 @@ const ProjectIntegrations: NextPage = () => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
// const { project: projectStore } = useMobxStore();
// const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
const { data: projectDetails } = useSWR<IProject>( const { data: projectDetails } = useSWR<IProject>(
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
@ -43,70 +47,43 @@ const ProjectIntegrations: NextPage = () => {
() => (workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null) () => (workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null)
); );
const { data: memberDetails } = useSWR( const isAdmin = projectDetails?.member_role === 20;
workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
workspaceSlug && projectId
? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
: null
);
const isAdmin = memberDetails?.role === 20;
return ( return (
<ProjectAuthorizationWrapper <ProjectSettingLayout header={<ProjectSettingHeader title="Integrations Settings" />}>
breadcrumbs={ <div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<Breadcrumbs onBack={() => router.back()}> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<BreadcrumbItem <h3 className="text-xl font-medium">Integrations</h3>
link={
<Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Integrations Settings" unshrinkTitle />
</Breadcrumbs>
}
>
<div className="flex flex-row gap-2 h-full">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<SettingsSidebar />
</div> </div>
<div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> {workspaceIntegrations ? (
<div className="flex items-center py-3.5 border-b border-custom-border-200"> workspaceIntegrations.length > 0 ? (
<h3 className="text-xl font-medium">Integrations</h3> <div>
</div> {workspaceIntegrations.map((integration) => (
{workspaceIntegrations ? ( <SingleIntegration key={integration.integration_detail.id} integration={integration} />
workspaceIntegrations.length > 0 ? ( ))}
<div> </div>
{workspaceIntegrations.map((integration) => (
<SingleIntegration key={integration.integration_detail.id} integration={integration} />
))}
</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}
/>
)
) : ( ) : (
<Loader className="space-y-5"> <EmptyState
<Loader.Item height="40px" /> 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> text: "Configure now",
)} onClick: () => router.push(`/${workspaceSlug}/settings/integrations`),
</div> }}
disabled={!isAdmin}
/>
)
) : (
<Loader className="space-y-5">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
)}
</div> </div>
</ProjectAuthorizationWrapper> </ProjectSettingLayout>
); );
}; };

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

@ -1,17 +1,15 @@
import React, { useState, useRef } from "react"; import React, { useState, useRef } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr"; import useSWR from "swr";
// hooks // hooks
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
// services // services
import { ProjectService } from "services/project";
import { IssueLabelService } from "services/issue"; import { IssueLabelService } from "services/issue";
// layouts // layouts
import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout";
// components // components
import { import {
CreateUpdateLabelInline, CreateUpdateLabelInline,
@ -20,9 +18,9 @@ import {
SingleLabel, SingleLabel,
SingleLabelGroup, SingleLabelGroup,
} from "components/labels"; } from "components/labels";
import { SettingsSidebar } from "components/project"; import { ProjectSettingHeader } from "components/headers";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui"; import { Button, Loader } from "@plane/ui";
import { EmptyState } from "components/common"; import { EmptyState } from "components/common";
// images // images
import emptyLabel from "public/empty-state/label.svg"; import emptyLabel from "public/empty-state/label.svg";
@ -30,12 +28,9 @@ import emptyLabel from "public/empty-state/label.svg";
import { IIssueLabels } from "types"; import { IIssueLabels } from "types";
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys // fetch-keys
import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
// services // services
const projectService = new ProjectService();
const issueLabelService = new IssueLabelService(); const issueLabelService = new IssueLabelService();
const LabelsSettings: NextPage = () => { const LabelsSettings: NextPage = () => {
@ -60,11 +55,6 @@ const LabelsSettings: NextPage = () => {
const scrollToRef = useRef<HTMLDivElement>(null); const scrollToRef = useRef<HTMLDivElement>(null);
const { data: projectDetails } = useSWR(
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
);
const { data: issueLabels } = useSWR( const { data: issueLabels } = useSWR(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null, workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId workspaceSlug && projectId
@ -102,78 +92,43 @@ const LabelsSettings: NextPage = () => {
onClose={() => setSelectDeleteLabel(null)} onClose={() => setSelectDeleteLabel(null)}
user={user} user={user}
/> />
<ProjectAuthorizationWrapper <ProjectSettingLayout header={<ProjectSettingHeader title="Labels Settings" />}>
breadcrumbs={ <section className="pr-9 py-8 gap-10 w-full overflow-y-auto">
<Breadcrumbs onBack={() => router.back()}> <div className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
<BreadcrumbItem <h3 className="text-xl font-medium">Labels</h3>
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}> <Button variant="primary" onClick={newLabel} size="sm">
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}> Add label
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p> </Button>
</a>
</Link>
}
/>
<BreadcrumbItem title="Labels Settings" unshrinkTitle />
</Breadcrumbs>
}
>
<div className="flex flex-row gap-2 h-full">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<SettingsSidebar />
</div> </div>
<section className="pr-9 py-8 gap-10 w-full overflow-y-auto"> <div className="space-y-3 py-6 h-full w-full">
<div className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200"> {labelForm && (
<h3 className="text-xl font-medium">Labels</h3> <CreateUpdateLabelInline
labelForm={labelForm}
setLabelForm={setLabelForm}
isUpdating={isUpdating}
labelToUpdate={labelToUpdate}
onClose={() => {
setLabelForm(false);
setIsUpdating(false);
setLabelToUpdate(null);
}}
ref={scrollToRef}
/>
)}
<>
{issueLabels ? (
issueLabels.length > 0 ? (
issueLabels.map((label) => {
const children = issueLabels?.filter((l) => l.parent === label.id);
<Button variant="primary" onClick={newLabel} size="sm"> if (children && children.length === 0) {
Add label if (!label.parent)
</Button>
</div>
<div className="space-y-3 py-6 h-full w-full">
{labelForm && (
<CreateUpdateLabelInline
labelForm={labelForm}
setLabelForm={setLabelForm}
isUpdating={isUpdating}
labelToUpdate={labelToUpdate}
onClose={() => {
setLabelForm(false);
setIsUpdating(false);
setLabelToUpdate(null);
}}
ref={scrollToRef}
/>
)}
<>
{issueLabels ? (
issueLabels.length > 0 ? (
issueLabels.map((label) => {
const children = issueLabels?.filter((l) => l.parent === label.id);
if (children && children.length === 0) {
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 (
<SingleLabelGroup <SingleLabel
key={label.id} key={label.id}
label={label} label={label}
labelChildren={children} addLabelToGroup={() => addLabelToGroup(label)}
addLabelToGroup={addLabelToGroup}
editLabel={(label) => { editLabel={(label) => {
editLabel(label); editLabel(label);
scrollToRef.current?.scrollIntoView({ scrollToRef.current?.scrollIntoView({
@ -181,35 +136,49 @@ const LabelsSettings: NextPage = () => {
}); });
}} }}
handleLabelDelete={() => setSelectDeleteLabel(label)} handleLabelDelete={() => setSelectDeleteLabel(label)}
user={user}
/> />
); );
}) } else
) : ( return (
<EmptyState <SingleLabelGroup
title="No labels yet" key={label.id}
description="Create labels to help organize and filter issues in you project" label={label}
image={emptyLabel} labelChildren={children}
primaryButton={{ addLabelToGroup={addLabelToGroup}
text: "Add label", editLabel={(label) => {
onClick: () => newLabel(), editLabel(label);
}} scrollToRef.current?.scrollIntoView({
isFullScreen={false} behavior: "smooth",
/> });
) }}
handleLabelDelete={() => setSelectDeleteLabel(label)}
user={user}
/>
);
})
) : ( ) : (
<Loader className="space-y-5"> <EmptyState
<Loader.Item height="40px" /> 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> text: "Add label",
)} onClick: () => newLabel(),
</> }}
</div> />
</section> )
</div> ) : (
</ProjectAuthorizationWrapper> <Loader className="space-y-5">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
)}
</>
</div>
</section>
</ProjectSettingLayout>
</> </>
); );
}; };

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

@ -12,13 +12,14 @@ 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 { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; import { ProjectSettingLayout } from "layouts/setting-layout/project-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";
import { MemberSelect, SettingsSidebar } from "components/project"; import { MemberSelect } from "components/project";
import { ProjectSettingHeader } from "components/headers";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui"; import { Button, Loader } from "@plane/ui";
import { CustomMenu, CustomSelect } from "components/ui"; import { CustomMenu, CustomSelect } from "components/ui";
// icons // icons
import { ChevronDown, X } from "lucide-react"; import { ChevronDown, X } from "lucide-react";
@ -36,8 +37,6 @@ import {
} from "constants/fetch-keys"; } from "constants/fetch-keys";
// constants // constants
import { ROLE } from "constants/workspace"; import { ROLE } from "constants/workspace";
// helper
import { truncateText } from "helpers/string.helper";
const defaultValues: Partial<IProject> = { const defaultValues: Partial<IProject> = {
project_lead: null, project_lead: null,
@ -198,22 +197,7 @@ const MembersSettings: NextPage = () => {
const isAdmin = memberDetails?.role === 20; const isAdmin = memberDetails?.role === 20;
return ( return (
<ProjectAuthorizationWrapper <ProjectSettingLayout header={<ProjectSettingHeader title="Members Settings" />}>
breadcrumbs={
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Members Settings" unshrinkTitle />
</Breadcrumbs>
}
>
<ConfirmProjectMemberRemove <ConfirmProjectMemberRemove
isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)} isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
onClose={() => { onClose={() => {
@ -252,200 +236,195 @@ const MembersSettings: NextPage = () => {
user={user} user={user}
onSuccess={() => mutateMembers()} onSuccess={() => mutateMembers()}
/> />
<div className="flex flex-row gap-2 h-full"> <section className={`pr-9 py-8 w-full overflow-y-auto`}>
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0"> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<SettingsSidebar /> <h3 className="text-xl font-medium">Defaults</h3>
</div> </div>
<section className={`pr-9 py-8 w-full overflow-y-auto`}> <div className="flex flex-col gap-2 pb-4 w-full">
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <div className="flex items-center py-8 gap-4 w-full">
<h3 className="text-xl font-medium">Defaults</h3> <div className="flex flex-col gap-2 w-1/2">
</div> <h4 className="text-sm">Project Lead</h4>
<div className="flex flex-col gap-2 pb-4 w-full"> <div className="">
<div className="flex items-center py-8 gap-4 w-full"> {projectDetails ? (
<div className="flex flex-col gap-2 w-1/2"> <Controller
<h4 className="text-sm">Project Lead</h4> control={control}
<div className=""> name="project_lead"
{projectDetails ? ( render={({ field: { value } }) => (
<Controller <MemberSelect
control={control} value={value}
name="project_lead" onChange={(val: string) => {
render={({ field: { value } }) => ( submitChanges({ project_lead: val });
<MemberSelect }}
value={value} isDisabled={!isAdmin}
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>
) : 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">
{(member.display_name || member.email)?.charAt(0)}
</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>
)}
{isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
</div> </div>
</div> ) : member.display_name || member.email ? (
<div className="flex items-center gap-3 text-xs"> <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
{!member.member && ( {(member.display_name || member.email)?.charAt(0)}
<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> <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
)} ?
<CustomSelect </div>
customButton={ )}
<div className="flex item-center gap-1"> <div>
<span {member.member ? (
className={`flex items-center text-sm font-medium ${ <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400" <a className="text-sm">
}`} <span>
> {member.first_name} {member.last_name}
{ROLE[member.role as keyof typeof ROLE]}
</span> </span>
{member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />} <span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
</div> </a>
} </Link>
value={member.role} ) : (
onChange={(value: 5 | 10 | 15 | 20 | undefined) => { <h4 className="text-sm">{member.display_name || member.email}</h4>
if (!activeWorkspace || !projectDetails) return; )}
{isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
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">
: null} {!member.member && (
</div> <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
</section> </div>
</div> )}
</ProjectAuthorizationWrapper> <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>
))
: null}
</div>
)}
</section>
</ProjectSettingLayout>
); );
}; };

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

@ -1,7 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr"; import useSWR from "swr";
@ -11,17 +10,16 @@ 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 { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout";
// components // components
import { CreateUpdateStateInline, DeleteStateModal, SingleState, StateGroup } from "components/states"; import { CreateUpdateStateInline, DeleteStateModal, SingleState, StateGroup } from "components/states";
import { SettingsSidebar } from "components/project"; import { ProjectSettingHeader } from "components/headers";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, Loader } from "@plane/ui"; import { Loader } from "@plane/ui";
// icons // icons
import { Plus } from "lucide-react"; import { Plus } from "lucide-react";
// helpers // helpers
import { getStatesList, orderStateGroups } from "helpers/state.helper"; import { getStatesList, orderStateGroups } from "helpers/state.helper";
import { truncateText } from "helpers/string.helper";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys // fetch-keys
@ -59,101 +57,81 @@ const StatesSettings: NextPage = () => {
onClose={() => setSelectDeleteState(null)} onClose={() => setSelectDeleteState(null)}
user={user} user={user}
/> />
<ProjectAuthorizationWrapper <ProjectSettingLayout header={<ProjectSettingHeader title="States Settings" />}>
breadcrumbs={ <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
<Breadcrumbs onBack={() => router.back()}> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<BreadcrumbItem <h3 className="text-xl font-medium">States</h3>
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="States Settings" unshrinkTitle />
</Breadcrumbs>
}
>
<div className="flex flex-row gap-2 h-full">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<SettingsSidebar />
</div> </div>
<div className="pr-9 py-8 gap-10 w-full overflow-y-auto"> <div className="space-y-8 py-6">
<div className="flex items-center py-3.5 border-b border-custom-border-200"> {states && projectDetails && orderedStateGroups ? (
<h3 className="text-xl font-medium">States</h3> Object.keys(orderedStateGroups).map((key) => {
</div> if (orderedStateGroups[key].length !== 0)
<div className="space-y-8 py-6"> return (
{states && projectDetails && orderedStateGroups ? ( <div key={key} className="flex flex-col gap-2">
Object.keys(orderedStateGroups).map((key) => { <div className="flex w-full justify-between">
if (orderedStateGroups[key].length !== 0) <h4 className="text-base font-medium text-custom-text-200 capitalize">{key}</h4>
return ( <button
<div key={key} className="flex flex-col gap-2"> type="button"
<div className="flex w-full justify-between"> className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
<h4 className="text-base font-medium text-custom-text-200 capitalize">{key}</h4> onClick={() => setActiveGroup(key as keyof StateGroup)}
<button >
type="button" <Plus className="h-4 w-4" />
className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none" </button>
onClick={() => setActiveGroup(key as keyof StateGroup)} </div>
> <div className="flex flex-col gap-2 rounded">
<Plus className="h-4 w-4" /> {key === activeGroup && (
</button> <CreateUpdateStateInline
</div> groupLength={orderedStateGroups[key].length}
<div className="flex flex-col gap-2 rounded"> onClose={() => {
{key === activeGroup && ( setActiveGroup(null);
<CreateUpdateStateInline setSelectedState(null);
groupLength={orderedStateGroups[key].length} }}
onClose={() => { data={null}
setActiveGroup(null); selectedGroup={key as keyof StateGroup}
setSelectedState(null); user={user}
}} />
data={null} )}
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}
/> />
)} ) : (
{orderedStateGroups[key].map((state, index) => <div className="border-b border-custom-border-200 last:border-b-0" key={state.id}>
state.id !== selectedState ? ( <CreateUpdateStateInline
<SingleState onClose={() => {
key={state.id} setActiveGroup(null);
index={index} setSelectedState(null);
state={state} }}
statesList={statesList ?? []} groupLength={orderedStateGroups[key].length}
handleEditState={() => setSelectedState(state.id)} data={statesList?.find((state) => state.id === selectedState) ?? null}
handleDeleteState={() => setSelectDeleteState(state.id)} selectedGroup={key as keyof StateGroup}
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.Item height="40px" /> <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> <Loader.Item height="40px" />
)} </Loader>
</div> )}
</div> </div>
</div> </div>
</ProjectAuthorizationWrapper> </ProjectSettingLayout>
</> </>
); );
}; };

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

@ -1,76 +1,32 @@
import React from "react"; import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
// services
import { WorkspaceService } from "services/workspace.service";
// layouts // layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy"; import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout";
// component // component
import { SettingsSidebar } from "components/project"; import { WorkspaceSettingHeader } from "components/headers";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui"; import { Button } from "@plane/ui";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys
import { WORKSPACE_DETAILS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
// services const BillingSettings: NextPage = () => (
const workspaceService = new WorkspaceService(); <WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}>
<section className="pr-9 py-8 w-full overflow-y-auto">
const BillingSettings: NextPage = () => { <div>
const router = useRouter(); <div className="flex items-center py-3.5 border-b border-custom-border-200">
const { workspaceSlug } = router.query; <h3 className="text-xl font-medium">Billing & Plans</h3>
const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
);
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Billing & Plans Settings" unshrinkTitle />
</Breadcrumbs>
}
>
<div className="flex flex-row gap-2 h-full">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<SettingsSidebar />
</div> </div>
<section className="pr-9 py-8 w-full overflow-y-auto">
<div>
<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>
<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>
</div> </div>
</WorkspaceAuthorizationLayout> <div className="px-4 py-6">
); <div>
}; <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>
);
export default BillingSettings; export default BillingSettings;

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

@ -1,65 +1,20 @@
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
// services
import { WorkspaceService } from "services/workspace.service";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
// components // components
import ExportGuide from "components/exporter/guide"; import ExportGuide from "components/exporter/guide";
import { SettingsSidebar } from "components/project";
// ui
import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys
import { WORKSPACE_DETAILS } from "constants/fetch-keys";
// helper // helper
import { truncateText } from "helpers/string.helper"; import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout";
import { WorkspaceSettingHeader } from "components/headers";
// services const ImportExport: NextPage = () => (
const workspaceService = new WorkspaceService(); <WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
<div className="pr-9 py-8 w-full overflow-y-auto">
const ImportExport: NextPage = () => { <div className="flex items-center py-3.5 border-b border-custom-border-200">
const router = useRouter(); <h3 className="text-xl font-medium">Exports</h3>
const { workspaceSlug } = router.query;
const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
);
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Export Settings" unshrinkTitle />
</Breadcrumbs>
}
>
<div className="flex flex-row gap-2 h-full">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<SettingsSidebar />
</div>
<div 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">Exports</h3>
</div>
<ExportGuide />
</div>
</div> </div>
</WorkspaceAuthorizationLayout> <ExportGuide />
); </div>
}; </WorkspaceSettingLayout>
);
export default ImportExport; export default ImportExport;

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

@ -1,65 +1,20 @@
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
// services
import { WorkspaceService } from "services/workspace.service";
// layouts // layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy"; import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout";
// components // components
import IntegrationGuide from "components/integration/guide"; import IntegrationGuide from "components/integration/guide";
import { SettingsSidebar } from "components/project"; import { WorkspaceSettingHeader } from "components/headers";
// ui
import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys
import { WORKSPACE_DETAILS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
// services const ImportExport: NextPage = () => (
const workspaceService = new WorkspaceService(); <WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Import Settings" />}>
<section className="pr-9 py-8 w-full overflow-y-auto">
const ImportExport: NextPage = () => { <div className="flex items-center py-3.5 border-b border-custom-border-200">
const router = useRouter(); <h3 className="text-xl font-medium">Imports</h3>
const { workspaceSlug } = router.query;
const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
);
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Import/ Export Settings" unshrinkTitle />
</Breadcrumbs>
}
>
<div className="flex flex-row gap-2 h-full">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<SettingsSidebar />
</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">Imports</h3>
</div>
<IntegrationGuide />
</section>
</div> </div>
</WorkspaceAuthorizationLayout> <IntegrationGuide />
); </section>
}; </WorkspaceSettingLayout>
);
export default ImportExport; export default ImportExport;

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

@ -13,19 +13,17 @@ 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 { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy"; import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout";
// components // components
import { ImageUploadModal } from "components/core"; import { ImageUploadModal } from "components/core";
import { DeleteWorkspaceModal } from "components/workspace"; import { DeleteWorkspaceModal } from "components/workspace";
import { SettingsSidebar } from "components/project"; import { WorkspaceSettingHeader } from "components/headers";
// ui // ui
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
import { CustomSelect } from "components/ui"; import { CustomSelect } from "components/ui";
import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "@plane/ui"; import { Button, Input, Spinner } from "@plane/ui";
// icons // icons
import { ChevronDown, ChevronUp, Pencil } from "lucide-react"; import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
// helpers
import { truncateText } from "helpers/string.helper";
// types // types
import type { IWorkspace } from "types"; import type { IWorkspace } from "types";
import type { NextPage } from "next"; import type { NextPage } from "next";
@ -68,7 +66,6 @@ const WorkspaceSettings: NextPage = () => {
); );
const { const {
register,
handleSubmit, handleSubmit,
control, control,
reset, reset,
@ -156,13 +153,7 @@ const WorkspaceSettings: NextPage = () => {
const isAdmin = memberDetails?.role === 20; const isAdmin = memberDetails?.role === 20;
return ( return (
<WorkspaceAuthorizationLayout <WorkspaceSettingLayout header={<WorkspaceSettingHeader title="General Settings" />}>
breadcrumbs={
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Settings`} />
</Breadcrumbs>
}
>
<ImageUploadModal <ImageUploadModal
isOpen={isImageUploadModalOpen} isOpen={isImageUploadModalOpen}
onClose={() => setIsImageUploadModalOpen(false)} onClose={() => setIsImageUploadModalOpen(false)}
@ -184,190 +175,185 @@ const WorkspaceSettings: NextPage = () => {
data={activeWorkspace ?? null} data={activeWorkspace ?? null}
user={user} user={user}
/> />
<div className="flex flex-row gap-2 h-full"> {activeWorkspace ? (
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0"> <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<SettingsSidebar /> <div className="flex gap-5 items-center pb-7 border-b border-custom-border-200">
</div> <div className="flex flex-col gap-1">
{activeWorkspace ? ( <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
<div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
<div className="flex gap-5 items-center pb-7 border-b border-custom-border-200"> <div className="relative mx-auto flex h-14 w-14">
<div className="flex flex-col gap-1"> <img
<button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}> 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"> <>
<img <Pencil className="h-3 w-3" />
src={watch("logo")!} Edit 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"> "Upload logo"
{activeWorkspace?.name?.charAt(0) ?? "N"}
</div>
)} )}
</button> </button>
</div> </div>
<div className="flex flex-col gap-1"> </div>
<h3 className="text-lg font-semibold leading-6">{watch("name")}</h3> </div>
<span className="text-sm tracking-tight">{`${
typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "") <div className="flex flex-col gap-8 my-10">
}/${activeWorkspace.slug}`}</span> <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 item-center gap-2.5"> <div className="flex flex-col gap-1 ">
<button <h4 className="text-sm">Workspace Name</h4>
className="flex items-center gap-1.5 text-xs text-left text-custom-primary-100 font-medium" <Controller
onClick={() => setIsImageUploadModalOpen(true)} control={control}
disabled={!isAdmin} 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"
> >
{watch("logo") && watch("logo") !== null && watch("logo") !== "" ? ( <span className="text-xl tracking-tight">Delete Workspace</span>
<> {/* <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" /> */}
<Pencil className="h-3 w-3" /> {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
Edit logo </Disclosure.Button>
</>
) : (
"Upload logo"
)}
</button>
</div>
</div>
</div>
<div className="flex flex-col gap-8 my-10"> <Transition
<div className="grid grid-col grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-10 w-full"> show={open}
<div className="flex flex-col gap-1 "> enter="transition duration-100 ease-out"
<h4 className="text-sm">Workspace Name</h4> enterFrom="transform opacity-0"
<Controller enterTo="transform opacity-100"
control={control} leave="transition duration-75 ease-out"
name="name" leaveFrom="transform opacity-100"
rules={{ leaveTo="transform opacity-0"
required: "Name is required", >
maxLength: { <Disclosure.Panel>
value: 80, <div className="flex flex-col gap-8">
message: "Workspace name should not exceed 80 characters", <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
render={({ field: { value, onChange, ref } }) => ( that workspace will be permanently removed and cannot be recovered.
<Input </span>
id="name" <div>
name="name" <Button variant="danger" onClick={() => setIsOpen(true)}>
type="text" Delete my workspace
value={value} </Button>
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: { value, 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> </div>
</Disclosure.Panel> </div>
</Transition> </Disclosure.Panel>
</div> </Transition>
)} </div>
</Disclosure> )}
)} </Disclosure>
</div> )}
) : ( </div>
<div className="flex items-center justify-center h-full w-full px-4 sm:px-0"> ) : (
<Spinner /> <div className="flex items-center justify-center h-full w-full px-4 sm:px-0">
</div> <Spinner />
)} </div>
</div> )}
</WorkspaceAuthorizationLayout> </WorkspaceSettingLayout>
); );
}; };

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

@ -1,82 +1,54 @@
import React from "react"; import React from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr"; import useSWR from "swr";
// services // services
import { WorkspaceService } from "services/workspace.service";
import { IntegrationService } from "services/integrations"; import { IntegrationService } from "services/integrations";
// layouts // layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy"; import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout";
// components // components
import { SingleIntegrationCard } from "components/integration"; import { SingleIntegrationCard } from "components/integration";
import { SettingsSidebar } from "components/project"; import { WorkspaceSettingHeader } from "components/headers";
import { Loader } from "@plane/ui";
// ui // ui
import { IntegrationAndImportExportBanner } from "components/ui"; import { IntegrationAndImportExportBanner } from "components/ui";
import { BreadcrumbItem, Breadcrumbs, Loader } from "@plane/ui";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys // fetch-keys
import { WORKSPACE_DETAILS, APP_INTEGRATIONS } from "constants/fetch-keys"; import { APP_INTEGRATIONS } from "constants/fetch-keys";
// helper // helper
import { truncateText } from "helpers/string.helper";
// services // services
const workspaceService = new WorkspaceService();
const integrationService = new IntegrationService(); const integrationService = new IntegrationService();
const WorkspaceIntegrations: NextPage = () => { const WorkspaceIntegrations: NextPage = () => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
);
const { data: appIntegrations } = useSWR(workspaceSlug ? APP_INTEGRATIONS : null, () => const { data: appIntegrations } = useSWR(workspaceSlug ? APP_INTEGRATIONS : null, () =>
workspaceSlug ? integrationService.getAppIntegrationsList() : null workspaceSlug ? integrationService.getAppIntegrationsList() : null
); );
return ( return (
<WorkspaceAuthorizationLayout <WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
breadcrumbs={ <section className="pr-9 py-8 w-full overflow-y-auto">
<Breadcrumbs onBack={() => router.back()}> <IntegrationAndImportExportBanner bannerName="Integrations" />
<BreadcrumbItem <div>
link={ {appIntegrations ? (
<Link href={`/${workspaceSlug}`}> appIntegrations.map((integration) => (
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}> <SingleIntegrationCard key={integration.id} integration={integration} />
<p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p> ))
</a> ) : (
</Link> <Loader className="space-y-2.5 mt-4">
} <Loader.Item height="89px" />
/> <Loader.Item height="89px" />
<BreadcrumbItem title="Integrations Settings" unshrinkTitle /> </Loader>
</Breadcrumbs> )}
}
>
<div className="flex flex-row gap-2 h-full">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<SettingsSidebar />
</div> </div>
<section className="pr-9 py-8 w-full overflow-y-auto"> </section>
<IntegrationAndImportExportBanner bannerName="Integrations" /> </WorkspaceSettingLayout>
<div>
{appIntegrations ? (
appIntegrations.map((integration) => (
<SingleIntegrationCard key={integration.id} integration={integration} />
))
) : (
<Loader className="space-y-2.5 mt-4">
<Loader.Item height="89px" />
<Loader.Item height="89px" />
</Loader>
)}
</div>
</section>
</div>
</WorkspaceAuthorizationLayout>
); );
}; };

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

@ -12,24 +12,23 @@ 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 { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy"; import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-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";
import { SettingsSidebar } from "components/project"; import { WorkspaceSettingHeader } from "components/headers";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui"; import { Button, Loader } from "@plane/ui";
import { CustomMenu, CustomSelect } from "components/ui"; import { CustomMenu, CustomSelect } from "components/ui";
// icons // icons
import { ChevronDown, X } from "lucide-react"; import { ChevronDown, X } from "lucide-react";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys // fetch-keys
import { WORKSPACE_DETAILS, WORKSPACE_INVITATION_WITH_EMAIL, WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys"; import { WORKSPACE_INVITATION_WITH_EMAIL, WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys";
// constants // constants
import { ROLE } from "constants/workspace"; import { ROLE } from "constants/workspace";
// helper // helper
import { truncateText } from "helpers/string.helper";
// services // services
const workspaceService = new WorkspaceService(); const workspaceService = new WorkspaceService();
@ -48,10 +47,6 @@ const MembersSettings: NextPage = () => {
const { isOwner } = useWorkspaceMembers(workspaceSlug?.toString(), Boolean(workspaceSlug)); const { isOwner } = useWorkspaceMembers(workspaceSlug?.toString(), Boolean(workspaceSlug));
const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug.toString()) : null, () =>
workspaceSlug ? workspaceService.getWorkspace(workspaceSlug.toString()) : null
);
const { data: workspaceMembers, mutate: mutateMembers } = useSWR( const { data: workspaceMembers, mutate: mutateMembers } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(workspaceSlug.toString()) : null, workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(workspaceSlug.toString()) : null,
workspaceSlug ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug.toString()) : null workspaceSlug ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug.toString()) : null
@ -98,22 +93,7 @@ const MembersSettings: NextPage = () => {
}; };
return ( return (
<WorkspaceAuthorizationLayout <WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Members Settings" />}>
breadcrumbs={
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
</a>
</Link>
}
/>
<BreadcrumbItem title="Members Settings" unshrinkTitle />
</Breadcrumbs>
}
>
<ConfirmWorkspaceMemberRemove <ConfirmWorkspaceMemberRemove
isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)} isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
onClose={() => { onClose={() => {
@ -181,155 +161,150 @@ const MembersSettings: NextPage = () => {
user={user} user={user}
onSuccess={handleInviteModalSuccess} onSuccess={handleInviteModalSuccess}
/> />
<div className="flex flex-row gap-2 h-full"> <section className="pr-9 py-8 w-full overflow-y-auto">
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0"> <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
<SettingsSidebar /> <h4 className="text-xl font-medium">Members</h4>
<Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>
Add Member
</Button>
</div> </div>
<section className="pr-9 py-8 w-full overflow-y-auto"> {!workspaceMembers || !workspaceInvitations ? (
<div className="flex items-center justify-between gap-4 pt-2 pb-3.5 border-b border-custom-border-200"> <Loader className="space-y-5">
<h4 className="text-xl font-medium">Members</h4> <Loader.Item height="40px" />
<Button variant="primary" onClick={() => setInviteModal(true)}> <Loader.Item height="40px" />
Add Member <Loader.Item height="40px" />
</Button> <Loader.Item height="40px" />
</div> </Loader>
{!workspaceMembers || !workspaceInvitations ? ( ) : (
<Loader className="space-y-5"> <div className="divide-y divide-custom-border-200">
<Loader.Item height="40px" /> {members.length > 0
<Loader.Item height="40px" /> ? members.map((member) => (
<Loader.Item height="40px" /> <div key={member.id} className="group flex items-center justify-between px-3.5 py-[18px]">
<Loader.Item height="40px" /> <div className="flex items-center gap-x-8 gap-y-2">
</Loader> {member.avatar && member.avatar !== "" ? (
) : ( <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
<div className="divide-y divide-custom-border-200"> <a className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
{members.length > 0 <img
? members.map((member) => ( src={member.avatar}
<div key={member.id} className="group flex items-center justify-between px-3.5 py-[18px]"> className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
<div className="flex items-center gap-x-8 gap-y-2"> alt={member.display_name || member.email}
{member.avatar && member.avatar !== "" ? ( />
</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="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white"> <a className="text-sm">
<img <span>
src={member.avatar} {member.first_name} {member.last_name}
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg" </span>
alt={member.display_name || member.email} <span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
/>
</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>
) : ( ) : (
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize bg-gray-700 text-white"> <h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
?
</div>
)} )}
<div> {isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
{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">
: null} {!member?.status && (
</div> <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>
</section> </div>
</div> )}
</WorkspaceAuthorizationLayout> {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>
))
: null}
</div>
)}
</section>
</WorkspaceSettingLayout>
); );
}; };