Add inline database creation to database workflow nodes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bchapuis

apps/app/src/components/workflow/widgets/index.ts

@@ -12,6 +12,7 @@ import { blobInputWidget } from "./input/blob-input";
 import { booleanInputWidget } from "./input/boolean-input";
 import { canvasInputWidget } from "./input/canvas-input";
 import { cronInputWidget } from "./input/cron-input";
+import { databaseTriggerInputWidget } from "./input/database-trigger-input";
 import { dateInputWidget } from "./input/date-input";
 import { discordTriggerInputWidget } from "./input/discord-trigger-input";
 import { documentInputWidget } from "./input/document-input";
@@ -77,6 +78,7 @@ const widgets = [
   emailTriggerInputWidget,
   httpRequestEndpointWidget,
   httpWebhookEndpointWidget,
+  databaseTriggerInputWidget,
   queueTriggerInputWidget,
   telegramTriggerInputWidget,
   whatsappTriggerInputWidget,

apps/app/src/components/workflow/widgets/input/database-create-dialog.tsx

@@ -0,0 +1,120 @@
+import { useState } from "react";
+
+import { useAuth } from "@/components/auth-context";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import { createDatabase } from "@/services/database-service";
+
+interface DatabaseCreateDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreated: (databaseId: string) => void;
+}
+
+export function DatabaseCreateDialog({
+  isOpen,
+  onClose,
+  onCreated,
+}: DatabaseCreateDialogProps) {
+  const { organization } = useAuth();
+  const [name, setName] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const resetForm = () => {
+    setName("");
+    setError(null);
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  const handleSubmit = async () => {
+    if (!organization?.id) return;
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      const response = await createDatabase({ name }, organization.id);
+      onCreated(response.id);
+      handleClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to create database"
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+      <DialogContent className="max-w-[450px]">
+        <div>
+          <DialogTitle className="text-base font-semibold">
+            Create a Database
+          </DialogTitle>
+          <DialogDescription className="text-sm text-muted-foreground mt-1">
+            Give your database a name.
+          </DialogDescription>
+        </div>
+
+        <div className="space-y-3">
+          <div className="space-y-1.5">
+            <Label htmlFor="database-name">Name</Label>
+            <Input
+              id="database-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="My Database"
+            />
+            <p className="text-xs text-muted-foreground">
+              A display name for this database in Dafthunk.
+            </p>
+          </div>
+
+          {error && (
+            <p className="text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md">
+              {error}
+            </p>
+          )}
+
+          <div className="flex justify-end gap-2 pt-1">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSubmit}
+              disabled={isSubmitting || name.trim() === ""}
+            >
+              {isSubmitting ? (
+                <>
+                  <Spinner className="h-4 w-4 mr-1" />
+                  Creating...
+                </>
+              ) : (
+                "Create Database"
+              )}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/workflow/widgets/input/database-trigger-input.tsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useDatabases } from "@/services/database-service";
+import { cn } from "@/utils/utils";
+import { updateNodeInput, useWorkflow } from "../../workflow-context";
+import type { WorkflowParameter } from "../../workflow-types";
+import type { BaseWidgetProps } from "../widget";
+import { createWidget, getInputValue } from "../widget";
+import { DatabaseCreateDialog } from "./database-create-dialog";
+
+const CREATE_NEW_SENTINEL = "__create_new__";
+
+interface DatabaseTriggerInputProps extends BaseWidgetProps {
+  nodeId: string;
+  databaseId: string;
+  inputs: WorkflowParameter[];
+}
+
+function DatabaseTriggerInputWidget({
+  nodeId,
+  databaseId,
+  inputs,
+  className,
+  disabled = false,
+}: DatabaseTriggerInputProps) {
+  const { databases, isDatabasesLoading, mutateDatabases } = useDatabases();
+  const { updateNodeData, edges, deleteEdge } = useWorkflow();
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+
+  const handleDatabaseChange = (value: string) => {
+    if (value === CREATE_NEW_SENTINEL) {
+      setIsCreateDialogOpen(true);
+      return;
+    }
+    updateNodeInput(
+      nodeId,
+      "databaseId",
+      value,
+      inputs,
+      updateNodeData,
+      edges,
+      deleteEdge
+    );
+  };
+
+  const handleDatabaseCreated = async (newDatabaseId: string) => {
+    await mutateDatabases();
+    updateNodeInput(
+      nodeId,
+      "databaseId",
+      newDatabaseId,
+      inputs,
+      updateNodeData,
+      edges,
+      deleteEdge
+    );
+    setIsCreateDialogOpen(false);
+  };
+
+  return (
+    <div className={cn("p-2", className)}>
+      <Select
+        value={databaseId || ""}
+        onValueChange={handleDatabaseChange}
+        disabled={disabled || isDatabasesLoading}
+      >
+        <SelectTrigger className="h-6 text-xs">
+          <SelectValue
+            placeholder={
+              isDatabasesLoading ? "Loading..." : "Select a database"
+            }
+          />
+        </SelectTrigger>
+        <SelectContent>
+          {databases.map((database) => (
+            <SelectItem key={database.id} value={database.id}>
+              {database.name}
+            </SelectItem>
+          ))}
+          <SelectSeparator />
+          <SelectItem value={CREATE_NEW_SENTINEL}>+ New Database</SelectItem>
+        </SelectContent>
+      </Select>
+      <DatabaseCreateDialog
+        isOpen={isCreateDialogOpen}
+        onClose={() => setIsCreateDialogOpen(false)}
+        onCreated={handleDatabaseCreated}
+      />
+    </div>
+  );
+}
+
+export const databaseTriggerInputWidget = createWidget({
+  component: DatabaseTriggerInputWidget,
+  nodeTypes: [
+    "database-query",
+    "database-execute",
+    "database-import-table",
+    "database-export-table",
+    "database-describe-table",
+    "database-list-tables",
+    "database-get-row-count",
+    "database-drop-table",
+    "database-truncate-table",
+    "database-table-exists",
+  ],
+  inputField: "databaseId",
+  managedFields: [],
+  extractConfig: (nodeId, inputs) => ({
+    nodeId,
+    databaseId: getInputValue(inputs, "databaseId", ""),
+    inputs,
+  }),
+});