Fix: refactor username pipe to better handle async loading

src-ui/messages.xlf

@@ -7309,7 +7309,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/pipes/username.pipe.ts</context>
-          <context context-type="linenumber">33</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2332107018974972998" datatype="html">

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -70,7 +70,7 @@
                     }
                     @case (DisplayField.OWNER) {
                       @if (doc.owner) {
-                        <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickOwner(doc.owner, $event)" title="Filter by owner" i18n-title>{{doc.owner | username}}</a>
+                        <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickOwner(doc.owner, $event)" title="Filter by owner" i18n-title>{{doc.owner | username | async}}</a>
                       }
                     }
                     @case (DisplayField.ASN) {

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -136,7 +136,7 @@
               }
               @if (displayFields.includes(DisplayField.OWNER) && document.owner && document.owner !== settingsService.currentUser.id) {
                 <div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
-                  <i-bs width=".9em" height=".9em" class="me-2 text-muted" name="person-fill-lock"></i-bs><small>{{document.owner | username}}</small>
+                  <i-bs width=".9em" height=".9em" class="me-2 text-muted" name="person-fill-lock"></i-bs><small>{{document.owner | username | async}}</small>
                 </div>
               }
               @if (displayFields.includes(DisplayField.SHARED) && document.is_shared_by_requester) {

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -116,7 +116,7 @@
           @if (displayFields.includes(DisplayField.OWNER) && document.owner && document.owner !== settingsService.currentUser.id) {
             <div class="ps-0 p-1">
               <i-bs width="1em" height="1em" class="me-2 text-muted" name="person-fill-lock"></i-bs>
-              <small>{{document.owner | username}}</small>
+              <small>{{document.owner | username | async}}</small>
             </div>
           }
           @if (displayFields.includes(DisplayField.SHARED) && document.is_shared_by_requester) {

src-ui/src/app/components/document-list/document-list.component.html

@@ -318,7 +318,7 @@
                 }
                 @if (activeDisplayFields.includes(DisplayField.OWNER) && permissionService.currentUserCan(PermissionAction.View, PermissionType.User)) {
                   <td>
-                    {{d.owner | username}}
+                    {{d.owner | username | async}}
                   </td>
                 }
                 @if (activeDisplayFields.includes(DisplayField.NOTES) && notesEnabled) {

src-ui/src/app/pipes/username.pipe.spec.ts

@@ -38,6 +38,13 @@ describe('UsernamePipe', () => {
   })
 
   it('should transform user id to username', () => {
+    let username
+    const assign = (name) => {
+      username = name
+    }
+
+    pipe.transform(2).subscribe(assign)
+
     const req = httpTestingController.expectOne(
       `${environment.apiBaseUrl}users/?page=1&page_size=100000`
     )
@@ -55,24 +62,44 @@ describe('UsernamePipe', () => {
         },
       ],
     })
-
-    let username = pipe.transform(2)
     expect(username).toEqual('username2')
 
-    username = pipe.transform(3)
+    pipe.transform(3).subscribe(assign)
     expect(username).toEqual('User Name3')
 
-    username = pipe.transform(4)
+    pipe.transform(4).subscribe(assign)
     expect(username).toEqual('')
   })
 
-  it('should show generic label when no users retrieved', () => {
+  it('should show generic label when insufficient permissions', () => {
+    let username
+    const assign = (name) => {
+      username = name
+    }
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation((action, type) => {
+        return false
+      })
+    pipe.transform(4).subscribe(assign)
+    httpTestingController.expectNone(
+      `${environment.apiBaseUrl}users/?page=1&page_size=100000`
+    )
+
+    expect(username).toEqual('Shared')
+  })
+
+  it('should show empty string when no users retrieved due to error', () => {
+    let username
+    const assign = (name) => {
+      username = name
+    }
+    pipe.transform(4).subscribe(assign)
     const req = httpTestingController.expectOne(
       `${environment.apiBaseUrl}users/?page=1&page_size=100000`
     )
-    req.flush(null)
+    req.error(new ProgressEvent('error'))
 
-    let username = pipe.transform(4)
+    expect(username).toEqual('')
-    expect(username).toEqual('Shared')
   })
 })

src-ui/src/app/pipes/username.pipe.ts

@@ -1,9 +1,10 @@
 import { Pipe, PipeTransform } from '@angular/core'
+import { catchError, map, Observable, of } from 'rxjs'
 import { User } from '../data/user'
 import {
   PermissionAction,
-  PermissionType,
   PermissionsService,
+  PermissionType,
 } from '../services/permissions.service'
 import { UserService } from '../services/rest/user.service'
 
@@ -14,25 +15,29 @@ export class UsernamePipe implements PipeTransform {
   users: User[]
 
   constructor(
-    permissionsService: PermissionsService,
+    private permissionsService: PermissionsService,
-    userService: UserService
+    private userService: UserService
-  ) {
+  ) {}
+
+  transform(userID: number): Observable<string> {
     if (
-      permissionsService.currentUserCan(
+      this.permissionsService.currentUserCan(
         PermissionAction.View,
         PermissionType.User
       )
     ) {
-      userService.listAll().subscribe((r) => (this.users = r.results))
+      return this.userService.listAll().pipe(
+        map((users) => {
+          this.users = users.results
+          return this.getName(this.users.find((u) => u.id === userID))
+        }),
+        catchError(() => of(''))
+      )
+    } else {
+      return of($localize`Shared`)
     }
   }
 
-  transform(userID: number): string {
-    return this.users
-      ? (this.getName(this.users.find((u) => u.id === userID)) ?? '')
-      : $localize`Shared`
-  }
-
   getName(user: User): string {
     if (!user) return ''
     const name = [user.first_name, user.last_name].join(' ')