dropdown for default database

packages/web/src/buttons/DropDownButton.svelte

@@ -7,21 +7,32 @@
 
   export let icon = 'icon chevron-down';
   export let menu;
+  export let asyncMenu = undefined;
   export let narrow = false;
   export let square = true;
   export let disabled = false;
-  let domButton;
 
-  function handleClick() {
+  let domButton;
+  let isLoading = false;
+
+  async function handleClick() {
     if (disabled) return;
 
+    let items = menu;
+
+    if (asyncMenu) {
+      isLoading = true;
+      items = await asyncMenu();
+      isLoading = false;
+    }
+
     const rect = domButton.getBoundingClientRect();
     const left = rect.left;
     const top = rect.bottom;
-    currentDropDownMenu.set({ left, top, items: menu });
+    currentDropDownMenu.set({ left, top, items });
   }
 </script>
 
 <InlineButton {square} {narrow} on:click={handleClick} bind:this={domButton} {disabled}>
-  <FontIcon {icon} />
+  <FontIcon icon={isLoading ? 'icon loading' : icon} />
 </InlineButton>

packages/web/src/forms/FormDropDownTextFieldRaw.svelte

@@ -9,6 +9,7 @@
   export let disabled = false;
   export let defaultValue;
   export let menu;
+  export let asyncMenu;
 
   const { values, setFieldValue } = getFormContext();
 
@@ -26,5 +27,5 @@
     value={$values[name] ?? defaultValue}
     on:input={e => setFieldValue(name, e.target['value'])}
   />
-  <DropDownButton {menu} {disabled} />
+  <DropDownButton {menu} {asyncMenu} {disabled} />
 </div>

packages/web/src/settings/ConnectionDriverFields.svelte

@@ -17,7 +17,9 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import FormDropDownTextField from '../forms/FormDropDownTextField.svelte';
 
-  const { values } = getFormContext();
+  export let getDatabaseList;
+
+  const { values, setFieldValue } = getFormContext();
   const electron = getElectron();
 
   $: authType = $values.authType;
@@ -69,6 +71,14 @@
     'me-central-1',
     'sa-east-1',
   ];
+
+  async function createDatabasesMenu() {
+    const databases = await getDatabaseList();
+    return databases.map(db => ({
+      text: db.name,
+      onClick: () => setFieldValue('defaultDatabase', db.name),
+    }));
+  }
 </script>
 
 <FormSelectField
@@ -377,11 +387,12 @@
 {/if}
 
 {#if driver?.showConnectionField('defaultDatabase', $values, showConnectionFieldArgs)}
-  <FormTextField
+  <FormDropDownTextField
     label="Default database"
     name="defaultDatabase"
     disabled={isConnected}
     data-testid="ConnectionDriverFields_defaultDatabase"
+    asyncMenu={createDatabasesMenu}
   />
 {/if}
 
@@ -412,7 +423,7 @@
         templateProps={{ noMargin: true }}
         disabled={isConnected}
         data-testid="ConnectionDriverFields_displayName"
-        />
+      />
     </div>
     <div class="col-6 mr-1">
       <FormColorField

packages/web/src/tabs/ConnectionTab.svelte

@@ -63,15 +63,16 @@
 
   const testIdRef = createRef(0);
 
-  async function handleTest(e) {
+  async function handleTest(e, requestDbList = false) {
     isTesting = true;
     testIdRef.update(x => x + 1);
     const testid = testIdRef.get();
-    const resp = await apiCall('connections/test', e.detail);
+    const resp = await apiCall('connections/test', { connection: e.detail, requestDbList });
     if (testIdRef.get() != testid) return;
 
     isTesting = false;
     sqlConnectResult = resp;
+    return resp;
   }
 
   function handleCancelTest() {
@@ -190,6 +191,14 @@
   $: isConnected = $openedConnections.includes($values._id) || $openedSingleDatabaseConnections.includes($values._id);
 
   // $: console.log('CONN VALUES', $values);
+
+  async function getDatabaseList() {
+    const resp = await handleTest({ detail: getCurrentConnection() }, true);
+    if (resp && resp.msgtype == 'connected') {
+      return resp.databases;
+    }
+    return [];
+  }
 </script>
 
 <FormProviderCore template={FormFieldTemplateLarge} {values}>
@@ -202,6 +211,7 @@
         {
           label: 'General',
           component: ConnectionDriverFields,
+          props: { getDatabaseList },
         },
         driver?.showConnectionTab('sshTunnel', $values) && {
           label: 'SSH Tunnel',
@@ -223,20 +233,24 @@
         <div class="buttons">
           {#if onlyTestButton}
             {#if isTesting}
-              <FormButton value="Cancel test" on:click={handleCancelTest} data-testid="ConnectionTab_buttonCancelTest" />
+              <FormButton
+                value="Cancel test"
+                on:click={handleCancelTest}
+                data-testid="ConnectionTab_buttonCancelTest"
+              />
             {:else}
               <FormButton value="Test connection" on:click={handleTest} data-testid="ConnectionTab_buttonDisconnect" />
             {/if}
           {:else if isConnected}
-            <FormButton value="Disconnect" on:click={handleDisconnect} data-testid='ConnectionTab_buttonDisconnect' />
+            <FormButton value="Disconnect" on:click={handleDisconnect} data-testid="ConnectionTab_buttonDisconnect" />
           {:else}
-            <FormButton value="Connect" on:click={handleConnect} data-testid='ConnectionTab_buttonConnect' />
+            <FormButton value="Connect" on:click={handleConnect} data-testid="ConnectionTab_buttonConnect" />
             {#if isTesting}
               <FormButton value="Cancel test" on:click={handleCancelTest} />
             {:else}
-              <FormButton value="Test" on:click={handleTest} data-testid='ConnectionTab_buttonTest' />
+              <FormButton value="Test" on:click={handleTest} data-testid="ConnectionTab_buttonTest" />
             {/if}
-            <FormButton value="Save" on:click={handleSave} data-testid='ConnectionTab_buttonSave' />
+            <FormButton value="Save" on:click={handleSave} data-testid="ConnectionTab_buttonSave" />
           {/if}
         </div>
         <div class="test-result">