[PM-6511] New i18n for angular (#8122)

* Use state provider to store preferred language

* migrate preferred language

* Use new i18n provider to get LOCAL_ID

* Fix preloaded english i18n

This is a mock service that forces english translations, it doesn't need the i18n interface that allows changing of locales.

* PR improvements

* Fixup merge

apps/browser/src/background/main.background.ts

@@ -195,12 +195,12 @@ import { BrowserStateService as StateServiceAbstraction } from "../platform/serv
 import { BrowserConfigService } from "../platform/services/browser-config.service";
 import { BrowserCryptoService } from "../platform/services/browser-crypto.service";
 import { BrowserEnvironmentService } from "../platform/services/browser-environment.service";
-import { BrowserI18nService } from "../platform/services/browser-i18n.service";
 import BrowserLocalStorageService from "../platform/services/browser-local-storage.service";
 import BrowserMessagingPrivateModeBackgroundService from "../platform/services/browser-messaging-private-mode-background.service";
 import BrowserMessagingService from "../platform/services/browser-messaging.service";
 import BrowserPlatformUtilsService from "../platform/services/browser-platform-utils.service";
 import { BrowserStateService } from "../platform/services/browser-state.service";
+import I18nService from "../platform/services/i18n.service";
 import { LocalBackedSessionStorageService } from "../platform/services/local-backed-session-storage.service";
 import { BackgroundDerivedStateProvider } from "../platform/state/background-derived-state.provider";
 import { BackgroundMemoryStorageService } from "../platform/storage/background-memory-storage.service";
@@ -462,7 +462,7 @@ export default class MainBackground {
       },
       self,
     );
-    this.i18nService = new BrowserI18nService(BrowserApi.getUILanguage(), this.stateService);
+    this.i18nService = new I18nService(BrowserApi.getUILanguage(), this.globalStateProvider);
     this.cryptoService = new BrowserCryptoService(
       this.keyGenerationService,
       this.cryptoFunctionService,
@@ -969,7 +969,7 @@ export default class MainBackground {
     await this.stateService.init();
 
     await this.vaultTimeoutService.init(true);
-    await (this.i18nService as BrowserI18nService).init();
+    await (this.i18nService as I18nService).init();
     await (this.eventUploadService as EventUploadService).init(true);
     await this.runtimeBackground.init();
     await this.notificationBackground.init();

apps/browser/src/platform/background/service-factories/i18n-service.factory.ts

@@ -4,6 +4,10 @@ import { I18nService as BaseI18nService } from "@bitwarden/common/platform/servi
 import I18nService from "../../services/i18n.service";
 
 import { FactoryOptions, CachedServices, factory } from "./factory-options";
+import {
+  GlobalStateProviderInitOptions,
+  globalStateProviderFactory,
+} from "./global-state-provider.factory";
 
 type I18nServiceFactoryOptions = FactoryOptions & {
   i18nServiceOptions: {
@@ -11,7 +15,7 @@ type I18nServiceFactoryOptions = FactoryOptions & {
   };
 };
 
-export type I18nServiceInitOptions = I18nServiceFactoryOptions;
+export type I18nServiceInitOptions = I18nServiceFactoryOptions & GlobalStateProviderInitOptions;
 
 export async function i18nServiceFactory(
   cache: { i18nService?: AbstractI18nService } & CachedServices,
@@ -21,7 +25,11 @@ export async function i18nServiceFactory(
     cache,
     "i18nService",
     opts,
-    () => new I18nService(opts.i18nServiceOptions.systemLanguage),
+    async () =>
+      new I18nService(
+        opts.i18nServiceOptions.systemLanguage,
+        await globalStateProviderFactory(cache, opts),
+      ),
   );
   if (!(service as BaseI18nService as any).inited) {
     await (service as BaseI18nService).init();

apps/browser/src/platform/services/browser-i18n.service.ts

@@ -1,20 +0,0 @@
-import { ReplaySubject } from "rxjs";
-
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-
-import { browserSession, sessionSync } from "../decorators/session-sync-observable";
-
-import I18nService from "./i18n.service";
-
-@browserSession
-export class BrowserI18nService extends I18nService {
-  @sessionSync({ initializer: (s: string) => s })
-  protected _locale: ReplaySubject<string>;
-
-  constructor(
-    systemLanguage: string,
-    private stateService: StateService,
-  ) {
-    super(systemLanguage);
-  }
-}

apps/browser/src/platform/services/i18n.service.ts

@@ -1,12 +1,18 @@
 import { I18nService as BaseI18nService } from "@bitwarden/common/platform/services/i18n.service";
+import { GlobalStateProvider } from "@bitwarden/common/platform/state";
 
 export default class I18nService extends BaseI18nService {
-  constructor(systemLanguage: string) {
-    super(systemLanguage, null, async (formattedLocale: string) => {
-      // Deprecated
-      const file = await fetch(this.localesDirectory + formattedLocale + "/messages.json");
-      return await file.json();
-    });
+  constructor(systemLanguage: string, globalStateProvider: GlobalStateProvider) {
+    super(
+      systemLanguage,
+      null,
+      async (formattedLocale: string) => {
+        // Deprecated
+        const file = await fetch(this.localesDirectory + formattedLocale + "/messages.json");
+        return await file.json();
+      },
+      globalStateProvider,
+    );
 
     // Please leave 'en' where it is, as it's our fallback language in case no translation can be found
     this.supportedTranslationLocales = [

apps/browser/src/popup/services/services.module.ts

@@ -1,4 +1,4 @@
-import { APP_INITIALIZER, LOCALE_ID, NgModule, NgZone } from "@angular/core";
+import { APP_INITIALIZER, NgModule, NgZone } from "@angular/core";
 
 import { UnauthGuard as BaseUnauthGuardService } from "@bitwarden/angular/auth/guards";
 import { ThemingService } from "@bitwarden/angular/platform/services/theming/theming.service";
@@ -60,10 +60,7 @@ import {
 } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import {
-  StateService as BaseStateServiceAbstraction,
-  StateService,
-} from "@bitwarden/common/platform/abstractions/state.service";
+import { StateService as BaseStateServiceAbstraction } from "@bitwarden/common/platform/abstractions/state.service";
 import {
   AbstractMemoryStorageService,
   AbstractStorageService,
@@ -75,7 +72,11 @@ import { ConsoleLogService } from "@bitwarden/common/platform/services/console-l
 import { ContainerService } from "@bitwarden/common/platform/services/container.service";
 import { MigrationRunner } from "@bitwarden/common/platform/services/migration-runner";
 import { WebCryptoFunctionService } from "@bitwarden/common/platform/services/web-crypto-function.service";
-import { DerivedStateProvider, StateProvider } from "@bitwarden/common/platform/state";
+import {
+  DerivedStateProvider,
+  GlobalStateProvider,
+  StateProvider,
+} from "@bitwarden/common/platform/state";
 import { SearchService } from "@bitwarden/common/services/search.service";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
 import { UsernameGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/username";
@@ -112,11 +113,11 @@ import { BrowserStateService as StateServiceAbstraction } from "../../platform/s
 import { BrowserConfigService } from "../../platform/services/browser-config.service";
 import { BrowserEnvironmentService } from "../../platform/services/browser-environment.service";
 import { BrowserFileDownloadService } from "../../platform/services/browser-file-download.service";
-import { BrowserI18nService } from "../../platform/services/browser-i18n.service";
 import BrowserLocalStorageService from "../../platform/services/browser-local-storage.service";
 import BrowserMessagingPrivateModePopupService from "../../platform/services/browser-messaging-private-mode-popup.service";
 import BrowserMessagingService from "../../platform/services/browser-messaging.service";
 import { BrowserStateService } from "../../platform/services/browser-state.service";
+import I18nService from "../../platform/services/i18n.service";
 import { ForegroundDerivedStateProvider } from "../../platform/state/foreground-derived-state.provider";
 import { ForegroundMemoryStorageService } from "../../platform/storage/foreground-memory-storage.service";
 import { BrowserSendService } from "../../services/browser-send.service";
@@ -158,11 +159,6 @@ function getBgService<T>(service: keyof MainBackground) {
     DebounceNavigationService,
     DialogService,
     PopupCloseWarningService,
-    {
-      provide: LOCALE_ID,
-      useFactory: () => getBgService<I18nServiceAbstraction>("i18nService")().translationLocale,
-      deps: [],
-    },
     {
       provide: APP_INITIALIZER,
       useFactory: (initService: InitService) => initService.init(),
@@ -254,10 +250,10 @@ function getBgService<T>(service: keyof MainBackground) {
     { provide: TokenService, useFactory: getBgService<TokenService>("tokenService"), deps: [] },
     {
       provide: I18nServiceAbstraction,
-      useFactory: (stateService: BrowserStateService) => {
-        return new BrowserI18nService(BrowserApi.getUILanguage(), stateService);
+      useFactory: (globalStateProvider: GlobalStateProvider) => {
+        return new I18nService(BrowserApi.getUILanguage(), globalStateProvider);
       },
-      deps: [StateService],
+      deps: [GlobalStateProvider],
     },
     {
       provide: CryptoService,