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

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>