Improve admin settings user management graph api usage

changelog/unreleased/enhancement-admin-settings-users-role-graph-api-usage

@@ -0,0 +1,6 @@
+Enhancement: Admin settings users section uses graph api for role assignments
+
+We've switched over to utilizing user role assignments data from the graph api instead of the custom settings api.
+Especially for the list view this leads to improved performance.
+
+https://github.com/owncloud/web/pull/8261

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

@@ -31,7 +31,7 @@
  <tr>
  <th scope="col" class="oc-pr-s" v-text="$gettext('Role')" />
  <td>
- <span v-if="user.role" v-text="user.role.displayName" />
+ <span v-if="user.appRoleAssignments" v-text="roleDisplayName" />
  </td>
  </tr>
  </table>
@@ -57,6 +57,10 @@ export default defineComponent({
  users: {
  type: Array,
  required: true
+ },
+ roles: {
+ type: Array,
+ required: true
  }
  },
  computed: {
@@ -70,6 +74,13 @@ export default defineComponent({
  return this.$gettextInterpolate('%{count} users selected', {
  count: this.users.length
  })
+ },
+ roleDisplayName() {
+ const assignedRole = this.user.appRoleAssignments[0]
+
+ return this.$gettext(
+ this.roles.find((role) => role.id === assignedRole.appRoleId)?.displayName || ''
+ )
  }
  }
 })

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

@@ -21,21 +21,27 @@
  @change="validateEmail"
  />
  <oc-text-input
- v-model="editUser.passwordProfile.password"
+ :model-value="editUser"
  class="oc-mb-s"
  :label="$gettext('Password')"
  type="password"
  :fix-message-line="true"
  default-value="●●●●●●●●"
+ @update:modelValue="onUpdatePassword"
  />
  <div class="oc-mb-s">
  <oc-select
- v-model="editUser.role"
+ :model-value="editUser"
  :label="$gettext('Role')"
  option-label="displayName"
- :options="roles"
+ :options="translatedRoleOptions"
  :clearable="false"
- />
+ @update:modelValue="onUpdateRole"
+ >
+ <template #selected-option>
+ {{ selectedRoleName }}
+ </template>
+ </oc-select>
  <div class="oc-text-input-message"></div>
  </div>
  <quota-select
@@ -64,7 +70,7 @@
  :compare-object="editUser"
  :confirm-button-disabled="invalidFormData"
  @revert="revertChanges"
- @confirm="$emit('confirm', editUser)"
+ @confirm="$emit('confirm', { user, editUser })"
  ></compare-save-dialog>
  </form>
  </div>
@@ -124,6 +130,11 @@ export default defineComponent({
  return { editUser, formData, groupOptions }
  },
  computed: {
+ translatedRoleOptions() {
+ return this.roles.map((role) => {
+ return { ...role, displayName: this.$gettext(role.displayName) }
+ })
+ },
  invalidFormData() {
  return Object.values(this.formData)
  .map((v) => !!v.valid)
@@ -134,12 +145,18 @@ export default defineComponent({
  },
  compareSaveDialogOriginalObject() {
  return cloneDeep({ ...this.user, passwordProfile: { password: '' } })
+ },
+ selectedRoleName() {
+ return this.$gettext(
+ this.roles.find((role) => role.id === this.editUser.appRoleAssignments[0].appRoleId)
+ .displayName
+ )
  }
  },
  watch: {
  user: {
  handler: function () {
- this.editUser = cloneDeep({ ...this.user, passwordProfile: { password: '' } })
+ this.editUser = cloneDeep(this.user)
  },
  deep: true,
  immediate: true
@@ -182,6 +199,14 @@ export default defineComponent({
  formDataValue.valid = true
  formDataValue.errorMessage = ''
  })
+ },
+ onUpdateRole(role) {
+ this.editUser.appRoleAssignments[0].appRoleId = role.id
+ },
+ onUpdatePassword(password) {
+ this.editUser.passwordProfile = {
+ password
+ }
  }
  }
 })

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

@@ -44,7 +44,7 @@
  <avatar-image :width="32" :userid="item.id" :user-name="item.displayName" />
  </template>
  <template #role="{ item }">
- <template v-if="item.role">{{ item.role.displayName }}</template>
+ <template v-if="item.appRoleAssignments">{{ getRoleDisplayNameByUser(item) }}</template>
  </template>
  <template #actions="{ item }">
  <oc-button
@@ -88,6 +88,10 @@ export default defineComponent({
  type: Array,
  required: true
  },
+ roles: {
+ type: Array,
+ required: true
+ },
  selectedUsers: {
  type: Array,
  required: true
@@ -227,8 +231,8 @@ export default defineComponent({
  let a, b
 
  if (prop === 'role') {
- a = user1.role?.displayName || ''
- b = user2.role?.displayName || ''
+ a = this.getRoleDisplayNameByUser(user1)
+ b = this.getRoleDisplayNameByUser(user2)
  } else {
  a = user1[prop] || ''
  b = user2[prop] || ''
@@ -243,6 +247,13 @@ export default defineComponent({
  },
  getSelectUserLabel(user) {
  return this.$gettext('Select %{ user }', { user: user.displayName }, true)
+ },
+ getRoleDisplayNameByUser(user) {
+ const assignedRole = user.appRoleAssignments[0]
+
+ return this.$gettext(
+ this.roles.find((role) => role.id === assignedRole.appRoleId)?.displayName || ''
+ )
  }
  }
 })