feat(rbac): implemented granular blocking of actions based on permissions on org level ui

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx

@@ -1,9 +1,15 @@
+import { OrgGeneralPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { withPermission } from "@app/hoc";
+
 import { OrgSSOSection } from "./OrgSSOSection";
 
-export const OrgAuthTab = () => {
+export const OrgAuthTab = withPermission(
+  () => {
     return (
-        <div>
-            <OrgSSOSection />
-        </div>
+      <div>
+        <OrgSSOSection />
+      </div>
     );
-}
+  },
+  { action: OrgGeneralPermissionActions.Read, subject: OrgPermissionSubjects.Sso }
+);

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx

@@ -2,136 +2,150 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, Switch, UpgradePlanModal } from "@app/components/v2";
-import { useOrganization, useSubscription } from "@app/context";
-import { 
-    useCreateSSOConfig,
-    useGetSSOConfig,
-    useUpdateSSOConfig
-} from "@app/hooks/api";
+import {
+  OrgGeneralPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription
+} from "@app/context";
+import { useCreateSSOConfig, useGetSSOConfig, useUpdateSSOConfig } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { SSOModal } from "./SSOModal";
 
 const ssoAuthProviderMap: { [key: string]: string } = {
-    "okta-saml": "Okta SAML",
-    "azure-saml": "Azure SAML",
-    "jumpcloud-saml": "JumpCloud SAML"
-}
+  "okta-saml": "Okta SAML",
+  "azure-saml": "Azure SAML",
+  "jumpcloud-saml": "JumpCloud SAML"
+};
 
 export const OrgSSOSection = (): JSX.Element => {
-    const { currentOrg } = useOrganization();
-    const { subscription } = useSubscription();
-    const { createNotification } = useNotificationContext();
-    const { data, isLoading } = useGetSSOConfig(currentOrg?._id ?? "");
-    const { mutateAsync } = useUpdateSSOConfig();
-    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-        "upgradePlan",
-        "addSSO"
-    ] as const);
-    
-    const { mutateAsync: createMutateAsync } = useCreateSSOConfig();
-    
-    const handleSamlSSOToggle = async (value: boolean) => {
-        try {
-            if (!currentOrg?._id) return;
+  const { currentOrg } = useOrganization();
+  const { subscription } = useSubscription();
+  const { createNotification } = useNotificationContext();
+  const { data, isLoading } = useGetSSOConfig(currentOrg?._id ?? "");
+  const { mutateAsync } = useUpdateSSOConfig();
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "upgradePlan",
+    "addSSO"
+  ] as const);
 
-            await mutateAsync({
-                organizationId: currentOrg?._id,
-                isActive: value
-            });
+  const { mutateAsync: createMutateAsync } = useCreateSSOConfig();
 
-            createNotification({
-                text: `Successfully ${value ? "enabled" : "disabled"} SAML SSO`,
-                type: "success"
-            });
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: `Failed to ${value ? "enable" : "disable"} SAML SSO`,
-                type: "error"
-            });
-        }
+  const handleSamlSSOToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?._id) return;
+
+      await mutateAsync({
+        organizationId: currentOrg?._id,
+        isActive: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} SAML SSO`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${value ? "enable" : "disable"} SAML SSO`,
+        type: "error"
+      });
     }
