connection modal supports file database

packages/web/src/modals/ConnectionModal.svelte

@@ -16,12 +16,20 @@
   import createRef from '../utility/createRef';
   import Link from '../elements/Link.svelte';
   import ErrorMessageModal from './ErrorMessageModal.svelte';
+  import { writable } from 'svelte/store';
+  import FormProviderCore from '../forms/FormProviderCore.svelte';
+  import { extensions } from '../stores';
 
   export let connection;
 
   let isTesting;
   let sqlConnectResult;
 
+  const values = writable(connection || { server: 'localhost', engine: 'mssql@dbgate-plugin-mssql' });
+
+  $: engine = $values.engine;
+  $: driver = $extensions.drivers.find(x => x.engine == engine);
+
   const testIdRef = createRef(0);
 
   async function handleTest(e) {
@@ -49,10 +57,7 @@
   }
 </script>
 
-<FormProvider
+<FormProviderCore template={FormFieldTemplateLarge} {values}>
-  template={FormFieldTemplateLarge}
-  initialValues={connection || { server: 'localhost', engine: 'mssql@dbgate-plugin-mssql' }}
->
   <ModalBase {...$$restProps} noPadding>
     <div slot="header">Add connection</div>
 
@@ -63,11 +68,11 @@
           label: 'Main',
           component: ConnectionModalDriverFields,
         },
-        {
+        !driver?.isFileDatabase && {
           label: 'SSH Tunnel',
           component: ConnectionModalSshTunnelFields,
         },
-        {
+        !driver?.isFileDatabase && {
           label: 'SSL',
           component: ConnectionModalSslFields,
         },
@@ -114,7 +119,7 @@
       </div>
     </div>
   </ModalBase>
-</FormProvider>
+</FormProviderCore>
 
 <style>
   .buttons {

packages/web/src/modals/ConnectionModalDriverFields.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import FormElectronFileSelector from '../forms/FormElectronFileSelector.svelte';
 
   import FormPasswordField from '../forms/FormPasswordField.svelte';
 
@@ -9,7 +10,7 @@
 
   import FormTextField from '../forms/FormTextField.svelte';
   import { extensions } from '../stores';
-import getElectron from '../utility/getElectron';
+  import getElectron from '../utility/getElectron';
   import { useAuthTypes } from '../utility/metadataLoaders';
 
   const { values } = getFormContext();
@@ -39,7 +40,10 @@ import getElectron from '../utility/getElectron';
   ]}
 />
 
-{#if driver?.supportsDatabaseUrl}
+{#if driver?.isFileDatabase}
+  <FormElectronFileSelector label="Database file" name="databaseFile" disabled={!electron} />
+{:else}
+  {#if driver?.supportsDatabaseUrl}
     <div class="radio">
       <FormRadioGroupField
         name="useDatabaseUrl"
@@ -49,11 +53,11 @@ import getElectron from '../utility/getElectron';
         ]}
       />
     </div>
-{/if}
+  {/if}
 
-{#if driver?.supportsDatabaseUrl && useDatabaseUrl}
+  {#if driver?.supportsDatabaseUrl && useDatabaseUrl}
     <FormTextField label="Database URL" name="databaseUrl" placeholder={driver?.databaseUrlPlaceholder} />
-{:else}
+  {:else}
     {#if $authTypes}
       <FormSelectField
         label="Authentication"
@@ -114,12 +118,13 @@ import getElectron from '../utility/getElectron';
         ]}
       />
     {/if}
-{/if}
+  {/if}
 
-<FormTextField label="Default database" name="defaultDatabase" />
+  <FormTextField label="Default database" name="defaultDatabase" />
 
-{#if defaultDatabase}
+  {#if defaultDatabase}
     <FormCheckboxField label={`Use only database ${defaultDatabase}`} name="singleDatabase" />
+  {/if}
 {/if}
 
 <FormTextField label="Display name" name="displayName" />

packages/web/src/modals/ConnectionModalSshTunnelFields.svelte

@@ -11,6 +11,7 @@
   import getElectron from '../utility/getElectron';
   import { usePlatformInfo } from '../utility/metadataLoaders';
   import FontIcon from '../icons/FontIcon.svelte';
+  import { extensions } from '../stores';
 
   const { values, setFieldValue } = getFormContext();
   const electron = getElectron();