@mongoosejs/studio 0.1.16 → 0.1.17

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

@@ -3,6 +3,7 @@
 'use strict';
 
 const mpath = require('mpath');
+const { inspect } = require('node-inspect-extracted');
 const template = require('./document-property.html');
 
 const appendCSS = require('../../appendCSS');
@@ -38,10 +39,32 @@ module.exports = app => app.component('document-property', {
       }
       return String(value);
     },
+    _arrayValueData() {
+      const value = this.getValueForPath(this.path.path);
+      return {
+        value: Array.isArray(value) ? value : [],
+        isArray: Array.isArray(value)
+      };
+    },
+    isArray() {
+      return this._arrayValueData.isArray;
+    },
+    arrayValue() {
+      return this._arrayValueData.value;
+    },
     needsTruncation() {
-      // Truncate if value is longer than 200 characters
+      // For arrays, check if it has more than 3 items (regardless of expansion state)
+      if (this.isArray) {
+        const arr = this.arrayValue;
+        return arr && arr.length > 3;
+      }
+      // For other types, truncate if value is longer than 200 characters
       return this.valueAsString.length > 200;
     },
+    shouldShowTruncated() {
+      // For other types, show truncated if needs truncation and not expanded
+      return this.needsTruncation && !this.isValueExpanded;
+    },
     displayValue() {
       if (!this.needsTruncation || this.isValueExpanded) {
         return this.getValueForPath(this.path.path);
@@ -51,9 +74,24 @@ module.exports = app => app.component('document-property', {
     },
     truncatedString() {
       if (this.needsTruncation && !this.isValueExpanded) {
-        return this.valueAsString.substring(0, 200) + '...';
+        // Arrays are handled in template, so this is for non-arrays
+        if (!this.isArray) {
+          return this.valueAsString.substring(0, 200) + '...';
+        }
       }
       return this.valueAsString;
+    },
+    truncatedArrayItems() {
+      if (this.isArray && this.needsTruncation && !this.isValueExpanded) {
+        return this.arrayValue.slice(0, 2);
+      }
+      return [];
+    },
+    remainingArrayCount() {
+      if (this.isArray && this.needsTruncation && !this.isValueExpanded) {
+        return this.arrayValue.length - 2;
+      }
+      return 0;
     }
   },
   methods: {
@@ -79,6 +117,9 @@ module.exports = app => app.component('document-property', {
       if (path.instance === 'Embedded') {
         return 'edit-subdocument';
       }
+      if (path.instance === 'Mixed') {
+        return 'edit-subdocument';
+      }
       if (path.instance === 'Boolean') {
         return 'edit-boolean';
       }
@@ -91,6 +132,10 @@ module.exports = app => app.component('document-property', {
           props.enumValues = path.enum;
         }
       }
+      if (path.instance === 'Array') {
+        props.path = path;
+        props.schemaPaths = this.schemaPaths;
+      }
       return props;
     },
     getValueForPath(path) {

package/frontend/src/edit-array/edit-array.html

@@ -1,5 +1,8 @@
-<div class="edit-array">
+<div class="w-full">
+  <!-- CodeMirror editor for the entire array -->
   <textarea
     ref="arrayEditor"
-    class="w-full border border-gray-300 p-1 h-[300px]"></textarea>
+    class="w-full border border-gray-300 p-2 font-mono"
+    :style="{ minHeight: '300px' }">
+  </textarea>
 </div>

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

@@ -10,43 +10,99 @@ const ObjectId = new Proxy(BSON.ObjectId, {
   }
 });
 
-const appendCSS = require('../appendCSS');
-appendCSS(require('./edit-array.css'));
 
 module.exports = app => app.component('edit-array', {
   template: template,
   props: ['value'],
-  data: () => ({ currentValue: -1 }),
-  mounted() {
-    this.currentValue = this.value == null
-      ? '' + this.value
-      : JSON.stringify(this.value, null, '  ').trim();
-    this.$refs.arrayEditor.value = this.currentValue;
-    this.editor = CodeMirror.fromTextArea(this.$refs.arrayEditor, {
-      mode: 'javascript',
-      lineNumbers: true
-    });
-    this.editor.on('change', ev => {
-      this.currentValue = this.editor.getValue();
-    });
+  data() {
+    return {
+      arrayValue: [],
+      arrayEditor: null
+    };
   },
-  watch: {
-    currentValue(newValue, oldValue) {
-      // Hacky way of skipping initial trigger because `immediate: false` doesn't work in Vue 3
-      if (oldValue === -1) {
+  methods: {
+    initializeArray() {
+      if (this.value == null) {
+        this.arrayValue = [];
+      } else if (Array.isArray(this.value)) {
+        this.arrayValue = JSON.parse(JSON.stringify(this.value));
+      } else {
+        this.arrayValue = [];
+      }
+      
+      // Update CodeMirror editor if it exists
+      this.$nextTick(() => {
+        if (this.arrayEditor) {
+          const arrayStr = JSON.stringify(this.arrayValue, null, 2);
+          this.arrayEditor.setValue(arrayStr);
+        }
+      });
+    },
+    initializeArrayEditor() {
+      this.$nextTick(() => {
+        const textareaRef = this.$refs.arrayEditor;
+        const textarea = Array.isArray(textareaRef) ? textareaRef[0] : textareaRef;
+        if (textarea && !this.arrayEditor) {
+          const arrayStr = JSON.stringify(this.arrayValue, null, 2);
+          textarea.value = arrayStr;
+          this.arrayEditor = CodeMirror.fromTextArea(textarea, {
+            mode: 'javascript',
+            lineNumbers: true
+          });
+          this.arrayEditor.on('change', () => {
+            this.updateArrayFromEditor();
+          });
+        }
+      });
+    },
+    updateArrayFromEditor() {
+      if (!this.arrayEditor) {
         return;
       }
       try {
-        const array = eval(`(${this.currentValue})`);
-        this.$emit('input', array);
+        const value = this.arrayEditor.getValue();
+        if (value.trim() === '') {
+          this.arrayValue = [];
+        } else {
+          this.arrayValue = JSON.parse(value);
+        }
+        this.emitUpdate();
+      } catch (err) {
+        // Invalid JSON, don't update
+      }
+    },
+    emitUpdate() {
+      try {
+        this.$emit('input', this.arrayValue);
       } catch (err) {
         this.$emit('error', err);
       }
     }
   },
+  mounted() {
+    this.initializeArray();
+    this.initializeArrayEditor();
+  },
   beforeDestroy() {
-    if (this.editor) {
-      this.editor.toTextArea();
+    if (this.arrayEditor) {
+      this.arrayEditor.toTextArea();
+    }
+  },
+  watch: {
+    value: {
+      handler(newValue, oldValue) {
+        // Initialize array when value prop changes
+        this.initializeArray();
+        // Update array editor if it exists
+        if (this.arrayEditor) {
+          this.$nextTick(() => {
+            const arrayStr = JSON.stringify(this.arrayValue, null, 2);
+            this.arrayEditor.setValue(arrayStr);
+          });
+        }
+      },
+      deep: true,
+      immediate: true
     }
   },
   emits: ['input', 'error']

package/frontend/src/index.js

@@ -9,6 +9,7 @@ console.log(`Mongoose Studio Version ${version}`);
 
 const api = require('./api');
 const format = require('./format');
+const arrayUtils = require('./array-utils');
 const mothership = require('./mothership');
 const { routes } = require('./routes');
 const vanillatoasts = require('vanillatoasts');
@@ -149,7 +150,7 @@ router.beforeEach((to, from, next) => {
   }
 });
 
-app.config.globalProperties = { format };
+app.config.globalProperties = { format, arrayUtils };
 app.use(router);
 
 app.mount('#content');

package/frontend/src/list-array/list-array.html

@@ -1,3 +1,3 @@
 <div class="list-array">
-  <pre><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
+  <pre class="max-h-[6.5em] max-w-[30em]"><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
 </div>

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

@@ -2,8 +2,6 @@
 
 const template = require('./list-array.html');
 
-require('../appendCSS')(require('./list-array.css'));
-
 module.exports = app => app.component('list-array', {
   template: template,
   props: ['value'],

package/frontend/src/models/models.html

@@ -193,7 +193,12 @@
       <div v-for="index in mongoDBIndexes" class="w-full flex items-center">
         <div class="grow shrink text-left flex justify-between items-center" v-if="index.name != '_id_'">
           <div>
-            <div class="font-bold">{{ index.name }}</div>
+            <div class="font-bold flex items-center gap-2">
+              <div>{{ index.name }}</div>
+              <div v-if="isTTLIndex(index)" class="rounded-full bg-ultramarine-100 px-2 py-0.5 text-xs font-semibold text-ultramarine-700">
+                TTL: {{ formatTTL(index.expireAfterSeconds) }}
+              </div>
+            </div>
             <div class="text-sm font-mono">{{ JSON.stringify(index.key) }}</div>
           </div>
           <div>

package/frontend/src/models/models.js

@@ -237,6 +237,38 @@ module.exports = app => app.component('models', {
       this.mongoDBIndexes = mongoDBIndexes;
       this.schemaIndexes = schemaIndexes;
     },
+    isTTLIndex(index) {
+      return index != null && index.expireAfterSeconds != null;
+    },
+    formatTTL(expireAfterSeconds) {
+      if (typeof expireAfterSeconds !== 'number') {
+        return '';
+      }
+
+      let remaining = expireAfterSeconds;
+      const days = Math.floor(remaining / (24 * 60 * 60));
+      remaining = remaining % (24 * 60 * 60);
+      const hours = Math.floor(remaining / (60 * 60));
+      remaining = remaining % (60 * 60);
+      const minutes = Math.floor(remaining / 60);
+      const seconds = remaining % 60;
+
+      const parts = [];
+      if (days > 0) {
+        parts.push(`${days} day${days === 1 ? '' : 's'}`);
+      }
+      if (hours > 0) {
+        parts.push(`${hours} hour${hours === 1 ? '' : 's'}`);
+      }
+      if (minutes > 0) {
+        parts.push(`${minutes} minute${minutes === 1 ? '' : 's'}`);
+      }
+      if (seconds > 0 || parts.length === 0) {
+        parts.push(`${seconds} second${seconds === 1 ? '' : 's'}`);
+      }
+
+      return parts.join(', ');
+    },
     checkIndexLocation(indexName) {
       if (this.schemaIndexes.find(x => x.name == indexName) && this.mongoDBIndexes.find(x => x.name == indexName)) {
         return 'text-gray-500';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "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": {

package/frontend/src/edit-array/edit-array.css

@@ -1,3 +0,0 @@
-.edit-array button {
-  margin-top: 0.5em;
-}

package/frontend/src/list-array/list-array.css

@@ -1,8 +0,0 @@
-.list-array pre {
-  max-height: 6.5em;
-  max-width: 30em;
-}
-
-.list-array pre.maximized {
-  max-height: auto;
-}