thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

refactor: move all sidebar links to constant file. (#3414)

Browse Source 
* chore: move all workspace, project and profile links constants into their own constants file.

* chore: sidebar menu links improvement.
This commit is contained in:
Prateek Shourya 2024-01-19 16:05:52 +05:30 committed by sriram veeraghanta
parent 06a7bdffd7
commit 7f5028a4f6
9 changed files with 296 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
web/components/command-palette/actions/workspace-settings-actions.tsx
View File

@ -1,8 +1,10 @@
import { useRouter } from "next/router";
import { Command } from "cmdk";
// icons
import { SettingIcon } from "components/icons";
// hooks
import { useUser } from "hooks/store";
import Link from "next/link";
// constants
import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
type Props = {
closePalette: () => void;
@ -10,60 +12,40 @@ type Props = {
export const CommandPaletteWorkspaceSettingsActions: React.FC<Props> = (props) => {
const { closePalette } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// mobx store
const {
membership: { currentWorkspaceRole },
} = useUser();
// derived values
const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
const redirect = (path: string) => {
closePalette();
router.push(path);
};
return (
<>
<Command.Item onSelect={closePalette} className="focus:outline-none">
<Link href={`/${workspaceSlug}/settings`}>
<div className="flex items-center gap-2 text-custom-text-200">
<SettingIcon className="h-4 w-4 text-custom-text-200" />
General
</div>
</Link>
</Command.Item>
<Command.Item onSelect={closePalette} className="focus:outline-none">
<Link href={`/${workspaceSlug}/settings/members`}>
<div className="flex items-center gap-2 text-custom-text-200">
<SettingIcon className="h-4 w-4 text-custom-text-200" />
Members
</div>
</Link>
</Command.Item>
<Command.Item onSelect={closePalette} className="focus:outline-none">
<Link href={`/${workspaceSlug}/settings/billing`}>
<div className="flex items-center gap-2 text-custom-text-200">
<SettingIcon className="h-4 w-4 text-custom-text-200" />
Billing and Plans
</div>
</Link>
</Command.Item>
<Command.Item onSelect={closePalette} className="focus:outline-none">
<Link href={`/${workspaceSlug}/settings/integrations`}>
<div className="flex items-center gap-2 text-custom-text-200">
<SettingIcon className="h-4 w-4 text-custom-text-200" />
Integrations
</div>
</Link>
</Command.Item>
<Command.Item onSelect={closePalette} className="focus:outline-none">
<Link href={`/${workspaceSlug}/settings/imports`}>
<div className="flex items-center gap-2 text-custom-text-200">
<SettingIcon className="h-4 w-4 text-custom-text-200" />
Import
</div>
</Link>
</Command.Item>
<Command.Item onSelect={closePalette} className="focus:outline-none">
<Link href={`/${workspaceSlug}/settings/exports`}>
<div className="flex items-center gap-2 text-custom-text-200">
<SettingIcon className="h-4 w-4 text-custom-text-200" />
Export
</div>
</Link>
</Command.Item>
{WORKSPACE_SETTINGS_LINKS.map(
(setting) =>
workspaceMemberInfo >= setting.access && (
<Command.Item
key={setting.key}
onSelect={() => redirect(`/${workspaceSlug}${setting.href}`)}
className="focus:outline-none"
>
<Link href={`/${workspaceSlug}${setting.href}`}>
<div className="flex items-center gap-2 text-custom-text-200">
<setting.Icon className="h-4 w-4 text-custom-text-200" />
{setting.label}
</div>
</Link>
</Command.Item>
)
)}
</>
);
};

80
web/components/workspace/sidebar-menu.tsx
View File

@ -2,7 +2,6 @@ import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
// hooks
import { useApplication, useUser } from "hooks/store";
// components
@ -11,29 +10,7 @@ import { NotificationPopover } from "components/notifications";
import { Tooltip } from "@plane/ui";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
const workspaceLinks = (workspaceSlug: string) => [
{
Icon: LayoutGrid,
name: "Dashboard",
href: `/${workspaceSlug}`,
},
{
Icon: BarChart2,
name: "Analytics",
href: `/${workspaceSlug}/analytics`,
},
{
Icon: Briefcase,
name: "Projects",
href: `/${workspaceSlug}/projects`,
},
{
Icon: CheckCircle,
name: "All Issues",
href: `/${workspaceSlug}/workspace-views/all-issues`,
},
];
import { SIDEBAR_MENU_ITEMS } from "constants/dashboard";
export const WorkspaceSidebarMenu = observer(() => {
// store hooks
@ -45,37 +22,36 @@ export const WorkspaceSidebarMenu = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query;
// computed
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
return (
<div className="w-full cursor-pointer space-y-1 p-4">
{workspaceLinks(workspaceSlug as string).map((link, index) => {
const isActive = link.name === "Settings" ? router.asPath.includes(link.href) : router.asPath === link.href;
if (!isAuthorizedUser && link.name === "Analytics") return;
return (
<Link key={index} href={link.href}>
<span className="block w-full">
<Tooltip
tooltipContent={link.name}
position="right"
className="ml-2"
disabled={!themeStore?.sidebarCollapsed}
>
<div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
isActive
? "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"
} ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
<div className="w-full cursor-pointer space-y-2 p-4">
{SIDEBAR_MENU_ITEMS.map(
(link) =>
workspaceMemberInfo >= link.access && (
<Link key={link.key} href={`/${workspaceSlug}${link.href}`}>
<span className="block w-full my-1">
<Tooltip
tooltipContent={link.label}
position="right"
className="ml-2"
disabled={!themeStore?.sidebarCollapsed}
>
{<link.Icon className="h-4 w-4" />}
{!themeStore?.sidebarCollapsed && link.name}
</div>
</Tooltip>
</span>
</Link>
);
})}
<div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
link.highlight(router.asPath, `/${workspaceSlug}`)
? "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"
} ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
>
{<link.Icon className="h-4 w-4" />}
{!themeStore?.sidebarCollapsed && link.label}
</div>
</Tooltip>
</span>
</Link>
)
)}
<NotificationPopover />
</div>
);

55
web/constants/dashboard.ts
View File

@ -14,6 +14,11 @@ import CompletedCreatedIssuesDark from "public/empty-state/dashboard/dark/comple
import CompletedCreatedIssuesLight from "public/empty-state/dashboard/light/completed-created-issues.svg";
// types
import { TDurationFilterOptions, TIssuesListTypes, TStateGroups } from "@plane/types";
import { Props } from "components/icons/types";
// constants
import { EUserWorkspaceRoles } from "./workspace";
// icons
import { BarChart2, Briefcase, CheckCircle, LayoutGrid, SendToBack } from "lucide-react";
// gradients for issues by priority widget graph bars
export const PRIORITY_GRAPH_GRADIENTS = [
@ -246,3 +251,53 @@ export const CREATED_ISSUES_EMPTY_STATES = {
lightImage: CompletedCreatedIssuesLight,
},
};
export const SIDEBAR_MENU_ITEMS: {
key: string;
label: string;
href: string;
access: EUserWorkspaceRoles;
highlight: (pathname: string, baseUrl: string) => boolean;
Icon: React.FC<Props>;
}[] = [
{
key: "dashboard",
label: "Dashboard",
href: ``,
access: EUserWorkspaceRoles.GUEST,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}`,
Icon: LayoutGrid,
},
{
key: "analytics",
label: "Analytics",
href: `/analytics`,
access: EUserWorkspaceRoles.MEMBER,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/analytics`,
Icon: BarChart2,
},
{
key: "projects",
label: "Projects",
href: `/projects`,
access: EUserWorkspaceRoles.GUEST,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/projects`,
Icon: Briefcase,
},
{
key: "all-issues",
label: "All Issues",
href: `/workspace-views/all-issues`,
access: EUserWorkspaceRoles.GUEST,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/workspace-views/all-issues`,
Icon: CheckCircle,
},
{
key: "active-cycles",
label: "Active cycles",
href: `/active-cycles`,
access: EUserWorkspaceRoles.GUEST,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/active-cycles`,
Icon: SendToBack,
},
];

40
web/constants/profile.ts Normal file
View File

@ -0,0 +1,40 @@
import React from "react";
// icons
import { Activity, CircleUser, KeyRound, LucideProps, Settings2 } from "lucide-react";
export const PROFILE_ACTION_LINKS: {
key: string;
label: string;
href: string;
highlight: (pathname: string) => boolean;
Icon: React.FC<LucideProps>;
}[] = [
{
key: "profile",
label: "Profile",
href: `/profile`,
highlight: (pathname: string) => pathname === "/profile",
Icon: CircleUser,
},
{
key: "change-password",
label: "Change password",
href: `/profile/change-password`,
highlight: (pathname: string) => pathname === "/profile/change-password",
Icon: KeyRound,
},
{
key: "activity",
label: "Activity",
href: `/profile/activity`,
highlight: (pathname: string) => pathname === "/profile/activity",
Icon: Activity,
},
{
key: "preferences",
label: "Preferences",
href: `/profile/preferences`,
highlight: (pathname: string) => pathname.includes("/profile/preferences"),
Icon: Settings2,
},
];

78
web/constants/project.ts
View File

@ -1,4 +1,8 @@
// icons
import { Globe2, Lock, LucideIcon } from "lucide-react";
import { SettingIcon } from "components/icons";
// types
import { Props } from "components/icons/types";
export enum EUserProjectRoles {
GUEST = 5,
@ -71,3 +75,77 @@ export const PROJECT_UNSPLASH_COVERS = [
"https://images.unsplash.com/photo-1691230995681-480d86cbc135?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
"https://images.unsplash.com/photo-1675351066828-6fc770b90dd2?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
];
export const PROJECT_SETTINGS_LINKS: {
key: string;
label: string;
href: string;
access: EUserProjectRoles;
highlight: (pathname: string, baseUrl: string) => boolean;
Icon: React.FC<Props>;
}[] = [
{
key: "general",
label: "General",
href: `/settings`,
access: EUserProjectRoles.MEMBER,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings`,
Icon: SettingIcon,
},
{
key: "members",
label: "Members",
href: `/settings/members`,
access: EUserProjectRoles.MEMBER,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members`,
Icon: SettingIcon,
},
{
key: "features",
label: "Features",
href: `/settings/features`,
access: EUserProjectRoles.ADMIN,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/features`,
Icon: SettingIcon,
},
{
key: "states",
label: "States",
href: `/settings/states`,
access: EUserProjectRoles.MEMBER,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/states`,
Icon: SettingIcon,
},
{
key: "labels",
label: "Labels",
href: `/settings/labels`,
access: EUserProjectRoles.MEMBER,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/labels`,
Icon: SettingIcon,
},
{
key: "integrations",
label: "Integrations",
href: `/settings/integrations`,
access: EUserProjectRoles.ADMIN,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/integrations`,
Icon: SettingIcon,
},
{
key: "estimates",
label: "Estimates",
href: `/settings/estimates`,
access: EUserProjectRoles.ADMIN,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/estimates`,
Icon: SettingIcon,
},
{
key: "automations",
label: "Automations",
href: `/settings/automations`,
access: EUserProjectRoles.ADMIN,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/automations`,
Icon: SettingIcon,
},
];

30
web/constants/workspace.ts
View File

@ -6,6 +6,9 @@ import ExcelLogo from "public/services/excel.svg";
import JSONLogo from "public/services/json.svg";
// types
import { TStaticViewTypes } from "@plane/types";
import { Props } from "components/icons/types";
// icons
import { SettingIcon } from "components/icons";
export enum EUserWorkspaceRoles {
GUEST = 5,
@ -115,48 +118,75 @@ export const RESTRICTED_URLS = [
];
export const WORKSPACE_SETTINGS_LINKS: {
key: string;
label: string;
href: string;
access: EUserWorkspaceRoles;
highlight: (pathname: string, baseUrl: string) => boolean;
Icon: React.FC<Props>;
}[] = [
{
key: "general",
label: "General",
href: `/settings`,
access: EUserWorkspaceRoles.GUEST,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings`,
Icon: SettingIcon,
},
{
key: "members",
label: "Members",
href: `/settings/members`,
access: EUserWorkspaceRoles.GUEST,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members`,
Icon: SettingIcon,
},
{
key: "billing-and-plans",
label: "Billing and plans",
href: `/settings/billing`,
access: EUserWorkspaceRoles.ADMIN,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing`,
Icon: SettingIcon,
},
{
key: "integrations",
label: "Integrations",
href: `/settings/integrations`,
access: EUserWorkspaceRoles.ADMIN,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/integrations`,
Icon: SettingIcon,
},
{
key: "import",
label: "Imports",
href: `/settings/imports`,
access: EUserWorkspaceRoles.ADMIN,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/imports`,
Icon: SettingIcon,
},
{
key: "export",
label: "Exports",
href: `/settings/exports`,
access: EUserWorkspaceRoles.MEMBER,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports`,
Icon: SettingIcon,
},
{
key: "webhooks",
label: "Webhooks",
href: `/settings/webhooks`,
access: EUserWorkspaceRoles.ADMIN,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks`,
Icon: SettingIcon,
},
{
key: "api-tokens",
label: "API tokens",
href: `/settings/api-tokens`,
access: EUserWorkspaceRoles.ADMIN,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/api-tokens`,
Icon: SettingIcon,
},
];

33
web/layouts/settings-layout/profile/sidebar.tsx
View File

@ -4,39 +4,14 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { useTheme } from "next-themes";
import { Activity, ChevronLeft, CircleUser, KeyRound, LogOut, MoveLeft, Plus, Settings2, UserPlus } from "lucide-react";
import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react";
// hooks
import { useApplication, useUser, useWorkspace } from "hooks/store";
import useToast from "hooks/use-toast";
// ui
import { Tooltip } from "@plane/ui";
const PROFILE_ACTION_LINKS = [
{
key: "profile",
label: "Profile",
href: `/profile`,
Icon: CircleUser,
},
{
key: "change-password",
label: "Change password",
href: `/profile/change-password`,
Icon: KeyRound,
},
{
key: "activity",
label: "Activity",
href: `/profile/activity`,
Icon: Activity,
},
{
key: "preferences",
label: "Preferences",
href: `/profile/preferences`,
Icon: Settings2,
},
];
// constants
import { PROFILE_ACTION_LINKS } from "constants/profile";
const WORKSPACE_ACTION_LINKS = [
{
@ -130,7 +105,7 @@ export const ProfileLayoutSidebar = observer(() => {
<Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
<div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
router.pathname === link.href
link.highlight(router.pathname)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
} ${sidebarCollapsed ? "justify-center" : ""}`}

76
web/layouts/settings-layout/project/sidebar.tsx
View File

@ -1,66 +1,42 @@
import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
// hooks
import { useUser } from "hooks/store";
// constants
import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "constants/project";
export const ProjectSettingsSidebar = () => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// mobx store
const {
membership: { currentProjectRole },
} = useUser();
const projectMemberInfo = currentProjectRole || EUserProjectRoles.GUEST;
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 w-80 flex-col gap-6 px-5">
<div className="flex flex-col gap-2">
<span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
<div className="flex w-full flex-col gap-1">
{projectLinks.map((link) => (
<Link key={link.href} href={link.href}>
<div
className={`rounded-md px-4 py-2 text-sm font-medium ${
(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>
</Link>
))}
{PROJECT_SETTINGS_LINKS.map(
(link) =>
projectMemberInfo >= link.access && (
<Link key={link.key} href={`/${workspaceSlug}/projects/${projectId}${link.href}`}>
<div
className={`rounded-md px-4 py-2 text-sm font-medium ${
link.highlight(router.asPath, `/${workspaceSlug}/projects/${projectId}`)
? "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>
</Link>
)
)}
</div>
</div>
</div>

4
web/layouts/settings-layout/workspace/sidebar.tsx
View File

@ -25,11 +25,11 @@ export const WorkspaceSettingsSidebar = () => {
{WORKSPACE_SETTINGS_LINKS.map(
(link) =>
workspaceMemberInfo >= link.access && (
<Link key={link.href} href={`/${workspaceSlug}${link.href}`}>
<Link key={link.key} href={`/${workspaceSlug}${link.href}`}>
<span>
<div
className={`rounded-md px-4 py-2 text-sm font-medium ${
router.pathname.split("/")?.[3] === link.href.split("/")?.[2]
link.highlight(router.asPath, `/${workspaceSlug}`)
? "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"
}`}