Fix: Format entire frontend properly

frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx

@@ -1,20 +1,18 @@
 import { useTranslation } from "react-i18next";
 
-import {
-  BillingTabGroup
-} from "./components";
+import { BillingTabGroup } from "./components";
 
 export const BillingSettingsPage = () => {
-    const { t } = useTranslation();
-    return (
-      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
-        <div className="max-w-7xl px-6 w-full">
-          <div className="my-6">
-              <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
-            <div />
-          </div>
-          <BillingTabGroup />
+  const { t } = useTranslation();
+  return (
+    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <div className="w-full max-w-7xl px-6">
+        <div className="my-6">
+          <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
+          <div />
         </div>
+        <BillingTabGroup />
       </div>
-    );
-};
+    </div>
+  );
+};

frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx

@@ -2,10 +2,10 @@ import { CurrentPlanSection } from "./CurrentPlanSection";
 import { PreviewSection } from "./PreviewSection";
 
 export const BillingCloudTab = () => {
-    return (
-        <div>
-            <PreviewSection />
-            <CurrentPlanSection />
-        </div>
-    );
-}
+  return (
+    <div>
+      <PreviewSection />
+      <CurrentPlanSection />
+    </div>
+  );
+};

frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx

@@ -1,10 +1,7 @@
-import { Fragment } from "react"
-import { Tab } from "@headlessui/react"
+import { Fragment } from "react";
+import { Tab } from "@headlessui/react";
 
-import { 
-    Modal,
-    ModalContent
-} from "@app/components/v2";
+import { Modal, ModalContent } from "@app/components/v2";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { ManagePlansTable } from "./ManagePlansTable";
@@ -14,51 +11,52 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["managePlan"]>, state?: boolean) => void;
 };
 
-export const ManagePlansModal = ({
-    popUp,
-    handlePopUpToggle 
-}: Props) => {
-    return (
+export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
+  return (
     <Modal
-            isOpen={popUp?.managePlan?.isOpen}
-            onOpenChange={(isOpen) => {
-                handlePopUpToggle("managePlan", isOpen);
-            }}
-        >
-            <ModalContent className="max-w-screen-lg" title="Infisical Cloud Plans">
-                <Tab.Group>
-                    <Tab.List className="border-b-2 border-mineshaft-600 max-w-screen-lg">
-                        <Tab as={Fragment}>
-                            {({ selected }) => (
-                                <button 
-                                    type="button"
-                                    className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}
-                                >
-                                    Bill monthly
-                                </button>
-                            )}
-                        </Tab>
-                        <Tab as={Fragment}>
-                            {({ selected }) => (
-                                <button 
-                                    type="button"
-                                    className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}
-                                >
-                                    Bill yearly
-                                </button>
-                            )}
-                        </Tab>
-                    </Tab.List>
-                    <Tab.Panels className="mt-4">
-                        <Tab.Panel>
-                            <ManagePlansTable billingCycle="monthly" />
-                        </Tab.Panel>
-                        <Tab.Panel>
-                            <ManagePlansTable billingCycle="yearly" />
-                        </Tab.Panel>
-                    </Tab.Panels>
-                </Tab.Group>
-            </ModalContent>
-        </Modal>
-    );
-}
+      isOpen={popUp?.managePlan?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("managePlan", isOpen);
+      }}
+    >
+      <ModalContent className="max-w-screen-lg" title="Infisical Cloud Plans">
+        <Tab.Group>
+          <Tab.List className="max-w-screen-lg border-b-2 border-mineshaft-600">
+            <Tab as={Fragment}>
+              {({ selected }) => (
+                <button
+                  type="button"
+                  className={`p-4 ${
+                    selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
+                  } w-30 font-semibold outline-none`}
+                >
+                  Bill monthly
+                </button>
+              )}
+            </Tab>
+            <Tab as={Fragment}>
+              {({ selected }) => (
+                <button
+                  type="button"
+                  className={`p-4 ${
+                    selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
+                  } w-30 font-semibold outline-none`}
+                >
+                  Bill yearly
+                </button>
+              )}
+            </Tab>
+          </Tab.List>
+          <Tab.Panels className="mt-4">
+            <Tab.Panel>
+              <ManagePlansTable billingCycle="monthly" />
+            </Tab.Panel>
+            <Tab.Panel>
+              <ManagePlansTable billingCycle="yearly" />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx

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

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx

