@mongoosejs/studio 0.1.16 → 0.1.18

package/frontend/public/tw.css

@@ -631,6 +631,14 @@ video {
   bottom: 0px;
 }
 
+.-left-2 {
+  left: -0.5rem;
+}
+
+.-left-3 {
+  left: -0.75rem;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -659,6 +667,10 @@ video {
   top: 0.25rem;
 }
 
+.top-1\/2 {
+  top: 50%;
+}
+
 .top-2 {
   top: 0.5rem;
 }
@@ -769,6 +781,10 @@ video {
   margin-bottom: 0.25rem;
 }
 
+.mb-1\.5 {
+  margin-bottom: 0.375rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -984,6 +1000,10 @@ video {
   max-height: 50vh;
 }
 
+.max-h-\[6\.5em\] {
+  max-height: 6.5em;
+}
+
 .min-h-0 {
   min-height: 0px;
 }
@@ -1072,6 +1092,10 @@ video {
   min-width: 140px;
 }
 
+.min-w-\[80px\] {
+  min-width: 80px;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -1080,6 +1104,10 @@ video {
   max-width: 64rem;
 }
 
+.max-w-\[30em\] {
+  max-width: 30em;
+}
+
 .max-w-\[calc\(100vw-3rem\)\] {
   max-width: calc(100vw - 3rem);
 }
@@ -1128,6 +1156,11 @@ video {
   transform-origin: top right;
 }
 
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1293,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)));
@@ -1454,6 +1493,10 @@ video {
   border-bottom-width: 2px;
 }
 
+.border-l-\[3px\] {
+  border-left-width: 3px;
+}
+
 .border-r {
   border-right-width: 1px;
 }
@@ -1470,11 +1513,6 @@ video {
   border-style: none;
 }
 
-.border-amber-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 191 36 / var(--tw-border-opacity));
-}
-
 .border-blue-300 {
   --tw-border-opacity: 1;
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
@@ -1514,11 +1552,21 @@ video {
   border-color: rgb(63 83 255 / var(--tw-border-opacity));
 }
 
+.border-l-blue-500 {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
 .bg-amber-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 243 199 / var(--tw-bg-opacity));
 }
 
+.bg-amber-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1644,11 +1692,6 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
-.bg-slate-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-}
-
 .bg-slate-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -1776,6 +1819,11 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -1890,6 +1938,10 @@ video {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+.text-\[10px\] {
+  font-size: 10px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2143,6 +2195,10 @@ video {
   opacity: 0.5;
 }
 
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .opacity-75 {
   opacity: 0.75;
 }
@@ -2206,11 +2262,6 @@ video {
   --tw-ring-inset: inset;
 }
 
-.ring-amber-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity));
-}
-
 .ring-black {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
@@ -2241,10 +2292,6 @@ video {
   --tw-ring-opacity: 0.05;
 }
 
-.ring-offset-1 {
-  --tw-ring-offset-width: 1px;
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2307,6 +2354,10 @@ video {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.last\:mb-0:last-child {
+  margin-bottom: 0px;
+}
+
 .focus-within\:ring-2:focus-within {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2322,6 +2373,16 @@ video {
   --tw-ring-color: rgb(0 168 165 / var(--tw-ring-opacity));
 }
 
+.hover\:-translate-y-0:hover {
+  --tw-translate-y: -0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:-translate-y-0\.5:hover {
+  --tw-translate-y: -0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:translate-x-0:hover {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2337,6 +2398,16 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.hover\:border-l-blue-600:hover {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(37 99 235 / var(--tw-border-opacity));
+}
+
+.hover\:bg-amber-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -2442,6 +2513,11 @@ video {
   background-color: rgb(148 163 184 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-slate-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-slate-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -2502,6 +2578,16 @@ video {
   color: rgb(6 14 172 / var(--tw-text-opacity));
 }
 
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+
+.hover\:shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:z-10:focus {
   z-index: 10;
 }

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/array-utils.js

@@ -0,0 +1,66 @@
+'use strict';
+
+const { inspect } = require('node-inspect-extracted');
+
+/**
+ * Format a value for display in array views
+ * @param {*} item - The item to format
+ * @returns {string} - Formatted string representation
+ */
+function formatValue(item) {
+  if (item == null) {
+    return 'null';
+  }
+  if (typeof item === 'object') {
+    return inspect(item, { maxArrayLength: 50 });
+  }
+  return String(item);
+}
+
+/**
+ * Check if an item is a plain object (not array, not null)
+ * @param {*} item - The item to check
+ * @returns {boolean} - True if item is a plain object
+ */
+function isObjectItem(item) {
+  return item != null && typeof item === 'object' && !Array.isArray(item) && item.constructor === Object;
+}
+
+/**
+ * Get the keys of an object item
+ * @param {*} item - The item to get keys from
+ * @returns {string[]} - Array of keys, or empty array if not an object
+ */
+function getItemKeys(item) {
+  if (!isObjectItem(item)) {
+    return [];
+  }
+  return Object.keys(item);
+}
+
+/**
+ * Format a specific value from an object item by key
+ * @param {*} item - The object item
+ * @param {string} key - The key to get the value for
+ * @returns {string} - Formatted string representation of the value
+ */
+function formatItemValue(item, key) {
+  const value = item[key];
+  if (value === null) {
+    return 'null';
+  }
+  if (value === undefined) {
+    return 'undefined';
+  }
+  if (typeof value === 'object') {
+    return inspect(value, { maxArrayLength: 50 });
+  }
+  return String(value);
+}
+
+module.exports = {
+  formatValue,
+  isObjectItem,
+  getItemKeys,
+  formatItemValue
+};

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;
@@ -141,5 +149,5 @@ module.exports = app => app.component('dashboard', {
   },
   beforeDestroy() {
     document.removeEventListener('click', this.handleDocumentClick);
-  },
+  }
 });

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/detail-array/detail-array.html

@@ -1,3 +1,25 @@
-<div class="detail-array">
-  <pre><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
-</div>
+<div class="w-full">
+  <div v-if="!arrayValue || arrayValue.length === 0" class="text-gray-400 text-xs py-2 text-center">
+    Empty array
+  </div>
+
+  <div v-else class="mt-2">
+    <div
+      v-for="(item, index) in arrayValue"
+      :key="index"
+      :title="'Index: ' + index"
+      class="mb-1.5 last:mb-0 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-blue-600 hover:shadow-lg hover:-translate-y-0.5">
+      <div class="absolute -left-3 top-1/2 -translate-y-1/2 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-blue-600">{{ index >= 1000 ? '1k+' : index }}</div>
+      <div v-if="arrayUtils.isObjectItem(item)" class="flex flex-col gap-1 mt-1 px-2">
+        <div
+          v-for="key in arrayUtils.getItemKeys(item)"
+          :key="key"
+          class="flex items-start gap-2 text-xs font-mono">
+          <span class="font-semibold text-gray-600 flex-shrink-0 min-w-[80px]">{{ key }}:</span>
+          <span class="text-gray-800 break-words whitespace-pre-wrap flex-1">{{ arrayUtils.formatItemValue(item, key) }}</span>
+        </div>
+      </div>
+      <div v-else class="text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1">{{ arrayUtils.formatValue(item) }}</div>
+    </div>
+  </div>
+</div>