From 4ed87d2df55a8815c3b99d9d30bf2ea8a3007366 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@kiteworks.com>
Date: Wed, 14 Aug 2024 07:09:31 +0200
Subject: [PATCH 1/3] refactor: remove GraphShareRoleIdMap

---
 .../InviteCollaboratorForm.vue                 | 12 +++++-------
 .../components/SideBar/Shares/SpaceMembers.vue | 13 ++++++++-----
 .../InviteCollaboratorForm.spec.ts             | 18 +++++++-----------
 .../SideBar/Shares/SpaceMembers.spec.ts        | 10 +++++-----
 .../web-client/src/helpers/share/constants.ts  | 11 -----------
 .../web-client/src/helpers/share/functions.ts  |  5 +----
 packages/web-client/src/helpers/share/types.ts |  1 +
 .../web-client/src/helpers/space/functions.ts  |  1 +
 .../src/composables/piniaStores/spaces.ts      | 12 ++----------
 .../Spaces/Details/SpaceDetails.spec.ts        | 10 ++--------
 .../composables/piniaStores/spaces.spec.ts     | 13 ++++++++-----
 11 files changed, 40 insertions(+), 66 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
index 52c7eef5605..350687fd129 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -169,7 +169,6 @@ import ExpirationDatepicker from './ExpirationDatepicker.vue'
 import {
   CollaboratorAutoCompleteItem,
   CollaboratorShare,
-  GraphShareRoleIdMap,
   ShareRole,
   ShareTypes,
   call
@@ -242,7 +241,7 @@ export default defineComponent({
 
     const sharesStore = useSharesStore()
     const { addShare } = sharesStore
-    const { collaboratorShares, graphRoles } = storeToRefs(sharesStore)
+    const { collaboratorShares } = storeToRefs(sharesStore)
 
     const searchQuery = ref('')
     const searchInProgress = ref(false)
@@ -258,10 +257,9 @@ export default defineComponent({
 
     const resource = inject<Resource>('resource')
     const space = inject<SpaceResource>('space')
+    const availableInternalRoles = inject<Ref<ShareRole[]>>('availableInternalShareRoles')
     const availableExternalRoles = inject<Ref<ShareRole[]>>('availableExternalShareRoles')
 
-    const resourceIsSpace = computed(() => unref(resource).type === 'space')
-
     const markInstance = ref(null)
 
     const isOpen = ref(false)
@@ -302,9 +300,9 @@ export default defineComponent({
     })
 
     onMounted(async () => {
-      selectedRole.value = unref(resourceIsSpace)
-        ? unref(graphRoles)[GraphShareRoleIdMap.SpaceViewer]
-        : unref(graphRoles)[GraphShareRoleIdMap.Viewer]
+      selectedRole.value = unref(isExternalShareRoleType)
+        ? unref(availableExternalRoles)[0]
+        : unref(availableInternalRoles)[0]
 
       await nextTick()
       markInstance.value = new Mark('.mark-element')
diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
index a40c884fd27..0baef492782 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
@@ -71,7 +71,7 @@
 import { storeToRefs } from 'pinia'
 import CollaboratorListItem from './Collaborators/ListItem.vue'
 import InviteCollaboratorForm from './Collaborators/InviteCollaborator/InviteCollaboratorForm.vue'
-import { GraphShareRoleIdMap } from '@ownclouders/web-client'
+import { GraphSharePermission } from '@ownclouders/web-client'
 import {
   createLocationSpaces,
   isLocationSpacesActive,
@@ -193,13 +193,16 @@ export default defineComponent({
         return false
       }
 
-      if (share.role.id !== GraphShareRoleIdMap.SpaceManager) {
+      const memberCanUpdateMembers = share.permissions.includes(
+        GraphSharePermission.updatePermissions
+      )
+      if (!memberCanUpdateMembers) {
         return true
       }
 
-      // forbid to remove last manager of a space
-      const managers = this.spaceMembers.filter(
-        ({ role }) => role.id === GraphShareRoleIdMap.SpaceManager
+      // make sure at least one member can edit other members
+      const managers = this.spaceMembers.filter(({ permissions }) =>
+        permissions.includes(GraphSharePermission.updatePermissions)
       )
       return managers.length > 1
     },
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts
index 986c30ea383..c996a939db1 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts
@@ -8,12 +8,7 @@ import {
 } from 'web-test-helpers'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { useSharesStore } from '@ownclouders/web-pkg'
-import {
-  CollaboratorAutoCompleteItem,
-  CollaboratorShare,
-  GraphShareRoleIdMap,
-  ShareRole
-} from '@ownclouders/web-client'
+import { CollaboratorAutoCompleteItem, CollaboratorShare, ShareRole } from '@ownclouders/web-client'
 import { Group, User } from '@ownclouders/web-client/graph/generated'
 import OcButton from 'design-system/src/components/OcButton/OcButton.vue'
 import RoleDropdown from '../../../../../../../src/components/SideBar/Shares/Collaborators/RoleDropdown.vue'
@@ -209,16 +204,17 @@ function getWrapper({
               capabilityState: { capabilities },
               configState: { options: { concurrentRequests: { shares: { create: 1 } } } },
               sharesState: {
-                graphRoles: {
-                  [GraphShareRoleIdMap.Viewer]: mock<ShareRole>(),
-                  [GraphShareRoleIdMap.SpaceViewer]: mock<ShareRole>()
-                },
                 collaboratorShares: existingCollaborators
               }
             }
           })
         ],
-        provide: { ...mocks, resource, availableExternalShareRoles: externalShareRoles },
+        provide: {
+          ...mocks,
+          resource,
+          availableExternalShareRoles: externalShareRoles,
+          availableInternalShareRoles: [mock<ShareRole>()]
+        },
         mocks,
         stubs: { OcSelect: false, VueSelect: false }
       }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts
index 6621940985a..09052a3b814 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts
@@ -3,7 +3,7 @@ import {
   ShareTypes,
   ShareRole,
   CollaboratorShare,
-  GraphShareRoleIdMap
+  GraphSharePermission
 } from '@ownclouders/web-client'
 import { mock } from 'vitest-mock-extended'
 import { ProjectSpaceResource, SpaceResource } from '@ownclouders/web-client'
@@ -31,8 +31,8 @@ const memberMocks = [
       id: 'alice',
       displayName: 'alice'
     },
-    role: mock<ShareRole>({ id: GraphShareRoleIdMap.SpaceManager }),
-    permissions: [],
+    role: mock<ShareRole>(),
+    permissions: [GraphSharePermission.updatePermissions],
     resourceId: '1',
     indirect: false,
     sharedBy: { id: 'admin', displayName: 'admin' }
@@ -44,7 +44,7 @@ const memberMocks = [
       onPremisesSamAccountName: 'Einstein',
       displayName: 'einstein'
     },
-    role: mock<ShareRole>({ id: GraphShareRoleIdMap.SpaceEditor }),
+    role: mock<ShareRole>(),
     permissions: [],
     resourceId: '1',
     indirect: false,
@@ -57,7 +57,7 @@ const memberMocks = [
       onPremisesSamAccountName: 'Marie',
       displayName: 'marie'
     },
-    role: mock<ShareRole>({ id: GraphShareRoleIdMap.SpaceViewer }),
+    role: mock<ShareRole>(),
     permissions: [],
     resourceId: '1',
     indirect: false,
diff --git a/packages/web-client/src/helpers/share/constants.ts b/packages/web-client/src/helpers/share/constants.ts
index c2de08ac33d..b6567f2baee 100644
--- a/packages/web-client/src/helpers/share/constants.ts
+++ b/packages/web-client/src/helpers/share/constants.ts
@@ -7,14 +7,3 @@ export abstract class SharePermissionBit {
   static readonly Delete: number = 8
   static readonly Share: number = 16
 }
-
-// map human readable role names to graph share role ids
-export const GraphShareRoleIdMap = {
-  Viewer: 'b1e2218d-eef8-4d4c-b82d-0f1a1b48f3b5',
-  SpaceViewer: 'a8d5fe5e-96e3-418d-825b-534dbdf22b99',
-  FileEditor: '2d00ce52-1fc2-4dbc-8b95-a73b73395f5a',
-  FolderEditor: 'fb6c3e19-e378-47e5-b277-9732f9de6e21',
-  SpaceEditor: '58c63c02-1d89-4572-916a-870abc5a1b7d',
-  SpaceManager: '312c0871-5ef7-4b3a-85b6-0e4074c64049',
-  SecureViewer: 'aa97fe03-7980-45ac-9e50-b325749fd7e6'
-} as const
diff --git a/packages/web-client/src/helpers/share/functions.ts b/packages/web-client/src/helpers/share/functions.ts
index afce36d6675..a969327abb2 100644
--- a/packages/web-client/src/helpers/share/functions.ts
+++ b/packages/web-client/src/helpers/share/functions.ts
@@ -14,7 +14,6 @@ import { buildWebDavSpacesPath } from '../space'
 import { DriveItem, Identity, Permission, UnifiedRoleDefinition, User } from '../../graph/generated'
 import { urlJoin } from '../../utils'
 import { uniq } from 'lodash-es'
-import { GraphShareRoleIdMap } from './constants'
 
 export const isShareResource = (resource: Resource): resource is ShareResource => {
   return Object.hasOwn(resource, 'sharedWith')
@@ -151,9 +150,7 @@ export function buildIncomingShareResource({
     sharePermissions,
     outgoing: false,
     canRename: () => driveItem['@client.synchronize'],
-    canDownload: () =>
-      sharePermissions.includes(GraphSharePermission.readBasic) &&
-      !shareRoles.some((shareRole) => shareRole.id === GraphShareRoleIdMap.SecureViewer),
+    canDownload: () => sharePermissions.includes(GraphSharePermission.readContent),
     canUpload: () => sharePermissions.includes(GraphSharePermission.createUpload),
     canCreate: () => sharePermissions.includes(GraphSharePermission.createChildren),
     canBeDeleted: () => sharePermissions.includes(GraphSharePermission.deleteStandard),
diff --git a/packages/web-client/src/helpers/share/types.ts b/packages/web-client/src/helpers/share/types.ts
index 7d1fa801181..9b7cf20b960 100644
--- a/packages/web-client/src/helpers/share/types.ts
+++ b/packages/web-client/src/helpers/share/types.ts
@@ -13,6 +13,7 @@ export enum GraphSharePermission {
   readDeleted = 'libre.graph/driveItem/deleted/read',
   updatePath = 'libre.graph/driveItem/path/update',
   updateDeleted = 'libre.graph/driveItem/deleted/update',
+  updatePermissions = 'libre.graph/driveItem/permissions/update',
   deleteStandard = 'libre.graph/driveItem/standard/delete'
 }
 
diff --git a/packages/web-client/src/helpers/space/functions.ts b/packages/web-client/src/helpers/space/functions.ts
index 83470ebbb96..eb6d8ad3c5c 100644
--- a/packages/web-client/src/helpers/space/functions.ts
+++ b/packages/web-client/src/helpers/space/functions.ts
@@ -131,6 +131,7 @@ export function buildSpace(
     }
   }
 
+  console.log('data', data)
   if (data.root?.permissions) {
     for (const permission of data.root.permissions) {
       spaceRoles[permission.roles[0] as keyof SpaceRoles].push(
diff --git a/packages/web-pkg/src/composables/piniaStores/spaces.ts b/packages/web-pkg/src/composables/piniaStores/spaces.ts
index 93e5a424def..570519ebb98 100644
--- a/packages/web-pkg/src/composables/piniaStores/spaces.ts
+++ b/packages/web-pkg/src/composables/piniaStores/spaces.ts
@@ -3,7 +3,6 @@ import { computed, ref, unref } from 'vue'
 import { isCollaboratorShare, SpaceResource } from '@ownclouders/web-client'
 import { Graph } from '@ownclouders/web-client/graph'
 import {
-  GraphShareRoleIdMap,
   buildSpace,
   extractStorageId,
   isPersonalSpaceResource,
@@ -14,16 +13,9 @@ import { useUserStore } from './user'
 import { ConfigStore, useConfigStore } from './config'
 import { useSharesStore } from './shares'
 
+// sort space members with higher permissions (managers) at the top
 export const sortSpaceMembers = (shares: CollaboratorShare[]) => {
-  const sortedManagers = shares
-    .filter((share) => share.role.id === GraphShareRoleIdMap.SpaceManager)
-    .sort((a, b) => a.sharedWith.displayName.localeCompare(b.sharedWith.displayName))
-
-  const sortedRest = shares
-    .filter((share) => share.role.id !== GraphShareRoleIdMap.SpaceManager)
-    .sort((a, b) => a.sharedWith.displayName.localeCompare(b.sharedWith.displayName))
-
-  return [...sortedManagers, ...sortedRest]
+  return shares.sort((a, b) => b.permissions.length - a.permissions.length)
 }
 
 export const getSpacesByType = async ({
diff --git a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
index fb6c0bce721..f284f98257c 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
@@ -1,11 +1,5 @@
 import SpaceDetails from '../../../../../../src/components/SideBar/Spaces/Details/SpaceDetails.vue'
-import {
-  CollaboratorShare,
-  ShareRole,
-  GraphShareRoleIdMap,
-  SpaceResource,
-  Resource
-} from '@ownclouders/web-client'
+import { CollaboratorShare, ShareRole, SpaceResource, Resource } from '@ownclouders/web-client'
 import { mock } from 'vitest-mock-extended'
 import { defaultComponentMocks, defaultPlugins, shallowMount } from 'web-test-helpers'
 import { RouteLocation } from 'vue-router'
@@ -33,7 +27,7 @@ const spaceShare = {
     id: 'Alice',
     displayName: 'alice'
   },
-  role: mock<ShareRole>({ id: GraphShareRoleIdMap.SpaceManager })
+  role: mock<ShareRole>()
 } as CollaboratorShare
 
 const selectors = {
diff --git a/packages/web-pkg/tests/unit/composables/piniaStores/spaces.spec.ts b/packages/web-pkg/tests/unit/composables/piniaStores/spaces.spec.ts
index d14f231e651..615033af6ec 100644
--- a/packages/web-pkg/tests/unit/composables/piniaStores/spaces.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/piniaStores/spaces.spec.ts
@@ -9,7 +9,7 @@ import { createPinia, setActivePinia } from 'pinia'
 import { mock, mockDeep } from 'vitest-mock-extended'
 import {
   CollaboratorShare,
-  GraphShareRoleIdMap,
+  GraphSharePermission,
   ShareRole,
   SpaceResource
 } from '@ownclouders/web-client'
@@ -23,20 +23,22 @@ describe('spaces', () => {
   })
 
   describe('method "sortSpaceMembers"', () => {
-    it('always puts space managers first', () => {
+    it('sorts space members by amount of permissions', () => {
       const members = [
         mock<CollaboratorShare>({
-          role: { id: GraphShareRoleIdMap.SpaceEditor },
+          permissions: [],
           sharedWith: { displayName: 'user1' }
         }),
         mock<CollaboratorShare>({
-          role: { id: GraphShareRoleIdMap.SpaceManager },
+          permissions: [GraphSharePermission.updatePermissions],
           sharedWith: { displayName: 'user2' }
         })
       ]
 
       const sortedMembers = sortSpaceMembers(members)
-      expect(sortedMembers[0].role.id).toEqual(GraphShareRoleIdMap.SpaceManager)
+      expect(
+        sortedMembers[0].permissions.includes(GraphSharePermission.updatePermissions)
+      ).toBeTruthy()
     })
   })
 
@@ -278,6 +280,7 @@ describe('spaces', () => {
         setup: async (instance) => {
           const share = mock<CollaboratorShare>({
             id: '1',
+            permissions: [],
             role: mock<ShareRole>({ id: 'roleId' })
           })
           const clientService = mockDeep<ClientService>()

From 58f056351481e6f2079d2d2539c5241727d0cb56 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@kiteworks.com>
Date: Wed, 14 Aug 2024 16:49:29 +0200
Subject: [PATCH 2/3] refactor: remove hard-coded space roles, use permissions
 instead

---
 .../Spaces/SideBar/MembersPanel.vue           | 110 ++--
 .../Spaces/SideBar/MembersRoleSection.vue     |  13 +-
 .../src/components/Spaces/SpacesList.vue      |  14 +-
 .../components/Users/SideBar/EditPanel.vue    |  16 +-
 .../src/views/Spaces.vue                      |   6 +-
 .../Spaces/SideBar/MembersPanel.spec.ts       |  48 +-
 .../Spaces/SideBar/MembersRoleSection.spec.ts |   8 +-
 .../__snapshots__/MembersPanel.spec.ts.snap   |  41 +-
 .../unit/components/Spaces/SpacesList.spec.ts |  62 +-
 .../__snapshots__/SpacesList.spec.ts.snap     |   4 +-
 .../src/components/AppBar/CreateAndUpload.vue |   4 +-
 .../InviteCollaboratorForm.vue                |   3 +-
 .../SideBar/Shares/Collaborators/ListItem.vue |   7 +-
 .../components/SideBar/Shares/FileShares.vue  |   4 +-
 .../SideBar/Shares/SpaceMembers.vue           |   7 +-
 .../src/components/Spaces/SpaceHeader.vue     |   2 +-
 .../spaces/useSpaceActionsUploadImage.ts      |  16 +-
 .../composables/extensions/useFileSideBars.ts |   4 +-
 .../src/views/spaces/GenericTrash.vue         |   4 +-
 .../src/views/spaces/Projects.vue             |   9 +-
 .../SideBar/Shares/FileShares.spec.ts         |  14 +-
 .../SideBar/Shares/SpaceMembers.spec.ts       |   2 +-
 .../Spaces/SpaceContextActions.spec.ts        |   6 +-
 .../components/Spaces/SpaceHeader.spec.ts     |  30 +-
 .../__snapshots__/SpaceHeader.spec.ts.snap    |  24 +-
 .../tests/unit/views/trash/Overview.spec.ts   |   2 +-
 .../web-client/src/graph/drives/drives.ts     |  52 +-
 packages/web-client/src/graph/drives/types.ts |  17 +-
 .../web-client/src/helpers/resource/types.ts  |   1 -
 .../web-client/src/helpers/share/types.ts     |   4 +-
 .../web-client/src/helpers/space/functions.ts | 267 +++++---
 .../web-client/src/helpers/space/types.ts     |  29 +-
 .../unit/helpers/space/functions.spec.ts      | 619 +++++++++++-------
 .../components/FilesList/ResourceTable.vue    |   4 +-
 .../SideBar/Spaces/Details/SpaceDetails.vue   |  18 +-
 .../src/components/Spaces/QuotaModal.vue      |   6 +-
 .../actions/files/useFileActionsDelete.ts     |   2 +-
 .../files/useFileActionsEmptyTrashBin.ts      |   2 +-
 .../actions/files/useFileActionsRename.ts     |   8 +-
 .../actions/files/useFileActionsRestore.ts    |  14 +-
 .../actions/files/useFileActionsSetImage.ts   |  15 +-
 .../helpers/useFileActionsDeleteResources.ts  |   9 +-
 .../spaces/useSpaceActionsDuplicate.ts        |  14 +-
 .../spaces/useSpaceActionsEditDescription.ts  |  11 +-
 .../useSpaceActionsEditReadmeContent.ts       |  19 +-
 .../actions/spaces/useSpaceActionsRename.ts   |  11 +-
 .../actions/spaces/useSpaceActionsRestore.ts  |  13 +-
 .../actions/spaces/useSpaceActionsSetIcon.ts  |  21 +-
 .../src/composables/piniaStores/spaces.ts     |  51 +-
 .../resources/useGetResourceContext.ts        |   5 +-
 .../src/composables/shares/useCanShare.ts     |   2 +-
 .../src/composables/spaces/useCreateSpace.ts  |   7 +-
 .../Spaces/Details/SpaceDetails.spec.ts       |  20 +-
 .../actions/files/useFileActionsCopy.spec.ts  |   3 +-
 .../files/useFileActionsDelete.spec.ts        |   3 +-
 .../useFileActionsDownloadArchive.spec.ts     |   3 +-
 .../files/useFileActionsEmptyTrashBin.spec.ts |   2 +-
 .../files/useFileActionsRestore.spec.ts       |   6 +-
 .../files/useFileActionsSetImage.spec.ts      |  51 +-
 .../spaces/useSpaceActionsDelete.spec.ts      |  47 +-
 .../spaces/useSpaceActionsDisable.spec.ts     |  45 +-
 .../spaces/useSpaceActionsEditQuota.spec.ts   |  27 +-
 .../useSpaceActionsEditReadmeContent.spec.ts  |  37 +-
 .../spaces/useSpaceActionsRestore.spec.ts     |  46 +-
 .../composables/piniaStores/spaces.spec.ts    |  46 +-
 .../resourcesTransfer.spec.ts                 |   4 +-
 .../web-runtime/src/container/sse/shares.ts   |  18 +-
 packages/web-runtime/src/index.ts             |  10 +-
 tests/e2e/cucumber/steps/ui/adminSettings.ts  |   6 +-
 .../app-admin-settings/spaces/actions.ts      |   6 +-
 70 files changed, 1158 insertions(+), 903 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue
index 4c11d536e81..2c067065ecd 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue
@@ -9,103 +9,76 @@
       <div v-if="!filteredSpaceMembers.length">
         <h3 class="oc-text-bold oc-text-medium" v-text="$gettext('No members found')" />
       </div>
-      <div
-        v-if="filteredSpaceManagers.length"
-        class="oc-mb-m"
-        data-testid="space-members-role-managers"
-      >
-        <h3 class="oc-text-bold oc-text-medium" v-text="$gettext('Managers')" />
-        <members-role-section :members="filteredSpaceManagers" />
+      <div v-for="(role, i) in availableRoles" :key="i">
+        <div
+          v-if="getMembersForRole(role).length"
+          class="oc-mb-m"
+          :data-testid="`space-members-role-${role.displayName}`"
+        >
+          <h3 class="oc-text-bold oc-text-medium" v-text="role.displayName" />
+          <members-role-section :members="getMembersForRole(role)" />
+        </div>
       </div>
-      <div
-        v-if="filteredSpaceEditors.length"
-        class="oc-mb-m"
-        data-testid="space-members-role-editors"
-      >
-        <h3 class="oc-text-bold oc-text-medium" v-text="$gettext('Editors')" />
-        <members-role-section :members="filteredSpaceEditors" />
-      </div>
-      <div
-        v-if="filteredSpaceViewers.length"
-        class="oc-mb-m"
-        data-testid="space-members-role-viewers"
-      >
-        <h3 class="oc-text-bold oc-text-medium" v-text="$gettext('Viewers')" />
-        <members-role-section :members="filteredSpaceViewers" />
-      </div>
-      <div
-        v-if="filteredSpaceSecureViewers.length"
-        class="oc-mb-m"
-        data-testid="space-members-role-secure-viewers"
-      >
-        <h3 class="oc-text-bold oc-text-medium" v-text="$gettext('Secure viewers')" />
-        <members-role-section :members="filteredSpaceSecureViewers" />
+      <div v-if="membersWithoutRole.length" class="space-members-custom">
+        <h3 class="oc-text-bold oc-text-medium" v-text="$gettext('Custom role')" />
+        <members-role-section :members="membersWithoutRole" />
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { computed, defineComponent, inject, ref, watch, unref } from 'vue'
-import { SpaceResource, SpaceRole } from '@ownclouders/web-client'
+import { ShareRole, SpaceMember, SpaceResource } from '@ownclouders/web-client'
 import MembersRoleSection from './MembersRoleSection.vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
-import { defaultFuseOptions } from '@ownclouders/web-pkg'
+import { defaultFuseOptions, useSharesStore } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'MembersPanel',
   components: { MembersRoleSection },
   setup() {
+    const sharesStore = useSharesStore()
+
     const resource = inject<SpaceResource>('resource')
     const filterTerm = ref('')
     const markInstance = ref(null)
     const membersListRef = ref(null)
-    const filterMembers = (collection: Array<SpaceRole & { roleType: string }>, term: string) => {
+
+    const filterMembers = (collection: SpaceMember[], term: string) => {
       if (!(term || '').trim()) {
         return collection
       }
 
-      const searchEngine = new Fuse(collection, { ...defaultFuseOptions, keys: ['displayName'] })
+      const searchEngine = new Fuse(collection, {
+        ...defaultFuseOptions,
+        keys: ['grantedTo.user.displayName', 'grantedTo.group.displayName']
+      })
       return searchEngine.search(term).map((r) => r.item)
     }
 
-    const spaceMembers = computed(() => {
-      return [
-        ...unref(resource).spaceRoles.manager.map((r) => ({
-          ...r,
-          roleType: 'manager'
-        })),
-        ...unref(resource).spaceRoles.editor.map((r) => ({
-          ...r,
-          roleType: 'editor'
-        })),
-        ...unref(resource).spaceRoles.viewer.map((r) => ({
-          ...r,
-          roleType: 'viewer'
-        })),
-        ...unref(resource).spaceRoles['secure-viewer'].map((r) => ({
-          ...r,
-          roleType: 'secure-viewer'
-        }))
-      ].sort((a, b) => a.displayName.localeCompare(b.displayName))
+    const spaceMembers = computed<SpaceMember[]>(() => {
+      return Object.values(unref(resource).members)
     })
 
-    const filteredSpaceMembers = computed(() => {
+    const filteredSpaceMembers = computed<SpaceMember[]>(() => {
       return filterMembers(unref(spaceMembers), unref(filterTerm))
     })
-    const filteredSpaceManagers = computed(() => {
-      return unref(filteredSpaceMembers).filter((m) => m.roleType === 'manager')
-    })
-    const filteredSpaceEditors = computed(() => {
-      return unref(filteredSpaceMembers).filter((m) => m.roleType === 'editor')
-    })
-    const filteredSpaceViewers = computed(() => {
-      return unref(filteredSpaceMembers).filter((m) => m.roleType === 'viewer')
+
+    const availableRoles = computed<ShareRole[]>(() => {
+      const permissionsWithRole = unref(spaceMembers).filter((p) => !!p.roleId)
+      const roleIds = [...new Set(permissionsWithRole.map((p) => p.roleId))]
+      return roleIds.map((r) => sharesStore.graphRoles[r]).filter(Boolean)
     })
-    const filteredSpaceSecureViewers = computed(() => {
-      return unref(filteredSpaceMembers).filter((m) => m.roleType === 'secure-viewer')
+
+    const membersWithoutRole = computed<SpaceMember[]>(() => {
+      return unref(filteredSpaceMembers).filter(({ roleId }) => !roleId)
     })
 
+    const getMembersForRole = (role: ShareRole): SpaceMember[] => {
+      return unref(filteredSpaceMembers).filter(({ roleId }) => roleId === role.id)
+    }
+
     watch(filterTerm, () => {
       if (unref(membersListRef)) {
         markInstance.value = new Mark(unref(membersListRef))
@@ -120,11 +93,10 @@ export default defineComponent({
     return {
       filterTerm,
       filteredSpaceMembers,
-      filteredSpaceManagers,
-      filteredSpaceEditors,
-      filteredSpaceViewers,
-      filteredSpaceSecureViewers,
-      membersListRef
+      membersListRef,
+      availableRoles,
+      membersWithoutRole,
+      getMembersForRole
     }
   }
 })
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersRoleSection.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersRoleSection.vue
index 5ec4d89204e..269a76a1c32 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersRoleSection.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersRoleSection.vue
@@ -1,14 +1,14 @@
 <template>
   <ul class="oc-list">
     <li
-      v-for="(member, index) in members"
+      v-for="(m, index) in members"
       :key="index"
       class="oc-flex oc-flex-middle oc-mb-s"
       data-testid="space-members-list"
     >
       <oc-avatar
-        v-if="member.kind === 'user'"
-        :user-name="member.displayName"
+        v-if="m.grantedTo.user"
+        :user-name="m.grantedTo.user.displayName"
         :width="36"
         class="oc-mr-s"
       /><oc-avatar-item
@@ -19,20 +19,19 @@
         name="group"
         class="oc-mr-s"
       />
-      {{ member.displayName }}
+      {{ (m.grantedTo.user || m.grantedTo.group).displayName }}
     </li>
   </ul>
 </template>
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { ShareTypes } from '@ownclouders/web-client'
-import { SpaceRole } from '@ownclouders/web-client'
+import { ShareTypes, SpaceMember } from '@ownclouders/web-client'
 
 export default defineComponent({
   name: 'MembersRoleSection',
   props: {
     members: {
-      type: Array as PropType<SpaceRole[]>,
+      type: Array as PropType<SpaceMember[]>,
       required: true
     }
   },
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 06f43257280..63906a766ad 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -137,7 +137,7 @@ import {
   unref,
   watch
 } from 'vue'
-import { SpaceResource } from '@ownclouders/web-client'
+import { getSpaceManagers, SpaceResource } from '@ownclouders/web-client'
 import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
@@ -352,9 +352,11 @@ export default defineComponent({
     ])
 
     const getManagerNames = (space: SpaceResource) => {
-      const allManagers = space.spaceRoles.manager
+      const allManagers = getSpaceManagers(space)
       const managers = allManagers.length > 2 ? allManagers.slice(0, 2) : allManagers
-      let managerStr = managers.map((m) => m.displayName).join(', ')
+      let managerStr = managers
+        .map(({ grantedTo }) => (grantedTo.user || grantedTo.group).displayName)
+        .join(', ')
       if (allManagers.length > 2) {
         managerStr += `... +${allManagers.length - 2}`
       }
@@ -386,11 +388,7 @@ export default defineComponent({
       return formatFileSize(space.spaceQuota.remaining, language.current)
     }
     const getMemberCount = (space: SpaceResource) => {
-      return (
-        space.spaceRoles.manager.length +
-        space.spaceRoles.editor.length +
-        space.spaceRoles.viewer.length
-      )
+      return Object.keys(space.members).length
     }
 
     const getSelectSpaceLabel = (space: SpaceResource) => {
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
index a87b68b2d28..ea1ba3e1516 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
@@ -119,7 +119,8 @@ import {
   useCapabilityStore,
   useEventBus,
   useMessages,
-  useSpacesStore
+  useSpacesStore,
+  useSharesStore
 } from '@ownclouders/web-pkg'
 import GroupSelect from '../GroupSelect.vue'
 import { cloneDeep, isEmpty, isEqual, omit } from 'lodash-es'
@@ -165,6 +166,7 @@ export default defineComponent({
     const userStore = useUserStore()
     const userSettingsStore = useUserSettingsStore()
     const spacesStore = useSpacesStore()
+    const sharesStore = useSharesStore()
     const eventBus = useEventBus()
     const { showErrorMessage } = useMessages()
     const { $gettext } = useGettext()
@@ -225,10 +227,14 @@ export default defineComponent({
 
     const onUpdateUserDrive = async (editUser: User) => {
       const client = clientService.graphAuthenticated
-      const updateSpace = await client.drives.updateDrive(editUser.drive.id, {
-        name: editUser.drive.name,
-        quota: { total: editUser.drive.quota.total }
-      })
+      const updateSpace = await client.drives.updateDrive(
+        editUser.drive.id,
+        {
+          name: editUser.drive.name,
+          quota: { total: editUser.drive.quota.total }
+        },
+        sharesStore.graphRoles
+      )
 
       if (editUser.id === userStore.user.id) {
         // Load current user quota
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index dfde9bd68b4..a0ebef63e0e 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -70,7 +70,8 @@ import {
   useSpaceActionsDisable,
   useSpaceActionsRestore,
   useSpaceActionsEditQuota,
-  AppLoadingSpinner
+  AppLoadingSpinner,
+  useSharesStore
 } from '@ownclouders/web-pkg'
 import { call, SpaceResource } from '@ownclouders/web-client'
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, unref } from 'vue'
@@ -100,6 +101,7 @@ export default defineComponent({
     const clientService = useClientService()
     const { $gettext } = useGettext()
     const { isSideBarOpen, sideBarActivePanel } = useSideBar()
+    const sharesStore = useSharesStore()
 
     const loadResourcesEventToken = ref(null)
     let updateQuotaForSpaceEventToken: string
@@ -119,7 +121,7 @@ export default defineComponent({
 
     const loadResourcesTask = useTask(function* (signal) {
       const drives = yield* call(
-        clientService.graphAuthenticated.drives.listAllDrives({
+        clientService.graphAuthenticated.drives.listAllDrives(sharesStore.graphRoles, {
           orderBy: 'name asc',
           filter: 'driveType eq project'
         })
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersPanel.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersPanel.spec.ts
index 242a1f01215..2a77113fd98 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersPanel.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersPanel.spec.ts
@@ -1,23 +1,26 @@
 import MembersPanel from '../../../../../src/components/Spaces/SideBar/MembersPanel.vue'
 import { defaultPlugins, shallowMount } from 'web-test-helpers'
 import { mock } from 'vitest-mock-extended'
-import { SpaceResource } from '@ownclouders/web-client'
+import { ShareRole, SpaceResource } from '@ownclouders/web-client'
 import MembersRoleSection from '../../../../../src/components/Spaces/SideBar/MembersRoleSection.vue'
 
-const spaceMock = mock<SpaceResource>({
-  spaceRoles: {
-    manager: [{ kind: 'user', displayName: 'admin' }],
-    editor: [
-      { kind: 'user', displayName: 'einstein' },
-      { kind: 'group', displayName: 'physic-haters' }
-    ],
-    viewer: [{ kind: 'user', displayName: 'marie' }],
-    'secure-viewer': [{ kind: 'user', displayName: 'kathrine' }]
+const graphRoles = {
+  '1': mock<ShareRole>({ id: '1', displayName: 'Managers' }),
+  '2': mock<ShareRole>({ id: '2', displayName: 'Editors' }),
+  '3': mock<ShareRole>({ id: '3', displayName: 'Viewers' })
+}
+
+const spaceMock = {
+  members: {
+    '1': { roleId: '1', grantedTo: { user: { displayName: 'admin' } } },
+    '2': { roleId: '2', grantedTo: { user: { displayName: 'marie' } } },
+    '3': { roleId: '3', grantedTo: { user: { displayName: 'einstein' } } }
   }
-})
+} as undefined as SpaceResource
 
 const selectors = {
-  membersRolePanelStub: 'members-role-section-stub'
+  membersRolePanelStub: 'members-role-section-stub',
+  spaceMembersCustom: '.space-members-custom'
 }
 
 describe('MembersPanel', () => {
@@ -26,30 +29,39 @@ describe('MembersPanel', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('should filter members accordingly to the entered search term', async () => {
-    const userToFilterFor = spaceMock.spaceRoles.editor[0]
+    const userToFilterFor = spaceMock.members['3']
     const { wrapper } = getWrapper()
     wrapper.vm.filterTerm = 'ein'
-    await wrapper.vm.$nextTick
+    await wrapper.vm.$nextTick()
     expect(wrapper.findAll(selectors.membersRolePanelStub).length).toBe(1)
     expect(
       wrapper.findComponent<typeof MembersRoleSection>(selectors.membersRolePanelStub).props()
-        .members[0].displayName
-    ).toEqual(userToFilterFor.displayName)
+        .members[0].grantedTo.user.displayName
+    ).toEqual(userToFilterFor.grantedTo.user.displayName)
   })
   it('should display an empty result if no matching members found', async () => {
     const { wrapper } = getWrapper()
     wrapper.vm.filterTerm = 'no-match'
-    await wrapper.vm.$nextTick
+    await wrapper.vm.$nextTick()
     expect(wrapper.findAll(selectors.membersRolePanelStub).length).toBe(0)
     expect(wrapper.html()).toMatchSnapshot()
   })
+  it('should display members without role under the custom section', () => {
+    const spaceResource = {
+      members: {
+        '1': { grantedTo: { user: { displayName: 'admin' } } }
+      }
+    } as undefined as SpaceResource
+    const { wrapper } = getWrapper({ spaceResource })
+    expect(wrapper.find(selectors.spaceMembersCustom).exists()).toBeTruthy()
+  })
 })
 
 function getWrapper({ spaceResource = spaceMock } = {}) {
   return {
     wrapper: shallowMount(MembersPanel, {
       global: {
-        plugins: [...defaultPlugins()],
+        plugins: [...defaultPlugins({ piniaOptions: { sharesState: { graphRoles } } })],
         provide: { resource: spaceResource }
       }
     })
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersRoleSection.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersRoleSection.spec.ts
index e51f48ef981..5ae17229aa4 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersRoleSection.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersRoleSection.spec.ts
@@ -1,20 +1,20 @@
 import MembersRoleSection from '../../../../../src/components/Spaces/SideBar/MembersRoleSection.vue'
 import { defaultPlugins, shallowMount } from 'web-test-helpers'
 import { mock } from 'vitest-mock-extended'
-import { SpaceRole } from '@ownclouders/web-client'
+import { SpaceMember } from '@ownclouders/web-client'
 
 describe('MembersRoleSection', () => {
   it('should render all members accordingly', () => {
     const members = [
-      mock<SpaceRole>({ kind: 'user', displayName: 'einstein' }),
-      mock<SpaceRole>({ kind: 'group', displayName: 'physic-lovers' })
+      mock<SpaceMember>({ grantedTo: { user: { displayName: 'einstein' }, group: undefined } }),
+      mock<SpaceMember>({ grantedTo: { group: { displayName: 'physic-lovers' }, user: undefined } })
     ]
     const { wrapper } = getWrapper({ members })
     expect(wrapper.html()).toMatchSnapshot()
   })
 })
 
-function getWrapper({ members = [] }: { members?: SpaceRole[] } = {}) {
+function getWrapper({ members = [] }: { members?: SpaceMember[] } = {}) {
   return {
     wrapper: shallowMount(MembersRoleSection, {
       props: {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
index 24ae65e01f9..e2776da6dde 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -7,9 +7,15 @@ exports[`MembersPanel > should display an empty result if no matching members fo
     <div>
       <h3 class="oc-text-bold oc-text-medium">No members found</h3>
     </div>
-    <!--v-if-->
-    <!--v-if-->
-    <!--v-if-->
+    <div>
+      <!--v-if-->
+    </div>
+    <div>
+      <!--v-if-->
+    </div>
+    <div>
+      <!--v-if-->
+    </div>
     <!--v-if-->
   </div>
 </div>"
@@ -20,22 +26,25 @@ exports[`MembersPanel > should render all members accordingly to their role assi
   <oc-text-input-stub id="oc-textinput-1" type="text" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" label="Filter members" fixmessageline="false" readonly="false" passwordpolicy="[object Object]" class="oc-text-truncate oc-mr-s oc-mt-m"></oc-text-input-stub>
   <div data-testid="space-members">
     <!--v-if-->
-    <div class="oc-mb-m" data-testid="space-members-role-managers">
-      <h3 class="oc-text-bold oc-text-medium">Managers</h3>
-      <members-role-section-stub members="[object Object]"></members-role-section-stub>
-    </div>
-    <div class="oc-mb-m" data-testid="space-members-role-editors">
-      <h3 class="oc-text-bold oc-text-medium">Editors</h3>
-      <members-role-section-stub members="[object Object],[object Object]"></members-role-section-stub>
+    <div>
+      <div class="oc-mb-m" data-testid="space-members-role-Managers">
+        <h3 class="oc-text-bold oc-text-medium">Managers</h3>
+        <members-role-section-stub members="[object Object]"></members-role-section-stub>
+      </div>
     </div>
-    <div class="oc-mb-m" data-testid="space-members-role-viewers">
-      <h3 class="oc-text-bold oc-text-medium">Viewers</h3>
-      <members-role-section-stub members="[object Object]"></members-role-section-stub>
+    <div>
+      <div class="oc-mb-m" data-testid="space-members-role-Editors">
+        <h3 class="oc-text-bold oc-text-medium">Editors</h3>
+        <members-role-section-stub members="[object Object]"></members-role-section-stub>
+      </div>
     </div>
-    <div class="oc-mb-m" data-testid="space-members-role-secure-viewers">
-      <h3 class="oc-text-bold oc-text-medium">Secure viewers</h3>
-      <members-role-section-stub members="[object Object]"></members-role-section-stub>
+    <div>
+      <div class="oc-mb-m" data-testid="space-members-role-Viewers">
+        <h3 class="oc-text-bold oc-text-medium">Viewers</h3>
+        <members-role-section-stub members="[object Object]"></members-role-section-stub>
+      </div>
     </div>
+    <!--v-if-->
   </div>
 </div>"
 `;
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 cbe4d2f6f5e..9efd0a45122 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
@@ -7,48 +7,66 @@ import { nextTick } from 'vue'
 import { useSpaceSettingsStore } from '../../../../src/composables'
 import { mock } from 'vitest-mock-extended'
 import { OcTable } from 'design-system/src/components'
-import { SpaceResource } from '@ownclouders/web-client'
+import { GraphSharePermission, SpaceMember, SpaceResource } from '@ownclouders/web-client'
 
 const spaceMocks = [
-  {
+  mock<SpaceResource>({
     id: '1',
     name: '1 Some space',
     disabled: false,
-    spaceRoles: {
-      manager: [
-        { id: 'user1', displayName: 'user1' },
-        { id: 'user2', displayName: 'user2' },
-        { id: 'user3', displayName: 'user3' }
-      ],
-      editor: [],
-      viewer: []
+    members: {
+      '1': mock<SpaceMember>({
+        permissions: [GraphSharePermission.deletePermissions],
+        grantedTo: { user: { displayName: 'user1' } }
+      }),
+      '2': mock<SpaceMember>({
+        permissions: [GraphSharePermission.deletePermissions],
+        grantedTo: { user: { displayName: 'user2' } }
+      }),
+      '3': mock<SpaceMember>({
+        permissions: [GraphSharePermission.deletePermissions],
+        grantedTo: { user: { displayName: 'user3' } }
+      })
     },
     spaceQuota: {
       total: 1000000000,
       used: 0,
       remaining: 1000000000
     }
-  },
-  {
+  }),
+  mock<SpaceResource>({
     id: '2',
     name: '2 Another space',
     disabled: true,
-    spaceRoles: {
-      manager: [
-        { id: 'user1', displayName: 'user1' },
-        { id: 'user2', displayName: 'user2' },
-        { id: 'user3', displayName: 'user3' }
-      ],
-      editor: [{ id: 'user4', displayName: 'user4' }],
-      viewer: [{ id: 'user5', displayName: 'user5' }]
+    members: {
+      '1': mock<SpaceMember>({
+        permissions: [GraphSharePermission.deletePermissions],
+        grantedTo: { user: { displayName: 'user1' } }
+      }),
+      '2': mock<SpaceMember>({
+        permissions: [GraphSharePermission.deletePermissions],
+        grantedTo: { user: { displayName: 'user2' } }
+      }),
+      '3': mock<SpaceMember>({
+        permissions: [GraphSharePermission.deletePermissions],
+        grantedTo: { user: { displayName: 'user3' } }
+      }),
+      '4': mock<SpaceMember>({
+        permissions: [],
+        grantedTo: { user: { displayName: 'user4' } }
+      }),
+      '5': mock<SpaceMember>({
+        permissions: [],
+        grantedTo: { user: { displayName: 'user5' } }
+      })
     },
     spaceQuota: {
       total: 2000000000,
       used: 500000000,
       remaining: 1500000000
     }
-  }
-] as SpaceResource[]
+  })
+]
 
 const selectors = {
   ocTableStub: 'oc-table-stub'
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 c80782e2a2c..d2191387915 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
@@ -60,7 +60,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     <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">
-          <oc-checkbox-stub id="oc-checkbox-2" disabled="false" modelvalue="false" option="[object Object]" label="Select 1 Some space" hidelabel="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub>
+          <oc-checkbox-stub id="oc-checkbox-2" disabled="false" modelvalue="false" option="undefined" label="Select 1 Some 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="1 Some space">1 Some space</span></td>
@@ -86,7 +86,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       </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>
+          <oc-checkbox-stub id="oc-checkbox-3" disabled="false" modelvalue="false" option="undefined" 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>
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 36776b44668..4fac21c1ffe 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -175,6 +175,7 @@ import {
   useFileActionsCreateNewShortcut,
   useMessages,
   useResourcesStore,
+  useSharesStore,
   useSpacesStore,
   useUserStore
 } from '@ownclouders/web-pkg'
@@ -248,6 +249,7 @@ export default defineComponent({
     const userStore = useUserStore()
     const spacesStore = useSpacesStore()
     const messageStore = useMessages()
+    const sharesStore = useSharesStore()
     const route = useRoute()
     const language = useGettext()
 
@@ -361,7 +363,7 @@ export default defineComponent({
 
           if (driveType === 'project' || isOwnSpace) {
             const client = clientService.graphAuthenticated
-            const updatedSpace = await client.drives.getDrive(spaceId)
+            const updatedSpace = await client.drives.getDrive(spaceId, sharesStore.graphRoles)
             spacesStore.updateSpaceField({
               id: updatedSpace.id,
               field: 'spaceQuota',
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
index 350687fd129..6bf3f4de39d 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -425,7 +425,8 @@ export default defineComponent({
 
       if (isProjectSpaceResource(unref(resource))) {
         const updatedSpace = await clientService.graphAuthenticated.drives.getDrive(
-          unref(resource).id
+          unref(resource).id,
+          sharesStore.graphRoles
         )
 
         upsertSpace(updatedSpace)
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
index 03e1b40bc8d..0fe7c87fc15 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
@@ -203,7 +203,9 @@ export default defineComponent({
     const { $gettext } = language
     const { dispatchModal } = useModals()
 
-    const { updateShare } = useSharesStore()
+    const sharesStore = useSharesStore()
+    const { graphRoles } = storeToRefs(sharesStore)
+    const { updateShare } = sharesStore
     const { upsertSpace, upsertSpaceMember } = useSpacesStore()
 
     const { user } = storeToRefs(userStore)
@@ -245,6 +247,7 @@ export default defineComponent({
       clientService,
       sharedParentDir,
       shareDate,
+      graphRoles,
       setDenyShare,
       showNotifyShareModal,
       showMessage,
@@ -425,7 +428,7 @@ export default defineComponent({
 
         if (isProjectSpaceResource(this.resource)) {
           const client = this.clientService.graphAuthenticated
-          const space = await client.drives.getDrive(this.resource.id)
+          const space = await client.drives.getDrive(this.resource.id, this.graphRoles)
 
           this.upsertSpace(space)
           this.upsertSpaceMember({ member: share })
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
index 5a13d6649c2..ee7dbef4426 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -437,8 +437,8 @@ export default defineComponent({
         return false
       }
 
-      if (isProjectSpaceResource(this.space) && !this.space.isManager(this.user)) {
-        return false
+      if (isProjectSpaceResource(this.space)) {
+        return this.space.canShare({ user: this.user })
       }
 
       return true
diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
index 0baef492782..4f11b2668ca 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
@@ -105,7 +105,9 @@ export default defineComponent({
     const clientService = useClientService()
     const { canShare } = useCanShare()
     const { dispatchModal } = useModals()
-    const { deleteShare } = useSharesStore()
+    const sharesStore = useSharesStore()
+    const { deleteShare } = sharesStore
+    const { graphRoles } = storeToRefs(sharesStore)
     const spacesStore = useSpacesStore()
     const { upsertSpace, removeSpaceMember } = spacesStore
     const { spaceMembers } = storeToRefs(spacesStore)
@@ -133,6 +135,7 @@ export default defineComponent({
       canShare,
       markInstance,
       filesPrivateLinks,
+      graphRoles,
       ...useMessages()
     }
   },
@@ -226,7 +229,7 @@ export default defineComponent({
 
             if (!currentUserRemoved) {
               const client = this.clientService.graphAuthenticated
-              const space = await client.drives.getDrive(share.resourceId)
+              const space = await client.drives.getDrive(share.resourceId, this.graphRoles)
               this.upsertSpace(space)
             }
 
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index 9c1405f434f..11e6c7eaaa5 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -261,7 +261,7 @@ export default defineComponent({
     )
 
     const memberCount = computed(() => {
-      return Object.values(props.space.spaceRoles).flat().length
+      return Object.keys(props.space.members).length
     })
     const memberCountString = computed(() => {
       return $ngettext('%{count} member', '%{count} members', unref(memberCount), {
diff --git a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts
index c88143e5608..b194b4435f6 100644
--- a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts
+++ b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts
@@ -7,7 +7,8 @@ import {
   useUserStore,
   useMessages,
   useSpacesStore,
-  useSpaceHelpers
+  useSpaceHelpers,
+  useSharesStore
 } from '@ownclouders/web-pkg'
 import { eventBus } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
@@ -22,6 +23,7 @@ export const useSpaceActionsUploadImage = ({ spaceImageInput }: { spaceImageInpu
   const loadingService = useLoadingService()
   const previewService = usePreviewService()
   const spacesStore = useSpacesStore()
+  const sharesStore = useSharesStore()
   const { createDefaultMetaFolder } = useCreateSpace()
   const { getDefaultMetaFolder } = useSpaceHelpers()
 
@@ -75,10 +77,14 @@ export const useSpaceActionsUploadImage = ({ spaceImageInput }: { spaceImageInpu
           overwrite: true
         })
 
-        const updatedSpace = await graphClient.drives.updateDrive(selectedSpace.id, {
-          name: selectedSpace.name,
-          special: [{ specialFolder: { name: 'image' }, id: fileId }]
-        })
+        const updatedSpace = await graphClient.drives.updateDrive(
+          selectedSpace.id,
+          {
+            name: selectedSpace.name,
+            special: [{ specialFolder: { name: 'image' }, id: fileId }]
+          },
+          sharesStore.graphRoles
+        )
 
         spacesStore.updateSpaceField({
           id: selectedSpace.id,
diff --git a/packages/web-app-files/src/composables/extensions/useFileSideBars.ts b/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
index decbab99388..e255c12a705 100644
--- a/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
+++ b/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
@@ -363,9 +363,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
           ) {
             return false
           }
-          return [...items[0].spaceRoles.manager, ...items[0].spaceRoles.editor].some(
-            (role) => role.id === userStore.user.id
-          )
+          return true
         }
       }
     },
diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index 7bc0e87698d..ef220a5630b 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -174,8 +174,8 @@ export default defineComponent({
     showActions() {
       return (
         !isProjectSpaceResource(this.space) ||
-        this.space.isEditor(this.user) ||
-        this.space.isManager(this.user)
+        this.space.canDeleteFromTrashBin({ user: this.user }) ||
+        this.space.canRestoreFromTrashbin({ user: this.user })
       )
     }
   }
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 5f3b11c541b..5ac76b00290 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -198,6 +198,7 @@ import {
 } from '@ownclouders/web-pkg'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
 import {
+  getSpaceManagers,
   isProjectSpaceResource,
   ProjectSpaceResource,
   SpaceResource
@@ -367,9 +368,11 @@ export default defineComponent({
     useKeyboardTableActions(keyActions)
 
     const getManagerNames = (space: SpaceResource) => {
-      const allManagers = space.spaceRoles.manager
+      const allManagers = getSpaceManagers(space)
       const managers = allManagers.length > 2 ? allManagers.slice(0, 2) : allManagers
-      let managerStr = managers.map((m) => m.displayName).join(', ')
+      let managerStr = managers
+        .map(({ grantedTo }) => (grantedTo.user || grantedTo.group).displayName)
+        .join(', ')
       if (allManagers.length > 2) {
         managerStr += `... +${allManagers.length - 2}`
       }
@@ -396,7 +399,7 @@ export default defineComponent({
       return formatFileSize(space.spaceQuota.remaining, language.current)
     }
     const getMemberCount = (space: SpaceResource) => {
-      return Object.values(space.spaceRoles).flat().length
+      return Object.keys(space.members).length
     }
 
     onMounted(async () => {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.ts
index 4ee70ec1995..44803cca581 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.ts
@@ -97,23 +97,23 @@ describe('FileShares', () => {
       const { wrapper } = getWrapper({ space, mountType: shallowMount, collaborators })
       expect(wrapper.vm.isShareModifiable(collaborators[0])).toBe(true)
     })
-    it('share should not be modifiable if its not personal space share', () => {
-      const space = mock<SpaceResource>({ driveType: 'project' })
-      const { wrapper } = getWrapper({ space, mountType: shallowMount, collaborators })
-      expect(wrapper.vm.isShareModifiable(collaborators[0])).toBe(false)
-    })
     it('share should not be modifiable if collaborator is indirect', () => {
       const space = mock<SpaceResource>({ driveType: 'personal' })
       const { wrapper } = getWrapper({ space, mountType: shallowMount, collaborators })
       collaborators[0]['indirect'] = true
       expect(wrapper.vm.isShareModifiable(collaborators[0])).toBe(false)
     })
-    it('share should not be modifiable if user is not manager', () => {
-      const space = mock<SpaceResource>({ driveType: 'project', isManager: () => false })
+    it('share should not be modifiable if its a project space user cannot share', () => {
+      const space = mock<SpaceResource>({ driveType: 'project', canShare: () => false })
       collaborators[0]['indirect'] = true
       const { wrapper } = getWrapper({ space, mountType: shallowMount, collaborators })
       expect(wrapper.vm.isShareModifiable(collaborators[0])).toBe(false)
     })
+    it('share should be modifiable if its a project space and user can share', () => {
+      const space = mock<SpaceResource>({ driveType: 'project', canShare: () => true })
+      const { wrapper } = getWrapper({ space, mountType: shallowMount, collaborators })
+      expect(wrapper.vm.isShareModifiable(collaborators[0])).toBe(true)
+    })
   })
 
   describe('current space', () => {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts
index 09052a3b814..fb05e93896c 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts
@@ -112,7 +112,7 @@ describe('SpaceMembers', () => {
 
   describe('filter', () => {
     it('toggles the filter on click', async () => {
-      const space = mock<ProjectSpaceResource>({ isManager: () => true })
+      const space = mock<ProjectSpaceResource>()
       const wrapper = getWrapper({ mountType: mount, space })
       expect(wrapper.vm.isFilterOpen).toBeFalsy()
       await wrapper.find('.open-filter-btn').trigger('click')
diff --git a/packages/web-app-files/tests/unit/components/Spaces/SpaceContextActions.spec.ts b/packages/web-app-files/tests/unit/components/Spaces/SpaceContextActions.spec.ts
index cf0c8efa852..67ce017198c 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/SpaceContextActions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Spaces/SpaceContextActions.spec.ts
@@ -6,7 +6,9 @@ import { Drive } from '@ownclouders/web-client/graph/generated'
 
 const spaceMock = mock<Drive>({
   id: '1',
-  root: { permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }] },
+  root: {
+    permissions: [{ '@libre.graph.permissions.actions': [], grantedToV2: { user: { id: '1' } } }]
+  },
   driveType: 'project',
   special: null
 })
@@ -14,7 +16,7 @@ const spaceMock = mock<Drive>({
 describe('SpaceContextActions', () => {
   describe('action handlers', () => {
     it('renders actions that are always available: "Members", "Edit Quota", "Details"', () => {
-      const { wrapper } = getWrapper(buildSpace(spaceMock))
+      const { wrapper } = getWrapper(buildSpace(spaceMock, {}))
 
       expect(
         wrapper.findAll('[data-testid="action-label"]').some((el) => el.text() === 'Members')
diff --git a/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts b/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
index f127034befd..b2789baa3eb 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
@@ -1,7 +1,7 @@
 import { nextTick, ref } from 'vue'
 import SpaceHeader from 'web-app-files/src/components/Spaces/SpaceHeader.vue'
-import { Drive } from '@ownclouders/web-client/graph/generated'
-import { SpaceResource, buildSpace, Resource } from '@ownclouders/web-client'
+import { DriveItem } from '@ownclouders/web-client/graph/generated'
+import { SpaceResource, Resource } from '@ownclouders/web-client'
 import { defaultPlugins, mount, defaultComponentMocks } from 'web-test-helpers'
 import { mock } from 'vitest-mock-extended'
 
@@ -12,35 +12,37 @@ vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
   })
 }))
 
+const getSpaceMock = (spaceImageData: DriveItem = undefined) =>
+  mock<SpaceResource>({
+    id: '1',
+    name: '',
+    description: '',
+    spaceReadmeData: undefined,
+    spaceImageData
+  })
+
 describe('SpaceHeader', () => {
   it('should add the "squashed"-class when the sidebar is opened', () => {
-    const wrapper = getWrapper({
-      space: buildSpace({ id: '1' } as unknown as Drive),
-      isSideBarOpen: true
-    })
+    const wrapper = getWrapper({ space: getSpaceMock(), isSideBarOpen: true })
     expect(wrapper.find('.space-header-squashed').exists()).toBeTruthy()
     expect(wrapper.html()).toMatchSnapshot()
   })
   describe('space image', () => {
     it('should show the default image if no other image is set', () => {
-      const wrapper = getWrapper({ space: buildSpace({ id: '1' } as unknown as Drive) })
+      const wrapper = getWrapper({ space: getSpaceMock() })
       expect(wrapper.find('.space-header-image-default').exists()).toBeTruthy()
       expect(wrapper.html()).toMatchSnapshot()
     })
     it('should show the set image', async () => {
-      const spaceMock = { spaceImageData: { webDavUrl: '/' } }
-      const wrapper = getWrapper({
-        space: { ...buildSpace({ id: '1' } as unknown as Drive), ...spaceMock }
-      })
+      const wrapper = getWrapper({ space: getSpaceMock({ webDavUrl: '/' }) })
       await wrapper.vm.loadPreviewTask.last
       expect(wrapper.find('.space-header-image-default').exists()).toBeFalsy()
       expect(wrapper.find('.space-header-image img').exists()).toBeTruthy()
       expect(wrapper.html()).toMatchSnapshot()
     })
     it('should take full width in mobile view', () => {
-      const spaceMock = { spaceImageData: { webDavUrl: '/' } }
       const wrapper = getWrapper({
-        space: { ...buildSpace({ id: '1' } as unknown as Drive), ...spaceMock },
+        space: getSpaceMock({ webDavUrl: '/' }),
         isMobileWidth: true
       })
       expect(wrapper.find('.space-header').classes()).not.toContain('oc-flex')
@@ -49,7 +51,7 @@ describe('SpaceHeader', () => {
   })
   describe('space description', () => {
     it('should show the description', async () => {
-      const wrapper = getWrapper({ space: buildSpace({ id: '1' } as unknown as Drive) })
+      const wrapper = getWrapper({ space: getSpaceMock() })
       wrapper.vm.markdownResource = mock<Resource>()
       wrapper.vm.markdownContent = 'content'
       await nextTick()
diff --git a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
index 7167a906c9c..dfbc000b41c 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
@@ -17,8 +17,10 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
             <space-context-actions-stub actionoptions="[object Object]"></space-context-actions-stub>
           </div>
         </div>
-      </div>
-      <!--v-if-->
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
+        <!--v-if-->
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="space-header-people-count oc-text-small">17 members</span>
+      </button>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -44,8 +46,10 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
             <space-context-actions-stub actionoptions="[object Object]"></space-context-actions-stub>
           </div>
         </div>
-      </div>
-      <!--v-if-->
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
+        <!--v-if-->
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="space-header-people-count oc-text-small">17 members</span>
+      </button>
     </div>
     <!--v-if-->
     <div class="markdown-container oc-flex oc-flex-middle">
@@ -74,8 +78,10 @@ exports[`SpaceHeader > space image > should show the default image if no other i
             <space-context-actions-stub actionoptions="[object Object]"></space-context-actions-stub>
           </div>
         </div>
-      </div>
-      <!--v-if-->
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
+        <!--v-if-->
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="space-header-people-count oc-text-small">17 members</span>
+      </button>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -99,8 +105,10 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
             <space-context-actions-stub actionoptions="[object Object]"></space-context-actions-stub>
           </div>
         </div>
-      </div>
-      <!--v-if-->
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
+        <!--v-if-->
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="space-header-people-count oc-text-small">17 members</span>
+      </button>
     </div>
     <!--v-if-->
     <!--v-if-->
diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index 4c9e7801ae9..8c094c7e2e2 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -92,7 +92,7 @@ describe('TrashOverview', () => {
     })
     it('should set the sort parameters accordingly when calling "handleSort"', () => {
       const { wrapper } = getWrapper({ spaces: [spaceMocks[0]] })
-      const sortBy = 'spaceRoles'
+      const sortBy = 'members'
       const sortDir = SortDir.Desc
       wrapper.vm.handleSort({ sortBy, sortDir })
       expect(wrapper.vm.sortBy).toEqual(sortBy)
diff --git a/packages/web-client/src/graph/drives/drives.ts b/packages/web-client/src/graph/drives/drives.ts
index a4cb6702f30..48ab7366e95 100644
--- a/packages/web-client/src/graph/drives/drives.ts
+++ b/packages/web-client/src/graph/drives/drives.ts
@@ -5,25 +5,47 @@ import type { GraphDrives } from './types'
 
 const getServerUrlFromDrive = (drive: Drive) => new URL(drive.webUrl).origin
 
+const roleIdv1Tov2Map = {
+  manager: '312c0871-5ef7-4b3a-85b6-0e4074c64049',
+  editor: '58c63c02-1d89-4572-916a-870abc5a1b7d',
+  viewer: 'a8d5fe5e-96e3-418d-825b-534dbdf22b99'
+}
+
+// FIXME: convert old v1 drive to v2 drive. remove with https://github.com/owncloud/ocis/issues/9884
+const v1Tov2Drive = (drive: Drive) => {
+  drive.root?.permissions?.forEach((p) => {
+    p.grantedToV2 = p.grantedToV2 || p.grantedToIdentities?.[0]
+    delete p.grantedToIdentities
+    const oldRole = p.roles[0]
+    if (oldRole) {
+      p.roles[0] = roleIdv1Tov2Map[oldRole]
+    }
+  })
+  return drive
+}
+
 export const DrivesFactory = ({ axiosClient, config }: GraphFactoryOptions): GraphDrives => {
   const drivesApiFactory = DrivesApiFactory(config, config.basePath, axiosClient)
   const meDrivesApi = new MeDrivesApi(config, config.basePath, axiosClient)
   const allDrivesApi = new DrivesGetDrivesApi(config, config.basePath, axiosClient)
 
   return {
-    async getDrive(id, requestOptions) {
-      const { data: drive } = await drivesApiFactory.getDrive(id, requestOptions)
-      return buildSpace({ ...drive, serverUrl: getServerUrlFromDrive(drive) })
+    async getDrive(id, graphRoles, requestOptions) {
+      let { data: drive } = await drivesApiFactory.getDrive(id, requestOptions)
+      drive = v1Tov2Drive(drive)
+      return buildSpace({ ...drive, serverUrl: getServerUrlFromDrive(drive) }, graphRoles)
     },
 
-    async createDrive(data, requestOptions) {
-      const { data: drive } = await drivesApiFactory.createDrive(data, requestOptions)
-      return buildSpace({ ...drive, serverUrl: getServerUrlFromDrive(drive) })
+    async createDrive(data, graphRoles, requestOptions) {
+      let { data: drive } = await drivesApiFactory.createDrive(data, requestOptions)
+      drive = v1Tov2Drive(drive)
+      return buildSpace({ ...drive, serverUrl: getServerUrlFromDrive(drive) }, graphRoles)
     },
 
-    async updateDrive(id, data, requestOptions) {
-      const { data: drive } = await drivesApiFactory.updateDrive(id, data, requestOptions)
-      return buildSpace({ ...drive, serverUrl: getServerUrlFromDrive(drive) })
+    async updateDrive(id, data, graphRoles, requestOptions) {
+      let { data: drive } = await drivesApiFactory.updateDrive(id, data, requestOptions)
+      drive = v1Tov2Drive(drive)
+      return buildSpace({ ...drive, serverUrl: getServerUrlFromDrive(drive) }, graphRoles)
     },
 
     async disableDrive(id, ifMatch, requestOptions) {
@@ -40,18 +62,18 @@ export const DrivesFactory = ({ axiosClient, config }: GraphFactoryOptions): Gra
       })
     },
 
-    async listMyDrives(options, requestOptions) {
+    async listMyDrives(graphRoles, options, requestOptions) {
       const {
         data: { value }
-      } = await meDrivesApi.listMyDrives(options?.orderBy, options?.filter, requestOptions)
-      return value.map((d) => buildSpace({ ...d, serverUrl: getServerUrlFromDrive(d) }))
+      } = await meDrivesApi.listMyDrivesBeta(options?.orderBy, options?.filter, requestOptions)
+      return value.map((d) => buildSpace({ ...d, serverUrl: getServerUrlFromDrive(d) }, graphRoles))
     },
 
-    async listAllDrives(options, requestOptions) {
+    async listAllDrives(graphRoles, options, requestOptions) {
       const {
         data: { value }
-      } = await allDrivesApi.listAllDrives(options?.orderBy, options?.filter, requestOptions)
-      return value.map((d) => buildSpace({ ...d, serverUrl: getServerUrlFromDrive(d) }))
+      } = await allDrivesApi.listAllDrivesBeta(options?.orderBy, options?.filter, requestOptions)
+      return value.map((d) => buildSpace({ ...d, serverUrl: getServerUrlFromDrive(d) }, graphRoles))
     }
   }
 }
diff --git a/packages/web-client/src/graph/drives/types.ts b/packages/web-client/src/graph/drives/types.ts
index 4d614005c0e..dde6308e88b 100644
--- a/packages/web-client/src/graph/drives/types.ts
+++ b/packages/web-client/src/graph/drives/types.ts
@@ -1,13 +1,22 @@
-import type { SpaceResource } from '../../helpers'
+import type { ShareRole, SpaceResource } from '../../helpers'
 import type { Drive } from '../generated'
 import type { GraphRequestOptions } from '../types'
 
 export interface GraphDrives {
-  getDrive: (id: string, requestOptions?: GraphRequestOptions) => Promise<SpaceResource>
-  createDrive: (data: Drive, requestOptions?: GraphRequestOptions) => Promise<SpaceResource>
+  getDrive: (
+    id: string,
+    graphRoles: Record<string, ShareRole>,
+    requestOptions?: GraphRequestOptions
+  ) => Promise<SpaceResource>
+  createDrive: (
+    data: Drive,
+    graphRoles: Record<string, ShareRole>,
+    requestOptions?: GraphRequestOptions
+  ) => Promise<SpaceResource>
   updateDrive: (
     id: string,
     data: Drive,
+    graphRoles: Record<string, ShareRole>,
     requestOptions?: GraphRequestOptions
   ) => Promise<SpaceResource>
   disableDrive: (
@@ -17,6 +26,7 @@ export interface GraphDrives {
   ) => Promise<void>
   deleteDrive: (id: string, ifMatch?: string, requestOptions?: GraphRequestOptions) => Promise<void>
   listMyDrives: (
+    graphRoles: Record<string, ShareRole>,
     options?: {
       orderBy?: string
       filter?: string
@@ -24,6 +34,7 @@ export interface GraphDrives {
     requestOptions?: GraphRequestOptions
   ) => Promise<SpaceResource[]>
   listAllDrives: (
+    graphRoles: Record<string, ShareRole>,
     options?: {
       orderBy?: string
       filter?: string
diff --git a/packages/web-client/src/helpers/resource/types.ts b/packages/web-client/src/helpers/resource/types.ts
index 359c8e2d6aa..fc54729863e 100644
--- a/packages/web-client/src/helpers/resource/types.ts
+++ b/packages/web-client/src/helpers/resource/types.ts
@@ -90,7 +90,6 @@ export interface Resource {
   canRename?(args?: { user?: User; ability?: Ability }): boolean
   canBeDeleted?(args?: { user?: User; ability?: Ability }): boolean
   canDeny?(): boolean
-  canRemoveFromTrashbin?({ user }: { user?: User }): boolean
   canEditTags?(): boolean
 
   getDomSelector?(): string
diff --git a/packages/web-client/src/helpers/share/types.ts b/packages/web-client/src/helpers/share/types.ts
index 9b7cf20b960..66ea5a04f07 100644
--- a/packages/web-client/src/helpers/share/types.ts
+++ b/packages/web-client/src/helpers/share/types.ts
@@ -14,7 +14,9 @@ export enum GraphSharePermission {
   updatePath = 'libre.graph/driveItem/path/update',
   updateDeleted = 'libre.graph/driveItem/deleted/update',
   updatePermissions = 'libre.graph/driveItem/permissions/update',
-  deleteStandard = 'libre.graph/driveItem/standard/delete'
+  deleteStandard = 'libre.graph/driveItem/standard/delete',
+  deleteDeleted = 'libre.graph/driveItem/deleted/delete',
+  deletePermissions = 'libre.graph/driveItem/permissions/delete'
 }
 
 export interface ShareResource extends Resource {
diff --git a/packages/web-client/src/helpers/space/functions.ts b/packages/web-client/src/helpers/space/functions.ts
index eb6d8ad3c5c..0b600773ddd 100644
--- a/packages/web-client/src/helpers/space/functions.ts
+++ b/packages/web-client/src/helpers/space/functions.ts
@@ -1,17 +1,24 @@
-import { User } from '../../graph/generated'
-import { extractDomSelector, extractNodeId, Resource, ResourceIndicator } from '../resource'
+import { Permission, User } from '../../graph/generated'
 import {
+  Ability,
+  extractDomSelector,
+  extractNodeId,
+  Resource,
+  ResourceIndicator
+} from '../resource'
+import {
+  isPersonalSpaceResource,
   PublicSpaceResource,
   ShareSpaceResource,
-  SpaceResource,
-  SpaceRoles,
-  SpaceRole
+  SpaceMember,
+  SpaceResource
 } from './types'
 
 import { DavProperty } from '../../webdav/constants'
 import { buildWebDavPublicPath, buildWebDavOcmPath } from '../publicLink'
 import { urlJoin } from '../../utils'
 import { Drive, DriveItem } from '@ownclouders/web-client/graph/generated'
+import { GraphSharePermission, ShareRole } from '../share'
 
 export function buildWebDavSpacesPath(storageId: string, path?: string) {
   return urlJoin('spaces', storageId, path, {
@@ -39,6 +46,14 @@ export function getRelativeSpecialFolderSpacePath(space: SpaceResource, type: 'i
   return webDavPathComponents.slice(webDavPathComponents.indexOf(idComponent) + 1).join('/')
 }
 
+// although roles are a loose concept, we can assume that there are always space managers
+export function getSpaceManagers(space: SpaceResource) {
+  return Object.values(space.members).filter(({ permissions }) =>
+    // delete permissions implies that the user/group is a manager
+    permissions.includes(GraphSharePermission.deletePermissions)
+  )
+}
+
 export type PublicLinkType = 'ocm' | 'public-link'
 export function buildPublicSpaceResource(
   data: any & { publicLinkType: PublicLinkType }
@@ -63,12 +78,15 @@ export function buildPublicSpaceResource(
   }
 
   return Object.assign(
-    buildSpace({
-      ...data,
-      driveType: 'public',
-      driveAlias,
-      webDavPath
-    }),
+    buildSpace(
+      {
+        ...data,
+        driveType: 'public',
+        driveAlias,
+        webDavPath
+      },
+      {}
+    ),
     {
       ...(fileId && { fileId }),
       ...(publicLinkPassword && { publicLinkPassword }),
@@ -92,13 +110,16 @@ export function buildShareSpaceResource({
   shareName: string
   serverUrl: string
 }): ShareSpaceResource {
-  const space = buildSpace({
-    id,
-    driveAlias: `${driveAliasPrefix}/${shareName}`,
-    driveType: 'share',
-    name: shareName,
-    serverUrl
-  }) as ShareSpaceResource
+  const space = buildSpace(
+    {
+      id,
+      driveAlias: `${driveAliasPrefix}/${shareName}`,
+      driveType: 'share',
+      name: shareName,
+      serverUrl
+    },
+    {}
+  ) as ShareSpaceResource
   space.rename = (newName: string) => {
     space.driveAlias = `${driveAliasPrefix}/${newName}`
     space.name = newName
@@ -112,12 +133,10 @@ export function buildSpace(
     serverUrl?: string
     webDavPath?: string
     webDavTrashPath?: string
-  }
+  },
+  graphRoles: Record<string, ShareRole>
 ): SpaceResource {
   let spaceImageData: DriveItem, spaceReadmeData: DriveItem
-  let disabled = false
-  const spaceRoles: SpaceRoles = { viewer: [], editor: [], manager: [], 'secure-viewer': [] }
-
   if (data.special) {
     spaceImageData = data.special.find((el) => el.specialFolder.name === 'image')
     spaceReadmeData = data.special.find((el) => el.specialFolder.name === 'readme')
@@ -131,41 +150,7 @@ export function buildSpace(
     }
   }
 
-  console.log('data', data)
-  if (data.root?.permissions) {
-    for (const permission of data.root.permissions) {
-      spaceRoles[permission.roles[0] as keyof SpaceRoles].push(
-        ...permission.grantedToIdentities.reduce((acc, info) => {
-          const kind = info.hasOwnProperty('group') ? 'group' : 'user'
-          const spaceRole: SpaceRole = {
-            kind,
-            id: info[kind].id,
-            displayName: info[kind].displayName,
-            isMember(u?: User): boolean {
-              if (!u) {
-                return false
-              }
-
-              switch (this.kind) {
-                case 'user':
-                  return this.id == u.id
-                case 'group':
-                  return u.memberOf.map((g) => g.id).includes(this.id)
-                default:
-                  return false
-              }
-            }
-          }
-          return [...acc, spaceRole]
-        }, [])
-      )
-    }
-
-    if (data.root?.deleted) {
-      disabled = data.root.deleted?.state === 'trashed'
-    }
-  }
-
+  const disabled = data.root?.deleted?.state === 'trashed'
   const webDavPath = urlJoin(data.webDavPath || buildWebDavSpacesPath(data.id), {
     leadingSlash: true
   })
@@ -175,6 +160,15 @@ export function buildSpace(
   })
   const webDavTrashUrl = urlJoin(data.serverUrl, 'remote.php/dav', webDavTrashPath)
 
+  const members = data.root?.permissions?.reduce<Record<string, SpaceMember>>((acc, p) => {
+    acc[(p.grantedToV2.user || p.grantedToV2.group).id] = {
+      grantedTo: p.grantedToV2,
+      permissions: getPermissionsFromGraphPermission(p, graphRoles),
+      roleId: p.roles?.[0]
+    }
+    return acc
+  }, {})
+
   const s = {
     id: data.id,
     fileId: data.id,
@@ -204,41 +198,103 @@ export function buildSpace(
     disabled,
     root: data.root,
     spaceQuota: data.quota,
-    spaceRoles,
+    members: members || {},
     spaceImageData,
     spaceReadmeData,
     canUpload: function ({ user }: { user?: User } = {}): boolean {
-      return this.isManager(user) || this.isEditor(user)
+      if (isPersonalSpaceResource(this) && this.isOwner(user)) {
+        return true
+      }
+      return getPermissionsForSpaceMember(this, user).includes(GraphSharePermission.createUpload)
     },
     canDownload: function () {
       return true
     },
-    canBeDeleted: function ({ user, ability }: { user?: User; ability?: any } = {}) {
-      return this.disabled && (ability?.can('delete-all', 'Drive') || this.isManager(user))
+    canBeDeleted: function ({ user, ability }: { user?: User; ability?: Ability } = {}) {
+      if (!this.disabled) {
+        return false
+      }
+      if (ability?.can('delete-all', 'Drive')) {
+        return true
+      }
+      // FIXME: server permissions are a mess currently: https://github.com/owncloud/ocis/issues/9862
+      return getPermissionsForSpaceMember(this, user).includes(
+        GraphSharePermission.deletePermissions
+      )
     },
-    canRename: function ({ user, ability }: { user?: User; ability?: any } = {}) {
-      return ability?.can('update-all', 'Drive') || this.isManager(user)
+    canRename: function ({ user, ability }: { user?: User; ability?: Ability } = {}) {
+      if (ability?.can('update-all', 'Drive')) {
+        return true
+      }
+      // FIXME: server permissions are a mess currently: https://github.com/owncloud/ocis/issues/9862
+      return getPermissionsForSpaceMember(this, user).includes(
+        GraphSharePermission.deletePermissions
+      )
     },
-    canEditDescription: function ({ user, ability }: { user?: User; ability?: any } = {}) {
-      return ability?.can('update-all', 'Drive') || this.isManager(user)
+    canEditDescription: function ({ user, ability }: { user?: User; ability?: Ability } = {}) {
+      if (ability?.can('update-all', 'Drive')) {
+        return true
+      }
+      // FIXME: server permissions are a mess currently: https://github.com/owncloud/ocis/issues/9862
+      return getPermissionsForSpaceMember(this, user).includes(
+        GraphSharePermission.deletePermissions
+      )
     },
-    canRestore: function ({ user, ability }: { user?: User; ability?: any } = {}) {
-      return this.disabled && (ability?.can('update-all', 'Drive') || this.isManager(user))
+    canRestore: function ({ user, ability }: { user?: User; ability?: Ability } = {}) {
+      if (!this.disabled) {
+        return false
+      }
+      if (ability?.can('update-all', 'Drive')) {
+        return true
+      }
+      // FIXME: server permissions are a mess currently: https://github.com/owncloud/ocis/issues/9862
+      return getPermissionsForSpaceMember(this, user).includes(
+        GraphSharePermission.deletePermissions
+      )
     },
-    canDisable: function ({ user, ability }: { user?: User; ability?: any } = {}) {
-      return !this.disabled && (ability?.can('delete-all', 'Drive') || this.isManager(user))
+    canDisable: function ({ user, ability }: { user?: User; ability?: Ability } = {}) {
+      if (this.disabled) {
+        return false
+      }
+      if (ability?.can('delete-all', 'Drive')) {
+        return true
+      }
+      // FIXME: server permissions are a mess currently: https://github.com/owncloud/ocis/issues/9862
+      return getPermissionsForSpaceMember(this, user).includes(
+        GraphSharePermission.deletePermissions
+      )
     },
     canShare: function ({ user }: { user?: User } = {}) {
-      return this.isManager(user)
+      return getPermissionsForSpaceMember(this, user).includes(
+        GraphSharePermission.createPermissions
+      )
     },
     canEditImage: function ({ user }: { user?: User } = {}) {
-      return !this.disabled && (this.isManager(user) || this.isEditor(user))
+      if (this.disabled) {
+        return false
+      }
+      // FIXME: server permissions are a mess currently: https://github.com/owncloud/ocis/issues/9862
+      return getPermissionsForSpaceMember(this, user).includes(
+        GraphSharePermission.deletePermissions
+      )
     },
     canEditReadme: function ({ user }: { user?: User } = {}) {
-      return this.isManager(user) || this.isEditor(user)
+      if (this.disabled) {
+        return false
+      }
+      // FIXME: server permissions are a mess currently: https://github.com/owncloud/ocis/issues/9862
+      return getPermissionsForSpaceMember(this, user).includes(
+        GraphSharePermission.deletePermissions
+      )
+    },
+    canRestoreFromTrashbin: function ({ user }: { user?: User } = {}) {
+      return getPermissionsForSpaceMember(this, user).includes(GraphSharePermission.updateDeleted)
     },
-    canRemoveFromTrashbin: function ({ user }: { user?: User } = {}) {
-      return this.isManager(user)
+    canDeleteFromTrashBin: function ({ user }: { user?: User } = {}) {
+      // FIXME: server permissions are a mess currently: https://github.com/owncloud/ocis/issues/9862
+      return getPermissionsForSpaceMember(this, user).includes(
+        GraphSharePermission.deletePermissions
+      )
     },
     canCreate: function () {
       return true
@@ -268,20 +324,11 @@ export function buildSpace(
     getWebDavTrashUrl({ path }: { path: string }): string {
       return urlJoin(webDavTrashUrl, path)
     },
-    isViewer(user: User): boolean {
-      return this.spaceRoles.viewer.some((r) => r.isMember(user))
-    },
-    isEditor(user: User): boolean {
-      return this.spaceRoles.editor.some((r) => r.isMember(user))
-    },
-    isManager(user: User): boolean {
-      return this.spaceRoles.manager.some((r) => r.isMember(user))
-    },
-    isSecureViewer(user: User): boolean {
-      return this.spaceRoles['secure-viewer'].some((r) => r.isMember(user))
-    },
     isMember(user: User): boolean {
-      return this.isViewer(user) || this.isEditor(user) || this.isManager(user)
+      if (this.isOwner(user) || !!this.members[user.id]) {
+        return true
+      }
+      return user.memberOf?.some((group) => !!this.members[group.id])
     },
     isOwner({ id }: User): boolean {
       return id === this.owner?.id
@@ -294,3 +341,49 @@ export function buildSpace(
   })
   return s
 }
+
+function getPermissionsForSpaceMember(space: SpaceResource, user: User) {
+  const permissions: string[] = []
+
+  // FIXME: user should always be given, adjust `can...` functions in SpaceResource
+  if (!user) {
+    return permissions
+  }
+
+  // gather permissions from direct user membership
+  const member = space.members[user.id]
+  if (member) {
+    permissions.push(...member.permissions)
+  }
+
+  // gather permissions from indirect group membership(s)
+  user.memberOf?.forEach((group) => {
+    const member = space.members[group.id]
+    if (member) {
+      permissions.push(...member.permissions)
+    }
+  })
+
+  return [...new Set(permissions)]
+}
+
+/**
+ * Get array of permissions from a given graph permission object. If it has '@libre.graph.permissions.actions',
+ * then no role exists for this set of permissions. Otherwise, the role is found in the graphRoles array.
+ */
+function getPermissionsFromGraphPermission(
+  permission: Permission,
+  graphRoles: Record<string, ShareRole>
+): string[] {
+  if (permission['@libre.graph.permissions.actions']) {
+    return permission['@libre.graph.permissions.actions']
+  }
+  const role = graphRoles[permission.roles?.[0]]
+  if (role) {
+    const permissions = role.rolePermissions.find(
+      ({ condition }) => condition === 'exists @Resource.Root'
+    )
+    return permissions?.allowedResourceActions || []
+  }
+  return []
+}
diff --git a/packages/web-client/src/helpers/space/types.ts b/packages/web-client/src/helpers/space/types.ts
index 2f4ffb6ac51..f656fad9727 100644
--- a/packages/web-client/src/helpers/space/types.ts
+++ b/packages/web-client/src/helpers/space/types.ts
@@ -6,22 +6,21 @@
 // ```
 // because in the else block resource gets the type never. If this is changed in a later TypeScript version
 // or all types get different members, the underscored props can be removed.
-import { DriveItem, Identity, Quota, User } from '@ownclouders/web-client/graph/generated'
+import {
+  DriveItem,
+  Quota,
+  SharePointIdentitySet,
+  User
+} from '@ownclouders/web-client/graph/generated'
 import { Ability, Resource } from '../resource'
 
 export const SHARE_JAIL_ID = 'a0ca6a90-a365-4782-871e-d44447bbc668'
 export const OCM_PROVIDER_ID = '89f37a33-858b-45fa-8890-a1f2b27d90e1'
 
-export interface SpaceRole extends Identity {
-  kind: 'user' | 'group'
-  isMember(u: User): boolean
-}
-
-export interface SpaceRoles {
-  viewer: SpaceRole[]
-  editor: SpaceRole[]
-  manager: SpaceRole[]
-  'secure-viewer': SpaceRole[]
+export type SpaceMember = {
+  grantedTo: SharePointIdentitySet
+  permissions: string[]
+  roleId: string
 }
 
 export interface SpaceResource extends Resource {
@@ -30,7 +29,7 @@ export interface SpaceResource extends Resource {
   driveAlias: string
   driveType: 'mountpoint' | 'personal' | 'project' | 'share' | 'public' | (string & unknown)
   root: DriveItem
-  spaceRoles: SpaceRoles
+  members: Record<string, SpaceMember>
   spaceQuota: Quota
   spaceImageData: DriveItem
   spaceReadmeData: DriveItem
@@ -41,15 +40,13 @@ export interface SpaceResource extends Resource {
   canEditImage(args?: { user?: User }): boolean
   canEditReadme(args?: { user?: User }): boolean
   canRestore(args?: { user?: User; ability?: Ability }): boolean
+  canDeleteFromTrashBin(args?: { user?: User }): boolean
+  canRestoreFromTrashbin(args?: { user?: User }): boolean
 
   getWebDavUrl({ path }: { path: string }): string
   getWebDavTrashUrl({ path }: { path: string }): string
   getDriveAliasAndItem(resource: Resource): string
 
-  isViewer(user: User): boolean
-  isSecureViewer(user: User): boolean
-  isEditor(user: User): boolean
-  isManager(user: User): boolean
   isMember(user: User): boolean
   isOwner(user: User): boolean
 }
diff --git a/packages/web-client/tests/unit/helpers/space/functions.spec.ts b/packages/web-client/tests/unit/helpers/space/functions.spec.ts
index c57e1bad6cc..0a2853a7b70 100644
--- a/packages/web-client/tests/unit/helpers/space/functions.spec.ts
+++ b/packages/web-client/tests/unit/helpers/space/functions.spec.ts
@@ -1,277 +1,398 @@
-import { buildSpace, ProjectSpaceResource } from '../../../../src/helpers/space'
+import { buildSpace } from '../../../../src/helpers/space'
 import { mock } from 'vitest-mock-extended'
-import { Ability } from '@ownclouders/web-client'
+import { Ability, GraphSharePermission, ShareRole } from '@ownclouders/web-client'
 import { Drive, User } from '@ownclouders/web-client/graph/generated'
 
+const noPermissionsRole = mock<ShareRole>({ id: '1', rolePermissions: [] })
+const canUploadRole = mock<ShareRole>({
+  id: '2',
+  rolePermissions: [
+    {
+      condition: 'exists @Resource.Root',
+      allowedResourceActions: [GraphSharePermission.createUpload]
+    }
+  ]
+})
+const canDeletePermissionsRole = mock<ShareRole>({
+  id: '3',
+  rolePermissions: [
+    {
+      condition: 'exists @Resource.Root',
+      allowedResourceActions: [GraphSharePermission.deletePermissions]
+    }
+  ]
+})
+const canCreatePermissionsRole = mock<ShareRole>({
+  id: '4',
+  rolePermissions: [
+    {
+      condition: 'exists @Resource.Root',
+      allowedResourceActions: [GraphSharePermission.createPermissions]
+    }
+  ]
+})
+
+const graphRoles = {
+  [noPermissionsRole.id]: noPermissionsRole,
+  [canUploadRole.id]: canUploadRole,
+  [canDeletePermissionsRole.id]: canDeletePermissionsRole,
+  [canCreatePermissionsRole.id]: canCreatePermissionsRole
+}
+
 describe('buildSpace', () => {
   const id = '1'
 
-  describe('isViewer', () => {
-    it.each([
-      { role: 'viewer', expectedResult: true },
-      { role: 'editor', expectedResult: false },
-      { role: 'manager', expectedResult: false }
-    ])('returns true for a viewer of the space', (data) => {
-      const space = buildSpace(
-        mock<Drive>({
-          special: null,
-          root: {
-            permissions: [{ roles: [data.role], grantedToIdentities: [{ user: { id } }] }]
-          }
-        })
-      ) as ProjectSpaceResource
-      expect(space.isViewer(mock<User>({ id }))).toBe(data.expectedResult)
-    })
-  })
+  const getSpace = ({ role, permissions }: { role: ShareRole; permissions: string[] }) => {
+    return buildSpace(
+      {
+        special: [],
+        root: {
+          permissions: [
+            {
+              roles: role ? [role.id] : [],
+              grantedToV2: { user: { id } },
+              ...(permissions.length && { '@libre.graph.permissions.actions': permissions })
+            }
+          ]
+        }
+      } as Drive,
+      graphRoles
+    )
+  }
 
-  describe('isEditor', () => {
+  describe('canUpload', () => {
     it.each([
-      { role: 'viewer', expectedResult: false },
-      { role: 'editor', expectedResult: true },
-      { role: 'manager', expectedResult: false }
-    ])('returns true for a editor of the space', (data) => {
-      const space = buildSpace(
-        mock<Drive>({
-          special: null,
-          root: {
-            permissions: [{ roles: [data.role], grantedToIdentities: [{ user: { id } }] }]
-          }
-        })
-      ) as ProjectSpaceResource
-      expect(space.isEditor(mock<User>({ id }))).toBe(data.expectedResult)
-    })
+      { permissions: [GraphSharePermission.createUpload], role: undefined, expectedResult: true },
+      { permissions: [], role: canUploadRole, expectedResult: true },
+      { permissions: [], role: noPermissionsRole, expectedResult: false }
+    ])(
+      'behaves accordingly to the given role and permissions',
+      ({ permissions, role, expectedResult }) => {
+        const space = getSpace({ role, permissions })
+        expect(space.canUpload({ user: mock<User>({ id, memberOf: [] }) })).toBe(expectedResult)
+      }
+    )
   })
 
-  describe('isManager', () => {
-    it.each([
-      { role: 'viewer', expectedResult: false },
-      { role: 'editor', expectedResult: false },
-      { role: 'manager', expectedResult: true }
-    ])('returns true for a manager of the space', (data) => {
-      const space = buildSpace(
-        mock<Drive>({
-          special: null,
-          root: {
-            permissions: [{ roles: [data.role], grantedToIdentities: [{ user: { id } }] }]
-          }
-        })
-      ) as ProjectSpaceResource
-      expect(space.isManager(mock<User>({ id }))).toBe(data.expectedResult)
+  describe('canDownload', () => {
+    it('is always true', () => {
+      const space = getSpace({ role: noPermissionsRole, permissions: [] })
+      expect(space.canDownload()).toBeTruthy()
     })
   })
 
-  it.each([
-    { role: 'viewer', expectedResult: false },
-    { role: 'editor', expectedResult: true },
-    { role: 'manager', expectedResult: true }
-  ])('canUpload', (data) => {
-    const space = buildSpace(
-      mock<Drive>({
-        special: null,
-        root: {
-          permissions: [{ roles: [data.role], grantedToIdentities: [{ user: { id } }] }]
-        }
-      })
-    ) as ProjectSpaceResource
-    expect(space.canUpload({ user: mock<User>({ id }) })).toBe(data.expectedResult)
-  })
-
-  it.each([
-    {
-      userCan: false,
-      spaceRole: 'manager',
-      spaceDisabled: true,
-      expectedResult: true
-    },
-    {
-      userCan: false,
-      spaceRole: 'editor',
-      spaceDisabled: true,
-      expectedResult: false
-    },
-    {
-      userCan: false,
-      spaceRole: 'viewer',
-      spaceDisabled: true,
-      expectedResult: false
-    },
-    {
-      userCan: true,
-      spaceRole: 'viewer',
-      spaceDisabled: true,
-      expectedResult: true
-    },
-    {
-      userCan: true,
-      spaceRole: 'viewer',
-      spaceDisabled: false,
-      expectedResult: false
-    }
-  ])('canBeDeleted', (data) => {
-    const ability = mock<Ability>({ can: () => data.userCan })
-    const space = buildSpace(
-      mock<Drive>({
-        special: null,
-        root: {
-          permissions: [{ roles: [data.spaceRole], grantedToIdentities: [{ user: { id } }] }],
-          ...(data.spaceDisabled && { deleted: { state: 'trashed' } })
-        }
-      })
-    ) as ProjectSpaceResource
-    expect(space.canBeDeleted({ user: mock<User>({ id }), ability })).toBe(data.expectedResult)
+  describe('canBeDeleted', () => {
+    it.each([
+      {
+        userCan: false,
+        permissions: [GraphSharePermission.deletePermissions],
+        role: undefined,
+        disabled: true,
+        expectedResult: true
+      },
+      {
+        userCan: false,
+        permissions: [],
+        role: canDeletePermissionsRole,
+        disabled: true,
+        expectedResult: true
+      },
+      {
+        userCan: false,
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: true,
+        expectedResult: false
+      },
+      {
+        userCan: true,
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: true,
+        expectedResult: true
+      },
+      {
+        userCan: true,
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: false,
+        expectedResult: false
+      }
+    ])(
+      'behaves accordingly to the given role, permissions, abilities and disabled state',
+      ({ permissions, role, expectedResult, userCan, disabled }) => {
+        const ability = mock<Ability>({ can: () => userCan })
+        const space = getSpace({ role, permissions })
+        space.disabled = disabled
+        expect(space.canBeDeleted({ user: mock<User>({ id, memberOf: [] }), ability })).toBe(
+          expectedResult
+        )
+      }
+    )
   })
 
-  it.each([
-    { spaceRole: 'manager', expectedResult: true },
-    { spaceRole: 'editor', expectedResult: false },
-    { spaceRole: 'viewer', expectedResult: false }
-  ])('canRename', (data) => {
-    const space = buildSpace(
-      mock<Drive>({
-        special: null,
-        root: {
-          permissions: [{ roles: [data.spaceRole], grantedToIdentities: [{ user: { id } }] }]
-        }
-      })
-    ) as ProjectSpaceResource
-    expect(space.canRename({ user: mock<User>({ id }) })).toBe(data.expectedResult)
+  describe('canRename', () => {
+    it.each([
+      {
+        userCan: false,
+        permissions: [GraphSharePermission.deletePermissions],
+        role: undefined,
+        expectedResult: true
+      },
+      {
+        userCan: false,
+        permissions: [],
+        role: canDeletePermissionsRole,
+        expectedResult: true
+      },
+      {
+        userCan: false,
+        permissions: [],
+        role: noPermissionsRole,
+        expectedResult: false
+      },
+      {
+        userCan: true,
+        permissions: [],
+        role: noPermissionsRole,
+        expectedResult: true
+      }
+    ])(
+      'behaves accordingly to the given role, permissions and abilities',
+      ({ permissions, role, expectedResult, userCan }) => {
+        const ability = mock<Ability>({ can: () => userCan })
+        const space = getSpace({ role, permissions })
+        expect(space.canRename({ user: mock<User>({ id, memberOf: [] }), ability })).toBe(
+          expectedResult
+        )
+      }
+    )
   })
 
-  it.each([
-    { spaceRole: 'manager', expectedResult: true },
-    { spaceRole: 'editor', expectedResult: false },
-    { spaceRole: 'viewer', expectedResult: false }
-  ])('canEditDescription', (data) => {
-    const space = buildSpace(
-      mock<Drive>({
-        special: null,
-        root: {
-          permissions: [{ roles: [data.spaceRole], grantedToIdentities: [{ user: { id } }] }]
-        }
-      })
-    ) as ProjectSpaceResource
-    expect(space.canEditDescription({ user: mock<User>({ id }) })).toBe(data.expectedResult)
+  describe('canEditDescription', () => {
+    it.each([
+      {
+        userCan: false,
+        permissions: [GraphSharePermission.deletePermissions],
+        role: undefined,
+        expectedResult: true
+      },
+      {
+        userCan: false,
+        permissions: [],
+        role: canDeletePermissionsRole,
+        expectedResult: true
+      },
+      {
+        userCan: false,
+        permissions: [],
+        role: noPermissionsRole,
+        expectedResult: false
+      },
+      {
+        userCan: true,
+        permissions: [],
+        role: noPermissionsRole,
+        expectedResult: true
+      }
+    ])(
+      'behaves accordingly to the given role, permissions and abilities',
+      ({ permissions, role, expectedResult, userCan }) => {
+        const ability = mock<Ability>({ can: () => userCan })
+        const space = getSpace({ role, permissions })
+        expect(space.canEditDescription({ user: mock<User>({ id, memberOf: [] }), ability })).toBe(
+          expectedResult
+        )
+      }
+    )
   })
 
-  it.each([
-    {
-      spaceRole: 'manager',
-      spaceDisabled: true,
-      expectedResult: true
-    },
-    {
-      spaceRole: 'editor',
-      spaceDisabled: true,
-      expectedResult: false
-    },
-    {
-      spaceRole: 'viewer',
-      spaceDisabled: true,
-      expectedResult: false
-    }
-  ])('canRestore', (data) => {
-    const space = buildSpace(
-      mock<Drive>({
-        special: null,
-        root: {
-          permissions: [{ roles: [data.spaceRole], grantedToIdentities: [{ user: { id } }] }],
-          ...(data.spaceDisabled && { deleted: { state: 'trashed' } })
-        }
-      })
-    ) as ProjectSpaceResource
-    expect(space.canRestore({ user: mock<User>({ id }) })).toBe(data.expectedResult)
+  describe('canShare', () => {
+    it.each([
+      {
+        permissions: [GraphSharePermission.createPermissions],
+        role: undefined,
+        expectedResult: true
+      },
+      { permissions: [], role: canCreatePermissionsRole, expectedResult: true },
+      { permissions: [], role: noPermissionsRole, expectedResult: false }
+    ])(
+      'behaves accordingly to the given role and permissions',
+      ({ permissions, role, expectedResult }) => {
+        const space = getSpace({ role, permissions })
+        expect(space.canShare({ user: mock<User>({ id, memberOf: [] }) })).toBe(expectedResult)
+      }
+    )
   })
 
-  it.each([
-    {
-      userCan: false,
-      spaceRole: 'manager',
-      spaceDisabled: false,
-      expectedResult: true
-    },
-    {
-      userCan: false,
-      spaceRole: 'editor',
-      spaceDisabled: false,
-      expectedResult: false
-    },
-    {
-      userCan: false,
-      spaceRole: 'viewer',
-      spaceDisabled: false,
-      expectedResult: false
-    },
-    {
-      userCan: true,
-      spaceRole: 'viewer',
-      spaceDisabled: false,
-      expectedResult: true
-    },
-    {
-      userCan: true,
-      spaceRole: 'viewer',
-      spaceDisabled: true,
-      expectedResult: false
-    }
-  ])('canDisable', (data) => {
-    const ability = mock<Ability>({ can: () => data.userCan })
-    const space = buildSpace(
-      mock<Drive>({
-        special: null,
-        root: {
-          permissions: [{ roles: [data.spaceRole], grantedToIdentities: [{ user: { id } }] }],
-          ...(data.spaceDisabled && { deleted: { state: 'trashed' } })
-        }
-      })
-    ) as ProjectSpaceResource
-    expect(space.canDisable({ user: mock<User>({ id }), ability })).toBe(data.expectedResult)
+  describe('canRestore', () => {
+    it.each([
+      {
+        userCan: false,
+        permissions: [GraphSharePermission.deletePermissions],
+        role: undefined,
+        disabled: true,
+        expectedResult: true
+      },
+      {
+        userCan: false,
+        permissions: [],
+        role: canDeletePermissionsRole,
+        disabled: true,
+        expectedResult: true
+      },
+      {
+        userCan: false,
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: true,
+        expectedResult: false
+      },
+      {
+        userCan: true,
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: true,
+        expectedResult: true
+      },
+      {
+        userCan: true,
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: false,
+        expectedResult: false
+      }
+    ])(
+      'behaves accordingly to the given role, permissions, abilities and disabled state',
+      ({ permissions, role, expectedResult, userCan, disabled }) => {
+        const ability = mock<Ability>({ can: () => userCan })
+        const space = getSpace({ role, permissions })
+        space.disabled = disabled
+        expect(space.canRestore({ user: mock<User>({ id, memberOf: [] }), ability })).toBe(
+          expectedResult
+        )
+      }
+    )
   })
 
-  it.each([
-    { role: 'manager', expectedResult: true },
-    { role: 'editor', expectedResult: false },
-    { role: 'viewer', expectedResult: false }
-  ])('canShare', (data) => {
-    const space = buildSpace(
-      mock<Drive>({
-        special: null,
-        root: {
-          permissions: [{ roles: [data.role], grantedToIdentities: [{ user: { id } }] }]
-        }
-      })
-    ) as ProjectSpaceResource
-    expect(space.canShare({ user: mock<User>({ id }) })).toBe(data.expectedResult)
+  describe('canDisable', () => {
+    it.each([
+      {
+        userCan: false,
+        permissions: [GraphSharePermission.deletePermissions],
+        role: undefined,
+        disabled: false,
+        expectedResult: true
+      },
+      {
+        userCan: false,
+        permissions: [],
+        role: canDeletePermissionsRole,
+        disabled: false,
+        expectedResult: true
+      },
+      {
+        userCan: false,
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: false,
+        expectedResult: false
+      },
+      {
+        userCan: true,
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: false,
+        expectedResult: true
+      },
+      {
+        userCan: true,
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: true,
+        expectedResult: false
+      }
+    ])(
+      'behaves accordingly to the given role, permissions, abilities and disabled state',
+      ({ permissions, role, expectedResult, userCan, disabled }) => {
+        const ability = mock<Ability>({ can: () => userCan })
+        const space = getSpace({ role, permissions })
+        space.disabled = disabled
+        expect(space.canDisable({ user: mock<User>({ id, memberOf: [] }), ability })).toBe(
+          expectedResult
+        )
+      }
+    )
   })
 
-  it.each([
-    { role: 'manager', expectedResult: true },
-    { role: 'editor', expectedResult: true },
-    { role: 'viewer', expectedResult: false }
-  ])('canEditImage', (data) => {
-    const space = buildSpace(
-      mock<Drive>({
-        special: null,
-        root: {
-          permissions: [{ roles: [data.role], grantedToIdentities: [{ user: { id } }] }]
-        }
-      })
-    ) as ProjectSpaceResource
-    expect(space.canEditImage({ user: mock<User>({ id }) })).toBe(data.expectedResult)
+  describe('canEditImage', () => {
+    it.each([
+      {
+        permissions: [GraphSharePermission.deletePermissions],
+        role: undefined,
+        disabled: false,
+        expectedResult: true
+      },
+      {
+        permissions: [],
+        role: canDeletePermissionsRole,
+        disabled: false,
+        expectedResult: true
+      },
+      {
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: false,
+        expectedResult: false
+      },
+      {
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: true,
+        expectedResult: false
+      }
+    ])(
+      'behaves accordingly to the given role, permissions and disabled state',
+      ({ permissions, role, expectedResult, disabled }) => {
+        const space = getSpace({ role, permissions })
+        space.disabled = disabled
+        expect(space.canEditImage({ user: mock<User>({ id, memberOf: [] }) })).toBe(expectedResult)
+      }
+    )
   })
-
-  it.each([
-    { role: 'manager', expectedResult: true },
-    { role: 'editor', expectedResult: true },
-    { role: 'viewer', expectedResult: false }
-  ])('canEditReadme', (data) => {
-    const space = buildSpace(
-      mock<Drive>({
-        special: null,
-        root: {
-          permissions: [{ roles: [data.role], grantedToIdentities: [{ user: { id } }] }]
-        }
-      })
-    ) as ProjectSpaceResource
-    expect(space.canEditReadme({ user: mock<User>({ id }) })).toBe(data.expectedResult)
+  describe('canEditReadme', () => {
+    it.each([
+      {
+        permissions: [GraphSharePermission.deletePermissions],
+        role: undefined,
+        disabled: false,
+        expectedResult: true
+      },
+      {
+        permissions: [],
+        role: canDeletePermissionsRole,
+        disabled: false,
+        expectedResult: true
+      },
+      {
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: false,
+        expectedResult: false
+      },
+      {
+        permissions: [],
+        role: noPermissionsRole,
+        disabled: true,
+        expectedResult: false
+      }
+    ])(
+      'behaves accordingly to the given role, permissions and disabled state',
+      ({ permissions, role, expectedResult, disabled }) => {
+        const space = getSpace({ role, permissions })
+        space.disabled = disabled
+        expect(space.canEditReadme({ user: mock<User>({ id, memberOf: [] }) })).toBe(expectedResult)
+      }
+    )
   })
 })
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 397b3ddcc6d..37ab5f73f4d 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -716,14 +716,14 @@ export default defineComponent({
 
             {
               name: 'manager',
-              prop: 'spaceRoles',
+              prop: 'members',
               title: this.$gettext('Manager'),
               type: 'slot'
             },
             {
               name: 'members',
               title: this.$gettext('Members'),
-              prop: 'spaceRoles',
+              prop: 'members',
               type: 'slot'
             },
             {
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
index 2f4088d5346..d68c91d0f4b 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
@@ -83,7 +83,11 @@
 import { storeToRefs } from 'pinia'
 import { defineComponent, inject, ref, Ref, computed, unref } from 'vue'
 import { useTask } from 'vue-concurrency'
-import { getRelativeSpecialFolderSpacePath, SpaceResource } from '@ownclouders/web-client'
+import {
+  getRelativeSpecialFolderSpacePath,
+  getSpaceManagers,
+  SpaceResource
+} from '@ownclouders/web-client'
 import {
   usePreviewService,
   useClientService,
@@ -230,12 +234,14 @@ export default defineComponent({
       return formatDateFromISO(this.resource.mdate, this.$language.current)
     },
     ownerUsernames() {
-      return this.resource.spaceRoles.manager
+      const managers = getSpaceManagers(this.resource)
+      return managers
         .map((share) => {
-          if (share.id === this.user?.id) {
-            return this.$gettext('%{displayName} (me)', { displayName: share.displayName })
+          const member = share.grantedTo.user || share.grantedTo.group
+          if (member.id === this.user?.id) {
+            return this.$gettext('%{displayName} (me)', { displayName: member.displayName })
           }
-          return share.displayName
+          return member.displayName
         })
         .join(', ')
     },
@@ -246,7 +252,7 @@ export default defineComponent({
       return this.linkShareCount > 0
     },
     memberShareCount() {
-      return this.spaceMembers.length
+      return Object.keys(this.resource.members).length
     },
     memberShareLabel() {
       return this.$ngettext(
diff --git a/packages/web-pkg/src/components/Spaces/QuotaModal.vue b/packages/web-pkg/src/components/Spaces/QuotaModal.vue
index 0dc6e092c92..f3eaa902db6 100644
--- a/packages/web-pkg/src/components/Spaces/QuotaModal.vue
+++ b/packages/web-pkg/src/components/Spaces/QuotaModal.vue
@@ -28,7 +28,8 @@ import {
   useMessages,
   useSpacesStore,
   useCapabilityStore,
-  useResourcesStore
+  useResourcesStore,
+  useSharesStore
 } from '../../composables'
 import { useRouter } from '../../composables/router'
 import { eventBus } from '../../services'
@@ -72,6 +73,7 @@ export default defineComponent({
     const clientService = useClientService()
     const router = useRouter()
     const spacesStore = useSpacesStore()
+    const sharesStore = useSharesStore()
     const { updateResourceField } = useResourcesStore()
 
     const selectedOption = ref(0)
@@ -137,7 +139,7 @@ export default defineComponent({
         const updatedSpace = await client.drives.updateDrive(
           space.id,
           { name: space.name, quota: { total: unref(selectedOption) } },
-          {}
+          sharesStore.graphRoles
         )
         if (unref(router.currentRoute).name === 'admin-settings-spaces') {
           eventBus.publish('app.admin-settings.spaces.space.quota.updated', {
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsDelete.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsDelete.ts
index 62274d76185..607a9c17fba 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsDelete.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsDelete.ts
@@ -99,7 +99,7 @@ export const useFileActionsDelete = () => {
 
         if (
           isProjectSpaceResource(space) &&
-          !space.canRemoveFromTrashbin({ user: userStore.user })
+          !space.canDeleteFromTrashBin({ user: userStore.user })
         ) {
           return false
         }
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsEmptyTrashBin.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsEmptyTrashBin.ts
index 69a022d2703..11f1984da94 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsEmptyTrashBin.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsEmptyTrashBin.ts
@@ -70,7 +70,7 @@ export const useFileActionsEmptyTrashBin = () => {
 
         if (
           isProjectSpaceResource(space) &&
-          !space.canRemoveFromTrashbin({ user: userStore.user })
+          !space.canDeleteFromTrashBin({ user: userStore.user })
         ) {
           return false
         }
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsRename.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsRename.ts
index 953ff9901fe..dc7c80c4ea1 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsRename.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsRename.ts
@@ -20,8 +20,10 @@ import {
   useModals,
   useCapabilityStore,
   useConfigStore,
-  useResourcesStore
+  useResourcesStore,
+  useUserStore
 } from '../../piniaStores'
+import { useAbility } from '../../ability'
 
 export const useFileActionsRename = () => {
   const { showErrorMessage } = useMessages()
@@ -31,6 +33,8 @@ export const useFileActionsRename = () => {
   const clientService = useClientService()
   const configStore = useConfigStore()
   const { dispatchModal } = useModals()
+  const userStore = useUserStore()
+  const ability = useAbility()
 
   const resourcesStore = useResourcesStore()
   const { setCurrentFolder, upsertResource } = resourcesStore
@@ -238,7 +242,7 @@ export const useFileActionsRename = () => {
         }
 
         const renameDisabled = resources.some((resource) => {
-          return !resource.canRename() || resource.processing
+          return !resource.canRename({ user: userStore.user, ability }) || resource.processing
         })
         return !renameDisabled
       },
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsRestore.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsRestore.ts
index da353cb1d42..324d6ab01a5 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsRestore.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsRestore.ts
@@ -20,7 +20,13 @@ import { useRouter } from '../../router'
 import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import type { FileAction, FileActionOptions } from '../types'
-import { useMessages, useSpacesStore, useUserStore, useResourcesStore } from '../../piniaStores'
+import {
+  useMessages,
+  useSpacesStore,
+  useUserStore,
+  useResourcesStore,
+  useSharesStore
+} from '../../piniaStores'
 import { useRestoreWorker } from '../../webWorkers/restoreWorker'
 
 export const useFileActionsRestore = () => {
@@ -30,6 +36,7 @@ export const useFileActionsRestore = () => {
   const { $gettext, $ngettext } = useGettext()
   const clientService = useClientService()
   const spacesStore = useSpacesStore()
+  const sharesStore = useSharesStore()
   const resourcesStore = useResourcesStore()
   const { startWorker } = useRestoreWorker()
 
@@ -143,7 +150,7 @@ export const useFileActionsRestore = () => {
 
         // Reload quota
         const graphClient = clientService.graphAuthenticated
-        const updatedSpace = await graphClient.drives.getDrive(space.id)
+        const updatedSpace = await graphClient.drives.getDrive(space.id, sharesStore.graphRoles)
         spacesStore.updateSpaceField({
           id: updatedSpace.id,
           field: 'spaceQuota',
@@ -220,8 +227,7 @@ export const useFileActionsRestore = () => {
 
         if (
           isProjectSpaceResource(space) &&
-          !space.isEditor(userStore.user) &&
-          !space.isManager(userStore.user)
+          !space.canRestoreFromTrashbin({ user: userStore.user })
         ) {
           return false
         }
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsSetImage.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsSetImage.ts
index 0e123a842af..9e70921610f 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsSetImage.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsSetImage.ts
@@ -6,7 +6,7 @@ import { useRouter } from '../../router'
 import { useGettext } from 'vue3-gettext'
 import { computed } from 'vue'
 import { FileAction, FileActionOptions } from '../types'
-import { useMessages, useSpacesStore, useUserStore } from '../../piniaStores'
+import { useMessages, useSharesStore, useSpacesStore, useUserStore } from '../../piniaStores'
 import { useCreateSpace, useSpaceHelpers } from '../../spaces'
 
 export const useFileActionsSetImage = () => {
@@ -18,6 +18,7 @@ export const useFileActionsSetImage = () => {
   const loadingService = useLoadingService()
   const previewService = usePreviewService()
   const spacesStore = useSpacesStore()
+  const sharesStore = useSharesStore()
   const { createDefaultMetaFolder } = useCreateSpace()
   const { getDefaultMetaFolder } = useSpaceHelpers()
 
@@ -43,10 +44,14 @@ export const useFileActionsSetImage = () => {
       }
 
       const { fileId } = await getFileInfo(space, { fileId: resources[0].id })
-      const updatedSpace = await graphClient.drives.updateDrive(storageId, {
-        name: space.name,
-        special: [{ specialFolder: { name: 'image' }, id: fileId }]
-      })
+      const updatedSpace = await graphClient.drives.updateDrive(
+        storageId,
+        {
+          name: space.name,
+          special: [{ specialFolder: { name: 'image' }, id: fileId }]
+        },
+        sharesStore.graphRoles
+      )
 
       spacesStore.updateSpaceField({
         id: storageId,
diff --git a/packages/web-pkg/src/composables/actions/helpers/useFileActionsDeleteResources.ts b/packages/web-pkg/src/composables/actions/helpers/useFileActionsDeleteResources.ts
index 95f7b9ba8e0..3247d38d27a 100644
--- a/packages/web-pkg/src/composables/actions/helpers/useFileActionsDeleteResources.ts
+++ b/packages/web-pkg/src/composables/actions/helpers/useFileActionsDeleteResources.ts
@@ -17,7 +17,8 @@ import {
   useModals,
   useSpacesStore,
   useConfigStore,
-  useResourcesStore
+  useResourcesStore,
+  useSharesStore
 } from '../../piniaStores'
 import { storeToRefs } from 'pinia'
 import { useDeleteWorker } from '../../webWorkers'
@@ -32,6 +33,7 @@ export const useFileActionsDeleteResources = () => {
   const clientService = useClientService()
   const { dispatchModal } = useModals()
   const spacesStore = useSpacesStore()
+  const sharesStore = useSharesStore()
   const { startWorker } = useDeleteWorker({
     concurrentRequests: configStore.options.concurrentRequests.resourceBatchActions
   })
@@ -224,7 +226,10 @@ export const useFileActionsDeleteResources = () => {
               !['public', 'share'].includes(spaceForDeletion?.driveType)
             ) {
               const graphClient = clientService.graphAuthenticated
-              const updatedSpace = await graphClient.drives.getDrive(unref(resources)[0].storageId)
+              const updatedSpace = await graphClient.drives.getDrive(
+                unref(resources)[0].storageId,
+                sharesStore.graphRoles
+              )
               spacesStore.updateSpaceField({
                 id: updatedSpace.id,
                 field: 'spaceQuota',
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDuplicate.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDuplicate.ts
index c1f94b3bbe1..fbff646d404 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDuplicate.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDuplicate.ts
@@ -11,11 +11,18 @@ import { resolveFileNameDuplicate } from '../../../helpers/resource/conflictHand
 import PQueue from 'p-queue'
 import { useRouter } from '../../router'
 import { isLocationSpacesActive } from '../../../router'
-import { useConfigStore, useMessages, useResourcesStore, useSpacesStore } from '../../piniaStores'
+import {
+  useConfigStore,
+  useMessages,
+  useResourcesStore,
+  useSharesStore,
+  useSpacesStore
+} from '../../piniaStores'
 
 export const useSpaceActionsDuplicate = () => {
   const configStore = useConfigStore()
   const spacesStore = useSpacesStore()
+  const sharesStore = useSharesStore()
   const { showMessage, showErrorMessage } = useMessages()
   const router = useRouter()
   const { $gettext } = useGettext()
@@ -37,7 +44,7 @@ export const useSpaceActionsDuplicate = () => {
           description: existingSpace.description,
           quota: { total: existingSpace.spaceQuota.total }
         },
-        {}
+        sharesStore.graphRoles
       )
 
       const existingSpaceFiles = await clientService.webdav.listFiles(existingSpace)
@@ -91,7 +98,8 @@ export const useSpaceActionsDuplicate = () => {
 
         duplicatedSpace = await clientService.graphAuthenticated.drives.updateDrive(
           duplicatedSpace.id,
-          specialRequestData
+          specialRequestData,
+          sharesStore.graphRoles
         )
       }
 
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditDescription.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditDescription.ts
index f8e73305b17..fcee43a1ed7 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditDescription.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditDescription.ts
@@ -5,7 +5,13 @@ import { useAbility } from '../../ability'
 import { useClientService } from '../../clientService'
 import { useGettext } from 'vue3-gettext'
 import { SpaceResource } from '@ownclouders/web-client'
-import { useMessages, useModals, useSpacesStore, useUserStore } from '../../piniaStores'
+import {
+  useMessages,
+  useModals,
+  useSharesStore,
+  useSpacesStore,
+  useUserStore
+} from '../../piniaStores'
 
 export const useSpaceActionsEditDescription = () => {
   const { showMessage, showErrorMessage } = useMessages()
@@ -16,11 +22,12 @@ export const useSpaceActionsEditDescription = () => {
   const route = useRoute()
   const { dispatchModal } = useModals()
   const spacesStore = useSpacesStore()
+  const sharesStore = useSharesStore()
 
   const editDescriptionSpace = (space: SpaceResource, description: string) => {
     const graphClient = clientService.graphAuthenticated
     return graphClient.drives
-      .updateDrive(space.id, { name: space.name, description })
+      .updateDrive(space.id, { name: space.name, description }, sharesStore.graphRoles)
       .then(() => {
         spacesStore.updateSpaceField({ id: space.id, field: 'description', value: description })
         if (unref(route).name === 'admin-settings-spaces') {
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditReadmeContent.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditReadmeContent.ts
index 6ffcd2959eb..24de2d74d40 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditReadmeContent.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditReadmeContent.ts
@@ -5,7 +5,7 @@ import { useGettext } from 'vue3-gettext'
 import { useOpenWithDefaultApp } from '../useOpenWithDefaultApp'
 import { getRelativeSpecialFolderSpacePath, Resource, SpaceResource } from '@ownclouders/web-client'
 import { useClientService } from '../../clientService'
-import { useSpacesStore, useUserStore } from '../../piniaStores'
+import { useSharesStore, useSpacesStore, useUserStore } from '../../piniaStores'
 import { useCreateSpace, useSpaceHelpers } from '../../spaces'
 
 export const useSpaceActionsEditReadmeContent = () => {
@@ -14,6 +14,7 @@ export const useSpaceActionsEditReadmeContent = () => {
   const { createDefaultMetaFolder } = useCreateSpace()
   const userStore = useUserStore()
   const spacesStore = useSpacesStore()
+  const sharesStore = useSharesStore()
   const { $gettext } = useGettext()
   const { getDefaultMetaFolder } = useSpaceHelpers()
 
@@ -25,10 +26,14 @@ export const useSpaceActionsEditReadmeContent = () => {
       fileName: 'readme.md'
     })
 
-    const updatesSpace = await clientService.graphAuthenticated.drives.updateDrive(space.id, {
-      name: space.name,
-      special: [{ specialFolder: { name: 'readme' }, id: markdownResource.id }]
-    })
+    const updatesSpace = await clientService.graphAuthenticated.drives.updateDrive(
+      space.id,
+      {
+        name: space.name,
+        special: [{ specialFolder: { name: 'readme' }, id: markdownResource.id }]
+      },
+      sharesStore.graphRoles
+    )
 
     spacesStore.updateSpaceField({
       id: space.id,
@@ -73,10 +78,6 @@ export const useSpaceActionsEditReadmeContent = () => {
           return false
         }
 
-        if (resources[0].disabled) {
-          return false
-        }
-
         return resources[0].canEditReadme({ user: userStore.user })
       },
       componentType: 'button',
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRename.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRename.ts
index 9490203d2e9..eeaa8278d4d 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRename.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRename.ts
@@ -6,7 +6,13 @@ import { useAbility } from '../../ability'
 import { useRoute } from '../../router'
 import { SpaceAction, SpaceActionOptions } from '../types'
 import { SpaceResource } from '@ownclouders/web-client'
-import { useMessages, useModals, useSpacesStore, useUserStore } from '../../piniaStores'
+import {
+  useMessages,
+  useModals,
+  useSharesStore,
+  useSpacesStore,
+  useUserStore
+} from '../../piniaStores'
 
 export const useSpaceActionsRename = () => {
   const { showMessage, showErrorMessage } = useMessages()
@@ -18,11 +24,12 @@ export const useSpaceActionsRename = () => {
   const { checkSpaceNameModalInput } = useSpaceHelpers()
   const { dispatchModal } = useModals()
   const spacesStore = useSpacesStore()
+  const sharesStore = useSharesStore()
 
   const renameSpace = (space: SpaceResource, name: string) => {
     const graphClient = clientService.graphAuthenticated
     return graphClient.drives
-      .updateDrive(space.id, { name }, {})
+      .updateDrive(space.id, { name }, sharesStore.graphRoles)
       .then(() => {
         if (unref(route).name === 'admin-settings-spaces') {
           space.name = name
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRestore.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRestore.ts
index e23efd74666..b30ed2b6af7 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRestore.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRestore.ts
@@ -7,7 +7,13 @@ import { useClientService } from '../../clientService'
 import { useLoadingService } from '../../loadingService'
 import { useGettext } from 'vue3-gettext'
 import { isProjectSpaceResource } from '@ownclouders/web-client'
-import { useMessages, useModals, useSpacesStore, useUserStore } from '../../piniaStores'
+import {
+  useMessages,
+  useModals,
+  useSharesStore,
+  useSpacesStore,
+  useUserStore
+} from '../../piniaStores'
 
 export const useSpaceActionsRestore = () => {
   const { showMessage, showErrorMessage } = useMessages()
@@ -19,6 +25,7 @@ export const useSpaceActionsRestore = () => {
   const route = useRoute()
   const { dispatchModal } = useModals()
   const spacesStore = useSpacesStore()
+  const sharesStore = useSharesStore()
 
   const filterResourcesToRestore = (resources: SpaceResource[]): SpaceResource[] => {
     return resources.filter(
@@ -30,7 +37,9 @@ export const useSpaceActionsRestore = () => {
     const client = clientService.graphAuthenticated
     const promises = spaces.map((space) =>
       client.drives
-        .updateDrive(space.id, { name: space.name }, { headers: { Restore: 'true' } })
+        .updateDrive(space.id, { name: space.name }, sharesStore.graphRoles, {
+          headers: { Restore: 'true' }
+        })
         .then((updatedSpace) => {
           if (unref(route).name === 'admin-settings-spaces') {
             space.disabled = false
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsSetIcon.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsSetIcon.ts
index 57d53f4bf93..fcdebcd760e 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsSetIcon.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsSetIcon.ts
@@ -4,7 +4,13 @@ import { SpaceAction, SpaceActionOptions } from '../types'
 import { useClientService } from '../../clientService'
 import { useLoadingService } from '../../loadingService'
 import { useGettext } from 'vue3-gettext'
-import { useMessages, useModals, useSpacesStore, useUserStore } from '../../piniaStores'
+import {
+  useMessages,
+  useModals,
+  useSharesStore,
+  useSpacesStore,
+  useUserStore
+} from '../../piniaStores'
 import { useCreateSpace, useSpaceHelpers } from '../../spaces'
 import { eventBus } from '../../../services'
 import { blobToArrayBuffer, canvasToBlob } from '../../../helpers'
@@ -20,6 +26,7 @@ export const useSpaceActionsSetIcon = () => {
   const { createDefaultMetaFolder } = useCreateSpace()
   const { dispatchModal } = useModals()
   const { getDefaultMetaFolder } = useSpaceHelpers()
+  const sharesStore = useSharesStore()
 
   const handler = ({ resources }: SpaceActionOptions) => {
     if (resources.length !== 1) {
@@ -84,10 +91,14 @@ export const useSpaceActionsSetIcon = () => {
           overwrite: true
         })
 
-        const updatedSpace = await graphClient.drives.updateDrive(space.id, {
-          name: space.name,
-          special: [{ specialFolder: { name: 'image' }, id: fileId }]
-        })
+        const updatedSpace = await graphClient.drives.updateDrive(
+          space.id,
+          {
+            name: space.name,
+            special: [{ specialFolder: { name: 'image' }, id: fileId }]
+          },
+          sharesStore.graphRoles
+        )
 
         spacesStore.updateSpaceField({
           id: space.id,
diff --git a/packages/web-pkg/src/composables/piniaStores/spaces.ts b/packages/web-pkg/src/composables/piniaStores/spaces.ts
index 570519ebb98..77a0ed8aebb 100644
--- a/packages/web-pkg/src/composables/piniaStores/spaces.ts
+++ b/packages/web-pkg/src/composables/piniaStores/spaces.ts
@@ -8,7 +8,7 @@ import {
   isPersonalSpaceResource,
   isProjectSpaceResource
 } from '@ownclouders/web-client'
-import type { CollaboratorShare } from '@ownclouders/web-client'
+import type { CollaboratorShare, ShareRole } from '@ownclouders/web-client'
 import { useUserStore } from './user'
 import { ConfigStore, useConfigStore } from './config'
 import { useSharesStore } from './shares'
@@ -21,13 +21,15 @@ export const sortSpaceMembers = (shares: CollaboratorShare[]) => {
 export const getSpacesByType = async ({
   graphClient,
   driveType,
-  configStore
+  configStore,
+  graphRoles
 }: {
   graphClient: Graph
   driveType: string
   configStore: ConfigStore
+  graphRoles: Record<string, ShareRole>
 }) => {
-  const mountpoints = await graphClient.drives.listMyDrives({
+  const mountpoints = await graphClient.drives.listMyDrives(graphRoles, {
     orderBy: 'name asc',
     filter: `driveType eq ${driveType}`
   })
@@ -47,14 +49,17 @@ export const getSpacesByType = async ({
 
   const rootSpaces = Object.entries(rootSpaceDriveAliasMapping).map(([id, driveAlias]) =>
     // FIXME: create proper buildRootSpace (or whatever function)
-    buildSpace({
-      id: extractStorageId(id),
-      name: driveAlias, // FIXME: set a proper name
-      driveType: driveAlias.split('/')[0], // FIXME: can we retrieve this from api?
-      driveAlias,
-      path: '/',
-      serverUrl: configStore.serverUrl
-    })
+    buildSpace(
+      {
+        id: extractStorageId(id),
+        name: driveAlias, // FIXME: set a proper name
+        driveType: driveAlias.split('/')[0], // FIXME: can we retrieve this from api?
+        driveAlias,
+        path: '/',
+        serverUrl: configStore.serverUrl
+      },
+      graphRoles
+    )
   )
 
   return [...mountpoints, ...rootSpaces]
@@ -140,8 +145,18 @@ export const useSpacesStore = defineStore('spaces', () => {
        *    fetched first. but at the moment fetching mountpoints is kind of expensive, so we need to accept that for now.
        */
       const [personalSpaces, projectSpaces] = await Promise.all([
-        getSpacesByType({ graphClient, driveType: 'personal', configStore }),
-        getSpacesByType({ graphClient, driveType: 'project', configStore })
+        getSpacesByType({
+          graphClient,
+          driveType: 'personal',
+          configStore,
+          graphRoles: sharesStore.graphRoles
+        }),
+        getSpacesByType({
+          graphClient,
+          driveType: 'project',
+          configStore,
+          graphRoles: sharesStore.graphRoles
+        })
       ])
 
       addSpaces([...personalSpaces, ...projectSpaces])
@@ -160,7 +175,8 @@ export const useSpacesStore = defineStore('spaces', () => {
       const mountPointSpaces = await getSpacesByType({
         graphClient,
         driveType: 'mountpoint',
-        configStore
+        configStore,
+        graphRoles: sharesStore.graphRoles
       })
       addSpaces(mountPointSpaces)
     } finally {
@@ -169,7 +185,12 @@ export const useSpacesStore = defineStore('spaces', () => {
   }
 
   const reloadProjectSpaces = async ({ graphClient }: { graphClient: Graph }) => {
-    const projectSpaces = await getSpacesByType({ graphClient, driveType: 'project', configStore })
+    const projectSpaces = await getSpacesByType({
+      graphClient,
+      driveType: 'project',
+      configStore,
+      graphRoles: sharesStore.graphRoles
+    })
     spaces.value = unref(spaces).filter((s) => !isProjectSpaceResource(s))
     addSpaces(projectSpaces)
   }
diff --git a/packages/web-pkg/src/composables/resources/useGetResourceContext.ts b/packages/web-pkg/src/composables/resources/useGetResourceContext.ts
index 43ae4402659..4f44c774c67 100644
--- a/packages/web-pkg/src/composables/resources/useGetResourceContext.ts
+++ b/packages/web-pkg/src/composables/resources/useGetResourceContext.ts
@@ -8,13 +8,14 @@ import {
 import { computed, unref } from 'vue'
 import { useClientService } from '../clientService'
 import { urlJoin } from '@ownclouders/web-client'
-import { useSpacesStore, useConfigStore } from '../piniaStores'
+import { useSpacesStore, useConfigStore, useSharesStore } from '../piniaStores'
 import { DavProperty } from '@ownclouders/web-client/webdav'
 
 export const useGetResourceContext = () => {
   const clientService = useClientService()
   const configStore = useConfigStore()
   const spacesStore = useSpacesStore()
+  const shareStore = useSharesStore()
 
   const spaces = computed(() => spacesStore.spaces)
 
@@ -35,7 +36,7 @@ export const useGetResourceContext = () => {
       DavProperty.ResourceType
     ]
 
-    const tmpSpace = buildSpace({ id: fileId, name: '' })
+    const tmpSpace = buildSpace({ id: fileId, name: '' }, shareStore.graphRoles)
     return clientService.webdav.getFileInfo(tmpSpace, { fileId }, { davProperties })
   }
 
diff --git a/packages/web-pkg/src/composables/shares/useCanShare.ts b/packages/web-pkg/src/composables/shares/useCanShare.ts
index 9b606de4845..3c68af74329 100644
--- a/packages/web-pkg/src/composables/shares/useCanShare.ts
+++ b/packages/web-pkg/src/composables/shares/useCanShare.ts
@@ -17,7 +17,7 @@ export const useCanShare = () => {
       return false
     }
 
-    if (isProjectSpaceResource(space) && !space.isManager(userStore.user)) {
+    if (isProjectSpaceResource(space) && !space.canShare({ user: userStore.user })) {
       return false
     }
 
diff --git a/packages/web-pkg/src/composables/spaces/useCreateSpace.ts b/packages/web-pkg/src/composables/spaces/useCreateSpace.ts
index dfac987585f..19b59fca774 100644
--- a/packages/web-pkg/src/composables/spaces/useCreateSpace.ts
+++ b/packages/web-pkg/src/composables/spaces/useCreateSpace.ts
@@ -1,14 +1,17 @@
 import { extractStorageId, SpaceResource } from '@ownclouders/web-client'
 import { useClientService } from '../clientService'
-import { useResourcesStore } from '../piniaStores'
+import { useResourcesStore, useSharesStore } from '../piniaStores'
 
 export const useCreateSpace = () => {
   const clientService = useClientService()
   const resourcesStore = useResourcesStore()
+  const sharesStore = useSharesStore()
 
   const createSpace = (name: string) => {
     const { graphAuthenticated } = clientService
-    return graphAuthenticated.drives.createDrive({ name }, { params: { template: 'default' } })
+    return graphAuthenticated.drives.createDrive({ name }, sharesStore.graphRoles, {
+      params: { template: 'default' }
+    })
   }
 
   const createDefaultMetaFolder = async (space: SpaceResource) => {
diff --git a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
index f284f98257c..8d56b65368f 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
@@ -1,5 +1,12 @@
 import SpaceDetails from '../../../../../../src/components/SideBar/Spaces/Details/SpaceDetails.vue'
-import { CollaboratorShare, ShareRole, SpaceResource, Resource } from '@ownclouders/web-client'
+import {
+  CollaboratorShare,
+  ShareRole,
+  SpaceResource,
+  Resource,
+  SpaceMember,
+  GraphSharePermission
+} from '@ownclouders/web-client'
 import { mock } from 'vitest-mock-extended'
 import { defaultComponentMocks, defaultPlugins, shallowMount } from 'web-test-helpers'
 import { RouteLocation } from 'vue-router'
@@ -10,11 +17,12 @@ const spaceMock = {
   name: ' space',
   id: '1',
   mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
-  spaceRoles: {
-    manager: [{ id: '1', displayName: 'alice' }],
-    editor: [],
-    viewer: []
-  },
+  members: [
+    mock<SpaceMember>({
+      permissions: [GraphSharePermission.deletePermissions],
+      grantedTo: { user: { id: '1', displayName: 'alice' }, group: undefined }
+    })
+  ],
   spaceQuota: {
     used: 100,
     total: 1000
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCopy.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCopy.spec.ts
index d94d3437f30..2c8b9bd8c45 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCopy.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCopy.spec.ts
@@ -83,8 +83,7 @@ function getWrapper({
   const mocks = {
     ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ name: routeName }) }),
     space: {
-      driveType: 'personal',
-      spaceRoles: { viewer: [], editor: [], manager: [] }
+      driveType: 'personal'
     } as unknown as SpaceResource
   }
   return {
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsDelete.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsDelete.spec.ts
index 82800ac5377..9f7cb41ff45 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsDelete.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsDelete.spec.ts
@@ -149,8 +149,7 @@ function getWrapper({
   const mocks = {
     ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ name: routeName }) }),
     space: {
-      driveType: 'personal',
-      spaceRoles: { viewer: [], editor: [], manager: [] }
+      driveType: 'personal'
     } as unknown as SpaceResource
   }
   const capabilities = {
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsDownloadArchive.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsDownloadArchive.spec.ts
index 1b77e3aa6ad..b5861952d14 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsDownloadArchive.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsDownloadArchive.spec.ts
@@ -67,8 +67,7 @@ function getWrapper({
   const mocks = {
     ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ name: routeName }) }),
     space: {
-      driveType: 'personal',
-      spaceRoles: { viewer: [], editor: [], manager: [] }
+      driveType: 'personal'
     } as unknown as SpaceResource
   }
 
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsEmptyTrashBin.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsEmptyTrashBin.spec.ts
index 458da1c71e2..0d064d06ca2 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsEmptyTrashBin.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsEmptyTrashBin.spec.ts
@@ -96,7 +96,7 @@ function getWrapper({
         name: invalidLocation ? 'files-spaces-generic' : 'files-trash-generic'
       })
     }),
-    space: mock<ProjectSpaceResource>({ driveType, isEditor: () => false, isManager: () => false })
+    space: mock<ProjectSpaceResource>({ driveType })
   }
 
   if (resolveClearTrashBin) {
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsRestore.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsRestore.spec.ts
index 6016d5901ed..df93706aaf8 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsRestore.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsRestore.spec.ts
@@ -180,11 +180,7 @@ function getWrapper({
         name: invalidLocation ? 'files-spaces-generic' : 'files-trash-generic'
       })
     }),
-    space: mock<ProjectSpaceResource>({
-      driveType,
-      isEditor: () => false,
-      isManager: () => false
-    })
+    space: mock<ProjectSpaceResource>({ driveType })
   }
   mocks.$clientService.webdav.listFiles.mockImplementation(() => {
     return Promise.resolve({ resource: mock<Resource>(), children: [] })
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsSetImage.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsSetImage.spec.ts
index 21896d80034..9f7f278f859 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsSetImage.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsSetImage.spec.ts
@@ -1,10 +1,10 @@
 import { useFileActionsSetImage } from '../../../../../src'
 import { useMessages } from '../../../../../src/composables/piniaStores'
-import { buildSpace, Resource, SpaceResource } from '@ownclouders/web-client'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { mock } from 'vitest-mock-extended'
 import { defaultComponentMocks, RouteLocation, getComposableWrapper } from 'web-test-helpers'
 import { unref } from 'vue'
-import { Drive, User } from '@ownclouders/web-client/graph/generated'
+import { User } from '@ownclouders/web-client/graph/generated'
 import { useSpaceHelpers } from '../../../../../src/composables/spaces/useSpaceHelpers'
 
 vi.mock('../../../../../src/composables/spaces/useSpaceHelpers', () => ({
@@ -14,16 +14,8 @@ vi.mock('../../../../../src/composables/spaces/useSpaceHelpers', () => ({
 describe('setImage', () => {
   describe('isVisible property', () => {
     it('should be false when no resource given', () => {
-      const space = buildSpace(
-        mock<Drive>({
-          id: '1',
-          quota: {},
-          root: {
-            permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }]
-          },
-          special: [{ specialFolder: { name: 'image' }, file: { mimeType: 'image/png' } }]
-        })
-      )
+      const space = mock<SpaceResource>({ canEditImage: () => true })
+
       getWrapper({
         setup: ({ actions }) => {
           expect(unref(actions)[0].isVisible({ space, resources: [] as Resource[] })).toBe(false)
@@ -31,16 +23,7 @@ describe('setImage', () => {
       })
     })
     it('should be false when mimeType is not image', () => {
-      const space = buildSpace(
-        mock<Drive>({
-          id: '1',
-          quota: {},
-          root: {
-            permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }]
-          },
-          special: [{ specialFolder: { name: 'image' }, file: { mimeType: 'image/png' } }]
-        })
-      )
+      const space = mock<SpaceResource>({ canEditImage: () => true })
       getWrapper({
         setup: ({ actions }) => {
           expect(
@@ -54,16 +37,7 @@ describe('setImage', () => {
       })
     })
     it('should be true when the mimeType is image', () => {
-      const space = buildSpace(
-        mock<Drive>({
-          id: '1',
-          quota: {},
-          root: {
-            permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }]
-          },
-          special: [{ specialFolder: { name: 'image' }, file: { mimeType: 'image/png' } }]
-        })
-      )
+      const space = mock<SpaceResource>({ canEditImage: () => true })
       getWrapper({
         setup: ({ actions }) => {
           expect(
@@ -75,17 +49,8 @@ describe('setImage', () => {
         }
       })
     })
-    it('should be false when the current user is a viewer', () => {
-      const space = buildSpace(
-        mock<Drive>({
-          id: '1',
-          quota: {},
-          root: {
-            permissions: [{ roles: ['viewer'], grantedToIdentities: [{ user: { id: '1' } }] }]
-          },
-          special: [{ specialFolder: { name: 'image' }, file: { mimeType: 'image/png' } }]
-        })
-      )
+    it('should be false when canEditImage is false', () => {
+      const space = mock<SpaceResource>({ canEditImage: () => false })
       getWrapper({
         setup: ({ actions }) => {
           expect(
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDelete.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDelete.spec.ts
index 68e2111f99f..aae810d3466 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDelete.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDelete.spec.ts
@@ -1,10 +1,10 @@
 import { useSpaceActionsDelete } from '../../../../../src/composables/actions'
 import { useMessages, useModals } from '../../../../../src/composables/piniaStores'
-import { buildSpace, SpaceResource } from '@ownclouders/web-client'
+import { SpaceResource } from '@ownclouders/web-client'
 import { defaultComponentMocks, RouteLocation, getComposableWrapper } from 'web-test-helpers'
 import { mock } from 'vitest-mock-extended'
 import { unref } from 'vue'
-import { Drive, User } from '@ownclouders/web-client/graph/generated'
+import { User } from '@ownclouders/web-client/graph/generated'
 
 describe('delete', () => {
   describe('isVisible property', () => {
@@ -15,50 +15,19 @@ describe('delete', () => {
         }
       })
     })
-    it('should be false when the space is not disabled', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        root: {
-          permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }]
-        },
-        driveType: 'project',
-        special: null
-      })
-      getWrapper({
-        setup: ({ actions }) => {
-          expect(unref(actions)[0].isVisible({ resources: [buildSpace(spaceMock)] })).toBe(false)
-        }
-      })
-    })
-    it('should be true when the space is disabled', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        root: {
-          permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }],
-          deleted: { state: 'trashed' }
-        },
-        driveType: 'project',
-        special: null
-      })
+    it('should be false when the space can not be deleted', () => {
+      const spaceMock = mock<SpaceResource>({ driveType: 'project', canBeDeleted: () => false })
       getWrapper({
         setup: ({ actions }) => {
-          expect(unref(actions)[0].isVisible({ resources: [buildSpace(spaceMock)] })).toBe(true)
+          expect(unref(actions)[0].isVisible({ resources: [spaceMock] })).toBe(false)
         }
       })
     })
-    it('should be false when the current user is a viewer', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        root: {
-          permissions: [{ roles: ['viewer'], grantedToIdentities: [{ user: { id: '1' } }] }],
-          deleted: { state: 'trashed' }
-        },
-        driveType: 'project',
-        special: null
-      })
+    it('should be true when the space can be deleted', () => {
+      const spaceMock = mock<SpaceResource>({ driveType: 'project', canBeDeleted: () => true })
       getWrapper({
         setup: ({ actions }) => {
-          expect(unref(actions)[0].isVisible({ resources: [buildSpace(spaceMock)] })).toBe(false)
+          expect(unref(actions)[0].isVisible({ resources: [spaceMock] })).toBe(true)
         }
       })
     })
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDisable.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDisable.spec.ts
index 9e7311beb8e..3ffee0f9fcc 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDisable.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDisable.spec.ts
@@ -1,10 +1,10 @@
 import { useSpaceActionsDisable } from '../../../../../src/composables/actions/spaces'
 import { useMessages, useModals } from '../../../../../src/composables/piniaStores'
-import { buildSpace, SpaceResource } from '@ownclouders/web-client'
+import { SpaceResource } from '@ownclouders/web-client'
 import { defaultComponentMocks, RouteLocation, getComposableWrapper } from 'web-test-helpers'
 import { mock } from 'vitest-mock-extended'
 import { unref } from 'vue'
-import { Drive, User } from '@ownclouders/web-client/graph/generated'
+import { User } from '@ownclouders/web-client/graph/generated'
 
 describe('disable', () => {
   describe('isVisible property', () => {
@@ -15,48 +15,19 @@ describe('disable', () => {
         }
       })
     })
-    it('should be true when the space is not disabled', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        root: {
-          permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }]
-        },
-        driveType: 'project',
-        special: null
-      })
-      getWrapper({
-        setup: ({ actions }) => {
-          expect(unref(actions)[0].isVisible({ resources: [buildSpace(spaceMock)] })).toBe(true)
-        }
-      })
-    })
-    it('should be false when the space is disabled', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        root: {
-          permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }],
-          deleted: { state: 'trashed' }
-        },
-        special: null
-      })
+    it('should be true when the space can be disabled', () => {
+      const spaceMock = mock<SpaceResource>({ driveType: 'project', canDisable: () => true })
       getWrapper({
         setup: ({ actions }) => {
-          expect(unref(actions)[0].isVisible({ resources: [buildSpace(spaceMock)] })).toBe(false)
+          expect(unref(actions)[0].isVisible({ resources: [spaceMock] })).toBe(true)
         }
       })
     })
-    it('should be false when current user is a viewer', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        root: {
-          permissions: [{ roles: ['viewer'], grantedToIdentities: [{ user: { id: '1' } }] }]
-        },
-        driveType: 'project',
-        special: null
-      })
+    it('should be false when the space can not be disabled', () => {
+      const spaceMock = mock<SpaceResource>({ driveType: 'project', canDisable: () => false })
       getWrapper({
         setup: ({ actions }) => {
-          expect(unref(actions)[0].isVisible({ resources: [buildSpace(spaceMock)] })).toBe(false)
+          expect(unref(actions)[0].isVisible({ resources: [spaceMock] })).toBe(false)
         }
       })
     })
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditQuota.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditQuota.spec.ts
index 65cc34458f7..6a1be0e0578 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditQuota.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditQuota.spec.ts
@@ -1,10 +1,9 @@
 import { useSpaceActionsEditQuota } from '../../../../../src/composables/actions'
 import { useModals } from '../../../../../src/composables/piniaStores'
-import { buildSpace } from '@ownclouders/web-client'
+import { SpaceResource } from '@ownclouders/web-client'
 import { defaultComponentMocks, getComposableWrapper } from 'web-test-helpers'
 import { unref } from 'vue'
 import { mock } from 'vitest-mock-extended'
-import { Drive } from '@ownclouders/web-client/graph/generated'
 
 describe('editQuota', () => {
   describe('isVisible property', () => {
@@ -16,36 +15,20 @@ describe('editQuota', () => {
       })
     })
     it('should be true when the current user has the "set-space-quota"-permission', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        quota: {},
-        root: {
-          permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }]
-        },
-        driveType: 'project',
-        special: null
-      })
+      const spaceMock = mock<SpaceResource>({ driveType: 'project' })
       getWrapper({
         canEditSpaceQuota: true,
         setup: ({ actions }) => {
-          expect(unref(actions)[0].isVisible({ resources: [buildSpace(spaceMock)] })).toBe(true)
+          expect(unref(actions)[0].isVisible({ resources: [spaceMock] })).toBe(true)
         }
       })
     })
     it('should be false when the current user does not have the "set-space-quota"-permission', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        quota: {},
-        root: {
-          permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }]
-        },
-        driveType: 'project',
-        special: null
-      })
+      const spaceMock = mock<SpaceResource>({ driveType: 'project' })
       getWrapper({
         canEditSpaceQuota: false,
         setup: ({ actions }) => {
-          expect(unref(actions)[0].isVisible({ resources: [buildSpace(spaceMock)] })).toBe(false)
+          expect(unref(actions)[0].isVisible({ resources: [spaceMock] })).toBe(false)
         }
       })
     })
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditReadmeContent.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditReadmeContent.spec.ts
index 02b313828ab..538666d1f1c 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditReadmeContent.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditReadmeContent.spec.ts
@@ -2,11 +2,11 @@ import {
   useOpenWithDefaultApp,
   useSpaceActionsEditReadmeContent
 } from '../../../../../src/composables/actions'
-import { Resource, SpaceResource, buildSpace } from '@ownclouders/web-client'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { getComposableWrapper } from 'web-test-helpers'
 import { unref } from 'vue'
 import { mock, mockDeep } from 'vitest-mock-extended'
-import { Drive, User } from '@ownclouders/web-client/graph/generated'
+import { User } from '@ownclouders/web-client/graph/generated'
 import { ClientService } from '../../../../../src/services'
 import { useSpaceHelpers } from '../../../../../src/composables/spaces/useSpaceHelpers'
 
@@ -20,20 +20,14 @@ vi.mock('../../../../../src/composables/spaces/useSpaceHelpers', () => ({
 
 describe('editReadmeContent', () => {
   describe('isVisible property', () => {
-    it('should be true for space managers', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        root: {
-          permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }]
-        },
-        special: [{ specialFolder: { name: 'readme' } }]
-      })
+    it('should be true if canEditReadme is true', () => {
+      const spaceMock = mock<SpaceResource>({ canEditReadme: () => true })
 
       getWrapper({
         setup: ({ actions }) => {
           expect(
             unref(actions)[0].isVisible({
-              resources: [buildSpace(spaceMock)]
+              resources: [spaceMock]
             })
           ).toBe(true)
         }
@@ -46,34 +40,19 @@ describe('editReadmeContent', () => {
         }
       })
     })
-    it('should be false when the current user is a viewer', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        root: {
-          permissions: [{ roles: ['viewer'], grantedToIdentities: [{ user: { id: '1' } }] }]
-        },
-        special: null
-      })
+    it('should be false if canEditReadme is false', () => {
+      const spaceMock = mock<SpaceResource>({ canEditReadme: () => false })
 
       getWrapper({
         setup: ({ actions }) => {
           expect(
             unref(actions)[0].isVisible({
-              resources: [buildSpace(spaceMock)]
+              resources: [spaceMock]
             })
           ).toBe(false)
         }
       })
     })
-    it('should be false when resource is disabled', () => {
-      getWrapper({
-        setup: ({ actions }) => {
-          expect(
-            unref(actions)[0].isVisible({ resources: [mock<SpaceResource>({ disabled: true })] })
-          ).toBe(false)
-        }
-      })
-    })
   })
   describe('method "handler"', () => {
     it('calls method "openWithDefaultApp"', () => {
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRestore.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRestore.spec.ts
index 9d10d59c93d..fa68a6b2de2 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRestore.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRestore.spec.ts
@@ -1,9 +1,9 @@
 import { useSpaceActionsRestore } from '../../../../../src/composables/actions/spaces'
-import { buildSpace, SpaceResource } from '@ownclouders/web-client'
+import { SpaceResource } from '@ownclouders/web-client'
 import { mock } from 'vitest-mock-extended'
 import { defaultComponentMocks, RouteLocation, getComposableWrapper } from 'web-test-helpers'
 import { unref } from 'vue'
-import { Drive, User } from '@ownclouders/web-client/graph/generated'
+import { User } from '@ownclouders/web-client/graph/generated'
 import { useMessages, useModals } from '../../../../../src/composables/piniaStores'
 
 describe('restore', () => {
@@ -15,50 +15,26 @@ describe('restore', () => {
         }
       })
     })
-    it('should be false when the space is not disabled', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        root: {
-          permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }]
-        },
+    it('should be false when the space can not be restored', () => {
+      const spaceMock = mock<SpaceResource>({
         driveType: 'project',
-        special: null
+        canRestore: () => false
       })
       getWrapper({
         setup: ({ actions }) => {
-          expect(unref(actions)[0].isVisible({ resources: [buildSpace(spaceMock)] })).toBe(false)
+          expect(unref(actions)[0].isVisible({ resources: [spaceMock] })).toBe(false)
         }
       })
     })
-    it('should be true when the space is disabled', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        root: {
-          permissions: [{ roles: ['manager'], grantedToIdentities: [{ user: { id: '1' } }] }],
-          deleted: { state: 'trashed' }
-        },
+    it('should be true when the space can be restored', () => {
+      const spaceMock = mock<SpaceResource>({
         driveType: 'project',
-        special: null
-      })
-      getWrapper({
-        setup: ({ actions }) => {
-          expect(unref(actions)[0].isVisible({ resources: [buildSpace(spaceMock)] })).toBe(true)
-        }
-      })
-    })
-    it('should be false when the current user is a viewer', () => {
-      const spaceMock = mock<Drive>({
-        id: '1',
-        root: {
-          permissions: [{ roles: ['viewer'], grantedToIdentities: [{ user: { id: '1' } }] }],
-          deleted: { state: 'trashed' }
-        },
-        driveType: 'project',
-        special: null
+        canRestore: () => true
       })
+
       getWrapper({
         setup: ({ actions }) => {
-          expect(unref(actions)[0].isVisible({ resources: [buildSpace(spaceMock)] })).toBe(false)
+          expect(unref(actions)[0].isVisible({ resources: [spaceMock] })).toBe(true)
         }
       })
     })
diff --git a/packages/web-pkg/tests/unit/composables/piniaStores/spaces.spec.ts b/packages/web-pkg/tests/unit/composables/piniaStores/spaces.spec.ts
index 615033af6ec..16d8d3281e0 100644
--- a/packages/web-pkg/tests/unit/composables/piniaStores/spaces.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/piniaStores/spaces.spec.ts
@@ -190,14 +190,22 @@ describe('spaces', () => {
           await instance.loadSpaces({ graphClient })
 
           expect(graphClient.drives.listMyDrives).toHaveBeenCalledTimes(2)
-          expect(graphClient.drives.listMyDrives).toHaveBeenNthCalledWith(1, {
-            orderBy: 'name asc',
-            filter: 'driveType eq personal'
-          })
-          expect(graphClient.drives.listMyDrives).toHaveBeenNthCalledWith(2, {
-            orderBy: 'name asc',
-            filter: 'driveType eq project'
-          })
+          expect(graphClient.drives.listMyDrives).toHaveBeenNthCalledWith(
+            1,
+            {},
+            {
+              orderBy: 'name asc',
+              filter: 'driveType eq personal'
+            }
+          )
+          expect(graphClient.drives.listMyDrives).toHaveBeenNthCalledWith(
+            2,
+            {},
+            {
+              orderBy: 'name asc',
+              filter: 'driveType eq project'
+            }
+          )
           expect(instance.spaces.length).toBe(2)
           expect(instance.spacesLoading).toBeFalsy()
           expect(instance.spacesInitialized).toBeTruthy()
@@ -215,10 +223,13 @@ describe('spaces', () => {
           await instance.loadMountPoints({ graphClient })
 
           expect(graphClient.drives.listMyDrives).toHaveBeenCalledTimes(1)
-          expect(graphClient.drives.listMyDrives).toHaveBeenCalledWith({
-            orderBy: 'name asc',
-            filter: 'driveType eq mountpoint'
-          })
+          expect(graphClient.drives.listMyDrives).toHaveBeenCalledWith(
+            {},
+            {
+              orderBy: 'name asc',
+              filter: 'driveType eq mountpoint'
+            }
+          )
           expect(instance.spaces.length).toBe(1)
           expect(instance.mountPointsInitialized).toBeTruthy()
         }
@@ -235,10 +246,13 @@ describe('spaces', () => {
           await instance.reloadProjectSpaces({ graphClient })
 
           expect(graphClient.drives.listMyDrives).toHaveBeenCalledTimes(1)
-          expect(graphClient.drives.listMyDrives).toHaveBeenCalledWith({
-            orderBy: 'name asc',
-            filter: 'driveType eq project'
-          })
+          expect(graphClient.drives.listMyDrives).toHaveBeenCalledWith(
+            {},
+            {
+              orderBy: 'name asc',
+              filter: 'driveType eq project'
+            }
+          )
           expect(instance.spaces.length).toBe(1)
         }
       })
diff --git a/packages/web-pkg/tests/unit/helpers/resource/conflictHandling/resourcesTransfer.spec.ts b/packages/web-pkg/tests/unit/helpers/resource/conflictHandling/resourcesTransfer.spec.ts
index 120c8476ccf..1982cc9abe0 100644
--- a/packages/web-pkg/tests/unit/helpers/resource/conflictHandling/resourcesTransfer.spec.ts
+++ b/packages/web-pkg/tests/unit/helpers/resource/conflictHandling/resourcesTransfer.spec.ts
@@ -38,8 +38,8 @@ describe('resourcesTransfer', () => {
     const spaceOptions = {
       id: 'c42c9504-2c19-44fd-87cc-b4fc20ecbb54'
     } as unknown as Drive
-    sourceSpace = buildSpace(spaceOptions)
-    targetSpace = buildSpace(spaceOptions)
+    sourceSpace = buildSpace(spaceOptions, {})
+    targetSpace = buildSpace(spaceOptions, {})
     targetFolder = {
       id: 'target',
       path: 'target',
diff --git a/packages/web-runtime/src/container/sse/shares.ts b/packages/web-runtime/src/container/sse/shares.ts
index 065e78be960..d064a36b4e0 100644
--- a/packages/web-runtime/src/container/sse/shares.ts
+++ b/packages/web-runtime/src/container/sse/shares.ts
@@ -16,6 +16,7 @@ export const onSSESpaceMemberAddedEvent = async ({
   sseData,
   resourcesStore,
   spacesStore,
+  sharesStore,
   clientService,
   router
 }: SSEEventOptions) => {
@@ -24,7 +25,10 @@ export const onSSESpaceMemberAddedEvent = async ({
     return
   }
 
-  const space = await clientService.graphAuthenticated.drives.getDrive(sseData.itemid)
+  const space = await clientService.graphAuthenticated.drives.getDrive(
+    sseData.itemid,
+    sharesStore.graphRoles
+  )
   spacesStore.upsertSpace(space)
 
   if (!isLocationSpacesActive(router, 'files-spaces-projects')) {
@@ -38,6 +42,7 @@ export const onSSESpaceMemberRemovedEvent = async ({
   sseData,
   resourcesStore,
   spacesStore,
+  sharesStore,
   messageStore,
   clientService,
   language,
@@ -50,7 +55,10 @@ export const onSSESpaceMemberRemovedEvent = async ({
   }
 
   if (!sseData.affecteduserids?.includes(userStore.user.id)) {
-    const space = await clientService.graphAuthenticated.drives.getDrive(sseData.itemid)
+    const space = await clientService.graphAuthenticated.drives.getDrive(
+      sseData.itemid,
+      sharesStore.graphRoles
+    )
     return spacesStore.upsertSpace(space)
   }
 
@@ -84,6 +92,7 @@ export const onSSESpaceShareUpdatedEvent = async ({
   sseData,
   resourcesStore,
   spacesStore,
+  sharesStore,
   clientService,
   userStore,
   router
@@ -93,7 +102,10 @@ export const onSSESpaceShareUpdatedEvent = async ({
     return
   }
 
-  const space = await clientService.graphAuthenticated.drives.getDrive(sseData.itemid)
+  const space = await clientService.graphAuthenticated.drives.getDrive(
+    sseData.itemid,
+    sharesStore.graphRoles
+  )
   spacesStore.upsertSpace(space)
 
   if (
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index cdeee621fe4..7c12e94e0b8 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -220,6 +220,11 @@ export const bootstrapApp = async (configurationPath: string, appsReadyCallback:
         })
       }
 
+      // load sharing roles from graph API
+      const graphRoleDefinitions =
+        await clientService.graphAuthenticated.permissions.listRoleDefinitions()
+      sharesStore.setGraphRoles(graphRoleDefinitions)
+
       // Load spaces to make them available across the application
       await spacesStore.loadSpaces({ graphClient: clientService.graphAuthenticated })
       const personalSpace = spacesStore.spaces.find(isPersonalSpaceResource)
@@ -231,11 +236,6 @@ export const bootstrapApp = async (configurationPath: string, appsReadyCallback:
           value: app.config.globalProperties.$gettext('Personal')
         })
       }
-
-      // load sharing roles from graph API
-      const graphRoleDefinitions =
-        await clientService.graphAuthenticated.permissions.listRoleDefinitions()
-      sharesStore.setGraphRoles(graphRoleDefinitions)
     },
     {
       immediate: true
diff --git a/tests/e2e/cucumber/steps/ui/adminSettings.ts b/tests/e2e/cucumber/steps/ui/adminSettings.ts
index 17e3c577917..bcf35dfb6c3 100644
--- a/tests/e2e/cucumber/steps/ui/adminSettings.ts
+++ b/tests/e2e/cucumber/steps/ui/adminSettings.ts
@@ -510,9 +510,9 @@ Then(
     const { page } = this.actorsEnvironment.getActor({ key: stepUser })
     const spacesObject = new objects.applicationAdminSettings.Spaces({ page })
     const actualMemberList = {
-      manager: await spacesObject.listMembers({ filter: 'managers' }),
-      viewer: await spacesObject.listMembers({ filter: 'viewers' }),
-      editor: await spacesObject.listMembers({ filter: 'editors' })
+      manager: await spacesObject.listMembers({ filter: 'Can manage' }),
+      viewer: await spacesObject.listMembers({ filter: 'Can view' }),
+      editor: await spacesObject.listMembers({ filter: 'Can edit' })
     }
     for (const info of stepTable.hashes()) {
       const shareRole = shareRoles[info.role as keyof typeof shareRoles]
diff --git a/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts b/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
index c6964f03fcf..0f8642b971b 100644
--- a/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
+++ b/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
@@ -255,13 +255,13 @@ export const listSpaceMembers = async (args: {
   let users: string[] = []
   const names = []
   switch (filter) {
-    case 'managers':
+    case 'Can manage':
       users = await page.locator(util.format(spaceMemberList, filter)).allTextContents()
       break
-    case 'viewers':
+    case 'Can view':
       users = await page.locator(util.format(spaceMemberList, filter)).allTextContents()
       break
-    case 'editors':
+    case 'Can edit':
       users = await page.locator(util.format(spaceMemberList, filter)).allTextContents()
       break
   }

From 5cf08c68941067698d6c9d6a16cfb6fea3f51e8e Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@kiteworks.com>
Date: Fri, 23 Aug 2024 12:48:20 +0200
Subject: [PATCH 3/3] fix: sort space member roles by amount of permissions

---
 .../src/components/Spaces/SideBar/MembersPanel.vue     | 10 +++++++++-
 .../components/Spaces/SideBar/MembersPanel.spec.ts     |  6 +++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue
index 2c067065ecd..8d264d8a084 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue
@@ -68,7 +68,15 @@ export default defineComponent({
     const availableRoles = computed<ShareRole[]>(() => {
       const permissionsWithRole = unref(spaceMembers).filter((p) => !!p.roleId)
       const roleIds = [...new Set(permissionsWithRole.map((p) => p.roleId))]
-      return roleIds.map((r) => sharesStore.graphRoles[r]).filter(Boolean)
+      return roleIds
+        .map((r) => sharesStore.graphRoles[r])
+        .filter(Boolean)
+        .sort((a, b) => {
+          // sort roles by amount of permissions (most likely translates to manager > editor > viewer)
+          const permissionsA = a.rolePermissions.flatMap((r) => r.allowedResourceActions)
+          const permissionsB = b.rolePermissions.flatMap((r) => r.allowedResourceActions)
+          return permissionsB.length - permissionsA.length
+        })
     })
 
     const membersWithoutRole = computed<SpaceMember[]>(() => {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersPanel.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersPanel.spec.ts
index 2a77113fd98..ff24be62ef4 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersPanel.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersPanel.spec.ts
@@ -5,9 +5,9 @@ import { ShareRole, SpaceResource } from '@ownclouders/web-client'
 import MembersRoleSection from '../../../../../src/components/Spaces/SideBar/MembersRoleSection.vue'
 
 const graphRoles = {
-  '1': mock<ShareRole>({ id: '1', displayName: 'Managers' }),
-  '2': mock<ShareRole>({ id: '2', displayName: 'Editors' }),
-  '3': mock<ShareRole>({ id: '3', displayName: 'Viewers' })
+  '1': mock<ShareRole>({ id: '1', displayName: 'Managers', rolePermissions: [] }),
+  '2': mock<ShareRole>({ id: '2', displayName: 'Editors', rolePermissions: [] }),
+  '3': mock<ShareRole>({ id: '3', displayName: 'Viewers', rolePermissions: [] })
 }
 
 const spaceMock = {