-    
-    const addSSOBtnClick = async () => {
-        try {
-            if (subscription?.samlSSO && currentOrg) {
-                if (!data) {
-                    // case: SAML SSO is not configured
-                    // -> initialize empty SAML SSO configuration
-                    await createMutateAsync({
-                        organizationId: currentOrg._id,
-                        authProvider: "okta-saml",
-                        isActive: false,
-                        entryPoint: "",
-                        issuer: "",
-                        cert: ""
-                    });
-                }
+  };
 
-                handlePopUpOpen("addSSO");
-            } else {
-                handlePopUpOpen("upgradePlan");
-            }
-        } catch (err) {
-            console.error(err);
+  const addSSOBtnClick = async () => {
+    try {
+      if (subscription?.samlSSO && currentOrg) {
+        if (!data) {
+          // case: SAML SSO is not configured
+          // -> initialize empty SAML SSO configuration
+          await createMutateAsync({
+            organizationId: currentOrg._id,
+            authProvider: "okta-saml",
+            isActive: false,
+            entryPoint: "",
+            issuer: "",
+            cert: ""
+          });
         }
+
+        handlePopUpOpen("addSSO");
+      } else {
+        handlePopUpOpen("upgradePlan");
+      }
+    } catch (err) {
+      console.error(err);
     }
-    
-    return (
-        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-            <div className="flex items-center mb-8">
-                <h2 className="text-xl font-semibold flex-1 text-white">
-                    SAML SSO Configuration
-                </h2>
-                {!isLoading && (
-                    <Button
-                        onClick={addSSOBtnClick}
-                        colorSchema="secondary"
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    >
-                        {data ? "Update SAML SSO" : "Set up SAML SSO"}
-                    </Button> 
-                )}
-            </div>
-            {data && (
-                <div className="mb-4">
-                    <Switch
-                        id="enable-saml-sso"
-                        onCheckedChange={(value) => handleSamlSSOToggle(value)}
-                        isChecked={data ? data.isActive : false}
-                    >
-                        Enable SAML SSO
-                    </Switch>
-                </div>
+  };
+
+  return (
+    <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
+      <div className="flex items-center mb-8">
+        <h2 className="text-xl font-semibold flex-1 text-white">SAML SSO Configuration</h2>
+        {!isLoading && (
+          <OrgPermissionCan I={OrgGeneralPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Button
+                onClick={addSSOBtnClick}
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              >
+                {data ? "Update SAML SSO" : "Set up SAML SSO"}
+              </Button>
             )}
-            <div className="mb-4">
-                <h3 className="text-mineshaft-400 text-sm">SSO identifier</h3>
-                <p className="text-gray-400 text-md">{(data && data._id !== "") ? data._id : "-"}</p>
-            </div>
-            <div className="mb-4">
-                <h3 className="text-mineshaft-400 text-sm">Type</h3>
-                <p className="text-gray-400 text-md">{(data && data.authProvider !== "") ? ssoAuthProviderMap[data.authProvider] : "-"}</p>
-            </div>
-            <div className="mb-4">
-                <h3 className="text-mineshaft-400 text-sm">Entrypoint</h3>
-                <p className="text-gray-400 text-md">{(data && data.entryPoint !== "") ? data.entryPoint : "-"}</p>
-            </div>
-            <div className="mb-4">
-                <h3 className="text-mineshaft-400 text-sm">Issuer</h3>
-                <p className="text-gray-400 text-md">{(data && data.issuer !== "") ? data.issuer : "-"}</p>
-            </div>
-            <SSOModal 
-                popUp={popUp}
-                handlePopUpClose={handlePopUpClose}
-                handlePopUpToggle={handlePopUpToggle}
-            />
-            <UpgradePlanModal
-                isOpen={popUp.upgradePlan.isOpen}
-                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                text="You can use SAML SSO if you switch to Infisical's Pro plan."
-            />
+          </OrgPermissionCan>
+        )}
+      </div>
+      {data && (
+        <div className="mb-4">
+          <OrgPermissionCan I={OrgGeneralPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Switch
+                id="enable-saml-sso"
+                onCheckedChange={(value) => handleSamlSSOToggle(value)}
+                isChecked={data ? data.isActive : false}
+                isDisabled={!isAllowed}
+              >
+                Enable SAML SSO
+              </Switch>
+            )}
+          </OrgPermissionCan>
         </div>
-    );
-};
+      )}
+      <div className="mb-4">
+        <h3 className="text-mineshaft-400 text-sm">SSO identifier</h3>
+        <p className="text-gray-400 text-md">{data && data._id !== "" ? data._id : "-"}</p>
+      </div>
+      <div className="mb-4">
+        <h3 className="text-mineshaft-400 text-sm">Type</h3>
+        <p className="text-gray-400 text-md">
+          {data && data.authProvider !== "" ? ssoAuthProviderMap[data.authProvider] : "-"}
+        </p>
+      </div>
+      <div className="mb-4">
+        <h3 className="text-mineshaft-400 text-sm">Entrypoint</h3>
+        <p className="text-gray-400 text-md">
+          {data && data.entryPoint !== "" ? data.entryPoint : "-"}
+        </p>
+      </div>
+      <div className="mb-4">
+        <h3 className="text-mineshaft-400 text-sm">Issuer</h3>
+        <p className="text-gray-400 text-md">{data && data.issuer !== "" ? data.issuer : "-"}</p>
+      </div>
+      <SSOModal
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can use SAML SSO if you switch to Infisical's Pro plan."
+      />
+    </div>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx

@@ -3,13 +3,11 @@ import { OrgNameChangeSection } from "../OrgNameChangeSection";
 import { OrgServiceAccountsTable } from "../OrgServiceAccountsTable";
 
 export const OrgGeneralTab = () => {
-    return (
-        <div>
-            <OrgNameChangeSection />
-			<div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
-				<OrgServiceAccountsTable />
-			</div>
-			<OrgIncidentContactsSection />
-        </div>
-    );
-}
+  return (
+    <div>
+      <OrgNameChangeSection />
+      <OrgServiceAccountsTable />
+      <OrgIncidentContactsSection />
+    </div>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/AddOrgIncidentContactModal.tsx

@@ -3,17 +3,9 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-  Button,
-  FormControl,
-  Input,
-  Modal,
-  ModalContent
-} from "@app/components/v2";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { useOrganization } from "@app/context";
-import {
-    useAddIncidentContact
-} from "@app/hooks/api";
+import { useAddIncidentContact } from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -24,97 +16,90 @@ const addContactFormSchema = yup.object({
 type TAddContactForm = yup.InferType<typeof addContactFormSchema>;
 
 type Props = {
-    popUp: UsePopUpState<["addContact"]>;
-    handlePopUpClose: (popUpName: keyof UsePopUpState<["addContact"]>) => void;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["addContact"]>, state?: boolean) => void;
+  popUp: UsePopUpState<["addContact"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["addContact"]>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addContact"]>, state?: boolean) => void;
 };
 
 export const AddOrgIncidentContactModal = ({
-    popUp,
-    handlePopUpClose,
-    handlePopUpToggle
+  popUp,
+  handlePopUpClose,
+  handlePopUpToggle
 }: Props) => {
-    const { createNotification } = useNotificationContext();
-    const { currentOrg } = useOrganization();
-    const { data: serverDetails } = useFetchServerStatus()
-    const {
-        control,
-        handleSubmit,
-        reset
-    } = useForm<TAddContactForm>({ resolver: yupResolver(addContactFormSchema) });
+  const { createNotification } = useNotificationContext();
+  const { currentOrg } = useOrganization();
+  const { data: serverDetails } = useFetchServerStatus();
+  const { control, handleSubmit, reset } = useForm<TAddContactForm>({
+    resolver: yupResolver(addContactFormSchema)
+  });
 
-    const { mutateAsync, isLoading } = useAddIncidentContact();
-    
-    const onFormSubmit = async ({ email }: TAddContactForm) => {
-        try {
-            if (!currentOrg?._id) return;
-            
-            await mutateAsync({ 
-                orgId: currentOrg._id, 
-                email 
-            });
+  const { mutateAsync, isLoading } = useAddIncidentContact();
 
-            createNotification({
-                text: "Successfully added incident contact",
-                type: "success"
-            });
-            
-            if (serverDetails?.emailConfigured){
-                handlePopUpClose("addContact");
-            }
+  const onFormSubmit = async ({ email }: TAddContactForm) => {
+    try {
+      if (!currentOrg?._id) return;
 
-            reset();
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to add incident contact",
-                type: "error"
-            });
-        }
+      await mutateAsync({
+        orgId: currentOrg._id,
+        email
+      });
+
+      createNotification({
+        text: "Successfully added incident contact",
+        type: "success"
+      });
+
+      if (serverDetails?.emailConfigured) {
+        handlePopUpClose("addContact");
+      }
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to add incident contact",
+        type: "error"
+      });
     }
+  };
 
-    return (
-        <Modal
-            isOpen={popUp?.addContact?.isOpen}
-            onOpenChange={(isOpen) => {
-                handlePopUpToggle("addContact", isOpen);
-                reset();
-            }}
-        >
-            <ModalContent
-                title="Add an Incident Contact"
-                subTitle="This contact will be notified in the unlikely event of a severe incident."
+  return (
+    <Modal
+      isOpen={popUp?.addContact?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addContact", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent
+        title="Add an Incident Contact"
+        subTitle="This contact will be notified in the unlikely event of a severe incident."
+      >
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="email"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <div className="mt-8 flex items-center space-x-4">
+            <Button size="sm" type="submit" isLoading={isLoading} isDisabled={isLoading}>
+              Add Incident Contact
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpClose("addContact")}
             >
-                <form onSubmit={handleSubmit(onFormSubmit)}>
-                    <Controller
-                        control={control}
-                        defaultValue=""
-                        name="email"
-                        render={({ field, fieldState: { error } }) => (
-                        <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
-                            <Input {...field} />
-                        </FormControl>
-                        )}
-                    />
-                    <div className="mt-8 flex items-center">
-                        <Button
-                            size="sm"
-                            type="submit"
-                            isLoading={isLoading}
-                            isDisabled={isLoading}
-                        >
-                            Add Incident Contact
-                        </Button>
-                        <Button
-                            colorSchema="secondary"
-                            variant="plain"
-                            onClick={() => handlePopUpClose("addContact")}
-                        >
-                            Cancel
-                        </Button>
-                    </div>
-                </form>
-            </ModalContent>
-        </Modal>
-    );
-}
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsSection.tsx

@@ -2,42 +2,53 @@ import { useTranslation } from "react-i18next";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import {
-    Button
-} from "@app/components/v2";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button } from "@app/components/v2";
+import { OrgGeneralPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 
 import { AddOrgIncidentContactModal } from "./AddOrgIncidentContactModal";
 import { OrgIncidentContactsTable } from "./OrgIncidentContactsTable";
 
-export const OrgIncidentContactsSection = () => {
+export const OrgIncidentContactsSection = withPermission(
+  () => {
     const { t } = useTranslation();
     const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-        "addContact"
+      "addContact"
     ] as const);
 
     return (
-        <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-            <div className="flex justify-between mb-4">
-                <p className="min-w-max text-xl font-semibold">
-                    {t("section.incident.incident-contacts")}
-                </p>
-                <Button
-                    colorSchema="secondary"
-                    type="submit"
-                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    onClick={() => handlePopUpOpen("addContact")}
-                >
-                    Add contact
-                </Button>
-            </div>
-            <OrgIncidentContactsTable />
-            <AddOrgIncidentContactModal 
-                popUp={popUp}
-                handlePopUpClose={handlePopUpClose}
-                handlePopUpToggle={handlePopUpToggle}
-            />
+      <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+        <div className="flex justify-between mb-4">
+          <p className="min-w-max text-xl font-semibold">
+            {t("section.incident.incident-contacts")}
+          </p>
+          <OrgPermissionCan
+            I={OrgGeneralPermissionActions.Create}
+            a={OrgPermissionSubjects.IncidentAccount}
+          >
+            {(isAllowed) => (
+              <Button
+                colorSchema="secondary"
+                type="submit"
+                isDisabled={!isAllowed}
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => handlePopUpOpen("addContact")}
+              >
+                Add contact
+              </Button>
+            )}
+          </OrgPermissionCan>
         </div>
+        <OrgIncidentContactsTable />
+        <AddOrgIncidentContactModal
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      </div>
     );
-}
-
+  },
+  { action: OrgGeneralPermissionActions.Read, subject: OrgPermissionSubjects.IncidentAccount }
+);

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsTable.tsx