@@ -4,12 +4,12 @@ import { PmtMethodsSection } from "./PmtMethodsSection";
 import { TaxIDSection } from "./TaxIDSection";
 
 export const BillingDetailsTab = () => {
-    return (
-        <>
-            <CompanyNameSection />
-            <InvoiceEmailSection />
-            <PmtMethodsSection />
-            <TaxIDSection />
-        </>
-    );
-}
+  return (
+    <>
+      <CompanyNameSection />
+      <InvoiceEmailSection />
+      <PmtMethodsSection />
+      <TaxIDSection />
+    </>
+  );
+};

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx

@@ -15,9 +15,9 @@ export const TaxIDSection = () => {
   ] as const);
 
   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">Tax ID</h2>
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex items-center">
+        <h2 className="flex-1 text-xl font-semibold text-white">Tax ID</h2>
         <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
           {(isAllowed) => (
             <Button

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/index.tsx

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

frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx

@@ -1,10 +1,10 @@
 import { InvoicesTable } from "./InvoicesTable";
 
 export const BillingReceiptsTab = () => {
-    return (
-        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-          <h2 className="text-xl font-semibold flex-1 text-white">Invoices</h2>
-          <InvoicesTable />
-        </div>
-    );
-}
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <h2 className="flex-1 text-xl font-semibold text-white">Invoices</h2>
+      <InvoicesTable />
+    </div>
+  );
+};

frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/index.tsx

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

frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx

@@ -1,9 +1,9 @@
 import { LicensesSection } from "./LicensesSection";
 
 export const BillingSelfHostedTab = () => {
-    return (
-        <div>
-            <LicensesSection />
-        </div>
-    );
-}
+  return (
+    <div>
+      <LicensesSection />
+    </div>
+  );
+};

frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx

@@ -1 +1 @@
-export * from "./BillingSelfHostedTab";
+export * from "./BillingSelfHostedTab";

frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx

