@mongoosejs/studio 0.2.9 → 0.2.11

package/frontend/src/api.js

@@ -91,6 +91,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     deleteDocuments(params) {
       return client.post('', { action: 'Model.deleteDocuments', ...params }).then(res => res.data);
     },
+    executeDocumentScript(params) {
+      return client.post('', { action: 'Model.executeDocumentScript', ...params }).then(res => res.data);
+    },
     exportQueryResults(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
 
@@ -132,6 +135,16 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         yield { document: doc };
       }
     },
+    streamDocumentChanges: async function* streamDocumentChanges(params, options = {}) {
+      const pollIntervalMs = 5000;
+      while (!options.signal?.aborted) {
+        await new Promise(resolve => setTimeout(resolve, pollIntervalMs));
+        if (options.signal?.aborted) {
+          return;
+        }
+        yield { type: 'poll', model: params.model, documentId: params.documentId };
+      }
+    },
     getCollectionInfo: function getCollectionInfo(params) {
       return client.post('', { action: 'Model.getCollectionInfo', ...params }).then(res => res.data);
     },
@@ -159,6 +172,23 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('', { action: 'Model.updateDocuments', ...params }).then(res => res.data);
     }
   };
+  exports.Task = {
+    cancelTask: function cancelTask(params) {
+      return client.post('', { action: 'Task.cancelTask', ...params }).then(res => res.data);
+    },
+    createTask: function createTask(params) {
+      return client.post('', { action: 'Task.createTask', ...params }).then(res => res.data);
+    },
+    getTasks: function getTasks(params) {
+      return client.post('', { action: 'Task.getTasks', ...params }).then(res => res.data);
+    },
+    rescheduleTask: function rescheduleTask(params) {
+      return client.post('', { action: 'Task.rescheduleTask', ...params }).then(res => res.data);
+    },
+    runTask: function runTask(params) {
+      return client.post('', { action: 'Task.runTask', ...params }).then(res => res.data);
+    }
+  };
 } else {
   exports.status = function status() {
     return client.get('/status').then(res => res.data);
@@ -270,6 +300,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     deleteDocuments: function(params) {
       return client.post('/Model/deleteDocuments', params).then(res => res.data);
     },
+    executeDocumentScript: function(params) {
+      return client.post('/Model/executeDocumentScript', params).then(res => res.data);
+    },
     exportQueryResults(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
 
@@ -352,6 +385,56 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         }
       }
     },
+    streamDocumentChanges: async function* streamDocumentChanges(params, options = {}) {
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+      const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/streamDocumentChanges?' + new URLSearchParams(params).toString();
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          Authorization: `${accessToken}`,
+          Accept: 'text/event-stream'
+        },
+        signal: options.signal
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder('utf-8');
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        let eventEnd;
+        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
+          const eventStr = buffer.slice(0, eventEnd);
+          buffer = buffer.slice(eventEnd + 2);
+
+          // Parse SSE event
+          const lines = eventStr.split('\n');
+          let data = '';
+          for (const line of lines) {
+            if (line.startsWith('data:')) {
+              data += line.slice(5).trim();
+            }
+          }
+          if (data) {
+            try {
+              yield JSON.parse(data);
+            } catch (err) {
+              // If not JSON, yield as string
+              yield data;
+            }
+          }
+        }
+      }
+    },
     getCollectionInfo: function getCollectionInfo(params) {
       return client.post('/Model/getCollectionInfo', params).then(res => res.data);
     },
@@ -420,4 +503,21 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('/Model/updateDocuments', params).then(res => res.data);
     }
   };
+  exports.Task = {
+    cancelTask: function cancelTask(params) {
+      return client.post('/Task/cancelTask', params).then(res => res.data);
+    },
+    createTask: function createTask(params) {
+      return client.post('/Task/createTask', params).then(res => res.data);
+    },
+    getTasks: function getTasks(params) {
+      return client.post('/Task/getTasks', params).then(res => res.data);
+    },
+    rescheduleTask: function rescheduleTask(params) {
+      return client.post('/Task/rescheduleTask', params).then(res => res.data);
+    },
+    runTask: function runTask(params) {
+      return client.post('/Task/runTask', params).then(res => res.data);
+    }
+  };
 }

