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

chore: layout refactor (#2532)

Browse Source 
* chore: layout refactor

* fix: profile auth issue

* chore: project setting layout refactor

* chore: workspace layout refactor

* chore: profile layout refactor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -4,7 +4,8 @@ import Link from "next/link";
// services // services
import { UserService } from "services/user.service"; import { UserService } from "services/user.service";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { WorkspaceSettingLayout } from "layouts/setting-layout";
import { AppLayout } from "layouts/app-layout";
// components // components
import { ActivityIcon, ActivityMessage } from "components/core"; import { ActivityIcon, ActivityMessage } from "components/core";
import { RichReadOnlyEditor } from "@plane/rich-text-editor"; import { RichReadOnlyEditor } from "@plane/rich-text-editor";
@ -30,7 +31,8 @@ const ProfileActivity = () => {
); );
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="My Profile Activity" />}> <AppLayout header={<WorkspaceSettingHeader title="My Profile Activity" />}>
<WorkspaceSettingLayout>
{userActivity ? ( {userActivity ? (
<section className="pr-9 py-8 w-full overflow-y-auto"> <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"> <div className="flex items-center py-3.5 border-b border-custom-border-200">
@ -130,7 +132,8 @@ const ProfileActivity = () => {
) : ( ) : (
<ActivityIcon activity={activityItem} /> <ActivityIcon activity={activityItem} />
) )
) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? ( ) : activityItem.actor_detail.avatar &&
activityItem.actor_detail.avatar !== "" ? (
<img <img
src={activityItem.actor_detail.avatar} src={activityItem.actor_detail.avatar}
alt={activityItem.actor_detail.display_name} alt={activityItem.actor_detail.display_name}
@ -162,7 +165,8 @@ const ProfileActivity = () => {
<a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a> <a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a>
</Link> </Link>
)}{" "} )}{" "}
{message} <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span> {message}{" "}
<span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
</div> </div>
</div> </div>
</> </>
@ -184,6 +188,7 @@ const ProfileActivity = () => {
</Loader> </Loader>
)} )}
</WorkspaceSettingLayout> </WorkspaceSettingLayout>
</AppLayout>
); );
}; };

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

@ -9,7 +9,8 @@ import { UserService } from "services/user.service";
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import { ImagePickerPopover, ImageUploadModal } from "components/core"; import { ImagePickerPopover, ImageUploadModal } from "components/core";
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
@ -143,7 +144,8 @@ const Profile: NextPage = () => {
})); }));
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="My Profile" />}> <AppLayout header={<WorkspaceSettingHeader title="My Profile" />}>
<WorkspaceSettingLayout>
<ImageUploadModal <ImageUploadModal
isOpen={isImageUploadModalOpen} isOpen={isImageUploadModalOpen}
onClose={() => setIsImageUploadModalOpen(false)} onClose={() => setIsImageUploadModalOpen(false)}
@ -158,7 +160,7 @@ const Profile: NextPage = () => {
userImage userImage
/> />
{myProfile ? ( {myProfile ? (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)} className="h-full w-full">
<div className={`flex flex-col gap-8 pr-9 py-9 w-full overflow-y-auto`}> <div className={`flex flex-col gap-8 pr-9 py-9 w-full overflow-y-auto`}>
<div className="relative h-44 w-full mt-6"> <div className="relative h-44 w-full mt-6">
<img <img
@ -389,6 +391,7 @@ const Profile: NextPage = () => {
</div> </div>
)} )}
</WorkspaceSettingLayout> </WorkspaceSettingLayout>
</AppLayout>
); );
}; };

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

@ -5,7 +5,8 @@ import { useTheme } from "next-themes";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import { CustomThemeSelector, ThemeSwitch } from "components/core"; import { CustomThemeSelector, ThemeSwitch } from "components/core";
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
@ -44,7 +45,8 @@ const ProfilePreferencesPage = observer(() => {
}; };
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="My Profile Preferences" />}> <AppLayout header={<WorkspaceSettingHeader title="My Profile Preferences" />}>
<WorkspaceSettingLayout>
{userStore.currentUser ? ( {userStore.currentUser ? (
<div className="pr-9 py-8 w-full overflow-y-auto"> <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"> <div className="flex items-center py-3.5 border-b border-custom-border-200">
@ -67,6 +69,7 @@ const ProfilePreferencesPage = observer(() => {
</div> </div>
)} )}
</WorkspaceSettingLayout> </WorkspaceSettingLayout>
</AppLayout>
); );
}); });

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

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

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

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

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

