@marimo-team/frontend 0.23.16-dev5 → 0.23.16-dev51

package/src/components/editor/connections/database/__tests__/__snapshots__/as-code.test.ts.snap

@@ -4,7 +4,7 @@ exports[`generateDatabaseCode > basic connections > bigquery 1`] = `
 "import json
 import sqlmodel
 
-credentials = json.loads("""{"type": "service_account", "project_id": "test"}""")
+credentials = json.loads(r"""{"type": "service_account", "project_id": "test"}""")
 engine = sqlmodel.create_engine(f"bigquery://my-project/my_dataset", credentials_info=credentials)"
 `;
 
@@ -388,10 +388,26 @@ import sqlmodel
 
 _project = os.environ.get("ENV_PROJECT")
 _dataset = os.environ.get("ENV_DATASET")
-credentials = json.loads("""{"type": "service_account", "project_id": "test"}""")
+credentials = json.loads(r"""{"type": "service_account", "project_id": "test"}""")
 engine = sqlmodel.create_engine(f"bigquery://{_project}/{_dataset}", credentials_info=credentials)"
 `;
 
+exports[`generateDatabaseCode > connections with secrets > bigquery with credentials_json as a file path 1`] = `
+"import sqlmodel
+
+engine = sqlmodel.create_engine(f"bigquery://my-project/my_dataset", credentials_path="/etc/secrets/bigquery.json")"
+`;
+
+exports[`generateDatabaseCode > connections with secrets > bigquery with credentials_json as secret 1`] = `
+"import json
+import os
+import sqlmodel
+
+_credentials_json = os.environ.get("BIGQUERY_CREDENTIALS_JSON")
+credentials = json.loads(_credentials_json)
+engine = sqlmodel.create_engine(f"bigquery://my-project/my_dataset", credentials_info=credentials)"
+`;
+
 exports[`generateDatabaseCode > connections with secrets > clickhouse with all connection details as secrets 1`] = `
 "import clickhouse_connect
 import os
@@ -493,7 +509,7 @@ exports[`generateDatabaseCode > edge cases > bigquery with long credentials 1`]
 "import json
 import sqlmodel
 
-credentials = json.loads("""xxxxxxxxxx""")
+credentials = json.loads(r"""xxxxxxxxxx""")
 engine = sqlmodel.create_engine(f"bigquery://my-project/my_dataset", credentials_info=credentials)"
 `;
 
@@ -735,7 +751,7 @@ exports[`generateDatabaseCode > security cases > bigquery with malformed JSON 1`
 "import json
 import sqlmodel
 
-credentials = json.loads("""{"type": "service_account", "project_id": "test"""")
+credentials = json.loads(r"""{"type": "service_account", "project_id": "test"""")
 engine = sqlmodel.create_engine(f"bigquery://my-project/my_dataset", credentials_info=credentials)"
 `;
 
