fix: space member count in space header component

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -109,7 +109,6 @@
 
 <script setup lang="ts">
 import { computed, inject, nextTick, onBeforeUnmount, onMounted, Ref, ref, unref, watch } from 'vue'
-import { isEmpty } from 'lodash-es'
 import { buildSpaceImageResource, Resource, SpaceResource } from '@opencloud-eu/web-client'
 import {
   useClientService,
@@ -195,22 +194,19 @@ const unobserveMarkdownContainerResize = () => {
 
 const memberCount = ref<number>()
 watch(
-  () => sharesStore.collaboratorShares,
-  async (shares) => {
+  () => sharesStore.collaboratorShares.length,
+  async () => {
     // set space member count
-    if (!isEmpty(shares)) {
-      memberCount.value = shares.length
-      return
-    }
-
-    if (!unref(memberCount)) {
-      try {
-        // FIXME: get member count without fetching the whole drive?
-        const { root } = await clientService.graphAuthenticated.drives.getDrive(space.id)
-        memberCount.value = root?.permissions?.length || 1
-      } catch (e) {
-        console.error(e)
-      }
+    try {
+      const { count } = await clientService.graphAuthenticated.permissions.listPermissions(
+        space.id,
+        space.id,
+        sharesStore.graphRoles,
+        { count: true }
+      )
+      memberCount.value = count || 1
+    } catch (e) {
+      console.error(e)
     }
   },
   { immediate: true }

packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts

@@ -2,12 +2,7 @@ import { ref } from 'vue'
 import SpaceHeader from '../../../../src/components/Spaces/SpaceHeader.vue'
 import { DriveItem } from '@opencloud-eu/web-client/graph/generated'
 import { SpaceResource, Resource, buildSpaceImageResource } from '@opencloud-eu/web-client'
-import {
-  defaultPlugins,
-  mount,
-  defaultComponentMocks,
-  nextTicks
-} from '@opencloud-eu/web-test-helpers'
+import { defaultPlugins, mount, defaultComponentMocks } from '@opencloud-eu/web-test-helpers'
 import { mock } from 'vitest-mock-extended'
 import { GetFileContentsResponse } from '@opencloud-eu/web-client/webdav'
 import { flushPromises } from '@vue/test-utils'
@@ -33,8 +28,7 @@ const getSpaceMock = (spaceImageData: DriveItem = undefined) =>
     name: '',
     description: '',
     spaceReadmeData: undefined,
-    spaceImageData,
-    root: { permissions: [{}] }
+    spaceImageData
   })
 
 describe('SpaceHeader', () => {
@@ -53,7 +47,7 @@ describe('SpaceHeader', () => {
     })
     it('should show the set image', async () => {
       const wrapper = getWrapper({ space: getSpaceMock({ webDavUrl: '/' }) })
-      await wrapper.vm.$nextTick()
+      await flushPromises()
       expect(wrapper.find('.space-header-image-default').exists()).toBeFalsy()
       expect(wrapper.find('.space-header-image img').exists()).toBeTruthy()
       expect(wrapper.html()).toMatchSnapshot()
@@ -79,7 +73,7 @@ describe('SpaceHeader', () => {
       const space = getSpaceMock()
       space.spaceReadmeData = {}
       const wrapper = getWrapper({ space })
-      await nextTicks(2)
+      await flushPromises()
       expect(wrapper.find('.markdown-container').exists()).toBeTruthy()
       expect(wrapper.html()).toMatchSnapshot()
     })
@@ -90,14 +84,24 @@ describe('SpaceHeader', () => {
       expect(wrapper.find('.space-header-readme-loading').exists()).toBeTruthy()
     })
   })
+  describe('space member count', () => {
+    it('should show the correct amount of space members', async () => {
+      const space = getSpaceMock()
+      space.spaceReadmeData = {}
+      const wrapper = getWrapper({ space, memberCount: 5 })
+      await flushPromises()
+      expect(wrapper.find('.space-header-people-count').text()).toContain('5')
+    })
+  })
 })
 
 function getWrapper({
   space = {} as SpaceResource,
   isSideBarOpen = false,
   isMobileWidth = false,
   imagesLoading = [],
-  readmesLoading = []
+  readmesLoading = [],
+  memberCount = 0
 }) {
   const mocks = defaultComponentMocks()
   mocks.$previewService.loadPreview.mockResolvedValue('blob:image')
@@ -107,7 +111,12 @@ function getWrapper({
     mock<GetFileContentsResponse>({ body: 'body' })
   )
   mocks.$clientService.webdav.getFileInfo.mockResolvedValue(mock<Resource>())
-  mocks.$clientService.graphAuthenticated.drives.getDrive.mockResolvedValue(getSpaceMock())
+  mocks.$clientService.graphAuthenticated.permissions.listPermissions.mockResolvedValue({
+    shares: [],
+    allowedActions: [],
+    allowedRoles: [],
+    count: memberCount
+  })
 
   return mount(SpaceHeader, {
     props: {

packages/web-client/src/graph/generated/base.ts

@@ -4,7 +4,7 @@
  * Libre Graph API
  * Libre Graph is a free API for cloud collaboration inspired by the MS Graph API.
  *
- * The version of the OpenAPI document: v1.0.7
+ * The version of the OpenAPI document: v1.0.8
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

packages/web-client/src/graph/generated/common.ts

@@ -4,7 +4,7 @@
  * Libre Graph API
  * Libre Graph is a free API for cloud collaboration inspired by the MS Graph API.
  *
- * The version of the OpenAPI document: v1.0.7
+ * The version of the OpenAPI document: v1.0.8
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

packages/web-client/src/graph/generated/configuration.ts

@@ -4,7 +4,7 @@
  * Libre Graph API
  * Libre Graph is a free API for cloud collaboration inspired by the MS Graph API.
  *
- * The version of the OpenAPI document: v1.0.7
+ * The version of the OpenAPI document: v1.0.8
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

packages/web-client/src/graph/generated/index.ts

@@ -4,7 +4,7 @@
  * Libre Graph API
  * Libre Graph is a free API for cloud collaboration inspired by the MS Graph API.
  *
- * The version of the OpenAPI document: v1.0.7
+ * The version of the OpenAPI document: v1.0.8
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

packages/web-client/src/graph/permissions/permissions.ts

@@ -62,6 +62,8 @@ export const PermissionsFactory = ({
           driveId,
           options?.filter,
           options?.select ? new Set([...options.select]) : null,
+          options?.count,
+          options?.top || 0,
           requestOptions
         )
         responseData = data
@@ -71,6 +73,8 @@ export const PermissionsFactory = ({
           itemId,
           options?.filter,
           options?.select ? new Set([...options.select]) : null,
+          options?.count,
+          options?.top || 0,
           requestOptions
         )
         responseData = data
@@ -79,6 +83,7 @@ export const PermissionsFactory = ({
       const permissions = responseData.value || []
       const allowedActions = responseData['@libre.graph.permissions.actions.allowedValues']
       const allowedRoles = responseData['@libre.graph.permissions.roles.allowedValues']
+      const count = responseData['@odata.count']
 
       const shares = permissions.map((permission) => {
         if (permission.link) {
@@ -92,7 +97,7 @@ export const PermissionsFactory = ({
         })
       })
 
-      return { shares, allowedActions, allowedRoles }
+      return { shares, allowedActions, allowedRoles, count }
     },
 
     async updatePermission<T extends CollaboratorShare | LinkShare>(

packages/web-client/src/graph/permissions/types.ts

@@ -15,6 +15,7 @@ type ListPermissionsResponse = {
   shares: Share[]
   allowedActions: string[]
   allowedRoles: UnifiedRoleDefinition[]
+  count?: number
 }
 
 export interface GraphPermissions {
@@ -32,6 +33,8 @@ export interface GraphPermissions {
     options?: {
       filter?: string
       select?: Array<ListPermissionsSpaceRootSelectEnum>
+      count?: boolean
+      top?: number
     },
     requestOptions?: GraphRequestOptions
   ): Promise<ListPermissionsResponse>