allow multiple banners to be displayed at once

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

@@ -1,8 +1,8 @@
 <bit-banner
   class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   bannerType="warning"
-  *ngIf="visibleBanner === VisibleVaultBanner.OutdatedBrowser"
-  (onClose)="dismissBanner()"
+  *ngIf="visibleBanners.includes(VisibleVaultBanner.OutdatedBrowser)"
+  (onClose)="dismissBanner(VisibleVaultBanner.OutdatedBrowser)"
 >
   {{ "updateBrowserDesc" | i18n }}
   <a
@@ -18,8 +18,8 @@
 <bit-banner
   class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   bannerType="warning"
-  *ngIf="visibleBanner === VisibleVaultBanner.KDFSettings"
-  (onClose)="dismissBanner()"
+  *ngIf="visibleBanners.includes(VisibleVaultBanner.KDFSettings)"
+  (onClose)="dismissBanner(VisibleVaultBanner.KDFSettings)"
 >
   {{ "lowKDFIterationsBanner" | i18n }}
   <a class="text-white tw-font-bold" routerLink="/settings/security/security-keys">
@@ -28,17 +28,17 @@
 </bit-banner>
 
 <app-verify-email
-  *ngIf="visibleBanner === VisibleVaultBanner.VerifyEmail"
+  *ngIf="visibleBanners.includes(VisibleVaultBanner.VerifyEmail)"
   class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
-  (onDismiss)="dismissBanner()"
-  (onVerified)="dismissBanner()"
+  (onDismiss)="dismissBanner(VisibleVaultBanner.VerifyEmail)"
+  (onVerified)="dismissBanner(VisibleVaultBanner.VerifyEmail)"
 ></app-verify-email>
 
 <bit-banner
   class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   bannerType="premium"
-  *ngIf="visibleBanner === VisibleVaultBanner.Premium"
-  (onClose)="dismissBanner()"
+  *ngIf="visibleBanners.includes(VisibleVaultBanner.Premium)"
+  (onClose)="dismissBanner(VisibleVaultBanner.Premium)"
 >
   {{ "premiumUpgradeUnlockFeatures" | i18n }}
   <a class="text-white tw-font-bold" routerLink="/settings/subscription/premium">

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

@@ -94,7 +94,7 @@ describe("VaultBannersComponent", () => {
       });
 
       it("shows premium banner", async () => {
-        expect(component.visibleBanner).toBe(VisibleVaultBanner.Premium);
+        expect(component.visibleBanners).toEqual([VisibleVaultBanner.Premium]);
       });
 
       it("dismisses premium banner", async () => {
@@ -104,7 +104,7 @@ describe("VaultBannersComponent", () => {
 
         dismissButton.dispatchEvent(new Event("click"));
 
-        expect(component.visibleBanner).toBe(null);
+        expect(component.visibleBanners).toEqual([]);
       });
     });
 
@@ -117,7 +117,7 @@ describe("VaultBannersComponent", () => {
       });
 
       it("shows verify email banner", async () => {
-        expect(component.visibleBanner).toBe(VisibleVaultBanner.VerifyEmail);
+        expect(component.visibleBanners).toEqual([VisibleVaultBanner.VerifyEmail]);
       });
 
       it("dismisses verify email banner", async () => {
@@ -127,7 +127,7 @@ describe("VaultBannersComponent", () => {
 
         dismissButton.dispatchEvent(new Event("click"));
 
-        expect(component.visibleBanner).toBe(null);
+        expect(component.visibleBanners).toEqual([]);
       });
     });
 
@@ -145,7 +145,7 @@ describe("VaultBannersComponent", () => {
       });
 
       it("shows outdated browser banner", async () => {
-        expect(component.visibleBanner).toBe(VisibleVaultBanner.OutdatedBrowser);
+        expect(component.visibleBanners).toEqual([VisibleVaultBanner.OutdatedBrowser]);
       });
 
       it("dismisses outdated browser banner", async () => {
@@ -155,7 +155,7 @@ describe("VaultBannersComponent", () => {
 
         dismissButton.dispatchEvent(new Event("click"));
 
-        expect(component.visibleBanner).toBe(null);
+        expect(component.visibleBanners).toEqual([]);
       });
     });
 
@@ -170,7 +170,7 @@ describe("VaultBannersComponent", () => {
       });
 
       it("shows low KDF iteration banner", async () => {
-        expect(component.visibleBanner).toBe(VisibleVaultBanner.KDFSettings);
+        expect(component.visibleBanners).toEqual([VisibleVaultBanner.KDFSettings]);
       });
 
       it("does not show low KDF iteration banner if KDF type is not PBKDF2_SHA256", async () => {
@@ -179,7 +179,7 @@ describe("VaultBannersComponent", () => {
         await component.ngOnInit();
         fixture.detectChanges();
 
-        expect(component.visibleBanner).toBe(null);
+        expect(component.visibleBanners).toEqual([]);
       });
 
       it("does not show low KDF for iterations about 600,000", async () => {
@@ -188,7 +188,7 @@ describe("VaultBannersComponent", () => {
         await component.ngOnInit();
         fixture.detectChanges();
 
-        expect(component.visibleBanner).toBe(null);
+        expect(component.visibleBanners).toEqual([]);
       });
 
       it("dismisses low KDF iteration banner", async () => {
@@ -198,7 +198,7 @@ describe("VaultBannersComponent", () => {
 
         dismissButton.dispatchEvent(new Event("click"));
 
-        expect(component.visibleBanner).toBe(null);
+        expect(component.visibleBanners).toEqual([]);
       });
     });
   });

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

@@ -20,7 +20,7 @@ export enum VisibleVaultBanner {
   templateUrl: "./vault-banners.component.html",
 })
 export class VaultBannersComponent implements OnInit {
-  visibleBanner: VisibleVaultBanner | null;
+  visibleBanners: VisibleVaultBanner[] = [];
 
   VisibleVaultBanner = VisibleVaultBanner;
 
@@ -36,8 +36,8 @@ export class VaultBannersComponent implements OnInit {
     await this.determineVisibleBanner();
   }
 
-  dismissBanner(): void {
-    this.visibleBanner = null;
+  dismissBanner(banner: VisibleVaultBanner): void {
+    this.visibleBanners = this.visibleBanners.filter((b) => b !== banner);
   }
 
   private async determineVisibleBanner(): Promise<void> {
@@ -53,22 +53,12 @@ export class VaultBannersComponent implements OnInit {
 
     const showPremiumBanner = !canAccessPremium && !this.platformUtilsService.isSelfHost();
 
-    switch (true) {
-      case showBrowserOutdated:
-        this.visibleBanner = VisibleVaultBanner.OutdatedBrowser;
-        break;
-      case showLowKdf:
-        this.visibleBanner = VisibleVaultBanner.KDFSettings;
-        break;
-      case showVerifyEmail:
-        this.visibleBanner = VisibleVaultBanner.VerifyEmail;
-        break;
-      case showPremiumBanner:
-        this.visibleBanner = VisibleVaultBanner.Premium;
-        break;
-      default:
-        this.visibleBanner = null;
-    }
+    this.visibleBanners = [
+      showBrowserOutdated ? VisibleVaultBanner.OutdatedBrowser : null,
+      showVerifyEmail ? VisibleVaultBanner.VerifyEmail : null,
+      showLowKdf ? VisibleVaultBanner.KDFSettings : null,
+      showPremiumBanner ? VisibleVaultBanner.Premium : null,
+    ].filter(Boolean); // remove all falsy values, i.e. null
   }
 
   private async isLowKdfIteration() {