feat(impersonation): remember recently impersonated profiles (#622)

* feat(impersonation): remember recently impersonated profiles

Persist past impersonations in localStorage and surface them as
suggestions when the admin clicks the input. Restores the persona
context that was last used with each profile on selection.

SSR-safe: localStorage access is gated by isPlatformBrowser and
falls back to an empty list during server rendering.

Signed-off-by: Asitha de Silva <asithade@gmail.com>

* fix(review): address PR #622 review feedback

Address review comments from copilot[bot], coderabbitai:

- impersonation-dialog.component.ts: read AutoCompleteSelectEvent.value as the
  full RecentImpersonation object (PrimeNG emits the option object on select
  even when optionValue is configured), so personaContext is actually restored
  (per copilot[bot])
- impersonation-dialog.component.ts: clear the restored personaContext via a
  takeUntilDestroyed valueChanges subscription as soon as the typed targetUser
  diverges from the last selected recent (per coderabbitai)
- impersonation.service.ts: tighten isValidRecentImpersonation to validate
  username and the optional name/picture fields used by the dialog UI, so a
  malformed localStorage entry can't reach .toLowerCase() at filter time (per
  copilot[bot], coderabbitai)
- impersonation-dialog.component.html: drop optionValue and the empty template,
  and add showEmptyMessage=false so free-text input is accepted and no panel
  is shown when nothing matches (direct reviewer testing)
- autocomplete.component: add showEmptyMessage passthrough input

Resolves 4 review threads.

Signed-off-by: Asitha de Silva <asithade@gmail.com>

---------

Signed-off-by: Asitha de Silva <asithade@gmail.com>

Author: asithade

apps/lfx-one/src/app/shared/components/autocomplete/autocomplete.component.html

@@ -17,6 +17,7 @@
     (onClear)="onClear.emit()"
     (onBlur)="onBlur.emit()"
     [attr.data-testid]="dataTestId()"
+    [inputId]="inputId()"
     [autoOptionFocus]="autoOptionFocus()"
     [completeOnFocus]="completeOnFocus()"
     [panelStyleClass]="panelStyleClass()"
@@ -26,7 +27,9 @@
     [dataKey]="dataKey()"
     [appendTo]="appendTo()"
     [showClear]="showClear()"
