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

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

@@ -14,10 +14,10 @@ export const AutoCapitalizationSection = () => {
 
   const handleToggleCapitalizationToggle = async (state: boolean) => {
     try {
-      if (!currentWorkspace?._id) return;
+      if (!currentWorkspace?.id) return;
 
       await mutateAsync({
-        workspaceID: currentWorkspace._id,
+        workspaceID: currentWorkspace.id,
         state
       });
 
@@ -36,7 +36,7 @@ export const AutoCapitalizationSection = () => {
   };
 
   return (
-    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <p className="mb-3 text-xl font-semibold">{t("settings.project.auto-capitalization")}</p>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
         {(isAllowed) => (

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

@@ -2,10 +2,7 @@ import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { 
-  Button, 
-  DeleteActionModal,
-} from "@app/components/v2";
+import { Button, DeleteActionModal } from "@app/components/v2";
 import {
   ProjectPermissionActions,
   ProjectPermissionSub,
@@ -19,30 +16,30 @@ import { usePopUp } from "@app/hooks/usePopUp";
 export const DeleteProjectSection = () => {
   const router = useRouter();
   const { createNotification } = useNotificationContext();
-  const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "deleteWorkspace"
-] as const);
+  ] as const);
 
   const { currentOrg } = useOrganization();
   const { currentWorkspace } = useWorkspace();
   const [isDeleting, setIsDeleting] = useToggle();
   const deleteWorkspace = useDeleteWorkspace();
-  
+
   const handleDeleteWorkspaceSubmit = async () => {
     setIsDeleting.on();
     try {
-      if (!currentWorkspace?._id) return;
-      
+      if (!currentWorkspace?.id) return;
+
       await deleteWorkspace.mutateAsync({
-        workspaceID: currentWorkspace?._id
+        workspaceID: currentWorkspace?.id
       });
-      
+
       createNotification({
         text: "Successfully deleted project",
         type: "success"
       });
-      
-      router.push(`/org/${currentOrg?._id}/overview`);
+
+      router.push(`/org/${currentOrg?.id}/overview`);
       handlePopUpClose("deleteWorkspace");
     } catch (err) {
       console.error(err);
@@ -53,36 +50,34 @@ export const DeleteProjectSection = () => {
     } finally {
       setIsDeleting.off();
     }
-  }
+  };
 
   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>
-        <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Workspace}>
-          {(isAllowed) => (
-            <Button
-                isLoading={isDeleting}
-                isDisabled={!isAllowed || isDeleting}
-                colorSchema="danger"
-                variant="outline_bg"
-                type="submit"
-                onClick={() => handlePopUpOpen("deleteWorkspace")}
-            >
-                {`Delete ${currentWorkspace?.name}`}
-            </Button>
-          )}
-        </ProjectPermissionCan>
-        <DeleteActionModal
-            isOpen={popUp.deleteWorkspace.isOpen}
-            title="Are you sure want to delete this project?"
-            subTitle={`Permanently delete ${currentWorkspace?.name} and all of its data. This action is not reversible, so please be careful.`}
-            onChange={(isOpen) => handlePopUpToggle("deleteWorkspace", isOpen)}
-            deleteKey="confirm"
-            buttonText="Delete Project"
-            onDeleteApproved={handleDeleteWorkspaceSubmit}
-        />
+    <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>
+      <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Workspace}>
+        {(isAllowed) => (
+          <Button
+            isLoading={isDeleting}
+            isDisabled={!isAllowed || isDeleting}
+            colorSchema="danger"
+            variant="outline_bg"
+            type="submit"
+            onClick={() => handlePopUpOpen("deleteWorkspace")}
+          >
+            {`Delete ${currentWorkspace?.name}`}
+          </Button>
+        )}
+      </ProjectPermissionCan>
+      <DeleteActionModal
+        isOpen={popUp.deleteWorkspace.isOpen}
+        title="Are you sure want to delete this project?"
+        subTitle={`Permanently delete ${currentWorkspace?.name} and all of its data. This action is not reversible, so please be careful.`}
+        onChange={(isOpen) => handlePopUpToggle("deleteWorkspace", isOpen)}
+        deleteKey="confirm"
+        buttonText="Delete Project"
+        onDeleteApproved={handleDeleteWorkspaceSubmit}
+      />
     </div>
   );
 };

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

