feat(rbac): added new permission check for workspace in frontend

frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -3,6 +3,8 @@ import { useTranslation } from "react-i18next";
 import { Tab } from "@headlessui/react";
 
 import NavHeader from "@app/components/navigation/NavHeader";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
 
 import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
 import { ProjectServiceTokensTab } from "./components/ProjectServiceTokensTab";
@@ -14,45 +16,50 @@ const tabs = [
   { name: "Webhooks", key: "tab-project-webhooks" }
 ];
 
-export const ProjectSettingsPage = () => {
-  const { t } = useTranslation();
-  return (
-    <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
-      <div className="w-full max-w-screen-lg">
-        <div className="relative right-5 ml-4">
-          <NavHeader pageName={t("settings.project.title")} isProjectRelated />
+export const ProjectSettingsPage = withProjectPermission(
+  () => {
+    const { t } = useTranslation();
+    return (
+      <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
+        <div className="w-full max-w-screen-lg">
+          <div className="relative right-5 ml-4">
+            <NavHeader pageName={t("settings.project.title")} isProjectRelated />
+          </div>
+          <div className="my-8">
+            <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
+          </div>
+          <Tab.Group>
+            <Tab.List className="mb-4 w-full border-b-2 border-mineshaft-800">
+              {tabs.map((tab) => (
+                <Tab as={Fragment} key={tab.key}>
+                  {({ selected }) => (
+                    <button
+                      type="button"
+                      className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${
+                        selected ? "border-b border-white text-white" : "text-mineshaft-400"
+                      }`}
+                    >
+                      {tab.name}
+                    </button>
+                  )}
+                </Tab>
+              ))}
+            </Tab.List>
+            <Tab.Panels>
+              <Tab.Panel>
+                <ProjectGeneralTab />
+              </Tab.Panel>
+              <Tab.Panel>
+                <ProjectServiceTokensTab />
+              </Tab.Panel>
+              <Tab.Panel>
+                <WebhooksTab />
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
         </div>
-        <div className="my-8">
-          <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
-        </div>
-        <Tab.Group>
-          <Tab.List className="mb-4 w-full border-b-2 border-mineshaft-800">
-            {tabs.map((tab) => (
-              <Tab as={Fragment} key={tab.key}>
-                {({ selected }) => (
-                  <button
-                    type="button"
-                    className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
-                  >
-                    {tab.name}
-                  </button>
-                )}
-              </Tab>
-            ))}
-          </Tab.List>
-          <Tab.Panels>
-            <Tab.Panel>
-              <ProjectGeneralTab />
-            </Tab.Panel>
-            <Tab.Panel>
-              <ProjectServiceTokensTab />
-            </Tab.Panel>
-            <Tab.Panel>
-              <WebhooksTab />
-            </Tab.Panel>
-          </Tab.Panels>
-        </Tab.Group>
       </div>
-    </div>
-  );
-};
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Settings }
+);

frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx

@@ -1,52 +1,62 @@
 import { useTranslation } from "react-i18next";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
 import { Checkbox } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import { useToggleAutoCapitalization } from "@app/hooks/api"; 
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+import { useToggleAutoCapitalization } from "@app/hooks/api";
 
-export const AutoCapitalizationSection = () => {
-  const { t } = useTranslation();
-  const { createNotification } = useNotificationContext();
-  const { currentWorkspace } = useWorkspace();
-  const { mutateAsync } = useToggleAutoCapitalization();
-  
-  const handleToggleCapitalizationToggle = async (state: boolean) => {
-    try {
-      if (!currentWorkspace?._id) return;
+export const AutoCapitalizationSection = withProjectPermission(
+  () => {
+    const { t } = useTranslation();
+    const { createNotification } = useNotificationContext();
+    const { currentWorkspace } = useWorkspace();
+    const { mutateAsync } = useToggleAutoCapitalization();
 
-      await mutateAsync({
-        workspaceID: currentWorkspace._id,
-        state
-      });
+    const handleToggleCapitalizationToggle = async (state: boolean) => {
+      try {
+        if (!currentWorkspace?._id) return;
 
-      const text = `Successfully ${state ? "enabled" : "disabled"} auto capitalization`;
-      createNotification({
-        text,
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to update auto capitalization",
-        type: "error"
-      });
-    }
-  }
+        await mutateAsync({
+          workspaceID: currentWorkspace._id,
+          state
+        });
 
-  return (
-    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-      <p className="mb-3 text-xl font-semibold">{t("settings.project.auto-capitalization")}</p>
-      <Checkbox
-        className="data-[state=checked]:bg-primary"
-        id="autoCapitalization"
-        isChecked={currentWorkspace?.autoCapitalization ?? false}
-        onCheckedChange={(state) => {
-          handleToggleCapitalizationToggle(state as boolean);
-        }}
-      >
-        {t("settings.project.auto-capitalization-description")}
-      </Checkbox>
-    </div>
-  );
-};
+        const text = `Successfully ${state ? "enabled" : "disabled"} auto capitalization`;
+        createNotification({
+          text,
+          type: "success"
+        });
+      } catch (err) {
+        console.error(err);
+        createNotification({
+          text: "Failed to update auto capitalization",
+          type: "error"
+        });
+      }
+    };
+
+    return (
+      <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+        <p className="mb-3 text-xl font-semibold">{t("settings.project.auto-capitalization")}</p>
+        <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
+          {(isAllowed) => (
+            <Checkbox
+              className="data-[state=checked]:bg-primary"
+              id="autoCapitalization"
+              isDisabled={!isAllowed}
+              isChecked={currentWorkspace?.autoCapitalization ?? false}
+              onCheckedChange={(state) => {
+                handleToggleCapitalizationToggle(state as boolean);
+              }}
+            >
+              {t("settings.project.auto-capitalization-description")}
+            </Checkbox>
+          )}
+        </ProjectPermissionCan>
+      </div>
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Settings }
+);

frontend/src/views/Settings/ProjectSettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -3,30 +3,34 @@ import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
-import { useOrganization, useWorkspace } from "@app/context";
-import { useToggle } from "@app/hooks";
 import {
-    useDeleteWorkspace
-} from "@app/hooks/api";
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useOrganization,
+  useWorkspace
+} from "@app/context";
+import { useToggle } from "@app/hooks";
+import { useDeleteWorkspace } from "@app/hooks/api";
 
 export const DeleteProjectSection = () => {
-    const { t } = useTranslation();
-    const router = useRouter();
-    const { createNotification } = useNotificationContext();
-    const { currentWorkspace } = useWorkspace();
-    const { currentOrg } = useOrganization()
-    const [isDeleting, setIsDeleting] = useToggle();
-    const [deleteProjectInput, setDeleteProjectInput] = useState("");
-    const deleteWorkspace = useDeleteWorkspace();
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { createNotification } = useNotificationContext();
+  const { currentWorkspace } = useWorkspace();
+  const { currentOrg } = useOrganization();
+  const [isDeleting, setIsDeleting] = useToggle();
+  const [deleteProjectInput, setDeleteProjectInput] = useState("");
+  const deleteWorkspace = useDeleteWorkspace();
 
-    const onDeleteWorkspace = async () => {
+  const onDeleteWorkspace = async () => {
     setIsDeleting.on();
     try {
-        if (!currentWorkspace?._id) return;
-      await deleteWorkspace.mutateAsync({ 
+      if (!currentWorkspace?._id) return;
+      await deleteWorkspace.mutateAsync({
         workspaceID: currentWorkspace?._id
-    });
+      });
       // redirect user to the org overview
       router.push(`/org/${currentOrg?._id}/overview`);
 
@@ -45,38 +49,42 @@ export const DeleteProjectSection = () => {
     }
   };
 
-    return (
-        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-red">
-          <p className="mb-3 text-xl font-semibold text-red">{t("settings.project.danger-zone")}</p>
-          <p className="text-gray-400 mb-8">{t("settings.project.danger-zone-note")}</p>
-          <div className="mr-auto mt-4 max-h-28 w-full max-w-md">
-            <FormControl
-              label={
-                <div className="mb-0.5 text-sm font-normal text-gray-400">
-                  Type <span className="font-bold">{currentWorkspace?.name}</span> to delete the
-                  workspace
-                </div>
-              }
-            >
-              <Input
-                onChange={(e) => setDeleteProjectInput(e.target.value)}
-                value={deleteProjectInput}
-                placeholder="Type the project name to delete"
-                className="bg-mineshaft-800"
-              />
-            </FormControl>
-          </div>
+  return (
+    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-red">
+      <p className="mb-3 text-xl font-semibold text-red">{t("settings.project.danger-zone")}</p>
+      <p className="text-gray-400 mb-8">{t("settings.project.danger-zone-note")}</p>
+      <div className="mr-auto mt-4 max-h-28 w-full max-w-md">
+        <FormControl
+          label={
+            <div className="mb-0.5 text-sm font-normal text-gray-400">
+              Type <span className="font-bold">{currentWorkspace?.name}</span> to delete the
+              workspace
+            </div>
+          }
+        >
+          <Input
+            onChange={(e) => setDeleteProjectInput(e.target.value)}
+            value={deleteProjectInput}
+            placeholder="Type the project name to delete"
+            className="bg-mineshaft-800"
+          />
+        </FormControl>
+      </div>
+      <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Workspace}>
+        {(isAllowed) => (
           <Button
             colorSchema="danger"
             onClick={onDeleteWorkspace}
-            isDisabled={deleteProjectInput !== currentWorkspace?.name || isDeleting}
+            isDisabled={!isAllowed || deleteProjectInput !== currentWorkspace?.name || isDeleting}
             isLoading={isDeleting}
           >
             {t("settings.project.delete-project")}
           </Button>
-          <p className="mt-3 ml-0.5 text-xs text-gray-500">
-            {t("settings.project.delete-project-note")}
-          </p>
-        </div>
-    );
-}
+        )}
+      </ProjectPermissionCan>
+      <p className="mt-3 ml-0.5 text-xs text-gray-500">
+        {t("settings.project.delete-project-note")}
+      </p>
+    </div>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx

@@ -1,99 +1,115 @@
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-    decryptAssymmetric,
-    encryptAssymmetric
+  decryptAssymmetric,
+  encryptAssymmetric
 } from "@app/components/utilities/cryptography/crypto";
 import { Checkbox } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import { useGetUserWsKey,useGetWorkspaceBot, useUpdateBotActiveStatus } from "@app/hooks/api";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+import { useGetUserWsKey, useGetWorkspaceBot, useUpdateBotActiveStatus } from "@app/hooks/api";
 
-export const E2EESection = () => {
+export const E2EESection = withProjectPermission(
+  () => {
     const { currentWorkspace } = useWorkspace();
     const { data: bot } = useGetWorkspaceBot(currentWorkspace?._id ?? "");
     const { mutateAsync: updateBotActiveStatus } = useUpdateBotActiveStatus();
     const { data: wsKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
 
     /**
-   * Activate bot for project by performing the following steps:
-   * 1. Get the (encrypted) project key
-   * 2. Decrypt project key with user's private key
-   * 3. Encrypt project key with bot's public key
-   * 4. Send encrypted project key to backend and set bot status to active
-   */
+     * Activate bot for project by performing the following steps:
+     * 1. Get the (encrypted) project key
+     * 2. Decrypt project key with user's private key
+     * 3. Encrypt project key with bot's public key
+     * 4. Send encrypted project key to backend and set bot status to active
+     */
     const toggleBotActivate = async () => {
-        let botKey;
-        try {
-            if (!currentWorkspace?._id) return;
+      let botKey;
+      try {
+        if (!currentWorkspace?._id) return;
 
-            if (bot && wsKey) {
-                // case: there is a bot
-                
-                if (!bot.isActive) {
-                    // bot is not active -> activate bot
-                    
-                    const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+        if (bot && wsKey) {
+          // case: there is a bot
 
-                    if (!PRIVATE_KEY) {
-                        throw new Error("Private Key missing");
-                    }
+          if (!bot.isActive) {
+            // bot is not active -> activate bot
 
-                    const WORKSPACE_KEY = decryptAssymmetric({
-                        ciphertext: wsKey.encryptedKey,
-                        nonce: wsKey.nonce,
-                        publicKey: wsKey.sender.publicKey,
-                        privateKey: PRIVATE_KEY
-                    });
+            const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
 
-                    const { ciphertext, nonce } = encryptAssymmetric({
-                        plaintext: WORKSPACE_KEY,
-                        publicKey: bot.publicKey,
-                        privateKey: PRIVATE_KEY
-                    });
-
-                    botKey = {
-                        encryptedKey: ciphertext,
-                        nonce
-                    };
-                    
-                    await updateBotActiveStatus({
-                        workspaceId: currentWorkspace._id,
-                        botKey,
-                        isActive: true,
-                        botId: bot._id
-                    });
-                } else {
-                    // bot is active -> deactivate bot
-                    await updateBotActiveStatus({
-                        isActive: false,
-                        botId: bot._id,
-                        workspaceId: currentWorkspace._id
-                    });
-                }
+            if (!PRIVATE_KEY) {
+              throw new Error("Private Key missing");
             }
-        } catch (err) {
-            console.error(err);
+
+            const WORKSPACE_KEY = decryptAssymmetric({
+              ciphertext: wsKey.encryptedKey,
+              nonce: wsKey.nonce,
+              publicKey: wsKey.sender.publicKey,
+              privateKey: PRIVATE_KEY
+            });
+
+            const { ciphertext, nonce } = encryptAssymmetric({
+              plaintext: WORKSPACE_KEY,
+              publicKey: bot.publicKey,
+              privateKey: PRIVATE_KEY
+            });
+
+            botKey = {
+              encryptedKey: ciphertext,
+              nonce
+            };
+
+            await updateBotActiveStatus({
+              workspaceId: currentWorkspace._id,
+              botKey,
+              isActive: true,
+              botId: bot._id
+            });
+          } else {
+            // bot is active -> deactivate bot
+            await updateBotActiveStatus({
+              isActive: false,
+              botId: bot._id,
+              workspaceId: currentWorkspace._id
+            });
+          }
         }
+      } catch (err) {
+        console.error(err);
+      }
     };
 
     return bot ? (
       <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
         <p className="mb-3 text-xl font-semibold">End-to-End Encryption</p>
         <p className="text-gray-400 mb-8">
-            Disabling, end-to-end encryption (E2EE) unlocks capabilities like native integrations to cloud providers as well as HTTP calls to get secrets back raw but enables the server to read/decrypt your secret values.
+          Disabling, end-to-end encryption (E2EE) unlocks capabilities like native integrations to
+          cloud providers as well as HTTP calls to get secrets back raw but enables the server to
+          read/decrypt your secret values.
         </p>
         <p className="text-gray-400 mb-8">
-            Note that, even with E2EE disabled, your secrets are always encrypted at rest.
+          Note that, even with E2EE disabled, your secrets are always encrypted at rest.
         </p>
-        <Checkbox
-          className="data-[state=checked]:bg-primary"
-          id="autoCapitalization"
-          isChecked={!bot.isActive}
-          onCheckedChange={async () => {
-            await toggleBotActivate();
-          }}
-        >
-            End-to-end encryption enabled
-        </Checkbox>
+        <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
+          {(isAllowed) => (
+            <Checkbox
+              className="data-[state=checked]:bg-primary"
+              id="autoCapitalization"
+              isChecked={!bot.isActive}
+              isDisabled={!isAllowed}
+              onCheckedChange={async () => {
+                await toggleBotActivate();
+              }}
+            >
+              End-to-end encryption enabled
+            </Checkbox>
+          )}
+        </ProjectPermissionCan>
       </div>
-    ) : <div />;
-  };
-  
+    ) : (
+      <div />
+    );
+  },
+  {
+    action: ProjectPermissionActions.Read,
+    subject: ProjectPermissionSub.Settings
+  }
+);

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx

@@ -2,115 +2,127 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal, UpgradePlanModal } from "@app/components/v2";
 import {
-  Button,
-  DeleteActionModal,
-  UpgradePlanModal
-} from "@app/components/v2";
-import { useSubscription,useWorkspace } from "@app/context";
-import {
-  useDeleteWsEnvironment
-} from "@app/hooks/api";
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useSubscription,
+  useWorkspace
+} from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+import { useDeleteWsEnvironment } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AddEnvironmentModal } from "./AddEnvironmentModal";
 import { EnvironmentTable } from "./EnvironmentTable";
 import { UpdateEnvironmentModal } from "./UpdateEnvironmentModal";
 
-export const EnvironmentSection = () => {
-  const { createNotification } = useNotificationContext();
-  const { subscription } = useSubscription();
-  const { currentWorkspace } = useWorkspace();
+export const EnvironmentSection = withProjectPermission(
+  () => {
+    const { createNotification } = useNotificationContext();
+    const { subscription } = useSubscription();
+    const { currentWorkspace } = useWorkspace();
 
-  const deleteWsEnvironment = useDeleteWsEnvironment();
+    const deleteWsEnvironment = useDeleteWsEnvironment();
 
-  const isMoreEnvironmentsAllowed = (subscription?.environmentLimit && currentWorkspace?.environments) ? (currentWorkspace.environments.length < subscription.environmentLimit) : true;
-  
-  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    "createEnv",
-    "updateEnv",
-    "deleteEnv",
-    "upgradePlan"
-  ] as const);
+    const isMoreEnvironmentsAllowed =
+      subscription?.environmentLimit && currentWorkspace?.environments
+        ? currentWorkspace.environments.length < subscription.environmentLimit
+        : true;
 
-  const onEnvDeleteSubmit = async (environmentSlug: string) => {
-    try {
-      if (!currentWorkspace?._id) return;
-      
-      await deleteWsEnvironment.mutateAsync({
-        workspaceID: currentWorkspace._id,
-        environmentSlug
-      });
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "createEnv",
+      "updateEnv",
+      "deleteEnv",
+      "upgradePlan"
+    ] as const);
 
-      createNotification({
-        text: "Successfully deleted environment",
-        type: "success"
-      });
-      
-      handlePopUpClose("deleteEnv");
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to delete environment",
-        type: "error"
-      });
-    }
-  };
+    const onEnvDeleteSubmit = async (environmentSlug: string) => {
+      try {
+        if (!currentWorkspace?._id) return;
 
-  return (
-    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-      <div className="flex justify-between mb-8">
-        <p className="text-xl font-semibold text-mineshaft-100">
-          Environments
-        </p>
-        <div>
-          <Button
-            colorSchema="secondary"
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            onClick={() => {
-              if (isMoreEnvironmentsAllowed) {
-                handlePopUpOpen("createEnv");
-              } else {
-                handlePopUpOpen("upgradePlan");
-              }
-            }}
-          >
-            Create environment
-          </Button>
+        await deleteWsEnvironment.mutateAsync({
+          workspaceID: currentWorkspace._id,
+          environmentSlug
+        });
+
+        createNotification({
+          text: "Successfully deleted environment",
+          type: "success"
+        });
+
+        handlePopUpClose("deleteEnv");
+      } catch (err) {
+        console.error(err);
+        createNotification({
+          text: "Failed to delete environment",
+          type: "error"
+        });
+      }
+    };
+
+    return (
+      <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+        <div className="flex justify-between mb-8">
+          <p className="text-xl font-semibold text-mineshaft-100">Environments</p>
+          <div>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Create}
+              a={ProjectPermissionSub.Environments}
+            >
+              {(isAllowed) => (
+                <Button
+                  colorSchema="secondary"
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  onClick={() => {
+                    if (isMoreEnvironmentsAllowed) {
+                      handlePopUpOpen("createEnv");
+                    } else {
+                      handlePopUpOpen("upgradePlan");
+                    }
+                  }}
+                  isDisabled={!isAllowed}
+                >
+                  Create environment
+                </Button>
+              )}
+            </ProjectPermissionCan>
+          </div>
         </div>
+        <p className="text-gray-400 mb-8">
+          Choose which environments will show up in your dashboard like development, staging,
+          production
+        </p>
+        <EnvironmentTable handlePopUpOpen={handlePopUpOpen} />
+        <AddEnvironmentModal
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <UpdateEnvironmentModal
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <DeleteActionModal
+          isOpen={popUp.deleteEnv.isOpen}
+          title={`Are you sure want to delete ${
+            (popUp?.deleteEnv?.data as { name: string })?.name || " "
+          }?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteEnv", isOpen)}
+          deleteKey={(popUp?.deleteEnv?.data as { slug: string })?.slug || ""}
+          onDeleteApproved={() =>
+            onEnvDeleteSubmit((popUp?.deleteEnv?.data as { slug: string })?.slug)
+          }
+        />
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text="You can add custom environments if you switch to Infisical's Team plan."
+        />
       </div>
-      <p className="text-gray-400 mb-8">
-        Choose which environments will show up in your dashboard like development, staging, production
-      </p>
-      <EnvironmentTable 
-        handlePopUpOpen={handlePopUpOpen}
-      />
-      <AddEnvironmentModal 
-        popUp={popUp}
-        handlePopUpClose={handlePopUpClose}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-      <UpdateEnvironmentModal 
-        popUp={popUp}
-        handlePopUpClose={handlePopUpClose}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-      <DeleteActionModal
-        isOpen={popUp.deleteEnv.isOpen}
-        title={`Are you sure want to delete ${
-          (popUp?.deleteEnv?.data as { name: string })?.name || " "
-        }?`}
-        onChange={(isOpen) => handlePopUpToggle("deleteEnv", isOpen)}
-        deleteKey={(popUp?.deleteEnv?.data as { slug: string })?.slug || ""}
-        onDeleteApproved={() =>
-          onEnvDeleteSubmit((popUp?.deleteEnv?.data as { slug: string })?.slug)
-        }
-      />
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can add custom environments if you switch to Infisical's Team plan."
-      />
-    </div>
-  );
-};
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Environments }
+);

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentTable.tsx

@@ -2,6 +2,7 @@ import { faArrowDown,faArrowUp, faPencil, faXmark } from "@fortawesome/free-soli
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   EmptyState,
   IconButton,
@@ -14,7 +15,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import {
   useReorderWsEnvironment
 } from "@app/hooks/api";
@@ -115,28 +116,42 @@ export const EnvironmentTable = ({ handlePopUpOpen }: Props) => {
                   >
                     <FontAwesomeIcon icon={faArrowUp} />
                   </IconButton>
-                  <IconButton
-                    className="mr-3 py-2"
-                    onClick={() => {
-                      handlePopUpOpen("updateEnv", { name, slug });
-                    }}
-                    colorSchema="primary"
-                    variant="plain"
-                    ariaLabel="update"
+                  <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Environments}
                   >
-                    <FontAwesomeIcon icon={faPencil} />
-                  </IconButton>
-                  <IconButton
-                    onClick={() => {
-                      handlePopUpOpen("deleteEnv", { name, slug });
-                    }}
-                    size="lg"
-                    colorSchema="danger"
-                    variant="plain"
-                    ariaLabel="update"
+                    {(isAllowed) => (
+                      <IconButton
+                        className="mr-3 py-2"
+                        onClick={() => {
+                          handlePopUpOpen("updateEnv", { name, slug });
+                        }}
+                        isDisabled={!isAllowed}
+                        colorSchema="primary"
+                        variant="plain"
+                        ariaLabel="update"
+                      >
+                        <FontAwesomeIcon icon={faPencil} />
+                      </IconButton>
+                    )}
+                  </ProjectPermissionCan>
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Delete}
+                    a={ProjectPermissionSub.Environments}
                   >
-                    <FontAwesomeIcon icon={faXmark} />
-                  </IconButton>
+                    {(isAllowed) => (
+                      <IconButton
+                        onClick={() => {
+                          handlePopUpOpen("deleteEnv", { name, slug });
+                        }}
+                        size="lg"
+                        colorSchema="danger"
+                        variant="plain"
+                        ariaLabel="update"
+                        isDisabled={!isAllowed}
+                      >
+                        <FontAwesomeIcon icon={faXmark} />
+                      </IconButton>
+                    )}
+                  </ProjectPermissionCan>
                 </Td>
               </Tr>
             ))}

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectIndexSecretsSection/ProjectIndexSecretsSection.tsx

@@ -1,71 +1,77 @@
 import {
-    decryptAssymmetric,
-    decryptSymmetric
+  decryptAssymmetric,
+  decryptSymmetric
 } from "@app/components/utilities/cryptography/crypto";
 import { Button } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
 import {
-    useGetUserWsKey,
-    useGetWorkspaceIndexStatus,
-    useGetWorkspaceSecrets,
-    useNameWorkspaceSecrets
+  useGetUserWsKey,
+  useGetWorkspaceIndexStatus,
+  useGetWorkspaceSecrets,
+  useNameWorkspaceSecrets
 } from "@app/hooks/api";
 
-export const ProjectIndexSecretsSection = () => {
+// TODO: add check so that this only shows up if user is
+// an admin in the workspace
+
+export const ProjectIndexSecretsSection = withProjectPermission(
+  () => {
     const { currentWorkspace } = useWorkspace();
-    const { data: isBlindIndexed, isLoading: isBlindIndexedLoading } = useGetWorkspaceIndexStatus(currentWorkspace?._id ?? "");
+    const { data: isBlindIndexed, isLoading: isBlindIndexedLoading } = useGetWorkspaceIndexStatus(
+      currentWorkspace?._id ?? ""
+    );
     const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
     const { data: encryptedSecrets } = useGetWorkspaceSecrets(currentWorkspace?._id ?? "");
     const nameWorkspaceSecrets = useNameWorkspaceSecrets();
     
     const onEnableBlindIndices = async () => {
-    if (!currentWorkspace?._id) return;
-    if (!encryptedSecrets) return;
-    if (!latestFileKey) return;
+      if (!currentWorkspace?._id) return;
+      if (!encryptedSecrets) return;
+      if (!latestFileKey) return;
 
-    const key = decryptAssymmetric({
-      ciphertext: latestFileKey.encryptedKey,
-      nonce: latestFileKey.nonce,
-      publicKey: latestFileKey.sender.publicKey,
-      privateKey: localStorage.getItem("PRIVATE_KEY") as string
-    });
-
-    const secretsToUpdate = encryptedSecrets.map((encryptedSecret) => {
-      const secretName = decryptSymmetric({
-        ciphertext: encryptedSecret.secretKeyCiphertext,
-        iv: encryptedSecret.secretKeyIV,
-        tag: encryptedSecret.secretKeyTag,
-        key
+      const key = decryptAssymmetric({
+        ciphertext: latestFileKey.encryptedKey,
+        nonce: latestFileKey.nonce,
+        publicKey: latestFileKey.sender.publicKey,
+        privateKey: localStorage.getItem("PRIVATE_KEY") as string
       });
 
-      return {
-        secretName,
-        _id: encryptedSecret._id
-      };
-    });
+      const secretsToUpdate = encryptedSecrets.map((encryptedSecret) => {
+        const secretName = decryptSymmetric({
+          ciphertext: encryptedSecret.secretKeyCiphertext,
+          iv: encryptedSecret.secretKeyIV,
+          tag: encryptedSecret.secretKeyTag,
+          key
+        });
 
-    await nameWorkspaceSecrets.mutateAsync({
-      workspaceId: currentWorkspace._id,
-      secretsToUpdate
-    });
-  };
+        return {
+          secretName,
+          _id: encryptedSecret._id
+        };
+      });
 
-    return (!isBlindIndexedLoading && (isBlindIndexed === false)) ? (
-        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-            <p className="mb-3 text-xl font-semibold">Blind Indices</p>
-            <p className="text-gray-400 mb-8">
-                Your project, created before the introduction of blind indexing, contains unindexed secrets. To access individual secrets by name through the SDK and public API, please enable blind indexing.
-            </p>
-            <Button
-                onClick={onEnableBlindIndices}
-                color="mineshaft"
-                size="sm"
-                type="submit"
-            >
-                Enable Blind Indexing
-            </Button>
-        </div>
+      await nameWorkspaceSecrets.mutateAsync({
+        workspaceId: currentWorkspace._id,
+        secretsToUpdate
+      });
+    };
+
+    return !isBlindIndexedLoading && !isBlindIndexed ? (
+      <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+        <p className="mb-3 text-xl font-semibold">Blind Indices</p>
+        <p className="text-gray-400 mb-8">
+          Your project, created before the introduction of blind indexing, contains unindexed
+          secrets. To access individual secrets by name through the SDK and public API, please
+          enable blind indexing.
+        </p>
+        <Button onClick={onEnableBlindIndices} color="mineshaft" size="sm" type="submit">
+          Enable Blind Indexing
+        </Button>
+      </div>
     ) : (
-        <div />
-    )
-}
+      <div />
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Settings }
+);

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx

@@ -4,11 +4,10 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import { 
-  useRenameWorkspace
-} from "@app/hooks/api";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useRenameWorkspace } from "@app/hooks/api";
 
 const formSchema = yup.object({
   name: yup.string().required().label("Project Name")
@@ -21,25 +20,20 @@ export const ProjectNameChangeSection = () => {
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync, isLoading } = useRenameWorkspace();
 
-  const {
-    handleSubmit,
-    control,
-    reset
-  } = useForm<FormData>({ resolver: yupResolver(formSchema) });
+  const { handleSubmit, control, reset } = useForm<FormData>({ resolver: yupResolver(formSchema) });
 
   useEffect(() => {
     if (currentWorkspace) {
-      reset({ 
+      reset({
         name: currentWorkspace.name
       });
     }
-    
   }, [currentWorkspace]);
 
   const onFormSubmit = async ({ name }: FormData) => {
     try {
       if (!currentWorkspace?._id) return;
-      
+
       await mutateAsync({
         workspaceID: currentWorkspace._id,
         newWorkspaceName: name
@@ -49,7 +43,6 @@ export const ProjectNameChangeSection = () => {
         text: "Successfully renamed workspace",
         type: "success"
       });
-      
     } catch (err) {
       console.error(err);
       createNotification({
@@ -60,37 +53,35 @@ export const ProjectNameChangeSection = () => {
   };
 
   return (
-    <form 
+    <form
       onSubmit={handleSubmit(onFormSubmit)}
       className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
     >
-      <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
-        Project Name    
-      </h2>
-        <div className="max-w-md">
-          <Controller
-            defaultValue=""
-            render={({ field, fieldState: { error } }) => (
-              <FormControl isError={Boolean(error)} errorText={error?.message}>
-                <Input 
-                  placeholder="Project name" 
-                  {...field} 
-                  className="bg-mineshaft-800" 
-                />
-              </FormControl>
-            )}
-            control={control}
-            name="name"
-          />
-        </div>
-        <Button
-          colorSchema="secondary"
-          type="submit"
-          isLoading={isLoading}
-          isDisabled={isLoading}
-        >
-          Save
-        </Button>
+      <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">Project Name</h2>
+      <div className="max-w-md">
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input placeholder="Project name" {...field} className="bg-mineshaft-800" />
+            </FormControl>
+          )}
+          control={control}
+          name="name"
+        />
+      </div>
+      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Workspace}>
+        {(isAllowed) => (
+          <Button
+            colorSchema="secondary"
+            type="submit"
+            isLoading={isLoading}
+            isDisabled={isLoading || !isAllowed}
+          >
+            Save
+          </Button>
+        )}
+      </ProjectPermissionCan>
     </form>
   );
 };

frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx

@@ -2,10 +2,10 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-  Button,
-  DeleteActionModal
-} from "@app/components/v2";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import { useDeleteWsTag } from "@app/hooks/api";
 
@@ -14,74 +14,80 @@ import { SecretTagsTable } from "./SecretTagsTable";
 
 type DeleteModalData = { name: string; id: string };
 
-export const SecretTagsSection = (): JSX.Element => {
-  const { createNotification } = useNotificationContext();
-  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
-    "CreateSecretTag",
-    "deleteTagConfirmation"
-  ] as const);
+export const SecretTagsSection = withProjectPermission(
+  (): JSX.Element => {
+    const { createNotification } = useNotificationContext();
+    const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
+      "CreateSecretTag",
+      "deleteTagConfirmation"
+    ] as const);
 
-  const deleteWsTag = useDeleteWsTag();
+    const deleteWsTag = useDeleteWsTag();
 
-  const onDeleteApproved = async () => {
-    try {
-      await deleteWsTag.mutateAsync({ 
-        tagID: (popUp?.deleteTagConfirmation?.data as DeleteModalData)?.id
-      });
+    const onDeleteApproved = async () => {
+      try {
+        await deleteWsTag.mutateAsync({
+          tagID: (popUp?.deleteTagConfirmation?.data as DeleteModalData)?.id
+        });
 
-      createNotification({
-        text: "Successfully deleted tag",
-        type: "success"
-      });
+        createNotification({
+          text: "Successfully deleted tag",
+          type: "success"
+        });
 
-      handlePopUpClose("deleteTagConfirmation");
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to delete the tag",
-        type: "error"
-      });
-    }
-  };
+        handlePopUpClose("deleteTagConfirmation");
+      } catch (err) {
+        console.error(err);
+        createNotification({
+          text: "Failed to delete the tag",
+          type: "error"
+        });
+      }
+    };
 
-  return (
-    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-      <div className="flex justify-between mb-8">
-        <p className="mb-3 text-xl font-semibold">Secret Tags</p>
-        <Button 
-          colorSchema="secondary" 
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          onClick={() => {
-            console.log("x");
-            handlePopUpOpen("CreateSecretTag");
-            console.log("x2");
-          }}
-        >
-          Create tag
-        </Button> 
+    return (
+      <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+        <div className="flex justify-between mb-8">
+          <p className="mb-3 text-xl font-semibold">Secret Tags</p>
+          <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Tags}>
+            {(isAllowed) => (
+              <Button
+                colorSchema="secondary"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => {
+                  console.log("x");
+                  handlePopUpOpen("CreateSecretTag");
+                  console.log("x2");
+                }}
+                isDisabled={!isAllowed}
+              >
+                Create tag
+              </Button>
+            )}
+          </ProjectPermissionCan>
+        </div>
+        <p className="text-gray-400 mb-8">
+          Every secret can be assigned to one or more tags. Here you can add and remove tags for the
+          current project.
+        </p>
+        <SecretTagsTable handlePopUpOpen={handlePopUpOpen} />
+        <AddSecretTagModal
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <DeleteActionModal
+          isOpen={popUp.deleteTagConfirmation.isOpen}
+          title={`Delete ${
+            (popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name || " "
+          } api key?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteTagConfirmation", isOpen)}
+          deleteKey={(popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name}
+          onClose={() => handlePopUpClose("deleteTagConfirmation")}
+          onDeleteApproved={onDeleteApproved}
+        />
       </div>
-      <p className="text-gray-400 mb-8">
-        Every secret can be assigned to one or more tags. Here you can add and remove tags for
-        the current project.
-      </p>
-      <SecretTagsTable 
-        handlePopUpOpen={handlePopUpOpen}
-      />
-      <AddSecretTagModal 
-        popUp={popUp}
-        handlePopUpClose={handlePopUpClose}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-      <DeleteActionModal
-        isOpen={popUp.deleteTagConfirmation.isOpen}
-        title={`Delete ${
-          (popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name || " "
-        } api key?`}
-        onChange={(isOpen) => handlePopUpToggle("deleteTagConfirmation", isOpen)}
-        deleteKey={(popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name}
-        onClose={() => handlePopUpClose("deleteTagConfirmation")}
-        onDeleteApproved={onDeleteApproved}
-      />
-    </div>
-  );
-};
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Tags }
+);

frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsTable.tsx

@@ -1,6 +1,7 @@
 import { faTags, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   EmptyState,
   IconButton,
@@ -13,7 +14,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useGetWsTags } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -53,18 +54,26 @@ export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
                 <Td>{name}</Td>
                 <Td>{slug}</Td>
                 <Td className="flex items-center justify-end">
-                  <IconButton
-                    onClick={() =>
-                      handlePopUpOpen("deleteTagConfirmation", {
-                        name,
-                        id: _id
-                      })
-                    }
-                    colorSchema="danger"
-                    ariaLabel="update"
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Delete}
+                    a={ProjectPermissionSub.Tags}
                   >
-                    <FontAwesomeIcon icon={faTrashCan} />
-                  </IconButton>
+                    {(isAllowed) => (
+                      <IconButton
+                        onClick={() =>
+                          handlePopUpOpen("deleteTagConfirmation", {
+                            name,
+                            id: _id
+                          })
+                        }
+                        colorSchema="danger"
+                        ariaLabel="update"
+                        isDisabled={!isAllowed}
+                      >
+                        <FontAwesomeIcon icon={faTrashCan} />
+                      </IconButton>
+                    )}
+                  </ProjectPermissionCan>
                 </Td>
               </Tr>
             ))}

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx

@@ -3,7 +3,10 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import { useDeleteServiceToken } from "@app/hooks/api";
 
@@ -12,65 +15,76 @@ import { ServiceTokenTable } from "./ServiceTokenTable";
 
 type DeleteModalData = { name: string; id: string };
 
-export const ServiceTokenSection = () => {
-  const { t } = useTranslation();
-  const { createNotification } = useNotificationContext();
-  const deleteServiceToken = useDeleteServiceToken();
+export const ServiceTokenSection = withProjectPermission(
+  () => {
+    const { t } = useTranslation();
+    const { createNotification } = useNotificationContext();
+    const deleteServiceToken = useDeleteServiceToken();
 
-  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
-    "createAPIToken",
-    "deleteAPITokenConfirmation"
-  ] as const);
+    const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
+      "createAPIToken",
+      "deleteAPITokenConfirmation"
+    ] as const);
 
-  const onDeleteApproved = async () => {
-    try {
-      deleteServiceToken.mutateAsync(
-        (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id
-      );
-      createNotification({
-        text: "Successfully deleted service token",
-        type: "success"
-      });
+    const onDeleteApproved = async () => {
+      try {
+        deleteServiceToken.mutateAsync(
+          (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id
+        );
+        createNotification({
+          text: "Successfully deleted service token",
+          type: "success"
+        });
 
-      handlePopUpClose("deleteAPITokenConfirmation");
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to delete service token",
-        type: "error"
-      });
-    }
-  };
+        handlePopUpClose("deleteAPITokenConfirmation");
+      } catch (err) {
+        console.error(err);
+        createNotification({
+          text: "Failed to delete service token",
+          type: "error"
+        });
+      }
+    };
 
-  return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-2 flex justify-between">
-        <p className="text-xl font-semibold text-mineshaft-100">
-          {t("section.token.service-tokens")}
-        </p>
-        <Button
-          colorSchema="secondary"
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          onClick={() => {
-            handlePopUpOpen("createAPIToken");
-          }}
-        >
-          Create token
-        </Button>
+    return (
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-2 flex justify-between">
+          <p className="text-xl font-semibold text-mineshaft-100">
+            {t("section.token.service-tokens")}
+          </p>
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Create}
+            a={ProjectPermissionSub.ServiceTokens}
+          >
+            {(isAllowed) => (
+              <Button
+                colorSchema="secondary"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => {
+                  handlePopUpOpen("createAPIToken");
+                }}
+                isDisabled={!isAllowed}
+              >
+                Create token
+              </Button>
+            )}
+          </ProjectPermissionCan>
+        </div>
+        <p className="mb-8 text-gray-400">{t("section.token.service-tokens-description")}</p>
+        <ServiceTokenTable handlePopUpOpen={handlePopUpOpen} />
+        <AddServiceTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+        <DeleteActionModal
+          isOpen={popUp.deleteAPITokenConfirmation.isOpen}
+          title={`Delete ${
+            (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name || " "
+          } service token?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteAPITokenConfirmation", isOpen)}
+          deleteKey={(popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name}
+          onClose={() => handlePopUpClose("deleteAPITokenConfirmation")}
+          onDeleteApproved={onDeleteApproved}
+        />
       </div>
-      <p className="mb-8 text-gray-400">{t("section.token.service-tokens-description")}</p>
-      <ServiceTokenTable handlePopUpOpen={handlePopUpOpen} />
-      <AddServiceTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-      <DeleteActionModal
-        isOpen={popUp.deleteAPITokenConfirmation.isOpen}
-        title={`Delete ${
-          (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name || " "
-        } service token?`}
-        onChange={(isOpen) => handlePopUpToggle("deleteAPITokenConfirmation", isOpen)}
-        deleteKey={(popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name}
-        onClose={() => handlePopUpClose("deleteAPITokenConfirmation")}
-        onDeleteApproved={onDeleteApproved}
-      />
-    </div>
-  );
-};
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.ServiceTokens }
+);

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenTable.tsx

@@ -1,6 +1,7 @@
 import { faFolder, faKey, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   EmptyState,
   IconButton,
@@ -13,7 +14,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useGetUserWsServiceTokens } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -70,18 +71,26 @@ export const ServiceTokenTable = ({ handlePopUpOpen }: Props) => {
                 </Td>
                 <Td>{row.expiresAt && new Date(row.expiresAt).toUTCString()}</Td>
                 <Td>
-                  <IconButton
-                    onClick={() =>
-                      handlePopUpOpen("deleteAPITokenConfirmation", {
-                        name: row.name,
-                        id: row._id
-                      })
-                    }
-                    colorSchema="danger"
-                    ariaLabel="delete"
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Delete}
+                    a={ProjectPermissionSub.ServiceTokens}
                   >
-                    <FontAwesomeIcon icon={faTrashCan} />
-                  </IconButton>
+                    {(isAllowed) => (
+                      <IconButton
+                        onClick={() =>
+                          handlePopUpOpen("deleteAPITokenConfirmation", {
+                            name: row.name,
+                            id: row._id
+                          })
+                        }
+                        colorSchema="danger"
+                        ariaLabel="delete"
+                        isDisabled={!isAllowed}
+                      >
+                        <FontAwesomeIcon icon={faTrashCan} />
+                      </IconButton>
+                    )}
+                  </ProjectPermissionCan>
                 </Td>
               </Tr>
             ))}

frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/WebhooksTab.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
   DeleteActionModal,
@@ -17,7 +18,8 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import {
   useCreateWebhook,
@@ -29,252 +31,291 @@ import {
 
 import { AddWebhookForm, TFormSchema } from "./AddWebhookForm";
 
-export const WebhooksTab = () => {
-  const { t } = useTranslation();
-  const { createNotification } = useNotificationContext();
-  const { currentWorkspace } = useWorkspace();
-  const workspaceId = currentWorkspace?._id || "";
-  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
-    "addWebhook",
-    "deleteWebhook"
-  ] as const);
+export const WebhooksTab = withProjectPermission(
+  () => {
+    const { t } = useTranslation();
+    const { createNotification } = useNotificationContext();
+    const { currentWorkspace } = useWorkspace();
+    const workspaceId = currentWorkspace?._id || "";
+    const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+      "addWebhook",
+      "deleteWebhook"
+    ] as const);
 
-  const { data: webhooks, isLoading: isWebhooksLoading } = useGetWebhooks(workspaceId);
+    const { data: webhooks, isLoading: isWebhooksLoading } = useGetWebhooks(workspaceId);
 
-  // mutation
-  const { mutateAsync: createWebhook } = useCreateWebhook();
-  const {
-    mutateAsync: testWebhook,
-    variables: testWebhookVars,
-    isLoading: isTestWebhookSubmitting
-  } = useTestWebhook();
-  const {
-    mutateAsync: updateWebhook,
-    variables: updateWebhookVars,
-    isLoading: isUpdateWebhookSubmitting
-  } = useUpdateWebhook();
-  const { mutateAsync: deleteWebhook } = useDeleteWebhook();
+    // mutation
+    const { mutateAsync: createWebhook } = useCreateWebhook();
+    const {
+      mutateAsync: testWebhook,
+      variables: testWebhookVars,
+      isLoading: isTestWebhookSubmitting
+    } = useTestWebhook();
+    const {
+      mutateAsync: updateWebhook,
+      variables: updateWebhookVars,
+      isLoading: isUpdateWebhookSubmitting
+    } = useUpdateWebhook();
+    const { mutateAsync: deleteWebhook } = useDeleteWebhook();
 
-  const handleWebhookCreate = async (data: TFormSchema) => {
-    try {
-      await createWebhook({
-        ...data,
-        workspaceId
-      });
-      handlePopUpClose("addWebhook");
-      createNotification({
-        type: "success",
-        text: "Successfully created webhook"
-      });
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to create webhook"
-      });
-    }
-  };
+    const handleWebhookCreate = async (data: TFormSchema) => {
+      try {
+        await createWebhook({
+          ...data,
+          workspaceId
+        });
+        handlePopUpClose("addWebhook");
+        createNotification({
+          type: "success",
+          text: "Successfully created webhook"
+        });
+      } catch (err) {
+        console.log(err);
+        createNotification({
+          type: "error",
+          text: "Failed to create webhook"
+        });
+      }
+    };
 
-  const handleWebhookDisable = async (webhookId: string, isDisabled: boolean) => {
-    try {
-      await updateWebhook({
-        webhookId,
-        workspaceId,
-        isDisabled
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully updated webhook"
-      });
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to update webhook"
-      });
-    }
-  };
+    const handleWebhookDisable = async (webhookId: string, isDisabled: boolean) => {
+      try {
+        await updateWebhook({
+          webhookId,
+          workspaceId,
+          isDisabled
+        });
+        createNotification({
+          type: "success",
+          text: "Successfully updated webhook"
+        });
+      } catch (err) {
+        console.log(err);
+        createNotification({
+          type: "error",
+          text: "Failed to update webhook"
+        });
+      }
+    };
 