@@ -26,7 +26,7 @@ export const BillingTabGroup = withPermission(
               {({ 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/BillingSettingsPage/components/BillingTabGroup/index.tsx

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

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

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

frontend/src/views/Settings/BillingSettingsPage/index.tsx

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

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

@@ -6,13 +6,13 @@ export const OrgSettingsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="flex justify-center bg-bunker-800 text-white w-full py-6">
-		<div className="max-w-4xl w-full px-6">
-			<div className="mb-4">
-				<p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
-			</div>
-			<OrgTabGroup />
-		</div>
+    <div className="flex w-full justify-center bg-bunker-800 py-6 text-white">
+      <div className="w-full max-w-4xl px-6">
+        <div className="mb-4">
+          <p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
+        </div>
+        <OrgTabGroup />
+      </div>
     </div>
   );
 };

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";

frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/AddAPIKeyModal.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -21,25 +21,27 @@ import { useCreateAPIKey } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const expirations = [
-    { label: "1 day", value: "1d" },
-    { label: "7 days", value: "7d" },
-    { label: "1 month", value: "1mo" },
-    { label: "6 months", value: "6mo" },
-    { label: "12 months", value: "12mo" }
+  { label: "1 day", value: "1d" },
+  { label: "7 days", value: "7d" },
+  { label: "1 month", value: "1mo" },
+  { label: "6 months", value: "6mo" },
+  { label: "12 months", value: "12mo" }
 ];
 
 const expirationMapping: { [key: string]: number } = {
-    "1d": 86400,
-    "7d": 604800,
-    "1mo": 2592000,
-    "6mo": 15552000,
-    "12mo": 31104000
-}
+  "1d": 86400,
+  "7d": 604800,
+  "1mo": 2592000,
+  "6mo": 15552000,
+  "12mo": 31104000
+};
 
-const schema = yup.object({
+const schema = yup
+  .object({
     name: yup.string().required("API Key name is required"),
     expiresIn: yup.string().required("API Key expiration window is required")
-}).required();
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
@@ -48,154 +50,136 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addAPIKey"]>, state?: boolean) => void;
 };
 
-export const AddAPIKeyModal = ({
-    popUp,
-    handlePopUpToggle
-}: Props) => {
-    const [newAPIKey, setNewAPIKey] = useState("");
-    const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
-    const { createNotification } = useNotificationContext();
-    const { mutateAsync, isLoading } = useCreateAPIKey();
-    
-    const {
-        control,
-        handleSubmit,
-        reset
-    } = useForm<FormData>({
-        resolver: yupResolver(schema)
-    });
+export const AddAPIKeyModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [newAPIKey, setNewAPIKey] = useState("");
+  const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
+  const { createNotification } = useNotificationContext();
+  const { mutateAsync, isLoading } = useCreateAPIKey();
 
-    useEffect(() => {
-        let timer: NodeJS.Timeout;
+  const { control, handleSubmit, reset } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
 
-        if (isAPIKeyCopied) {
-            timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
-        }
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
 
-        return () => clearTimeout(timer);
+    if (isAPIKeyCopied) {
+      timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
   }, [setIsAPIKeyCopied]);
 
-    const copyTokenToClipboard = () => {
-        navigator.clipboard.writeText(newAPIKey);
-        setIsAPIKeyCopied.on();
-    };
+  const copyTokenToClipboard = () => {
+    navigator.clipboard.writeText(newAPIKey);
+    setIsAPIKeyCopied.on();
+  };
 
-    const onFormSubmit = async ({ name, expiresIn }: FormData) => {
-        try {
-            const { apiKey } = await mutateAsync({
-                name,
-                expiresIn: expirationMapping[expiresIn]
-            });
-            
-            setNewAPIKey(apiKey);
+  const onFormSubmit = async ({ name, expiresIn }: FormData) => {
+    try {
+      const { apiKey } = await mutateAsync({
+        name,
+        expiresIn: expirationMapping[expiresIn]
+      });
 
-            createNotification({
-                text: "Successfully created API key",
-                type: "success"
-            });
-            
-            reset();
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to create API key",
-                type: "error"
-            });
-        }
+      setNewAPIKey(apiKey);
+
+      createNotification({
+        text: "Successfully created API key",
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create API key",
+        type: "error"
+      });
     }
-    
-    const hasAPIKey = Boolean(newAPIKey);
-    
-    return (
-        <Modal
-            isOpen={popUp?.addAPIKey?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("addAPIKey", isOpen);
-                reset();
-                setNewAPIKey("");
-            }}
-        >
-            <ModalContent title="Create API Key">
-            {!hasAPIKey ? (
-                <form onSubmit={handleSubmit(onFormSubmit)}>
-                    <Controller
-                        control={control}
-                        defaultValue=""
-                        name="name"
-                        render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                                label="Name"
-                                isError={Boolean(error)}
-                                errorText={error?.message}
-                            >
-                            <Input 
-                                {...field} 
-                                placeholder="My API Key"
-                            />
-                            </FormControl>
-                        )}
-                    />
-                    <Controller
-                        control={control}
-                        name="expiresIn"
-                        defaultValue="6mo"
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                            <FormControl
-                                label="Expiration"
-                                errorText={error?.message}
-                                isError={Boolean(error)}
-                            >
-                                <Select
-                                    defaultValue={field.value}
-                                    {...field}
-                                    onValueChange={(e) => onChange(e)}
-                                    className="w-full"
-                                >
-                                    {expirations.map(({ label, value }) => (
-                                        <SelectItem value={String(value || "")} key={`api-key-expiration-${label}`}>
-                                            {label}
-                                        </SelectItem>
-                                    ))}
-                                </Select>
-                            </FormControl>
-                        )}
-                    />
-                    <div className="mt-8 flex items-center">
-                        <Button
-                            className="mr-4"
-                            size="sm"
-                            type="submit"
-                            isLoading={isLoading}
-                            isDisabled={isLoading}
-                        >
-                            Add
-                        </Button>
-                        <Button 
-                            colorSchema="secondary" 
-                            variant="plain" 
-                            onClick={() => handlePopUpToggle("addAPIKey", false)}
-                        >
-                            Cancel
-                        </Button>
-                    </div>
-                </form>
-            ) : (
-                <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-                  <p className="mr-4 break-all">{newAPIKey}</p>
-                  <IconButton
-                    ariaLabel="copy icon"
-                    colorSchema="secondary"
-                    className="group relative"
-                    onClick={copyTokenToClipboard}
+  };
+
+  const hasAPIKey = Boolean(newAPIKey);
+
+  return (
+    <Modal
+      isOpen={popUp?.addAPIKey?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addAPIKey", isOpen);
+        reset();
+        setNewAPIKey("");
+      }}
+    >
+      <ModalContent title="Create API Key">
+        {!hasAPIKey ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              defaultValue=""
+              name="name"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
+                  <Input {...field} placeholder="My API Key" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="expiresIn"
+              defaultValue="6mo"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl label="Expiration" errorText={error?.message} isError={Boolean(error)}>
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
                   >
-                    <FontAwesomeIcon icon={isAPIKeyCopied ? 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">
-                        Click to copy
-                    </span>
-                  </IconButton>
-                </div>
-            )}
-            </ModalContent>
-        </Modal> 
-    );
-}
+                    {expirations.map(({ label, value }) => (
+                      <SelectItem value={String(value || "")} key={`api-key-expiration-${label}`}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <div className="mt-8 flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isLoading}
+                isDisabled={isLoading}
+              >
+                Add
+              </Button>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => handlePopUpToggle("addAPIKey", false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 break-all">{newAPIKey}</p>
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative"
+              onClick={copyTokenToClipboard}
+            >
+              <FontAwesomeIcon icon={isAPIKeyCopied ? 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">
+                Click to copy
+              </span>
+            </IconButton>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/ChangeLanguageSection.tsx

@@ -4,29 +4,29 @@ import { useRouter } from "next/router";
 import ListBox from "@app/components/basic/Listbox";
 
 export const ChangeLanguageSection = () => {
-    const { t, i18n } = useTranslation();
-    const router = useRouter();
-    const lang = router.locale ?? "en";
+  const { t, i18n } = useTranslation();
+  const router = useRouter();
+  const lang = router.locale ?? "en";
 
-    const setLanguage = async (to: string) => {
-        router.push(router.asPath, router.asPath, { locale: to });
-        localStorage.setItem("lang", to);
-        i18n.changeLanguage(to);
-    };
+  const setLanguage = async (to: string) => {
+    router.push(router.asPath, router.asPath, { locale: to });
+    localStorage.setItem("lang", to);
+    i18n.changeLanguage(to);
+  };
 
-    return (
-        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-            <p className="text-xl font-semibold text-mineshaft-100 mb-8">
-                {t("settings.personal.change-language")}
-            </p>
-            <div className="w-28">
-                <ListBox
-                    isSelected={lang}
-                    onChange={setLanguage}
-                    data={["en", "ko", "fr", "es"]}
-                    text={`${t("common.language")}: `}
-                />
-            </div>
-        </div>
-    );
-}
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-8 text-xl font-semibold text-mineshaft-100">
+        {t("settings.personal.change-language")}
+      </p>
+      <div className="w-28">
+        <ListBox
+          isSelected={lang}
+          onChange={setLanguage}
+          data={["en", "ko", "fr", "es"]}
+          text={`${t("common.language")}: `}
+        />
+      </div>
+    </div>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/ChangePasswordSection/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/DeleteAccountSection.tsx

@@ -1,64 +1,59 @@
 import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-    Button,
-    DeleteActionModal
-} from "@app/components/v2";
+import { Button, DeleteActionModal } from "@app/components/v2";
 import { useDeleteUser } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 export const DeleteAccountSection = () => {
-    const router = useRouter();
-    const { createNotification } = useNotificationContext();
-    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
-        "deleteAccount"
-    ] as const);
+  const router = useRouter();
+  const { createNotification } = useNotificationContext();
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteAccount"
+  ] as const);
 
-    const { mutateAsync: deleteUserMutateAsync, isLoading } = useDeleteUser();
+  const { mutateAsync: deleteUserMutateAsync, isLoading } = useDeleteUser();
 
-    const handleDeleteAccountSubmit = async () => {
-        try {
-            await deleteUserMutateAsync();
-            
-            createNotification({
-                text: "Successfully deleted account",
-                type: "success"
-            });
+  const handleDeleteAccountSubmit = async () => {
+    try {
+      await deleteUserMutateAsync();
 
-            router.push("/login");
-            handlePopUpClose("deleteAccount");
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to delete account",
-                type: "error"
-            });
-        }
+      createNotification({
+        text: "Successfully deleted account",
+        type: "success"
+      });
+
+      router.push("/login");
+      handlePopUpClose("deleteAccount");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete account",
+        type: "error"
+      });
     }
