@marimo-team/islands 0.23.15-dev57 → 0.23.15-dev58

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

@@ -0,0 +1,253 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { ChevronDownIcon, KeyIcon, PlusCircleIcon, XIcon } from "lucide-react";
+import React, { useState } from "react";
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/utils/cn";
+import { displaySecret, isSecret, prefixSecret } from "./secrets";
+
+export function partitionSecretKeys(
+  secretKeys: string[],
+  optionRegex: string,
+): { recommended: string[]; other: string[] } {
+  if (!optionRegex) {
+    return { recommended: [], other: [...secretKeys] };
+  }
+
+  let pattern: RegExp;
+  try {
+    pattern = new RegExp(optionRegex, "i");
+  } catch {
+    return { recommended: [], other: [...secretKeys] };
+  }
+
+  const recommended: string[] = [];
+  const other: string[] = [];
+  for (const key of secretKeys) {
+    if (pattern.test(key)) {
+      recommended.push(key);
+    } else {
+      other.push(key);
+    }
+  }
+  return { recommended, other };
+}
+
+interface SecretComboboxProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  /** When true, only secrets (or creating one) can be chosen — no free-text literals. */
+  secretsOnly?: boolean;
+  recommendedKeys: string[];
+  otherKeys: string[];
+  /** Opens the create-secret flow; `suggestedValue` is the current search text when present. */
+  onCreateSecret: (suggestedValue?: string) => void;
+  className?: string;
+}
+
+/**
+ * Searchable combobox for connection fields that may reference secrets.
+ *
+ * - Default: pick a secret, create one, or commit a free-text literal.
+ * - `secretsOnly`: pick or create a secret only (for passwords/tokens/keys).
+ */
+export const SecretCombobox: React.FC<SecretComboboxProps> = ({
+  value,
+  onChange,
+  placeholder,
+  secretsOnly = false,
+  recommendedKeys,
+  otherKeys,
+  onCreateSecret,
+  className,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const trimmedSearch = search.trim();
+  // 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;
+
+  const displayValue = (() => {
+    if (!value) {
+      return null;
+    }
+    if (isSecret(value)) {
+      return displaySecret(value);
+    }
+    return value;
+  })();
+
+  const selectSecret = (key: string) => {
+    onChange(prefixSecret(key));
+    setOpen(false);
+    setSearch("");
+  };
+
+  const selectCustom = (custom: string) => {
+    onChange(custom);
+    setOpen(false);
+    setSearch("");
+  };
+
+  const clearValue = () => {
+    onChange("");
+    setSearch("");
+    setOpen(false);
+  };
+
+  return (
+    <div
+      className={cn("flex w-full min-w-48 mb-1 items-center gap-1", className)}
+    >
+      <Popover
+        modal={true} // own scroll lock so trackpad/wheel works inside the portaled list
+        open={open}
+        onOpenChange={(next) => {
+          setOpen(next);
+          if (!next) {
+            setSearch("");
+          }
+        }}
+      >
+        <PopoverTrigger asChild={true}>
+          <button
+            type="button"
+            className={cn(
+              "flex h-6 min-w-0 flex-1 shadow-xs-solid items-center justify-between",
+              "rounded-sm border border-input bg-background px-1.5 text-sm font-code ring-offset-background placeholder:text-muted-foreground",
+              "hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid",
+              isSecret(value) && "bg-accent",
+            )}
+            aria-expanded={open}
+          >
+            <span className="truncate flex-1 min-w-0 text-left flex items-center gap-1.5">
+              {displayValue ? (
+                <>
+                  {isSecret(value) && (
+                    <KeyIcon className="h-3 w-3 shrink-0 opacity-70" />
+                  )}
+                  <span className="truncate">{displayValue}</span>
+                </>
+              ) : (
+                <span className="text-muted-foreground">{placeholder}</span>
+              )}
+            </span>
+            <ChevronDownIcon className="ml-1 h-4 w-4 opacity-50 shrink-0" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-(--radix-popover-trigger-width) p-0"
+          align="start"
+        >
+          <Command>
+            <CommandInput
+              placeholder={
+                secretsOnly
+                  ? "Search secrets..."
+                  : "Type a value or search secrets..."
+              }
+              rootClassName="px-1 h-8"
+              autoFocus={true}
+              value={search}
+              onValueChange={setSearch}
+            />
+            <CommandList className="max-h-60 overscroll-contain">
+              {showCustomValue && (
+                <CommandGroup>
+                  <CommandItem
+                    value={`use custom value ${trimmedSearch}`}
+                    onSelect={() => selectCustom(trimmedSearch)}
+                  >
+                    Use "{trimmedSearch}"
+                  </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" />
+                  <CommandGroup heading="Recommended">
+                    {recommendedKeys.map((key) => (
+                      <CommandItem
+                        key={key}
+                        value={key}
+                        onSelect={() => selectSecret(key)}
+                      >
+                        <KeyIcon className="mr-2 h-3 w-3 opacity-70" />
+                        {key}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </>
+              )}
+              {otherKeys.length > 0 && (
+                <>
+                  <CommandSeparator className="mt-0" />
+                  <CommandGroup
+                    heading={recommendedKeys.length > 0 ? "Other" : undefined}
+                  >
+                    {otherKeys.map((key) => (
+                      <CommandItem
+                        key={key}
+                        value={key}
+                        onSelect={() => selectSecret(key)}
+                      >
+                        <KeyIcon className="mr-2 h-3 w-3 opacity-70" />
+                        {key}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {value && (
+        <button
+          type="button"
+          aria-label="Clear"
+          className={cn(
+            "flex h-6 w-6 shrink-0 items-center justify-center rounded-sm",
+            "text-muted-foreground hover:bg-muted hover:text-foreground",
+            "focus:outline-hidden focus:ring-1 focus:ring-ring",
+          )}
+          onClick={clearValue}
+        >
+          <XIcon className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  );
+};

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

@@ -12,6 +12,7 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Bucket",
           placeholder: "my-bucket",
+          optionRegex: "(bucket|s3.?bucket)",
         }),
       ),
     region: z
@@ -21,6 +22,7 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Region",
           placeholder: "us-east-1",
+          optionRegex: "(region|aws.?region)",
         }),
       ),
     access_key_id: z
@@ -30,7 +32,7 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Access Key ID",
           inputType: "password",
-          optionRegex: ".*access_key.*",
+          optionRegex: "(access.?key.?id|aws.?access.?key)",
         }),
       ),
     secret_access_key: z
@@ -40,7 +42,7 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Secret Access Key",
           inputType: "password",
-          optionRegex: ".*secret.*access.*",
+          optionRegex: "(secret.?access.?key|aws.?secret)",
         }),
       ),
     endpoint_url: z
