Language header follow up (#8660)

changelog/unreleased/enhancement-requests-language-header

@@ -4,3 +4,4 @@ All outgoing requests now have the `Accept-Language` header which includes the c
 
 https://github.com/owncloud/web/issues/8612
 https://github.com/owncloud/web/pull/8621
+https://github.com/owncloud/web/pull/8660

packages/web-app-admin-settings/src/components/Users/CreateUserModal.vue

@@ -55,12 +55,13 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import * as EmailValidator from 'email-validator'
-import { useGraphClient } from 'web-pkg'
+import { useClientService } from 'web-pkg'
 
 export default defineComponent({
   name: 'CreateUserModal',
   emits: ['cancel', 'confirm'],
   setup() {
+    const clientService = useClientService()
     const formData = ref({
       userName: {
         errorMessage: '',
@@ -80,7 +81,7 @@ export default defineComponent({
       }
     })
     return {
-      ...useGraphClient(),
+      clientService,
       formData
     }
   },
@@ -134,16 +135,14 @@ export default defineComponent({
       }
 
       try {
-        await this.graphClient.users.getUser(this.user.onPremisesSamAccountName)
+        // Validate username by fetching the user. If the request succeeds, we throw a validation error
+        const client = this.clientService.graphAuthenticated
+        await client.users.getUser(this.user.onPremisesSamAccountName)
         this.formData.userName.errorMessage = this.$gettext('User "%{userName}" already exists', {
           userName: this.user.onPremisesSamAccountName
         })
         return false
-      } catch (e) {
-        /**
-         * If the backend throws an error, the user doesn't exist and everything is alright
-         */
-      }
+      } catch (e) {}
 
       this.formData.userName.errorMessage = ''
       this.formData.userName.valid = true

packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue

@@ -115,7 +115,7 @@ import GroupSelect from '../GroupSelect.vue'
 import QuotaSelect from 'web-pkg/src/components/QuotaSelect.vue'
 import { cloneDeep } from 'lodash-es'
 import { Group, User } from 'web-client/src/generated'
-import { MaybeRef, useGraphClient, useStore } from 'web-pkg'
+import { MaybeRef, useClientService, useStore } from 'web-pkg'
 import { useCapabilitySpacesMaxQuota } from 'web-pkg/src/composables'
 
 export default defineComponent({
@@ -144,6 +144,7 @@ export default defineComponent({
   emits: ['confirm'],
   setup(props) {
     const store = useStore()
+    const clientService = useClientService()
     const currentUser = store.getters.user
     const editUser: MaybeRef<User> = ref({})
     const formData = ref({
@@ -173,7 +174,7 @@ export default defineComponent({
       editUser,
       formData,
       groupOptions,
-      ...useGraphClient(),
+      clientService,
       // HACK: make sure _user has a proper type
       _user: computed(() => props.user as User)
     }
@@ -271,16 +272,14 @@ export default defineComponent({
 
       if (this.user.onPremisesSamAccountName !== this.editUser.onPremisesSamAccountName) {
         try {
-          await this.graphClient.users.getUser(this.editUser.onPremisesSamAccountName)
+          // Validate username by fetching the user. If the request succeeds, we throw a validation error
+          const client = this.clientService.graphAuthenticated
+          await client.users.getUser(this.editUser.onPremisesSamAccountName)
           this.formData.userName.errorMessage = this.$gettext('User "%{userName}" already exists', {
             userName: this.editUser.onPremisesSamAccountName
           })
           return false
-        } catch (e) {
-          /**
-           * If the backend throws an error, the user doesn't exist and everything is alright
-           */
-        }
+        } catch (e) {}
       }
 
       this.formData.userName.errorMessage = ''

packages/web-app-admin-settings/src/views/Groups.vue

@@ -89,7 +89,7 @@ import { eventBus } from 'web-pkg/src/services/eventBus'
 import { mapActions } from 'vuex'
 import DetailsPanel from '../components/Groups/SideBar/DetailsPanel.vue'
 import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
-import { useGraphClient } from 'web-pkg/src/composables'
+import { useClientService } from 'web-pkg/src/composables'
 import AppTemplate from '../components/AppTemplate.vue'
 import { useSideBar } from 'web-pkg/src/composables/sideBar'
 import Delete from '../mixins/groups/delete'
@@ -111,10 +111,10 @@ export default defineComponent({
     const selectedGroups = ref([])
     const createGroupModalOpen = ref(false)
     const listHeaderPosition = ref(0)
-    const { graphClient } = useGraphClient()
+    const clientService = useClientService()
 
     const loadResourcesTask = useTask(function* (signal) {
-      const response = yield unref(graphClient).groups.listGroups('displayName')
+      const response = yield clientService.graphAuthenticated.groups.listGroups('displayName')
       groups.value = response.data.value || []
       groups.value.forEach((group) => {
         group.members = group.members || []
@@ -152,7 +152,7 @@ export default defineComponent({
       createGroupModalOpen,
       template,
       loadResourcesTask,
-      graphClient,
+      clientService,
       listHeaderPosition,
       batchActions
     }
@@ -225,7 +225,8 @@ export default defineComponent({
     },
     async createGroup(group) {
       try {
-        const response = await this.graphClient.groups.createGroup(group)
+        const client = this.clientService.graphAuthenticated
+        const response = await client.groups.createGroup(group)
         this.toggleCreateGroupModal()
         this.showMessage({
           title: this.$gettext('Group was created successfully')
@@ -241,7 +242,8 @@ export default defineComponent({
     },
     async editGroup(editGroup) {
       try {
-        await this.graphClient.groups.editGroup(editGroup.id, editGroup)
+        const client = this.clientService.graphAuthenticated
+        await client.groups.editGroup(editGroup.id, editGroup)
         const group = this.groups.find((group) => group.id === editGroup.id)
         Object.assign(group, editGroup)
 

packages/web-app-admin-settings/src/views/Spaces.vue

@@ -78,7 +78,7 @@ import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import {
   useAccessToken,
   useCapabilitySpacesMaxQuota,
-  useGraphClient,
+  useClientService,
   useStore
 } from 'web-pkg/src/composables'
 import {
@@ -132,7 +132,7 @@ export default defineComponent({
     const store = useStore()
     const accessToken = useAccessToken({ store })
     const spaces = ref([])
-    const { graphClient } = useGraphClient()
+    const clientService = useClientService()
     const { $gettext } = useGettext()
     const { sideBarOpen, sideBarActivePanel } = useSideBar()
 
@@ -145,7 +145,10 @@ export default defineComponent({
     const loadResourcesTask = useTask(function* (signal) {
       const {
         data: { value: drivesResponse }
-      } = yield unref(graphClient).drives.listAllDrives('name asc', 'driveType eq project')
+      } = yield clientService.graphAuthenticated.drives.listAllDrives(
+        'name asc',
+        'driveType eq project'
+      )
       const drives = drivesResponse.map((space) =>
         buildSpace({ ...space, serverUrl: configurationManager.serverUrl })
       )
@@ -290,7 +293,6 @@ export default defineComponent({
       sideBarActivePanel,
       spaces,
       loadResourcesTask,
-      graphClient,
       accessToken,
       breadcrumbs,
       batchActions,

packages/web-app-admin-settings/src/views/Users.vue

@@ -170,7 +170,7 @@ import {
   queryItemAsString,
   useAccessToken,
   useCapabilitySpacesMaxQuota,
-  useGraphClient,
+  useClientService,
   useLoadingService,
   useRouteQuery,
   useStore
@@ -221,7 +221,7 @@ export default defineComponent({
     const { $gettext } = useGettext()
     const store = useStore()
     const accessToken = useAccessToken({ store })
-    const { graphClient } = useGraphClient()
+    const clientService = useClientService()
     const loadingService = useLoadingService()
 
     const { actions: removeFromGroupsActions } = useRemoveFromGroups()
@@ -260,12 +260,13 @@ export default defineComponent({
     }
 
     const loadGroupsTask = useTask(function* (signal) {
-      const groupsResponse = yield unref(graphClient).groups.listGroups('displayName')
+      const groupsResponse = yield clientService.graphAuthenticated.groups.listGroups('displayName')
       groups.value = groupsResponse.data.value
     })
 
     const loadAppRolesTask = useTask(function* (signal) {
-      const applicationsResponse = yield unref(graphClient).applications.listApplications()
+      const applicationsResponse =
+        yield clientService.graphAuthenticated.applications.listApplications()
       roles.value = applicationsResponse.data.value[0].appRoles
       applicationId.value = applicationsResponse.data.value[0].id
     })
@@ -284,7 +285,10 @@ export default defineComponent({
         .filter(Boolean)
         .join(' and ')
 
-      const usersResponse = yield unref(graphClient).users.listUsers('displayName', filter)
+      const usersResponse = yield clientService.graphAuthenticated.users.listUsers(
+        'displayName',
+        filter
+      )
       users.value = usersResponse.data.value || []
     })
 
@@ -307,7 +311,7 @@ export default defineComponent({
         return
       }
 
-      const { data } = yield unref(graphClient).users.getUser(user.id)
+      const { data } = yield clientService.graphAuthenticated.users.getUser(user.id)
       unref(additionalUserDataLoadedForUserIds).push(user.id)
 
       Object.assign(user, data)
@@ -417,18 +421,13 @@ export default defineComponent({
 
     const addUsersToGroups = async ({ users: affectedUsers, groups: groupsToAdd }) => {
       try {
+        const client = clientService.graphAuthenticated
         const usersToFetch = []
         const addUsersToGroupsRequests = []
         groupsToAdd.reduce((acc, group) => {
           for (const user of affectedUsers) {
             if (!user.memberOf.find((userGroup) => userGroup.id === group.id)) {
-              acc.push(
-                unref(graphClient).groups.addMember(
-                  group.id,
-                  user.id,
-                  configurationManager.serverUrl
-                )
-              )
+              acc.push(client.groups.addMember(group.id, user.id, configurationManager.serverUrl))
               if (!usersToFetch.includes(user.id)) {
                 usersToFetch.push(user.id)
               }
@@ -438,7 +437,7 @@ export default defineComponent({
         }, addUsersToGroupsRequests)
         const usersResponse = await loadingService.addTask(async () => {
           await Promise.all(addUsersToGroupsRequests)
-          return Promise.all(usersToFetch.map((userId) => unref(graphClient).users.getUser(userId)))
+          return Promise.all(usersToFetch.map((userId) => client.users.getUser(userId)))
         })
         for (const { data: updatedUser } of usersResponse) {
           const userIndex = unref(users).findIndex((user) => user.id === updatedUser.id)
@@ -466,12 +465,13 @@ export default defineComponent({
 
     const removeUsersFromGroups = async ({ users: affectedUsers, groups: groupsToRemove }) => {
       try {
+        const client = clientService.graphAuthenticated
         const usersToFetch = []
         const removeUsersToGroupsRequests = []
         groupsToRemove.reduce((acc, group) => {
           for (const user of affectedUsers) {
             if (user.memberOf.find((userGroup) => userGroup.id === group.id)) {
-              acc.push(unref(graphClient).groups.deleteMember(group.id, user.id))
+              acc.push(client.groups.deleteMember(group.id, user.id))
               if (!usersToFetch.includes(user.id)) {
                 usersToFetch.push(user.id)
               }
@@ -481,7 +481,7 @@ export default defineComponent({
         }, removeUsersToGroupsRequests)
         const usersResponse = await loadingService.addTask(async () => {
           await Promise.all(removeUsersToGroupsRequests)
-          return Promise.all(usersToFetch.map((userId) => unref(graphClient).users.getUser(userId)))
+          return Promise.all(usersToFetch.map((userId) => client.users.getUser(userId)))
         })
         for (const { data: updatedUser } of usersResponse) {
           const userIndex = unref(users).findIndex((user) => user.id === updatedUser.id)
@@ -519,7 +519,7 @@ export default defineComponent({
       applicationId,
       loadResourcesTask,
       loadAdditionalUserDataTask,
-      graphClient,
+      clientService,
       accessToken,
       listHeaderPosition,
       createUserModalOpen,
@@ -615,8 +615,9 @@ export default defineComponent({
     },
     async createUser(user) {
       try {
-        const { id: createdUserId } = (await this.graphClient.users.createUser(user))?.data
-        const { data: createdUser } = await this.graphClient.users.getUser(createdUserId)
+        const client = this.clientService.graphAuthenticated
+        const { id: createdUserId } = (await client.users.createUser(user))?.data
+        const { data: createdUser } = await client.users.getUser(createdUserId)
         this.users.push(createdUser)
 
         this.toggleCreateUserModal()
@@ -633,6 +634,7 @@ export default defineComponent({
     },
     async editUser({ user, editUser }) {
       try {
+        const client = this.clientService.graphAuthenticated
         const graphEditUserPayloadExtractor = (user) => {
           return omit(user, ['drive', 'appRoleAssignments', 'memberOf'])
         }
@@ -642,7 +644,7 @@ export default defineComponent({
         )
 
         if (!isEmpty(graphEditUserPayload)) {
-          await this.graphClient.users.editUser(editUser.id, graphEditUserPayload)
+          await client.users.editUser(editUser.id, graphEditUserPayload)
         }
 
         if (!isEqual(user.drive?.quota?.total, editUser.drive?.quota?.total)) {
@@ -659,7 +661,7 @@ export default defineComponent({
           await this.updateUserAppRoleAssignments(user, editUser)
         }
 
-        const { data: updatedUser } = await this.graphClient.users.getUser(user.id)
+        const { data: updatedUser } = await client.users.getUser(user.id)
         const userIndex = this.users.findIndex((user) => user.id === updatedUser.id)
         this.users[userIndex] = updatedUser
         const selectedUserIndex = this.selectedUsers.findIndex((user) => user.id === updatedUser.id)
@@ -681,7 +683,8 @@ export default defineComponent({
     },
 
     async updateUserDrive(editUser) {
-      const updateDriveResponse = await this.graphClient.drives.updateDrive(
+      const client = this.clientService.graphAuthenticated
+      const updateDriveResponse = await client.drives.updateDrive(
         editUser.drive.id,
         { quota: { total: editUser.drive.quota.total } },
         {}
@@ -697,13 +700,15 @@ export default defineComponent({
       }
     },
     updateUserAppRoleAssignments(user, editUser) {
-      return this.graphClient.users.createUserAppRoleAssignment(user.id, {
+      const client = this.clientService.graphAuthenticated
+      return client.users.createUserAppRoleAssignment(user.id, {
         appRoleId: editUser.appRoleAssignments[0].appRoleId,
         resourceId: this.applicationId,
         principalId: editUser.id
       })
     },
     updateUserGroupAssignments(user, editUser) {
+      const client = this.clientService.graphAuthenticated
       const groupsToAdd = editUser.memberOf.filter(
         (editUserGroup) => !user.memberOf.some((g) => g.id === editUserGroup.id)
       )
@@ -714,11 +719,11 @@ export default defineComponent({
 
       for (const groupToAdd of groupsToAdd) {
         requests.push(
-          this.graphClient.groups.addMember(groupToAdd.id, user.id, configurationManager.serverUrl)
+          client.groups.addMember(groupToAdd.id, user.id, configurationManager.serverUrl)
         )
       }
       for (const groupToDelete of groupsToDelete) {
-        requests.push(this.graphClient.groups.deleteMember(groupToDelete.id, user.id))
+        requests.push(client.groups.deleteMember(groupToDelete.id, user.id))
       }
 
       return Promise.all(requests)