-    
-    return (
-        <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
-            <p className="text-xl font-semibold text-mineshaft-100 mb-4">
-                Danger Zone
-            </p>
-            <Button
-                isLoading={isLoading}
-                colorSchema="danger"
-                variant="outline_bg"
-                type="submit"
-                onClick={() => handlePopUpOpen("deleteAccount")}
-            >
-                Delete my account
-            </Button>
-            <DeleteActionModal
-                isOpen={popUp.deleteAccount.isOpen}
-                title="Are you sure want to delete your account?"
-                subTitle="Permanently remove this account and all of its data. This action is not reversible, so please be careful."
-                onChange={(isOpen) => handlePopUpToggle("deleteAccount", isOpen)}
-                deleteKey="confirm"
-                onDeleteApproved={handleDeleteAccountSubmit}
-            />
-        </div>
-    );
-}
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Danger Zone</p>
+      <Button
+        isLoading={isLoading}
+        colorSchema="danger"
+        variant="outline_bg"
+        type="submit"
+        onClick={() => handlePopUpOpen("deleteAccount")}
+      >
+        Delete my account
+      </Button>
+      <DeleteActionModal
+        isOpen={popUp.deleteAccount.isOpen}
+        title="Are you sure want to delete your account?"
+        subTitle="Permanently remove this account and all of its data. This action is not reversible, so please be careful."
+        onChange={(isOpen) => handlePopUpToggle("deleteAccount", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={handleDeleteAccountSubmit}
+      />
+    </div>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/EmergencyKitSection.tsx

@@ -1,91 +1,81 @@
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
-import { 
-    Button,
-    FormControl,
-    Input
-} from "@app/components/v2";
+import { Button, FormControl, Input } from "@app/components/v2";
 import { useUser } from "@app/context";
 
-const schema = yup.object({
+const schema = yup
+  .object({
     password: yup.string().required("Password is required")
-}).required();
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
 export const EmergencyKitSection = () => {
-    const { createNotification } = useNotificationContext();
-    const { user } = useUser();
-    const { reset, control, handleSubmit } = useForm({
-        defaultValues: {
-            password: "",
-        },
-        resolver: yupResolver(schema)
-    });
-    
-    const onFormSubmit = ({
-        password
-    }: FormData) => {
-        try {
-            if (!user?.email) return;
+  const { createNotification } = useNotificationContext();
+  const { user } = useUser();
+  const { reset, control, handleSubmit } = useForm({
+    defaultValues: {
+      password: ""
+    },
+    resolver: yupResolver(schema)
+  });
 
-            issueBackupKey({
-                email: user.email,
-                password,
-                personalName: `${user.firstName} ${user.lastName}`,
-                setBackupKeyError: () => {},
-                setBackupKeyIssued: () => {}
-            });
-            
-            reset();
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to download emergency kit",
-                type: "error"
-            });
-        }
+  const onFormSubmit = ({ password }: FormData) => {
+    try {
+      if (!user?.email) return;
+
+      issueBackupKey({
+        email: user.email,
+        password,
+        personalName: `${user.firstName} ${user.lastName}`,
+        setBackupKeyError: () => {},
+        setBackupKeyIssued: () => {}
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to download emergency kit",
+        type: "error"
+      });
     }
-    
-    return (
-        <form 
-            onSubmit={handleSubmit(onFormSubmit)}
-            className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
-        >
-            <h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
-                Emergency Kit
-            </h2>
-            <p className="text-gray-400 mb-8">
-                The kit contains information you can use to recover your account.
-            </p>
-            <div className="max-w-md">
-                <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                        <FormControl isError={Boolean(error)} errorText={error?.message}>
-                            <Input 
-                                placeholder="Password" 
-                                type="password"
-                                {...field} 
-                                className="bg-mineshaft-800" 
-                            />
-                        </FormControl>
-                    )}
-                    control={control}
-                    name="password"
-                />
-            </div>
-            <Button
-                type="submit"
-                colorSchema="secondary"
-                isLoading={false}
-            >
-                Save
-            </Button>
-        </form>
-    );
-}
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
+      <h2 className="flex-1 text-xl font-semibold text-mineshaft-100">Emergency Kit</h2>
+      <p className="mb-8 text-gray-400">
+        The kit contains information you can use to recover your account.
+      </p>
+      <div className="max-w-md">
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                placeholder="Password"
+                type="password"
+                {...field}
+                className="bg-mineshaft-800"
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="password"
+        />
+      </div>
+      <Button type="submit" colorSchema="secondary" isLoading={false}>
+        Save
+      </Button>
+    </form>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/PersonalAuthTab.tsx

@@ -1,6 +1,4 @@
-import {
-    useGetUser
-} from "@app/hooks/api";
+import { useGetUser } from "@app/hooks/api";
 import { AuthMethod } from "@app/hooks/api/users/types";
 
 import { AuthMethodSection } from "../AuthMethodSection";
@@ -8,16 +6,16 @@ import { ChangePasswordSection } from "../ChangePasswordSection";
 import { MFASection } from "../SecuritySection";
 
 export const PersonalAuthTab = () => {
-    const { data: user } = useGetUser();
-    return (
-        <div>
-            {user && !user.authMethods.includes(AuthMethod.LDAP) && (
-                <>
-                    <MFASection />
-                    <AuthMethodSection />
-                </>
-            )}
-            <ChangePasswordSection />
-        </div>
-    );
-}
+  const { data: user } = useGetUser();
+  return (
+    <div>
+      {user && !user.authMethods.includes(AuthMethod.LDAP) && (
+        <>
+          <MFASection />
+          <AuthMethodSection />
+        </>
+      )}
+      <ChangePasswordSection />
+    </div>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/PersonalGeneralTab.tsx

@@ -4,12 +4,12 @@ import { SessionsSection } from "../SessionsSection";
 import { UserNameSection } from "../UserNameSection";
 
 export const PersonalGeneralTab = () => {
-    return (
-        <div>
-            <UserNameSection />
-            <SessionsSection />
-            <EmergencyKitSection />
-            <DeleteAccountSection />
-        </div>
-    );
-}
+  return (
+    <div>
+      <UserNameSection />
+      <SessionsSection />
+      <EmergencyKitSection />
+      <DeleteAccountSection />
+    </div>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/PersonalSettingsPage.tsx

@@ -3,17 +3,15 @@ import { useTranslation } from "react-i18next";
 import { PersonalTabGroup } from "./PersonalTabGroup";
 
 export const PersonalSettingsPage = () => {
-    const { t } = useTranslation();
-    return (
-        <div className="flex justify-center bg-bunker-800 text-white w-full px-6">
-            <div className="max-w-6xl w-full">
-                <div className="mt-6 mb-6">
-                    <p className="text-3xl font-semibold text-gray-200">
-                        {t("settings.personal.title")}
-                    </p>
-                </div>
-                <PersonalTabGroup />
-            </div>
+  const { t } = useTranslation();
+  return (
+    <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
+      <div className="w-full max-w-6xl">
+        <div className="mt-6 mb-6">
+          <p className="text-3xl font-semibold text-gray-200">{t("settings.personal.title")}</p>
         </div>
-    );
-}
+        <PersonalTabGroup />
+      </div>
+    </div>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx

@@ -1,8 +1,6 @@
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Checkbox, EmailServiceSetupModal } from "@app/components/v2";
-import {
-  useGetUser,
-  useUpdateMfaEnabled} from "@app/hooks/api";
+import { useGetUser, useUpdateMfaEnabled } from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import { AuthMethod } from "@app/hooks/api/users/types";
 import { usePopUp } from "@app/hooks/usePopUp";
@@ -11,12 +9,10 @@ export const MFASection = () => {
   const { data: user } = useGetUser();
   const { mutateAsync } = useUpdateMfaEnabled();
   const { createNotification } = useNotificationContext();
-  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
-    "setUpEmail"
-  ] as const);
-  
-  const {data: serverDetails } = useFetchServerStatus()
-  
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["setUpEmail"] as const);
+
+  const { data: serverDetails } = useFetchServerStatus();
+
   const toggleMfa = async (state: boolean) => {
     try {
       if (!user) return;
@@ -27,13 +23,17 @@ export const MFASection = () => {
         });
         return;
       }
-      
+
       const newUser = await mutateAsync({
         isMfaEnabled: state
       });
 
       createNotification({
-        text: `${newUser.isMfaEnabled ? "Successfully turned on two-factor authentication." : "Successfully turned off two-factor authentication."}`,
+        text: `${
+          newUser.isMfaEnabled
+            ? "Successfully turned on two-factor authentication."
+            : "Successfully turned off two-factor authentication."
+        }`,
         type: "success"
       });
     } catch (err) {
@@ -43,34 +43,32 @@ export const MFASection = () => {
       });
       console.error(err);
     }
