fix: workspace settings pages authorization (#2915)

* fix: workspace settings pages authorization

* chore: user cannot add a member with a higher role than theirs

* chore: update workspace general settings auth

web/pages/[workspaceSlug]/settings/api-tokens.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { WorkspaceSettingLayout } from "layouts/settings-layout";
@@ -15,8 +18,7 @@ import { APITokenService } from "services/api_token.service";
 import { NextPageWithLayout } from "types/app";
 // constants
 import { API_TOKENS_LIST } from "constants/fetch-keys";
-import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 const apiTokenService = new APITokenService();
 
@@ -31,7 +33,7 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
     user: { currentWorkspaceRole },
   } = useMobxStore();
 
-  const isAdmin = currentWorkspaceRole === 20;
+  const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
 
   const { data: tokens } = useSWR(workspaceSlug && isAdmin ? API_TOKENS_LIST(workspaceSlug.toString()) : null, () =>
     workspaceSlug && isAdmin ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null

web/pages/[workspaceSlug]/settings/billing.tsx

@@ -1,4 +1,6 @@
-import { ReactElement } from "react";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { WorkspaceSettingLayout } from "layouts/settings-layout";
@@ -8,27 +10,44 @@ import { WorkspaceSettingHeader } from "components/headers";
 import { Button } from "@plane/ui";
 // types
 import { NextPageWithLayout } from "types/app";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
-const BillingSettingsPage: NextPageWithLayout = () => (
-  <section className="pr-9 py-8 w-full overflow-y-auto">
-    <div>
-      <div className="flex  items-center py-3.5 border-b border-custom-border-100">
-        <h3 className="text-xl font-medium">Billing & Plans</h3>
+const BillingSettingsPage: NextPageWithLayout = observer(() => {
+  const {
+    user: { currentWorkspaceRole },
+  } = useMobxStore();
+
+  const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
+
+  if (!isAdmin)
+    return (
+      <div className="h-full w-full flex justify-center mt-10 p-4">
+        <p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
       </div>
-    </div>
-    <div className="px-4 py-6">
+    );
+
+  return (
+    <section className="pr-9 py-8 w-full overflow-y-auto">
       <div>
-        <h4 className="text-md mb-1 leading-6">Current plan</h4>
-        <p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
-        <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
-          <Button variant="neutral-primary">View Plans</Button>
-        </a>
+        <div className="flex  items-center py-3.5 border-b border-custom-border-100">
+          <h3 className="text-xl font-medium">Billing & Plans</h3>
+        </div>
       </div>
-    </div>
-  </section>
-);
+      <div className="px-4 py-6">
+        <div>
+          <h4 className="text-md mb-1 leading-6">Current plan</h4>
+          <p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
+          <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
+            <Button variant="neutral-primary">View Plans</Button>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+});
 
-BillingSettingsPage.getLayout = function getLayout(page: ReactElement) {
+BillingSettingsPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
     <AppLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>

web/pages/[workspaceSlug]/settings/exports.tsx

@@ -1,4 +1,6 @@
-import { ReactElement } from "react";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // layout
 import { AppLayout } from "layouts/app-layout";
 import { WorkspaceSettingLayout } from "layouts/settings-layout";
@@ -7,17 +9,35 @@ import { WorkspaceSettingHeader } from "components/headers";
 import ExportGuide from "components/exporter/guide";
 // types
 import { NextPageWithLayout } from "types/app";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
-const ExportsPage: NextPageWithLayout = () => (
-  <div className="pr-9 py-8 w-full overflow-y-auto">
-    <div className="flex items-center py-3.5 border-b border-custom-border-100">
-      <h3 className="text-xl font-medium">Exports</h3>
+const ExportsPage: NextPageWithLayout = observer(() => {
+  const {
+    user: { currentWorkspaceRole },
+  } = useMobxStore();
+
+  const hasPageAccess =
+    currentWorkspaceRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentWorkspaceRole);
+
+  if (!hasPageAccess)
+    return (
+      <div className="h-full w-full flex justify-center mt-10 p-4">
+        <p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
+      </div>
+    );
+
+  return (
+    <div className="pr-9 py-8 w-full overflow-y-auto">
+      <div className="flex items-center py-3.5 border-b border-custom-border-100">
+        <h3 className="text-xl font-medium">Exports</h3>
+      </div>
+      <ExportGuide />
     </div>
-    <ExportGuide />
-  </div>
-);
+  );
+});
 
-ExportsPage.getLayout = function getLayout(page: ReactElement) {
+ExportsPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
     <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>

web/pages/[workspaceSlug]/settings/imports.tsx

@@ -1,4 +1,6 @@
-import { ReactElement } from "react";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import { WorkspaceSettingLayout } from "layouts/settings-layout";
 import { AppLayout } from "layouts/app-layout";
@@ -7,17 +9,34 @@ import IntegrationGuide from "components/integration/guide";
 import { WorkspaceSettingHeader } from "components/headers";
 // types
 import { NextPageWithLayout } from "types/app";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
-const ImportsPage: NextPageWithLayout = () => (
-  <section className="pr-9 py-8 w-full overflow-y-auto">
-    <div className="flex items-center py-3.5 border-b border-custom-border-100">
-      <h3 className="text-xl font-medium">Imports</h3>
-    </div>
-    <IntegrationGuide />
-  </section>
-);
+const ImportsPage: NextPageWithLayout = observer(() => {
+  const {
+    user: { currentWorkspaceRole },
+  } = useMobxStore();
 
-ImportsPage.getLayout = function getLayout(page: ReactElement) {
+  const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
+
+  if (!isAdmin)
+    return (
+      <div className="h-full w-full flex justify-center mt-10 p-4">
+        <p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
+      </div>
+    );
+
+  return (
+    <section className="pr-9 py-8 w-full overflow-y-auto">
+      <div className="flex items-center py-3.5 border-b border-custom-border-100">
+        <h3 className="text-xl font-medium">Imports</h3>
+      </div>
+      <IntegrationGuide />
+    </section>
+  );
+});
+
+ImportsPage.getLayout = function getLayout(page: React.ReactElement) {
   return (
     <AppLayout header={<WorkspaceSettingHeader title="Import Settings" />}>
       <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>

web/pages/[workspaceSlug]/settings/integrations.tsx

@@ -1,6 +1,9 @@
 import { ReactElement } from "react";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import { IntegrationService } from "services/integrations";
 // layouts
@@ -16,16 +19,31 @@ import { Loader } from "@plane/ui";
 import { NextPageWithLayout } from "types/app";
 // fetch-keys
 import { APP_INTEGRATIONS } from "constants/fetch-keys";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
-// services
 const integrationService = new IntegrationService();
 
-const WorkspaceIntegrationsPage: NextPageWithLayout = () => {
+const WorkspaceIntegrationsPage: NextPageWithLayout = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
+  // mobx store
+  const {
+    user: { currentWorkspaceRole },
+  } = useMobxStore();
 
-  const { data: appIntegrations } = useSWR(workspaceSlug ? APP_INTEGRATIONS : null, () =>
-    workspaceSlug ? integrationService.getAppIntegrationsList() : null
+  const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
+
+  if (!isAdmin)
+    return (
+      <div className="h-full w-full flex justify-center mt-10 p-4">
+        <p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
+      </div>
+    );
+
+  const { data: appIntegrations } = useSWR(workspaceSlug && isAdmin ? APP_INTEGRATIONS : null, () =>
+    workspaceSlug && isAdmin ? integrationService.getAppIntegrationsList() : null
   );
 
   return (
@@ -43,7 +61,7 @@ const WorkspaceIntegrationsPage: NextPageWithLayout = () => {
       </div>
     </section>
   );
-};
+});
 
 WorkspaceIntegrationsPage.getLayout = function getLayout(page: ReactElement) {
   return (

web/pages/[workspaceSlug]/settings/members.tsx

@@ -1,9 +1,11 @@
 import { useState, ReactElement } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { Search } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
-import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { WorkspaceSettingLayout } from "layouts/settings-layout";
@@ -12,21 +14,20 @@ import { WorkspaceSettingHeader } from "components/headers";
 import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "components/workspace";
 // ui
 import { Button } from "@plane/ui";
-// icons
-import { Search } from "lucide-react";
-// helpers
-import { trackEvent } from "helpers/event-tracker.helper";
 // types
 import { NextPageWithLayout } from "types/app";
 import { IWorkspaceBulkInviteFormData } from "types";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store
   const {
+    user: { currentWorkspaceRole },
     workspaceMember: { inviteMembersToWorkspace },
-    trackEvent: { postHogEventTracker, setTrackElement }
+    trackEvent: { postHogEventTracker, setTrackElement },
   } = useMobxStore();
   // states
   const [inviteModal, setInviteModal] = useState(false);
@@ -57,15 +58,16 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
       });
   };
 
+  const hasAddMemberPermission =
+    currentWorkspaceRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentWorkspaceRole);
+
   return (
     <>
-      {workspaceSlug && (
-        <SendWorkspaceInvitationModal
-          isOpen={inviteModal}
-          onClose={() => setInviteModal(false)}
-          onSubmit={handleWorkspaceInvite}
-        />
-      )}
+      <SendWorkspaceInvitationModal
+        isOpen={inviteModal}
+        onClose={() => setInviteModal(false)}
+        onSubmit={handleWorkspaceInvite}
+      />
       <section className="pr-9 py-8 w-full overflow-y-auto">
         <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-100">
           <h4 className="text-xl font-medium">Members</h4>
@@ -79,13 +81,18 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
               onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
-          <Button variant="primary" size="sm" onClick={() => {
-            setTrackElement("WORKSPACE_SETTINGS_MEMBERS_PAGE_HEADER");
-            setInviteModal(true)
-          }
-          }>
-            Add Member
-          </Button>
+          {hasAddMemberPermission && (
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={() => {
+                setTrackElement("WORKSPACE_SETTINGS_MEMBERS_PAGE_HEADER");
+                setInviteModal(true);
+              }}
+            >
+              Add member
+            </Button>
+          )}
         </div>
         <WorkspaceMembersList searchQuery={searchQuery} />
       </section>