[AC-2436] Show unassigned items banner in browser

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

@@ -3005,5 +3005,8 @@
   },
   "passkeyRemoved": {
     "message": "Passkey removed"
+  },
+  "unassignedItemsBanner": {
+    "message": "Notice: Unassigned organization items are no longer visible in your All Vaults view across devices and are now only accessible via the Admin Console. Assign these items to a collection from the Admin Console to make them visible."
   }
 }

apps/browser/src/vault/popup/components/vault/current-tab.component.html

@@ -36,19 +36,32 @@ <h1 class="sr-only">{{ "currentTab" | i18n }}</h1>
   </div>
   <ng-container *ngIf="loaded">
     <app-vault-select (onVaultSelectionChanged)="load()"></app-vault-select>
-    <app-callout *ngIf="showHowToAutofill" type="info" title="{{ 'howToAutofill' | i18n }}">
-      <p>{{ autofillCalloutText }}</p>
+    <app-callout
+      *ngIf="
+        (unassignedItemsBannerEnabled$ | async) &&
+        (unassignedItemsBannerService.showBanner$ | async)
+      "
+      type="info"
+    >
+      <p>
+        {{ "unassignedItemsBanner" | i18n }}
+        <a
+          href="https://bitwarden.com/help/unassigned-vault-items-moved-to-admin-console"
+          bitLink
+          linkType="contrast"
+          target="_blank"
+          rel="noreferrer"
+          >{{ "learnMore" | i18n }}</a
+        >
+      </p>
       <button
         type="button"
         class="btn primary callout-half"
         appStopClick
-        (click)="dismissCallout()"
+        (click)="unassignedItemsBannerService.hideBanner()"
       >
         {{ "gotIt" | i18n }}
       </button>
-      <button type="button" class="btn callout-half" appStopClick (click)="goToSettings()">
-        {{ "autofillSettings" | i18n }}
-      </button>
     </app-callout>
     <div class="box list" *ngIf="loginCiphers">
       <h2 class="box-header">

apps/browser/src/vault/popup/components/vault/current-tab.component.ts

@@ -3,11 +3,14 @@
 import { Subject, firstValueFrom } from "rxjs";
 import { debounceTime, takeUntil } from "rxjs/operators";
 
+import { UnassignedItemsBannerService } from "@bitwarden/angular/services/unassigned-items-banner.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants";
 import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
@@ -24,6 +27,7 @@
 import BrowserPopupUtils from "../../../../platform/popup/browser-popup-utils";
 import { VaultFilterService } from "../../../services/vault-filter.service";
 
