From 5550efa093eebde2fff85a2f74185f1c0f43c4e9 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 1 Oct 2025 11:26:24 +0200
Subject: [PATCH 1/6] fix(admin-settings): only show relevant groups in
 user-group assignment

For removing groups, only show groups the user(s) are assigned to. For adding groups for one user, only show groups the uses is not already assigned to. For multiple users, we just show all groups because computing the intersection feels a bit overkill.
---
 .../src/components/Users/AddToGroupsModal.vue | 15 ++++++++--
 .../Users/RemoveFromGroupsModal.vue           | 11 +++++--
 .../users/useUserActionsRemoveFromGroups.ts   |  4 +++
 .../components/Users/AddToGroupsModal.spec.ts | 29 ++++++++++++++++++-
 .../Users/RemoveFromGroupsModal.spec.ts       | 14 ++++++++-
 .../useUserActionsRemoveFromGroups.spec.ts    |  7 +++--
 6 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue b/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
index d756aa70dd..01cef2e93f 100644
--- a/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
@@ -1,7 +1,7 @@
 <template>
   <group-select
     :selected-groups="selectedOptions"
-    :group-options="groups"
+    :group-options="availableGroups"
     :position-fixed="true"
     required-mark
     @selected-option-change="changeSelectedGroupOption"
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref, ref, unref, watch } from 'vue'
+import { computed, defineComponent, PropType, Ref, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import GroupSelect from './GroupSelect.vue'
@@ -42,6 +42,16 @@ export default defineComponent({
       selectedOptions.value = options
     }
 
+    const availableGroups = computed(() => {
+      if (props.users.length > 1) {
+        // return all groups if multiple users are selected since we don't want to compute the intersection
+        return props.groups
+      }
+      return props.groups.filter(
+        (group) => !props.users.some((user) => user.memberOf.some(({ id }) => id === group.id))
+      )
+    })
+
     watch(
       selectedOptions,
       () => {
@@ -134,6 +144,7 @@ export default defineComponent({
     return {
       selectedOptions,
       changeSelectedGroupOption,
+      availableGroups,
 
       // unit tests
       onConfirm
diff --git a/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue b/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
index 8680178f48..3ee9c6fe1f 100644
--- a/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
@@ -1,7 +1,7 @@
 <template>
   <group-select
     :selected-groups="selectedOptions"
-    :group-options="groups"
+    :group-options="availableGroups"
     :position-fixed="true"
     required-mark
     @selected-option-change="changeSelectedGroupOption"
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref, ref, unref, watch } from 'vue'
+import { computed, defineComponent, PropType, Ref, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import GroupSelect from './GroupSelect.vue'
@@ -42,6 +42,12 @@ export default defineComponent({
       selectedOptions.value = options
     }
 
+    const availableGroups = computed(() => {
+      return props.groups.filter((group) =>
+        props.users.some((user) => user.memberOf.some(({ id }) => id === group.id))
+      )
+    })
+
     watch(
       selectedOptions,
       () => {
@@ -134,6 +140,7 @@ export default defineComponent({
     return {
       selectedOptions,
       changeSelectedGroupOption,
+      availableGroups,
 
       // unit tests
       onConfirm
diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts
index c2f8776803..e6f6ba0b5e 100644
--- a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts
@@ -39,6 +39,10 @@ export const useUserActionsRemoveFromGroups = ({ groups }: { groups: Ref<Group[]
           return false
         }
 
+        if (resources.every(({ memberOf }) => !memberOf?.length)) {
+          return false
+        }
+
         return resources.length > 0
       },
       handler
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
index af4180787a..88004da1c7 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
@@ -4,6 +4,7 @@ import { mock } from 'vitest-mock-extended'
 import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import { Modal, useMessages } from '@opencloud-eu/web-pkg'
 import { useUserSettingsStore } from '../../../../src/composables/stores/userSettings'
+import GroupSelect from '../../../../src/components/Users/GroupSelect.vue'
 
 describe('AddToGroupsModal', () => {
   it('renders the input', () => {
@@ -11,6 +12,32 @@ describe('AddToGroupsModal', () => {
     expect(wrapper.find('group-select-stub').exists()).toBeTruthy()
   })
 
+  describe('available groups', () => {
+    it('lists all available groups if user is not assigned to any', () => {
+      const users = [mock<User>({ memberOf: [] })]
+      const groups = [mock<Group>(), mock<Group>()]
+      const { wrapper } = getWrapper({ users, groups })
+      const input = wrapper.findComponent<typeof GroupSelect>('group-select-stub')
+      expect(input.props('groupOptions').length).toBe(groups.length)
+    })
+    it('only lists groups the user is not already assigned to if one user given', () => {
+      const assignedGroup = mock<Group>({ id: '1' })
+      const users = [mock<User>({ memberOf: [assignedGroup] })]
+      const groups = [assignedGroup, mock<Group>()]
+      const { wrapper } = getWrapper({ users, groups })
+      const input = wrapper.findComponent<typeof GroupSelect>('group-select-stub')
+      expect(input.props('groupOptions').length).toBe(1)
+    })
+    it('lists all available groups if more than one user given', () => {
+      const assignedGroup = mock<Group>({ id: '1' })
+      const users = [mock<User>({ memberOf: [assignedGroup] }), mock<User>({ memberOf: [] })]
+      const groups = [assignedGroup, mock<Group>()]
+      const { wrapper } = getWrapper({ users, groups })
+      const input = wrapper.findComponent<typeof GroupSelect>('group-select-stub')
+      expect(input.props('groupOptions').length).toBe(groups.length)
+    })
+  })
+
   describe('method "onConfirm"', () => {
     it('adds all users to the given groups', async () => {
       const users = [mock<User>({ memberOf: [] }), mock<User>({ memberOf: [] })]
@@ -50,7 +77,7 @@ describe('AddToGroupsModal', () => {
   })
 })
 
-function getWrapper({ users = [mock<User>()], groups = [mock<Group>()] } = {}) {
+function getWrapper({ users = [mock<User>({ memberOf: [] })], groups = [mock<Group>()] } = {}) {
   const mocks = defaultComponentMocks()
 
   return {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
index 966de80bf4..a979caa0b6 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
@@ -4,6 +4,7 @@ import { mock } from 'vitest-mock-extended'
 import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import { Modal, useMessages } from '@opencloud-eu/web-pkg'
 import { useUserSettingsStore } from '../../../../src/composables/stores/userSettings'
+import GroupSelect from '../../../../src/components/Users/GroupSelect.vue'
 
 describe('RemoveFromGroupsModal', () => {
   it('renders the input', () => {
@@ -11,6 +12,17 @@ describe('RemoveFromGroupsModal', () => {
     expect(wrapper.find('group-select-stub').exists()).toBeTruthy()
   })
 
+  describe('available groups', () => {
+    it('lists only groups the user is assigned to', () => {
+      const assignedGroup = mock<Group>({ id: '1' })
+      const users = [mock<User>({ memberOf: [assignedGroup] })]
+      const groups = [assignedGroup, mock<Group>()]
+      const { wrapper } = getWrapper({ users, groups })
+      const input = wrapper.findComponent<typeof GroupSelect>('group-select-stub')
+      expect(input.props('groupOptions').length).toBe(1)
+    })
+  })
+
   describe('method "onConfirm"', () => {
     it('removes all users from the given groups', async () => {
       const users = [
@@ -56,7 +68,7 @@ describe('RemoveFromGroupsModal', () => {
   })
 })
 
-function getWrapper({ users = [mock<User>()], groups = [mock<Group>()] } = {}) {
+function getWrapper({ users = [mock<User>({ memberOf: [] })], groups = [mock<Group>()] } = {}) {
   const mocks = defaultComponentMocks()
 
   return {
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts
index 979a3390bf..89424595d7 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts
@@ -1,7 +1,7 @@
 import { useUserActionsRemoveFromGroups } from '../../../../../src/composables/actions/users/useUserActionsRemoveFromGroups'
 import { mock } from 'vitest-mock-extended'
 import { ref, unref } from 'vue'
-import { User } from '@opencloud-eu/web-client/graph/generated'
+import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import { getComposableWrapper, writable } from '@opencloud-eu/web-test-helpers'
 import { useCapabilityStore, useModals } from '@opencloud-eu/web-pkg'
 
@@ -9,8 +9,9 @@ describe('useUserActionsRemoveFromGroups', () => {
   describe('method "isVisible"', () => {
     it.each([
       { resources: [], isVisible: false },
-      { resources: [mock<User>()], isVisible: true },
-      { resources: [mock<User>(), mock<User>()], isVisible: true }
+      { resources: [mock<User>()], isVisible: false },
+      { resources: [mock<User>({ memberOf: [mock<Group>()] })], isVisible: true },
+      { resources: [mock<User>({ memberOf: [mock<Group>()] }), mock<User>()], isVisible: true }
     ])('requires at least one user to be enabled', ({ resources, isVisible }) => {
       getWrapper({
         setup: ({ actions }) => {

From 8db221ad3e172c0203e99a66aa175e94cfe235d0 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 1 Oct 2025 12:48:36 +0200
Subject: [PATCH 2/6] refactor: AddToGroupsModal to script setup

---
 .../src/components/Users/AddToGroupsModal.vue | 241 ++++++++----------
 .../components/Users/AddToGroupsModal.spec.ts |   6 +-
 2 files changed, 114 insertions(+), 133 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue b/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
index 01cef2e93f..c1d0ece848 100644
--- a/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
@@ -8,147 +8,130 @@
   />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, Ref, ref, unref, watch } from 'vue'
+<script setup lang="ts">
+import { computed, Ref, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import GroupSelect from './GroupSelect.vue'
 import { useClientService, Modal, useMessages } from '@opencloud-eu/web-pkg'
 import { useUserSettingsStore } from '../../composables/stores/userSettings'
 
-export default defineComponent({
-  name: 'AddToGroupsModal',
-  components: { GroupSelect },
-  props: {
-    modal: { type: Object as PropType<Modal>, required: true },
-    groups: {
-      type: Array as PropType<Group[]>,
-      required: true
-    },
-    users: {
-      type: Array as PropType<User[]>,
-      required: true
-    }
-  },
-  emits: ['update:confirmDisabled'],
-  setup(props, { emit, expose }) {
-    const { showMessage, showErrorMessage } = useMessages()
-    const clientService = useClientService()
-    const { $gettext, $ngettext } = useGettext()
-    const userSettingsStore = useUserSettingsStore()
-
-    const selectedOptions: Ref<Group[]> = ref([])
-    const changeSelectedGroupOption = (options: Group[]) => {
-      selectedOptions.value = options
-    }
-
-    const availableGroups = computed(() => {
-      if (props.users.length > 1) {
-        // return all groups if multiple users are selected since we don't want to compute the intersection
-        return props.groups
-      }
-      return props.groups.filter(
-        (group) => !props.users.some((user) => user.memberOf.some(({ id }) => id === group.id))
-      )
-    })
-
-    watch(
-      selectedOptions,
-      () => {
-        emit('update:confirmDisabled', !unref(selectedOptions).length)
-      },
-      { immediate: true }
-    )
+const { groups, users } = defineProps<{
+  modal: Modal
+  groups: Group[]
+  users: User[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:confirmDisabled', value: boolean): void
+}>()
+
+const { showMessage, showErrorMessage } = useMessages()
+const clientService = useClientService()
+const { $gettext, $ngettext } = useGettext()
+const userSettingsStore = useUserSettingsStore()
+
+const selectedOptions: Ref<Group[]> = ref([])
+const changeSelectedGroupOption = (options: Group[]) => {
+  selectedOptions.value = options
+}
+
+const availableGroups = computed(() => {
+  if (users.length > 1) {
+    // return all groups if multiple users are selected since we don't want to compute the intersection
+    return groups
+  }
+  return groups.filter(
+    (group) => !users.some((user) => user.memberOf.some(({ id }) => id === group.id))
+  )
+})
 
-    const onConfirm = async () => {
-      const client = clientService.graphAuthenticated
-      const usersToFetch: string[] = []
-      const promises = unref(selectedOptions).reduce((acc, group) => {
-        for (const user of props.users) {
-          if (!user.memberOf.find((userGroup) => userGroup.id === group.id)) {
-            acc.push(client.groups.addMember(group.id, user.id))
-            if (!usersToFetch.includes(user.id)) {
-              usersToFetch.push(user.id)
-            }
-          }
+watch(
+  selectedOptions,
+  () => {
+    emit('update:confirmDisabled', !unref(selectedOptions).length)
+  },
+  { immediate: true }
+)
+
+const onConfirm = async () => {
+  const client = clientService.graphAuthenticated
+  const usersToFetch: string[] = []
+  const promises = unref(selectedOptions).reduce((acc, group) => {
+    for (const user of users) {
+      if (!user.memberOf.find((userGroup) => userGroup.id === group.id)) {
+        acc.push(client.groups.addMember(group.id, user.id))
+        if (!usersToFetch.includes(user.id)) {
+          usersToFetch.push(user.id)
         }
-        return acc
-      }, [])
-
-      if (!promises.length) {
-        const title = $ngettext(
-          'Group assignment already added',
-          'Group assignments already added',
-          props.users.length * unref(selectedOptions).length
-        )
-        showMessage({ title })
-        return
-      }
-
-      const results = await Promise.allSettled(promises)
-
-      const succeeded = results.filter((r) => r.status === 'fulfilled')
-      if (succeeded.length) {
-        const title =
-          succeeded.length === 1 && unref(selectedOptions).length === 1 && props.users.length === 1
-            ? $gettext('Group assignment "%{group}" was added successfully', {
-                group: unref(selectedOptions)[0].displayName
-              })
-            : $ngettext(
-                '%{groupAssignmentCount} group assignment was added successfully',
-                '%{groupAssignmentCount} group assignments were added successfully',
-                succeeded.length,
-                { groupAssignmentCount: succeeded.length.toString() },
-                true
-              )
-        showMessage({ title })
-      }
-
-      const failed = results.filter((r) => r.status === 'rejected')
-      if (failed.length) {
-        failed.forEach(console.error)
-
-        const title =
-          failed.length === 1 && unref(selectedOptions).length === 1 && props.users.length === 1
-            ? $gettext('Failed to add group assignment "%{group}"', {
-                group: unref(selectedOptions)[0].displayName
-              })
-            : $ngettext(
-                'Failed to add %{groupAssignmentCount} group assignment',
-                'Failed to add %{groupAssignmentCount} group assignments',
-                failed.length,
-                { groupAssignmentCount: failed.length.toString() },
-                true
-              )
-        showErrorMessage({
-          title,
-          errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
-        })
-      }
-
-      try {
-        const usersResponse = await Promise.all(
-          usersToFetch.map((userId) => client.users.getUser(userId))
-        )
-
-        usersResponse.forEach((user) => {
-          userSettingsStore.upsertUser(user)
-        })
-      } catch (e) {
-        console.error(e)
       }
     }
+    return acc
+  }, [])
+
+  if (!promises.length) {
+    const title = $ngettext(
+      'Group assignment already added',
+      'Group assignments already added',
+      users.length * unref(selectedOptions).length
+    )
+    showMessage({ title })
+    return
+  }
+
+  const results = await Promise.allSettled(promises)
+
+  const succeeded = results.filter((r) => r.status === 'fulfilled')
+  if (succeeded.length) {
+    const title =
+      succeeded.length === 1 && unref(selectedOptions).length === 1 && users.length === 1
+        ? $gettext('Group assignment "%{group}" was added successfully', {
+            group: unref(selectedOptions)[0].displayName
+          })
+        : $ngettext(
+            '%{groupAssignmentCount} group assignment was added successfully',
+            '%{groupAssignmentCount} group assignments were added successfully',
+            succeeded.length,
+            { groupAssignmentCount: succeeded.length.toString() },
+            true
+          )
+    showMessage({ title })
+  }
 
-    expose({ onConfirm })
+  const failed = results.filter((r) => r.status === 'rejected')
+  if (failed.length) {
+    failed.forEach(console.error)
+
+    const title =
+      failed.length === 1 && unref(selectedOptions).length === 1 && users.length === 1
+        ? $gettext('Failed to add group assignment "%{group}"', {
+            group: unref(selectedOptions)[0].displayName
+          })
+        : $ngettext(
+            'Failed to add %{groupAssignmentCount} group assignment',
+            'Failed to add %{groupAssignmentCount} group assignments',
+            failed.length,
+            { groupAssignmentCount: failed.length.toString() },
+            true
+          )
+    showErrorMessage({
+      title,
+      errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
+    })
+  }
 
-    return {
-      selectedOptions,
-      changeSelectedGroupOption,
-      availableGroups,
+  try {
+    const usersResponse = await Promise.all(
+      usersToFetch.map((userId) => client.users.getUser(userId))
+    )
 
-      // unit tests
-      onConfirm
-    }
+    usersResponse.forEach((user) => {
+      userSettingsStore.upsertUser(user)
+    })
+  } catch (e) {
+    console.error(e)
   }
-})
+}
+
+defineExpose({ onConfirm })
 </script>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
index 88004da1c7..a5e4b13e34 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
@@ -47,8 +47,7 @@ describe('AddToGroupsModal', () => {
       mocks.$clientService.graphAuthenticated.users.getUser.mockResolvedValue(
         mock<User>({ id: 'e3515ffb-d264-4dfc-8506-6c239f6673b5' })
       )
-
-      wrapper.vm.selectedOptions = groups
+      ;(wrapper.vm as any).selectedOptions = groups
 
       await wrapper.vm.onConfirm()
       const { showMessage } = useMessages()
@@ -65,8 +64,7 @@ describe('AddToGroupsModal', () => {
       const { wrapper, mocks } = getWrapper({ users, groups })
       mocks.$clientService.graphAuthenticated.groups.addMember.mockRejectedValue(new Error(''))
       mocks.$clientService.graphAuthenticated.users.getUser.mockRejectedValue(new Error(''))
-
-      wrapper.vm.selectedOptions = groups
+      ;(wrapper.vm as any).selectedOptions = groups
 
       await wrapper.vm.onConfirm()
       const { showErrorMessage } = useMessages()

From 32af2f7d6b84d0566ac82d79a8f033327f49b56c Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 1 Oct 2025 13:19:44 +0200
Subject: [PATCH 3/6] refactor: RemoveFromGroupsModal to script setup

---
 .../Users/RemoveFromGroupsModal.vue           | 233 ++++++++----------
 .../Users/RemoveFromGroupsModal.spec.ts       |   6 +-
 2 files changed, 110 insertions(+), 129 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue b/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
index 3ee9c6fe1f..ea962981c0 100644
--- a/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
@@ -8,143 +8,126 @@
   />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, Ref, ref, unref, watch } from 'vue'
+<script setup lang="ts">
+import { computed, Ref, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import GroupSelect from './GroupSelect.vue'
 import { useClientService, Modal, useMessages } from '@opencloud-eu/web-pkg'
 import { useUserSettingsStore } from '../../composables/stores/userSettings'
 
-export default defineComponent({
-  name: 'RemoveFromGroupsModal',
-  components: { GroupSelect },
-  props: {
-    modal: { type: Object as PropType<Modal>, required: true },
-    groups: {
-      type: Array as PropType<Group[]>,
-      required: true
-    },
-    users: {
-      type: Array as PropType<User[]>,
-      required: true
-    }
-  },
-  emits: ['update:confirmDisabled'],
-  setup(props, { emit, expose }) {
-    const { showMessage, showErrorMessage } = useMessages()
-    const clientService = useClientService()
-    const { $gettext, $ngettext } = useGettext()
-    const userSettingsStore = useUserSettingsStore()
-
-    const selectedOptions: Ref<Group[]> = ref([])
-    const changeSelectedGroupOption = (options: Group[]) => {
-      selectedOptions.value = options
-    }
-
-    const availableGroups = computed(() => {
-      return props.groups.filter((group) =>
-        props.users.some((user) => user.memberOf.some(({ id }) => id === group.id))
-      )
-    })
-
-    watch(
-      selectedOptions,
-      () => {
-        emit('update:confirmDisabled', !unref(selectedOptions).length)
-      },
-      { immediate: true }
-    )
+const { groups, users } = defineProps<{
+  modal: Modal
+  groups: Group[]
+  users: User[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:confirmDisabled', value: boolean): void
+}>()
+
+const { showMessage, showErrorMessage } = useMessages()
+const clientService = useClientService()
+const { $gettext, $ngettext } = useGettext()
+const userSettingsStore = useUserSettingsStore()
+
+const selectedOptions: Ref<Group[]> = ref([])
+const changeSelectedGroupOption = (options: Group[]) => {
+  selectedOptions.value = options
+}
+
+const availableGroups = computed(() => {
+  return groups.filter((group) =>
+    users.some((user) => user.memberOf.some(({ id }) => id === group.id))
+  )
+})
 
-    const onConfirm = async () => {
-      const client = clientService.graphAuthenticated
-      const usersToFetch: string[] = []
-      const promises = unref(selectedOptions).reduce((acc, group) => {
-        for (const user of props.users) {
-          if (user.memberOf.find((userGroup) => userGroup.id === group.id)) {
-            acc.push(client.groups.deleteMember(group.id, user.id))
-            if (!usersToFetch.includes(user.id)) {
-              usersToFetch.push(user.id)
-            }
-          }
+watch(
+  selectedOptions,
+  () => {
+    emit('update:confirmDisabled', !unref(selectedOptions).length)
+  },
+  { immediate: true }
+)
+
+const onConfirm = async () => {
+  const client = clientService.graphAuthenticated
+  const usersToFetch: string[] = []
+  const promises = unref(selectedOptions).reduce((acc, group) => {
+    for (const user of users) {
+      if (user.memberOf.find((userGroup) => userGroup.id === group.id)) {
+        acc.push(client.groups.deleteMember(group.id, user.id))
+        if (!usersToFetch.includes(user.id)) {
+          usersToFetch.push(user.id)
         }
-        return acc
-      }, [])
-
-      if (!promises.length) {
-        const title = $ngettext(
-          'Group assignment already removed',
-          'Group assignments already removed',
-          props.users.length * unref(selectedOptions).length
-        )
-        showMessage({ title })
-        return
-      }
-
-      const results = await Promise.allSettled(promises)
-
-      const succeeded = results.filter((r) => r.status === 'fulfilled')
-      if (succeeded.length) {
-        const title =
-          succeeded.length === 1 && unref(selectedOptions).length === 1 && props.users.length === 1
-            ? $gettext('Group assignment "%{group}" was deleted successfully', {
-                group: unref(selectedOptions)[0].displayName
-              })
-            : $ngettext(
-                '%{groupAssignmentCount} group assignment was deleted successfully',
-                '%{groupAssignmentCount} group assignments were deleted successfully',
-                succeeded.length,
-                { groupAssignmentCount: succeeded.length.toString() },
-                true
-              )
-        showMessage({ title })
-      }
-
-      const failed = results.filter((r) => r.status === 'rejected')
-      if (failed.length) {
-        failed.forEach(console.error)
-
-        const title =
-          failed.length === 1 && unref(selectedOptions).length === 1 && props.users.length === 1
-            ? $gettext('Failed to delete group assignment "%{group}"', {
-                group: unref(selectedOptions)[0].displayName
-              })
-            : $ngettext(
-                'Failed to delete %{groupAssignmentCount} group assignment',
-                'Failed to delete %{groupAssignmentCount} group assignments',
-                failed.length,
-                { groupAssignmentCount: failed.length.toString() },
-                true
-              )
-        showErrorMessage({
-          title,
-          errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
-        })
-      }
-
-      try {
-        const usersResponse = await Promise.all(
-          usersToFetch.map((userId) => client.users.getUser(userId))
-        )
-
-        usersResponse.forEach((user) => {
-          userSettingsStore.upsertUser(user)
-        })
-      } catch (e) {
-        console.error(e)
       }
     }
+    return acc
+  }, [])
+
+  if (!promises.length) {
+    const title = $ngettext(
+      'Group assignment already removed',
+      'Group assignments already removed',
+      users.length * unref(selectedOptions).length
+    )
+    showMessage({ title })
+    return
+  }
 
-    expose({ onConfirm })
+  const results = await Promise.allSettled(promises)
+
+  const succeeded = results.filter((r) => r.status === 'fulfilled')
+  if (succeeded.length) {
+    const title =
+      succeeded.length === 1 && unref(selectedOptions).length === 1 && users.length === 1
+        ? $gettext('Group assignment "%{group}" was deleted successfully', {
+            group: unref(selectedOptions)[0].displayName
+          })
+        : $ngettext(
+            '%{groupAssignmentCount} group assignment was deleted successfully',
+            '%{groupAssignmentCount} group assignments were deleted successfully',
+            succeeded.length,
+            { groupAssignmentCount: succeeded.length.toString() },
+            true
+          )
+    showMessage({ title })
+  }
 
-    return {
-      selectedOptions,
-      changeSelectedGroupOption,
-      availableGroups,
+  const failed = results.filter((r) => r.status === 'rejected')
+  if (failed.length) {
+    failed.forEach(console.error)
+
+    const title =
+      failed.length === 1 && unref(selectedOptions).length === 1 && users.length === 1
+        ? $gettext('Failed to delete group assignment "%{group}"', {
+            group: unref(selectedOptions)[0].displayName
+          })
+        : $ngettext(
+            'Failed to delete %{groupAssignmentCount} group assignment',
+            'Failed to delete %{groupAssignmentCount} group assignments',
+            failed.length,
+            { groupAssignmentCount: failed.length.toString() },
+            true
+          )
+    showErrorMessage({
+      title,
+      errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
+    })
+  }
 
-      // unit tests
-      onConfirm
-    }
+  try {
+    const usersResponse = await Promise.all(
+      usersToFetch.map((userId) => client.users.getUser(userId))
+    )
+
+    usersResponse.forEach((user) => {
+      userSettingsStore.upsertUser(user)
+    })
+  } catch (e) {
+    console.error(e)
   }
-})
+}
+
+defineExpose({ onConfirm })
 </script>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
index a979caa0b6..63403b0033 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
@@ -35,8 +35,7 @@ describe('RemoveFromGroupsModal', () => {
       mocks.$clientService.graphAuthenticated.users.getUser.mockResolvedValue(
         mock<User>({ id: 'e3515ffb-d264-4dfc-8506-6c239f6673b5' })
       )
-
-      wrapper.vm.selectedOptions = groups
+      ;(wrapper.vm as any).selectedOptions = groups
 
       await wrapper.vm.onConfirm()
       const { showMessage } = useMessages()
@@ -56,8 +55,7 @@ describe('RemoveFromGroupsModal', () => {
       const { wrapper, mocks } = getWrapper({ users, groups })
       mocks.$clientService.graphAuthenticated.groups.deleteMember.mockRejectedValue(new Error(''))
       mocks.$clientService.graphAuthenticated.users.getUser.mockRejectedValue(new Error(''))
-
-      wrapper.vm.selectedOptions = groups
+      ;(wrapper.vm as any).selectedOptions = groups
 
       await wrapper.vm.onConfirm()
       const { showErrorMessage } = useMessages()

From 20c86e43771984c826e2df5763589a0e9e7ce0dd Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 1 Oct 2025 13:24:17 +0200
Subject: [PATCH 4/6] fix(admin-settings): user details panel alignment

---
 .../src/components/Users/SideBar/DetailsPanel.vue               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
index 9f759e55f7..6f0e74f389 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
@@ -6,7 +6,7 @@
   <div
     v-if="multipleUsers"
     id="oc-users-details-multiple-sidebar"
-    class="flex p-4 bg-role-surface-container rounded-sm"
+    class="flex flex-col items-center p-4 bg-role-surface-container rounded-sm"
   >
     <oc-icon name="group" size="xxlarge" />
     <p>{{ multipleUsersSelectedText }}</p>

From 45fa14e5489b6769e4425497596cbf3cd3aab55d Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 1 Oct 2025 13:29:43 +0200
Subject: [PATCH 5/6] refactor: Users DetailsPanel to script setup

---
 .../components/Users/SideBar/DetailsPanel.vue | 122 +++++++-----------
 .../Users/SideBar/DetailsPanel.spec.ts        |  10 +-
 2 files changed, 54 insertions(+), 78 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
index 6f0e74f389..301625f4b3 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-if="noUsers" class="flex flex-col items-center text-center mt-12">
+  <div
+    v-if="noUsers"
+    class="flex flex-col items-center text-center mt-12"
+    data-testid="no-users-selected"
+  >
     <oc-icon name="user" size="xxlarge" />
     <p>{{ $gettext('Select a user to view details') }}</p>
   </div>
@@ -73,86 +77,58 @@
     </dl>
   </div>
 </template>
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script setup lang="ts">
+import { computed } from 'vue'
 import UserInfoBox from './UserInfoBox.vue'
 import { AppRole, User } from '@opencloud-eu/web-client/graph/generated'
 import { formatFileSize, useCapabilityStore } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 
-export default defineComponent({
-  name: 'DetailsPanel',
-  components: {
-    UserInfoBox
-  },
-  props: {
-    user: {
-      type: Object as PropType<User>,
-      required: false,
-      default: null
-    },
-    users: {
-      type: Array as PropType<User[]>,
-      required: true
-    },
-    roles: {
-      type: Array as PropType<AppRole[]>,
-      required: true
-    }
-  },
-  setup() {
-    const language = useGettext()
-    const currentLanguage = computed(() => language.current)
+const {
+  users,
+  roles,
+  user = null
+} = defineProps<{
+  users: User[]
+  roles: AppRole[]
+  user?: User
+}>()
+
+const { current: currentLanguage, $gettext } = useGettext()
+const capabilityStore = useCapabilityStore()
+const { graphUsersEditLoginAllowedDisabled } = storeToRefs(capabilityStore)
+
+const noUsers = computed(() => !users.length)
+const multipleUsers = computed(() => users.length > 1)
+const multipleUsersSelectedText = computed(() => {
+  return $gettext('%{count} users selected', {
+    count: users.length.toString()
+  })
+})
 
-    const capabilityStore = useCapabilityStore()
-    const { graphUsersEditLoginAllowedDisabled } = storeToRefs(capabilityStore)
+const roleDisplayName = computed(() => {
+  const assignedRole = user.appRoleAssignments[0]
 
-    return {
-      currentLanguage,
-      graphUsersEditLoginAllowedDisabled
-    }
-  },
-  computed: {
-    noUsers() {
-      return !this.users.length
-    },
-    multipleUsers() {
-      return this.users.length > 1
-    },
-    multipleUsersSelectedText() {
-      return this.$gettext('%{count} users selected', {
-        count: this.users.length.toString()
-      })
-    },
-    roleDisplayName() {
-      const assignedRole = this.user.appRoleAssignments[0]
+  return (
+    $gettext(roles.find((role) => role.id === assignedRole?.appRoleId)?.displayName || '') || '-'
+  )
+})
+const groupsDisplayValue = computed(() => {
+  return user.memberOf
+    .map((group) => group.displayName)
+    .sort()
+    .join(', ')
+})
+
+const showUserQuota = computed(() => 'total' in (user.drive?.quota || {}))
+const quotaDisplayValue = computed(() => {
+  return user.drive.quota.total === 0
+    ? $gettext('No restriction')
+    : formatFileSize(user.drive.quota.total, currentLanguage)
+})
 
-      return (
-        this.$gettext(
-          this.roles.find((role) => role.id === assignedRole?.appRoleId)?.displayName || ''
-        ) || '-'
-      )
-    },
-    groupsDisplayValue() {
-      return this.user.memberOf
-        .map((group) => group.displayName)
-        .sort()
-        .join(', ')
-    },
-    showUserQuota() {
-      return 'total' in (this.user.drive?.quota || {})
-    },
-    quotaDisplayValue() {
-      return this.user.drive.quota.total === 0
-        ? this.$gettext('No restriction')
-        : formatFileSize(this.user.drive.quota.total, this.currentLanguage)
-    },
-    loginDisplayValue() {
-      return this.user.accountEnabled === false
-        ? this.$gettext('Forbidden')
-        : this.$gettext('Allowed')
-    }
-  }
+const loginDisplayValue = computed(() => {
+  return user.accountEnabled === false ? $gettext('Forbidden') : $gettext('Allowed')
 })
 </script>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/DetailsPanel.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/DetailsPanel.spec.ts
index c1ad32a5ac..5b76afec3a 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/DetailsPanel.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/DetailsPanel.spec.ts
@@ -29,28 +29,28 @@ describe('DetailsPanel', () => {
       const { wrapper } = getWrapper({
         props: { user: null, users: [] }
       })
-      expect(wrapper.vm.noUsers).toBeTruthy()
+      expect(wrapper.find('[data-testid="no-users-selected"]').exists()).toBeTruthy()
     })
     it('should be false if users are given', () => {
       const { wrapper } = getWrapper({ props: { user: defaultUser, users: [defaultUser] } })
-      expect(wrapper.vm.noUsers).toBeFalsy()
+      expect(wrapper.find('[data-testid="no-users-selected"]').exists()).toBeFalsy()
     })
   })
 
   describe('computed method "multipleUsers"', () => {
     it('should be false if no users are given', () => {
       const { wrapper } = getWrapper({ props: { user: null, users: [] } })
-      expect(wrapper.vm.multipleUsers).toBeFalsy()
+      expect(wrapper.find('#oc-users-details-multiple-sidebar').exists()).toBeFalsy()
     })
     it('should be false if one user is given', () => {
       const { wrapper } = getWrapper({ props: { user: defaultUser, users: [defaultUser] } })
-      expect(wrapper.vm.multipleUsers).toBeFalsy()
+      expect(wrapper.find('#oc-users-details-multiple-sidebar').exists()).toBeFalsy()
     })
     it('should be true if multiple users are given', () => {
       const { wrapper } = getWrapper({
         props: { user: null, users: [defaultUser, { displayName: 'user2' } as User] }
       })
-      expect(wrapper.vm.multipleUsers).toBeTruthy()
+      expect(wrapper.find('#oc-users-details-multiple-sidebar').exists()).toBeTruthy()
     })
   })
 })

From 1f7a4b7c199bd221193ef6a2b4f43f2d3c3eb84a Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 2 Oct 2025 06:55:16 +0200
Subject: [PATCH 6/6] test: add unit test for adding multiple users to groups

---
 .../components/Users/RemoveFromGroupsModal.spec.ts   | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
index 63403b0033..1c334bf982 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
@@ -21,6 +21,18 @@ describe('RemoveFromGroupsModal', () => {
       const input = wrapper.findComponent<typeof GroupSelect>('group-select-stub')
       expect(input.props('groupOptions').length).toBe(1)
     })
+    it('lists a sum of all assigned groups when multiple users are selected', () => {
+      const assignedGroup = mock<Group>({ id: '1' })
+      const assignedGroup2 = mock<Group>({ id: '2' })
+      const users = [
+        mock<User>({ memberOf: [assignedGroup] }),
+        mock<User>({ memberOf: [assignedGroup, assignedGroup2] })
+      ]
+      const groups = [assignedGroup, assignedGroup2, mock<Group>()]
+      const { wrapper } = getWrapper({ users, groups })
+      const input = wrapper.findComponent<typeof GroupSelect>('group-select-stub')
+      expect(input.props('groupOptions').length).toBe(2)
+    })
   })
 
   describe('method "onConfirm"', () => {