fix: workspace settings access validation updated (#5606)

This commit is contained in:
Anmol Singh Bhatia
2024-09-16 14:03:06 +05:30
committed by GitHub
parent f155a13929
commit c14d20c2e0
3 changed files with 57 additions and 33 deletions

View File

@@ -1,34 +1,51 @@
"use client";
import { ReactNode } from "react";
import { FC, ReactNode } from "react";
import { observer } from "mobx-react";
// components
import { AppHeader } from "@/components/core";
// local components
import { WorkspaceSettingHeader } from "./header";
import { MobileWorkspaceSettingsTabs } from "./mobile-header-tabs";
import { WorkspaceSettingsSidebar } from "./sidebar";
import { NotAuthorizedView } from "@/components/auth-screens";
import { useUserPermissions } from "@/hooks/store";
import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
export interface IWorkspaceSettingLayout {
children: ReactNode;
}
export default function WorkspaceSettingLayout(props: IWorkspaceSettingLayout) {
const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = observer((props) => {
const { children } = props;
const { workspaceUserInfo, allowPermissions } = useUserPermissions();
// derived values
const isWorkspaceAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
return (
<>
<AppHeader header={<WorkspaceSettingHeader />} />
<MobileWorkspaceSettingsTabs />
<div className="inset-y-0 flex flex-row vertical-scrollbar scrollbar-lg h-full w-full overflow-y-auto">
<div className="px-page-x !pr-0 py-page-y flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
<WorkspaceSettingsSidebar />
</div>
<div className="flex flex-col relative w-full overflow-hidden">
<div className="w-full h-full overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-page-x md:px-9 py-page-y">
{children}
</div>
</div>
{workspaceUserInfo && !isWorkspaceAdmin ? (
<NotAuthorizedView section="settings" />
) : (
<>
<div className="px-page-x !pr-0 py-page-y flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
<WorkspaceSettingsSidebar />
</div>
<div className="flex flex-col relative w-full overflow-hidden">
<div className="w-full h-full overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-page-x md:px-9 py-page-y">
{children}
</div>
</div>
</>
)}
</div>
</>
);
}
});
export default WorkspaceSettingLayout;

View File

@@ -9,7 +9,7 @@ export const WORKSPACE_SETTINGS = {
key: "general",
label: "General",
href: `/settings`,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
access: [EUserPermissions.ADMIN],
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
Icon: SettingIcon,
},
@@ -17,7 +17,7 @@ export const WORKSPACE_SETTINGS = {
key: "members",
label: "Members",
href: `/settings/members`,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
access: [EUserPermissions.ADMIN],
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
Icon: SettingIcon,
},

View File

@@ -15,7 +15,8 @@ import { IWorkspace } from "@plane/types";
import { Avatar, Loader, TOAST_TYPE, setToast } from "@plane/ui";
import { GOD_MODE_URL, cn } from "@/helpers/common.helper";
// hooks
import { useAppTheme, useUser, useUserProfile, useWorkspace } from "@/hooks/store";
import { useAppTheme, useUser, useUserPermissions, useUserProfile, useWorkspace } from "@/hooks/store";
import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
import { WorkspaceLogo } from "../logo";
// Static Data
@@ -25,12 +26,14 @@ const userLinks = (workspaceSlug: string) => [
name: "Workspace invites",
href: "/invitations",
icon: Mails,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
},
{
key: "settings",
name: "Workspace settings",
href: `/${workspaceSlug}/settings`,
icon: Settings,
access: [EUserPermissions.ADMIN],
},
];
@@ -46,6 +49,7 @@ export const SidebarDropdown = observer(() => {
signOut,
} = useUser();
const { updateUserProfile } = useUserProfile();
const { allowPermissions } = useUserPermissions();
const isUserInstanceAdmin = false;
const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
@@ -168,7 +172,7 @@ export const SidebarDropdown = observer(() => {
alt="Workspace Logo"
/>
) : (
workspace?.name?.charAt(0) ?? "..."
(workspace?.name?.charAt(0) ?? "...")
)}
</span>
<h5
@@ -207,24 +211,27 @@ export const SidebarDropdown = observer(() => {
Create workspace
</Menu.Item>
</Link>
{userLinks(workspaceSlug?.toString() ?? "").map((link, index) => (
<Link
key={link.key}
href={link.href}
className="w-full"
onClick={() => {
if (index > 0) handleItemClick();
}}
>
<Menu.Item
as="div"
className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
>
<link.icon className="h-4 w-4 flex-shrink-0" />
{link.name}
</Menu.Item>
</Link>
))}
{userLinks(workspaceSlug?.toString() ?? "").map(
(link, index) =>
allowPermissions(link.access, EUserPermissionsLevel.WORKSPACE) && (
<Link
key={link.key}
href={link.href}
className="w-full"
onClick={() => {
if (index > 0) handleItemClick();
}}
>
<Menu.Item
as="div"
className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
>
<link.icon className="h-4 w-4 flex-shrink-0" />
{link.name}
</Menu.Item>
</Link>
)
)}
</div>
<div className="w-full px-4 py-2">
<Menu.Item