@marimo-team/islands 0.20.3-dev94 → 0.20.3-dev96

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

@@ -0,0 +1,141 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { z } from "zod";
+import { FieldOptions } from "@/components/forms/options";
+
+export const S3StorageSchema = z
+  .object({
+    type: z.literal("s3"),
+    bucket: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Bucket",
+          placeholder: "my-bucket",
+        }),
+      ),
+    region: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Region",
+          placeholder: "us-east-1",
+          optionRegex: ".*region.*",
+        }),
+      ),
+    access_key_id: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Access Key ID",
+          inputType: "password",
+          optionRegex: ".*access_key.*",
+        }),
+      ),
+    secret_access_key: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Secret Access Key",
+          inputType: "password",
+          optionRegex: ".*secret.*access.*",
+        }),
+      ),
+    endpoint_url: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Endpoint URL",
+          placeholder: "https://s3.amazonaws.com",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const GCSStorageSchema = z
+  .object({
+    type: z.literal("gcs"),
+    bucket: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Bucket",
+          placeholder: "my-bucket",
+        }),
+      ),
+    service_account_key: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Service Account Key (JSON)",
+          inputType: "textarea",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const AzureStorageSchema = z
+  .object({
+    type: z.literal("azure"),
+    container: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Container",
+          placeholder: "my-container",
+        }),
+      ),
+    account_name: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Account Name",
+          placeholder: "storageaccount",
+          optionRegex: ".*account.*",
+        }),
+      ),
+    account_key: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Account Key",
+          inputType: "password",
+          optionRegex: ".*azure.*key.*",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const GoogleDriveStorageSchema = z
+  .object({
+    type: z.literal("gdrive"),
+    credentials_json: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Service Account JSON",
+          description: "Leave empty to use browser-based authentication",
+          inputType: "textarea",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const StorageConnectionSchema = z.discriminatedUnion("type", [
+  S3StorageSchema,
+  GCSStorageSchema,
+  AzureStorageSchema,
+  GoogleDriveStorageSchema,
+]);
+
+export type StorageConnection = z.infer<typeof StorageConnectionSchema>;

package/src/components/storage/components.tsx

@@ -19,8 +19,10 @@ import {
   ImageIcon,
 } from "lucide-react";
 import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
+import GoogleDriveIcon from "@/components/databases/icons/google-drive.svg?inline";
 import type { KnownStorageProtocol } from "@/core/storage/types";
 import { useTheme } from "@/theme/useTheme";
+import { cn } from "@/utils/cn";
 
 export function renderFileIcon(name: string): React.ReactNode {
   const ext = name.split(".").pop()?.toLowerCase();
@@ -67,12 +69,14 @@ const PROTOCOL_ICONS: Record<KnownStorageProtocol, IconEntry> = {
   http: GlobeIcon,
   file: HardDriveIcon,
   "in-memory": DatabaseZapIcon,
+  gdrive: { src: GoogleDriveIcon },
   github: GithubIcon,
 };
 
 export const ProtocolIcon: React.FC<{
   protocol: KnownStorageProtocol | (string & {});
-}> = ({ protocol }) => {
+  className?: string;
+}> = ({ protocol, className }) => {
   const { theme } = useTheme();
   const entry =
     PROTOCOL_ICONS[protocol.toLowerCase() as KnownStorageProtocol] ??
@@ -80,9 +84,11 @@ export const ProtocolIcon: React.FC<{
 
   if ("src" in entry) {
     const src = theme === "dark" && entry.dark ? entry.dark : entry.src;
-    return <img src={src} alt={protocol} className="h-3.5 w-3.5" />;
+    return (
+      <img src={src} alt={protocol} className={cn("h-3.5 w-3.5", className)} />
+    );
   }
 
   const Icon = entry;
-  return <Icon className="h-3.5 w-3.5" />;
+  return <Icon className={cn("h-3.5 w-3.5", className)} />;
 };

package/src/components/storage/storage-inspector.tsx

@@ -10,6 +10,7 @@ import {
   HelpCircleIcon,
   LoaderCircle,
   MoreVerticalIcon,
+  PlusIcon,
   RefreshCwIcon,
   ViewIcon,
   XIcon,
@@ -18,6 +19,7 @@ import React, { useCallback, useState } from "react";
 import { useLocale } from "react-aria";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import { PanelEmptyState } from "@/components/editor/chrome/panels/empty-state";
+import { AddConnectionDialog } from "@/components/editor/connections/add-connection-dialog";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
 import {
   DropdownMenu,
@@ -550,6 +552,14 @@ export const StorageInspector: React.FC = () => {
             .
           </span>
         }
+        action={
+          <AddConnectionDialog defaultTab="storage">
+            <Button variant="outline" size="sm">
+              Add remote storage
+              <PlusIcon className="h-4 w-4 ml-2" />
+            </Button>
+          </AddConnectionDialog>
+        }
         icon={<HardDriveIcon className="h-8 w-8" />}
       />
     );
@@ -595,8 +605,17 @@ export const StorageInspector: React.FC = () => {
             content="Filters loaded entries only. Expand directories to include their contents in the search."
             delayDuration={200}
           >
-            <HelpCircleIcon className="h-3.5 w-3.5 mr-2 shrink-0 cursor-help text-muted-foreground hover:text-foreground" />
+            <HelpCircleIcon className="h-3.5 w-3.5 shrink-0 cursor-help text-muted-foreground hover:text-foreground mr-2" />
           </Tooltip>
+          <AddConnectionDialog defaultTab="storage">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="px-2 border-0 border-l border-muted-background rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
+            >
+              <PlusIcon className="h-4 w-4" />
+            </Button>
+          </AddConnectionDialog>
         </div>
         <CommandList className="flex flex-col">
           {namespaces.map((ns) => (

package/src/core/codemirror/__tests__/format.test.ts

@@ -4,7 +4,7 @@ import { python } from "@codemirror/lang-python";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { atom } from "jotai";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import type { NotebookState } from "@/core/cells/cells";
 import { getNotebook } from "@/core/cells/cells";
@@ -44,6 +44,7 @@ vi.mock("@/core/config/config", () => ({
 }));
 
 const updateCellCode = vi.fn();
+const createdViews: EditorView[] = [];
 
 function createEditor(content: string, cellId: CellId) {
   const state = EditorState.create({
@@ -74,6 +75,7 @@ function createEditor(content: string, cellId: CellId) {
     parent: document.body,
   });
 
+  createdViews.push(view);
   return view;
 }
 
@@ -88,6 +90,12 @@ beforeEach(() => {
   store.set(requestClientAtom, mockRequestClient);
 });
 
+afterEach(() => {
+  for (const view of createdViews) {
+    view.destroy();
+  }
+});
+
 describe("format", () => {
   describe("formatEditorViews", () => {
     it("should format code in editor views", async () => {

package/src/core/storage/types.ts

@@ -54,5 +54,6 @@ export type KnownStorageProtocol =
   | "cloudflare"
   | "http"
   | "file"
+  | "gdrive"
   | "in-memory"
   | "github";

package/src/components/editor/database/add-database-form.tsx

@@ -1,420 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import type { z } from "zod";
-import { DatabaseLogo, type DBLogoName } from "@/components/databases/icon";
-import { type FormRenderer, ZodForm } from "@/components/forms/form";
-import { getDefaults } from "@/components/forms/form-utils";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { FormErrorsBanner } from "@/components/ui/form";
-import { ExternalLink } from "@/components/ui/links";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { useCellActions } from "@/core/cells/cells";
-import { useLastFocusedCellId } from "@/core/cells/focus";
-import {
-  ConnectionDisplayNames,
-  type ConnectionLibrary,
-  generateDatabaseCode,
-} from "./as-code";
-import { ENV_RENDERER, SecretsProvider } from "./form-renderers";
-import {
-  BigQueryConnectionSchema,
-  ChdbConnectionSchema,
-  ClickhouseConnectionSchema,
-  type DatabaseConnection,
-  DatabricksConnectionSchema,
-  DataFusionConnectionSchema,
-  DuckDBConnectionSchema,
-  IcebergConnectionSchema,
-  MotherDuckConnectionSchema,
-  MySQLConnectionSchema,
-  PostgresConnectionSchema,
-  PySparkConnectionSchema,
-  RedshiftConnectionSchema,
-  SnowflakeConnectionSchema,
-  SQLiteConnectionSchema,
-  SupabaseConnectionSchema,
-  TimeplusConnectionSchema,
-  TrinoConnectionSchema,
-} from "./schemas";
-
-interface Props {
-  onSubmit: () => void;
-}
-
-interface ConnectionSchema {
-  name: string;
-  schema: z.ZodType<DatabaseConnection>;
-  color: string;
-  logo: DBLogoName;
-  connectionLibraries: {
-    libraries: ConnectionLibrary[];
-    preferred: ConnectionLibrary;
-  };
-}
-
-// default to sqlalchemy because it has fewer dependencies
-const DATABASES = [
-  {
-    name: "PostgreSQL",
-    schema: PostgresConnectionSchema,
-    color: "#336791",
-    logo: "postgres",
-    connectionLibraries: {
-      libraries: ["sqlalchemy", "sqlmodel"],
-      preferred: "sqlalchemy",
-    },
-  },
-  {
-    name: "MySQL",
-    schema: MySQLConnectionSchema,
-    color: "#00758F",
-    logo: "mysql",
-    connectionLibraries: {
-      libraries: ["sqlalchemy", "sqlmodel"],
-      preferred: "sqlalchemy",
-    },
-  },
-  {
-    name: "SQLite",
-    schema: SQLiteConnectionSchema,
-    color: "#003B57",
-    logo: "sqlite",
-    connectionLibraries: {
-      libraries: ["sqlalchemy", "sqlmodel"],
-      preferred: "sqlalchemy",
-    },
-  },
-  {
-    name: "DuckDB",
-    schema: DuckDBConnectionSchema,
-    color: "#FFD700",
-    logo: "duckdb",
-    connectionLibraries: {
-      libraries: ["duckdb"],
-      preferred: "duckdb",
-    },
-  },
-  {
-    name: "MotherDuck",
-    schema: MotherDuckConnectionSchema,
-    color: "#ff9538",
-    logo: "motherduck",
-    connectionLibraries: {
-      libraries: ["duckdb"],
-      preferred: "duckdb",
-    },
-  },
-  {
-    name: "Snowflake",
-    schema: SnowflakeConnectionSchema,
-    color: "#29B5E8",
-    logo: "snowflake",
-    connectionLibraries: {
-      libraries: ["sqlalchemy", "sqlmodel"],
-      preferred: "sqlalchemy",
-    },
-  },
-  {
-    name: "ClickHouse",
-    schema: ClickhouseConnectionSchema,
-    color: "#2C2C1D",
-    logo: "clickhouse",
-    connectionLibraries: {
-      libraries: ["clickhouse_connect"],
-      preferred: "clickhouse_connect",
-    },
-  },
-  {
-    name: "Timeplus",
-    schema: TimeplusConnectionSchema,
-    color: "#B83280",
-    logo: "timeplus",
-    connectionLibraries: {
-      libraries: ["sqlalchemy", "sqlmodel"],
-      preferred: "sqlalchemy",
-    },
-  },
-  {
-    name: "BigQuery",
-    schema: BigQueryConnectionSchema,
-    color: "#4285F4",
-    logo: "bigquery",
-    connectionLibraries: {
-      libraries: ["sqlalchemy", "sqlmodel"],
-      preferred: "sqlalchemy",
-    },
-  },
-  {
-    name: "ClickHouse Embedded",
-    schema: ChdbConnectionSchema,
-    color: "#f2b611",
-    logo: "clickhouse",
-    connectionLibraries: {
-      libraries: ["chdb"],
-      preferred: "chdb",
-    },
-  },
-  {
-    name: "Trino",
-    schema: TrinoConnectionSchema,
-    color: "#d466b6",
-    logo: "trino",
-    connectionLibraries: {
-      libraries: ["sqlalchemy", "sqlmodel"],
-      preferred: "sqlalchemy",
-    },
-  },
-  {
-    name: "DataFusion",
-    schema: DataFusionConnectionSchema,
-    color: "#202A37",
-    logo: "datafusion",
-    connectionLibraries: {
-      libraries: ["ibis"],
-      preferred: "ibis",
-    },
-  },
-  {
-    name: "PySpark",
-    schema: PySparkConnectionSchema,
-    color: "#1C5162",
-    logo: "pyspark",
-    connectionLibraries: {
-      libraries: ["ibis"],
-      preferred: "ibis",
-    },
-  },
-  {
-    name: "Redshift",
-    schema: RedshiftConnectionSchema,
-    color: "#522BAE",
-    logo: "redshift",
-    connectionLibraries: {
-      libraries: ["redshift"],
-      preferred: "redshift",
-    },
-  },
-  {
-    name: "Databricks",
-    schema: DatabricksConnectionSchema,
-    color: "#c41e0c",
-    logo: "databricks",
-    connectionLibraries: {
-      libraries: ["sqlalchemy", "sqlmodel", "ibis"],
-      preferred: "sqlalchemy",
-    },
-  },
-  {
-    name: "Supabase",
-    schema: SupabaseConnectionSchema,
-    color: "#238F5F",
-    logo: "supabase",
-    connectionLibraries: {
-      libraries: ["sqlalchemy", "sqlmodel"],
-      preferred: "sqlalchemy",
-    },
-  },
-] satisfies ConnectionSchema[];
-
-const DATA_CATALOGS = [
-  {
-    name: "Iceberg",
-    schema: IcebergConnectionSchema,
-    color: "#000000",
-    logo: "iceberg",
-    connectionLibraries: {
-      libraries: ["pyiceberg"],
-      preferred: "pyiceberg",
-    },
-  },
-] satisfies ConnectionSchema[];
-
-const DatabaseSchemaSelector: React.FC<{
-  onSelect: (schema: z.ZodType<DatabaseConnection>) => void;
-}> = ({ onSelect }) => {
-  const renderItem = ({ name, schema, color, logo }: ConnectionSchema) => {
-    return (
-      <button
-        type="button"
-        key={name}
-        className="py-3 flex flex-col items-center justify-center gap-1 transition-all hover:scale-105 hover:brightness-110 rounded shadow-sm-solid hover:shadow-md-solid"
-        style={{ backgroundColor: color }}
-        onClick={() => onSelect(schema)}
-      >
-        <DatabaseLogo
-          name={logo}
-          className="w-8 h-8 text-white brightness-0 invert dark:invert"
-        />
-        <span className="text-white font-medium text-lg">{name}</span>
-      </button>
-    );
-  };
-
-  return (
-    <>
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-        {DATABASES.map(renderItem)}
-      </div>
-      <h4 className="font-semibold text-muted-foreground text-lg flex items-center gap-4">
-        Data Catalogs
-        <hr className="flex-1" />
-      </h4>
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-        {DATA_CATALOGS.map(renderItem)}
-      </div>
-    </>
-  );
-};
-
-const RENDERERS: FormRenderer[] = [ENV_RENDERER];
-
-const DatabaseForm: React.FC<{
-  schema: z.ZodType<DatabaseConnection>;
-  onSubmit: () => void;
-  onBack: () => void;
-}> = ({ schema, onSubmit, onBack }) => {
-  const form = useForm<DatabaseConnection>({
-    defaultValues: getDefaults(schema),
-    resolver: zodResolver(
-      schema as unknown as z.ZodType<unknown, DatabaseConnection>,
-    ),
-    reValidateMode: "onChange",
-  });
-
-  const connectionLibraries = [...DATABASES, ...DATA_CATALOGS].find(
-    (s) => s.schema === schema,
-  )?.connectionLibraries;
-  const [preferredConnection, setPreferredConnection] =
-    useState<ConnectionLibrary>(connectionLibraries?.preferred ?? "sqlalchemy");
-
-  const { createNewCell } = useCellActions();
-  const lastFocusedCellId = useLastFocusedCellId();
-
-  const handleInsertCode = (code: string) => {
-    createNewCell({
-      code,
-      before: false,
-      cellId: lastFocusedCellId ?? "__end__",
-      skipIfCodeExists: true,
-    });
-  };
-
-  const handleSubmit = (values: DatabaseConnection) => {
-    handleInsertCode(generateDatabaseCode(values, preferredConnection));
-    onSubmit();
-  };
-
-  return (
-    <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
-      <SecretsProvider>
-        <ZodForm schema={schema} form={form} renderers={RENDERERS}>
-          <FormErrorsBanner />
-        </ZodForm>
-      </SecretsProvider>
-      <div className="flex gap-2 justify-between">
-        <div className="flex gap-2">
-          <Button type="button" variant="outline" onClick={onBack}>
-            Back
-          </Button>
-          <Button type="submit" disabled={!form.formState.isValid}>
-            Add
-          </Button>
-        </div>
-        <div>
-          <Select
-            value={preferredConnection}
-            onValueChange={(value) =>
-              setPreferredConnection(value as ConnectionLibrary)
-            }
-          >
-            <div className="flex flex-col gap-1 items-end">
-              <SelectTrigger>
-                <SelectValue placeholder="Select a library" />
-              </SelectTrigger>
-              <span className="text-xs text-muted-foreground">
-                Preferred connection library
-              </span>
-            </div>
-            <SelectContent>
-              <SelectGroup>
-                {connectionLibraries?.libraries.map((library) => (
-                  <SelectItem key={library} value={library}>
-                    {ConnectionDisplayNames[library]}
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-    </form>
-  );
-};
-
-const AddDatabaseForm: React.FC<Props> = ({ onSubmit }) => {
-  const [selectedSchema, setSelectedSchema] =
-    useState<z.ZodType<DatabaseConnection> | null>(null);
-
-  if (!selectedSchema) {
-    return <DatabaseSchemaSelector onSelect={setSelectedSchema} />;
-  }
-
-  return (
-    <DatabaseForm
-      schema={selectedSchema}
-      onSubmit={onSubmit}
-      onBack={() => setSelectedSchema(null)}
-    />
-  );
-};
-
-export const AddDatabaseDialog: React.FC<{
-  children: React.ReactNode;
-}> = ({ children }) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild={true}>{children}</DialogTrigger>
-      <AddDatabaseDialogContent onClose={() => setOpen(false)} />
-    </Dialog>
-  );
-};
-
-export const AddDatabaseDialogContent: React.FC<{
-  onClose: () => void;
-}> = ({ onClose }) => {
-  return (
-    <DialogContent className="max-h-[75vh] overflow-y-auto">
-      <DialogHeader className="mb-4">
-        <DialogTitle>Add Connection</DialogTitle>
-        <DialogDescription>
-          Connect to your database or data catalog to query data directly from
-          your notebook. Learn more about how to connect to your database in our{" "}
-          <ExternalLink href="https://docs.marimo.io/guides/working_with_data/sql/#connecting-to-a-custom-database">
-            docs.
-          </ExternalLink>
-        </DialogDescription>
-      </DialogHeader>
-      <AddDatabaseForm onSubmit={() => onClose()} />
-    </DialogContent>
-  );
-};