Merge pull request #150 from sillsdev/controllerFeatureParity

Controller feature parity: fuzzy script search and variant warning (BL-14903, BL-14904)

Author: andrew-polk

components/language-chooser/common/language-chooser-controller/src/view-models/language-chooser.ts

@@ -3,6 +3,8 @@ import {
   createTagFromOrthography,
   defaultDisplayName,
   formatDialectCode,
+  fuzzilySearchForScripts,
+  getAllScripts,
   type ICustomizableLanguageDetails,
   type ILanguage,
   type IOrthography,
@@ -11,6 +13,7 @@ import {
   isManuallyEnteredTagLanguage,
   isUnlistedLanguage,
   isValidBcp47Tag,
+  isValidBcp47VariantSubtag,
   languageForManuallyEnteredTag,
   UNLISTED_LANGUAGE,
 } from "@ethnolib/find-language";
@@ -61,6 +64,13 @@ export function useLanguageChooserViewModel(
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     () => {}
   );
+  // Called when a submitted variant (dialect) is not in valid BCP 47 variant subtag format.
+  // Submission still proceeds; the resulting tag stays valid because dialects become
+  // private use (-x-) subtags. Views typically show a warning (BL-14904).
+  const warnInvalidVariant = new Field<(dialect: string) => void>(
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    () => {}
+  );
 
   const searchString = new Field("", () => {
     _onSearchStringUpdated();
@@ -247,13 +257,28 @@ export function useLanguageChooserViewModel(
     }
   }
 
+  // All the scripts if the query is empty, otherwise fuzzy matches on script name
+  // and code, best matches first. For script dropdowns with search (BL-14903).
+  function searchScriptOptions(query: string): IScript[] {
+    return query
+      ? fuzzilySearchForScripts(getAllScripts(), query)
+      : getAllScripts();
+  }
+
+  function _warnIfInvalidVariant(dialect: string | undefined) {
+    if (dialect && !isValidBcp47VariantSubtag(dialect)) {
+      warnInvalidVariant.value(dialect);
+    }
+  }
+
   function submitUnlistedLanguageModal({
     name,
     region,
   }: {
     name: string;
     region: IRegion;
   }) {
+    _warnIfInvalidVariant(name);
     const normalizedDialect = formatDialectCode(name);
     customizations.requestUpdate({
       customDisplayName: name,
@@ -271,6 +296,7 @@ export function useLanguageChooserViewModel(
     region?: IRegion;
     dialect?: string;
   }) {
+    _warnIfInvalidVariant(dialect);
     selectedScript.requestUpdate(script);
     customizations.requestUpdate({
       region,
@@ -299,12 +325,14 @@ export function useLanguageChooserViewModel(
     showUnlistedLanguageModal,
     showCustomizeLanguageModal,
     promptForCustomTag,
+    warnInvalidVariant,
 
     // Methods
     search,
     onCustomizeButtonClicked,
     submitUnlistedLanguageModal,
     submitCustomizeLanguageModal,
+    searchScriptOptions,
   };
 }
 

components/language-chooser/common/language-chooser-controller/test/language-chooser.spec.ts

@@ -730,6 +730,96 @@ describe("customize language modal", () => {
   });
 });
 
+describe("script options search", () => {
+  it("returns all scripts for an empty query", () => {
+    const t = new TestHelper();
+    const allScripts = t.viewModel.searchScriptOptions("");
+    expect(allScripts.length).toBeGreaterThan(100);
+  });
+
+  it("finds a script by fuzzy matching a misspelled name", () => {
+    const t = new TestHelper();
+    const results = t.viewModel.searchScriptOptions("Cyrilic");
+    expect(results[0].code).toBe("Cyrl");
+  });
+
+  it("finds a script by code", () => {
+    const t = new TestHelper();
+    const results = t.viewModel.searchScriptOptions("Latn");
+    expect(results[0].code).toBe("Latn");
+  });
+});
+
+describe("invalid variant warning", () => {
+  it("fires when customize modal submits an invalidly formatted variant", () => {
+    const t = new TestHelper({ initialLanguages: [NorthernUzbekLanguage] });
+    t.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
+    const spy = vi.fn();
+    t.viewModel.warnInvalidVariant.requestUpdate(spy);
+
+    // 11 characters, too long for a BCP 47 variant subtag (5-8)
+    t.viewModel.submitCustomizeLanguageModal({ dialect: "dialectTest" });
+
+    expect(spy).toHaveBeenCalledWith("dialectTest");
+  });
+
+  it("still applies the customizations after warning", () => {
+    const t = new TestHelper({ initialLanguages: [NorthernUzbekLanguage] });
+    t.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
+    t.viewModel.warnInvalidVariant.requestUpdate(vi.fn());
+
+    t.viewModel.submitCustomizeLanguageModal({ dialect: "dialectTest" });
+
+    expect(t.viewModel.customizations.value?.dialect).toBe("dialectTest");
+  });
+
+  it("does not fire for a valid variant", () => {
+    const t = new TestHelper({ initialLanguages: [NorthernUzbekLanguage] });
+    t.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
+    const spy = vi.fn();
+    t.viewModel.warnInvalidVariant.requestUpdate(spy);
+
+    t.viewModel.submitCustomizeLanguageModal({ dialect: "foobar" });
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it("does not fire for an empty variant", () => {
+    const t = new TestHelper({ initialLanguages: [NorthernUzbekLanguage] });
+    t.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
+    const spy = vi.fn();
+    t.viewModel.warnInvalidVariant.requestUpdate(spy);
+
+    t.viewModel.submitCustomizeLanguageModal({});
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it("does not fire for ai- variants", () => {
+    const t = new TestHelper({ initialLanguages: [NorthernUzbekLanguage] });
+    t.viewModel.listedLanguages.value[0].isSelected.requestUpdate(true);
+    const spy = vi.fn();
+    t.viewModel.warnInvalidVariant.requestUpdate(spy);
+
+    t.viewModel.submitCustomizeLanguageModal({ dialect: "ai-translation" });
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it("fires when unlisted modal submits a name that is not a valid variant", () => {
+    const t = new TestHelper();
+    const spy = vi.fn();
+    t.viewModel.warnInvalidVariant.requestUpdate(spy);
+
+    t.viewModel.submitUnlistedLanguageModal({
+      name: "Foo Bar",
+      region: AndorraRegion,
+    });
+
+    expect(spy).toHaveBeenCalledWith("Foo Bar");
+  });
+});
+
 describe("edit custom tag prompt", () => {
   it("shows when custom tag exists and customization button is clicked", () => {
     const t = new TestHelper();