@mongoosejs/studio 0.0.70 → 0.0.71

package/backend/actions/Model/createDocument.js

@@ -11,11 +11,18 @@ const CreateDocumentParams = new Archetype({
   data: {
     $type: Archetype.Any,
     $required: true
+  },
+  roles: {
+    $type: ['string'],
   }
 }).compile('CreateDocumentParams');
 
 module.exports = ({ db }) => async function CreateDocument(params) {
-  const { model, data } = new CreateDocumentParams(params);
+  const { model, data, roles } = new CreateDocumentParams(params);
+
+  if (roles && roles.includes('readonly')) {
+    throw new Error('Not authorized');
+  }
 
   const Model = db.models[model];
   if (Model == null) {

package/backend/actions/Model/deleteDocument.js

@@ -10,13 +10,20 @@ const DeleteDocumentParams = new Archetype({
   documentId: {
     $type: 'string',
     $required: true
+  },
+  roles: {
+    $type: ['string'],
   }
 }).compile('DeleteDocumentParams');
 
 module.exports = ({ db }) => async function DeleteDocument(params) {
-  const { model, documentId } = new DeleteDocumentParams(params);
+  const { model, documentId, roles } = new DeleteDocumentParams(params);
 
   const Model = db.models[model];
+
+  if (roles && roles.includes('readonly')) {
+    throw new Error('Not authorized');
+  }
   if (Model == null) {
     throw new Error(`Model ${model} not found`);
   }

package/backend/actions/Model/exportQueryResults.js

@@ -24,7 +24,7 @@ const GetDocumentsParams = new Archetype({
   }
 }).compile('GetDocumentsParams');
 
-module.exports = ({ db }) => async function getDocuments(params, req, res) {
+module.exports = ({ db }) => async function exportQueryResults(params, req, res) {
   params = new GetDocumentsParams(params);
   let { filter } = params;
   const { model, propertiesToInclude } = params;
@@ -57,10 +57,10 @@ module.exports = ({ db }) => async function getDocuments(params, req, res) {
     }));
   }
   const csv = stringify(rows);
-  
+
   res.set({
     'Content-Type': 'text/csv',
     'Content-Disposition': `attachment; filename="${model.toLowerCase()}-export.csv"`,
   });
   return csv;
-};
+};

package/backend/actions/Model/getIndexes.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const Archetype = require('archetype');
+
+const GetDocumentsParams = new Archetype({
+  model: {
+    $type: 'string',
+    $required: true
+  },
+}).compile('GetDocumentsParams');
+
+module.exports = ({ db }) => async function getIndexes(params) {
+  params = new GetDocumentsParams(params);
+
+  const { model } = params;
+
+  const Model = db.models[model];
+  if (Model == null) {
+    throw new Error(`Model ${model} not found`);
+  }
+
+  const mongoDBIndexes = await Model.listIndexes();
+  const schemaIndexes = Model.schema.indexes().map(([fields, options]) => ({
+    key: fields,
+    name: Object.keys(fields).map(key => `${key}_${fields[key]}`).join("_")
+  }));
+  const diffIndexes = await Model.diffIndexes();
+  return {
+    mongoDBIndexes,
+    schemaIndexes,
+    diffIndexes
+  };
+};

package/backend/actions/Model/index.js

@@ -5,5 +5,6 @@ exports.deleteDocument = require('./deleteDocument');
 exports.exportQueryResults = require('./exportQueryResults');
 exports.getDocument = require('./getDocument');
 exports.getDocuments = require('./getDocuments');
+exports.getIndexes = require('./getIndexes');
 exports.listModels = require('./listModels');
 exports.updateDocument = require('./updateDocument');

package/backend/actions/Model/updateDocument.js

