@mongoosejs/studio 0.0.50 → 0.0.52

package/frontend/public/tw.css

@@ -578,18 +578,54 @@ video {
   }
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .fixed {
   position: fixed;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .relative {
   position: relative;
 }
 
+.-inset-1 {
+  inset: -0.25rem;
+}
+
+.-inset-1\.5 {
+  inset: -0.375rem;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.top-\[82\%\] {
+  top: 82%;
+}
+
 .isolate {
   isolation: isolate;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -702,6 +738,20 @@ video {
   display: flow-root;
 }
 
+.size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.size-8 {
+  width: 2rem;
+  height: 2rem;
+}
+
+.h-48 {
+  height: 12rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -730,6 +780,10 @@ video {
   max-height: 50vh;
 }
 
+.w-48 {
+  width: 12rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -766,6 +820,10 @@ video {
   flex-shrink: 1;
 }
 
+.shrink-0 {
+  flex-shrink: 0;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -774,6 +832,10 @@ video {
   flex-grow: 1;
 }
 
+.origin-top-right {
+  transform-origin: top right;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -880,6 +942,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -941,20 +1007,25 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-teal-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(0 208 201 / var(--tw-border-opacity));
-}
-
 .border-transparent {
   border-color: transparent;
 }
 
+.border-ultramarine-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(63 83 255 / var(--tw-border-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.bg-forest-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 202 44 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -965,11 +1036,21 @@ video {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
 .bg-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
@@ -990,11 +1071,6 @@ video {
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
-.bg-red-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
-}
-
 .bg-slate-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
@@ -1005,11 +1081,6 @@ video {
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
 }
 
-.bg-teal-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(197 255 250 / var(--tw-bg-opacity));
-}
-
 .bg-teal-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 168 165 / var(--tw-bg-opacity));
@@ -1019,6 +1090,21 @@ video {
   background-color: transparent;
 }
 
+.bg-ultramarine-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 234 255 / var(--tw-bg-opacity));
+}
+
+.bg-ultramarine-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(24 35 255 / var(--tw-bg-opacity));
+}
+
+.bg-valencia-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(202 56 56 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1041,6 +1127,10 @@ video {
   padding: 1rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1295,6 +1385,10 @@ video {
   --tw-ring-inset: inset;
 }
 
+.ring-black\/5 {
+  --tw-ring-color: rgb(0 0 0 / 0.05);
+}
+
 .ring-gray-300 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
@@ -1371,11 +1465,6 @@ video {
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-red-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-red-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -1386,14 +1475,29 @@ video {
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-teal-100:hover {
+.hover\:bg-teal-500:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(197 255 250 / var(--tw-bg-opacity));
+  background-color: rgb(0 208 201 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-teal-500:hover {
+.hover\:bg-ultramarine-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 208 201 / var(--tw-bg-opacity));
+  background-color: rgb(229 234 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-ultramarine-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(206 218 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-ultramarine-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(63 83 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-valencia-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 73 73 / var(--tw-bg-opacity));
 }
 
 .hover\:text-gray-700:hover {
@@ -1447,6 +1551,19 @@ video {
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-white:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus\:ring-offset-gray-800:focus {
+  --tw-ring-offset-color: #1f2937;
+}
+
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }
@@ -1479,6 +1596,10 @@ video {
   outline-color: #00a8a5;
 }
 
+.focus-visible\:outline-ultramarine-600:focus-visible {
+  outline-color: #1823ff;
+}
+
 @media (min-width: 640px) {
   .sm\:-mx-6 {
     margin-left: -1.5rem;

package/frontend/src/api.js

@@ -7,16 +7,14 @@ const client = axios.create({
 });
 
 window.apiClient = client;
-if (typeof config__setAuthorizationHeaderFrom === 'string' && config__setAuthorizationHeaderFrom) {
-  client.interceptors.request.use(req => {
-    const accessToken = window.localStorage.getItem(config__setAuthorizationHeaderFrom) || null;
-    if (accessToken) {
-      req.headers.authorization = accessToken;
-    }
+client.interceptors.request.use(req => {
+  const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+  if (accessToken) {
+    req.headers.authorization = accessToken;
+  }
 
-    return req;
-  });
-}
+  return req;
+});
 
 client.interceptors.response.use(
   res => res,

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

@@ -2,7 +2,7 @@
   <div class="mb-2">
     <textarea class="border border-gray-200 p-2 h-[300px] w-full" ref="codeEditor"></textarea>
   </div>
-  <button @click="createDocument()" class="rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Submit</button>
+  <button @click="createDocument()" 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">
@@ -22,4 +22,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

package/frontend/src/document/document.html

@@ -1,7 +1,9 @@
 <div class="document">
   <div class="document-menu">
     <div class="left">
-      <button @click="$router.push('/model/' + this.model)">
+      <button
+        @click="$router.push('/model/' + this.model)"
+        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">
         &lsaquo; Back
       </button>
     </div>
@@ -11,7 +13,7 @@
         v-if="!editting"
         @click="editting = true"
         type="button"
-        class="rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+        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
       </button>
       <button
@@ -25,13 +27,13 @@
         v-if="editting"
         @click="shouldShowConfirmModal=true;"
         type="button"
-        class="rounded-md bg-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">
+        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">
         <img src="images/save.svg" class="inline" /> Save
       </button>
       <button
         @click="shouldShowDeleteModal=true;"
         type="button"
-        class="rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
+        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>
     </div>

package/frontend/src/index.js

@@ -4,6 +4,7 @@ if (typeof process === 'undefined') {
   global.process = { env: {} }; // To make `util` package work
 }
 
+const mothership = require('./mothership');
 const vanillatoasts = require('vanillatoasts');
 
 const app = Vue.createApp({
@@ -43,13 +44,19 @@ require('./list-subdocument/list-subdocument')(app);
 require('./modal/modal')(app);
 require('./models/models')(app);
 require('./navbar/navbar')(app);
+require('./splash/splash')(app);
 
 app.component('app-component', {
   template: `
   <div>
-    <navbar />
-    <div class="view">
-      <router-view :key="$route.fullPath" />
+    <div v-if="hasAPIKey && user == null">
+      <splash />
+    </div>
+    <div v-else-if="!hasAPIKey || user">
+      <navbar :user="user" />
+      <div class="view">
+        <router-view :key="$route.fullPath" />
+      </div>
     </div>
   </div>
   `,
@@ -60,6 +67,29 @@ app.component('app-component', {
       timeout: 10000,
       positionClass: 'bottomRight'
     });
+  },
+  computed: {
+    hasAPIKey() {
+      return mothership.hasAPIKey;
+    }
+  },
+  async mounted() {
+    window.$router = this.$router;
+
+    if (mothership.hasAPIKey) {
+      const token = window.localStorage.getItem('_mongooseStudioAccessToken');
+      if (token) {
+        this.user = await mothership.me().then(res => res.user);
+      }
+    }
+  },
+  setup() {
+    const user = Vue.ref(null);
+
+    const state = Vue.reactive({ user });
+    Vue.provide('state', state);
+
+    return state;
   }
 });
 

package/frontend/src/modal/modal.css

@@ -33,7 +33,7 @@
 .modal-header {
   margin-top: 0;
   font-size: 18px;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .modal-header-success {
@@ -82,4 +82,13 @@
   right: 0.25em;
   top: 0.25em;
   cursor: pointer;
+  font-size: 1.25em;
+  height: 1.25em;
+  width: 1.25em;
+  border-radius: 100%;
+  border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 0.25em;
 }

package/frontend/src/models/models.css

@@ -12,7 +12,7 @@
 
 .models .model-selector {
   background-color: #eee;
-  flex-grow: 0; 
+  flex-grow: 0;
   padding: 15px;
   padding-top: 0px;
 }
@@ -49,12 +49,12 @@
 }
 
 .models .documents table th:after {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   width: 100%;
   bottom: -1px;
-  border-bottom: thin solid rgba(0,0,0,.12);
+  border-bottom: thin solid rgba(0, 0, 0, 0.12);
 }
 
 .models .documents table tr {
@@ -69,11 +69,12 @@
 }
 
 .models .documents table tr:hover {
-  background-color: #55A3D4;
+  background-color: #a7b9ff;
 }
 
-.models .documents table th, td {
-  border-bottom: thin solid rgba(0,0,0,.12);
+.models .documents table th,
+td {
+  border-bottom: thin solid rgba(0, 0, 0, 0.12);
   text-align: left;
   padding: 0 16px;
   height: 48px;
@@ -84,7 +85,7 @@
 }
 
 .models .path-type {
-  color: rgba(0,0,0,.36);
+  color: rgba(0, 0, 0, 0.36);
   font-size: 0.8em;
 }
 
@@ -125,4 +126,4 @@
   display: inline-flex;
   justify-content: space-around;
   align-items: center;
-}
+}

package/frontend/src/models/models.html

@@ -12,7 +12,7 @@
                 <router-link
                   :to="'/model/' + model"
                   class="block rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700"
-                  :class="model === currentModel ? 'bg-teal-100 font-bold' : 'hover:bg-teal-100'">
+                  :class="model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'">
                   {{model}}
                 </router-link>
               </li>
@@ -21,7 +21,7 @@
         </ul>
       </nav>
     </div>
-    
+
   </div>
   <div class="documents" ref="documentsList">
     <div>
@@ -37,19 +37,19 @@
           <button
             @click="shouldShowExportModal = true"
             type="button"
-            class="rounded bg-teal-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+            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="shouldShowCreateModal = true;"
             type="button"
-            class="rounded bg-teal-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+            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">
             Create
           </button>
           <button
             @click="shouldShowFieldModal = true"
             type="button"
-            class="rounded bg-teal-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+            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
           </button>
           <span class="isolate inline-flex rounded-md shadow-sm">
@@ -127,7 +127,7 @@
           <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>
       </template>
     </modal>
@@ -138,4 +138,4 @@
       </template>
     </modal>
   </div>
-</div>
+</div>

package/frontend/src/mothership.js

@@ -0,0 +1,31 @@
+'use strict';
+
+const axios = require('axios');
+const client = axios.create({
+  baseURL: config__mothershipUrl
+});
+
+client.hasAPIKey = !!config__mothershipUrl;
+
+client.interceptors.request.use(req => {
+  const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+  if (accessToken) {
+    req.headers.authorization = accessToken;
+  }
+
+  return req;
+});
+
+exports.githubLogin = function githubLogin() {
+  return client.post('/githubLogin', { state: window.location.href }).then(res => res.data);
+};
+
+exports.github = function github(code) {
+  return client.post('/github', { code, workspaceId: config__workspace._id }).then(res => res.data);
+};
+
+exports.me = function me() {
+  return client.post('/me', { workspaceId: config__workspace._id }).then(res => res.data);
+};
+
+exports.hasAPIKey = client.hasAPIKey;

package/frontend/src/navbar/navbar.html

@@ -12,11 +12,35 @@
       <a
         href="#/"
         class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
-        :class="routeName === 'root' ? 'text-gray-900 border-teal-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Documents</a>
+        :class="routeName === 'root' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Documents</a>
       <a
         href="#/dashboards"
         class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
-        :class="routeName === 'dashboards' ? 'text-gray-900 border-teal-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Dashboards</a>
+        :class="routeName === 'dashboards' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Dashboards</a>
+
+      <div class="h-full flex items-center" v-if="!user && hasAPIKey">
+        <button
+          type="button"
+          @click="loginWithGithub"
+          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">
+            Login
+        </button>
+      </div>
+      <div v-if="user && hasAPIKey" class="h-full flex items-center relative" v-clickOutside="hideFlyout">
+        <div>
+          <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">
+            <span class="absolute -inset-1.5"></span>
+            <span class="sr-only">Open user menu</span>
+            <img class="size-8 rounded-full" :src="user.picture" alt="">
+          </button>
+        </div>
+
+        <div v-if="showFlyout" class="absolute right-0 z-10 top-[82%] 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">
+          <!-- Active: "bg-gray-100 outline-none", Not Active: "" -->
+          <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>
+
     </div>
   </div>
   <div style="clear: both"></div>