feat(debug): add preview-only topbar role switcher for fast role-based UI testing

Author: Diogo-Ferraz

src/app/core/auth/services/auth.service.ts

@@ -137,6 +137,38 @@ export class AuthService {
     sessionStorage.setItem(DEBUG_SESSION_FLAG_STORAGE_KEY, '1');
   }
 
+  setDebugSessionRole(role: AppRole): void {
+    const currentSession = this.authSessionSignal();
+    if (!currentSession?.isDebugSession || !this.isDebugAuthAllowed() || !this.hasDebugSessionFlag()) {
+      return;
+    }
+
+    const nowUtcMs = Date.now();
+    const roleName = this.resolveDebugRoleName(role);
+    const debugClaims = {
+      sub: 'debug-user',
+      name: `${roleName} (Preview)`,
+      preferred_username: `debug.${role.toLowerCase()}`,
+      email: `debug.${role.toLowerCase()}@local.test`,
+      role: [role]
+    };
+
+    const session: AuthSession = {
+      ...currentSession,
+      accessToken: this.createUnsignedJwt(debugClaims),
+      idToken: this.createUnsignedJwt({
+        sub: debugClaims.sub,
+        name: debugClaims.name,
+        email: debugClaims.email
+      }),
+      scope: this.appEnvironment.auth.scopes.join(' '),
+      expiresAtUtcMs: nowUtcMs + 8 * 60 * 60 * 1000,
+      isDebugSession: true
+    };
+
+    this.setSession(session);
+  }
+
   hasRole(role: string): boolean {
     return this.userRoles().includes(role);
   }
@@ -406,4 +438,17 @@ export class AuthService {
   private hasDebugSessionFlag(): boolean {
     return sessionStorage.getItem(DEBUG_SESSION_FLAG_STORAGE_KEY) === '1';
   }
+
+  private resolveDebugRoleName(role: AppRole): string {
+    switch (role) {
+      case AppRole.Administrator:
+        return 'Debug Admin';
+      case AppRole.ProjectManager:
+        return 'Debug Manager';
+      case AppRole.User:
+        return 'Debug User';
+      default:
+        return 'Debug User';
+    }
+  }
 }

src/app/core/layout/component/app-topbar/app-topbar.component.html

@@ -15,6 +15,15 @@
 
     <div class="layout-topbar-actions">
         <div class="layout-config-menu">
+            <button
+                *ngIf="isPreviewMode"
+                type="button"
+                class="layout-topbar-preview-role"
+                (click)="previewRoleMenu.toggle($event)">
+                <i class="pi pi-sliders-h"></i>
+                <span>{{ previewRoleButtonLabel }}</span>
+                <i class="pi pi-angle-down"></i>
+            </button>
             <button type="button" class="layout-topbar-action" (click)="toggleDarkMode()">
                 <i [ngClass]="{ 'pi ': true, 'pi-sun': layoutService.isDarkTheme(), 'pi-moon': !layoutService.isDarkTheme() }"></i>
             </button>
@@ -68,6 +77,7 @@
                 </div>
             </ng-template>
         </p-menu>
+        <p-menu #previewRoleMenu [popup]="true" [model]="previewRoleMenuItems" [appendTo]="'body'" styleClass="topbar-preview-role-menu"></p-menu>
         <p-overlayPanel #notificationsPanel styleClass="topbar-notifications-panel" [showCloseIcon]="true" [appendTo]="'body'" (onShow)="markNotificationsAsRead()">
             <div class="topbar-notifications">
                 <div class="topbar-notifications__header">

src/app/core/layout/component/app-topbar/app-topbar.component.scss

@@ -184,6 +184,34 @@
         display: flex;
         gap: 1rem;
     }
+
+    .layout-topbar-preview-role {
+        border: 1px solid color-mix(in srgb, var(--orange-500) 40%, var(--surface-border));
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--orange-100) 55%, transparent);
+        color: var(--orange-700);
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        padding: 0.28rem 0.6rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background-color .2s, border-color .2s;
+
+        &:hover {
+            background: color-mix(in srgb, var(--orange-100) 72%, transparent);
+            border-color: color-mix(in srgb, var(--orange-500) 62%, var(--surface-border));
+        }
+
+        i {
+            font-size: 0.78rem;
+        }
+
+        span {
+            white-space: nowrap;
+        }
+    }
 }
 
 :host ::ng-deep .topbar-account-menu {
@@ -244,6 +272,10 @@
     width: min(24rem, calc(100vw - 2rem));
 }
 
+:host ::ng-deep .topbar-preview-role-menu {
+    width: 14rem;
+}
+
 :host ::ng-deep .topbar-notifications-panel .p-overlaypanel-content {
     padding-top: 1rem;
 }
@@ -405,6 +437,10 @@
             margin-left: 0.5rem;
         }
 
+        .layout-topbar-preview-role {
+            display: none;
+        }
+
         .layout-topbar-menu-content {
             flex-direction: row;
         }

src/app/core/layout/component/app-topbar/app-topbar.component.ts

@@ -22,6 +22,23 @@ import { AppRole } from '../../../../core/auth/models/app-role.model';
 })
 export class AppTopbarComponent {
   private readonly notificationsService = inject(ActivityNotificationService);
+  readonly previewRoleMenuItems: MenuItem[] = [
+    {
+      label: 'Administrator',
+      icon: 'pi pi-shield',
+      command: () => this.switchPreviewRole(AppRole.Administrator)
+    },
+    {
+      label: 'Project Manager',
+      icon: 'pi pi-briefcase',
+      command: () => this.switchPreviewRole(AppRole.ProjectManager)
+    },
+    {
+      label: 'User',
+      icon: 'pi pi-user',
+      command: () => this.switchPreviewRole(AppRole.User)
+    }
+  ];
 
   readonly accountMenuItems: MenuItem[] = [
     {
@@ -79,6 +96,14 @@ export class AppTopbarComponent {
     this.authService.logout();
   }
 
+  switchPreviewRole(role: AppRole): void {
+    if (!this.isPreviewMode) {
+      return;
+    }
+
+    this.authService.setDebugSessionRole(role);
+  }
+
   get homeRoute(): string {
     return this.authService.isAuthenticated() ? this.preferencesService.getDefaultHomeRoutePath() : '/';
   }
@@ -176,4 +201,8 @@ export class AppTopbarComponent {
     }
   }
 
+  get previewRoleButtonLabel(): string {
+    return `Preview: ${this.currentRoleLabel}`;
+  }
+
 }