From 3573596716c3f223a51a82b1f4246d3878318f9d Mon Sep 17 00:00:00 2001
From: Jared Tomeck <jared.tomeck@kitware.com>
Date: Mon, 29 Jun 2020 10:49:53 -0400
Subject: [PATCH 01/16] Add menu to workspace detail

---
 src/views/WorkspaceDetail.vue | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index b33719e3..c4bef2fb 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -79,9 +79,35 @@
           bottom
         />
         <v-spacer />
-        <v-btn icon>
-          <v-icon>more_vert</v-icon>
-        </v-btn>
+        <v-menu
+          v-model="actionsMenu"
+          class="actions-menu"
+          max-width="275"
+          offset-y
+          origin="center center"
+          transition="scale-transition"
+        >
+          <template v-slot:activator="{ }">
+            <v-btn
+              icon
+              @click="actionsMenu = true"
+            >
+              <v-icon>more_vert</v-icon>
+            </v-btn>
+          </template>
+          <v-card>
+            <v-list dense>
+              <v-list-item>
+                <v-list-item-icon>
+                  <v-icon>vpn_key</v-icon>
+                </v-list-item-icon>
+                <v-list-item-content>
+                  Permissions
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
       </v-app-bar>
 
       <v-layout
@@ -159,6 +185,7 @@ export default Vue.extend({
       editing: false,
       requestError: null as string | null,
       loading: false,
+      actionsMenu: false,
     };
   },
 

From 941f89254b4f722df837d4a56c4dd4d8f3a4fb4f Mon Sep 17 00:00:00 2001
From: Jared Tomeck <jared.tomeck@kitware.com>
Date: Wed, 1 Jul 2020 11:52:38 -0400
Subject: [PATCH 02/16] Create permissions modal

---
 src/views/WorkspaceDetail.vue | 264 +++++++++++++++++++++++++++++++++-
 1 file changed, 261 insertions(+), 3 deletions(-)

diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index c4bef2fb..7a559a27 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -79,6 +79,7 @@
           bottom
         />
         <v-spacer />
+
         <v-menu
           v-model="actionsMenu"
           class="actions-menu"
@@ -96,9 +97,15 @@
             </v-btn>
           </template>
           <v-card>
-            <v-list dense>
-              <v-list-item>
-                <v-list-item-icon>
+            <v-list
+              dense
+              width="224"
+            >
+              <v-list-item
+                ripple
+                @click.stop="permDialog = true"
+              >
+                <v-list-item-icon class="mr-3">
                   <v-icon>vpn_key</v-icon>
                 </v-list-item-icon>
                 <v-list-item-content>
@@ -110,6 +117,201 @@
         </v-menu>
       </v-app-bar>
 
+      <v-dialog
+        v-model="permDialog"
+        max-width="600"
+      >
+        <v-card>
+          <v-card-title class="perm-title">
+            <v-row
+              align="center"
+              justify="space-between"
+            >
+              <v-col cols="8">
+                Permissions for&nbsp;<strong>{{ workspace }}</strong>
+              </v-col>
+              <v-col
+                cols="3"
+              >
+                <v-tooltip top>
+                  <template v-slot:activator="{ on }">
+                    <v-switch
+                      v-model="privacyToggle"
+                      :append-icon="swapPermIcon"
+                      class="no-label ma-0 pa-0 ml-2"
+                      hide-details
+                      inset
+                      v-on="on"
+                    />
+                  </template>
+                  <span v-if="privacyToggle">Make public</span>
+                  <span v-else>Make private</span>
+                </v-tooltip>
+              </v-col>
+            </v-row>
+          </v-card-title>
+          <v-card-content>
+            <v-card
+              class="global-perm grey darken-3 pa-5"
+              dark
+              flat
+              tile
+            >
+              <v-row>
+                <v-spacer />
+                <v-col
+                  class="py-0"
+                  cols="10"
+                >
+                  <v-autocomplete
+                    :items="['jarred.tomatoes@kitware.com', 'jakey.nesby@kitware.com', 'maca_roni.chowdery@kitware.com']"
+                    append-icon=""
+                    chips
+                    class="px-0"
+                    deletable-chips
+                    label="Give permissions by email"
+                    full-width
+                    hide-details
+                    hide-no-data
+                    hide-selected
+                    multiple
+                    outlined
+                  />
+                </v-col>
+                <v-col class="py-0">
+                  <v-tooltip right>
+                    <template v-slot:activator="{ on }">
+                      <v-btn
+                        color="grey"
+                        dark
+                        fab
+                        medium
+                        outlined
+                        v-on="on"
+                      >
+                        <v-icon>add</v-icon>
+                      </v-btn>
+                    </template>
+                    <span>Add selected</span>
+                  </v-tooltip>
+                </v-col>
+                <v-spacer />
+              </v-row>
+            </v-card>
+            <v-card
+              class="pa-5"
+              flat
+            >
+              <v-card-content>
+                <v-list>
+                  <v-subheader class="pa-3">
+                    <v-row align-items="center">
+                      <v-col
+                        class="user-list-heading pa-1"
+                        cols="8"
+                      >
+                        Set individual permissions:
+                      </v-col>
+                      <v-col class="user-list-all-select pa-0">
+                        <v-select
+                          :items="['owner','maintainer','writer','reader']"
+                          class="no-border ma-0 pa-0"
+                          hide-details
+                          dense
+                          placeholder="change all to"
+                          prepend-icon="more_horiz"
+                        />
+                      </v-col>
+                    </v-row>
+                  </v-subheader>
+                  <v-divider />
+                  <v-list-item class="px-0">
+                    <v-list-item-avatar>
+                      <v-icon>account_circle</v-icon>
+                    </v-list-item-avatar>
+                    <v-list-item-content>
+                      <v-list-item-title class="blue--text text--darken-2">
+                        jakey.nesby@kitware.com
+                      </v-list-item-title>
+                    </v-list-item-content>
+                    <v-list-item-action class="user-list-individual-select">
+                      <v-select
+                        :items="['owner','maintainer','writer','reader']"
+                        class="no-border ma-0 pa-0"
+                        hide-details
+                        dense
+                        value="owner"
+                        prepend-icon="lock"
+                      />
+                    </v-list-item-action>
+                  </v-list-item>
+                  <v-divider />
+                  <v-list-item class="px-0">
+                    <v-list-item-avatar>
+                      <v-icon>account_circle</v-icon>
+                    </v-list-item-avatar>
+                    <v-list-item-content>
+                      <v-list-item-title class="blue--text text--darken-2">
+                        maca_roni.chowdery@kitware.com
+                      </v-list-item-title>
+                    </v-list-item-content>
+                    <v-list-item-action class="user-list-individual-select">
+                      <v-select
+                        :items="['owner','maintainer','writer','reader']"
+                        class="no-border ma-0 pa-0"
+                        hide-details
+                        dense
+                        value="maintainer"
+                        prepend-icon="lock"
+                      />
+                    </v-list-item-action>
+                  </v-list-item>
+                  <v-divider />
+                  <v-list-item class="px-0">
+                    <v-list-item-avatar>
+                      <v-icon>account_circle</v-icon>
+                    </v-list-item-avatar>
+                    <v-list-item-content>
+                      <v-list-item-title class="blue--text text--darken-2">
+                        jarred.tomatoes@kitware.com
+                      </v-list-item-title>
+                    </v-list-item-content>
+                    <v-list-item-action class="user-list-individual-select">
+                      <v-select
+                        :items="['owner','maintainer','writer','reader']"
+                        class="no-border ma-0 pa-0"
+                        hide-details
+                        dense
+                        value="reader"
+                        prepend-icon="lock"
+                      />
+                    </v-list-item-action>
+                  </v-list-item>
+                  <v-divider />
+                </v-list>
+              </v-card-content>
+              <v-card-actions class="pt-4">
+                <v-spacer />
+                <v-btn
+                  color="grey darken-2"
+                  large
+                  text
+                >
+                  Cancel
+                </v-btn>
+                <v-btn
+                  color="primary"
+                  depressed
+                  large
+                >
+                  Save Permissions
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-card-content>
+        </v-card>
+      </v-dialog>
+
       <v-layout
         wrap
       >
@@ -186,6 +388,8 @@ export default Vue.extend({
       requestError: null as string | null,
       loading: false,
       actionsMenu: false,
+      permDialog: false,
+      privacyToggle: true,
     };
   },
 
