Fix UI language change

web/package/agama-web-ui.changes

@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Fri Feb 20 15:00:44 UTC 2026 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
+
+- Fix the language change (gh#agama-project/agama#3197).
+
 -------------------------------------------------------------------
 Thu Feb 19 13:35:30 UTC 2026 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

web/src/agama.ts

@@ -35,9 +35,9 @@ const agama = {
   language: "en",
 
   // set the current translations, called from po.<lang>.js
-  locale: (po) => {
+  locale: (po: object) => {
     if (po) {
-      Object.assign(translations, po);
+      translations = { ...po };
 
       const header = po[""];
       if (header) {

web/src/components/core/InstallerL10nOptions.test.tsx

@@ -93,7 +93,7 @@ jest.mock("~/hooks/model/status", () => ({
 }));
 
 jest.mock("~/context/installerL10n", () => ({
-  ...jest.requireActual("~/context/installerL10n"),
+  InstallerL10nProvider: ({ children }) => <>{children}</>,
   useInstallerL10n: () => ({
     keymap: "us",
     language: "de-DE",

web/src/components/product/LicenseDialog.test.tsx

@@ -119,7 +119,7 @@ describe("LicenseDialog", () => {
     const { user } = installerRender(<LicenseDialog product={product} onClose={onCloseFn} />, {
       withL10n: true,
     });
-    const closeButton = screen.getByRole("button", { name: "Schließen" });
+    const closeButton = await screen.findByRole("button", { name: "Schließen" });
     await user.click(closeButton);
     expect(onCloseFn).toHaveBeenCalled();
   });

web/src/components/questions/LuksActivationQuestion.test.tsx

@@ -87,7 +87,7 @@ jest.mock("~/hooks/model/config/product", () => ({
 }));
 
 jest.mock("~/context/installerL10n", () => ({
-  ...jest.requireActual("~/context/installerL10n"),
+  InstallerL10nProvider: ({ children }) => <>{children}</>,
   useInstallerL10n: () => ({
     keymap: "us",
     language: "de-DE",

web/src/context/__mocks__/installerL10n.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) [2025-2026] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation; either version 2 of the License, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+
+const L10nContext = React.createContext(null);
+
+export const useInstallerL10n = () => {
+  const context = React.useContext(L10nContext);
+  if (!context) {
+    throw new Error("useInstallerL10n must be used within a InstallerL10nContext");
+  }
+  return context;
+};
+
+export const InstallerL10nProvider = ({ children }) => {
+  const value = {
+    language: "en-US",
+    loadedLanguage: "en-US",
+    keymap: "us",
+    changeLanguage: jest.fn(),
+    changeKeymap: jest.fn(),
+  };
+
+  return <L10nContext.Provider value={value}>{children}</L10nContext.Provider>;
+};

web/src/context/installerL10n.test.tsx

@@ -20,11 +20,14 @@
  * find current contact information at www.suse.com.
  */
 
-import React from "react";
+import React, { Suspense } from "react";
 import { render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { InstallerL10nProvider, useInstallerL10n } from "~/context/installerL10n";
 import { InstallerClientProvider } from "./installer";
 
+jest.unmock("~/context/installerL10n");
+
 const mockUseSystemFn = jest.fn();
 const mockConfigureL10nFn = jest.fn();
 
@@ -81,12 +84,20 @@ describe("InstallerL10nProvider", () => {
   });
 
   it("sets the language from the backend", async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+
     render(
-      <InstallerClientProvider client={client}>
-        <InstallerL10nProvider>
-          <TranslatedContent />
-        </InstallerL10nProvider>
-      </InstallerClientProvider>,
+      <QueryClientProvider client={queryClient}>
+        <Suspense fallback="Loading...">
+          <InstallerClientProvider client={client}>
+            <InstallerL10nProvider>
+              <TranslatedContent />
+            </InstallerL10nProvider>
+          </InstallerClientProvider>
+        </Suspense>
+      </QueryClientProvider>,
     );
 
     await waitFor(() => screen.getByText("hola"));

web/src/context/installerL10n.tsx

@@ -20,7 +20,8 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback } from "react";
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import agama from "~/agama";
 import supportedLanguages from "~/languages.json";
 import { useSystem } from "~/hooks/model/system";
@@ -115,27 +116,34 @@ function findSupportedLanguage(languages: Array<string>): string | undefined {
  * @param locale requested locale
  * @returns Promise with a dynamic import
  */
-async function loadTranslations(locale: string) {
+async function loadTranslations(locale: string): Promise<string> {
   // load the translations dynamically, first try the language + territory
   return import(
     /* webpackChunkName: "[request]" */
     `../po/po.${locale}`
   )
-    .then((m) => agama.locale(m.default))
+    .then((m) => {
+      agama.locale(m.default);
+      return agama.language.replace("-", "_");
+    })
     .catch(async () => {
       // if it fails try the language only
       const po = locale.split("-")[0];
       return import(
         /* webpackChunkName: "[request]" */
         `../po/po.${po}`
       )
-        .then((m) => agama.locale(m.default))
+        .then((m) => {
+          agama.locale(m.default);
+          return agama.language.replace("-", "_");
+        })
         .catch(() => {
-          if (locale !== "en-US") {
+          if (locale && locale !== "en-US") {
             console.error("Cannot load frontend translations for", locale);
           }
           // reset the current translations (use the original English texts)
           agama.locale(null);
+          return agama.language.replace("-", "_");
         });
     });
 }
@@ -162,13 +170,19 @@ function InstallerL10nProvider({
   initialLanguage?: string;
   children?: React.ReactNode;
 }) {
-  const { l10n } = useSystem();
-  const [loadedLanguage, setLoadedLanguage] = useState(initialLanguage);
+  const queryClient = useQueryClient();
+  const system = useSystem();
+  const l10n = system?.l10n;
 
   const locale = l10n?.locale;
-  const language = locale ? languageFromLocale(locale) : initialLanguage;
+  const language = locale ? languageFromLocale(locale) : initialLanguage || "en-US";
   const keymap = l10n?.keymap;
 
+  const { data: loadedLanguage } = useSuspenseQuery({
+    queryKey: ["translations", language],
+    queryFn: () => loadTranslations(language),
+  });
+
   const changeLanguage = useCallback(
     async (lang: string) => {
       const candidateLanguages = [
@@ -178,26 +192,32 @@ function InstallerL10nProvider({
       ].filter((l) => l);
       const newLanguage = findSupportedLanguage(candidateLanguages) || "en-US";
       document.documentElement.lang = newLanguage.split("-")[0];
+
       await configureL10nAction({ locale: languageToLocale(newLanguage) });
+      await queryClient.invalidateQueries({ queryKey: ["translations"] });
     },
-    [language],
+    [language, queryClient],
   );
 
   const changeKeymap = useCallback(async (id: string) => {
     await configureL10nAction({ keymap: id });
   }, []);
 
-  useEffect(() => {
-    if (!language) return;
-
-    loadTranslations(language).then(() => setLoadedLanguage(agama.language.replace("-", "_")));
-  }, [language, setLoadedLanguage]);
-
-  if (!loadedLanguage) return null;
-
-  const value = { loadedLanguage, language, changeLanguage, keymap, changeKeymap };
-
-  return <L10nContext.Provider value={value}>{children}</L10nContext.Provider>;
+  const value = {
+    loadedLanguage,
+    language,
+    changeLanguage,
+    keymap,
+    changeKeymap,
+  };
+
+  // Setting the key forces to reload the children when the language changes
+  // (see https://react.dev/learn/preserving-and-resetting-state).
+  return (
+    <L10nContext.Provider key={language} value={value}>
+      {children}
+    </L10nContext.Provider>
+  );
 }
 
 export { InstallerL10nProvider, useInstallerL10n };

web/src/setupTests.ts

@@ -11,3 +11,5 @@ if (!globalThis.TextEncoder || !globalThis.TextDecoder) {
   globalThis.TextEncoder = NodeTextEncoder as typeof TextEncoder;
   globalThis.TextDecoder = NodeTextDecoder as typeof TextDecoder;
 }
+
+jest.mock("~/context/installerL10n");