Downgrade/Remove

packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue

@@ -24,7 +24,13 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar hide-tooltip :user="item.user" />
+          <UserAvatar
+            hide-tooltip
+            :user="item.user"
+            light-style
+            class="bg-foundation"
+            no-bg
+          />
           <span class="truncate text-body-xs text-foreground">
             {{ item.user.name }}
           </span>

packages/frontend-2/components/settings/workspaces/members/InvitesTable.vue

@@ -29,7 +29,14 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar v-if="item.user" hide-tooltip :user="item.user" />
+          <UserAvatar
+            v-if="item.user"
+            hide-tooltip
+            :user="item.user"
+            light-style
+            class="bg-foundation"
+            no-bg
+          />
           <span class="truncate text-body-xs text-foreground">{{ item.title }}</span>
         </div>
       </template>

packages/frontend-2/components/settings/workspaces/members/JoinRequestsTable.vue

@@ -17,7 +17,13 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar hide-tooltip :user="item.user" />
+          <UserAvatar
+            hide-tooltip
+            :user="item.user"
+            light-style
+            class="bg-foundation"
+            no-bg
+          />
           <span class="truncate text-body-xs text-foreground">
             {{ item.user.name }}
           </span>

packages/frontend-2/components/settings/workspaces/members/UpdateDialog.vue

@@ -5,7 +5,13 @@
     <div class="flex flex-col gap-4 mb-4 -mt-1">
       <CommonCard class="bg-foundation-2 !py-4 text-body-2xs">
         <div class="flex flex-row gap-x-2 items-center">
-          <UserAvatar hide-tooltip :user="user" />
+          <UserAvatar
+            hide-tooltip
+            :user="user"
+            light-style
+            class="bg-foundation"
+            no-bg
+          />
           {{ user.name }}
         </div>
       </CommonCard>
@@ -15,7 +21,6 @@
       <p v-if="showRoleInfo" class="text-foreground-2 text-body-2xs">
         {{ roleInfoMessage }}
       </p>
-
       <div v-if="showEditorSeatsInfo" class="text-body-2xs text-foreground-2 leading-5">
         {{ editorSeatsMessage }}
       </div>
@@ -28,6 +33,55 @@ import type { LayoutDialogButton } from '@speckle/ui-components'
 import type { UserItem } from '~/components/settings/workspaces/members/new/MembersTable.vue'
 import { UserUpdateActionTypes } from '~/lib/settings/helpers/types'
 
