[PM-3530] browser extension view cache

apps/browser/src/background/main.background.ts

@@ -577,6 +577,7 @@ export default class MainBackground {
     );
 
     this.popupViewCacheBackgroundService = new PopupViewCacheBackgroundService(
+      messageListener,
       this.globalStateProvider,
     );
 

apps/browser/src/platform/popup/view-cache/popup-view-cache.service.ts

@@ -0,0 +1,136 @@
+import {
+  DestroyRef,
+  effect,
+  inject,
+  Injectable,
+  Injector,
+  signal,
+  WritableSignal,
+} from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormGroup } from "@angular/forms";
+import { NavigationEnd, Router } from "@angular/router";
+import { filter, firstValueFrom, skip } from "rxjs";
+import { Jsonify } from "type-fest";
+
+import {
+  FormCacheOptions,
+  SignalCacheOptions,
+  ViewCacheService,
+} from "@bitwarden/angular/platform/abstractions/view-cache.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { MessageSender } from "@bitwarden/common/platform/messaging";
+import { GlobalStateProvider } from "@bitwarden/common/platform/state";
+
+import {
+  ClEAR_VIEW_CACHE_COMMAND,
+  POPUP_VIEW_CACHE_KEY,
+  SAVE_VIEW_CACHE_COMMAND,
+} from "../../services/popup-view-cache-background.service";
+
+/**
+ * Popup implementation of {@link ViewCacheService}.
+ *
+ * Persists user changes between popup open and close
+ */
+@Injectable({
+  providedIn: "root",
+})
+export class PopupViewCacheService implements ViewCacheService {
+  private configService = inject(ConfigService);
+  private globalStateProvider = inject(GlobalStateProvider);
+  private messageSender = inject(MessageSender);
+  private router = inject(Router);
+
+  private featureEnabled: boolean;
+
+  private _cache: Record<string, string>;
+  private get cache(): Record<string, string> {
+    if (!this._cache) {
+      throw new Error("Dirty View Cache not initialized");
+    }
+    return this._cache;
+  }
+
+  /**
+   * Initialize the service. This should only be called once.
+   */
+  async init() {
+    this.featureEnabled = await this.configService.getFeatureFlag(FeatureFlag.PersistPopupView);
+    const initialState = this.featureEnabled
+      ? await firstValueFrom(this.globalStateProvider.get(POPUP_VIEW_CACHE_KEY).state$)
+      : {};
+    this._cache = Object.freeze(initialState ?? {});
+
+    this.router.events
+      .pipe(
+        filter((e) => e instanceof NavigationEnd),
+        /** Skip the first navigation triggered by `popupRouterCacheGuard` */
+        skip(1),
+      )
+      .subscribe(() => this.clearState());
+  }
+
+  /**
+   * @see {@link ViewCacheService.signal}
+   */
+  signal<T>(options: SignalCacheOptions<T>): WritableSignal<T> {
+    const {
+      deserializer = (v: Jsonify<T>): T => v as T,
+      key,
+      injector = inject(Injector),
+      initialValue,
+    } = options;
+    const cachedValue = this.cache[key] ? deserializer(JSON.parse(this.cache[key])) : initialValue;
+    const _signal = signal(cachedValue);
+
+    effect(
+      () => {
+        this.updateState(key, JSON.stringify(_signal()));
+      },
+      { injector },
+    );
+
+    return _signal;
+  }
+
+  /**
+   * @see {@link ViewCacheService.formGroup}
+   */
+  formGroup<TFormGroup extends FormGroup>(options: FormCacheOptions<TFormGroup>): TFormGroup {
+    const { control, injector } = options;
+
+    const _signal = this.signal({
+      ...options,
+      initialValue: control.getRawValue(),
+    });
+
+    const value = _signal();
+    if (value !== undefined && JSON.stringify(value) !== JSON.stringify(control.getRawValue())) {
+      control.setValue(value);
+      control.markAsDirty();
+    }
+
+    control.valueChanges.pipe(takeUntilDestroyed(injector?.get(DestroyRef))).subscribe(() => {
+      _signal.set(control.getRawValue());
+    });
+
+    return control;
+  }
+
+  private updateState(key: string, value: string) {
+    if (!this.featureEnabled) {
+      return;
+    }
+
+    this.messageSender.send(SAVE_VIEW_CACHE_COMMAND, {
+      key,
+      value,
+    });
+  }
+
+  private clearState() {
+    this.messageSender.send(ClEAR_VIEW_CACHE_COMMAND, {});
+  }
+}

