Merge pull request #70 from sillsdev/BL-14355_fix_preloaded_langs

fix: BL-14355 fix preloaded langs inconsistency (#70)

Author: andrew-polk

components/language-chooser/common/find-language/searchForLanguage.spec.ts

@@ -189,4 +189,15 @@ describe("getLanguageBySubtag", () => {
     expect(getLanguageBySubtag("aaa")?.exonym).toEqual("Ghotuo");
     expect(getLanguageBySubtag("ab")?.exonym).toEqual("Abkhaz");
   });
+  it("should use searchResultModifier if provided", () => {
+    const foobar = "foobar";
+    const modifier = (
+      results: FuseResult<ILanguage>[],
+      _searchString: string
+    ) =>
+      results.map((result) => {
+        return { ...result.item, exonym: foobar };
+      });
+    expect(getLanguageBySubtag("en", modifier)?.exonym).toEqual(foobar);
+  });
 });

components/language-chooser/common/find-language/searchForLanguage.ts

@@ -99,11 +99,19 @@ export function searchForLanguage(
 }
 
 // get language (not macrolanguage) with exact match on subtag
-export function getLanguageBySubtag(code: string): ILanguage | undefined {
+export function getLanguageBySubtag(
+  code: string,
+  searchResultModifier?: (
+    results: FuseResult<ILanguage>[],
+    searchString: string
+  ) => ILanguage[]
+): ILanguage | undefined {
   const fuse = new Fuse(languages as ILanguage[], {
     keys: ["languageSubtag", "iso639_3_code"],
     threshold: 0, // exact matches only
   });
-  const results = fuse.search(code);
-  return results[0]?.item;
+  const rawResults = fuse.search(code);
+  return searchResultModifier
+    ? searchResultModifier(rawResults, code)[0]
+    : rawResults[0]?.item;
 }

components/language-chooser/react/common/language-chooser-react-hook/languageTagHandling.spec.ts

@@ -9,7 +9,12 @@ import {
   UNLISTED_LANGUAGE,
   isUnlistedLanguage,
 } from "./languageTagHandling";
-import { getRegionBySubtag, LanguageType } from "@ethnolib/find-language";
+import {
+  getRegionBySubtag,
+  ILanguage,
+  LanguageType,
+} from "@ethnolib/find-language";
+import { FuseResult } from "fuse.js";
 describe("Tag parsing", () => {
   it("should find a language by 2 letter language subtag", () => {
     expect(parseLangtagFromLangChooser("ja")?.language?.exonym).toEqual(
@@ -120,27 +125,43 @@ describe("Tag parsing", () => {
       ssh_Arab_x_foobar_result?.customDetails?.region?.name
     ).toBeUndefined();
     expect(ssh_Arab_x_foobar_result?.customDetails?.dialect).toEqual("foobar");
-  });
 
-  const ssh_AE_x_foobar_result = parseLangtagFromLangChooser("ssh-AE-x-foobar");
-  expect(ssh_AE_x_foobar_result?.language?.exonym).toEqual("Shihhi Arabic");
-  expect(ssh_AE_x_foobar_result?.script?.name).toEqual("Arabic");
-  expect(ssh_AE_x_foobar_result?.customDetails?.region?.name).toEqual(
-    "United Arab Emirates"
-  );
-  expect(ssh_AE_x_foobar_result?.customDetails?.dialect).toEqual("foobar");
+    const ssh_AE_x_foobar_result =
+      parseLangtagFromLangChooser("ssh-AE-x-foobar");
+    expect(ssh_AE_x_foobar_result?.language?.exonym).toEqual("Shihhi Arabic");
+    expect(ssh_AE_x_foobar_result?.script?.name).toEqual("Arabic");
+    expect(ssh_AE_x_foobar_result?.customDetails?.region?.name).toEqual(
+      "United Arab Emirates"
+    );
+    expect(ssh_AE_x_foobar_result?.customDetails?.dialect).toEqual("foobar");
 
-  const ssh_Arab_AE_x_foobar_result = parseLangtagFromLangChooser(
-    "ssh-Arab-AE-x-foobar"
-  );
-  expect(ssh_Arab_AE_x_foobar_result?.language?.exonym).toEqual(
-    "Shihhi Arabic"
-  );
-  expect(ssh_Arab_AE_x_foobar_result?.script?.name).toEqual("Arabic");
-  expect(ssh_Arab_AE_x_foobar_result?.customDetails?.region?.name).toEqual(
-    "United Arab Emirates"
-  );
-  expect(ssh_Arab_AE_x_foobar_result?.customDetails?.dialect).toEqual("foobar");
+    const ssh_Arab_AE_x_foobar_result = parseLangtagFromLangChooser(
+      "ssh-Arab-AE-x-foobar"
+    );
+    expect(ssh_Arab_AE_x_foobar_result?.language?.exonym).toEqual(
+      "Shihhi Arabic"
+    );
+    expect(ssh_Arab_AE_x_foobar_result?.script?.name).toEqual("Arabic");
+    expect(ssh_Arab_AE_x_foobar_result?.customDetails?.region?.name).toEqual(
+      "United Arab Emirates"
+    );
+    expect(ssh_Arab_AE_x_foobar_result?.customDetails?.dialect).toEqual(
+      "foobar"
+    );
+  });
+  it("uses searchResultModifier if provided", () => {
+    const foobar = "foobar";
+    const modifier = (
+      results: FuseResult<ILanguage>[],
+      _searchString: string
+    ) =>
+      results.map((result) => {
+        return { ...result.item, exonym: foobar };
+      });
+    expect(
+      parseLangtagFromLangChooser("en", modifier)?.language?.exonym
+    ).toEqual(foobar);
+  });
 });
 
 describe("defaultRegionForLangTag", () => {
@@ -162,6 +183,18 @@ describe("defaultRegionForLangTag", () => {
       "Uzbekistan"
     );
   });
+
+  it("uses searchResultModifier if provided", () => {
+    // If using a search result modifier that filters out all results, we should no longer find a region
+    const searchResultModifier = (
+      _results: FuseResult<ILanguage>[],
+      _searchString: string
+    ): ILanguage[] => {
+      return [];
+    };
+    expect(defaultRegionForLangTag("uz")).not.toBeUndefined();
+    expect(defaultRegionForLangTag("uz", searchResultModifier)).toBeUndefined();
+  });
 });
 
 describe("createTagFromOrthography", () => {

components/language-chooser/react/common/language-chooser-react-hook/languageTagHandling.ts

@@ -11,6 +11,7 @@ import {
   IScript,
   LanguageType,
 } from "@ethnolib/find-language";
+import { FuseResult } from "fuse.js";
 
 const UNLISTED_LANGUAGE_CODE = "qaa";
 export const UNLISTED_LANGUAGE = {
@@ -100,7 +101,11 @@ export function createTagFromOrthography(orthography: IOrthography): string {
 // undefined if it encounters any of these, e.g. in cases where a langtag was manually
 // entered in the language chooser.
 export function parseLangtagFromLangChooser(
-  languageTag: string // must be the default language subtag for the language
+  languageTag: string, // must be the default language subtag for the language
+  searchResultModifier?: (
+    results: FuseResult<ILanguage>[],
+    searchString: string
+  ) => ILanguage[]
 ): IOrthography | undefined {
   const parts = languageTag.split(/-[xX]-/);
   const privateUseSubtag = parts[1];
@@ -115,7 +120,7 @@ export function parseLangtagFromLangChooser(
   if (isUnlistedLanguage) {
     language = UNLISTED_LANGUAGE;
   } else {
-    language = getLanguageBySubtag(languageSubtag || "");
+    language = getLanguageBySubtag(languageSubtag || "", searchResultModifier);
   }
   if (!language) {
     console.log(
@@ -195,9 +200,18 @@ export function parseLangtagFromLangChooser(
   } as IOrthography;
 }
 
-export function defaultRegionForLangTag(languageTag: string) {
+export function defaultRegionForLangTag(
+  languageTag: string,
+  searchResultModifier?: (
+    results: FuseResult<ILanguage>[],
+    searchString: string
+  ) => ILanguage[]
+): IRegion | undefined {
   // if languageTag already has a region tag in it, use that
-  const orthography = parseLangtagFromLangChooser(languageTag);
+  const orthography = parseLangtagFromLangChooser(
+    languageTag,
+    searchResultModifier
+  );
   if (orthography?.customDetails?.region) {
     return orthography.customDetails.region;
   }
@@ -212,6 +226,9 @@ export function defaultRegionForLangTag(languageTag: string) {
     getMaximalLangtag(`${languageSubtag}-${scriptSubtag}`) ||
     getMaximalLangtag(`${languageSubtag}`) ||
     "";
-  const maximalTagOrthography = parseLangtagFromLangChooser(maximalTag);
+  const maximalTagOrthography = parseLangtagFromLangChooser(
+    maximalTag,
+    searchResultModifier
+  );
   return maximalTagOrthography?.customDetails?.region;
 }

components/language-chooser/react/common/language-chooser-react-hook/useLanguageChooser.ts

@@ -94,7 +94,8 @@ export const useLanguageChooser = (
     if (!selectionLanguageTag) return;
 
     let initialSelections = parseLangtagFromLangChooser(
-      selectionLanguageTag || ""
+      selectionLanguageTag || "",
+      searchResultModifier
     );
     if (selectionLanguageTag && !initialSelections) {
       // we failed to parse the tag, meaning this is a langtag requiring manual entry

components/language-chooser/react/language-chooser-react-mui/src/demos/LanguageChooserDialog.tsx

@@ -12,10 +12,7 @@ import {
 
 import "../styles.css";
 import { ILanguageChooserProps, LanguageChooser } from "../LanguageChooser";
-import {
-  IOrthography,
-  parseLangtagFromLangChooser,
-} from "@ethnolib/language-chooser-react-hook";
+import { IOrthography } from "@ethnolib/language-chooser-react-hook";
 import React from "react";
 
 export const LanguageChooserDialog: React.FunctionComponent<
@@ -34,12 +31,8 @@ export const LanguageChooserDialog: React.FunctionComponent<
   dialogHeight,
   ...languageChooserProps
 }) => {
-  const initialSelection: IOrthography | undefined =
-    parseLangtagFromLangChooser(
-      languageChooserProps.initialSelectionLanguageTag || ""
-    );
   const [pendingSelection, setPendingSelection] = React.useState(
-    initialSelection || ({} as IOrthography)
+    {} as IOrthography
   );
   const [pendingLanguageTag, setPendingLanguageTag] = React.useState(
     languageChooserProps.initialSelectionLanguageTag || ""