[PM-8592] Deactivated state not showing (#9533)

* refactor vault state observables into a single variable to remove multiple subscriptions

* add clarification comment

* fix comment to be accurate

apps/browser/src/vault/popup/components/vault/vault-v2.component.html

@@ -11,7 +11,10 @@
     </ng-container>
   </popup-header>
 
-  <div *ngIf="showEmptyState$ | async" class="tw-flex tw-flex-col tw-h-full tw-justify-center">
+  <div
+    *ngIf="vaultState === VaultStateEnum.Empty"
+    class="tw-flex tw-flex-col tw-h-full tw-justify-center"
+  >
     <bit-no-items [icon]="vaultIcon">
       <ng-container slot="title">{{ "yourVaultIsEmpty" | i18n }}</ng-container>
       <ng-container slot="description">{{ "autofillSuggestionsTip" | i18n }}</ng-container>
@@ -21,13 +24,12 @@
     </bit-no-items>
   </div>
 
-  <ng-container *ngIf="!(showEmptyState$ | async)">
+  <ng-container *ngIf="vaultState !== VaultStateEnum.Empty">
     <app-vault-v2-search> </app-vault-v2-search>
 
     <app-vault-list-filters></app-vault-list-filters>
-
     <div
-      *ngIf="(showNoResultsState$ | async) && !(showDeactivatedOrg$ | async)"
+      *ngIf="vaultState === VaultStateEnum.NoResults"
       class="tw-flex tw-flex-col tw-justify-center tw-h-auto tw-pt-12"
     >
       <bit-no-items [icon]="noResultsIcon">
@@ -37,7 +39,7 @@
     </div>
 
     <div
-      *ngIf="showDeactivatedOrg$ | async"
+      *ngIf="vaultState === VaultStateEnum.DeactivatedOrg"
       class="tw-flex tw-flex-col tw-justify-center tw-h-auto tw-pt-12"
     >
       <bit-no-items [icon]="deactivatedIcon">
@@ -46,7 +48,7 @@
       </bit-no-items>
     </div>
 
-    <ng-container *ngIf="!(showNoResultsState$ | async) && !(showDeactivatedOrg$ | async)">
+    <ng-container *ngIf="vaultState === null">
       <app-autofill-vault-list-items></app-autofill-vault-list-items>
       <app-vault-list-items-container
         [title]="'favorites' | i18n"

apps/browser/src/vault/popup/components/vault/vault-v2.component.ts

@@ -1,6 +1,8 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Router, RouterLink } from "@angular/router";
+import { combineLatest } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ButtonModule, Icons, NoItemsModule } from "@bitwarden/components";
@@ -14,6 +16,12 @@ import { AutofillVaultListItemsComponent, VaultListItemsContainerComponent } fro
 import { VaultListFiltersComponent } from "../vault-v2/vault-list-filters/vault-list-filters.component";
 import { VaultV2SearchComponent } from "../vault-v2/vault-search/vault-v2-search.component";
 
+enum VaultState {
+  Empty,
+  NoResults,
+  DeactivatedOrg,
+}
+
 @Component({
   selector: "app-vault",
   templateUrl: "vault-v2.component.html",
@@ -38,18 +46,42 @@ export class VaultV2Component implements OnInit, OnDestroy {
   protected favoriteCiphers$ = this.vaultPopupItemsService.favoriteCiphers$;
   protected remainingCiphers$ = this.vaultPopupItemsService.remainingCiphers$;
 
-  protected showEmptyState$ = this.vaultPopupItemsService.emptyVault$;
-  protected showNoResultsState$ = this.vaultPopupItemsService.noFilteredResults$;
-  protected showDeactivatedOrg$ = this.vaultPopupItemsService.showDeactivatedOrg$;
+  /** Visual state of the vault */
+  protected vaultState: VaultState | null = null;
 
   protected vaultIcon = Icons.Vault;
   protected deactivatedIcon = Icons.DeactivatedOrg;
   protected noResultsIcon = Icons.NoResults;
 
+  protected VaultStateEnum = VaultState;
+
   constructor(
     private vaultPopupItemsService: VaultPopupItemsService,
     private router: Router,
-  ) {}
+  ) {
+    combineLatest([
+      this.vaultPopupItemsService.emptyVault$,
+      this.vaultPopupItemsService.noFilteredResults$,
+      this.vaultPopupItemsService.showDeactivatedOrg$,
+    ])
+      .pipe(takeUntilDestroyed())
+      .subscribe(([emptyVault, noResults, deactivatedOrg]) => {
+        switch (true) {
+          case emptyVault:
+            this.vaultState = VaultState.Empty;
+            break;
+          case deactivatedOrg:
+            // The deactivated org state takes precedence over the no results state
+            this.vaultState = VaultState.DeactivatedOrg;
+            break;
+          case noResults:
+            this.vaultState = VaultState.NoResults;
+            break;
+          default:
+            this.vaultState = null;
+        }
+      });
+  }
 
   ngOnInit(): void {}