[PM-1400] Update IconComponent to use OnPush ChangeDetection (#5181)

* Add disableFavicon$ to stateService

* Change IconComponent's ChangeDetectionStrategy and use disableFavicon$ observable

* Only get first result from disableFavicon observable

* Move disabledFavicon$ to SettingsService

* Update usage of disableFavicon to use SettingsService

* Remove getting and setting of disabledFavicon on login

* Settings service observable adjustments

* Fix for popup initially having a null value for the disableFavicon setting in settingsService

* Move disabledFavicon$ subscription to ngOnInit

* feat: experiment with observables

* Remove SettingsService from browser app component

* Fix storybook changes

* Update apps/web/src/app/vault/components/vault-items/vault-items.stories.ts

Co-authored-by: Andreas Coroiu <acoroiu@bitwarden.com>

* Fix mock function signature

---------

Co-authored-by: Andreas Coroiu <andreas.coroiu@gmail.com>
Co-authored-by: Andreas Coroiu <acoroiu@bitwarden.com>

libs/common/src/abstractions/settings.service.ts

@@ -4,8 +4,11 @@ import { AccountSettingsSettings } from "../models/domain/account";
 
 export abstract class SettingsService {
   settings$: Observable<AccountSettingsSettings>;
+  disableFavicon$: Observable<boolean>;
 
   setEquivalentDomains: (equivalentDomains: string[][]) => Promise<any>;
   getEquivalentDomains: (url: string) => Set<string>;
+  setDisableFavicon: (value: boolean) => Promise<any>;
+  getDisableFavicon: () => boolean;
   clear: (userId?: string) => Promise<void>;
 }

libs/common/src/abstractions/state.service.ts

@@ -145,7 +145,13 @@ export abstract class StateService<T extends Account = Account> {
   ) => Promise<void>;
   getDisableContextMenuItem: (options?: StorageOptions) => Promise<boolean>;
   setDisableContextMenuItem: (value: boolean, options?: StorageOptions) => Promise<void>;
+  /**
+   * @deprecated Do not call this, use SettingsService
+   */
   getDisableFavicon: (options?: StorageOptions) => Promise<boolean>;
+  /**
+   * @deprecated Do not call this, use SettingsService
+   */
   setDisableFavicon: (value: boolean, options?: StorageOptions) => Promise<void>;
   getDisableGa: (options?: StorageOptions) => Promise<boolean>;
   setDisableGa: (value: boolean, options?: StorageOptions) => Promise<void>;

libs/common/src/services/settings.service.ts

@@ -7,8 +7,10 @@ import { AccountSettingsSettings } from "../models/domain/account";
 
 export class SettingsService implements SettingsServiceAbstraction {
   protected _settings: BehaviorSubject<AccountSettingsSettings> = new BehaviorSubject({});
+  protected _disableFavicon = new BehaviorSubject<boolean>(null);
 
   settings$ = this._settings.asObservable();
+  disableFavicon$ = this._disableFavicon.asObservable();
 
   constructor(private stateService: StateService) {
     this.stateService.activeAccountUnlocked$
@@ -24,8 +26,10 @@ export class SettingsService implements SettingsServiceAbstraction {
           }
 
           const data = await this.stateService.getSettings();
+          const disableFavicon = await this.stateService.getDisableFavicon();
 
           this._settings.next(data);
+          this._disableFavicon.next(disableFavicon);
         })
       )
       .subscribe();
@@ -61,6 +65,15 @@ export class SettingsService implements SettingsServiceAbstraction {
     return new Set(result);
   }
 
+  async setDisableFavicon(value: boolean) {
+    this._disableFavicon.next(value);
+    await this.stateService.setDisableFavicon(value);
+  }
+
+  getDisableFavicon(): boolean {
+    return this._disableFavicon.getValue();
+  }
+
   async clear(userId?: string): Promise<void> {
     if (userId == null || userId == (await this.stateService.getUserId())) {
       this._settings.next({});

libs/common/src/services/state.service.ts

@@ -103,7 +103,6 @@ export class StateService<
           } else if (userId == null) {
             this.activeAccountUnlockedSubject.next(false);
           }
-
           // FIXME: This should be refactored into AuthService or a similar service,
           //  as checking for the existence of the crypto key is a low level
           //  implementation detail.
@@ -130,6 +129,7 @@ export class StateService<
       }
     });
     await this.initAccountState();
+
     this.hasBeenInited = true;
   }