@mongoosejs/studio 0.0.60 → 0.0.62

package/frontend/public/tw.css

@@ -594,10 +594,6 @@ video {
   pointer-events: none;
 }
 
-.fixed {
-  position: fixed;
-}
-
 .absolute {
   position: absolute;
 }
@@ -686,6 +682,14 @@ video {
   margin-bottom: 1rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -702,6 +706,10 @@ video {
   margin-right: 0.5rem;
 }
 
+.mt-0 {
+  margin-top: 0px;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -777,6 +785,14 @@ video {
   height: 2rem;
 }
 
+.h-16 {
+  height: 4rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
 .h-48 {
   height: 12rem;
 }
@@ -813,6 +829,14 @@ video {
   max-height: 50vh;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
 .w-48 {
   width: 12rem;
 }
@@ -833,10 +857,6 @@ video {
   width: 100%;
 }
 
-.w-72 {
-  width: 18rem;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
@@ -903,6 +923,10 @@ video {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -935,10 +959,18 @@ video {
   gap: 0.5rem;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -1016,10 +1048,6 @@ video {
   overflow-x: auto;
 }
 
-.overflow-y-auto {
-  overflow-y: auto;
-}
-
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1143,11 +1171,21 @@ video {
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
 .bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
+.bg-green-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
+}
+
 .bg-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
@@ -1173,6 +1211,11 @@ video {
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
+.bg-slate-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+}
+
 .bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -1197,6 +1240,11 @@ video {
   background-color: rgb(24 35 255 / var(--tw-bg-opacity));
 }
 
+.bg-valencia-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 73 73 / var(--tw-bg-opacity));
+}
+
 .bg-valencia-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(202 56 56 / var(--tw-bg-opacity));
@@ -1441,6 +1489,11 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -1456,6 +1509,11 @@ video {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
+.text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+
 .text-sky-800 {
   --tw-text-opacity: 1;
   color: rgb(7 89 133 / var(--tw-text-opacity));
@@ -1466,11 +1524,20 @@ video {
   color: rgb(0 168 165 / var(--tw-text-opacity));
 }
 
+.text-valencia-500 {
+  --tw-text-opacity: 1;
+  color: rgb(220 73 73 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.accent-sky-600 {
+  accent-color: #0284c7;
+}
+
 .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);
@@ -1535,6 +1602,10 @@ video {
   --tw-ring-color: rgb(17 24 39 / 0.05);
 }
 
+.ring-green-600\/20 {
+  --tw-ring-color: rgb(22 163 74 / 0.2);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1597,6 +1668,11 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -1612,6 +1688,11 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-slate-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-slate-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -1637,6 +1718,11 @@ video {
   background-color: rgb(63 83 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-valencia-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 126 126 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-valencia-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 73 73 / var(--tw-bg-opacity));
@@ -1681,25 +1767,21 @@ video {
   outline-color: #1823ff;
 }
 
-.focus\:outline-ultramarine-50:focus {
-  outline-color: #f1f5ff;
-}
-
 .focus\:ring-0:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-2:focus {
+.focus\:ring-1:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-1:focus {
+.focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
@@ -1728,29 +1810,34 @@ video {
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-white:focus {
+.focus\:ring-sky-600:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(2 132 199 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-ultramarine-50:focus {
+.focus\:ring-ultramarine-200:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(241 245 255 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(206 218 255 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-ultramarine-200:focus {
+.focus\:ring-ultramarine-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(206 218 255 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(63 83 255 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
+.focus\:ring-white:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-offset-0:focus {
   --tw-ring-offset-width: 0px;
 }
 
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
 .focus\:ring-offset-gray-800:focus {
   --tw-ring-offset-color: #1f2937;
 }
@@ -1775,10 +1862,18 @@ video {
   outline-color: #16a34a;
 }
 
+.focus-visible\:outline-orange-400:focus-visible {
+  outline-color: #fb923c;
+}
+
 .focus-visible\:outline-red-600:focus-visible {
   outline-color: #dc2626;
 }
 
+.focus-visible\:outline-slate-400:focus-visible {
+  outline-color: #94a3b8;
+}
+
 .focus-visible\:outline-slate-600:focus-visible {
   outline-color: #475569;
 }
@@ -1791,6 +1886,15 @@ video {
   outline-color: #1823ff;
 }
 
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
+.disabled\:bg-gray-500:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:-mx-6 {
     margin-left: -1.5rem;

package/frontend/src/dashboard/dashboard.html

@@ -15,7 +15,7 @@
         </button>
       </div>
     </div>
-    <div v-if="!showEditor" class="mt-4 mb-4">
+    <div  v-if="!showEditor" class="mt-4 mb-4">
       <dashboard-result :result="result"></dashboard-result>
     </div>
     <div v-if="showEditor">
@@ -39,7 +39,7 @@
         </div>
       </div>
     </div>
-    
+
   </div>
   <div v-if="!dashboard && status === 'loaded'">
     No dashboard with the given id could be found.

package/frontend/src/dashboard/dashboard.js

@@ -34,7 +34,8 @@ module.exports = app => app.component('dashboard', {
     }
   },
   mounted: async function() {
-    const { dashboard, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
+    this.showEditor = this.$route.query.edit;
+    const { dashboard, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: !this.showEditor });
     if (!dashboard) {
       return;
     }

package/frontend/src/dashboard/edit-dashboard/edit-dashboard.html

@@ -1,15 +1,20 @@
 <div class="p-4 bg-gray-100 rounded-lg shadow-lg">
-    <div>
-        <input v-model="title" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Title"/>
+    <div v-show="status === 'loading'" class="max-w-5xl mx-auto text-center">
+        <img src="images/loader.gif" class="inline mt-10">
     </div>
-    <div>
-        <textarea v-model="description" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="Description">{{description}}</textarea>
-    </div>
-    <div>
-        <textarea ref="codeEditor" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="6">{{code}}</textarea>
-    </div>
-    <div class="flex space-x-2">
-        <button @click="updateCode" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">Submit</button>
-        <button @click="closeEditor" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">Cancel</button>
+    <div v-show="status !== 'loading'">
+        <div>
+            <input v-model="title" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Title"/>
+        </div>
+        <div>
+            <textarea v-model="description" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="Description">{{description}}</textarea>
+        </div>
+        <div>
+            <textarea ref="codeEditor" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="6">{{code}}</textarea>
+        </div>
+        <div class="flex space-x-2">
+            <async-button @click="updateCode" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">Submit</async-button>
+            <button @click="closeEditor" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">Cancel</button>
+        </div>
     </div>
 </div>

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

@@ -8,7 +8,7 @@ module.exports = app => app.component('edit-dashboard', {
   props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
   data: function() {
     return {
-      status: 'loading',
+      status: 'loaded',
       editor: null,
       title: '',
       description: ''
@@ -19,7 +19,7 @@ module.exports = app => app.component('edit-dashboard', {
         this.$emit('close')
     },
     async updateCode() {
-      console.log('this.title', this.title, 'this.description', this.description)
+      this.status = 'loading';
       const { doc, result, error } = await api.Dashboard.updateDashboard({
         dashboardId: this.dashboardId,
         code: this.editor.getValue(),
@@ -28,6 +28,7 @@ module.exports = app => app.component('edit-dashboard', {
       });
       this.$emit('update', { doc, result, error });
       this.editor.setValue(doc.code);
+      this.status = 'loaded';
       this.closeEditor();
     }
   },
@@ -43,12 +44,7 @@ module.exports = app => app.component('edit-dashboard', {
       lineWrapping: true,
       showCursorWhenSelecting: true,
     });
-    // this.editor.setValue(this.code);
-    // this.editor.setSize(300, 300); // Ensure the editor has a fixed height
-    
-    // this.editor.setCursor(this.editor.lineCount() - 1, this.editor.getLine(this.editor.lineCount() - 1).length);
-   
-    this.editor.focus();
+    // this.editor.focus();
     // this.editor.refresh(); // if anything weird happens on load, this usually fixes it. However, this breaks it in this case.
     this.description = this.currentDescription;
     this.title = this.currentTitle;

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

@@ -15,7 +15,7 @@ module.exports = app => app.component('dashboard-document', {
       return null;
     },
     schemaPaths() {
-      return Object.keys(this.value.$document?.schemaPaths || {}).sort((k1, k2) => {
+      return Object.keys(this.value?.$document?.schemaPaths || {}).sort((k1, k2) => {
         if (k1 === '_id' && k2 !== '_id') {
           return -1;
         }
@@ -23,7 +23,7 @@ module.exports = app => app.component('dashboard-document', {
           return 1;
         }
         return 0;
-      }).map(key => this.value.$document.schemaPaths[key]);
+      }).map(key => this.value?.$document.schemaPaths[key]);
     }
   }
 });

package/frontend/src/index.js

@@ -4,6 +4,7 @@ if (typeof process === 'undefined') {
   global.process = { env: {} }; // To make `util` package work
 }
 
+const api = require('./api');
 const mothership = require('./mothership');
 const vanillatoasts = require('vanillatoasts');
 
@@ -51,8 +52,8 @@ require('./team/new-invitation/new-invitation')(app);
 app.component('app-component', {
   template: `
   <div>
-    <div v-if="hasAPIKey && user == null">
-      <splash />
+    <div v-if="hasAPIKey && (user == null || status === 'init')">
+      <splash :loading="status === 'init'" />
     </div>
     <div v-else-if="!hasAPIKey || user">
       <navbar :user="user" :roles="roles" />
@@ -79,19 +80,45 @@ app.component('app-component', {
     window.$router = this.$router;
 
     if (mothership.hasAPIKey) {
-      const token = window.localStorage.getItem('_mongooseStudioAccessToken');
-      if (token) {
-        const { user, roles } = await mothership.me();
+      const href = window.location.href;
+      if (href.match(/\?code=([a-zA-Z0-9]+)$/)) {
+        const code = href.match(/\?code=([a-zA-Z0-9]+)$/)[1];
+        const { accessToken, user, roles } = await mothership.github(code);
+        if (roles == null) {
+          this.authError = 'You are not authorized to access this workspace';
+          return;
+        }
         this.user = user;
         this.roles = roles;
+        window.localStorage.setItem('_mongooseStudioAccessToken', accessToken._id);
+
+        const { nodeEnv } = await api.status();
+        this.nodeEnv = nodeEnv;
+      } else {
+        const token = window.localStorage.getItem('_mongooseStudioAccessToken');
+        if (token) {
+          const { user, roles } = await mothership.me();
+          this.user = user;
+          this.roles = roles;
+
+          const { nodeEnv } = await api.status();
+          this.nodeEnv = nodeEnv;
+        }
       }
+    } else {
+      const { nodeEnv } = await api.status();
+      this.nodeEnv = nodeEnv;
     }
+    this.status = 'loaded';
   },
   setup() {
     const user = Vue.ref(null);
     const roles = Vue.ref(null);
+    const status = Vue.ref('init');
+    const nodeEnv = Vue.ref(null);
+    const authError = Vue.ref(null);
 
-    const state = Vue.reactive({ user, roles });
+    const state = Vue.reactive({ user, roles, status, nodeEnv, authError });
     Vue.provide('state', state);
 
     return state;

package/frontend/src/modal/modal.css

@@ -92,3 +92,7 @@
   justify-content: center;
   padding-bottom: 0.25em;
 }
+
+.modal-container .modal-exit:hover {
+  background-color: #f1f5ff;
+}

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 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 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" />
           </form>
           <div>
             <span v-if="status === 'loading'">Loading ...</span>
@@ -47,7 +47,7 @@
             Create
           </button>
           <button
-            @click="shouldShowFieldModal = true"
+            @click="openFieldSelection"
             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">
             Fields
@@ -121,15 +121,16 @@
   <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" style="margin-bottom: 0.5em">
-        <input type="checkbox" :id="'path.path'+index" @change="addOrRemove(path)" :value="path.path" :checked="isSelected(path.path)" />
-        <label :for="'path' + index">{{path.path}}</label>
+      <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>
+        </div>
       </div>
-      <div style="margin-top: 1em">
-        <button type="submit" @click="filterDocuments()" style="color: black;margin-right: 0.5em">Filter Selection</button>
-        <button type="submit" @click="deselectAll()" class="gray" style="margin-right: 0.5em">Deselect All</button>
-        <button type="submit" @click="resetDocuments()" class="gray">Cancel</button>
-
+      <div class="mt-4 flex gap-2">
+        <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>
+        <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>
+        <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>
       </div>
     </template>
   </modal>

package/frontend/src/models/models.js

@@ -211,8 +211,25 @@ module.exports = app => app.component('models', {
         }).map(key => this.selectedPaths[key]);
       }
     },
+    openFieldSelection() {
+      if (this.$route.query?.fields) {
+        this.selectedPaths.length = 0;
+        console.log('there are fields in play', this.$route.query.fields)
+        const fields = this.$route.query.fields.split(',');
+        for (let i = 0; i < fields.length; i++) {
+          this.selectedPaths.push({ path: fields[i] });
+        }
+      } else {
+        this.selectedPaths = [{ path: '_id' }];
+      }
+      this.shouldShowFieldModal = true;
+    },
     filterDocuments() {
-      this.filteredPaths = [...this.selectedPaths];
+      if (this.selectedPaths.length > 0) {
+        this.filteredPaths = [...this.selectedPaths];
+      } else {
+        this.filteredPaths.length = 0;
+      }
       this.shouldShowFieldModal = false;
       const selectedParams = this.filteredPaths.map(x => x.path).join(',');
       this.query.fields = selectedParams;

package/frontend/src/mothership.js

@@ -24,16 +24,24 @@ exports.getWorkspaceTeam = function getWorkspaceTeam() {
   return client.post('/getWorkspaceTeam', { workspaceId: config__workspace._id }).then(res => res.data);
 };
 
-exports.inviteToWorkspace = function inviteToWorkspace(params) {
-  return client.post('/inviteToWorkspace', { workspaceId: config__workspace._id, ...params }).then(res => res.data);
+exports.getWorkspaceCustomerPortalLink = function getWorkspaceCustomerPortalLink(params) {
+  return client.post('/getWorkspaceCustomerPortalLink', { workspaceId: config__workspace._id, ...params }).then(res => res.data);
 };
 
 exports.github = function github(code) {
   return client.post('/github', { code, workspaceId: config__workspace._id }).then(res => res.data);
 };
 
+exports.inviteToWorkspace = function inviteToWorkspace(params) {
+  return client.post('/inviteToWorkspace', { workspaceId: config__workspace._id, ...params }).then(res => res.data);
+};
+
 exports.me = function me() {
   return client.post('/me', { workspaceId: config__workspace._id }).then(res => res.data);
 };
 
+exports.removeFromWorkspace = function removeFromWorkspace(params) {
+  return client.post('/removeFromWorkspace', { workspaceId: config__workspace._id, ...params }).then(res => res.data);
+};
+
 exports.hasAPIKey = client.hasAPIKey;

package/frontend/src/navbar/navbar.html

@@ -3,8 +3,8 @@
     <router-link to="/">
       <img src="images/logo.svg" alt="Mongoose Studio Logo" />
     </router-link>
-    <div v-if="!!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'">
-      {{nodeEnv}}
+    <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'">
+      {{state.nodeEnv}}
     </div>
   </div>
   <div class="nav-right h-full">
@@ -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="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>
           <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>