Fix: Format entire frontend properly

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

@@ -1,31 +1,20 @@
 import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-    Button,
-    FormControl,
-    Input,
-    Modal,
-    ModalContent,
-    TextArea
-} from "@app/components/v2";
+import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2";
 import { useOrganization } from "@app/context";
-import {
-    useCreateLDAPConfig,
-    useGetLDAPConfig,
-    useUpdateLDAPConfig
-} from "@app/hooks/api";
+import { useCreateLDAPConfig, useGetLDAPConfig, useUpdateLDAPConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const LDAPFormSchema = z.object({
-    url: z.string().default(""),
-    bindDN: z.string().default(""),
-    bindPass: z.string().default(""),
-    searchBase: z.string().default(""),
-    caCert: z.string().optional()
+  url: z.string().default(""),
+  bindDN: z.string().default(""),
+  bindPass: z.string().default(""),
+  searchBase: z.string().default(""),
+  caCert: z.string().optional()
 });
 
 export type TLDAPFormData = z.infer<typeof LDAPFormSchema>;
@@ -36,194 +25,152 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addLDAP"]>, state?: boolean) => void;
 };
 
-export const LDAPModal = ({
-    popUp,
-    handlePopUpClose,
-    handlePopUpToggle
-}: Props) => {
-    const { currentOrg } = useOrganization();
-    const { createNotification } = useNotificationContext();
-    const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateLDAPConfig();
-    const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateLDAPConfig();
-    const { data } = useGetLDAPConfig(currentOrg?.id?? "");
-    
-    const {
-        control,
-        handleSubmit,
-        reset,
-    } = useForm<TLDAPFormData>({
-        resolver: zodResolver(LDAPFormSchema)
-    })
-    
-    useEffect(() => {
-        if (data) {
-            reset({
-                url: data?.url ?? "",
-                bindDN: data?.bindDN ?? "",
-                bindPass: data?.bindPass ?? "",
-                searchBase: data?.searchBase ?? "",
-                caCert: data?.caCert ?? ""
-            });
-        }
-    }, [data]);
-    
-    const onSSOModalSubmit = async ({
-        url,
-        bindDN,
-        bindPass,
-        searchBase,
-        caCert
-    }: TLDAPFormData) => {
-        try {
-            if (!currentOrg) return;
-            
-            if (!data) {
-                await createMutateAsync({
-                    organizationId: currentOrg.id,
-                    isActive: false,
-                    url,
-                    bindDN,
-                    bindPass,
-                    searchBase,
-                    caCert
-                });
-            } else {
-                await updateMutateAsync({
-                    organizationId: currentOrg.id,
-                    isActive: false,
-                    url,
-                    bindDN,
-                    bindPass,
-                    searchBase,
-                    caCert
-                });
-            }
+export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+  const { currentOrg } = useOrganization();
+  const { createNotification } = useNotificationContext();
+  const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateLDAPConfig();
+  const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateLDAPConfig();
+  const { data } = useGetLDAPConfig(currentOrg?.id ?? "");
 
-            handlePopUpClose("addLDAP");
+  const { control, handleSubmit, reset } = useForm<TLDAPFormData>({
+    resolver: zodResolver(LDAPFormSchema)
+  });
 
-            createNotification({
-                text: `Successfully ${!data ? "added" : "updated"} LDAP configuration`,
-                type: "success"
-            });
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: `Failed to ${!data ? "add" : "update"} LDAP configuration`,
-                type: "error"
-            });
-        }
+  useEffect(() => {
+    if (data) {
+      reset({
+        url: data?.url ?? "",
+        bindDN: data?.bindDN ?? "",
+        bindPass: data?.bindPass ?? "",
+        searchBase: data?.searchBase ?? "",
+        caCert: data?.caCert ?? ""
+      });
     }
+  }, [data]);
 