@@ -743,7 +759,7 @@ exports[`generateDatabaseCode > security cases > bigquery with malformed JSON 2`
 "import json
 import sqlalchemy
 
-credentials = json.loads("""{"type": "service_account", "project_id": "test"""")
+credentials = json.loads(r"""{"type": "service_account", "project_id": "test"""")
 engine = sqlalchemy.create_engine(f"bigquery://my-project/my_dataset", credentials_info=credentials)"
 `;
 

package/src/components/editor/connections/database/__tests__/as-code.test.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
+import { prefixPath } from "../../paths";
 import { prefixSecret } from "../../secrets";
 import { type ConnectionLibrary, generateDatabaseCode } from "../as-code";
 import type { DatabaseConnection } from "../schemas";
@@ -383,6 +384,22 @@ describe("generateDatabaseCode", () => {
         },
         "sqlmodel",
       ],
+      [
+        "bigquery with credentials_json as secret",
+        {
+          ...bigqueryConnection,
+          credentials_json: prefixSecret("BIGQUERY_CREDENTIALS_JSON"),
+        },
+        "sqlmodel",
+      ],
+      [
+        "bigquery with credentials_json as a file path",
+        {
+          ...bigqueryConnection,
+          credentials_json: prefixPath("/etc/secrets/bigquery.json"),
+        },
+        "sqlmodel",
+      ],
       [
         "clickhouse with all connection details as secrets",
         {

package/src/components/editor/connections/database/as-code.ts

@@ -2,6 +2,7 @@
 
 import dedent from "string-dedent";
 import { assertNever } from "@/utils/assertNever";
+import { escapePythonString, resolveJsonCredential } from "../json-credentials";
 import { isSecret, unprefixSecret } from "../secrets";
 import { type DatabaseConnection, DatabaseConnectionSchema } from "./schemas";
 
@@ -415,8 +416,14 @@ ${formatUrlParams(params, (inner) => `              ${inner}`)},
 }
 
 class BigQueryGenerator extends CodeGenerator<"bigquery"> {
+  private get credential() {
+    return resolveJsonCredential(this.connection.credentials_json, (v) =>
+      this.secrets.print("credentials_json", v),
+    );
+  }
+
   generateImports(): string[] {
-    return ["import json"];
+    return this.credential.kind === "path" ? [] : ["import json"];
   }
 
   generateConnectionCode(): string {
@@ -428,9 +435,16 @@ class BigQueryGenerator extends CodeGenerator<"bigquery"> {
       "dataset",
       this.connection.dataset,
     );
+    const credential = this.credential;
+
+    if (credential.kind === "path") {
+      return dedent(`
+        engine = ${this.orm}.create_engine(f"bigquery://${project}/${dataset}", credentials_path="${escapePythonString(credential.path)}")
+      `);
+    }
 
     return dedent(`
-      credentials = json.loads("""${this.connection.credentials_json}""")
+      credentials = ${credential.expr}
       engine = ${this.orm}.create_engine(f"bigquery://${project}/${dataset}", credentials_info=credentials)
     `);
   }

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

@@ -295,11 +295,12 @@ export const BigQueryConnectionSchema = z
           optionRegex: "(bigquery.?dataset|dataset)",
         }),
       ),
-    credentials_json: z
-      .string()
-      .describe(
-        FieldOptions.of({ label: "Credentials JSON", inputType: "textarea" }),
-      ),
+    credentials_json: z.string().describe(
+      FieldOptions.of({
+        label: "Credentials JSON",
+        special: "secret_textarea",
+      }),
+    ),
   })
   .describe(FieldOptions.of({ direction: "two-columns" }));
 

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

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { InfoIcon } from "lucide-react";
 import { createContext, type ReactNode, use, useMemo } from "react";
 import { z } from "zod";
 import type { FormRenderer } from "@/components/forms/form";
@@ -13,6 +14,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { Tooltip } from "@/components/ui/tooltip";
 import { SECRETS_REGISTRY } from "@/core/secrets/request-registry";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { Functions } from "@/utils/functions";
@@ -20,8 +22,10 @@ import {
   sortProviders,
   WriteSecretModal,
 } from "../chrome/panels/write-secret-modal";
+import { looksLikeJson } from "./json-credentials";
+import { isPath, prefixPath, unprefixPath } from "./paths";
 import { partitionSecretKeys, SecretCombobox } from "./secret-combobox";
-import { prefixSecret } from "./secrets";
+import { isSecret, prefixSecret } from "./secrets";
 
 interface SecretsContextType {
   providerNames: string[];
@@ -141,3 +145,97 @@ export const ENV_RENDERER: FormRenderer<z.ZodString> = {
     );
   },
 };
+
+/**
+ * For credentials that shouldn't be baked into the generated notebook code
+ * (e.g. a service-account JSON key).
+ */
+export const SECRET_TEXTAREA_RENDERER: FormRenderer<z.ZodString> = {
+  isMatch: (schema: z.ZodType): schema is z.ZodString => {
+    if (schema instanceof z.ZodString) {
+      const { special } = FieldOptions.parse(schema.description || "");
+      return special === "secret_textarea";
+    }
+    return false;
+  },
+  Component: ({ schema, form, path }) => {
+    const { secretKeys, providerNames, refreshSecrets } = useSecrets();
+    const { openModal, closeModal } = useImperativeModal();
+    const { label, description, placeholder } = FieldOptions.parse(
+      schema.description || "",
+    );
+
+    return (
+      <FormField
+        control={form.control}
+        name={path}
+        render={({ field }) => {
+          const value = field.value ? String(field.value) : "";
+          // Non-secret values are file paths; display them unprefixed.
+          const displayValue = isPath(value) ? unprefixPath(value) : value;
+
+          return (
+            <FormItem>
+              <FormLabel className="flex items-center gap-1">
+                {label}
+                <Tooltip
+                  content="Enter a path to a file on disk, or create a secret to paste JSON directly."
+                  delayDuration={300}
+                >
+                  <button
+                    type="button"
+                    className="inline-flex"
+                    aria-label="Credential input help"
+                  >
+                    <InfoIcon className="h-3.5 w-3.5" />
+                  </button>
+                </Tooltip>
+              </FormLabel>
+              <FormDescription>{description}</FormDescription>
+              <FormControl>
+                <SecretCombobox
+                  value={displayValue}
+                  onChange={(next) => {
+                    field.onChange(
+                      !next || isSecret(next) || isPath(next)
+                        ? next
+                        : prefixPath(next),
+                    );
+                  }}
+                  placeholder={placeholder}
+                  searchPlaceholder="Type a file path or paste JSON"
+                  formatCustomValueLabel={(custom) =>
+                    `Use "${custom}" as a file path`
+                  }
+                  createSecretLabel="Paste JSON credentials"
+                  allowCustomValue={(search) => !looksLikeJson(search)}
+                  allowCreateSecret={(search) =>
+                    !search || looksLikeJson(search)
+                  }
+                  recommendedKeys={[]}
+                  otherKeys={secretKeys}
+                  onCreateSecret={(suggestedValue) => {
+                    openModal(
+                      <WriteSecretModal
+                        providerNames={providerNames}
+                        initialValue={suggestedValue}
+                        multiline={true}
+                        onSuccess={(secretKey) => {
+                          refreshSecrets();
+                          field.onChange(prefixSecret(secretKey));
+                          closeModal();
+                        }}
+                        onClose={closeModal}
+                      />,
+                    );
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          );
+        }}
+      />
+    );
+  },
+};

package/src/components/editor/connections/json-credentials.ts

@@ -0,0 +1,57 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { isPath, unprefixPath } from "./paths";
+import { isSecret } from "./secrets";
+
+export type JsonCredential =
+  | { kind: "path"; path: string }
+  | { kind: "json"; expr: string };
+
+/**
+ * Resolves a `secret_textarea` field's value — a file path, a secret
+ * reference, or a raw literal — into either a path to hand to a
+ * provider's path-based auth kwarg, or a `json.loads(...)` expression.
+ */
+export function resolveJsonCredential(
+  value: string,
+  printSecret: (value: string) => string,
+): JsonCredential {
+  if (isPath(value)) {
+    return { kind: "path", path: unprefixPath(value) };
+  }
+  const expr = isSecret(value)
+    ? `json.loads(${printSecret(value)})`
+    : // Use raw string to avoid interpreting \n escapes as newlines.
+      `json.loads(r"""${value}""")`;
+  return { kind: "json", expr };
+}
+
+export function looksLikeJson(value: string): boolean {
+  const trimmed = value.trimStart();
+  return trimmed.startsWith("{") || trimmed.startsWith("[");
+}
+
+/**
+ * Collapse a credential value to a single dotenv-safe line: minify JSON
+ * when parseable, otherwise strip newlines.
+ */
+export function flattenSecretValue(value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    return JSON.stringify(JSON.parse(trimmed));
+  } catch {
+    return value.replaceAll(/\r?\n/g, "");
+  }
+}
+
+/** Escape a filesystem path for embedding in a Python double-quoted string. */
+export function escapePythonString(value: string): string {
+  return value
+    .replaceAll("\\", "\\\\")
+    .replaceAll('"', '\\"')
+    .replaceAll("\n", "\\n")
+    .replaceAll("\r", "\\r")
+    .replaceAll("\t", "\\t");
+}

package/src/components/editor/connections/paths.ts

@@ -0,0 +1,21 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { TypedString } from "@/utils/typed";
+
+const PREFIX = "path:";
+
+export type PathPlaceholder = TypedString<"path">;
+
+export function isPath(value: unknown): value is PathPlaceholder {
+  if (typeof value !== "string") {
+    return false;
+  }
+  return value.startsWith(PREFIX);
+}
+
+export function prefixPath(value: string): PathPlaceholder {
+  return `${PREFIX}${value}` as PathPlaceholder;
+}
+
+export function unprefixPath(value: PathPlaceholder): string {
+  return value.slice(PREFIX.length);
+}

package/src/components/editor/connections/secret-combobox.tsx

@@ -56,6 +56,16 @@ interface SecretComboboxProps {
   /** Opens the create-secret flow; `suggestedValue` is the current search text when present. */
   onCreateSecret: (suggestedValue?: string) => void;
   className?: string;
+  /** Placeholder for the search input inside the popover. */
+  searchPlaceholder?: string;
+  /** Label for the "commit a free-text literal" item, e.g. `Use "${value}" as a path`. */
+  formatCustomValueLabel?: (value: string) => string;
+  /** Label for the "create a new secret" item. */
+  createSecretLabel?: string;
+  /** When false for the current search, hide the free-text / path option. */
+  allowCustomValue?: (search: string) => boolean;
+  /** When false for the current search, hide the "create a new secret" option. */
+  allowCreateSecret?: (search: string) => boolean;
 }
 
 /**
@@ -73,6 +83,11 @@ export const SecretCombobox: React.FC<SecretComboboxProps> = ({
   otherKeys,
   onCreateSecret,
   className,
+  searchPlaceholder,
+  formatCustomValueLabel = (custom) => `Use "${custom}"`,
+  createSecretLabel = "Create a new secret",
+  allowCustomValue,
+  allowCreateSecret,
 }) => {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -81,7 +96,11 @@ export const SecretCombobox: React.FC<SecretComboboxProps> = ({
   // Non-secret fields may commit a literal even when it collides with an
   // existing secret key, so we intentionally don't filter out matches here.
   const showCustomValue =
-    !secretsOnly && trimmedSearch.length > 0 && trimmedSearch !== value;
+    !secretsOnly &&
+    trimmedSearch.length > 0 &&
+    trimmedSearch !== value &&
+    (allowCustomValue?.(trimmedSearch) ?? true);
+  const showCreateSecret = allowCreateSecret?.(trimmedSearch) ?? true;
 
   const displayValue = (() => {
     if (!value) {
@@ -158,9 +177,10 @@ export const SecretCombobox: React.FC<SecretComboboxProps> = ({
           <Command>
             <CommandInput
               placeholder={
-                secretsOnly
+                searchPlaceholder ??
+                (secretsOnly
                   ? "Search secrets..."
-                  : "Type a value or search secrets..."
+                  : "Type a value or search secrets...")
               }
               rootClassName="px-1 h-8"
               autoFocus={true}
@@ -174,26 +194,27 @@ export const SecretCombobox: React.FC<SecretComboboxProps> = ({
                     value={`use custom value ${trimmedSearch}`}
                     onSelect={() => selectCustom(trimmedSearch)}
                   >
-                    Use "{trimmedSearch}"
+                    {formatCustomValueLabel(trimmedSearch)}
+                  </CommandItem>
+                </CommandGroup>
+              )}
+              {showCreateSecret && (
+                <CommandGroup className="mt-0">
+                  <CommandItem
+                    // Include search so this stays visible while filtering
+                    value={`create new secret ${trimmedSearch}`}
+                    onSelect={() => {
+                      const suggestedValue = trimmedSearch || undefined;
+                      setOpen(false);
+                      setSearch("");
+                      onCreateSecret(suggestedValue);
+                    }}
+                  >
+                    <PlusCircleIcon className="mr-2 h-3.5 w-3.5" />
+                    {createSecretLabel}
                   </CommandItem>
                 </CommandGroup>
               )}
-              {showCustomValue && <CommandSeparator />}
-              <CommandGroup className="mt-0">
-                <CommandItem
-                  // Include search so this stays visible while filtering
-                  value={`create new secret ${trimmedSearch}`}
-                  onSelect={() => {
-                    const suggestedValue = trimmedSearch || undefined;
-                    setOpen(false);
-                    setSearch("");
-                    onCreateSecret(suggestedValue);
-                  }}
-                >
-                  <PlusCircleIcon className="mr-2 h-3.5 w-3.5" />
-                  Create a new secret
-                </CommandItem>
-              </CommandGroup>
               {recommendedKeys.length > 0 && (
                 <>
                   <CommandSeparator className="mt-0" />

package/src/components/editor/connections/storage/__tests__/__snapshots__/as-code.test.ts.snap

@@ -51,6 +51,21 @@ store = S3Store("operator-bucket",
 )"
 `;
 
+exports[`generateStorageCode > CoreWeave > with container credentials 1`] = `
+"from obstore.store import S3Store
+import os
+
+_container_credentials_full_uri = os.environ.get("AWS_CONTAINER_CREDENTIALS_FULL_URI")
+_container_authorization_token_file = os.environ.get("AWS_CONTAINER_AUTHORIZATION_TOKEN_FILE")
+store = S3Store("operator-bucket",
+    region="US-EAST-04A",
+    container_credentials_full_uri=_container_credentials_full_uri,
+    container_authorization_token_file=_container_authorization_token_file,
+    endpoint="https://operator-bucket.cwobject.com",
+    virtual_hosted_style_request=True,
+)"
+`;
+
 exports[`generateStorageCode > CoreWeave > with secrets 1`] = `
 "from obstore.store import S3Store
 import os
@@ -70,7 +85,27 @@ exports[`generateStorageCode > GCS > with service account key 1`] = `
 "from obstore.store import GCSStore
 import json
 
-_credentials = json.loads("""{"type": "service_account", "project_id": "test"}""")
+_credentials = json.loads(r"""{"type": "service_account", "project_id": "test"}""")
+store = GCSStore("my-bucket",
+    service_account_key=_credentials,
+)"
+`;
+
+exports[`generateStorageCode > GCS > with service account key from a file path 1`] = `
+"from obstore.store import GCSStore
+
+store = GCSStore("my-bucket",
+    service_account_path="/etc/secrets/gcs.json",
+)"
+`;
+
+exports[`generateStorageCode > GCS > with service account key from secrets 1`] = `
+"from obstore.store import GCSStore
+import json
+import os
+
+_service_account_key = os.environ.get("GCS_SERVICE_ACCOUNT_KEY")
+_credentials = json.loads(_service_account_key)
 store = GCSStore("my-bucket",
     service_account_key=_credentials,
 )"
@@ -99,7 +134,23 @@ exports[`generateStorageCode > Google Drive > with service account credentials 1
 "from gdrive_fsspec import GoogleDriveFileSystem
 import json
 
-_creds = json.loads("""{"type": "service_account", "client_email": "test@test.iam.gserviceaccount.com"}""")
+_creds = json.loads(r"""{"type": "service_account", "client_email": "test@test.iam.gserviceaccount.com"}""")
+fs = GoogleDriveFileSystem(creds=_creds, token="service_account", use_listings_cache=False, skip_instance_cache=True)"
+`;
+
+exports[`generateStorageCode > Google Drive > with service account credentials from a file path 1`] = `
+"from gdrive_fsspec import GoogleDriveFileSystem
+
+fs = GoogleDriveFileSystem(creds="/etc/secrets/gdrive.json", token="service_account", use_listings_cache=False, skip_instance_cache=True)"
+`;
+
+exports[`generateStorageCode > Google Drive > with service account credentials from secrets 1`] = `
+"from gdrive_fsspec import GoogleDriveFileSystem
+import json
+import os
+
+_credentials_json = os.environ.get("GDRIVE_CREDENTIALS_JSON")
+_creds = json.loads(_credentials_json)
 fs = GoogleDriveFileSystem(creds=_creds, token="service_account", use_listings_cache=False, skip_instance_cache=True)"
 `;
 
@@ -119,6 +170,29 @@ exports[`generateStorageCode > S3 > minimal connection (bucket only) 1`] = `
 store = S3Store("my-bucket",)"
 `;
 
+exports[`generateStorageCode > S3 > with container credentials 1`] = `
+"from obstore.store import S3Store
+
+store = S3Store("my-bucket",
+    region="us-east-1",
+    container_credentials_full_uri="http://169.254.170.23/v1/credentials",
+    container_authorization_token_file="/var/run/secrets/token",
+)"
+`;
+
+exports[`generateStorageCode > S3 > with container credentials from secrets 1`] = `
+"from obstore.store import S3Store
+import os
+
+_container_credentials_full_uri = os.environ.get("AWS_CONTAINER_CREDENTIALS_FULL_URI")
+_container_authorization_token_file = os.environ.get("AWS_CONTAINER_AUTHORIZATION_TOKEN_FILE")
+store = S3Store("my-bucket",
+    region="us-east-1",
+    container_credentials_full_uri=_container_credentials_full_uri,
+    container_authorization_token_file=_container_authorization_token_file,
+)"
+`;
+
 exports[`generateStorageCode > S3 > with custom endpoint 1`] = `
 "from obstore.store import S3Store
 
@@ -130,6 +204,18 @@ store = S3Store("my-bucket",
 )"
 `;
 
+exports[`generateStorageCode > S3 > with plain-http endpoint 1`] = `
+"from obstore.store import S3Store
+
+store = S3Store("my-bucket",
+    region="us-east-1",
+    access_key_id="AKIAIOSFODNN7EXAMPLE",
+    secret_access_key="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
+    endpoint_url="http://cwlota.com",
+    allow_http=True,
+)"
+`;
+
 exports[`generateStorageCode > S3 > with secrets 1`] = `
 "from obstore.store import S3Store
 import os