@mongoosejs/studio 0.1.18 → 0.1.20

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,13 +61,7 @@ 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'
-      });
+      this.$toast.success('Script executed successfully!');
     },
     async copyMessage() {
       const parts = this.contentSplitByScripts;
@@ -93,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,13 +55,7 @@ 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'
-      });
+      this.$toast.success('Script executed successfully!');
       return chatMessage;
     },
     openDetailModal() {
@@ -164,13 +157,7 @@ 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.$toast.success('Dashboard created!');
       this.showCreateDashboardModal = false;
       this.$router.push('/dashboard/' + dashboard._id);
     },
@@ -197,13 +184,7 @@ 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.$toast.success('Dashboard updated!');
       this.showOverwriteDashboardConfirmationModal = false;
       this.$router.push('/dashboard/' + doc._id);
     },
@@ -224,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,13 +27,7 @@ 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.$toast.success('Chat thread created!');
         }
 
         this.chatMessages.push({
@@ -128,13 +121,7 @@ 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.$toast.success('Chat thread created!');
       this.$router.push('/chat/' + chatThread._id);
     },
     async toggleShareThread() {
@@ -150,24 +137,12 @@ 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'
-        });
+        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

@@ -1,7 +1,6 @@
 'use strict';
 
 const api = require('../api');
-const vanillatoasts = require('vanillatoasts');
 
 const { BSON, EJSON } = require('mongodb/lib/bson');
 