-    return (
-        <Modal
-            isOpen={popUp?.addLDAP?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("addLDAP", isOpen);
-                reset();
-            }}
-        >
-            <ModalContent title="Manage LDAP configuration">
-                <form onSubmit={handleSubmit(onSSOModalSubmit)}>
-                    <Controller
-                            control={control}
-                            name="url"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="URL"
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                >
-                                    <Input 
-                                        {...field} 
-                                        placeholder="ldaps://ldap.myorg.com:636"
-                                    />
-                                </FormControl>
-                            )}
-                        />
-                        <Controller
-                            control={control}
-                            name="bindDN"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="Bind DN"
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                >
-                                    <Input 
-                                        {...field} 
-                                        placeholder="cn=infisical,ou=Users,dc=example,dc=com"
-                                    />
-                                </FormControl>
-                            )}
-                        />
-                        <Controller
-                            control={control}
-                            name="bindPass"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="Bind Pass"
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                >
-                                    <Input 
-                                        {...field} 
-                                        type="password"
-                                        placeholder="********"
-                                    />
-                                </FormControl>
-                            )}
-                        />
-                        <Controller
-                            control={control}
-                            name="searchBase"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="Search Base / User DN"
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                >
-                                    <Input 
-                                        {...field} 
-                                        placeholder="ou=people,dc=acme,dc=com"
-                                    />
-                                </FormControl>
-                            )}
-                        />
-                        <Controller
-                            control={control}
-                            name="caCert"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="CA Certificate"
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                >
-                                    <TextArea 
-                                        {...field} 
-                                        placeholder="-----BEGIN CERTIFICATE----- ..."
-                                    />
-                                </FormControl>
-                            )}
-                        />
-                    <div className="mt-8 flex items-center">
-                        <Button
-                            className="mr-4"
-                            size="sm"
-                            type="submit"
-                            isLoading={createIsLoading || updateIsLoading}
-                        >
-                            {!data ? "Add" : "Update"}
-                        </Button>
-                        <Button 
-                            colorSchema="secondary" 
-                            variant="plain"
-                            onClick={() => handlePopUpClose("addLDAP")}
-                        >
-                            Cancel
-                        </Button>
-                    </div>
-                </form>
-            </ModalContent>
-        </Modal>
-    );
-}
+  const onSSOModalSubmit = async ({ url, bindDN, bindPass, searchBase, caCert }: TLDAPFormData) => {
+    try {
+      if (!currentOrg) return;
+
+      if (!data) {
+        await createMutateAsync({
+          organizationId: currentOrg.id,
+          isActive: false,
+          url,
+          bindDN,
+          bindPass,
+          searchBase,
+          caCert
+        });
+      } else {
+        await updateMutateAsync({
+          organizationId: currentOrg.id,
+          isActive: false,
+          url,
+          bindDN,
+          bindPass,
+          searchBase,
+          caCert
+        });
+      }
+
+      handlePopUpClose("addLDAP");
+
+      createNotification({
+        text: `Successfully ${!data ? "added" : "updated"} LDAP configuration`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${!data ? "add" : "update"} LDAP configuration`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.addLDAP?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addLDAP", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Manage LDAP configuration">
+        <form onSubmit={handleSubmit(onSSOModalSubmit)}>
+          <Controller
+            control={control}
+            name="url"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="URL" errorText={error?.message} isError={Boolean(error)}>
+                <Input {...field} placeholder="ldaps://ldap.myorg.com:636" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="bindDN"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Bind DN" errorText={error?.message} isError={Boolean(error)}>
+                <Input {...field} placeholder="cn=infisical,ou=Users,dc=example,dc=com" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="bindPass"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Bind Pass" errorText={error?.message} isError={Boolean(error)}>
+                <Input {...field} type="password" placeholder="********" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="searchBase"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Search Base / User DN"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input {...field} placeholder="ou=people,dc=acme,dc=com" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="caCert"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="CA Certificate"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+              </FormControl>
+            )}
+          />
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={createIsLoading || updateIsLoading}
+            >
+              {!data ? "Add" : "Update"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpClose("addLDAP")}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -1,66 +1,60 @@
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
+import { Switch, UpgradePlanModal } from "@app/components/v2";
 import {
-    Switch,
-    UpgradePlanModal
-} from "@app/components/v2";
-import {
-    OrgPermissionActions,
-    OrgPermissionSubjects,
-    useOrganization,
-    useSubscription
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription
 } from "@app/context";
 import { useLogoutUser, useUpdateOrg } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 export const OrgGeneralAuthSection = () => {
-    const { createNotification } = useNotificationContext();
-    const { currentOrg } = useOrganization();
-    const { subscription } = useSubscription();
-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
-        "upgradePlan"
-    ] as const);
-    
-    const { mutateAsync } = useUpdateOrg();
-    
-    const logout = useLogoutUser();
-    
-    const handleEnforceOrgAuthToggle = async (value: boolean) => {
-        try {
-            if (!currentOrg?.id) return;
-            if (!subscription?.samlSSO) {
-                handlePopUpOpen("upgradePlan");
-                return;
-            }
-            
-            await mutateAsync({ 
-                orgId: currentOrg?.id, 
-                authEnforced: value 
-            });
-            
-            createNotification({
-                text: `Successfully ${value ? "enforced" : "un-enforced"} org-level auth`,
-                type: "success"
-            });
-            
-            if (value) {
-                await logout.mutateAsync();
-                window.open(`/api/v1/sso/redirect/saml2/organizations/${currentOrg.slug}`);
-                window.close();
-            }
-            
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: (err as { response: { data: { message: string; }}}).response.data.message,
-                type: "error"
-            });
-        }
-    }
+  const { createNotification } = useNotificationContext();
+  const { currentOrg } = useOrganization();
+  const { subscription } = useSubscription();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
 
-    return (
-        <>
-            {/* <div className="py-4">
+  const { mutateAsync } = useUpdateOrg();
+
+  const logout = useLogoutUser();
+
+  const handleEnforceOrgAuthToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.samlSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        orgId: currentOrg?.id,
+        authEnforced: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enforced" : "un-enforced"} org-level auth`,
+        type: "success"
+      });
+
+      if (value) {
+        await logout.mutateAsync();
+        window.open(`/api/v1/sso/redirect/saml2/organizations/${currentOrg.slug}`);
+        window.close();
+      }
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: (err as { response: { data: { message: string } } }).response.data.message,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <>
+      {/* <div className="py-4">
                 <div className="mb-2 flex justify-between">
                     <h3 className="text-md text-mineshaft-100">Allow users to send invites</h3>
                     <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
@@ -76,27 +70,29 @@ export const OrgGeneralAuthSection = () => {
                 </div>
                 <p className="text-sm text-mineshaft-300">Allow members to invite new users to this organization</p>
             </div> */}
-            <div className="py-4">
-                <div className="mb-2 flex justify-between"> 
-                    <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
-                    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
-                        {(isAllowed) => (
-                            <Switch
-                                id="enforce-org-auth"
-                                onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
-                                isChecked={currentOrg?.authEnforced ?? false}
-                                isDisabled={!isAllowed}
-                            />
-                        )}
-                    </OrgPermissionCan>
-                </div>
-                <p className="text-sm text-mineshaft-300">Enforce members to authenticate via SAML to access this organization</p>
-            </div>
-            <UpgradePlanModal
-                isOpen={popUp.upgradePlan.isOpen}
-                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                text="You can enforce SAML SSO if you switch to Infisical's Pro plan."
-            />
-        </>
-    );
-}
+      <div className="py-4">
+        <div className="mb-2 flex justify-between">
+          <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Switch
+                id="enforce-org-auth"
+                onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
+                isChecked={currentOrg?.authEnforced ?? false}
+                isDisabled={!isAllowed}
+              />
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          Enforce members to authenticate via SAML to access this organization
+        </p>
+      </div>
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can enforce SAML SSO if you switch to Infisical's Pro plan."
+      />
+    </>
+  );
+};

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

