web: adapt l10n to work with new api

web/src/api/l10n/system.ts

@@ -28,7 +28,7 @@ type Keymap = {
   /**
    * Keyboard name (e.g., "English (US)").
    */
-  name: string;
+  description: string;
 };
 
 type Locale = {
@@ -39,7 +39,7 @@ type Locale = {
   /**
    * Language name (e.g., "English").
    */
-  name: string;
+  language: string;
   /**
    * Territory name (e.g., "United States").
    */

web/src/components/core/InstallerOptions.tsx

@@ -107,7 +107,7 @@ const KeyboardFormInput = ({ value, onChange }: SelectProps) => {
         onChange={onChange}
       >
         {keymaps.map((keymap, index) => (
-          <FormSelectOption key={index} value={keymap.id} label={keymap.name} />
+          <FormSelectOption key={index} value={keymap.id} label={keymap.description} />
         ))}
       </FormSelect>
     </FormGroup>

web/src/components/l10n/KeyboardSelection.test.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2024] SUSE LLC
+ * Copyright (c) [2024-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -25,32 +25,28 @@ import KeyboardSelection from "./KeyboardSelection";
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/react";
 import { mockNavigateFn, installerRender } from "~/test-utils";
-import { Keymap } from "~/api/system";
+import { Keymap } from "~/api/l10n/system";
+
+const mockPatchConfigFn = jest.fn();
 
 const keymaps: Keymap[] = [
-  { id: "us", name: "English" },
-  { id: "es", name: "Spanish" },
+  { id: "us", description: "English" },
+  { id: "es", description: "Spanish" },
 ];
 
-const mockUpdateConfigFn = jest.fn();
-
 jest.mock("~/components/product/ProductRegistrationAlert", () => () => (
   <div>ProductRegistrationAlert Mock</div>
 ));
 
-jest.mock("~/queries/system", () => ({
-  ...jest.requireActual("~/queries/system"),
+jest.mock("~/hooks/api", () => ({
+  ...jest.requireActual("~/hooks/api"),
   useSystem: () => ({ l10n: { keymaps } }),
-}));
-
-jest.mock("~/queries/proposal", () => ({
-  ...jest.requireActual("~/queries/proposal"),
   useProposal: () => ({ l10n: { keymap: "us" } }),
 }));
 
-jest.mock("~/api/api", () => ({
-  ...jest.requireActual("~/api/api"),
-  updateConfig: (config) => mockUpdateConfigFn(config),
+jest.mock("~/api", () => ({
+  ...jest.requireActual("~/api"),
+  patchConfig: (config) => mockPatchConfigFn(config),
 }));
 
 jest.mock("react-router", () => ({
@@ -65,6 +61,6 @@ it("allows changing the keyboard", async () => {
   await userEvent.click(option);
   const button = await screen.findByRole("button", { name: "Select" });
   await userEvent.click(button);
-  expect(mockUpdateConfigFn).toHaveBeenCalledWith({ l10n: { keymap: "es" } });
+  expect(mockPatchConfigFn).toHaveBeenCalledWith({ l10n: { keymap: "es" } });
   expect(mockNavigateFn).toHaveBeenCalledWith(-1);
 });

web/src/components/l10n/KeyboardSelection.tsx

@@ -34,15 +34,15 @@ export default function KeyboardSelection() {
   const navigate = useNavigate();
   const {
     l10n: { keymaps },
-  } = useSystem();
+  } = useSystem({ suspense: true });
   const {
     l10n: { keymap: currentKeymap },
-  } = useProposal();
+  } = useProposal({ suspense: true });
 
   // FIXME: get current keymap from either, proposal or config
   const [selected, setSelected] = useState(currentKeymap);
   const [filteredKeymaps, setFilteredKeymaps] = useState(
-    keymaps.sort((k1, k2) => (k1.name > k2.name ? 1 : -1)),
+    keymaps.sort((k1, k2) => (k1.description > k2.description ? 1 : -1)),
   );
 
   const searchHelp = _("Filter by description or keymap code");
@@ -54,7 +54,7 @@ export default function KeyboardSelection() {
     navigate(-1);
   };
 
-  let keymapsList = filteredKeymaps.map(({ id, name }) => {
+  let keymapsList = filteredKeymaps.map(({ id, description }) => {
     return (
       <Radio
         id={id}
@@ -63,7 +63,7 @@ export default function KeyboardSelection() {
         onChange={() => setSelected(id)}
         label={
           <Flex columnGap={{ default: "columnGapSm" }}>
-            <Content isEditorial>{name}</Content>
+            <Content isEditorial>{description}</Content>
             <Content component="small">{id}</Content>
           </Flex>
         }

web/src/components/l10n/L10nPage.test.tsx

@@ -24,19 +24,20 @@ import React from "react";
 import { screen, within } from "@testing-library/react";
 import { installerRender } from "~/test-utils";
 import L10nPage from "~/components/l10n/L10nPage";
-import { System, Keymap, Locale, Timezone } from "~/api/system";
-import { Proposal } from "~/api/proposal";
+import { Keymap, Locale, Timezone } from "~/api/l10n/system";
+import { useProposal, useSystem } from "~/hooks/api";
+
+let mockSystemData: ReturnType<typeof useSystem>;
+let mockProposedData: ReturnType<typeof useProposal>;
 
-let mockSystemData: System;
-let mockProposedData: Proposal;
 const locales: Locale[] = [
-  { id: "en_US.UTF-8", name: "English", territory: "United States" },
-  { id: "es_ES.UTF-8", name: "Spanish", territory: "Spain" },
+  { id: "en_US.UTF-8", language: "English", territory: "United States" },
+  { id: "es_ES.UTF-8", language: "Spanish", territory: "Spain" },
 ];
 
 const keymaps: Keymap[] = [
-  { id: "us", name: "English" },
-  { id: "es", name: "Spanish" },
+  { id: "us", description: "English" },
+  { id: "es", description: "Spanish" },
 ];
 
 const timezones: Timezone[] = [
@@ -50,11 +51,8 @@ jest.mock("~/components/product/ProductRegistrationAlert", () => () => (
 
 jest.mock("~/components/core/InstallerOptions", () => () => <div>InstallerOptions Mock</div>);
 
-jest.mock("~/queries/system", () => ({
+jest.mock("~/hooks/api", () => ({
   useSystem: () => mockSystemData,
-}));
-
-jest.mock("~/queries/proposal", () => ({
   useProposal: () => mockProposedData,
 }));
 
@@ -69,9 +67,6 @@ beforeEach(() => {
 
   mockProposedData = {
     l10n: {
-      locales,
-      keymaps,
-      timezones,
       locale: "en_US.UTF-8",
       keymap: "us",
       timezone: "Europe/Berlin",

web/src/components/l10n/L10nPage.tsx

@@ -67,9 +67,8 @@ const InstallerL10nSettingsInfo = () => {
  */
 export default function L10nPage() {
   // FIXME: retrieve selection from config when ready
-  const { l10n: l10nProposal } = useProposal();
-  const { l10n: l10nSystem } = useSystem();
-  console.log(l10nProposal);
+  const { l10n: l10nProposal } = useProposal({ suspense: true });
+  const { l10n: l10nSystem } = useSystem({ suspense: true });
 
   const locale =
     l10nProposal.locale && l10nSystem.locales.find((l) => l.id === l10nProposal.locale);
@@ -96,7 +95,7 @@ export default function L10nPage() {
               }
             >
               <Content isEditorial>
-                {locale ? `${locale.name} - ${locale.territory}` : _("Wrong selection")}
+                {locale ? `${locale.language} - ${locale.territory}` : _("Wrong selection")}
               </Content>
             </Page.Section>
           </GridItem>
@@ -109,7 +108,7 @@ export default function L10nPage() {
                 </Link>
               }
             >
-              <Content isEditorial>{keymap ? keymap.name : _("Wrong selection")}</Content>
+              <Content isEditorial>{keymap ? keymap.description : _("Wrong selection")}</Content>
             </Page.Section>
           </GridItem>
           <GridItem md={4}>

web/src/components/l10n/LocaleSelection.test.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2023-2024] SUSE LLC
+ * Copyright (c) [2023-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -25,32 +25,28 @@ import LocaleSelection from "./LocaleSelection";
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/react";
 import { mockNavigateFn, installerRender } from "~/test-utils";
-import { Locale } from "~/api/system";
+import { Locale } from "~/api/l10n/system";
+
+const mockPatchConfigFn = jest.fn();
 
 const locales: Locale[] = [
-  { id: "en_US.UTF-8", name: "English", territory: "United States" },
-  { id: "es_ES.UTF-8", name: "Spanish", territory: "Spain" },
+  { id: "en_US.UTF-8", language: "English", territory: "United States" },
+  { id: "es_ES.UTF-8", language: "Spanish", territory: "Spain" },
 ];
 
-const mockUpdateConfigFn = jest.fn();
-
 jest.mock("~/components/product/ProductRegistrationAlert", () => () => (
   <div>ProductRegistrationAlert Mock</div>
 ));
 
-jest.mock("~/queries/system", () => ({
-  ...jest.requireActual("~/queries/system"),
+jest.mock("~/hooks/api", () => ({
+  ...jest.requireActual("~/hooks/api"),
   useSystem: () => ({ l10n: { locales } }),
-}));
-
-jest.mock("~/queries/proposal", () => ({
-  ...jest.requireActual("~/queries/proposal"),
   useProposal: () => ({ l10n: { locales, locale: "us_US.UTF-8", keymap: "us" } }),
 }));
 
-jest.mock("~/api/api", () => ({
-  ...jest.requireActual("~/api/api"),
-  updateConfig: (config) => mockUpdateConfigFn(config),
+jest.mock("~/api", () => ({
+  ...jest.requireActual("~/api"),
+  patchConfig: (config) => mockPatchConfigFn(config),
 }));
 
 jest.mock("react-router", () => ({
@@ -65,7 +61,7 @@ it("allows changing the keyboard", async () => {
   await userEvent.click(option);
   const button = await screen.findByRole("button", { name: "Select" });
   await userEvent.click(button);
-  expect(mockUpdateConfigFn).toHaveBeenCalledWith({
+  expect(mockPatchConfigFn).toHaveBeenCalledWith({
     l10n: { locale: "es_ES.UTF-8" },
   });
   expect(mockNavigateFn).toHaveBeenCalledWith(-1);

web/src/components/l10n/LocaleSelection.tsx

@@ -35,10 +35,10 @@ export default function LocaleSelection() {
   const navigate = useNavigate();
   const {
     l10n: { locales },
-  } = useSystem();
+  } = useSystem({ suspense: true });
   const {
     l10n: { locale: currentLocale },
-  } = useProposal();
+  } = useProposal({ suspense: true });
   const [selected, setSelected] = useState(currentLocale);
   const [filteredLocales, setFilteredLocales] = useState(locales);
 
@@ -50,7 +50,7 @@ export default function LocaleSelection() {
     navigate(-1);
   };
 
-  let localesList = filteredLocales.map(({ id, name, territory }) => {
+  let localesList = filteredLocales.map(({ id, language, territory }) => {
     return (
       <Radio
         id={id}
@@ -59,7 +59,7 @@ export default function LocaleSelection() {
         onChange={() => setSelected(id)}
         label={
           <Flex gap={{ default: "gapSm" }}>
-            <Content isEditorial>{name}</Content>
+            <Content isEditorial>{language}</Content>
             <Content className={`${textStyles.textColorPlaceholder}`}>{territory}</Content>
             <Content className={`${textStyles.textColorSubtle}`}>{id}</Content>
           </Flex>

web/src/components/l10n/TimezoneSelection.test.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2024] SUSE LLC
+ * Copyright (c) [2024-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -25,13 +25,9 @@ import TimezoneSelection from "./TimezoneSelection";
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/react";
 import { mockNavigateFn, installerRender } from "~/test-utils";
-import { Timezone } from "~/api/system";
+import { Timezone } from "~/api/l10n/system";
 
-jest.mock("~/components/product/ProductRegistrationAlert", () => () => (
-  <div>ProductRegistrationAlert Mock</div>
-));
-
-const mockUpdateConfigFn = jest.fn();
+const mockPatchConfigFn = jest.fn();
 
 const timezones: Timezone[] = [
   { id: "Europe/Berlin", parts: ["Europe", "Berlin"], country: "Germany", utcOffset: 120 },
@@ -50,26 +46,26 @@ const timezones: Timezone[] = [
   },
 ];
 
-jest.mock("~/queries/system", () => ({
-  ...jest.requireActual("~/queries/system"),
+jest.mock("~/components/product/ProductRegistrationAlert", () => () => (
+  <div>ProductRegistrationAlert Mock</div>
+));
+
+jest.mock("~/hooks/api", () => ({
+  ...jest.requireActual("~/hooks/api"),
   useSystem: () => ({ l10n: { timezones } }),
+  useProposal: () => ({ l10n: { timezones, timezone: "Europe/Berlin" } }),
 }));
 
-jest.mock("~/queries/proposal", () => ({
-  ...jest.requireActual("~/queries/proposal"),
-  useProposal: () => ({ l10n: { timezones, timezone: "Europe/Berlin" } }),
+jest.mock("~/api", () => ({
+  ...jest.requireActual("~/api"),
+  patchConfig: (config) => mockPatchConfigFn(config),
 }));
 
 jest.mock("react-router", () => ({
   ...jest.requireActual("react-router"),
   useNavigate: () => mockNavigateFn,
 }));
 
-jest.mock("~/api/api", () => ({
-  ...jest.requireActual("~/api/api"),
-  updateConfig: (config) => mockUpdateConfigFn(config),
-}));
-
 beforeEach(() => {
   const mockedDate = new Date(2024, 6, 1, 12, 0);
 
@@ -89,7 +85,7 @@ it("allows changing the timezone", async () => {
   await user.click(option);
   const button = await screen.findByRole("button", { name: "Select" });
   await user.click(button);
-  expect(mockUpdateConfigFn).toHaveBeenCalledWith({ l10n: { timezone: "Europe/Madrid" } });
+  expect(mockPatchConfigFn).toHaveBeenCalledWith({ l10n: { timezone: "Europe/Madrid" } });
   expect(mockNavigateFn).toHaveBeenCalledWith(-1);
 });
 

web/src/components/l10n/TimezoneSelection.tsx

@@ -69,10 +69,10 @@ export default function TimezoneSelection() {
   const navigate = useNavigate();
   const {
     l10n: { timezones },
-  } = useSystem();
+  } = useSystem({ suspense: true });
   const {
     l10n: { timezone: currentTimezone },
-  } = useProposal();
+  } = useProposal({ suspense: true });
 
   const displayTimezones = timezones.map(timezoneWithDetails);
   const [selected, setSelected] = useState(currentTimezone);