Fix active account and searchBar observables/subscriptions (#3268)

* Change subscription to rely on observables and not on BehaviourSubject

* Ensure OnDestroy is added to AppComponent

* Fix check for no active accounts to redirect to the login page instead of lock

* Change subscription handling on SearchBarService

* Fix naming convention: Observables should have a $ suffix

* Remove obsolete linter hint

* Fix activeAccountUnlocked getting exposed as Observable but is instantiated as BehaviourSubject

apps/browser/src/popup/app.component.ts

@@ -56,7 +56,7 @@ export class AppComponent implements OnInit, OnDestroy {
     // Clear them aggressively to make sure this doesn't occur
     await this.clearComponentStates();
 
-    this.stateService.activeAccount.pipe(takeUntil(this.destroy$)).subscribe((userId) => {
+    this.stateService.activeAccount$.pipe(takeUntil(this.destroy$)).subscribe((userId) => {
       this.activeUserId = userId;
     });
 
@@ -84,7 +84,7 @@ export class AppComponent implements OnInit, OnDestroy {
               });
             }
 
-            if (this.stateService.activeAccount.getValue() == null) {
+            if (this.activeUserId === null) {
               this.router.navigate(["home"]);
             }
           });

apps/desktop/src/app/accounts/lock.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone, OnDestroy } from "@angular/core";
+import { Component, NgZone } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { ipcRenderer } from "electron";
 
@@ -22,7 +22,7 @@ const BroadcasterSubscriptionId = "LockComponent";
   selector: "app-lock",
   templateUrl: "lock.component.html",
 })
-export class LockComponent extends BaseLockComponent implements OnDestroy {
+export class LockComponent extends BaseLockComponent {
   private deferFocus: boolean = null;
   authenicatedUrl = "vault";
   unAuthenicatedUrl = "update-temp-password";
@@ -103,6 +103,7 @@ export class LockComponent extends BaseLockComponent implements OnDestroy {
   }
 
   ngOnDestroy() {
+    super.ngOnDestroy();
     this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
   }
 

apps/desktop/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import {
   Component,
   NgZone,
+  OnDestroy,
   OnInit,
   SecurityContext,
   Type,
@@ -77,7 +78,7 @@ const systemTimeoutOptions = {
     </div>
   `,
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnDestroy {
   @ViewChild("settings", { read: ViewContainerRef, static: true }) settingsRef: ViewContainerRef;
   @ViewChild("premium", { read: ViewContainerRef, static: true }) premiumRef: ViewContainerRef;
   @ViewChild("passwordHistory", { read: ViewContainerRef, static: true })
@@ -129,7 +130,7 @@ export class AppComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.stateService.activeAccount.pipe(takeUntil(this.destroy$)).subscribe((userId) => {
+    this.stateService.activeAccount$.pipe(takeUntil(this.destroy$)).subscribe((userId) => {
       this.activeUserId = userId;
     });
 

apps/desktop/src/app/layout/search/search-bar.service.ts

@@ -8,15 +8,16 @@ export type SearchBarState = {
 
 @Injectable()
 export class SearchBarService {
-  searchText = new BehaviorSubject<string>(null);
+  private searchTextSubject = new BehaviorSubject<string>(null);
+  searchText$ = this.searchTextSubject.asObservable();
 
   private _state = {
     enabled: false,
     placeholderText: "",
   };
 
-  // tslint:disable-next-line:member-ordering
-  state = new BehaviorSubject<SearchBarState>(this._state);
+  private stateSubject = new BehaviorSubject<SearchBarState>(this._state);
+  state$ = this.stateSubject.asObservable();
 
   setEnabled(enabled: boolean) {
     this._state.enabled = enabled;
@@ -29,10 +30,10 @@ export class SearchBarService {
   }
 
   setSearchText(value: string) {
-    this.searchText.next(value);
+    this.searchTextSubject.next(value);
   }
 
   private updateState() {
-    this.state.next(this._state);
+    this.stateSubject.next(this._state);
   }
 }

apps/desktop/src/app/layout/search/search.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { UntypedFormControl } from "@angular/forms";
+import { Subscription } from "rxjs";
 
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 
@@ -13,8 +14,10 @@ export class SearchComponent implements OnInit, OnDestroy {
   state: SearchBarState;
   searchText: UntypedFormControl = new UntypedFormControl(null);
 
+  private activeAccountSubscription: Subscription;
+
   constructor(private searchBarService: SearchBarService, private stateService: StateService) {
-    this.searchBarService.state.subscribe((state) => {
+    this.searchBarService.state$.subscribe((state) => {
       this.state = state;
     });
 
@@ -24,13 +27,13 @@ export class SearchComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.stateService.activeAccount.subscribe((value) => {
+    this.activeAccountSubscription = this.stateService.activeAccount$.subscribe((value) => {
       this.searchBarService.setSearchText("");
       this.searchText.patchValue("");
     });
   }
 
   ngOnDestroy() {
-    this.stateService.activeAccount.unsubscribe();
+    this.activeAccountSubscription.unsubscribe();
   }
 }

apps/desktop/src/app/send/send.component.ts

@@ -56,7 +56,7 @@ export class SendComponent extends BaseSendComponent implements OnInit, OnDestro
       policyService,
       logService
     );
-    this.searchBarService.searchText.subscribe((searchText) => {
+    this.searchBarService.searchText$.subscribe((searchText) => {
       this.searchText = searchText;
       this.searchTextChanged();
     });

apps/desktop/src/app/vault/ciphers.component.ts

@@ -14,7 +14,7 @@ export class CiphersComponent extends BaseCiphersComponent {
   constructor(searchService: SearchService, searchBarService: SearchBarService) {
     super(searchService);
 
-    searchBarService.searchText.subscribe((searchText) => {
+    searchBarService.searchText$.subscribe((searchText) => {
       this.searchText = searchText;
       this.search(200);
     });