SYNC: Merge pull request #19 from dbgate/feature/sfill

2026-04-18 00:56:02 +00:00 · 2025-12-17 12:26:43 +01:00
parent 66d1143ca0
commit ca4667ff1e
16 changed files with 843 additions and 146 deletions
--- a/packages/web/src/forms/FormArgument.svelte
+++ b/packages/web/src/forms/FormArgument.svelte
@@ -11,6 +11,7 @@

  export let arg;
  export let namePrefix;
+  export let isReadOnly = false;

  $: name = `${namePrefix}${arg.name}`;

@@ -24,7 +25,7 @@
    defaultValue={arg.default}
    focused={arg.focused}
    placeholder={arg.placeholder}
-    disabled={arg.disabledFn ? arg.disabledFn($values) : arg.disabled}
+    disabled={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
  />
 {:else if arg.type == 'stringlist'}
  <FormStringList
@@ -32,6 +33,7 @@
    addButtonLabel={_tval(arg.addButtonLabel)}
    {name}
    placeholder={arg.placeholder}
+    isReadOnly={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
  />
 {:else if arg.type == 'number'}
  <FormTextField
@@ -41,14 +43,14 @@
    defaultValue={arg.default}
    focused={arg.focused}
    placeholder={arg.placeholder}
-    disabled={arg.disabledFn ? arg.disabledFn($values) : arg.disabled}
+    disabled={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
  />
 {:else if arg.type == 'checkbox'}
  <FormCheckboxField
    label={_tval(arg.label)}
    {name}
    defaultValue={arg.default}
-    disabled={arg.disabledFn ? arg.disabledFn($values) : arg.disabled}
+    disabled={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
  />
 {:else if arg.type == 'select'}
  <FormSelectField
@@ -59,7 +61,7 @@
    options={arg.options.map(opt =>
      _.isString(opt) ? { label: opt, value: opt } : { label: opt.name, value: opt.value }
    )}
-    disabled={arg.disabledFn ? arg.disabledFn($values) : arg.disabled}
+    disabled={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
  />
 {:else if arg.type == 'dropdowntext'}
  <FormDropDownTextField
@@ -72,6 +74,6 @@
        onClick: () => setFieldValue(name, _.isString(opt) ? opt : opt.value),
      }));
    }}
