Fix: catch some frontend failed object retrievals (#14023)

src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.spec.ts

@@ -7,8 +7,9 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { of } from 'rxjs'
+import { of, throwError } from 'rxjs'
 import { GroupService } from 'src/app/services/rest/group.service'
+import { ToastService } from 'src/app/services/toast.service'
 import { PermissionsGroupComponent } from './permissions-group.component'
 
 describe('PermissionsGroupComponent', () => {
@@ -60,4 +61,19 @@ describe('PermissionsGroupComponent', () => {
     expect(component.value).toEqual({ id: 2, name: 'Group 2' })
     expect(groupServiceSpy).toHaveBeenCalled()
   })
+
+  it('should use an empty group list when retrieval fails', () => {
+    const toastSpy = jest.spyOn(TestBed.inject(ToastService), 'showError')
+    groupServiceSpy.mockReturnValue(throwError(() => new Error('Forbidden')))
+
+    const failedFixture = TestBed.createComponent(PermissionsGroupComponent)
+    const failedComponent = failedFixture.componentInstance
+
+    expect(failedComponent.groups()).toEqual([])
+    expect(() => failedFixture.detectChanges()).not.toThrow()
+    expect(toastSpy).toHaveBeenCalledWith(
+      'Error retrieving groups',
+      expect.any(Error)
+    )
+  })
 })

src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.ts

@@ -6,9 +6,10 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgSelectComponent } from '@ng-select/ng-select'
-import { map } from 'rxjs/operators'
+import { catchError, map, of } from 'rxjs'
 import { Group } from 'src/app/data/group'
 import { GroupService } from 'src/app/services/rest/group.service'
+import { ToastService } from 'src/app/services/toast.service'
 import { AbstractInputComponent } from '../../abstract-input'
 
 @Component({
@@ -26,8 +27,15 @@ import { AbstractInputComponent } from '../../abstract-input'
 })
 export class PermissionsGroupComponent extends AbstractInputComponent<Group> {
   private readonly groupService = inject(GroupService)
+  private readonly toastService = inject(ToastService)
   readonly groups = toSignal(
-    this.groupService.listAll().pipe(map((result) => result.results)),
+    this.groupService.listAll().pipe(
+      map((result) => result.results),
+      catchError((error) => {
+        this.toastService.showError($localize`Error retrieving groups`, error)
+        return of([])
+      })
+    ),
     { initialValue: undefined as Group[] }
   )
 }

src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.spec.ts

@@ -7,8 +7,9 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { of } from 'rxjs'
+import { of, throwError } from 'rxjs'
 import { UserService } from 'src/app/services/rest/user.service'
+import { ToastService } from 'src/app/services/toast.service'
 import { PermissionsUserComponent } from './permissions-user.component'
 
 describe('PermissionsUserComponent', () => {
@@ -60,4 +61,19 @@ describe('PermissionsUserComponent', () => {
     expect(component.value).toEqual({ id: 2, name: 'User 2' })
     expect(userServiceSpy).toHaveBeenCalled()
   })
+
+  it('should use an empty user list when retrieval fails', () => {
+    const toastSpy = jest.spyOn(TestBed.inject(ToastService), 'showError')
+    userServiceSpy.mockReturnValue(throwError(() => new Error('Forbidden')))
+
+    const failedFixture = TestBed.createComponent(PermissionsUserComponent)
+    const failedComponent = failedFixture.componentInstance
+
+    expect(failedComponent.users()).toEqual([])
+    expect(() => failedFixture.detectChanges()).not.toThrow()
+    expect(toastSpy).toHaveBeenCalledWith(
+      'Error retrieving users',
+      expect.any(Error)
+    )
+  })
 })

src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.ts

@@ -6,9 +6,10 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgSelectComponent } from '@ng-select/ng-select'
-import { map } from 'rxjs/operators'
+import { catchError, map, of } from 'rxjs'
 import { User } from 'src/app/data/user'
 import { UserService } from 'src/app/services/rest/user.service'
+import { ToastService } from 'src/app/services/toast.service'
 import { AbstractInputComponent } from '../../abstract-input'
 
 @Component({
@@ -26,8 +27,15 @@ import { AbstractInputComponent } from '../../abstract-input'
 })
 export class PermissionsUserComponent extends AbstractInputComponent<User[]> {
   private readonly userService = inject(UserService)
+  private readonly toastService = inject(ToastService)
   readonly users = toSignal(
-    this.userService.listAll().pipe(map((result) => result.results)),
+    this.userService.listAll().pipe(
+      map((result) => result.results),
+      catchError((error) => {
+        this.toastService.showError($localize`Error retrieving users`, error)
+        return of([])
+      })
+    ),
     { initialValue: undefined as User[] }
   )
 }