+const DIALOG_SCENARIOS = {
+  [UserUpdateActionTypes.MakeAdmin]: {
+    title: 'Make an admin?',
+    mainMessage: (seatType: string) =>
+      seatType === 'editor'
+        ? 'They will become project owner for all existing and new workspace projects.'
+        : 'They will be given an editor seat and become project owner for all existing and new workspace projects.',
+    roleInfo:
+      'Admins can edit workspaces, including settings, members and all projects. More about workspace roles.',
+    buttonText: 'Make an admin',
+    showRoleInfo: true,
+    showEditorSeatsInfo: (seatType: string) => seatType === 'viewer'
+  },
+  [UserUpdateActionTypes.MakeGuest]: {
+    title: 'Make a guest?',
+    mainMessage: 'They will lose access to all existing workspace projects.',
+    roleInfo:
+      "Guest can contribute to projects they're invited to. More about workspace roles.",
+    buttonText: 'Make a guest',
+    showRoleInfo: true,
+    showEditorSeatsInfo: () => false
+  },
+  [UserUpdateActionTypes.UpgradeEditor]: {
+    title: 'Upgrade to an editor seat?',
+    mainMessage: 'An editor seat will allow them to create new models and versions.',
+    roleInfo: '',
+    buttonText: 'Upgrade to editor',
+    showRoleInfo: false,
+    showEditorSeatsInfo: () => true
+  },
+  [UserUpdateActionTypes.DowngradeEditor]: {
+    title: 'Downgrade to a viewer seat?',
+    mainMessage:
+      'A viewer seat will allow them to view and receive model, but not send to it.',
+    roleInfo: '',
+    buttonText: 'Downgrade to viewer',
+    showRoleInfo: false,
+    showEditorSeatsInfo: () => true
+  },
+  [UserUpdateActionTypes.RemoveMember]: {
+    title: 'Remove from workspace?',
+    mainMessage: 'They will lose access to all existing workspace projects.',
+    roleInfo: '',
+    buttonText: 'Remove from workspace',
+    showRoleInfo: false,
+    showEditorSeatsInfo: (seatType: string) => seatType === 'editor'
+  }
+} as const
+
 const props = defineProps<{
   user: UserItem
   type?: UserUpdateActionTypes
@@ -37,62 +91,28 @@ const emit = defineEmits<{
   (e: 'makeAdmin'): void
   (e: 'makeGuest'): void
   (e: 'upgradeEditor'): void
+  (e: 'downgradeEditor'): void
   (e: 'removeUser'): void
 }>()
 
 const open = defineModel<boolean>('open', { required: true })
 
-const dialogTitle = computed(() => {
-  switch (props.type) {
-    case UserUpdateActionTypes.MakeAdmin:
-      return 'Make an admin?'
-    case UserUpdateActionTypes.MakeGuest:
-      return 'Make a guest?'
-    case UserUpdateActionTypes.UpgradeEditor:
-      return 'Upgrade to an editor seat?'
-    default:
-      return ''
-  }
-})
+const scenario = computed(() => (props.type ? DIALOG_SCENARIOS[props.type] : null))
 
-const mainMessage = computed(() => {
-  switch (props.type) {
-    case UserUpdateActionTypes.MakeAdmin:
-      return props.user.seatType === 'editor'
-        ? 'They will become project owner for all existing and new workspace projects.'
-        : 'They will be given an editor seat and become project owner for all existing and new workspace projects.'
-    case UserUpdateActionTypes.MakeGuest:
-      return 'They will lose access to all existing workspace projects.'
-    case UserUpdateActionTypes.UpgradeEditor:
-      return 'An editor seat will allow them to create new models and versions.'
-    default:
-      return ''
-  }
-})
-
-const showRoleInfo = computed(
-  () =>
-    props.type === UserUpdateActionTypes.MakeAdmin ||
-    props.type === UserUpdateActionTypes.MakeGuest
+const dialogTitle = computed(() => scenario.value?.title ?? '')
+const mainMessage = computed(() =>
+  typeof scenario.value?.mainMessage === 'function'
+    ? scenario.value.mainMessage(props.user.seatType)
+    : scenario.value?.mainMessage ?? ''
 )
-
-const roleInfoMessage = computed(() => {
-  switch (props.type) {
-    case UserUpdateActionTypes.MakeAdmin:
-      return 'Admins can edit workspaces, including settings, members and all projects. More about workspace roles.'
-    case UserUpdateActionTypes.MakeGuest:
-      return "Guest can contribute to projects they're invited to. More about workspace roles."
-    default:
-      return ''
-  }
-})
-
-const showEditorSeatsInfo = computed(
-  () =>
-    (props.type === UserUpdateActionTypes.MakeAdmin &&
-      props.user.seatType === 'viewer') ||
-    props.type === UserUpdateActionTypes.UpgradeEditor
+const roleInfoMessage = computed(() => scenario.value?.roleInfo ?? '')
+const showRoleInfo = computed(() => scenario.value?.showRoleInfo ?? false)
+const showEditorSeatsInfo = computed(() =>
+  typeof scenario.value?.showEditorSeatsInfo === 'function'
+    ? scenario.value.showEditorSeatsInfo(props.user.seatType)
+    : scenario.value?.showEditorSeatsInfo ?? false
 )
+const buttonText = computed(() => scenario.value?.buttonText ?? '')
 
 const editorSeatsMessage = computed(() => {
   // TODO: Replace with actual editor seats once backend adds support
@@ -103,19 +123,6 @@ const editorSeatsMessage = computed(() => {
   } of ${editorLimit} editor seats included in your plan will be used.`
 })
 
-const buttonText = computed(() => {
-  switch (props.type) {
-    case UserUpdateActionTypes.MakeAdmin:
-      return 'Make an admin'
-    case UserUpdateActionTypes.MakeGuest:
-      return 'Make a guest'
-    case UserUpdateActionTypes.UpgradeEditor:
-      return 'Upgrade to editor'
-    default:
-      return ''
-  }
-})
-
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
@@ -139,6 +146,9 @@ const dialogButtons = computed((): LayoutDialogButton[] => [
         case UserUpdateActionTypes.UpgradeEditor:
           emit('upgradeEditor')
           break
+        case UserUpdateActionTypes.DowngradeEditor:
+          emit('downgradeEditor')
+          break
       }
     }
   }

packages/frontend-2/components/settings/workspaces/members/new/MembersTable.vue

@@ -39,7 +39,13 @@
     >
       <template #name="{ item }">
         <div class="flex items-center gap-2">
-          <UserAvatar hide-tooltip :user="item" />
+          <UserAvatar
+            hide-tooltip
+            :user="item"
+            light-style
+            class="bg-foundation"
+            no-bg
+          />
           <span class="truncate text-body-xs text-foreground">{{ item.name }}</span>
           <CommonBadge
             v-if="item.role === Roles.Workspace.Admin"

packages/frontend-2/lib/settings/helpers/types.ts

@@ -21,5 +21,6 @@ export enum UserUpdateActionTypes {
   LeaveWorkspace = 'leave-workspace',
   MakeAdmin = 'make-admin',
   MakeGuest = 'make-guest',
-  UpgradeEditor = 'upgrade-editor'
+  UpgradeEditor = 'upgrade-editor',
+  DowngradeEditor = 'downgrade-editor'
 }