@mongoosejs/studio 0.0.70 → 0.0.72

package/frontend/public/tw.css

@@ -909,6 +909,10 @@ video {
   transform-origin: top right;
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1195,6 +1199,11 @@ video {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
+.bg-pink-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 39 119 / var(--tw-bg-opacity));
+}
+
 .bg-red-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(252 165 165 / var(--tw-bg-opacity));
@@ -1409,6 +1418,10 @@ video {
   font-family: 'Lato';
 }
 
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1473,6 +1486,11 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-forest-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(0 242 58 / var(--tw-text-opacity));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1542,6 +1560,10 @@ video {
   accent-color: #0284c7;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1894,6 +1916,11 @@ video {
   cursor: not-allowed;
 }
 
+.disabled\:bg-gray-400:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
 .disabled\:bg-gray-500:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));

package/frontend/src/api.js

@@ -57,7 +57,31 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('', { action: 'Model.deleteDocument', ...params}).then(res => res.data);
     },
     exportQueryResults(params) {
-      return client.post('', { action: 'Model.exportQueryResults', ...params }).then(res => res.data);
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+
+      return fetch(window.MONGOOSE_STUDIO_CONFIG.baseURL + new URLSearchParams({ ...params, action: 'Model.exportQueryResults' }).toString(), {
+        method: 'GET',
+        headers: {
+          'Authorization': `${accessToken}`, // Set your authorization token here
+          'Accept': 'text/csv'
+        }
+      })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          return response.blob();
+        })
+        .then(blob => {
+          const blobURL = window.URL.createObjectURL(blob);
+          const anchor = document.createElement('a');
+          anchor.href = blobURL;
+          anchor.download = 'export.csv';
+          document.body.appendChild(anchor);
+          anchor.click();
+          document.body.removeChild(anchor);
+          window.URL.revokeObjectURL(blobURL);
+        });
     },
     getDocument: function getDocument(params) {
       return client.post('', { action: 'Model.getDocument', ...params }).then(res => res.data);
@@ -104,12 +128,31 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('/Model/deleteDocument', params).then(res => res.data);
     },
     exportQueryResults(params) {
-      const anchor = document.createElement('a');
-      anchor.href = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/exportQueryResults?' + (new URLSearchParams(params)).toString();
-      anchor.target = '_blank';
-      anchor.download = 'export.csv';
-      anchor.click();
-      return;
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+
+      return fetch(window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/exportQueryResults?' + new URLSearchParams(params).toString(), {
+        method: 'GET',
+        headers: {
+          'Authorization': `${accessToken}`, // Set your authorization token here
+          'Accept': 'text/csv'
+        }
+      })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          return response.blob();
+        })
+        .then(blob => {
+          const blobURL = window.URL.createObjectURL(blob);
+          const anchor = document.createElement('a');
+          anchor.href = blobURL;
+          anchor.download = 'export.csv';
+          document.body.appendChild(anchor);
+          anchor.click();
+          document.body.removeChild(anchor);
+          window.URL.revokeObjectURL(blobURL);
+        });
     },
     getDocument: function getDocument(params) {
       return client.post('/Model/getDocument', params).then(res => res.data);
@@ -117,6 +160,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getDocuments: function getDocuments(params) {
       return client.post('/Model/getDocuments', params).then(res => res.data);
     },
+    getIndexes: function getIndexes(params) {
+      return client.post('/Model/getIndexes', params).then(res => res.data);
+    },
     listModels: function listModels() {
       return client.post('/Model/listModels', {}).then(res => res.data);
     },

package/frontend/src/clone-document/clone-document.html

@@ -0,0 +1,26 @@
+<div>
+    <div class="mb-2">
+      <textarea class="border border-gray-200 p-2 h-[300px] w-full" ref="codeEditor"></textarea>
+    </div>
+    <button @click="cloneDocument()" 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">Submit</button>
+    <div v-if="errors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+          </svg>
+        </div>
+        <div class="ml-3">
+          <h3 class="text-sm font-medium text-red-800">There were {{errors.length}} errors with your submission</h3>
+          <div class="mt-2 text-sm text-red-700">
+            <ul role="list" class="list-disc space-y-1 pl-5">
+              <li v-for="error in errors">
+                {{error}}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  

package/frontend/src/clone-document/clone-document.js

@@ -0,0 +1,72 @@
+'use strict';
+
+const api = require('../api');
+
+const { BSON, EJSON } = require('bson');
+
+const ObjectId = new Proxy(BSON.ObjectId, {
+  apply (target, thisArg, argumentsList) {
+    return new target(...argumentsList);
+  }
+});
+
+const appendCSS = require('../appendCSS');
+
+appendCSS(require('./clone-document.css'));
+
+const template = require('./clone-document.html')
+
+module.exports = app => app.component('clone-document', {
+  props: ['currentModel', 'doc', 'schemaPaths'],
+  template,
+  data: function() {
+    return {
+      documentData: '',
+      editor: null,
+      errors: []
+    }
+  },
+  methods: {
+    async cloneDocument() {
+      const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
+      const { doc } = await api.Model.createDocument({ model: this.currentModel, data }).catch(err => {
+        if (err.response?.data?.message) {
+          console.log(err.response.data);
+          const message = err.response.data.message.split(": ").slice(1).join(": ");
+          this.errors = message.split(',').map(error => {
+            return error.split(': ').slice(1).join(': ').trim();
+          })
+          throw new Error(err.response?.data?.message);
+        }
+        throw err;
+      });
+      this.errors.length = 0;
+      this.$emit('close', doc);
+    },
+  },
+  mounted: function() {
+    const pathsToClone = this.schemaPaths.map(x => x.path);
+    
+    // Create a filtered version of the document data
+    const filteredDoc = {};
+    pathsToClone.forEach(path => {
+      const value = this.doc[path];
+      if (value !== undefined) {
+        filteredDoc[path] = value;
+      }
+    });
+
+    // Replace _id with a new ObjectId
+    if (pathsToClone.includes('_id')) {
+      filteredDoc._id = new ObjectId();
+    }
+
+    this.documentData = JSON.stringify(filteredDoc, null, 2);
+    this.$refs.codeEditor.value = this.documentData;
+    this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
+      mode: 'javascript',
+      lineNumbers: true,
+      smartIndent: false
+    });
+  },
+})

