@mongoosejs/studio 0.0.127 → 0.0.129

package/frontend/src/models/models.js

@@ -108,6 +108,34 @@ module.exports = app => app.component('models', {
         this.autocompleteTrie.bulkInsert(paths, 10);
       }
     },
+    buildDocumentFetchParams(options = {}) {
+      const params = {
+        model: this.currentModel,
+        limit
+      };
+
+      if (typeof options.skip === 'number') {
+        params.skip = options.skip;
+      }
+
+      const sortKeys = Object.keys(this.sortBy);
+      if (sortKeys.length > 0) {
+        const key = sortKeys[0];
+        if (typeof key === 'string' && key.length > 0) {
+          params.sortKey = key;
+          const direction = this.sortBy[key];
+          if (direction !== undefined && direction !== null) {
+            params.sortDirection = direction;
+          }
+        }
+      }
+
+      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
+        params.searchText = this.searchText;
+      }
+
+      return params;
+    },
     async initSearchFromUrl() {
       this.status = 'loading';
       this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
@@ -151,13 +179,48 @@ module.exports = app => app.component('models', {
       const before = this.searchText.slice(0, cursorPos);
       const match = before.match(/(?:\{|,)\s*([^:\s]*)$/);
       if (match && match[1]) {
-        const term = match[1].replace(/["']/g, '');
+        const token = match[1];
+        const leadingQuoteMatch = token.match(/^["']/);
+        const trailingQuoteMatch = token.length > 1 && /["']$/.test(token)
+          ? token[token.length - 1]
+          : '';
+        const term = token
+          .replace(/^["']/, '')
+          .replace(trailingQuoteMatch ? new RegExp(`[${trailingQuoteMatch}]$`) : '', '')
+          .trim();
         if (!term) {
           this.autocompleteSuggestions = [];
           return;
         }
         if (this.autocompleteTrie) {
-          this.autocompleteSuggestions = this.autocompleteTrie.getSuggestions(term, 10);
+          const primarySuggestions = this.autocompleteTrie.getSuggestions(term, 10);
+          const suggestionsSet = new Set(primarySuggestions);
+          if (Array.isArray(this.schemaPaths) && this.schemaPaths.length > 0) {
+            for (const schemaPath of this.schemaPaths) {
+              const path = schemaPath?.path;
+              if (
+                typeof path === 'string' &&
+                path.startsWith(`${term}.`) &&
+                !suggestionsSet.has(path)
+              ) {
+                suggestionsSet.add(path);
+                if (suggestionsSet.size >= 10) {
+                  break;
+                }
+              }
+            }
+          }
+          let suggestions = Array.from(suggestionsSet);
+          if (leadingQuoteMatch) {
+            const leadingQuote = leadingQuoteMatch[0];
+            suggestions = suggestions.map(suggestion => `${leadingQuote}${suggestion}`);
+          }
+          if (trailingQuoteMatch) {
+            suggestions = suggestions.map(suggestion =>
+              suggestion.endsWith(trailingQuoteMatch) ? suggestion : `${suggestion}${trailingQuoteMatch}`
+            );
+          }
+          this.autocompleteSuggestions = suggestions;
           this.autocompleteIndex = 0;
           return;
         }
@@ -194,9 +257,18 @@ module.exports = app => app.component('models', {
       }
       const token = match[1];
       const start = cursorPos - token.length;
-      this.searchText = this.searchText.slice(0, start) + suggestion + after;
+      let replacement = suggestion;
+      const leadingQuote = token.startsWith('"') || token.startsWith('\'') ? token[0] : '';
+      const trailingQuote = token.length > 1 && (token.endsWith('"') || token.endsWith('\'')) ? token[token.length - 1] : '';
+      if (leadingQuote && !replacement.startsWith(leadingQuote)) {
+        replacement = `${leadingQuote}${replacement}`;
+      }
+      if (trailingQuote && !replacement.endsWith(trailingQuote)) {
+        replacement = `${replacement}${trailingQuote}`;
+      }
+      this.searchText = this.searchText.slice(0, start) + replacement + after;
       this.$nextTick(() => {
-        const pos = start + suggestion.length;
+        const pos = start + replacement.length;
         input.setSelectionRange(pos, pos);
       });
       this.autocompleteSuggestions = [];
@@ -245,15 +317,7 @@ module.exports = app => app.component('models', {
       const container = this.$refs.documentsList;
       if (container.scrollHeight - container.clientHeight - 100 < container.scrollTop) {
         this.status = 'loading';
-        const params = {
-          model: this.currentModel,
-          sort: this.sortBy,
-          skip: this.documents.length,
-          limit
-        };
-        if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
-          params.searchText = this.searchText;
-        }
+        const params = this.buildDocumentFetchParams({ skip: this.documents.length });
         const { docs } = await api.Model.getDocuments(params);
         if (docs.length < limit) {
           this.loadedAllDocs = true;
@@ -322,14 +386,7 @@ module.exports = app => app.component('models', {
       let schemaPathsReceived = false;
 
       // Use async generator to stream SSEs
-      const params = {
-        model: this.currentModel,
-        sort: this.sortBy,
-        limit
-      };
-      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
-        params.searchText = this.searchText;
-      }
+      const params = this.buildDocumentFetchParams();
       for await (const event of api.Model.getDocumentsStream(params)) {
         if (event.schemaPaths && !schemaPathsReceived) {
           // Sort schemaPaths with _id first
@@ -373,15 +430,7 @@ module.exports = app => app.component('models', {
       let numDocsReceived = false;
 
       // Use async generator to stream SSEs
-      const params = {
-        model: this.currentModel,
-        sort: this.sortBy,
-        skip: this.documents.length,
-        limit
-      };
-      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
-        params.searchText = this.searchText;
-      }
+      const params = this.buildDocumentFetchParams({ skip: this.documents.length });
       for await (const event of api.Model.getDocumentsStream(params)) {
         if (event.numDocs !== undefined && !numDocsReceived) {
           this.numDocuments = event.numDocs;

package/frontend/src/mothership.js

@@ -54,4 +54,8 @@ exports.removeFromWorkspace = function removeFromWorkspace(params) {
   return client.post('/removeFromWorkspace', { workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id, ...params }).then(res => res.data);
 };
 
+exports.updateWorkspaceMember = function updateWorkspaceMember(params) {
+  return client.post('/updateWorkspaceMember', { workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id, ...params }).then(res => res.data);
+};
+
 exports.hasAPIKey = client.hasAPIKey;

package/frontend/src/navbar/navbar.html

@@ -57,7 +57,7 @@
           </button>
         </div>
 
-        <div v-if="showFlyout" class="absolute right-0 z-10 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
+        <div v-if="showFlyout" class="absolute right-0 z-[100] top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
           <router-link to="/team" v-if="hasAccess(roles, 'team')" @click="showFlyout = false" class="cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Team</router-link>
           <span v-else class="block px-4 py-2 text-sm text-gray-300 cursor-not-allowed" role="menuitem" tabindex="-1" id="user-menu-item-2">
             Team

package/frontend/src/team/team.html

@@ -64,9 +64,13 @@
         <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
           <p class="text-sm/6 text-gray-900 capitalize">{{getRolesForUser(user).join(', ')}}</p>
           <div class="flex gap-3">
-            <p class="mt-1 text-xs/5 text-gray-500 cursor-pointer">
+            <button
+              type="button"
+              class="mt-1 text-xs/5 text-gray-500 cursor-pointer disabled:cursor-not-allowed disabled:text-gray-300"
+              :disabled="getRolesForUser(user).includes('owner')"
+              @click="openEditModal(user)">
               Edit
-            </p>
+            </button>
             <button
               class="mt-1 text-xs/5 text-valencia-500 cursor-pointer disabled:cursor-not-allowed disabled:text-gray-300"
               :disabled="getRolesForUser(user).includes('owner')"
@@ -152,15 +156,70 @@
     </template>
   </modal>
 
+  <modal v-if="showEditModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="closeEditModal">&times;</div>
+      <div class="p-1 space-y-4">
+        <div class="text-lg font-bold">
+          Edit Member
+        </div>
+
+        <div>
+          <div class="text-sm/6 font-semibold text-gray-900">
+            {{showEditModal.user.name || showEditModal.user.githubUsername}}
+          </div>
+          <div class="text-xs/5 text-gray-500">
+            {{showEditModal.user.email ?? 'No Email'}}
+          </div>
+        </div>
+
+        <div>
+          <label for="editRole" class="block text-sm/6 font-medium text-gray-900">Role</label>
+          <div class="mt-2 grid grid-cols-1">
+            <select
+              id="editRole"
+              name="editRole"
+              v-model="showEditModal.role"
+              class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6">
+              <option value="admin" :disabled="disableRoleOption('admin')">Admin</option>
+              <option value="member" :disabled="disableRoleOption('member')">Member</option>
+              <option value="readonly" :disabled="disableRoleOption('readonly')">Read-only</option>
+              <option value="dashboards" :disabled="disableRoleOption('dashboards')">Dashboards Only</option>
+            </select>
+            <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+              <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+            </svg>
+          </div>
+          <div v-if="!workspace?.subscriptionTier" class="mt-2 text-sm text-gray-700">
+            You can only assign the "Dashboards Only" role until you activate a subscription.
+          </div>
+        </div>
+
+        <div class="mt-6 grid grid-cols-2 gap-4">
+          <async-button
+            @click="updateWorkspaceMember"
+            :disabled="showEditModal.role === showEditModal.originalRole"
+            class="border-0 mt-0 flex w-full items-center justify-center gap-3 rounded-md bg-ultramarine-600 hover:bg-ultramarine-500 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-500">
+            <span class="text-sm font-semibold leading-6">Save</span>
+          </async-button>
+
+          <span @click="closeEditModal" class="cursor-pointer flex w-full items-center justify-center gap-3 rounded-md bg-slate-500 hover:bg-slate-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400">
+            <span class="text-sm font-semibold leading-6">Cancel</span>
+          </span>
+        </div>
+      </div>
+    </template>
+  </modal>
+
   <modal v-if="showRemoveModal">
     <template v-slot:body>
-      <div class="modal-exit" @click="showRemoveModal = false">&times;</div>
+      <div class="modal-exit" @click="showRemoveModal = null">&times;</div>
       <div>
         Are you sure you want to remove user <span class="font-bold">{{showRemoveModal.githubUsername}}</span> from this workspace?
       </div>
       <div class="mt-6 grid grid-cols-2 gap-4">
         <async-button
-          @click="removeFromWorkspace(showConfirmDeleteModal)"
+          @click="removeFromWorkspace"
           class="border-0 mt-0 flex w-full items-center justify-center gap-3 rounded-md bg-valencia-500 hover:bg-valencia-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-400">
           <span class="text-sm font-semibold leading-6">Yes, Remove</span>
         </async-button>

package/frontend/src/team/team.js

@@ -11,6 +11,7 @@ module.exports = app => app.component('team', {
     invitations: null,
     showNewInvitationModal: false,
     showRemoveModal: null,
+    showEditModal: null,
     status: 'loading'
   }),
   async mounted() {
@@ -32,15 +33,60 @@ module.exports = app => app.component('team', {
     getRolesForUser(user) {
       return this.workspace.members.find(member => member.userId === user._id)?.roles ?? [];
     },
+    openEditModal(user) {
+      if (this.getRolesForUser(user).includes('owner')) {
+        return;
+      }
+
+      const roles = this.getRolesForUser(user);
+      const nonOwnerRoles = roles.filter(role => role !== 'owner');
+      const currentRole = nonOwnerRoles[0] ?? null;
+      const editableRole = currentRole ?? (this.workspace?.subscriptionTier ? 'member' : 'dashboards');
+
+      this.showEditModal = {
+        user,
+        role: editableRole,
+        originalRole: currentRole
+      };
+    },
+    closeEditModal() {
+      this.showEditModal = null;
+    },
+    async updateWorkspaceMember() {
+      if (this.showEditModal.role === this.showEditModal.originalRole) {
+        this.closeEditModal();
+        return;
+      }
+
+      const { workspace, users } = await mothership.updateWorkspaceMember({
+        userId: this.showEditModal.user._id,
+        roles: [this.showEditModal.role]
+      });
+
+      this.workspace = workspace;
+      this.users = users;
+      this.closeEditModal();
+    },
     async removeFromWorkspace() {
       const { workspace, users } = await mothership.removeFromWorkspace({ userId: this.showRemoveModal._id });
       this.workspace = workspace;
       this.users = users;
-      this.showRemoveModal = false;
+      this.showRemoveModal = null;
     },
     async getWorkspaceCustomerPortalLink() {
       const { url } = await mothership.getWorkspaceCustomerPortalLink();
       window.open(url, '_self');
+    },
+    disableRoleOption(option) {
+      if (this.workspace?.subscriptionTier) {
+        return false;
+      }
+
+      if (this.showEditModal?.originalRole === option) {
+        return false;
+      }
+
+      return option !== 'dashboards';
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.127",
+  "version": "0.0.129",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {