[PS-713] Fix locale search bug (#3014)

* [PS-713] Fix locale search bug

* [PS-713] Add new locales to start at 1 char search

* [PS-713] Switch to ReplaySubject and other edits from PR comments

* PS-713: Add destroy to other sub and make locale inline a const

* PS-713: Use firstValueFrom instead of takeUntil

* PS-713: get this.locale asynchronously

Co-authored-by: Colton Hurst <churst@bitwarden.com>

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

@@ -1,5 +1,7 @@
+import { Observable } from "rxjs";
+
 export abstract class I18nService {
-  locale: string;
+  locale$: Observable<string>;
   supportedTranslationLocales: string[];
   translationLocale: string;
   collator: Intl.Collator;

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

@@ -1,7 +1,10 @@
+import { Observable, ReplaySubject } from "rxjs";
+
 import { I18nService as I18nServiceAbstraction } from "../abstractions/i18n.service";
 
 export class I18nService implements I18nServiceAbstraction {
-  locale: string;
+  private _locale = new ReplaySubject<string>(1);
+  locale$: Observable<string> = this._locale.asObservable();
   // First locale is the default (English)
   supportedTranslationLocales: string[] = ["en"];
   translationLocale: string;
@@ -85,10 +88,14 @@ export class I18nService implements I18nServiceAbstraction {
     }
 
     this.inited = true;
-    this.locale = this.translationLocale = locale != null ? locale : this.systemLanguage;
+    this.translationLocale = locale != null ? locale : this.systemLanguage;
+    this._locale.next(this.translationLocale);
 
     try {
-      this.collator = new Intl.Collator(this.locale, { numeric: true, sensitivity: "base" });
+      this.collator = new Intl.Collator(this.translationLocale, {
+        numeric: true,
+        sensitivity: "base",
+      });
     } catch {
       this.collator = null;
     }

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

@@ -14,16 +14,23 @@ export class SearchService implements SearchServiceAbstraction {
   indexedEntityId?: string = null;
   private indexing = false;
   private index: lunr.Index = null;
-  private searchableMinLength = 2;
+  private readonly immediateSearchLocales: string[] = ["zh-CN", "zh-TW", "ja", "ko", "vi"];
+  private readonly defaultSearchableMinLength: number = 2;
+  private searchableMinLength: number = this.defaultSearchableMinLength;
 
   constructor(
     private cipherService: CipherService,
     private logService: LogService,
     private i18nService: I18nService
   ) {
-    if (["zh-CN", "zh-TW"].indexOf(i18nService.locale) !== -1) {
-      this.searchableMinLength = 1;
-    }
+    this.i18nService.locale$.subscribe((locale) => {
+      if (this.immediateSearchLocales.indexOf(locale) !== -1) {
+        this.searchableMinLength = 1;
+      } else {
+        this.searchableMinLength = this.defaultSearchableMinLength;
+      }
+    });
+
     //register lunr pipeline function
     lunr.Pipeline.registerFunction(this.normalizeAccentsPipelineFunction, "normalizeAccents");
   }

libs/components/src/utils/i18n-mock.service.ts

@@ -1,7 +1,9 @@
+import { Observable } from "rxjs";
+
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
 export class I18nMockService implements I18nService {
-  locale: string;
+  locale$: Observable<string>;
   supportedTranslationLocales: string[];
   translationLocale: string;
   collator: Intl.Collator;