package/frontend/src/document/document.html

@@ -12,6 +12,8 @@
       <button
         v-if="!editting"
         @click="editting = true"
+        :disabled="!canManipulate"
+        :class="{'cursor-not-allowed opacity-50': !canManipulate}"
         type="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">
         <img src="images/edit.svg" class="inline" /> Edit
@@ -25,6 +27,8 @@
       </button>
       <button
         v-if="editting"
+        :disabled="!canManipulate"
+        :class="{'cursor-not-allowed opacity-50': !canManipulate}"
         @click="shouldShowConfirmModal=true;"
         type="button"
         class="rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600">
@@ -32,10 +36,20 @@
       </button>
       <button
         @click="shouldShowDeleteModal=true;"
+        :disabled="!canManipulate"
+        :class="{'cursor-not-allowed opacity-50': !canManipulate}"
         type="button"
         class="rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
         <img src="images/delete.svg" class="inline" /> Delete
       </button>
+      <button
+        @click="shouldShowCloneModal=true;"
+        :disabled="!canManipulate"
+        :class="{'cursor-not-allowed opacity-50': !canManipulate}"
+        type="button"
+        class="rounded-md bg-pink-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
+        <img src="images/duplicate.svg" class="inline" /> Clone
+      </button>
     </div>
   </div>
   <div v-if="status === 'loaded'">
@@ -57,5 +71,11 @@
         <confirm-delete @close="shouldShowConfirmModal = false;" @remove="remove" :value="document"></confirm-delete>
       </template>
     </modal>