@ -7,8 +7,10 @@ import useSWR from "swr";
// services // services
import { UserService } from "services/user.service"; import { UserService } from "services/user.service";
// layouts // layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/profile-layout"; import { ProfileAuthWrapper } from "layouts/profile-layout";
// components // components
import { UserProfileHeader } from "components/headers";
import { import {
ProfileActivity, ProfileActivity,
ProfilePriorityDistribution, ProfilePriorityDistribution,
@ -43,6 +45,7 @@ const ProfileOverview: NextPage = () => {
}); });
return ( return (
<AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper> <ProfileAuthWrapper>
<div className="h-full w-full px-5 md:px-9 py-5 space-y-7 overflow-y-auto"> <div className="h-full w-full px-5 md:px-9 py-5 space-y-7 overflow-y-auto">
<ProfileStats userProfile={userProfile} /> <ProfileStats userProfile={userProfile} />
@ -54,6 +57,7 @@ const ProfileOverview: NextPage = () => {
<ProfileActivity /> <ProfileActivity />
</div> </div>
</ProfileAuthWrapper> </ProfileAuthWrapper>
</AppLayout>
); );
}; };

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

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

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

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

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

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

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

@ -6,7 +6,8 @@ import useSWR, { mutate } from "swr";
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
import { TrackEventService, MiscellaneousEventType } from "services/track_event.service"; import { TrackEventService, MiscellaneousEventType } from "services/track_event.service";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
@ -136,7 +137,8 @@ const FeaturesSettings: NextPage = () => {
const isAdmin = memberDetails?.role === 20; const isAdmin = memberDetails?.role === 20;
return ( return (
<ProjectSettingLayout header={<ProjectSettingHeader title="Features Settings" />}> <AppLayout header={<ProjectSettingHeader title="Features Settings" />} withProjectWrapper>
<ProjectSettingLayout>
<section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<h3 className="text-xl font-medium">Features</h3> <h3 className="text-xl font-medium">Features</h3>
@ -182,6 +184,7 @@ const FeaturesSettings: NextPage = () => {
</div> </div>
</section> </section>
</ProjectSettingLayout> </ProjectSettingLayout>
</AppLayout>
); );
}; };

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

