better ux for connections

[ctate]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
workflow-builder	Ready	Preview	Comment	Dec 12, 2025 5:59am

[vercel]

Additional Suggestion:

Missing success toast notification when creating a new integration. The create path should display a toast message to the user, consistent with the "Connection updated" message shown in edit mode and the "Connection deleted" message shown in delete mode.

View Details

📝 Patch Details

diff --git a/components/settings/integration-form-dialog.tsx b/components/settings/integration-form-dialog.tsx
index a5d8d28..c178ef5 100644
--- a/components/settings/integration-form-dialog.tsx
+++ b/components/settings/integration-form-dialog.tsx
@@ -529,6 +529,7 @@ export function IntegrationFormDialog({
           type: formData.type,
           config: formData.config,
         });
+        toast.success("Connection created");
         onSuccess?.(newIntegration.id);
       }
       onClose();

Analysis

Missing success toast notification in handleSave() for new integrations

What fails: The handleSave() function in components/settings/integration-form-dialog.tsx creates a new integration without showing a success toast, inconsistent with the edit and delete operations that both show success toasts ("Connection updated" and "Connection deleted" respectively).

How to reproduce:

1. Open IntegrationFormDialog in create mode
2. Fill in the integration form with valid credentials
3. Click "Create" to submit the form
4. Observe: No success toast is displayed, though the integration is created successfully and the dialog closes

Expected behavior: A success toast with message "Connection created" should display after successful creation, matching the pattern used in:

• Edit mode: toast.success("Connection updated") (line 524)
• Delete mode: toast.success("Connection deleted") (line 551)
• Similar operations in api-keys-dialog.tsx: toast.success("API key created successfully")

Fix: Added toast.success("Connection created"); after line 530 in the create branch of handleSave(), before calling onSuccess?.(newIntegration.id).

[vercel]

Suggested change

	} catch (error) {
	console.error("Failed to test connection:", error);
	const message =
	error instanceof Error ? error.message : "Failed to test connection";
	setTestResult({ status: "error", message });
	// Display the result message to the user
	if (result.status === "success") {
	toast.success(result.message || "Connection successful");
	} else {
	toast.error(result.message || "Connection test failed");
	}
	} catch (error) {
	console.error("Failed to test connection:", error);
	const message =
	error instanceof Error ? error.message : "Failed to test connection";
	setTestResult({ status: "error", message });
	toast.error(message);

The handleTestConnection function stores the test result in state but never displays it to the user. While the icon changes color (green or red), the actual result message is not shown anywhere in the UI, leaving users without feedback about what the test result was.

View Details

Analysis

Missing toast notification for test connection result in integration form dialog

What fails: handleTestConnection() in components/settings/integration-form-dialog.tsx retrieves the test result message from the API but never displays it to the user via toast notification, providing incomplete feedback about connection test failures.

How to reproduce:

1. Open the integration form dialog (create or edit mode)
2. Enter invalid credentials (e.g., wrong API key or password)
3. Click the "Test Connection" button
4. Observe the button icon changes to red X, but no message appears to explain why the test failed

Result: Users see only the red X icon indicating failure, but receive no error message explaining the cause. This forces them to troubleshoot blind without knowing the specific error (e.g., "Authentication failed", "Invalid API key", "Network timeout").

Expected: A toast notification should display the error message from the API result, similar to the pattern already implemented in components/settings/integrations-manager.tsx lines 109-111 which correctly shows toast.success(result.message) or toast.error(result.message).

Fix: Added toast notifications to display the test result message to the user in both success and error cases, matching the established UX pattern in the codebase. The API already returns the message in the response object; it was simply not being displayed.