Load groups via graph api

packages/web-client/src/generated/.openapi-generator/VERSION

@@ -1 +1 @@
-6.0.1-SNAPSHOT
+6.1.0-SNAPSHOT

packages/web-client/src/generated/api.ts

@@ -1187,7 +1187,7 @@ export const DrivesApiAxiosParamCreator = function (configuration?: Configuratio
             const localVarHeaderParameter = {} as any;
             const localVarQueryParameter = {} as any;
 
-            if (ifMatch !== undefined && ifMatch !== null) {
+            if (ifMatch != null) {
                 localVarHeaderParameter['If-Match'] = String(ifMatch);
             }
 
@@ -1784,7 +1784,7 @@ export const GroupApiAxiosParamCreator = function (configuration?: Configuration
             const localVarHeaderParameter = {} as any;
             const localVarQueryParameter = {} as any;
 
-            if (ifMatch !== undefined && ifMatch !== null) {
+            if (ifMatch != null) {
                 localVarHeaderParameter['If-Match'] = String(ifMatch);
             }
 
@@ -1827,7 +1827,7 @@ export const GroupApiAxiosParamCreator = function (configuration?: Configuration
             const localVarHeaderParameter = {} as any;
             const localVarQueryParameter = {} as any;
 
-            if (ifMatch !== undefined && ifMatch !== null) {
+            if (ifMatch != null) {
                 localVarHeaderParameter['If-Match'] = String(ifMatch);
             }
 
@@ -2938,10 +2938,12 @@ export const MeUserApiAxiosParamCreator = function (configuration?: Configuratio
     return {
         /**
          * 
+         * @summary Get current user
+         * @param {Set<'memberOf'>} [$expand] Expand related entities
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        meGet: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+        getOwnUser: async ($expand?: Set<'memberOf'>, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
             const localVarPath = `/me`;
             // use dummy base URL string because the URL constructor only accepts absolute URLs.
             const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
@@ -2954,6 +2956,10 @@ export const MeUserApiAxiosParamCreator = function (configuration?: Configuratio
             const localVarHeaderParameter = {} as any;
             const localVarQueryParameter = {} as any;
 
+            if ($expand) {
+                localVarQueryParameter['$expand'] = Array.from($expand).join(COLLECTION_FORMATS.csv);
+            }
+
 
 
             setSearchParams(localVarUrlObj, localVarQueryParameter);
@@ -2977,11 +2983,13 @@ export const MeUserApiFp = function(configuration?: Configuration) {
     return {
         /**
          * 
+         * @summary Get current user
+         * @param {Set<'memberOf'>} [$expand] Expand related entities
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async meGet(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<User>> {
-            const localVarAxiosArgs = await localVarAxiosParamCreator.meGet(options);
+        async getOwnUser($expand?: Set<'memberOf'>, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<User>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getOwnUser($expand, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
     }
@@ -2996,11 +3004,13 @@ export const MeUserApiFactory = function (configuration?: Configuration, basePat
     return {
         /**
          * 
+         * @summary Get current user
+         * @param {Set<'memberOf'>} [$expand] Expand related entities
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        meGet(options?: any): AxiosPromise<User> {
-            return localVarFp.meGet(options).then((request) => request(axios, basePath));
+        getOwnUser($expand?: Set<'memberOf'>, options?: any): AxiosPromise<User> {
+            return localVarFp.getOwnUser($expand, options).then((request) => request(axios, basePath));
         },
     };
 };
@@ -3014,12 +3024,14 @@ export const MeUserApiFactory = function (configuration?: Configuration, basePat
 export class MeUserApi extends BaseAPI {
     /**
      * 
+     * @summary Get current user
+     * @param {Set<'memberOf'>} [$expand] Expand related entities
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
      * @memberof MeUserApi
      */
-    public meGet(options?: AxiosRequestConfig) {
-        return MeUserApiFp(this.configuration).meGet(options).then((request) => request(this.axios, this.basePath));
+    public getOwnUser($expand?: Set<'memberOf'>, options?: AxiosRequestConfig) {
+        return MeUserApiFp(this.configuration).getOwnUser($expand, options).then((request) => request(this.axios, this.basePath));
     }
 }
 
@@ -3054,7 +3066,7 @@ export const UserApiAxiosParamCreator = function (configuration?: Configuration)
             const localVarHeaderParameter = {} as any;
             const localVarQueryParameter = {} as any;
 
-            if (ifMatch !== undefined && ifMatch !== null) {
+            if (ifMatch != null) {
                 localVarHeaderParameter['If-Match'] = String(ifMatch);
             }
 

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

@@ -83,24 +83,34 @@ export const setOAuthToObject = async function (object: any, name: string, scope
     }
 }
 
+function setFlattenedQueryParams(urlSearchParams: URLSearchParams, parameter: any, key: string = ""): void {
+    if (typeof parameter === "object") {
+        if (Array.isArray(parameter)) {
+            (parameter as any[]).forEach(item => setFlattenedQueryParams(urlSearchParams, item, key));
+        } 
+        else {
+            Object.keys(parameter).forEach(currentKey => 
+                setFlattenedQueryParams(urlSearchParams, parameter[currentKey], `${key}${key !== '' ? '.' : ''}${currentKey}`)
+            );
+        }
+    } 
+    else {
+        if (urlSearchParams.has(key)) {
+            urlSearchParams.append(key, parameter);
+        } 
+        else {
+            urlSearchParams.set(key, parameter);
+        }
+    }
+}
+
 /**
  *
  * @export
  */
 export const setSearchParams = function (url: URL, ...objects: any[]) {
     const searchParams = new URLSearchParams(url.search);
-    for (const object of objects) {
-        for (const key in object) {
-            if (Array.isArray(object[key])) {
-                searchParams.delete(key);
-                for (const item of object[key]) {
-                    searchParams.append(key, item);
-                }
-            } else {
-                searchParams.set(key, object[key]);
-            }
-        }
-    }
+    setFlattenedQueryParams(searchParams, objects);
     url.search = searchParams.toString();
 }
 

packages/web-client/src/graph.ts

@@ -80,7 +80,7 @@ export const graph = (baseURI: string, axiosClient: AxiosInstance): Graph => {
       getUser: (userId: string) =>
         userApiFactory.getUser(userId, new Set<any>([]), new Set<any>(['drive'])),
       createUser: (user: User) => usersApiFactory.createUser(user),
-      getMe: () => meUserApiFactory.meGet(),
+      getMe: () => meUserApiFactory.getOwnUser(new Set<any>(['memberOf'])),
       changeOwnPassword: (currentPassword, newPassword) =>
         meChangepasswordApiFactory.changeOwnPassword({ currentPassword, newPassword }),
       editUser: (userId: string, user: User) => userApiFactory.updateUser(userId, user),

packages/web-runtime/src/pages/account.vue

@@ -67,15 +67,9 @@
         </dd>
       </div>
       <div class="account-page-info-groups oc-mb oc-width-1-2@s">
-        <dt v-translate class="oc-text-normal oc-text-muted" @click="loadGroups">
-          Group memberships
-        </dt>
+        <dt v-translate class="oc-text-normal oc-text-muted">Group memberships</dt>
         <dd data-testid="group-names">
-          <oc-spinner
-            v-if="loadingGroups"
-            :aria-label="$gettext('Loading group membership information')"
-          />
-          <span v-else-if="groupNames">{{ groupNames }}</span>
+          <span v-if="groupNames">{{ groupNames }}</span>
           <span v-else v-translate data-testid="group-names-empty"
             >You are not part of any group</span
           >
@@ -103,8 +97,6 @@ export default defineComponent({
   },
   data() {
     return {
-      loadingGroups: true,
-      groups: [],
       editPasswordModalOpen: false
     }
   },
@@ -134,18 +126,15 @@ export default defineComponent({
       return null
     },
     groupNames() {
-      return this.groups.join(', ')
+      if (this.capabilities.spaces?.enabled) {
+        return this.user.groups.map((group) => group.displayName).join(', ')
+      }
+
+      return this.user.groups.join(', ')
     }
   },
-  mounted() {
-    this.loadGroups()
-  },
   methods: {
     ...mapActions(['showMessage']),
-    async loadGroups() {
-      this.groups = await this.$client.users.getUserGroups(this.user.id)
-      this.loadingGroups = false
-    },
     showEditPasswordModal() {
       this.editPasswordModalOpen = true
     },

packages/web-runtime/src/services/auth/userManager.ts

@@ -158,10 +158,10 @@ export class UserManager extends OidcUserManager {
     const login = await this.clientService.owncloudSdk.getCurrentUser()
     await this.fetchCapabilities({ accessToken })
 
-    // FIXME: Fetching the user from the graph api can be removed as soon as the uuid is integrated in the OCS api
-    // see https://github.com/owncloud/ocis/issues/3271
-    let graphUser
-    let role = null
+    let role, graphUser, userGroups
+
+    const user = await this.clientService.owncloudSdk.users.getUser(login.id)
+
     if (this.store.getters.capabilities.spaces?.enabled) {
       const graphClient = this.clientService.graphAuthenticated(
         this.configurationManager.serverUrl,
@@ -176,18 +176,16 @@ export class UserManager extends OidcUserManager {
       this.store.commit('SET_SETTINGS_VALUES', settings)
 
       role = await this.fetchRole({ graphUser, accessToken, roles })
+    } else {
+      userGroups = await this.clientService.owncloudSdk.users.getUserGroups(login.id)
     }
-    const [user, userGroups] = await Promise.all([
-      await this.clientService.owncloudSdk.users.getUser(login.id),
-      await this.clientService.owncloudSdk.users.getUserGroups(login.id)
-    ])
     this.store.commit('SET_USER', {
       id: login.id,
       uuid: graphUser?.data?.id || '',
       username: login.username || login.id,
       displayname: user.displayname || login['display-name'],
       email: login?.email || user?.email || '',
-      groups: userGroups,
+      groups: graphUser?.data?.memberOf || userGroups || [],
       role,
       language: login?.language
     })

packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.js.snap

@@ -20,12 +20,8 @@ exports[`account page account information displays basic user information 1`] =
     <dd>some-email</dd>
   </div>
   <div class="account-page-info-groups oc-mb oc-width-1-2@s">
-    <dt class="oc-text-normal oc-text-muted">
-      Group memberships
-    </dt>
-    <dd data-testid="group-names">
-      <oc-spinner-stub aria-label="Loading group membership information"></oc-spinner-stub>
-    </dd>
+    <dt class="oc-text-normal oc-text-muted">Group memberships</dt>
+    <dd data-testid="group-names"><span data-testid="group-names-empty">You are not part of any group</span></dd>
   </div>
 </dl>
 `;

packages/web-runtime/tests/unit/pages/account.spec.js

@@ -103,24 +103,16 @@ describe('account page', () => {
     })
 
     describe('group membership', () => {
-      it('shows loading indicator when in loading state', () => {
-        const wrapper = getWrapper()
-        const groupInfoLoading = wrapper.find(selectors.loaderStub)
-        expect(groupInfoLoading.exists()).toBeTruthy()
-      })
       it('displays message if not member of any groups', async () => {
-        const store = getStore()
+        const store = getStore({ user: { groups: [] } })
         const wrapper = getWrapper(store)
-        await wrapper.setData({ loadingGroups: false })
 
         const groupNamesEmpty = wrapper.find(selectors.groupNamesEmpty)
         expect(groupNamesEmpty.exists()).toBeTruthy()
       })
       it('displays group names', async () => {
-        const store = getStore()
+        const store = getStore({ user: { groups: ['one', 'two', 'three'] } })
         const wrapper = getWrapper(store)
-        await wrapper.setData({ loadingGroups: false })
-        await wrapper.setData({ groups: ['one', 'two', 'three'] })
 
         const groupNames = wrapper.find(selectors.groupNames)
         expect(groupNames).toMatchSnapshot()
@@ -184,7 +176,6 @@ function getWrapper(store = getStore()) {
       $route
     },
     stubs: {
-      'oc-spinner': true,
       'oc-button': true,
       'oc-icon': true
     },
@@ -208,7 +199,12 @@ function getStore({
       setModalInputErrorMessage: jest.fn()
     },
     getters: {
-      user: () => user,
+      user: () => {
+        return {
+          groups: [],
+          ...user
+        }
+      },
       configuration: () => ({
         server: server
       }),