package/frontend/src/dashboard-result/dashboard-document/dashboard-document.html

@@ -1,8 +1,7 @@
 <div class="py-2">
-  <div v-if="header" class="border-b border-gray-100 px-2 pb-2 text-xl font-bold">
-    {{header}}
-  </div>
   <div class="text-xl pb-2">
-    <document-details :document="value.$document.document" :schemaPaths="schemaPaths" />
+    <list-json
+      :value="value.$document.document"
+      :references="references" />
   </div>
-</div>
+</div>

package/frontend/src/dashboard-result/dashboard-document/dashboard-document.js

@@ -7,23 +7,22 @@ const template = require('./dashboard-document.html');
 module.exports = app => app.component('dashboard-document', {
   template: template,
   props: ['value'],
+  inject: ['state'],
   computed: {
-    header() {
-      if (this.value != null && this.value.$document.header) {
-        return this.value.$document.header;
+    references() {
+      const model = this.value.$document?.model;
+      if (typeof model === 'string' && this.state.modelSchemaPaths?.[model]) {
+        const map = {};
+        for (const path of Object.keys(this.state.modelSchemaPaths[model])) {
+          const definition = this.state.modelSchemaPaths[model][path];
+          if (definition?.ref) {
+            map[path] = definition.ref;
+          }
+        }
+        return map;
       }
+
       return null;
-    },
-    schemaPaths() {
-      return Object.keys(this.value?.$document?.schemaPaths || {}).sort((k1, k2) => {
-        if (k1 === '_id' && k2 !== '_id') {
-          return -1;
-        }
-        if (k1 !== '_id' && k2 === '_id') {
-          return 1;
-        }
-        return 0;
-      }).map(key => this.value?.$document.schemaPaths[key]);
     }
   }
 });

package/frontend/src/document/document.html

@@ -29,6 +29,18 @@
         </button>
       </div>
 
+      <div class="hidden md:flex items-center gap-3 text-sm text-slate-600">
+        <div class="text-right leading-tight">
+          <div class="text-xs uppercase tracking-wide text-slate-400 flex items-center gap-2 justify-end">
+            <span>Loaded at</span>
+            <span class="inline-flex items-center gap-1 text-[10px] font-semibold" :class="autoRefreshEnabled ? 'text-forest-green-600' : 'text-slate-400'">
+              <span class="inline-block h-1.5 w-1.5 rounded-full" :class="autoRefreshEnabled ? 'bg-forest-green-500' : 'bg-slate-300'"></span>
+            </span>
+          </div>
+          <div class="font-medium text-slate-700">{{lastUpdatedLabel}}</div>
+        </div>
+      </div>
+
       <div class="gap-2 hidden md:flex items-center">
         <button
           v-if="!editting"
@@ -77,6 +89,23 @@
             class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
           >
             <div class="py-1 flex flex-col">
+              <button
+                @click="refreshDocument({ force: true, source: 'manual' }); desktopMenuOpen = false"
+                :disabled="isRefreshing"
+                :class="['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
+                type="button"
+              >
+                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}
+              </button>
+              <button
+                @click="toggleAutoRefresh(); desktopMenuOpen = false"
+                :disabled="isLambda"
+                type="button"
+                :class="['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700 hover:bg-slate-100']"
+                :title="isLambda ? 'Auto-refresh only available on Express deployments' : ''"
+              >
+                {{autoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh'}}
+              </button>
               <button
                 @click="addField(); desktopMenuOpen = false"
                 type="button"
@@ -84,6 +113,20 @@
               >
                 Add Field
               </button>
+              <button
+                @click="copyDocument(); desktopMenuOpen = false"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100"
+              >
+                Copy Document
+              </button>
+              <button
+                @click="openScriptDrawer()"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100"
+              >
+                Run Script
+              </button>
               <button
                 @click="shouldShowDeleteModal=true; desktopMenuOpen = false"
                 :disabled="!canManipulate"
@@ -150,6 +193,21 @@
               >
                 Save
               </button>
+              <button
+                @click="refreshDocument({ force: true, source: 'manual' }); mobileMenuOpen = false"
+                :disabled="isRefreshing"
+                :class="['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
+                type="button"
+              >
+                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}
+              </button>
+              <button
+                @click="toggleAutoRefresh(); mobileMenuOpen = false"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+              >
+                Auto-Refresh {{autoRefreshEnabled ? 'ON' : 'OFF'}}
+              </button>
               <button
                 @click="addField(); mobileMenuOpen = false"
                 type="button"
@@ -157,6 +215,20 @@
               >
                 Add Field
               </button>
+              <button
+                @click="copyDocument(); mobileMenuOpen = false"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100"
+              >
+                Copy Document
+              </button>
+              <button
+                @click="openScriptDrawer()"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100"
+              >
+                Run Script
+              </button>
               <button
                 @click="shouldShowDeleteModal=true; mobileMenuOpen = false"
                 :disabled="!canManipulate"
@@ -209,5 +281,13 @@
         </template>
       </modal>
     </div>
+    <execute-script
+      :visible="scriptDrawerOpen"
+      :model="model"
+      :document-id="documentId"
+      :editting="editting"
+      @close="closeScriptDrawer"
+      @refresh="handleScriptRefresh"
+    ></execute-script>
   </div>
 </div>

package/frontend/src/document/document.js

@@ -26,30 +26,26 @@ module.exports = app => app.component('document', {
     shouldShowConfirmModal: false,
     shouldShowDeleteModal: false,
     shouldShowCloneModal: false,
-    previousQuery: null
+    previousQuery: null,
+    lastUpdatedAt: null,
+    isRefreshing: false,
+    autoRefreshEnabled: false,
+    autoRefreshConnecting: false,
+    autoRefreshLoopRunning: false,
+    autoRefreshError: null,
+    autoRefreshAbortController: null,
+    autoRefreshRetryTimer: null,
+    pendingRefresh: false,
+    scriptDrawerOpen: false
   }),
   async mounted() {
     window.pageState = this;
     // Store query parameters from the route (preserved from models page)
     this.previousQuery = Object.assign({}, this.$route.query);
-    try {
-      const { doc, schemaPaths, virtualPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
-      window.doc = doc;
-      this.document = doc;
-      this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
-        if (k1 === '_id' && k2 !== '_id') {
-          return -1;
-        }
-        if (k1 !== '_id' && k2 === '_id') {
-          return 1;
-        }
-        return 0;
-      }).map(key => schemaPaths[key]);
-      this.virtualPaths = virtualPaths || [];
-      this.status = 'loaded';
-    } finally {
-      this.status = 'loaded';
-    }
+    await this.refreshDocument({ force: true, source: 'initial' });
+  },
+  beforeDestroy() {
+    this.stopAutoRefresh();
   },
   computed: {
     canManipulate() {
@@ -61,8 +57,32 @@ module.exports = app => app.component('document', {
       }
       return !this.roles.includes('readonly');
     },
+    lastUpdatedLabel() {
+      if (!this.lastUpdatedAt) {
+        return '—';
+      }
+      try {
+        return new Date(this.lastUpdatedAt).toLocaleTimeString([], {
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit'
+        });
+      } catch (err) {
+        return '—';
+      }
+    },
     canEdit() {
       return this.canManipulate && this.viewMode === 'fields';
+    },
+    isLambda() {
+      return !!window?.MONGOOSE_STUDIO_CONFIG?.isLambda;
+    }
+  },
+  watch: {
+    editting(nextValue) {
+      if (!nextValue && this.pendingRefresh) {
+        this.refreshDocument({ source: 'pending' });
+      }
     }
   },
   methods: {
@@ -70,6 +90,125 @@ module.exports = app => app.component('document', {
       this.changes = {};
       this.editting = false;
     },
+    async refreshDocument(options = {}) {
+      const { force = false, source = 'manual' } = options;
+      if (this.editting && !force) {
+        this.pendingRefresh = true;
+        return;
+      }
+      if (this.isRefreshing) {
+        this.pendingRefresh = true;
+        return;
+      }
+
+      const isInitial = this.status === 'init';
+      if (isInitial) {
+        this.status = 'loading';
+      }
+      this.isRefreshing = true;
+      this.autoRefreshError = null;
+      try {
+        const { doc, schemaPaths, virtualPaths } = await api.Model.getDocument({
+          model: this.model,
+          documentId: this.documentId
+        });
+        window.doc = doc;
+        this.document = doc;
+        this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+          if (k1 === '_id' && k2 !== '_id') {
+            return -1;
+          }
+          if (k1 !== '_id' && k2 === '_id') {
+            return 1;
+          }
+          return 0;
+        }).map(key => schemaPaths[key]);
+        this.virtualPaths = virtualPaths || [];
+        this.lastUpdatedAt = new Date();
+        this.pendingRefresh = false;
+      } catch (err) {
+        console.error('Error refreshing document:', err);
+        if (this.$toast && source !== 'initial') {
+          this.$toast.error('Failed to refresh document');
+        }
+      } finally {
+        this.status = 'loaded';
+        this.isRefreshing = false;
+        if (this.pendingRefresh && !this.editting) {
+          this.pendingRefresh = false;
+          this.refreshDocument({ source: 'pending' });
+        }
+      }
+    },
+    toggleAutoRefresh() {
+      if (this.autoRefreshEnabled) {
+        this.stopAutoRefresh();
+      } else {
+        this.startAutoRefresh();
+      }
+    },
+    startAutoRefresh() {
+      if (this.autoRefreshEnabled) {
+        return;
+      }
+      this.autoRefreshEnabled = true;
+      this.autoRefreshError = null;
+      this.runAutoRefreshLoop();
+    },
+    stopAutoRefresh() {
+      this.autoRefreshEnabled = false;
+      this.autoRefreshConnecting = false;
+      if (this.autoRefreshAbortController) {
+        this.autoRefreshAbortController.abort();
+        this.autoRefreshAbortController = null;
+      }
+      if (this.autoRefreshRetryTimer) {
+        clearTimeout(this.autoRefreshRetryTimer);
+        this.autoRefreshRetryTimer = null;
+      }
+    },
+    async runAutoRefreshLoop() {
+      if (this.autoRefreshLoopRunning) {
+        return;
+      }
+      this.autoRefreshLoopRunning = true;
+      this.autoRefreshAbortController = new AbortController();
+      let retryDelay = 1500;
+
+      while (this.autoRefreshEnabled && !this.autoRefreshAbortController.signal.aborted) {
+        try {
+          this.autoRefreshConnecting = true;
+          for await (const event of api.Model.streamDocumentChanges({
+            model: this.model,
+            documentId: this.documentId
+          }, { signal: this.autoRefreshAbortController.signal })) {
+            this.autoRefreshConnecting = false;
+            if (!event || event.type === 'heartbeat') {
+              continue;
+            }
+            await this.refreshDocument({ source: 'auto' });
+          }
+        } catch (err) {
+          if (this.autoRefreshAbortController.signal.aborted) {
+            break;
+          }
+          this.autoRefreshError = err?.message || String(err);
+        } finally {
+          this.autoRefreshConnecting = false;
+        }
+
+        if (!this.autoRefreshEnabled || this.autoRefreshAbortController.signal.aborted) {
+          break;
+        }
+
+        await new Promise(resolve => {
+          this.autoRefreshRetryTimer = setTimeout(resolve, retryDelay);
+        });
+        retryDelay = Math.min(retryDelay * 2, 15000);
+      }
+
+      this.autoRefreshLoopRunning = false;
+    },
     async save() {
       if (Object.keys(this.invalid).length > 0) {
         throw new Error('Invalid paths: ' + Object.keys(this.invalid).join(', '));
@@ -137,12 +276,60 @@ module.exports = app => app.component('document', {
         this.changes = {};
       }
     },
+    copyDocument() {
+      if (!this.document) {
+        return;
+      }
+
+      const textToCopy = JSON.stringify(this.document, null, 2);
+      const fallbackCopy = () => {
+        if (typeof document === 'undefined') {
+          return;
+        }
+        const textArea = document.createElement('textarea');
+        textArea.value = textToCopy;
+        textArea.setAttribute('readonly', '');
+        textArea.style.position = 'absolute';
+        textArea.style.left = '-9999px';
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+          document.execCommand('copy');
+        } finally {
+          document.body.removeChild(textArea);
+        }
+        this.$toast.success('Document copied!');
+      };
+
+      if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(textToCopy)
+          .then(() => {
+            this.$toast.success('Document copied!');
+          })
+          .catch(() => {
+            fallbackCopy();
+          });
+      } else {
+        fallbackCopy();
+      }
+    },
     goBack() {
       // Preserve query parameters when going back to models page
       this.$router.push({
         path: '/model/' + this.model,
         query: this.previousQuery || {}
       });
+    },
+    openScriptDrawer() {
+      this.scriptDrawerOpen = true;
+      this.desktopMenuOpen = false;
+      this.mobileMenuOpen = false;
+    },
+    closeScriptDrawer() {
+      this.scriptDrawerOpen = false;
+    },
+    handleScriptRefresh() {
+      this.refreshDocument({ force: true, source: 'script' });
     }
   }
 });

