From 97481c766be63a51d62b12cff591b4711137e518 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 1 Feb 2024 13:48:42 +0100
Subject: [PATCH] Adjust multiple tests

---
 .../components/Groups/SideBar/EditPanel.vue   |  34 ++++-
 .../src/views/Groups.vue                      |  34 +----
 .../Groups/CreateGroupModal.spec.ts           |   9 +-
 .../unit/components/Groups/GroupsList.spec.ts |  72 +++++++--
 .../Groups/SideBar/EditPanel.spec.ts          |  44 +++++-
 .../unit/components/Spaces/SpacesList.spec.ts |  59 ++++++--
 .../__snapshots__/SpacesList.spec.ts.snap     |  28 +++-
 .../components/Users/AddToGroupsModal.spec.ts |   8 +-
 .../components/Users/CreateUserModal.spec.ts  |   5 +-
 .../unit/components/Users/LoginModal.spec.ts  |   8 +-
 .../Users/RemoveFromGroupsModal.spec.ts       |   8 +-
 .../unit/components/Users/UsersList.spec.ts   |  86 ++++++++---
 .../groups/useGroupActionsDelete.spec.ts      |   7 +-
 .../users/useUserActionsDelete.spec.ts        |  11 +-
 .../tests/unit/views/Groups.spec.ts           |  65 +++-----
 .../tests/unit/views/Spaces.spec.ts           |  78 ++++------
 .../tests/unit/views/Users.spec.ts            | 143 ++----------------
 .../views/__snapshots__/Spaces.spec.ts.snap   |   2 +-
 .../views/__snapshots__/Users.spec.ts.snap    |  86 +----------
 packages/web-test-helpers/src/mocks/pinia.ts  |  22 ++-
 20 files changed, 391 insertions(+), 418 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
index 54a5b480aa2..221e7a36ec1 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
@@ -17,7 +17,7 @@
         :compare-object="editGroup"
         :confirm-button-disabled="invalidFormData"
         @revert="revertChanges"
-        @confirm="$emit('confirm', editGroup)"
+        @confirm="onEditGroup(editGroup)"
       ></compare-save-dialog>
     </form>
   </div>
@@ -25,9 +25,11 @@
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue'
 import { Group } from '@ownclouders/web-client/src/generated'
-import { CompareSaveDialog } from '@ownclouders/web-pkg'
+import { CompareSaveDialog, eventBus, useMessages } from '@ownclouders/web-pkg'
 import { MaybeRef, useClientService } from '@ownclouders/web-pkg'
 import GroupInfoBox from './GroupInfoBox.vue'