@@ -210,6 +414,9 @@ export default Vue.extend({
 
       return nodeTables.concat(edgeTables);
     },
+    swapPermIcon() {
+      return this.privacyToggle ? 'lock' : 'lock_open';
+    },
   },
 
   watch: {
@@ -286,6 +493,23 @@ export default Vue.extend({
   color:#7f9ba4;
 }
 
+.user-list-heading {
+  font-size: 14px !important;
+}
+
+.user-list-individual-select {
+  max-width: 175px;
+}
+
+.v-dialog > .v-card > .v-card__title.perm-title {
+  font-size: 24px;
+  font-weight: 400;
+}
+
+.v-dialog > .v-card > .v-card__title.perm-title strong {
+  font-weight: 600;
+}
+
 .ws-detail-title {
   align-items: center;
   display: flex;
@@ -295,6 +519,40 @@ export default Vue.extend({
 </style>
 
 <style>
+.v-text-field.no-border > .v-input__control > .v-input__slot:before,
+.v-text-field.no-border > .v-input__control > .v-input__slot:after {
+  display: none;
+}
+
+.v-application--is-ltr .no-label .v-input__append-outer,
+.v-application--is-ltr .no-label .v-input__prepend-outer {
+  margin: 0;
+}
+
+.no-label {
+  justify-content: flex-end;
+}
+
+.user-list-all-select .v-select__selections,
+.user-list-individual-select .v-select__selections {
+  font-size: 14px;
+}
+
+.v-application--is-ltr .no-label .v-input--selection-controls__input {
+  margin: 0;
+}
+
+.v-application--is-ltr .no-label .v-input__control {
+  flex-grow: 0;
+  width: unset;
+}
+
+.global-perm-select.v-text-field > .v-input__control > .v-input__slot:before,
+.global-perm-select.v-text-field > .v-input__control > .v-input__slot:after {
+    border-width: 0;
+    border-color: transparent;
+}
+
 .ws-rename.v-text-field {
   height: 64px; /* match toolbar height */
 }

From 4d761833dd71c1cd9704453430739f266e02f5e4 Mon Sep 17 00:00:00 2001
From: Roni Choudhury <roni.choudhury@kitware.com>
Date: Wed, 1 Jul 2020 14:25:27 -0400
Subject: [PATCH 03/16] Apply typescript workaround

---
 src/views/WorkspaceDetail.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index 7a559a27..3fc72f34 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -397,7 +397,9 @@ export default Vue.extend({
     nodeTables: () => store.getters.nodeTables,
     edgeTables: () => store.getters.edgeTables,
     graphs: () => store.getters.graphs,
-    nameErrorMessages(): string[] {
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    nameErrorMessages(this: any): string[] {
       const { requestError } = this;
       const errors = [
         ...workspaceNameRules.map((rule) => rule(this.localWorkspace as string)),
@@ -414,7 +416,9 @@ export default Vue.extend({
 
       return nodeTables.concat(edgeTables);
     },
-    swapPermIcon() {
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    swapPermIcon(this: any) {
       return this.privacyToggle ? 'lock' : 'lock_open';
     },
   },
@@ -423,7 +427,9 @@ export default Vue.extend({
     workspace() {
       this.update();
     },
-    localWorkspace() {
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    localWorkspace(this: any) {
       // Once the user types, clears the error returned on sending the rename API call.
       this.requestError = null;
     },
@@ -432,12 +438,15 @@ export default Vue.extend({
     this.update();
   },
   methods: {
-    cancelRename() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cancelRename(this: any) {
       this.requestError = null;
       this.localWorkspace = this.workspace;
       this.editing = false;
     },
-    async renameWorkspace() {
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async renameWorkspace(this: any) {
       if (this.nameErrorMessages.length) {
         return;
       }

From fdb793b65a7a1637325e3fc9448e56f97660ba78 Mon Sep 17 00:00:00 2001
From: Jared Tomeck <jared.tomeck@kitware.com>
Date: Wed, 1 Jul 2020 14:44:26 -0400
Subject: [PATCH 04/16] Add functionality to cancel button

---
 src/views/WorkspaceDetail.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index 3fc72f34..3c759342 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -296,6 +296,7 @@
                   color="grey darken-2"
                   large
                   text
+                  @click="permDialog = false"
                 >
                   Cancel
                 </v-btn>

From 9b4e37d021eea4481d76611b9cedc7749b8821b5 Mon Sep 17 00:00:00 2001
From: Jared Tomeck <jared.tomeck@kitware.com>
Date: Wed, 1 Jul 2020 14:44:57 -0400
Subject: [PATCH 05/16] Change button color and remove medium prop

---
 src/views/WorkspaceDetail.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index 3c759342..014e2bc6 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -182,10 +182,9 @@
                   <v-tooltip right>
                     <template v-slot:activator="{ on }">
                       <v-btn
-                        color="grey"
+                        color="grey lighten-1"
                         dark
                         fab
-                        medium
                         outlined
                         v-on="on"
                       >

From 1c74724b52d6f6deb9f8a3e44890c6c3b70ecea3 Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Fri, 3 Jul 2020 14:03:14 -0400
Subject: [PATCH 06/16] Restructure permission v-dialog

---
 src/views/WorkspaceDetail.vue | 415 +++++++++++++++++-----------------
 1 file changed, 208 insertions(+), 207 deletions(-)

diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index 014e2bc6..aca6c985 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -88,10 +88,10 @@
           origin="center center"
           transition="scale-transition"
         >
-          <template v-slot:activator="{ }">
+          <template v-slot:activator="{ on }">
             <v-btn
               icon
-              @click="actionsMenu = true"
+              v-on="on"
             >
               <v-icon>more_vert</v-icon>
             </v-btn>
@@ -101,216 +101,217 @@
               dense
               width="224"
             >
-              <v-list-item
-                ripple
-                @click.stop="permDialog = true"
+              <v-dialog
+                v-model="permDialog"
+                max-width="600"
               >
-                <v-list-item-icon class="mr-3">
-                  <v-icon>vpn_key</v-icon>
-                </v-list-item-icon>
-                <v-list-item-content>
-                  Permissions
-                </v-list-item-content>
-              </v-list-item>
-            </v-list>
-          </v-card>
-        </v-menu>
-      </v-app-bar>
-
-      <v-dialog
-        v-model="permDialog"
-        max-width="600"
-      >
-        <v-card>
-          <v-card-title class="perm-title">
-            <v-row
-              align="center"
-              justify="space-between"
-            >
-              <v-col cols="8">
-                Permissions for&nbsp;<strong>{{ workspace }}</strong>
-              </v-col>
-              <v-col
-                cols="3"
-              >
-                <v-tooltip top>
-                  <template v-slot:activator="{ on }">
-                    <v-switch
-                      v-model="privacyToggle"
-                      :append-icon="swapPermIcon"
-                      class="no-label ma-0 pa-0 ml-2"
-                      hide-details
-                      inset
-                      v-on="on"
-                    />
-                  </template>
-                  <span v-if="privacyToggle">Make public</span>
-                  <span v-else>Make private</span>
-                </v-tooltip>
-              </v-col>
-            </v-row>
-          </v-card-title>
-          <v-card-content>
-            <v-card
-              class="global-perm grey darken-3 pa-5"
-              dark
-              flat
-              tile
-            >
-              <v-row>
-                <v-spacer />
-                <v-col
-                  class="py-0"
-                  cols="10"
-                >
-                  <v-autocomplete
-                    :items="['jarred.tomatoes@kitware.com', 'jakey.nesby@kitware.com', 'maca_roni.chowdery@kitware.com']"
-                    append-icon=""
-                    chips
-                    class="px-0"
-                    deletable-chips
-                    label="Give permissions by email"
-                    full-width
-                    hide-details
-                    hide-no-data
-                    hide-selected
-                    multiple
-                    outlined
-                  />
-                </v-col>
-                <v-col class="py-0">
-                  <v-tooltip right>
-                    <template v-slot:activator="{ on }">
-                      <v-btn
-                        color="grey lighten-1"
-                        dark
-                        fab
-                        outlined
-                        v-on="on"
-                      >
-                        <v-icon>add</v-icon>
-                      </v-btn>
-                    </template>
-                    <span>Add selected</span>
-                  </v-tooltip>
-                </v-col>
-                <v-spacer />
-              </v-row>
-            </v-card>
-            <v-card
-              class="pa-5"
-              flat
-            >
-              <v-card-content>
-                <v-list>
-                  <v-subheader class="pa-3">
-                    <v-row align-items="center">
+                <template v-slot:activator="{ on }">
+                  <v-list-item
+                    ripple
+                    v-on="on"
+                  >
+                    <v-list-item-icon class="mr-3">
+                      <v-icon>vpn_key</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-content>
+                      Permissions
+                    </v-list-item-content>
+                  </v-list-item>
+                </template>
+                <v-card>
+                  <v-card-title class="perm-title">
+                    <v-row
+                      align="center"
+                      justify="space-between"
+                    >
+                      <v-col cols="8">
+                        Permissions for&nbsp;<strong>{{ workspace }}</strong>
+                      </v-col>
                       <v-col
-                        class="user-list-heading pa-1"
-                        cols="8"
+                        cols="3"
                       >
-                        Set individual permissions:
-                      </v-col>
-                      <v-col class="user-list-all-select pa-0">
-                        <v-select
-                          :items="['owner','maintainer','writer','reader']"
-                          class="no-border ma-0 pa-0"
-                          hide-details
-                          dense
-                          placeholder="change all to"
-                          prepend-icon="more_horiz"
-                        />
+                        <v-tooltip top>
+                          <template v-slot:activator="{ on }">
+                            <v-switch
+                              v-model="privacyToggle"
+                              :append-icon="swapPermIcon"
+                              class="no-label ma-0 pa-0 ml-2"
+                              hide-details
+                              inset
+                              v-on="on"
+                            />
+                          </template>
+                          <span v-if="privacyToggle">Make public</span>
+                          <span v-else>Make private</span>
+                        </v-tooltip>
                       </v-col>
                     </v-row>
-                  </v-subheader>
-                  <v-divider />
-                  <v-list-item class="px-0">
-                    <v-list-item-avatar>
-                      <v-icon>account_circle</v-icon>
-                    </v-list-item-avatar>
-                    <v-list-item-content>
-                      <v-list-item-title class="blue--text text--darken-2">
-                        jakey.nesby@kitware.com
-                      </v-list-item-title>
-                    </v-list-item-content>
-                    <v-list-item-action class="user-list-individual-select">
-                      <v-select
-                        :items="['owner','maintainer','writer','reader']"
-                        class="no-border ma-0 pa-0"
-                        hide-details
-                        dense
-                        value="owner"
-                        prepend-icon="lock"
-                      />
-                    </v-list-item-action>
-                  </v-list-item>
-                  <v-divider />
-                  <v-list-item class="px-0">
-                    <v-list-item-avatar>
-                      <v-icon>account_circle</v-icon>
-                    </v-list-item-avatar>
-                    <v-list-item-content>
-                      <v-list-item-title class="blue--text text--darken-2">
-                        maca_roni.chowdery@kitware.com
-                      </v-list-item-title>
-                    </v-list-item-content>
-                    <v-list-item-action class="user-list-individual-select">
-                      <v-select
-                        :items="['owner','maintainer','writer','reader']"
-                        class="no-border ma-0 pa-0"
-                        hide-details
-                        dense
-                        value="maintainer"
-                        prepend-icon="lock"
-                      />
-                    </v-list-item-action>
-                  </v-list-item>
-                  <v-divider />
-                  <v-list-item class="px-0">
-                    <v-list-item-avatar>
-                      <v-icon>account_circle</v-icon>
-                    </v-list-item-avatar>
-                    <v-list-item-content>
-                      <v-list-item-title class="blue--text text--darken-2">
-                        jarred.tomatoes@kitware.com
-                      </v-list-item-title>
-                    </v-list-item-content>
-                    <v-list-item-action class="user-list-individual-select">
-                      <v-select
-                        :items="['owner','maintainer','writer','reader']"
-                        class="no-border ma-0 pa-0"
-                        hide-details
-                        dense
-                        value="reader"
-                        prepend-icon="lock"
-                      />
-                    </v-list-item-action>
-                  </v-list-item>
-                  <v-divider />
-                </v-list>
-              </v-card-content>
-              <v-card-actions class="pt-4">
-                <v-spacer />
-                <v-btn
-                  color="grey darken-2"
-                  large
-                  text
-                  @click="permDialog = false"
-                >
-                  Cancel
-                </v-btn>
-                <v-btn
-                  color="primary"
-                  depressed
-                  large
-                >
-                  Save Permissions
-                </v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-card-content>
-        </v-card>
-      </v-dialog>
+                  </v-card-title>
+                  <v-card-content>
+                    <v-card
+                      class="global-perm grey darken-3 pa-5"
+                      dark
+                      flat
+                      tile
+                    >
+                      <v-row>
+                        <v-spacer />
+                        <v-col
+                          class="py-0"
+                          cols="10"
+                        >
+                          <v-autocomplete
+                            :items="['jarred.tomatoes@kitware.com', 'jakey.nesby@kitware.com', 'maca_roni.chowdery@kitware.com']"
+                            append-icon=""
+                            chips
+                            class="px-0"
+                            deletable-chips
+                            label="Give permissions by email"
+                            full-width
+                            hide-details
+                            hide-no-data
+                            hide-selected
+                            multiple
+                            outlined
+                          />
+                        </v-col>
+                        <v-col class="py-0">
+                          <v-tooltip right>
+                            <template v-slot:activator="{ on }">
+                              <v-btn
+                                color="grey lighten-1"
+                                dark
+                                fab
+                                outlined
+                                v-on="on"
+                              >
+                                <v-icon>add</v-icon>
+                              </v-btn>
+                            </template>
+                            <span>Add selected</span>
+                          </v-tooltip>
+                        </v-col>
+                        <v-spacer />
+                      </v-row>
+                    </v-card>
+                    <v-card
+                      class="pa-5"
+                      flat
+                    >
+                      <v-card-content>
+                        <v-list>
+                          <v-subheader class="pa-3">
+                            <v-row align-items="center">
+                              <v-col
+                                class="user-list-heading pa-1"
+                                cols="8"
+                              >
+                                Set individual permissions:
+                              </v-col>
+                              <v-col class="user-list-all-select pa-0">
+                                <v-select
+                                  :items="['owner','maintainer','writer','reader']"
+                                  class="no-border ma-0 pa-0"
+                                  hide-details
+                                  dense
+                                  placeholder="change all to"
+                                  prepend-icon="more_horiz"
+                                />
+                              </v-col>
+                            </v-row>
+                          </v-subheader>
+                          <v-divider />
+                          <v-list-item class="px-0">
+                            <v-list-item-avatar>
+                              <v-icon>account_circle</v-icon>
+                            </v-list-item-avatar>
+                            <v-list-item-content>
+                              <v-list-item-title class="blue--text text--darken-2">
+                                jakey.nesby@kitware.com
+                              </v-list-item-title>
+                            </v-list-item-content>
+                            <v-list-item-action class="user-list-individual-select">
+                              <v-select
+                                :items="['owner','maintainer','writer','reader']"
+                                class="no-border ma-0 pa-0"
+                                hide-details
+                                dense
+                                value="owner"
+                                prepend-icon="lock"
+                              />
+                            </v-list-item-action>
+                          </v-list-item>
+                          <v-divider />
+                          <v-list-item class="px-0">
+                            <v-list-item-avatar>
+                              <v-icon>account_circle</v-icon>
+                            </v-list-item-avatar>
+                            <v-list-item-content>
+                              <v-list-item-title class="blue--text text--darken-2">
+                                maca_roni.chowdery@kitware.com
+                              </v-list-item-title>
+                            </v-list-item-content>
+                            <v-list-item-action class="user-list-individual-select">
+                              <v-select
+                                :items="['owner','maintainer','writer','reader']"
+                                class="no-border ma-0 pa-0"
+                                hide-details
+                                dense
+                                value="maintainer"
+                                prepend-icon="lock"
+                              />
+                            </v-list-item-action>
+                          </v-list-item>
+                          <v-divider />
+                          <v-list-item class="px-0">
+                            <v-list-item-avatar>
+                              <v-icon>account_circle</v-icon>
+                            </v-list-item-avatar>
+                            <v-list-item-content>
+                              <v-list-item-title class="blue--text text--darken-2">
+                                jarred.tomatoes@kitware.com
+                              </v-list-item-title>
+                            </v-list-item-content>
+                            <v-list-item-action class="user-list-individual-select">
+                              <v-select
+                                :items="['owner','maintainer','writer','reader']"
+                                class="no-border ma-0 pa-0"
+                                hide-details
+                                dense
+                                value="reader"
+                                prepend-icon="lock"
+                              />
+                            </v-list-item-action>
+                          </v-list-item>
+                          <v-divider />
+                        </v-list>
+                      </v-card-content>
+                      <v-card-actions class="pt-4">
+                        <v-spacer />
+                        <v-btn
+                          color="grey darken-2"
+                          large
+                          text
+                          @click="permDialog = false"
+                        >
+                          Cancel
+                        </v-btn>
+                        <v-btn
+                          color="primary"
+                          depressed
+                          large
+                        >
+                          Save Permissions
+                        </v-btn>
+                      </v-card-actions>
+                    </v-card>
+                  </v-card-content>
+                </v-card>
+              </v-dialog>
+            </v-list>
+          </v-card>
+        </v-menu>
+      </v-app-bar>
 
       <v-layout
         wrap

From d702d4c171f22c0389a19782bd25fec4011f5df7 Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Fri, 3 Jul 2020 14:29:28 -0400
Subject: [PATCH 07/16] Move permissions dialog into own component

---
 src/components/PermissionsDialog.vue | 288 +++++++++++++++++++++++++++
 src/views/WorkspaceDetail.vue        | 270 +------------------------
 2 files changed, 292 insertions(+), 266 deletions(-)
 create mode 100644 src/components/PermissionsDialog.vue

diff --git a/src/components/PermissionsDialog.vue b/src/components/PermissionsDialog.vue
new file mode 100644
index 00000000..3ee6ef82
--- /dev/null
+++ b/src/components/PermissionsDialog.vue
@@ -0,0 +1,288 @@
+<template>
+  <v-dialog
+    v-model="permDialog"
+    max-width="600"
+  >
+    <template v-slot:activator="{ on }">
+      <v-list-item
+        ripple
+        v-on="on"
+      >
+        <v-list-item-icon class="mr-3">
+          <v-icon>vpn_key</v-icon>
+        </v-list-item-icon>
+        <v-list-item-content>
+          Permissions
+        </v-list-item-content>
+      </v-list-item>
+    </template>
+    <v-card>
+      <v-card-title class="perm-title">
+        <v-row
+          align="center"
+          justify="space-between"
+        >
+          <v-col cols="8">
+            Permissions for&nbsp;<strong>{{ workspace }}</strong>
+          </v-col>
+          <v-col
+            cols="3"
+          >
+            <v-tooltip top>
+              <template v-slot:activator="{ on }">
+                <v-switch
+                  v-model="privacyToggle"
+                  :append-icon="swapPermIcon"
+                  class="no-label ma-0 pa-0 ml-2"
+                  hide-details
+                  inset
+                  v-on="on"
+                />
+              </template>
+              <span v-if="privacyToggle">Make public</span>
+              <span v-else>Make private</span>
+            </v-tooltip>
+          </v-col>
+        </v-row>
+      </v-card-title>
+      <v-card
+        class="global-perm grey darken-3 pa-5"
+        dark
+        flat
+        tile
+      >
+        <v-row>
+          <v-spacer />
+          <v-col
+            class="py-0"
+            cols="10"
+          >
+            <v-autocomplete
+              :items="['jarred.tomatoes@kitware.com', 'jakey.nesby@kitware.com', 'maca_roni.chowdery@kitware.com']"
+              append-icon=""
+              chips
+              class="px-0"
+              deletable-chips
+              label="Give permissions by email"
+              full-width
+              hide-details
+              hide-no-data
+              hide-selected
+              multiple
+              outlined
+            />
+          </v-col>
+          <v-col class="py-0">
+            <v-tooltip right>
+              <template v-slot:activator="{ on }">
+                <v-btn
+                  color="grey lighten-1"
+                  dark
+                  fab
+                  outlined
+                  v-on="on"
+                >
+                  <v-icon>add</v-icon>
+                </v-btn>
+              </template>
+              <span>Add selected</span>
+            </v-tooltip>
+          </v-col>
+          <v-spacer />
+        </v-row>
+      </v-card>
+      <v-card
+        class="pa-5"
+        flat
+      >
+        <v-list>
+          <v-subheader class="pa-3">
+            <v-row align-items="center">
+              <v-col
+                class="user-list-heading pa-1"
+                cols="8"
+              >
+                Set individual permissions:
+              </v-col>
+              <v-col class="user-list-all-select pa-0">
+                <v-select
+                  :items="['owner','maintainer','writer','reader']"
+                  class="no-border ma-0 pa-0"
+                  hide-details
+                  dense
+                  placeholder="change all to"
+                  prepend-icon="more_horiz"
+                />
+              </v-col>
+            </v-row>
+          </v-subheader>
+          <v-divider />
+          <v-list-item class="px-0">
+            <v-list-item-avatar>
+              <v-icon>account_circle</v-icon>
+            </v-list-item-avatar>
+            <v-list-item-content>
+              <v-list-item-title class="blue--text text--darken-2">
+                jakey.nesby@kitware.com
+              </v-list-item-title>
+            </v-list-item-content>
+            <v-list-item-action class="user-list-individual-select">
+              <v-select
+                :items="['owner','maintainer','writer','reader']"
+                class="no-border ma-0 pa-0"
+                hide-details
+                dense
+                value="owner"
+                prepend-icon="lock"
+              />
+            </v-list-item-action>
+          </v-list-item>
+          <v-divider />
+          <v-list-item class="px-0">
+            <v-list-item-avatar>
+              <v-icon>account_circle</v-icon>
+            </v-list-item-avatar>
+            <v-list-item-content>
+              <v-list-item-title class="blue--text text--darken-2">
+                maca_roni.chowdery@kitware.com
+              </v-list-item-title>
+            </v-list-item-content>
+            <v-list-item-action class="user-list-individual-select">
+              <v-select
+                :items="['owner','maintainer','writer','reader']"
+                class="no-border ma-0 pa-0"
+                hide-details
+                dense
+                value="maintainer"
+                prepend-icon="lock"
+              />
+            </v-list-item-action>
+          </v-list-item>
+          <v-divider />
+          <v-list-item class="px-0">
+            <v-list-item-avatar>
+              <v-icon>account_circle</v-icon>
+            </v-list-item-avatar>
+            <v-list-item-content>
+              <v-list-item-title class="blue--text text--darken-2">
+                jarred.tomatoes@kitware.com
+              </v-list-item-title>
+            </v-list-item-content>
+            <v-list-item-action class="user-list-individual-select">
+              <v-select
+                :items="['owner','maintainer','writer','reader']"
+                class="no-border ma-0 pa-0"
+                hide-details
+                dense
+                value="reader"
+                prepend-icon="lock"
+              />
+            </v-list-item-action>
+          </v-list-item>
+          <v-divider />
+        </v-list>
+        <v-card-actions class="pt-4">
+          <v-spacer />
+          <v-btn
+            color="grey darken-2"
+            large
+            text
+            @click="permDialog = false"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            color="primary"
+            depressed
+            large
+          >
+            Save Permissions
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+
+import Vue, { PropType } from 'vue';
+
+
+export default Vue.extend({
+  name: 'PermissionsDialog',
+  props: {
+    workspace: {
+      type: String as PropType<string>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      permDialog: false,
+      privacyToggle: true,
+    };
+  },
+  computed: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    swapPermIcon(this: any) {
+      return this.privacyToggle ? 'lock' : 'lock_open';
+    },
+  },
+});
+</script>
+
+<style scoped>
+.user-list-heading {
+  font-size: 14px !important;
+}
+
+.user-list-individual-select {
+  max-width: 175px;
+}
+
+.v-dialog > .v-card > .v-card__title.perm-title {
+  font-size: 24px;
+  font-weight: 400;
+}
+
+.v-dialog > .v-card > .v-card__title.perm-title strong {
+  font-weight: 600;
+}
+</style>
+
+<style>
+.v-text-field.no-border > .v-input__control > .v-input__slot:before,
+.v-text-field.no-border > .v-input__control > .v-input__slot:after {
+  display: none;
+}
+
+.v-application--is-ltr .no-label .v-input__append-outer,
+.v-application--is-ltr .no-label .v-input__prepend-outer {
+  margin: 0;
+}
+
+.no-label {
+  justify-content: flex-end;
+}
+
+.user-list-all-select .v-select__selections,
+.user-list-individual-select .v-select__selections {
+  font-size: 14px;
+}
+
+.v-application--is-ltr .no-label .v-input--selection-controls__input {
+  margin: 0;
+}
+
+.v-application--is-ltr .no-label .v-input__control {
+  flex-grow: 0;
+  width: unset;
+}
+
+.global-perm-select.v-text-field > .v-input__control > .v-input__slot:before,
+.global-perm-select.v-text-field > .v-input__control > .v-input__slot:after {
+    border-width: 0;
+    border-color: transparent;
+}
+</style>
diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index aca6c985..4395fb6a 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -82,7 +82,6 @@
 
         <v-menu
           v-model="actionsMenu"
-          class="actions-menu"
           max-width="275"
           offset-y
           origin="center center"
@@ -101,213 +100,8 @@
               dense
               width="224"
             >
-              <v-dialog
-                v-model="permDialog"
-                max-width="600"
-              >
-                <template v-slot:activator="{ on }">
-                  <v-list-item
-                    ripple
-                    v-on="on"
-                  >
-                    <v-list-item-icon class="mr-3">
-                      <v-icon>vpn_key</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-content>
-                      Permissions
-                    </v-list-item-content>
-                  </v-list-item>
-                </template>
-                <v-card>
-                  <v-card-title class="perm-title">
-                    <v-row
-                      align="center"
-                      justify="space-between"
-                    >
-                      <v-col cols="8">
-                        Permissions for&nbsp;<strong>{{ workspace }}</strong>
-                      </v-col>
-                      <v-col
-                        cols="3"
-                      >
-                        <v-tooltip top>
-                          <template v-slot:activator="{ on }">
-                            <v-switch
-                              v-model="privacyToggle"
-                              :append-icon="swapPermIcon"
-                              class="no-label ma-0 pa-0 ml-2"
-                              hide-details
-                              inset
-                              v-on="on"
-                            />
-                          </template>
-                          <span v-if="privacyToggle">Make public</span>
-                          <span v-else>Make private</span>
-                        </v-tooltip>
-                      </v-col>
-                    </v-row>
-                  </v-card-title>
-                  <v-card-content>
-                    <v-card
-                      class="global-perm grey darken-3 pa-5"
-                      dark
-                      flat
-                      tile
-                    >
-                      <v-row>
-                        <v-spacer />
-                        <v-col
-                          class="py-0"
-                          cols="10"
-                        >
-                          <v-autocomplete
-                            :items="['jarred.tomatoes@kitware.com', 'jakey.nesby@kitware.com', 'maca_roni.chowdery@kitware.com']"
-                            append-icon=""
-                            chips
-                            class="px-0"
-                            deletable-chips
-                            label="Give permissions by email"
-                            full-width
-                            hide-details
-                            hide-no-data
-                            hide-selected
-                            multiple
-                            outlined
-                          />
-                        </v-col>
-                        <v-col class="py-0">
-                          <v-tooltip right>
-                            <template v-slot:activator="{ on }">
-                              <v-btn
-                                color="grey lighten-1"
-                                dark
-                                fab
-                                outlined
-                                v-on="on"
-                              >
-                                <v-icon>add</v-icon>
-                              </v-btn>
-                            </template>
-                            <span>Add selected</span>
-                          </v-tooltip>
-                        </v-col>
-                        <v-spacer />
-                      </v-row>
-                    </v-card>
-                    <v-card
-                      class="pa-5"
-                      flat
-                    >
-                      <v-card-content>
-                        <v-list>
-                          <v-subheader class="pa-3">
-                            <v-row align-items="center">
-                              <v-col
-                                class="user-list-heading pa-1"
-                                cols="8"
-                              >
-                                Set individual permissions:
-                              </v-col>
-                              <v-col class="user-list-all-select pa-0">
-                                <v-select
-                                  :items="['owner','maintainer','writer','reader']"
-                                  class="no-border ma-0 pa-0"
-                                  hide-details
-                                  dense
-                                  placeholder="change all to"
-                                  prepend-icon="more_horiz"
-                                />
-                              </v-col>
-                            </v-row>
-                          </v-subheader>
-                          <v-divider />
-                          <v-list-item class="px-0">
-                            <v-list-item-avatar>
-                              <v-icon>account_circle</v-icon>
-                            </v-list-item-avatar>
-                            <v-list-item-content>
-                              <v-list-item-title class="blue--text text--darken-2">
-                                jakey.nesby@kitware.com
-                              </v-list-item-title>
-                            </v-list-item-content>
-                            <v-list-item-action class="user-list-individual-select">
-                              <v-select
-                                :items="['owner','maintainer','writer','reader']"
-                                class="no-border ma-0 pa-0"
-                                hide-details
-                                dense
-                                value="owner"
-                                prepend-icon="lock"
-                              />
-                            </v-list-item-action>
-                          </v-list-item>
-                          <v-divider />
-                          <v-list-item class="px-0">
-                            <v-list-item-avatar>
-                              <v-icon>account_circle</v-icon>
-                            </v-list-item-avatar>
-                            <v-list-item-content>
-                              <v-list-item-title class="blue--text text--darken-2">
-                                maca_roni.chowdery@kitware.com
-                              </v-list-item-title>
-                            </v-list-item-content>
-                            <v-list-item-action class="user-list-individual-select">
-                              <v-select
-                                :items="['owner','maintainer','writer','reader']"
-                                class="no-border ma-0 pa-0"
-                                hide-details
-                                dense
-                                value="maintainer"
-                                prepend-icon="lock"
-                              />
-                            </v-list-item-action>
-                          </v-list-item>
-                          <v-divider />
-                          <v-list-item class="px-0">
-                            <v-list-item-avatar>
-                              <v-icon>account_circle</v-icon>
-                            </v-list-item-avatar>
-                            <v-list-item-content>
-                              <v-list-item-title class="blue--text text--darken-2">
-                                jarred.tomatoes@kitware.com
-                              </v-list-item-title>
-                            </v-list-item-content>
-                            <v-list-item-action class="user-list-individual-select">
-                              <v-select
-                                :items="['owner','maintainer','writer','reader']"
-                                class="no-border ma-0 pa-0"
-                                hide-details
-                                dense
-                                value="reader"
-                                prepend-icon="lock"
-                              />
-                            </v-list-item-action>
-                          </v-list-item>
-                          <v-divider />
-                        </v-list>
-                      </v-card-content>
-                      <v-card-actions class="pt-4">
-                        <v-spacer />
-                        <v-btn
-                          color="grey darken-2"
-                          large
-                          text
-                          @click="permDialog = false"
-                        >
-                          Cancel
-                        </v-btn>
-                        <v-btn
-                          color="primary"
-                          depressed
-                          large
-                        >
-                          Save Permissions
-                        </v-btn>
-                      </v-card-actions>
-                    </v-card>
-                  </v-card-content>
-                </v-card>
-              </v-dialog>
+              <!-- Each listing here should contain a v-list-item -->
+              <PermissionsDialog :workspace="workspace" />
             </v-list>
           </v-card>
         </v-menu>
@@ -362,6 +156,7 @@ import Vue, { PropType } from 'vue';
 import api from '@/api';
 import TablePanel from '@/components/TablePanel.vue';
 import NetworkPanel from '@/components/NetworkPanel.vue';
+import PermissionsDialog from '@/components/PermissionsDialog.vue';
 import store from '@/store';
 
 const surroundingWhitespace = /^\s+|\s+$/;
@@ -375,6 +170,7 @@ export default Vue.extend({
   components: {
     TablePanel,
     NetworkPanel,
+    PermissionsDialog,
   },
   props: {
     workspace: {
@@ -389,8 +185,6 @@ export default Vue.extend({
       requestError: null as string | null,
       loading: false,
       actionsMenu: false,
-      permDialog: false,
-      privacyToggle: true,
     };
   },
 
@@ -417,11 +211,6 @@ export default Vue.extend({
 
       return nodeTables.concat(edgeTables);
     },
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    swapPermIcon(this: any) {
-      return this.privacyToggle ? 'lock' : 'lock_open';
-    },
   },
 
   watch: {
@@ -503,23 +292,6 @@ export default Vue.extend({
   color:#7f9ba4;
 }
 
-.user-list-heading {
-  font-size: 14px !important;
-}
-
-.user-list-individual-select {
-  max-width: 175px;
-}
-
-.v-dialog > .v-card > .v-card__title.perm-title {
-  font-size: 24px;
-  font-weight: 400;
-}
-
-.v-dialog > .v-card > .v-card__title.perm-title strong {
-  font-weight: 600;
-}
-
 .ws-detail-title {
   align-items: center;
   display: flex;
@@ -529,40 +301,6 @@ export default Vue.extend({
 </style>
 
 <style>
-.v-text-field.no-border > .v-input__control > .v-input__slot:before,
-.v-text-field.no-border > .v-input__control > .v-input__slot:after {
-  display: none;
-}
-
-.v-application--is-ltr .no-label .v-input__append-outer,
-.v-application--is-ltr .no-label .v-input__prepend-outer {
-  margin: 0;
-}
-
-.no-label {
-  justify-content: flex-end;
-}
-
-.user-list-all-select .v-select__selections,
-.user-list-individual-select .v-select__selections {
-  font-size: 14px;
-}
-
-.v-application--is-ltr .no-label .v-input--selection-controls__input {
-  margin: 0;
-}
-
-.v-application--is-ltr .no-label .v-input__control {
-  flex-grow: 0;
-  width: unset;
-}
-
-.global-perm-select.v-text-field > .v-input__control > .v-input__slot:before,
-.global-perm-select.v-text-field > .v-input__control > .v-input__slot:after {
-    border-width: 0;
-    border-color: transparent;
-}
-
 .ws-rename.v-text-field {
   height: 64px; /* match toolbar height */
 }

From 0d121b5c9ef28fe2fe47f7e932d37456a6f57deb Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Sun, 2 Aug 2020 22:19:37 -0400
Subject: [PATCH 08/16] Add role changing, use flattened user list

- Fix inverted privacy toggle
- Add cancelChange func, change list name
- Add lodash for object cloning
- Update permissions utils
---
 package.json                         |   3 +
 src/components/PermissionsDialog.vue | 198 +++++++++++++++++++--------
 src/main.ts                          |   2 +
 src/store/index.ts                   |   2 +-
 src/utils/permissions.ts             |  21 +++
 yarn.lock                            |  23 +++-
 6 files changed, 189 insertions(+), 60 deletions(-)
 create mode 100644 src/utils/permissions.ts

diff --git a/package.json b/package.json
index 0cc22923..549b29ef 100644
--- a/package.json
+++ b/package.json
@@ -22,15 +22,18 @@
     "axios": "^0.18.1",
     "core-js": "^2.6.5",
     "direct-vuex": "^0.10.4",
+    "lodash": "^4.17.19",
     "material-design-icons-iconfont": "^5.0.1",
     "multinet": "0.13.0",
     "vue": "^2.6.10",
+    "vue-async-computed": "^3.8.2",
     "vue-gtag": "^1.2.1",
     "vue-router": "^3.0.2",
     "vuetify": "^2.1.5",
     "vuex": "^3.1.3"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.158",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
     "@vue/cli-plugin-babel": "^3.11.0",
diff --git a/src/components/PermissionsDialog.vue b/src/components/PermissionsDialog.vue
index 3ee6ef82..cabe90c6 100644
--- a/src/components/PermissionsDialog.vue
+++ b/src/components/PermissionsDialog.vue
@@ -25,9 +25,7 @@
           <v-col cols="8">
             Permissions for&nbsp;<strong>{{ workspace }}</strong>
           </v-col>
-          <v-col
-            cols="3"
-          >
+          <v-col cols="3">
             <v-tooltip top>
               <template v-slot:activator="{ on }">
                 <v-switch
@@ -106,7 +104,7 @@
               </v-col>
               <v-col class="user-list-all-select pa-0">
                 <v-select
-                  :items="['owner','maintainer','writer','reader']"
+                  :items="assignableRoleListing"
                   class="no-border ma-0 pa-0"
                   hide-details
                   dense
@@ -117,65 +115,29 @@
             </v-row>
           </v-subheader>
           <v-divider />
-          <v-list-item class="px-0">
-            <v-list-item-avatar>
-              <v-icon>account_circle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title class="blue--text text--darken-2">
-                jakey.nesby@kitware.com
-              </v-list-item-title>
-            </v-list-item-content>
-            <v-list-item-action class="user-list-individual-select">
-              <v-select
-                :items="['owner','maintainer','writer','reader']"
-                class="no-border ma-0 pa-0"
-                hide-details
-                dense
-                value="owner"
-                prepend-icon="lock"
-              />
-            </v-list-item-action>
-          </v-list-item>
-          <v-divider />
-          <v-list-item class="px-0">
-            <v-list-item-avatar>
-              <v-icon>account_circle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title class="blue--text text--darken-2">
-                maca_roni.chowdery@kitware.com
-              </v-list-item-title>
-            </v-list-item-content>
-            <v-list-item-action class="user-list-individual-select">
-              <v-select
-                :items="['owner','maintainer','writer','reader']"
-                class="no-border ma-0 pa-0"
-                hide-details
-                dense
-                value="maintainer"
-                prepend-icon="lock"
-              />
-            </v-list-item-action>
-          </v-list-item>
-          <v-divider />
-          <v-list-item class="px-0">
+          <v-list-item
+            v-for="{ user, role } in userPermissionsList"
+            :key="user.sub"
+            class="px-0"
+          >
             <v-list-item-avatar>
               <v-icon>account_circle</v-icon>
             </v-list-item-avatar>
             <v-list-item-content>
               <v-list-item-title class="blue--text text--darken-2">
-                jarred.tomatoes@kitware.com
+                {{ user.email }}
               </v-list-item-title>
             </v-list-item-content>
             <v-list-item-action class="user-list-individual-select">
               <v-select
-                :items="['owner','maintainer','writer','reader']"
+                :items="role === 'owner' ? totalRoleListing : assignableRoleListing"
                 class="no-border ma-0 pa-0"
                 hide-details
                 dense
-                value="reader"
+                :value="pluralRoleToSingular(role)"
+                :disabled="role === 'owner'"
                 prepend-icon="lock"
+                @input="setRoleForUser(user, role, singularRoleToPlural($event))"
               />
             </v-list-item-action>
           </v-list-item>
@@ -187,7 +149,7 @@
             color="grey darken-2"
             large
             text
-            @click="permDialog = false"
+            @click="cancelChange"
           >
             Cancel
           </v-btn>
@@ -195,6 +157,7 @@
             color="primary"
             depressed
             large
+            @click="setPermissions"
           >
             Save Permissions
           </v-btn>
@@ -205,9 +168,23 @@
 </template>
 
 <script lang="ts">
-
 import Vue, { PropType } from 'vue';
+import api from '@/api';
+import { WorkspacePermissionsSpec, UserSpec } from 'multinet';
+import { cloneDeep } from 'lodash';
+
+import {
+  Role,
+  SingularRole,
+} from '@/utils/permissions';
 
+export interface UserPermissionSpec {
+  role: Role;
+  user: UserSpec;
+}
+
+const assignableRoleListing: SingularRole[] = ['maintainer', 'writer', 'reader'];
+const totalRoleListing: SingularRole[] = [...assignableRoleListing, 'owner'];
 
 export default Vue.extend({
   name: 'PermissionsDialog',
@@ -219,8 +196,11 @@ export default Vue.extend({
   },
   data() {
     return {
+      assignableRoleListing,
+      totalRoleListing,
       permDialog: false,
-      privacyToggle: true,
+      privacyToggle: false,
+      mutablePermissions: null as WorkspacePermissionsSpec | null,
     };
   },
   computed: {
@@ -228,6 +208,114 @@ export default Vue.extend({
     swapPermIcon(this: any) {
       return this.privacyToggle ? 'lock' : 'lock_open';
     },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    filteredWorkspacePermissions(this: any) {
+      // Used to remove the `public` field in the permissions object.
+      if (this.mutablePermissions === null) { return null; }
+
+      const {
+        owner, maintainers, readers, writers,
+      } = this.mutablePermissions as WorkspacePermissionsSpec;
+
+      return {
+        owner,
+        maintainers,
+        readers,
+        writers,
+      };
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    userPermissionsList(this: any): UserPermissionSpec[] {
+      const userPermissionList: UserPermissionSpec[] = [];
+      if (this.filteredWorkspacePermissions === null) return userPermissionList;
+
+      const roles = Object.keys(
+        this.filteredWorkspacePermissions,
+      ) as Role[];
+
+      roles.forEach((role) => {
+        const roleUsers = this.filteredWorkspacePermissions[role];
+
+        if (roleUsers) {
+          if (role === 'owner') {
+            userPermissionList.push({ role, user: roleUsers });
+          } else {
+            roleUsers.forEach((user: UserSpec) => {
+              userPermissionList.push({ role, user });
+            });
+          }
+        }
+      });
+
+      return userPermissionList;
+    },
+  },
+  asyncComputed: {
+    permissions: {
+      async get(): Promise<WorkspacePermissionsSpec> {
+        return api.getWorkspacePermissions(this.workspace);
+      },
+      default: null,
+    },
+  },
+  watch: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    permissions(this: any, val: WorkspacePermissionsSpec) {
+      if (val !== null) {
+        this.initMutableData(val);
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    privacyToggle(this: any, val: boolean) {
+      if (this.mutablePermissions) {
+        this.mutablePermissions.public = !val;
+      }
+    },
+  },
+  methods: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    initMutableData(this: any, permissions: WorkspacePermissionsSpec) {
+      this.mutablePermissions = cloneDeep(permissions);
+      this.privacyToggle = !this.permissions.public;
+    },
+    singularRoleToPlural(role: SingularRole): Role {
+      if (role === 'owner') { return role; }
+
+      return `${role}s` as Role;
+    },
+    pluralRoleToSingular(role: Role): SingularRole {
+      if (role === 'owner') { return role; }
+
+      return role.slice(0, -1) as SingularRole;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setRoleForUser(this: any, user: UserSpec, currentRole: Role, newRole: Role) {
+      const mutablePermissions = this.mutablePermissions as WorkspacePermissionsSpec;
+
+      // Currently don't allow changing owners
+      if (newRole !== currentRole && newRole !== 'owner' && currentRole !== 'owner') {
+        mutablePermissions[newRole].push(user);
+        mutablePermissions[currentRole] = mutablePermissions[currentRole].filter((x) => x.sub !== user.sub);
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // setRoleForAllUsers(this: any, role: string) {
+    //   // Put all of these users into this.mutablePermissions["role"]
+    // },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async setPermissions(this: any) {
+      try {
+        await api.setWorkspacePermissions(this.workspace, this.mutablePermissions);
+        this.permDialog = false;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cancelChange(this: any) {
+      this.permDialog = false;
+      this.initMutableData(this.permissions);
+    },
   },
 });
 </script>
@@ -282,7 +370,7 @@ export default Vue.extend({
 
 .global-perm-select.v-text-field > .v-input__control > .v-input__slot:before,
 .global-perm-select.v-text-field > .v-input__control > .v-input__slot:after {
-    border-width: 0;
-    border-color: transparent;
+  border-width: 0;
+  border-color: transparent;
 }
 </style>
diff --git a/src/main.ts b/src/main.ts
index b4665c2b..3dc93eb2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,5 @@
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
+import AsyncComputed from 'vue-async-computed';
 import Vue from 'vue';
 import App from './App.vue';
 import vuetify from './vuetify';
@@ -7,6 +8,7 @@ import store from './store';
 import './vuegtag';
 
 Vue.config.productionTip = false;
+Vue.use(AsyncComputed);
 
 new Vue({
   render: (h) => h(App),
diff --git a/src/store/index.ts b/src/store/index.ts
index 5266a8cf..1f80e717 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -14,7 +14,7 @@ export interface WorkspaceState {
   graphs: string[];
 }
 
-interface State {
+export interface State {
   workspaces: string[];
   currentWorkspace: WorkspaceState | null;
   userInfo: UserInfo | null;
diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts
new file mode 100644
index 00000000..23713f5d
--- /dev/null
+++ b/src/utils/permissions.ts
@@ -0,0 +1,21 @@
+import { WorkspacePermissionsSpec } from 'multinet';
+import { State } from '@/store';
+
+
+export type Role = 'owner' | 'maintainers' | 'writers' | 'readers';
+export type SingularRole = 'owner' | 'maintainer' | 'writer' | 'reader';
+
+
+export function canChangeWorkspacePermissions(state: State, permissions: WorkspacePermissionsSpec) {
+  if (state.userInfo === null) { return false; }
+
+  const userSub = state.userInfo.sub;
+  const ownerSub = permissions.owner.sub;
+  const maintainerSubs = permissions.maintainers.map((user) => user.sub);
+
+  if (maintainerSubs.includes(userSub) || userSub === ownerSub) {
+    return true;
+  }
+
+  return false;
+}
diff --git a/yarn.lock b/yarn.lock
index 2878e92e..1ac4dd31 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -777,6 +777,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
   integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==
 
+"@types/lodash@^4.14.158":
+  version "4.14.158"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.158.tgz#b38ea8b6fe799acd076d7a8d7ab71c26ef77f785"
+  integrity sha512-InCEXJNTv/59yO4VSfuvNrZHt7eeNtWQEgnieIA+mIC+MOWM9arOWG2eQ8Vhk6NbOre6/BidiXhkZYeDY9U35w==
+
 "@types/mime-types@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@types/mime-types/-/mime-types-2.1.0.tgz#9ca52cda363f699c69466c2a6ccdaad913ea7a73"
@@ -5459,6 +5464,11 @@ lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
+lodash@^4.17.19:
+  version "4.17.19"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -5834,10 +5844,10 @@ multimatch@^2.1.0:
     arrify "^1.0.0"
     minimatch "^3.0.0"
 
-multinet@0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.12.0.tgz#44c4c47272a609373edabf384c637f1d5641ae39"
-  integrity sha512-dkufPqpnRX6KNYPdxtE3cOKXtmyIQiZS1kCH6NjeALrP/a5+/eptEunN45cGL7huCIV8PLeLxkmkpLS6nr1M+A==
+multinet@0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.13.0.tgz#a054347742456da5a1a5177f1be96614bdd8f495"
+  integrity sha512-zW9g6mddW9oX2NZ4ZH3E9MZ1SweJB7OfQZMqvwjHRbDi2DLmxpKSdPyN0fUrbDEd3Jv/oVeonogusZEJ6NxTog==
   dependencies:
     axios "^0.19.0"
 
@@ -8889,6 +8899,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-async-computed@^3.8.2:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/vue-async-computed/-/vue-async-computed-3.8.2.tgz#d5dff221b62f95ad2f98ce9e7bbea5a067ec8b9a"
+  integrity sha512-If5roOhp/x0WWd0TWRD77YsuFoiIw3MbkcRlIB/FE3TqQCPje52eQp5CV5NN/7B0VAyPuGX5JQa+rc9AOcGAYw==
+
 vue-cli-plugin-vuetify@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.5.tgz#09ba78928653fc7e3801ea37e5120f957413dda4"

From adebc130738f31666d7cc0ce68bcaa547d1a3300 Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Mon, 3 Aug 2020 12:16:29 -0400
Subject: [PATCH 09/16] Add setting roles for all users

---
 src/components/PermissionsDialog.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/PermissionsDialog.vue b/src/components/PermissionsDialog.vue
index cabe90c6..abb5d515 100644
--- a/src/components/PermissionsDialog.vue
+++ b/src/components/PermissionsDialog.vue
@@ -110,6 +110,7 @@
                   dense
                   placeholder="change all to"
                   prepend-icon="more_horiz"
+                  @input="setRoleForAllUsers(singularRoleToPlural($event))"
                 />
               </v-col>
             </v-row>
@@ -299,9 +300,20 @@ export default Vue.extend({
       }
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    // setRoleForAllUsers(this: any, role: string) {
-    //   // Put all of these users into this.mutablePermissions["role"]
-    // },
+    setRoleForAllUsers(this: any, role: Role) {
+      const userList: UserSpec[] = (this.userPermissionsList as UserPermissionSpec[])
+        .filter((user: UserPermissionSpec) => user.role !== 'owner')
+        .map((user) => user.user);
+
+      this.mutablePermissions = {
+        owner: this.mutablePermissions.owner,
+        public: this.mutablePermissions.public,
+        maintainers: [],
+        writers: [],
+        readers: [],
+        [role]: userList,
+      };
+    },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     async setPermissions(this: any) {
       try {

From 9ec3fa54ab4e08fbcb706d926a73f82188134f22 Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Mon, 3 Aug 2020 13:27:21 -0400
Subject: [PATCH 10/16] Disable permission dialog if unauthorized

Replace UserInfo with newly added UserSpec in multinetjs
---
 src/components/PermissionsDialog.vue | 15 +++++++++++++--
 src/store/index.ts                   |  6 +++---
 src/utils/permissions.ts             | 11 ++++-------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/PermissionsDialog.vue b/src/components/PermissionsDialog.vue
index abb5d515..df86ccb7 100644
--- a/src/components/PermissionsDialog.vue
+++ b/src/components/PermissionsDialog.vue
@@ -6,6 +6,7 @@
     <template v-slot:activator="{ on }">
       <v-list-item
         ripple
+        :disabled="!workspacePermissionsEditable"
         v-on="on"
       >
         <v-list-item-icon class="mr-3">
@@ -174,9 +175,11 @@ import api from '@/api';
 import { WorkspacePermissionsSpec, UserSpec } from 'multinet';
 import { cloneDeep } from 'lodash';
 
+import store from '@/store';
 import {
   Role,
   SingularRole,
+  canChangeWorkspacePermissions,
 } from '@/utils/permissions';
 
 export interface UserPermissionSpec {
@@ -205,6 +208,10 @@ export default Vue.extend({
     };
   },
   computed: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    workspacePermissionsEditable(this: any) {
+      return canChangeWorkspacePermissions(store.state.userInfo, this.permissions);
+    },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     swapPermIcon(this: any) {
       return this.privacyToggle ? 'lock' : 'lock_open';
@@ -253,8 +260,12 @@ export default Vue.extend({
   },
   asyncComputed: {
     permissions: {
-      async get(): Promise<WorkspacePermissionsSpec> {
-        return api.getWorkspacePermissions(this.workspace);
+      async get(): Promise<WorkspacePermissionsSpec | null> {
+        try {
+          return api.getWorkspacePermissions(this.workspace);
+        } catch (error) {
+          return null;
+        }
       },
       default: null,
     },
diff --git a/src/store/index.ts b/src/store/index.ts
index 1f80e717..005e5429 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,9 +1,9 @@
 import Vue from 'vue';
 import Vuex, { Store } from 'vuex';
 import { createDirectStore } from 'direct-vuex';
+import { UserSpec } from 'multinet';
 
 import api, { getUserInfo, logout } from '@/api';
-import { UserInfo } from '@/types';
 
 Vue.use(Vuex);
 
@@ -17,7 +17,7 @@ export interface WorkspaceState {
 export interface State {
   workspaces: string[];
   currentWorkspace: WorkspaceState | null;
-  userInfo: UserInfo | null;
+  userInfo: UserSpec | null;
 }
 
 const {
@@ -67,7 +67,7 @@ const {
       state.currentWorkspace = null;
     },
 
-    setUserInfo(state, userInfo: UserInfo | null) {
+    setUserInfo(state, userInfo: UserSpec | null) {
       state.userInfo = userInfo;
     },
   },
diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts
index 23713f5d..ebc767d1 100644
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -1,15 +1,12 @@
-import { WorkspacePermissionsSpec } from 'multinet';
-import { State } from '@/store';
-
+import { WorkspacePermissionsSpec, UserSpec } from 'multinet';
 
 export type Role = 'owner' | 'maintainers' | 'writers' | 'readers';
 export type SingularRole = 'owner' | 'maintainer' | 'writer' | 'reader';
 
+export function canChangeWorkspacePermissions(userInfo: UserSpec | null, permissions: WorkspacePermissionsSpec | null): boolean {
+  if (!userInfo || !permissions) { return false; }
 
-export function canChangeWorkspacePermissions(state: State, permissions: WorkspacePermissionsSpec) {
-  if (state.userInfo === null) { return false; }
-
-  const userSub = state.userInfo.sub;
+  const userSub = userInfo.sub;
   const ownerSub = permissions.owner.sub;
   const maintainerSubs = permissions.maintainers.map((user) => user.sub);
 

From bbcaf7f2600a47be97b1c254d0b6f0dba97ae88b Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Mon, 3 Aug 2020 13:31:29 -0400
Subject: [PATCH 11/16] Replace all occurances of UserInfo with UserSpec

---
 src/api.ts                   | 5 ++---
 src/components/LoginMenu.vue | 6 +++---
 src/types.ts                 | 9 ---------
 3 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/api.ts b/src/api.ts
index c14424dc..d79a3ad2 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -1,10 +1,9 @@
-import { multinetApi } from 'multinet';
+import { multinetApi, UserSpec } from 'multinet';
 import { host } from '@/environment';
-import { UserInfo } from '@/types';
 
 const api = multinetApi(`${host}/api`);
 
-export async function getUserInfo(): Promise<UserInfo | null> {
+export async function getUserInfo(): Promise<UserSpec | null> {
   const resp = await fetch(`${host}/api/user/info`, {
     credentials: 'include',
   });
diff --git a/src/components/LoginMenu.vue b/src/components/LoginMenu.vue
index 182aef78..da91a7f7 100644
--- a/src/components/LoginMenu.vue
+++ b/src/components/LoginMenu.vue
@@ -61,9 +61,9 @@
 </template>
 
 <script lang="ts">
+import { UserSpec } from 'multinet';
 import { host } from '@/environment';
 import store from '@/store';
-import { UserInfo } from '@/types';
 
 export default {
   data: () => ({
@@ -72,7 +72,7 @@ export default {
   }),
 
   computed: {
-    userInfo: (): UserInfo | null => store.state.userInfo,
+    userInfo: (): UserSpec | null => store.state.userInfo,
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     loginLink(this: any): string {
@@ -86,7 +86,7 @@ export default {
     userInitials(): string {
       // Required due to poor Vue TS support. See
       // https://github.com/multinet-app/multinet-client/pull/80#discussion_r422401040
-      const userInfo = this.userInfo as unknown as UserInfo | null;
+      const userInfo = this.userInfo as unknown as UserSpec | null;
 
       if (userInfo !== null) {
         return `${userInfo.given_name[0]}${userInfo.family_name[0]}`;
diff --git a/src/types.ts b/src/types.ts
index 72e6b688..0f0bc20e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -31,12 +31,3 @@ export interface FileType {
 export interface FileTypeTable {
   [key: string]: FileType;
 }
-
-export interface UserInfo {
-  family_name: string;
-  given_name: string;
-  name: string;
-  picture: string;
-  email: string;
-  sub: string;
-}

From c832ed3ac4c3fcc012fde254dd221d97a0707ec1 Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Mon, 3 Aug 2020 13:55:21 -0400
Subject: [PATCH 12/16] Add button to remove user from workspace

---
 src/components/PermissionsDialog.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/PermissionsDialog.vue b/src/components/PermissionsDialog.vue
index df86ccb7..123b1b00 100644
--- a/src/components/PermissionsDialog.vue
+++ b/src/components/PermissionsDialog.vue
@@ -142,6 +142,15 @@
                 @input="setRoleForUser(user, role, singularRoleToPlural($event))"
               />
             </v-list-item-action>
+            <v-list-item-action>
+              <v-btn
+                icon
+                :disabled="role === 'owner'"
+                @click="removeUserPermissions(user, role)"
+              >
+                <v-icon>close</v-icon>
+              </v-btn>
+            </v-list-item-action>
           </v-list-item>
           <v-divider />
         </v-list>
@@ -326,6 +335,15 @@ export default Vue.extend({
       };
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    removeUserPermissions(this: any, user: UserSpec, currentRole: Role) {
+      if (currentRole === 'owner') return;
+
+      const mutablePermissions = this.mutablePermissions as WorkspacePermissionsSpec;
+      const newRoleList = mutablePermissions[currentRole].filter((x) => x.sub !== user.sub);
+
+      mutablePermissions[currentRole] = newRoleList;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     async setPermissions(this: any) {
       try {
         await api.setWorkspacePermissions(this.workspace, this.mutablePermissions);
@@ -349,7 +367,7 @@ export default Vue.extend({
 }
 
 .user-list-individual-select {
-  max-width: 175px;
+  max-width: 150px;
 }
 
 .v-dialog > .v-card > .v-card__title.perm-title {

From 66d41531f612ec0b14f8b0b89c3a86498bcfffda Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Mon, 3 Aug 2020 15:03:01 -0400
Subject: [PATCH 13/16] Add user search

---
 src/components/PermissionsDialog.vue | 62 ++++++++++++++++++++++++----
 1 file changed, 54 insertions(+), 8 deletions(-)

diff --git a/src/components/PermissionsDialog.vue b/src/components/PermissionsDialog.vue
index 123b1b00..8e0647ee 100644
--- a/src/components/PermissionsDialog.vue
+++ b/src/components/PermissionsDialog.vue
@@ -57,18 +57,24 @@
             cols="10"
           >
             <v-autocomplete
-              :items="['jarred.tomatoes@kitware.com', 'jakey.nesby@kitware.com', 'maca_roni.chowdery@kitware.com']"
-              append-icon=""
-              chips
+              v-model="newUserSelection"
+              :items="userSearchResults"
+              label="Give permissions by email"
               class="px-0"
+              item-text="listing"
+              chips
               deletable-chips
-              label="Give permissions by email"
               full-width
+              return-object
+              multiple
+              outlined
               hide-details
               hide-no-data
               hide-selected
-              multiple
-              outlined
+              :search-input.sync="userSearchString"
+              @update:search-input="throttledUserSearch"
+              @change="userSearchString = null"
+              @keypress.enter="addSelectedUsers"
             />
           </v-col>
           <v-col class="py-0">
@@ -80,6 +86,7 @@
                   fab
                   outlined
                   v-on="on"
+                  @click="addSelectedUsers"
                 >
                   <v-icon>add</v-icon>
                 </v-btn>
@@ -182,7 +189,7 @@
 import Vue, { PropType } from 'vue';
 import api from '@/api';
 import { WorkspacePermissionsSpec, UserSpec } from 'multinet';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, debounce } from 'lodash';
 
 import store from '@/store';
 import {
@@ -196,6 +203,10 @@ export interface UserPermissionSpec {
   user: UserSpec;
 }
 
+export interface UserSearchResult extends UserSpec {
+  listing: string;
+}
+
 const assignableRoleListing: SingularRole[] = ['maintainer', 'writer', 'reader'];
 const totalRoleListing: SingularRole[] = [...assignableRoleListing, 'owner'];
 
@@ -207,13 +218,18 @@ export default Vue.extend({
       required: true,
     },
   },
-  data() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data(this: any) {
     return {
       assignableRoleListing,
       totalRoleListing,
       permDialog: false,
       privacyToggle: false,
       mutablePermissions: null as WorkspacePermissionsSpec | null,
+      throttledUserSearch: debounce(this.searchUsers, 200),
+      userSearchString: null as string | null,
+      userSearchResults: [] as UserSearchResult[],
+      newUserSelection: [] as UserSpec[],
     };
   },
   computed: {
@@ -356,6 +372,36 @@ export default Vue.extend({
     cancelChange(this: any) {
       this.permDialog = false;
       this.initMutableData(this.permissions);
+      this.resetUserSearch();
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async searchUsers(this: any, query: string) {
+      if (!this.userSearchString) { return; }
+
+      const userPermissionList = this.userPermissionsList as UserPermissionSpec[];
+      const userInWorkspace = (user: UserSpec) => (userPermissionList.find((userPerm) => userPerm.user.sub === user.sub));
+
+      const result = await api.searchUsers(query);
+      const mappedResults: UserSearchResult[] = result
+        .map((user) => ({ ...user, listing: `${user.name} (${user.email})` }))
+        .filter((user) => !userInWorkspace(user));
+
+      this.userSearchResults = mappedResults;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    resetUserSearch(this: any) {
+      this.newUserSelection = [];
+      this.userSearchResults = [];
+      this.userSearchString = null;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    addSelectedUsers(this: any) {
+      const mutablePermissions = this.mutablePermissions as WorkspacePermissionsSpec;
+      const newUserSelection = this.newUserSelection as UserSpec[];
+
+      mutablePermissions.readers.push(...newUserSelection);
+
+      this.resetUserSearch();
     },
   },
 });

From a264fe0fc0e008103d0d0c0fe76c598690f2838b Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Wed, 5 Aug 2020 11:47:33 -0400
Subject: [PATCH 14/16] Change public toggle to checkbox

---
 src/components/PermissionsDialog.vue | 35 +++++++++-------------------
 1 file changed, 11 insertions(+), 24 deletions(-)

diff --git a/src/components/PermissionsDialog.vue b/src/components/PermissionsDialog.vue
index 8e0647ee..de36f5ca 100644
--- a/src/components/PermissionsDialog.vue
+++ b/src/components/PermissionsDialog.vue
@@ -26,22 +26,6 @@
           <v-col cols="8">
             Permissions for&nbsp;<strong>{{ workspace }}</strong>
           </v-col>
-          <v-col cols="3">
-            <v-tooltip top>
-              <template v-slot:activator="{ on }">
-                <v-switch
-                  v-model="privacyToggle"
-                  :append-icon="swapPermIcon"
-                  class="no-label ma-0 pa-0 ml-2"
-                  hide-details
-                  inset
-                  v-on="on"
-                />
-              </template>
-              <span v-if="privacyToggle">Make public</span>
-              <span v-else>Make private</span>
-            </v-tooltip>
-          </v-col>
         </v-row>
       </v-card-title>
       <v-card
@@ -162,6 +146,13 @@
           <v-divider />
         </v-list>
         <v-card-actions class="pt-4">
+          <v-checkbox
+            v-model="publicToggle"
+            class="ma-0 mb-2"
+            label="Public"
+            hide-details
+            dense
+          />
           <v-spacer />
           <v-btn
             color="grey darken-2"
@@ -224,7 +215,7 @@ export default Vue.extend({
       assignableRoleListing,
       totalRoleListing,
       permDialog: false,
-      privacyToggle: false,
+      publicToggle: true,
       mutablePermissions: null as WorkspacePermissionsSpec | null,
       throttledUserSearch: debounce(this.searchUsers, 200),
       userSearchString: null as string | null,
@@ -238,10 +229,6 @@ export default Vue.extend({
       return canChangeWorkspacePermissions(store.state.userInfo, this.permissions);
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    swapPermIcon(this: any) {
-      return this.privacyToggle ? 'lock' : 'lock_open';
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     filteredWorkspacePermissions(this: any) {
       // Used to remove the `public` field in the permissions object.
       if (this.mutablePermissions === null) { return null; }
@@ -303,9 +290,9 @@ export default Vue.extend({
       }
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    privacyToggle(this: any, val: boolean) {
+    publicToggle(this: any, val: boolean) {
       if (this.mutablePermissions) {
-        this.mutablePermissions.public = !val;
+        this.mutablePermissions.public = val;
       }
     },
   },
@@ -313,7 +300,7 @@ export default Vue.extend({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     initMutableData(this: any, permissions: WorkspacePermissionsSpec) {
       this.mutablePermissions = cloneDeep(permissions);
-      this.privacyToggle = !this.permissions.public;
+      this.publicToggle = this.permissions.public;
     },
     singularRoleToPlural(role: SingularRole): Role {
       if (role === 'owner') { return role; }

From ad27c05a49770ba8d2a7bc7bf78e1752237cdd7a Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Wed, 5 Aug 2020 12:05:45 -0400
Subject: [PATCH 15/16] Update multinetjs

---
 package.json |  2 +-
 yarn.lock    | 15 +++++----------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 9aa5451b..7070d984 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "direct-vuex": "^0.10.4",
     "lodash": "^4.17.19",
     "material-design-icons-iconfont": "^5.0.1",
-    "multinet": "0.15.0",
+    "multinet": "0.16.0",
     "vue": "^2.6.10",
     "vue-async-computed": "^3.8.2",
     "vue-gtag": "^1.2.1",
diff --git a/yarn.lock b/yarn.lock
index e877d302..23c12ca8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5459,12 +5459,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4:
-  version "4.17.19"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
-  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
-
-lodash@^4.17.19:
+lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.3, lodash@^4.17.4:
   version "4.17.19"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
@@ -5844,10 +5839,10 @@ multimatch@^2.1.0:
     arrify "^1.0.0"
     minimatch "^3.0.0"
 
-multinet@0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.15.0.tgz#2315c7e077e1301e36f52dd58c03c4c0f019dcb1"
-  integrity sha512-mFoIqicVLVwQ5Dbmhx7TucCldL0Usr2rln07glNjAVxdYsrMZ9unq93aBwijgcgVPvU0NZA8CEC1rtfImWWFZQ==
+multinet@0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.16.0.tgz#7361fc87fbc84745f82f45bb8dd5ccd4d6a1f39b"
+  integrity sha512-aqbuRPG5XwGgK1ChhQwGmKkMJcrefbB7H0bKtLIU3OJp1iDwKSWhQ+wdfzPHvPweRt4f798suXdybN1v/uf8hw==
   dependencies:
     axios "^0.19.0"
 

From b3bfa46f398133608c765dc8b1f1a07b639fbac0 Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Thu, 6 Aug 2020 13:24:19 -0400
Subject: [PATCH 16/16] Update public checkbox and add popover menu

---
 src/components/PermissionsDialog.vue | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/PermissionsDialog.vue b/src/components/PermissionsDialog.vue
index de36f5ca..b141f96d 100644
--- a/src/components/PermissionsDialog.vue
+++ b/src/components/PermissionsDialog.vue
@@ -149,10 +149,32 @@
           <v-checkbox
             v-model="publicToggle"
             class="ma-0 mb-2"
-            label="Public"
+            label="Make this workspace public"
             hide-details
             dense
           />
+          <v-menu
+            offset-y
+            top
+            left
+            open-on-hover
+          >
+            <template v-slot:activator="{ on }">
+              <v-icon
+                small
+                class="ml-2 mb-1"
+                v-on="on"
+              >
+                help
+              </v-icon>
+            </template>
+            <v-card width="20vw">
+              <v-card-text>
+                Public workspaces are readable by all users, even those who are not logged in.
+                You can revoke this at any time by unchecking the box.
+              </v-card-text>
+            </v-card>
+          </v-menu>
           <v-spacer />
           <v-btn
             color="grey darken-2"