@mongoosejs/studio 0.1.17 → 0.1.19

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

@@ -2,7 +2,6 @@
 
 const api = require('../../api');
 const marked = require('marked').marked;
-const vanillatoasts = require('vanillatoasts');
 const template = require('./chat-message.html');
 
 module.exports = app => app.component('chat-message', {
@@ -62,6 +61,7 @@ module.exports = app => app.component('chat-message', {
       });
       message.executionResult = chatMessage.executionResult;
       console.log(message);
+      this.$toast.success('Script executed successfully!');
     },
     async copyMessage() {
       const parts = this.contentSplitByScripts;
@@ -86,13 +86,7 @@ module.exports = app => app.component('chat-message', {
         }
       }
       await navigator.clipboard.writeText(output.trim());
-      vanillatoasts.create({
-        title: 'Message output copied!',
-        type: 'success',
-        timeout: 3000,
-        icon: 'images/success.png',
-        positionClass: 'bottomRight'
-      });
+      this.$toast.success('Message output copied!');
     }
   }
 });

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

@@ -3,7 +3,6 @@
 
 const api = require('../../api');
 const template = require('./chat-message-script.html');
-const vanillatoasts = require('vanillatoasts');
 
 module.exports = app => app.component('chat-message-script', {
   template,
@@ -56,6 +55,7 @@ module.exports = app => app.component('chat-message-script', {
         this.highlightCode();
       }
       this.activeTab = 'output';
+      this.$toast.success('Script executed successfully!');
       return chatMessage;
     },
     openDetailModal() {
@@ -157,6 +157,7 @@ module.exports = app => app.component('chat-message-script', {
         throw err;
       });
       this.createError = null;
+      this.$toast.success('Dashboard created!');
       this.showCreateDashboardModal = false;
       this.$router.push('/dashboard/' + dashboard._id);
     },
@@ -183,6 +184,7 @@ module.exports = app => app.component('chat-message-script', {
       });
 
       this.overwriteError = null;
+      this.$toast.success('Dashboard updated!');
       this.showOverwriteDashboardConfirmationModal = false;
       this.$router.push('/dashboard/' + doc._id);
     },
@@ -203,13 +205,7 @@ module.exports = app => app.component('chat-message-script', {
       }
 
       await navigator.clipboard.writeText(parts.join('\n\n'));
-      vanillatoasts.create({
-        title: 'Code output copied!',
-        type: 'success',
-        timeout: 3000,
-        icon: 'images/success.png',
-        positionClass: 'bottomRight'
-      });
+      this.$toast.success('Code output copied!');
     }
   },
   watch: {

package/frontend/src/chat/chat.js

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

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

@@ -29,19 +29,21 @@ 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;
+        this.$toast.success('Document cloned!');
+        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

@@ -28,6 +28,7 @@ module.exports = app => app.component('create-dashboard', {
         throw err;
       });
       this.errors.length = 0;
+      this.$toast.success('Dashboard created!');
       this.$emit('close', dashboard);
     }
   },

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

@@ -29,19 +29,21 @@ 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;
+        this.$toast.success('Document created!');
+        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

@@ -109,6 +109,7 @@ module.exports = app => app.component('dashboard', {
           initialMessage,
           dashboardId: this.dashboard?._id
         });