+import { useGroupSettingsStore } from '../../../composables'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'EditPanel',
@@ -45,6 +47,9 @@ export default defineComponent({
   emits: ['confirm'],
   setup() {
     const clientService = useClientService()
+    const { showErrorMessage } = useMessages()
+    const groupSettingsStore = useGroupSettingsStore()
+    const { $gettext } = useGettext()
 
     const editGroup: MaybeRef<Group> = ref({})
     const formData = ref({
@@ -54,10 +59,30 @@ export default defineComponent({
       }
     })
 
+    const onEditGroup = async (editGroup: Group) => {
+      try {
+        const client = clientService.graphAuthenticated
+        await client.groups.editGroup(editGroup.id, editGroup)
+        const { data: updatedGroup } = await client.groups.getGroup(editGroup.id)
+        groupSettingsStore.upsertGroup(updatedGroup)
+
+        eventBus.publish('sidebar.entity.saved')
+
+        return updatedGroup
+      } catch (error) {
+        console.error(error)
+        showErrorMessage({
+          title: $gettext('Failed to edit group'),
+          errors: [error]
+        })
+      }
+    }
+
     return {
       clientService,
       editGroup,
-      formData
+      formData,
+      onEditGroup
     }
   },
   computed: {
@@ -126,14 +151,17 @@ export default defineComponent({
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
   }
+
   .edit-compare-save-dialog {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
   }
+
   .group-info {
     align-items: center;
     flex-direction: column;
   }
+
   .group-info-display-name {
     font-size: 1.5rem;
   }
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
index 2937ae86d6f..2055b6065ed 100644
--- a/packages/web-app-admin-settings/src/views/Groups.vue
+++ b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -57,18 +57,13 @@ import DetailsPanel from '../components/Groups/SideBar/DetailsPanel.vue'
 import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
 import GroupsList from '../components/Groups/GroupsList.vue'
 import MembersPanel from '../components/Groups/SideBar/MembersPanel.vue'
-import {
-  useGroupActionsDelete,
-  useGroupActionsCreateGroup,
-  useGroupSettingsStore
-} from '../composables'
+import { useGroupSettingsStore } from '../composables'
+import { useGroupActionsCreateGroup, useGroupActionsDelete } from '../composables/actions/groups'
 import {
   NoContentMessage,
   SideBarPanel,
   SideBarPanelContext,
-  eventBus,
   useClientService,
-  useMessages,
   useSideBar
 } from '@ownclouders/web-pkg'
 import { Group } from '@ownclouders/web-client/src/generated'
@@ -91,7 +86,6 @@ export default defineComponent({
     }
   },
   setup() {
-    const { showErrorMessage } = useMessages()
     const template = ref()
     const groupSettingsStore = useGroupSettingsStore()
     const { selectedGroups, groups } = storeToRefs(groupSettingsStore)
@@ -113,31 +107,13 @@ export default defineComponent({
       )
     })
 
-    const onEditGroup = async (editGroup: Group) => {
-      try {
-        const client = clientService.graphAuthenticated
-        await client.groups.editGroup(editGroup.id, editGroup)
-        const { data: updatedGroup } = await client.groups.getGroup(editGroup.id)
-        groupSettingsStore.upsertGroup(updatedGroup)
-
-        eventBus.publish('sidebar.entity.saved')
-
-        return updatedGroup
-      } catch (error) {
-        console.error(error)
-        showErrorMessage({
-          title: $gettext('Failed to edit group'),
-          errors: [error]
-        })
-      }
-    }
-
     const sideBarPanelContext = computed<SideBarPanelContext<unknown, unknown, Group>>(() => {
       return {
         parent: null,
         items: unref(selectedGroups)
       }
     })
+
     const sideBarAvailablePanels = [
       {
         name: 'DetailsPanel',
@@ -155,8 +131,7 @@ export default defineComponent({
         component: EditPanel,
         componentAttrs: ({ items }) => {
           return {
-            group: items.length === 1 ? items[0] : null,
-            onConfirm: onEditGroup
+            group: items.length === 1 ? items[0] : null
           }
         },
         isVisible: ({ items }) => {
@@ -191,7 +166,6 @@ export default defineComponent({
       sideBarAvailablePanels,
       sideBarPanelContext,
       createGroupAction,
-      onEditGroup,
       groupSettingsStore
     }
   },
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/CreateGroupModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/CreateGroupModal.spec.ts
index 22f8282c1f6..72da9c67e0a 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/CreateGroupModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/CreateGroupModal.spec.ts
@@ -9,6 +9,7 @@ import {
 import { mock } from 'vitest-mock-extended'
 import { AxiosResponse } from 'axios'
 import { Modal, eventBus, useMessages } from '@ownclouders/web-pkg'
+import { useGroupSettingsStore } from '../../../../src/composables'
 
 describe('CreateGroupModal', () => {
   describe('computed method "isFormInvalid"', () => {
@@ -80,12 +81,12 @@ describe('CreateGroupModal', () => {
         mockAxiosResolve({ id: 'e3515ffb-d264-4dfc-8506-6c239f6673b5' })
       )
 
-      const eventSpy = vi.spyOn(eventBus, 'publish')
       await wrapper.vm.onConfirm()
 
       const { showMessage } = useMessages()
       expect(showMessage).toHaveBeenCalled()
-      expect(eventSpy).toHaveBeenCalled()
+      const { upsertGroup } = useGroupSettingsStore()
+      expect(upsertGroup).toHaveBeenCalled()
     })
 
     it('should show message on error', async () => {
@@ -100,12 +101,12 @@ describe('CreateGroupModal', () => {
       mocks.$clientService.graphAuthenticated.groups.createGroup.mockRejectedValue(
         mockAxiosResolve({ id: 'e3515ffb-d264-4dfc-8506-6c239f6673b5' })
       )
-      const eventSpy = vi.spyOn(eventBus, 'publish')
       await wrapper.vm.onConfirm()
 
       const { showErrorMessage } = useMessages()
       expect(showErrorMessage).toHaveBeenCalled()
-      expect(eventSpy).not.toHaveBeenCalled()
+      const { upsertGroup } = useGroupSettingsStore()
+      expect(upsertGroup).not.toHaveBeenCalled()
     })
   })
 })
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
index f2993406059..95628ea7513 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
@@ -2,6 +2,7 @@ import GroupsList from '../../../../src/components/Groups/GroupsList.vue'
 import { defaultComponentMocks, defaultPlugins, mount, shallowMount } from 'web-test-helpers'
 import { displayPositionedDropdown, eventBus, queryItemAsString } from '@ownclouders/web-pkg'
 import { SideBarEventTopics } from '@ownclouders/web-pkg'
+import { useGroupSettingsStore } from '../../../../src/composables'
 
 const getGroupMocks = () => [
   { id: '1', members: [] },
@@ -56,36 +57,74 @@ describe('GroupsList', () => {
       ).toEqual([])
     })
   })
-  it('emits events on row click', () => {
-    const groups = getGroupMocks()
-    const { wrapper } = getWrapper({ props: { groups } })
-    wrapper.vm.rowClicked([groups[0]])
-    expect(wrapper.emitted('toggleSelectGroup')).toBeTruthy()
-  })
   it('should show the context menu on right click', async () => {
     const groups = getGroupMocks()
     const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ mountType: mount, props: { groups } })
+    const { wrapper } = getWrapper({ mountType: mount, groups })
     await wrapper.find(`[data-item-id="${groups[0].id}"]`).trigger('contextmenu')
     expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
   })
   it('should show the context menu on context menu button click', async () => {
     const groups = getGroupMocks()
     const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ mountType: mount, props: { groups } })
+    const { wrapper } = getWrapper({ mountType: mount, groups })
     await wrapper.find('.groups-table-btn-action-dropdown').trigger('click')
     expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
   })
   it('should show the group details on details button click', async () => {
     const groups = getGroupMocks()
     const eventBusSpy = vi.spyOn(eventBus, 'publish')
-    const { wrapper } = getWrapper({ mountType: mount, props: { groups } })
+    const { wrapper } = getWrapper({ mountType: mount, groups })
     await wrapper.find('.groups-table-btn-details').trigger('click')
     expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.open)
   })
+  describe('toggle selection', () => {
+    describe('selectGroups method', () => {
+      it('selects all groups', async () => {
+        const groups = getGroupMocks()
+        const { wrapper } = getWrapper({ mountType: shallowMount, groups })
+        wrapper.vm.selectGroups(groups)
+        const { setSelectedGroups } = useGroupSettingsStore()
+        expect(setSelectedGroups).toHaveBeenCalledWith(groups)
+      })
+    })
+    describe('selectGroup method', () => {
+      it('selects a group', async () => {
+        const groups = getGroupMocks()
+        const { wrapper } = getWrapper({ mountType: shallowMount, groups: [groups[0]] })
+        wrapper.vm.selectGroup(groups[0])
+        const { addSelectedGroup } = useGroupSettingsStore()
+        expect(addSelectedGroup).toHaveBeenCalledWith(groups[0])
+      })
+      it('de-selects a selected group', async () => {
+        const groups = getGroupMocks()
+        const { wrapper } = getWrapper({
+          mountType: shallowMount,
+          groups: [groups[0]],
+          selectedGroups: [groups[0]]
+        })
+        wrapper.vm.selectGroup(groups[0])
+        const { setSelectedGroups } = useGroupSettingsStore()
+        expect(setSelectedGroups).toHaveBeenCalledWith([])
+      })
+    })
+    describe('unselectAllGroups method', () => {
+      it('de-selects all selected groups', async () => {
+        const groups = getGroupMocks()
+        const { wrapper } = getWrapper({
+          mountType: shallowMount,
+          groups: [groups[0]],
+          selectedGroups: [groups[0]]
+        })
+        wrapper.vm.unselectAllGroups()
+        const { setSelectedGroups } = useGroupSettingsStore()
+        expect(setSelectedGroups).toHaveBeenCalledWith([])
+      })
+    })
+  })
 })
 
-function getWrapper({ mountType = shallowMount, props = {} } = {}) {
+function getWrapper({ mountType = shallowMount, groups = [], selectedGroups = [] } = {}) {
   vi.mocked(queryItemAsString).mockImplementationOnce(() => '1')
   vi.mocked(queryItemAsString).mockImplementationOnce(() => '100')
   const mocks = defaultComponentMocks()
@@ -93,13 +132,16 @@ function getWrapper({ mountType = shallowMount, props = {} } = {}) {
   return {
     wrapper: mountType(GroupsList, {
       props: {
-        groups: [],
-        selectedGroups: [],
-        headerPosition: 0,
-        ...props
+        headerPosition: 0
       },
       global: {
-        plugins: [...defaultPlugins()],
+        plugins: [
+          ...defaultPlugins({
+            piniaOptions: {
+              groupSettingsStore: { groups, selectedGroups }
+            }
+          })
+        ],
         mocks,
         provide: mocks,
         stubs: {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/EditPanel.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/EditPanel.spec.ts
index 5d75ef6ddfc..abbdbf751d0 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/EditPanel.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/EditPanel.spec.ts
@@ -1,7 +1,14 @@
 import EditPanel from '../../../../../src/components/Groups/SideBar/EditPanel.vue'
-import { defaultComponentMocks, defaultPlugins, mockAxiosReject, mount } from 'web-test-helpers'
+import {
+  defaultComponentMocks,
+  defaultPlugins,
+  mockAxiosReject,
+  mockAxiosResolve,
+  mount
+} from 'web-test-helpers'
 import { mock } from 'vitest-mock-extended'
 import { AxiosResponse } from 'axios'
+import { eventBus, useMessages } from '@ownclouders/web-pkg'
 
 describe('EditPanel', () => {
   it('renders all available inputs', () => {
@@ -56,6 +63,41 @@ describe('EditPanel', () => {
     })
   })
 
+  describe('method "onEditGroup"', () => {
+    it('should emit event on success', async () => {
+      const { wrapper, mocks } = getWrapper()
+
+      const clientService = mocks.$clientService
+      clientService.graphAuthenticated.groups.editGroup.mockResolvedValue(mockAxiosResolve())
+      clientService.graphAuthenticated.groups.getGroup.mockResolvedValue(
+        mockAxiosResolve({ id: '1', displayName: 'administrators' })
+      )
+
+      const editGroup = {
+        id: '1',
+        name: 'administrators'
+      }
+
+      const busStub = vi.spyOn(eventBus, 'publish')
+      const updatedGroup = await wrapper.vm.onEditGroup(editGroup)
+
+      expect(updatedGroup.id).toEqual('1')
+      expect(updatedGroup.displayName).toEqual('administrators')
+      expect(busStub).toHaveBeenCalled()
+    })
+
+    it('should show message on error', async () => {
+      vi.spyOn(console, 'error').mockImplementation(() => undefined)
+      const { wrapper, mocks } = getWrapper()
+      const clientService = mocks.$clientService
+      clientService.graphAuthenticated.groups.editGroup.mockImplementation(() => mockAxiosReject())
+      await wrapper.vm.onEditGroup({})
+
+      const { showErrorMessage } = useMessages()
+      expect(showErrorMessage).toHaveBeenCalled()
+    })
+  })
+
   describe('computed method "invalidFormData"', () => {
     it('should be false if formData is invalid', () => {
       const { wrapper } = getWrapper()
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
index c8ce250708f..80161609718 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
@@ -4,6 +4,9 @@ import { eventBus, queryItemAsString } from '@ownclouders/web-pkg'
 import { displayPositionedDropdown } from '@ownclouders/web-pkg'
 import { SideBarEventTopics } from '@ownclouders/web-pkg'
 import { nextTick } from 'vue'
+import { useSpaceSettingsStore } from '../../../../src/composables'
+import { mock } from 'vitest-mock-extended'
+import { SpaceResource } from '@ownclouders/web-client'
 
 const spaceMocks = [
   {
@@ -58,7 +61,7 @@ vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
 
 describe('SpacesList', () => {
   it('should render all spaces in a table', () => {
-    const { wrapper } = getWrapper({ spaces: [spaceMocks[0]] })
+    const { wrapper } = getWrapper({ spaces: spaceMocks })
     expect(wrapper.html()).toMatchSnapshot()
   })
   it.each(['name', 'members', 'totalQuota', 'usedQuota', 'remainingQuota', 'status'])(
@@ -85,11 +88,6 @@ describe('SpacesList', () => {
     expect(wrapper.vm.sortBy).toEqual(sortBy)
     expect(wrapper.vm.sortDir).toEqual(sortDir)
   })
-  it('emits events on file click', () => {
-    const { wrapper } = getWrapper({ spaces: [spaceMocks[0]] })
-    wrapper.vm.fileClicked([spaceMocks[0]])
-    expect(wrapper.emitted().toggleSelectSpace).toBeTruthy()
-  })
   it('shows only filtered spaces if filter applied', async () => {
     const { wrapper } = getWrapper({ spaces: spaceMocks })
     wrapper.vm.filterTerm = 'Another'
@@ -115,6 +113,45 @@ describe('SpacesList', () => {
     await wrapper.find('.spaces-table-btn-details').trigger('click')
     expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.open)
   })
+  describe('toggle selection', () => {
+    describe('selectSpaces method', () => {
+      it('selects all spaces', async () => {
+        const spaces = [
+          mock<SpaceResource>({ id: '1', name: 'Some Space' }),
+          mock<SpaceResource>({ id: '2', name: 'Some other Space' })
+        ]
+        const { wrapper } = getWrapper({ mountType: shallowMount, spaces })
+        wrapper.vm.selectSpaces(spaces)
+        const { setSelectedSpaces } = useSpaceSettingsStore()
+        expect(setSelectedSpaces).toHaveBeenCalledWith(spaces)
+      })
+    })
+    describe('selectSpace method', () => {
+      it('selects a space', async () => {
+        const spaces = [mock<SpaceResource>({ id: '1', name: 'Some Space' })]
+        const { wrapper } = getWrapper({ mountType: shallowMount, spaces })
+        wrapper.vm.selectSpace(spaces[0])
+        const { addSelectedSpace } = useSpaceSettingsStore()
+        expect(addSelectedSpace).toHaveBeenCalledWith(spaces[0])
+      })
+      it('de-selects a selected space', async () => {
+        const spaces = [mock<SpaceResource>({ id: '1', name: 'Some Space' })]
+        const { wrapper } = getWrapper({ mountType: shallowMount, spaces, selectedSpaces: spaces })
+        wrapper.vm.selectSpace(spaces[0])
+        const { setSelectedSpaces } = useSpaceSettingsStore()
+        expect(setSelectedSpaces).toHaveBeenCalledWith([])
+      })
+    })
+    describe('unselectAllSpaces method', () => {
+      it('de-selects all selected spaces', async () => {
+        const spaces = [mock<SpaceResource>({ id: '1', name: 'Some Space' })]
+        const { wrapper } = getWrapper({ mountType: shallowMount, spaces })
+        wrapper.vm.unselectAllSpaces()
+        const { setSelectedSpaces } = useSpaceSettingsStore()
+        expect(setSelectedSpaces).toHaveBeenCalledWith([])
+      })
+    })
+  })
 })
 
 function getWrapper({ mountType = mount, spaces = [], selectedSpaces = [] } = {}) {
@@ -125,12 +162,16 @@ function getWrapper({ mountType = mount, spaces = [], selectedSpaces = [] } = {}
   return {
     wrapper: mountType(SpacesList, {
       props: {
-        spaces,
-        selectedSpaces,
         headerPosition: 0
       },
       global: {
-        plugins: [...defaultPlugins()],
+        plugins: [
+          ...defaultPlugins({
+            piniaOptions: {
+              spaceSettingsStore: { spaces, selectedSpaces }
+            }
+          })
+        ],
         mocks,
         provide: mocks,
         stubs: {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index c1f76af2070..6235f85b676 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -84,6 +84,32 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
             </button></div>
         </td>
       </tr>
+      <tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false">
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s">
+          <oc-checkbox-stub id="oc-checkbox-3" disabled="false" modelvalue="false" option="[object Object]" label="Select 2 Another space" hidelabel="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub>
+        </td>
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></td>
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span class="spaces-table-space-name" data-test-space-name="2 Another space">2 Another space</span></td>
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-manager">user1, user2... +1</td>
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-members">5</td>
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-totalQuota">2 GB</td>
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-usedQuota">500 MB</td>
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1.5 GB</td>
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-status"><span class="oc-flex oc-flex-middle"><span class="oc-icon oc-icon-m oc-icon-passive oc-mr-s"><!----></span><span>Disabled</span></span></td>
+        <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions oc-pr-s">
+          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw spaces-table-btn-details">
+              <!--v-if-->
+              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
+            </button> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
+              <!--v-if-->
+              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
+              <div id="context-menu-drop-2" class="oc-drop oc-box-shadow-medium oc-rounded oc-overflow-hidden">
+                <div class="oc-card oc-card-body oc-background-secondary oc-p-s"></div>
+              </div>
+            </button></div>
+        </td>
+      </tr>
     </tbody>
     <tfoot class="oc-table-footer">
       <tr class="oc-table-footer-row">
@@ -91,7 +117,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
           <!-- @slot Footer of the table -->
           <!--v-if-->
           <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
-            <p class="oc-text-muted">1 spaces in total</p>
+            <p class="oc-text-muted">2 spaces in total</p>
             <!--v-if-->
           </div>
         </td>
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 37280a9f01c..e49c0b422c8 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
@@ -8,6 +8,7 @@ import {
 import { mock } from 'vitest-mock-extended'
 import { Group, User } from '@ownclouders/web-client/src/generated'
 import { Modal, eventBus, useMessages } from '@ownclouders/web-pkg'
+import { useUserSettingsStore } from '../../../../src/composables/stores/userSettings'
 
 describe('AddToGroupsModal', () => {
   it('renders the input', () => {
@@ -31,7 +32,8 @@ describe('AddToGroupsModal', () => {
       await wrapper.vm.onConfirm()
       const { showMessage } = useMessages()
       expect(showMessage).toHaveBeenCalled()
-      expect(eventSpy).toHaveBeenCalled()
+      const { upsertUser } = useUserSettingsStore()
+      expect(upsertUser).toHaveBeenCalledTimes(users.length)
     })
 
     it('should show message on error', async () => {
@@ -44,12 +46,12 @@ describe('AddToGroupsModal', () => {
       mocks.$clientService.graphAuthenticated.users.getUser.mockRejectedValue(new Error(''))
 
       wrapper.vm.selectedOptions = groups
-      const eventSpy = vi.spyOn(eventBus, 'publish')
 
       await wrapper.vm.onConfirm()
       const { showErrorMessage } = useMessages()
       expect(showErrorMessage).toHaveBeenCalled()
-      expect(eventSpy).not.toHaveBeenCalled()
+      const { upsertUser } = useUserSettingsStore()
+      expect(upsertUser).not.toHaveBeenCalled()
     })
   })
 })
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/CreateUserModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/CreateUserModal.spec.ts
index ffffbaf2ac9..0cc66af2004 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/CreateUserModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/CreateUserModal.spec.ts
@@ -9,6 +9,7 @@ import {
 import { mock } from 'vitest-mock-extended'
 import { AxiosResponse } from 'axios'
 import { Modal, eventBus, useMessages } from '@ownclouders/web-pkg'
+import { useUserSettingsStore } from '../../../../src/composables/stores/userSettings'
 
 describe('CreateUserModal', () => {
   describe('computed method "isFormInvalid"', () => {
@@ -146,12 +147,12 @@ describe('CreateUserModal', () => {
         mockAxiosResolve({ id: 'e3515ffb-d264-4dfc-8506-6c239f6673b5' })
       )
 
-      const eventSpy = vi.spyOn(eventBus, 'publish')
       await wrapper.vm.onConfirm()
 
+      const { upsertUser } = useUserSettingsStore()
+      expect(upsertUser).toHaveBeenCalled()
       const { showMessage } = useMessages()
       expect(showMessage).toHaveBeenCalled()
-      expect(eventSpy).toHaveBeenCalled()
     })
 
     it('should show message on error', async () => {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/LoginModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/LoginModal.spec.ts
index c82219f601c..29b81ca53f0 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/LoginModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/LoginModal.spec.ts
@@ -7,7 +7,8 @@ import {
 } from 'web-test-helpers'
 import { mock } from 'vitest-mock-extended'
 import { User } from '@ownclouders/web-client/src/generated'
-import { Modal, eventBus, useMessages } from '@ownclouders/web-pkg'
+import { Modal, useMessages } from '@ownclouders/web-pkg'
+import { useUserSettingsStore } from '../../../../src/composables/stores/userSettings'
 
 describe('LoginModal', () => {
   it('renders the input including two options', () => {
@@ -29,12 +30,11 @@ describe('LoginModal', () => {
         mockAxiosResolve({ id: 'e3515ffb-d264-4dfc-8506-6c239f6673b5' })
       )
 
-      const eventSpy = vi.spyOn(eventBus, 'publish')
-
       await wrapper.vm.onConfirm()
       const { showMessage } = useMessages()
       expect(showMessage).toHaveBeenCalled()
-      expect(eventSpy).toHaveBeenCalled()
+      const { upsertUser } = useUserSettingsStore()
+      expect(upsertUser).toHaveBeenCalledTimes(users.length)
       expect(mocks.$clientService.graphAuthenticated.users.editUser).toHaveBeenCalledTimes(
         users.length
       )
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 6b98ec4e008..b2cdfecea61 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
@@ -8,6 +8,7 @@ import {
 import { mock } from 'vitest-mock-extended'
 import { Group, User } from '@ownclouders/web-client/src/generated'
 import { Modal, eventBus, useMessages } from '@ownclouders/web-pkg'
+import { useUserSettingsStore } from '../../../../src/composables/stores/userSettings'
 
 describe('RemoveFromGroupsModal', () => {
   it('renders the input', () => {
@@ -29,12 +30,12 @@ describe('RemoveFromGroupsModal', () => {
       )
 
       wrapper.vm.selectedOptions = groups
-      const eventSpy = vi.spyOn(eventBus, 'publish')
 
       await wrapper.vm.onConfirm()
       const { showMessage } = useMessages()
       expect(showMessage).toHaveBeenCalled()
-      expect(eventSpy).toHaveBeenCalled()
+      const { upsertUser } = useUserSettingsStore()
+      expect(upsertUser).toHaveBeenCalledTimes(users.length)
     })
 
     it('should show message on error', async () => {
@@ -55,7 +56,8 @@ describe('RemoveFromGroupsModal', () => {
       await wrapper.vm.onConfirm()
       const { showErrorMessage } = useMessages()
       expect(showErrorMessage).toHaveBeenCalled()
-      expect(eventSpy).not.toHaveBeenCalled()
+      const { upsertUser } = useUserSettingsStore()
+      expect(upsertUser).not.toHaveBeenCalled()
     })
   })
 })
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
index b9af2f18035..df07bd7604d 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
@@ -2,6 +2,7 @@ import UsersList from '../../../../src/components/Users/UsersList.vue'
 import { defaultComponentMocks, defaultPlugins, mount, shallowMount } from 'web-test-helpers'
 import { displayPositionedDropdown, eventBus, queryItemAsString } from '@ownclouders/web-pkg'
 import { SideBarEventTopics } from '@ownclouders/web-pkg'
+import { useUserSettingsStore } from '../../../../src/composables/stores/userSettings'
 
 const getUserMocks = () => [{ id: '1', displayName: 'jan' }]
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
@@ -14,19 +15,15 @@ describe('UsersList', () => {
   describe('computed method "allUsersSelected"', () => {
     it('should be true if all users are selected', () => {
       const { wrapper } = getWrapper({
-        props: {
-          users: getUserMocks(),
-          selectedUsers: getUserMocks()
-        }
+        users: getUserMocks(),
+        selectedUsers: getUserMocks()
       })
       expect(wrapper.vm.allUsersSelected).toBeTruthy()
     })
     it('should be false if not every user is selected', () => {
       const { wrapper } = getWrapper({
-        props: {
-          users: getUserMocks(),
-          selectedUsers: []
-        }
+        users: getUserMocks(),
+        selectedUsers: []
       })
       expect(wrapper.vm.allUsersSelected).toBeFalsy()
     })
@@ -87,51 +84,87 @@ describe('UsersList', () => {
       ])
     })
   })
-  it('emits events on row click', () => {
-    const users = getUserMocks()
-    const { wrapper } = getWrapper({ props: { users } })
-    wrapper.vm.rowClicked([users[0]])
-    expect(wrapper.emitted('toggleSelectUser')).toBeTruthy()
-  })
   it('should show the context menu on right click', async () => {
     const users = getUserMocks()
     const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ mountType: mount, props: { users } })
+    const { wrapper } = getWrapper({ mountType: mount, users })
     await wrapper.find(`[data-item-id="${users[0].id}"]`).trigger('contextmenu')
     expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
   })
   it('should show the context menu on context menu button click', async () => {
     const users = getUserMocks()
     const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ mountType: mount, props: { users } })
+    const { wrapper } = getWrapper({ mountType: mount, users })
     await wrapper.find('.users-table-btn-action-dropdown').trigger('click')
     expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
   })
   it('should show the user details on details button click', async () => {
     const users = getUserMocks()
     const eventBusSpy = vi.spyOn(eventBus, 'publish')
-    const { wrapper } = getWrapper({ mountType: mount, props: { users } })
+    const { wrapper } = getWrapper({ mountType: mount, users })
     await wrapper.find('.users-table-btn-details').trigger('click')
     expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.open)
   })
   it('should show the user edit panel on edit button click', async () => {
     const users = getUserMocks()
     const eventBusSpy = vi.spyOn(eventBus, 'publish')
-    const { wrapper } = getWrapper({ mountType: mount, props: { users } })
+    const { wrapper } = getWrapper({ mountType: mount, users })
     await wrapper.find('.users-table-btn-edit').trigger('click')
     expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.openWithPanel, 'EditPanel')
   })
+  describe('toggle selection', () => {
+    describe('selectUsers method', () => {
+      it('selects all users', async () => {
+        const users = getUserMocks()
+        const { wrapper } = getWrapper({ mountType: shallowMount, users })
+        wrapper.vm.selectUsers(users)
+        const { setSelectedUsers } = useUserSettingsStore()
+        expect(setSelectedUsers).toHaveBeenCalledWith(users)
+      })
+    })
+    describe('selectUsers method', () => {
+      it('selects a user', async () => {
+        const users = getUserMocks()
+        const { wrapper } = getWrapper({ mountType: shallowMount, users: [users[0]] })
+        wrapper.vm.selectUser(users[0])
+        const { addSelectedUser } = useUserSettingsStore()
+        expect(addSelectedUser).toHaveBeenCalledWith(users[0])
+      })
+      it('de-selects a selected user', async () => {
+        const users = getUserMocks()
+        const { wrapper } = getWrapper({
+          mountType: shallowMount,
+          users: [users[0]],
+          selectedUsers: [users[0]]
+        })
+        wrapper.vm.selectUser(users[0])
+        const { setSelectedUsers } = useUserSettingsStore()
+        expect(setSelectedUsers).toHaveBeenCalledWith([])
+      })
+    })
+    describe('unselectAllUsers method', () => {
+      it('de-selects all selected users', async () => {
+        const users = getUserMocks()
+        const { wrapper } = getWrapper({
+          mountType: shallowMount,
+          users: [users[0]],
+          selectedUsers: [users[0]]
+        })
+        wrapper.vm.unselectAllUsers()
+        const { setSelectedUsers } = useUserSettingsStore()
+        expect(setSelectedUsers).toHaveBeenCalledWith([])
+      })
+    })
+  })
 })
 
-function getWrapper({ mountType = shallowMount, props = {} } = {}) {
+function getWrapper({ mountType = shallowMount, users = [], selectedUsers = [] } = {}) {
   vi.mocked(queryItemAsString).mockImplementationOnce(() => '1')
   vi.mocked(queryItemAsString).mockImplementationOnce(() => '100')
   const mocks = defaultComponentMocks()
   return {
     wrapper: mountType(UsersList, {
       props: {
-        users: [],
-        selectedUsers: [],
         roles: [
           {
             displayName: 'Admin',
@@ -150,11 +183,16 @@ function getWrapper({ mountType = shallowMount, props = {} } = {}) {
             id: '4'
           }
         ],
-        headerPosition: 0,
-        ...props
+        headerPosition: 0
       },
       global: {
-        plugins: [...defaultPlugins()],
+        plugins: [
+          ...defaultPlugins({
+            piniaOptions: {
+              userSettingsStore: { users, selectedUsers }
+            }
+          })
+        ],
         mocks,
         provide: mocks,
         stubs: {
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsDelete.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsDelete.spec.ts
index 485224e4c51..2e1a280f73f 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsDelete.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsDelete.spec.ts
@@ -4,6 +4,7 @@ import { unref } from 'vue'
 import { Group } from '@ownclouders/web-client/src/generated'
 import { eventBus } from '@ownclouders/web-pkg'
 import { defaultComponentMocks, getComposableWrapper } from 'web-test-helpers'
+import { useGroupSettingsStore } from '../../../../../src/composables'
 
 describe('useGroupActionsDelete', () => {
   describe('method "isEnabled"', () => {
@@ -38,7 +39,8 @@ describe('useGroupActionsDelete', () => {
           const group = mock<Group>({ id: '1' })
           await deleteGroups([group])
           expect(clientService.graphAuthenticated.groups.deleteGroup).toHaveBeenCalledWith(group.id)
-          expect(eventSpy).toHaveBeenCalledWith('app.admin-settings.list.load')
+          const { removeGroups } = useGroupSettingsStore()
+          expect(removeGroups).toHaveBeenCalled()
         }
       })
     })
@@ -51,7 +53,8 @@ describe('useGroupActionsDelete', () => {
           const group = mock<Group>({ id: '1' })
           await deleteGroups([group])
           expect(clientService.graphAuthenticated.groups.deleteGroup).toHaveBeenCalledWith(group.id)
-          expect(eventSpy).toHaveBeenCalledWith('app.admin-settings.list.load')
+          const { removeGroups } = useGroupSettingsStore()
+          expect(removeGroups).toHaveBeenCalled()
         }
       })
     })
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsDelete.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsDelete.spec.ts
index 1547d3f4cda..fb6013c2091 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsDelete.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsDelete.spec.ts
@@ -2,8 +2,9 @@ import { useUserActionsDelete } from '../../../../../src/composables/actions/use
 import { mock } from 'vitest-mock-extended'
 import { unref } from 'vue'
 import { User } from '@ownclouders/web-client/src/generated'
-import { eventBus, useCapabilityStore } from '@ownclouders/web-pkg'
+import { useCapabilityStore } from '@ownclouders/web-pkg'
 import { defaultComponentMocks, getComposableWrapper, writable } from 'web-test-helpers'
+import { useUserSettingsStore } from '../../../../../src/composables/stores/userSettings'
 
 describe('useUserActionsDelete', () => {
   describe('method "isEnabled"', () => {
@@ -27,26 +28,26 @@ describe('useUserActionsDelete', () => {
   })
   describe('method "deleteUsers"', () => {
     it('should successfully delete all given users and reload the users list', () => {
-      const eventSpy = vi.spyOn(eventBus, 'publish')
       getWrapper({
         setup: async ({ deleteUsers }, { clientService }) => {
           const user = mock<User>({ id: '1' })
           await deleteUsers([user])
           expect(clientService.graphAuthenticated.users.deleteUser).toHaveBeenCalledWith(user.id)
-          expect(eventSpy).toHaveBeenCalledWith('app.admin-settings.list.load')
+          const { removeUsers } = useUserSettingsStore()
+          expect(removeUsers).toHaveBeenCalled()
         }
       })
     })
     it('should handle errors', () => {
       vi.spyOn(console, 'error').mockImplementation(() => undefined)
-      const eventSpy = vi.spyOn(eventBus, 'publish')
       getWrapper({
         setup: async ({ deleteUsers }, { clientService }) => {
           clientService.graphAuthenticated.users.deleteUser.mockRejectedValue({})
           const user = mock<User>({ id: '1' })
           await deleteUsers([user])
           expect(clientService.graphAuthenticated.users.deleteUser).toHaveBeenCalledWith(user.id)
-          expect(eventSpy).toHaveBeenCalledWith('app.admin-settings.list.load')
+          const { removeUsers } = useUserSettingsStore()
+          expect(removeUsers).toHaveBeenCalled()
         }
       })
     })
diff --git a/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
index b67e880ac19..e2195b25bfc 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
@@ -1,9 +1,8 @@
 import Groups from '../../../src/views/Groups.vue'
-import { mockAxiosResolve, mockAxiosReject } from 'web-test-helpers/src/mocks'
-import { mock, mockDeep } from 'vitest-mock-extended'
-import { ClientService, eventBus, useMessages } from '@ownclouders/web-pkg'
+import { mockAxiosResolve } from 'web-test-helpers/src/mocks'
+import { mockDeep } from 'vitest-mock-extended'
+import { ClientService } from '@ownclouders/web-pkg'
 import { defaultComponentMocks, defaultPlugins, mount } from 'web-test-helpers'
-import { Group } from '@ownclouders/web-client/src/generated'
 
 const selectors = { batchActionsStub: 'batch-actions-stub' }
 const getClientServiceMock = () => {
@@ -19,45 +18,9 @@ vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
 }))
 
 describe('Groups view', () => {
-  describe('method "onEditGroup"', () => {
-    it('should emit event on success', async () => {
-      const clientService = getClientServiceMock()
-      clientService.graphAuthenticated.groups.editGroup.mockResolvedValue(mockAxiosResolve())
-      clientService.graphAuthenticated.groups.getGroup.mockResolvedValue(
-        mockAxiosResolve({ id: '1', displayName: 'administrators' })
-      )
-      const { wrapper } = getWrapper({ clientService })
-
-      const editGroup = {
-        id: '1',
-        name: 'administrators'
-      }
-
-      const busStub = vi.spyOn(eventBus, 'publish')
-      await wrapper.vm.loadResourcesTask.last
-
-      const updatedGroup = await wrapper.vm.onEditGroup(editGroup)
-
-      expect(updatedGroup.id).toEqual('1')
-      expect(updatedGroup.displayName).toEqual('administrators')
-      expect(busStub).toHaveBeenCalled()
-    })
-
-    it('should show message on error', async () => {
-      vi.spyOn(console, 'error').mockImplementation(() => undefined)
-      const clientService = getClientServiceMock()
-      clientService.graphAuthenticated.groups.editGroup.mockImplementation(() => mockAxiosReject())
-      const { wrapper } = getWrapper({ clientService })
-      await wrapper.vm.onEditGroup({})
-
-      const { showErrorMessage } = useMessages()
-      expect(showErrorMessage).toHaveBeenCalled()
-    })
-  })
-
   describe('computed method "sideBarAvailablePanels"', () => {
     describe('EditPanel', () => {
-      it('should be available when one group is selected', () => {
+      it('should be available when one group is selected', async () => {
         const { wrapper } = getWrapper()
         expect(
           wrapper.vm.sideBarAvailablePanels
@@ -101,29 +64,37 @@ describe('Groups view', () => {
       expect(wrapper.find(selectors.batchActionsStub).exists()).toBeFalsy()
     })
     it('display when one group selected', async () => {
-      const { wrapper } = getWrapper()
+      const { wrapper } = getWrapper({ selectedGroups: [{ id: '1' }] })
       await wrapper.vm.loadResourcesTask.last
-      wrapper.vm.toggleSelectGroup({ id: '1' })
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.batchActionsStub).exists()).toBeTruthy()
     })
     it('display when more than one groups selected', async () => {
-      const { wrapper } = getWrapper()
+      const { wrapper } = getWrapper({ selectedGroups: [{ id: '1' }, { id: '2' }] })
       await wrapper.vm.loadResourcesTask.last
-      wrapper.vm.selectGroups([mock<Group>({ groupTypes: [] }), mock<Group>({ groupTypes: [] })])
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.batchActionsStub).exists()).toBeTruthy()
     })
   })
 })
 
-function getWrapper({ clientService = getClientServiceMock() } = {}) {
+function getWrapper({
+  clientService = getClientServiceMock(),
+  groups = [],
+  selectedGroups = []
+} = {}) {
   const mocks = { ...defaultComponentMocks(), $clientService: clientService }
 
   return {
     wrapper: mount(Groups, {
       global: {
-        plugins: [...defaultPlugins()],
+        plugins: [
+          ...defaultPlugins({
+            piniaOptions: {
+              groupSettingsStore: { groups, selectedGroups }
+            }
+          })
+        ],
         mocks,
         provide: mocks,
         stubs: {
diff --git a/packages/web-app-admin-settings/tests/unit/views/Spaces.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Spaces.spec.ts
index 98d2b38033c..a8657f120fe 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Spaces.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Spaces.spec.ts
@@ -1,6 +1,6 @@
 import { mockAxiosResolve } from 'web-test-helpers/src/mocks'
-import { Graph } from '@ownclouders/web-client'
-import { mockDeep } from 'vitest-mock-extended'
+import { Graph, SpaceResource } from '@ownclouders/web-client'
+import { mock, mockDeep } from 'vitest-mock-extended'
 import { ClientService, useAppDefaults } from '@ownclouders/web-pkg'
 import { defaultComponentMocks, defaultPlugins, mount } from 'web-test-helpers'
 import Spaces from '../../../src/views/Spaces.vue'
@@ -41,46 +41,6 @@ describe('Spaces view', () => {
     await wrapper.vm.loadResourcesTask.last
     expect(wrapper.find(selectors.noContentMessageStub).exists()).toBeTruthy()
   })
-  describe('toggle selection', () => {
-    describe('selectSpaces method', () => {
-      it('selects all spaces', async () => {
-        const spaces = [{ name: 'Some Space' }, { name: 'Some other Space' }]
-        const { wrapper } = getWrapper({ spaces })
-        await wrapper.vm.loadResourcesTask.last
-        wrapper.vm.selectSpaces(spaces)
-        expect(wrapper.vm.selectedSpaces.length).toBe(spaces.length)
-      })
-    })
-    describe('toggleSelectSpace method', () => {
-      it('selects a space', async () => {
-        const spaces = [{ name: 'Some Space' }]
-        const { wrapper } = getWrapper()
-        await wrapper.vm.loadResourcesTask.last
-        wrapper.vm.toggleSelectSpace(spaces[0])
-        expect(wrapper.vm.selectedSpaces).toEqual(
-          expect.arrayContaining([expect.objectContaining({ name: spaces[0].name })])
-        )
-      })
-      it('de-selects a selected space', async () => {
-        const spaces = [{ name: 'Some Space' }]
-        const { wrapper } = getWrapper()
-        await wrapper.vm.loadResourcesTask.last
-        wrapper.vm.selectedSpaces = spaces
-        wrapper.vm.toggleSelectSpace(spaces[0])
-        expect(wrapper.vm.selectedSpaces.length).toBe(0)
-      })
-    })
-    describe('unselectAllSpaces method', () => {
-      it('de-selects all selected spaces', async () => {
-        const spaces = [{ name: 'Some Space' }]
-        const { wrapper } = getWrapper({ spaces })
-        await wrapper.vm.loadResourcesTask.last
-        wrapper.vm.selectedSpaces = spaces
-        wrapper.vm.unselectAllSpaces()
-        expect(wrapper.vm.selectedSpaces.length).toBe(0)
-      })
-    })
-  })
   describe('batch actions', () => {
     it('do not display when no space selected', async () => {
       const { wrapper } = getWrapper()
@@ -88,25 +48,34 @@ describe('Spaces view', () => {
       expect(wrapper.find(selectors.batchActionsStub).exists()).toBeFalsy()
     })
     it('display when one space selected', async () => {
-      const spaces = [{ name: 'Some Space' }]
-      const { wrapper } = getWrapper({ spaces })
+      const spaces = [{ id: '1', name: 'Some Space' }]
+      const { wrapper } = getWrapper({ spaces, selectedSpaces: spaces })
       await wrapper.vm.loadResourcesTask.last
-      wrapper.vm.toggleSelectSpace(spaces[0])
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.batchActionsStub).exists()).toBeTruthy()
     })
     it('display when more than one space selected', async () => {
-      const spaces = [{ name: 'Some Space' }, { name: 'Some other Space' }]
-      const { wrapper } = getWrapper({ spaces })
+      const spaces = [
+        { id: '1', name: 'Some Space' },
+        { id: '1', name: 'Some other Space' }
+      ]
+      const { wrapper } = getWrapper({ spaces, selectedSpaces: spaces })
       await wrapper.vm.loadResourcesTask.last
-      wrapper.vm.selectSpaces(spaces)
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.batchActionsStub).exists()).toBeTruthy()
     })
   })
 })
 
-function getWrapper({ spaces = [{ name: 'Some Space' }] } = {}) {
+function getWrapper({
+  spaces = [
+    {
+      id: '1',
+      name: 'space'
+    }
+  ],
+  selectedSpaces = []
+} = {}) {
   const $clientService = mockDeep<ClientService>()
   $clientService.graphAuthenticated.drives.listAllDrives.mockResolvedValue(
     mockAxiosResolve({ value: spaces })
@@ -119,7 +88,16 @@ function getWrapper({ spaces = [{ name: 'Some Space' }] } = {}) {
   return {
     wrapper: mount(Spaces, {
       global: {
-        plugins: [...defaultPlugins()],
+        plugins: [
+          ...defaultPlugins({
+            piniaOptions: {
+              spaceSettingsStore: {
+                spaces: spaces.map((s) => mock<SpaceResource>(s)),
+                selectedSpaces
+              }
+            }
+          })
+        ],
         mocks,
         provide: mocks,
         stubs: {
diff --git a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
index 7b9e0000eef..c77c9f59d21 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
@@ -1,14 +1,6 @@
 import Users from '../../../src/views/Users.vue'
-import {
-  OptionsConfig,
-  UserAction,
-  eventBus,
-  useAppDefaults,
-  useMessages,
-  useSpacesStore
-} from '@ownclouders/web-pkg'
+import { OptionsConfig, UserAction, useAppDefaults } from '@ownclouders/web-pkg'
 import { mock, mockDeep } from 'vitest-mock-extended'
-import { mockAxiosResolve, mockAxiosReject } from 'web-test-helpers/src/mocks'
 import { defaultComponentMocks, defaultPlugins, mount, shallowMount } from 'web-test-helpers'
 import { AxiosResponse } from 'axios'
 import { ClientService, queryItemAsString } from '@ownclouders/web-pkg'
@@ -139,118 +131,6 @@ describe('Users view', () => {
     })
   })
 
-  describe('method "onEditUser"', () => {
-    it('should emit event on success', async () => {
-      const editUser = {
-        appRoleAssignments: [
-          {
-            appRoleId: '2',
-            resourceId: 'some-graph-app-id',
-            principalId: '1'
-          }
-        ],
-        displayName: 'administrator',
-        id: '1',
-        mail: 'administrator@example.org',
-        memberOf: [
-          {
-            displayName: 'admins',
-            id: '1'
-          }
-        ],
-        drive: {
-          id: '1',
-          name: 'admin',
-          quota: {
-            total: 1000000000
-          }
-        },
-        passwordProfile: {
-          password: 'administrator'
-        }
-      }
-
-      const clientService = getClientService()
-      clientService.graphAuthenticated.users.editUser.mockResolvedValue(mockAxiosResolve())
-      clientService.graphAuthenticated.users.createUserAppRoleAssignment.mockResolvedValue(
-        mockAxiosResolve()
-      )
-      clientService.graphAuthenticated.groups.addMember.mockResolvedValue(mockAxiosResolve())
-      clientService.graphAuthenticated.drives.updateDrive.mockResolvedValue(
-        mockAxiosResolve({
-          id: '1',
-          name: 'admin',
-          quota: { remaining: 1000000000, state: 'normal', total: 1000000000, used: 0 }
-        })
-      )
-      clientService.graphAuthenticated.users.getUser.mockResolvedValue(
-        mockAxiosResolve({
-          appRoleAssignments: [
-            {
-              appRoleId: '2',
-              id: '1',
-              principalId: '1',
-              principalType: 'User',
-              resourceDisplayName: 'ownCloud Infinite Scale',
-              resourceId: 'some-graph-app-id'
-            }
-          ],
-          displayName: 'administrator',
-          drive: {
-            id: '1',
-            name: 'admin',
-            quota: { remaining: 1000000000, state: 'normal', total: 1000000000, used: 0 }
-          },
-          id: '1',
-          mail: 'administrator@example.org',
-          memberOf: [
-            {
-              displayName: 'admins',
-              id: '1'
-            }
-          ],
-          onPremisesSamAccountName: 'admin',
-          surname: 'Admin'
-        })
-      )
-
-      const { wrapper } = getMountedWrapper({ clientService })
-
-      const busStub = vi.spyOn(eventBus, 'publish')
-
-      await wrapper.vm.loadResourcesTask.last
-
-      const userToUpDate = wrapper.vm.users.find((user) => user.id === '1')
-      const updatedUser = await wrapper.vm.onEditUser({ user: userToUpDate, editUser })
-
-      expect(updatedUser.id).toEqual('1')
-      expect(updatedUser.displayName).toEqual('administrator')
-      expect(updatedUser.mail).toEqual('administrator@example.org')
-      expect(updatedUser.appRoleAssignments[0].appRoleId).toEqual('2')
-      expect(updatedUser.drive.quota.total).toEqual(1000000000)
-      expect(updatedUser.memberOf[0].id).toEqual('1')
-
-      expect(busStub).toHaveBeenCalled()
-      const spacesStore = useSpacesStore()
-      expect(spacesStore.updateSpaceField).toHaveBeenCalled()
-    })
-
-    it('should show message on error', async () => {
-      vi.spyOn(console, 'error').mockImplementation(() => undefined)
-      const clientService = getClientService()
-      clientService.graphAuthenticated.users.editUser.mockImplementation(() => mockAxiosReject())
-      const { wrapper } = getMountedWrapper({ clientService })
-
-      await wrapper.vm.loadResourcesTask.last
-      await wrapper.vm.onEditUser({
-        editUser: {}
-      })
-
-      const { showErrorMessage } = useMessages()
-      expect(showErrorMessage).toHaveBeenCalled()
-    })
-  })
-
   describe('computed method "sideBarAvailablePanels"', () => {
     it('should contain EditPanel when one user is selected', () => {
       const { wrapper } = getMountedWrapper()
@@ -285,16 +165,17 @@ describe('Users view', () => {
       expect(wrapper.find('batch-actions-stub').exists()).toBeFalsy()
     })
     it('display when one user selected', async () => {
-      const { wrapper } = getMountedWrapper({ mountType: mount })
+      const { wrapper } = getMountedWrapper({ mountType: mount, selectedUsers: [{ id: '1' }] })
       await wrapper.vm.loadResourcesTask.last
-      wrapper.vm.toggleSelectUser(getDefaultUser())
       await wrapper.vm.$nextTick()
       expect(wrapper.find('batch-actions-stub').exists()).toBeTruthy()
     })
     it('display when more than one users selected', async () => {
-      const { wrapper } = getMountedWrapper({ mountType: mount })
+      const { wrapper } = getMountedWrapper({
+        mountType: mount,
+        selectedUsers: [{ id: '1' }, { id: '2' }]
+      })
       await wrapper.vm.loadResourcesTask.last
-      wrapper.vm.selectUsers([mock<User>(), mock<User>()])
       await wrapper.vm.$nextTick()
       expect(wrapper.find('batch-actions-stub').exists()).toBeTruthy()
     })
@@ -393,7 +274,9 @@ function getMountedWrapper({
   groupFilterQuery = null,
   roleFilterQuery = null,
   options = {},
-  createUserActionEnabled = true
+  createUserActionEnabled = true,
+  users = [],
+  selectedUsers = []
 }: {
   mountType?: typeof shallowMount | typeof mount
   clientService?: ReturnType<typeof mockDeep<ClientService>>
@@ -402,6 +285,8 @@ function getMountedWrapper({
   roleFilterQuery?: string
   options?: OptionsConfig
   createUserActionEnabled?: boolean
+  users?: User[]
+  selectedUsers?: User[]
 } = {}) {
   vi.mocked(queryItemAsString).mockImplementationOnce(() => displayNameFilterQuery)
   vi.mocked(queryItemAsString).mockImplementationOnce(() => groupFilterQuery)
@@ -427,7 +312,11 @@ function getMountedWrapper({
       global: {
         plugins: [
           ...defaultPlugins({
-            piniaOptions: { userState: { user }, configState: { options } }
+            piniaOptions: {
+              userState: { user },
+              configState: { options },
+              userSettingsStore: { users, selectedUsers }
+            }
           })
         ],
         mocks,
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index 1a8dd75c302..ec8176528b2 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -17,7 +17,7 @@ exports[`Spaces view > loading states > should render spaces list after loading
         </div>
       </div>
       <div>
-        <spaces-list-stub spaces="[object Object]" selectedspaces="" class=""></spaces-list-stub>
+        <spaces-list-stub class=""></spaces-list-stub>
       </div>
     </div>
     <!--v-if-->
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
index a5dc097951c..0a9d58e2d0e 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -87,91 +87,7 @@ exports[`Users view > list view > renders list initially 1`] = `
               <oc-button-stub data-v-32efd9c6="" type="button" disabled="false" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" id="users-filter-confirm" class="oc-ml-xs"></oc-button-stub>
             </div>
           </div>
-          <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu users-table">
-            <thead class="oc-thead">
-              <tr tabindex="-1" class="oc-table-header-row">
-                <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-select oc-pl-s" style="top: 0px;"><span class="oc-table-thead-content"><span class="oc-ml-s"><input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l"> <label for="oc-checkbox-1" class="oc-invisible-sr oc-cursor-pointer">Select all users</label></span></span>
-                  <!--v-if-->
-                </th>
-                <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-avatar" style="top: 0px;"><span class="oc-table-thead-content header-text"></span>
-                  <!--v-if-->
-                </th>
-                <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-onPremisesSamAccountName" style="top: 0px;" aria-sort="ascending"><span class="oc-table-thead-content header-text">User name</span>
-                  <oc-button-stub type="button" disabled="false" size="medium" arialabel="Sort by onPremisesSamAccountName" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-button-sort"></oc-button-stub>
-                </th>
-                <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-displayName" style="top: 0px;" aria-sort="none"><span class="oc-table-thead-content header-text">First and last name</span>
-                  <oc-button-stub type="button" disabled="false" size="medium" arialabel="Sort by displayName" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-invisible-sr oc-button-sort"></oc-button-stub>
-                </th>
-                <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-mail" style="top: 0px;" aria-sort="none"><span class="oc-table-thead-content header-text">Email</span>
-                  <oc-button-stub type="button" disabled="false" size="medium" arialabel="Sort by mail" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-invisible-sr oc-button-sort"></oc-button-stub>
-                </th>
-                <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-role" style="top: 0px;" aria-sort="none"><span class="oc-table-thead-content header-text">Role</span>
-                  <oc-button-stub type="button" disabled="false" size="medium" arialabel="Sort by role" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-invisible-sr oc-button-sort"></oc-button-stub>
-                </th>
-                <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-accountEnabled" style="top: 0px;" aria-sort="none"><span class="oc-table-thead-content header-text">Login</span>
-                  <oc-button-stub type="button" disabled="false" size="medium" arialabel="Sort by accountEnabled" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-invisible-sr oc-button-sort"></oc-button-stub>
-                </th>
-                <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-actions oc-pr-s" style="top: 0px;"><span class="oc-table-thead-content header-text">Actions</span>
-                  <!--v-if-->
-                </th>
-              </tr>
-            </thead>
-            <tbody class="has-item-context-menu">
-              <tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
-                <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s"><span class="oc-ml-s"><input id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value="undefined"> <label for="oc-checkbox-2" class="oc-invisible-sr oc-cursor-pointer">Select Admin</label></span></td>
-                <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-avatar">
-                  <avatar-image width="32" userid="1" user-name="Admin"></avatar-image>
-                </td>
-                <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName">function(...a) {
-                  let r = v(t);
-                  r.called = !0, r.callCount++, r.calls.push(a);
-                  let i = r.next.shift();
-                  if (i) {
-                  r.results.push(i);
-                  let [s, l] = i;
-                  if (s === "ok")
-                  return l;
-                  throw l;
-                  }
-                  let o, c = "ok";
-                  if (r.impl)
-                  try {
-                  new.target ? o = Reflect.construct(r.impl, a, new.target) : o = r.impl.apply(this, a), c = "ok";
-                  } catch (s) {
-                  throw o = s, c = "error", r.results.push([c, s]), s;
-                  }
-                  let x = [c, o];
-                  if (b(o)) {
-                  let s = o.then((l) => x[1] = l).catch((l) => {
-                  throw x[0] = "error", x[1] = l, l;
-                  });
-                  Object.assign(s, o), o = s;
-                  }
-                  return r.results.push(x), o;
-                  }</td>
-                <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-displayName mark-element">Admin</td>
-                <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mail">admin@example.org</td>
-                <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-role">Admin</td>
-                <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-accountEnabled"><span class="oc-flex oc-flex-middle"><span class="oc-icon oc-icon-m oc-icon-passive oc-mr-s"><!----></span><span>Allowed</span></span></td>
-                <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions oc-pr-s">
-                  <oc-button-stub type="button" disabled="false" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-details"></oc-button-stub>
-                  <oc-button-stub type="button" disabled="false" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-edit"></oc-button-stub>
-                  <oc-button-stub type="button" disabled="false" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" id="context-menu-trigger-1" class="users-table-btn-action-dropdown"></oc-button-stub>
-                </td>
-              </tr>
-            </tbody>
-            <tfoot class="oc-table-footer">
-              <tr class="oc-table-footer-row">
-                <td colspan="8" class="oc-table-footer-cell">
-                  <!-- @slot Footer of the table -->
-                  <!--v-if-->
-                  <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
-                    <p class="oc-text-muted">1 users in total</p>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-          </table>
+          <no-content-message-stub data-v-32efd9c6="" icon="user" iconfilltype="fill"></no-content-message-stub>
         </div>
       </div>
     </div>
diff --git a/packages/web-test-helpers/src/mocks/pinia.ts b/packages/web-test-helpers/src/mocks/pinia.ts
index e495e033f3b..0e33c577b06 100644
--- a/packages/web-test-helpers/src/mocks/pinia.ts
+++ b/packages/web-test-helpers/src/mocks/pinia.ts
@@ -1,6 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import defaultTheme from '../../../web-runtime/themes/owncloud/theme.json'
-import { User } from '../../../web-client/src/generated'
+import { User, Group } from '../../../web-client/src/generated'
 import { Message, Modal, WebThemeType } from '../../../web-pkg/src/composables/piniaStores'
 import { Capabilities } from '../../../web-client/src/ocs'
 import { mock } from 'vitest-mock-extended'
@@ -32,6 +32,18 @@ export type PiniaMockOptions = {
   }
   messagesState?: { messages?: Message[] }
   modalsState?: { modals?: Modal[] }
+  spaceSettingsStore?: {
+    spaces?: SpaceResource[]
+    selectedSpaces?: SpaceResource[]
+  }
+  groupSettingsStore?: {
+    groups?: Group[]
+    selectedGroups?: Group[]
+  }
+  userSettingsStore?: {
+    users?: User[]
+    selectedUsers?: User[]
+  }
   resourcesStore?: {
     resources?: Resource[]
     currentFolder?: Resource
@@ -58,6 +70,9 @@ export function createMockStore({
   messagesState = {},
   modalsState = {},
   resourcesStore = {},
+  userSettingsStore = {},
+  groupSettingsStore = {},
+  spaceSettingsStore = {},
   sharesState = {},
   spacesState = {},
   userState = {},
@@ -105,7 +120,10 @@ export function createMockStore({
       },
       resources: { resources: [], ...resourcesStore },
       shares: { shares: [], ...sharesState },
-      spaces: { spaces: [], spaceMembers: [], ...spacesState },
+      spaces: { spaces: [], spaceMembers: [], ...spacesState, ...spaceSettingsStore },
+      userSettings: { users: [], selectedUsers: [], ...userSettingsStore },
+      groupSettings: { groups: [], selectedGroups: [], ...groupSettingsStore },
+      spaceSettings: { spaces: [], selectedSpaces: [], ...spaceSettingsStore },
       user: { user: { ...mock<User>({ id: '1' }), ...(userState?.user && { ...userState.user }) } },
       capabilities: {
         isInitialized: capabilityState?.isInitialized ? capabilityState.isInitialized : true,