move upgrade browser notice to banner component

apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html

@@ -1,3 +1,20 @@
+<bit-banner
+  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
+  bannerType="warning"
+  *ngIf="visibleBanner === VisibleVaultBanner.OutdatedBrowser"
+  (onClose)="dismissBanner()"
+>
+  {{ "updateBrowserDesc" | i18n }}
+  <a
+    class="text-white tw-font-bold"
+    target="_blank"
+    href="https://browser-update.org/update-browser.html"
+    rel="noreferrer noopener"
+  >
+    {{ "updateBrowser" | i18n }}
+  </a>
+</bit-banner>
+
 <bit-banner
   class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   bannerType="premium"

apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.spec.ts

@@ -3,12 +3,16 @@ import { mock } from "jest-mock-extended";
 import { BehaviorSubject } from "rxjs";
 
 import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { BannerModule } from "@bitwarden/components";
 
-import { VaultBannersComponent } from "./vault-banners.component";
+import { LooseComponentsModule } from "../../../shared";
+
+import { VaultBannersComponent, VisibleVaultBanner } from "./vault-banners.component";
 
 describe("VaultBannersComponent", () => {
   let component: VaultBannersComponent;
@@ -16,12 +20,14 @@ describe("VaultBannersComponent", () => {
 
   const hasPremiumFromAnySource$ = new BehaviorSubject<boolean>(false);
   const isSelfHost = jest.fn().mockReturnValue(false);
+  const getEmailVerified = jest.fn().mockResolvedValue(true);
 
   beforeEach(async () => {
     isSelfHost.mockClear();
+    getEmailVerified.mockClear();
 
     await TestBed.configureTestingModule({
-      imports: [BannerModule],
+      imports: [BannerModule, LooseComponentsModule],
       declarations: [VaultBannersComponent, I18nPipe],
       providers: [
         {
@@ -36,11 +42,25 @@ describe("VaultBannersComponent", () => {
           provide: I18nService,
           useValue: mock<I18nService>({ t: (key) => key }),
         },
+        {
+          provide: TokenService,
+          useValue: { getEmailVerified },
+        },
+        {
+          provide: ApiService,
+          useValue: mock<ApiService>(),
+        },
       ],
     }).compileComponents();
   });
 
   beforeEach(() => {
+    // Refine the userAgent before each test so each run is consistent
+    Object.defineProperty(navigator, "userAgent", {
+      configurable: true,
+      get: () => "Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/20.0.3",
+    });
+
     fixture = TestBed.createComponent(VaultBannersComponent);
     component = fixture.componentInstance;
 
@@ -58,7 +78,7 @@ describe("VaultBannersComponent", () => {
       });
 
       it("shows premium banner", async () => {
-        expect(component.visibleBanner).toBe("premium");
+        expect(component.visibleBanner).toBe(VisibleVaultBanner.Premium);
       });
 
       it("dismisses premium banner", async () => {
@@ -71,5 +91,33 @@ describe("VaultBannersComponent", () => {
         expect(component.visibleBanner).toBe(null);
       });
     });
+
+    describe("outdated browser banner", () => {
+      beforeEach(async () => {
+        // Hardcode `MSIE` in userAgent string
+        const userAgent = "AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 MSIE";
+        Object.defineProperty(navigator, "userAgent", {
+          configurable: true,
+          get: () => userAgent,
+        });
+
+        await component.ngOnInit();
+        fixture.detectChanges();
+      });
+
+      it("shows outdated browser banner", async () => {
+        expect(component.visibleBanner).toBe(VisibleVaultBanner.OutdatedBrowser);
+      });
+
+      it("dismisses outdated browser banner", async () => {
+        const dismissButton = fixture.debugElement.nativeElement.querySelector(
+          'button[biticonbutton="bwi-close"]',
+        );
+
+        dismissButton.dispatchEvent(new Event("click"));
+
+        expect(component.visibleBanner).toBe(null);
+      });
+    });
   });
 });

apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.ts

@@ -6,6 +6,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 
 export enum VisibleVaultBanner {
   Premium = "premium",
+  OutdatedBrowser = "outdated-browser",
 }
 
 @Component({
@@ -27,6 +28,8 @@ export class VaultBannersComponent implements OnInit {
   }
 
   private async determineVisibleBanner(): Promise<void> {
+    const showBrowserOutdated = window.navigator.userAgent.indexOf("MSIE") !== -1;
+
     const canAccessPremium = await firstValueFrom(
       this.billingAccountProfileStateService.hasPremiumFromAnySource$,
     );
@@ -34,6 +37,9 @@ export class VaultBannersComponent implements OnInit {
     const showPremiumBanner = !canAccessPremium && !this.platformUtilsService.isSelfHost();
 
     switch (true) {
+      case showBrowserOutdated:
+        this.visibleBanner = VisibleVaultBanner.OutdatedBrowser;
+        break;
       case showPremiumBanner:
         this.visibleBanner = VisibleVaultBanner.Premium;
         break;

apps/web/src/app/vault/individual-vault/vault.component.html

@@ -92,24 +92,6 @@
       class="d-block mb-4"
       (onVerified)="emailVerified($event)"
     ></app-verify-email>
-
-    <div class="card border-warning mb-4" *ngIf="showBrowserOutdated">
-      <div class="card-header bg-warning text-white">
-        <i class="bwi bwi-exclamation-triangle bwi-fw" aria-hidden="true"></i>
-        {{ "updateBrowser" | i18n }}
-      </div>
-      <div class="card-body">
-        <p>{{ "updateBrowserDesc" | i18n }}</p>
-        <a
-          class="btn btn-block btn-outline-secondary"
-          target="_blank"
-          href="https://browser-update.org/update-browser.html"
-          rel="noreferrer"
-        >
-          {{ "updateBrowser" | i18n }}
-        </a>
-      </div>
-    </div>
   </div>
 </div>
 

apps/web/src/app/vault/individual-vault/vault.component.ts

@@ -123,7 +123,6 @@ export class VaultComponent implements OnInit, OnDestroy {
   collectionsModalRef: ViewContainerRef;
 
   showVerifyEmail = false;
-  showBrowserOutdated = false;
   showLowKdf = false;
   trashCleanupWarning: string = null;
   kdfIterations: number;
@@ -186,7 +185,6 @@ export class VaultComponent implements OnInit, OnDestroy {
   ) {}
 
   async ngOnInit() {
-    this.showBrowserOutdated = window.navigator.userAgent.indexOf("MSIE") !== -1;
     this.trashCleanupWarning = this.i18nService.t(
       this.platformUtilsService.isSelfHost()
         ? "trashCleanupWarningSelfHosted"
@@ -406,7 +404,7 @@ export class VaultComponent implements OnInit, OnDestroy {
   }
 
   get isShowingCards() {
-    return this.showBrowserOutdated || this.showVerifyEmail || this.showLowKdf;
+    return this.showVerifyEmail || this.showLowKdf;
   }
 
   emailVerified(verified: boolean) {