From 3c15fa8809a4e0b06c1f798d902cd289bbc161a7 Mon Sep 17 00:00:00 2001
From: Mike <mike.tasset@gmail.com>
Date: Tue, 6 Aug 2024 10:03:22 +0200
Subject: [PATCH] Feat: Add member settings page (#2574)

---
 .../components/form/select/WorkspaceRoles.vue |  83 +++++++++
 .../project/model-page/dialog/MoveTo.vue      |   5 +-
 .../frontend-2/components/settings/Dialog.vue |   7 +-
 .../components/settings/SectionHeader.vue     |   3 +-
 .../settings/shared/ChangeRoleDialog.vue      |  52 ++++++
 .../settings/workspaces/Members.vue           |  37 ++++
 .../settings/workspaces/members/Table.vue     | 160 ++++++++++++++++++
 .../viewer/resources/add-model/Dialog.vue     |   5 +-
 .../lib/common/generated/gql/gql.ts           |  10 ++
 .../lib/common/generated/gql/graphql.ts       |  23 ++-
 .../lib/settings/graphql/queries.ts           |  18 ++
 .../frontend-2/lib/settings/helpers/utils.ts  |   7 +
 .../lib/workspaces/graphql/mutations.ts       |  15 ++
 .../frontend-2/pages/projects/[id]/index.vue  |   6 +-
 packages/shared/src/core/constants.ts         |   2 +-
 packages/ui-components/src/lib.ts             |   4 +-
 16 files changed, 420 insertions(+), 17 deletions(-)
 create mode 100644 packages/frontend-2/components/form/select/WorkspaceRoles.vue
 create mode 100644 packages/frontend-2/components/settings/shared/ChangeRoleDialog.vue
 create mode 100644 packages/frontend-2/components/settings/workspaces/Members.vue
 create mode 100644 packages/frontend-2/components/settings/workspaces/members/Table.vue
 create mode 100644 packages/frontend-2/lib/settings/helpers/utils.ts
 create mode 100644 packages/frontend-2/lib/workspaces/graphql/mutations.ts

diff --git a/packages/frontend-2/components/form/select/WorkspaceRoles.vue b/packages/frontend-2/components/form/select/WorkspaceRoles.vue
new file mode 100644
index 000000000..cc6df772e
--- /dev/null
+++ b/packages/frontend-2/components/form/select/WorkspaceRoles.vue
@@ -0,0 +1,83 @@
+<template>
+  <FormSelectBase
+    v-model="selectedValue"
+    :items="roles"
+    :multiple="multiple"
+    name="workspaceRoles"
+    label="Workspace roles"
+    class="min-w-[110px]"
+    :label-id="labelId"
+    :button-id="buttonId"
+    mount-menu-on-body
+    :fully-control-value="fullyControlValue"
+    size="sm"
+  >
+    <template #nothing-selected>
+      {{ multiple ? 'Select roles' : 'Select role' }}
+    </template>
+    <template #something-selected="{ value }">
+      <template v-if="isMultiItemArrayValue(value)">
+        <div ref="elementToWatchForChanges" class="flex items-center space-x-0.5">
+          <div
+            ref="itemContainer"
+            class="flex flex-wrap overflow-hidden space-x-0.5 h-6"
+          >
+            <div v-for="(item, i) in value" :key="item" class="text-foreground">
+              {{ RoleInfo.Workspace[item] + (i < value.length - 1 ? ', ' : '') }}
+            </div>
+          </div>
+          <div v-if="hiddenSelectedItemCount > 0" class="text-foreground-2 normal">
+            +{{ hiddenSelectedItemCount }}
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="truncate text-foreground">
+          {{ RoleInfo.Workspace[firstItem(value)].title }}
+        </div>
+      </template>
+    </template>
+    <template #option="{ item }">
+      <div class="flex items-center">
+        <span class="truncate">{{ RoleInfo.Workspace[firstItem(item)].title }}</span>
+      </div>
+    </template>
+  </FormSelectBase>
+</template>
+<script setup lang="ts">
+// Todo: Refactor this to have one component for project/server/workspace roles
+
+import { Roles, RoleInfo } from '@speckle/shared'
+import type { Nullable, WorkspaceRoles } from '@speckle/shared'
+import { useFormSelectChildInternals } from '@speckle/ui-components'
+import type { PropType } from 'vue'
+
+type ValueType = WorkspaceRoles | WorkspaceRoles[] | undefined
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: ValueType): void
+}>()
+
+const props = defineProps({
+  multiple: Boolean,
+  modelValue: {
+    type: [String, Array] as PropType<ValueType>,
+    default: undefined
+  },
+  fullyControlValue: Boolean
+})
+
+const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
+const itemContainer = ref(null as Nullable<HTMLElement>)
+const labelId = useId()
+const buttonId = useId()
+
+const { selectedValue, isMultiItemArrayValue, hiddenSelectedItemCount, firstItem } =
+  useFormSelectChildInternals<WorkspaceRoles>({
+    props: toRefs(props),
+    emit,
+    dynamicVisibility: { elementToWatchForChanges, itemContainer }
+  })
+
+const roles = computed(() => Object.values(Roles.Workspace))
+</script>
diff --git a/packages/frontend-2/components/project/model-page/dialog/MoveTo.vue b/packages/frontend-2/components/project/model-page/dialog/MoveTo.vue
index 48a2bbca8..75483ea50 100644
--- a/packages/frontend-2/components/project/model-page/dialog/MoveTo.vue
+++ b/packages/frontend-2/components/project/model-page/dialog/MoveTo.vue
@@ -8,7 +8,7 @@
       Move {{ versions.length }} version{{ versions.length > 1 ? 's' : '' }}
     </template>
     <div class="flex flex-col space-y-4">
