handle readonly connection in UI

packages/web/src/appobj/AppObjectCore.svelte

@@ -14,6 +14,7 @@
   export let isBold = false;
   export let isBusy = false;
   export let statusIcon = undefined;
+  export let statusIconBefore = undefined;
   export let statusTitle = undefined;
   export let extInfo = undefined;
   export let menu = undefined;
@@ -101,6 +102,11 @@
     <FontIcon style={`color:${colorMark}`} icon="icon square" />
   {/if}
   {title}
+  {#if statusIconBefore}
+    <span class="status">
+      <FontIcon icon={statusIconBefore} />
+    </span>
+  {/if}
   {#if statusIcon}
     <span class="status">
       <FontIcon icon={statusIcon} title={statusTitle} />

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -200,6 +200,7 @@
     : _.get($currentDatabase, 'connection._id') == data._id}
   statusIcon={statusIcon || engineStatusIcon}
   statusTitle={statusTitle || engineStatusTitle}
+  statusIconBefore={data.isReadOnly ? 'icon lock' : null}
   {extInfo}
   colorMark={passProps?.connectionColorFactory && passProps?.connectionColorFactory({ conid: data._id })}
   menu={getContextMenu}

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -177,7 +177,7 @@
       driver?.databaseEngineTypes?.includes('sql') && { onClick: handleNewTable, text: 'New table' },
       driver?.databaseEngineTypes?.includes('document') && { onClick: handleNewCollection, text: 'New collection' },
       { divider: true },
-      { onClick: handleImport, text: 'Import' },
+      !connection.isReadOnly && { onClick: handleImport, text: 'Import' },
       { onClick: handleExport, text: 'Export' },
       { onClick: handleShowDiagram, text: 'Show diagram' },
       { onClick: handleSqlGenerator, text: 'SQL Generator' },

packages/web/src/datagrid/DataGrid.svelte

@@ -69,8 +69,7 @@
   import _ from 'lodash';
   import registerCommand from '../commands/registerCommand';
   import { registerMenu } from '../utility/contextMenu';
-  import { getBoolSettingsValue } from '../settings/settingsTools';
-  import { getLocalStorage, getLocalStorage, getLocalStorage, setLocalStorage } from '../utility/storageCache';
+  import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
 
   export let config;
   export let setConfig;

packages/web/src/datagrid/TableDataGrid.svelte

@@ -70,7 +70,8 @@
           extendedDbInfo,
           { showHintColumns: getBoolSettingsValue('dataGrid.showHintColumns', true) },
           $serverVersion,
-          table => getDictionaryDescription(table, conid, database, $apps, $connections)
+          table => getDictionaryDescription(table, conid, database, $apps, $connections),
+          $connection?.isReadOnly
         )
       : null;
 
@@ -86,7 +87,8 @@
           extendedDbInfo,
           { showHintColumns: getBoolSettingsValue('dataGrid.showHintColumns', true) },
           $serverVersion,
-          table => getDictionaryDescription(table, conid, database, $apps, $connections)
+          table => getDictionaryDescription(table, conid, database, $apps, $connections),
+          $connection?.isReadOnly
         )
       : null;
 

packages/web/src/formview/ChangeSetFormer.ts

@@ -82,6 +82,9 @@ export default class ChangeSetFormer extends Former {
   redo() {
     this.dispatchChangeSet({ type: 'redo' });
   }
+  get editable() {
+    return this.display.editable;
+  }
   get canUndo() {
     return this.changeSetState.canUndo;
   }

packages/web/src/formview/FormView.svelte

@@ -327,6 +327,7 @@
   const [inplaceEditorState, dispatchInsplaceEditor] = createReducer((state, action) => {
     switch (action.type) {
       case 'show': {
+        if (!former.editable) return {};
         const column = getCellColumn(action.cell);
         if (!column) return state;
         if (column.uniquePath.length > 1) return state;

packages/web/src/icons/FontIcon.svelte

@@ -93,6 +93,7 @@
     'icon dots-vertical': 'mdi mdi-dots-vertical',
     'icon add': 'mdi mdi-plus-circle',
     'icon json': 'mdi mdi-code-json',
+    'icon lock': 'mdi mdi-lock',
 
     'icon run': 'mdi mdi-play',
     'icon chevron-down': 'mdi mdi-chevron-down',

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'}

packages/web/src/tabs/CollectionDataTab.svelte

@@ -89,7 +89,8 @@
           $cache,
           cache.update,
           loadedRows,
-          $changeSetStore?.value
+          $changeSetStore?.value,
+          $connection?.isReadOnly
         )
       : null;
   // $: console.log('LOADED ROWS MONGO', loadedRows);

packages/web/src/widgets/StatusBar.svelte

@@ -12,7 +12,7 @@
   import { findCommand } from '../commands/runCommand';
   import { useConnectionColor } from '../utility/useConnectionColor';
   import { apiCall } from '../utility/api';
-import { statusBarTabInfo } from '../utility/statusBarStore';
+  import { statusBarTabInfo } from '../utility/statusBarStore';
 
   $: databaseName = $currentDatabase && $currentDatabase.name;
   $: connection = $currentDatabase && $currentDatabase.connection;
@@ -44,7 +44,11 @@ import { statusBarTabInfo } from '../utility/statusBarStore';
   <div class="container">
     {#if databaseName}
       <div class="item">
-        <FontIcon icon="icon database" padRight />
+        {#if connection?.isReadOnly}
+          <FontIcon icon="icon lock" padRight />
+        {:else}
+          <FontIcon icon="icon database" padRight />
+        {/if}
         {databaseName}
       </div>
       {#if dbid}

packages/web/src/widgets/TabsPanel.svelte

@@ -390,6 +390,9 @@
           <div class="db-name-inner">
             <FontIcon icon={getDbIcon(tabGroup.tabDbKey)} />
             {tabGroup.tabDbName}
+            {#if $connectionList?.find(x => x._id == tabGroup.tabs[0]?.props?.conid)?.isReadOnly}
+              <FontIcon icon="icon lock" />
+            {/if}
           </div>
 
           <div