add helper text and tooltip for secret path

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -8,12 +8,17 @@ export type FormLabelProps = {
   id?: string;
   isRequired?: boolean;
   label?: ReactNode;
+  icon?: ReactNode;
 };
 
-export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
-  <Label.Root className="mb-0.5 ml-1 block text-sm font-normal text-mineshaft-400" htmlFor={id}>
+export const FormLabel = ({ id, label, isRequired, icon }: FormLabelProps) => (
+  <Label.Root
+    className="mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400"
+    htmlFor={id}
+  >
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
+    {icon && <span className="ml-2 cursor-pointer text-white">{icon}</span>}
   </Label.Root>
 );
 
@@ -47,6 +52,7 @@ export type FormControlProps = {
   errorText?: ReactNode;
   children: JSX.Element;
   className?: string;
+  icon?: ReactNode;
 };
 
 export const FormControl = ({
@@ -57,12 +63,13 @@ export const FormControl = ({
   errorText,
   id,
   isError,
+  icon,
   className
 }: FormControlProps): JSX.Element => {
   return (
     <div className={twMerge("mb-4", className)}>
       {typeof label === "string" ? (
-        <FormLabel label={label} isRequired={isRequired} id={id} />
+        <FormLabel label={label} isRequired={isRequired} id={id} icon={icon} />
       ) : (
         label
       )}

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -10,6 +10,7 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "
   asChild?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   defaultOpen?: boolean;
+  position?: "top" | "bottom" | "left" | "right";
 };
 
 export const Tooltip = ({
@@ -20,6 +21,7 @@ export const Tooltip = ({
   defaultOpen,
   className,
   asChild = true,
+  position = "top",
   ...props
 }: TooltipProps) => (
   <TooltipPrimitive.Root
@@ -30,7 +32,7 @@ export const Tooltip = ({
   >
     <TooltipPrimitive.Trigger asChild={asChild}>{children}</TooltipPrimitive.Trigger>
     <TooltipPrimitive.Content
-      side="top"
+      side={position}
       align="center"
       sideOffset={5}
       {...props}