Fix: dont display or fetch users or groups with insufficient perms (#11111)

src-ui/src/app/components/admin/users-groups/users-groups.component.html

@@ -7,7 +7,7 @@
   >
 </pngx-page-header>
 
-@if (users) {
+@if (canViewUsers && users) {
   <h4 class="d-flex">
     <ng-container i18n>Users</ng-container>
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
@@ -45,7 +45,7 @@
   </ul>
 }
 
-@if (groups) {
+@if (canViewGroups && groups) {
   <h4 class="mt-4 d-flex">
     <ng-container i18n>Groups</ng-container>
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
@@ -86,7 +86,7 @@
   </ul>
 }
 
-@if (!users || !groups) {
+@if ((canViewUsers && !users) || (canViewGroups && !groups)) {
   <div>
     <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
     <div class="visually-hidden" i18n>Loading...</div>

src-ui/src/app/components/admin/users-groups/users-groups.component.ts

@@ -5,7 +5,11 @@ import { Subject, first, takeUntil } from 'rxjs'
 import { Group } from 'src/app/data/group'
 import { User } from 'src/app/data/user'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
-import { PermissionsService } from 'src/app/services/permissions.service'
+import {
+  PermissionAction,
+  PermissionType,
+  PermissionsService,
+} from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -44,7 +48,22 @@ export class UsersAndGroupsComponent
 
   unsubscribeNotifier: Subject<any> = new Subject()
 
+  public get canViewUsers(): boolean {
+    return this.permissionsService.currentUserCan(
+      PermissionAction.View,
+      PermissionType.User
+    )
+  }
+
+  public get canViewGroups(): boolean {
+    return this.permissionsService.currentUserCan(
+      PermissionAction.View,
+      PermissionType.Group
+    )
+  }
+
   ngOnInit(): void {
+    if (this.canViewUsers) {
       this.usersService
         .listAll(null, null, { full_perms: true })
         .pipe(first(), takeUntil(this.unsubscribeNotifier))
@@ -56,7 +75,9 @@ export class UsersAndGroupsComponent
             this.toastService.showError($localize`Error retrieving users`, e)
           },
         })
+    }
 
+    if (this.canViewGroups) {
       this.groupsService
         .listAll(null, null, { full_perms: true })
         .pipe(first(), takeUntil(this.unsubscribeNotifier))
@@ -69,6 +90,7 @@ export class UsersAndGroupsComponent
           },
         })
     }
+  }
 
   ngOnDestroy() {
     this.unsubscribeNotifier.next(true)