@@ -33,13 +32,7 @@ module.exports = app => app.component('clone-document', {
       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.$toast.success('Document cloned!');
         this.$emit('close', doc);
       } catch (err) {
         if (err.response?.data?.message) {

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

@@ -1,7 +1,6 @@
 'use strict';
 
 const api = require('../api');
-const vanillatoasts = require('vanillatoasts');
 
 const template = require('./create-dashboard.html');
 
@@ -29,13 +28,7 @@ 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.$toast.success('Dashboard created!');
       this.$emit('close', dashboard);
     }
   },

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

@@ -1,7 +1,6 @@
 'use strict';
 
 const api = require('../api');
-const vanillatoasts = require('vanillatoasts');
 
 const { BSON, EJSON } = require('mongodb/lib/bson');
 
@@ -33,13 +32,7 @@ module.exports = app => app.component('create-document', {
       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.$toast.success('Document created!');
         this.$emit('close', doc);
       } catch (err) {
         if (err.response?.data?.message) {

package/frontend/src/dashboard/dashboard.js

@@ -2,7 +2,6 @@
 
 const api = require('../api');
 const template = require('./dashboard.html');
-const vanillatoasts = require('vanillatoasts');
 
 module.exports = app => app.component('dashboard', {
   template: template,
@@ -110,13 +109,7 @@ 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.$toast.success('Chat thread created!');
         this.$router.push('/chat/' + chatThread._id);
       } finally {
         this.startingChat = false;

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

@@ -2,7 +2,6 @@
 
 const api = require('../../api');
 const template = require('./edit-dashboard.html');
-const vanillatoasts = require('vanillatoasts');
 
 module.exports = app => app.component('edit-dashboard', {
   template: template,
@@ -32,13 +31,7 @@ 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.$toast.success('Dashboard updated!');
         this.closeEditor();
       } catch (err) {
         this.$emit('update', { error: { message: err.message } });

package/frontend/src/dashboards/dashboards.js

@@ -2,7 +2,6 @@
 
 const api = require('../api');
 const template = require('./dashboards.html');
-const vanillatoasts = require('vanillatoasts');
 
 
 module.exports = app => app.component('dashboards', {
@@ -22,13 +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;
-      vanillatoasts.create({
-        title: 'Dashboard deleted!',
-        type: 'success',
-        timeout: 3000,
-        icon: 'images/success.png',
-        positionClass: 'bottomRight'
-      });
+      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 vanillatoasts = require('vanillatoasts');
 
 const appendCSS = require('../appendCSS');
 
@@ -83,13 +82,7 @@ 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'
-      });
+      this.$toast.success('Document saved!');
     },
     async remove() {
       const { doc } = await api.Model.deleteDocument({
@@ -99,13 +92,7 @@ module.exports = app => app.component('document', {
       if (doc.acknowledged) {
         this.editting = false;
         this.document = {};
-        vanillatoasts.create({
-          title: 'Document deleted!',
-          type: 'success',
-          timeout: 3000,
-          icon: 'images/success.png',
-          positionClass: 'bottomRight'
-        });
+        this.$toast.success('Document deleted!');
         this.$router.push({
           path: `/model/${this.model}`,
           query: this.previousQuery || {}
@@ -124,14 +111,7 @@ module.exports = app => app.component('document', {
       });
       this.document = doc;
 
-      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'
-      });
+      this.$toast.success(`Field added! Field "${fieldData.name}" has been added to the document`);
     },
     updateViewMode(mode) {
       this.viewMode = mode;

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

@@ -2,7 +2,6 @@
 
 const api = require('../api');
 const template = require('./export-query-results.html');
-const vanillatoasts = require('vanillatoasts');
 
 const appendCSS = require('../appendCSS');
 
@@ -31,13 +30,7 @@ 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.$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-json/json-node.html

@@ -53,7 +53,7 @@
         <a
           href="#"
           class="ml-1 text-sm text-sky-700 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
-          @click.stop.prevent="goToReference(value)"
+          @click.stop.prevent="goToReference()"
         >
           View Document
         </a>

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

@@ -277,7 +277,31 @@ module.exports = app => app.component('list-json', {
           return this.references[this.normalizedPath] || null;
         },
         shouldShowReferenceLink() {
-          return Boolean(this.referenceModel) && typeof this.value === 'string';
+          return this.referenceId != null;
+        },
+        referenceId() {
+          if (!this.referenceModel) {
+            return null;
+          }
+          if (this.value == null) {
+            return null;
+          }
+          const type = typeof this.value;
+          if (type === 'string' || type === 'number' || type === 'bigint') {
+            return String(this.value);
+          }
+          if (type === 'object') {
+            if (this.value._id != null) {
+              return String(this.value._id);
+            }
+            if (typeof this.value.toString === 'function') {
+              const stringified = this.value.toString();
+              if (typeof stringified === 'string' && stringified !== '[object Object]') {
+                return stringified;
+              }
+            }
+          }
+          return null;
         }
       },
       methods: {
@@ -303,8 +327,9 @@ module.exports = app => app.component('list-json', {
             this.expandTopLevel();
           }
         },
-        goToReference(id) {
-          if (!this.referenceModel) {
+        goToReference() {
+          const id = this.referenceId;
+          if (!this.referenceModel || id == null) {
             return;
           }
           this.$router.push({ path: `/model/${this.referenceModel}/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

@@ -122,6 +122,13 @@
                 >
                   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>

package/frontend/src/models/models.js

@@ -3,7 +3,6 @@
 const api = require('../api');
 const template = require('./models.html');
 const mpath = require('mpath');
-const vanillatoasts = require('vanillatoasts');
 
 const appendCSS = require('../appendCSS');
 appendCSS(require('./models.css'));
@@ -175,13 +174,7 @@ module.exports = app => app.component('models', {
     async dropIndex(name) {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });
       this.mongoDBIndexes = mongoDBIndexes;
-      vanillatoasts.create({
-        title: 'Index dropped!',
-        type: 'success',
-        timeout: 3000,
-        icon: 'images/success.png',
-        positionClass: 'bottomRight'
-      });
+      this.$toast.success('Index dropped!');
     },
     async closeCreationModal() {
       this.shouldShowCreateModal = false;
@@ -273,6 +266,19 @@ module.exports = app => app.component('models', {
       const { info } = await api.Model.getCollectionInfo({ model: this.currentModel });
       this.collectionInfo = info;
     },
+    async findOldestDocument() {
+      this.closeActionsMenu();
+      const { docs } = await api.Model.getDocuments({
+        model: this.currentModel,
+        limit: 1,
+        sortKey: '_id',
+        sortDirection: 1
+      });
+      if (!Array.isArray(docs) || docs.length === 0) {
+        throw new Error('No documents found');
+      }
+      this.openDocument(docs[0]);
+    },
     isTTLIndex(index) {
       return index != null && index.expireAfterSeconds != null;
     },
@@ -507,13 +513,7 @@ module.exports = app => app.component('models', {
         this.documents[index] = res.doc;
       }
       this.edittingDoc = null;
-      vanillatoasts.create({
-        title: 'Document updated!',
-        type: 'success',
-        timeout: 3000,
-        icon: 'images/success.png',
-        positionClass: 'bottomRight'
-      });
+      this.$toast.success('Document updated!');
     },
     handleDocumentClick(document, event) {
       if (this.selectMultiple) {
@@ -577,13 +577,7 @@ module.exports = app => app.component('models', {
       this.lastSelectedIndex = null;
       this.shouldShowDeleteMultipleModal = false;
       this.selectMultiple = false;
-      vanillatoasts.create({
-        title: 'Documents deleted!',
-        type: 'success',
-        timeout: 3000,
-        icon: 'images/success.png',
-        positionClass: 'bottomRight'
-      });
+      this.$toast.success('Documents deleted!');
     },
     async updateDocuments() {
       await this.getDocuments();