+
 const BroadcasterSubscriptionId = "CurrentTabComponent";
 
 @Component({
@@ -54,6 +58,10 @@
   private loadedTimeout: number;
   private searchTimeout: number;
 
+  protected unassignedItemsBannerEnabled$ = this.configService.getFeatureFlag$(
+    FeatureFlag.UnassignedItemsBanner,
+  );
+
   constructor(
     private platformUtilsService: PlatformUtilsService,
     private cipherService: CipherService,
@@ -70,6 +78,8 @@
     private organizationService: OrganizationService,
     private vaultFilterService: VaultFilterService,
     private vaultSettingsService: VaultSettingsService,
+    private configService: ConfigService,
+    protected unassignedItemsBannerService: UnassignedItemsBannerService,
   ) {}
 
   async ngOnInit() {

apps/web/src/app/layouts/header/web-header.component.html

@@ -1,16 +1,18 @@
 <bit-banner
   class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
-  (onClose)="webLayoutMigrationBannerService.hideBanner()"
-  *ngIf="webLayoutMigrationBannerService.showBanner$ | async"
+  (onClose)="unassignedItemsBannerService.hideBanner()"
+  *ngIf="
+    (unassignedItemsBannerEnabled$ | async) && (unassignedItemsBannerService.showBanner$ | async)
+  "
 >
-  {{ "newWebApp" | i18n }}
+  {{ "unassignedItemsBanner" | i18n }}
   <a
-    href="https://bitwarden.com/blog/bitwarden-design-updating-the-navigation-in-the-web-app"
+    href="https://bitwarden.com/help/unassigned-vault-items-moved-to-admin-console"
     bitLink
     linkType="contrast"
     target="_blank"
     rel="noreferrer"
-    >{{ "releaseBlog" | i18n }}</a
+    >{{ "learnMore" | i18n }}</a
   >
 </bit-banner>
 <header

apps/web/src/app/layouts/header/web-header.component.ts

@@ -2,14 +2,16 @@
 import { ActivatedRoute } from "@angular/router";
 import { combineLatest, map, Observable } from "rxjs";
 
+import { UnassignedItemsBannerService } from "@bitwarden/angular/services/unassigned-items-banner.service";
 import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { AccountProfile } from "@bitwarden/common/platform/models/domain/account";
 
-import { WebLayoutMigrationBannerService } from "./web-layout-migration-banner.service";
 
 @Component({
   selector: "app-header",
@@ -31,14 +33,18 @@
   protected canLock$: Observable<boolean>;
   protected selfHosted: boolean;
   protected hostname = location.hostname;
+  protected unassignedItemsBannerEnabled$ = this.configService.getFeatureFlag$(
+    FeatureFlag.UnassignedItemsBanner,
+  );
 
   constructor(
     private route: ActivatedRoute,
     private stateService: StateService,
     private platformUtilsService: PlatformUtilsService,
     private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
     private messagingService: MessagingService,
-    protected webLayoutMigrationBannerService: WebLayoutMigrationBannerService,
+    protected unassignedItemsBannerService: UnassignedItemsBannerService,
+    private configService: ConfigService,
   ) {
     this.routeData$ = this.route.data.pipe(
       map((params) => {

apps/web/src/locales/en/messages.json

@@ -7899,5 +7899,8 @@
   },
   "machineAccountAccessUpdated": {
     "message": "Machine account access updated"
+  },
+  "unassignedItemsBanner": {
+    "message": "Unassigned organization items are no longer visible in your All Vaults view across devices and are now only accessible via the Admin Console. Assign these items to a collection from the Admin Console to make them visible."
   }
 }

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);
+  }
+}

libs/common/src/abstractions/api.service.ts

@@ -207,6 +207,7 @@ export abstract class ApiService {
     emergencyAccessId?: string,
   ) => Promise<AttachmentResponse>;
   getCiphersOrganization: (organizationId: string) => Promise<ListResponse<CipherResponse>>;
+  getShowUnassignedCiphersBanner: () => Promise<boolean>;
   postCipher: (request: CipherRequest) => Promise<CipherResponse>;
   postCipherCreate: (request: CipherCreateRequest) => Promise<CipherResponse>;
   postCipherAdmin: (request: CipherCreateRequest) => Promise<CipherResponse>;

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

@@ -9,6 +9,7 @@
   ShowPaymentMethodWarningBanners = "show-payment-method-warning-banners",
   EnableConsolidatedBilling = "enable-consolidated-billing",
   AC1795_UpdatedSubscriptionStatusSection = "AC-1795_updated-subscription-status-section",
+  UnassignedItemsBanner = "unassigned-items-banner",
 }
 
 // Replace this with a type safe lookup of the feature flag values in PM-2282

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

@@ -76,6 +76,10 @@ export const NEW_WEB_LAYOUT_BANNER_DISK = new StateDefinition("newWebLayoutBanne
   web: "disk-local",
 });
 
+export const UNASSIGNED_ITEMS_BANNER_DISK = new StateDefinition("unassignedItemsBanner", "disk", {
+  web: "disk-local",
+});
+
 // Platform
 
 export const APPLICATION_ID_DISK = new StateDefinition("applicationId", "disk", {

libs/common/src/services/api.service.ts

@@ -1,4 +1,4 @@
 import { firstValueFrom } from "rxjs";
 
 import { ApiService as ApiServiceAbstraction } from "../abstractions/api.service";
 import { OrganizationConnectionType } from "../admin-console/enums";
@@ -506,6 +506,11 @@
     return new ListResponse(r, CipherResponse);
   }
 
+  async getShowUnassignedCiphersBanner(): Promise<boolean> {
+    const r = await this.send("GET", "/ciphers/has-unassigned-ciphers", null, true, true);
+    return r;
+  }
+
   async postCipher(request: CipherRequest): Promise<CipherResponse> {
     const r = await this.send("POST", "/ciphers", request, true, true);
     return new CipherResponse(r);