@@ -1,21 +1,13 @@
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  Switch,
-  UpgradePlanModal
-} from "@app/components/v2";
+import { Button, Switch, UpgradePlanModal } from "@app/components/v2";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
   useOrganization,
   useSubscription
 } from "@app/context";
-import { 
-    useCreateLDAPConfig,
-    useGetLDAPConfig,
-    useUpdateLDAPConfig
-} from "@app/hooks/api";
+import { useCreateLDAPConfig, useGetLDAPConfig, useUpdateLDAPConfig } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { LDAPModal } from "./LDAPModal";
@@ -30,7 +22,7 @@ export const OrgLDAPSection = (): JSX.Element => {
     "addLDAP",
     "upgradePlan"
   ] as const);
-  
+
   const { mutateAsync: createMutateAsync } = useCreateLDAPConfig();
 
   const handleLDAPToggle = async (value: boolean) => {
@@ -71,7 +63,7 @@ export const OrgLDAPSection = (): JSX.Element => {
             url: "",
             bindDN: "",
             bindPass: "",
-            searchBase: "",
+            searchBase: ""
           });
         }
 
@@ -92,11 +84,7 @@ export const OrgLDAPSection = (): JSX.Element => {
           <h2 className="text-md text-mineshaft-100">LDAP</h2>
           <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
             {(isAllowed) => (
-              <Button
-                onClick={addLDAPBtnClick}
-                colorSchema="secondary"
-                isDisabled={!isAllowed}
-              >
+              <Button onClick={addLDAPBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
                 Manage
               </Button>
             )}
@@ -109,31 +97,33 @@ export const OrgLDAPSection = (): JSX.Element => {
           <div className="mb-2 flex items-center justify-between">
             <h2 className="text-md text-mineshaft-100">Enable LDAP</h2>
             <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
-                {(isAllowed) => (
-                  <Switch
-                    id="enable-saml-sso"
-                    onCheckedChange={(value) => handleLDAPToggle(value)}
-                    isChecked={data ? data.isActive : false}
-                    isDisabled={!isAllowed}
-                  >
-                    Enable
-                  </Switch>
-                )}
-              </OrgPermissionCan>
+              {(isAllowed) => (
+                <Switch
+                  id="enable-saml-sso"
+                  onCheckedChange={(value) => handleLDAPToggle(value)}
+                  isChecked={data ? data.isActive : false}
+                  isDisabled={!isAllowed}
+                >
+                  Enable
+                </Switch>
+              )}
+            </OrgPermissionCan>
           </div>
-          <p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with LDAP</p>
+          <p className="text-sm text-mineshaft-300">
+            Allow members to authenticate into Infisical with LDAP
+          </p>
         </div>
       )}
-        <LDAPModal
-          popUp={popUp}
-          handlePopUpClose={handlePopUpClose}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-        <UpgradePlanModal
-            isOpen={popUp.upgradePlan.isOpen}
-            onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-            text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
-        />
+      <LDAPModal
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
+      />
     </>
   );