package/frontend/src/document/execute-script/execute-script.css

@@ -0,0 +1,35 @@
+.execute-script-backdrop {
+  animation: execute-script-fade-in 200ms ease forwards;
+}
+
+.execute-script-panel {
+  animation: execute-script-slide-in 200ms ease forwards;
+}
+
+.execute-script-drawer.is-closing .execute-script-backdrop {
+  animation: execute-script-fade-out 200ms ease forwards;
+}
+
+.execute-script-drawer.is-closing .execute-script-panel {
+  animation: execute-script-slide-out 200ms ease forwards;
+}
+
+@keyframes execute-script-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes execute-script-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes execute-script-slide-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes execute-script-slide-out {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}

package/frontend/src/document/execute-script/execute-script.html

@@ -0,0 +1,67 @@
+<div v-if="isOpen" class="fixed inset-0 z-50 execute-script-drawer" :class="{ 'is-closing': isClosing }">
+  <div class="execute-script-backdrop absolute inset-0 bg-black/40" @click="close"></div>
+  <div class="execute-script-panel absolute right-0 top-0 h-full w-full max-w-xl bg-white shadow-xl flex flex-col">
+    <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200">
+      <div>
+        <h2 class="text-lg font-semibold text-gray-900">Run Script</h2>
+        <p class="text-xs text-gray-500">Use <code class="bg-gray-100 px-1 rounded">doc</code> for this document.</p>
+      </div>
+      <button
+        type="button"
+        @click="close"
+        class="text-gray-400 hover:text-gray-600 text-2xl leading-none"
+        aria-label="Close drawer"
+      >
+        &times;
+      </button>
+    </div>
+    <div class="flex-1 overflow-auto p-5 space-y-4">
+      <div class="space-y-2">
+        <label class="text-sm font-medium text-gray-700">Script</label>
+        <textarea
+          ref="scriptEditor"
+          :value="scriptText"
+          @input="updateScriptText"
+          rows="8"
+          placeholder="await doc.updateName('new name')&#10;return doc"
+          class="w-full rounded-md border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 font-mono text-sm"
+        ></textarea>
+        <p class="text-xs text-gray-500">Return a value to see it in the output panel.</p>
+      </div>
+      <div class="flex items-center gap-3">
+        <button
+          type="button"
+          @click="runDocumentScript"
+          :disabled="scriptRunning"
+          class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <span v-if="scriptRunning">Running...</span>
+          <span v-else>Run script</span>
+        </button>
+        <button
+          type="button"
+          @click="clearScript"
+          class="text-sm text-gray-500 hover:text-gray-700"
+        >
+          Clear
+        </button>
+      </div>
+      <div class="space-y-3">
+        <div v-if="scriptError" class="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+          {{scriptError}}
+        </div>
+        <div v-if="scriptHasRun" class="rounded-md border border-gray-200 bg-gray-50 p-3">
+          <div class="text-xs uppercase tracking-wide text-gray-500 mb-2">Output</div>
+          <pre class="whitespace-pre-wrap text-sm text-gray-800">{{formatScriptOutput(scriptResult)}}</pre>
+        </div>
+        <div v-if="scriptLogs" class="rounded-md border border-gray-200 bg-white p-3">
+          <div class="text-xs uppercase tracking-wide text-gray-500 mb-2">Logs</div>
+          <pre class="whitespace-pre-wrap text-xs text-gray-700">{{scriptLogs}}</pre>
+        </div>
+      </div>
+    </div>
+    <div class="border-t border-gray-200 px-5 py-3 text-xs text-gray-500">
+      Scripts run on the server with access to the Mongoose document instance.
+    </div>
+  </div>
+</div>