@mongoosejs/studio 0.1.20 → 0.2.0

package/frontend/src/index.js

@@ -85,42 +85,63 @@ app.component('app-component', {
       if (hashParams.has('code')) {
         const code = hashParams.get('code');
         const provider = hashParams.get('provider');
+
+        let user;
+        let accessToken;
+        let roles;
         try {
-          const { accessToken, user, roles } = provider === 'github' ? await mothership.github(code) : await mothership.google(code);
+          ({ accessToken, user, roles } = provider === 'github' ? await mothership.github(code) : await mothership.google(code));
           if (roles == null) {
             this.authError = 'You are not authorized to access this workspace';
             this.status = 'loaded';
             return;
           }
-          this.user = user;
-          this.roles = roles;
-          window.localStorage.setItem('_mongooseStudioAccessToken', accessToken._id);
         } catch (err) {
           this.authError = 'An error occurred while logging in. Please try again.';
           this.status = 'loaded';
           return;
-        } finally {
-          setTimeout(() => {
-            this.$router.replace(this.$router.currentRoute.value.path);
-          }, 0);
         }
 
-        const { nodeEnv } = await api.status();
-        this.nodeEnv = nodeEnv;
+        try {
+          const { nodeEnv } = await api.status();
+          this.nodeEnv = nodeEnv;
+        } catch (err) {
+          this.authError = 'Error connecting to Mongoose Studio API: ' + err.response?.data?.message ?? err.message;
+          this.status = 'loaded';
+          return;
+        }
+
+        this.user = user;
+        this.roles = roles;
+        window.localStorage.setItem('_mongooseStudioAccessToken', accessToken._id);
+        setTimeout(() => {
+          this.$router.replace(this.$router.currentRoute.value.path);
+        }, 0);
       } else {
         const token = window.localStorage.getItem('_mongooseStudioAccessToken');
         if (token) {
           const { user, roles } = await mothership.me();
+
+          try {
+            const { nodeEnv } = await api.status();
+            this.nodeEnv = nodeEnv;
+          } catch (err) {
+            this.authError = 'Error connecting to Mongoose Studio API: ' + (err.response?.data?.message ?? err.message);
+            this.status = 'loaded';
+            return;
+          }
+
           this.user = user;
           this.roles = roles;
-
-          const { nodeEnv } = await api.status();
-          this.nodeEnv = nodeEnv;
         }
       }
     } else {
-      const { nodeEnv } = await api.status();
-      this.nodeEnv = nodeEnv;
+      try {
+        const { nodeEnv } = await api.status();
+        this.nodeEnv = nodeEnv;
+      } catch (err) {
+        this.authError = 'Error connecting to Mongoose Studio API: ' + (err.response?.data?.message ?? err.message);
+      }
     }
 
     this.status = 'loaded';

package/frontend/src/json-node/json-node.html

@@ -0,0 +1,118 @@
+<div>
+  <div class="flex items-baseline whitespace-pre" :style="indentStyle">
+    <button
+      v-if="showToggle"
+      type="button"
+      class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-gray-500 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
+      @click.stop="handleToggle"
+    >
+      {{ isCollapsedNode ? '+' : '-' }}
+    </button>
+    <span v-else class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible flex-shrink-0"></span>
+    <template v-if="hasKey">
+      <span class="text-blue-600">"{{ nodeKey }}"</span><span>: </span>
+    </template>
+    <template v-if="isComplex">
+      <template v-if="hasChildren">
+        <span>{{ openingBracket }}</span>
+        <span v-if="isCollapsedNode" class="mx-1">…</span>
+        <span v-if="isCollapsedNode">{{ closingBracket }}{{ comma }}</span>
+      </template>
+      <template v-else>
+        <span>{{ openingBracket }}{{ closingBracket }}{{ comma }}</span>
+      </template>
+    </template>
+    <template v-else>
+      <!--
+        If value is a string and overflows its container (i.e. goes over one line), show an ellipsis.
+        This is done via CSS ellipsis strategy.
+      -->
+      <span
+        v-if="shouldShowReferenceLink"
+        class="inline-flex items-baseline group"
+      >
+        <span
+          :class="[...valueClasses, 'underline', 'decoration-dotted', 'underline-offset-2']"
+          :style="typeof value === 'string'
+            ? {
+                display: 'inline-block',
+                maxWidth: '100%',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                verticalAlign: 'bottom'
+              }
+            : {}"
+          :title="typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined"
+        >
+          {{ formattedValue }}
+        </span>
+        <span>
+          {{ comma }}
+        </span>
+        <a
+          href="#"
+          class="ml-1 text-sm text-sky-700 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
+          @click.stop.prevent="goToReference()"
+        >
+          View Document
+        </a>
+      </span>
+      <span
+        v-else
+        :class="valueClasses"
+        :style="typeof value === 'string'
+          ? {
+              display: 'inline-block',
+              maxWidth: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              verticalAlign: 'bottom'
+            }
+          : {}"
+        :title="typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined"
+      >
+        {{ formattedValue }}{{ comma }}
+      </span>
+    </template>
+  </div>
+  <template v-if="isComplex && hasChildren && !isCollapsedNode">
+    <json-node
+      v-for="child in children"
+      :key="child.path"
+      :node-key="child.displayKey"
+      :value="child.value"
+      :level="level + 1"
+      :is-last="child.isLast"
+      :path="child.path"
+      :toggle-collapse="toggleCollapse"
+      :is-collapsed="isCollapsed"
+      :create-child-path="createChildPath"
+      :indent-size="indentSize"
+      :max-top-level-fields="maxTopLevelFields"
+      :top-level-expanded="topLevelExpanded"
+      :expand-top-level="expandTopLevel"
+      :references="references"
+    ></json-node>
+    <div
+      v-if="hasHiddenRootChildren"
+      class="flex items-baseline whitespace-pre"
+      :style="indentStyle"
+    >
+      <span class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible"></span>
+      <button
+        type="button"
+        class="text-xs inline-flex items-center gap-1 ml-4 text-slate-500 hover:text-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400"
+        :title="hiddenChildrenTooltip"
+        @click.stop="handleExpandTopLevel"
+      >
+        <span aria-hidden="true">{{hiddenChildrenLabel}}…</span>
+      </button>
+    </div>
+    <div class="flex items-baseline whitespace-pre" :style="indentStyle">
+      <span class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible"></span>
+      <span>{{ closingBracket }}{{ comma }}</span>
+    </div>
+  </template>
+</div>

package/frontend/src/json-node/json-node.js

@@ -0,0 +1,272 @@
+'use strict';
+
+const template = require('./json-node.html');
+
+module.exports = app => app.component('json-node', {
+  name: 'JsonNode',
+  template: template,
+  props: {
+    nodeKey: {
+      type: [String, Number],
+      default: null
+    },
+    value: {
+      required: true
+    },
+    level: {
+      type: Number,
+      required: true
+    },
+    isLast: {
+      type: Boolean,
+      default: false
+    },
+    path: {
+      type: String,
+      required: true
+    },
+    toggleCollapse: {
+      type: Function,
+      required: true
+    },
+    isCollapsed: {
+      type: Function,
+      required: true
+    },
+    createChildPath: {
+      type: Function,
+      required: true
+    },
+    indentSize: {
+      type: Number,
+      required: true
+    },
+    maxTopLevelFields: {
+      type: Number,
+      default: null
+    },
+    topLevelExpanded: {
+      type: Boolean,
+      default: false
+    },
+    expandTopLevel: {
+      type: Function,
+      default: null
+    },
+    references: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    hasKey() {
+      return this.nodeKey !== null && this.nodeKey !== undefined;
+    },
+    isRoot() {
+      return this.path === 'root';
+    },
+    isArray() {
+      return Array.isArray(this.value);
+    },
+    isObject() {
+      if (this.value === null || this.isArray) {
+        return false;
+      }
+      return Object.prototype.toString.call(this.value) === '[object Object]';
+    },
+    isComplex() {
+      return this.isArray || this.isObject;
+    },
+    children() {
+      if (!this.isComplex) {
+        return [];
+      }
+      if (this.isArray) {
+        return this.value.map((childValue, index) => ({
+          displayKey: null,
+          value: childValue,
+          isLast: index === this.value.length - 1,
+          path: this.createChildPath(this.path, index, true)
+        }));
+      }
+      const keys = Object.keys(this.value);
+      const visibleKeys = this.visibleObjectKeys(keys);
+      const hasHidden = this.hasHiddenRootChildren;
+      return visibleKeys.map((key, index) => ({
+        displayKey: key,
+        value: this.value[key],
+        isLast: !hasHidden && index === visibleKeys.length - 1,
+        path: this.createChildPath(this.path, key, false)
+      }));
+    },
+    hasChildren() {
+      return this.children.length > 0;
+    },
+    totalObjectChildCount() {
+      if (!this.isObject) {
+        return 0;
+      }
+      return Object.keys(this.value).length;
+    },
+    hasHiddenRootChildren() {
+      if (!this.isRoot || !this.isObject) {
+        return false;
+      }
+      if (this.topLevelExpanded) {
+        return false;
+      }
+      if (typeof this.maxTopLevelFields !== 'number') {
+        return false;
+      }
+      return this.totalObjectChildCount > this.maxTopLevelFields;
+    },
+    hiddenRootChildrenCount() {
+      if (!this.hasHiddenRootChildren) {
+        return 0;
+      }
+      return this.totalObjectChildCount - this.maxTopLevelFields;
+    },
+    showToggle() {
+      return this.hasChildren && !this.isRoot;
+    },
+    openingBracket() {
+      return this.isArray ? '[' : '{';
+    },
+    closingBracket() {
+      return this.isArray ? ']' : '}';
+    },
+    isCollapsedNode() {
+      return this.isCollapsed(this.path);
+    },
+    formattedValue() {
+      if (typeof this.value === 'bigint') {
+        return `${this.value.toString()}n`;
+      }
+      const stringified = JSON.stringify(this.value);
+      if (stringified === undefined) {
+        if (typeof this.value === 'symbol') {
+          return this.value.toString();
+        }
+        return String(this.value);
+      }
+      return stringified;
+    },
+    valueClasses() {
+      const classes = ['text-slate-700'];
+      if (this.value === null) {
+        classes.push('text-gray-500', 'italic');
+        return classes;
+      }
+      const type = typeof this.value;
+      if (type === 'string') {
+        classes.push('text-emerald-600');
+        return classes;
+      }
+      if (type === 'number' || type === 'bigint') {
+        classes.push('text-amber-600');
+        return classes;
+      }
+      if (type === 'boolean') {
+        classes.push('text-violet-600');
+        return classes;
+      }
+      if (type === 'undefined') {
+        classes.push('text-gray-500');
+        return classes;
+      }
+      return classes;
+    },
+    comma() {
+      return this.isLast ? '' : ',';
+    },
+    indentStyle() {
+      return {
+        paddingLeft: `${this.level * this.indentSize}px`
+      };
+    },
+    hiddenChildrenLabel() {
+      if (!this.hasHiddenRootChildren) {
+        return '';
+      }
+      const count = this.hiddenRootChildrenCount;
+      const suffix = count === 1 ? 'field' : 'fields';
+      return `${count} more ${suffix}`;
+    },
+    hiddenChildrenTooltip() {
+      return this.hiddenChildrenLabel;
+    },
+    normalizedPath() {
+      if (typeof this.path !== 'string') {
+        return '';
+      }
+      return this.path
+        .replace(/^root\.?/, '')
+        .replace(/\[\d+\]/g, '')
+        .replace(/^\./, '');
+    },
+    referenceModel() {
+      if (!this.normalizedPath || !this.references) {
+        return null;
+      }
+      return this.references[this.normalizedPath] || null;
+    },
+    shouldShowReferenceLink() {
+      return this.referenceId != null;
+    },
+    referenceId() {
+      if (!this.referenceModel) {
+        return null;
+      }
+      if (this.value == null) {
+        return null;
+      }
+      const type = typeof this.value;
+      if (type === 'string' || type === 'number' || type === 'bigint') {
+        return String(this.value);
+      }
+      if (type === 'object') {
+        if (this.value._id != null) {
+          return String(this.value._id);
+        }
+        if (typeof this.value.toString === 'function') {
+          const stringified = this.value.toString();
+          if (typeof stringified === 'string' && stringified !== '[object Object]') {
+            return stringified;
+          }
+        }
+      }
+      return null;
+    }
+  },
+  methods: {
+    visibleObjectKeys(keys) {
+      if (!this.isRoot || this.topLevelExpanded) {
+        return keys;
+      }
+      if (typeof this.maxTopLevelFields !== 'number') {
+        return keys;
+      }
+      if (keys.length <= this.maxTopLevelFields) {
+        return keys;
+      }
+      return keys.slice(0, this.maxTopLevelFields);
+    },
+    handleToggle() {
+      if (!this.isRoot) {
+        this.toggleCollapse(this.path);
+      }
+    },
+    handleExpandTopLevel() {
+      if (this.isRoot && typeof this.expandTopLevel === 'function') {
+        this.expandTopLevel();
+      }
+    },
+    goToReference() {
+      const id = this.referenceId;
+      if (!this.referenceModel || id == null) {
+        return;
+      }
+      this.$router.push({ path: `/model/${this.referenceModel}/document/${id}` });
+    }
+  }
+});

package/frontend/src/list-array/list-array.html

@@ -1,3 +1,15 @@
-<div class="list-array">
-  <pre class="max-h-[6.5em] max-w-[30em]"><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
-</div>
+<div class="list-array tooltip">
+  <div>{{displayValue}}</div>
+  <div class="tooltiptext" style="display:flex; width: 100%; justify-content: space-around; align-items: center; min-width: 180px;">
+    <div class="tooltiptextchild" @click.stop="showViewDataModal = true">View data</div>
+    <div class="tooltiptextchild" @click.stop="copyText(value)">Copy &#x1F4CB;</div>
+  </div>
+  <modal ref="viewDataModal" v-if="showViewDataModal" containerClass="!h-[90vh] !w-[90vw]">
+    <template #body>
+      <div @click.stop class="w-full h-full cursor-auto">
+        <div class="modal-exit" @click="showViewDataModal = false">&times;</div>
+        <list-json :value="value" :expandedFields="Object.keys(value || []).map(key => `root[${key}]`)" />
+      </div>
+    </template>
+  </modal>
+</div>

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

@@ -5,12 +5,30 @@ const template = require('./list-array.html');
 module.exports = app => app.component('list-array', {
   template: template,
   props: ['value'],
+  data: () => ({ showViewDataModal: false }),
   computed: {
     displayValue() {
-      return this.value;
+      if (this.value == null) {
+        return this.value;
+      }
+      const value = JSON.stringify(this.value);
+      if (value.length > 50) {
+        return `${value.slice(0, 50)}…`;
+      }
+      return value;
     }
   },
-  mounted() {
-    Prism.highlightElement(this.$refs.code);
+  methods: {
+    copyText(value) {
+      const storage = document.createElement('textarea');
+      storage.value = JSON.stringify(value);
+      const elem = this.$el;
+      elem.appendChild(storage);
+      storage.select();
+      storage.setSelectionRange(0, 99999);
+      document.execCommand('copy');
+      elem.removeChild(storage);
+      this.$toast.success('Text copied!');
+    }
   }
 });

package/frontend/src/list-default/list-default.js

@@ -32,7 +32,7 @@ module.exports = app => app.component('list-default', {
       if (this.value === undefined) {
         return 'undefined';
       }
-      if (this.value.length > 30) {
+      if (this.value.length > 30 && typeof this.value === 'string') {
         return this.value.substring(0, 30) + '...';
       }
       return this.value;
@@ -41,4 +41,4 @@ module.exports = app => app.component('list-default', {
       return this.allude;
     }
   }
-});
+});

package/frontend/src/list-json/list-json.html

@@ -1,4 +1,4 @@
-<div class="tooltip w-full font-mono text-sm py-3 text-slate-800">
+<div class="tooltip w-full font-mono text-sm py-1 text-slate-800">
   <div class="w-full">
     <json-node
       :node-key="null"