-  const handleWebhookDelete = async () => {
-    try {
-      const webhookId = popUp?.deleteWebhook?.data as string;
-      await deleteWebhook({
-        webhookId,
-        workspaceId
-      });
-      handlePopUpClose("deleteWebhook");
-      createNotification({
-        type: "success",
-        text: "Successfully deleted webhook"
-      });
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to delete webhook"
-      });
-    }
-  };
+    const handleWebhookDelete = async () => {
+      try {
+        const webhookId = popUp?.deleteWebhook?.data as string;
+        await deleteWebhook({
+          webhookId,
+          workspaceId
+        });
+        handlePopUpClose("deleteWebhook");
+        createNotification({
+          type: "success",
+          text: "Successfully deleted webhook"
+        });
+      } catch (err) {
+        console.log(err);
+        createNotification({
+          type: "error",
+          text: "Failed to delete webhook"
+        });
+      }
+    };
 
-  const handleWebhookTest = async (webhookId: string) => {
-    try {
-      await testWebhook({
-        webhookId,
-        workspaceId
-      });
-      createNotification({
-        type: "success",
-        text: "Successfully triggered webhook"
-      });
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to trigger webhook"
-      });
-    }
-  };
+    const handleWebhookTest = async (webhookId: string) => {
+      try {
+        await testWebhook({
+          webhookId,
+          workspaceId
+        });
+        createNotification({
+          type: "success",
+          text: "Successfully triggered webhook"
+        });
+      } catch (err) {
+        console.log(err);
+        createNotification({
+          type: "error",
+          text: "Failed to trigger webhook"
+        });
+      }
+    };
 
