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

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

* chore: sidebar menu links improvement.

web/components/command-palette/actions/workspace-settings-actions.tsx

@@ -1,8 +1,10 @@
 import { useRouter } from "next/router";
 import { Command } from "cmdk";
-// icons
+// hooks
-import { SettingIcon } from "components/icons";
+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">
+      {WORKSPACE_SETTINGS_LINKS.map(
-        <Link href={`/${workspaceSlug}/settings`}>
+        (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">
-            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                  <setting.Icon className="h-4 w-4 text-custom-text-200" />
-            General
+                  {setting.label}
-          </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>
+          )
+      )}
     </>
   );
 };

web/components/workspace/sidebar-menu.tsx

@@ -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";
-
+import { SIDEBAR_MENU_ITEMS } from "constants/dashboard";
-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`,
-  },
-];
 
 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">
+    <div className="w-full cursor-pointer space-y-2 p-4">
-      {workspaceLinks(workspaceSlug as string).map((link, index) => {
+      {SIDEBAR_MENU_ITEMS.map(
-        const isActive = link.name === "Settings" ? router.asPath.includes(link.href) : router.asPath === link.href;
+        (link) =>
-        if (!isAuthorizedUser && link.name === "Analytics") return;
+          workspaceMemberInfo >= link.access && (
-        return (
+            <Link key={link.key} href={`/${workspaceSlug}${link.href}`}>
-          <Link key={index} href={link.href}>
+              <span className="block w-full my-1">
-            <span className="block w-full">
                 <Tooltip
-                tooltipContent={link.name}
+                  tooltipContent={link.label}
                   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
+                      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.name}
+                    {!themeStore?.sidebarCollapsed && link.label}
                   </div>
                 </Tooltip>
               </span>
             </Link>
-        );
+          )
-      })}
+      )}
       <NotificationPopover />
     </div>
   );

web/constants/dashboard.ts

@@ -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,
+  },
+];

web/constants/profile.ts

@@ -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,
+  },
+];

web/constants/project.ts

@@ -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,
+  },
+];

web/constants/workspace.ts

@@ -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,
   },
 ];

web/layouts/settings-layout/profile/sidebar.tsx

@@ -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";
-
+// constants
-const PROFILE_ACTION_LINKS = [
+import { PROFILE_ACTION_LINKS } from "constants/profile";
-  {
-    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,
-  },
-];
 
 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" : ""}`}

web/layouts/settings-layout/project/sidebar.tsx

@@ -1,58 +1,33 @@
 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) => (
+          {PROJECT_SETTINGS_LINKS.map(
-            <Link key={link.href} href={link.href}>
+            (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.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
+                      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"
                     }`}
@@ -60,7 +35,8 @@ export const ProjectSettingsSidebar = () => {
                     {link.label}
                   </div>
                 </Link>
-          ))}
+              )
+          )}
         </div>
       </div>
     </div>

web/layouts/settings-layout/workspace/sidebar.tsx

@@ -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"
                       }`}