@marimo-team/frontend 0.23.15-dev55 → 0.23.15-dev58

package/src/components/editor/connections/__tests__/secret-combobox.test.ts

@@ -0,0 +1,134 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, test } from "vitest";
+import { partitionSecretKeys } from "../secret-combobox";
+
+describe("partitionSecretKeys", () => {
+  const keys = [
+    "HOSTNAME",
+    "PGHOST",
+    "DB_HOST",
+    "KUBERNETES_SERVICE_HOST",
+    "GPG_KEY",
+    "HOME",
+    "POSTGRES_PASSWORD",
+    "DB_PASSWORD",
+    "USERNAME",
+    "PGUSER",
+    "USER_AGENT",
+    "AWS_ACCESS_KEY_ID",
+    "AWS_SECRET_ACCESS_KEY",
+    "AWS_SESSION_TOKEN",
+    "OBJECT_STORAGE_KEY",
+    "OBJECT_STORAGE_SECRET",
+    "DATABASE_URL",
+    "SNOWFLAKE_PRIVATE_KEY_PASSPHRASE",
+    "PATH",
+    "GITHUB_PAT",
+  ];
+
+  test("returns all keys as other when regex is empty", () => {
+    expect(partitionSecretKeys(keys, "")).toEqual({
+      recommended: [],
+      other: keys,
+    });
+  });
+
+  test("handles invalid regex", () => {
+    expect(partitionSecretKeys(keys, "[invalid")).toEqual({
+      recommended: [],
+      other: keys,
+    });
+  });
+
+  test("recommends host-like keys and excludes kubernetes", () => {
+    const hostRegex =
+      "^(?!.*(kubernetes|gpg)).*(host(name)?|pghost|db.?host|database.?host|mysql.?host|postgres.?host|server.?host)";
+    const { recommended, other } = partitionSecretKeys(keys, hostRegex);
+
+    expect(recommended).toEqual(["HOSTNAME", "PGHOST", "DB_HOST"]);
+    expect(other).toContain("KUBERNETES_SERVICE_HOST");
+    expect(other).toContain("GPG_KEY");
+    expect(other).toContain("HOME");
+  });
+
+  test("recommends password-like keys", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(password|passwd|pgpassword|db.?pass(word)?)",
+    );
+    expect(recommended).toEqual(["POSTGRES_PASSWORD", "DB_PASSWORD"]);
+  });
+
+  test("recommends username keys without matching USER_AGENT", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(username|pguser|db.?user|^USER$|_USER$)",
+    );
+    expect(recommended).toEqual(["USERNAME", "PGUSER"]);
+    expect(recommended).not.toContain("USER_AGENT");
+  });
+
+  test("recommends aws access key id without matching the secret key", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(access.?key.?id|aws.?access.?key)",
+    );
+    expect(recommended).toEqual(["AWS_ACCESS_KEY_ID"]);
+  });
+
+  test("recommends aws secret access key", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(secret.?access.?key|aws.?secret)",
+    );
+    expect(recommended).toEqual(["AWS_SECRET_ACCESS_KEY"]);
+  });
+
+  test("recommends aws session token", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(session.?token|aws.?session)",
+    );
+    expect(recommended).toEqual(["AWS_SESSION_TOKEN"]);
+  });
+
+  test("recommends object storage credentials", () => {
+    expect(
+      partitionSecretKeys(
+        keys,
+        "(access.?key.?id|object.?storage.?key|aws.?access.?key)",
+      ).recommended,
+    ).toEqual(["AWS_ACCESS_KEY_ID", "OBJECT_STORAGE_KEY"]);
+    expect(
+      partitionSecretKeys(
+        keys,
+        "(secret.?access.?key|object.?storage.?secret|aws.?secret)",
+      ).recommended,
+    ).toEqual(["AWS_SECRET_ACCESS_KEY", "OBJECT_STORAGE_SECRET"]);
+  });
+
+  test("recommends uri/url-like keys", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(uri|url|connection.?string|database.?url|jdbc)",
+    );
+    expect(recommended).toEqual(["DATABASE_URL"]);
+  });
+
+  test("recommends token keys and bounds PAT so PATH is excluded", () => {
+    const { recommended, other } = partitionSecretKeys(
+      keys,
+      "(token|api.?key|access.?token|auth.?token|(^|_)pat(_|$))",
+    );
+    expect(recommended).toEqual(["AWS_SESSION_TOKEN", "GITHUB_PAT"]);
+    expect(other).toContain("PATH");
+  });
+
+  test("recommends passphrase keys", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(passphrase|private.?key.?passphrase|key.?passphrase)",
+    );
+    expect(recommended).toEqual(["SNOWFLAKE_PRIVATE_KEY_PASSPHRASE"]);
+  });
+});

