@mongoosejs/studio 0.2.1 → 0.2.3

package/frontend/public/tw.css

@@ -1877,6 +1877,10 @@ video {
   padding-bottom: 2rem;
 }
 
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }

package/frontend/src/_util/baseComponent.js

@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = {
+  destroyed() {
+    this.$parent.$options.$children = this.$parent.$options.$children.filter(
+      (el) => el !== this
+    );
+  },
+  created() {
+    this.$parent.$options.$children = this.$parent.$options.$children || [];
+    this.$parent.$options.$children.push(this);
+  },
+  mounted() {
+    this.isMounted = true;
+  },
+  unmounted() {
+    this.isMounted = false;
+  }
+};

package/frontend/src/_util/deepEqual.js

@@ -0,0 +1,53 @@
+'use strict';
+
+/**
+ * Deep equality check for values (handles primitives, arrays, objects, dates, etc.)
+ * @param {*} a - First value to compare
+ * @param {*} b - Second value to compare
+ * @returns {boolean} - True if values are deeply equal
+ */
+function deepEqual(a, b) {
+  // Handle primitives and same reference
+  if (a === b) return true;
+  
+  // Handle null and undefined
+  if (a == null || b == null) return a === b;
+  
+  // Handle different types
+  if (typeof a !== typeof b) return false;
+  
+  // Handle dates
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+  
+  // Handle arrays - must both be arrays
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b)) return false;
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  
+  // Handle objects (non-arrays)
+  if (typeof a === 'object' && typeof b === 'object') {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    
+    if (keysA.length !== keysB.length) return false;
+    
+    for (const key of keysA) {
+      if (!keysB.includes(key)) return false;
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+    
+    return true;
+  }
+  
+  // Fallback for primitives (strings, numbers, booleans)
+  return false;
+}
+
+module.exports = deepEqual;

package/frontend/src/_util/document-search-autocomplete.js

