[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>

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 the All Vaults view and 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 @@
   </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 { Router } from "@angular/router";
 import { Subject, firstValueFrom, from } from "rxjs";
 import { debounceTime, switchMap, 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";
@@ -54,6 +57,10 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
   private loadedTimeout: number;
   private searchTimeout: number;
 
+  protected unassignedItemsBannerEnabled$ = this.configService.getFeatureFlag$(
+    FeatureFlag.UnassignedItemsBanner,
+  );
+
   constructor(
     private platformUtilsService: PlatformUtilsService,
     private cipherService: CipherService,
@@ -70,6 +77,8 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
     private organizationService: OrganizationService,
     private vaultFilterService: VaultFilterService,
     private vaultSettingsService: VaultSettingsService,
+    private configService: ConfigService,
+    protected unassignedItemsBannerService: UnassignedItemsBannerService,
   ) {}
 
   async ngOnInit() {