[PM-9111] Extension: persist add/edit form

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

@@ -131,6 +131,7 @@ export class PopupViewCacheService implements ViewCacheService {
   }
 
   private clearState() {
+    this._cache = {}; // clear local cache
     this.messageSender.send(ClEAR_VIEW_CACHE_COMMAND, {});
   }
 }

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

@@ -196,13 +196,15 @@ describe("popup view cache", () => {
   });
 
   it("should clear on 2nd navigation", async () => {
-    await initServiceWithState({});
+    await initServiceWithState({ temp: "state" });
 
     await router.navigate(["a"]);
     expect(messageSenderMock.send).toHaveBeenCalledTimes(0);
+    expect(service["_cache"]).toEqual({ temp: "state" });
 
     await router.navigate(["b"]);
     expect(messageSenderMock.send).toHaveBeenCalledWith(ClEAR_VIEW_CACHE_COMMAND, {});
+    expect(service["_cache"]).toEqual({});
   });
 
   it("should ignore cached values when feature flag is off", async () => {

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

@@ -58,6 +58,11 @@
       )
       .subscribe();
 
+    this.messageListener
+      .messages$(ClEAR_VIEW_CACHE_COMMAND)
+      .pipe(concatMap(() => this.popupViewCacheState.update(() => null)))
+      .subscribe();
+
     merge(
       // on tab changed, excluding extension tabs
       fromChromeEvent(chrome.tabs.onActivated).pipe(

libs/common/src/enums/feature-flag.enum.ts

@@ -40,6 +40,7 @@ export enum FeatureFlag {
   NewDeviceVerificationPermanentDismiss = "new-device-permanent-dismiss",
   DisableFreeFamiliesSponsorship = "PM-12274-disable-free-families-sponsorship",
   PM11360RemoveProviderExportPermission = "pm-11360-remove-provider-export-permission",
+  PM9111ExtensionPersistAddEditForm = "pm-9111-extension-persist-add-edit-form",
 }
 
 export type AllowedFeatureFlagTypes = boolean | number | string;
@@ -90,6 +91,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.NewDeviceVerificationPermanentDismiss]: FALSE,
   [FeatureFlag.DisableFreeFamiliesSponsorship]: FALSE,
   [FeatureFlag.PM11360RemoveProviderExportPermission]: FALSE,
+  [FeatureFlag.PM9111ExtensionPersistAddEditForm]: FALSE,
 } satisfies Record<FeatureFlag, AllowedFeatureFlagTypes>;
 
 export type DefaultFeatureFlagValueType = typeof DefaultFeatureFlagValue;

libs/vault/src/cipher-form/cipher-form-container.ts

@@ -12,7 +12,6 @@ import { SshKeySectionComponent } from "./components/sshkey-section/sshkey-secti
 
 /**
  * The complete form for a cipher. Includes all the sub-forms from their respective section components.
- * TODO: Add additional form sections as they are implemented.
  */
 export type CipherForm = {
   itemDetails?: ItemDetailsSectionComponent["itemDetailsForm"];
@@ -55,4 +54,12 @@ export abstract class CipherFormContainer {
    * @param updateFn - A function that takes the current cipherView and returns the updated cipherView
    */
   abstract patchCipher(updateFn: (current: CipherView) => CipherView): void;
+
+  /**
+   * Returns initial values for the CipherView, either from the config or the cached cipher
+   */
+  abstract getInitialCipherView(): CipherView | null;
+
+  /** Returns true when the `CipherFormContainer` was initialized with a cached cipher available. */
+  abstract initializedWithCachedCipher(): boolean;
 }

libs/vault/src/cipher-form/cipher-form.stories.ts

@@ -1,4 +1,4 @@
-import { importProvidersFrom } from "@angular/core";
+import { importProvidersFrom, signal } from "@angular/core";
 import { action } from "@storybook/addon-actions";
 import {
   applicationConfig,
@@ -10,6 +10,7 @@
 import { BehaviorSubject } from "rxjs";
 
 import { CollectionView } from "@bitwarden/admin-console/common";
+import { ViewCacheService } from "@bitwarden/angular/platform/abstractions/view-cache.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
@@ -18,6 +19,7 @@
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
 import { ClientType } from "@bitwarden/common/enums";
 import { UriMatchStrategy } from "@bitwarden/common/models/domain/domain-service";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
@@ -38,6 +40,7 @@
 import { TotpCaptureService } from "./abstractions/totp-capture.service";
 import { CipherFormModule } from "./cipher-form.module";
 import { CipherFormComponent } from "./components/cipher-form.component";
+import { CipherFormCacheService } from "./services/default-cipher-form-cache.service";
 
 const defaultConfig: CipherFormConfig = {
   mode: "add",
@@ -190,6 +193,25 @@
             activeAccount$: new BehaviorSubject({ email: "[email protected]" }),
           },
         },
+        {
+          provide: CipherFormCacheService,
+          useValue: {
+            getCachedCipherView: (): null => null,
+            initializedWithValue: false,
+          },
+        },
+        {
+          provide: ViewCacheService,
+          useValue: {
+            signal: () => signal(null),
+          },
+        },
+        {
+          provide: ConfigService,
+          useValue: {
+            getFeatureFlag: () => Promise.resolve(false),
+          },
+        },
       ],
     }),
     componentWrapperDecorator(

libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.spec.ts

@@ -27,9 +27,12 @@ describe("AdditionalOptionsSectionComponent", () => {
   let passwordRepromptService: MockProxy<PasswordRepromptService>;
   let passwordRepromptEnabled$: BehaviorSubject<boolean>;
 
+  const getInitialCipherView = jest.fn(() => null);
+
   beforeEach(async () => {
-    cipherFormProvider = mock<CipherFormContainer>();
+    getInitialCipherView.mockClear();
 
+    cipherFormProvider = mock<CipherFormContainer>({ getInitialCipherView });
     passwordRepromptService = mock<PasswordRepromptService>();
     passwordRepromptEnabled$ = new BehaviorSubject(true);
     passwordRepromptService.enabled$ = passwordRepromptEnabled$;
@@ -94,11 +97,11 @@ describe("AdditionalOptionsSectionComponent", () => {
     expect(component.additionalOptionsForm.disabled).toBe(true);
   });
 
-  it("initializes 'additionalOptionsForm' with original cipher view values", () => {
-    (cipherFormProvider.originalCipherView as any) = {
+  it("initializes 'additionalOptionsForm' from `getInitialCipherValue`", () => {
+    getInitialCipherView.mockReturnValueOnce({
       notes: "original notes",
       reprompt: 1,
-    } as CipherView;
+    } as CipherView);
 
     component.ngOnInit();
 

libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.ts

@@ -75,11 +75,12 @@ export class AdditionalOptionsSectionComponent implements OnInit {
   }
 
   ngOnInit() {
-    if (this.cipherFormContainer.originalCipherView) {
+    const prefillCipher = this.cipherFormContainer.getInitialCipherView();
+
+    if (prefillCipher) {
       this.additionalOptionsForm.patchValue({
-        notes: this.cipherFormContainer.originalCipherView.notes,
-        reprompt:
-          this.cipherFormContainer.originalCipherView.reprompt === CipherRepromptType.Password,
+        notes: prefillCipher.notes,
+        reprompt: prefillCipher.reprompt === CipherRepromptType.Password,
       });
     }
 

libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.spec.ts

@@ -25,9 +25,11 @@ describe("AutofillOptionsComponent", () => {
   let domainSettingsService: MockProxy<DomainSettingsService>;
   let autofillSettingsService: MockProxy<AutofillSettingsServiceAbstraction>;
   let platformUtilsService: MockProxy<PlatformUtilsService>;
+  const getInitialCipherView = jest.fn(() => null);
 
   beforeEach(async () => {
-    cipherFormContainer = mock<CipherFormContainer>();
+    getInitialCipherView.mockClear();
+    cipherFormContainer = mock<CipherFormContainer>({ getInitialCipherView });
     liveAnnouncer = mock<LiveAnnouncer>();
     platformUtilsService = mock<PlatformUtilsService>();
     domainSettingsService = mock<DomainSettingsService>();
@@ -107,12 +109,14 @@ describe("AutofillOptionsComponent", () => {
     existingLogin.uri = "https://example.com";
     existingLogin.match = UriMatchStrategy.Exact;
 
-    (cipherFormContainer.originalCipherView as CipherView) = new CipherView();
-    cipherFormContainer.originalCipherView.login = {
+    const cipher = new CipherView();
+    cipher.login = {
       autofillOnPageLoad: true,
       uris: [existingLogin],
     } as LoginView;
 
+    getInitialCipherView.mockReturnValueOnce(cipher);
+
     fixture.detectChanges();
 
     expect(component.autofillOptionsForm.value.uris).toEqual([
@@ -138,12 +142,14 @@ describe("AutofillOptionsComponent", () => {
     existingLogin.uri = "https://example.com";
     existingLogin.match = UriMatchStrategy.Exact;
 
-    (cipherFormContainer.originalCipherView as CipherView) = new CipherView();
-    cipherFormContainer.originalCipherView.login = {
+    const cipher = new CipherView();
+    cipher.login = {
       autofillOnPageLoad: true,
       uris: [existingLogin],
     } as LoginView;
 
+    getInitialCipherView.mockReturnValueOnce(cipher);
+
     fixture.detectChanges();
 
     expect(component.autofillOptionsForm.value.uris).toEqual([
@@ -159,12 +165,14 @@ describe("AutofillOptionsComponent", () => {
     existingLogin.uri = "https://example.com";
     existingLogin.match = UriMatchStrategy.Exact;
 
-    (cipherFormContainer.originalCipherView as CipherView) = new CipherView();
-    cipherFormContainer.originalCipherView.login = {
+    const cipher = new CipherView();
+    cipher.login = {
       autofillOnPageLoad: true,
       uris: [existingLogin],
     } as LoginView;
 
+    getInitialCipherView.mockReturnValueOnce(cipher);
+
     fixture.detectChanges();
 
     expect(component.autofillOptionsForm.value.uris).toEqual([

libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.ts

@@ -128,8 +128,9 @@ export class AutofillOptionsComponent implements OnInit {
   }
 
   ngOnInit() {
-    if (this.cipherFormContainer.originalCipherView?.login) {
-      this.initFromExistingCipher(this.cipherFormContainer.originalCipherView.login);
+    const prefillCipher = this.cipherFormContainer.getInitialCipherView();
+    if (prefillCipher) {
+      this.initFromExistingCipher(prefillCipher.login);
     } else {
       this.initNewCipher();
     }

libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.spec.ts

@@ -20,8 +20,10 @@ describe("CardDetailsSectionComponent", () => {
   let registerChildFormSpy: jest.SpyInstance;
   let patchCipherSpy: jest.SpyInstance;
 
+  const getInitialCipherView = jest.fn(() => null);
+
   beforeEach(async () => {
-    cipherFormProvider = mock<CipherFormContainer>();
+    cipherFormProvider = mock<CipherFormContainer>({ getInitialCipherView });
     registerChildFormSpy = jest.spyOn(cipherFormProvider, "registerChildForm");
     patchCipherSpy = jest.spyOn(cipherFormProvider, "patchCipher");
 
@@ -94,7 +96,7 @@ describe("CardDetailsSectionComponent", () => {
     expect(component.cardDetailsForm.disabled).toBe(true);
   });
 
-  it("initializes `cardDetailsForm` with current values", () => {
+  it("initializes `cardDetailsForm` from `getInitialCipherValue`", () => {
     const cardholderName = "Ron Burgundy";
     const number = "4242 4242 4242 4242";
     const code = "619";
@@ -105,9 +107,7 @@ describe("CardDetailsSectionComponent", () => {
     cardView.code = code;
     cardView.brand = "Visa";
 
-    component.originalCipherView = {
-      card: cardView,
-    } as CipherView;
+    getInitialCipherView.mockReturnValueOnce({ card: cardView });
 
     component.ngOnInit();
 

libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.ts

@@ -134,8 +134,10 @@ export class CardDetailsSectionComponent implements OnInit {
   }
 
   ngOnInit() {
-    if (this.originalCipherView?.card) {
-      this.setInitialValues();
+    const prefillCipher = this.cipherFormContainer.getInitialCipherView();
+
+    if (prefillCipher) {
+      this.setInitialValues(prefillCipher);
     }
 
     if (this.disabled) {
@@ -170,8 +172,8 @@ export class CardDetailsSectionComponent implements OnInit {
   }
 
   /** Set form initial form values from the current cipher */
-  private setInitialValues() {
-    const { cardholderName, number, brand, expMonth, expYear, code } = this.originalCipherView.card;
+  private setInitialValues(cipherView: CipherView) {
+    const { cardholderName, number, brand, expMonth, expYear, code } = cipherView.card;
 
     this.cardDetailsForm.setValue({
       cardholderName: cardholderName,