@mongoosejs/studio 0.2.10 → 0.2.11

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>

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

@@ -0,0 +1,142 @@
+'use strict';
+
+const api = require('../../api');
+const template = require('./execute-script.html');
+const appendCSS = require('../../appendCSS');
+
+appendCSS(require('./execute-script.css'));
+
+module.exports = app => app.component('execute-script', {
+  template,
+  props: ['model', 'documentId', 'editting', 'visible'],
+  data() {
+    return {
+      scriptText: '',
+      scriptResult: null,
+      scriptLogs: '',
+      scriptError: null,
+      scriptHasRun: false,
+      scriptRunning: false,
+      scriptEditor: null,
+      isOpen: false,
+      isClosing: false
+    };
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.isOpen = true;
+        this.isClosing = false;
+      } else if (this.isOpen) {
+        this.isClosing = true;
+        this.destroyScriptEditor();
+        setTimeout(() => {
+          this.isOpen = false;
+          this.isClosing = false;
+        }, 200);
+      }
+    },
+    isOpen(newVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.initializeScriptEditor();
+        });
+      }
+    }
+  },
+  mounted() {
+    if (this.visible) {
+      this.isOpen = true;
+    }
+  },
+  beforeDestroy() {
+    this.destroyScriptEditor();
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    initializeScriptEditor() {
+      if (!this.$refs.scriptEditor || this.scriptEditor || typeof CodeMirror === 'undefined') {
+        return;
+      }
+
+      this.$refs.scriptEditor.value = this.scriptText;
+      this.scriptEditor = CodeMirror.fromTextArea(this.$refs.scriptEditor, {
+        mode: 'javascript',
+        lineNumbers: true,
+        lineWrapping: true
+      });
+      this.scriptEditor.on('change', () => {
+        this.scriptText = this.scriptEditor.getValue();
+      });
+    },
+    destroyScriptEditor() {
+      if (this.scriptEditor) {
+        this.scriptEditor.toTextArea();
+        this.scriptEditor = null;
+      }
+    },
+    updateScriptText(event) {
+      this.scriptText = event.target.value;
+    },
+    clearScript() {
+      this.scriptText = '';
+      this.scriptResult = null;
+      this.scriptLogs = '';
+      this.scriptError = null;
+      this.scriptHasRun = false;
+      if (this.scriptEditor) {
+        this.scriptEditor.setValue('');
+      }
+    },
+    formatScriptOutput(value) {
+      if (value === undefined) {
+        return 'undefined';
+      }
+      if (value === null) {
+        return 'null';
+      }
+      if (typeof value === 'string') {
+        return value;
+      }
+      try {
+        return JSON.stringify(value, null, 2);
+      } catch (err) {
+        return String(value);
+      }
+    },
+    async runDocumentScript() {
+      const scriptToRun = (this.scriptEditor ? this.scriptEditor.getValue() : this.scriptText || '').trim();
+      if (!scriptToRun) {
+        this.$toast.error('Script cannot be empty.');
+        return;
+      }
+
+      this.scriptRunning = true;
+      this.scriptError = null;
+      this.scriptHasRun = false;
+      try {
+        const { result, logs } = await api.Model.executeDocumentScript({
+          model: this.model,
+          documentId: this.documentId,
+          script: scriptToRun
+        });
+        this.scriptText = scriptToRun;
+        if (this.scriptEditor) {
+          this.scriptEditor.setValue(scriptToRun);
+        }
+        this.scriptResult = result;
+        this.scriptLogs = logs;
+        this.scriptHasRun = true;
+        this.$emit('refresh');
+        this.$toast.success('Script executed successfully!');
+      } catch (err) {
+        this.scriptError = err?.message || String(err);
+        this.$toast.error('Script execution failed.');
+      } finally {
+        this.scriptRunning = false;
+      }
+    }
+  }
+});

package/frontend/src/index.js

@@ -11,7 +11,7 @@ const api = require('./api');
 const format = require('./format');
 const arrayUtils = require('./array-utils');
 const mothership = require('./mothership');
-const { routes } = require('./routes');
+const { routes, hasAccess } = require('./routes');
 const Toast = require('vue-toastification').default;
 const { useToast } = require('vue-toastification');
 const appendCSS = require('./appendCSS');
@@ -185,6 +185,41 @@ const router = VueRouter.createRouter({
   }))
 });
 