@@ -50,6 +52,7 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Endpoint URL",
           placeholder: "https://s3.amazonaws.com",
+          optionRegex: "(endpoint|s3.?url|s3.?endpoint)",
         }),
       ),
   })
@@ -65,6 +68,7 @@ export const GCSStorageSchema = z
         FieldOptions.of({
           label: "Bucket",
           placeholder: "my-bucket",
+          optionRegex: "(bucket|gcs.?bucket|google.?bucket)",
         }),
       ),
     service_account_key: z
@@ -98,7 +102,7 @@ export const AzureStorageSchema = z
         FieldOptions.of({
           label: "Account Name",
           placeholder: "storageaccount",
-          optionRegex: ".*account.*",
+          optionRegex: "(azure.?account|account.?name|storage.?account)",
         }),
       ),
     account_key: z
@@ -108,7 +112,7 @@ export const AzureStorageSchema = z
         FieldOptions.of({
           label: "Account Key",
           inputType: "password",
-          optionRegex: ".*azure.*key.*",
+          optionRegex: "(azure.?key|account.?key|storage.?key)",
         }),
       ),
   })
@@ -142,7 +146,8 @@ export const CoreWeaveStorageSchema = z
         FieldOptions.of({
           label: "Access Key ID",
           inputType: "password",
-          optionRegex: ".*object_storage_key.*",
+          optionRegex:
+            "(access.?key.?id|object.?storage.?key|aws.?access.?key)",
         }),
       ),
     secret_access_key: z
@@ -152,7 +157,8 @@ export const CoreWeaveStorageSchema = z
         FieldOptions.of({
           label: "Secret Access Key",
           inputType: "password",
-          optionRegex: ".*object_storage_secret.*",
+          optionRegex:
+            "(secret.?access.?key|object.?storage.?secret|aws.?secret)",
         }),
       ),
   })