-  }
-  
+  };
+
   return (
     <>
-    <form>
-      <div className="p-4 mb-6 bg-mineshaft-900 max-w-6xl rounded-lg border border-mineshaft-600">
-        <p className="text-xl font-semibold text-mineshaft-100 mb-8">
-          Two-factor Authentication
-        </p>
-        {user && (
-          <Checkbox
-            className="data-[state=checked]:bg-primary"
-            id="isTwoFAEnabled"
-            isChecked={user?.isMfaEnabled}
-            onCheckedChange={(state) => {
-              if (serverDetails?.emailConfigured){
-                toggleMfa(state as boolean);
-              } else {
-                handlePopUpOpen("setUpEmail");
-              }
-            }}
-          >
-            Enable 2-factor authentication via your personal email.
-          </Checkbox>
-        )}
-      </div>
-    </form>
-    <EmailServiceSetupModal
+      <form>
+        <div className="mb-6 max-w-6xl rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <p className="mb-8 text-xl font-semibold text-mineshaft-100">Two-factor Authentication</p>
+          {user && (
+            <Checkbox
+              className="data-[state=checked]:bg-primary"
+              id="isTwoFAEnabled"
+              isChecked={user?.isMfaEnabled}
+              onCheckedChange={(state) => {
+                if (serverDetails?.emailConfigured) {
+                  toggleMfa(state as boolean);
+                } else {
+                  handlePopUpOpen("setUpEmail");
+                }
+              }}
+            >
+              Enable 2-factor authentication via your personal email.
+            </Checkbox>
+          )}
+        </div>
+      </form>
+      <EmailServiceSetupModal
         isOpen={popUp.setUpEmail?.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
       />

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/SessionsSection.tsx

@@ -1,44 +1,41 @@
 import { faBan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import {
-    Button
-} from "@app/components/v2";
+import { Button } from "@app/components/v2";
 import { useRevokeMySessions } from "@app/hooks/api";
 
 import { SessionsTable } from "./SessionsTable";
 
 export const SessionsSection = () => {
-    const { mutateAsync } = useRevokeMySessions();
-    
-    const onRevokeAllSessionsClick = async () => {
-        try {
-            await mutateAsync();
-            window.location.href = "/login";
-        } catch (err) {
-            console.error(err);
-        }
+  const { mutateAsync } = useRevokeMySessions();
+
+  const onRevokeAllSessionsClick = async () => {
+    try {
+      await mutateAsync();
+      window.location.href = "/login";
+    } catch (err) {
+      console.error(err);
     }
-    
-    return (
-        <div className="p-4 mb-6 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-            <div className="flex justify-between mb-8">
-                <h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
-                    Sessions
-                </h2>
-               <Button
-                    colorSchema="secondary"
-                    type="submit"
-                    leftIcon={<FontAwesomeIcon icon={faBan} />}
-                    onClick={onRevokeAllSessionsClick}
-                >
-                    Revoke all
-                </Button> 
-            </div>
-            <p className="text-gray-400 mb-8">
-                Logging into Infisical via browser or CLI creates a session. Revoking all sessions logs your account out all active sessions across all browsers and CLIs.
-            </p>
-            <SessionsTable />
-        </div>
-    );
-}
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex justify-between">
+        <h2 className="flex-1 text-xl font-semibold text-mineshaft-100">Sessions</h2>
+        <Button
+          colorSchema="secondary"
+          type="submit"
+          leftIcon={<FontAwesomeIcon icon={faBan} />}
+          onClick={onRevokeAllSessionsClick}
+        >
+          Revoke all
+        </Button>
+      </div>
+      <p className="mb-8 text-gray-400">
+        Logging into Infisical via browser or CLI creates a session. Revoking all sessions logs your
+        account out all active sessions across all browsers and CLIs.
+      </p>
+      <SessionsTable />
+    </div>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/index.tsx

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

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

@@ -13,8 +13,8 @@ const tabs = [
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
   return (
-    <div className="flex justify-center w-full h-full bg-bunker-800 text-white">
-      <div className="max-w-7xl px-6 w-full">
+    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <div className="w-full max-w-7xl px-6">
         <div className="my-6">
           <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
         </div>
@@ -25,7 +25,7 @@ export const ProjectSettingsPage = () => {
                 {({ 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/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx

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

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

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

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

@@ -1,3 +1 @@
-export {
-    E2EESection
-} from "./E2EESection";
+export { E2EESection } from "./E2EESection";

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectGeneralTab/index.tsx

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

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

@@ -12,7 +12,11 @@ import { useRenameWorkspace } from "@app/hooks/api";
 import { CopyButton } from "./CopyButton";
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name").max(64, "Too long, maximum length is 64 characters"),
+  name: yup
+    .string()
+    .required()
+    .label("Project Name")
+    .max(64, "Too long, maximum length is 64 characters")
 });
 
 type FormData = yup.InferType<typeof formSchema>;

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

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

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

@@ -3,4 +3,4 @@ export { DeleteProjectSection } from "./DeleteProjectSection";
 export { E2EESection } from "./E2EESection";
 export { EnvironmentSection } from "./EnvironmentSection";
 export { ProjectNameChangeSection } from "./ProjectNameChangeSection";
-export { SecretTagsSection } from "./SecretTagsSection";
+export { SecretTagsSection } from "./SecretTagsSection";