@@ -3,6 +3,7 @@ import { faContactBook, faMagnifyingGlass, faTrash } from "@fortawesome/free-sol
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
 import {
   DeleteActionModal,
   EmptyState,
@@ -17,7 +18,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
-import { useOrganization } from "@app/context";
+import { OrgGeneralPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useDeleteIncidentContact, useGetOrgIncidentContact } from "@app/hooks/api";
 
@@ -83,13 +84,21 @@ export const OrgIncidentContactsTable = () => {
               <Tr key={email}>
                 <Td className="w-full">{email}</Td>
                 <Td className="mr-4">
-                  <IconButton
-                    ariaLabel="delete"
-                    colorSchema="danger"
-                    onClick={() => handlePopUpOpen("removeContact", { email })}
+                  <OrgPermissionCan
+                    I={OrgGeneralPermissionActions.Delete}
+                    an={OrgPermissionSubjects.IncidentAccount}
                   >
-                    <FontAwesomeIcon icon={faTrash} />
-                  </IconButton>
+                    {(isAllowed) => (
+                      <IconButton
+                        ariaLabel="delete"
+                        colorSchema="danger"
+                        onClick={() => handlePopUpOpen("removeContact", { email })}
+                        isDisabled={!isAllowed}
+                      >
+                        <FontAwesomeIcon icon={faTrash} />
+                      </IconButton>
+                    )}
+                  </OrgPermissionCan>
                 </Td>
               </Tr>
             ))}

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -4,8 +4,10 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
-import { useOrganization } from "@app/context";
+import { OrgGeneralPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { withPermission } from "@app/hoc";
 import { useRenameOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
@@ -14,49 +16,46 @@ const formSchema = yup.object({
 
 type FormData = yup.InferType<typeof formSchema>;
 
-export const OrgNameChangeSection = (): JSX.Element => {
-  const { currentOrg } = useOrganization();
-  const { createNotification } = useNotificationContext();
-  const {
-    handleSubmit,
-    control,
-    reset
-  } = useForm<FormData>({ resolver: yupResolver(formSchema) });
-  const { mutateAsync, isLoading } = useRenameOrg();
+export const OrgNameChangeSection = withPermission(
+  (): JSX.Element => {
+    const { currentOrg } = useOrganization();
+    const { createNotification } = useNotificationContext();
+    const { handleSubmit, control, reset } = useForm<FormData>({
+      resolver: yupResolver(formSchema)
+    });
+    const { mutateAsync, isLoading } = useRenameOrg();
 
-  useEffect(() => {
-    if (currentOrg) {
-      reset({ name: currentOrg.name });
-    }
-  }, [currentOrg]);
+    useEffect(() => {
+      if (currentOrg) {
+        reset({ name: currentOrg.name });
+      }
+    }, [currentOrg]);
 
-  const onFormSubmit = async ({ name }: FormData) => {
-    try {
-      if (!currentOrg?._id) return;
-      if (name === "") return;
+    const onFormSubmit = async ({ name }: FormData) => {
+      try {
+        if (!currentOrg?._id) return;
+        if (name === "") return;
 
-      await mutateAsync({ orgId: currentOrg?._id, newOrgName: name });
-      createNotification({
-        text: "Successfully renamed organization",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to rename organization",
-        type: "error"
-      });
-    }
-  };
+        await mutateAsync({ orgId: currentOrg?._id, newOrgName: name });
+        createNotification({
+          text: "Successfully renamed organization",
+          type: "success"
+        });
+      } catch (error) {
+        console.error(error);
+        createNotification({
+          text: "Failed to rename organization",
+          type: "error"
+        });
+      }
+    };
 
-  return (
-    <form 
-      onSubmit={handleSubmit(onFormSubmit)}
-      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
-    >
-        <p className="text-xl font-semibold text-mineshaft-100 mb-4">
-          Organization name
-        </p>
+    return (
+      <form
+        onSubmit={handleSubmit(onFormSubmit)}
+        className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+      >
+        <p className="text-xl font-semibold text-mineshaft-100 mb-4">Organization name</p>
         <div className="mb-2 max-w-md">
           <Controller
             defaultValue=""
@@ -69,14 +68,25 @@ export const OrgNameChangeSection = (): JSX.Element => {
             name="name"
           />
         </div>
-        <Button
-          isLoading={isLoading}
-          colorSchema="primary"
-          variant="outline_bg"
-          type="submit"
-        >
-          Save
-        </Button>
-    </form>
-  );
-};
+        <OrgPermissionCan I={OrgGeneralPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
+          {(isAllowed) => (
+            <Button
+              isLoading={isLoading}
+              isDisabled={!isAllowed}
+              colorSchema="primary"
+              variant="outline_bg"
+              type="submit"
+            >
+              Save
+            </Button>
+          )}
+        </OrgPermissionCan>
+      </form>
+    );
+  },
+  {
+    action: OrgGeneralPermissionActions.Read,
+    subject: OrgPermissionSubjects.Settings,
+    containerClassName: "mb-4"
+  }
+);

frontend/src/views/Settings/OrgSettingsPage/components/OrgServiceAccountsTable/OrgServiceAccountsTable.tsx

@@ -34,7 +34,13 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
-import { useOrganization, useWorkspace } from "@app/context";
+import {
+  OrgGeneralPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useWorkspace
+} from "@app/context";
+import { withPermission } from "@app/hoc";
 import { usePopUp, useToggle } from "@app/hooks";
 import {
   // useCreateServiceAccount,
@@ -62,313 +68,322 @@ import // Controller,
 
 // type TAddServiceAccountForm = yup.InferType<typeof addServiceAccountFormSchema>;
 
-export const OrgServiceAccountsTable = () => {
-  const router = useRouter();
-  const { currentOrg } = useOrganization();
-  const { currentWorkspace } = useWorkspace();
+export const OrgServiceAccountsTable = withPermission(
+  () => {
+    const router = useRouter();
+    const { currentOrg } = useOrganization();
+    const { currentWorkspace } = useWorkspace();
 
-  const orgId = currentOrg?._id || "";
-  const [step, setStep] = useState(0);
-  const [isAccessKeyCopied, setIsAccessKeyCopied] = useToggle(false);
-  const [isPublicKeyCopied, setIsPublicKeyCopied] = useToggle(false);
-  const [isPrivateKeyCopied, setIsPrivateKeyCopied] = useToggle(false);
-  const [accessKey] = useState("");
-  const [publicKey] = useState("");
-  const [privateKey] = useState("");
-  const [searchServiceAccountFilter, setSearchServiceAccountFilter] = useState("");
-  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-    "addServiceAccount",
-    "removeServiceAccount"
-  ] as const);
+    const orgId = currentOrg?._id || "";
+    const [step, setStep] = useState(0);
+    const [isAccessKeyCopied, setIsAccessKeyCopied] = useToggle(false);
+    const [isPublicKeyCopied, setIsPublicKeyCopied] = useToggle(false);
+    const [isPrivateKeyCopied, setIsPrivateKeyCopied] = useToggle(false);
+    const [accessKey] = useState("");
+    const [publicKey] = useState("");
+    const [privateKey] = useState("");
+    const [searchServiceAccountFilter, setSearchServiceAccountFilter] = useState("");
+    const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+      "addServiceAccount",
+      "removeServiceAccount"
+    ] as const);
 
-  const { data: serviceAccounts = [], isLoading: isServiceAccountsLoading } =
-    useGetServiceAccounts(orgId);
+    const { data: serviceAccounts = [], isLoading: isServiceAccountsLoading } =
+      useGetServiceAccounts(orgId);
 
-  // const createServiceAccount = useCreateServiceAccount();
-  const removeServiceAccount = useDeleteServiceAccount();
+    // const createServiceAccount = useCreateServiceAccount();
+    const removeServiceAccount = useDeleteServiceAccount();
 
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-    if (isAccessKeyCopied) {
-      timer = setTimeout(() => setIsAccessKeyCopied.off(), 2000);
-    }
+    useEffect(() => {
+      let timer: NodeJS.Timeout;
+      if (isAccessKeyCopied) {
+        timer = setTimeout(() => setIsAccessKeyCopied.off(), 2000);
+      }
 
-    if (isPublicKeyCopied) {
-      timer = setTimeout(() => setIsPublicKeyCopied.off(), 2000);
-    }
+      if (isPublicKeyCopied) {
+        timer = setTimeout(() => setIsPublicKeyCopied.off(), 2000);
+      }
 
-    if (isPrivateKeyCopied) {
-      timer = setTimeout(() => setIsPrivateKeyCopied.off(), 2000);
-    }
+      if (isPrivateKeyCopied) {
+        timer = setTimeout(() => setIsPrivateKeyCopied.off(), 2000);
+      }
 
-    return () => clearTimeout(timer);
-  }, [isAccessKeyCopied, isPublicKeyCopied, isPrivateKeyCopied]);
+      return () => clearTimeout(timer);
+    }, [isAccessKeyCopied, isPublicKeyCopied, isPrivateKeyCopied]);
 
-  // const {
-  //     control,
-  //     handleSubmit,
-  //     reset,
-  //     formState: { isSubmitting }
-  // } = useForm<TAddServiceAccountForm>({ resolver: yupResolver(addServiceAccountFormSchema) });
+    // const {
+    //     control,
+    //     handleSubmit,
+    //     reset,
+    //     formState: { isSubmitting }
+    // } = useForm<TAddServiceAccountForm>({ resolver: yupResolver(addServiceAccountFormSchema) });
 
-  // const onAddServiceAccount = async ({ name, expiresIn }: TAddServiceAccountForm) => {
-  //     if (!currentOrg?._id) return;
+    // const onAddServiceAccount = async ({ name, expiresIn }: TAddServiceAccountForm) => {
+    //     if (!currentOrg?._id) return;
 
-  //     const keyPair = generateKeyPair();
-  //     setPublicKey(keyPair.publicKey);
-  //     setPrivateKey(keyPair.privateKey);
+    //     const keyPair = generateKeyPair();
+    //     setPublicKey(keyPair.publicKey);
+    //     setPrivateKey(keyPair.privateKey);
 
-  //     const serviceAccountDetails = await createServiceAccount.mutateAsync({
-  //         name,
-  //         organizationId: currentOrg?._id,
-  //         publicKey: keyPair.publicKey,
-  //         expiresIn: Number(expiresIn)
-  //     });
+    //     const serviceAccountDetails = await createServiceAccount.mutateAsync({
+    //         name,
+    //         organizationId: currentOrg?._id,
+    //         publicKey: keyPair.publicKey,
+    //         expiresIn: Number(expiresIn)
+    //     });
 
-  //     setAccessKey(serviceAccountDetails.serviceAccountAccessKey);
+    //     setAccessKey(serviceAccountDetails.serviceAccountAccessKey);
 
-  //     setStep(1);
-  //     reset();
-  // }
+    //     setStep(1);
+    //     reset();
+    // }
 
-  const onRemoveServiceAccount = async () => {
-    const serviceAccountId = (popUp?.removeServiceAccount?.data as { _id: string })?._id;
-    await removeServiceAccount.mutateAsync(serviceAccountId);
-    handlePopUpClose("removeServiceAccount");
-  };
+    const onRemoveServiceAccount = async () => {
+      const serviceAccountId = (popUp?.removeServiceAccount?.data as { _id: string })?._id;
+      await removeServiceAccount.mutateAsync(serviceAccountId);
+      handlePopUpClose("removeServiceAccount");
+    };
 
-  const filteredServiceAccounts = useMemo(
-    () =>
-      serviceAccounts.filter(({ name }) => name.toLowerCase().includes(searchServiceAccountFilter)),
-    [serviceAccounts, searchServiceAccountFilter]
-  );
+    const filteredServiceAccounts = useMemo(
+      () =>
+        serviceAccounts.filter(({ name }) =>
+          name.toLowerCase().includes(searchServiceAccountFilter)
+        ),
+      [serviceAccounts, searchServiceAccountFilter]
+    );
 
-  const renderStep = (stepToRender: number) => {
-    switch (stepToRender) {
-      case 0:
-        return (
-          <div>
-            We are currently revising the service account mechanism. In the meantime, please use
-            service tokens or API key to fetch secrets via API request.
-          </div>
-          //    <form onSubmit={handleSubmit(onAddServiceAccount)}>
-          //         <Controller
-          //             control={control}
-          //             defaultValue=""
-          //             name="name"
-          //             render={({ field, fieldState: { error } }) => (
-          //                 <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
-          //                 <Input {...field} />
-          //                 </FormControl>
-          //             )}
-          //         />
-          //         <Controller
-          //             control={control}
-          //             name="expiresIn"
-          //             defaultValue={String(serviceAccountExpiration?.[0]?.value)}
-          //             render={({ field: { onChange, ...field }, fieldState: { error } }) => {
-          //                 return (
-          //                     <FormControl
-          //                         label="Expiration"
-          //                         errorText={error?.message}
-          //                         isError={Boolean(error)}
-          //                     >
-          //                         <Select
-          //                             defaultValue={field.value}
-          //                             {...field}
-          //                             onValueChange={(e) => onChange(e)}
-          //                             className="w-full"
-          //                         >
-          //                         {serviceAccountExpiration.map(({ label, value }) => (
-          //                             <SelectItem value={String(value)} key={label}>
-          //                                 {label}
-          //                             </SelectItem>
-          //                         ))}
-          //                         </Select>
-          //                     </FormControl>
-          //                 );
-          //             }}
-          //         />
-          //         <div className="mt-8 flex items-center">
-          //             <Button
-          //                 className="mr-4"
-          //                 size="sm"
-          //                 type="submit"
-          //                 isLoading={isSubmitting}
-          //                 isDisabled={isSubmitting}
-          //             >
-          //                 Create Service Account
-          //             </Button>
-          //             <Button
-          //                 colorSchema="secondary"
-          //                 variant="plain"
-          //                 onClick={() => handlePopUpClose("addServiceAccount")}
-          //             >
-          //                 Cancel
-          //             </Button>
-          //         </div>
-          //     </form>
-        );
-      case 1:
-        return (
-          <>
-            <p>Access Key</p>
-            <div className="flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-              <p className="mr-4 break-all">{accessKey}</p>
-              <IconButton
-                ariaLabel="copy icon"
-                colorSchema="secondary"
-                className="group relative"
-                onClick={() => {
-                  navigator.clipboard.writeText(accessKey);
-                  setIsAccessKeyCopied.on();
-                }}
-              >
-                <FontAwesomeIcon icon={isAccessKeyCopied ? faCheck : faCopy} />
-                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                  Copy
-                </span>
-              </IconButton>
+    const renderStep = (stepToRender: number) => {
+      switch (stepToRender) {
+        case 0:
+          return (
+            <div>
+              We are currently revising the service account mechanism. In the meantime, please use
+              service tokens or API key to fetch secrets via API request.
             </div>
-            <p className="mt-4">Public Key</p>
-            <div className="flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-              <p className="mr-4 break-all">{publicKey}</p>
-              <IconButton
-                ariaLabel="copy icon"
-                colorSchema="secondary"
-                className="group relative"
-                onClick={() => {
-                  navigator.clipboard.writeText(publicKey);
-                  setIsPublicKeyCopied.on();
-                }}
-              >
-                <FontAwesomeIcon icon={isPublicKeyCopied ? faCheck : faCopy} />
-                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                  Copy
-                </span>
-              </IconButton>
-            </div>
-            <p className="mt-4">Private Key</p>
-            <div className="flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-              <p className="mr-4 break-all">{privateKey}</p>
-              <IconButton
-                ariaLabel="copy icon"
-                colorSchema="secondary"
-                className="group relative"
-                onClick={() => {
-                  navigator.clipboard.writeText(privateKey);
-                  setIsPrivateKeyCopied.on();
-                }}
-              >
-                <FontAwesomeIcon icon={isPrivateKeyCopied ? faCheck : faCopy} />
-                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                  Copy
-                </span>
-              </IconButton>
-            </div>
-          </>
-        );
-      default:
-        return <div />;
-    }
-  };
+            //    <form onSubmit={handleSubmit(onAddServiceAccount)}>
+            //         <Controller
+            //             control={control}
+            //             defaultValue=""
+            //             name="name"
+            //             render={({ field, fieldState: { error } }) => (
+            //                 <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
+            //                 <Input {...field} />
+            //                 </FormControl>
+            //             )}
+            //         />
+            //         <Controller
+            //             control={control}
+            //             name="expiresIn"
+            //             defaultValue={String(serviceAccountExpiration?.[0]?.value)}
+            //             render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+            //                 return (
+            //                     <FormControl
+            //                         label="Expiration"
+            //                         errorText={error?.message}
+            //                         isError={Boolean(error)}
+            //                     >
+            //                         <Select
+            //                             defaultValue={field.value}
+            //                             {...field}
+            //                             onValueChange={(e) => onChange(e)}
+            //                             className="w-full"
+            //                         >
+            //                         {serviceAccountExpiration.map(({ label, value }) => (
+            //                             <SelectItem value={String(value)} key={label}>
+            //                                 {label}
+            //                             </SelectItem>
+            //                         ))}
+            //                         </Select>
+            //                     </FormControl>
+            //                 );
+            //             }}
+            //         />
+            //         <div className="mt-8 flex items-center">
+            //             <Button
+            //                 className="mr-4"
+            //                 size="sm"
+            //                 type="submit"
+            //                 isLoading={isSubmitting}
+            //                 isDisabled={isSubmitting}
+            //             >
+            //                 Create Service Account
+            //             </Button>
+            //             <Button
+            //                 colorSchema="secondary"
+            //                 variant="plain"
+            //                 onClick={() => handlePopUpClose("addServiceAccount")}
+            //             >
+            //                 Cancel
+            //             </Button>
+            //         </div>
+            //     </form>
+          );
+        case 1:
+          return (
+            <>
+              <p>Access Key</p>
+              <div className="flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+                <p className="mr-4 break-all">{accessKey}</p>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative"
+                  onClick={() => {
+                    navigator.clipboard.writeText(accessKey);
+                    setIsAccessKeyCopied.on();
+                  }}
+                >
+                  <FontAwesomeIcon icon={isAccessKeyCopied ? faCheck : faCopy} />
+                  <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                    Copy
+                  </span>
+                </IconButton>
+              </div>
+              <p className="mt-4">Public Key</p>
+              <div className="flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+                <p className="mr-4 break-all">{publicKey}</p>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative"
+                  onClick={() => {
+                    navigator.clipboard.writeText(publicKey);
+                    setIsPublicKeyCopied.on();
+                  }}
+                >
+                  <FontAwesomeIcon icon={isPublicKeyCopied ? faCheck : faCopy} />
+                  <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                    Copy
+                  </span>
+                </IconButton>
+              </div>
+              <p className="mt-4">Private Key</p>
+              <div className="flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+                <p className="mr-4 break-all">{privateKey}</p>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative"
+                  onClick={() => {
+                    navigator.clipboard.writeText(privateKey);
+                    setIsPrivateKeyCopied.on();
+                  }}
+                >
+                  <FontAwesomeIcon icon={isPrivateKeyCopied ? faCheck : faCopy} />
+                  <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                    Copy
+                  </span>
+                </IconButton>
+              </div>
+            </>
+          );
+        default:
+          return <div />;
+      }
+    };
 
-  return (
-    <div className="w-full">
-      <div className="mb-4 flex justify-between">
-        <p className="text-xl font-semibold text-mineshaft-100">Service Accounts</p>
-        <Button
-          colorSchema="secondary"
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          onClick={() => {
-            setStep(0);
+    return (
+      <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
+        <div className="mb-4 flex justify-between">
+          <p className="text-xl font-semibold text-mineshaft-100">Service Accounts</p>
+          <Button
+            colorSchema="secondary"
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            onClick={() => {
+              setStep(0);
+              // reset();
+              handlePopUpOpen("addServiceAccount");
+            }}
+          >
+            Add Service Account
+          </Button>
+        </div>
+        <Input
+          value={searchServiceAccountFilter}
+          onChange={(e) => setSearchServiceAccountFilter(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search service accounts..."
+        />
+        <TableContainer className="mt-4">
+          <Table>
+            <THead>
+              <Th>Name</Th>
+              <Th className="w-full">Valid Until</Th>
+              <Th aria-label="actions" />
+            </THead>
+            <TBody>
+              {isServiceAccountsLoading && (
+                <TableSkeleton columns={5} innerKey="org-service-accounts" />
+              )}
+              {!isServiceAccountsLoading &&
+                filteredServiceAccounts.map(({ name, expiresAt, _id: serviceAccountId }) => {
+                  return (
+                    <Tr key={`org-service-account-${serviceAccountId}`}>
+                      <Td>{name}</Td>
+                      <Td>{new Date(expiresAt).toUTCString()}</Td>
+                      <Td>
+                        <div className="flex">
+                          <IconButton
+                            ariaLabel="edit"
+                            colorSchema="secondary"
+                            onClick={() => {
+                              if (currentWorkspace?._id) {
+                                router.push(
+                                  `/settings/org/${currentWorkspace._id}/service-accounts/${serviceAccountId}`
+                                );
+                              }
+                            }}
+                            className="mr-2"
+                          >
+                            <FontAwesomeIcon icon={faPencil} />
+                          </IconButton>
+                          <IconButton
+                            ariaLabel="delete"
+                            colorSchema="danger"
+                            onClick={() =>
+                              handlePopUpOpen("removeServiceAccount", { _id: serviceAccountId })
+                            }
+                          >
+                            <FontAwesomeIcon icon={faTrash} />
+                          </IconButton>
+                        </div>
+                      </Td>
+                    </Tr>
+                  );
+                })}
+            </TBody>
+          </Table>
+          {!isServiceAccountsLoading && filteredServiceAccounts?.length === 0 && (
+            <EmptyState title="No service accounts found" icon={faServer} />
+          )}
+        </TableContainer>
+        <Modal
+          isOpen={popUp?.addServiceAccount?.isOpen}
+          onOpenChange={(isOpen) => {
+            handlePopUpToggle("addServiceAccount", isOpen);
             // reset();
-            handlePopUpOpen("addServiceAccount");
           }}
         >
-          Add Service Account
-        </Button>
+          <ModalContent
+            title="Add Service Account"
+            subTitle="A service account represents a machine identity such as a VM or application client."
+          >
+            {renderStep(step)}
+          </ModalContent>
+        </Modal>
+        <DeleteActionModal
+          isOpen={popUp.removeServiceAccount.isOpen}
+          deleteKey="remove"
+          title="Do you want to remove this service account from the org?"
+          onChange={(isOpen) => handlePopUpToggle("removeServiceAccount", isOpen)}
+          onDeleteApproved={onRemoveServiceAccount}
+        />
       </div>
-      <Input
-        value={searchServiceAccountFilter}
-        onChange={(e) => setSearchServiceAccountFilter(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search service accounts..."
-      />
-      <TableContainer className="mt-4">
-        <Table>
-          <THead>
-            <Th>Name</Th>
-            <Th className="w-full">Valid Until</Th>
-            <Th aria-label="actions" />
-          </THead>
-          <TBody>
-            {isServiceAccountsLoading && (
-              <TableSkeleton columns={5} innerKey="org-service-accounts" />
-            )}
-            {!isServiceAccountsLoading &&
-              filteredServiceAccounts.map(({ name, expiresAt, _id: serviceAccountId }) => {
-                return (
-                  <Tr key={`org-service-account-${serviceAccountId}`}>
-                    <Td>{name}</Td>
-                    <Td>{new Date(expiresAt).toUTCString()}</Td>
-                    <Td>
-                      <div className="flex">
-                        <IconButton
-                          ariaLabel="edit"
-                          colorSchema="secondary"
-                          onClick={() => {
-                            if (currentWorkspace?._id) {
-                              router.push(
-                                `/settings/org/${currentWorkspace._id}/service-accounts/${serviceAccountId}`
-                              );
-                            }
-                          }}
-                          className="mr-2"
-                        >
-                          <FontAwesomeIcon icon={faPencil} />
-                        </IconButton>
-                        <IconButton
-                          ariaLabel="delete"
-                          colorSchema="danger"
-                          onClick={() =>
-                            handlePopUpOpen("removeServiceAccount", { _id: serviceAccountId })
-                          }
-                        >
-                          <FontAwesomeIcon icon={faTrash} />
-                        </IconButton>
-                      </div>
-                    </Td>
-                  </Tr>
-                );
-              })}
-          </TBody>
-        </Table>
-        {!isServiceAccountsLoading && filteredServiceAccounts?.length === 0 && (
-          <EmptyState title="No service accounts found" icon={faServer} />
-        )}
-      </TableContainer>
-      <Modal
-        isOpen={popUp?.addServiceAccount?.isOpen}
-        onOpenChange={(isOpen) => {
-          handlePopUpToggle("addServiceAccount", isOpen);
-          // reset();
-        }}
-      >
-        <ModalContent
-          title="Add Service Account"
-          subTitle="A service account represents a machine identity such as a VM or application client."
-        >
-          {renderStep(step)}
-        </ModalContent>
-      </Modal>
-      <DeleteActionModal
-        isOpen={popUp.removeServiceAccount.isOpen}
-        deleteKey="remove"
-        title="Do you want to remove this service account from the org?"
-        onChange={(isOpen) => handlePopUpToggle("removeServiceAccount", isOpen)}
-        onDeleteApproved={onRemoveServiceAccount}
-      />
-    </div>
-  );
-};
+    );
+  },
+  {
+    action: OrgGeneralPermissionActions.Read,
+    subject: OrgPermissionSubjects.Settings,
+    containerClassName: "mb-4"
+  }
+);

frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -1,59 +1,40 @@
-import { Fragment } from "react"
-import { Tab } from "@headlessui/react"
-
-import { useOrganization,useUser } from "@app/context";
-import {
-    useGetOrgUsers
-} from "@app/hooks/api";
+import { Fragment } from "react";
+import { Tab } from "@headlessui/react";
 
 import { OrgAuthTab } from "../OrgAuthTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
 
+const tabs = [
+  { name: "General", key: "tab-org-general" },
+  { name: "Authentication", key: "tab-org-auth" }
+];
 export const OrgTabGroup = () => {
-    const { currentOrg } = useOrganization();
-    const { user } = useUser();
-    const { data } = useGetOrgUsers(currentOrg?._id ?? "");
-
-    const isRoleSufficient = data?.some((orgUser) => {
-        return orgUser.role !== "member" && orgUser.user._id === user._id;
-    });
-
-    const tabs = [
-        { name: "General", key: "tab-org-general" },
-    ];
-        
-    if (isRoleSufficient) {
-        tabs.push(
-            { name: "Authentication", key: "tab-org-auth" }
-        );
-    }
-
-    return (
-        <Tab.Group>
-            <Tab.List className="mb-6 border-b-2 border-mineshaft-800 w-full">
-                {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>
-                    <OrgGeneralTab />
-                </Tab.Panel>
-                {isRoleSufficient && (
-                    <Tab.Panel>
-                        <OrgAuthTab />
-                    </Tab.Panel>
-                )}
-            </Tab.Panels>
-        </Tab.Group>
-    );
-}
+  return (
+    <Tab.Group>
+      <Tab.List className="mb-6 border-b-2 border-mineshaft-800 w-full">
+        {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>
+          <OrgGeneralTab />
+        </Tab.Panel>
+        <Tab.Panel>
+          <OrgAuthTab />
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+};