Fix menu reactivity bug

packages/frontend-2/components/settings/workspaces/members/actions/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :key="computedKey">
     <LayoutMenu
       v-if="actionItems.length"
       v-model:open="showMenu"
@@ -116,10 +116,12 @@ const { hasSingleAdmin } = useWorkspaceLastAdminCheck({
   workspaceSlug: props.workspace?.slug || ''
 })
 
+const computedKey = computed(() => `${props.targetUser.id}-${props.targetUser.role}`)
+
 const { actionItems, isActiveUserTargetUser } = useSettingsMembersActions({
-  workspaceRole: props.workspace?.role,
-  workspaceSlug: props.workspace?.slug,
-  targetUser: props.targetUser
+  workspaceRole: computed(() => props.workspace?.role),
+  workspaceSlug: computed(() => props.workspace?.slug),
+  targetUser: computed(() => props.targetUser)
 })
 
 const dialogToShow = computed(() => ({

packages/frontend-2/lib/settings/composables/menu.ts

@@ -143,24 +143,24 @@ export const useSettingsMenuState = () =>
   }))
 
 export const useSettingsMembersActions = (params: {
-  workspaceRole?: MaybeNullOrUndefined<string>
-  workspaceSlug?: MaybeNullOrUndefined<string>
-  targetUser: SettingsWorkspacesMembersActionsMenu_UserFragment
+  workspaceRole: ComputedRef<MaybeNullOrUndefined<string>>
+  workspaceSlug: ComputedRef<MaybeNullOrUndefined<string>>
+  targetUser: ComputedRef<SettingsWorkspacesMembersActionsMenu_UserFragment>
 }) => {
   const { activeUser } = useActiveUser()
 
   const { hasSingleAdmin } = useWorkspaceLastAdminCheck({
-    workspaceSlug: params.workspaceSlug || ''
+    workspaceSlug: params.workspaceSlug.value || ''
   })
 
   const targetUserRole = computed(() => {
-    return params.targetUser.role
+    return params.targetUser.value.role
   })
 
-  const targetUserSeatType = computed(() => params.targetUser.seatType)
+  const targetUserSeatType = computed(() => params.targetUser.value.seatType)
 
   const isActiveUserWorkspaceAdmin = computed(
-    () => params.workspaceRole === Roles.Workspace.Admin
+    () => params.workspaceRole.value === Roles.Workspace.Admin
   )
 
   const isOnlyAdmin = computed(
@@ -168,7 +168,7 @@ export const useSettingsMembersActions = (params: {
   )
 
   const isActiveUserTargetUser = computed(
-    () => activeUser.value?.id === params.targetUser.id
+    () => activeUser.value?.id === params.targetUser.value.id
   )
 
   const canModifyUser = computed(
@@ -247,7 +247,7 @@ export const useSettingsMembersActions = (params: {
       mainItems.push({
         title: 'Manage project access...',
         id: WorkspaceUserActionTypes.UpdateProjectPermissions,
-        disabled: params.targetUser.projectRoles.length === 0,
+        disabled: params.targetUser.value.projectRoles.length === 0,
         disabledTooltip: 'User is not in any projects'
       })
     }