-  return (
-    <div className="mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex justify-between">
-        <p className="text-xl font-semibold text-mineshaft-100">{t("settings.webhooks.title")}</p>
-        <Button
-          onClick={() => handlePopUpOpen("addWebhook")}
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-        >
-          Create
-        </Button>
-      </div>
-      <p className="mb-8 text-gray-400">{t("settings.webhooks.description")}</p>
-      <div>
-        <TableContainer>
-          <Table>
-            <THead>
-              <Tr>
-                <Td>URL</Td>
-                <Td>Environment</Td>
-                <Td>Secret Path</Td>
-                <Td>Status</Td>
-                <Td className="text-right">Action</Td>
-              </Tr>
-            </THead>
-            <TBody>
-              {isWebhooksLoading && <TableSkeleton columns={5} innerKey="webhooks-loading" />}
-              {!isWebhooksLoading && webhooks && webhooks?.length === 0 && (
+    return (
+      <div className="mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="flex justify-between">
+          <p className="text-xl font-semibold text-mineshaft-100">{t("settings.webhooks.title")}</p>
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Create}
+            a={ProjectPermissionSub.Webhooks}
+          >
+            {(isAllowed) => (
+              <Button
+                onClick={() => handlePopUpOpen("addWebhook")}
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                isDisabled={!isAllowed}
+              >
+                Create
+              </Button>
+            )}
+          </ProjectPermissionCan>
+        </div>
+        <p className="mb-8 text-gray-400">{t("settings.webhooks.description")}</p>
+        <div>
+          <TableContainer>
+            <Table>
+              <THead>
                 <Tr>
-                  <Td colSpan={5}>
-                    <EmptyState title="No webhooks found" icon={faPlug} />
-                  </Td>
+                  <Td>URL</Td>
+                  <Td>Environment</Td>
+                  <Td>Secret Path</Td>
+                  <Td>Status</Td>
+                  <Td className="text-right">Action</Td>
                 </Tr>
-              )}
-              {!isWebhooksLoading &&
-                webhooks?.map(
-                  ({
-                    _id: id,
-                    url,
-                    environment,
-                    secretPath,
-                    lastStatus,
-                    isDisabled,
-                    updatedAt,
-                    lastRunErrorMessage
-                  }) => (
-                    <Tr key={id}>
-                      <Td className="max-w-xs overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
-                        {url}
-                      </Td>
-                      <Td>{environment}</Td>
-                      <Td>{secretPath}</Td>
-                      <Td>
-                        {!lastStatus ? (
-                          "-"
-                        ) : (
-                          <div className="inline-flex w-min items-center rounded bg-mineshaft-600 px-2 py-0.5 text-sm">
-                            {lastStatus}{" "}
-                            <Tooltip
-                              content={
-                                <div className="text-xs">
-                                  <div>
-                                    Updated At:{" "}
-                                    {format(new Date(updatedAt), "yyyy-MM-dd, hh:mm aaa")}
-                                  </div>
-                                  {lastRunErrorMessage && (
-                                    <div className="mt-2 text-red">
-                                      Error: {lastRunErrorMessage}
-                                    </div>
-                                  )}
-                                </div>
-                              }
-                            >
-                              <FontAwesomeIcon
-                                className={`ml-1 ${
-                                  lastStatus === "failed" ? "text-red" : "text-green"
-                                }`}
-                                icon={faInfoCircle}
-                              />
-                            </Tooltip>
-                          </div>
-                        )}
-                      </Td>
-                      <Td>
-                        <div className="flex items-center justify-end space-x-2">
-                          <Button
-                            variant="star"
-                            size="xs"
-                            onClick={() => handleWebhookTest(id)}
-                            isDisabled={
-                              isTestWebhookSubmitting && testWebhookVars?.webhookId === id
-                            }
-                            isLoading={isTestWebhookSubmitting && testWebhookVars?.webhookId === id}
-                          >
-                            Test
-                          </Button>
-                          <Button
-                            variant="outline_bg"
-                            size="xs"
-                            onClick={() => handleWebhookDisable(id, !isDisabled)}
-                            isDisabled={
-                              isUpdateWebhookSubmitting && updateWebhookVars?.webhookId === id
-                            }
-                            isLoading={
-                              isUpdateWebhookSubmitting && updateWebhookVars?.webhookId === id
-                            }
-                          >
-                            {isDisabled ? "Enable" : "Disable"}
-                          </Button>
-                          <Button
-                            variant="outline_bg"
-                            className="border-red-800 bg-red-800 hover:border-red-700 hover:bg-red-700"
-                            colorSchema="danger"
-                            size="xs"
-                            onClick={() => handlePopUpOpen("deleteWebhook", id)}
-                          >
-                            Delete
-                          </Button>
-                        </div>
-                      </Td>
-                    </Tr>
-                  )
+              </THead>
+              <TBody>
+                {isWebhooksLoading && <TableSkeleton columns={5} innerKey="webhooks-loading" />}
+                {!isWebhooksLoading && webhooks && webhooks?.length === 0 && (
+                  <Tr>
+                    <Td colSpan={5}>
+                      <EmptyState title="No webhooks found" icon={faPlug} />
+                    </Td>
+                  </Tr>
                 )}
-            </TBody>
-          </Table>
-        </TableContainer>
+                {!isWebhooksLoading &&
+                  webhooks?.map(
+                    ({
+                      _id: id,
+                      url,
+                      environment,
+                      secretPath,
+                      lastStatus,
+                      isDisabled,
+                      updatedAt,
+                      lastRunErrorMessage
+                    }) => (
+                      <Tr key={id}>
+                        <Td className="max-w-xs overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
+                          {url}
+                        </Td>
+                        <Td>{environment}</Td>
+                        <Td>{secretPath}</Td>
+                        <Td>
+                          {!lastStatus ? (
+                            "-"
+                          ) : (
+                            <div className="inline-flex w-min items-center rounded bg-mineshaft-600 px-2 py-0.5 text-sm">
+                              {lastStatus}{" "}
+                              <Tooltip
+                                content={
+                                  <div className="text-xs">
+                                    <div>
+                                      Updated At:{" "}
+                                      {format(new Date(updatedAt), "yyyy-MM-dd, hh:mm aaa")}
+                                    </div>
+                                    {lastRunErrorMessage && (
+                                      <div className="mt-2 text-red">
+                                        Error: {lastRunErrorMessage}
+                                      </div>
+                                    )}
+                                  </div>
+                                }
+                              >
+                                <FontAwesomeIcon
+                                  className={`ml-1 ${
+                                    lastStatus === "failed" ? "text-red" : "text-green"
+                                  }`}
+                                  icon={faInfoCircle}
+                                />
+                              </Tooltip>
+                            </div>
+                          )}
+                        </Td>
+                        <Td>
+                          <div className="flex items-center justify-end space-x-2">
+                            <ProjectPermissionCan
+                              I={ProjectPermissionActions.Edit}
+                              a={ProjectPermissionSub.Webhooks}
+                            >
+                              {(isAllowed) => (
+                                <Button
+                                  variant="star"
+                                  size="xs"
+                                  onClick={() => handleWebhookTest(id)}
+                                  isDisabled={
+                                    (isTestWebhookSubmitting &&
+                                      testWebhookVars?.webhookId === id) ||
+                                    !isAllowed
+                                  }
+                                  isLoading={
+                                    isTestWebhookSubmitting && testWebhookVars?.webhookId === id
+                                  }
+                                >
+                                  Test
+                                </Button>
+                              )}
+                            </ProjectPermissionCan>
+                            <ProjectPermissionCan
+                              I={ProjectPermissionActions.Edit}
+                              a={ProjectPermissionSub.Webhooks}
+                            >
+                              {(isAllowed) => (
+                                <Button
+                                  variant="outline_bg"
+                                  size="xs"
+                                  onClick={() => handleWebhookDisable(id, !isDisabled)}
+                                  isDisabled={
+                                    (isUpdateWebhookSubmitting &&
+                                      updateWebhookVars?.webhookId === id) ||
+                                    !isAllowed
+                                  }
+                                  isLoading={
+                                    isUpdateWebhookSubmitting && updateWebhookVars?.webhookId === id
+                                  }
+                                >
+                                  {isDisabled ? "Enable" : "Disable"}
+                                </Button>
+                              )}
+                            </ProjectPermissionCan>
+                            <ProjectPermissionCan
+                              I={ProjectPermissionActions.Delete}
+                              a={ProjectPermissionSub.Webhooks}
+                            >
+                              {(isAllowed) => (
+                                <Button
+                                  variant="outline_bg"
+                                  className="border-red-800 bg-red-800 hover:border-red-700 hover:bg-red-700"
+                                  colorSchema="danger"
+                                  size="xs"
+                                  isDisabled={!isAllowed}
+                                  onClick={() => handlePopUpOpen("deleteWebhook", id)}
+                                >
+                                  Delete
+                                </Button>
+                              )}
+                            </ProjectPermissionCan>
+                          </div>
+                        </Td>
+                      </Tr>
+                    )
+                  )}
+              </TBody>
+            </Table>
+          </TableContainer>
+        </div>
+        <AddWebhookForm
+          environments={currentWorkspace?.environments}
+          isOpen={popUp?.addWebhook?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("addWebhook", isOpen)}
+          onCreateWebhook={handleWebhookCreate}
+        />
+        <DeleteActionModal
+          isOpen={popUp.deleteWebhook.isOpen}
+          deleteKey="remove"
+          title="Are you sure you want to delete this webhook?"
+          onChange={(isOpen) => handlePopUpToggle("deleteWebhook", isOpen)}
+          onClose={() => handlePopUpClose("deleteWebhook")}
+          onDeleteApproved={handleWebhookDelete}
+        />
       </div>
-      <AddWebhookForm
-        environments={currentWorkspace?.environments}
-        isOpen={popUp?.addWebhook?.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("addWebhook", isOpen)}
-        onCreateWebhook={handleWebhookCreate}
-      />
-      <DeleteActionModal
-        isOpen={popUp.deleteWebhook.isOpen}
-        deleteKey="remove"
-        title="Are you sure you want to delete this webhook?"
-        onChange={(isOpen) => handlePopUpToggle("deleteWebhook", isOpen)}
-        onClose={() => handlePopUpClose("deleteWebhook")}
-        onDeleteApproved={handleWebhookDelete}
-      />
-    </div>
-  );
-};
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Webhooks }
+);