[WEB-2376] dev: workspace settings improvement & refactor. (#5519)

* [WEB-2376] dev: workspace settings improvement & refactor.

* chore: update `filterWorkspaceSettingLinks` to `shouldRenderSettingLink`.

web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx

@@ -1,28 +1,44 @@
 import { useParams, usePathname } from "next/navigation";
+// constants
+import { EUserWorkspaceRoles } from "@/constants/workspace";
 // hooks
+import { useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web constants
 import { WORKSPACE_SETTINGS_LINKS } from "@/plane-web/constants/workspace";
+// plane web helpers
+import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
 
 export const MobileWorkspaceSettingsTabs = () => {
   const router = useAppRouter();
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
+  // mobx store
+  const {
+    membership: { currentWorkspaceRole },
+  } = useUser();
+
+  // derived values
+  const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
+
   return (
     <div className="flex-shrink-0 md:hidden sticky inset-0 flex overflow-x-auto bg-custom-background-100 z-10">
-      {WORKSPACE_SETTINGS_LINKS.map((item, index) => (
-        <div
-          className={`${
-            item.highlight(pathname, `/${workspaceSlug}`)
-              ? "text-custom-primary-100 text-sm py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
-              : "text-custom-text-200 flex flex-grow cursor-pointer justify-around border-b border-custom-border-200 text-sm py-2 px-3 whitespace-nowrap"
-          }`}
-          key={index}
-          onClick={() => router.push(`/${workspaceSlug}${item.href}`)}
-        >
-          {item.label}
-        </div>
-      ))}
+      {WORKSPACE_SETTINGS_LINKS.map(
+        (item, index) =>
+          shouldRenderSettingLink(item.key) &&
+          workspaceMemberInfo >= item.access && (
+            <div
+              className={`${item.highlight(pathname, `/${workspaceSlug}`)
+                ? "text-custom-primary-100 text-sm py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
+                : "text-custom-text-200 flex flex-grow cursor-pointer justify-around border-b border-custom-border-200 text-sm py-2 px-3 whitespace-nowrap"
+                }`}
+              key={index}
+              onClick={() => router.push(`/${workspaceSlug}${item.href}`)}
+            >
+              {item.label}
+            </div>
+          )
+      )}
     </div>
   );
 };

web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx

@@ -12,6 +12,8 @@ import { EUserWorkspaceRoles } from "@/constants/workspace";
 import { useUser } from "@/hooks/store";
 // plane web constants
 import { WORKSPACE_SETTINGS_LINKS } from "@/plane-web/constants/workspace";
+// plane web helpers
+import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
 
 export const WorkspaceSettingsSidebar = observer(() => {
   // router
@@ -22,6 +24,7 @@ export const WorkspaceSettingsSidebar = observer(() => {
     membership: { currentWorkspaceRole },
   } = useUser();
 
+  // derived values
   const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
 
   return (
@@ -31,6 +34,7 @@ export const WorkspaceSettingsSidebar = observer(() => {
         <div className="flex w-full flex-col gap-1">
           {WORKSPACE_SETTINGS_LINKS.map(
             (link) =>
+              shouldRenderSettingLink(link.key) &&
               workspaceMemberInfo >= link.access && (
                 <Link key={link.key} href={`/${workspaceSlug}${link.href}`}>
                   <SidebarNavItem

web/ce/helpers/workspace.helper.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const shouldRenderSettingLink = (settingKey: string) => true;

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

@@ -11,6 +11,8 @@ import { useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane wev constants
 import { WORKSPACE_SETTINGS_LINKS } from "@/plane-web/constants/workspace";
+// plane web helpers
+import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
 
 type Props = {
   closePalette: () => void;
@@ -38,7 +40,8 @@ export const CommandPaletteWorkspaceSettingsActions: React.FC<Props> = (props) =
     <>
       {WORKSPACE_SETTINGS_LINKS.map(
         (setting) =>
-          workspaceMemberInfo >= setting.access && (
+          workspaceMemberInfo >= setting.access &&
+          shouldRenderSettingLink(setting.key) && (
             <Command.Item
               key={setting.key}
               onSelect={() => redirect(`/${workspaceSlug}${setting.href}`)}

web/core/lib/store-context.tsx

@@ -15,7 +15,6 @@ const initializeStore = () => {
   return newRootStore;
 };
 
-export const StoreProvider = ({ children }: { children: ReactElement }) => {
-  const store = initializeStore();
-  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
-};
+export const store = initializeStore();
+
+export const StoreProvider = ({ children }: { children: ReactElement }) => <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;

web/ee/helpers/workspace.helper.ts

@@ -0,0 +1 @@
+export * from "ce/helpers/workspace.helper";