feat(dashboard-v3): updated ui components and hooks for new migrated apis and v3 apis

frontend/src/components/navigation/NavHeader.tsx

@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
@@ -15,7 +14,7 @@ type Props = {
   currentEnv?: string;
   userAvailableEnvs?: any[];
   onEnvChange?: (slug: string) => void;
-  folders?: Array<{ id: string; name: string }>;
+  secretPath?: string;
   isFolderMode?: boolean;
 };
 
@@ -42,19 +41,14 @@ export default function NavHeader({
   currentEnv,
   userAvailableEnvs = [],
   onEnvChange,
-  folders = [],
+  isFolderMode,
-  isFolderMode
+  secretPath = "/"
 }: Props): JSX.Element {
   const { currentWorkspace } = useWorkspace();
   const { currentOrg } = useOrganization();
   const router = useRouter();
 
-  const isInRootFolder = isFolderMode && folders.length <= 1;
+  const secretPathSegments = secretPath.split("/").filter(Boolean);
-
-  const selectedEnv = useMemo(
-    () => userAvailableEnvs?.find((uae) => uae.name === currentEnv),
-    [userAvailableEnvs, currentEnv]
-  );
 
   return (
     <div className="flex flex-row items-center pt-6">
@@ -90,13 +84,13 @@ export default function NavHeader({
       ) : (
         <div className="text-sm text-gray-400">{pageName}</div>
       )}
-      {currentEnv && isInRootFolder && (
+      {currentEnv && secretPath === "/" && (
         <>
           <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
           <div className="rounded-md pl-3 hover:bg-bunker-100/10">
             <Tooltip content="Select environment">
               <Select
-                value={selectedEnv?.slug}
+                value={currentEnv}
                 onValueChange={(value) => {
                   if (value && onEnvChange) onEnvChange(value);
                 }}
@@ -113,16 +107,36 @@ export default function NavHeader({
           </div>
         </>
       )}
+      {isFolderMode && Boolean(secretPathSegments.length) && (
+        <div className="flex items-center space-x-3">
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
+          <Link
+            passHref
+            legacyBehavior
+            href={{
+              pathname: "/project/[id]/secrets/v2/[env]",
+              query: { id: router.query.id, env: router.query.env }
+            }}
+          >
+            <a className="text-sm font-semibold text-primary/80 hover:text-primary">
+              {userAvailableEnvs?.find(({ slug }) => slug === currentEnv)?.name}
+            </a>
+          </Link>
+        </div>
+      )}
       {isFolderMode &&
-        folders?.map(({ id, name }, index) => {
+        secretPathSegments?.map((folderName, index) => {
           const query = { ...router.query };
-          if (name !== "root") query.folderId = id;
+          query.secretPath = secretPathSegments.slice(0, index + 1);
-          else delete query.folderId;
+
           return (
-            <div className="flex items-center space-x-3" key={`breadcrumb-folder-${id}`}>
+            <div
+              className="flex items-center space-x-3"
+              key={`breadcrumb-secret-path-${folderName}`}
+            >
               <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
-              {index + 1 === folders?.length ? (
+              {index + 1 === secretPathSegments?.length ? (
-                <span className="text-sm font-semibold text-bunker-300">{name}</span>
+                <span className="text-sm font-semibold text-bunker-300">{folderName}</span>
               ) : (
                 <Link
                   passHref
@@ -130,7 +144,7 @@ export default function NavHeader({
                   href={{ pathname: "/project/[id]/secrets/[env]", query }}
                 >
                   <a className="text-sm font-semibold text-primary/80 hover:text-primary">
-                    {name === "root" ? selectedEnv?.name : name}
+                    folderName
                   </a>
                 </Link>
               )}

frontend/src/components/tags/CreateTagModal/CreateTagModal.tsx

@@ -0,0 +1,266 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  Tooltip
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useCreateWsTag } from "@app/hooks/api";
+
+export const secretTagsColors = [
+  {
+    id: 1,
+    hex: "#bec2c8",
+    rgba: "rgb(128,128,128, 0.8)",
+    name: "Grey"
+  },
+  {
+    id: 2,
+    hex: "#95a2b3",
+    rgba: "rgb(0,0,255, 0.8)",
+    name: "blue"
+  },
+  {
+    id: 3,
+    hex: "#5e6ad2",
+    rgba: "rgb(128,0,128, 0.8)",
+    name: "Purple"
+  },
+  {
+    id: 4,
+    hex: "#26b5ce",
+    rgba: "rgb(0,128,128, 0.8)",
+    name: "Teal"
+  },
+  {
+    id: 5,
+    hex: "#4cb782",
+    rgba: "rgb(0,128,0, 0.8)",
+    name: "Green"
+  },
+  {
+    id: 6,
+    hex: "#f2c94c",
+    rgba: "rgb(255,255,0, 0.8)",
+    name: "Yellow"
+  },
+  {
+    id: 7,
+    hex: "#f2994a",
+    rgba: "rgb(128,128,0, 0.8)",
+    name: "Orange"
+  },
+  {
+    id: 8,
+    hex: "#f7c8c1",
+    rgba: "rgb(128,0,0, 0.8)",
+    name: "Pink"
+  },
+  {
+    id: 9,
+    hex: "#eb5757",
+    rgba: "rgb(255,0,0, 0.8)",
+    name: "Red"
+  }
+];
+
+const isValidHexColor = (hexColor: string) => {
+  const hexColorPattern = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+
+  return hexColorPattern.test(hexColor);
+};
+
+type Props = {
+  isOpen?: boolean;
+  onToggle: (isOpen: boolean) => void;
+};
+
+const createTagSchema = z.object({
+  name: z.string().trim(),
+  color: z.string().trim()
+});
+
+type FormData = z.infer<typeof createTagSchema>;
+type TagColor = {
+  id: number;
+  hex: string;
+  rgba: string;
+  name: string;
+};
+
+export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
+  const {
+    control,
+    reset,
+    watch,
+    setValue,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<FormData>({
+    resolver: zodResolver(createTagSchema)
+  });
+  const { createNotification } = useNotificationContext();
+  const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?._id || "";
+
+  const { mutateAsync: createWsTag } = useCreateWsTag();
+
+  const [showHexInput, setShowHexInput] = useState<boolean>(false);
+  const selectedTagColor = watch("color", secretTagsColors[0].hex);
+
+  useEffect(()=>{
+    if(!isOpen) reset(); 
+  },[isOpen])
+
+  const onFormSubmit = async ({ name, color }: FormData) => {
+    try {
+      await createWsTag({
+        workspaceID: workspaceId,
+        tagName: name,
+        tagColor: color,
+        tagSlug: name.replace(" ", "_")
+      });
+      onToggle(false);
+      reset();
+      createNotification({
+        text: "Successfully created a tag",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to create a tag",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onToggle}>
+      <ModalContent
+        title="Create tag"
+        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-2">
+            <div className="mb-0.5 ml-1 block text-sm font-normal text-mineshaft-400">
+              Tag Color
+            </div>
+            <div className="flex space-x-2">
+              <div className="p-2 rounded flex items-center justify-center border border-mineshaft-500 bg-mineshaft-900 ">
+                <div
+                  className="w-6 h-6 rounded-full"
+                  style={{ background: `${selectedTagColor}` }}
+                />
+              </div>
+              <div className="flex-grow flex items-center rounded border-mineshaft-500 bg-mineshaft-900 px-1 pr-2">
+                {!showHexInput ? (
+                  <div className="inline-flex gap-3 items-center pl-3">
+                    {secretTagsColors.map(($tagColor: TagColor) => {
+                      return (
+                        <div key={`tag-color-${$tagColor.id}`}>
+                          <Tooltip content={`${$tagColor.name}`}>
+                            <div
+                              className=" flex items-center justify-center w-[26px] h-[26px] hover:ring-offset-2 hover:ring-2 bg-[#bec2c8] border-2 p-2 hover:shadow-lg border-transparent hover:border-black rounded-full"
+                              key={`tag-${$tagColor.id}`}
+                              style={{ backgroundColor: `${$tagColor.hex}` }}
+                              onClick={() => setValue("color", $tagColor.hex)}
+                              tabIndex={0}
+                              role="button"
+                              onKeyDown={() => {}}
+                            >
+                              {$tagColor.hex === selectedTagColor && (
+                                <FontAwesomeIcon icon={faCheck} style={{ color: "#00000070" }} />
+                              )}
+                            </div>
+                          </Tooltip>
+                        </div>
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <div className="flex flex-grow items-center px-2 tags-hex-wrapper">
+                    <div className="flex items-center relative rounded-md ">
+                      {isValidHexColor(selectedTagColor) && (
+                        <div
+                          className="w-7 h-7 rounded-full flex items-center justify-center"
+                          style={{ background: `${selectedTagColor}` }}
+                        >
+                          <FontAwesomeIcon icon={faCheck} style={{ color: "#00000070" }} />
+                        </div>
+                      )}
+                      {!isValidHexColor(selectedTagColor) && (
+                        <div className="border-dashed border bg-blue rounded-full w-7 h-7 border-mineshaft-500" />
+                      )}
+                    </div>
+                    <div className="flex-grow">
+                      <Input
+                        variant="plain"
+                        value={selectedTagColor}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          setValue("color", e.target.value)
+                        }
+                      />
+                    </div>
+                  </div>
+                )}
+                <div className="border-mineshaft-500 border h-8 mx-4" />
+                <div className="w-7 h-7 flex items-center justify-center">
+                  <div
+                    className={`flex items-center justify-center w-7 h-7  bg-transparent cursor-pointer hover:ring-offset-1 hover:ring-2 border-mineshaft-500 border bg-mineshaft-900 rounded-sm  p-2 ${
+                      showHexInput ? "tags-conic-bg rounded-full" : ""
+                    }`}
+                    onClick={() => setShowHexInput((prev) => !prev)}
+                    style={{ border: "1px solid rgba(220, 216, 254, 0.376)" }}
+                    tabIndex={0}
+                    role="button"
+                    onKeyDown={() => {}}
+                  >
+                    {!showHexInput && <span>#</span>}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <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>
+  );
+};

frontend/src/components/tags/CreateTagModal/index.tsx

@@ -0,0 +1 @@
+export { CreateTagModal } from "./CreateTagModal";

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -30,9 +30,10 @@ export const Checkbox = ({
     <div className="flex items-center font-inter text-bunker-300">
       <CheckboxPrimitive.Root
         className={twMerge(
-          "flex items-center justify-center w-4 h-4 mr-3 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
+          "flex items-center justify-center w-4 h-4 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
           isDisabled && "bg-bunker-400 hover:bg-bunker-400",
           isChecked && "bg-primary hover:bg-primary",
+          Boolean(children) && "mr-3",
           className
         )}
         required={isRequired}

frontend/src/components/v2/ContentLoader/ContentLoader.tsx

@@ -0,0 +1,46 @@
+// this will show a loading animation with text below
+// if you pass array it will say it one by one giving user clear instruction on what's happening
+
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+type Props = {
+  text?: string | string[];
+  frequency?: number;
+};
+
+export const ContentLoader = ({ text, frequency = 2000 }: Props) => {
+  const [pos, setPos] = useState(0);
+  const isTextArray = Array.isArray(text);
+  useEffect(() => {
+    let interval: NodeJS.Timer;
+    if (isTextArray) {
+      interval = setInterval(() => {
+        setPos((state) => (state + 1) % text.length);
+      }, frequency);
+    }
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="container mx-auto flex relative flex-col h-1/2 w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark] space-y-8">
+      <div>
+        <img src="/images/loading/loading.gif" height={210} width={240} alt="loading animation" />
+      </div>
+      {text && isTextArray && (
+        <AnimatePresence>
+          <motion.div
+            className="text-primary text-sm absolute bottom-1/4"
+            key={`content-loader-${pos}`}
+            initial={{ opacity: 0, translateY: 20 }}
+            animate={{ opacity: 1, translateY: 0 }}
+            exit={{ opacity: 0, translateY: -20 }}
+          >
+            {text[pos]}
+          </motion.div>
+        </AnimatePresence>
+      )}
+      {text && !isTextArray && <div className="text-primary text-sm">{text}</div>}
+    </div>
+  );
+};

frontend/src/components/v2/ContentLoader/index.tsx

@@ -0,0 +1 @@
+export { ContentLoader } from "./ContentLoader";

frontend/src/components/v2/Dropdown/Dropdown.tsx

@@ -6,6 +6,9 @@ import { twMerge } from "tailwind-merge";
 export type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps;
 export const DropdownMenu = DropdownMenuPrimitive.Root;
 
+export type DropdownSubMenuProps = DropdownMenuPrimitive.DropdownMenuSubProps;
+export const DropdownSubMenu = DropdownMenuPrimitive.Sub;
+
 // trigger
 export type DropdownMenuTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps;
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -34,6 +37,30 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
 
 DropdownMenuContent.displayName = "DropdownMenuContent";
 
+// item container
+export type DropdownSubMenuContentProps = DropdownMenuPrimitive.MenuSubContentProps;
+export const DropdownSubMenuContent = forwardRef<HTMLDivElement, DropdownSubMenuContentProps>(
+  ({ children, className, ...props }, forwardedRef) => {
+    return (
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.SubContent
+          sideOffset={2}
+          {...props}
+          ref={forwardedRef}
+          className={twMerge(
+            "min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
+            className
+          )}
+        >
+          {children}
+        </DropdownMenuPrimitive.SubContent>
+      </DropdownMenuPrimitive.Portal>
+    );
+  }
+);
+
+DropdownSubMenuContent.displayName = "DropdownMenuContent";
+
 // item label component
 export type DropdownLabelProps = DropdownMenuPrimitive.MenuLabelProps;
 export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
@@ -76,11 +103,50 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
   </DropdownMenuPrimitive.Item>
 );
 
+// trigger
+export type DropdownSubMenuTriggerProps<T extends ElementType> =
+  DropdownMenuPrimitive.DropdownMenuSubTriggerProps & {
+    icon?: ReactNode;
+    as?: T;
+    inputRef?: Ref<T>;
+    iconPos?: "left" | "right";
+  };
+
+export const DropdownSubMenuTrigger = <T extends ElementType = "button">({
+  children,
+  inputRef,
+  className,
+  icon,
+  as: Item = "button",
+  iconPos = "left",
+  ...props
+}: DropdownMenuItemProps<T> & ComponentPropsWithRef<T>) => (
+  <DropdownMenuPrimitive.SubTrigger
+    {...props}
+    className={twMerge(
+      "text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
+      className
+    )}
+  >
+    <Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
+      {icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
+      <span className="flex-grow text-left">{children}</span>
+      {icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
+    </Item>
+  </DropdownMenuPrimitive.SubTrigger>
+);
+
 // grouping items into 1
 export type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps;
 
 export const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupProps>(
-  ({ ...props }, ref) => <DropdownMenuPrimitive.Group {...props} ref={ref} />
+  ({ ...props }, ref) => (
+    <DropdownMenuPrimitive.Group
+      {...props}
+      className={twMerge("text-xs py-2 pl-3", props.className)}
+      ref={ref}
+    />
+  )
 );
 
 DropdownMenuGroup.displayName = "DropdownMenuGroup";
@@ -98,3 +164,5 @@ export const DropdownMenuSeparator = forwardRef<
 ));
 
 DropdownMenuSeparator.displayName = "DropdownMenuSeperator";
+
+DropdownMenuSeparator.displayName = "DropdownMenuSeperator";

frontend/src/components/v2/Dropdown/index.tsx

@@ -4,7 +4,10 @@ export type {
   DropdownMenuGroupProps,
   DropdownMenuItemProps,
   DropdownMenuProps,
-  DropdownMenuTriggerProps
+  DropdownMenuTriggerProps,
+  DropdownSubMenuContentProps,
+  DropdownSubMenuProps,
+  DropdownSubMenuTriggerProps
 } from "./Dropdown";
 export {
   DropdownMenu,
@@ -13,5 +16,8 @@ export {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuTrigger
+  DropdownMenuTrigger,
+  DropdownSubMenu,
+  DropdownSubMenuContent,
+  DropdownSubMenuTrigger
 } from "./Dropdown";

frontend/src/components/v2/Menu/Menu.tsx

@@ -2,8 +2,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable global-require */
 import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from "react";
-import { motion } from "framer-motion"
+import { motion } from "framer-motion";
-import Lottie from "lottie-react"
+import Lottie from "lottie-react";
 import { twMerge } from "tailwind-merge";
 
 export type MenuProps = {
@@ -39,13 +39,10 @@ export const MenuItem = <T extends ElementType = "button">({
   inputRef,
   ...props
 }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
-  const iconRef = useRef()
+  const iconRef = useRef();
 
-  return( 
+  return (
-    <a 
+    <a onMouseEnter={() => iconRef.current?.play()} onMouseLeave={() => iconRef.current?.stop()}>
-      onMouseEnter={() => iconRef.current?.play()}
-      onMouseLeave={() => iconRef.current?.stop()} 
-    >
       <li
         className={twMerge(
           "group px-1 py-2 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50",
@@ -55,25 +52,37 @@ export const MenuItem = <T extends ElementType = "button">({
         )}
       >
         <motion.span className="w-full flex flex-row items-center justify-start rounded-sm">
-          <Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
+          <Item
-            <div className={`${isSelected ? "visisble" : "invisible"} -left-[0.28rem] absolute w-[0.07rem] rounded-md h-5 bg-primary`}/>
+            type="button"
-            {/* {icon && <span className="mr-3 ml-4 w-5 block group-hover:hidden">{icon}</span>} */}
+            role="menuitem"
-            <Lottie
+            className="flex items-center relative"
-              lottieRef={iconRef}
+            ref={inputRef}
-              style={{ width: 22, height: 22 }}
+            {...props}
-              // eslint-disable-next-line import/no-dynamic-require
+          >
-              animationData={require(`../../../../public/lotties/${icon}.json`)}
+            <div
-              loop={false}
+              className={`${
-              autoplay={false}
+                isSelected ? "visisble" : "invisible"
-              className="my-auto ml-[0.1rem] mr-3"
+              } -left-[0.28rem] absolute w-[0.07rem] rounded-md h-5 bg-primary`}
             />
+            {/* {icon && <span className="mr-3 ml-4 w-5 block group-hover:hidden">{icon}</span>} */}
+            {icon && (
+              <Lottie
+                lottieRef={iconRef}
+                style={{ width: 22, height: 22 }}
+                // eslint-disable-next-line import/no-dynamic-require
+                animationData={require(`../../../../public/lotties/${icon}.json`)}
+                loop={false}
+                autoplay={false}
+                className="my-auto ml-[0.1rem] mr-3"
+              />
+            )}
             <span className="flex-grow text-left">{children}</span>
           </Item>
           {description && <span className="mt-2 text-xs">{description}</span>}
         </motion.span>
       </li>
     </a>
-  )
+  );
 };
 
 export const SubMenuItem = <T extends ElementType = "button">({
@@ -88,13 +97,10 @@ export const SubMenuItem = <T extends ElementType = "button">({
   inputRef,
   ...props
 }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
-  const iconRef = useRef()
+  const iconRef = useRef();
 
-  return( 
+  return (
-    <a 
+    <a onMouseEnter={() => iconRef.current?.play()} onMouseLeave={() => iconRef.current?.stop()}>
-      onMouseEnter={() => iconRef.current?.play()}
-      onMouseLeave={() => iconRef.current?.stop()} 
-    >
       <li
         className={twMerge(
           "group px-1 py-1 mt-0.5 font-inter flex flex-col text-sm text-mineshaft-300 hover:text-mineshaft-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50",
@@ -103,7 +109,13 @@ export const SubMenuItem = <T extends ElementType = "button">({
         )}
       >
         <motion.span className="w-full flex flex-row items-center justify-start rounded-sm pl-6">
-          <Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
+          <Item
+            type="button"
+            role="menuitem"
+            className="flex items-center relative"
+            ref={inputRef}
+            {...props}
+          >
             <Lottie
               lottieRef={iconRef}
               style={{ width: 16, height: 16 }}
@@ -119,10 +131,9 @@ export const SubMenuItem = <T extends ElementType = "button">({
         </motion.span>
       </li>
     </a>
-  )
+  );
 };
 
-
 MenuItem.displayName = "MenuItem";
 
 export type MenuGroupProps = {

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-danger */
-import { forwardRef, HTMLAttributes } from "react";
+import { forwardRef, TextareaHTMLAttributes } from "react";
 import sanitizeHtml, { DisallowedTagsModes } from "sanitize-html";
+import { twMerge } from "tailwind-merge";
 
 import { useToggle } from "@app/hooks";
 
@@ -39,20 +40,28 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
   return `${newContent}<br/>`;
 };
 
-type Props = HTMLAttributes<HTMLTextAreaElement> & {
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   value?: string | null;
   isVisible?: boolean;
+  isReadOnly?: boolean;
   isDisabled?: boolean;
+  containerClassName?: string;
 };
 
 const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
 
 export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
-  ({ value, isVisible, onBlur, isDisabled, onFocus, ...props }, ref) => {
+  (
+    { value, isVisible, containerClassName, onBlur, isDisabled, isReadOnly, onFocus, ...props },
+    ref
+  ) => {
     const [isSecretFocused, setIsSecretFocused] = useToggle();
 
     return (
-      <div className="overflow-auto w-full" style={{ maxHeight: `${21 * 7}px` }}>
+      <div
+        className={twMerge("overflow-auto w-full no-scrollbar rounded-md", containerClassName)}
+        style={{ maxHeight: `${21 * 7}px` }}
+      >
         <div className="relative overflow-hidden">
           <pre aria-hidden className="m-0 ">
             <code className={`inline-block w-full  ${commonClassName}`}>
@@ -78,6 +87,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
             }}
             value={value || ""}
             {...props}
+            readOnly={isReadOnly}
           />
         </div>
       </div>

frontend/src/components/v2/Spinner/Spinner.tsx

@@ -20,7 +20,7 @@ export const Spinner = ({ className, size = "md" }: Props): JSX.Element => {
       <svg
         aria-hidden="true"
         className={twMerge(
-          " text-gray-200 animate-spin dark:text-gray-600 fill-primary m-1",
+          "text-gray-200 animate-spin dark:text-gray-600 fill-primary m-1",
           sizeChart[size],
           className
         )}

frontend/src/components/v2/Tag/Tag.tsx

@@ -1,14 +1,17 @@
 import { ReactNode } from "react";
+import { faClose } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { cva, VariantProps } from "cva";
 import { twMerge } from "tailwind-merge";
 
 type Props = {
   children: ReactNode;
   className?: string;
+  onClose?: () => void;
 } & VariantProps<typeof tagVariants>;
 
 const tagVariants = cva(
-  "inline-flex items-center whitespace-nowrap text-sm rounded-sm mr-1.5 text-bunker-200 rounded-[30px] text-gray-400 ",
+  "inline-flex items-center whitespace-nowrap text-sm rounded mr-1.5 text-bunker-200 text-gray-400 ",
   {
     variants: {
       colorSchema: {
@@ -23,14 +26,13 @@ const tagVariants = cva(
   }
 );
 
-export const Tag = ({
+export const Tag = ({ children, className, colorSchema = "gray", size = "sm", onClose }: Props) => (
-  children,
+  <div className={twMerge(tagVariants({ colorSchema, className, size }))}>
-  className,
-  colorSchema = "gray",
-  size = "sm" }: Props) => (
-  <div
-    className={twMerge(tagVariants({ colorSchema, className, size }))}
-  >
     {children}
+    {onClose && (
+      <button type="button" onClick={onClose} className="ml-2 flex items-center justify-center">
+        <FontAwesomeIcon icon={faClose} />
+      </button>
+    )}
   </div>
 );

frontend/src/components/v2/index.tsx

@@ -2,6 +2,7 @@ export * from "./Accordion";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
+export * from "./ContentLoader";
 export * from "./DatePicker";
 export * from "./DeleteActionModal";
 export * from "./Drawer";

frontend/src/helpers/project.ts

@@ -3,77 +3,75 @@ import crypto from "crypto";
 import { encryptAssymmetric } from "@app/components/utilities/cryptography/crypto";
 import encryptSecrets from "@app/components/utilities/secrets/encryptSecrets";
 import { uploadWsKey } from "@app/hooks/api/keys/queries";
-import { createSecret } from "@app/hooks/api/secrets/queries";
+import { createSecret } from "@app/hooks/api/secrets/mutations";
 import { fetchUserDetails } from "@app/hooks/api/users/queries";
 import { createWorkspace } from "@app/hooks/api/workspace/queries";
 
 const secretsToBeAdded = [
-    {
+  {
-      pos: 0,
+    pos: 0,
-      key: "DATABASE_URL",
+    key: "DATABASE_URL",
-      // eslint-disable-next-line no-template-curly-in-string
+    // eslint-disable-next-line no-template-curly-in-string
-      value: "mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net",
+    value: "mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net",
-      valueOverride: undefined,
+    valueOverride: undefined,
-      comment: "Secret referencing example",
+    comment: "Secret referencing example",
-      id: "",
+    id: "",
-      tags: []
+    tags: []
-    },
+  },
-    {
+  {
-      pos: 1,
+    pos: 1,
-      key: "DB_USERNAME",
+    key: "DB_USERNAME",
-      value: "OVERRIDE_THIS",
+    value: "OVERRIDE_THIS",
-      valueOverride: undefined,
+    valueOverride: undefined,
-      comment:
+    comment: "Override secrets with personal value",
-        "Override secrets with personal value",
+    id: "",
-      id: "",
+    tags: []
-      tags: []
+  },
-    },
+  {
-    {
+    pos: 2,
-      pos: 2,
+    key: "DB_PASSWORD",
-      key: "DB_PASSWORD",
+    value: "OVERRIDE_THIS",
-      value: "OVERRIDE_THIS",
+    valueOverride: undefined,
-      valueOverride: undefined,
+    comment: "Another secret override",
-      comment:
+    id: "",
-        "Another secret override",
+    tags: []
-      id: "",
+  },
-      tags: []
+  {
-    },
+    pos: 3,
-    {
+    key: "DB_USERNAME",
-      pos: 3,
+    value: "user1234",
-      key: "DB_USERNAME",
+    valueOverride: "user1234",
-      value: "user1234",
+    comment: "",
-      valueOverride: "user1234",
+    id: "",
-      comment: "",
+    tags: []
-      id: "",
+  },
-      tags: []
+  {
-    },
+    pos: 4,
-    {
+    key: "DB_PASSWORD",
-      pos: 4,
+    value: "example_password",
-      key: "DB_PASSWORD",
+    valueOverride: "example_password",
-      value: "example_password",
+    comment: "",
-      valueOverride: "example_password",
+    id: "",
-      comment: "",
+    tags: []
-      id: "",
+  },
-      tags: []
+  {
-    },
+    pos: 5,
-    {
+    key: "TWILIO_AUTH_TOKEN",
-      pos: 5,
+    value: "example_twillio_token",
-      key: "TWILIO_AUTH_TOKEN",
+    valueOverride: undefined,
-      value: "example_twillio_token",
+    comment: "",
-      valueOverride: undefined,
+    id: "",
-      comment: "",
+    tags: []
-      id: "",
+  },
-      tags: []
+  {
-    },
+    pos: 6,
-    {
+    key: "WEBSITE_URL",
-      pos: 6,
+    value: "http://localhost:3000",
-      key: "WEBSITE_URL",
+    valueOverride: undefined,
-      value: "http://localhost:3000",
+    comment: "",
-      valueOverride: undefined,
+    id: "",
-      comment: "",
+    tags: []
-      id: "",
+  }
-      tags: []
-    }
 ];
 
 /**
@@ -85,30 +83,32 @@ const secretsToBeAdded = [
  * @returns {Project} project - new project
  */
 const initProjectHelper = async ({
-    organizationId,
+  organizationId,
-    projectName
+  projectName
 }: {
-    organizationId: string;
+  organizationId: string;
-    projectName: string;
+  projectName: string;
 }) => {
   // create new project
-  const { data: { workspace } } = await createWorkspace({
+  const {
-      workspaceName: projectName,
+    data: { workspace }
-      organizationId
+  } = await createWorkspace({
+    workspaceName: projectName,
+    organizationId
   });
-  
+
   // create and upload new (encrypted) project key
   const randomBytes = crypto.randomBytes(16).toString("hex");
   const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
-  
+
   if (!PRIVATE_KEY) throw new Error("Failed to find private key");
 
   const user = await fetchUserDetails();
 
   const { ciphertext, nonce } = encryptAssymmetric({
-      plaintext: randomBytes,
+    plaintext: randomBytes,
-      publicKey: user.publicKey,
+    publicKey: user.publicKey,
-      privateKey: PRIVATE_KEY
+    privateKey: PRIVATE_KEY
   });
 
   await uploadWsKey({
@@ -120,11 +120,11 @@ const initProjectHelper = async ({
 
   // encrypt and upload secrets to new project
   const secrets = await encryptSecrets({
-      secretsToEncrypt: secretsToBeAdded,
+    secretsToEncrypt: secretsToBeAdded,
-      workspaceId: workspace._id,
+    workspaceId: workspace._id,
-      env: "dev"
+    env: "dev"
   });
-  
+
   secrets?.forEach((secret) => {
     createSecret({
       workspaceId: workspace._id,
@@ -146,10 +146,8 @@ const initProjectHelper = async ({
       }
     });
   });
-  
-  return workspace;
-}
 
-export {
+  return workspace;
-    initProjectHelper
+};
-}
+
+export { initProjectHelper };

frontend/src/hooks/api/secretFolders/index.tsx

@@ -3,6 +3,5 @@ export {
   useDeleteFolder,
   useGetFoldersByEnv,
   useGetProjectFolders,
-  useGetProjectFoldersBatch,
   useUpdateFolder
 } from "./queries";

frontend/src/hooks/api/secretFolders/queries.tsx

@@ -1,86 +1,80 @@
 import { useCallback, useMemo } from "react";
-import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions
+} from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
 import { secretSnapshotKeys } from "../secretSnapshots/queries";
 import {
-  CreateFolderDTO,
+  TCreateFolderDTO,
-  DeleteFolderDTO,
+  TDeleteFolderDTO,
-  GetProjectFoldersBatchDTO,
-  GetProjectFoldersDTO,
   TGetFoldersByEnvDTO,
+  TGetProjectFoldersDTO,
   TSecretFolder,
-  UpdateFolderDTO
+  TUpdateFolderDTO
 } from "./types";
 
 const queryKeys = {
-  getSecretFolders: (workspaceId: string, environment: string, parentFolderId?: string) =>
+  getSecretFolders: ({ workspaceId, environment, directory }: TGetProjectFoldersDTO) =>
-    ["secret-folders", { workspaceId, environment, parentFolderId }] as const
+    ["secret-folders", { workspaceId, environment, directory }] as const
 };
 
-const fetchProjectFolders = async (
+const fetchProjectFolders = async (workspaceId: string, environment: string, directory = "/") => {
-  workspaceId: string,
+  const { data } = await apiRequest.get<{ folders: TSecretFolder[] }>("/api/v1/folders", {
-  environment: string,
+    params: {
-  parentFolderId?: string,
+      workspaceId,
-  parentFolderPath?: string
+      environment,
-) => {
+      directory
-  const { data } = await apiRequest.get<{ folders: TSecretFolder[]; dir: TSecretFolder[] }>(
-    "/api/v1/folders",
-    {
-      params: {
-        workspaceId,
-        environment,
-        parentFolderId,
-        parentFolderPath
-      }
     }
-  );
+  });
-  return data;
+  return data.folders;
 };
 
 export const useGetProjectFolders = ({
   workspaceId,
-  parentFolderId,
   environment,
-  isPaused,
+  directory = "/",
-  sortDir
+  options = {}
-}: GetProjectFoldersDTO) =>
+}: TGetProjectFoldersDTO & {
+  options?: Omit<
+    UseQueryOptions<
+      TSecretFolder[],
+      unknown,
+      TSecretFolder[],
+      ReturnType<typeof queryKeys.getSecretFolders>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
   useQuery({
-    queryKey: queryKeys.getSecretFolders(workspaceId, environment, parentFolderId),
+    ...options,
-    enabled: Boolean(workspaceId) && Boolean(environment) && !isPaused,
+    queryKey: queryKeys.getSecretFolders({ workspaceId, environment, directory }),
-    queryFn: async () => fetchProjectFolders(workspaceId, environment, parentFolderId),
+    enabled: Boolean(workspaceId) && Boolean(environment) && (options?.enabled ?? true),
-    select: useCallback(
+    queryFn: async () => fetchProjectFolders(workspaceId, environment, directory)
-      ({ folders, dir }: { folders: TSecretFolder[]; dir: TSecretFolder[] }) => ({
-        dir,
-        folders: folders.sort((a, b) =>
-          sortDir === "asc"
-            ? a?.name?.localeCompare(b?.name || "")
-            : b?.name?.localeCompare(a?.name || "")
-        )
-      }),
-      [sortDir]
-    )
   });
 
 export const useGetFoldersByEnv = ({
-  parentFolderPath,
+  directory = "/",
   workspaceId,
-  environments,
+  environments
-  parentFolderId
 }: TGetFoldersByEnvDTO) => {
   const folders = useQueries({
-    queries: environments.map((env) => ({
+    queries: environments.map((environment) => ({
-      queryKey: queryKeys.getSecretFolders(workspaceId, env, parentFolderPath || parentFolderId),
+      queryKey: queryKeys.getSecretFolders({ workspaceId, environment, directory }),
-      queryFn: async () => fetchProjectFolders(workspaceId, env, parentFolderId, parentFolderPath),
+      queryFn: async () => fetchProjectFolders(workspaceId, environment, directory),
-      enabled: Boolean(workspaceId) && Boolean(env)
+      enabled: Boolean(workspaceId) && Boolean(environment)
     }))
   });
 
   const folderNames = useMemo(() => {
     const names = new Set<string>();
     folders?.forEach(({ data }) => {
-      data?.folders.forEach(({ name }) => {
+      data?.forEach(({ name }) => {
         names.add(name);
       });
     });
@@ -92,9 +86,7 @@ export const useGetFoldersByEnv = ({
       const selectedEnvIndex = environments.indexOf(env);
       if (selectedEnvIndex !== -1) {
         return Boolean(
-          folders?.[selectedEnvIndex]?.data?.folders?.find(
+          folders?.[selectedEnvIndex]?.data?.find(({ name: folderName }) => folderName === name)
-            ({ name: folderName }) => folderName === name
-          )
         );
       }
       return false;
@@ -105,95 +97,78 @@ export const useGetFoldersByEnv = ({
   return { folders, folderNames, isFolderPresentInEnv };
 };
 
-export const useGetProjectFoldersBatch = ({
-  folders = [],
-  isPaused,
-  parentFolderPath
-}: GetProjectFoldersBatchDTO) =>
-  useQueries({
-    queries: folders.map(({ workspaceId, environment, parentFolderId }) => ({
-      queryKey: queryKeys.getSecretFolders(workspaceId, environment, parentFolderPath),
-      queryFn: async () =>
-        fetchProjectFolders(workspaceId, environment, parentFolderId, parentFolderPath),
-      enabled: Boolean(workspaceId) && Boolean(environment) && !isPaused,
-      select: (data: { folders: TSecretFolder[]; dir: TSecretFolder[] }) => ({
-        environment,
-        folders: data.folders,
-        dir: data.dir
-      })
-    }))
-  });
-
 export const useCreateFolder = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<{}, {}, CreateFolderDTO>({
+  return useMutation<{}, {}, TCreateFolderDTO>({
     mutationFn: async (dto) => {
       const { data } = await apiRequest.post("/api/v1/folders", dto);
       return data;
     },
-    onSuccess: (_, { workspaceId, environment, parentFolderId }) => {
+    onSuccess: (_, { workspaceId, environment, directory }) => {
       queryClient.invalidateQueries(
-        queryKeys.getSecretFolders(workspaceId, environment, parentFolderId)
+        queryKeys.getSecretFolders({ workspaceId, environment, directory })
       );
       queryClient.invalidateQueries(
-        secretSnapshotKeys.count(workspaceId, environment, parentFolderId)
+        secretSnapshotKeys.list({ workspaceId, environment, directory })
       );
       queryClient.invalidateQueries(
-        secretSnapshotKeys.list(workspaceId, environment, parentFolderId)
+        secretSnapshotKeys.count({ workspaceId, environment, directory })
       );
     }
   });
 };
 
-export const useUpdateFolder = (parentFolderId: string) => {
+export const useUpdateFolder = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<{}, {}, UpdateFolderDTO>({
+  return useMutation<{}, {}, TUpdateFolderDTO>({
-    mutationFn: async ({ folderId, name, environment, workspaceId }) => {
+    mutationFn: async ({ directory = "/", folderName, name, environment, workspaceId }) => {
-      const { data } = await apiRequest.patch(`/api/v1/folders/${folderId}`, {
+      const { data } = await apiRequest.patch(`/api/v1/folders/${folderName}`, {
         name,
         environment,
-        workspaceId
+        workspaceId,
+        directory
       });
       return data;
     },
-    onSuccess: (_, { workspaceId, environment }) => {
+    onSuccess: (_, { workspaceId, environment, directory }) => {
       queryClient.invalidateQueries(
-        queryKeys.getSecretFolders(workspaceId, environment, parentFolderId)
+        queryKeys.getSecretFolders({ workspaceId, environment, directory })
       );
       queryClient.invalidateQueries(
-        secretSnapshotKeys.count(workspaceId, environment, parentFolderId)
+        secretSnapshotKeys.list({ workspaceId, environment, directory })
       );
       queryClient.invalidateQueries(
-        secretSnapshotKeys.list(workspaceId, environment, parentFolderId)
+        secretSnapshotKeys.count({ workspaceId, environment, directory })
       );
     }
   });
 };
 
-export const useDeleteFolder = (parentFolderId: string) => {
+export const useDeleteFolder = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<{}, {}, DeleteFolderDTO>({
+  return useMutation<{}, {}, TDeleteFolderDTO>({
-    mutationFn: async ({ folderId, environment, workspaceId }) => {
+    mutationFn: async ({ directory = "/", folderName, environment, workspaceId }) => {
-      const { data } = await apiRequest.delete(`/api/v1/folders/${folderId}`, {
+      const { data } = await apiRequest.delete(`/api/v1/folders/${folderName}`, {
         data: {
           environment,
-          workspaceId
+          workspaceId,
+          directory
         }
       });
       return data;
     },
-    onSuccess: (_, { workspaceId, environment }) => {
+    onSuccess: (_, { directory = "/", workspaceId, environment }) => {
       queryClient.invalidateQueries(
-        queryKeys.getSecretFolders(workspaceId, environment, parentFolderId)
+        queryKeys.getSecretFolders({ workspaceId, environment, directory })
       );
       queryClient.invalidateQueries(
-        secretSnapshotKeys.count(workspaceId, environment, parentFolderId)
+        secretSnapshotKeys.list({ workspaceId, environment, directory })
       );
       queryClient.invalidateQueries(
-        secretSnapshotKeys.list(workspaceId, environment, parentFolderId)
+        secretSnapshotKeys.count({ workspaceId, environment, directory })
       );
     }
   });

frontend/src/hooks/api/secretFolders/types.ts

@@ -3,43 +3,36 @@ export type TSecretFolder = {
   name: string;
 };
 
-export type GetProjectFoldersDTO = {
+export type TGetProjectFoldersDTO = {
   workspaceId: string;
   environment: string;
-  parentFolderId?: string;
+  directory?: string;
-  isPaused?: boolean;
-  sortDir?: "asc" | "desc";
-};
-
-export type GetProjectFoldersBatchDTO = {
-  folders: Omit<GetProjectFoldersDTO, "isPaused" | "sortDir">[];
-  isPaused?: boolean;
-  parentFolderPath?: string;
 };
 
 export type TGetFoldersByEnvDTO = {
   environments: string[];
   workspaceId: string;
-  parentFolderPath?: string;
+  directory?: string;
-  parentFolderId?: string;
 };
 
-export type CreateFolderDTO = {
+export type TCreateFolderDTO = {
   workspaceId: string;
   environment: string;
   folderName: string;
-  parentFolderId?: string;
+  directory?: string;
 };
 
-export type UpdateFolderDTO = {
+export type TUpdateFolderDTO = {
   workspaceId: string;
   environment: string;
   name: string;
-  folderId: string;
+  folderName: string;
+  directory?: string;
 };
 
-export type DeleteFolderDTO = {
+export type TDeleteFolderDTO = {
   workspaceId: string;
   environment: string;
-  folderId: string;
+  folderName: string;
+  directory?: string;
 };

frontend/src/hooks/api/secretImports/mutation.tsx

@@ -9,21 +9,21 @@ export const useCreateSecretImport = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TCreateSecretImportDTO>({
-    mutationFn: async ({ secretImport, environment, workspaceId, folderId }) => {
+    mutationFn: async ({ secretImport, environment, workspaceId, directory }) => {
       const { data } = await apiRequest.post("/api/v1/secret-imports", {
         secretImport,
         environment,
         workspaceId,
-        folderId
+        directory
       });
       return data;
     },
-    onSuccess: (_, { workspaceId, environment, folderId }) => {
+    onSuccess: (_, { workspaceId, environment, directory }) => {
       queryClient.invalidateQueries(
-        secretImportKeys.getProjectSecretImports(workspaceId, environment, folderId)
+        secretImportKeys.getProjectSecretImports({ workspaceId, environment, directory })
       );
       queryClient.invalidateQueries(
-        secretImportKeys.getSecretImportSecrets(workspaceId, environment, folderId)
+        secretImportKeys.getSecretImportSecrets({ workspaceId, environment, directory })
       );
     }
   });
@@ -33,21 +33,21 @@ export const useUpdateSecretImport = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TUpdateSecretImportDTO>({
-    mutationFn: async ({ environment, workspaceId, folderId, secretImports, id }) => {
+    mutationFn: async ({ environment, workspaceId, directory, secretImports, id }) => {
       const { data } = await apiRequest.put(`/api/v1/secret-imports/${id}`, {
         secretImports,
         environment,
         workspaceId,
-        folderId
+        directory
       });
       return data;
     },
-    onSuccess: (_, { workspaceId, environment, folderId }) => {
+    onSuccess: (_, { workspaceId, environment, directory }) => {
       queryClient.invalidateQueries(
-        secretImportKeys.getProjectSecretImports(workspaceId, environment, folderId)
+        secretImportKeys.getProjectSecretImports({ workspaceId, environment, directory })
       );
       queryClient.invalidateQueries(
-        secretImportKeys.getSecretImportSecrets(workspaceId, environment, folderId)
+        secretImportKeys.getSecretImportSecrets({ workspaceId, environment, directory })
       );
     }
   });
@@ -66,12 +66,12 @@ export const useDeleteSecretImport = () => {
       });
       return data;
     },
-    onSuccess: (_, { workspaceId, environment, folderId }) => {
+    onSuccess: (_, { workspaceId, environment, directory }) => {
       queryClient.invalidateQueries(
-        secretImportKeys.getProjectSecretImports(workspaceId, environment, folderId)
+        secretImportKeys.getProjectSecretImports({ workspaceId, environment, directory })
       );
       queryClient.invalidateQueries(
-        secretImportKeys.getSecretImportSecrets(workspaceId, environment, folderId)
+        secretImportKeys.getSecretImportSecrets({ workspaceId, environment, directory })
       );
     }
   });

frontend/src/hooks/api/secretImports/queries.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 
 import {
   decryptAssymmetric,
@@ -7,52 +7,68 @@ import {
 } from "@app/components/utilities/cryptography/crypto";
 import { apiRequest } from "@app/config/request";
 
-import { TGetImportedSecrets, TImportedSecrets, TSecretImports } from "./types";
+import { TGetImportedSecrets, TGetSecretImports, TImportedSecrets, TSecretImports } from "./types";
 
 export const secretImportKeys = {
-  getProjectSecretImports: (workspaceId: string, env: string | string[], folderId?: string) => [
+  getProjectSecretImports: ({ environment, workspaceId, directory }: TGetSecretImports) =>
-    { workspaceId, env, folderId },
+    [{ workspaceId, directory, environment }, "secrets-imports"] as const,
-    "secrets-imports"
+  getSecretImportSecrets: ({
-  ],
+    workspaceId,
-  getSecretImportSecrets: (workspaceId: string, env: string | string[], folderId?: string) => [
+    environment,
-    { workspaceId, env, folderId },
+    directory
-    "secrets-import-sec"
+  }: Omit<TGetImportedSecrets, "decryptFileKey">) =>
-  ]
+    [{ workspaceId, environment, directory }, "secrets-import-sec"] as const
 };
 
-const fetchSecretImport = async (workspaceId: string, environment: string, folderId?: string) => {
+const fetchSecretImport = async ({ workspaceId, environment, directory }: TGetSecretImports) => {
   const { data } = await apiRequest.get<{ secretImport: TSecretImports }>(
     "/api/v1/secret-imports",
     {
       params: {
         workspaceId,
         environment,
-        folderId
+        directory
       }
     }
   );
   return data.secretImport;
 };
 
-export const useGetSecretImports = (workspaceId: string, env: string, folderId?: string) =>
+export const useGetSecretImports = ({
+  workspaceId,
+  environment,
+  directory = "/",
+  options = {}
+}: TGetSecretImports & {
+  options?: Omit<
+    UseQueryOptions<
+      TSecretImports,
+      unknown,
+      TSecretImports,
+      ReturnType<typeof secretImportKeys.getProjectSecretImports>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
   useQuery({
-    enabled: Boolean(workspaceId) && Boolean(env),
+    ...options,
-    queryKey: secretImportKeys.getProjectSecretImports(workspaceId, env, folderId),
+    queryKey: secretImportKeys.getProjectSecretImports({ workspaceId, environment, directory }),
-    queryFn: () => fetchSecretImport(workspaceId, env, folderId)
+    enabled: Boolean(workspaceId) && Boolean(environment) && (options?.enabled ?? true),
+    queryFn: () => fetchSecretImport({ workspaceId, environment, directory })
   });
 
 const fetchImportedSecrets = async (
   workspaceId: string,
   environment: string,
-  folderId?: string
+  directory?: string
 ) => {
-  const { data } = await apiRequest.get<{ secrets: TImportedSecrets }>(
+  const { data } = await apiRequest.get<{ secrets: TImportedSecrets[] }>(
     "/api/v1/secret-imports/secrets",
     {
       params: {
         workspaceId,
         environment,
-        folderId
+        directory
       }
     }
   );
@@ -62,15 +78,34 @@ const fetchImportedSecrets = async (
 export const useGetImportedSecrets = ({
   workspaceId,
   environment,
-  folderId,
+  decryptFileKey,
-  decryptFileKey
+  directory,
-}: TGetImportedSecrets) =>
+  options = {}
+}: TGetImportedSecrets & {
+  options?: Omit<
+    UseQueryOptions<
+      TImportedSecrets[],
+      unknown,
+      TImportedSecrets[],
+      ReturnType<typeof secretImportKeys.getSecretImportSecrets>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
   useQuery({
-    enabled: Boolean(workspaceId) && Boolean(environment) && Boolean(decryptFileKey),
+    enabled:
-    queryKey: secretImportKeys.getSecretImportSecrets(workspaceId, environment, folderId),
+      Boolean(workspaceId) &&
-    queryFn: () => fetchImportedSecrets(workspaceId, environment, folderId),
+      Boolean(environment) &&
+      Boolean(decryptFileKey) &&
+      (options?.enabled ?? true),
+    queryKey: secretImportKeys.getSecretImportSecrets({
+      workspaceId,
+      environment,
+      directory
+    }),
+    queryFn: () => fetchImportedSecrets(workspaceId, environment, directory),
     select: useCallback(
-      (data: TImportedSecrets) => {
+      (data: TImportedSecrets[]) => {
         const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
         const latestKey = decryptFileKey;
         const key = decryptAssymmetric({
@@ -114,7 +149,8 @@ export const useGetImportedSecrets = ({
               tags: encSecret.tags,
               comment: secretComment,
               createdAt: encSecret.createdAt,
-              updatedAt: encSecret.updatedAt
+              updatedAt: encSecret.updatedAt,
+              version: encSecret.version
             };
           })
         }));

frontend/src/hooks/api/secretImports/types.ts

@@ -1,5 +1,5 @@
+import { UserWsKeyPair } from "../keys/types";
 import { EncryptedSecret } from "../secrets/types";
-import { UserWsKeyPair } from "../types";
 
 export type TSecretImports = {
   _id: string;
@@ -16,19 +16,25 @@ export type TImportedSecrets = {
   secretPath: string;
   folderId: string;
   secrets: EncryptedSecret[];
-}[];
+};
+
+export type TGetSecretImports = {
+  workspaceId: string;
+  environment: string;
+  directory?: string;
+};
 
 export type TGetImportedSecrets = {
   workspaceId: string;
   environment: string;
-  folderId?: string;
+  directory?: string;
   decryptFileKey: UserWsKeyPair;
 };
 
 export type TCreateSecretImportDTO = {
   workspaceId: string;
   environment: string;
-  folderId?: string;
+  directory?: string;
   secretImport: {
     environment: string;
     secretPath: string;
@@ -39,7 +45,7 @@ export type TUpdateSecretImportDTO = {
   id: string;
   workspaceId: string;
   environment: string;
-  folderId?: string;
+  directory?: string;
   secretImports: Array<{
     environment: string;
     secretPath: string;
@@ -50,7 +56,7 @@ export type TDeleteSecretImportDTO = {
   id: string;
   workspaceId: string;
   environment: string;
-  folderId?: string;
+  directory?: string;
   secretImportPath: string;
   secretImportEnv: string;
 };

frontend/src/hooks/api/secretSnapshots/index.tsx

@@ -1,6 +1,6 @@
 export {
   useGetSnapshotSecrets,
-  useGetWorkspaceSecretSnapshots,
+  useGetWorkspaceSnapshotList,
   useGetWsSnapshotCount,
   usePerformSecretRollback
 } from "./queries";

frontend/src/hooks/api/secretSnapshots/queries.tsx

@@ -9,39 +9,39 @@ import { apiRequest } from "@app/config/request";
 
 import { DecryptedSecret } from "../secrets/types";
 import {
-  GetWorkspaceSecretSnapshotsDTO,
+  TGetSecretSnapshotsDTO,
   TSecretRollbackDTO,
-  TSnapshotSecret,
+  TSecretSnapshot,
-  TSnapshotSecretProps,
+  TSnapshotData,
-  TWorkspaceSecretSnapshot
+  TSnapshotDataProps
 } from "./types";
 
 export const secretSnapshotKeys = {
-  list: (workspaceId: string, env: string, folderId?: string) =>
+  list: ({ workspaceId, environment, directory }: Omit<TGetSecretSnapshotsDTO, "limit">) =>
-    [{ workspaceId, env, folderId }, "secret-snapshot"] as const,
+    [{ workspaceId, environment, directory }, "secret-snapshot"] as const,
-  snapshotSecrets: (snapshotId: string) => [{ snapshotId }, "secret-snapshot"] as const,
+  snapshotData: (snapshotId: string) => [{ snapshotId }, "secret-snapshot"] as const,
-  count: (workspaceId: string, env: string, folderId?: string) => [
+  count: ({ environment, workspaceId, directory }: Omit<TGetSecretSnapshotsDTO, "limit">) => [
-    { workspaceId, env, folderId },
+    { workspaceId, environment, directory },
     "count",
     "secret-snapshot"
   ]
 };
 
-const fetchWorkspaceSecretSnaphots = async (
+const fetchWorkspaceSnaphots = async ({
-  workspaceId: string,
+  workspaceId,
-  environment: string,
+  environment,
-  folderId?: string,
+  directory = "/",
   limit = 10,
   offset = 0
-) => {
+}: TGetSecretSnapshotsDTO & { offset: number }) => {
-  const res = await apiRequest.get<{ secretSnapshots: TWorkspaceSecretSnapshot[] }>(
+  const res = await apiRequest.get<{ secretSnapshots: TSecretSnapshot[] }>(
     `/api/v1/workspace/${workspaceId}/secret-snapshots`,
     {
       params: {
         limit,
         offset,
         environment,
-        folderId
+        directory
       }
     }
   );
@@ -49,32 +49,25 @@ const fetchWorkspaceSecretSnaphots = async (
   return res.data.secretSnapshots;
 };
 
-export const useGetWorkspaceSecretSnapshots = (dto: GetWorkspaceSecretSnapshotsDTO) =>
+export const useGetWorkspaceSnapshotList = (dto: TGetSecretSnapshotsDTO & { isPaused?: boolean }) =>
   useInfiniteQuery({
-    enabled: Boolean(dto.workspaceId && dto.environment),
+    enabled: Boolean(dto.workspaceId && dto.environment) && !dto.isPaused,
-    queryKey: secretSnapshotKeys.list(dto.workspaceId, dto.environment, dto?.folder),
+    queryKey: secretSnapshotKeys.list({ ...dto }),
-    queryFn: ({ pageParam }) =>
+    queryFn: ({ pageParam }) => fetchWorkspaceSnaphots({ ...dto, offset: pageParam }),
-      fetchWorkspaceSecretSnaphots(
-        dto.workspaceId,
-        dto.environment,
-        dto?.folder,
-        dto.limit,
-        pageParam
-      ),
     getNextPageParam: (lastPage, pages) =>
       lastPage.length !== 0 ? pages.length * dto.limit : undefined
   });
 
 const fetchSnapshotEncSecrets = async (snapshotId: string) => {
-  const res = await apiRequest.get<{ secretSnapshot: TSnapshotSecret }>(
+  const res = await apiRequest.get<{ secretSnapshot: TSnapshotData }>(
     `/api/v1/secret-snapshot/${snapshotId}`
   );
   return res.data.secretSnapshot;
 };
 
-export const useGetSnapshotSecrets = ({ decryptFileKey, env, snapshotId }: TSnapshotSecretProps) =>
+export const useGetSnapshotSecrets = ({ decryptFileKey, env, snapshotId }: TSnapshotDataProps) =>
   useQuery({
-    queryKey: secretSnapshotKeys.snapshotSecrets(snapshotId),
+    queryKey: secretSnapshotKeys.snapshotData(snapshotId),
     enabled: Boolean(snapshotId && decryptFileKey),
     queryFn: () => fetchSnapshotEncSecrets(snapshotId),
     select: (data) => {
@@ -117,7 +110,8 @@ export const useGetSnapshotSecrets = ({ decryptFileKey, env, snapshotId }: TSnap
             comment: secretComment,
             createdAt: encSecret.createdAt,
             updatedAt: encSecret.updatedAt,
-            type: "modified"
+            type: "modified",
+            version: encSecret.version
           };
 
           if (encSecret.type === "personal") {
@@ -147,25 +141,30 @@ export const useGetSnapshotSecrets = ({ decryptFileKey, env, snapshotId }: TSnap
 const fetchWorkspaceSecretSnaphotCount = async (
   workspaceId: string,
   environment: string,
-  folderId?: string
+  directory = "/"
 ) => {
   const res = await apiRequest.get<{ count: number }>(
     `/api/v1/workspace/${workspaceId}/secret-snapshots/count`,
     {
       params: {
         environment,
-        folderId
+        directory
       }
     }
   );
   return res.data.count;
 };
 
-export const useGetWsSnapshotCount = (workspaceId: string, env: string, folderId?: string) =>
+export const useGetWsSnapshotCount = ({
+  workspaceId,
+  environment,
+  directory,
+  isPaused
+}: Omit<TGetSecretSnapshotsDTO, "limit"> & { isPaused?: boolean }) =>
   useQuery({
-    enabled: Boolean(workspaceId && env),
+    enabled: Boolean(workspaceId && environment) && !isPaused,
-    queryKey: secretSnapshotKeys.count(workspaceId, env, folderId),
+    queryKey: secretSnapshotKeys.count({ workspaceId, environment, directory }),
-    queryFn: () => fetchWorkspaceSecretSnaphotCount(workspaceId, env, folderId)
+    queryFn: () => fetchWorkspaceSecretSnaphotCount(workspaceId, environment, directory)
   });
 
 export const usePerformSecretRollback = () => {
@@ -179,10 +178,17 @@ export const usePerformSecretRollback = () => {
       );
       return data;
     },
-    onSuccess: (_, { workspaceId, environment, folderId }) => {
+    onSuccess: (_, { workspaceId, environment, directory }) => {
-      queryClient.invalidateQueries([{ workspaceId, environment }, "secrets"]);
+      queryClient.invalidateQueries([
-      queryClient.invalidateQueries(secretSnapshotKeys.list(workspaceId, environment, folderId));
+        { workspaceId, environment, secretPath: directory },
-      queryClient.invalidateQueries(secretSnapshotKeys.count(workspaceId, environment, folderId));
+        "secrets"
+      ]);
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.list({ workspaceId, environment, directory })
+      );
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.count({ workspaceId, environment, directory })
+      );
     }
   });
 };

frontend/src/hooks/api/secretSnapshots/types.ts

@@ -1,7 +1,7 @@
 import { UserWsKeyPair } from "../keys/types";
 import { EncryptedSecretVersion } from "../secrets/types";
 
-export type TWorkspaceSecretSnapshot = {
+export type TSecretSnapshot = {
   _id: string;
   workspace: string;
   version: number;
@@ -11,27 +11,27 @@ export type TWorkspaceSecretSnapshot = {
   __v: number;
 };
 
-export type TSnapshotSecret = Omit<TWorkspaceSecretSnapshot, "secretVersions"> & {
+export type TSnapshotData = Omit<TSecretSnapshot, "secretVersions"> & {
   secretVersions: EncryptedSecretVersion[];
   folderVersion: Array<{ name: string; id: string }>;
 };
 
-export type TSnapshotSecretProps = {
+export type TSnapshotDataProps = {
   snapshotId: string;
   env: string;
   decryptFileKey: UserWsKeyPair;
 };
 
-export type GetWorkspaceSecretSnapshotsDTO = {
+export type TGetSecretSnapshotsDTO = {
   workspaceId: string;
   limit: number;
   environment: string;
-  folder?: string;
+  directory?: string;
 };
 
 export type TSecretRollbackDTO = {
   workspaceId: string;
   version: number;
   environment: string;
-  folderId?: string;
+  directory?: string;
 };

frontend/src/hooks/api/secrets/index.ts

@@ -1,7 +1,9 @@
-export { useCreateSecretV3, useDeleteSecretV3, useUpdateSecretV3 } from "./mutations";
 export {
-  useBatchSecretsOp,
+  useCreateSecretBatch,
-  useGetProjectSecrets,
+  useCreateSecretV3,
-  useGetProjectSecretsAllEnv,
+  useDeleteSecretBatch,
-  useGetSecretVersion
+  useDeleteSecretV3,
-} from "./queries";
+  useUpdateSecretBatch,
+  useUpdateSecretV3
+} from "./mutations";
+export { useGetProjectSecrets, useGetProjectSecretsAllEnv, useGetSecretVersion } from "./queries";

frontend/src/hooks/api/secrets/mutations.tsx

@@ -1,6 +1,6 @@
 import crypto from "crypto";
 
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { MutationOptions, useMutation, useQueryClient } from "@tanstack/react-query";
 
 import {
   decryptAssymmetric,
@@ -8,8 +8,17 @@ import {
 } from "@app/components/utilities/cryptography/crypto";
 import { apiRequest } from "@app/config/request";
 
+import { secretSnapshotKeys } from "../secretSnapshots/queries";
 import { secretKeys } from "./queries";
-import { TCreateSecretsV3DTO, TDeleteSecretsV3DTO, TUpdateSecretsV3DTO } from "./types";
+import {
+  CreateSecretDTO,
+  TCreateSecretBatchDTO,
+  TCreateSecretsV3DTO,
+  TDeleteSecretBatchDTO,
+  TDeleteSecretsV3DTO,
+  TUpdateSecretBatchDTO,
+  TUpdateSecretsV3DTO
+} from "./types";
 
 const encryptSecret = (randomBytes: string, key: string, value?: string, comment?: string) => {
   // encrypt key
@@ -55,7 +64,11 @@ const encryptSecret = (randomBytes: string, key: string, value?: string, comment
   };
 };
 
-export const useCreateSecretV3 = () => {
+export const useCreateSecretV3 = ({
+  options
+}: {
+  options?: Omit<MutationOptions<{}, {}, TCreateSecretsV3DTO>, "mutationFn">;
+} = {}) => {
   const queryClient = useQueryClient();
   return useMutation<{}, {}, TCreateSecretsV3DTO>({
     mutationFn: async ({
@@ -66,7 +79,8 @@ export const useCreateSecretV3 = () => {
       secretName,
       secretValue,
       latestFileKey,
-      secretComment
+      secretComment,
+      skipMultilineEncoding
     }) => {
       const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
 
@@ -84,20 +98,32 @@ export const useCreateSecretV3 = () => {
         environment,
         type,
         secretPath,
-        ...encryptSecret(randomBytes, secretName, secretValue, secretComment)
+        ...encryptSecret(randomBytes, secretName, secretValue, secretComment),
+        skipMultilineEncoding
       };
       const { data } = await apiRequest.post(`/api/v3/secrets/${secretName}`, reqBody);
       return data;
     },
     onSuccess: (_, { workspaceId, environment, secretPath }) => {
       queryClient.invalidateQueries(
-        secretKeys.getProjectSecret(workspaceId, environment, secretPath)
+        secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );
-    }
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.list({ environment, workspaceId, directory: secretPath })
+      );
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
+      );
+    },
+    ...options
   });
 };
 
-export const useUpdateSecretV3 = () => {
+export const useUpdateSecretV3 = ({
+  options
+}: {
+  options?: Omit<MutationOptions<{}, {}, TUpdateSecretsV3DTO>, "mutationFn">;
+} = {}) => {
   const queryClient = useQueryClient();
   return useMutation<{}, {}, TUpdateSecretsV3DTO>({
     mutationFn: async ({
@@ -107,7 +133,11 @@ export const useUpdateSecretV3 = () => {
       workspaceId,
       secretName,
       secretValue,
-      latestFileKey
+      latestFileKey,
+      tags,
+      secretComment,
+      newSecretName,
+      skipMultilineEncoding
     }) => {
       const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
 
@@ -119,34 +149,40 @@ export const useUpdateSecretV3 = () => {
             privateKey: PRIVATE_KEY
           })
         : crypto.randomBytes(16).toString("hex");
-      const { secretValueIV, secretValueTag, secretValueCiphertext } = encryptSecret(
-        randomBytes,
-        secretName,
-        secretValue,
-        ""
-      );
 
       const reqBody = {
         workspaceId,
         environment,
         type,
         secretPath,
-        secretValueIV,
+        ...encryptSecret(randomBytes, newSecretName ?? secretName, secretValue, secretComment),
-        secretValueTag,
+        tags,
-        secretValueCiphertext
+        skipMultilineEncoding,
+        secretName: newSecretName
       };
       const { data } = await apiRequest.patch(`/api/v3/secrets/${secretName}`, reqBody);
       return data;
     },
     onSuccess: (_, { workspaceId, environment, secretPath }) => {
       queryClient.invalidateQueries(
-        secretKeys.getProjectSecret(workspaceId, environment, secretPath)
+        secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );
-    }
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.list({ environment, workspaceId, directory: secretPath })
+      );
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
+      );
+    },
+    ...options
   });
 };
 
-export const useDeleteSecretV3 = () => {
+export const useDeleteSecretV3 = ({
+  options
+}: {
+  options?: Omit<MutationOptions<{}, {}, TDeleteSecretsV3DTO>, "mutationFn">;
+} = {}) => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TDeleteSecretsV3DTO>({
@@ -165,8 +201,160 @@ export const useDeleteSecretV3 = () => {
     },
     onSuccess: (_, { workspaceId, environment, secretPath }) => {
       queryClient.invalidateQueries(
-        secretKeys.getProjectSecret(workspaceId, environment, secretPath)
+        secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );
-    }
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.list({ environment, workspaceId, directory: secretPath })
+      );
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
+      );
+    },
+    ...options
   });
 };
+
+export const useCreateSecretBatch = ({
+  options
+}: {
+  options?: Omit<MutationOptions<{}, {}, TCreateSecretBatchDTO>, "mutationFn">;
+} = {}) => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TCreateSecretBatchDTO>({
+    mutationFn: async ({ secretPath = "/", workspaceId, environment, secrets, latestFileKey }) => {
+      const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+      const randomBytes = latestFileKey
+        ? decryptAssymmetric({
+            ciphertext: latestFileKey.encryptedKey,
+            nonce: latestFileKey.nonce,
+            publicKey: latestFileKey.sender.publicKey,
+            privateKey: PRIVATE_KEY
+          })
+        : crypto.randomBytes(16).toString("hex");
+
+      const reqBody = {
+        workspaceId,
+        environment,
+        secretPath,
+        secrets: secrets.map(
+          ({ secretName, secretValue, secretComment, metadata, type, skipMultilineEncoding }) => ({
+            secretName,
+            ...encryptSecret(randomBytes, secretName, secretValue, secretComment),
+            type,
+            metadata,
+            skipMultilineEncoding
+          })
+        )
+      };
+
+      const { data } = await apiRequest.post("/api/v3/secrets/batch", reqBody);
+      return data;
+    },
+    onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
+      );
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.list({ environment, workspaceId, directory: secretPath })
+      );
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
+      );
+    },
+    ...options
+  });
+};
+
+export const useUpdateSecretBatch = ({
+  options
+}: {
+  options?: Omit<MutationOptions<{}, {}, TUpdateSecretBatchDTO>, "mutationFn">;
+} = {}) => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TUpdateSecretBatchDTO>({
+    mutationFn: async ({ secretPath = "/", workspaceId, environment, secrets, latestFileKey }) => {
+      const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+      const randomBytes = latestFileKey
+        ? decryptAssymmetric({
+            ciphertext: latestFileKey.encryptedKey,
+            nonce: latestFileKey.nonce,
+            publicKey: latestFileKey.sender.publicKey,
+            privateKey: PRIVATE_KEY
+          })
+        : crypto.randomBytes(16).toString("hex");
+
+      const reqBody = {
+        workspaceId,
+        environment,
+        secretPath,
+        secrets: secrets.map(
+          ({ secretName, secretValue, secretComment, type, tags, skipMultilineEncoding }) => ({
+            secretName,
+            ...encryptSecret(randomBytes, secretName, secretValue, secretComment),
+            type,
+            tags,
+            skipMultilineEncoding
+          })
+        )
+      };
+
+      const { data } = await apiRequest.patch("/api/v3/secrets/batch", reqBody);
+      return data;
+    },
+    onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
+      );
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.list({ environment, workspaceId, directory: secretPath })
+      );
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
+      );
+    },
+    ...options
+  });
+};
+
+export const useDeleteSecretBatch = ({
+  options
+}: {
+  options?: Omit<MutationOptions<{}, {}, TDeleteSecretBatchDTO>, "mutationFn">;
+} = {}) => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TDeleteSecretBatchDTO>({
+    mutationFn: async ({ secretPath = "/", workspaceId, environment, secrets }) => {
+      const reqBody = {
+        workspaceId,
+        environment,
+        secretPath,
+        secrets
+      };
+
+      const { data } = await apiRequest.delete("/api/v3/secrets/batch", {
+        data: reqBody
+      });
+      return data;
+    },
+    onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
+      );
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.list({ environment, workspaceId, directory: secretPath })
+      );
+      queryClient.invalidateQueries(
+        secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
+      );
+    },
+    ...options
+  });
+};
+
+export const createSecret = async (dto: CreateSecretDTO) => {
+  const { data } = await apiRequest.post(`/api/v3/secrets/${dto.secretKey}`, dto);
+  return data;
+};

frontend/src/hooks/api/secrets/queries.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { useCallback, useMemo } from "react";
-import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQueries, useQuery, UseQueryOptions } from "@tanstack/react-query";
 
 import {
   decryptAssymmetric,
@@ -8,218 +8,148 @@ import {
 } from "@app/components/utilities/cryptography/crypto";
 import { apiRequest } from "@app/config/request";
 
-import { secretSnapshotKeys } from "../secretSnapshots/queries";
+import { UserWsKeyPair } from "../keys/types";
 import {
-  BatchSecretDTO,
-  CreateSecretDTO,
   DecryptedSecret,
   EncryptedSecret,
   EncryptedSecretVersion,
-  GetProjectSecretsDTO,
   GetSecretVersionsDTO,
-  TGetProjectSecretsAllEnvDTO} from "./types";
+  TGetProjectSecretsAllEnvDTO,
+  TGetProjectSecretsDTO,
+  TGetProjectSecretsKey
+} from "./types";
 
 export const secretKeys = {
   // this is also used in secretSnapshot part
-  getProjectSecret: (workspaceId: string, env: string | string[], folderId?: string) => [
+  getProjectSecret: ({ workspaceId, environment, secretPath }: TGetProjectSecretsKey) =>
-    { workspaceId, env, folderId },
+    [{ workspaceId, environment, secretPath }, "secrets"] as const,
-    "secrets"
+  getSecretVersion: (secretId: string) => [{ secretId }, "secret-versions"] as const
-  ],
-  getProjectSecretImports: (workspaceId: string, env: string | string[], folderId?: string) => [
-    { workspaceId, env, folderId },
-    "secrets-imports"
-  ],
-  getSecretVersion: (secretId: string) => [{ secretId }, "secret-versions"]
 };
 
-const fetchProjectEncryptedSecrets = async (
+const decryptSecrets = (encryptedSecrets: EncryptedSecret[], decryptFileKey: UserWsKeyPair) => {
-  workspaceId: string,
+  const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
-  env: string | string[],
+  const key = decryptAssymmetric({
-  folderId?: string,
+    ciphertext: decryptFileKey.encryptedKey,
-  secretPath?: string
+    nonce: decryptFileKey.nonce,
-) => {
+    publicKey: decryptFileKey.sender.publicKey,
+    privateKey: PRIVATE_KEY
+  });
+
+  const personalSecrets: Record<string, { id: string; value: string }> = {};
+  const secrets: DecryptedSecret[] = [];
+  encryptedSecrets.forEach((encSecret) => {
+    const secretKey = decryptSymmetric({
+      ciphertext: encSecret.secretKeyCiphertext,
+      iv: encSecret.secretKeyIV,
+      tag: encSecret.secretKeyTag,
+      key
+    });
+
+    const secretValue = decryptSymmetric({
+      ciphertext: encSecret.secretValueCiphertext,
+      iv: encSecret.secretValueIV,
+      tag: encSecret.secretValueTag,
+      key
+    });
+
+    const secretComment = decryptSymmetric({
+      ciphertext: encSecret.secretCommentCiphertext,
+      iv: encSecret.secretCommentIV,
+      tag: encSecret.secretCommentTag,
+      key
+    });
+
+    const decryptedSecret: DecryptedSecret = {
+      _id: encSecret._id,
+      env: encSecret.environment,
+      key: secretKey,
+      value: secretValue,
+      tags: encSecret.tags,
+      comment: secretComment,
+      createdAt: encSecret.createdAt,
+      updatedAt: encSecret.updatedAt,
+      version: encSecret.version,
+      skipMultilineEncoding: encSecret.skipMultilineEncoding
+    };
+
+    if (encSecret.type === "personal") {
+      personalSecrets[decryptedSecret.key] = {
+        id: encSecret._id,
+        value: secretValue
+      };
+    } else {
+      secrets.push(decryptedSecret);
+    }
+  });
+
+  secrets.forEach((sec) => {
+    if (personalSecrets?.[sec.key]) {
+      sec.idOverride = personalSecrets[sec.key].id;
+      sec.valueOverride = personalSecrets[sec.key].value;
+      sec.overrideAction = "modified";
+    }
+  });
+
+  return secrets;
+};
+
+const fetchProjectEncryptedSecrets = async ({
+  workspaceId,
+  environment,
+  secretPath
+}: TGetProjectSecretsKey) => {
   const { data } = await apiRequest.get<{ secrets: EncryptedSecret[] }>("/api/v3/secrets", {
     params: {
-      environment: env,
+      environment,
       workspaceId,
-      folderId: folderId || undefined,
       secretPath
     }
   });
-  
+
   return data.secrets;
 };
-
 export const useGetProjectSecrets = ({
   workspaceId,
-  env,
+  environment,
   decryptFileKey,
-  isPaused,
+  secretPath,
-  folderId,
+  options
-  secretPath
+}: TGetProjectSecretsDTO & {
-}: GetProjectSecretsDTO) =>
+  options?: Omit<
+    UseQueryOptions<
+      EncryptedSecret[],
+      unknown,
+      DecryptedSecret[],
+      ReturnType<typeof secretKeys.getProjectSecret>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
   useQuery({
+    ...options,
     // wait for all values to be available
-    enabled: Boolean(decryptFileKey && workspaceId && env) && !isPaused,
+    enabled: Boolean(decryptFileKey && workspaceId && environment) && (options?.enabled ?? true),
-    queryKey: secretKeys.getProjectSecret(workspaceId, env, folderId || secretPath),
+    queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath }),
-    queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env, folderId, secretPath),
+    queryFn: async () => fetchProjectEncryptedSecrets({ workspaceId, environment, secretPath }),
-    select: useCallback(
+    select: (secrets: EncryptedSecret[]) => decryptSecrets(secrets, decryptFileKey)
-      (data: EncryptedSecret[]) => {
-        const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
-        const latestKey = decryptFileKey;
-        const key = decryptAssymmetric({
-          ciphertext: latestKey.encryptedKey,
-          nonce: latestKey.nonce,
-          publicKey: latestKey.sender.publicKey,
-          privateKey: PRIVATE_KEY
-        });
-
-        const sharedSecrets: DecryptedSecret[] = [];
-        const personalSecrets: Record<string, { id: string; value: string }> = {};
-        // this used for add-only mode in dashboard
-        // type won't be there thus only one key is shown
-        const duplicateSecretKey: Record<string, boolean> = {};
-        data.forEach((encSecret: EncryptedSecret) => {
-          const secretKey = decryptSymmetric({
-            ciphertext: encSecret.secretKeyCiphertext,
-            iv: encSecret.secretKeyIV,
-            tag: encSecret.secretKeyTag,
-            key
-          });
-
-          const secretValue = decryptSymmetric({
-            ciphertext: encSecret.secretValueCiphertext,
-            iv: encSecret.secretValueIV,
-            tag: encSecret.secretValueTag,
-            key
-          });
-
-          const secretComment = decryptSymmetric({
-            ciphertext: encSecret.secretCommentCiphertext,
-            iv: encSecret.secretCommentIV,
-            tag: encSecret.secretCommentTag,
-            key
-          });
-
-          const decryptedSecret = {
-            _id: encSecret._id,
-            env: encSecret.environment,
-            key: secretKey,
-            value: secretValue,
-            tags: encSecret.tags,
-            comment: secretComment,
-            createdAt: encSecret.createdAt,
-            updatedAt: encSecret.updatedAt
-          };
-
-          if (encSecret.type === "personal") {
-            personalSecrets[`${decryptedSecret.key}-${decryptedSecret.env}`] = {
-              id: encSecret._id,
-              value: secretValue
-            };
-          } else {
-            if (!duplicateSecretKey?.[`${decryptedSecret.key}-${decryptedSecret.env}`]) {
-              sharedSecrets.push(decryptedSecret);
-            }
-            duplicateSecretKey[`${decryptedSecret.key}-${decryptedSecret.env}`] = true;
-          }
-        });
-        sharedSecrets.forEach((val) => {
-          const dupKey = `${val.key}-${val.env}`;
-          if (personalSecrets?.[dupKey]) {
-            val.idOverride = personalSecrets[dupKey].id;
-            val.valueOverride = personalSecrets[dupKey].value;
-            val.overrideAction = "modified";
-          }
-        });
-        return { secrets: sharedSecrets };
-      },
-      [decryptFileKey]
-    )
   });
 
 export const useGetProjectSecretsAllEnv = ({
   workspaceId,
   envs,
   decryptFileKey,
-  folderId,
   secretPath
 }: TGetProjectSecretsAllEnvDTO) => {
   const secrets = useQueries({
-    queries: envs.map((env) => ({
+    queries: envs.map((environment) => ({
-      queryKey: secretKeys.getProjectSecret(workspaceId, env, secretPath || folderId),
+      queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath }),
-      enabled: Boolean(decryptFileKey && workspaceId && env),
+      enabled: Boolean(decryptFileKey && workspaceId && environment),
-      queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env, folderId, secretPath),
+      queryFn: async () => fetchProjectEncryptedSecrets({ workspaceId, environment, secretPath }),
-      select: (data: EncryptedSecret[]) => {
+      select: (secs: EncryptedSecret[]) =>
-        const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+        decryptSecrets(secs, decryptFileKey).reduce<Record<string, DecryptedSecret>>(
-        const latestKey = decryptFileKey;
+          (prev, curr) => ({ ...prev, [curr.key]: curr }),
-        const key = decryptAssymmetric({
+          {}
-          ciphertext: latestKey.encryptedKey,
+        )
-          nonce: latestKey.nonce,
-          publicKey: latestKey.sender.publicKey,
-          privateKey: PRIVATE_KEY
-        });
-
-        const sharedSecrets: Record<string, DecryptedSecret> = {};
-        const personalSecrets: Record<string, { id: string; value: string }> = {};
-        // this used for add-only mode in dashboard
-        // type won't be there thus only one key is shown
-        const duplicateSecretKey: Record<string, boolean> = {};
-        data.forEach((encSecret: EncryptedSecret) => {
-          const secretKey = decryptSymmetric({
-            ciphertext: encSecret.secretKeyCiphertext,
-            iv: encSecret.secretKeyIV,
-            tag: encSecret.secretKeyTag,
-            key
-          });
-
-          const secretValue = decryptSymmetric({
-            ciphertext: encSecret.secretValueCiphertext,
-            iv: encSecret.secretValueIV,
-            tag: encSecret.secretValueTag,
-            key
-          });
-
-          const secretComment = decryptSymmetric({
-            ciphertext: encSecret.secretCommentCiphertext,
-            iv: encSecret.secretCommentIV,
-            tag: encSecret.secretCommentTag,
-            key
-          });
-
-          const decryptedSecret = {
-            _id: encSecret._id,
-            env: encSecret.environment,
-            key: secretKey,
-            value: secretValue,
-            tags: encSecret.tags,
-            comment: secretComment,
-            createdAt: encSecret.createdAt,
-            updatedAt: encSecret.updatedAt
-          };
-
-          if (encSecret.type === "personal") {
-            personalSecrets[decryptedSecret.key] = {
-              id: encSecret._id,
-              value: secretValue
-            };
-          } else {
-            if (!duplicateSecretKey?.[decryptedSecret.key]) {
-              sharedSecrets[decryptedSecret.key] = decryptedSecret;
-            }
-            duplicateSecretKey[decryptedSecret.key] = true;
-          }
-        });
-
-        Object.keys(sharedSecrets).forEach((val) => {
-          if (personalSecrets?.[val]) {
-            sharedSecrets[val].idOverride = personalSecrets[val].id;
-            sharedSecrets[val].valueOverride = personalSecrets[val].value;
-            sharedSecrets[val].overrideAction = "modified";
-          }
-        });
-        return sharedSecrets;
-      }
     }))
   });
 
@@ -303,46 +233,3 @@ export const useGetSecretVersion = (dto: GetSecretVersionsDTO) =>
       [dto.decryptFileKey]
     )
   });
-
-export const useBatchSecretsOp = () => {
-  const queryClient = useQueryClient();
-
-  return useMutation<{}, {}, BatchSecretDTO>({
-    mutationFn: async (dto) => {
-      const { data } = await apiRequest.post("/api/v2/secrets/batch", dto);
-      return data;
-    },
-    onSuccess: (_, dto) => {
-      queryClient.invalidateQueries(
-        secretKeys.getProjectSecret(dto.workspaceId, dto.environment, dto.folderId)
-      );
-      queryClient.invalidateQueries(
-        secretSnapshotKeys.list(dto.workspaceId, dto.environment, dto?.folderId)
-      );
-      queryClient.invalidateQueries(
-        secretSnapshotKeys.count(dto.workspaceId, dto.environment, dto?.folderId)
-      );
-    }
-  });
-};
-
-export const createSecret = async (dto: CreateSecretDTO) => {
-  const { data } = await apiRequest.post(`/api/v3/secrets/${dto.secretKey}`, dto);
-  return data;
-}
-
-export const useCreateSecret = () => {
-  const queryClient = useQueryClient();
-
-  return useMutation<{}, {}, CreateSecretDTO>({
-    mutationFn: async (dto) => {
-      const data = createSecret(dto);
-      return data;
-    },
-    onSuccess: (_, dto) => {
-      queryClient.invalidateQueries(
-        secretKeys.getProjectSecret(dto.workspaceId, dto.environment)
-      );
-    }
-  });
-};

frontend/src/hooks/api/secrets/types.ts

@@ -16,6 +16,7 @@ export type EncryptedSecret = {
   __v: number;
   createdAt: string;
   updatedAt: string;
+  skipMultilineEncoding?: boolean;
   secretCommentCiphertext: string;
   secretCommentIV: string;
   secretCommentTag: string;
@@ -24,6 +25,7 @@ export type EncryptedSecret = {
 
 export type DecryptedSecret = {
   _id: string;
+  version: number;
   key: string;
   value: string;
   comment: string;
@@ -35,6 +37,7 @@ export type DecryptedSecret = {
   idOverride?: string;
   overrideAction?: string;
   folderId?: string;
+  skipMultilineEncoding?: boolean;
 };
 
 export type EncryptedSecretVersion = {
@@ -53,55 +56,21 @@ export type EncryptedSecretVersion = {
   secretValueTag: string;
   tags: WsTag[];
   __v: number;
+  skipMultilineEncoding?: boolean;
   createdAt: string;
   updatedAt: string;
 };
 
 // dto
-type SecretTagArg = { _id: string; name: string; slug: string };
+export type TGetProjectSecretsKey = {
-
-export type UpdateSecretArg = {
-  _id: string;
-  folderId?: string;
-  type: "shared" | "personal";
-  secretName: string;
-  secretKeyCiphertext: string;
-  secretKeyIV: string;
-  secretKeyTag: string;
-  secretValueCiphertext: string;
-  secretValueIV: string;
-  secretValueTag: string;
-  secretCommentCiphertext: string;
-  secretCommentIV: string;
-  secretCommentTag: string;
-  tags: SecretTagArg[];
-};
-
-export type CreateSecretArg = Omit<UpdateSecretArg, "_id">;
-
-export type DeleteSecretArg = { _id: string, secretName: string; };
-
-export type BatchSecretDTO = {
   workspaceId: string;
-  folderId: string;
   environment: string;
-  requests: Array<
+  secretPath?: string;
-    | { method: "POST"; secret: CreateSecretArg }
-    | { method: "PATCH"; secret: UpdateSecretArg }
-    | { method: "DELETE"; secret: DeleteSecretArg }
-  >;
 };
 
-export type GetProjectSecretsDTO = {
+export type TGetProjectSecretsDTO = {
-  workspaceId: string;
-  env: string | string[];
   decryptFileKey: UserWsKeyPair;
-  folderId?: string;
+} & TGetProjectSecretsKey;
-  secretPath?: string;
-  isPaused?: boolean;
-  include_imports?: boolean;
-  onSuccess?: (data: DecryptedSecret[]) => void;
-};
 
 export type TGetProjectSecretsAllEnvDTO = {
   workspaceId: string;
@@ -124,6 +93,7 @@ export type TCreateSecretsV3DTO = {
   secretName: string;
   secretValue: string;
   secretComment: string;
+  skipMultilineEncoding?: boolean;
   secretPath: string;
   workspaceId: string;
   environment: string;
@@ -136,19 +106,63 @@ export type TUpdateSecretsV3DTO = {
   environment: string;
   type: string;
   secretPath: string;
+  skipMultilineEncoding?: boolean;
+  newSecretName?: string;
   secretName: string;
   secretValue: string;
+  secretComment?: string;
+  tags?: string[];
 };
 
 export type TDeleteSecretsV3DTO = {
   workspaceId: string;
   environment: string;
-  type: string;
+  type: "shared" | "personal";
   secretPath: string;
   secretName: string;
 };
 
-// --- v3
+export type TCreateSecretBatchDTO = {
+  workspaceId: string;
+  environment: string;
+  secretPath: string;
+  latestFileKey: UserWsKeyPair;
+  secrets: Array<{
+    secretName: string;
+    secretValue: string;
+    secretComment: string;
+    skipMultilineEncoding?: boolean;
+    type: "shared" | "personal";
+    metadata?: {
+      source?: string;
+    };
+  }>;
+};
+
+export type TUpdateSecretBatchDTO = {
+  workspaceId: string;
+  environment: string;
+  secretPath: string;
+  latestFileKey: UserWsKeyPair;
+  secrets: Array<{
+    type: "shared" | "personal";
+    secretName: string;
+    skipMultilineEncoding?: boolean;
+    secretValue: string;
+    secretComment: string;
+    tags?: string[];
+  }>;
+};
+
+export type TDeleteSecretBatchDTO = {
+  workspaceId: string;
+  environment: string;
+  secretPath: string;
+  secrets: Array<{
+    secretName: string;
+    type: "shared" | "personal";
+  }>;
+};
 
 export type CreateSecretDTO = {
   workspaceId: string;
@@ -167,5 +181,5 @@ export type CreateSecretDTO = {
   secretPath: string;
   metadata?: {
     source?: string;
-  }
+  };
-}
+};

frontend/src/hooks/api/types.ts

@@ -5,6 +5,9 @@ export type { TCloudIntegration, TIntegration } from "./integrations/types";
 export type { UserWsKeyPair } from "./keys/types";
 export type { Organization } from "./organization/types";
 export type { TSecretApprovalPolicy } from "./secretApproval/types";
+export type { TSecretFolder } from "./secretFolders/types";
+export type { TImportedSecrets, TSecretImports } from "./secretImports/types";
+export * from "./secrets/types";
 export type { CreateServiceTokenDTO, ServiceToken } from "./serviceTokens/types";
 export type { SubscriptionPlan } from "./subscriptions/types";
 export type { WsTag } from "./tags/types";

frontend/tailwind.config.js

@@ -315,7 +315,7 @@ module.exports = {
         // TODO:(akhilmhdh) remove all these unused and keep the config file as small as possible
         // Make the whole color pallelte into simpler
         bounce: "bounce 1000ms ease-in-out infinite",
-        spin: "spin 4000ms ease-in-out infinite",
+        spin: "spin 1500ms ease-in-out infinite",
         cursor: "cursor .6s linear infinite alternate",
         type: "type 2.7s ease-out .8s infinite alternate both",
         "type-reverse": "type 1.8s ease-out 0s infinite alternate-reverse both",