mgr/dashboard: rgw users link user with account e2e failure

Fixes: https://tracker.ceph.com/issues/73835

Changes Include:
Previously, users were initialized without their associated account data,
causing issues in table display and row expansion.

This change ensures that users are initialized only after fetching accounts
and mapping them to each user. If the account API fails, users are still
initialized with a default empty account to prevent errors.

Signed-off-by: Naman Munet <[email protected]>

Author: Naman Munet

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.spec.ts

@@ -11,12 +11,15 @@ import { TableActionsComponent } from '~/app/shared/datatable/table-actions/tabl
 import { SharedModule } from '~/app/shared/shared.module';
 import { configureTestBed, PermissionHelper } from '~/testing/unit-test-helper';
 import { RgwUserListComponent } from './rgw-user-list.component';
+import { RgwUserAccountsService } from '~/app/shared/api/rgw-user-accounts.service';
 
 describe('RgwUserListComponent', () => {
   let component: RgwUserListComponent;
   let fixture: ComponentFixture<RgwUserListComponent>;
   let rgwUserService: RgwUserService;
   let rgwUserServiceListSpy: jasmine.Spy;
+  let rgwUserAccountService: RgwUserAccountsService;
+  let rgwUserAccountServiceListSpy: jasmine.Spy;
 
   configureTestBed({
     declarations: [RgwUserListComponent],
@@ -26,8 +29,11 @@ describe('RgwUserListComponent', () => {
 
   beforeEach(() => {
     rgwUserService = TestBed.inject(RgwUserService);
+    rgwUserAccountService = TestBed.inject(RgwUserAccountsService);
     rgwUserServiceListSpy = spyOn(rgwUserService, 'list');
+    rgwUserAccountServiceListSpy = spyOn(rgwUserAccountService, 'list');
     rgwUserServiceListSpy.and.returnValue(of([]));
+    rgwUserAccountServiceListSpy.and.returnValue(of([]));
     fixture = TestBed.createComponent(RgwUserListComponent);
     component = fixture.componentInstance;
     spyOn(component, 'setTableRefreshTimeout').and.stub();
@@ -142,6 +148,7 @@ describe('RgwUserListComponent', () => {
     expect(rgwUserServiceListSpy).toHaveBeenCalledTimes(2);
     expect(component.users).toEqual([
       {
+        account: { name: '' },
         user_id: 'testid',
         stats: {
           size_actual: 6,

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, NgZone, OnInit, TemplateRef, ViewChild } from '@angular/core';
 
-import { forkJoin as observableForkJoin, Observable, Subscriber, Subject } from 'rxjs';
+import { forkJoin as observableForkJoin, Observable, Subscriber, Subject, of } from 'rxjs';
 import { RgwUserAccountsService } from '~/app/shared/api/rgw-user-accounts.service';
 
 import { RgwUserService } from '~/app/shared/api/rgw-user.service';
@@ -20,7 +20,7 @@ import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
 import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
 import { URLBuilderService } from '~/app/shared/services/url-builder.service';
 import { Account } from '../models/rgw-user-accounts';
-import { switchMap } from 'rxjs/operators';
+import { catchError, map, switchMap } from 'rxjs/operators';
 import { RgwUser } from '../models/rgw-user';
 
 const BASE_URL = 'rgw/user';
@@ -43,7 +43,7 @@ export class RgwUserListComponent extends ListWithDetails implements OnInit {
   permission: Permission;
   tableActions: CdTableAction[];
   columns: CdTableColumn[] = [];
-  users: object[] = [];
+  users: RgwUser[] = [];
   userAccounts: Account[];
   selection: CdTableSelection = new CdTableSelection();
   userDataSubject = new Subject();
@@ -121,15 +121,19 @@ export class RgwUserListComponent extends ListWithDetails implements OnInit {
         flexGrow: 0.8
       }
     ];
+
     this.userDataSubject
       .pipe(
-        switchMap((_: object[]) => {
-          return this.rgwUserAccountService.list(true);
-        })
+        switchMap((users: RgwUser[]) =>
+          this.rgwUserAccountService.list(true).pipe(
+            map((accounts: Account[]) => ({ users, accounts })),
+            catchError(() => of({ users, accounts: [] }))
+          )
+        )
       )
-      .subscribe((accounts: Account[]) => {
+      .subscribe(({ users, accounts }) => {
         this.userAccounts = accounts;
-        this.mapUsersWithAccount();
+        this.users = this.mapUsersWithAccount(users);
       });
 
     const getUserUri = () =>
@@ -161,8 +165,7 @@ export class RgwUserListComponent extends ListWithDetails implements OnInit {
   getUserList(context: CdTableFetchDataContext) {
     this.setTableRefreshTimeout();
     this.rgwUserService.list().subscribe(
-      (resp: object[]) => {
-        this.users = resp;
+      (resp: RgwUser[]) => {
         this.userDataSubject.next(resp);
       },
       () => {
@@ -171,9 +174,9 @@ export class RgwUserListComponent extends ListWithDetails implements OnInit {
     );
   }
 
-  mapUsersWithAccount() {
-    this.users = this.users.map((user: RgwUser) => {
-      const account: Account = this.userAccounts.find((acc) => acc.id === user.account_id);
+  mapUsersWithAccount(users: RgwUser[]): RgwUser[] {
+    return users.map((user: RgwUser) => {
+      const account: Account = this.userAccounts.find((acc: Account) => acc.id === user.account_id);
       return {
         account: account ? account : { name: '' }, // adding {name: ''} for sorting account name in user list to work
         ...user