diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
index 36b535c2b8..f5d57285bb 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
@@ -22,16 +22,11 @@
     IntegrationNames[datasource.type] || datasource.name || datasource.type
 
   async function validateConfig() {
-    function displayError(message) {
+    const displayError = message =>
       notifications.error(message ?? "Error validating datasource")
-    }
 
     let connected = false
     try {
-      if (!datasource.name) {
-        datasource.name = name
-      }
-
       const resp = await validateDatasourceConfig(datasource)
       if (!resp.connected) {
         displayError(resp.error)
@@ -42,7 +37,12 @@
     }
     return connected
   }
+
   async function saveDatasource() {
+    const valid = await validateConfig()
+    if (!valid) {
+      return false
+    }
     try {
       if (!datasource.name) {
         datasource.name = name
@@ -64,8 +64,7 @@
 
 <ModalContent
   title={`Connect to ${name}`}
-  onConfirm={() =>
-    validateConfig().then(connected => connected && saveDatasource())}
+  onConfirm={() => saveDatasource()}
   onCancel={() => modal.show()}
   confirmText={datasource.plus
     ? "Save and fetch tables"
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
index 3a3a2495ed..511a7a81c8 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
@@ -20,6 +20,7 @@
   import { isEqual } from "lodash"
   import { cloneDeep } from "lodash/fp"
   import ImportRestQueriesModal from "components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte"
+  import { API } from "api"
 
   const querySchema = {
     name: {},
@@ -45,7 +46,28 @@
     }
   }
 
+  async function validateConfig() {
+    const displayError = message =>
+      notifications.error(message ?? "Error validating datasource")
+
+    let connected = false
+    try {
+      const resp = await API.validateDatasource(datasource)
+      if (!resp.connected) {
+        displayError(resp.error)
+      }
+      connected = resp.connected
+    } catch (err) {
+      displayError(err?.message)
+    }
+    return connected
+  }
+
   const saveDatasource = async () => {
+    const valid = await validateConfig()
+    if (!valid) {
+      return false
+    }
     try {
       // Create datasource
       await datasources.save(datasource)