feat(infisical-pg): changed frontend api types _id to normal id

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

@@ -82,9 +82,9 @@ export const OrgSSOSection = (): JSX.Element => {
   };
 
   return (
-    <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-      <div className="flex items-center mb-8">
-        <h2 className="text-xl font-semibold flex-1 text-white">SAML SSO Configuration</h2>
+    <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">SAML SSO Configuration</h2>
         {!isLoading && (
           <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
             {(isAllowed) => (
@@ -117,24 +117,24 @@ export const OrgSSOSection = (): JSX.Element => {
         </div>
       )}
       <div className="mb-4">
-        <h3 className="text-mineshaft-400 text-sm">SSO identifier</h3>
-        <p className="text-gray-400 text-md">{data && data.id !== "" ? data.id : "-"}</p>
+        <h3 className="text-sm text-mineshaft-400">SSO identifier</h3>
+        <p className="text-md text-gray-400">{data && data.id !== "" ? data.id : "-"}</p>
       </div>
       <div className="mb-4">
-        <h3 className="text-mineshaft-400 text-sm">Type</h3>
-        <p className="text-gray-400 text-md">
+        <h3 className="text-sm text-mineshaft-400">Type</h3>
+        <p className="text-md text-gray-400">
           {data && data.authProvider !== "" ? ssoAuthProviderMap[data.authProvider] : "-"}
         </p>
       </div>
       <div className="mb-4">
-        <h3 className="text-mineshaft-400 text-sm">Entrypoint</h3>
-        <p className="text-gray-400 text-md">
+        <h3 className="text-sm text-mineshaft-400">Entrypoint</h3>
+        <p className="text-md text-gray-400">
           {data && data.entryPoint !== "" ? data.entryPoint : "-"}
         </p>
       </div>
       <div className="mb-4">
-        <h3 className="text-mineshaft-400 text-sm">Issuer</h3>
-        <p className="text-gray-400 text-md">{data && data.issuer !== "" ? data.issuer : "-"}</p>
+        <h3 className="text-sm text-mineshaft-400">Issuer</h3>
+        <p className="text-md text-gray-400">{data && data.issuer !== "" ? data.issuer : "-"}</p>
       </div>
       <SSOModal
         popUp={popUp}

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

@@ -1,44 +1,43 @@
 import { useEffect } from "react";
-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 {
-    Button,
-    FormControl,
-    Input,
-    Modal,
-    ModalContent,
-    Select,
-    SelectItem,
-    TextArea} from "@app/components/v2";
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  TextArea
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
-import {
-    useCreateSSOConfig,
-    useGetSSOConfig,
-    useUpdateSSOConfig
-} from "@app/hooks/api";
+import { useCreateSSOConfig, useGetSSOConfig, useUpdateSSOConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 enum AuthProvider {
-    OKTA_SAML = "okta-saml",
-    AZURE_SAML = "azure-saml",
-    JUMPCLOUD_SAML = "jumpcloud-saml"
+  OKTA_SAML = "okta-saml",
+  AZURE_SAML = "azure-saml",
+  JUMPCLOUD_SAML = "jumpcloud-saml"
 }
 
 const ssoAuthProviders = [
-    { label: "Okta SAML", value: AuthProvider.OKTA_SAML },
-    { label: "Azure SAML", value: AuthProvider.AZURE_SAML },
-    { label: "JumpCloud SAML", value: AuthProvider.JUMPCLOUD_SAML }
+  { label: "Okta SAML", value: AuthProvider.OKTA_SAML },
+  { label: "Azure SAML", value: AuthProvider.AZURE_SAML },
+  { label: "JumpCloud SAML", value: AuthProvider.JUMPCLOUD_SAML }
 ];
 
-const schema = yup.object({
+const schema = yup
+  .object({
     authProvider: yup.string().required("SSO Type is required"),
     entryPoint: yup.string().required("IdP entrypoint is required"),
     issuer: yup.string().required("Issuer string is required"),
     cert: yup.string().required("IdP's public signing certificate is required")
-}).required();
+  })
+  .required();
 
 export type AddSSOFormData = yup.InferType<typeof schema>;
 
@@ -48,243 +47,221 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addSSO"]>, state?: boolean) => void;
 };
 
-export const SSOModal = ({
-    popUp,
-    handlePopUpClose,
-    handlePopUpToggle
-}: Props) => {
-    const { currentOrg } = useOrganization();
-    const { createNotification } = useNotificationContext();
-    const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateSSOConfig();
-    const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateSSOConfig();
-    const { data } = useGetSSOConfig(currentOrg?.id ?? "");
-    
-    const {
-        control,
-        handleSubmit,
-        reset,
-        watch,
-    } = useForm<AddSSOFormData>({
-        defaultValues: {
-            authProvider: AuthProvider.OKTA_SAML
-        },
-        resolver: yupResolver(schema)
-    });
-    
-    useEffect(() => {
-        if (data) {
-            reset({
-                authProvider: data?.authProvider ?? "",
-                entryPoint: data?.entryPoint ?? "",
-                issuer: data?.issuer ?? "",
-                cert: data?.cert ?? ""
-            });
-        }
-    }, [data]);
-    
-    const onSSOModalSubmit = async ({
-        authProvider,
-        entryPoint,
-        issuer,
-        cert
-    }: AddSSOFormData) => {
-        try {
-            if (!currentOrg) return;
-            
-            if (!data) {
-                await createMutateAsync({
-                    organizationId: currentOrg.id,
-                    authProvider,
-                    isActive: false,
-                    entryPoint,
-                    issuer,
-                    cert
-                });
-            } else {
-                await updateMutateAsync({
-                    organizationId: currentOrg.id,
-                    authProvider,
-                    isActive: false,
-                    entryPoint,
-                    issuer,
-                    cert
-                });
-            }
+export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+  const { currentOrg } = useOrganization();
+  const { createNotification } = useNotificationContext();
+  const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateSSOConfig();
+  const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateSSOConfig();
+  const { data } = useGetSSOConfig(currentOrg?.id ?? "");
 
-            handlePopUpClose("addSSO");
+  const { control, handleSubmit, reset, watch } = useForm<AddSSOFormData>({
+    defaultValues: {
+      authProvider: AuthProvider.OKTA_SAML
+    },
+    resolver: yupResolver(schema)
+  });
 
-            createNotification({
-                text: `Successfully ${!data ? "added" : "updated"} SAML SSO configuration`,
-                type: "success"
-            });
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: `Failed to ${!data ? "add" : "update"} SAML SSO configuration`,
-                type: "error"
-            });
-        }
+  useEffect(() => {
+    if (data) {
+      reset({
+        authProvider: data?.authProvider ?? "",
+        entryPoint: data?.entryPoint ?? "",
+        issuer: data?.issuer ?? "",
+        cert: data?.cert ?? ""
+      });
     }
+  }, [data]);
 
-    const renderLabels = (authProvider: string) => {
-        switch (authProvider){
-            case AuthProvider.OKTA_SAML:
-                return ({
-                    acsUrl: "Single sign-on URL",
-                    entityId: "Audience URI (SP Entity ID)",
-                    entryPoint: "Identity Provider Single Sign-On URL",
-                    entryPointPlaceholder: "https://your-domain.okta.com/app/app-name/xxx/sso/saml",
-                    issuer: "Identity Provider Issuer",
-                    issuerPlaceholder: "http://www.okta.com/xxx"
-                });
-            case AuthProvider.AZURE_SAML:
-                return ({
-                    acsUrl: "Reply URL (Assertion Consumer Service URL)",
-                    entityId: "Identifier (Entity ID)",
-                    entryPoint: "Login URL",
-                    entryPointPlaceholder: "https://login.microsoftonline.com/xxx/saml2",
-                    issuer: "Azure Application ID",
-                    issuerPlaceholder: "abc-def-ghi-jkl-mno"
-                });
-            case AuthProvider.JUMPCLOUD_SAML:
-                return ({
-                    acsUrl: "ACS URL",
-                    entityId: "SP Entity ID",
-                    entryPoint: "IDP URL",
-                    entryPointPlaceholder: "https://sso.jumpcloud.com/saml2/xxx",
-                    issuer: "IdP Entity ID",
-                    issuerPlaceholder: "xxx"
-                });
-                
-            default:
-                return ({
-                    acsUrl: "ACS URL",
-                    entityId: "Entity ID",
-                    entryPoint: "Entrypoint",
-                    entryPointPlaceholder: "Enter entrypoint...",
-                    issuer: "Issuer",
-                    issuerPlaceholder: "Enter placeholder..."
-                });
-        }
+  const onSSOModalSubmit = async ({ authProvider, entryPoint, issuer, cert }: AddSSOFormData) => {
+    try {
+      if (!currentOrg) return;
+
+      if (!data) {
+        await createMutateAsync({
+          organizationId: currentOrg.id,
+          authProvider,
+          isActive: false,
+          entryPoint,
+          issuer,
+          cert
+        });
+      } else {
+        await updateMutateAsync({
+          organizationId: currentOrg.id,
+          authProvider,
+          isActive: false,
+          entryPoint,
+          issuer,
+          cert
+        });
+      }
+
+      handlePopUpClose("addSSO");
+
+      createNotification({
+        text: `Successfully ${!data ? "added" : "updated"} SAML SSO configuration`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${!data ? "add" : "update"} SAML SSO configuration`,
+        type: "error"
+      });
     }
-    
-    const authProvider = watch("authProvider");
+  };
 
-    return (
-        <Modal
-            isOpen={popUp?.addSSO?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("addSSO", isOpen);
-                reset();
-            }}
-        >
-            <ModalContent title="Add SSO">
-                <form onSubmit={handleSubmit(onSSOModalSubmit)}>
-                    <Controller
-                        control={control}
-                        name="authProvider"
-                        defaultValue="okta-saml"
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                            <FormControl
-                                label="Type"
-                                errorText={error?.message}
-                                isError={Boolean(error)}
-                            >
-                                <Select
-                                    defaultValue={field.value}
-                                    {...field}
-                                    onValueChange={(e) => onChange(e)}
-                                    className="w-full"
-                                >
-                                    {ssoAuthProviders.map(({ label, value }) => (
-                                        <SelectItem value={String(value || "")} key={label}>
-                                            {label}
-                                        </SelectItem>
-                                    ))}
-                                </Select>
-                            </FormControl>
-                        )}
+  const renderLabels = (authProvider: string) => {
+    switch (authProvider) {
+      case AuthProvider.OKTA_SAML:
+        return {
+          acsUrl: "Single sign-on URL",
+          entityId: "Audience URI (SP Entity ID)",
+          entryPoint: "Identity Provider Single Sign-On URL",
+          entryPointPlaceholder: "https://your-domain.okta.com/app/app-name/xxx/sso/saml",
+          issuer: "Identity Provider Issuer",
+          issuerPlaceholder: "http://www.okta.com/xxx"
+        };
+      case AuthProvider.AZURE_SAML:
+        return {
+          acsUrl: "Reply URL (Assertion Consumer Service URL)",
+          entityId: "Identifier (Entity ID)",
+          entryPoint: "Login URL",
+          entryPointPlaceholder: "https://login.microsoftonline.com/xxx/saml2",
+          issuer: "Azure Application ID",
+          issuerPlaceholder: "abc-def-ghi-jkl-mno"
+        };
+      case AuthProvider.JUMPCLOUD_SAML:
+        return {
+          acsUrl: "ACS URL",
+          entityId: "SP Entity ID",
+          entryPoint: "IDP URL",
+          entryPointPlaceholder: "https://sso.jumpcloud.com/saml2/xxx",
+          issuer: "IdP Entity ID",
+          issuerPlaceholder: "xxx"
+        };
+
+      default:
+        return {
+          acsUrl: "ACS URL",
+          entityId: "Entity ID",
+          entryPoint: "Entrypoint",
+          entryPointPlaceholder: "Enter entrypoint...",
+          issuer: "Issuer",
+          issuerPlaceholder: "Enter placeholder..."
+        };
+    }
+  };
+
+  const authProvider = watch("authProvider");
+
+  return (
+    <Modal
+      isOpen={popUp?.addSSO?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addSSO", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Add SSO">
+        <form onSubmit={handleSubmit(onSSOModalSubmit)}>
+          <Controller
+            control={control}
+            name="authProvider"
+            defaultValue="okta-saml"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl label="Type" errorText={error?.message} isError={Boolean(error)}>
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {ssoAuthProviders.map(({ label, value }) => (
+                    <SelectItem value={String(value || "")} key={label}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          {authProvider && data && (
+            <>
+              <div className="mb-4">
+                <h3 className="text-sm text-mineshaft-400">{renderLabels(authProvider).acsUrl}</h3>
+                <p className="text-md break-all text-gray-400">{`${window.origin}/api/v1/sso/saml2/${data._id}`}</p>
+              </div>
+              <div className="mb-4">
+                <h3 className="text-sm text-mineshaft-400">
+                  {renderLabels(authProvider).entityId}
+                </h3>
+                <p className="text-md text-gray-400">{window.origin}</p>
+              </div>
+              <Controller
+                control={control}
+                name="entryPoint"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={renderLabels(authProvider).entryPoint}
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <Input
+                      {...field}
+                      placeholder={renderLabels(authProvider).entryPointPlaceholder}
                     />
-                    {authProvider && data && (
-                        <>
-                            <div className="mb-4">
-                                <h3 className="text-mineshaft-400 text-sm">{renderLabels(authProvider).acsUrl}</h3>
-                                <p className="text-gray-400 text-md break-all">{`${window.origin}/api/v1/sso/saml2/${data.id}`}</p>
-                            </div>
-                            <div className="mb-4">
-                                <h3 className="text-mineshaft-400 text-sm">{renderLabels(authProvider).entityId}</h3>
-                                <p className="text-gray-400 text-md">{window.origin}</p>
-                            </div>
-                            <Controller
-                                control={control}
-                                name="entryPoint"
-                                render={({ field, fieldState: { error } }) => (
-                                    <FormControl
-                                        label={renderLabels(authProvider).entryPoint}
-                                        errorText={error?.message}
-                                        isError={Boolean(error)}
-                                    >
-                                        <Input 
-                                            {...field} 
-                                            placeholder={renderLabels(authProvider).entryPointPlaceholder}
-                                        />
-                                    </FormControl>
-                                )}
-                            />
-                            <Controller
-                                control={control}
-                                name="issuer"
-                                render={({ field, fieldState: { error } }) => (
-                                    <FormControl
-                                        label={renderLabels(authProvider).issuer}
-                                        errorText={error?.message}
-                                        isError={Boolean(error)}
-                                    >
-                                        <Input 
-                                            {...field} 
-                                            placeholder={renderLabels(authProvider).issuerPlaceholder}
-                                        />
-                                    </FormControl>
-                                )}
-                            />
-                            <Controller
-                                control={control}
-                                name="cert"
-                                render={({ field, fieldState: { error } }) => (
-                                    <FormControl
-                                        label="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("addSSO")}
-                        >
-                            Cancel
-                        </Button>
-                    </div>
-                </form>
-            </ModalContent>
-        </Modal>
-    );
-}
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="issuer"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={renderLabels(authProvider).issuer}
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <Input {...field} placeholder={renderLabels(authProvider).issuerPlaceholder} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="cert"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="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("addSSO")}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -45,8 +45,8 @@ export const OrgDeleteSection = () => {
   };
 
   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>
+    <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"

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

@@ -51,9 +51,9 @@ export const OrgNameChangeSection = (): JSX.Element => {
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
-      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-      <p className="text-xl font-semibold text-mineshaft-100 mb-4">Name</p>
+      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Name</p>
       <div className="mb-2 max-w-md">
         <Controller
           defaultValue=""