apps/browser/src/platform/popup/view-cache/popup-view-cache.spec.ts

@@ -0,0 +1,224 @@
+import { Component, inject, Injector } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { FormControl, FormGroup } from "@angular/forms";
+import { Router } from "@angular/router";
+import { RouterTestingModule } from "@angular/router/testing";
+import { MockProxy, mock } from "jest-mock-extended";
+
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { MessageSender } from "@bitwarden/common/platform/messaging";
+import { GlobalStateProvider } from "@bitwarden/common/platform/state";
+import { FakeGlobalState, FakeGlobalStateProvider } from "@bitwarden/common/spec";
+
+import {
+  ClEAR_VIEW_CACHE_COMMAND,
+  POPUP_VIEW_CACHE_KEY,
+  SAVE_VIEW_CACHE_COMMAND,
+} from "../../services/popup-view-cache-background.service";
+
+import { PopupViewCacheService } from "./popup-view-cache.service";
+
+@Component({ template: "" })
+export class EmptyComponent {}
+
+@Component({ template: "" })
+export class TestComponent {
+  private viewCacheService = inject(PopupViewCacheService);
+
+  formGroup = this.viewCacheService.formGroup({
+    key: "test-form-cache",
+    control: new FormGroup({
+      name: new FormControl("initial name"),
+    }),
+  });
+
+  signal = this.viewCacheService.signal({
+    key: "test-signal",
+    initialValue: "initial signal",
+  });
+}
+
+describe("popup view cache", () => {
+  const configServiceMock = mock<ConfigService>();
+  let testBed: TestBed;
+  let service: PopupViewCacheService;
+  let fakeGlobalState: FakeGlobalState<Record<string, string>>;
+  let messageSenderMock: MockProxy<MessageSender>;
+  let router: Router;
+
+  const initServiceWithState = async (state: Record<string, string>) => {
+    await fakeGlobalState.update(() => state);
+    await service.init();
+  };
+
+  beforeEach(async () => {
+    jest.spyOn(configServiceMock, "getFeatureFlag").mockResolvedValue(true);
+    messageSenderMock = mock<MessageSender>();
+
+    const fakeGlobalStateProvider = new FakeGlobalStateProvider();
+    fakeGlobalState = fakeGlobalStateProvider.getFake(POPUP_VIEW_CACHE_KEY);
+
+    testBed = TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule.withRoutes([
+          { path: "a", component: EmptyComponent },
+          { path: "b", component: EmptyComponent },
+        ]),
+      ],
+      providers: [
+        { provide: GlobalStateProvider, useValue: fakeGlobalStateProvider },
+        { provide: MessageSender, useValue: messageSenderMock },
+        { provide: ConfigService, useValue: configServiceMock },
+      ],
+    });
+
+    await testBed.compileComponents();
+
+    router = testBed.inject(Router);
+    service = testBed.inject(PopupViewCacheService);
+  });
+
+  it("should initialize signal when ran within an injection context", async () => {
+    await initServiceWithState({});
+
+    const signal = TestBed.runInInjectionContext(() =>
+      service.signal({
+        key: "foo-123",
+        initialValue: "foo",
+      }),
+    );
+
+    expect(signal()).toBe("foo");
+  });
+
+  it("should initialize signal when provided an injector", async () => {
+    await initServiceWithState({});
+
+    const injector = TestBed.inject(Injector);
+
+    const signal = service.signal({
+      key: "foo-123",
+      initialValue: "foo",
+      injector,
+    });
+
+    expect(signal()).toBe("foo");
+  });
+
+  it("should initialize signal from state", async () => {
+    await initServiceWithState({ "foo-123": JSON.stringify("bar") });
+
+    const injector = TestBed.inject(Injector);
+
+    const signal = service.signal({
+      key: "foo-123",
+      initialValue: "foo",
+      injector,
+    });
+
+    expect(signal()).toBe("bar");
+  });
+
+  it("should initialize form from state", async () => {
+    await initServiceWithState({ "test-form-cache": JSON.stringify({ name: "baz" }) });
+
+    const fixture = TestBed.createComponent(TestComponent);
+    const component = fixture.componentRef.instance;
+    expect(component.formGroup.value.name).toBe("baz");
+    expect(component.formGroup.dirty).toBe(true);
+  });
+
+  it("should not modify form when empty", async () => {
+    await initServiceWithState({});
+
+    const fixture = TestBed.createComponent(TestComponent);
+    const component = fixture.componentRef.instance;
+    expect(component.formGroup.value.name).toBe("initial name");
+    expect(component.formGroup.dirty).toBe(false);
+  });
+
+  it("should utilize deserializer", async () => {
+    await initServiceWithState({ "foo-123": JSON.stringify("bar") });
+
+    const injector = TestBed.inject(Injector);
+
+    const signal = service.signal({
+      key: "foo-123",
+      initialValue: "foo",
+      injector,
+      deserializer: (jsonValue) => "test",
+    });
+
+    expect(signal()).toBe("test");
+  });
+
+  it("should not utilize deserializer when empty", async () => {
+    await initServiceWithState({});
+
+    const injector = TestBed.inject(Injector);
+
+    const signal = service.signal({
+      key: "foo-123",
+      initialValue: "foo",
+      injector,
+      deserializer: (jsonValue) => "test",
+    });
+
+    expect(signal()).toBe("foo");
+  });
+
+  it("should send signal updates to message sender", async () => {
+    await initServiceWithState({});
+
+    const fixture = TestBed.createComponent(TestComponent);
+    const component = fixture.componentRef.instance;
+    component.signal.set("Foobar");
+    fixture.detectChanges();
+
+    expect(messageSenderMock.send).toHaveBeenCalledWith(SAVE_VIEW_CACHE_COMMAND, {
+      key: "test-signal",
+      value: JSON.stringify("Foobar"),
+    });
+  });
+
+  it("should send form updates to message sender", async () => {
+    await initServiceWithState({});
+
+    const fixture = TestBed.createComponent(TestComponent);
+    const component = fixture.componentRef.instance;
+    component.formGroup.controls.name.setValue("Foobar");
+    fixture.detectChanges();
+
+    expect(messageSenderMock.send).toHaveBeenCalledWith(SAVE_VIEW_CACHE_COMMAND, {
+      key: "test-form-cache",
+      value: JSON.stringify({ name: "Foobar" }),
+    });
+  });
+
+  it("should clear on 2nd navigation", async () => {
+    await initServiceWithState({});
+
+    await router.navigate(["a"]);
+    expect(messageSenderMock.send).toHaveBeenCalledTimes(0);
+
+    await router.navigate(["b"]);
+    expect(messageSenderMock.send).toHaveBeenCalledWith(ClEAR_VIEW_CACHE_COMMAND, {});
+  });
+
+  it("should ignore cached values when feature flag is off", async () => {
+    jest.spyOn(configServiceMock, "getFeatureFlag").mockResolvedValue(false);
+
+    await initServiceWithState({ "foo-123": JSON.stringify("bar") });
+
+    const injector = TestBed.inject(Injector);
+
+    const signal = service.signal({
+      key: "foo-123",
+      initialValue: "foo",
+      injector,
+    });
+
+    // The cached state is ignored
+    expect(signal()).toBe("foo");
+  });
+});