-};
+};

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

@@ -1,117 +1,116 @@
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { 
-    Button,
-    Switch,
-    UpgradePlanModal
-} from "@app/components/v2";
+import { Button, Switch, UpgradePlanModal } from "@app/components/v2";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
   useOrganization,
-  useSubscription} from "@app/context";
+  useSubscription
+} from "@app/context";
 import { useUpdateOrg } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { ScimTokenModal } from "./ScimTokenModal";
 
 export const OrgScimSection = () => {
-    const { createNotification } = useNotificationContext();
-    const { currentOrg } = useOrganization();
-    const { subscription } = useSubscription();
-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
-        "scimToken",
-        "deleteScimToken",
-        "upgradePlan"
-    ] as const);
-    
-    const { mutateAsync } = useUpdateOrg();
-    
-    const addScimTokenBtnClick = () => {
-        if (subscription?.scim) {
-            handlePopUpOpen("scimToken");
-        } else {
-            handlePopUpOpen("upgradePlan");
-        }
-    }
-    
-    const handleEnableSCIMToggle = async (value: boolean) => {
-        try {
-            if (!currentOrg?.id) return;
-            if (!subscription?.scim) {
-                handlePopUpOpen("upgradePlan");
-                return;
-            }
-            
-            await mutateAsync({
-                orgId: currentOrg?.id,
-                scimEnabled: value
-            });
+  const { createNotification } = useNotificationContext();
+  const { currentOrg } = useOrganization();
+  const { subscription } = useSubscription();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "scimToken",
+    "deleteScimToken",
+    "upgradePlan"
+  ] as const);
 