-    disabled={arg.disabledFn ? arg.disabledFn($values) : arg.disabled}
+    disabled={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
  />
 {/if}
--- a/packages/web/src/forms/FormArgumentList.svelte
+++ b/packages/web/src/forms/FormArgumentList.svelte
@@ -3,10 +3,11 @@

  export let namePrefix = '';
  export let args: any[];
+  export let isReadOnly = false;
 </script>

 <div>
  {#each args as arg (arg.name)}
-    <FormArgument {arg} {namePrefix} />
+    <FormArgument {arg} {namePrefix} {isReadOnly} />
  {/each}
 </div>
--- a/packages/web/src/forms/FormStringList.svelte
+++ b/packages/web/src/forms/FormStringList.svelte
@@ -12,6 +12,7 @@
  export let addButtonLabel;
  export let placeholder;
  export let templateProps;
+  export let isReadOnly = false;

  const { template, values, setFieldValue } = getFormContext();

@@ -20,7 +21,7 @@

 <svelte:component this={template} type="text" {label} {...templateProps}>
  {#each stringList as value, index}
-    <div class='input-line-flex'>
+    <div class="input-line-flex">
      <TextField
        {value}
        {placeholder}
@@ -28,12 +29,14 @@
          const newValues = stringList.map((v, i) => (i === index ? e.target['value'] : v));
          setFieldValue(name, newValues);
        }}
+        disabled={isReadOnly}
      />

      <InlineButton
        on:click={() => {
          setFieldValue(name, [...stringList.slice(0, index), ...stringList.slice(index + 1)]);
        }}
+        disabled={isReadOnly}
      >
        <FontIcon icon="icon delete" />
      </InlineButton>
@@ -45,11 +48,12 @@
    on:click={() => {
      setFieldValue(name, [...stringList, '']);
    }}
+    disabled={isReadOnly}
  />
 </svelte:component>

 <style>
-    .input-line-flex {
-        display: flex;
-    }
-</style>
+  .input-line-flex {
+    display: flex;
+  }
+</style>
--- a/packages/web/src/settings/ConnectionAdvancedDriverFields.svelte
+++ b/packages/web/src/settings/ConnectionAdvancedDriverFields.svelte
@@ -6,6 +6,8 @@
  import FormArgumentList from '../forms/FormArgumentList.svelte';
  import { _t } from '../translations';

+  export let isFormReadOnly;
+
  const { values } = getFormContext();

  $: engine = $values.engine;
@@ -17,9 +19,18 @@
  $: advancedFields = driver?.getAdvancedConnectionFields ? driver?.getAdvancedConnectionFields() : null;
 </script>

-<FormTextAreaField label={_t('connection.allowedDatabases', { defaultMessage: 'Allowed databases, one per line' })} name="allowedDatabases" disabled={isConnected} rows={8} />
-<FormTextField label={_t('connection.allowedDatabasesRegex', { defaultMessage: 'Allowed databases regular expression' })} name="allowedDatabasesRegex" disabled={isConnected} />
+<FormTextAreaField
+  label={_t('connection.allowedDatabases', { defaultMessage: 'Allowed databases, one per line' })}
+  name="allowedDatabases"
+  disabled={isConnected || isFormReadOnly}
+  rows={8}
+/>
+<FormTextField
+  label={_t('connection.allowedDatabasesRegex', { defaultMessage: 'Allowed databases regular expression' })}
+  name="allowedDatabasesRegex"
+  disabled={isConnected || isFormReadOnly}
+/>

 {#if advancedFields}
-  <FormArgumentList args={advancedFields} />
+  <FormArgumentList args={advancedFields} isReadOnly={isFormReadOnly} />
 {/if}
--- a/packages/web/src/settings/ConnectionDriverFields.svelte
+++ b/packages/web/src/settings/ConnectionDriverFields.svelte
@@ -23,6 +23,7 @@

  export let getDatabaseList;
  export let currentConnection;
+  export let isFormReadOnly;

  const { values, setFieldValue } = getFormContext();
  const electron = getElectron();
@@ -90,10 +91,10 @@
  label={_t('connection.type', { defaultMessage: 'Connection type' })}
  name="engine"
  isNative
-  disabled={isConnected}
+  disabled={isConnected || isFormReadOnly}
  data-testid="ConnectionDriverFields_connectionType"
  options={[
-    { label: _t('connection.selectType', { defaultMessage: '(select connection type)' })},
+    { label: _t('connection.selectType', { defaultMessage: '(select connection type)' }) },
    ..._.sortBy(
      $extensions.drivers
        // .filter(driver => !driver.isElectronOnly || electron)
@@ -113,7 +114,7 @@
      data-testid="ConnectionDriverFields_authType"
      name="authType"
      isNative
-      disabled={isConnected}
+      disabled={isConnected || isFormReadOnly}
      defaultValue={driver?.defaultAuthTypeName}
      options={$authTypes.map(auth => ({
        value: auth.name,
@@ -127,16 +128,18 @@
  <FormClusterNodesField
    label={_t('connection.clusterNodes', { defaultMessage: 'Cluster nodes' })}
    name="clusterNodes"
-    disabled={isConnected || disabledFields.includes('clusterNodes')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('clusterNodes')}
    data-testid="ConnectionDriverFields_clusterNodes"
  />
 {/if}

 {#if driver?.showConnectionField('autoDetectNatMap', $values, showConnectionFieldArgs)}
  <FormCheckboxField
-    label={_t('connection.autoDetectNatMap', { defaultMessage: 'Auto detect NAT map (use for Redis Cluster in Docker network)' })}
+    label={_t('connection.autoDetectNatMap', {
+      defaultMessage: 'Auto detect NAT map (use for Redis Cluster in Docker network)',
+    })}
    name="autoDetectNatMap"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
    data-testid="ConnectionDriverFields_autoDetectNatMap"
  />
 {/if}
@@ -146,13 +149,13 @@
    <FormElectronFileSelector
      label={_t('connection.databaseFile', { defaultMessage: 'Database file' })}
      name="databaseFile"
-      disabled={isConnected || disabledFields.includes('databaseFile')}
+      disabled={isConnected || isFormReadOnly || disabledFields.includes('databaseFile')}
    />
  {:else}
    <FormTextField
      label={_t('connection.databaseFilePath', { defaultMessage: 'Database file (path on server)' })}
      name="databaseFile"
-      disabled={isConnected || disabledFields.includes('databaseFile')}
+      disabled={isConnected || isFormReadOnly || disabledFields.includes('databaseFile')}
    />
  {/if}
 {/if}
@@ -160,11 +163,15 @@
 {#if driver?.showConnectionField('useDatabaseUrl', $values, showConnectionFieldArgs)}
  <div class="radio">
    <FormRadioGroupField
-      disabled={isConnected || disabledFields.includes('useDatabaseUrl')}
+      disabled={isConnected || isFormReadOnly || disabledFields.includes('useDatabaseUrl')}
      name="useDatabaseUrl"
      matchValueToOption={(value, option) => !!option.value == !!value}
      options={[
-        { label: _t('connection.fillDetails', { defaultMessage: 'Fill database connection details' }), value: '', default: true },
+        {
+          label: _t('connection.fillDetails', { defaultMessage: 'Fill database connection details' }),
+          value: '',
+          default: true,
+        },
        { label: _t('connection.useUrl', { defaultMessage: 'Use database URL' }), value: '1' },
      ]}
    />
@@ -177,7 +184,7 @@
    name="databaseUrl"
    data-testid="ConnectionDriverFields_databaseUrl"
    placeholder={driver?.databaseUrlPlaceholder}
-    disabled={isConnected || disabledFields.includes('databaseUrl')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('databaseUrl')}
  />
 {/if}

@@ -187,7 +194,7 @@
    name="localDataCenter"
    data-testid="ConnectionDriverFields_localDataCenter"
    placeholder={driver?.defaultLocalDataCenter}
-    disabled={isConnected || disabledFields.includes('localDataCenter')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('localDataCenter')}
  />
 {/if}

@@ -196,7 +203,7 @@
    label={_t('connection.authToken', { defaultMessage: 'Auth token' })}
    name="authToken"
    data-testid="ConnectionDriverFields_authToken"
-    disabled={isConnected || disabledFields.includes('authToken')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('authToken')}
  />
 {/if}

@@ -207,7 +214,7 @@
      data-testid="ConnectionDriverFields_authType"
      name="authType"
      isNative
-      disabled={isConnected}
+      disabled={isConnected || isFormReadOnly}
      defaultValue={driver?.defaultAuthTypeName}
      options={$authTypes.map(auth => ({
        value: auth.name,
@@ -219,9 +226,9 @@

 {#if driver?.showConnectionField('endpoint', $values, showConnectionFieldArgs)}
  <FormTextField
-    label='Endpoint'
+    label="Endpoint"
    name="endpoint"
-    disabled={isConnected || disabledFields.includes('endpoint')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('endpoint')}
    data-testid="ConnectionDriverFields_endpoint"
  />
 {/if}
@@ -230,7 +237,7 @@
  <FormTextField
    label={_t('connection.endpointKey', { defaultMessage: 'Key' })}
    name="endpointKey"
-    disabled={isConnected || disabledFields.includes('endpointKey')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('endpointKey')}
    data-testid="ConnectionDriverFields_endpointKey"
  />
 {/if}
@@ -239,7 +246,7 @@
  <FormTextField
    label={_t('connection.clientLibraryPath', { defaultMessage: 'Client library path' })}
    name="clientLibraryPath"
-    disabled={isConnected || disabledFields.includes('clientLibraryPath')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('clientLibraryPath')}
    data-testid="ConnectionDriverFields_clientLibraryPath"
  />
 {/if}
@@ -250,7 +257,7 @@
      <FormTextField
        label={_t('connection.server', { defaultMessage: 'Server' })}
        name="server"
-        disabled={isConnected || disabledFields.includes('server')}
+        disabled={isConnected || isFormReadOnly || disabledFields.includes('server')}
        templateProps={{ noMargin: true }}
        data-testid="ConnectionDriverFields_server"
      />
@@ -260,7 +267,7 @@
        <FormTextField
          label="Port"
          name="port"
-          disabled={isConnected || disabledFields.includes('port')}
+          disabled={isConnected || isFormReadOnly || disabledFields.includes('port')}
          templateProps={{ noMargin: true }}
          placeholder={driver?.defaultPort}
          data-testid="ConnectionDriverFields_port"
@@ -271,7 +278,9 @@
  {#if getCurrentConfig().isDocker}
    <div class="row">
      <FontIcon icon="img warn" padRight />
-      { _t('connection.dockerWarning', { defaultMessage: 'Under docker, localhost and 127.0.0.1 will not work, use dockerhost instead' }) }
+      {_t('connection.dockerWarning', {
+        defaultMessage: 'Under docker, localhost and 127.0.0.1 will not work, use dockerhost instead',
+      })}
    </div>
  {/if}
 {/if}
@@ -280,9 +289,11 @@
  <div class="row">
    <div class="col-9 mr-1">
      <FormTextField
-        label={$values.serviceNameType == 'sid' ? 'SID' : _t('connection.serviceName', { defaultMessage: 'Service name' })}
+        label={$values.serviceNameType == 'sid'
+          ? 'SID'
+          : _t('connection.serviceName', { defaultMessage: 'Service name' })}
        name="serviceName"
-        disabled={isConnected}
+        disabled={isConnected || isFormReadOnly}
        templateProps={{ noMargin: true }}
        data-testid="ConnectionDriverFields_serviceName"
      />
@@ -293,7 +304,7 @@
        isNative
        name="serviceNameType"
        defaultValue="serviceName"
-        disabled={isConnected}
+        disabled={isConnected || isFormReadOnly}
        templateProps={{ noMargin: true }}
        options={[
          { value: 'serviceName', label: _t('connection.serviceName', { defaultMessage: 'Service name' }) },
@@ -309,7 +320,7 @@
  <FormTextField
    label={_t('connection.socketPath', { defaultMessage: 'Socket path' })}
    name="socketPath"
-    disabled={isConnected || disabledFields.includes('socketPath')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('socketPath')}
    placeholder={driver?.defaultSocketPath}
    data-testid="ConnectionDriverFields_scoketPath"
  />
@@ -322,7 +333,7 @@
        <FormTextField
          label={_t('connection.user', { defaultMessage: 'User' })}
          name="user"
-          disabled={isConnected || disabledFields.includes('user')}
+          disabled={isConnected || isFormReadOnly || disabledFields.includes('user')}
          templateProps={{ noMargin: true }}
          data-testid="ConnectionDriverFields_user"
        />
@@ -333,7 +344,7 @@
        <FormPasswordField
          label={_t('connection.password', { defaultMessage: 'Password' })}
          name="password"
-          disabled={isConnected || disabledFields.includes('password')}
+          disabled={isConnected || isFormReadOnly || disabledFields.includes('password')}
          templateProps={{ noMargin: true }}
          data-testid="ConnectionDriverFields_password"
        />
@@ -345,7 +356,7 @@
  <FormTextField
    label={_t('connection.user', { defaultMessage: 'User' })}
    name="user"
-    disabled={isConnected || disabledFields.includes('user')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('user')}
    data-testid="ConnectionDriverFields_user"
  />
 {/if}
@@ -353,7 +364,7 @@
  <FormPasswordField
    label={_t('connection.password', { defaultMessage: 'Password' })}
    name="password"
-    disabled={isConnected || disabledFields.includes('password')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('password')}
    data-testid="ConnectionDriverFields_password"
  />
 {/if}
@@ -380,7 +391,7 @@
      <FormTextField
        label={_t('connection.accessKeyId', { defaultMessage: 'Access Key ID' })}
        name="accessKeyId"
-        disabled={isConnected || disabledFields.includes('accessKeyId')}
+        disabled={isConnected || isFormReadOnly || disabledFields.includes('accessKeyId')}
        templateProps={{ noMargin: true }}
        data-testid="ConnectionDriverFields_accesKeyId"
      />
@@ -391,7 +402,7 @@
      <FormPasswordField
        label={_t('connection.secretAccessKey', { defaultMessage: 'Secret access key' })}
        name="secretAccessKey"
-        disabled={isConnected || disabledFields.includes('secretAccessKey')}
+        disabled={isConnected || isFormReadOnly || disabledFields.includes('secretAccessKey')}
        templateProps={{ noMargin: true }}
        data-testid="ConnectionDriverFields_secretAccessKey"
      />
@@ -405,12 +416,15 @@
    isNative
    name="passwordMode"
    defaultValue="saveEncrypted"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
    options={[
      { value: 'saveEncrypted', label: _t('connection.saveEncrypted', { defaultMessage: 'Save and encrypt' }) },
      { value: 'saveRaw', label: _t('connection.saveRaw', { defaultMessage: 'Save raw (UNSAFE!!)' }) },
      { value: 'askPassword', label: _t('connection.askPassword', { defaultMessage: "Don't save, ask for password" }) },
-      { value: 'askUser', label: _t('connection.askUser', { defaultMessage: "Don't save, ask for login and password" }) },
+      {
+        value: 'askUser',
+        label: _t('connection.askUser', { defaultMessage: "Don't save, ask for login and password" }),
+      },
    ]}
    data-testid="ConnectionDriverFields_passwordMode"
  />
@@ -420,7 +434,7 @@
  <FormTextField
    label={_t('connection.keySeparator', { defaultMessage: 'Key separator' })}
    name="treeKeySeparator"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
    placeholder=":"
    data-testid="ConnectionDriverFields_treeKeySeparator"
  />
@@ -430,7 +444,7 @@
  <FormTextField
    label={_t('connection.windowsDomain', { defaultMessage: 'Domain (specify to use NTLM authentication)' })}
    name="windowsDomain"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
    data-testid="ConnectionDriverFields_windowsDomain"
  />
 {/if}
@@ -439,7 +453,7 @@
  <FormCheckboxField
    label={_t('connection.isReadOnly', { defaultMessage: 'Is read only' })}
    name="isReadOnly"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
    data-testid="ConnectionDriverFields_isReadOnly"
  />
 {/if}
@@ -448,7 +462,7 @@
  <FormCheckboxField
    label={_t('connection.trustServerCertificate', { defaultMessage: 'Trust server certificate' })}
    name="trustServerCertificate"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
    data-testid="ConnectionDriverFields_trustServerCertificate"
  />
 {/if}
@@ -457,33 +471,42 @@
  <FormDropDownTextField
    label={_t('connection.defaultDatabase', { defaultMessage: 'Default database' })}
    name="defaultDatabase"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('defaultDatabase')}
    data-testid="ConnectionDriverFields_defaultDatabase"
    asyncMenu={createDatabasesMenu}
-    placeholder={_t('common.notSelectedOptional', { defaultMessage : "(not selected - optional)"})}
+    placeholder={_t('common.notSelectedOptional', { defaultMessage: '(not selected - optional)' })}
  />
 {/if}

 {#if defaultDatabase && driver?.showConnectionField('singleDatabase', $values, showConnectionFieldArgs)}
  <FormCheckboxField
-    label={_t('connection.singleDatabase', { defaultMessage: 'Use only database {defaultDatabase}', values: { defaultDatabase } })}
+    label={_t('connection.singleDatabase', {
+      defaultMessage: 'Use only database {defaultDatabase}',
+      values: { defaultDatabase },
+    })}
    name="singleDatabase"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
    data-testid="ConnectionDriverFields_singleDatabase"
  />
 {/if}

 {#if driver?.showConnectionField('useSeparateSchemas', $values, showConnectionFieldArgs)}
  <FormCheckboxField
-    label={_t('connection.useSeparateSchemas', { defaultMessage: 'Use schemas separately (use this if you have many large schemas)' })}
+    label={_t('connection.useSeparateSchemas', {
+      defaultMessage: 'Use schemas separately (use this if you have many large schemas)',
+    })}
    name="useSeparateSchemas"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
    data-testid="ConnectionDriverFields_useSeparateSchemas"
  />
 {/if}

 {#if driver?.showConnectionField('connectionDefinition', $values, showConnectionFieldArgs)}
-  <FormFileInputField disabled={isConnected} label={_t('connection.connectionDefinition', { defaultMessage: 'Service account key JSON' })} name="connectionDefinition" />
+  <FormFileInputField
+    disabled={isConnected || isFormReadOnly}
+    label={_t('connection.connectionDefinition', { defaultMessage: 'Service account key JSON' })}
+    name="connectionDefinition"
+  />
 {/if}

 {#if driver}
@@ -493,7 +516,7 @@
        label={_t('connection.displayName', { defaultMessage: 'Display name' })}
        name="displayName"
        templateProps={{ noMargin: true }}
-        disabled={isConnected}
+        disabled={isConnected || isFormReadOnly}
        data-testid="ConnectionDriverFields_displayName"
        placeholder={getConnectionLabel(currentConnection)}
      />
@@ -505,7 +528,7 @@
        name="connectionColor"
        emptyLabel="(not selected)"
        templateProps={{ noMargin: true }}
-        disabled={isConnected}
+        disabled={isConnected || isFormReadOnly}
        data-testid="ConnectionDriverFields_connectionColor"
      />
    </div>
--- a/packages/web/src/settings/ConnectionSshTunnelFields.svelte
+++ b/packages/web/src/settings/ConnectionSshTunnelFields.svelte
@@ -14,6 +14,8 @@
  import { extensions, openedConnections, openedSingleDatabaseConnections } from '../stores';
  import { _t } from '../translations';

+  export let isFormReadOnly;
+
  const { values, setFieldValue } = getFormContext();
  const electron = getElectron();

@@ -30,9 +32,9 @@
 </script>

 <FormCheckboxField
-  label={_t('connection.sshTunnel.use', {defaultMessage: "Use SSH tunnel"})}
+  label={_t('connection.sshTunnel.use', { defaultMessage: 'Use SSH tunnel' })}
  name="useSshTunnel"
-  disabled={isConnected}
+  disabled={isConnected || isFormReadOnly}
  data-testid="ConnectionSshTunnelFields_useSshTunnel"
 />

@@ -41,7 +43,7 @@
    <FormTextField
      label="Host"
      name="sshHost"
-      disabled={isConnected || !useSshTunnel}
+      disabled={isConnected || !useSshTunnel || isFormReadOnly}
      templateProps={{ noMargin: true }}
      data-testid="ConnectionSshTunnelFields_sshHost"
    />
@@ -50,23 +52,30 @@
    <FormTextField
      label="Port"
      name="sshPort"
-      disabled={isConnected || !useSshTunnel}
+      disabled={isConnected || !useSshTunnel || isFormReadOnly}
      templateProps={{ noMargin: true }}
      placeholder="22"
      data-testid="ConnectionSshTunnelFields_sshPort"
    />
  </div>
 </div>
-<FormTextField label="Bastion host (Jump host)" name="sshBastionHost" disabled={isConnected || !useSshTunnel} />
+<FormTextField
+  label="Bastion host (Jump host)"
+  name="sshBastionHost"
+  disabled={isConnected || !useSshTunnel || isFormReadOnly}
+/>

 <FormSelectField
-  label={_t('connection.sshTunnel.authentication', {defaultMessage: "SSH Authentication"})}
+  label={_t('connection.sshTunnel.authentication', { defaultMessage: 'SSH Authentication' })}
  name="sshMode"
  isNative
  defaultSelectValue="userPassword"
-  disabled={isConnected || !useSshTunnel}
+  disabled={isConnected || !useSshTunnel || isFormReadOnly}
  options={[
-    { value: 'userPassword', label: _t('connection.sshTunnel.authMethod.userPassword', {defaultMessage: "Username & password"}) },
+    {
+      value: 'userPassword',
+      label: _t('connection.sshTunnel.authMethod.userPassword', { defaultMessage: 'Username & password' }),
+    },
    { value: 'agent', label: 'SSH agent' },
    { value: 'keyFile', label: 'Key file' },
  ]}
@@ -77,7 +86,7 @@
  <FormTextField
    label="Login"
    name="sshLogin"
-    disabled={isConnected || !useSshTunnel}
+    disabled={isConnected || !useSshTunnel || isFormReadOnly}
    data-testid="ConnectionSshTunnelFields_sshLogin"
  />
 {/if}
@@ -88,16 +97,16 @@
      <FormTextField
        label="Login"
        name="sshLogin"
-        disabled={isConnected || !useSshTunnel}
+        disabled={isConnected || !useSshTunnel || isFormReadOnly}
        templateProps={{ noMargin: true }}
        data-testid="ConnectionSshTunnelFields_sshLogin"
      />
    </div>
    <div class="col-6">
      <FormPasswordField
-        label={_t('connection.password', {defaultMessage: 'Password'})}
+        label={_t('connection.password', { defaultMessage: 'Password' })}
        name="sshPassword"
-        disabled={isConnected || !useSshTunnel}
+        disabled={isConnected || !useSshTunnel || isFormReadOnly}
        templateProps={{ noMargin: true }}
        data-testid="ConnectionSshTunnelFields_sshPassword"
      />
@@ -110,18 +119,18 @@
    <div class="col-6 mr-1">
      {#if electron}
        <FormElectronFileSelector
-          label={_t('connection.sshTunnel.privateKeyFile', {defaultMessage: "Private key file"})}
+          label={_t('connection.sshTunnel.privateKeyFile', { defaultMessage: 'Private key file' })}
          name="sshKeyfile"
-          disabled={isConnected || !useSshTunnel}
+          disabled={isConnected || !useSshTunnel || isFormReadOnly}
          templateProps={{ noMargin: true }}
          defaultFileName={$platformInfo?.defaultKeyfile}
          data-testid="ConnectionSshTunnelFields_sshKeyfile"
        />
      {:else}
        <FormTextField
-          label={_t('connection.sshTunnel.privateKeyFilePath', {defaultMessage: "Private key file (path on server)"})}
+          label={_t('connection.sshTunnel.privateKeyFilePath', { defaultMessage: 'Private key file (path on server)' })}
          name="sshKeyfile"
-          disabled={isConnected || !useSshTunnel}
+          disabled={isConnected || !useSshTunnel || isFormReadOnly}
          templateProps={{ noMargin: true }}
          placeholder={$platformInfo?.defaultKeyfile}
          data-testid="ConnectionSshTunnelFields_sshKeyfile"
@@ -130,9 +139,9 @@
    </div>
    <div class="col-6">
      <FormPasswordField
-        label={_t('connection.sshTunnel.keyFilePassphrase', {defaultMessage: "Key file passphrase"})}
+        label={_t('connection.sshTunnel.keyFilePassphrase', { defaultMessage: 'Key file passphrase' })}
        name="sshKeyfilePassword"
-        disabled={isConnected || !useSshTunnel}
+        disabled={isConnected || !useSshTunnel || isFormReadOnly}
        templateProps={{ noMargin: true }}
        data-testid="ConnectionSshTunnelFields_sshKeyfilePassword"
      />
@@ -143,9 +152,10 @@
 {#if useSshTunnel && $values.sshMode == 'agent'}
  <div class="ml-3 mb-3">
    {#if $platformInfo && $platformInfo.sshAuthSock}
-      <FontIcon icon="img ok" /> {_t('connection.sshTunnel.agentFound', {defaultMessage: "SSH Agent found"})}
+      <FontIcon icon="img ok" /> {_t('connection.sshTunnel.agentFound', { defaultMessage: 'SSH Agent found' })}
    {:else}
-      <FontIcon icon="img error" /> {_t('connection.sshTunnel.agentNotFound', {defaultMessage: "SSH Agent not found"})}
+      <FontIcon icon="img error" />
+      {_t('connection.sshTunnel.agentNotFound', { defaultMessage: 'SSH Agent not found' })}
    {/if}
  </div>
 {/if}
--- a/packages/web/src/settings/ConnectionSslFields.svelte
+++ b/packages/web/src/settings/ConnectionSslFields.svelte
@@ -9,6 +9,8 @@
  import { openedConnections, openedSingleDatabaseConnections } from '../stores';
  import { _t } from '../translations';

+  export let isFormReadOnly;
+
  const { values, setFieldValue } = getFormContext();
  const electron = getElectron();

@@ -16,21 +18,35 @@
  $: isConnected = $openedConnections.includes($values._id) || $openedSingleDatabaseConnections.includes($values._id);
 </script>

-<FormCheckboxField label={_t('connection.ssl.use', {defaultMessage: "Use SSL"})} name="useSsl" disabled={isConnected} />
-<FormElectronFileSelector label={_t('connection.ssl.caCert', {defaultMessage: "CA Cert (optional)"})} name="sslCaFile" disabled={isConnected || !useSsl || !electron} />
+<FormCheckboxField
+  label={_t('connection.ssl.use', { defaultMessage: 'Use SSL' })}
+  name="useSsl"
+  disabled={isConnected || isFormReadOnly}
+/>
 <FormElectronFileSelector
-  label={_t('connection.ssl.certificate', {defaultMessage: "Certificate (optional)"})}
+  label={_t('connection.ssl.caCert', { defaultMessage: 'CA Cert (optional)' })}
+  name="sslCaFile"
+  disabled={isConnected || !useSsl || !electron || isFormReadOnly}
+/>
+<FormElectronFileSelector
+  label={_t('connection.ssl.certificate', { defaultMessage: 'Certificate (optional)' })}
  name="sslCertFile"
-  disabled={isConnected || !useSsl || !electron}
+  disabled={isConnected || !useSsl || !electron || isFormReadOnly}
 />
 <FormPasswordField
-  label={_t('connection.ssl.certificateKeyFilePassword', {defaultMessage: "Certificate key file password (optional)"})}
+  label={_t('connection.ssl.certificateKeyFilePassword', {
+    defaultMessage: 'Certificate key file password (optional)',
+  })}
  name="sslCertFilePassword"
-  disabled={isConnected || !useSsl || !electron}
+  disabled={isConnected || !useSsl || !electron || isFormReadOnly}
 />
 <FormElectronFileSelector
-  label={_t('connection.ssl.keyFile', {defaultMessage: "Key file (optional)"})}
+  label={_t('connection.ssl.keyFile', { defaultMessage: 'Key file (optional)' })}
  name="sslKeyFile"
-  disabled={isConnected || !useSsl || !electron}
+  disabled={isConnected || !useSsl || !electron || isFormReadOnly}
+/>
+<FormCheckboxField
+  label={_t('connection.ssl.rejectUnauthorized', { defaultMessage: 'Reject unauthorized' })}
+  name="sslRejectUnauthorized"
+  disabled={isConnected || !useSsl || isFormReadOnly}
 />
-<FormCheckboxField label={_t('connection.ssl.rejectUnauthorized', {defaultMessage: "Reject unauthorized"})} name="sslRejectUnauthorized" disabled={isConnected || !useSsl} />
--- a/packages/web/src/tabs/ConnectionTab.svelte
+++ b/packages/web/src/tabs/ConnectionTab.svelte
@@ -59,6 +59,8 @@
      }
    );

+  $: isFormReadOnly = !!$values.import_source_id;
+
  // $: console.log('ConnectionTab.$values', $values);
  // $: console.log('ConnectionTab.driver', driver);

@@ -302,22 +304,25 @@
        {
          label: _t('common.general', { defaultMessage: 'General' }),
          component: ConnectionDriverFields,
-          props: { getDatabaseList, currentConnection },
+          props: { getDatabaseList, currentConnection, isFormReadOnly },
          testid: 'ConnectionTab_tabGeneral',
        },
        driver?.showConnectionTab('sshTunnel', $values) && {
          label: 'SSH Tunnel',
          component: ConnectionSshTunnelFields,
+          props: { isFormReadOnly },
          testid: 'ConnectionTab_tabSshTunnel',
        },
        driver?.showConnectionTab('ssl', $values) && {
          label: 'SSL',
          component: ConnectionSslFields,
+          props: { isFormReadOnly },
          testid: 'ConnectionTab_tabSsl',
        },
        {
          label: _t('common.advanced', { defaultMessage: 'Advanced' }),
          component: ConnectionAdvancedDriverFields,
+          props: { isFormReadOnly },
          testid: 'ConnectionTab_tabAdvanced',
        },
      ]}
@@ -383,7 +388,8 @@
          {/if}
          {#if isTesting}
            <div>
-              <FontIcon icon="icon loading" /> {_t('common.testingConnection', { defaultMessage: 'Testing connection' })}
+              <FontIcon icon="icon loading" />
+              {_t('common.testingConnection', { defaultMessage: 'Testing connection' })}
            </div>
          {/if}
        </div>
--- a/packages/web/src/translations.ts
+++ b/packages/web/src/translations.ts
@@ -124,7 +124,7 @@ export function __t(key: string, options: TranslateOptions): DefferedTranslation
  };
 }

-export function _tval(x: string | DefferedTranslationResult): string {
+export function _tval(x: any | DefferedTranslationResult): string {
  if (typeof x === 'string') return x;
  if (typeof x?._transKey === 'string') {
    return _t(x._transKey, x._transOptions);
@@ -132,7 +132,7 @@ export function _tval(x: string | DefferedTranslationResult): string {
  if (typeof x?._transCallback === 'function') {
    return x._transCallback();
  }
-  return '';
+  return x?.toString() || '';
 }

 export function isDefferedTranslationResult(x: string | DefferedTranslationResult): x is DefferedTranslationResult {