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 selectedEnv = useMemo(
-    () => userAvailableEnvs?.find((uae) => uae.name === currentEnv),
-    [userAvailableEnvs, currentEnv]
-  );
+  const secretPathSegments = secretPath.split("/").filter(Boolean);
 
   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;
-          else delete query.folderId;
+          query.secretPath = secretPathSegments.slice(0, index + 1);
+
           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 ? (
-                <span className="text-sm font-semibold text-bunker-300">{name}</span>
+              {index + 1 === secretPathSegments?.length ? (
+                <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 Lottie from "lottie-react"
+import { motion } from "framer-motion";
+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( 
-    <a 
-      onMouseEnter={() => iconRef.current?.play()}
-      onMouseLeave={() => iconRef.current?.stop()} 
-    >
+  return (
+    <a 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}>
-            <div className={`${isSelected ? "visisble" : "invisible"} -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>} */}
-            <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"
+          <Item
+            type="button"
+            role="menuitem"
+            className="flex items-center relative"
+            ref={inputRef}
+            {...props}
+          >
+            <div
+              className={`${
+                isSelected ? "visisble" : "invisible"
+              } -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( 
-    <a 
-      onMouseEnter={() => iconRef.current?.play()}
-      onMouseLeave={() => iconRef.current?.stop()} 
-    >
+  return (
+    <a 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 = ({
-  children,
-  className,
-  colorSchema = "gray",
-  size = "sm" }: Props) => (
-  <div
-    className={twMerge(tagVariants({ colorSchema, className, size }))}
-  >
+export const Tag = ({ children, className, colorSchema = "gray", size = "sm", onClose }: 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";