Propagate locale throughout the application

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

@@ -3,10 +3,12 @@ import {
   createContext,
   FunctionComponent,
   ReactNode,
+  useContext,
   useEffect,
   useState,
 } from "react";
 
+import { DEFAULT_LOCALE, LocaleContext } from "./locale-provider.tsx";
 import {
   defaultMessages,
   getMessages,
@@ -15,20 +17,20 @@ import {
 } from "./messages.ts";
 
 export const I18NContext: Context<Messages> = createContext(
-  defaultMessages("en"),
+  defaultMessages(DEFAULT_LOCALE),
 );
 
 interface I18NProviderProps {
   children: ReactNode;
   bundles: ResourceBundleName[];
-  locale: string;
 }
 
 export const I18NProvider: FunctionComponent<I18NProviderProps> = ({
   children,
   bundles,
-  locale,
 }) => {
+  const locale = useContext(LocaleContext);
+
   const [messages, setMessages] = useState<Messages>(defaultMessages(locale));
 
   useEffect(() => {

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

@@ -1,4 +1,5 @@
 export * from "./i18n-provider.tsx";
+export * from "./locale-provider.tsx";
 export type { MessageContext } from "./message-format.ts";
 export type { ResourceBundle } from "./messages.ts";
 export { Messages, ResourceBundleName } from "./messages.ts";

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

@@ -0,0 +1,20 @@
+import { Context, createContext, FunctionComponent, ReactNode } from "react";
+
+export const DEFAULT_LOCALE = "en";
+export const LocaleContext: Context<string> = createContext(DEFAULT_LOCALE);
+
+interface LocaleProviderProps {
+  children: ReactNode;
+  locale: string;
+}
+
+export const LocaleProvider: FunctionComponent<LocaleProviderProps> = ({
+  children,
+  locale,
+}) => {
+  return (
+    <LocaleContext.Provider value={locale ?? DEFAULT_LOCALE}>
+      {children}
+    </LocaleContext.Provider>
+  );
+};

src/main/frontend/multi-pipeline-graph-view/app.tsx

@@ -3,19 +3,23 @@ import "./multi-pipeline-graph/styles/main.scss";
 
 import { FunctionComponent } from "react";
 
-import { I18NProvider } from "../common/i18n/i18n-provider.tsx";
-import { ResourceBundleName } from "../common/i18n/messages.ts";
+import {
+  I18NProvider,
+  LocaleProvider,
+  ResourceBundleName,
+} from "../common/i18n/index.ts";
 import { MultiPipelineGraph } from "./multi-pipeline-graph/main/MultiPipelineGraph.tsx";
 
 const App: FunctionComponent = () => {
-  const locale =
-    document.getElementById("multiple-pipeline-root")?.dataset.userLocale ??
-    "en";
+  const locale = document.getElementById("multiple-pipeline-root")!.dataset
+    .userLocale!;
   return (
     <div>
-      <I18NProvider bundles={[ResourceBundleName.messages]} locale={locale}>
-        <MultiPipelineGraph />
-      </I18NProvider>
+      <LocaleProvider locale={locale}>
+        <I18NProvider bundles={[ResourceBundleName.messages]}>
+          <MultiPipelineGraph />
+        </I18NProvider>
+      </LocaleProvider>
     </div>
   );
 };

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 
-import { I18NContext } from "../../../common/i18n/i18n-provider.tsx";
+import { I18NContext, LocaleContext } from "../../../common/i18n/index.ts";
 import { RunInfo } from "./MultiPipelineGraphModel.ts";
 import SingleRun from "./SingleRun.tsx";
 import startPollingRunsStatus from "./support/startPollingRunsStatus.ts";
@@ -10,7 +10,7 @@ export const MultiPipelineGraph = () => {
   const [poll, setPoll] = useState(false);
 
   const rootElement = document.getElementById("multiple-pipeline-root");
-  const currentJobPath = rootElement?.dataset.currentJobPath!;
+  const currentJobPath = rootElement!.dataset.currentJobPath!;
 
   useEffect(() => {
     if (!poll) {
@@ -21,9 +21,11 @@ export const MultiPipelineGraph = () => {
     }
   }, [runs, poll]);
 
+  const locale = useContext(LocaleContext);
+
   const groupedRuns: Record<string, RunInfo[]> = runs.reduce(
     (acc: Record<string, RunInfo[]>, run) => {
-      const date = new Date(run.timestamp).toLocaleDateString("en-US", {
+      const date = new Date(run.timestamp).toLocaleDateString(locale, {
         year: "numeric",
         month: "long",
         day: "numeric",

src/main/frontend/pipeline-console-view/app.tsx

@@ -1,7 +1,10 @@
 import { lazy } from "react";
 
-import { I18NProvider } from "../common/i18n/i18n-provider.tsx";
-import { ResourceBundleName } from "../common/i18n/messages.ts";
+import {
+  I18NProvider,
+  LocaleProvider,
+  ResourceBundleName,
+} from "../common/i18n/index.ts";
 import { FilterProvider } from "./pipeline-console/main/providers/filter-provider.tsx";
 import { LayoutPreferencesProvider } from "./pipeline-console/main/providers/user-preference-provider.tsx";
 
@@ -10,16 +13,17 @@ const PipelineConsole = lazy(
 );
 
 export default function App() {
-  const locale =
-    document.getElementById("console-pipeline-root")?.dataset.userLocale ??
-    "en";
+  const locale = document.getElementById("console-pipeline-root")!.dataset
+    .userLocale!;
   return (
-    <I18NProvider bundles={[ResourceBundleName.messages]} locale={locale}>
-      <FilterProvider>
-        <LayoutPreferencesProvider>
-          <PipelineConsole />
-        </LayoutPreferencesProvider>
-      </FilterProvider>
-    </I18NProvider>
+    <LocaleProvider locale={locale}>
+      <I18NProvider bundles={[ResourceBundleName.messages]}>
+        <FilterProvider>
+          <LayoutPreferencesProvider>
+            <PipelineConsole />
+          </LayoutPreferencesProvider>
+        </FilterProvider>
+      </I18NProvider>
+    </LocaleProvider>
   );
 }