@mongoosejs/studio 0.1.17 → 0.1.18

package/frontend/public/tw.css

@@ -1326,6 +1326,12 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));

package/frontend/src/api.js

@@ -21,7 +21,7 @@ client.interceptors.request.use(req => {
 client.interceptors.response.use(
   res => res,
   err => {
-    if (typeof err.response.data === 'string') {
+    if (typeof err?.response?.data === 'string') {
       throw new Error(`Error in ${err.config?.method} ${err.config?.url}: ${err.response.data}`);
     }
     throw err;
@@ -132,6 +132,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         yield { document: doc };
       }
     },
+    getCollectionInfo: function getCollectionInfo(params) {
+      return client.post('', { action: 'Model.getCollectionInfo', ...params }).then(res => res.data);
+    },
     getIndexes: function getIndexes(params) {
       return client.post('', { action: 'Model.getIndexes', ...params }).then(res => res.data);
     },
@@ -338,6 +341,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         }
       }
     },
+    getCollectionInfo: function getCollectionInfo(params) {
+      return client.post('/Model/getCollectionInfo', params).then(res => res.data);
+    },
     getIndexes: function getIndexes(params) {
       return client.post('/Model/getIndexes', params).then(res => res.data);
     },

package/frontend/src/chat/chat-message/chat-message.js

@@ -62,6 +62,13 @@ module.exports = app => app.component('chat-message', {
       });
       message.executionResult = chatMessage.executionResult;
       console.log(message);