@ -3,7 +3,8 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// components // components
import { ProjectSettingHeader } from "components/headers"; import { ProjectSettingHeader } from "components/headers";
import { import {
@ -18,9 +19,6 @@ import type { NextPage } from "next";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// services
// const projectService = new ProjectService();
const GeneralSettings: NextPage = observer(() => { const GeneralSettings: NextPage = observer(() => {
const { project: projectStore } = useMobxStore(); const { project: projectStore } = useMobxStore();
// states // states
@ -42,10 +40,10 @@ const GeneralSettings: NextPage = observer(() => {
// const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network")); // const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
const isAdmin = projectDetails?.member_role === 20; const isAdmin = projectDetails?.member_role === 20;
console.log("isAdmin", isAdmin);
return ( return (
<ProjectSettingLayout header={<ProjectSettingHeader title="General Settings" />}> <AppLayout header={<ProjectSettingHeader title="General Settings" />} withProjectWrapper>
<ProjectSettingLayout>
{projectDetails && ( {projectDetails && (
<DeleteProjectModal <DeleteProjectModal
project={projectDetails} project={projectDetails}
@ -69,6 +67,7 @@ const GeneralSettings: NextPage = observer(() => {
)} )}
</div> </div>
</ProjectSettingLayout> </ProjectSettingLayout>
</AppLayout>
); );
}); });

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

@ -5,7 +5,8 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// services // services
import { IntegrationService } from "services/integrations"; import { IntegrationService } from "services/integrations";
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
@ -50,7 +51,8 @@ const ProjectIntegrations: NextPage = () => {
const isAdmin = projectDetails?.member_role === 20; const isAdmin = projectDetails?.member_role === 20;
return ( return (
<ProjectSettingLayout header={<ProjectSettingHeader title="Integrations Settings" />}> <AppLayout header={<ProjectSettingHeader title="Integrations Settings" />}>
<ProjectSettingLayout>
<div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> <div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<h3 className="text-xl font-medium">Integrations</h3> <h3 className="text-xl font-medium">Integrations</h3>
@ -84,6 +86,7 @@ const ProjectIntegrations: NextPage = () => {
)} )}
</div> </div>
</ProjectSettingLayout> </ProjectSettingLayout>
</AppLayout>
); );
}; };

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

@ -9,7 +9,8 @@ import useUserAuth from "hooks/use-user-auth";
// services // services
import { IssueLabelService } from "services/issue"; import { IssueLabelService } from "services/issue";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// components // components
import { import {
CreateUpdateLabelInline, CreateUpdateLabelInline,
@ -92,7 +93,8 @@ const LabelsSettings: NextPage = () => {
onClose={() => setSelectDeleteLabel(null)} onClose={() => setSelectDeleteLabel(null)}
user={user} user={user}
/> />
<ProjectSettingLayout header={<ProjectSettingHeader title="Labels Settings" />}> <AppLayout header={<ProjectSettingHeader title="Labels Settings" />}>
<ProjectSettingLayout>
<section className="pr-9 py-8 gap-10 w-full overflow-y-auto"> <section className="pr-9 py-8 gap-10 w-full overflow-y-auto">
<div className="flex items-center justify-between py-3.5 border-b border-custom-border-200"> <div className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
<h3 className="text-xl font-medium">Labels</h3> <h3 className="text-xl font-medium">Labels</h3>
@ -179,6 +181,7 @@ const LabelsSettings: NextPage = () => {
</div> </div>
</section> </section>
</ProjectSettingLayout> </ProjectSettingLayout>
</AppLayout>
</> </>
); );
}; };

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

@ -12,7 +12,8 @@ import useProjectMembers from "hooks/use-project-members";
import useProjectDetails from "hooks/use-project-details"; import useProjectDetails from "hooks/use-project-details";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// components // components
import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove"; import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
import SendProjectInvitationModal from "components/project/send-project-invitation-modal"; import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
@ -196,7 +197,8 @@ const MembersSettings: NextPage = () => {
const isAdmin = memberDetails?.role === 20; const isAdmin = memberDetails?.role === 20;
return ( return (
<ProjectSettingLayout header={<ProjectSettingHeader title="Members Settings" />}> <AppLayout header={<ProjectSettingHeader title="Members Settings" />}>
<ProjectSettingLayout>
<ConfirmProjectMemberRemove <ConfirmProjectMemberRemove
isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)} isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
onClose={() => { onClose={() => {
@ -208,7 +210,10 @@ const MembersSettings: NextPage = () => {
if (!activeWorkspace || !projectDetails) return; if (!activeWorkspace || !projectDetails) return;
if (selectedRemoveMember) { if (selectedRemoveMember) {
await projectService.deleteProjectMember(activeWorkspace.slug, projectDetails.id, selectedRemoveMember); await projectService.deleteProjectMember(activeWorkspace.slug, projectDetails.id, selectedRemoveMember);
mutateMembers((prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember), false); mutateMembers(
(prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
false
);
} }
if (selectedInviteRemoveMember) { if (selectedInviteRemoveMember) {
await projectInvitationService.deleteProjectInvitation( await projectInvitationService.deleteProjectInvitation(
@ -424,6 +429,7 @@ const MembersSettings: NextPage = () => {
)} )}
</section> </section>
</ProjectSettingLayout> </ProjectSettingLayout>
</AppLayout>
); );
}; };

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

@ -10,7 +10,8 @@ import { ProjectStateService } from "services/project";
import useProjectDetails from "hooks/use-project-details"; import useProjectDetails from "hooks/use-project-details";
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
// layouts // layouts
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/setting-layout";
// components // components
import { CreateUpdateStateInline, DeleteStateModal, SingleState, StateGroup } from "components/states"; import { CreateUpdateStateInline, DeleteStateModal, SingleState, StateGroup } from "components/states";
import { ProjectSettingHeader } from "components/headers"; import { ProjectSettingHeader } from "components/headers";
@ -57,7 +58,8 @@ const StatesSettings: NextPage = () => {
onClose={() => setSelectDeleteState(null)} onClose={() => setSelectDeleteState(null)}
user={user} user={user}
/> />
<ProjectSettingLayout header={<ProjectSettingHeader title="States Settings" />}> <AppLayout header={<ProjectSettingHeader title="States Settings" />}>
<ProjectSettingLayout>
<div className="pr-9 py-8 gap-10 w-full overflow-y-auto"> <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <div className="flex items-center py-3.5 border-b border-custom-border-200">
<h3 className="text-xl font-medium">States</h3> <h3 className="text-xl font-medium">States</h3>
@ -132,6 +134,7 @@ const StatesSettings: NextPage = () => {
</div> </div>
</div> </div>
</ProjectSettingLayout> </ProjectSettingLayout>
</AppLayout>
</> </>
); );
}; };

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

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// component // component
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
// ui // ui
@ -9,7 +10,8 @@ import { Button } from "@plane/ui";
import type { NextPage } from "next"; import type { NextPage } from "next";
const BillingSettings: NextPage = () => ( const BillingSettings: NextPage = () => (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}> <AppLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}>
<WorkspaceSettingLayout>
<section className="pr-9 py-8 w-full overflow-y-auto"> <section className="pr-9 py-8 w-full overflow-y-auto">
<div> <div>
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <div className="flex items-center py-3.5 border-b border-custom-border-200">
@ -27,6 +29,7 @@ const BillingSettings: NextPage = () => (
</div> </div>
</section> </section>
</WorkspaceSettingLayout> </WorkspaceSettingLayout>
</AppLayout>
); );
export default BillingSettings; export default BillingSettings;

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

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

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

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

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

@ -13,7 +13,8 @@ import { FileService } from "services/file.service";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import { ImageUploadModal } from "components/core"; import { ImageUploadModal } from "components/core";
import { DeleteWorkspaceModal } from "components/workspace"; import { DeleteWorkspaceModal } from "components/workspace";
@ -152,7 +153,8 @@ const WorkspaceSettings: NextPage = () => {
const isAdmin = memberDetails?.role === 20; const isAdmin = memberDetails?.role === 20;
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="General Settings" />}> <AppLayout header={<WorkspaceSettingHeader title="General Settings" />}>
<WorkspaceSettingLayout>
<ImageUploadModal <ImageUploadModal
isOpen={isImageUploadModalOpen} isOpen={isImageUploadModalOpen}
onClose={() => setIsImageUploadModalOpen(false)} onClose={() => setIsImageUploadModalOpen(false)}
@ -353,6 +355,7 @@ const WorkspaceSettings: NextPage = () => {
</div> </div>
)} )}
</WorkspaceSettingLayout> </WorkspaceSettingLayout>
</AppLayout>
); );
}; };

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

