SYNC: folder administration modal

packages/api/.env

@@ -4,7 +4,7 @@ ALLOW_DBGATE_PRIVATE_CLOUD=1
 DEVWEB=1 
 # PROD_DBGATE_CLOUD=1
 # PROD_DBGATE_IDENTITY=1
-# LOCAL_DBGATE_CLOUD=1
+LOCAL_DBGATE_CLOUD=1
 # LOCAL_DBGATE_IDENTITY=1
 
 # CLOUD_UPGRADE_FILE=c:\test\upg\upgrade.zip

packages/api/src/controllers/cloud.js

@@ -258,4 +258,22 @@ module.exports = {
     await fs.writeFile(filePath, content);
     return true;
   },
+
+  folderUsers_meta: true,
+  async folderUsers({ folid }) {
+    const resp = await callCloudApiGet(`content-folders/users/${folid}`);
+    return resp;
+  },
+
+  setFolderUserRole_meta: true,
+  async setFolderUserRole({ folid, email, role }) {
+    const resp = await callCloudApiPost(`content-folders/set-user-role/${folid}`, { email, role });
+    return resp;
+  },
+
+  removeFolderUser_meta: true,
+  async removeFolderUser({ folid, email }) {
+    const resp = await callCloudApiPost(`content-folders/remove-user/${folid}`, { email });
+    return resp;
+  },
 };

packages/web/src/buttons/FormStyledDropDownButton.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { currentDropDownMenu } from '../stores';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let value;
+  export let menu = [];
+  export let asyncMenu = undefined;
+  export let disabled = false;
+  export let outline = false;
+  export let skipWidth = false;
+  export let icon = 'icon chevron-down';
+
+  let domButton;
+  let isLoading = false;
+
+  async function handleClick() {
+    if (disabled) return;
+
+    let items = menu;
+
+    if (asyncMenu) {
+      isLoading = true;
+      items = await asyncMenu();
+      isLoading = false;
+    }
+
+    const rect = domButton.getBoundingClientRect();
+    const left = rect.left;
+    const top = rect.bottom;
+    currentDropDownMenu.set({ left, top, items });
+  }
+</script>
+
+<div on:click={handleClick} class:disabled class:outline class:skipWidth bind:this={domButton}>
+  {value}
+  <FontIcon icon={isLoading ? 'icon loading' : icon} padLeft />
+</div>
+
+<style>
+  div {
+    border: 1px solid var(--theme-bg-button-inv-2);
+    padding: 2px;
+    padding-bottom: 4px;
+    margin: 2px;
+    background-color: var(--theme-bg-button-inv);
+    color: var(--theme-font-inv-1);
+    border-radius: 2px;
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  div:not(.skipWidth) {
+    width: 100px;
+  }
+
+  div:hover:not(.disabled):not(.outline) {
+    background-color: var(--theme-bg-button-inv-2);
+  }
+  div:active:not(.disabled):not(.outline) {
+    background-color: var(--theme-bg-button-inv-3);
+  }
+  div.disabled {
+    background-color: var(--theme-bg-button-inv-3);
+    color: var(--theme-font-inv-3);
+  }
+
+  div.outline {
+    background-color: transparent;
+    color: var(--theme-font-2);
+    border: 1px solid var(--theme-bg-button-inv-2);
+  }
+
+  input.outline:hover:not(.disabled) {
+    color: var(--theme-bg-button-inv-3);
+    border: 2px solid var(--theme-bg-button-inv-3);
+    margin: 1px;
+  }
+</style>

packages/web/src/widgets/PrivateCloudWidget.svelte

@@ -40,6 +40,7 @@
   import runCommand from '../commands/runCommand';
   import SaveFileModal from '../modals/SaveFileModal.svelte';
   import newQuery from '../query/newQuery';
+  import ConfigureSharedFolderModal from '../modals/ConfigureSharedFolderModal.svelte';
 
   let filter = '';
   let domSqlObjectList = null;
@@ -201,41 +202,40 @@
       });
     };
 
-    const handleCopyInviteLink = async role => {
-      const { inviteToken } = await apiCall(`cloud/get-invite-token`, {
-        folid: folder,
-        role,
-      });
-      if (inviteToken) {
-        const inviteLink = `dbgate://folder/v1/${inviteToken}?mode=${role}`;
-        navigator.clipboard.writeText(inviteLink);
-        showSnackbarInfo(`Invite link (${role}) copied to clipboard`);
-      }
-    };
-
     return [
       contentGroupMap[folder]?.role == 'admin' && [
         { text: 'Rename', onClick: handleRename },
         { text: 'Delete', onClick: handleDelete },
       ],
-      contentGroupMap[folder]?.role == 'admin' &&
+      isProApp() &&
+        contentGroupMap[folder]?.role == 'admin' &&
         !contentGroupMap[folder]?.isPrivate && {
-          text: 'Copy invite link',
+          text: 'Administrate access',
-          submenu: [
+          onClick: () => {
-            {
+            showModal(ConfigureSharedFolderModal, {
-              text: 'Admin',
+              folid: folder,
-              onClick: () => handleCopyInviteLink('admin'),
+              name: contentGroupMap[folder]?.name,
-            },
+            });
-            {
+          },
-              text: 'Write',
-              onClick: () => handleCopyInviteLink('write'),
-            },
-            {
-              text: 'Read',
-              onClick: () => handleCopyInviteLink('read'),
-            },
-          ],
         },
+      // contentGroupMap[folder]?.role == 'admin' &&
+      //   !contentGroupMap[folder]?.isPrivate && {
+      //     text: 'Copy invite link',
+      //     submenu: [
+      //       {
+      //         text: 'Admin',
+      //         onClick: () => handleCopyInviteLink('admin'),
+      //       },
+      //       {
+      //         text: 'Write',
+      //         onClick: () => handleCopyInviteLink('write'),
+      //       },
+      //       {
+      //         text: 'Read',
+      //         onClick: () => handleCopyInviteLink('read'),
+      //       },
+      //     ],
+      //   },
     ];
   }
 </script>