handle readonly connection in UI

packages/web/src/impexp/FormConnectionSelect.svelte

@@ -3,16 +3,20 @@
   import FormSelectField from '../forms/FormSelectField.svelte';
   import getConnectionLabel from '../utility/getConnectionLabel';
   import { useConnectionList } from '../utility/metadataLoaders';
+
   export let allowChooseModel = false;
+  export let direction;
 
   $: connections = useConnectionList();
   $: connectionOptions = [
     ...(allowChooseModel ? [{ label: '(DB Model)', value: '__model' }] : []),
     ..._.sortBy(
-      ($connections || []).map(conn => ({
-        value: conn._id,
-        label: getConnectionLabel(conn),
-      })),
+      ($connections || [])
+        .filter(conn => (direction == 'target' ? !conn.isReadOnly : true))
+        .map(conn => ({
+          value: conn._id,
+          label: getConnectionLabel(conn),
+        })),
       'label'
     ),
   ];

packages/web/src/impexp/SourceTargetConfig.svelte

@@ -114,7 +114,7 @@
   />
 
   {#if storageType == 'database' || storageType == 'query'}
-    <FormConnectionSelect name={connectionIdField} label="Server" />
+    <FormConnectionSelect name={connectionIdField} label="Server" {direction} />
     <FormDatabaseSelect conidName={connectionIdField} name={databaseNameField} label="Database" />
   {/if}
   {#if storageType == 'database'}