implement signal for premium badge component

Author: nick-livefront

apps/desktop/src/vault/app/vault/vault-filter/filters/status-filter.component.html

@@ -38,7 +38,7 @@ <h2 class="sr-only">{{ "filters" | i18n }}</h2>
         <button
           type="button"
           class="filter-button"
-          (click)="handleArchiveFilter()"
+          (click)="handleArchiveFilter($event)"
           [attr.aria-pressed]="activeFilter.status === 'archive'"
         >
           <i class="bwi bwi-fw bwi-archive" aria-hidden="true"></i>&nbsp;{{ "archiveNoun" | i18n }}

apps/desktop/src/vault/app/vault/vault-filter/filters/status-filter.component.spec.ts

@@ -24,6 +24,7 @@ describe("StatusFilterComponent", () => {
   let accountService: FakeAccountService;
 
   const mockUserId = Utils.newGuid() as UserId;
+  const event = new Event("click");
 
   beforeEach(async () => {
     accountService = mockAccountServiceWith(mockUserId);
@@ -58,14 +59,14 @@ describe("StatusFilterComponent", () => {
       applyFilter.mockClear();
       component["applyFilter"] = applyFilter;
 
-      promptForPremiumSpy = jest.spyOn(component["premiumBadgeComponent"]!, "promptForPremium");
+      promptForPremiumSpy = jest.spyOn(component["premiumBadgeComponent"]()!, "promptForPremium");
     });
 
     it("should apply archive filter when userCanArchive returns true", async () => {
       cipherArchiveService.userCanArchive$.mockReturnValue(of(true));
       cipherArchiveService.archivedCiphers$.mockReturnValue(of([]));
 
-      await component["handleArchiveFilter"]();
+      await component["handleArchiveFilter"](event);
 
       expect(applyFilter).toHaveBeenCalledWith("archive");
       expect(promptForPremiumSpy).not.toHaveBeenCalled();
@@ -78,7 +79,7 @@ describe("StatusFilterComponent", () => {
       cipherArchiveService.userCanArchive$.mockReturnValue(of(false));
       cipherArchiveService.archivedCiphers$.mockReturnValue(of([mockCipher]));
 
-      await component["handleArchiveFilter"]();
+      await component["handleArchiveFilter"](event);
 
       expect(applyFilter).toHaveBeenCalledWith("archive");
       expect(promptForPremiumSpy).not.toHaveBeenCalled();
@@ -88,7 +89,7 @@ describe("StatusFilterComponent", () => {
       cipherArchiveService.userCanArchive$.mockReturnValue(of(false));
       cipherArchiveService.archivedCiphers$.mockReturnValue(of([]));
 
-      await component["handleArchiveFilter"]();
+      await component["handleArchiveFilter"](event);
 
       expect(applyFilter).not.toHaveBeenCalled();
       expect(promptForPremiumSpy).toHaveBeenCalled();

apps/desktop/src/vault/app/vault/vault-filter/filters/status-filter.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from "@angular/core";
+import { Component, viewChild } from "@angular/core";
 import { combineLatest, firstValueFrom, map, switchMap } from "rxjs";
 
 import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
@@ -15,7 +15,7 @@ import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/ciphe
   standalone: false,
 })
 export class StatusFilterComponent extends BaseStatusFilterComponent {
-  @ViewChild(PremiumBadgeComponent) private premiumBadgeComponent?: PremiumBadgeComponent;
+  private readonly premiumBadgeComponent = viewChild(PremiumBadgeComponent);
 
   private userId$ = this.accountService.activeAccount$.pipe(getUserId);
   protected canArchive$ = this.userId$.pipe(
@@ -35,17 +35,17 @@ export class StatusFilterComponent extends BaseStatusFilterComponent {
     super();
   }
 
-  protected async handleArchiveFilter() {
+  protected async handleArchiveFilter(event: Event) {
     const [canArchive, hasArchivedCiphers] = await firstValueFrom(
       combineLatest([this.canArchive$, this.hasArchivedCiphers$]),
     );
 
     if (canArchive || hasArchivedCiphers) {
       this.applyFilter("archive");
-    } else if (this.premiumBadgeComponent) {
+    } else if (this.premiumBadgeComponent()) {
       // The `premiumBadgeComponent` should always be defined here, adding the
       // if to satisfy TypeScript.
-      await this.premiumBadgeComponent.promptForPremium();
+      await this.premiumBadgeComponent().promptForPremium(event);
     }
   }
 }