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

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