@mongoosejs/studio 0.2.12 → 0.3.0

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

@@ -1,7 +1,6 @@
 'use strict';
 
 const template = require('./edit-subdocument.html');
-
 const { BSON, EJSON } = require('mongodb/lib/bson');
 
 const ObjectId = new Proxy(BSON.ObjectId, {
@@ -13,19 +12,11 @@ const ObjectId = new Proxy(BSON.ObjectId, {
 module.exports = app => app.component('edit-subdocument', {
   template: template,
   props: ['value'],
-  data: () => ({ currentValue: null, status: 'init' }),
+  data: () => ({ currentValue: '', status: 'init' }),
   mounted() {
     this.currentValue = this.value == null
       ? '' + this.value
       : JSON.stringify(this.value, null, '  ').trim();
-    this.$refs.editor.value = this.currentValue;
-    this.editor = CodeMirror.fromTextArea(this.$refs.editor, {
-      mode: 'javascript',
-      lineNumbers: true
-    });
-    this.editor.on('change', ev => {
-      this.currentValue = this.editor.getValue();
-    });
     this.status = 'loaded';
   },
   watch: {
@@ -41,10 +32,5 @@ module.exports = app => app.component('edit-subdocument', {
       }
     }
   },
-  beforeDestroy() {
-    if (this.editor) {
-      this.editor.toTextArea();
-    }
-  },
   emits: ['input', 'error']
 });

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

@@ -4,10 +4,10 @@
     Choose fields to export
   </div>
   <div v-for="(schemaPath,index) in schemaPaths" class="w-5 flex items-center">
-    <input type="checkbox" class="mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600" v-model="shouldExport[schemaPath.path]" :id="'schemaPath.path'+index">
-    <div class="ml-2 text-gray-700 grow shrink text-left">
+    <input type="checkbox" class="mt-0 h-4 w-4 rounded border-edge-strong text-sky-600 focus:ring-sky-600 accent-sky-600" v-model="shouldExport[schemaPath.path]" :id="'schemaPath.path'+index">
+    <div class="ml-2 text-content-secondary grow shrink text-left">
       <label :for="'schemaPath.path'+index">{{schemaPath.path}}</label>
     </div>
   </div>
-  <async-button class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 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-teal-600" @click="exportQueryResults">Export</async-button>
+  <async-button class="rounded-md bg-primary px-2.5 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600" @click="exportQueryResults">Export</async-button>
 </div>

package/frontend/src/json-node/json-node.html

@@ -3,14 +3,14 @@
     <button
       v-if="showToggle"
       type="button"
-      class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-gray-500 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
+      class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-content-tertiary hover:text-content-secondary focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
       @click.stop="handleToggle"
     >
       {{ isCollapsedNode ? '+' : '-' }}
     </button>
     <span v-else class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible flex-shrink-0"></span>
     <template v-if="hasKey">
-      <span class="text-blue-600">"{{ nodeKey }}"</span><span>: </span>
+      <span class="text-primary">"{{ nodeKey }}"</span><span>: </span>
     </template>
     <template v-if="isComplex">
       <template v-if="hasChildren">
@@ -52,7 +52,7 @@
         </span>
         <a
           href="#"
-          class="ml-1 text-sm text-sky-700 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
+          class="ml-1 text-sm text-primary opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
           @click.stop.prevent="goToReference()"
         >
           View Document

package/frontend/src/list-json/json-node.html

@@ -3,7 +3,7 @@
     <button
       v-if="showToggle"
       type="button"
-      class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-gray-500 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
+      class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-content-tertiary hover:text-content-secondary focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
       @click.stop="handleToggle"
     >
       {{ isCollapsedNode ? '+' : '-' }}

package/frontend/src/models/document-search/document-search.html

@@ -1,7 +1,7 @@
 <form @submit.prevent="emitSearch" class="relative flex-grow m-0">
   <input
     ref="searchInput"
-    class="w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none"
+    class="w-full font-mono rounded-md p-1 border border-edge-strong outline-edge-strong text-lg focus:ring-1 focus:ring-primary-subtle focus:ring-offset-0 focus:outline-none"
     type="text"
     placeholder="Filter (supports JS, dates, ObjectIds, and more)"
     v-model="searchText"
@@ -9,12 +9,12 @@
     @input="updateAutocomplete"
     @keydown="handleKeyDown"
   />
-  <ul v-if="autocompleteSuggestions.length" class="absolute z-[9999] bg-white border border-gray-300 rounded mt-1 w-full max-h-40 overflow-y-auto shadow">
+  <ul v-if="autocompleteSuggestions.length" class="absolute z-[9999] bg-surface border border-edge-strong rounded mt-1 w-full max-h-40 overflow-y-auto shadow">
     <li
       v-for="(suggestion, index) in autocompleteSuggestions"
       :key="suggestion"
       class="px-2 py-1 cursor-pointer"
-      :class="{ 'bg-ultramarine-100': index === autocompleteIndex }"
+      :class="{ 'bg-primary-subtle': index === autocompleteIndex }"
       @mousedown.prevent="applySuggestion(index)"
     >
       {{ suggestion }}

package/frontend/src/models/model-switcher/model-switcher.html

@@ -0,0 +1,53 @@
+<div v-if="show" class="fixed inset-0 z-[9999]">
+  <div class="fixed inset-0 bg-black/40" @click="$emit('close')"></div>
+  <div
+    class="fixed top-[15%] left-1/2 -translate-x-1/2 w-full max-w-lg bg-surface rounded-lg shadow-2xl border border-edge overflow-hidden"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Model switcher"
+  >
+    <div class="p-3 border-b border-gray-100">
+      <input
+        ref="searchInput"
+        v-model="search"
+        type="text"
+        placeholder="Type a model name..."
+        @keydown="handleKeydown"
+        class="w-full rounded-md border border-edge bg-page py-2 px-3 text-sm text-content placeholder:text-gray-400 focus:border-edge-strong focus:outline-none focus:ring-1 focus:ring-gray-300"
+      />
+    </div>
+    <div ref="list" class="max-h-80 overflow-y-auto">
+      <template v-for="(item, index) in items" :key="item.section + '-' + item.model">
+        <div
+          v-if="index === 0 || items[index - 1].section !== item.section"
+          class="px-3 pt-2 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider"
+        >
+          {{ item.section }}
+        </div>
+        <div
+          :data-selected="index === selectedIndex"
+          @click="selectModel(item.model)"
+          @mouseenter="onMouseEnter(index)"
+          class="flex items-center px-3 py-1.5 mx-2 rounded-md cursor-pointer text-sm"
+          :class="index === selectedIndex ? 'bg-muted text-content' : 'text-content-secondary hover:bg-page'"
+        >
+          <span class="truncate" v-html="highlightMatch(item.model)"></span>
+          <span
+            v-if="modelDocumentCounts && modelDocumentCounts[item.model] !== undefined"
+            class="ml-auto text-xs text-gray-400 bg-muted rounded px-1.5 py-[1px]"
+          >
+            {{ formatCompactCount(modelDocumentCounts[item.model]) }}
+          </span>
+        </div>
+      </template>
+      <div v-if="items.length === 0" class="px-3 py-4 text-sm text-content-tertiary text-center">
+        No models match "{{ search }}"
+      </div>
+    </div>
+    <div class="border-t border-gray-100 px-3 py-2 text-xs text-gray-400 flex gap-3">
+      <span>↑↓ navigate</span>
+      <span>↵ select</span>
+      <span>esc close</span>
+    </div>
+  </div>
+</div>

package/frontend/src/models/model-switcher/model-switcher.js

@@ -0,0 +1,123 @@
+'use strict';
+
+const template = require('./model-switcher.html');
+const xss = require('xss');
+
+module.exports = app => app.component('model-switcher', {
+  template: template,
+  props: ['show', 'models', 'recentlyViewedModels', 'modelDocumentCounts'],
+  emits: ['close', 'select'],
+  data: () => ({
+    search: '',
+    selectedIndex: 0
+  }),
+  mounted() {
+    this.lastMouseMove = 0;
+    this.trackLastMouseMove = () => {
+      this.lastMouseMove = Date.now();
+    };
+
+    window.addEventListener('mousemove', this.trackLastMouseMove);
+  },
+  beforeUnmount() {
+    window.removeEventListener('mousemove', this.trackLastMouseMove);
+  },
+  watch: {
+    search() {
+      this.selectedIndex = 0;
+    },
+    show(val) {
+      if (val) {
+        this.search = '';
+        this.selectedIndex = 0;
+        this.$nextTick(() => {
+          if (this.$refs.searchInput) this.$refs.searchInput.focus();
+        });
+      }
+    }
+  },
+  computed: {
+    items() {
+      const items = [];
+      const search = this.search.trim().toLowerCase();
+      const recent = (this.recentlyViewedModels || []).filter(m => this.models.includes(m));
+
+      if (!search && recent.length > 0) {
+        for (const model of recent) {
+          items.push({ model, section: 'Recently Viewed' });
+        }
+      }
+
+      const filtered = search
+        ? this.models.filter(m => m.toLowerCase().includes(search))
+        : this.models;
+
+      for (const model of filtered) {
+        items.push({ model, section: search ? 'Search Results' : 'All Models' });
+      }
+
+      return items;
+    }
+  },
+  methods: {
+    selectModel(model) {
+      this.$emit('select', model);
+    },
+    onMouseEnter(index) {
+      // If user hasn't moved mouse recently, then this event was likely triggered by scroll
+      if (this.lastMouseMove <= Date.now() - 500) {
+        return;
+      }
+      this.selectedIndex = index;
+    },
+    handleKeydown(event) {
+      const items = this.items;
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        this.selectedIndex = Math.min(this.selectedIndex + 1, items.length - 1);
+        this.scrollSelectedIntoView();
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+        this.scrollSelectedIntoView();
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        if (items.length > 0 && items[this.selectedIndex]) {
+          this.selectModel(items[this.selectedIndex].model);
+        }
+      } else if (event.key === 'Escape') {
+        event.preventDefault();
+        this.$emit('close');
+      }
+    },
+    scrollSelectedIntoView() {
+      this.$nextTick(() => {
+        const container = this.$refs.list;
+        if (!container) return;
+        const selected = container.querySelector('[data-selected="true"]');
+        if (selected) selected.scrollIntoView({ block: 'nearest' });
+      });
+    },
+    highlightMatch(model) {
+      const search = this.search.trim();
+      if (!search) return model;
+      const idx = model.toLowerCase().indexOf(search.toLowerCase());
+      if (idx === -1) return model;
+      const before = model.slice(0, idx);
+      const match = model.slice(idx, idx + search.length);
+      const after = model.slice(idx + search.length);
+      return `${xss(before)}<strong>${xss(match)}</strong>${xss(after)}`;
+    },
+    formatCompactCount(value) {
+      if (typeof value !== 'number') return '—';
+      if (value < 1000) return `${value}`;
+      const formatValue = (number, suffix) => {
+        const rounded = (Math.round(number * 10) / 10).toFixed(1).replace(/\.0$/, '');
+        return `${rounded}${suffix}`;
+      };
+      if (value < 1000000) return formatValue(value / 1000, 'k');
+      if (value < 1000000000) return formatValue(value / 1000000, 'M');
+      return formatValue(value / 1000000000, 'B');
+    }
+  }
+});

package/frontend/src/models/models.css

@@ -11,7 +11,6 @@
 }
 
 .models .model-selector {
-  background-color: #eee;
   flex-grow: 0;
   padding: 15px;
   padding-top: 0px;
@@ -82,17 +81,11 @@
 }
 
 .models .documents-menu {
-  position: fixed;
-  z-index: 1;
+  position: sticky;
+  top: 0;
+  z-index: 2;
   padding: 4px;
   display: flex;
-  width: 100vw;
-}
-
-@media (min-width: 1024px) {
-  .models .documents-menu {
-    width: calc(100vw - 12rem);
-  }
 }
 
 .models .documents-menu .search-input {