connection testing

packages/web/src/modals/DatabaseLoginModal.svelte

@@ -11,15 +11,20 @@
   import { onDestroy, onMount } from 'svelte';
   import { writable } from 'svelte/store';
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import Link from '../elements/Link.svelte';
   import FormPasswordField from '../forms/FormPasswordField.svelte';
   import FormProviderCore from '../forms/FormProviderCore.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
   import { apiCall, setVolatileConnectionRemapping } from '../utility/api';
+  import { dispatchCacheChange } from '../utility/cache';
+  import createRef from '../utility/createRef';
 
   import { getConnectionInfo } from '../utility/metadataLoaders';
+  import ErrorMessageModal from './ErrorMessageModal.svelte';
   import ModalBase from './ModalBase.svelte';
-  import { closeCurrentModal } from './modalTools';
+  import { closeCurrentModal, showModal } from './modalTools';
 
   export let conid;
   export let passwordMode;
@@ -27,6 +32,10 @@
   const values = writable({});
   let connection;
 
+  let isTesting;
+  let sqlConnectResult;
+  const testIdRef = createRef(0);
+
   currentModalConid = conid;
 
   onMount(async () => {
@@ -44,14 +53,31 @@
     currentModalConid = null;
   });
 
+  function handleCancelTest() {
+    testIdRef.update(x => x + 1); // invalidate current test
+    isTesting = false;
+  }
+
   async function handleSubmit(ev) {
-    const con = await apiCall('connections/save-volatile', {
+    isTesting = true;
+    testIdRef.update(x => x + 1);
+    const testid = testIdRef.get();
+    const resp = await apiCall('connections/save-volatile', {
       conid,
       user: ev.detail.user,
       password: ev.detail.password,
+      test: true,
     });
-    setVolatileConnectionRemapping(conid, con._id);
-    closeCurrentModal();
+    if (testIdRef.get() != testid) return;
+    isTesting = false;
+    if (resp.msgtype == 'connected') {
+      setVolatileConnectionRemapping(conid, resp._id);
+      dispatchCacheChange(`database-list-changed-${conid}`);
+      dispatchCacheChange(`server-status-changed`);
+      closeCurrentModal();
+    } else {
+      sqlConnectResult = resp;
+    }
   }
 </script>
 
@@ -74,9 +100,36 @@
       focused={passwordMode == 'askPassword'}
     />
 
+    {#if isTesting}
+      <div>
+        <FontIcon icon="icon loading" /> Testing connection
+      </div>
+    {/if}
+
+    {#if !isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error'}
+      <div class="error-result">
+        Connect failed: <FontIcon icon="img error" />
+        {sqlConnectResult.error}
+        <Link
+          onClick={() =>
+            showModal(ErrorMessageModal, {
+              message: sqlConnectResult.detail,
+              showAsCode: true,
+              title: 'Database connection error',
+            })}
+        >
+          Show detail
+        </Link>
+      </div>
+    {/if}
+
     <svelte:fragment slot="footer">
-      <FormSubmit value="Connect" on:click={handleSubmit} />
-      <FormStyledButton value="Cancel" on:click={closeCurrentModal} />
+      {#if isTesting}
+        <FormStyledButton value="Stop connecting" on:click={handleCancelTest} />
+      {:else}
+        <FormSubmit value="Connect" on:click={handleSubmit} />
+      {/if}
+      <FormStyledButton value="Close" on:click={closeCurrentModal} />
     </svelte:fragment>
   </ModalBase>
 </FormProviderCore>