Verify datasouce before saving

packages/builder/src/builderStore/datasource.js

@@ -2,6 +2,7 @@ import { datasources, tables } from "../stores/backend"
 import { IntegrationNames } from "../constants/backend"
 import { get } from "svelte/store"
 import cloneDeep from "lodash/cloneDeepWith"
+import { API } from "api"
 
 function prepareData(config) {
   let datasource = {}
@@ -37,3 +38,9 @@ export async function createRestDatasource(integration) {
   const config = cloneDeep(integration)
   return saveDatasource(config)
 }
+
+export async function validateDatasourceConfig(config) {
+  const datasource = prepareData(config)
+  const resp = await API.validateDatasource(datasource)
+  return resp
+}

packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte

@@ -4,7 +4,10 @@
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
   import { IntegrationNames } from "constants/backend"
   import cloneDeep from "lodash/cloneDeepWith"
-  import { saveDatasource as save } from "builderStore/datasource"
+  import {
+    saveDatasource as save,
+    validateDatasourceConfig,
+  } from "builderStore/datasource"
   import { onMount } from "svelte"
 
   export let integration
@@ -18,6 +21,27 @@
   $: name =
     IntegrationNames[datasource.type] || datasource.name || datasource.type
 
+  async function validateConfig() {
+    function 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)
+      }
+      connected = resp.connected
+    } catch (err) {
+      displayError(err?.message)
+    }
+    return connected
+  }
   async function saveDatasource() {
     try {
       if (!datasource.name) {
@@ -40,7 +64,8 @@
 
 <ModalContent
   title={`Connect to ${name}`}
-  onConfirm={() => saveDatasource()}
+  onConfirm={() =>
+    validateConfig().then(connected => connected && saveDatasource())}
   onCancel={() => modal.show()}
   confirmText={datasource.plus
     ? "Save and fetch tables"

packages/frontend-core/src/api/datasources.js

@@ -58,4 +58,15 @@ export const buildDatasourceEndpoints = API => ({
       url: `/api/datasources/${datasourceId}/${datasourceRev}`,
     })
   },
+
+  /**
+   * Validate a datasource configuration
+   * @param datasource the datasource configuration to validate
+   */
+  validateDatasource: async datasource => {
+    return await API.post({
+      url: `/api/datasources/verify`,
+      body: { datasource },
+    })
+  },
 })