save new connection on cloud

packages/web/src/appobj/CloudContentAppObject.svelte

@@ -48,7 +48,7 @@
   <AppObjectCore
     {...$$restProps}
     {data}
-    icon={'img connection'}
+    icon={'img cloud-connection'}
     title={data.name}
     menu={createMenu}
     on:click={handleOpenContent}

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -337,12 +337,14 @@
             $cloudSigninTokenHolder &&
             passProps?.cloudContentList?.length > 0 && {
               text: _t('connection.moveToCloudFolder', { defaultMessage: 'Move to cloud folder' }),
-              submenu: passProps?.cloudContentList?.map(fld => ({
-                text: fld.name,
-                onClick: () => {
-                  apiCall('cloud/move-connection-cloud', { conid: data._id, folid: fld.folid });
-                },
-              })),
+              submenu: passProps?.cloudContentList
+                ?.filter(x => x.role == 'write' || x.role == 'admin')
+                ?.map(fld => ({
+                  text: fld.name,
+                  onClick: () => {
+                    apiCall('cloud/move-connection-cloud', { conid: data._id, folid: fld.folid });
+                  },
+                })),
             },
         ],
       { divider: true },

packages/web/src/commands/stdCommands.ts

@@ -124,6 +124,27 @@ registerCommand({
   },
 });
 
