[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>

apps/browser/src/popup/settings/options.component.ts

@@ -3,6 +3,7 @@ import { Component, OnInit } from "@angular/core";
 import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
+import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { TotpService } from "@bitwarden/common/abstractions/totp.service";
 import { ThemeType, UriMatchType } from "@bitwarden/common/enums";
@@ -39,7 +40,8 @@ export class OptionsComponent implements OnInit {
     private stateService: StateService,
     private totpService: TotpService,
     i18nService: I18nService,
-    private themingService: AbstractThemingService
+    private themingService: AbstractThemingService,
+    private settingsService: SettingsService
   ) {
     this.themeOptions = [
       { name: i18nService.t("default"), value: ThemeType.System },
@@ -89,7 +91,7 @@ export class OptionsComponent implements OnInit {
 
     this.enableAutoTotpCopy = !(await this.stateService.getDisableAutoTotpCopy());
 
-    this.enableFavicon = !(await this.stateService.getDisableFavicon());
+    this.enableFavicon = !this.settingsService.getDisableFavicon();
 
     this.enableBadgeCounter = !(await this.stateService.getDisableBadgeCounter());
 
@@ -129,7 +131,7 @@ export class OptionsComponent implements OnInit {
   }
 
   async updateFavicon() {
-    await this.stateService.setDisableFavicon(!this.enableFavicon);
+    await this.settingsService.setDisableFavicon(!this.enableFavicon);
   }
 
   async updateBadgeCounter() {

apps/browser/src/services/browser-settings.service.ts

@@ -3,9 +3,13 @@ import { BehaviorSubject } from "rxjs";
 import { AccountSettingsSettings } from "@bitwarden/common/models/domain/account";
 import { SettingsService } from "@bitwarden/common/services/settings.service";
 
-import { sessionSync } from "../decorators/session-sync-observable";
+import { browserSession, sessionSync } from "../decorators/session-sync-observable";
 
+@browserSession
 export class BrowserSettingsService extends SettingsService {
   @sessionSync({ initializer: (obj: string[][]) => obj })
   protected _settings: BehaviorSubject<AccountSettingsSettings>;
+
+  @sessionSync({ initializer: (b: boolean) => b })
+  protected _disableFavicon: BehaviorSubject<boolean>;
 }

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

@@ -9,10 +9,11 @@ import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
 import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vaultTimeout/vaultTimeoutSettings.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
-import { DeviceType, ThemeType, StorageLocation, KeySuffixOptions } from "@bitwarden/common/enums";
+import { DeviceType, ThemeType, KeySuffixOptions } from "@bitwarden/common/enums";
 import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
 import { Utils } from "@bitwarden/common/misc/utils";
 
@@ -107,7 +108,8 @@ export class SettingsComponent implements OnInit {
     private messagingService: MessagingService,
     private cryptoService: CryptoService,
     private modalService: ModalService,
-    private themingService: AbstractThemingService
+    private themingService: AbstractThemingService,
+    private settingsService: SettingsService
   ) {
     const isMac = this.platformUtilsService.getDevice() === DeviceType.MacOsDesktop;
 
@@ -437,10 +439,7 @@ export class SettingsComponent implements OnInit {
   }
 
   async saveFavicons() {
-    await this.stateService.setDisableFavicon(!this.form.value.enableFavicons);
-    await this.stateService.setDisableFavicon(!this.form.value.enableFavicons, {
-      storageLocation: StorageLocation.Disk,
-    });
+    await this.settingsService.setDisableFavicon(!this.form.value.enableFavicons);
     this.messagingService.send("refreshCiphers");
   }
 

apps/web/src/app/settings/preferences.component.ts

@@ -6,6 +6,7 @@ import { AbstractThemingService } from "@bitwarden/angular/services/theming/them
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vaultTimeout/vaultTimeoutSettings.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
@@ -51,7 +52,8 @@ export class PreferencesComponent implements OnInit {
     private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
     private platformUtilsService: PlatformUtilsService,
     private messagingService: MessagingService,
-    private themingService: AbstractThemingService
+    private themingService: AbstractThemingService,
+    private settingsService: SettingsService
   ) {
     this.vaultTimeoutOptions = [
       { name: i18nService.t("oneMinute"), value: 1 },
@@ -128,11 +130,10 @@ export class PreferencesComponent implements OnInit {
         takeUntil(this.destroy$)
       )
       .subscribe();
-
     const initialFormValues = {
       vaultTimeout: await this.vaultTimeoutSettingsService.getVaultTimeout(),
       vaultTimeoutAction: await this.vaultTimeoutSettingsService.getVaultTimeoutAction(),
-      enableFavicons: !(await this.stateService.getDisableFavicon()),
+      enableFavicons: !(await this.settingsService.getDisableFavicon()),
       enableFullWidth: await this.stateService.getEnableFullWidth(),
       theme: await this.stateService.getTheme(),
       locale: (await this.stateService.getLocale()) ?? null,
@@ -157,7 +158,7 @@ export class PreferencesComponent implements OnInit {
       values.vaultTimeout,
       values.vaultTimeoutAction
     );
-    await this.stateService.setDisableFavicon(!values.enableFavicons);
+    await this.settingsService.setDisableFavicon(!values.enableFavicons);
     await this.stateService.setEnableFullWidth(values.enableFullWidth);
     this.messagingService.send("setFullWidth");
     if (values.theme !== this.startingTheme) {

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

@@ -5,6 +5,7 @@ import { BehaviorSubject } from "rxjs";
 
 import { AvatarUpdateService } from "@bitwarden/common/abstractions/account/avatar-update.service";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
+import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { OrganizationUserType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
@@ -69,6 +70,15 @@ export default {
             },
           } as Partial<StateService>,
         },
+        {
+          provide: SettingsService,
+          useValue: {
+            disableFavicon$: new BehaviorSubject(false).asObservable(),
+            getDisableFavicon() {
+              return false;
+            },
+          } as Partial<SettingsService>,
+        },
         {
           provide: AvatarUpdateService,
           useValue: {