+// Add global navigation guard
+router.beforeEach((to, from, next) => {
+  // Skip auth check for authorized (public) routes
+  if (to.meta.authorized) {
+    next();
+    return;
+  }
+
+  // Get roles from the app state
+  const roles = window.state?.roles;
+
+  // Check if user has access to the route
+  if (!hasAccess(roles, to.name)) {
+    // Find all routes the user has access to
+    const allowedRoutes = routes.filter(route => hasAccess(roles, route.name));
+
+    // If user has no allowed routes, redirect to splash/login
+    if (allowedRoutes.length === 0) {
+      next({ name: 'root' });
+      return;
+    }
+
+    // Redirect to first allowed route
+    const firstAllowedRoute = allowedRoutes[0].name;
+    next({ name: firstAllowedRoute });
+    return;
+  }
+
+  if (to.name === 'root' && roles && roles[0] === 'dashboards') {
+    return next({ name: 'dashboards' });
+  }
+
+  next();
+});
+
 router.beforeEach((to, from, next) => {
   if (to.name === 'root' && window.state.roles && window.state.roles[0] === 'dashboards') {
     return next({ name: 'dashboards' });

package/frontend/src/navbar/navbar.html

@@ -32,7 +32,7 @@
         href="#/dashboards"
         class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
         :class="dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Dashboards</a>
-      <span v-else class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed">
+      <span v-else class="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 cursor-not-allowed">
         Dashboards
         <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
           <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
@@ -48,6 +48,12 @@
           <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
         </svg>
       </span>
+      <a
+      :href="hasTaskVisualizer"
+      class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
+      :class="taskView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">
+      Tasks
+      </a>
       <a
         href="https://studio.mongoosejs.io/docs"
         target="_blank"
@@ -75,7 +81,14 @@
           </button>
         </div>
 
-        <div v-if="showFlyout" class="absolute right-0 z-[100] top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
+        <div
+          v-if="showFlyout"
+          class="absolute right-0 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="user-menu-button"
+          style="z-index: 10000"
+          tabindex="-1">
           <router-link to="/team" v-if="hasAccess(roles, 'team')" @click="showFlyout = false" class="cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Team</router-link>
           <span v-else class="block px-4 py-2 text-sm text-gray-300 cursor-not-allowed" role="menuitem" tabindex="-1" id="user-menu-item-2">
             Team

package/frontend/src/navbar/navbar.js

@@ -41,6 +41,9 @@ module.exports = app => app.component('navbar', {
     chatView() {
       return ['chat index', 'chat'].includes(this.$route.name);
     },
+    taskView() {
+      return ['tasks'].includes(this.$route.name);
+    },
     routeName() {
       return this.$route.name;
     },
@@ -55,6 +58,14 @@ module.exports = app => app.component('navbar', {
     },
     defaultRoute() {
       return this.roles && this.roles[0] === 'dashboards' ? 'dashboards' : 'root';
+    },
+    hasTaskVisualizer() {
+      if (window.MONGOOSE_STUDIO_CONFIG.enableTaskVisualizer) {
+        return '#/tasks';
+      } else {
+        return 'https://www.npmjs.com/package/@mongoosejs/task';
+      }
+     
     }
   },
   methods: {

package/frontend/src/routes.js

@@ -9,7 +9,7 @@ const roleAccess = {
   dashboards: ['dashboards', 'dashboard']
 };
 
-const allowedRoutesForLocalDev = ['document', 'root', 'chat'];
+const allowedRoutesForLocalDev = ['document', 'root', 'chat', 'model'];
 
 // Helper function to check if a role has access to a route
 function hasAccess(roles, routeName) {
@@ -33,7 +33,7 @@ module.exports = {
       name: 'model',
       component: 'models',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
@@ -41,7 +41,7 @@ module.exports = {
       name: 'document',
       component: 'document',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
@@ -49,7 +49,7 @@ module.exports = {
       name: 'dashboards',
       component: 'dashboards',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
@@ -57,13 +57,21 @@ module.exports = {
       name: 'dashboard',
       component: 'dashboard',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
       path: '/team',
       name: 'team',
       component: 'team',
+      meta: {
+        authorized: false
+      }
+    },
+    {
+      path: '/tasks',
+      name: 'tasks',
+      component: 'tasks',
       meta: {
         authorized: true
       }