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,87 +40,91 @@ import getElectron from '../utility/getElectron';
   ]}
 />
 
-{#if driver?.supportsDatabaseUrl}
+{#if driver?.isFileDatabase}
-  <div class="radio">
+  <FormElectronFileSelector label="Database file" name="databaseFile" disabled={!electron} />
-    <FormRadioGroupField
-      name="useDatabaseUrl"
-      options={[
-        { label: 'Fill database connection details', value: '', default: true },
-        { label: 'Use database URL', value: '1' },
-      ]}
-    />
-  </div>
-{/if}
-
-{#if driver?.supportsDatabaseUrl && useDatabaseUrl}
-  <FormTextField label="Database URL" name="databaseUrl" placeholder={driver?.databaseUrlPlaceholder} />
 {:else}
-  {#if $authTypes}
+  {#if driver?.supportsDatabaseUrl}
-    <FormSelectField
+    <div class="radio">
-      label="Authentication"
+      <FormRadioGroupField
-      name="authType"
+        name="useDatabaseUrl"
-      options={$authTypes.map(auth => ({
+        options={[
-        value: auth.name,
+          { label: 'Fill database connection details', value: '', default: true },
-        label: auth.title,
+          { label: 'Use database URL', value: '1' },
-      }))}
+        ]}
-    />
+      />
+    </div>
   {/if}
 
-  <div class="row">
+  {#if driver?.supportsDatabaseUrl && useDatabaseUrl}
-    <div class="col-9 mr-1">
+    <FormTextField label="Database URL" name="databaseUrl" placeholder={driver?.databaseUrlPlaceholder} />
-      <FormTextField
+  {:else}
-        label="Server"
+    {#if $authTypes}
-        name="server"
+      <FormSelectField
-        disabled={disabledFields.includes('server')}
+        label="Authentication"
-        templateProps={{ noMargin: true }}
+        name="authType"
+        options={$authTypes.map(auth => ({
+          value: auth.name,
+          label: auth.title,
+        }))}
       />
-    </div>
+    {/if}
-    <div class="col-3 mr-1">
-      <FormTextField
-        label="Port"
-        name="port"
-        disabled={disabledFields.includes('port')}
-        templateProps={{ noMargin: true }}
-        placeholder={driver && driver.defaultPort}
-      />
-    </div>
-  </div>
 
-  <div class="row">
+    <div class="row">
-    <div class="col-6 mr-1">
+      <div class="col-9 mr-1">
-      <FormTextField
+        <FormTextField
-        label="User"
+          label="Server"
-        name="user"
+          name="server"
-        disabled={disabledFields.includes('user')}
+          disabled={disabledFields.includes('server')}
-        templateProps={{ noMargin: true }}
+          templateProps={{ noMargin: true }}
-      />
+        />
+      </div>
+      <div class="col-3 mr-1">
+        <FormTextField
+          label="Port"
+          name="port"
+          disabled={disabledFields.includes('port')}
+          templateProps={{ noMargin: true }}
+          placeholder={driver && driver.defaultPort}
+        />
+      </div>
     </div>
-    <div class="col-6 mr-1">
-      <FormPasswordField
-        label="Password"
-        name="password"
-        disabled={disabledFields.includes('password')}
-        templateProps={{ noMargin: true }}
-      />
-    </div>
-  </div>
 
-  {#if !disabledFields.includes('password')}
+    <div class="row">
-    <FormSelectField
+      <div class="col-6 mr-1">
-      label="Password mode"
+        <FormTextField
-      name="passwordMode"
+          label="User"
-      options={[
+          name="user"
-        { value: 'saveEncrypted', label: 'Save and encrypt' },
+          disabled={disabledFields.includes('user')}
-        { value: 'saveRaw', label: 'Save raw (UNSAFE!!)' },
+          templateProps={{ noMargin: true }}
-      ]}
+        />
-    />
+      </div>
+      <div class="col-6 mr-1">
+        <FormPasswordField
+          label="Password"
+          name="password"
+          disabled={disabledFields.includes('password')}
+          templateProps={{ noMargin: true }}
+        />
+      </div>
+    </div>
+
+    {#if !disabledFields.includes('password')}
+      <FormSelectField
+        label="Password mode"
+        name="passwordMode"
+        options={[
+          { value: 'saveEncrypted', label: 'Save and encrypt' },
+          { value: 'saveRaw', label: 'Save raw (UNSAFE!!)' },
+        ]}
+      />
+    {/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" />
+    <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();