refactor(dev-ui): redesign postgres connection form UX

Connection string is now always visible and primary, with individual
fields collapsed behind a toggle. Mutual disabling prevents filling
both modes. Nickname moved to top.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: cevian

packages/core/dev-ui/src/components/CustomConnectionForm.tsx

@@ -14,8 +14,9 @@ export function CustomConnectionForm({
   onSuccess,
   onCancel,
 }: CustomConnectionFormProps) {
-  const [mode, setMode] = useState<"fields" | "url">("fields");
+  const hasConnectionString = !!config.parseConnectionString;
   const [connectionString, setConnectionString] = useState("");
+  const [fieldsExpanded, setFieldsExpanded] = useState(!hasConnectionString);
   const [values, setValues] = useState<Record<string, string>>(() => {
     const defaults: Record<string, string> = {};
     for (const field of config.fields) {
@@ -26,16 +27,19 @@ export function CustomConnectionForm({
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
+  // Detect which mode is active based on what the user has filled in
+  const usingConnectionString = hasConnectionString && connectionString.trim().length > 0;
+
   const setValue = useCallback((name: string, value: string) => {
     setValues((prev) => ({ ...prev, [name]: value }));
   }, []);
 
   const handleSubmit = useCallback(async () => {
     setError(null);
 
-    // If in URL mode, parse first
     let finalValues = { ...values };
-    if (mode === "url" && connectionString.trim()) {
+
+    if (usingConnectionString) {
       if (!config.parseConnectionString) return;
       try {
         const parsed = config.parseConnectionString(connectionString.trim());
@@ -44,13 +48,13 @@ export function CustomConnectionForm({
         setError("Invalid connection string format");
         return;
       }
-    }
-
-    // Validate required fields (skip nickname which is optional)
-    for (const field of config.fields) {
-      if (field.required && !finalValues[field.name]?.trim()) {
-        setError(`${field.label} is required`);
-        return;
+    } else {
+      // Validate required fields (skip nickname which is optional)
+      for (const field of config.fields) {
+        if (field.required && !finalValues[field.name]?.trim()) {
+          setError(`${field.label} is required`);
+          return;
+        }
       }
     }
 
@@ -93,79 +97,82 @@ export function CustomConnectionForm({
     } finally {
       setSubmitting(false);
     }
-  }, [values, mode, connectionString, config, integrationId, onSuccess]);
+  }, [values, usingConnectionString, connectionString, config, integrationId, onSuccess]);
+
+  // Fields that aren't nickname (nickname is shown outside the collapsible section)
+  const connectionFields = config.fields.filter((f) => f.name !== "nickname");
+  const usingFields = connectionFields.some((f) => {
+    const val = (values[f.name] ?? "").trim();
+    return val.length > 0 && val !== (f.defaultValue ?? "");
+  });
 
   const inputClass =
     "w-full text-[12px] px-2.5 py-1.5 rounded-md border border-[#e8e4df] bg-white text-[#1a1a1a] placeholder:text-[#c4bfb8] focus:outline-none focus:border-[#a8a099] transition-colors";
+  const disabledInputClass =
+    "w-full text-[12px] px-2.5 py-1.5 rounded-md border border-[#e8e4df] bg-[#f5f3f0] text-[#a8a099] placeholder:text-[#d4d0cb] cursor-not-allowed";
 
   return (
     <div className="flex flex-col gap-3 pt-1">
-      {/* Mode toggle */}
-      <div className="flex gap-1">
+      {/* Nickname (always on top) */}
+      <div>
+        <label className="text-[10px] text-[#a8a099] block mb-0.5">Nickname (optional)</label>
+        <input
+          type="text"
+          value={values.nickname ?? ""}
+          onChange={(e) => setValue("nickname", e.target.value)}
+          placeholder="e.g. Production DB"
+          className={inputClass}
+        />
+      </div>
+
+      {/* Connection string input (always visible when available) */}
+      {hasConnectionString && (
+        <div>
+          <label className="text-[10px] text-[#a8a099] block mb-0.5">
+            Connection String{!usingFields && <span className="text-red-400 ml-0.5">*</span>}
+          </label>
+          <input
+            type="password"
+            value={connectionString}
+            onChange={(e) => setConnectionString(e.target.value)}
+            placeholder="postgresql://user:pass@host:5432/db?sslmode=require"
+            disabled={usingFields}
+            className={usingFields ? disabledInputClass : inputClass}
+          />
+        </div>
+      )}
+
+      {/* Expandable fields section */}
+      {hasConnectionString && (
         <button
           type="button"
-          onClick={() => setMode("fields")}
-          className={`text-[10px] px-2 py-0.5 rounded-full transition-colors cursor-pointer ${
-            mode === "fields"
-              ? "bg-[#1a1a1a] text-white"
-              : "bg-[#f0ece7] text-[#787068] hover:bg-[#e8e4df]"
-          }`}
+          onClick={() => setFieldsExpanded((prev) => !prev)}
+          className="flex items-center gap-2 w-full cursor-pointer group"
         >
-          Fields
+          <div className="flex-1 h-px bg-[#e8e4df]" />
+          <span className="text-[10px] text-[#a8a099] group-hover:text-[#787068] underline decoration-dotted underline-offset-2 transition-colors whitespace-nowrap">
+            {fieldsExpanded ? "hide fields" : "or enter fields individually"}
+          </span>
+          <div className="flex-1 h-px bg-[#e8e4df]" />
         </button>
-        {config.parseConnectionString && (
-          <button
-            type="button"
-            onClick={() => setMode("url")}
-            className={`text-[10px] px-2 py-0.5 rounded-full transition-colors cursor-pointer ${
-              mode === "url"
-                ? "bg-[#1a1a1a] text-white"
-                : "bg-[#f0ece7] text-[#787068] hover:bg-[#e8e4df]"
-            }`}
-          >
-            Connection String
-          </button>
-        )}
-      </div>
+      )}
 
-      {mode === "url" ? (
-        /* Connection string mode */
-        <div className="flex flex-col gap-2">
-          <div>
-            <label className="text-[10px] text-[#a8a099] block mb-0.5">Connection String<span className="text-red-400 ml-0.5">*</span></label>
-            <input
-              type="password"
-              value={connectionString}
-              onChange={(e) => setConnectionString(e.target.value)}
-              placeholder="postgresql://user:pass@host:5432/db?sslmode=require"
-              className={inputClass}
-            />
-          </div>
-          <div>
-            <label className="text-[10px] text-[#a8a099] block mb-0.5">Nickname</label>
-            <input
-              type="text"
-              value={values.nickname ?? ""}
-              onChange={(e) => setValue("nickname", e.target.value)}
-              placeholder="e.g. Production DB"
-              className={inputClass}
-            />
-          </div>
-        </div>
-      ) : (
-        /* Individual fields mode */
+      {fieldsExpanded && (
         <div className="flex flex-col gap-2">
-          {config.fields.map((field) => (
+          {connectionFields.map((field) => (
             <div key={field.name}>
               <label className="text-[10px] text-[#a8a099] block mb-0.5">
                 {field.label}
-                {field.required && <span className="text-red-400 ml-0.5">*</span>}
+                {field.required && !usingConnectionString && (
+                  <span className="text-red-400 ml-0.5">*</span>
+                )}
               </label>
               {field.type === "select" ? (
                 <select
                   value={values[field.name] ?? field.defaultValue ?? ""}
                   onChange={(e) => setValue(field.name, e.target.value)}
-                  className={inputClass}
+                  disabled={usingConnectionString}
+                  className={usingConnectionString ? disabledInputClass : inputClass}
                 >
                   {field.options?.map((opt) => (
                     <option key={opt} value={opt}>
@@ -179,7 +186,8 @@ export function CustomConnectionForm({
                   value={values[field.name] ?? ""}
                   onChange={(e) => setValue(field.name, e.target.value)}
                   placeholder={field.placeholder}
-                  className={inputClass}
+                  disabled={usingConnectionString}
+                  className={usingConnectionString ? disabledInputClass : inputClass}
                 />
               )}
             </div>