@mongoosejs/studio 0.0.57 → 0.0.59

package/backend/netlify.js

@@ -37,7 +37,14 @@ module.exports = function netlify(options) {
           .then(res => res.json()));
       }
 
-      const { user, roles } = await fetch(`${mothershipUrl}/me?` + new URLSearchParams({ ...params, workspaceId: workspace._id }))
+      const { user, roles } = await fetch(`${mothershipUrl}/me?`, {
+        method: 'POST',
+        body: JSON.stringify({ workspaceId: workspace._id }),
+        headers: {
+          'Authorization': authorization,
+          'Content-Type': 'application/json'
+        }
+      })
         .then(response => {
           if (response.status < 200 || response.status >= 400) {
             return response.json().then(data => {

package/frontend/public/app.js

@@ -1864,10 +1864,10 @@ module.exports = app => app.component('models', {
 
 const axios = __webpack_require__(/*! axios */ "./node_modules/axios/dist/browser/axios.cjs");
 const client = axios.create({
-  baseURL: ''
+  baseURL: 'http://localhost:8888/.netlify/functions'
 });
 
-client.hasAPIKey = !!'';
+client.hasAPIKey = !!'http://localhost:8888/.netlify/functions';
 
 client.interceptors.request.use(req => {
   const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
@@ -1882,12 +1882,20 @@ exports.githubLogin = function githubLogin() {
   return client.post('/githubLogin', { state: window.location.href }).then(res => res.data);
 };
 
+exports.getWorkspaceTeam = function getWorkspaceTeam() {
+  return client.post('/getWorkspaceTeam', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-06T22:24:05.260Z","__v":0,"name":"Zevo DEV"}._id }).then(res => res.data);
+};
+
+exports.inviteToWorkspace = function inviteToWorkspace(params) {
+  return client.post('/inviteToWorkspace', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-06T22:24:05.260Z","__v":0,"name":"Zevo DEV"}._id, ...params }).then(res => res.data);
+};
+
 exports.github = function github(code) {
-  return client.post('/github', { code, workspaceId: {}._id }).then(res => res.data);
+  return client.post('/github', { code, workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-06T22:24:05.260Z","__v":0,"name":"Zevo DEV"}._id }).then(res => res.data);
 };
 
 exports.me = function me() {
-  return client.post('/me', { workspaceId: {}._id }).then(res => res.data);
+  return client.post('/me', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-06T22:24:05.260Z","__v":0,"name":"Zevo DEV"}._id }).then(res => res.data);
 };
 
 exports.hasAPIKey = client.hasAPIKey;
@@ -1914,7 +1922,7 @@ appendCSS(__webpack_require__(/*! ./navbar.css */ "./frontend/src/navbar/navbar.
 
 module.exports = app => app.component('navbar', {
   template: template,
-  props: ['user'],
+  props: ['user', 'roles'],
   data: () => ({ nodeEnv: null, showFlyout: false }),
   computed: {
     routeName() {
@@ -1925,6 +1933,9 @@ module.exports = app => app.component('navbar', {
     },
     hasAPIKey() {
       return mothership.hasAPIKey;
+    },
+    canViewTeam() {
+      return this.roles?.includes('owner') || this.roles?.includes('admin');
     }
   },
   async mounted() {
@@ -2002,9 +2013,15 @@ module.exports = [
     path: '/dashboard/:dashboardId',
     name: 'dashboard',
     component: 'dashboard'
+  },
+  {
+    path: '/team',
+    name: 'team',
+    component: 'team'
   }
 ];
 
+
 /***/ }),
 
 /***/ "./frontend/src/splash/splash.js":
@@ -2025,7 +2042,7 @@ module.exports = app => app.component('splash', {
   data: () => ({ error: null }),
   computed: {
     workspaceName() {
-      return {}.name;
+      return {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-06T22:24:05.260Z","__v":0,"name":"Zevo DEV"}.name;
     }
   },
   async mounted() {
@@ -2050,6 +2067,74 @@ module.exports = app => app.component('splash', {
 });
 
 
+/***/ }),
+
+/***/ "./frontend/src/team/new-invitation/new-invitation.js":
+/*!************************************************************!*\
+  !*** ./frontend/src/team/new-invitation/new-invitation.js ***!
+  \************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const mothership = __webpack_require__(/*! ../../mothership */ "./frontend/src/mothership.js");
+const template = __webpack_require__(/*! ./new-invitation.html */ "./frontend/src/team/new-invitation/new-invitation.html");
+
+module.exports = app => app.component('new-invitation', {
+  template,
+  emits: ['close', 'invitationCreated'],
+  data: () => ({
+    githubUsername: '',
+    email: '',
+    role: null
+  }),
+  methods: {
+    async inviteToWorkspace() {
+      const { invitation } = await mothership.inviteToWorkspace({ githubUsername: this.githubUsername, email: this.email, roles: [this.role] });
+      this.$emit('invitationCreated', { invitation });
+      this.$emit('close');
+    }
+  }
+});
+
+
+/***/ }),
+
+/***/ "./frontend/src/team/team.js":
+/*!***********************************!*\
+  !*** ./frontend/src/team/team.js ***!
+  \***********************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const mothership = __webpack_require__(/*! ../mothership */ "./frontend/src/mothership.js");
+const template = __webpack_require__(/*! ./team.html */ "./frontend/src/team/team.html");
+
+module.exports = app => app.component('team', {
+  template,
+  data: () => ({
+    workspace: null,
+    users: null,
+    invitations: null,
+    showNewInvitationModal: false
+  }),
+  async mounted() {
+    const { workspace, users, invitations } = await mothership.getWorkspaceTeam();
+    this.workspace = workspace;
+    this.users = users;
+    this.invitations = invitations;
+  },
+  methods: {
+    getRolesForUser(user) {
+      return this.workspace.members.find(member => member.userId === user._id)?.roles ?? [];
+    }
+  }
+});
+
+
 /***/ }),
 
 /***/ "./node_modules/mpath/index.js":
@@ -3176,7 +3261,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=\"!!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-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=\"routeName === 'dashboards' ? '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-[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\">\n          <!-- Active: \"bg-gray-100 outline-none\", Not Active: \"\" -->\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=\"/\">\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-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=\"routeName === 'dashboards' ? '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";
 
 /***/ }),
 
@@ -3191,6 +3276,28 @@ module.exports = "<div class=\"w-full h-full flex items-center justify-center\">
 
 /***/ }),
 
+/***/ "./frontend/src/team/new-invitation/new-invitation.html":
+/*!**************************************************************!*\
+  !*** ./frontend/src/team/new-invitation/new-invitation.html ***!
+  \**************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div class=\"p-1\">\n  <form class=\"space-y-4\">\n    <div class=\"text-lg font-bold\">\n      New Invitation\n    </div>\n\n    <div>\n      <label for=\"githubUsername\" class=\"block text-sm/6 font-medium text-gray-900\">GitHub Username</label>\n      <div class=\"mt-2\">\n        <input type=\"githubUsername\" name=\"githubUsername\" id=\"githubUsername\" v-model=\"githubUsername\" class=\"block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6\" placeholder=\"johnsmith12\">\n      </div>\n    </div>\n\n    <div>\n      <label for=\"email\" class=\"block text-sm/6 font-medium text-gray-900\">Email (Optional)</label>\n      <div class=\"mt-2\">\n        <input type=\"email\" name=\"email\" id=\"email\" v-model=\"email\" class=\"block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6\" placeholder=\"you@example.com\">\n      </div>\n    </div>\n\n    <div>\n      <label for=\"location\" class=\"block text-sm/6 font-medium text-gray-900\">Role</label>\n      <div class=\"mt-2 grid grid-cols-1\">\n        <select id=\"role\" name=\"role\" v-model=\"role\" class=\"col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6\">\n          <option value=\"admin\">Admin</option>\n          <option value=\"member\">Member</option>\n          <option value=\"readonly\">Read-only</option>\n        </select>\n        <svg class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n          <path fill-rule=\"evenodd\" d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" />\n        </svg>\n      </div>\n    </div>\n\n    <async-button\n      type=\"submit\"\n      @click=\"inviteToWorkspace\"\n      class=\"inline-flex justify-center rounded-md border border-transparent bg-forest-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-forest-green-500 focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2\">\n      Submit\n    </async-button>\n  </form>\n</div>\n";
+
+/***/ }),
+
+/***/ "./frontend/src/team/team.html":
+/*!*************************************!*\
+  !*** ./frontend/src/team/team.html ***!
+  \*************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div class=\"mx-auto max-w-5xl py-6 px-2\">\n  <div class=\"text-xl font-bold\">\n    Current Members\n  </div>\n  <ul role=\"list\" class=\"divide-y divide-gray-100\">\n    <li class=\"flex justify-between gap-x-6 py-5\" v-for=\"user in users\">\n      <div class=\"flex min-w-0 gap-x-4\">\n        <img class=\"size-12 flex-none rounded-full bg-gray-50\" :src=\"user.picture ?? 'images/logo.svg'\" alt=\"\">\n        <div class=\"min-w-0 flex-auto\">\n          <p class=\"text-sm/6 font-semibold text-gray-900\">{{user.name}}</p>\n          <p class=\"mt-1 truncate text-xs/5 text-gray-500\">{{user.email}}</p>\n        </div>\n      </div>\n      <div class=\"hidden shrink-0 sm:flex sm:flex-col sm:items-end\">\n        <p class=\"text-sm/6 text-gray-900 capitalize\">{{getRolesForUser(user).join(', ')}}</p>\n        <p class=\"mt-1 text-xs/5 text-gray-500\">Last seen <time datetime=\"2023-01-23T13:23Z\">3h ago</time></p>\n      </div>\n    </li>\n  </ul>\n  <div class=\"mt-6\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"text-xl font-bold\">\n        Invitations\n      </div>\n      <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n        <button\n          type=\"button\"\n          @click=\"showNewInvitationModal = true\"\n          class=\"block rounded-md bg-ultramarine-600 px-3 py-2 text-center 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          New Invitation\n        </button>\n      </div>\n    </div>\n    <div class=\"mt-8 flow-root\" v-if=\"invitations?.length > 0\">\n      <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n        <div class=\"inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8\">\n          <table class=\"min-w-full divide-y divide-gray-300\">\n            <thead>\n              <tr>\n                <th scope=\"col\" class=\"py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0\">GitHub Username</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Email</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Status</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Role</th>\n              </tr>\n            </thead>\n            <tbody class=\"divide-y divide-gray-200 bg-white\">\n              <tr v-for=\"invitation in invitations\">\n                <td class=\"whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0\">\n                  {{invitation.githubUsername}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.email}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  <span class=\"inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-600/20\">\n                    Pending\n                  </span>\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.roles.join(', ')}}\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n\n    <div v-if=\"invitations?.length === 0\" class=\"mt-4\">\n      <div class=\"text-center\">\n        <svg class=\"mx-auto size-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n        </svg>\n        <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No invitations</h3>\n        <p class=\"mt-1 text-sm text-gray-500\">You have no outstanding invitations</p>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showNewInvitationModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showNewInvitationModal = false\">&times;</div>\n      <new-invitation @close=\"showNewInvitationModal = false\" @invitationCreated=\"invitations.push($event.invitation)\"></new-invitation>\n    </template>\n  </modal>\n</div>\n";
+
+/***/ }),
+
 /***/ "./node_modules/axios/dist/browser/axios.cjs":
 /*!***************************************************!*\
   !*** ./node_modules/axios/dist/browser/axios.cjs ***!
@@ -11049,6 +11156,8 @@ __webpack_require__(/*! ./modal/modal */ "./frontend/src/modal/modal.js")(app);
 __webpack_require__(/*! ./models/models */ "./frontend/src/models/models.js")(app);
 __webpack_require__(/*! ./navbar/navbar */ "./frontend/src/navbar/navbar.js")(app);
 __webpack_require__(/*! ./splash/splash */ "./frontend/src/splash/splash.js")(app);
+__webpack_require__(/*! ./team/team */ "./frontend/src/team/team.js")(app);
+__webpack_require__(/*! ./team/new-invitation/new-invitation */ "./frontend/src/team/new-invitation/new-invitation.js")(app);
 
 app.component('app-component', {
   template: `
@@ -11057,7 +11166,7 @@ app.component('app-component', {
       <splash />
     </div>
     <div v-else-if="!hasAPIKey || user">
-      <navbar :user="user" />
+      <navbar :user="user" :roles="roles" />
       <div class="view">
         <router-view :key="$route.fullPath" />
       </div>
@@ -11083,14 +11192,17 @@ app.component('app-component', {
     if (mothership.hasAPIKey) {
       const token = window.localStorage.getItem('_mongooseStudioAccessToken');
       if (token) {
-        this.user = await mothership.me().then(res => res.user);
+        const { user, roles } = await mothership.me();
+        this.user = user;
+        this.roles = roles;
       }
     }
   },
   setup() {
     const user = Vue.ref(null);
+    const roles = Vue.ref(null);
 
-    const state = Vue.reactive({ user });
+    const state = Vue.reactive({ user, roles });
     Vue.provide('state', state);
 
     return state;

package/frontend/public/tw.css

@@ -590,6 +590,10 @@ video {
   border-width: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .fixed {
   position: fixed;
 }
@@ -614,8 +618,8 @@ video {
   right: 0px;
 }
 
-.top-\[82\%\] {
-  top: 82%;
+.top-\[90\%\] {
+  top: 90%;
 }
 
 .isolate {
@@ -626,6 +630,14 @@ video {
   z-index: 10;
 }
 
+.col-start-1 {
+  grid-column-start: 1;
+}
+
+.row-start-1 {
+  grid-row-start: 1;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -686,6 +698,10 @@ video {
   margin-right: 0.375rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -738,6 +754,19 @@ video {
   display: flow-root;
 }
 
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.size-12 {
+  width: 3rem;
+  height: 3rem;
+}
+
 .size-5 {
   width: 1.25rem;
   height: 1.25rem;
@@ -800,6 +829,10 @@ video {
   width: 100%;
 }
 
+.min-w-0 {
+  min-width: 0px;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -812,6 +845,14 @@ video {
   flex: 1 1 0%;
 }
 
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-none {
+  flex: none;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -844,6 +885,16 @@ video {
   list-style-type: disc;
 }
 
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -860,6 +911,10 @@ video {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -876,6 +931,16 @@ video {
   gap: 1rem;
 }
 
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+}
+
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
+
 .gap-y-5 {
   row-gap: 1.25rem;
 }
@@ -896,12 +961,23 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
+}
+
 .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-divide-opacity));
@@ -912,10 +988,18 @@ video {
   border-color: rgb(209 213 219 / var(--tw-divide-opacity));
 }
 
+.self-center {
+  align-self: center;
+}
+
 .self-stretch {
   align-self: stretch;
 }
 
+.justify-self-end {
+  justify-self: end;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -1041,6 +1125,11 @@ video {
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -1051,6 +1140,11 @@ video {
   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));
@@ -1186,6 +1280,16 @@ video {
   padding-bottom: 1rem;
 }
 
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1222,6 +1326,10 @@ video {
   padding-right: 1rem;
 }
 
+.pr-8 {
+  padding-right: 2rem;
+}
+
 .pt-1 {
   padding-top: 0.25rem;
 }
@@ -1261,6 +1369,11 @@ video {
   line-height: 1.25rem;
 }
 
+.text-sm\/6 {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -1271,6 +1384,11 @@ video {
   line-height: 1rem;
 }
 
+.text-xs\/5 {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1320,6 +1438,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));
@@ -1367,10 +1490,22 @@ video {
   outline-offset: 2px;
 }
 
+.outline {
+  outline-style: solid;
+}
+
 .outline-0 {
   outline-width: 0px;
 }
 
+.outline-1 {
+  outline-width: 1px;
+}
+
+.-outline-offset-1 {
+  outline-offset: -1px;
+}
+
 .outline-gray-300 {
   outline-color: #d1d5db;
 }
@@ -1398,6 +1533,14 @@ video {
   --tw-ring-color: rgb(17 24 39 / 0.05);
 }
 
+.ring-green-600\/20 {
+  --tw-ring-color: rgb(22 163 74 / 0.2);
+}
+
+.ring-gray-600\/20 {
+  --tw-ring-color: rgb(75 85 99 / 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);
 }
@@ -1445,6 +1588,11 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-forest-green-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 242 58 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -1519,6 +1667,26 @@ video {
   outline-offset: 2px;
 }
 
+.focus\:outline:focus {
+  outline-style: solid;
+}
+
+.focus\:outline-2:focus {
+  outline-width: 2px;
+}
+
+.focus\:-outline-offset-2:focus {
+  outline-offset: -2px;
+}
+
+.focus\:outline-indigo-600:focus {
+  outline-color: #4f46e5;
+}
+
+.focus\:outline-ultramarine-600:focus {
+  outline-color: #1823ff;
+}
+
 .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);
@@ -1536,6 +1704,11 @@ video {
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-forest-green-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 242 58 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-gray-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
@@ -1622,6 +1795,11 @@ video {
     display: flex;
   }
 
+  .sm\:size-4 {
+    width: 1rem;
+    height: 1rem;
+  }
+
   .sm\:flex-auto {
     flex: 1 1 auto;
   }
@@ -1630,6 +1808,14 @@ video {
     flex: none;
   }
 
+  .sm\:flex-col {
+    flex-direction: column;
+  }
+
+  .sm\:items-end {
+    align-items: flex-end;
+  }
+
   .sm\:items-center {
     align-items: center;
   }
@@ -1649,6 +1835,10 @@ video {
     padding-right: 1.5rem;
   }
 
+  .sm\:pl-0 {
+    padding-left: 0px;
+  }
+
   .sm\:pl-6 {
     padding-left: 1.5rem;
   }
@@ -1662,6 +1852,11 @@ video {
     line-height: 1.25rem;
   }
 
+  .sm\:text-sm\/6 {
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+  }
+
   .sm\:leading-6 {
     line-height: 1.5rem;
   }

package/frontend/src/index.js

@@ -45,6 +45,8 @@ require('./modal/modal')(app);
 require('./models/models')(app);
 require('./navbar/navbar')(app);
 require('./splash/splash')(app);
+require('./team/team')(app);
+require('./team/new-invitation/new-invitation')(app);
 
 app.component('app-component', {
   template: `
@@ -53,7 +55,7 @@ app.component('app-component', {
       <splash />
     </div>
     <div v-else-if="!hasAPIKey || user">
-      <navbar :user="user" />
+      <navbar :user="user" :roles="roles" />
       <div class="view">
         <router-view :key="$route.fullPath" />
       </div>
@@ -79,14 +81,17 @@ app.component('app-component', {
     if (mothership.hasAPIKey) {
       const token = window.localStorage.getItem('_mongooseStudioAccessToken');
       if (token) {
-        this.user = await mothership.me().then(res => res.user);
+        const { user, roles } = await mothership.me();
+        this.user = user;
+        this.roles = roles;
       }
     }
   },
   setup() {
     const user = Vue.ref(null);
+    const roles = Vue.ref(null);
 
-    const state = Vue.reactive({ user });
+    const state = Vue.reactive({ user, roles });
     Vue.provide('state', state);
 
     return state;

package/frontend/src/mothership.js

@@ -20,6 +20,14 @@ exports.githubLogin = function githubLogin() {
   return client.post('/githubLogin', { state: window.location.href }).then(res => res.data);
 };
 
+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.github = function github(code) {
   return client.post('/github', { code, workspaceId: config__workspace._id }).then(res => res.data);
 };

package/frontend/src/navbar/navbar.html

@@ -35,8 +35,8 @@
           </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: "" -->
+        <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>
           <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

@@ -10,7 +10,7 @@ appendCSS(require('./navbar.css'));
 
 module.exports = app => app.component('navbar', {
   template: template,
-  props: ['user'],
+  props: ['user', 'roles'],
   data: () => ({ nodeEnv: null, showFlyout: false }),
   computed: {
     routeName() {
@@ -21,6 +21,9 @@ module.exports = app => app.component('navbar', {
     },
     hasAPIKey() {
       return mothership.hasAPIKey;
+    },
+    canViewTeam() {
+      return this.roles?.includes('owner') || this.roles?.includes('admin');
     }
   },
   async mounted() {

package/frontend/src/routes.js

@@ -25,5 +25,10 @@ module.exports = [
     path: '/dashboard/:dashboardId',
     name: 'dashboard',
     component: 'dashboard'
+  },
+  {
+    path: '/team',
+    name: 'team',
+    component: 'team'
   }
-];
+];

package/frontend/src/team/new-invitation/new-invitation.html

@@ -0,0 +1,42 @@
+<div class="p-1">
+  <form class="space-y-4">
+    <div class="text-lg font-bold">
+      New Invitation
+    </div>
+
+    <div>
+      <label for="githubUsername" class="block text-sm/6 font-medium text-gray-900">GitHub Username</label>
+      <div class="mt-2">
+        <input type="githubUsername" name="githubUsername" id="githubUsername" v-model="githubUsername" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6" placeholder="johnsmith12">
+      </div>
+    </div>
+
+    <div>
+      <label for="email" class="block text-sm/6 font-medium text-gray-900">Email (Optional)</label>
+      <div class="mt-2">
+        <input type="email" name="email" id="email" v-model="email" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6" placeholder="you@example.com">
+      </div>
+    </div>
+
+    <div>
+      <label for="location" class="block text-sm/6 font-medium text-gray-900">Role</label>
+      <div class="mt-2 grid grid-cols-1">
+        <select id="role" name="role" v-model="role" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
+          <option value="admin">Admin</option>
+          <option value="member">Member</option>
+          <option value="readonly">Read-only</option>
+        </select>
+        <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+          <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+        </svg>
+      </div>
+    </div>
+
+    <async-button
+      type="submit"
+      @click="inviteToWorkspace"
+      class="inline-flex justify-center rounded-md border border-transparent bg-forest-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-forest-green-500 focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2">
+      Submit
+    </async-button>
+  </form>
+</div>

package/frontend/src/team/new-invitation/new-invitation.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const mothership = require('../../mothership');
+const template = require('./new-invitation.html');
+
+module.exports = app => app.component('new-invitation', {
+  template,
+  emits: ['close', 'invitationCreated'],
+  data: () => ({
+    githubUsername: '',
+    email: '',
+    role: null
+  }),
+  methods: {
+    async inviteToWorkspace() {
+      const { invitation } = await mothership.inviteToWorkspace({ githubUsername: this.githubUsername, email: this.email, roles: [this.role] });
+      this.$emit('invitationCreated', { invitation });
+      this.$emit('close');
+    }
+  }
+});

package/frontend/src/team/team.html

@@ -0,0 +1,86 @@
+<div class="mx-auto max-w-5xl py-6 px-2">
+  <div class="text-xl font-bold">
+    Current Members
+  </div>
+  <ul role="list" class="divide-y divide-gray-100">
+    <li class="flex justify-between gap-x-6 py-5" v-for="user in users">
+      <div class="flex min-w-0 gap-x-4">
+        <img class="size-12 flex-none rounded-full bg-gray-50" :src="user.picture ?? 'images/logo.svg'" alt="">
+        <div class="min-w-0 flex-auto">
+          <p class="text-sm/6 font-semibold text-gray-900">{{user.name}}</p>
+          <p class="mt-1 truncate text-xs/5 text-gray-500">{{user.email}}</p>
+        </div>
+      </div>
+      <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+        <p class="text-sm/6 text-gray-900 capitalize">{{getRolesForUser(user).join(', ')}}</p>
+        <p class="mt-1 text-xs/5 text-gray-500">Last seen <time datetime="2023-01-23T13:23Z">3h ago</time></p>
+      </div>
+    </li>
+  </ul>
+  <div class="mt-6">
+    <div class="flex items-center justify-between">
+      <div class="text-xl font-bold">
+        Invitations
+      </div>
+      <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+        <button
+          type="button"
+          @click="showNewInvitationModal = true"
+          class="block rounded-md bg-ultramarine-600 px-3 py-2 text-center 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">
+          New Invitation
+        </button>
+      </div>
+    </div>
+    <div class="mt-8 flow-root" v-if="invitations?.length > 0">
+      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+          <table class="min-w-full divide-y divide-gray-300">
+            <thead>
+              <tr>
+                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">GitHub Username</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Email</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Role</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 bg-white">
+              <tr v-for="invitation in invitations">
+                <td class="whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0">
+                  {{invitation.githubUsername}}
+                </td>
+                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
+                  {{invitation.email}}
+                </td>
+                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
+                  <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-600/20">
+                    Pending
+                  </span>
+                </td>
+                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
+                  {{invitation.roles.join(', ')}}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="invitations?.length === 0" class="mt-4">
+      <div class="text-center">
+        <svg class="mx-auto size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+          <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+        </svg>
+        <h3 class="mt-2 text-sm font-semibold text-gray-900">No invitations</h3>
+        <p class="mt-1 text-sm text-gray-500">You have no outstanding invitations</p>
+      </div>
+    </div>
+  </div>
+
+  <modal v-if="showNewInvitationModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="showNewInvitationModal = false">&times;</div>
+      <new-invitation @close="showNewInvitationModal = false" @invitationCreated="invitations.push($event.invitation)"></new-invitation>
+    </template>
+  </modal>
+</div>

package/frontend/src/team/team.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const mothership = require('../mothership');
+const template = require('./team.html');
+
+module.exports = app => app.component('team', {
+  template,
+  data: () => ({
+    workspace: null,
+    users: null,
+    invitations: null,
+    showNewInvitationModal: false
+  }),
+  async mounted() {
+    const { workspace, users, invitations } = await mothership.getWorkspaceTeam();
+    this.workspace = workspace;
+    this.users = users;
+    this.invitations = invitations;
+  },
+  methods: {
+    getRolesForUser(user) {
+      return this.workspace.members.find(member => member.userId === user._id)?.roles ?? [];
+    }
+  }
+});

package/package.json

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