[AC-2436] Show unassigned items banner in browser (#8656)

* Boostrap basic banner, show for all admins

* Remove UI banner, fix method calls

* Invert showBanner -> hideBanner

* Add api call

* Minor tweaks and wording

* Change to active user state

* Add tests

* Fix mixed up names

* Simplify logic

* Add feature flag

* Do not clear on logout

* Show banner in browser as well

* Update apps/browser/src/_locales/en/messages.json

* Update copy

---------

Co-authored-by: Addison Beck <github@addisonbeck.com>
Co-authored-by: Addison Beck <hello@addisonbeck.com>

libs/angular/src/services/unassigned-items-banner.service.spec.ts

@@ -0,0 +1,53 @@
+import { MockProxy, mock } from "jest-mock-extended";
+import { firstValueFrom, skip } from "rxjs";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { FakeStateProvider, mockAccountServiceWith } from "@bitwarden/common/spec";
+import { UserId } from "@bitwarden/common/types/guid";
+
+import { SHOW_BANNER_KEY, UnassignedItemsBannerService } from "./unassigned-items-banner.service";
+
+describe("UnassignedItemsBanner", () => {
+  let stateProvider: FakeStateProvider;
+  let apiService: MockProxy<ApiService>;
+
+  const sutFactory = () => new UnassignedItemsBannerService(stateProvider, apiService);
+
+  beforeEach(() => {
+    const fakeAccountService = mockAccountServiceWith("userId" as UserId);
+    stateProvider = new FakeStateProvider(fakeAccountService);
+    apiService = mock();
+  });
+
+  it("shows the banner if showBanner local state is true", async () => {
+    const showBanner = stateProvider.activeUser.getFake(SHOW_BANNER_KEY);
+    showBanner.nextState(true);
+
+    const sut = sutFactory();
+    expect(await firstValueFrom(sut.showBanner$)).toBe(true);
+    expect(apiService.getShowUnassignedCiphersBanner).not.toHaveBeenCalled();
+  });
+
+  it("does not show the banner if showBanner local state is false", async () => {
+    const showBanner = stateProvider.activeUser.getFake(SHOW_BANNER_KEY);
+    showBanner.nextState(false);
+
+    const sut = sutFactory();
+    expect(await firstValueFrom(sut.showBanner$)).toBe(false);
+    expect(apiService.getShowUnassignedCiphersBanner).not.toHaveBeenCalled();
+  });
+
+  it("fetches from server if local state has not been set yet", async () => {
+    apiService.getShowUnassignedCiphersBanner.mockResolvedValue(true);
+
+    const showBanner = stateProvider.activeUser.getFake(SHOW_BANNER_KEY);
+    showBanner.nextState(undefined);
+
+    const sut = sutFactory();
+    // skip first value so we get the recomputed value after the server call
+    expect(await firstValueFrom(sut.showBanner$.pipe(skip(1)))).toBe(true);
+    // Expect to have updated local state
+    expect(await firstValueFrom(showBanner.state$)).toBe(true);
+    expect(apiService.getShowUnassignedCiphersBanner).toHaveBeenCalledTimes(1);
+  });
+});

libs/angular/src/services/unassigned-items-banner.service.ts

@@ -0,0 +1,46 @@
+import { Injectable } from "@angular/core";
+import { EMPTY, concatMap } from "rxjs";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import {
+  StateProvider,
+  UNASSIGNED_ITEMS_BANNER_DISK,
+  UserKeyDefinition,
+} from "@bitwarden/common/platform/state";
+
+export const SHOW_BANNER_KEY = new UserKeyDefinition<boolean>(
+  UNASSIGNED_ITEMS_BANNER_DISK,
+  "showBanner",
+  {
+    deserializer: (b) => b,
+    clearOn: [],
+  },
+);
+
+/** Displays a banner that tells users how to move their unassigned items into a collection. */
+@Injectable({ providedIn: "root" })
+export class UnassignedItemsBannerService {
+  private _showBanner = this.stateProvider.getActive(SHOW_BANNER_KEY);
+
+  showBanner$ = this._showBanner.state$.pipe(
+    concatMap(async (showBanner) => {
+      // null indicates that the user has not seen or dismissed the banner yet - get the flag from server
+      if (showBanner == null) {
+        const showBannerResponse = await this.apiService.getShowUnassignedCiphersBanner();
+        await this._showBanner.update(() => showBannerResponse);
+        return EMPTY; // complete the inner observable without emitting any value; the update on the previous line will trigger another run
+      }
+
+      return showBanner;
+    }),
+  );
+
+  constructor(
+    private stateProvider: StateProvider,
+    private apiService: ApiService,
+  ) {}
+
+  async hideBanner() {
+    await this._showBanner.update(() => false);
+  }
+}