-    [forceSelection]="forceSelection()">
+    [forceSelection]="forceSelection()"
+    [showEmptyMessage]="showEmptyMessage()"
+    [size]="size()">
     <!-- Empty message template -->
     @if (emptyTemplate) {
       <ng-template #empty>

apps/lfx-one/src/app/shared/components/autocomplete/autocomplete.component.ts

@@ -28,6 +28,7 @@ export class AutocompleteComponent {
   public delay = input<number>(300);
   public minLength = input<number>(1);
   public dataTestId = input<string>();
+  public inputId = input<string>();
   public optionLabel = input<string>();
   public optionValue = input<string>();
   public autoOptionFocus = input<boolean>(false);
@@ -39,6 +40,8 @@ export class AutocompleteComponent {
   public dataKey = input<string>();
   public showClear = input<boolean>(false);
   public forceSelection = input<boolean>(false);
+  public showEmptyMessage = input<boolean>(true);
+  public size = input<'small' | 'large'>('small');
 
   public readonly completeMethod = output<AutoCompleteCompleteEvent>();
   public readonly onSelect = output<AutoCompleteSelectEvent>();

apps/lfx-one/src/app/shared/components/impersonation-dialog/impersonation-dialog.component.html

@@ -13,13 +13,49 @@
   <p class="text-sm text-gray-600">Enter the email or username of the user you want to view the app as.</p>
   <div class="flex flex-col gap-1" (keydown.enter)="submit()">
     <label for="targetUser" class="text-sm font-medium text-gray-700">Email or Username</label>
-    <lfx-input-text
-      size="small"
-      [form]="targetUserForm"
-      control="targetUser"
-      placeholder="e.g. jdoe or jdoe@example.com"
-      id="targetUser"
-      dataTest="impersonation-target-input" />
+    @if (recentImpersonations().length > 0) {
+      <lfx-autocomplete
+        [form]="targetUserForm"
+        control="targetUser"
+        [suggestions]="suggestions()"
+        placeholder="e.g. jdoe or jdoe@example.com"
+        optionLabel="email"
+        [minLength]="0"
+        [showEmptyMessage]="false"
+        [dropdown]="true"
+        dropdownMode="blank"
+        size="small"
+        appendTo="body"
+        styleClass="w-full"
+        inputId="targetUser"
+        dataTestId="impersonation-target-input"
+        (completeMethod)="onSearchComplete($event)"
+        (onSelect)="onSuggestionSelected($event)">
+        <ng-template #item let-entry>
+          <div class="flex w-full items-center gap-2">
+            @if (entry.picture) {
+              <img [src]="entry.picture" [alt]="entry.name || entry.email" class="h-7 w-7 rounded-full object-cover" />
+            } @else {
+              <div class="flex h-7 w-7 items-center justify-center rounded-full bg-gray-100 text-gray-500">
+                <i class="fa-light fa-user text-xs"></i>
+              </div>
+            }
+            <div class="flex min-w-0 flex-col">
+              <span class="truncate text-sm">{{ entry.name || entry.username || entry.email }}</span>
+              <span class="truncate text-xs text-gray-500">{{ entry.email }}</span>
+            </div>
+          </div>
+        </ng-template>
+      </lfx-autocomplete>
+    } @else {
+      <lfx-input-text
+        size="small"
+        [form]="targetUserForm"
+        control="targetUser"
+        placeholder="e.g. jdoe or jdoe@example.com"
+        id="targetUser"
+        dataTest="impersonation-target-input" />
+    }
   </div>
   <div class="flex flex-col gap-1">
     <label for="personaContext" class="text-sm font-medium text-gray-700">Context (optional)</label>

apps/lfx-one/src/app/shared/components/impersonation-dialog/impersonation-dialog.component.ts

@@ -2,18 +2,21 @@
 // SPDX-License-Identifier: MIT
 
 import { Component, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { AutocompleteComponent } from '@components/autocomplete/autocomplete.component';
 import { ButtonComponent } from '@components/button/button.component';
 import { InputTextComponent } from '@components/input-text/input-text.component';
 import { SelectComponent } from '@components/select/select.component';
-import { PersonaType } from '@lfx-one/shared/interfaces';
+import { PersonaType, RecentImpersonation } from '@lfx-one/shared/interfaces';
 import { ImpersonationService } from '@services/impersonation.service';
+import { AutoCompleteCompleteEvent, AutoCompleteSelectEvent } from 'primeng/autocomplete';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
 import { take } from 'rxjs';
 
 @Component({
   selector: 'lfx-impersonation-dialog',
-  imports: [InputTextComponent, SelectComponent, ButtonComponent],
+  imports: [AutocompleteComponent, InputTextComponent, SelectComponent, ButtonComponent],
   templateUrl: './impersonation-dialog.component.html',
 })
 export class ImpersonationDialogComponent {
@@ -35,6 +38,22 @@ export class ImpersonationDialogComponent {
 
   protected loading = signal(false);
   protected error = signal('');
+  protected recentImpersonations = signal<RecentImpersonation[]>(this.impersonationService.getRecentImpersonations());
+  protected suggestions = signal<RecentImpersonation[]>(this.recentImpersonations());
+  private selectedRecentTargetUser = signal<string | null>(null);
+
+  public constructor() {
+    // Drop the auto-restored persona context as soon as the user steers the target away from
+    // the recent profile they picked — otherwise submit() would impersonate the new target
+    // under the previous profile's lens.
+    this.targetUserForm.controls.targetUser.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+      const lastSelected = this.selectedRecentTargetUser();
+      if (lastSelected && value !== lastSelected) {
+        this.selectedRecentTargetUser.set(null);
+        this.targetUserForm.controls.personaContext.setValue(null);
+      }
+    });
+  }
 
   public submit(): void {
     const target = this.targetUserForm.controls.targetUser.value.trim();
@@ -51,7 +70,15 @@ export class ImpersonationDialogComponent {
       .startImpersonation(target, personaContext)
       .pipe(take(1))
       .subscribe({
-        next: () => {
+        next: (response) => {
+          this.impersonationService.addRecentImpersonation({
+            targetUser: target,
+            email: response.targetUser.email,
+            username: response.targetUser.username,
+            name: response.targetUser.name,
+            picture: response.targetUser.picture,
+            personaContext,
+          });
           this.dialogRef.close(true);
           window.location.reload();
         },
@@ -67,4 +94,35 @@ export class ImpersonationDialogComponent {
   public cancel(): void {
     this.dialogRef.close(false);
   }
+
+  protected onSearchComplete(event: AutoCompleteCompleteEvent): void {
+    const query = (event.query ?? '').trim().toLowerCase();
+    const entries = this.recentImpersonations();
+
+    if (!query) {
+      this.suggestions.set([...entries]);
+      return;
+    }
+
+    this.suggestions.set(
+      entries.filter(
+        (r) =>
+          r.email.toLowerCase().includes(query) ||
+          r.username?.toLowerCase().includes(query) ||
+          (r.name?.toLowerCase().includes(query) ?? false) ||
+          r.targetUser.toLowerCase().includes(query)
+      )
+    );
+  }
+
+  protected onSuggestionSelected(event: AutoCompleteSelectEvent): void {
+    // p-autocomplete writes the full option object into the form on select; replace it with
+    // the targetUser string so submit() and free-text typing both see a plain string.
+    const entry = event.value as RecentImpersonation | null;
+    if (!entry || typeof entry !== 'object') return;
+
+    this.selectedRecentTargetUser.set(entry.targetUser);
+    this.targetUserForm.controls.targetUser.setValue(entry.targetUser);
+    this.targetUserForm.controls.personaContext.setValue(entry.personaContext ?? null);
+  }
 }

apps/lfx-one/src/app/shared/services/impersonation.service.ts

@@ -1,16 +1,25 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
 
+import { isPlatformBrowser } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { ImpersonationStartRequest, ImpersonationStartResponse, ImpersonationStatusResponse, PersonaType } from '@lfx-one/shared/interfaces';
+import { inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { MAX_RECENT_IMPERSONATIONS, RECENT_IMPERSONATIONS_STORAGE_KEY } from '@lfx-one/shared/constants';
+import {
+  ImpersonationStartRequest,
+  ImpersonationStartResponse,
+  ImpersonationStatusResponse,
+  PersonaType,
+  RecentImpersonation,
+} from '@lfx-one/shared/interfaces';
 import { catchError, Observable, of } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ImpersonationService {
   private readonly http = inject(HttpClient);
+  private readonly platformId = inject(PLATFORM_ID);
 
   public startImpersonation(targetUser: string, personaContext?: PersonaType | null): Observable<ImpersonationStartResponse> {
     const body: ImpersonationStartRequest = personaContext ? { targetUser, personaContext } : { targetUser };
@@ -26,4 +35,55 @@ export class ImpersonationService {
       .get<ImpersonationStatusResponse>('/api/impersonate/status')
       .pipe(catchError(() => of({ impersonating: false } as ImpersonationStatusResponse)));
   }
+
+  public getRecentImpersonations(): RecentImpersonation[] {
+    if (!isPlatformBrowser(this.platformId)) {
+      return [];
+    }
+
+    try {
+      const raw = window.localStorage.getItem(RECENT_IMPERSONATIONS_STORAGE_KEY);
+      if (!raw) {
+        return [];
+      }
+
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) {
+        return [];
+      }
+
+      return parsed.filter((entry): entry is RecentImpersonation => this.isValidRecentImpersonation(entry)).sort((a, b) => b.lastUsedAt - a.lastUsedAt);
+    } catch {
+      return [];
+    }
+  }
+
+  public addRecentImpersonation(entry: Omit<RecentImpersonation, 'lastUsedAt'>): void {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+
+    try {
+      const existing = this.getRecentImpersonations().filter((e) => e.email !== entry.email);
+      const updated: RecentImpersonation[] = [{ ...entry, lastUsedAt: Date.now() }, ...existing].slice(0, MAX_RECENT_IMPERSONATIONS);
+      window.localStorage.setItem(RECENT_IMPERSONATIONS_STORAGE_KEY, JSON.stringify(updated));
+    } catch {
+      // Ignore quota / disabled-storage errors — recent impersonations are a best-effort convenience.
+    }
+  }
+
+  private isValidRecentImpersonation(entry: unknown): entry is RecentImpersonation {
+    if (!entry || typeof entry !== 'object') {
+      return false;
+    }
+    const candidate = entry as Partial<RecentImpersonation>;
+    return (
+      typeof candidate.targetUser === 'string' &&
+      typeof candidate.email === 'string' &&
+      typeof candidate.username === 'string' &&
+      typeof candidate.lastUsedAt === 'number' &&
+      (candidate.name === undefined || typeof candidate.name === 'string') &&
+      (candidate.picture === undefined || typeof candidate.picture === 'string')
+    );
+  }
 }

packages/shared/src/constants/impersonation.constants.ts

@@ -0,0 +1,5 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+export const RECENT_IMPERSONATIONS_STORAGE_KEY = 'lfx:recent-impersonations';
+export const MAX_RECENT_IMPERSONATIONS = 5;

packages/shared/src/constants/index.ts

@@ -27,6 +27,7 @@ export * from './plausible.constants';
 export * from './chart.constants';
 export * from './chart-options.constants';
 export * from './cookie.constants';
+export * from './impersonation.constants';
 export * from './mailing-list.constants';
 export * from './primeng-theme.constants';
 export * from './poll.constants';

packages/shared/src/interfaces/impersonation.interface.ts

@@ -61,3 +61,16 @@ export interface ImpersonationStartResponse {
   impersonating: boolean;
   targetUser: ImpersonationUser;
 }
+
+/**
+ * A previously impersonated profile, persisted client-side for quick re-selection.
+ */
+export interface RecentImpersonation {
+  targetUser: string;
+  email: string;
+  username: string;
+  name?: string;
+  picture?: string;
+  personaContext?: PersonaType | null;
+  lastUsedAt: number;
+}