fix(server): resolved failing to use dynamic secret due to superuser

backend/src/ee/services/secret-rotation/secret-rotation-queue/secret-rotation-queue-fn.ts

@@ -90,7 +90,17 @@ export const secretRotationDbFn = async ({
   const appCfg = getConfig();
 
   const ssl = ca ? { rejectUnauthorized: false, ca } : undefined;
-  if (host === "localhost" || host === "127.0.0.1" || getDbConnectionHost(appCfg.DB_CONNECTION_URI) === host)
+  const dbHost = appCfg.DB_HOST || getDbConnectionHost(appCfg.DB_CONNECTION_URI);
+  if (
+    host === "localhost" ||
+    host === "127.0.0.1" ||
+    // database infisical uses
+    dbHost === host ||
+    // internal ips
+    host === "host.docker.internal" ||
+    host.match(/^10\.\d+\.\d+\.\d+/) ||
+    host.match(/^192\.168\.\d+\.\d+/)
+  )
     throw new Error("Invalid db host");
 
   const db = knex({

backend/src/services/dynamic-secret/providers/sql-database.ts

@@ -23,7 +23,17 @@ export const SqlDatabaseProvider = (): TDynamicProviderFns => {
     const dbHost = appCfg.DB_HOST || getDbConnectionHost(appCfg.DB_CONNECTION_URI);
 
     const providerInputs = await DynamicSecretSqlDBSchema.parseAsync(inputs);
-    if (providerInputs.host === "localhost" || providerInputs.host === "127.0.0.1" || dbHost === providerInputs.host)
+    if (
+      // localhost
+      providerInputs.host === "localhost" ||
+      providerInputs.host === "127.0.0.1" ||
+      // database infisical uses
+      dbHost === providerInputs.host ||
+      // internal ips
+      providerInputs.host === "host.docker.internal" ||
+      providerInputs.host.match(/^10\.\d+\.\d+\.\d+/) ||
+      providerInputs.host.match(/^192\.168\.\d+\.\d+/)
+    )
       throw new BadRequestError({ message: "Invalid db host" });
     return providerInputs;
   };

frontend/src/components/v2/Card/Card.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode } from "react";
+import { CSSProperties, forwardRef, ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 
 export type CardTitleProps = {
@@ -31,10 +31,13 @@ export const CardFooter = ({ children, className }: CardFooterProps) => (
 export type CardBodyProps = {
   children: ReactNode;
   className?: string;
+  style?: CSSProperties;
 };
 
-export const CardBody = ({ children, className }: CardBodyProps) => (
+export const CardBody = ({ children, className, style }: CardBodyProps) => (
-  <div className={twMerge("px-6 pb-6 pt-0", className)}>{children}</div>
+  <div className={twMerge("px-6 pb-6 pt-0", className)} style={style}>
+    {children}
+  </div>
 );
 
 export type CardProps = {
@@ -44,10 +47,14 @@ export type CardProps = {
   isRounded?: boolean;
   isPlain?: boolean;
   isHoverable?: boolean;
+  style?: CSSProperties;
 };
 
 export const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ children, isFullHeight, isRounded, isHoverable, isPlain, className }, ref): JSX.Element => {
+  (
+    { children, isFullHeight, isRounded, isHoverable, isPlain, className, style },
+    ref
+  ): JSX.Element => {
     return (
       <div
         ref={ref}
@@ -59,6 +66,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
           isHoverable && "hover:shadow-xl",
           className
         )}
+        style={style}
       >
         {children}
       </div>

frontend/src/components/v2/Modal/Modal.tsx

@@ -29,12 +29,15 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <Card
           isRounded
           className={twMerge(
-            "thin-scrollbar fixed top-1/2 left-1/2 z-30 max-h-screen max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
+            "thin-scrollbar fixed top-1/2 left-1/2 z-30 max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
             className
           )}
+          style={{ maxHeight: "90%" }}
         >
           {title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
-          <CardBody>{children}</CardBody>
+          <CardBody className="overflow-y-auto overflow-x-hidden" style={{ maxHeight: "90%" }}>
+            {children}
+          </CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}
           <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
             <IconButton

frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx

@@ -42,7 +42,7 @@ export const CreateDynamicSecretForm = ({
       <ModalContent
         title="Dynamic secret setup"
         subTitle="Configure dynamic secret parameters"
-        className="my-4 max-h-screen max-w-3xl overflow-scroll"
+        className="my-4 max-w-3xl"
       >
         <AnimatePresence exitBeforeEnter>
           {wizardStep === WizardSteps.SelectProvider && (
@@ -56,7 +56,7 @@ export const CreateDynamicSecretForm = ({
               <div className="mb-4 text-mineshaft-300">Select a service to connect to:</div>
               <div className="flex items-center space-x-4">
                 <div
-                  className="flex h-32 w-32 cursor-pointer flex-col items-center space-y-4 rounded border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:bg-primary/10 hover:border-primary/70 hover:text-white"
+                  className="flex h-32 w-32 cursor-pointer flex-col items-center space-y-4 rounded border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
                   role="button"
                   tabIndex={0}
                   onClick={() => {

frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx

@@ -25,7 +25,7 @@ const formSchema = z.object({
   provider: z.object({
     client: z.nativeEnum(SqlProviders),
     host: z.string().toLowerCase().min(1),
-    port: z.number(),
+    port: z.coerce.number(),
     database: z.string().min(1),
     username: z.string().min(1),
     password: z.string().min(1),
@@ -54,9 +54,7 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
-    .string()
-    .refine((val) => val.toLowerCase() === val, "Must be lowercase")
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -84,7 +82,7 @@ export const SqlDatabaseInputForm = ({
     defaultValues: {
       provider: {
         creationStatement:
-          "CREATE USER \"{{username}}\" WITH SUPERUSER ENCRYPTED PASSWORD '{{password}}' VALID UNTIL '{{expiration}}';\nGRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO \"{{username}}\";",
+          "CREATE USER \"{{username}}\" WITH ENCRYPTED PASSWORD '{{password}}' VALID UNTIL '{{expiration}}';\nGRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO \"{{username}}\";",
         renewStatement: "ALTER ROLE \"{{username}}\" VALID UNTIL '{{expiration}}';",
         revocationStatement:
           'REVOKE ALL PRIVILEGES ON ALL TABLES IN SCHEMA public FROM "{{username}}";\nDROP OWNED BY "{{username}}";\nDROP ROLE "{{username}}";'
@@ -119,6 +117,7 @@ export const SqlDatabaseInputForm = ({
   return (
     <div>
       <form onSubmit={handleSubmit(handleCreateDynamicSecret)}>
+        <div>
           <div className="flex items-center space-x-2">
             <div className="flex-grow">
               <Controller
@@ -217,11 +216,7 @@ export const SqlDatabaseInputForm = ({
                       isError={Boolean(error?.message)}
                       errorText={error?.message}
                     >
-                    <Input 
+                      <Input {...field} type="number" />
-                      {...field}
-                      type="number"
-                      onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
-                    />
                     </FormControl>
                   )}
                 />
@@ -354,6 +349,7 @@ export const SqlDatabaseInputForm = ({
               </div>
             </div>
           </div>
+        </div>
         <div className="mt-4 flex items-center space-x-4">
           <Button type="submit" isLoading={isSubmitting}>
             Submit