+registerCommand({
+  id: 'new.connectionOnCloud',
+  toolbar: true,
+  icon: 'img cloud-connection',
+  toolbarName: 'Add connection on cloud',
+  category: 'New',
+  toolbarOrder: 1,
+  name: 'Connection on Cloud',
+  testEnabled: () => !getCurrentConfig()?.runAsPortal && !getCurrentConfig()?.storageDatabase,
+  onClick: () => {
+    openNewTab({
+      title: 'New Connection on Cloud',
+      icon: 'img cloud-connection',
+      tabComponent: 'ConnectionTab',
+      props: {
+        saveOnCloud: true,
+      },
+    });
+  },
+});
+
 registerCommand({
   id: 'new.connection.folder',
   toolbar: true,

packages/web/src/forms/FormCloudFolderSelect.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { useCloudContentList } from '../utility/metadataLoaders';
+
+  import FormSelectField from './FormSelectField.svelte';
+
+  export let name;
+  export let requiredRoleVariants = ['read', 'write', 'admin'];
+
+  const cloudContentList = useCloudContentList();
+
+  $: folderOptions = ($cloudContentList || [])
+    .filter(folder => requiredRoleVariants.find(role => folder.role == role))
+    .map(folder => ({
+      value: folder.folid,
+      label: folder.name,
+    }));
+</script>
+
+<FormSelectField {...$$props} options={folderOptions} />

packages/web/src/icons/FontIcon.svelte

@@ -270,6 +270,7 @@
     'img role': 'mdi mdi-account-group color-icon-blue',
     'img admin': 'mdi mdi-security color-icon-blue',
     'img auth': 'mdi mdi-account-key color-icon-blue',
+    'img cloud-connection': 'mdi mdi-cloud-lock color-icon-blue',
 
     'img add': 'mdi mdi-plus-circle color-icon-green',
     'img minus': 'mdi mdi-minus-circle color-icon-red',

packages/web/src/modals/ChooseCloudFolderModal.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import FormCloudFolderSelect from '../forms/FormCloudFolderSelect.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import { useCloudContentList } from '../utility/metadataLoaders';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let message = '';
+  export let onConfirm;
+  export let requiredRoleVariants;
+
+  const cloudContentList = useCloudContentList();
+</script>
+
+{#if $cloudContentList}
+  <FormProvider initialValues={{ cloudFolder: $cloudContentList?.find(x => x.isPrivate)?.folid }}>
+    <ModalBase {...$$restProps}>
+      <svelte:fragment slot="header">Choose cloud folder</svelte:fragment>
+
+      <div>{message}</div>
+
+      <FormCloudFolderSelect label="Cloud folder" name="cloudFolder" isNative {requiredRoleVariants} />
+
+      <svelte:fragment slot="footer">
+        <FormSubmit
+          value="OK"
+          on:click={e => {
+            closeCurrentModal();
+            console.log('onConfirm', e.detail);
+            onConfirm(e.detail.cloudFolder);
+          }}
+        />
+        <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+      </svelte:fragment>
+    </ModalBase>
+  </FormProvider>
+{/if}

packages/web/src/tabs/ConnectionTab.svelte

@@ -36,6 +36,7 @@
   import ConnectionAdvancedDriverFields from '../settings/ConnectionAdvancedDriverFields.svelte';
   import DatabaseLoginModal from '../modals/DatabaseLoginModal.svelte';
   import { _t } from '../translations';
+  import ChooseCloudFolderModal from '../modals/ChooseCloudFolderModal.svelte';
 
   export let connection;
   export let tabid;
@@ -44,6 +45,7 @@
   export let inlineTabs = false;
 
   export let onlyTestButton;
+  export let saveOnCloud = false;
 
   let isTesting;
   let sqlConnectResult;
@@ -157,26 +159,53 @@
   $: currentConnection = getCurrentConnectionCore($values, driver);
 
   async function handleSave() {
-    let connection = getCurrentConnection();
-    connection = {
-      ...connection,
-      unsaved: false,
-    };
-    const saved = await apiCall('connections/save', connection);
-    $values = {
-      ...$values,
-      _id: saved._id,
-      unsaved: false,
-    };
-    changeTab(tabid, tab => ({
-      ...tab,
-      title: getConnectionLabel(saved),
-      props: {
-        ...tab.props,
-        conid: saved._id,
-      },
-    }));
-    showSnackbarSuccess('Connection saved');
+    if (saveOnCloud) {
+      showModal(ChooseCloudFolderModal, {
+        requiredRoleVariants: ['write', 'admin'],
+        message: 'Choose cloud folder to saved connection',
+        onConfirm: async folid => {
+          let connection = getCurrentConnection();
+          const saved = await apiCall('cloud/save-connection', { folid, connection });
+          if (saved?._id) {
+            $values = {
+              ...$values,
+              _id: saved._id,
+              unsaved: false,
+            };
+            changeTab(tabid, tab => ({
+              ...tab,
+              title: getConnectionLabel(saved),
+              props: {
+                ...tab.props,
+                conid: saved._id,
+              },
+            }));
+            showSnackbarSuccess('Connection saved');
+          }
+        },
+      });
+    } else {
+      let connection = getCurrentConnection();
+      connection = {
+        ...connection,
+        unsaved: false,
+      };
+      const saved = await apiCall('connections/save', connection);
+      $values = {
+        ...$values,
+        _id: saved._id,
+        unsaved: false,
+      };
+      changeTab(tabid, tab => ({
+        ...tab,
+        title: getConnectionLabel(saved),
+        props: {
+          ...tab.props,
+          conid: saved._id,
+        },
+      }));
+      showSnackbarSuccess('Connection saved');
+    }
   }
 
   async function handleConnect() {
@@ -287,7 +316,9 @@
           {:else if isConnected}
             <FormButton value="Disconnect" on:click={handleDisconnect} data-testid="ConnectionTab_buttonDisconnect" />
           {:else}
-            <FormButton value="Connect" on:click={handleConnect} data-testid="ConnectionTab_buttonConnect" />
+            {#if $values._id || !saveOnCloud}
+              <FormButton value="Connect" on:click={handleConnect} data-testid="ConnectionTab_buttonConnect" />
+            {/if}
             {#if isTesting}
               <FormButton value="Cancel test" on:click={handleCancelTest} />
             {:else}

packages/web/src/widgets/PrivateCloudWidget.svelte

@@ -111,6 +111,9 @@
           });
         },
       },
+      {
+        command: 'new.connectionOnCloud',
+      },
     ];
   }