[PM-5578] [PM-5579] [PM-5580] [PM-5581] Send Browser State Provider (#8232)

* Replacing state service with state provider

* Documentation indicating the differences between the 2 states used.

* Creating key definition, updating comments, and modifying test cases

* Adding the key definitions tests

* Documenting the observables

* Fixing the test issue with the awaitAsync import

* Removing browser state service stuff for merge fix

* no need to redefine interface members

* Renaming to DefaultBrowserStateService

apps/browser/src/autofill/background/notification.background.spec.ts

@@ -17,7 +17,7 @@ import { CipherService } from "@bitwarden/common/vault/services/cipher.service";
 import { FolderService } from "@bitwarden/common/vault/services/folder/folder.service";
 
 import { BrowserApi } from "../../platform/browser/browser-api";
-import { BrowserStateService } from "../../platform/services/browser-state.service";
+import { DefaultBrowserStateService } from "../../platform/services/default-browser-state.service";
 import { NotificationQueueMessageType } from "../enums/notification-queue-message-type.enum";
 import { FormData } from "../services/abstractions/autofill.service";
 import AutofillService from "../services/autofill.service";
@@ -49,7 +49,7 @@ describe("NotificationBackground", () => {
   const authService = mock<AuthService>();
   const policyService = mock<PolicyService>();
   const folderService = mock<FolderService>();
-  const stateService = mock<BrowserStateService>();
+  const stateService = mock<DefaultBrowserStateService>();
   const userNotificationSettingsService = mock<UserNotificationSettingsService>();
   const domainSettingsService = mock<DomainSettingsService>();
   const environmentService = mock<EnvironmentService>();

apps/browser/src/autofill/background/overlay.background.spec.ts

@@ -33,7 +33,7 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { CipherService } from "@bitwarden/common/vault/services/cipher.service";
 
 import { BrowserApi } from "../../platform/browser/browser-api";
-import { BrowserStateService } from "../../platform/services/browser-state.service";
+import { DefaultBrowserStateService } from "../../platform/services/default-browser-state.service";
 import { BrowserPlatformUtilsService } from "../../platform/services/platform-utils/browser-platform-utils.service";
 import { AutofillService } from "../services/abstractions/autofill.service";
 import {
@@ -72,7 +72,7 @@ describe("OverlayBackground", () => {
       urls: { icons: "https://icons.bitwarden.com/" },
     }),
   );
-  const stateService = mock<BrowserStateService>();
+  const stateService = mock<DefaultBrowserStateService>();
   const autofillSettingsService = mock<AutofillSettingsService>();
   const i18nService = mock<I18nService>();
   const platformUtilsService = mock<BrowserPlatformUtilsService>();

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

@@ -211,7 +211,7 @@ import BrowserLocalStorageService from "../platform/services/browser-local-stora
 import BrowserMemoryStorageService from "../platform/services/browser-memory-storage.service";
 import BrowserMessagingPrivateModeBackgroundService from "../platform/services/browser-messaging-private-mode-background.service";
 import BrowserMessagingService from "../platform/services/browser-messaging.service";
-import { BrowserStateService } from "../platform/services/browser-state.service";
+import { DefaultBrowserStateService } from "../platform/services/default-browser-state.service";
 import I18nService from "../platform/services/i18n.service";
 import { LocalBackedSessionStorageService } from "../platform/services/local-backed-session-storage.service";
 import { BackgroundPlatformUtilsService } from "../platform/services/platform-utils/background-platform-utils.service";
@@ -466,7 +466,7 @@ export default class MainBackground {
       new MigrationBuilderService(),
     );
 
-    this.stateService = new BrowserStateService(
+    this.stateService = new DefaultBrowserStateService(
       this.storageService,
       this.secureStorageService,
       this.memoryStorageService,

apps/browser/src/platform/background/service-factories/state-service.factory.ts

@@ -10,7 +10,7 @@ import {
   TokenServiceInitOptions,
 } from "../../../auth/background/service-factories/token-service.factory";
 import { Account } from "../../../models/account";
-import { BrowserStateService } from "../../services/browser-state.service";
+import { DefaultBrowserStateService } from "../../services/default-browser-state.service";
 
 import {
   environmentServiceFactory,
@@ -46,15 +46,15 @@ export type StateServiceInitOptions = StateServiceFactoryOptions &
   MigrationRunnerInitOptions;
 
 export async function stateServiceFactory(
-  cache: { stateService?: BrowserStateService } & CachedServices,
+  cache: { stateService?: DefaultBrowserStateService } & CachedServices,
   opts: StateServiceInitOptions,
-): Promise<BrowserStateService> {
+): Promise<DefaultBrowserStateService> {
   const service = await factory(
     cache,
     "stateService",
     opts,
     async () =>
-      new BrowserStateService(
+      new DefaultBrowserStateService(
         await diskStorageServiceFactory(cache, opts),
         await secureStorageServiceFactory(cache, opts),
         await memoryStorageServiceFactory(cache, opts),

apps/browser/src/platform/decorators/session-sync-observable/browser-session.decorator.spec.ts

@@ -3,7 +3,7 @@ import { BehaviorSubject } from "rxjs";
 import { AbstractMemoryStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
 import { MemoryStorageService } from "@bitwarden/common/platform/services/memory-storage.service";
 
-import { BrowserStateService } from "../../services/browser-state.service";
+import { DefaultBrowserStateService } from "../../services/default-browser-state.service";
 
 import { browserSession } from "./browser-session.decorator";
 import { SessionStorable } from "./session-storable";
@@ -25,7 +25,7 @@ describe("browserSession decorator", () => {
   });
 
   it("should create if StateService is a constructor argument", () => {
-    const stateService = Object.create(BrowserStateService.prototype, {
+    const stateService = Object.create(DefaultBrowserStateService.prototype, {
       memoryStorageService: {
         value: Object.create(MemoryStorageService.prototype, {
           type: { value: MemoryStorageService.TYPE },
@@ -35,7 +35,7 @@ describe("browserSession decorator", () => {
 
     @browserSession
     class TestClass {
-      constructor(private stateService: BrowserStateService) {}
+      constructor(private stateService: DefaultBrowserStateService) {}
     }
 
     expect(new TestClass(stateService)).toBeDefined();

apps/browser/src/platform/services/abstractions/browser-state.service.ts

@@ -1,19 +1,5 @@
 import { StateService as BaseStateServiceAbstraction } from "@bitwarden/common/platform/abstractions/state.service";
-import { StorageOptions } from "@bitwarden/common/platform/models/domain/storage-options";
 
 import { Account } from "../../../models/account";
-import { BrowserComponentState } from "../../../models/browserComponentState";
-import { BrowserSendComponentState } from "../../../models/browserSendComponentState";
 
-export abstract class BrowserStateService extends BaseStateServiceAbstraction<Account> {
+export abstract class BrowserStateService extends BaseStateServiceAbstraction<Account> {}
-  getBrowserSendComponentState: (options?: StorageOptions) => Promise<BrowserSendComponentState>;
-  setBrowserSendComponentState: (
-    value: BrowserSendComponentState,
-    options?: StorageOptions,
-  ) => Promise<void>;
-  getBrowserSendTypeComponentState: (options?: StorageOptions) => Promise<BrowserComponentState>;
-  setBrowserSendTypeComponentState: (
-    value: BrowserComponentState,
-    options?: StorageOptions,
-  ) => Promise<void>;
-}

apps/browser/src/platform/services/browser-state.service.spec.ts

@@ -1,4 +1,5 @@
 import { mock, MockProxy } from "jest-mock-extended";
+import { firstValueFrom } from "rxjs";
 
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
@@ -12,15 +13,11 @@ import { GlobalState } from "@bitwarden/common/platform/models/domain/global-sta
 import { State } from "@bitwarden/common/platform/models/domain/state";
 import { MigrationRunner } from "@bitwarden/common/platform/services/migration-runner";
 import { mockAccountServiceWith } from "@bitwarden/common/spec";
-import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
-import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import { UserId } from "@bitwarden/common/types/guid";
 
 import { Account } from "../../models/account";
-import { BrowserComponentState } from "../../models/browserComponentState";
-import { BrowserSendComponentState } from "../../models/browserSendComponentState";
 
-import { BrowserStateService } from "./browser-state.service";
+import { DefaultBrowserStateService } from "./default-browser-state.service";
 
 // disable session syncing to just test class
 jest.mock("../decorators/session-sync-observable/");
@@ -39,7 +36,7 @@ describe("Browser State Service", () => {
   const userId = "userId" as UserId;
   const accountService = mockAccountServiceWith(userId);
 
-  let sut: BrowserStateService;
+  let sut: DefaultBrowserStateService;
 
   beforeEach(() => {
     secureStorageService = mock();
@@ -71,7 +68,7 @@ describe("Browser State Service", () => {
       const stateGetter = (key: string) => Promise.resolve(state);
       memoryStorageService.get.mockImplementation(stateGetter);
 
-      sut = new BrowserStateService(
+      sut = new DefaultBrowserStateService(
         diskStorageService,
         secureStorageService,
         memoryStorageService,
@@ -85,32 +82,17 @@ describe("Browser State Service", () => {
       );
     });
 
-    describe("getBrowserSendComponentState", () => {
+    describe("add Account", () => {
-      it("should return a BrowserSendComponentState", async () => {
+      it("should add account", async () => {
-        const sendState = new BrowserSendComponentState();
+        const newUserId = "newUserId" as UserId;
-        sendState.sends = [new SendView(), new SendView()];
+        const newAcct = new Account({
-        sendState.typeCounts = new Map<SendType, number>([
+          profile: { userId: newUserId },
-          [SendType.File, 3],
+        });
-          [SendType.Text, 5],
-        ]);
-        state.accounts[userId].send = sendState;
-        (global as any)["watch"] = state;
 
-        const actual = await sut.getBrowserSendComponentState();
+        await sut.addAccount(newAcct);
-        expect(actual).toBeInstanceOf(BrowserSendComponentState);
-        expect(actual).toMatchObject(sendState);
-      });
-    });
 
-    describe("getBrowserSendTypeComponentState", () => {
+        const accts = await firstValueFrom(sut.accounts$);
-      it("should return a BrowserComponentState", async () => {
+        expect(accts[newUserId]).toBeDefined();
-        const componentState = new BrowserComponentState();
-        componentState.scrollY = 0;
-        componentState.searchText = "test";
-        state.accounts[userId].sendType = componentState;
-
-        const actual = await sut.getBrowserSendTypeComponentState();
-        expect(actual).toStrictEqual(componentState);
       });
     });
   });

apps/browser/src/platform/services/default-browser-state.service.ts

@@ -15,17 +15,15 @@ import { MigrationRunner } from "@bitwarden/common/platform/services/migration-r
 import { StateService as BaseStateService } from "@bitwarden/common/platform/services/state.service";
 
 import { Account } from "../../models/account";
-import { BrowserComponentState } from "../../models/browserComponentState";
-import { BrowserSendComponentState } from "../../models/browserSendComponentState";
 import { BrowserApi } from "../browser/browser-api";
 import { browserSession, sessionSync } from "../decorators/session-sync-observable";
 
-import { BrowserStateService as StateServiceAbstraction } from "./abstractions/browser-state.service";
+import { BrowserStateService } from "./abstractions/browser-state.service";
 
 @browserSession
-export class BrowserStateService
+export class DefaultBrowserStateService
   extends BaseStateService<GlobalState, Account>
-  implements StateServiceAbstraction
+  implements BrowserStateService
 {
   @sessionSync({
     initializer: Account.fromJSON as any, // TODO: Remove this any when all any types are removed from Account
@@ -115,46 +113,6 @@ export class BrowserStateService
     );
   }
 
-  async getBrowserSendComponentState(options?: StorageOptions): Promise<BrowserSendComponentState> {
-    return (
-      await this.getAccount(this.reconcileOptions(options, await this.defaultInMemoryOptions()))
-    )?.send;
-  }
-
-  async setBrowserSendComponentState(
-    value: BrowserSendComponentState,
-    options?: StorageOptions,
-  ): Promise<void> {
-    const account = await this.getAccount(
-      this.reconcileOptions(options, await this.defaultInMemoryOptions()),
-    );
-    account.send = value;
-    await this.saveAccount(
-      account,
-      this.reconcileOptions(options, await this.defaultInMemoryOptions()),
-    );
-  }
-
-  async getBrowserSendTypeComponentState(options?: StorageOptions): Promise<BrowserComponentState> {
-    return (
-      await this.getAccount(this.reconcileOptions(options, await this.defaultInMemoryOptions()))
-    )?.sendType;
-  }
-
-  async setBrowserSendTypeComponentState(
-    value: BrowserComponentState,
-    options?: StorageOptions,
-  ): Promise<void> {
-    const account = await this.getAccount(
-      this.reconcileOptions(options, await this.defaultInMemoryOptions()),
-    );
-    account.sendType = value;
-    await this.saveAccount(
-      account,
-      this.reconcileOptions(options, await this.defaultInMemoryOptions()),
-    );
-  }
-
   // Overriding the base class to prevent deleting the cache on save. We register a storage listener
   // to delete the cache in the constructor above.
   protected override async saveAccountToDisk(

apps/browser/src/popup/app.component.ts

@@ -12,6 +12,7 @@ import { BrowserApi } from "../platform/browser/browser-api";
 import { ZonedMessageListenerService } from "../platform/browser/zoned-message-listener.service";
 import { BrowserStateService } from "../platform/services/abstractions/browser-state.service";
 import { ForegroundPlatformUtilsService } from "../platform/services/platform-utils/foreground-platform-utils.service";
+import { BrowserSendStateService } from "../tools/popup/services/browser-send-state.service";
 import { VaultBrowserStateService } from "../vault/services/vault-browser-state.service";
 
 import { routerTransition } from "./app-routing.animations";
@@ -38,6 +39,7 @@ export class AppComponent implements OnInit, OnDestroy {
     private i18nService: I18nService,
     private router: Router,
     private stateService: BrowserStateService,
+    private browserSendStateService: BrowserSendStateService,
     private vaultBrowserStateService: VaultBrowserStateService,
     private changeDetectorRef: ChangeDetectorRef,
     private ngZone: NgZone,
@@ -231,8 +233,8 @@ export class AppComponent implements OnInit, OnDestroy {
     await Promise.all([
       this.vaultBrowserStateService.setBrowserGroupingsComponentState(null),
       this.vaultBrowserStateService.setBrowserVaultItemsComponentState(null),
-      this.stateService.setBrowserSendComponentState(null),
+      this.browserSendStateService.setBrowserSendComponentState(null),
-      this.stateService.setBrowserSendTypeComponentState(null),
+      this.browserSendStateService.setBrowserSendTypeComponentState(null),
     ]);
   }
 }

apps/browser/src/popup/services/services.module.ts

@@ -99,11 +99,12 @@ import { BrowserEnvironmentService } from "../../platform/services/browser-envir
 import BrowserLocalStorageService from "../../platform/services/browser-local-storage.service";
 import BrowserMessagingPrivateModePopupService from "../../platform/services/browser-messaging-private-mode-popup.service";
 import BrowserMessagingService from "../../platform/services/browser-messaging.service";
-import { BrowserStateService } from "../../platform/services/browser-state.service";
+import { DefaultBrowserStateService } from "../../platform/services/default-browser-state.service";
 import I18nService from "../../platform/services/i18n.service";
 import { ForegroundPlatformUtilsService } from "../../platform/services/platform-utils/foreground-platform-utils.service";
 import { ForegroundDerivedStateProvider } from "../../platform/state/foreground-derived-state.provider";
 import { ForegroundMemoryStorageService } from "../../platform/storage/foreground-memory-storage.service";
+import { BrowserSendStateService } from "../../tools/popup/services/browser-send-state.service";
 import { FilePopoutUtilsService } from "../../tools/popup/services/file-popout-utils.service";
 import { VaultBrowserStateService } from "../../vault/services/vault-browser-state.service";
 import { VaultFilterService } from "../../vault/services/vault-filter.service";
@@ -412,7 +413,7 @@ const safeProviders: SafeProvider[] = [
       tokenService: TokenService,
       migrationRunner: MigrationRunner,
     ) => {
-      return new BrowserStateService(
+      return new DefaultBrowserStateService(
         storageService,
         secureStorageService,
         memoryStorageService,
@@ -487,6 +488,11 @@ const safeProviders: SafeProvider[] = [
     useClass: UserNotificationSettingsService,
     deps: [StateProvider],
   }),
+  safeProvider({
+    provide: BrowserSendStateService,
+    useClass: BrowserSendStateService,
+    deps: [StateProvider],
+  }),
 ];
 
 @NgModule({

apps/browser/src/tools/popup/send/send-groupings.component.ts

@@ -18,7 +18,7 @@ import { DialogService } from "@bitwarden/components";
 
 import { BrowserSendComponentState } from "../../../models/browserSendComponentState";
 import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
-import { BrowserStateService } from "../../../platform/services/abstractions/browser-state.service";
+import { BrowserSendStateService } from "../services/browser-send-state.service";
 
 const ComponentId = "SendComponent";
 
@@ -43,7 +43,7 @@ export class SendGroupingsComponent extends BaseSendComponent {
     ngZone: NgZone,
     policyService: PolicyService,
     searchService: SearchService,
-    private stateService: BrowserStateService,
+    private stateService: BrowserSendStateService,
     private router: Router,
     private syncService: SyncService,
     private changeDetectorRef: ChangeDetectorRef,

apps/browser/src/tools/popup/send/send-type.component.ts

@@ -19,7 +19,7 @@ import { DialogService } from "@bitwarden/components";
 
 import { BrowserComponentState } from "../../../models/browserComponentState";
 import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
-import { BrowserStateService } from "../../../platform/services/abstractions/browser-state.service";
+import { BrowserSendStateService } from "../services/browser-send-state.service";
 
 const ComponentId = "SendTypeComponent";
 
@@ -42,7 +42,7 @@ export class SendTypeComponent extends BaseSendComponent {
     ngZone: NgZone,
     policyService: PolicyService,
     searchService: SearchService,
-    private stateService: BrowserStateService,
+    private stateService: BrowserSendStateService,
     private route: ActivatedRoute,
     private location: Location,
     private changeDetectorRef: ChangeDetectorRef,

apps/browser/src/tools/popup/services/browser-send-state.service.spec.ts

@@ -0,0 +1,61 @@
+import {
+  FakeAccountService,
+  mockAccountServiceWith,
+} from "@bitwarden/common/../spec/fake-account-service";
+import { FakeStateProvider } from "@bitwarden/common/../spec/fake-state-provider";
+import { awaitAsync } from "@bitwarden/common/../spec/utils";
+
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { UserId } from "@bitwarden/common/types/guid";
+
+import { BrowserComponentState } from "../../../models/browserComponentState";
+import { BrowserSendComponentState } from "../../../models/browserSendComponentState";
+
+import { BrowserSendStateService } from "./browser-send-state.service";
+
+describe("Browser Send State Service", () => {
+  let stateProvider: FakeStateProvider;
+
+  let accountService: FakeAccountService;
+  let stateService: BrowserSendStateService;
+  const mockUserId = Utils.newGuid() as UserId;
+
+  beforeEach(() => {
+    accountService = mockAccountServiceWith(mockUserId);
+    stateProvider = new FakeStateProvider(accountService);
+
+    stateService = new BrowserSendStateService(stateProvider);
+  });
+
+  describe("getBrowserSendComponentState", () => {
+    it("should return BrowserSendComponentState", async () => {
+      const state = new BrowserSendComponentState();
+      state.scrollY = 0;
+      state.searchText = "test";
+      state.typeCounts = new Map<SendType, number>().set(SendType.File, 1);
+
+      await stateService.setBrowserSendComponentState(state);
+
+      await awaitAsync();
+
+      const actual = await stateService.getBrowserSendComponentState();
+      expect(actual).toStrictEqual(state);
+    });
+  });
+
+  describe("getBrowserSendTypeComponentState", () => {
+    it("should return BrowserComponentState", async () => {
+      const state = new BrowserComponentState();
+      state.scrollY = 0;
+      state.searchText = "test";
+
+      await stateService.setBrowserSendTypeComponentState(state);
+
+      await awaitAsync();
+
+      const actual = await stateService.getBrowserSendTypeComponentState();
+      expect(actual).toStrictEqual(state);
+    });
+  });
+});

apps/browser/src/tools/popup/services/browser-send-state.service.ts

@@ -0,0 +1,65 @@
+import { Observable, firstValueFrom } from "rxjs";
+
+import { ActiveUserState, StateProvider } from "@bitwarden/common/platform/state";
+
+import { BrowserComponentState } from "../../../models/browserComponentState";
+import { BrowserSendComponentState } from "../../../models/browserSendComponentState";
+
+import { BROWSER_SEND_COMPONENT, BROWSER_SEND_TYPE_COMPONENT } from "./key-definitions";
+
+/** Get or set the active user's component state for the Send browser component
+ */
+export class BrowserSendStateService {
+  /** Observable that contains the current state for active user Sends including the send data and type counts
+   *  along with the search text and scroll position
+   */
+  browserSendComponentState$: Observable<BrowserSendComponentState>;
+
+  /** Observable that contains the  current state for active user Sends that only includes the search text
+   *  and scroll position
+   */
+  browserSendTypeComponentState$: Observable<BrowserComponentState>;
+
+  private activeUserBrowserSendComponentState: ActiveUserState<BrowserSendComponentState>;
+  private activeUserBrowserSendTypeComponentState: ActiveUserState<BrowserComponentState>;
+
+  constructor(protected stateProvider: StateProvider) {
+    this.activeUserBrowserSendComponentState = this.stateProvider.getActive(BROWSER_SEND_COMPONENT);
+    this.browserSendComponentState$ = this.activeUserBrowserSendComponentState.state$;
+
+    this.activeUserBrowserSendTypeComponentState = this.stateProvider.getActive(
+      BROWSER_SEND_TYPE_COMPONENT,
+    );
+    this.browserSendTypeComponentState$ = this.activeUserBrowserSendTypeComponentState.state$;
+  }
+
+  /** Get the active user's browser send component state
+   *  @returns { BrowserSendComponentState } contains the sends and type counts along with the scroll position and search text for the
+   *  send component on the browser
+   */
+  async getBrowserSendComponentState(): Promise<BrowserSendComponentState> {
+    return await firstValueFrom(this.browserSendComponentState$);
+  }
+
+  /** Set the active user's browser send component state
+   *  @param { BrowserSendComponentState } value sets the sends and type counts along with the scroll position and search text for
+   *  the send component on the browser
+   */
+  async setBrowserSendComponentState(value: BrowserSendComponentState): Promise<void> {
+    await this.activeUserBrowserSendComponentState.update(() => value);
+  }
+
+  /** Get the active user's browser component state
+   *  @returns { BrowserComponentState } contains the scroll position and search text for the sends menu on the browser
+   */
+  async getBrowserSendTypeComponentState(): Promise<BrowserComponentState> {
+    return await firstValueFrom(this.browserSendTypeComponentState$);
+  }
+
+  /** Set the active user's browser component state
+   *  @param { BrowserComponentState } value set the scroll position and search text for the send component on the browser
+   */
+  async setBrowserSendTypeComponentState(value: BrowserComponentState): Promise<void> {
+    await this.activeUserBrowserSendTypeComponentState.update(() => value);
+  }
+}

apps/browser/src/tools/popup/services/key-definitions.spec.ts

@@ -0,0 +1,40 @@
+import { Jsonify } from "type-fest";
+
+import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+
+import { BrowserSendComponentState } from "../../../models/browserSendComponentState";
+
+import { BROWSER_SEND_COMPONENT, BROWSER_SEND_TYPE_COMPONENT } from "./key-definitions";
+
+describe("Key definitions", () => {
+  describe("BROWSER_SEND_COMPONENT", () => {
+    it("should deserialize BrowserSendComponentState", () => {
+      const keyDef = BROWSER_SEND_COMPONENT;
+
+      const expectedState = {
+        typeCounts: new Map<SendType, number>(),
+      };
+
+      const result = keyDef.deserializer(
+        JSON.parse(JSON.stringify(expectedState)) as Jsonify<BrowserSendComponentState>,
+      );
+
+      expect(result).toEqual(expectedState);
+    });
+  });
+
+  describe("BROWSER_SEND_TYPE_COMPONENT", () => {
+    it("should deserialize BrowserComponentState", () => {
+      const keyDef = BROWSER_SEND_TYPE_COMPONENT;
+
+      const expectedState = {
+        scrollY: 0,
+        searchText: "test",
+      };
+
+      const result = keyDef.deserializer(JSON.parse(JSON.stringify(expectedState)));
+
+      expect(result).toEqual(expectedState);
+    });
+  });
+});

apps/browser/src/tools/popup/services/key-definitions.ts

@@ -0,0 +1,23 @@
+import { Jsonify } from "type-fest";
+
+import { BROWSER_SEND_MEMORY, KeyDefinition } from "@bitwarden/common/platform/state";
+
+import { BrowserComponentState } from "../../../models/browserComponentState";
+import { BrowserSendComponentState } from "../../../models/browserSendComponentState";
+
+export const BROWSER_SEND_COMPONENT = new KeyDefinition<BrowserSendComponentState>(
+  BROWSER_SEND_MEMORY,
+  "browser_send_component",
+  {
+    deserializer: (obj: Jsonify<BrowserSendComponentState>) =>
+      BrowserSendComponentState.fromJSON(obj),
+  },
+);
+
+export const BROWSER_SEND_TYPE_COMPONENT = new KeyDefinition<BrowserComponentState>(
+  BROWSER_SEND_MEMORY,
+  "browser_send_type_component",
+  {
+    deserializer: (obj: Jsonify<BrowserComponentState>) => BrowserComponentState.fromJSON(obj),
+  },
+);

libs/common/src/platform/state/state-definitions.ts

@@ -102,6 +102,7 @@ export const SM_ONBOARDING_DISK = new StateDefinition("smOnboarding", "disk", {
 
 export const GENERATOR_DISK = new StateDefinition("generator", "disk");
 export const GENERATOR_MEMORY = new StateDefinition("generator", "memory");
+export const BROWSER_SEND_MEMORY = new StateDefinition("sendBrowser", "memory");
 export const EVENT_COLLECTION_DISK = new StateDefinition("eventCollection", "disk");
 export const SEND_DISK = new StateDefinition("encryptedSend", "disk", {
   web: "memory",