package/src/components/editor/connections/database/schemas.ts

@@ -10,8 +10,7 @@ function passwordField() {
       FieldOptions.of({
         label: "Password",
         inputType: "password",
-        placeholder: "password",
-        optionRegex: ".*password.*",
+        optionRegex: "(password|passwd|pgpassword|db.?pass(word)?)",
       }),
     );
 }
@@ -24,8 +23,7 @@ function tokenField(label?: string, required?: boolean) {
     FieldOptions.of({
       label: label || "Token",
       inputType: "password",
-      placeholder: "token",
-      optionRegex: ".*token.*",
+      optionRegex: "(token|api.?key|access.?token|auth.?token|(^|_)pat(_|$))",
     }),
   );
   return field;
@@ -38,8 +36,7 @@ function warehouseNameField() {
     .describe(
       FieldOptions.of({
         label: "Warehouse Name",
-        placeholder: "warehouse",
-        optionRegex: ".*warehouse.*",
+        optionRegex: "(warehouse|snowflake.?warehouse)",
       }),
     );
 }
@@ -49,7 +46,10 @@ function uriField(label?: string, required?: boolean) {
   field = required ? field.nonempty() : field.optional();
 
   return field.describe(
-    FieldOptions.of({ label: label || "URI", optionRegex: ".*uri.*" }),
+    FieldOptions.of({
+      label: label || "URI",
+      optionRegex: "(uri|url|connection.?string|database.?url|jdbc)",
+    }),
   );
 }
 
@@ -60,8 +60,9 @@ function hostField(label?: string) {
     .describe(
       FieldOptions.of({
         label: label || "Host",
-        placeholder: "localhost",
-        optionRegex: ".*host.*",
+        // Exclude kubernetes/system host vars that match a naive "host" search.
+        optionRegex:
+          "^(?!.*(kubernetes|gpg)).*(host(name)?|pghost|db.?host|database.?host|mysql.?host|postgres.?host|server.?host)",
       }),
     );
 }
@@ -70,8 +71,7 @@ function databaseField() {
   return z.string().describe(
     FieldOptions.of({
       label: "Database",
-      placeholder: "db name",
-      optionRegex: ".*database.*",
+      optionRegex: "(database|db.?name|pgdatabase|^DB$|^DATABASE$)",
     }),
   );
 }
@@ -80,8 +80,7 @@ function schemaField() {
   return z.string().describe(
     FieldOptions.of({
       label: "Schema",
-      placeholder: "schema name",
-      optionRegex: ".*schema.*",
+      optionRegex: "(^SCHEMA$|db.?schema|postgres.?schema|pg.?schema|_SCHEMA$)",
     }),
   );
 }
@@ -93,8 +92,7 @@ function usernameField() {
     .describe(
       FieldOptions.of({
         label: "Username",
-        placeholder: "username",
-        optionRegex: ".*username.*",
+        optionRegex: "(username|pguser|db.?user|^USER$|_USER$)",
       }),
     );
 }
@@ -196,7 +194,7 @@ export const SnowflakeConnectionSchema = z
       .describe(
         FieldOptions.of({
           label: "Account",
-          optionRegex: ".*snowflake.*",
+          optionRegex: "(snowflake.?account|^SNOWFLAKE_ACCOUNT$|account.?id)",
         }),
       ),
     warehouse: z
@@ -205,7 +203,7 @@ export const SnowflakeConnectionSchema = z
       .describe(
         FieldOptions.of({
           label: "Warehouse",
-          optionRegex: ".*snowflake.*",
+          optionRegex: "(snowflake.?warehouse|warehouse)",
         }),
       ),
     database: databaseField(),
@@ -215,7 +213,7 @@ export const SnowflakeConnectionSchema = z
       .describe(
         FieldOptions.of({
           label: "Schema",
-          optionRegex: ".*snowflake.*",
+          optionRegex: "(snowflake.?schema|^SCHEMA$|_SCHEMA$)",
         }),
       ),
     role: z
@@ -256,7 +254,8 @@ export const SnowflakeConnectionSchema = z
               FieldOptions.of({
                 label: "Private Key Passphrase",
                 inputType: "password",
-                optionRegex: ".*passphrase.*",
+                optionRegex:
+                  "(passphrase|private.?key.?passphrase|key.?passphrase)",
               }),
             ),
         }),
@@ -283,7 +282,8 @@ export const BigQueryConnectionSchema = z
       .describe(
         FieldOptions.of({
           label: "Project ID",
-          optionRegex: ".*bigquery.*",
+          optionRegex:
+            "(bigquery.?project|gcp.?project|google.?cloud.?project|project.?id)",
         }),
       ),
     dataset: z