+      vanillatoasts.create({
+        title: 'Script executed successfully!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     },
     async copyMessage() {
       const parts = this.contentSplitByScripts;

package/frontend/src/chat/chat-message-script/chat-message-script.js

@@ -56,6 +56,13 @@ module.exports = app => app.component('chat-message-script', {
         this.highlightCode();
       }
       this.activeTab = 'output';
+      vanillatoasts.create({
+        title: 'Script executed successfully!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
       return chatMessage;
     },
     openDetailModal() {
@@ -157,6 +164,13 @@ module.exports = app => app.component('chat-message-script', {
         throw err;
       });
       this.createError = null;
+      vanillatoasts.create({
+        title: 'Dashboard created!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
       this.showCreateDashboardModal = false;
       this.$router.push('/dashboard/' + dashboard._id);
     },
@@ -183,6 +197,13 @@ module.exports = app => app.component('chat-message-script', {
       });
 
       this.overwriteError = null;
+      vanillatoasts.create({
+        title: 'Dashboard updated!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
       this.showOverwriteDashboardConfirmationModal = false;
       this.$router.push('/dashboard/' + doc._id);
     },

package/frontend/src/chat/chat.js

@@ -28,6 +28,13 @@ module.exports = app => app.component('chat', {
           this.chatThreads.unshift(chatThread);
           this.chatThreadId = chatThread._id;
           this.chatMessages = [];
+          vanillatoasts.create({
+            title: 'Chat thread created!',
+            type: 'success',
+            timeout: 3000,
+            icon: 'images/success.png',
+            positionClass: 'bottomRight'
+          });
         }
 
         this.chatMessages.push({
@@ -121,6 +128,13 @@ module.exports = app => app.component('chat', {
     },
     async createNewThread() {
       const { chatThread } = await api.ChatThread.createChatThread();
+      vanillatoasts.create({
+        title: 'Chat thread created!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
       this.$router.push('/chat/' + chatThread._id);
     },
     async toggleShareThread() {
@@ -136,6 +150,14 @@ module.exports = app => app.component('chat', {
           this.chatThreads.splice(idx, 1, chatThread);
         }
 
+        vanillatoasts.create({
+          title: 'Chat thread shared!',
+          type: 'success',
+          timeout: 3000,
+          icon: 'images/success.png',
+          positionClass: 'bottomRight'
+        });
+
         // Copy current URL to clipboard and show a toast
         const url = window.location.href;
         await navigator.clipboard.writeText(url);

package/frontend/src/clone-document/clone-document.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const api = require('../api');
+const vanillatoasts = require('vanillatoasts');
 
 const { BSON, EJSON } = require('mongodb/lib/bson');
 
@@ -29,19 +30,27 @@ module.exports = app => app.component('clone-document', {
   methods: {
     async cloneDocument() {
       const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
-      const { doc } = await api.Model.createDocument({ model: this.currentModel, data }).catch(err => {
+      try {
+        const { doc } = await api.Model.createDocument({ model: this.currentModel, data });
+        this.errors.length = 0;
+        vanillatoasts.create({
+          title: 'Document cloned!',
+          type: 'success',
+          timeout: 3000,
+          icon: 'images/success.png',
+          positionClass: 'bottomRight'
+        });
+        this.$emit('close', doc);
+      } catch (err) {
         if (err.response?.data?.message) {
           console.log(err.response.data);
           const message = err.response.data.message.split(': ').slice(1).join(': ');
           this.errors = message.split(',').map(error => {
             return error.split(': ').slice(1).join(': ').trim();
           });
-          throw new Error(err.response?.data?.message);
         }
         throw err;
-      });
-      this.errors.length = 0;
-      this.$emit('close', doc);
+      }
     }
   },
   mounted: function() {

package/frontend/src/create-dashboard/create-dashboard.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const api = require('../api');
+const vanillatoasts = require('vanillatoasts');
 
 const template = require('./create-dashboard.html');
 
@@ -28,6 +29,13 @@ module.exports = app => app.component('create-dashboard', {
         throw err;
       });
       this.errors.length = 0;
+      vanillatoasts.create({
+        title: 'Dashboard created!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
       this.$emit('close', dashboard);
     }
   },

package/frontend/src/create-document/create-document.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const api = require('../api');
+const vanillatoasts = require('vanillatoasts');
 
 const { BSON, EJSON } = require('mongodb/lib/bson');
 
@@ -29,19 +30,27 @@ module.exports = app => app.component('create-document', {
   methods: {
     async createDocument() {
       const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
-      const { doc } = await api.Model.createDocument({ model: this.currentModel, data }).catch(err => {
+      try {
+        const { doc } = await api.Model.createDocument({ model: this.currentModel, data });
+        this.errors.length = 0;
+        vanillatoasts.create({
+          title: 'Document created!',
+          type: 'success',
+          timeout: 3000,
+          icon: 'images/success.png',
+          positionClass: 'bottomRight'
+        });
+        this.$emit('close', doc);
+      } catch (err) {
         if (err.response?.data?.message) {
           console.log(err.response.data);
           const message = err.response.data.message.split(': ').slice(1).join(': ');
           this.errors = message.split(',').map(error => {
             return error.split(': ').slice(1).join(': ').trim();
           });
-          throw new Error(err.response?.data?.message);
         }
         throw err;
-      });
-      this.errors.length = 0;
-      this.$emit('close', doc);
+      }
     }
   },
   mounted: function() {

package/frontend/src/dashboard/dashboard.js

@@ -2,6 +2,7 @@
 
 const api = require('../api');
 const template = require('./dashboard.html');
+const vanillatoasts = require('vanillatoasts');
 
 module.exports = app => app.component('dashboard', {
   template: template,
@@ -109,6 +110,13 @@ module.exports = app => app.component('dashboard', {
           initialMessage,
           dashboardId: this.dashboard?._id
         });
+        vanillatoasts.create({
+          title: 'Chat thread created!',
+          type: 'success',
+          timeout: 3000,
+          icon: 'images/success.png',
+          positionClass: 'bottomRight'
+        });
         this.$router.push('/chat/' + chatThread._id);
       } finally {
         this.startingChat = false;

package/frontend/src/dashboard/edit-dashboard/edit-dashboard.js

@@ -2,6 +2,7 @@
 
 const api = require('../../api');
 const template = require('./edit-dashboard.html');
+const vanillatoasts = require('vanillatoasts');
 
 module.exports = app => app.component('edit-dashboard', {
   template: template,
@@ -31,6 +32,13 @@ module.exports = app => app.component('edit-dashboard', {
         });
         this.$emit('update', { doc });
         this.editor.setValue(doc.code);
+        vanillatoasts.create({
+          title: 'Dashboard updated!',
+          type: 'success',
+          timeout: 3000,
+          icon: 'images/success.png',
+          positionClass: 'bottomRight'
+        });
         this.closeEditor();
       } catch (err) {
         this.$emit('update', { error: { message: err.message } });

package/frontend/src/dashboards/dashboards.js

@@ -2,6 +2,7 @@
 
 const api = require('../api');
 const template = require('./dashboards.html');
+const vanillatoasts = require('vanillatoasts');
 
 
 module.exports = app => app.component('dashboards', {
@@ -21,6 +22,13 @@ module.exports = app => app.component('dashboards', {
       const removedDashboard = this.dashboards.findIndex(x => x._id.toString() === dashboard._id.toString());
       this.dashboards.splice(removedDashboard, 1);
       this.showDeleteDashboardModal = null;
+      vanillatoasts.create({
+        title: 'Dashboard deleted!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     },
     insertNewDashboard(dashboard) {
       this.dashboards.push(dashboard);

package/frontend/src/document/document.js

@@ -3,7 +3,7 @@
 const api = require('../api');
 const mpath = require('mpath');
 const template = require('./document.html');
-const vanillatoast = require('vanillatoasts');
+const vanillatoasts = require('vanillatoasts');
 
 const appendCSS = require('../appendCSS');
 
@@ -32,20 +32,24 @@ module.exports = app => app.component('document', {
     window.pageState = this;
     // Store query parameters from the route (preserved from models page)
     this.previousQuery = Object.assign({}, this.$route.query);
-    const { doc, schemaPaths, virtualPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
-    window.doc = doc;
-    this.document = doc;
-    this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
-      if (k1 === '_id' && k2 !== '_id') {
-        return -1;
-      }
-      if (k1 !== '_id' && k2 === '_id') {
-        return 1;
-      }
-      return 0;
-    }).map(key => schemaPaths[key]);
-    this.virtualPaths = virtualPaths || [];
-    this.status = 'loaded';
+    try {
+      const { doc, schemaPaths, virtualPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
+      window.doc = doc;
+      this.document = doc;
+      this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+        if (k1 === '_id' && k2 !== '_id') {
+          return -1;
+        }
+        if (k1 !== '_id' && k2 === '_id') {
+          return 1;
+        }
+        return 0;
+      }).map(key => schemaPaths[key]);
+      this.virtualPaths = virtualPaths || [];
+      this.status = 'loaded';
+    } finally {
+      this.status = 'loaded';
+    }
   },
   computed: {
     canManipulate() {
@@ -79,6 +83,13 @@ module.exports = app => app.component('document', {
       this.changes = {};
       this.editting = false;
       this.shouldShowConfirmModal = false;
+      vanillatoasts.create({
+        title: 'Document saved!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     },
     async remove() {
       const { doc } = await api.Model.deleteDocument({
@@ -88,10 +99,11 @@ module.exports = app => app.component('document', {
       if (doc.acknowledged) {
         this.editting = false;
         this.document = {};
-        vanillatoast.create({
-          title: 'Document Deleted!',
+        vanillatoasts.create({
+          title: 'Document deleted!',
           type: 'success',
           timeout: 3000,
+          icon: 'images/success.png',
           positionClass: 'bottomRight'
         });
         this.$router.push({
@@ -112,12 +124,12 @@ module.exports = app => app.component('document', {
       });
       this.document = doc;
 
-      // Show success message
-      vanillatoast.create({
-        title: 'Field Added!',
+      vanillatoasts.create({
+        title: 'Field added!',
         text: `Field "${fieldData.name}" has been added to the document`,
         type: 'success',
         timeout: 3000,
+        icon: 'images/success.png',
         positionClass: 'bottomRight'
       });
     },

package/frontend/src/document-details/document-details.js

@@ -366,7 +366,7 @@ module.exports = app => app.component('document-details', {
 
       try {
         const fieldData = {
-          name: this.getTransformedFieldName(),
+          name: this.fieldData.name,
           type: this.fieldData.type,
           value: this.parseFieldValue(this.fieldData.value, this.fieldData.type)
         };
@@ -412,18 +412,6 @@ module.exports = app => app.component('document-details', {
         this.fieldValueEditor = null;
       }
     },
-    toSnakeCase(str) {
-      return str
-        .trim()
-        .replace(/\s+/g, '_') // Replace spaces with underscores
-        .replace(/[^a-zA-Z0-9_$]/g, '') // Remove invalid characters
-        .replace(/^[0-9]/, '_$&') // Prefix numbers with underscore
-        .toLowerCase();
-    },
-    getTransformedFieldName() {
-      if (!this.fieldData.name) return '';
-      return this.toSnakeCase(this.fieldData.name.trim());
-    },
     getVirtualFieldType(virtual) {
       const value = virtual.value;
       if (value === null || value === undefined) {

package/frontend/src/export-query-results/export-query-results.js

@@ -2,6 +2,7 @@
 
 const api = require('../api');
 const template = require('./export-query-results.html');
+const vanillatoasts = require('vanillatoasts');
 
 const appendCSS = require('../appendCSS');
 
@@ -30,7 +31,13 @@ module.exports = app => app.component('export-query-results', {
         params.searchText = this.searchText;
       }
       await api.Model.exportQueryResults(params);
-
+      vanillatoasts.create({
+        title: 'Export completed!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
       this.$emit('done');
     }
   }

package/frontend/src/models/models.html

@@ -79,13 +79,6 @@
             >
             Delete
           </button>
-          <button
-            @click="openIndexModal"
-            type="button"
-            v-show="!selectMultiple"
-            class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
-            Indexes
-          </button>
           <button
             @click="shouldShowCreateModal = true;"
             type="button"
@@ -100,6 +93,38 @@
             class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
             Fields
           </button>
+          <div class="relative" v-show="!selectMultiple" ref="actionsMenuContainer" @keyup.esc.prevent="closeActionsMenu">
+            <button
+              @click="toggleActionsMenu"
+              type="button"
+              aria-label="More actions"
+              class="rounded bg-white px-2 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+              </svg>
+            </button>
+            <div
+              v-if="showActionsMenu"
+              class="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20"
+            >
+              <div class="py-1">
+                <button
+                  @click="openIndexModal"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+                >
+                  Indexes
+                </button>
+                <button
+                  @click="openCollectionInfo"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+                >
+                  Collection Info
+                </button>
+              </div>
+            </div>
+          </div>
           <span class="isolate inline-flex rounded-md shadow-sm">
             <button
               @click="setOutputType('table')"
@@ -213,6 +238,44 @@
       </div>
     </template>
   </modal>
+  <modal v-if="shouldShowCollectionInfoModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="shouldShowCollectionInfoModal = false">&times;</div>
+      <div class="text-xl font-bold mb-2">Collection Info</div>
+      <div v-if="!collectionInfo" class="text-gray-600">Loading collection details...</div>
+      <div v-else class="space-y-3">
+        <div class="flex justify-between gap-4">
+          <div class="font-semibold text-gray-700">Documents</div>
+          <div class="text-gray-900">{{ formatNumber(collectionInfo.documentCount) }}</div>
+        </div>
+        <div class="flex justify-between gap-4">
+          <div class="font-semibold text-gray-700">Indexes</div>
+          <div class="text-gray-900">{{ formatNumber(collectionInfo.indexCount) }}</div>
+        </div>
+        <div class="flex justify-between gap-4">
+          <div class="font-semibold text-gray-700">Total Index Size</div>
+          <div class="text-gray-900">{{ formatCollectionSize(collectionInfo.totalIndexSize) }}</div>
+        </div>
+        <div class="flex justify-between gap-4">
+          <div class="font-semibold text-gray-700">Total Storage Size</div>
+          <div class="text-gray-900">{{ formatCollectionSize(collectionInfo.size) }}</div>
+        </div>
+        <div class="flex flex-col gap-1">
+          <div class="flex justify-between gap-4">
+            <div class="font-semibold text-gray-700">Collation</div>
+            <div class="text-gray-900">{{ collectionInfo.hasCollation ? 'Yes' : 'No' }}</div>
+          </div>
+          <div v-if="collectionInfo.hasCollation" class="rounded bg-gray-100 p-3 text-sm text-gray-800 overflow-x-auto">
+            <pre class="whitespace-pre-wrap">{{ JSON.stringify(collectionInfo.collation, null, 2) }}</pre>
+          </div>
+        </div>
+        <div class="flex justify-between gap-4">
+          <div class="font-semibold text-gray-700">Capped</div>
+          <div class="text-gray-900">{{ collectionInfo.capped ? 'Yes' : 'No' }}</div>
+        </div>
+      </div>
+    </template>
+  </modal>
   <modal v-if="shouldShowFieldModal">
     <template v-slot:body>
       <div class="modal-exit" @click="shouldShowFieldModal = false; selectedPaths = [...filteredPaths];">&times;</div>