+    <modal v-if="shouldShowCloneModal">
+      <template v-slot:body>
+        <div class="modal-exit" @click="shouldShowCloneModal = false;">&times;</div>
+          <clone-document :currentModel="model" :doc="document" :schemaPaths="schemaPaths" @close="showClonedDocument"></clone-document>
+      </template>
+    </modal>
   </div>
 </div>

package/frontend/src/document/document.js

@@ -11,7 +11,7 @@ appendCSS(require('./document.css'));
 
 module.exports = app => app.component('document', {
   template: template,
-  props: ['model', 'documentId'],
+  props: ['model', 'documentId', 'user', 'roles'],
   data: () => ({
     schemaPaths: [],
     status: 'init',
@@ -21,7 +21,8 @@ module.exports = app => app.component('document', {
     editting: false,
     virtuals: [],
     shouldShowConfirmModal: false,
-    shouldShowDeleteModal: false
+    shouldShowDeleteModal: false,
+    shouldShowCloneModal: false
   }),
   async mounted() {
     window.pageState = this;
@@ -39,6 +40,14 @@ module.exports = app => app.component('document', {
     }).map(key => schemaPaths[key]);
     this.status = 'loaded';
   },
+  computed: {
+    canManipulate() {
+      if (!this.roles) {
+        return false;
+      }
+      return !this.roles.includes('readonly');
+    }
+  },
   methods: {
     cancelEdit() {
       this.changes = {};
@@ -74,6 +83,9 @@ module.exports = app => app.component('document', {
         });
         this.$router.push({ path: `/model/${this.model}`});
       }
+    },
+    showClonedDocument(doc) {
+      this.$router.push({ path: `/model/${this.model}/document/${doc._id}`});
     }
   }
 });

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

@@ -3,9 +3,11 @@
   <div>
     Choose fields to export
   </div>
-  <div v-for="schemaPath in schemaPaths">
-    <input type="checkbox" v-model="shouldExport[schemaPath.path]">
-    <span>{{schemaPath.path}}</span>
+  <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">
+      <label :for="'schemaPath.path'+index">{{schemaPath.path}}</label>
+    </div>
   </div>
-  <async-button @click="exportQueryResults">Export</async-button>
+  <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>
 </div>

package/frontend/src/index.js

@@ -13,6 +13,7 @@ const app = Vue.createApp({
 });
 
 require('./async-button/async-button')(app);
+require('./clone-document/clone-document')(app);
 require('./create-dashboard/create-dashboard')(app);
 require('./create-document/create-document')(app);
 require('./dashboards/dashboards')(app);
@@ -58,7 +59,7 @@ app.component('app-component', {
     <div v-else-if="!hasAPIKey || user">
       <navbar :user="user" :roles="roles" />
       <div class="view">
-        <router-view :key="$route.fullPath" />
+        <router-view :key="$route.fullPath" :user="user" :roles="roles" />
       </div>
     </div>
   </div>
@@ -78,6 +79,7 @@ app.component('app-component', {
   },
   async mounted() {
     window.$router = this.$router;
+    window.state = this;
 
     if (mothership.hasAPIKey) {
       const href = window.location.href;
@@ -135,7 +137,7 @@ app.component('app-component', {
   }
 });
 
-const routes = require('./routes');
+const { routes } = require('./routes');
 const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
   routes: routes.map(route => ({

package/frontend/src/models/models.html

@@ -28,7 +28,7 @@
       <div class="documents-menu">
         <div class="flex flex-row items-center w-full gap-2">
           <form @submit.prevent="search" class="flex-grow m-0">
-            <input class="w-full 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" type="text" placeholder="Filter or text" v-model="searchText" />
+            <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" type="text" placeholder="Filter or text" v-model="searchText" />
           </form>
           <div>
             <span v-if="status === 'loading'">Loading ...</span>
@@ -40,6 +40,12 @@
             class="rounded bg-ultramarine-600 px-2 py-2 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-ultramarine-600">
             Export
           </button>
+          <button
+            @click="openIndexModal"
+            type="button"
+            class="rounded bg-ultramarine-600 px-2 py-2 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-ultramarine-600">
+            Indexes
+          </button>
           <button
             @click="shouldShowCreateModal = true;"
             type="button"
@@ -74,7 +80,7 @@
     <div class="documents-container relative">
       <table v-if="outputType === 'table'">
         <thead>
-          <th v-for="path in filteredPaths">
+          <th v-for="path in filteredPaths" @click="clickFilter(path.path)" class="cursor-pointer">
             {{path.path}}
             <span class="path-type">
               ({{(path.instance || 'unknown')}})
@@ -106,7 +112,6 @@
       </div>
     </div>
   </div>
-
   <modal v-if="shouldShowExportModal">
     <template v-slot:body>
       <div class="modal-exit" @click="shouldShowExportModal = false">&times;</div>
@@ -118,13 +123,30 @@
       </export-query-results>
     </template>
   </modal>
+  <modal v-if="shouldShowIndexModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="shouldShowIndexModal = false">&times;</div>
+      <div class="text-xl font-bold mb-2">Indexes</div>
+      <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="text-sm font-mono">{{ JSON.stringify(index.key) }}</div>
+          </div>
+          <div>
+            <button type="submit" @click="dropIndex()" disabled="true" class="rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed">Drop</button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </modal>
   <modal v-if="shouldShowFieldModal">
     <template v-slot:body>
       <div class="modal-exit" @click="shouldShowFieldModal = false; selectedPaths = [...filteredPaths];">&times;</div>
       <div v-for="(path, index) in schemaPaths" :key="index" class="w-5 flex items-center">
         <input  class="mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600" type="checkbox" :id="'path.path'+index" @change="addOrRemove(path)" :value="path.path" :checked="isSelected(path.path)" />
         <div class="ml-2 text-gray-700 grow shrink text-left">
-          <label :for="'path' + index">{{path.path}}</label>
+          <label :for="'path.path' + index">{{path.path}}</label>
         </div>
       </div>
       <div class="mt-4 flex gap-2">

package/frontend/src/models/models.js

@@ -22,7 +22,7 @@ const limit = 20;
 
 module.exports = app => app.component('models', {
   template: template,
-  props: ['model'],
+  props: ['model', 'user', 'roles'],
   data: () => ({
     models: [],
     currentModel: null,
@@ -31,6 +31,8 @@ module.exports = app => app.component('models', {
     filteredPaths: [],
     selectedPaths: [],
     numDocuments: 0,
+    mongoDBIndexes: [],
+    schemaIndexes: [],
     status: 'loading',
     loadedAllDocs: false,
     edittingDoc: null,
@@ -40,6 +42,7 @@ module.exports = app => app.component('models', {
     shouldShowExportModal: false,
     shouldShowCreateModal: false,
     shouldShowFieldModal: false,
+    shouldShowIndexModal: false,
     shouldExport: {},
     sortBy: {},
     query: {},
@@ -86,6 +89,28 @@ module.exports = app => app.component('models', {
     this.status = 'loaded';
   },
   methods: {
+    clickFilter(path) {
+      if (this.searchText) {
+        if (this.searchText.endsWith('}')) {
+          this.searchText = this.searchText.slice(0, -1) + `, ${path}:  }`;
+        } else {
+          this.searchText += `, ${path}:  }`;
+        }
+
+      } else {
+        // If this.searchText is empty or undefined, initialize it with a new object
+        this.searchText = `{ ${path}:  }`;
+      }
+
+
+      this.$nextTick(() => {
+        const input = this.$refs.searchInput;
+        const cursorIndex = this.searchText.lastIndexOf(":") + 2; // Move cursor after ": "
+
+        input.focus();
+        input.setSelectionRange(cursorIndex, cursorIndex);
+      });
+    },
     async closeCreationModal() {
       this.shouldShowCreateModal = false;
       await this.getDocuments();
@@ -152,6 +177,21 @@ module.exports = app => app.component('models', {
       }
       await this.loadMoreDocuments();
     },
+    async openIndexModal() {
+      this.shouldShowIndexModal = true;
+      const { mongoDBIndexes, schemaIndexes } = await api.Model.getIndexes({ model: this.currentModel })
+      this.mongoDBIndexes = mongoDBIndexes;
+      this.schemaIndexes = schemaIndexes;
+    },
+    checkIndexLocation(indexName) {
+      if (this.schemaIndexes.find(x => x.name == indexName) && this.mongoDBIndexes.find(x => x.name == indexName)) {
+        return 'text-gray-500'
+      } else if (this.schemaIndexes.find(x => x.name == indexName)) {
+        return 'text-forest-green-500'
+      } else {
+        return 'text-valencia-500'
+      }
+    },
     async getDocuments() {
       const { docs, schemaPaths, numDocs } = await api.Model.getDocuments({
         model: this.currentModel,
@@ -178,7 +218,6 @@ module.exports = app => app.component('models', {
       for (const { path } of this.schemaPaths) {
         this.shouldExport[path] = true;
       }
-
       this.filteredPaths = [...this.schemaPaths];
       this.selectedPaths = [...this.schemaPaths];
     },

package/frontend/src/navbar/navbar.html

@@ -1,6 +1,6 @@
 <div class="navbar">
   <div class="nav-left flex items-center gap-4 h-full">
-    <router-link to="/">
+    <router-link :to="{ name: defaultRoute }">
       <img src="images/logo.svg" alt="Mongoose Studio Logo" />
     </router-link>
     <div v-if="!!state.nodeEnv" class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900" :class="warnEnv ? 'bg-red-300' : 'bg-yellow-300'">
@@ -9,11 +9,11 @@
   </div>
   <div class="nav-right h-full">
     <div class="sm:ml-6 sm:flex sm:space-x-8 h-full">
-      <a
+      <a v-if="hasAccess(roles, 'root')"
         href="#/"
         class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
         :class="documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Documents</a>
-      <a
+      <a v-if="hasAccess(roles, 'dashboards')"
         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>
@@ -36,7 +36,7 @@
         </div>
 
         <div v-if="showFlyout" class="absolute right-0 z-10 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">
-          <router-link to="/team" v-if="canViewTeam" @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>
+          <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 @click="logout" 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">Sign out</span>
         </div>
       </div>

package/frontend/src/navbar/navbar.js

@@ -3,7 +3,7 @@
 const api = require('../api');
 const mothership = require('../mothership');
 const template = require('./navbar.html');
-const routes = require('../routes');
+const  { routes, hasAccess } = require('../routes');
 
 const appendCSS = require('../appendCSS');
 
@@ -14,6 +14,15 @@ module.exports = app => app.component('navbar', {
   props: ['user', 'roles'],
   inject: ['state'],
   data: () => ({ showFlyout: false }),
+  mounted: function() {
+    // Redirect to first allowed route if current route is not allowed
+    if (!this.hasAccess(this.roles, this.$route.name)) {
+      const firstAllowedRoute = this.allowedRoutes[0];
+      if (firstAllowedRoute) {
+        this.$router.push({ name: firstAllowedRoute.name });
+      }
+    }
+  },
   computed: {
     dashboardView() {
       return routes.filter(x => x.name.startsWith('dashboard')).map(x => x.name).includes(this.$route.name)
@@ -31,10 +40,19 @@ module.exports = app => app.component('navbar', {
       return mothership.hasAPIKey;
     },
     canViewTeam() {
-      return this.roles?.includes('owner') || this.roles?.includes('admin');
+      return this.hasAccess(this.roles, 'team');
+    },
+    allowedRoutes() {
+      return routes.filter(route => this.hasAccess(this.roles, route.name));
+    },
+    defaultRoute() {
+      return this.allowedRoutes[0]?.name || 'dashboards';
     }
   },
   methods: {
+    hasAccess(roles, routeName) {
+      return hasAccess(roles, routeName);
+    },
     async loginWithGithub() {
       const { url } = await mothership.githubLogin();
       window.location.href = url;