-      <LayoutTabsHoriztonal v-model:active-item="activeTab" :items="tabItems">
+      <LayoutTabsHorizontal v-model:active-item="activeTab" :items="tabItems">
         <template #default="{ activeItem }">
           <div class="min-h-40">
             <ProjectModelPageDialogMoveToExistingTab
@@ -28,7 +28,7 @@
             />
           </div>
         </template>
-      </LayoutTabsHoriztonal>
+      </LayoutTabsHorizontal>
     </div>
   </LayoutDialog>
 </template>
@@ -38,7 +38,6 @@ import { graphql } from '~~/lib/common/generated/gql'
 import type { ProjectModelPageDialogMoveToVersionFragment } from '~~/lib/common/generated/gql/graphql'
 import { useMixpanel } from '~~/lib/core/composables/mp'
 import { useMoveVersions } from '~~/lib/projects/composables/versionManagement'
-import { LayoutTabsHoriztonal } from '@speckle/ui-components'
 import type { LayoutPageTabItem } from '@speckle/ui-components'
 
 graphql(`
diff --git a/packages/frontend-2/components/settings/Dialog.vue b/packages/frontend-2/components/settings/Dialog.vue
index 34afc376e..476b21204 100644
--- a/packages/frontend-2/components/settings/Dialog.vue
+++ b/packages/frontend-2/components/settings/Dialog.vue
@@ -77,6 +77,7 @@
           !isMobile && 'simple-scrollbar overflow-y-auto flex-1'
         ]"
         :user="user"
+        :workspace-id="targetWorkspaceId"
       />
     </div>
   </LayoutDialog>
@@ -91,6 +92,7 @@ import SettingsServerGeneral from '~/components/settings/server/General.vue'
 import SettingsServerProjects from '~/components/settings/server/Projects.vue'
 import SettingsServerActiveUsers from '~/components/settings/server/ActiveUsers.vue'
 import SettingsServerPendingInvitations from '~/components/settings/server/PendingInvitations.vue'
+import SettingsWorkspacesMembers from '~/components/settings/workspaces/Members.vue'
 import { useBreakpoints } from '@vueuse/core'
 import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
 import { UserIcon, ServerStackIcon } from '@heroicons/vue/24/outline'
@@ -154,7 +156,10 @@ const menuItemConfig = shallowRef<{ [key: string]: { [key: string]: MenuItem } }
     }
   },
   workspace: {
-    // Workspace menu items will be added here, general, members and projects
+    members: {
+      title: 'Members',
+      component: SettingsWorkspacesMembers
+    }
   }
 })
 
diff --git a/packages/frontend-2/components/settings/SectionHeader.vue b/packages/frontend-2/components/settings/SectionHeader.vue
index f30a7c159..1d09f06d1 100644
--- a/packages/frontend-2/components/settings/SectionHeader.vue
+++ b/packages/frontend-2/components/settings/SectionHeader.vue
@@ -24,7 +24,7 @@
     >
       {{ text }}
     </p>
-    <hr v-if="!subheading" class="my-6 md:my-10" />
+    <hr v-if="!subheading && !hideDivider" class="my-6 md:my-10" />
     <slot />
   </div>
 </template>
@@ -46,6 +46,7 @@ withDefaults(
     text?: string
     buttons?: Button[]
     subheading?: boolean
+    hideDivider?: boolean
   }>(),
   {
     buttons: () => []
diff --git a/packages/frontend-2/components/settings/shared/ChangeRoleDialog.vue b/packages/frontend-2/components/settings/shared/ChangeRoleDialog.vue
new file mode 100644
index 000000000..e34dd16fe
--- /dev/null
+++ b/packages/frontend-2/components/settings/shared/ChangeRoleDialog.vue
@@ -0,0 +1,52 @@
+<template>
+  <LayoutDialog v-model:open="open" max-width="sm" :buttons="dialogButtons">
+    <template #header>Change role</template>
+    <div class="flex flex-col gap-4 text-body-xs text-foreground">
+      <p>Are you sure you want to change the role of the selected user?</p>
+      <div v-if="newRole && oldRole" class="flex flex-col gap-3">
+        <div class="flex items-center gap-2 font-semibold">
+          {{ name }}
+        </div>
+        <div class="flex gap-2 items-center">
+          <span>{{ getRoleLabel(oldRole).title }}</span>
+          <ArrowRightIcon class="h-4 w-4" />
+          <span>{{ getRoleLabel(newRole).title }}</span>
+        </div>
+      </div>
+    </div>
+  </LayoutDialog>
+</template>
+
+<script setup lang="ts">
+import type { LayoutDialogButton } from '@speckle/ui-components'
+import type { WorkspaceRoles } from '@speckle/shared'
+import { ArrowRightIcon } from '@heroicons/vue/24/outline'
+import { getRoleLabel } from '~~/lib/settings/helpers/utils'
+
+const emit = defineEmits<{
+  (e: 'updateRole'): void
+}>()
+
+defineProps<{
+  name: string
+  oldRole?: WorkspaceRoles
+  newRole?: WorkspaceRoles
+}>()
+const open = defineModel<boolean>('open', { required: true })
+
+const dialogButtons = computed((): LayoutDialogButton[] => [
+  {
+    text: 'Cancel',
+    props: { color: 'outline', fullWidth: true },
+    onClick: () => (open.value = false)
+  },
+  {
+    text: 'Update',
+    props: { color: 'primary', fullWidth: true },
+    onClick: () => {
+      open.value = false
+      emit('updateRole')
+    }
+  }
+])
+</script>
diff --git a/packages/frontend-2/components/settings/workspaces/Members.vue b/packages/frontend-2/components/settings/workspaces/Members.vue
new file mode 100644
index 000000000..7119f6c0c
--- /dev/null
+++ b/packages/frontend-2/components/settings/workspaces/Members.vue
@@ -0,0 +1,37 @@
+<template>
+  <section>
+    <div class="md:max-w-5xl md:mx-auto pb-6 md:pb-0">
+      <SettingsSectionHeader
+        hide-divider
+        title="Members"
+        text="Manage users in your workspace"
+      />
+      <LayoutTabsHorizontal v-model:active-item="activeTab" :items="tabItems">
+        <template #default="{ activeItem }">
+          <SettingsWorkspacesMembersTable
+            v-if="activeItem.id === 'members'"
+            :workspace-id="workspaceId"
+          />
+          <div v-if="activeItem.id === 'guests'">Guests</div>
+          <div v-if="activeItem.id === 'invites'">Pending invites</div>
+        </template>
+      </LayoutTabsHorizontal>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { LayoutTabItem } from '~~/lib/layout/helpers/components'
+
+defineProps<{
+  workspaceId: string
+}>()
+
+const tabItems = ref<LayoutTabItem[]>([
+  { title: 'Members', id: 'members' },
+  { title: 'Guests', id: 'guests' },
+  { title: 'Pending invites', id: 'invites' }
+])
+
+const activeTab = ref(tabItems.value[0])
+</script>
diff --git a/packages/frontend-2/components/settings/workspaces/members/Table.vue b/packages/frontend-2/components/settings/workspaces/members/Table.vue
new file mode 100644
index 000000000..152b27ace
--- /dev/null
+++ b/packages/frontend-2/components/settings/workspaces/members/Table.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="flex flex-col-reverse md:justify-between md:flex-row md:gap-x-4">
+    <!-- 
+    Todo: Enable search once supported
+    <div class="relative w-full md:max-w-sm mt-6 md:mt-0">
+      <FormTextInput
+        name="search"
+        :custom-icon="MagnifyingGlassIcon"
+        color="foundation"
+        full-width
+        search
+        :show-clear="!!search"
+        placeholder="Search members"
+        class="rounded-md border border-outline-3"
+        :model-value="bind.modelValue.value"
+        v-on="on"
+      />
+    </div> -->
+    <!-- Todo: Make this button functional -->
+    <FormButton>Invite</FormButton>
+  </div>
+  <LayoutTable
+    class="mt-6 md:mt-8"
+    :columns="[
+      { id: 'name', header: 'Name', classes: 'col-span-3' },
+      { id: 'company', header: 'Company', classes: 'col-span-3' },
+      { id: 'verified', header: 'Status', classes: 'col-span-3' },
+      { id: 'role', header: 'Role', classes: 'col-span-2' }
+    ]"
+    :items="members"
+  >
+    <template #name="{ item }">
+      <div class="flex items-center gap-2">
+        <UserAvatar :user="item" />
+        <span class="truncate text-body-xs text-foreground">{{ item.name }}</span>
+      </div>
+    </template>
+    <template #company="{ item }">
+      <span class="text-body-xs text-foreground">
+        {{ item.company ? item.company : '-' }}
+      </span>
+    </template>
+    <template #verified="{ item }">
+      <span class="text-body-xs text-foreground-2">
+        {{ item.verified ? 'Verified' : 'Unverified' }}
+      </span>
+    </template>
+    <template #role="{ item }">
+      <FormSelectWorkspaceRoles
+        :model-value="item.role as WorkspaceRoles"
+        fully-control-value
+        :disabled="!isCurrentUser(item.id)"
+        @update:model-value="
+          (newRoleValue) => openChangeUserRoleDialog(item, newRoleValue)
+        "
+      />
+    </template>
+  </LayoutTable>
+
+  <SettingsSharedChangeRoleDialog
+    v-model:open="showChangeUserRoleDialog"
+    :name="userToModify?.name ?? ''"
+    :old-role="oldRole"
+    :new-role="newRole"
+    @update-role="onUpdateRole"
+  />
+</template>
+
+<script setup lang="ts">
+// Todo: Enable searching once supported
+import type { WorkspaceRoles } from '@speckle/shared'
+// import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
+// import { useDebouncedTextInput } from '@speckle/ui-components'
+import { settingsWorkspacesMembersQuery } from '~~/lib/settings/graphql/queries'
+import { workspaceUpdateRoleMutation } from '~~/lib/workspaces/graphql/mutations'
+import { useActiveUser } from '~~/lib/auth/composables/activeUser'
+import { useMutation, useQuery } from '@vue/apollo-composable'
+import { useGlobalToast, ToastNotificationType } from '~~/lib/common/composables/toast'
+import {
+  convertThrowIntoFetchResult,
+  getFirstErrorMessage
+} from '~~/lib/common/helpers/graphql'
+import type { SettingsWorkspacesMembersQuery } from '~~/lib/common/generated/gql/graphql'
+
+type UserItem = {
+  id: string
+  role: string
+  name: string
+  verified?: boolean | null
+  avatar?: string | null
+  company?: string | null
+}
+
+const props = defineProps<{
+  workspaceId: string
+}>()
+
+const { triggerNotification } = useGlobalToast()
+// const { on, bind, value: search } = useDebouncedTextInput()
+const { activeUser } = useActiveUser()
+const { mutate: updateChangeRole } = useMutation(workspaceUpdateRoleMutation)
+
+const { result } = useQuery<SettingsWorkspacesMembersQuery>(
+  settingsWorkspacesMembersQuery,
+  () => ({
+    workspaceId: props.workspaceId
+  })
+)
+
+const showChangeUserRoleDialog = ref(false)
+const newRole = ref<WorkspaceRoles>()
+const userToModify = ref<UserItem>()
+
+const members = computed(() =>
+  (result.value?.workspace.team || []).map(({ user, ...rest }) => ({
+    ...user,
+    ...rest
+  }))
+)
+
+const oldRole = computed(() => userToModify.value?.role as WorkspaceRoles)
+const isCurrentUser = (id: string) => id === activeUser.value?.id
+
+const openChangeUserRoleDialog = (
+  user: UserItem,
+  newRoleValue?: WorkspaceRoles | WorkspaceRoles[]
+) => {
+  if (!newRoleValue) return
+  userToModify.value = user
+  newRole.value = Array.isArray(newRoleValue) ? newRoleValue[0] : newRoleValue
+  showChangeUserRoleDialog.value = true
+}
+
+const onUpdateRole = async () => {
+  if (!userToModify.value || !newRole.value) return
+
+  const mutationResult = await updateChangeRole({
+    input: {
+      userId: userToModify.value.id,
+      role: newRole.value,
+      workspaceId: props.workspaceId
+    }
+  }).catch(convertThrowIntoFetchResult)
+
+  if (mutationResult?.data?.workspaceMutations?.updateRole) {
+    triggerNotification({
+      type: ToastNotificationType.Success,
+      title: 'User role updated',
+      description: 'The user role has been updated'
+    })
+  } else {
+    const errorMessage = getFirstErrorMessage(mutationResult?.errors)
+    triggerNotification({
+      type: ToastNotificationType.Danger,
+      title: 'Failed to update role',
+      description: errorMessage
+    })
+  }
+}
+</script>
diff --git a/packages/frontend-2/components/viewer/resources/add-model/Dialog.vue b/packages/frontend-2/components/viewer/resources/add-model/Dialog.vue
index af30bc4d4..6bd4ace3a 100644
--- a/packages/frontend-2/components/viewer/resources/add-model/Dialog.vue
+++ b/packages/frontend-2/components/viewer/resources/add-model/Dialog.vue
@@ -2,7 +2,7 @@
   <LayoutDialog v-model:open="open" max-width="lg">
     <template #header>Add model</template>
     <div class="flex flex-col gap-y-4">
-      <LayoutTabsHoriztonal v-model:active-item="activeTab" :items="tabItems">
+      <LayoutTabsHorizontal v-model:active-item="activeTab" :items="tabItems">
         <template #default="{ activeItem }">
           <ViewerResourcesAddModelDialogModelTab
             v-if="activeItem.id === 'model'"
@@ -13,13 +13,12 @@
             @chosen="onObjectsChosen"
           />
         </template>
-      </LayoutTabsHoriztonal>
+      </LayoutTabsHorizontal>
     </div>
   </LayoutDialog>
 </template>
 <script setup lang="ts">
 import { SpeckleViewer } from '@speckle/shared'
-import { LayoutTabsHoriztonal } from '@speckle/ui-components'
 import { useCameraUtilities } from '~/lib/viewer/composables/ui'
 import { useMixpanel } from '~~/lib/core/composables/mp'
 import type { LayoutTabItem } from '~~/lib/layout/helpers/components'
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index 538d9f23a..a3fd88a1e 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -207,6 +207,7 @@ const documents = {
     "\n  query AdminPanelInvitesList($limit: Int!, $cursor: String, $query: String) {\n    admin {\n      inviteList(limit: $limit, cursor: $cursor, query: $query) {\n        cursor\n        items {\n          email\n          id\n          invitedBy {\n            id\n            name\n          }\n        }\n        totalCount\n      }\n    }\n  }\n": types.AdminPanelInvitesListDocument,
     "\n  mutation InviteServerUser($input: [ServerInviteCreateInput!]!) {\n    serverInviteBatchCreate(input: $input)\n  }\n": types.InviteServerUserDocument,
     "\n  query SettingsSidebarWorkspaces {\n    activeUser {\n      workspaces {\n        items {\n          id\n          name\n        }\n      }\n    }\n  }\n": types.SettingsSidebarWorkspacesDocument,
+    "\n  query SettingsWorkspacesMembers($workspaceId: String!) {\n    workspace(id: $workspaceId) {\n      team {\n        role\n        id\n        user {\n          id\n          avatar\n          name\n          company\n          verified\n        }\n      }\n    }\n  }\n": types.SettingsWorkspacesMembersDocument,
     "\n  fragment AppAuthorAvatar on AppAuthor {\n    id\n    name\n    avatar\n  }\n": types.AppAuthorAvatarFragmentDoc,
     "\n  fragment LimitedUserAvatar on LimitedUser {\n    id\n    name\n    avatar\n  }\n": types.LimitedUserAvatarFragmentDoc,
     "\n  fragment ActiveUserAvatar on User {\n    id\n    name\n    avatar\n  }\n": types.ActiveUserAvatarFragmentDoc,
@@ -231,6 +232,7 @@ const documents = {
     "\n  subscription OnViewerUserActivityBroadcasted(\n    $target: ViewerUpdateTrackingTarget!\n    $sessionId: String!\n  ) {\n    viewerUserActivityBroadcasted(target: $target, sessionId: $sessionId) {\n      userName\n      userId\n      user {\n        ...LimitedUserAvatar\n      }\n      state\n      status\n      sessionId\n    }\n  }\n": types.OnViewerUserActivityBroadcastedDocument,
     "\n  subscription OnViewerCommentsUpdated($target: ViewerUpdateTrackingTarget!) {\n    projectCommentsUpdated(target: $target) {\n      id\n      type\n      comment {\n        id\n        parent {\n          id\n        }\n        ...ViewerCommentThread\n      }\n    }\n  }\n": types.OnViewerCommentsUpdatedDocument,
     "\n  fragment LinkableComment on Comment {\n    id\n    viewerResources {\n      modelId\n      versionId\n      objectId\n    }\n  }\n": types.LinkableCommentFragmentDoc,
+    "\n  mutation UpdateRole($input: WorkspaceRoleUpdateInput!) {\n    workspaceMutations {\n      updateRole(input: $input) {\n        id\n        team {\n          id\n          role\n        }\n      }\n    }\n  }\n": types.UpdateRoleDocument,
     "\n  query LegacyBranchRedirectMetadata($streamId: String!, $branchName: String!) {\n    project(id: $streamId) {\n      modelByName(name: $branchName) {\n        id\n      }\n    }\n  }\n": types.LegacyBranchRedirectMetadataDocument,
     "\n  query LegacyViewerCommitRedirectMetadata($streamId: String!, $commitId: String!) {\n    project(id: $streamId) {\n      version(id: $commitId) {\n        id\n        model {\n          id\n        }\n      }\n    }\n  }\n": types.LegacyViewerCommitRedirectMetadataDocument,
     "\n  query LegacyViewerStreamRedirectMetadata($streamId: String!) {\n    project(id: $streamId) {\n      id\n      versions(limit: 1) {\n        totalCount\n        items {\n          id\n          model {\n            id\n          }\n        }\n      }\n    }\n  }\n": types.LegacyViewerStreamRedirectMetadataDocument,
@@ -1034,6 +1036,10 @@ export function graphql(source: "\n  mutation InviteServerUser($input: [ServerIn
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  query SettingsSidebarWorkspaces {\n    activeUser {\n      workspaces {\n        items {\n          id\n          name\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query SettingsSidebarWorkspaces {\n    activeUser {\n      workspaces {\n        items {\n          id\n          name\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query SettingsWorkspacesMembers($workspaceId: String!) {\n    workspace(id: $workspaceId) {\n      team {\n        role\n        id\n        user {\n          id\n          avatar\n          name\n          company\n          verified\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query SettingsWorkspacesMembers($workspaceId: String!) {\n    workspace(id: $workspaceId) {\n      team {\n        role\n        id\n        user {\n          id\n          avatar\n          name\n          company\n          verified\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -1130,6 +1136,10 @@ export function graphql(source: "\n  subscription OnViewerCommentsUpdated($targe
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  fragment LinkableComment on Comment {\n    id\n    viewerResources {\n      modelId\n      versionId\n      objectId\n    }\n  }\n"): (typeof documents)["\n  fragment LinkableComment on Comment {\n    id\n    viewerResources {\n      modelId\n      versionId\n      objectId\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  mutation UpdateRole($input: WorkspaceRoleUpdateInput!) {\n    workspaceMutations {\n      updateRole(input: $input) {\n        id\n        team {\n          id\n          role\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation UpdateRole($input: WorkspaceRoleUpdateInput!) {\n    workspaceMutations {\n      updateRole(input: $input) {\n        id\n        team {\n          id\n          role\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
index b5f675364..eedecdead 100644
--- a/packages/frontend-2/lib/common/generated/gql/graphql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -3774,8 +3774,8 @@ export type Workspace = {
   id: Scalars['ID']['output'];
   /** Only available to workspace owners */
   invitedTeam?: Maybe<Array<PendingWorkspaceCollaborator>>;
-  /** Optional url for workspace logo image */
-  logoUrl?: Maybe<Scalars['String']['output']>;
+  /** Logo image as base64-encoded string */
+  logo?: Maybe<Scalars['String']['output']>;
   name: Scalars['String']['output'];
   projects: ProjectCollection;
   /** Active user's role for this workspace. `null` if request is not authenticated, or the workspace is not explicitly shared with you. */
@@ -3910,7 +3910,8 @@ export type WorkspaceRoleUpdateInput = {
 export type WorkspaceUpdateInput = {
   description?: InputMaybe<Scalars['String']['input']>;
   id: Scalars['String']['input'];
-  logoUrl?: InputMaybe<Scalars['String']['input']>;
+  /** Logo image as base64-encoded string */
+  logo?: InputMaybe<Scalars['String']['input']>;
   name?: InputMaybe<Scalars['String']['input']>;
 };
 
@@ -4861,6 +4862,13 @@ export type SettingsSidebarWorkspacesQueryVariables = Exact<{ [key: string]: nev
 
 export type SettingsSidebarWorkspacesQuery = { __typename?: 'Query', activeUser?: { __typename?: 'User', workspaces: { __typename?: 'WorkspaceCollection', items: Array<{ __typename?: 'Workspace', id: string, name: string }> } } | null };
 
+export type SettingsWorkspacesMembersQueryVariables = Exact<{
+  workspaceId: Scalars['String']['input'];
+}>;
+
+
+export type SettingsWorkspacesMembersQuery = { __typename?: 'Query', workspace: { __typename?: 'Workspace', team: Array<{ __typename?: 'WorkspaceCollaborator', role: string, id: string, user: { __typename?: 'LimitedUser', id: string, avatar?: string | null, name: string, company?: string | null, verified?: boolean | null } }> } };
+
 export type AppAuthorAvatarFragment = { __typename?: 'AppAuthor', id: string, name: string, avatar?: string | null };
 
 export type LimitedUserAvatarFragment = { __typename?: 'LimitedUser', id: string, name: string, avatar?: string | null };
@@ -5008,6 +5016,13 @@ export type OnViewerCommentsUpdatedSubscription = { __typename?: 'Subscription',
 
 export type LinkableCommentFragment = { __typename?: 'Comment', id: string, viewerResources: Array<{ __typename?: 'ViewerResourceItem', modelId?: string | null, versionId?: string | null, objectId: string }> };
 
+export type UpdateRoleMutationVariables = Exact<{
+  input: WorkspaceRoleUpdateInput;
+}>;
+
+
+export type UpdateRoleMutation = { __typename?: 'Mutation', workspaceMutations: { __typename?: 'WorkspaceMutations', updateRole: { __typename?: 'Workspace', id: string, team: Array<{ __typename?: 'WorkspaceCollaborator', id: string, role: string }> } } };
+
 export type LegacyBranchRedirectMetadataQueryVariables = Exact<{
   streamId: Scalars['String']['input'];
   branchName: Scalars['String']['input'];
@@ -5270,6 +5285,7 @@ export const AdminPanelProjectsListDocument = {"kind":"Document","definitions":[
 export const AdminPanelInvitesListDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AdminPanelInvitesList"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"query"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"admin"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"inviteList"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"limit"}}},{"kind":"Argument","name":{"kind":"Name","value":"cursor"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}}},{"kind":"Argument","name":{"kind":"Name","value":"query"},"value":{"kind":"Variable","name":{"kind":"Name","value":"query"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cursor"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"invitedBy"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]}}]} as unknown as DocumentNode<AdminPanelInvitesListQuery, AdminPanelInvitesListQueryVariables>;
 export const InviteServerUserDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"InviteServerUser"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ServerInviteCreateInput"}}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"serverInviteBatchCreate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]} as unknown as DocumentNode<InviteServerUserMutation, InviteServerUserMutationVariables>;
 export const SettingsSidebarWorkspacesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SettingsSidebarWorkspaces"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"activeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspaces"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}}]}}]} as unknown as DocumentNode<SettingsSidebarWorkspacesQuery, SettingsSidebarWorkspacesQueryVariables>;
+export const SettingsWorkspacesMembersDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SettingsWorkspacesMembers"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspace"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"workspaceId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"team"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"verified"}}]}}]}}]}}]}}]} as unknown as DocumentNode<SettingsWorkspacesMembersQuery, SettingsWorkspacesMembersQueryVariables>;
 export const UpdateUserDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateUser"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UserUpdateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"activeUserMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"update"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"user"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"bio"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]}}]}}]} as unknown as DocumentNode<UpdateUserMutation, UpdateUserMutationVariables>;
 export const UpdateNotificationPreferencesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateNotificationPreferences"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"JSONObject"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"userNotificationPreferencesUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"preferences"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]} as unknown as DocumentNode<UpdateNotificationPreferencesMutation, UpdateNotificationPreferencesMutationVariables>;
 export const DeleteAccountDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteAccount"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UserDeleteInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"userDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"userConfirmation"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]} as unknown as DocumentNode<DeleteAccountMutation, DeleteAccountMutationVariables>;
@@ -5287,6 +5303,7 @@ export const ViewerLoadedThreadsDocument = {"kind":"Document","definitions":[{"k
 export const ViewerRawProjectObjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ViewerRawProjectObject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"objectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"object"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"objectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"data"}}]}}]}}]}}]} as unknown as DocumentNode<ViewerRawProjectObjectQuery, ViewerRawProjectObjectQueryVariables>;
 export const OnViewerUserActivityBroadcastedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"OnViewerUserActivityBroadcasted"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"target"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ViewerUpdateTrackingTarget"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sessionId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"viewerUserActivityBroadcasted"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"target"},"value":{"kind":"Variable","name":{"kind":"Name","value":"target"}}},{"kind":"Argument","name":{"kind":"Name","value":"sessionId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sessionId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"userName"}},{"kind":"Field","name":{"kind":"Name","value":"userId"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"sessionId"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]} as unknown as DocumentNode<OnViewerUserActivityBroadcastedSubscription, OnViewerUserActivityBroadcastedSubscriptionVariables>;
 export const OnViewerCommentsUpdatedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"OnViewerCommentsUpdated"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"target"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ViewerUpdateTrackingTarget"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectCommentsUpdated"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"target"},"value":{"kind":"Variable","name":{"kind":"Name","value":"target"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"comment"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"parent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ViewerCommentThread"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"LimitedUserAvatar"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ThreadCommentAttachment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Comment"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attachments"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"fileName"}},{"kind":"Field","name":{"kind":"Name","value":"fileType"}},{"kind":"Field","name":{"kind":"Name","value":"fileSize"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ViewerCommentsReplyItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Comment"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"archived"}},{"kind":"Field","name":{"kind":"Name","value":"rawText"}},{"kind":"Field","name":{"kind":"Name","value":"text"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"doc"}}]}},{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ThreadCommentAttachment"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FormUsersSelectItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"LimitedUser"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ViewerCommentsListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Comment"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"rawText"}},{"kind":"Field","name":{"kind":"Name","value":"archived"}},{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"LimitedUserAvatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"viewedAt"}},{"kind":"Field","name":{"kind":"Name","value":"replies"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"cursor"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ViewerCommentsReplyItem"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"replyAuthors"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"4"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FormUsersSelectItem"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"resources"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resourceId"}},{"kind":"Field","name":{"kind":"Name","value":"resourceType"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ViewerCommentBubblesData"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Comment"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"viewedAt"}},{"kind":"Field","name":{"kind":"Name","value":"viewerState"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ViewerCommentThread"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Comment"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ViewerCommentsListItem"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ViewerCommentBubblesData"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ViewerCommentsReplyItem"}}]}}]} as unknown as DocumentNode<OnViewerCommentsUpdatedSubscription, OnViewerCommentsUpdatedSubscriptionVariables>;
+export const UpdateRoleDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateRole"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"WorkspaceRoleUpdateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspaceMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateRole"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"team"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}}]}}]}}]}}]}}]} as unknown as DocumentNode<UpdateRoleMutation, UpdateRoleMutationVariables>;
 export const LegacyBranchRedirectMetadataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"LegacyBranchRedirectMetadata"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"branchName"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"modelByName"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"name"},"value":{"kind":"Variable","name":{"kind":"Name","value":"branchName"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<LegacyBranchRedirectMetadataQuery, LegacyBranchRedirectMetadataQueryVariables>;
 export const LegacyViewerCommitRedirectMetadataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"LegacyViewerCommitRedirectMetadata"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"commitId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"version"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"commitId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"model"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]}}]} as unknown as DocumentNode<LegacyViewerCommitRedirectMetadataQuery, LegacyViewerCommitRedirectMetadataQueryVariables>;
 export const LegacyViewerStreamRedirectMetadataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"LegacyViewerStreamRedirectMetadata"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"model"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<LegacyViewerStreamRedirectMetadataQuery, LegacyViewerStreamRedirectMetadataQueryVariables>;
diff --git a/packages/frontend-2/lib/settings/graphql/queries.ts b/packages/frontend-2/lib/settings/graphql/queries.ts
index efdcecdd4..c1245a51d 100644
--- a/packages/frontend-2/lib/settings/graphql/queries.ts
+++ b/packages/frontend-2/lib/settings/graphql/queries.ts
@@ -12,3 +12,21 @@ export const settingsSidebarWorkspacesQuery = graphql(`
     }
   }
 `)
+
+export const settingsWorkspacesMembersQuery = graphql(`
+  query SettingsWorkspacesMembers($workspaceId: String!) {
+    workspace(id: $workspaceId) {
+      team {
+        role
+        id
+        user {
+          id
+          avatar
+          name
+          company
+          verified
+        }
+      }
+    }
+  }
+`)
diff --git a/packages/frontend-2/lib/settings/helpers/utils.ts b/packages/frontend-2/lib/settings/helpers/utils.ts
new file mode 100644
index 000000000..27a518544
--- /dev/null
+++ b/packages/frontend-2/lib/settings/helpers/utils.ts
@@ -0,0 +1,7 @@
+import { RoleInfo } from '@speckle/shared'
+
+export const roleLookupTable = RoleInfo.Workspace
+
+export const getRoleLabel = (role: keyof typeof roleLookupTable) => {
+  return roleLookupTable[role] || role.split(':')[1]
+}
diff --git a/packages/frontend-2/lib/workspaces/graphql/mutations.ts b/packages/frontend-2/lib/workspaces/graphql/mutations.ts
new file mode 100644
index 000000000..b42eff47a
--- /dev/null
+++ b/packages/frontend-2/lib/workspaces/graphql/mutations.ts
@@ -0,0 +1,15 @@
+import { graphql } from '~~/lib/common/generated/gql'
+
+export const workspaceUpdateRoleMutation = graphql(`
+  mutation UpdateRole($input: WorkspaceRoleUpdateInput!) {
+    workspaceMutations {
+      updateRole(input: $input) {
+        id
+        team {
+          id
+          role
+        }
+      }
+    }
+  }
+`)
diff --git a/packages/frontend-2/pages/projects/[id]/index.vue b/packages/frontend-2/pages/projects/[id]/index.vue
index 2f164b41e..f84cb6af5 100644
--- a/packages/frontend-2/pages/projects/[id]/index.vue
+++ b/packages/frontend-2/pages/projects/[id]/index.vue
@@ -12,9 +12,9 @@
         <ProjectPageHeader :project="project" />
         <ProjectPageTeamBlock :project="project" class="w-full md:w-72 shrink-0" />
       </div>
-      <LayoutTabsHoriztonal v-model:active-item="activePageTab" :items="pageTabItems">
+      <LayoutTabsHorizontal v-model:active-item="activePageTab" :items="pageTabItems">
         <NuxtPage :project="project" />
-      </LayoutTabsHoriztonal>
+      </LayoutTabsHorizontal>
     </div>
   </div>
 </template>
@@ -24,7 +24,7 @@ import { Roles, type Optional } from '@speckle/shared'
 import { graphql } from '~~/lib/common/generated/gql'
 import { projectPageQuery } from '~~/lib/projects/graphql/queries'
 import { useGeneralProjectPageUpdateTracking } from '~~/lib/projects/composables/projectPages'
-import { LayoutTabsHoriztonal, type LayoutPageTabItem } from '@speckle/ui-components'
+import { LayoutTabsHorizontal, type LayoutPageTabItem } from '@speckle/ui-components'
 import { projectRoute, projectWebhooksRoute } from '~/lib/common/helpers/route'
 
 graphql(`
