Encapsulate message format to translations (#680)

Author: lewisbirks

src/main/frontend/common/RestClient.tsx

@@ -2,7 +2,7 @@ import {
   Result,
   StageInfo,
 } from "../pipeline-graph-view/pipeline-graph/main/index.ts";
-import { ResourceBundle } from "./i18n/translations.ts";
+import { ResourceBundle } from "./i18n/index.ts";
 
 export interface RunStatus {
   stages: StageInfo[];

src/main/frontend/common/i18n/i18n-provider.tsx

@@ -7,14 +7,14 @@ import React, {
   useState,
 } from "react";
 import {
-  defaultTranslations,
-  getTranslations,
+  defaultMessages,
+  getMessages,
   ResourceBundleName,
-  Translations,
-} from "./translations.ts";
+  Messages,
+} from "./messages.ts";
 
-export const I18NContext: Context<Translations> = createContext(
-  new Translations({}),
+export const I18NContext: Context<Messages> = createContext(
+  defaultMessages("en"),
 );
 
 interface I18NProviderProps {
@@ -28,19 +28,17 @@ export const I18NProvider: FunctionComponent<I18NProviderProps> = ({
   bundles,
   locale,
 }) => {
-  const [translations, setTranslations] = useState<Translations>(
-    defaultTranslations(locale),
-  );
+  const [messages, setMessages] = useState<Messages>(defaultMessages(locale));
 
   useEffect(() => {
-    const fetchTranslations = async () => {
-      const translations = await getTranslations(locale, bundles);
-      setTranslations(translations);
+    const fetchMessages = async () => {
+      const found = await getMessages(locale, bundles);
+      setMessages(found);
     };
-    fetchTranslations();
+    fetchMessages();
   }, []);
 
   return (
-    <I18NContext.Provider value={translations}>{children}</I18NContext.Provider>
+    <I18NContext.Provider value={messages}>{children}</I18NContext.Provider>
   );
 };

src/main/frontend/common/i18n/index.ts

@@ -0,0 +1,3 @@
+export { Messages, ResourceBundleName } from "./messages.ts";
+export type { ResourceBundle } from "./messages.ts";
+export * from "./i18n-provider.tsx";

src/main/frontend/common/i18n/messages.spec.ts

@@ -0,0 +1,62 @@
+import { Mock, vi } from "vitest";
+
+import { getResourceBundle } from "../RestClient.tsx";
+import { getMessages, ResourceBundleName, Messages } from "./messages.ts";
+
+vi.mock("../RestClient.tsx", () => ({
+  getResourceBundle: vi.fn(),
+}));
+
+describe("Messages", () => {
+  describe("Format message", () => {
+    const messages = new Messages(
+      {
+        "Property.name": "{arg} world",
+      },
+      "en",
+    );
+
+    it("should use known mapped message", () => {
+      expect(messages.format("Property.name", { arg: "hello" })).toEqual(
+        "hello world",
+      );
+    });
+
+    it("should use fallback formatter with unknown property", () => {
+      expect(
+        messages.format("Unknown.property.name", { arg: "hello" }),
+      ).toEqual("hello");
+    });
+  });
+
+  describe("Get Messages", () => {
+    it("should compile found resource bundle", async () => {
+      (getResourceBundle as Mock).mockResolvedValue({
+        "A.property": "a value",
+        "Another.property": "with another value",
+        "One.more.property": "with {one} more value",
+      });
+      const messages = await getMessages("en", [ResourceBundleName.messages]);
+
+      expect(getResourceBundle).toHaveBeenCalledWith(
+        "io.jenkins.plugins.pipelinegraphview.Messages",
+      );
+      expect(messages.format("A.property")).toEqual("a value");
+      expect(messages.format("Another.property")).toEqual("with another value");
+      expect(messages.format("One.more.property", { one: "some" })).toEqual(
+        "with some more value",
+      );
+    });
+
+    it("should use the default messages if undefined returned", async () => {
+      (getResourceBundle as Mock).mockResolvedValue(undefined);
+
+      const messages = await getMessages("en", [ResourceBundleName.messages]);
+
+      expect(messages.format("Util.second", { 0: 5 })).toEqual("5 sec");
+      expect(messages.format("Util.day", { 0: 1 })).toEqual("1 day");
+      expect(messages.format("Util.day", { 0: 2 })).toEqual("2 days");
+      expect(messages.format("A.property")).toEqual("");
+    });
+  });
+});

…ain/frontend/common/i18n/translations.ts src/main/frontend/common/i18n/messages.tssrc/main/frontend/common/i18n/translations.ts renamed to src/main/frontend/common/i18n/messages.ts src/main/frontend/common/i18n/translations.ts renamed to src/main/frontend/common/i18n/messages.ts

@@ -2,22 +2,26 @@ import MessageFormat, { MessageFunction } from "@messageformat/core";
 import { getResourceBundle } from "../RestClient.tsx";
 import { choiceFormatter } from "./choice-formatter.ts";
 
-export interface ResourceBundle {
+export type ResourceBundle = {
   [key: string]: string;
-}
-
-interface Message {
-  [key: string]: MessageFunction<"string">;
-}
+};
 
-export class Translations {
-  private readonly mapping: Message;
+export class Messages {
+  private readonly mapping: Record<string, MessageFunction<"string">>;
 
-  constructor(mapping: Message) {
-    this.mapping = mapping;
+  constructor(messages: ResourceBundle, locale: string) {
+    const entries = Object.entries(messages);
+    if (entries.length === 0) {
+      this.mapping = {};
+    } else {
+      const fmt = messageFormat(locale);
+      this.mapping = Object.fromEntries(
+        entries.map(([key, value]) => [key, fmt.compile(value)]),
+      );
+    }
   }
 
-  get(key: string): MessageFunction<"string"> {
+  private get(key: string): MessageFunction<"string"> {
     const message = this.mapping[key];
     if (message != null) {
       return message;
@@ -29,9 +33,14 @@ export class Translations {
       return params === undefined ? "" : Object.values(params as any).join(" ");
     };
   }
+
+  format(key: string, args: Record<string, any> | null = null): string {
+    const message = this.get(key);
+    return args === null ? message() : message(args);
+  }
 }
 
-export function messageFormat(locale: string) {
+function messageFormat(locale: string) {
   return new MessageFormat(locale, {
     customFormatters: {
       choice: choiceFormatter,
@@ -43,10 +52,10 @@ export enum ResourceBundleName {
   messages = "io.jenkins.plugins.pipelinegraphview.Messages",
 }
 
-export async function getTranslations(
+export async function getMessages(
   locale: string,
   bundleNames: ResourceBundleName[],
-): Promise<Translations> {
+): Promise<Messages> {
   const bundles = await Promise.all(
     bundleNames.map((name) => getResourceBundle(name).then((r) => r ?? {})),
   );
@@ -56,13 +65,7 @@ export async function getTranslations(
     DEFAULT_MESSAGES,
   );
 
-  const fmt = messageFormat(locale);
-
-  const mapping: Message = Object.fromEntries(
-    Object.entries(messages).map(([key, value]) => [key, fmt.compile(value)]),
-  );
-
-  return new Translations(mapping);
+  return new Messages(messages, locale);
 }
 
 const DEFAULT_MESSAGES: ResourceBundle = {
@@ -77,15 +80,6 @@ const DEFAULT_MESSAGES: ResourceBundle = {
   noBuilds: "No builds",
 };
 
-export function defaultTranslations(locale: string) {
-  const fmt = messageFormat(locale);
-
-  return new Translations(
-    Object.fromEntries(
-      Object.entries(DEFAULT_MESSAGES).map(([key, value]) => [
-        key,
-        fmt.compile(value),
-      ]),
-    ),
-  );
+export function defaultMessages(locale: string): Messages {
+  return new Messages(DEFAULT_MESSAGES, locale);
 }

src/main/frontend/common/i18n/translations.spec.ts

@@ -4,29 +4,29 @@ import { vi } from "vitest";
 import React from "react";
 import { Paused, Started, Total } from "./timings.tsx";
 import { render } from "@testing-library/react";
-import { I18NContext } from "../i18n/i18n-provider.tsx";
-import { Translations } from "../i18n/translations.ts";
-import MessageFormat from "@messageformat/core";
+import { I18NContext, Messages } from "../i18n/index.ts";
 
 describe("Timings", () => {
-  const msg = new MessageFormat("en");
-
-  const translations = new Translations({
-    "Util.year": msg.compile("{0} yr"),
-    "Util.month": msg.compile("{0} mo"),
-    "Util.day": msg.compile("{0} day"),
-    "Util.hour": msg.compile("{0} hr"),
-    "Util.minute": msg.compile("{0} min"),
-    "Util.second": msg.compile("{0} sec"),
-    "Util.millisecond": msg.compile("{0} ms"),
-    startedAgo: msg.compile("Started {0} ago"),
-  });
+  const translations = new Messages(
+    {
+      "Util.year": "{0} yr",
+      "Util.month": "{0} mo",
+      "Util.day": "{0} day",
+      "Util.hour": "{0} hr",
+      "Util.minute": "{0} min",
+      "Util.second": "{0} sec",
+      "Util.millisecond": "{0} ms",
+      startedAgo: "Started {0} ago",
+    },
+    "en",
+  );
 
   function process(child: any) {
     return render(
       <I18NContext.Provider value={translations}>{child}</I18NContext.Provider>,
     );
   }
+
   describe("Total", () => {
     function getTotal(ms: number) {
       return process(<Total ms={ms} />);