@@ -82,9 +82,9 @@ function getAutocompleteContext(searchText, cursorPos) {
   
   // Check if we're in a value context (after a colon)
   // Match the last colon followed by optional whitespace and capture everything after
-  const valueMatch = before.match(/:\s*([^\s,\}\]:]*)$/);
+  const valueMatch = before.match(/:\s*(\{?\s*)([^\s,\}\]:]*)$/);
   if (valueMatch) {
-    const token = valueMatch[1];
+    const token = valueMatch[2];
     return {
       token,
       role: 'value',
@@ -159,9 +159,9 @@ function applySuggestion(searchText, cursorPos, suggestion) {
   const after = searchText.slice(cursorPos);
   
   // Check if we're in a value context
-  const valueMatch = before.match(/:\s*([^\s,\}\]:]*)$/);
+  const valueMatch = before.match(/:\s*(\{?\s*)([^\s,\}\]:]*)$/);
   if (valueMatch) {
-    const token = valueMatch[1];
+    const token = valueMatch[2];
     const start = cursorPos - token.length;
     let replacement = suggestion;
     let cursorOffset = replacement.length;

package/frontend/src/array-utils.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const { inspect } = require('node-inspect-extracted');
+const deepEqual = require('./_util/deepEqual');
 
 /**
  * Format a value for display in array views

package/frontend/src/dashboard/dashboard.js

@@ -1,10 +1,12 @@
 'use strict';
 
 const api = require('../api');
+const baseComponent = require('../_util/baseComponent');
 const template = require('./dashboard.html');
 
-module.exports = app => app.component('dashboard', {
+module.exports = {
   template: template,
+  extends: baseComponent,
   props: ['dashboardId'],
   data: function() {
     return {
@@ -48,7 +50,7 @@ module.exports = app => app.component('dashboard', {
       }
     },
     shouldEvaluateDashboard() {
-      if (this.dashboardResults.length === 0) {
+      if (!this.dashboardResults || this.dashboardResults.length === 0) {
         return true;
       }
 
@@ -115,6 +117,22 @@ module.exports = app => app.component('dashboard', {
         this.startingChat = false;
         this.showActionsMenu = false;
       }
+    },
+    async loadInitial() {
+      const { dashboard, dashboardResults, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: false });
+      if (!dashboard) {
+        return;
+      }
+      this.dashboard = dashboard;
+      this.code = this.dashboard.code;
+      this.title = this.dashboard.title;
+      this.description = this.dashboard.description ?? '';
+      this.dashboardResults = dashboardResults;
+      if (this.shouldEvaluateDashboard()) {
+        await this.evaluateDashboard();
+        return;
+      }
+      this.status = 'loaded';
     }
   },
   computed: {
@@ -125,22 +143,9 @@ module.exports = app => app.component('dashboard', {
   mounted: async function() {
     document.addEventListener('click', this.handleDocumentClick);
     this.showEditor = this.$route.query.edit;
-    const { dashboard, dashboardResults, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: false });
-    if (!dashboard) {
-      return;
-    }
-    this.dashboard = dashboard;
-    this.code = this.dashboard.code;
-    this.title = this.dashboard.title;
-    this.description = this.dashboard.description ?? '';
-    this.dashboardResults = dashboardResults;
-    if (this.shouldEvaluateDashboard()) {
-      await this.evaluateDashboard();
-      return;
-    }
-    this.status = 'loaded';
+    await this.loadInitial();
   },
   beforeDestroy() {
     document.removeEventListener('click', this.handleDocumentClick);
   }
-});
+};

package/frontend/src/document/confirm-changes/confirm-changes.js

@@ -7,6 +7,16 @@ module.exports = app => app.component('confirm-changes', {
   props: ['value'],
   computed: {
     displayValue() {
+      const hasUnsetFields = Object.keys(this.value).some(key => this.value[key] === undefined);
+      if (hasUnsetFields) {
+        const unsetFields = Object.keys(this.value)
+          .filter(key => this.value[key] === undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: 1 }), {});
+        const setFields = Object.keys(this.value)
+          .filter(key => this.value[key] !== undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: this.value[key] }), {});
+        return JSON.stringify({ $set: setFields, $unset: unsetFields }, null, '  ').trim();
+      }
       return JSON.stringify(this.value, null, '  ').trim();
     }
   },
@@ -21,4 +31,4 @@ module.exports = app => app.component('confirm-changes', {
   mounted() {
     Prism.highlightElement(this.$refs.code);
   }
-});
+});

package/frontend/src/document/document.html

@@ -1,4 +1,4 @@
-<div class="document px-1 pt-4 md:px-0 bg-slate-50 w-full">
+<div class="document px-1 pt-4 pb-16 md:px-0 bg-slate-50 w-full">
   <div class="max-w-7xl mx-auto">
     <div class="flex gap-4 items-center sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm">
       <div class="font-bold overflow-hidden text-ellipsis">{{model}}: {{documentId}}</div>

package/frontend/src/document/document.js

@@ -74,10 +74,25 @@ module.exports = app => app.component('document', {
       if (Object.keys(this.invalid).length > 0) {
         throw new Error('Invalid paths: ' + Object.keys(this.invalid).join(', '));
       }
+
+      let update = this.changes;
+      let unset = {};
+      const hasUnsetFields = Object.keys(this.changes)
+        .some(key => this.changes[key] === undefined);
+      if (hasUnsetFields) {
+        unset = Object.keys(this.changes)
+          .filter(key => this.changes[key] === undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: 1 }), {});
+        update = Object.keys(this.changes)
+          .filter(key => this.changes[key] !== undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: this.changes[key] }), {});
+      }
+
       const { doc } = await api.Model.updateDocument({
         model: this.model,
         _id: this.document._id,
-        update: this.changes
+        update,
+        unset
       });
       this.document = doc;
       this.changes = {};

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

@@ -74,7 +74,7 @@
         :value="getEditValueForPath(path)"
         :format="dateType"
         v-bind="getEditComponentProps(path)"
-        @input="changes[path.path] = $event; delete invalid[path.path];"
+        @input="handleInputChange($event)"
         @error="invalid[path.path] = $event;"
         >
       </component>

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

@@ -3,7 +3,7 @@
 'use strict';
 
 const mpath = require('mpath');
-const { inspect } = require('node-inspect-extracted');
+const deepEqual = require('../../_util/deepEqual');
 const template = require('./document-property.html');
 
 const appendCSS = require('../../appendCSS');
@@ -95,6 +95,20 @@ module.exports = app => app.component('document-property', {
     }
   },
   methods: {
+    handleInputChange(newValue) {
+      const currentValue = this.getValueForPath(this.path.path);
+
+      // Only record as a change if the value is actually different
+      if (!deepEqual(currentValue, newValue)) {
+        this.changes[this.path.path] = newValue;
+      } else {
+        // If the value is the same as the original, remove it from changes
+        delete this.changes[this.path.path];
+      }
+
+      // Always clear invalid state on input
+      delete this.invalid[this.path.path];
+    },
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {
         return 'detail-array';

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

@@ -19,20 +19,12 @@ module.exports = app => app.component('edit-boolean', {
       this.selectedValue = newValue;
     },
     selectedValue(newValue) {
-      // Convert null/undefined to strings for proper backend serialization
-      const emitValue = this.convertValueToString(newValue);
-      this.$emit('input', emitValue);
+      this.$emit('input', newValue);
     }
   },
   methods: {
     selectValue(value) {
       this.selectedValue = value;
-    },
-    convertValueToString(value) {
-      // Convert null/undefined to strings for proper backend serialization
-      if (value === null) return 'null';
-      if (typeof value === 'undefined') return 'undefined';
-      return value;
     }
   }
 });

package/frontend/src/index.js

@@ -44,7 +44,11 @@ requireComponents.keys().forEach((filePath) => {
   // Check if the file name matches the directory name
   if (directoryName === fileName) {
     components[directoryName] = requireComponents(filePath);
-    components[directoryName](app);
+    if (typeof components[directoryName] === 'function') {
+      components[directoryName](app);
+    } else {
+      app.component(directoryName, components[directoryName]);
+    }
   }
 });
 
@@ -102,18 +106,21 @@ app.component('app-component', {
           return;
         }
 
+        window.localStorage.setItem('_mongooseStudioAccessToken', accessToken._id);
+
         try {
           const { nodeEnv } = await api.status();
           this.nodeEnv = nodeEnv;
         } catch (err) {
           this.authError = 'Error connecting to Mongoose Studio API: ' + err.response?.data?.message ?? err.message;
           this.status = 'loaded';
+          window.localStorage.setItem('_mongooseStudioAccessToken', '');
           return;
         }
 
         this.user = user;
         this.roles = roles;
-        window.localStorage.setItem('_mongooseStudioAccessToken', accessToken._id);
+
         setTimeout(() => {
           this.$router.replace(this.$router.currentRoute.value.path);
         }, 0);

package/frontend/src/mothership.js

@@ -18,12 +18,21 @@ client.interceptors.request.use(req => {
   return req;
 });
 
+function sanitizedReturnUrl() {
+  const url = new URL(window.location.href);
+  if (url.hash && url.hash.includes('?')) {
+    const [hashPath, hashSearch] = url.hash.split('?', 2);
+    url.hash = hashPath;
+  }
+  return url.toString();
+}
+
 exports.githubLogin = function githubLogin() {
-  return client.post('/githubLogin', { state: window.location.href }).then(res => res.data);
+  return client.post('/githubLogin', { state: sanitizedReturnUrl() }).then(res => res.data);
 };
 
 exports.googleLogin = function googleLogin() {
-  return client.post('/googleLogin', { state: window.location.href }).then(res => res.data);
+  return client.post('/googleLogin', { state: sanitizedReturnUrl() }).then(res => res.data);
 };
 
 exports.getWorkspaceTeam = function getWorkspaceTeam() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {
@@ -34,12 +34,14 @@
     "eslint": "9.30.0",
     "express": "4.x",
     "mocha": "10.2.0",
-    "mongoose": "9.x"
+    "mongoose": "9.x",
+    "sinon": "^21.0.1"
   },
   "scripts": {
     "lint": "eslint .",
     "tailwind": "tailwindcss -o ./frontend/public/tw.css",
     "tailwind:watch": "tailwindcss -o ./frontend/public/tw.css --watch",
-    "test": "mocha test/*.test.js"
+    "test": "mocha test/*.test.js",
+    "test:frontend": "mocha test/frontend/*.test.js"
   }
 }