@@ -14,12 +14,18 @@ const UpdateDocumentsParams = new Archetype({
   update: {
     $type: Object,
     $required: true
+  },
+  roles: {
+    $type: ['string'],
   }
 }).compile('UpdateDocumentsParams');
 
 module.exports = ({ db }) => async function updateDocument(params) {
-  const { model, _id, update } = new UpdateDocumentsParams(params);
+  const { model, _id, update, roles } = new UpdateDocumentsParams(params);
 
+  if (roles && roles.includes('readonly')) {
+    throw new Error('Not authorized');
+  }
   const Model = db.models[model];
   if (Model == null) {
     throw new Error(`Model ${model} not found`);

package/express.js

@@ -63,6 +63,7 @@ module.exports = async function(apiUrl, conn, options) {
           if (!user || !roles) {
             throw new Error('Not authorized');
           }
+          req.params.roles = roles;
 
           next();
         })

package/frontend/public/app.js

@@ -127,6 +127,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);
     },
@@ -930,7 +933,7 @@ appendCSS(__webpack_require__(/*! ./document.css */ "./frontend/src/document/doc
 
 module.exports = app => app.component('document', {
   template: template,
-  props: ['model', 'documentId'],
+  props: ['model', 'documentId', 'user', 'roles'],
   data: () => ({
     schemaPaths: [],
     status: 'init',
@@ -958,6 +961,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 = {};
@@ -1648,7 +1659,7 @@ const limit = 20;
 
 module.exports = app => app.component('models', {
   template: template,
-  props: ['model'],
+  props: ['model', 'user', 'roles'],
   data: () => ({
     models: [],
     currentModel: null,
@@ -1657,6 +1668,8 @@ module.exports = app => app.component('models', {
     filteredPaths: [],
     selectedPaths: [],
     numDocuments: 0,
+    mongoDBIndexes: [],
+    schemaIndexes: [],
     status: 'loading',
     loadedAllDocs: false,
     edittingDoc: null,
@@ -1666,6 +1679,7 @@ module.exports = app => app.component('models', {
     shouldShowExportModal: false,
     shouldShowCreateModal: false,
     shouldShowFieldModal: false,
+    shouldShowIndexModal: false,
     shouldExport: {},
     sortBy: {},
     query: {},
@@ -1712,6 +1726,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();
@@ -1778,6 +1814,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,
@@ -1804,7 +1855,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];
     },
@@ -1985,7 +2035,7 @@ exports.hasAPIKey = client.hasAPIKey;
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 const mothership = __webpack_require__(/*! ../mothership */ "./frontend/src/mothership.js");
 const template = __webpack_require__(/*! ./navbar.html */ "./frontend/src/navbar/navbar.html");
-const routes = __webpack_require__(/*! ../routes */ "./frontend/src/routes.js");
+const  { routes, hasAccess } = __webpack_require__(/*! ../routes */ "./frontend/src/routes.js");
 
 const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
 
@@ -1996,6 +2046,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)
@@ -2013,10 +2072,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;
@@ -2062,38 +2130,76 @@ module.exports = app => app.component('navbar', {
 "use strict";
 
 
-module.exports = [
-  {
-    path: '/',
-    name: 'root',
-    component: 'models'
-  },
-  {
-    path: '/model/:model',
-    name: 'model',
-    component: 'models'
-  },
-  {
-    path: '/model/:model/document/:documentId',
-    name: 'document',
-    component: 'document'
-  },
-  {
-    path: '/dashboards',
-    name: 'dashboards',
-    component: 'dashboards'
-  },
-  {
-    path: '/dashboard/:dashboardId',
-    name: 'dashboard',
-    component: 'dashboard'
-  },
-  {
-    path: '/team',
-    name: 'team',
-    component: 'team'
-  }
-];
+// Role-based access control configuration
+const roleAccess = {
+  owner: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team'],
+  admin: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team'],
+  member: ['root', 'model', 'document', 'dashboards', 'dashboard'],
+  readonly: ['root', 'model', 'document'],
+  dashboards: ['dashboards', 'dashboard']
+};
+
+// Helper function to check if a role has access to a route
+function hasAccess(roles, routeName) {
+  // change to true for local development
+  if (!roles) return false;
+  return roles.some(role => roleAccess[role]?.includes(routeName));
+}
+
+module.exports = {
+  routes: [
+    {
+      path: '/',
+      name: 'root',
+      component: 'models',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/model/:model',
+      name: 'model',
+      component: 'models',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/model/:model/document/:documentId',
+      name: 'document',
+      component: 'document',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/dashboards',
+      name: 'dashboards',
+      component: 'dashboards',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/dashboard/:dashboardId',
+      name: 'dashboard',
+      component: 'dashboard',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/team',
+      name: 'team',
+      component: 'team',
+      meta: {
+        authorized: true
+      }
+    }
+  ],
+  roleAccess,
+  hasAccess
+};
 
 
 /***/ }),
@@ -3058,7 +3164,7 @@ module.exports = ".document {\n  max-width: 1200px;\n  margin-left: auto;\n  mar
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button\n        @click=\"$router.push('/model/' + this.model)\"\n        class=\"rounded-md bg-gray-400 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        type=\"button\"\n        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\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        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\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"shouldShowDeleteModal=true;\"\n        type=\"button\"\n        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\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowDeleteModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-delete @close=\"shouldShowConfirmModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n      </template>\n    </modal>\n  </div>\n</div>\n";
+module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button\n        @click=\"$router.push('/model/' + this.model)\"\n        class=\"rounded-md bg-gray-400 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        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\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        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\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"shouldShowDeleteModal=true;\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        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\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowDeleteModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-delete @close=\"shouldShowConfirmModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n      </template>\n    </modal>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -3322,7 +3428,7 @@ module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-dir
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"models\">\n  <div>\n    <div class=\"flex grow flex-col gap-y-5 overflow-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)] w-48\">\n      <div class=\"flex font-bold font-xl mt-4 pl-2\">\n        Models\n      </div>\n      <nav class=\"flex flex-1 flex-col\">\n        <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n          <li>\n            <ul role=\"list\">\n              <li v-for=\"model in models\">\n                <router-link\n                  :to=\"'/model/' + model\"\n                  class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                  :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                  {{model}}\n                </router-link>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </nav>\n    </div>\n\n  </div>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"flex-grow m-0\">\n            <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\" />\n          </form>\n          <div>\n            <span v-if=\"status === 'loading'\">Loading ...</span>\n            <span v-if=\"status === 'loaded'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            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\">\n            Export\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            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\">\n            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            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\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"outputType = 'table'\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"outputType = 'json'\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :filter=\"filter\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <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)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"submit\" @click=\"filterDocuments()\" 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\">Filter Selection</button>\n        <button type=\"submit\" @click=\"deselectAll()\" 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\">Deselect All</button>\n        <button type=\"submit\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"models\">\n  <div>\n    <div class=\"flex grow flex-col gap-y-5 overflow-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)] w-48\">\n      <div class=\"flex font-bold font-xl mt-4 pl-2\">\n        Models\n      </div>\n      <nav class=\"flex flex-1 flex-col\">\n        <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n          <li>\n            <ul role=\"list\">\n              <li v-for=\"model in models\">\n                <router-link\n                  :to=\"'/model/' + model\"\n                  class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                  :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                  {{model}}\n                </router-link>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </nav>\n    </div>\n\n  </div>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"flex-grow m-0\">\n            <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\" />\n          </form>\n          <div>\n            <span v-if=\"status === 'loading'\">Loading ...</span>\n            <span v-if=\"status === 'loaded'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            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\">\n            Export\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            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\">\n            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            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\">\n            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            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\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"outputType = 'table'\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"outputType = 'json'\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :filter=\"filter\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <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>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <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)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"submit\" @click=\"filterDocuments()\" 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\">Filter Selection</button>\n        <button type=\"submit\" @click=\"deselectAll()\" 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\">Deselect All</button>\n        <button type=\"submit\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -3344,7 +3450,7 @@ module.exports = ".navbar {\n  width: 100%;\n  background-color: #eee;\n}\n\n.ac
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"navbar\">\n  <div class=\"nav-left flex items-center gap-4 h-full\">\n    <router-link to=\"/\">\n      <img src=\"images/logo.svg\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <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'\">\n      {{state.nodeEnv}}\n    </div>\n  </div>\n  <div class=\"nav-right h-full\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <a\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          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\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <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\">\n          <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>\n          <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>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div style=\"clear: both\"></div>\n</div>\n";
+module.exports = "<div class=\"navbar\">\n  <div class=\"nav-left flex items-center gap-4 h-full\">\n    <router-link :to=\"{ name: defaultRoute }\">\n      <img src=\"images/logo.svg\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <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'\">\n      {{state.nodeEnv}}\n    </div>\n  </div>\n  <div class=\"nav-right h-full\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          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\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <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\">\n          <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>\n          <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>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div style=\"clear: both\"></div>\n</div>\n";
 
 /***/ }),
 
@@ -11252,7 +11358,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>
@@ -11272,6 +11378,7 @@ app.component('app-component', {
   },
   async mounted() {
     window.$router = this.$router;
+    window.state = this;
 
     if (mothership.hasAPIKey) {
       const href = window.location.href;
@@ -11329,7 +11436,7 @@ app.component('app-component', {
   }
 });
 
-const routes = __webpack_require__(/*! ./routes */ "./frontend/src/routes.js");
+const { routes } = __webpack_require__(/*! ./routes */ "./frontend/src/routes.js");
 const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
   routes: routes.map(route => ({

package/frontend/public/tw.css

@@ -909,6 +909,10 @@ video {
   transform-origin: top right;
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1409,6 +1413,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 +1481,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 +1555,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 +1911,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/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,6 +36,8 @@
       </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

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',
@@ -39,6 +39,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 = {};

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

@@ -58,7 +58,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 +78,7 @@ app.component('app-component', {
   },
   async mounted() {
     window.$router = this.$router;
+    window.state = this;
 
     if (mothership.hasAPIKey) {
       const href = window.location.href;
@@ -135,7 +136,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;

package/frontend/src/routes.js

@@ -1,34 +1,72 @@
 'use strict';
 
-module.exports = [
-  {
-    path: '/',
-    name: 'root',
-    component: 'models'
-  },
-  {
-    path: '/model/:model',
-    name: 'model',
-    component: 'models'
-  },
-  {
-    path: '/model/:model/document/:documentId',
-    name: 'document',
-    component: 'document'
-  },
-  {
-    path: '/dashboards',
-    name: 'dashboards',
-    component: 'dashboards'
-  },
-  {
-    path: '/dashboard/:dashboardId',
-    name: 'dashboard',
-    component: 'dashboard'
-  },
-  {
-    path: '/team',
-    name: 'team',
-    component: 'team'
-  }
-];
+// Role-based access control configuration
+const roleAccess = {
+  owner: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team'],
+  admin: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team'],
+  member: ['root', 'model', 'document', 'dashboards', 'dashboard'],
+  readonly: ['root', 'model', 'document'],
+  dashboards: ['dashboards', 'dashboard']
+};
+
+// Helper function to check if a role has access to a route
+function hasAccess(roles, routeName) {
+  // change to true for local development
+  if (!roles) return false;
+  return roles.some(role => roleAccess[role]?.includes(routeName));
+}
+
+module.exports = {
+  routes: [
+    {
+      path: '/',
+      name: 'root',
+      component: 'models',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/model/:model',
+      name: 'model',
+      component: 'models',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/model/:model/document/:documentId',
+      name: 'document',
+      component: 'document',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/dashboards',
+      name: 'dashboards',
+      component: 'dashboards',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/dashboard/:dashboardId',
+      name: 'dashboard',
+      component: 'dashboard',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/team',
+      name: 'team',
+      component: 'team',
+      meta: {
+        authorized: true
+      }
+    }
+  ],
+  roleAccess,
+  hasAccess
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "dependencies": {
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",