@@ -292,7 +292,7 @@ export const BigQueryConnectionSchema = z
       .describe(
         FieldOptions.of({
           label: "Dataset",
-          optionRegex: ".*bigquery.*",
+          optionRegex: "(bigquery.?dataset|dataset)",
         }),
       ),
     credentials_json: z
@@ -377,7 +377,7 @@ export const IcebergConnectionSchema = z.object({
             FieldOptions.of({
               label: "URI",
               placeholder: "https://",
-              optionRegex: ".*uri.*",
+              optionRegex: "(uri|url|connection.?string|database.?url|jdbc)",
             }),
           ),
         token: tokenField(),
@@ -392,7 +392,7 @@ export const IcebergConnectionSchema = z.object({
             FieldOptions.of({
               label: "URI",
               placeholder: "jdbc:iceberg://host:port/database",
-              optionRegex: ".*uri.*",
+              optionRegex: "(uri|url|connection.?string|database.?url|jdbc)",
             }),
           ),
       }),
@@ -419,7 +419,13 @@ export const IcebergConnectionSchema = z.object({
         "dynamodb.access-key-id": z
           .string()
           .optional()
-          .describe(FieldOptions.of({ label: "Access Key ID" })),
+          .describe(
+            FieldOptions.of({
+              label: "Access Key ID",
+              inputType: "password",
+              optionRegex: "(access.?key.?id|aws.?access.?key)",
+            }),
+          ),
         "dynamodb.secret-access-key": z
           .string()
           .optional()
@@ -427,6 +433,7 @@ export const IcebergConnectionSchema = z.object({
             FieldOptions.of({
               label: "Secret Access Key",
               inputType: "password",
+              optionRegex: "(secret.?access.?key|aws.?secret)",
             }),
           ),
         "dynamodb.session-token": z
@@ -436,6 +443,7 @@ export const IcebergConnectionSchema = z.object({
             FieldOptions.of({
               label: "Session Token",
               inputType: "password",
+              optionRegex: "(session.?token|aws.?session)",
             }),
           ),
       }),
@@ -484,7 +492,7 @@ export const RedshiftConnectionSchema = z
               FieldOptions.of({
                 label: "AWS Access Key ID",
                 inputType: "password",
-                optionRegex: ".*aws_access_key_id.*",
+                optionRegex: "(access.?key.?id|aws.?access.?key)",
               }),
             ),
           aws_secret_access_key: z
@@ -494,7 +502,7 @@ export const RedshiftConnectionSchema = z
               FieldOptions.of({
                 label: "AWS Secret Access Key",
                 inputType: "password",
-                optionRegex: ".*aws_secret_access_key.*",
+                optionRegex: "(secret.?access.?key|aws.?secret)",
               }),
             ),
           aws_session_token: z
@@ -504,7 +512,7 @@ export const RedshiftConnectionSchema = z
               FieldOptions.of({
                 label: "AWS Session Token",
                 inputType: "password",
-                optionRegex: ".*aws_session_token.*",
+                optionRegex: "(session.?token|aws.?session)",
               }),
             ),
         }),

package/src/components/editor/connections/form-renderers.tsx

@@ -1,20 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { KeyIcon, PlusCircleIcon } from "lucide-react";
-import { createContext, type ReactNode, use } from "react";
+import { createContext, type ReactNode, use, useMemo } from "react";
 import { z } from "zod";
 import type { FormRenderer } from "@/components/forms/form";
 import { FieldOptions } from "@/components/forms/options";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import {
   FormControl,
   FormDescription,
@@ -23,18 +13,15 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { NumberField } from "@/components/ui/number-field";
 import { SECRETS_REGISTRY } from "@/core/secrets/request-registry";
 import { useAsyncData } from "@/hooks/useAsyncData";
-import { partition } from "@/utils/arrays";
-import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
 import {
   sortProviders,
   WriteSecretModal,
 } from "../chrome/panels/write-secret-modal";
-import { displaySecret, isSecret, prefixSecret } from "./secrets";
+import { partitionSecretKeys, SecretCombobox } from "./secret-combobox";
+import { prefixSecret } from "./secrets";
 
 interface SecretsContextType {
   providerNames: string[];
@@ -77,25 +64,23 @@ export const SecretsProvider = ({ children }: SecretsProviderProps) => {
     };
   }, []);
 
