@mongoosejs/studio 0.0.47 → 0.0.49

package/backend/actions/index.js

@@ -2,4 +2,5 @@
 
 exports.Dashboard = require('./Dashboard');
 exports.Model = require('./Model');
-exports.Script = require('./Script');
+exports.Script = require('./Script');
+exports.status = require('./status');

package/backend/actions/status.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const nodeEnv = process.env.NODE_ENV;
+
+module.exports = () => async function status() {
+  return { nodeEnv };
+};

package/express.js

@@ -3,7 +3,7 @@
 const Backend = require('./backend');
 const express = require('express');
 const frontend = require('./frontend');
-const { toRoute } = require('extrovert');
+const { toRoute, objectRouter } = require('extrovert');
 
 module.exports = function(apiUrl, conn, options) {
   const router = express.Router();
@@ -11,26 +11,11 @@ module.exports = function(apiUrl, conn, options) {
   apiUrl = apiUrl || '/admin/api';
   const backend = Backend(conn);
 
-  const apiRouter = express.Router();
-  apiRouter.use(express.json());
-  for (const [name, actions] of Object.entries(backend)) {
-    const subrouter = express.Router();
-    for (const [actionName, action] of Object.entries(actions)) {
-      subrouter.options(`/${actionName}`, (req, res) => res.send(''));
-      subrouter.get(`/${actionName}`, toRoute(action));
-      subrouter.put(`/${actionName}`, toRoute(action));
-      subrouter.post(`/${actionName}`, toRoute(action));
-      subrouter.delete(`/${actionName}`, toRoute(action));
-    }
-
-    apiRouter.use(`/${name}`, subrouter);
-  }
-
-  router.use('/api', apiRouter);
+  router.use('/api', express.json(), objectRouter(backend, toRoute));
 
   frontend(apiUrl, false, options);
 
   router.use(express.static(`${__dirname}/frontend/public`));
 
   return router;
-}
+}

package/frontend/public/app.js

@@ -23,7 +23,7 @@ if (typeof config__setAuthorizationHeaderFrom === 'string' && config__setAuthori
     if (accessToken) {
       req.headers.authorization = accessToken;
     }
-  
+
     return req;
   });
 }