diff --git a/packages/shared/src/core/constants.ts b/packages/shared/src/core/constants.ts
index 8d674fc07..40eb5506e 100644
--- a/packages/shared/src/core/constants.ts
+++ b/packages/shared/src/core/constants.ts
@@ -59,7 +59,7 @@ export const RoleInfo = Object.freeze(<const>{
         'A role assigned workspace members. They have access to resources in the workspace.'
     },
     [Roles.Workspace.Guest]: {
-      title: 'Member',
+      title: 'Guest',
       description:
         'A role assigned workspace guests. Their access to resources in the workspace is limited to resources they have explicit roles on.'
     }
diff --git a/packages/ui-components/src/lib.ts b/packages/ui-components/src/lib.ts
index cf9c6b9d0..10b4993c3 100644
--- a/packages/ui-components/src/lib.ts
+++ b/packages/ui-components/src/lib.ts
@@ -58,7 +58,7 @@ import {
 } from '~~/src/composables/common/window'
 import LayoutMenu from '~~/src/components/layout/Menu.vue'
 import type { LayoutMenuItem, LayoutTabItem } from '~~/src/helpers/layout/components'
-import LayoutTabsHoriztonal from '~~/src/components/layout/tabs/Horizontal.vue'
+import LayoutTabsHorizontal from '~~/src/components/layout/tabs/Horizontal.vue'
 import LayoutTabsVertical from '~~/src/components/layout/tabs/Vertical.vue'
 import LayoutTable from '~~/src/components/layout/Table.vue'
 import InfiniteLoading from '~~/src/components/InfiniteLoading.vue'
@@ -147,7 +147,7 @@ export {
   useOnBeforeWindowUnload,
   useResponsiveHorizontalDirectionCalculation,
   LayoutMenu,
-  LayoutTabsHoriztonal,
+  LayoutTabsHorizontal,
   LayoutTabsVertical,
   LayoutTable,
   LayoutSidebar,