-  return (
-    <SecretsContext
-      value={{
-        secretKeys: data?.secretKeys || [],
-        providerNames: data?.providerNames || [],
-        loading: isPending,
-        error,
-        refreshSecrets: reload,
-      }}
-    >
-      {children}
-    </SecretsContext>
+  const value = useMemo(
+    () => ({
+      secretKeys: data?.secretKeys || [],
+      providerNames: data?.providerNames || [],
+      loading: isPending,
+      error,
+      refreshSecrets: reload,
+    }),
+    [data?.secretKeys, data?.providerNames, isPending, error, reload],
   );
+
+  return <SecretsContext value={value}>{children}</SecretsContext>;
 };
 
-export const ENV_RENDERER: FormRenderer<z.ZodString | z.ZodNumber> = {
-  isMatch: (schema: z.ZodType): schema is z.ZodString | z.ZodNumber => {
-    // string or number with optionsRegex
-    if (schema instanceof z.ZodString || schema instanceof z.ZodNumber) {
+export const ENV_RENDERER: FormRenderer<z.ZodString> = {
+  isMatch: (schema: z.ZodType): schema is z.ZodString => {
+    if (schema instanceof z.ZodString) {
       const { optionRegex } = FieldOptions.parse(schema.description || "");
       return Boolean(optionRegex);
     }
@@ -109,12 +94,13 @@ export const ENV_RENDERER: FormRenderer<z.ZodString | z.ZodNumber> = {
     const {
       label,
       description,
+      placeholder,
       optionRegex = "",
+      inputType,
     } = FieldOptions.parse(schema.description || "");
 
-    const [recommendedKeys, otherKeys] = partition(secretKeys, (key) =>
-      new RegExp(optionRegex, "i").test(key),
-    );
+    const secretsOnly = inputType === "password";
+    const { recommended, other } = partitionSecretKeys(secretKeys, optionRegex);
 
     return (
       <FormField
@@ -125,82 +111,28 @@ export const ENV_RENDERER: FormRenderer<z.ZodString | z.ZodNumber> = {
             <FormLabel>{label}</FormLabel>
             <FormDescription>{description}</FormDescription>
             <FormControl>
-              <div className="flex gap-2">
-                {schema instanceof z.ZodString ? (
-                  <Input
-                    {...field}
-                    value={displaySecret(field.value as string)}
-                    onChange={field.onChange}
-                    className={cn("flex-1")}
-                  />
-                ) : (
-                  <NumberField
-                    {...field}
-                    value={field.value as number}
-                    onChange={field.onChange}
-                    className="flex-1"
-                  />
-                )}
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild={true}>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      className={cn(
-                        isSecret(field.value as string) && "bg-accent",
-                      )}
-                    >
-                      <KeyIcon className="h-3 w-3" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    align="end"
-                    className="max-h-60 overflow-y-auto"
-                  >
-                    <DropdownMenuItem
-                      onSelect={() => {
-                        openModal(
-                          <WriteSecretModal
-                            providerNames={providerNames}
-                            onSuccess={(secretKey) => {
-                              refreshSecrets();
-                              field.onChange(prefixSecret(secretKey));
-                              closeModal();
-                            }}
-                            onClose={closeModal}
-                          />,
-                        );
+              <SecretCombobox
+                value={field.value ? String(field.value) : ""}
+                onChange={field.onChange}
+                placeholder={placeholder}
+                secretsOnly={secretsOnly}
+                recommendedKeys={recommended}
+                otherKeys={other}
+                onCreateSecret={(suggestedValue) => {
+                  openModal(
+                    <WriteSecretModal
+                      providerNames={providerNames}
+                      initialValue={suggestedValue}
+                      onSuccess={(secretKey) => {
+                        refreshSecrets();
+                        field.onChange(prefixSecret(secretKey));
+                        closeModal();
                       }}
-                    >
-                      <PlusCircleIcon className="mr-2 h-3.5 w-3.5" />
-                      Create a new secret
-                    </DropdownMenuItem>
-                    {recommendedKeys.length > 0 && (
-                      <>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuLabel>Recommended</DropdownMenuLabel>
-                      </>
-                    )}
-                    {recommendedKeys.map((key) => (
-                      <DropdownMenuItem
-                        key={key}
-                        onSelect={() => field.onChange(prefixSecret(key))}
-                      >
-                        {displaySecret(key)}
-                      </DropdownMenuItem>
-                    ))}
-                    {otherKeys.length > 0 && <DropdownMenuSeparator />}
-                    {otherKeys.map((key) => (
-                      <DropdownMenuItem
-                        key={key}
-                        onSelect={() => field.onChange(prefixSecret(key))}
-                      >
-                        {displaySecret(key)}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
+                      onClose={closeModal}
+                    />,
+                  );
+                }}
+              />
             </FormControl>
             <FormMessage />
           </FormItem>