Always translate user role

client/src/app/+admin/overview/users/user-edit/user-edit.ts

@@ -2,6 +2,7 @@ import { Directive, OnInit } from '@angular/core'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { AuthService, ScreenService, ServerService, User } from '@app/core'
 import { FormReactive } from '@app/shared/shared-forms'
+import { peertubeTranslate } from '@shared/core-utils'
 import { USER_ROLE_LABELS } from '@shared/core-utils/users'
 import { HTMLServerConfig, UserAdminFlag, UserRole } from '@shared/models'
 import { SelectOptionsItem } from '../../../../../types/select-options-item.model'
@@ -25,7 +26,7 @@ export abstract class UserEdit extends FormReactive implements OnInit {
   abstract isCreation (): boolean
   abstract getFormButtonTitle (): string
 
-  ngOnInit (): void {
+  ngOnInit () {
     this.serverConfig = this.serverService.getHTMLConfig()
 
     this.buildRoles()
@@ -49,15 +50,18 @@ export abstract class UserEdit extends FormReactive implements OnInit {
   buildRoles () {
     const authUser = this.auth.getUser()
 
-    if (authUser.role.id === UserRole.ADMINISTRATOR) {
-      this.roles = Object.keys(USER_ROLE_LABELS)
-            .map(key => ({ value: key.toString(), label: USER_ROLE_LABELS[key] }))
-      return
-    }
+    this.serverService.getServerLocale()
+      .subscribe(translations => {
+        if (authUser.role.id === UserRole.ADMINISTRATOR) {
+          this.roles = Object.keys(USER_ROLE_LABELS)
+                .map(key => ({ value: key.toString(), label: peertubeTranslate(USER_ROLE_LABELS[key], translations) }))
+          return
+        }
 
-    this.roles = [
-      { value: UserRole.USER.toString(), label: USER_ROLE_LABELS[UserRole.USER] }
-    ]
+        this.roles = [
+          { value: UserRole.USER.toString(), label: peertubeTranslate(USER_ROLE_LABELS[UserRole.USER], translations) }
+        ]
+      })
   }
 
   displayDangerZone () {

client/src/app/core/server/server.service.ts

@@ -137,7 +137,7 @@ export class ServerService {
     return this.videoPlaylistPrivaciesObservable.pipe(first())
   }
 
-  getServerLocale () {
+  getServerLocale (): Observable<{ [ id: string ]: string }> {
     if (!this.localeObservable) {
       const completeLocale = isOnDevLocale() ? getDevLocale() : getCompleteLocale(this.localeId)
 

client/src/app/shared/shared-users/user-admin.service.ts

@@ -1,12 +1,12 @@
 import { SortMeta } from 'primeng/api'
 import { from, Observable } from 'rxjs'
-import { catchError, concatMap, map, toArray } from 'rxjs/operators'
+import { catchError, concatMap, map, switchMap, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { RestExtractor, RestPagination, RestService, UserService } from '@app/core'
+import { RestExtractor, RestPagination, RestService, ServerService, UserService } from '@app/core'
 import { getBytes } from '@root-helpers/bytes'
-import { arrayify } from '@shared/core-utils'
-import { ResultList, User as UserServerModel, UserCreate, UserRole, UserUpdate } from '@shared/models'
+import { arrayify, peertubeTranslate } from '@shared/core-utils'
+import { ResultList, User as UserServerModel, UserCreate, UserUpdate } from '@shared/models'
 
 @Injectable()
 export class UserAdminService {
@@ -14,7 +14,8 @@ export class UserAdminService {
   constructor (
     private authHttp: HttpClient,
     private restExtractor: RestExtractor,
-    private restService: RestService
+    private restService: RestService,
+    private serverService: ServerService
   ) { }
 
   addUser (userCreate: UserCreate) {
@@ -58,10 +59,16 @@ export class UserAdminService {
     }
 
     return this.authHttp.get<ResultList<UserServerModel>>(UserService.BASE_USERS_URL, { params })
-               .pipe(
-                 map(res => this.restExtractor.applyToResultListData(res, this.formatUser.bind(this))),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
+      .pipe(
+        switchMap(data => {
+          return this.serverService.getServerLocale()
+            .pipe(map(translations => ({ data, translations })))
+        }),
+        map(({ data, translations }) => {
+          return this.restExtractor.applyToResultListData(data, this.formatUser.bind(this), [translations])
+        }),
+        catchError(err => this.restExtractor.handleError(err))
+      )
   }
 
   removeUsers (usersArg: UserServerModel | UserServerModel[]) {
@@ -98,7 +105,7 @@ export class UserAdminService {
       )
   }
 
-  private formatUser (user: UserServerModel) {
+  private formatUser (user: UserServerModel, translations: { [ id: string ]: string } = {}) {
     let videoQuota
     if (user.videoQuota === -1) {
       videoQuota = '∞'
@@ -118,16 +125,10 @@ export class UserAdminService {
       videoQuotaUsedDaily = getBytes(user.videoQuotaUsedDaily || 0, 0) + ''
     }
 
-    const roleLabels: { [ id in UserRole ]: string } = {
-      [UserRole.USER]: $localize`User`,
-      [UserRole.ADMINISTRATOR]: $localize`Administrator`,
-      [UserRole.MODERATOR]: $localize`Moderator`
-    }
-
     return Object.assign(user, {
       role: {
         id: user.role.id,
-        label: roleLabels[user.role.id]
+        label: peertubeTranslate(user.role.label, translations)
       },
       videoQuota,
       videoQuotaUsed,