@@ -39,6 +39,9 @@ client.interceptors.response.use(
 );
 
 if (false) {} else {
+  exports.status = function status() {
+    return client.get('/status').then(res => res.data);
+  };
   exports.Dashboard = {
     createDashboard: function createDashboard(params) {
       return client.post('/Dashboard/createDashboard', params).then(res => res.data);
@@ -902,7 +905,7 @@ module.exports = app => app.component('document', {
     const { doc, schemaPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
     window.doc = doc;
     this.document = doc;
-    this.schemaPaths = await Object.keys(schemaPaths).sort((k1, k2) => {
+    this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
       if (k1 === '_id' && k2 !== '_id') {
         return -1;
       }
@@ -952,6 +955,7 @@ module.exports = app => app.component('document', {
   }
 });
 
+
 /***/ }),
 
 /***/ "./frontend/src/edit-array/edit-array.js":
@@ -979,7 +983,7 @@ appendCSS(__webpack_require__(/*! ./edit-array.css */ "./frontend/src/edit-array
 module.exports = app => app.component('edit-array', {
   template: template,
   props: ['value'],
-  data: () => ({ currentValue: null, status: 'init' }),
+  data: () => ({ currentValue: -1 }),
   mounted() {
     this.currentValue = this.value == null
       ? '' + this.value
@@ -996,10 +1000,9 @@ module.exports = app => app.component('edit-array', {
   watch: {
     currentValue(newValue, oldValue) {
       // Hacky way of skipping initial trigger because `immediate: false` doesn't work in Vue 3
-      if (this.status === 'init') {
+      if (oldValue === -1) {
         return;
       }
-      this.status = 'loaded';
       try {
         const array = eval(`(${this.currentValue})`);
         this.$emit('input', array);
@@ -1860,6 +1863,7 @@ module.exports = app => app.component('models', {
 "use strict";
 
 
+const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 const template = __webpack_require__(/*! ./navbar.html */ "./frontend/src/navbar/navbar.html");
 
 const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
@@ -1868,13 +1872,22 @@ appendCSS(__webpack_require__(/*! ./navbar.css */ "./frontend/src/navbar/navbar.
 
 module.exports = app => app.component('navbar', {
   template: template,
+  data: () => ({ nodeEnv: null }),
   computed: {
     routeName() {
       return this.$route.name;
+    },
+    warnEnv() {
+      return this.nodeEnv === 'prod' || this.nodeEnv === 'production';
     }
+  },
+  async mounted() {
+    const { nodeEnv } = await api.status();
+    this.nodeEnv = nodeEnv;
   }
 });
 
+
 /***/ }),
 
 /***/ "./frontend/src/routes.js":
@@ -3040,7 +3053,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\">\n    <router-link to=\"/\">\n      <img src=\"images/logo.svg\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\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=\"routeName === 'root' ? 'text-gray-900 border-teal-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=\"routeName === 'dashboards' ? 'text-gray-900 border-teal-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\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=\"/\">\n      <img src=\"images/logo.svg\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <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'\">\n      {{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=\"routeName === 'root' ? 'text-gray-900 border-teal-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=\"routeName === 'dashboards' ? 'text-gray-900 border-teal-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n    </div>\n  </div>\n  <div style=\"clear: both\"></div>\n</div>\n";
 
 /***/ }),
 

package/frontend/public/tw.css

@@ -810,6 +810,10 @@ video {
   gap: 0.5rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-y-5 {
   row-gap: 1.25rem;
 }
@@ -1015,6 +1019,16 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+}
+
 .p-1 {
   padding: 0.25rem;
 }

package/frontend/src/api.js

@@ -13,7 +13,7 @@ if (typeof config__setAuthorizationHeaderFrom === 'string' && config__setAuthori
     if (accessToken) {
       req.headers.authorization = accessToken;
     }
-  
+
     return req;
   });
 }
@@ -29,6 +29,9 @@ client.interceptors.response.use(
 );
 
 if (config__isLambda) {
+  exports.status = function status() {
+    return client.get('', { action: 'status' }).then(res => res.data);
+  };
   exports.Dashboard = {
     createDashboard(params) {
       return client.post('', { action: 'Dashboard.createDashboard', ...params }).then(res => res.data);
@@ -70,6 +73,9 @@ if (config__isLambda) {
     }
   };
 } else {
+  exports.status = function status() {
+    return client.get('/status').then(res => res.data);
+  };
   exports.Dashboard = {
     createDashboard: function createDashboard(params) {
       return client.post('/Dashboard/createDashboard', params).then(res => res.data);

package/frontend/src/document/document.js

@@ -28,7 +28,7 @@ module.exports = app => app.component('document', {
     const { doc, schemaPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
     window.doc = doc;
     this.document = doc;
-    this.schemaPaths = await Object.keys(schemaPaths).sort((k1, k2) => {
+    this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
       if (k1 === '_id' && k2 !== '_id') {
         return -1;
       }
@@ -76,4 +76,4 @@ module.exports = app => app.component('document', {
       }
     }
   }
-});
+});

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

@@ -16,7 +16,7 @@ appendCSS(require('./edit-array.css'));
 module.exports = app => app.component('edit-array', {
   template: template,
   props: ['value'],
-  data: () => ({ currentValue: null, status: 'init' }),
+  data: () => ({ currentValue: -1 }),
   mounted() {
     this.currentValue = this.value == null
       ? '' + this.value
@@ -33,10 +33,9 @@ module.exports = app => app.component('edit-array', {
   watch: {
     currentValue(newValue, oldValue) {
       // Hacky way of skipping initial trigger because `immediate: false` doesn't work in Vue 3
-      if (this.status === 'init') {
+      if (oldValue === -1) {
         return;
       }
-      this.status = 'loaded';
       try {
         const array = eval(`(${this.currentValue})`);
         this.$emit('input', array);

package/frontend/src/navbar/navbar.html

@@ -1,8 +1,11 @@
 <div class="navbar">
-  <div class="nav-left">
+  <div class="nav-left flex items-center gap-4 h-full">
     <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>
   </div>
   <div class="nav-right h-full">
     <div class="sm:ml-6 sm:flex sm:space-x-8 h-full">

package/frontend/src/navbar/navbar.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const api = require('../api');
 const template = require('./navbar.html');
 
 const appendCSS = require('../appendCSS');
@@ -8,9 +9,17 @@ appendCSS(require('./navbar.css'));
 
 module.exports = app => app.component('navbar', {
   template: template,
+  data: () => ({ nodeEnv: null }),
   computed: {
     routeName() {
       return this.$route.name;
+    },
+    warnEnv() {
+      return this.nodeEnv === 'prod' || this.nodeEnv === 'production';
     }
+  },
+  async mounted() {
+    const { nodeEnv } = await api.status();
+    this.nodeEnv = nodeEnv;
   }
-});
+});

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "dependencies": {
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",
     "ejson": "^2.2.3",
-    "extrovert": "0.0.24",
+    "extrovert": "0.0.25",
     "node-inspect-extracted": "3.x",
     "tailwindcss": "3.4.0",
     "vanillatoasts": "^1.6.0",