better ux for connections (#158)

* better connections dx

* better ux

* improvements

* fixes

* consistent dialogs

* fixes

* auto-select

* fixes

* fixes loop

* fixes

* fixes

Author: ctate

app/api/integrations/route.ts

@@ -16,7 +16,7 @@ export type GetIntegrationsResponse = {
 }[];
 
 export type CreateIntegrationRequest = {
-  name: string;
+  name?: string;
   type: IntegrationType;
   config: IntegrationConfig;
 };
@@ -92,16 +92,16 @@ export async function POST(request: Request) {
 
     const body: CreateIntegrationRequest = await request.json();
 
-    if (!(body.name && body.type && body.config)) {
+    if (!(body.type && body.config)) {
       return NextResponse.json(
-        { error: "Name, type, and config are required" },
+        { error: "Type and config are required" },
         { status: 400 }
       );
     }
 
     const integration = await createIntegration(
       session.user.id,
-      body.name,
+      body.name || "",
       body.type,
       body.config
     );

app/api/integrations/test/route.ts

@@ -0,0 +1,128 @@
+import { NextResponse } from "next/server";
+import postgres from "postgres";
+import { auth } from "@/lib/auth";
+import type {
+  IntegrationConfig,
+  IntegrationType,
+} from "@/lib/types/integration";
+import {
+  getCredentialMapping,
+  getIntegration as getPluginFromRegistry,
+} from "@/plugins";
+
+export type TestConnectionRequest = {
+  type: IntegrationType;
+  config: IntegrationConfig;
+};
+
+export type TestConnectionResult = {
+  status: "success" | "error";
+  message: string;
+};
+
+/**
+ * POST /api/integrations/test
+ * Test connection credentials without saving
+ */
+export async function POST(request: Request) {
+  try {
+    const session = await auth.api.getSession({
+      headers: request.headers,
+    });
+
+    if (!session?.user) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const body: TestConnectionRequest = await request.json();
+
+    if (!(body.type && body.config)) {
+      return NextResponse.json(
+        { error: "Type and config are required" },
+        { status: 400 }
+      );
+    }
+
+    if (body.type === "database") {
+      const result = await testDatabaseConnection(body.config.url);
+      return NextResponse.json(result);
+    }
+
+    const plugin = getPluginFromRegistry(body.type);
+
+    if (!plugin) {
+      return NextResponse.json(
+        { error: "Invalid integration type" },
+        { status: 400 }
+      );
+    }
+
+    if (!plugin.testConfig) {
+      return NextResponse.json(
+        { error: "Integration does not support testing" },
+        { status: 400 }
+      );
+    }
+
+    const credentials = getCredentialMapping(plugin, body.config);
+
+    const testFn = await plugin.testConfig.getTestFunction();
+    const testResult = await testFn(credentials);
+
+    const result: TestConnectionResult = {
+      status: testResult.success ? "success" : "error",
+      message: testResult.success
+        ? "Connection successful"
+        : testResult.error || "Connection failed",
+    };
+
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error("Failed to test connection:", error);
+    return NextResponse.json(
+      {
+        status: "error",
+        message:
+          error instanceof Error ? error.message : "Failed to test connection",
+      },
+      { status: 500 }
+    );
+  }
+}
+
+async function testDatabaseConnection(
+  databaseUrl?: string
+): Promise<TestConnectionResult> {
+  let connection: postgres.Sql | null = null;
+
+  try {
+    if (!databaseUrl) {
+      return {
+        status: "error",
+        message: "Connection failed",
+      };
+    }
+
+    connection = postgres(databaseUrl, {
+      max: 1,
+      idle_timeout: 5,
+      connect_timeout: 5,
+    });
+
+    await connection`SELECT 1`;
+
+    return {
+      status: "success",
+      message: "Connection successful",
+    };
+  } catch {
+    return {
+      status: "error",
+      message: "Connection failed",
+    };
+  } finally {
+    if (connection) {
+      await connection.end();
+    }
+  }
+}

components/settings/api-keys-dialog.tsx

@@ -253,25 +253,38 @@ export function ApiKeysDialog({ open, onOpenChange }: ApiKeysDialogProps) {
               Create a new API key for webhook authentication
             </DialogDescription>
           </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="key-name">Label (optional)</Label>
-              <Input
-                id="key-name"
-                onChange={(e) => setNewKeyName(e.target.value)}
-                placeholder="e.g., Production, Testing"
-                value={newKeyName}
-              />
+          <form
+            id="create-api-key-form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleCreate();
+            }}
+          >
+            <div className="space-y-4 py-4">
+              <div className="space-y-2">
+                <Label htmlFor="key-name">Label (optional)</Label>
+                <Input
+                  id="key-name"
+                  onChange={(e) => setNewKeyName(e.target.value)}
+                  placeholder="e.g., Production, Testing"
+                  value={newKeyName}
+                />
+              </div>
             </div>
-          </div>
+          </form>
           <DialogFooter>
             <Button
               onClick={() => setShowCreateDialog(false)}
+              type="button"
               variant="outline"
             >
               Cancel
             </Button>
-            <Button disabled={creating} onClick={handleCreate}>
+            <Button
+              disabled={creating}
+              form="create-api-key-form"
+              type="submit"
+            >
               {creating ? <Spinner className="mr-2 size-4" /> : null}
               Create
             </Button>

components/settings/index.tsx

@@ -83,21 +83,36 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
             <Spinner />
           </div>
         ) : (
-          <div className="mt-4">
+          <form
+            className="mt-4"
+            id="settings-form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              saveAccount();
+            }}
+          >
             <AccountSettings
               accountEmail={accountEmail}
               accountName={accountName}
               onEmailChange={setAccountEmail}
               onNameChange={setAccountName}
             />
-          </div>
+          </form>
         )}
 
         <DialogFooter>
-          <Button onClick={() => onOpenChange(false)} variant="outline">
+          <Button
+            onClick={() => onOpenChange(false)}
+            type="button"
+            variant="outline"
+          >
             Cancel
           </Button>
-          <Button disabled={loading || saving} onClick={saveAccount}>
+          <Button
+            disabled={loading || saving}
+            form="settings-form"
+            type="submit"
+          >
             {saving ? <Spinner className="mr-2 size-4" /> : null}
             Save
           </Button>