+        this.$toast.success('Chat thread created!');
         this.$router.push('/chat/' + chatThread._id);
       } finally {
         this.startingChat = false;

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

@@ -31,6 +31,7 @@ module.exports = app => app.component('edit-dashboard', {
         });
         this.$emit('update', { doc });
         this.editor.setValue(doc.code);
+        this.$toast.success('Dashboard updated!');
         this.closeEditor();
       } catch (err) {
         this.$emit('update', { error: { message: err.message } });

package/frontend/src/dashboards/dashboards.js

@@ -21,6 +21,7 @@ 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;
+      this.$toast.success('Dashboard deleted!');
     },
     insertNewDashboard(dashboard) {
       this.dashboards.push(dashboard);

package/frontend/src/document/document.js

@@ -3,7 +3,6 @@
 const api = require('../api');
 const mpath = require('mpath');
 const template = require('./document.html');
-const vanillatoast = require('vanillatoasts');
 
 const appendCSS = require('../appendCSS');
 
@@ -32,20 +31,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 +82,7 @@ module.exports = app => app.component('document', {
       this.changes = {};
       this.editting = false;
       this.shouldShowConfirmModal = false;
+      this.$toast.success('Document saved!');
     },
     async remove() {
       const { doc } = await api.Model.deleteDocument({
@@ -88,12 +92,7 @@ module.exports = app => app.component('document', {
       if (doc.acknowledged) {
         this.editting = false;
         this.document = {};
-        vanillatoast.create({
-          title: 'Document Deleted!',
-          type: 'success',
-          timeout: 3000,
-          positionClass: 'bottomRight'
-        });
+        this.$toast.success('Document deleted!');
         this.$router.push({
           path: `/model/${this.model}`,
           query: this.previousQuery || {}
@@ -112,14 +111,7 @@ module.exports = app => app.component('document', {
       });
       this.document = doc;
 
-      // Show success message
-      vanillatoast.create({
-        title: 'Field Added!',
-        text: `Field "${fieldData.name}" has been added to the document`,
-        type: 'success',
-        timeout: 3000,
-        positionClass: 'bottomRight'
-      });
+      this.$toast.success(`Field added! Field "${fieldData.name}" has been added to the document`);
     },
     updateViewMode(mode) {
       this.viewMode = mode;

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

@@ -30,7 +30,7 @@ module.exports = app => app.component('export-query-results', {
         params.searchText = this.searchText;
       }
       await api.Model.exportQueryResults(params);
-
+      this.$toast.success('Export completed!');
       this.$emit('done');
     }
   }

package/frontend/src/index.js

@@ -12,12 +12,21 @@ const format = require('./format');
 const arrayUtils = require('./array-utils');
 const mothership = require('./mothership');
 const { routes } = require('./routes');
-const vanillatoasts = require('vanillatoasts');
+const Toast = require('vue-toastification').default;
+const { useToast } = require('vue-toastification');
+const appendCSS = require('./appendCSS');
+appendCSS(require('vue-toastification/dist/index.css'));
 
 const app = Vue.createApp({
   template: '<app-component />'
 });
 
+// https://github.com/Maronato/vue-toastification/tree/main?tab=readme-ov-file#toast-types
+app.use(Toast, { position: 'bottom-right', timeout: 3000 });
+
+// Create a global toast instance for convenience (must be after app.use)
+const toast = useToast();
+
 // Import all components
 const requireComponents = require.context(
   '.', // Relative path (current directory)
@@ -56,11 +65,8 @@ app.component('app-component', {
   </div>
   `,
   errorCaptured(err) {
-    vanillatoasts.create({
-      title: `Error: ${err?.response?.data?.message || err.message}`,
-      icon: 'images/failure.jpg',
-      timeout: 10000,
-      positionClass: 'bottomRight'
+    this.$toast.error(`Error: ${err?.response?.data?.message || err.message}`, {
+      timeout: 10000
     });
   },
   computed: {
@@ -150,7 +156,7 @@ router.beforeEach((to, from, next) => {
   }
 });
 
-app.config.globalProperties = { format, arrayUtils };
+app.config.globalProperties = { format, arrayUtils, $toast: toast };
 app.use(router);
 
 app.mount('#content');

package/frontend/src/list-default/list-default.js

@@ -2,7 +2,6 @@
 
 const template = require('./list-default.html');
 const appendCSS = require('../appendCSS');
-const vanillatoast = require('vanillatoasts');
 
 appendCSS(require('./list-default.css'));
 
@@ -19,13 +18,7 @@ module.exports = app => app.component('list-default', {
       storage.setSelectionRange(0, 99999);
       document.execCommand('copy');
       elem.removeChild(storage);
-      vanillatoast.create({
-        title: 'Text copied!',
-        type: 'success',
-        timeout: 3000,
-        icon: 'images/success.png',
-        positionClass: 'bottomRight'
-      });
+      this.$toast.success('Text copied!');
     },
     goToDoc(id) {
       this.$router.push({ path: `/model/${this.allude}/document/${id}` });

package/frontend/src/list-mixed/list-mixed.js

@@ -3,7 +3,6 @@
 const api = require('../api');
 const template = require('./list-mixed.html');
 
-const vanillatoast = require('vanillatoasts');
 
 require('../appendCSS')(require('./list-mixed.css'));
 
@@ -25,13 +24,7 @@ module.exports = app => app.component('list-mixed', {
       storage.setSelectionRange(0, 99999);
       document.execCommand('copy');
       elem.removeChild(storage);
-      vanillatoast.create({
-        title: 'Text copied!',
-        type: 'success',
-        timeout: 3000,
-        icon: 'images/success.png',
-        positionClass: 'bottomRight'
-      });
+      this.$toast.success('Text copied!');
     }
   },
   mounted: function() {

package/frontend/src/list-string/list-string.js

@@ -2,7 +2,6 @@
 
 const template = require('./list-string.html');
 const appendCSS = require('../appendCSS');
-const vanillatoast = require('vanillatoasts');
 appendCSS(require('./list-string.css'));
 
 module.exports = app => app.component('list-string', {
@@ -18,13 +17,7 @@ module.exports = app => app.component('list-string', {
       storage.setSelectionRange(0, 99999);
       document.execCommand('copy');
       elem.removeChild(storage);
-      vanillatoast.create({
-        title: 'Text copied!',
-        type: 'success',
-        timeout: 3000,
-        icon: 'images/success.png',
-        positionClass: 'bottomRight'
-      });
+      this.$toast.success('Text copied!');
     }
   },
   computed: {

package/frontend/src/list-subdocument/list-subdocument.js

@@ -2,7 +2,6 @@
 
 const api = require('../api');
 const template = require('./list-subdocument.html');
-const vanillatoast = require('vanillatoasts');
 
 require('../appendCSS')(require('./list-subdocument.css'));
 
@@ -24,13 +23,7 @@ module.exports = app => app.component('list-subdocument', {
       storage.setSelectionRange(0, 99999);
       document.execCommand('copy');
       elem.removeChild(storage);
-      vanillatoast.create({
-        title: 'Text copied!',
-        type: 'success',
-        timeout: 3000,
-        icon: 'images/success.png',
-        positionClass: 'bottomRight'
-      });
+      this.$toast.success('Text copied!');
     }
   },
   mounted: function() {

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,45 @@
             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>
+                <button
+                  @click="findOldestDocument"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+                >
+                  Find oldest document
+                </button>
+              </div>
+            </div>
+          </div>
           <span class="isolate inline-flex rounded-md shadow-sm">
             <button
               @click="setOutputType('table')"
@@ -213,6 +245,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>