@@ -9,9 +9,9 @@ import { useGetUserWsKey, useGetWorkspaceBot, useUpdateBotActiveStatus } from "@
 
 export const E2EESection = () => {
   const { currentWorkspace } = useWorkspace();
-  const { data: bot } = useGetWorkspaceBot(currentWorkspace?._id ?? "");
+  const { data: bot } = useGetWorkspaceBot(currentWorkspace?.id ?? "");
   const { mutateAsync: updateBotActiveStatus } = useUpdateBotActiveStatus();
-  const { data: wsKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
+  const { data: wsKey } = useGetUserWsKey(currentWorkspace?.id ?? "");
 
   /**
    * Activate bot for project by performing the following steps:
@@ -23,7 +23,7 @@ export const E2EESection = () => {
   const toggleBotActivate = async () => {
     let botKey;
     try {
-      if (!currentWorkspace?._id) return;
+      if (!currentWorkspace?.id) return;
 
       if (bot && wsKey) {
         // case: there is a bot
@@ -56,17 +56,17 @@ export const E2EESection = () => {
           };
 
           await updateBotActiveStatus({
-            workspaceId: currentWorkspace._id,
+            workspaceId: currentWorkspace.id,
             botKey,
             isActive: true,
-            botId: bot._id
+            botId: bot.id
           });
         } else {
           // bot is active -> deactivate bot
           await updateBotActiveStatus({
             isActive: false,
-            botId: bot._id,
-            workspaceId: currentWorkspace._id
+            botId: bot.id,
+            workspaceId: currentWorkspace.id
           });
         }
       }

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

@@ -3,21 +3,15 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-  Button,
-  FormControl,
-  Input,
-  Modal,
-  ModalContent,
-} from "@app/components/v2";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useCreateWsEnvironment } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
-    popUp: UsePopUpState<["createEnv"]>;
-    handlePopUpClose: (popUpName: keyof UsePopUpState<["createEnv"]>) => void;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["createEnv"]>, state?: boolean) => void;
+  popUp: UsePopUpState<["createEnv"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["createEnv"]>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["createEnv"]>, state?: boolean) => void;
 };
 
 const schema = yup.object({
@@ -27,106 +21,95 @@ const schema = yup.object({
 
 export type FormData = yup.InferType<typeof schema>;
 
-export const AddEnvironmentModal = ({
-    popUp,
-    handlePopUpClose,
-    handlePopUpToggle
-}: Props) => {
+export const AddEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
   const { createNotification } = useNotificationContext();
   const { currentWorkspace } = useWorkspace();
-    const { mutateAsync, isLoading } = useCreateWsEnvironment();
-    const {
-        control,
-        handleSubmit,
-        reset
-    } = useForm<FormData>({
-        resolver: yupResolver(schema)
-    });
+  const { mutateAsync, isLoading } = useCreateWsEnvironment();
+  const { control, handleSubmit, reset } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
 
-    const onFormSubmit = async ({
+  const onFormSubmit = async ({ environmentName, environmentSlug }: FormData) => {
+    try {
+      if (!currentWorkspace?.id) return;
+
+      await mutateAsync({
+        workspaceID: currentWorkspace.id,
         environmentName,
         environmentSlug
-    }: FormData) => {
-        try {
-            if (!currentWorkspace?._id) return;
+      });
 
-            await mutateAsync({ 
-                workspaceID: currentWorkspace._id, 
-                environmentName, 
-                environmentSlug 
-            });
+      createNotification({
+        text: "Successfully created environment",
+        type: "success"
+      });
 
-            createNotification({
-                text: "Successfully created environment",
-                type: "success"
-            });
-        
-            handlePopUpClose("createEnv");
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to create environment",
-                type: "error"
-            });
-        }
-    };
+      handlePopUpClose("createEnv");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create environment",
+        type: "error"
+      });
+    }
+  };
 
-    return (
-        <Modal
-            isOpen={popUp?.createEnv?.isOpen}
-            onOpenChange={(isOpen) => {
-                handlePopUpToggle("createEnv", isOpen);
-                reset();
-            }}
-        >
-            <ModalContent title="Create a new environment">
-                <form onSubmit={handleSubmit(onFormSubmit)}>
-                    <Controller
-                        control={control}
-                        defaultValue=""
-                        name="environmentName"
-                        render={({ field, fieldState: { error } }) => (
-                        <FormControl
-                            label="Environment Name"
-                            isError={Boolean(error)}
-                            errorText={error?.message}
-                        >
-                        <Input {...field} />
-                        </FormControl>
-                    )}
-                    />
-                    <Controller
-                        control={control}
-                        defaultValue=""
-                        name="environmentSlug"
-                        render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                                label="Environment Slug"
-                                helperText="Slugs are shorthands used in cli to access environment"
-                                isError={Boolean(error)}
-                                errorText={error?.message}
-                            >
-                            <Input {...field} />
-                            </FormControl>
-                        )}
-                    />
-                    <div className="mt-8 flex items-center">
-                        <Button
-                            className="mr-4"
-                            size="sm"
-                            type="submit"
-                            isLoading={isLoading}
-                            isDisabled={isLoading}
-                        >
-                            Create
-                        </Button>
+  return (
+    <Modal
+      isOpen={popUp?.createEnv?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("createEnv", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Create a new environment">
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="environmentName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Environment Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="environmentSlug"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Environment Slug"
+                helperText="Slugs are shorthands used in cli to access environment"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isLoading}
+              isDisabled={isLoading}
+            >
+              Create
+            </Button>
 
-                        <Button colorSchema="secondary" variant="plain">
-                            Cancel
-                        </Button>
-                    </div>
-                </form>
-            </ModalContent>
-        </Modal>
-    );
-}
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -40,10 +40,10 @@ export const EnvironmentSection = () => {
 
   const onEnvDeleteSubmit = async (environmentSlug: string) => {
     try {
-      if (!currentWorkspace?._id) return;
+      if (!currentWorkspace?.id) return;
 
       await deleteWsEnvironment.mutateAsync({
-        workspaceID: currentWorkspace._id,
+        workspaceID: currentWorkspace.id,
         environmentSlug
       });
 
@@ -63,8 +63,8 @@ export const EnvironmentSection = () => {
   };
 
   return (
-    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-      <div className="flex justify-between mb-8">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">Environments</p>
         <div>
           <ProjectPermissionCan
@@ -90,7 +90,7 @@ export const EnvironmentSection = () => {
           </ProjectPermissionCan>
         </div>
       </div>
-      <p className="text-gray-400 mb-8">
+      <p className="mb-8 text-gray-400">
         Choose which environments will show up in your dashboard like development, staging,
         production
       </p>

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

@@ -39,7 +39,7 @@ export const EnvironmentTable = ({ handlePopUpOpen }: Props) => {
 
   const handleReorderEnv = async (shouldMoveUp: boolean, name: string, slug: string) => {
     try {
-      if (!currentWorkspace?._id) return;
+      if (!currentWorkspace?.id) return;
 
       const indexOfEnv = currentWorkspace.environments.findIndex(
         (env) => env.name === name && env.slug === slug
@@ -56,7 +56,7 @@ export const EnvironmentTable = ({ handlePopUpOpen }: Props) => {
       const indexToSwap = shouldMoveUp ? indexOfEnv - 1 : indexOfEnv + 1;
 
       await reorderWsEnvironment.mutateAsync({
-        workspaceID: currentWorkspace._id,
+        workspaceID: currentWorkspace.id,
         environmentSlug: slug,
         environmentName: name,
         otherEnvironmentSlug: currentWorkspace.environments[indexToSwap].slug,

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

@@ -3,21 +3,15 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-  Button,
-  FormControl,
-  Input,
-  Modal,
-  ModalContent,
-} from "@app/components/v2";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useUpdateWsEnvironment } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
-    popUp: UsePopUpState<["updateEnv"]>;
-    handlePopUpClose: (popUpName: keyof UsePopUpState<["updateEnv"]>) => void;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["updateEnv"]>, state?: boolean) => void;
+  popUp: UsePopUpState<["updateEnv"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["updateEnv"]>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["updateEnv"]>, state?: boolean) => void;
 };
 
 const schema = yup.object({
@@ -27,109 +21,98 @@ const schema = yup.object({
 
 export type FormData = yup.InferType<typeof schema>;
 
-export const UpdateEnvironmentModal = ({
-    popUp,
-    handlePopUpClose,
-    handlePopUpToggle
-}: Props) => {
+export const UpdateEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
   const { createNotification } = useNotificationContext();
   const { currentWorkspace } = useWorkspace();
-    const { mutateAsync, isLoading } = useUpdateWsEnvironment();
-    const {
-        control,
-        handleSubmit,
-        reset
-    } = useForm<FormData>({
-        resolver: yupResolver(schema)
-    });
+  const { mutateAsync, isLoading } = useUpdateWsEnvironment();
+  const { control, handleSubmit, reset } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
 
-    const oldEnvironmentSlug = (popUp?.updateEnv?.data as { slug: string })?.slug;
-    
-    const onFormSubmit = async ({
+  const oldEnvironmentSlug = (popUp?.updateEnv?.data as { slug: string })?.slug;
+
+  const onFormSubmit = async ({ environmentName, environmentSlug }: FormData) => {
+    try {
+      if (!currentWorkspace?.id) return;
+
+      await mutateAsync({
+        workspaceID: currentWorkspace.id,
         environmentName,
-        environmentSlug
-    }: FormData) => {
-        try {
-            if (!currentWorkspace?._id) return;
-            
-            await mutateAsync({
-                workspaceID: currentWorkspace._id,
-                environmentName,
-                environmentSlug,
-                oldEnvironmentSlug
-            });
+        environmentSlug,
+        oldEnvironmentSlug
+      });
 
-            createNotification({
-                text: "Successfully updated environment",
-                type: "success"
-            });
-        
-            handlePopUpClose("updateEnv");
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to update environment",
-                type: "error"
-            });
-        }
-    };
+      createNotification({
+        text: "Successfully updated environment",
+        type: "success"
+      });
 
-    return (
-        <Modal
-            isOpen={popUp?.updateEnv?.isOpen}
-            onOpenChange={(isOpen) => {
-                handlePopUpToggle("updateEnv", isOpen);
-                reset();
-            }}
-        >
-            <ModalContent title="Update environment">
-                <form onSubmit={handleSubmit(onFormSubmit)}>
-                    <Controller
-                        control={control}
-                        defaultValue=""
-                        name="environmentName"
-                        render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                            label="Environment Name"
-                            isError={Boolean(error)}
-                            errorText={error?.message}
-                            >
-                            <Input {...field} />
-                            </FormControl>
-                        )}
-                    />
-                    <Controller
-                        control={control}
-                        defaultValue=""
-                        name="environmentSlug"
-                        render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                            label="Environment Slug"
-                            helperText="Slugs are shorthands used in cli to access environment"
-                            isError={Boolean(error)}
-                            errorText={error?.message}
-                            >
-                            <Input {...field} />
-                            </FormControl>
-                        )}
-                    />
-                    <div className="mt-8 flex items-center">
-                        <Button
-                            className="mr-4"
-                            size="sm"
-                            type="submit"
-                            isLoading={isLoading}
-                            isDisabled={isLoading}
-                        >
-                            Update
-                        </Button>
+      handlePopUpClose("updateEnv");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to update environment",
+        type: "error"
+      });
+    }
+  };
 
-                        <Button colorSchema="secondary" variant="plain">
-                            Cancel
-                        </Button>
-                    </div>
-                </form>
-            </ModalContent>
-        </Modal>
-    );
-}
+  return (
+    <Modal
+      isOpen={popUp?.updateEnv?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("updateEnv", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Update environment">
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="environmentName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Environment Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="environmentSlug"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Environment Slug"
+                helperText="Slugs are shorthands used in cli to access environment"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isLoading}
+              isDisabled={isLoading}
+            >
+              Update
+            </Button>
+
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -32,10 +32,10 @@ export const ProjectNameChangeSection = () => {
 
   const onFormSubmit = async ({ name }: FormData) => {
     try {
-      if (!currentWorkspace?._id) return;
+      if (!currentWorkspace?.id) return;
 
       await mutateAsync({
-        workspaceID: currentWorkspace._id,
+        workspaceID: currentWorkspace.id,
         newWorkspaceName: name
       });
 
@@ -55,9 +55,9 @@ export const ProjectNameChangeSection = () => {
   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"
     >
-      <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">Project Name</h2>
+      <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Name</h2>
       <div className="max-w-md">
         <Controller
           defaultValue=""

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

@@ -3,120 +3,108 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-  Button,
-  FormControl,
-  Input,
-  Modal,
-  ModalClose,
-  ModalContent
-} from "@app/components/v2";
+import { Button, FormControl, Input, Modal, ModalClose, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useCreateWsTag } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup.object({
-    name: yup.string().required().label("Tag Name")
+  name: yup.string().required().label("Tag Name")
 });
 
 export type FormData = yup.InferType<typeof schema>;
 
 type Props = {
-    popUp: UsePopUpState<["CreateSecretTag", "deleteTagConfirmation"]>;
-    handlePopUpClose: (popUpName: keyof UsePopUpState<["CreateSecretTag", "deleteTagConfirmation"]>) => void;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["CreateSecretTag", "deleteTagConfirmation"]>, state?: boolean) => void;
+  popUp: UsePopUpState<["CreateSecretTag", "deleteTagConfirmation"]>;
+  handlePopUpClose: (
+    popUpName: keyof UsePopUpState<["CreateSecretTag", "deleteTagConfirmation"]>
+  ) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["CreateSecretTag", "deleteTagConfirmation"]>,
+    state?: boolean
+  ) => void;
 };
 
-export const AddSecretTagModal = ({
-    popUp,
-    handlePopUpClose,
-    handlePopUpToggle
-}: Props) => {
-    const { createNotification } = useNotificationContext();
-    const { currentWorkspace }= useWorkspace();
-    const createWsTag = useCreateWsTag();
-    const {
-        control,
-        reset,
-        handleSubmit,
-        formState: { isSubmitting }
-    } = useForm<FormData>({
-        resolver: yupResolver(schema)
-    });
-  
-    const onFormSubmit = async ({
-        name
-    }: FormData) => {
-        try {
-            if (!currentWorkspace?._id) return;
+export const AddSecretTagModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+  const { createNotification } = useNotificationContext();
+  const { currentWorkspace } = useWorkspace();
+  const createWsTag = useCreateWsTag();
+  const {
+    control,
+    reset,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
 
-            await createWsTag.mutateAsync({
-                workspaceID: currentWorkspace?._id,
-                tagName: name,
-                tagSlug: name.replace(/\s+/g, " ").replace(" ", "_"),
-                tagColor: ""
-            });
+  const onFormSubmit = async ({ name }: FormData) => {
+    try {
+      if (!currentWorkspace?.id) return;
 
-            handlePopUpClose("CreateSecretTag");
+      await createWsTag.mutateAsync({
+        workspaceID: currentWorkspace?.id,
+        tagName: name,
+        tagSlug: name.replace(/\s+/g, " ").replace(" ", "_"),
+        tagColor: ""
+      });
 
-            createNotification({
-                text: "Successfully created a tag",
-                type: "success"
-            });
-            reset()
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to create a tag",
-                type: "error"
-            });
-        }
+      handlePopUpClose("CreateSecretTag");
+
+      createNotification({
+        text: "Successfully created a tag",
+        type: "success"
+      });
+      reset();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create a tag",
+        type: "error"
+      });
     }
+  };
 
-    return (
-        <Modal
-            isOpen={popUp?.CreateSecretTag?.isOpen}
-            onOpenChange={(open) => {
-                handlePopUpToggle("CreateSecretTag", open);
-                reset();
-            }}
-        >
-            <ModalContent
-                title={`Add a tag for ${currentWorkspace?.name ?? ""}`}
-                subTitle="Specify your tag name, and the slug will be created automatically."
+  return (
+    <Modal
+      isOpen={popUp?.CreateSecretTag?.isOpen}
+      onOpenChange={(open) => {
+        handlePopUpToggle("CreateSecretTag", open);
+        reset();
+      }}
+    >
+      <ModalContent
+        title={`Add a tag for ${currentWorkspace?.name ?? ""}`}
+        subTitle="Specify your tag name, and the slug will be created automatically."
+      >
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            name="name"
+            defaultValue=""
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Tag Name" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="Type your tag name" />
+              </FormControl>
+            )}
+          />
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              type="submit"
+              isDisabled={isSubmitting}
+              isLoading={isSubmitting}
             >
-                <form onSubmit={handleSubmit(onFormSubmit)}>
-                    <Controller
-                        control={control}
-                        name="name"
-                        defaultValue=""
-                        render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                                label="Tag Name"
-                                isError={Boolean(error)}
-                                errorText={error?.message}
-                            >
-                                <Input {...field} placeholder="Type your tag name" />
-                            </FormControl>
-                        )}
-                    />
-                    <div className="mt-8 flex items-center">
-                        <Button
-                            className="mr-4"
-                            type="submit"
-                            isDisabled={isSubmitting}
-                            isLoading={isSubmitting}
-                        >
-                            Create
-                        </Button>
-                        <ModalClose asChild>
-                            <Button variant="plain" colorSchema="secondary">
-                                Cancel
-                            </Button>
-                        </ModalClose>
-                    </div>
-                </form>
-            </ModalContent>
-        </Modal>
-    );
-}
+              Create
+            </Button>
+            <ModalClose asChild>
+              <Button variant="plain" colorSchema="secondary">
+                Cancel
+              </Button>
+            </ModalClose>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -33,7 +33,7 @@ type Props = {
 
 export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
   const { currentWorkspace } = useWorkspace();
-  const { data, isLoading } = useGetWsTags(currentWorkspace?._id ?? "");
+  const { data, isLoading } = useGetWsTags(currentWorkspace?.id ?? "");
 
   return (
     <TableContainer className="mt-4">
@@ -49,7 +49,7 @@ export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
           {isLoading && <TableSkeleton columns={3} innerKey="secret-tags" />}
           {!isLoading &&
             data &&
-            data.map(({ _id, name, slug }) => (
+            data.map(({ id, name, slug }) => (
               <Tr key={name}>
                 <Td>{name}</Td>
                 <Td>{slug}</Td>
@@ -63,7 +63,7 @@ export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
                         onClick={() =>
                           handlePopUpOpen("deleteTagConfirmation", {
                             name,
-                            id: _id
+                            id
                           })
                         }
                         colorSchema="danger"

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

@@ -36,7 +36,7 @@ export const WebhooksTab = withProjectPermission(
     const { t } = useTranslation();
     const { createNotification } = useNotificationContext();
     const { currentWorkspace } = useWorkspace();
-    const workspaceId = currentWorkspace?._id || "";
+    const workspaceId = currentWorkspace?.id || "";
     const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
       "addWebhook",
       "deleteWebhook"
@@ -182,7 +182,7 @@ export const WebhooksTab = withProjectPermission(
                 {!isWebhooksLoading &&
                   webhooks?.map(
                     ({
-                      _id: id,
+                      id,
                       url,
                       environment,
                       secretPath,