-            createNotification({
-                text: `Successfully ${value ? "enabled" : "disabled"} SCIM provisioning`,
-                type: "success"
-            });
-        } catch (err) {
-            createNotification({
-                text: (err as { response: { data: { message: string; }}}).response.data.message,
-                type: "error"
-            });
-        }
+  const { mutateAsync } = useUpdateOrg();
+
+  const addScimTokenBtnClick = () => {
+    if (subscription?.scim) {
+      handlePopUpOpen("scimToken");
+    } else {
+      handlePopUpOpen("upgradePlan");
     }
-    
-    return (
-        <>
-            <hr className="border-mineshaft-600" />
-            <div className="py-4">
-                <div className="mb-2 flex justify-between items-center">
-                    <h2 className="text-md text-mineshaft-100">SCIM</h2>
-                    <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Scim}>
-                    {(isAllowed) => (
-                        <Button
-                            onClick={addScimTokenBtnClick}
-                            colorSchema="secondary"
-                            isDisabled={!isAllowed}
-                        >
-                            Manage
-                        </Button>
-                    )}
-                </OrgPermissionCan>
-                </div>
-                <p className="text-sm text-mineshaft-300">Manage SCIM configuration</p>
-            </div>
-            <div className="py-4">
-                <div className="mb-2 flex justify-between items-center">
-                    <h2 className="text-md text-mineshaft-100">Enable SCIM</h2>
-                    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Scim}>
-                        {(isAllowed) => (
-                            <Switch
-                                id="enable-scim"
-                                onCheckedChange={(value) => {
-                                    if (subscription?.scim) {
-                                        handleEnableSCIMToggle(value)
-                                    } else {
-                                        handlePopUpOpen("upgradePlan");
-                                    }
-                                }}
-                                isChecked={currentOrg?.scimEnabled ?? false}
-                                isDisabled={!isAllowed}
-                             />
-                        )}
-                    </OrgPermissionCan>
-                </div>
-                <p className="text-sm text-mineshaft-300">Allow member provisioning/deprovisioning with SCIM</p>
-            </div>
-            <ScimTokenModal 
-                popUp={popUp}
-                handlePopUpOpen={handlePopUpOpen}
-                handlePopUpToggle={handlePopUpToggle}
-            />
-            <UpgradePlanModal
-                isOpen={popUp.upgradePlan.isOpen}
-                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                text="You can use SCIM Provisioning if you switch to Infisical's Enterprise plan."
-            />
-        </>
-    );
-}
+  };
+
+  const handleEnableSCIMToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.scim) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        orgId: currentOrg?.id,
+        scimEnabled: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} SCIM provisioning`,
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: (err as { response: { data: { message: string } } }).response.data.message,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <>
+      <hr className="border-mineshaft-600" />
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">SCIM</h2>
+          <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Scim}>
+            {(isAllowed) => (
+              <Button
+                onClick={addScimTokenBtnClick}
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+              >
+                Manage
+              </Button>
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">Manage SCIM configuration</p>
+      </div>
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">Enable SCIM</h2>
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Scim}>
+            {(isAllowed) => (
+              <Switch
+                id="enable-scim"
+                onCheckedChange={(value) => {
+                  if (subscription?.scim) {
+                    handleEnableSCIMToggle(value);
+                  } else {
+                    handlePopUpOpen("upgradePlan");
+                  }
+                }}
+                isChecked={currentOrg?.scimEnabled ?? false}
+                isDisabled={!isAllowed}
+              />
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          Allow member provisioning/deprovisioning with SCIM
+        </p>
+      </div>
+      <ScimTokenModal
+        popUp={popUp}
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can use SCIM Provisioning if you switch to Infisical's Enterprise plan."
+      />
+    </>
+  );
+};

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

@@ -28,7 +28,7 @@ export const OrgSSOSection = (): JSX.Element => {
   const handleSamlSSOToggle = async (value: boolean) => {
     try {
       if (!currentOrg?.id) return;
-      
+
       if (!subscription?.samlSSO) {
         handlePopUpOpen("upgradePlan");
         return;
@@ -86,11 +86,7 @@ export const OrgSSOSection = (): JSX.Element => {
           {!isLoading && (
             <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
               {(isAllowed) => (
-                <Button
-                  onClick={addSSOBtnClick}
-                  colorSchema="secondary"
-                  isDisabled={!isAllowed}
-                >
+                <Button onClick={addSSOBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
                   Manage
                 </Button>
               )}
@@ -98,35 +94,37 @@ export const OrgSSOSection = (): JSX.Element => {
           )}
         </div>
         <p className="text-sm text-mineshaft-300">Manage SAML authentication configuration</p>
-        </div>
-        <div className="py-4">
-          <div className="mb-2 flex items-center justify-between">
-            <h2 className="text-md text-mineshaft-100">Enable SAML</h2>
-            {!isLoading && (
-              <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+      </div>
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">Enable SAML</h2>
+          {!isLoading && (
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
               {(isAllowed) => (
                 <Switch
                   id="enable-saml-sso"
                   onCheckedChange={(value) => handleSamlSSOToggle(value)}
                   isChecked={data ? data.isActive : false}
                   isDisabled={!isAllowed}
-                 />
+                />
               )}
             </OrgPermissionCan>
-            )}
-          </div>
-          <p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with SAML</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."
-        />
+        <p className="text-sm text-mineshaft-300">
+          Allow members to authenticate into Infisical with SAML
+        </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."
+      />
     </>
   );
 };

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

@@ -28,10 +28,7 @@ import {
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useToggle } from "@app/hooks";
-import {
-    useCreateScimToken,
-    useDeleteScimToken,
-    useGetScimTokens} from "@app/hooks/api";
+import { useCreateScimToken, useDeleteScimToken, useGetScimTokens } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup.object({
@@ -46,53 +43,47 @@ type Props = {
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<["deleteScimToken"]>,
     data?: {
-        scimTokenId: string;
+      scimTokenId: string;
     }
   ) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<
-      ["scimToken", "deleteScimToken"]
-    >,
+    popUpName: keyof UsePopUpState<["scimToken", "deleteScimToken"]>,
     state?: boolean
   ) => void;
 };
 
-export const ScimTokenModal = ({
-  popUp,
-  handlePopUpOpen,
-  handlePopUpToggle
-}: Props) => {
-    const { currentOrg } = useOrganization();
-    const { t } = useTranslation();
-    const { createNotification } = useNotificationContext();
-    const [token, setToken] = useState("");
+export const ScimTokenModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+  const { currentOrg } = useOrganization();
+  const { t } = useTranslation();
+  const { createNotification } = useNotificationContext();
+  const [token, setToken] = useState("");
 
-    const [isScimUrlCopied, setIsScimUrlCopied] = useToggle(false);
-    const [isScimTokenCopied, setIsScimTokenCopied] = useToggle(false);
-    
-    const { data, isLoading } = useGetScimTokens(currentOrg?.id ?? "");
-    const { mutateAsync: createScimTokenMutateAsync  } = useCreateScimToken();
-    const { mutateAsync: deleteScimTokenMutateAsync  } = useDeleteScimToken();
+  const [isScimUrlCopied, setIsScimUrlCopied] = useToggle(false);
+  const [isScimTokenCopied, setIsScimTokenCopied] = useToggle(false);
 
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-    } = useForm<FormData>({
-        resolver: yupResolver(schema),
-        defaultValues: {
-            description: "",
-            ttlDays: "365"
-        }
-    });
+  const { data, isLoading } = useGetScimTokens(currentOrg?.id ?? "");
+  const { mutateAsync: createScimTokenMutateAsync } = useCreateScimToken();
+  const { mutateAsync: deleteScimTokenMutateAsync } = useDeleteScimToken();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      description: "",
+      ttlDays: "365"
+    }
+  });
 
   useEffect(() => {
     let timer: NodeJS.Timeout;
     if (isScimUrlCopied) {
       timer = setTimeout(() => setIsScimUrlCopied.off(), 2000);
     }
-    
+
     if (isScimTokenCopied) {
       timer = setTimeout(() => setIsScimTokenCopied.off(), 2000);
     }
@@ -102,36 +93,36 @@ export const ScimTokenModal = ({
 
   const onFormSubmit = async ({ description, ttlDays }: FormData) => {
     try {
-        if (!currentOrg?.id) return;
-      
-        const { scimToken } = await createScimTokenMutateAsync({
-          organizationId: currentOrg.id,
-          description,
-          ttlDays: Number(ttlDays)
-        });
-        
-        setToken(scimToken);
+      if (!currentOrg?.id) return;
 
-        createNotification({
-            text: "Successfully created SCIM token",
-            type: "success"
-        });
+      const { scimToken } = await createScimTokenMutateAsync({
+        organizationId: currentOrg.id,
+        description,
+        ttlDays: Number(ttlDays)
+      });
+
+      setToken(scimToken);
+
+      createNotification({
+        text: "Successfully created SCIM token",
+        type: "success"
+      });
     } catch (err) {
-        console.error(err);
-        createNotification({
-            text: "Failed to create SCIM token",
-            type: "error"
-        });
+      console.error(err);
+      createNotification({
+        text: "Failed to create SCIM token",
+        type: "error"
+      });
     }
   };
 
   const onDeleteScimTokenSubmit = async (scimTokenId: string) => {
     try {
       if (!currentOrg?.id) return;
-      
+
       await deleteScimTokenMutateAsync({
-          organizationId: currentOrg.id,
-          scimTokenId
+        organizationId: currentOrg.id,
+        scimTokenId
       });
 
       handlePopUpToggle("deleteScimToken", false);
@@ -170,8 +161,8 @@ export const ScimTokenModal = ({
             colorSchema="secondary"
             className="group relative"
             onClick={() => {
-                navigator.clipboard.writeText(scimUrl);
-                setIsScimUrlCopied.on();
+              navigator.clipboard.writeText(scimUrl);
+              setIsScimUrlCopied.on();
             }}
           >
             <FontAwesomeIcon icon={isScimUrlCopied ? faCheck : faCopy} />
@@ -203,8 +194,8 @@ export const ScimTokenModal = ({
                 colorSchema="secondary"
                 className="group relative"
                 onClick={() => {
-                    navigator.clipboard.writeText(token);
-                    setIsScimTokenCopied.on();
+                  navigator.clipboard.writeText(token);
+                  setIsScimTokenCopied.on();
                 }}
               >
                 <FontAwesomeIcon icon={isScimTokenCopied ? faCheck : faCopy} />
@@ -230,31 +221,27 @@ export const ScimTokenModal = ({
                 </FormControl>
               )}
             />
-              <Controller
-                control={control}
-                defaultValue="365"
-                name="ttlDays"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label="TTL (days)"
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <div className="flex">
-                        <Input {...field} placeholder="0" type="number" min="0" step="1" />
-                        <Button
-                            className="ml-4"
-                            size="sm"
-                            type="submit"
-                            isLoading={isSubmitting}
-                            isDisabled={isSubmitting}
-                        >
-                            Create
-                        </Button>
-                    </div>
-                  </FormControl>
-                )}
-              />
+            <Controller
+              control={control}
+              defaultValue="365"
+              name="ttlDays"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="TTL (days)" isError={Boolean(error)} errorText={error?.message}>
+                  <div className="flex">
+                    <Input {...field} placeholder="0" type="number" min="0" step="1" />
+                    <Button
+                      className="ml-4"
+                      size="sm"
+                      type="submit"
+                      isLoading={isSubmitting}
+                      isDisabled={isSubmitting}
+                    >
+                      Create
+                    </Button>
+                  </div>
+                </FormControl>
+              )}
+            />
           </form>
         )}
         <h2 className="mb-4">SCIM Tokens</h2>
@@ -273,53 +260,42 @@ export const ScimTokenModal = ({
               {!isLoading &&
                 data &&
                 data.length > 0 &&
-                data.map(
-                  ({
-                    id,
-                    description,
-                    ttlDays,
-                    createdAt
-                  }) => {
-                    
-                    let expiresAt;
-                    if (ttlDays > 0) {
-                      expiresAt = new Date(new Date(createdAt).getTime() + ttlDays * 86400 * 1000);
-                    }
-
-                    return (
-                      <Tr className="h-10 items-center" key={`mi-client-secret-${id}`}>
-                        <Td>{description === "" ? "-" : description}</Td>
-                        <Td>{expiresAt ? format(expiresAt, "yyyy-MM-dd HH:mm:ss") : "-"}</Td>
-                        <Td>{format(new Date(createdAt), "yyyy-MM-dd HH:mm:ss")}</Td>
-                        <Td>
-                          <IconButton
-                            onClick={() => {
-                              handlePopUpOpen("deleteScimToken", {
-                                scimTokenId: id
-                              });
-                            }}
-                            size="lg"
-                            colorSchema="primary"
-                            variant="plain"
-                            ariaLabel="update"
-                          >
-                            <FontAwesomeIcon icon={faXmark} />
-                          </IconButton>
-                        </Td>
-                      </Tr>
-                    );
+                data.map(({ id, description, ttlDays, createdAt }) => {
+                  let expiresAt;
+                  if (ttlDays > 0) {
+                    expiresAt = new Date(new Date(createdAt).getTime() + ttlDays * 86400 * 1000);
                   }
-                )}
-                {!isLoading && data && data?.length === 0 && (
-                    <Tr>
-                        <Td colSpan={4}>
-                            <EmptyState
-                            title="No SCIM tokens have been created yet"
-                            icon={faKey}
-                            />
-                        </Td>
+
+                  return (
+                    <Tr className="h-10 items-center" key={`mi-client-secret-${id}`}>
+                      <Td>{description === "" ? "-" : description}</Td>
+                      <Td>{expiresAt ? format(expiresAt, "yyyy-MM-dd HH:mm:ss") : "-"}</Td>
+                      <Td>{format(new Date(createdAt), "yyyy-MM-dd HH:mm:ss")}</Td>
+                      <Td>
+                        <IconButton
+                          onClick={() => {
+                            handlePopUpOpen("deleteScimToken", {
+                              scimTokenId: id
+                            });
+                          }}
+                          size="lg"
+                          colorSchema="primary"
+                          variant="plain"
+                          ariaLabel="update"
+                        >
+                          <FontAwesomeIcon icon={faXmark} />
+                        </IconButton>
+                      </Td>
                     </Tr>
-                )}
+                  );
+                })}
+              {!isLoading && data && data?.length === 0 && (
+                <Tr>
+                  <Td colSpan={4}>
+                    <EmptyState title="No SCIM tokens have been created yet" icon={faKey} />
+                  </Td>
+                </Tr>
+              )}
             </TBody>
           </Table>
         </TableContainer>
@@ -329,9 +305,8 @@ export const ScimTokenModal = ({
           onChange={(isOpen) => handlePopUpToggle("scimToken", isOpen)}
           deleteKey="confirm"
           onDeleteApproved={() => {
-        
             const deleteScimTokenData = popUp?.deleteScimToken?.data as {
-                scimTokenId: string;
+              scimTokenId: string;
             };
 
             return onDeleteScimTokenSubmit(deleteScimTokenData.scimTokenId);

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

@@ -1 +1 @@
-export { OrgAuthTab } from "./OrgAuthTab";
+export { OrgAuthTab } from "./OrgAuthTab";

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

@@ -48,7 +48,7 @@ export const OrgDeleteSection = () => {
     <>
       <hr className="border-mineshaft-600" />
       <div className="py-4">
-        <p className="mb-4 text-md text-mineshaft-100">Danger Zone</p>
+        <p className="text-md mb-4 text-mineshaft-100">Danger Zone</p>
         <Button
           isLoading={isLoading}
           colorSchema="danger"

frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/index.tsx

@@ -1 +1 @@
-export { OrgDeleteSection } from "./OrgDeleteSection";
+export { OrgDeleteSection } from "./OrgDeleteSection";

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

@@ -13,4 +13,4 @@ export const OrgGeneralTab = () => {
       {membership && membership.role === "admin" && <OrgDeleteSection />}
     </div>
   );
-};
+};

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

@@ -1 +1 @@
-export { OrgGeneralTab } from "./OrgGeneralTab";
+export { OrgGeneralTab } from "./OrgGeneralTab";

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

@@ -1,2 +1,2 @@
-export { AddOrgIncidentContactModal } from "./AddOrgIncidentContactModal"
-export { OrgIncidentContactsSection } from "./OrgIncidentContactsSection";
+export { AddOrgIncidentContactModal } from "./AddOrgIncidentContactModal";
+export { OrgIncidentContactsSection } from "./OrgIncidentContactsSection";

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

@@ -10,12 +10,16 @@ import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@a
 import { useUpdateOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Organization Name").max(64, "Too long, maximum length is 64 characters"),
+  name: yup
+    .string()
+    .required()
+    .label("Organization Name")
+    .max(64, "Too long, maximum length is 64 characters"),
   slug: yup
-      .string()
-      .matches(/^[a-zA-Z0-9-]+$/, "Name must only contain alphanumeric characters or hyphens")
-      .required()
-      .label("Organization Slug")
+    .string()
+    .matches(/^[a-zA-Z0-9-]+$/, "Name must only contain alphanumeric characters or hyphens")
+    .required()
+    .label("Organization Slug")
 });
 
 type FormData = yup.InferType<typeof formSchema>;
@@ -30,7 +34,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
 
   useEffect(() => {
     if (currentOrg) {
-      reset({ 
+      reset({
         name: currentOrg.name,
         slug: currentOrg.slug
       });
@@ -41,12 +45,12 @@ export const OrgNameChangeSection = (): JSX.Element => {
     try {
       if (!currentOrg?.id) return;
 
-      await mutateAsync({ 
-        orgId: currentOrg?.id, 
+      await mutateAsync({
+        orgId: currentOrg?.id,
         name,
         slug
       });
-      
+
       createNotification({
         text: "Successfully updated organization details",
         type: "success"
@@ -63,7 +67,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="py-4">
       <div className="">
-        <h2 className="mb-2 text-md text-mineshaft-100">Organization Name</h2>
+        <h2 className="text-md mb-2 text-mineshaft-100">Organization Name</h2>
         <Controller
           defaultValue=""
           render={({ field, fieldState: { error } }) => (
@@ -76,7 +80,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
         />
       </div>
       <div className="py-4">
-        <h2 className="mb-2 text-md text-mineshaft-100">Organization Slug</h2>
+        <h2 className="text-md mb-2 text-mineshaft-100">Organization Slug</h2>
         <Controller
           defaultValue=""
           render={({ field, fieldState: { error } }) => (
@@ -103,4 +107,4 @@ export const OrgNameChangeSection = (): JSX.Element => {
       </OrgPermissionCan>
     </form>
   );
-};
+};

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

@@ -11,13 +11,13 @@ const tabs = [
 export const OrgTabGroup = () => {
   return (
     <Tab.Group>
-      <Tab.List className="mb-6 border-b-2 border-mineshaft-800 w-full">
+      <Tab.List className="mb-6 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 ${
+                className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
                   selected ? "border-b border-white text-white" : "text-mineshaft-400"
                 }`}
               >

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

@@ -1 +1 @@
-export { OrgTabGroup } from "./OrgTabGroup";
+export { OrgTabGroup } from "./OrgTabGroup";

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

@@ -1 +1 @@
-export { OrgTabGroup } from "./OrgTabGroup";
+export { OrgTabGroup } from "./OrgTabGroup";