@ -7,7 +7,8 @@ import useSWR from "swr";
// services // services
import { IntegrationService } from "services/integrations"; import { IntegrationService } from "services/integrations";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import { SingleIntegrationCard } from "components/integration"; import { SingleIntegrationCard } from "components/integration";
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
@ -32,7 +33,8 @@ const WorkspaceIntegrations: NextPage = () => {
); );
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Export Settings" />}> <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
<WorkspaceSettingLayout>
<section className="pr-9 py-8 w-full overflow-y-auto"> <section className="pr-9 py-8 w-full overflow-y-auto">
<IntegrationAndImportExportBanner bannerName="Integrations" /> <IntegrationAndImportExportBanner bannerName="Integrations" />
<div> <div>
@ -49,6 +51,7 @@ const WorkspaceIntegrations: NextPage = () => {
</div> </div>
</section> </section>
</WorkspaceSettingLayout> </WorkspaceSettingLayout>
</AppLayout>
); );
}; };

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

@ -12,7 +12,8 @@ import useToast from "hooks/use-toast";
import useUser from "hooks/use-user"; import useUser from "hooks/use-user";
import useWorkspaceMembers from "hooks/use-workspace-members"; import useWorkspaceMembers from "hooks/use-workspace-members";
// layouts // layouts
import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting-layout"; import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/setting-layout";
// components // components
import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove"; import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove";
import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal"; import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
@ -92,7 +93,8 @@ const MembersSettings: NextPage = () => {
}; };
return ( return (
<WorkspaceSettingLayout header={<WorkspaceSettingHeader title="Members Settings" />}> <AppLayout header={<WorkspaceSettingHeader title="Members Settings" />}>
<WorkspaceSettingLayout>
<ConfirmWorkspaceMemberRemove <ConfirmWorkspaceMemberRemove
isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)} isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
onClose={() => { onClose={() => {
@ -304,6 +306,7 @@ const MembersSettings: NextPage = () => {
)} )}
</section> </section>
</WorkspaceSettingLayout> </WorkspaceSettingLayout>
</AppLayout>
); );
}; };

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

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