{msg1}{label}{msg2}
diff --git a/web/src/components/overview/StorageSection.test.jsx b/web/src/components/overview/StorageSection.test.jsx
index 25fbfb599a..9c29e02f34 100644
--- a/web/src/components/overview/StorageSection.test.jsx
+++ b/web/src/components/overview/StorageSection.test.jsx
@@ -38,7 +38,8 @@ const availableDevices = [
const proposalResult = {
settings: {
bootDevice: "/dev/sda",
- lvm: false
+ lvm: false,
+ spacePolicy: "delete"
},
actions: []
};
@@ -89,6 +90,32 @@ describe("when there is a proposal", () => {
await screen.findByText(/and deleting all its content/);
});
+ describe("and the space policy is set to 'resize'", () => {
+ beforeEach(() => {
+ const result = { settings: { spacePolicy: "resize", bootDevice: "/dev/sda" } };
+ storage.proposal.getResult = jest.fn().mockResolvedValue(result);
+ });
+
+ it("indicates that partitions may be shrunk", async () => {
+ installerRender();
+
+ await screen.findByText(/shrinking existing partitions as needed/);
+ });
+ });
+
+ describe("and the space policy is set to 'keep'", () => {
+ beforeEach(() => {
+ const result = { settings: { spacePolicy: "keep", bootDevice: "/dev/sda" } };
+ storage.proposal.getResult = jest.fn().mockResolvedValue(result);
+ });
+
+ it("indicates that partitions will be kept", async () => {
+ installerRender();
+
+ await screen.findByText(/without modifying existing partitions/);
+ });
+ });
+
describe("and there is no boot device", () => {
beforeEach(() => {
const result = { settings: { bootDevice: "" } };
diff --git a/web/src/components/product/ProductPage.jsx b/web/src/components/product/ProductPage.jsx
index 77c671f855..fb10aa993b 100644
--- a/web/src/components/product/ProductPage.jsx
+++ b/web/src/components/product/ProductPage.jsx
@@ -236,7 +236,7 @@ const RegisteredWarningPopup = ({ isOpen = false, onAccept = noop }) => {
- {_("Accept")}
+ {_("Close")}
diff --git a/web/src/components/product/ProductPage.test.jsx b/web/src/components/product/ProductPage.test.jsx
index 11a89fba2c..618d3e8994 100644
--- a/web/src/components/product/ProductPage.test.jsx
+++ b/web/src/components/product/ProductPage.test.jsx
@@ -247,7 +247,7 @@ describe("when the button for changing the product is clicked", () => {
const popup = await screen.findByRole("dialog");
within(popup).getByText(/must be deregistered/);
- const accept = within(popup).getByRole("button", { name: "Accept" });
+ const accept = within(popup).getByRole("button", { name: "Close" });
await user.click(accept);
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
diff --git a/web/src/components/storage/ProposalSettingsSection.jsx b/web/src/components/storage/ProposalSettingsSection.jsx
index 3142d9c515..0321ab042c 100644
--- a/web/src/components/storage/ProposalSettingsSection.jsx
+++ b/web/src/components/storage/ProposalSettingsSection.jsx
@@ -29,7 +29,11 @@ import {
import { _ } from "~/i18n";
import { If, PasswordAndConfirmationInput, Section, Popup } from "~/components/core";
-import { DeviceList, DeviceSelector, ProposalVolumes } from "~/components/storage";
+import {
+ DeviceList, DeviceSelector,
+ ProposalVolumes,
+ SpacePolicyButton, SpacePolicySelector, SpacePolicyDisksHint
+} from "~/components/storage";
import { deviceLabel } from '~/components/storage/utils';
import { Icon } from "~/components/layout";
import { noop } from "~/utils";
@@ -228,7 +232,7 @@ const LVMSettingsForm = ({
const BootDevice = () => {
const bootDevice = devices.find(d => d.name === settings.bootDevice);
- return ;
+ return ;
};
return (
@@ -509,6 +513,103 @@ const EncryptionPasswordField = ({
);
};
+/**
+ * Form for configuring the space policy.
+ * @component
+ *
+ * @param {object} props
+ * @param {string} props.id - Form ID.
+ * @param {ProposalSettings} props.settings - Settings used for calculating a proposal.
+ * @param {onSubmitFn} [props.onSubmit=noop] - On submit callback.
+ *
+ * @callback onSubmitFn
+ * @param {string} policy - Name of the selected policy.
+ */
+const SpacePolicyForm = ({
+ id,
+ policy,
+ onSubmit: onSubmitProp = noop
+}) => {
+ const [spacePolicy, setSpacePolicy] = useState(policy);
+
+ const onSubmit = (e) => {
+ e.preventDefault();
+ onSubmitProp(spacePolicy);
+ };
+
+ return (
+
+ );
+};
+
+/**
+ * Allows to select SpacePolicy.
+ * @component
+ *
+ * @param {object} props
+ * @param {ProposalSettings} props.settings - Settings used for calculating a proposal.
+ * @param {boolean} [props.isLoading=false] - Whether to show the selector as loading.
+ * @param {onChangeFn} [props.onChange=noop] - On change callback.
+ *
+ * @callback onChangeFn
+ * @param {string} policy
+ */
+const SpacePolicyField = ({
+ settings,
+ isLoading = false,
+ onChange = noop
+}) => {
+ const [isFormOpen, setIsFormOpen] = useState(false);
+ const [spacePolicy, setSpacePolicy] = useState(settings.spacePolicy);
+
+ const openForm = () => setIsFormOpen(true);
+ const closeForm = () => setIsFormOpen(false);
+
+ const onSubmitForm = (policy) => {
+ onChange(policy);
+ setSpacePolicy(policy);
+ closeForm();
+ };
+
+ if (isLoading) return ;
+
+ const description = _("Select how to make free space in the disks selected for allocating the \
+ file systems.");
+
+ return (
+
+ {/* TRANSLATORS: To be completed with the rest of a sentence like "deleting all content" */}
+
{_("Find space")}
+
+
+
+
+
+
+
+
+ {_("Accept")}
+
+
+
+
+
@@ -216,7 +217,7 @@ const VolumeRow = ({ columns, volume, options, isLoading, onEdit, onDelete }) =>
{/* TRANSLATORS: filesystem flag, it allows creating snapshots */}
{_("with snapshots")}} />
{/* TRANSLATORS: flag for transactional file system */}
- {_("transactional")}} />
+ {_("transactional")}} />
);
};
diff --git a/web/src/components/storage/device-utils.jsx b/web/src/components/storage/device-utils.jsx
index 30900d6017..baf38ffb1a 100644
--- a/web/src/components/storage/device-utils.jsx
+++ b/web/src/components/storage/device-utils.jsx
@@ -32,14 +32,13 @@ import { deviceSize } from "~/components/storage/utils";
* @typedef {import ("~/clients/storage").StorageDevice} StorageDevice
*/
-const ListBox = ({ children, ...props }) => ;
+const ListBox = ({ children, ...props }) => ;
const ListBoxItem = ({ isSelected, children, onClick, ...props }) => {
if (isSelected) props['aria-selected'] = true;
return (
@@ -215,7 +214,7 @@ const DeviceItem = ({ device }) => {
return (
<>
-
+
@@ -229,11 +228,11 @@ const DeviceItem = ({ device }) => {
* @param {Object} props
* @param {StorageDevice[]} props.devices - Devices to show.
*/
-const DeviceList = ({ devices }) => {
+const DeviceList = ({ devices, ...props }) => {
return (
-
+
{ devices.map(device => (
-
+
))}
@@ -268,13 +267,14 @@ const DeviceSelector = ({ devices, selected, isMultiple = false, onChange = noop
};
return (
-
+
{ devices.map(device => (
onOptionClick(device.name)}
isSelected={isSelected(device.name)}
- className="cursor-pointer"
+ data-type="storage-device"
>
diff --git a/web/src/components/storage/device-utils.test.jsx b/web/src/components/storage/device-utils.test.jsx
index b23f6af0d8..572ac643f4 100644
--- a/web/src/components/storage/device-utils.test.jsx
+++ b/web/src/components/storage/device-utils.test.jsx
@@ -231,11 +231,22 @@ const renderOptions = (Component) => {
describe("DeviceList", renderOptions(DeviceList));
describe("DeviceList", () => {
- it("renders all options as selected", () => {
- plainRender();
+ describe("with isSelected prop", () => {
+ it("renders all devices as selected", () => {
+ plainRender();
- const selectedOptions = screen.queryAllByRole("option", { selected: true });
- expect(selectedOptions.length).toEqual(3);
+ const devices = screen.queryAllByText(/\/dev\//, { selected: true });
+ expect(devices.length).toEqual(3);
+ });
+ });
+
+ describe("without isSelected prop", () => {
+ it("renders all devices as not selected", () => {
+ plainRender();
+
+ const devices = screen.queryAllByText(/\/dev\//, { selected: false });
+ expect(devices.length).toEqual(3);
+ });
});
});
diff --git a/web/src/components/storage/index.js b/web/src/components/storage/index.js
index bb9b0d03dd..5dd66c988f 100644
--- a/web/src/components/storage/index.js
+++ b/web/src/components/storage/index.js
@@ -31,4 +31,5 @@ export { default as ZFCPPage } from "./ZFCPPage";
export { default as ZFCPDiskForm } from "./ZFCPDiskForm";
export { default as ISCSIPage } from "./ISCSIPage";
export { DeviceList, DeviceSelector } from "./device-utils";
+export { SpacePolicyButton, SpacePolicySelector, SpacePolicyDisksHint } from "./space-policy-utils";
export { default as VolumeForm } from "./VolumeForm";
diff --git a/web/src/components/storage/space-policy-utils.jsx b/web/src/components/storage/space-policy-utils.jsx
new file mode 100644
index 0000000000..fbb5fc5275
--- /dev/null
+++ b/web/src/components/storage/space-policy-utils.jsx
@@ -0,0 +1,195 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * 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, { useState } from "react";
+
+import { _, n_ } from "~/i18n";
+import { sprintf } from "sprintf-js";
+import { noop } from "~/utils";
+import { Button, ExpandableSection, Hint, HintBody } from "@patternfly/react-core";
+import { DeviceList } from "~/components/storage";
+
+const ListBox = ({ children, ...props }) => ;
+
+const ListBoxItem = ({ isSelected, children, onClick, ...props }) => {
+ if (isSelected) props['aria-selected'] = true;
+
+ return (
+
+ {children}
+
+ );
+};
+
+/**
+ * Content for a space policy item
+ * @component
+ *
+ * @param {Object} props
+ * @param {Locale} props.locale
+ */
+const PolicyItem = ({ policy }) => {
+ const Title = () => {
+ let text;
+
+ switch (policy) {
+ case "delete":
+ // TRANSLATORS: automatic actions to find space for installation in the target disk(s)
+ text = _("Delete current content");
+ break;
+ case "resize":
+ // TRANSLATORS: automatic actions to find space for installation in the target disk(s)
+ text = _("Shrink existing partitions");
+ break;
+ case "keep":
+ // TRANSLATORS: automatic actions to find space for installation in the target disk(s)
+ text = _("Use available space");
+ break;
+ }
+
+ return {text}
;
+ };
+
+ const Description = () => {
+ let text;
+
+ switch (policy) {
+ case "delete":
+ text = _("All partitions will be removed and any data in the disks will be lost.");
+ break;
+ case "resize":
+ text = _("The data is kept, but the current partitions will be resized as needed to make enough space.");
+ break;
+ case "keep":
+ text = _("The data is kept and existing partitions will not be modified. \
+Only the space that is not assigned to any partition will be used.");
+ break;
+ }
+
+ return {text}
;
+ };
+
+ return (
+ <>
+
+
+
+ );
+};
+
+/**
+ * Component for selecting a policy to make space.
+ * @component
+ *
+ * @param {Object} props
+ * @param {string} [props.value] - Id of the currently selected policy.
+ * @param {(id: string) => void} [props.onChange] - Callback to be called when the selected policy
+ * changes.
+ */
+const SpacePolicySelector = ({ value, onChange = noop }) => {
+ return (
+
+ { ["delete", "resize", "keep"].map(policy => (
+ onChange(policy)}
+ isSelected={policy === value}
+ >
+
+
+ ))}
+
+ );
+};
+
+const SpacePolicyButton = ({ policy, devices, onClick = noop }) => {
+ const Text = () => {
+ const num = devices.length;
+
+ switch (policy) {
+ case "delete":
+ return sprintf(
+ // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
+ // would read as "Find space deleting all content[...]"
+ n_(
+ "deleting all content of the installation device",
+ "deleting all content of the %d selected disks",
+ num),
+ num
+ );
+ case "resize":
+ return sprintf(
+ // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
+ // would read as "Find space shrinking partitions[...]"
+ n_(
+ "shrinking partitions of the installation device",
+ "shrinking partitions of the %d selected disks",
+ num),
+ num
+ );
+ case "keep":
+ // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
+ // would read as "Find space without modifying any partition".
+ return _("without modifying any partition");
+ }
+ console.log("Unsupported value " + policy);
+ return "error";
+ };
+
+ return ;
+};
+
+const SpacePolicyDisksHint = ({ devices }) => {
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const label = (num) => {
+ return sprintf(
+ n_(
+ "This will only affect the installation device",
+ "This will affect the %d disks selected for installation",
+ num
+ ),
+ num
+ );
+ };
+
+ const num = devices.length;
+
+ return (
+
+
+ setIsExpanded(!isExpanded)}
+ toggleText={label(num)}
+ >
+
+
+
+
+ );
+};
+
+export { SpacePolicyButton, SpacePolicySelector, SpacePolicyDisksHint };
diff --git a/web/src/context/agama.jsx b/web/src/context/agama.jsx
index 0aa16e811b..5ee0b7d22e 100644
--- a/web/src/context/agama.jsx
+++ b/web/src/context/agama.jsx
@@ -23,6 +23,7 @@
import React from "react";
import { InstallerClientProvider } from "./installer";
+import { InstallerL10nProvider } from "./installerL10n";
import { L10nProvider } from "./l10n";
import { ProductProvider } from "./product";
import { NotificationProvider } from "./notification";
@@ -36,13 +37,15 @@ import { NotificationProvider } from "./notification";
function AgamaProviders({ children }) {
return (
-
-
-
- {children}
-
-
-
+
+
+
+
+ {children}
+
+
+
+
);
}
diff --git a/web/src/context/installerL10n.jsx b/web/src/context/installerL10n.jsx
new file mode 100644
index 0000000000..482843a274
--- /dev/null
+++ b/web/src/context/installerL10n.jsx
@@ -0,0 +1,262 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * 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.
+ */
+
+// @ts-check
+
+import React, { useCallback, useEffect, useState } from "react";
+import { useCancellablePromise, locationReload, setLocationSearch } from "~/utils";
+import cockpit from "../lib/cockpit";
+import { useInstallerClient } from "./installer";
+
+const L10nContext = React.createContext(null);
+
+/**
+ * Installer localization context.
+ *
+ * @typedef {object} L10nContext
+ * @property {string|undefined} language - Current language.
+ * @property {(language: string) => void} changeLanguage - Function to change the current language.
+ *
+ * @return {L10nContext}
+ */
+function useInstallerL10n() {
+ const context = React.useContext(L10nContext);
+
+ if (!context) {
+ throw new Error("useInstallerL10n must be used within a InstallerL10nContext");
+ }
+
+ return context;
+}
+
+/**
+ * Current language according to Cockpit (in xx_XX format).
+ *
+ * It takes the language from the CockpitLang cookie.
+ *
+ * @return {string|undefined} Undefined if language is not set.
+ */
+function cockpitLanguage() {
+ // language from cookie, empty string if not set (regexp taken from Cockpit)
+ // https://github.com/cockpit-project/cockpit/blob/98a2e093c42ea8cd2431cf15c7ca0e44bb4ce3f1/pkg/shell/shell-modals.jsx#L91
+ const languageString = decodeURIComponent(document.cookie.replace(/(?:(?:^|.*;\s*)CockpitLang\s*=\s*([^;]*).*$)|^.*$/, "$1"));
+ if (languageString) {
+ return languageString.toLowerCase();
+ }
+}
+
+/**
+ * Helper function for storing the Cockpit language.
+ *
+ * Automatically converts the language from xx_XX to xx-xx, as it is the one used by Cockpit.
+ *
+ * @param {string} language - The new locale (e.g., "cs", "cs_CZ").
+ * @return {boolean} True if the locale was changed.
+ */
+function storeCockpitLanguage(language) {
+ const current = cockpitLanguage();
+ if (current === language) return false;
+
+ // Code taken from Cockpit.
+ const cookie = "CockpitLang=" + encodeURIComponent(language) + "; path=/; expires=Sun, 16 Jul 3567 06:23:41 GMT";
+ document.cookie = cookie;
+ window.localStorage.setItem("cockpit.lang", language);
+ return true;
+}
+
+/**
+ * Returns the language tag from the query string.
+ *
+ * Query supports 'xx-xx', 'xx_xx', 'xx-XX' and 'xx_XX' formats.
+ *
+ * @return {string|undefined} Undefined if not set.
+ */
+function languageFromQuery() {
+ const lang = (new URLSearchParams(window.location.search)).get("lang");
+ if (!lang) return undefined;
+
+ const [language, country] = lang.toLowerCase().split(/[-_]/);
+ return (country) ? `${language}-${country}` : language;
+}
+
+/**
+ * Generates a RFC 5646 (or BCP 78) language tag from a locale.
+ *
+ * @param {string} locale
+ * @return {string}
+ *
+ * @private
+ * @see https://datatracker.ietf.org/doc/html/rfc5646
+ * @see https://www.rfc-editor.org/info/bcp78
+ */
+function languageFromLocale(locale) {
+ return locale.replace("_", "-").toLowerCase();
+}
+
+/**
+ * Converts a RFC 5646 language tag to a locale.
+ *
+ * @param {string} language
+ * @return {string}
+ *
+ * @private
+ * @see https://datatracker.ietf.org/doc/html/rfc5646
+ * @see https://www.rfc-editor.org/info/bcp78
+ */
+function languageToLocale(language) {
+ const [lang, country] = language.split("-");
+ return (country) ? `${lang}_${country.toUpperCase()}` : lang;
+}
+
+/**
+ * List of RFC 5646 (or BCP 78) language tags from the navigator.
+ *
+ * @return {Array}
+ */
+function navigatorLanguages() {
+ return navigator.languages.map(l => l.toLowerCase());
+}
+
+/**
+ * Returns the first supported language from the given list.
+ *
+ * @param {Array} languages
+ * @return {string|undefined} Undefined if none of the given languages is supported.
+ */
+function findSupportedLanguage(languages) {
+ const supported = Object.keys(cockpit.manifests.agama?.locales || {});
+
+ for (const candidate of languages) {
+ const [language, country] = candidate.split("-");
+
+ const match = supported.find(s => {
+ const [supportedLanguage, supportedCountry] = s.split("-");
+ if (language === supportedLanguage) {
+ return country === undefined || country === supportedCountry;
+ } else {
+ return false;
+ }
+ });
+ if (match) return match;
+ }
+}
+
+/**
+ * Reloads the page.
+ *
+ * It uses the window.location.replace instead of the reload function synchronizing the "lang"
+ * argument from the URL if present.
+ *
+ * @param {string} newLanguage
+ */
+function reload(newLanguage) {
+ const query = new URLSearchParams(window.location.search);
+ if (query.has("lang") && query.get("lang") !== newLanguage) {
+ query.set("lang", newLanguage);
+ // Setting location search with a different value makes the browser to navigate to the new URL.
+ setLocationSearch(query.toString());
+ } else {
+ locationReload();
+ }
+}
+
+/**
+ * This provider sets the installer locale. By default, it uses the URL "lang" query parameter or
+ * the preferred locale from the browser and synchronizes the UI and the backend locales. To
+ * activate a new locale it reloads the whole page.
+ *
+ * Additionally, it offers a function to change the current locale.
+ *
+ * The format of the language tag in the query parameter follows the
+ * [RFC 5646](https://datatracker.ietf.org/doc/html/rfc5646) specification.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} [props.children] - Content to display within the wrapper.
+ *
+ * @see useInstallerL10n
+ */
+function InstallerL10nProvider({ children }) {
+ const client = useInstallerClient();
+ const [language, setLanguage] = useState(undefined);
+ const [backendPending, setBackendPending] = useState(false);
+ const { cancellablePromise } = useCancellablePromise();
+
+ const storeInstallerLanguage = useCallback(async (newLanguage) => {
+ if (!client) {
+ setBackendPending(true);
+ return false;
+ }
+
+ const locale = await cancellablePromise(client.l10n.getUILocale());
+ const currentLanguage = languageFromLocale(locale);
+
+ if (currentLanguage !== newLanguage) {
+ // FIXME: fallback to en-US if the language is not supported.
+ await cancellablePromise(client.l10n.setUILocale(languageToLocale(newLanguage)));
+ return true;
+ }
+
+ return false;
+ }, [client, cancellablePromise]);
+
+ const changeLanguage = useCallback(async (lang) => {
+ const wanted = lang || languageFromQuery();
+
+ if (wanted === "xx" || wanted === "xx-xx") {
+ cockpit.language = wanted;
+ setLanguage(wanted);
+ return;
+ }
+
+ const current = cockpitLanguage();
+ const candidateLanguages = [wanted, current].concat(navigatorLanguages()).filter(l => l);
+ const newLanguage = findSupportedLanguage(candidateLanguages) || "en-us";
+
+ let mustReload = storeCockpitLanguage(newLanguage);
+ mustReload = await storeInstallerLanguage(newLanguage) || mustReload;
+
+ if (mustReload) {
+ reload(newLanguage);
+ } else {
+ setLanguage(newLanguage);
+ }
+ }, [storeInstallerLanguage, setLanguage]);
+
+ useEffect(() => {
+ if (!language) changeLanguage();
+ }, [changeLanguage, language]);
+
+ useEffect(() => {
+ if (!client || !backendPending) return;
+
+ storeInstallerLanguage(language);
+ setBackendPending(false);
+ }, [client, language, backendPending, storeInstallerLanguage]);
+
+ return (
+ {children}
+ );
+}
+
+export {
+ InstallerL10nProvider,
+ useInstallerL10n
+};
diff --git a/web/src/context/l10n.test.jsx b/web/src/context/installerL10n.test.jsx
similarity index 77%
rename from web/src/context/l10n.test.jsx
rename to web/src/context/installerL10n.test.jsx
index dd932b6102..fa3cf79d7b 100644
--- a/web/src/context/l10n.test.jsx
+++ b/web/src/context/installerL10n.test.jsx
@@ -25,17 +25,17 @@
import React from "react";
import { render, waitFor, screen } from "@testing-library/react";
-import { L10nProvider } from "~/context/l10n";
+import { InstallerL10nProvider } from "~/context/installerL10n";
import { InstallerClientProvider } from "./installer";
import * as utils from "~/utils";
-const getUILanguageFn = jest.fn().mockResolvedValue();
-const setUILanguageFn = jest.fn().mockResolvedValue();
+const getUILocaleFn = jest.fn().mockResolvedValue();
+const setUILocaleFn = jest.fn().mockResolvedValue();
const client = {
- language: {
- getUILanguage: getUILanguageFn,
- setUILanguage: setUILanguageFn
+ l10n: {
+ getUILocale: getUILocaleFn,
+ setUILocale: setUILocaleFn
},
onDisconnect: jest.fn()
};
@@ -72,7 +72,7 @@ const TranslatedContent = () => {
return <>{text[lang]};
};
-describe("L10nProvider", () => {
+describe("InstallerL10nProvider", () => {
beforeAll(() => {
jest.spyOn(utils, "locationReload").mockImplementation(utils.noop);
jest.spyOn(utils, "setLocationSearch");
@@ -95,13 +95,13 @@ describe("L10nProvider", () => {
describe("when the Cockpit language is already set", () => {
beforeEach(() => {
document.cookie = "CockpitLang=en-us; path=/;";
- getUILanguageFn.mockResolvedValueOnce("en_US");
+ getUILocaleFn.mockResolvedValueOnce("en_US");
});
it("displays the children content and does not reload", async () => {
render(
-
+
);
@@ -115,14 +115,14 @@ describe("L10nProvider", () => {
describe("when the Cockpit language is set to an unsupported language", () => {
beforeEach(() => {
document.cookie = "CockpitLang=de-de; path=/;";
- getUILanguageFn.mockResolvedValueOnce("de_DE");
- getUILanguageFn.mockResolvedValueOnce("es_ES");
+ getUILocaleFn.mockResolvedValueOnce("de_DE");
+ getUILocaleFn.mockResolvedValueOnce("es_ES");
});
it("uses the first supported language from the browser", async () => {
render(
-
+
);
@@ -131,27 +131,27 @@ describe("L10nProvider", () => {
// renders again after reloading
render(
-
+
);
await waitFor(() => screen.getByText("hola"));
- expect(setUILanguageFn).toHaveBeenCalledWith("es_ES");
+ expect(setUILocaleFn).toHaveBeenCalledWith("es_ES");
});
});
describe("when the Cockpit language is not set", () => {
beforeEach(() => {
// Ensure both, UI and backend mock languages, are in sync since
- // client.setUILanguage is mocked too.
+ // client.setUILocale is mocked too.
// See navigator.language in the beforeAll at the top of the file.
- getUILanguageFn.mockResolvedValue("es_ES");
+ getUILocaleFn.mockResolvedValue("es_ES");
});
it("sets the preferred language from browser and reloads", async () => {
render(
-
+
);
@@ -160,7 +160,7 @@ describe("L10nProvider", () => {
// renders again after reloading
render(
-
+
);
await waitFor(() => screen.getByText("hola"));
@@ -174,7 +174,7 @@ describe("L10nProvider", () => {
it("sets the first which language matches", async () => {
render(
-
+
);
@@ -183,7 +183,7 @@ describe("L10nProvider", () => {
// renders again after reloading
render(
-
+
);
await waitFor(() => screen.getByText("hola!"));
@@ -200,19 +200,19 @@ describe("L10nProvider", () => {
describe("when the Cockpit language is already set to 'cs-cz'", () => {
beforeEach(() => {
document.cookie = "CockpitLang=cs-cz; path=/;";
- getUILanguageFn.mockResolvedValueOnce("cs_CZ");
+ getUILocaleFn.mockResolvedValueOnce("cs_CZ");
});
it("displays the children content and does not reload", async () => {
render(
-
+
);
// children are displayed
await screen.findByText("ahoj");
- expect(setUILanguageFn).not.toHaveBeenCalled();
+ expect(setUILocaleFn).not.toHaveBeenCalled();
expect(document.cookie).toEqual("CockpitLang=cs-cz");
expect(utils.locationReload).not.toHaveBeenCalled();
@@ -223,15 +223,15 @@ describe("L10nProvider", () => {
describe("when the Cockpit language is set to 'en-us'", () => {
beforeEach(() => {
document.cookie = "CockpitLang=en-us; path=/;";
- getUILanguageFn.mockResolvedValueOnce("en_US");
- getUILanguageFn.mockResolvedValueOnce("cs_CZ");
- setUILanguageFn.mockResolvedValue();
+ getUILocaleFn.mockResolvedValueOnce("en_US");
+ getUILocaleFn.mockResolvedValueOnce("cs_CZ");
+ setUILocaleFn.mockResolvedValue();
});
it("sets the 'cs-cz' language and reloads", async () => {
render(
-
+
);
@@ -240,26 +240,26 @@ describe("L10nProvider", () => {
// renders again after reloading
render(
-
+
);
await waitFor(() => screen.getByText("ahoj"));
- expect(setUILanguageFn).toHaveBeenCalledWith("cs_CZ");
+ expect(setUILocaleFn).toHaveBeenCalledWith("cs_CZ");
});
});
describe("when the Cockpit language is not set", () => {
beforeEach(() => {
- getUILanguageFn.mockResolvedValueOnce("en_US");
- getUILanguageFn.mockResolvedValueOnce("cs_CZ");
- setUILanguageFn.mockResolvedValue();
+ getUILocaleFn.mockResolvedValueOnce("en_US");
+ getUILocaleFn.mockResolvedValueOnce("cs_CZ");
+ setUILocaleFn.mockResolvedValue();
});
it("sets the 'cs-cz' language and reloads", async () => {
render(
-
+
);
@@ -268,12 +268,12 @@ describe("L10nProvider", () => {
// reload the component
render(
-
+
);
await waitFor(() => screen.getByText("ahoj"));
- expect(setUILanguageFn).toHaveBeenCalledWith("cs_CZ");
+ expect(setUILocaleFn).toHaveBeenCalledWith("cs_CZ");
});
});
});
diff --git a/web/src/context/l10n.jsx b/web/src/context/l10n.jsx
index d3a725b2fc..7948ed70c6 100644
--- a/web/src/context/l10n.jsx
+++ b/web/src/context/l10n.jsx
@@ -19,251 +19,106 @@
* find current contact information at www.suse.com.
*/
-// @ts-check
-
-import React, { useCallback, useEffect, useState } from "react";
-import { useCancellablePromise, locationReload, setLocationSearch } from "~/utils";
-import cockpit from "../lib/cockpit";
+import React, { useContext, useEffect, useState } from "react";
+import { useCancellablePromise } from "~/utils";
import { useInstallerClient } from "./installer";
-const L10nContext = React.createContext(null);
-
/**
- * @typedef {object} L10nContext
- * @property {string|undefined} language - current language
- * @property {(lang: string) => void} changeLanguage - function to change the current language
- *
- * @return {L10nContext} L10n context
+ * @typedef {import ("~/clients/l10n").Locale} Locale
+ * @typedef {import ("~/clients/l10n").Keymap} Keymap
+ * @typedef {import ("~/clients/l10n").Timezone} Timezone
*/
-function useL10n() {
- const context = React.useContext(L10nContext);
- if (!context) {
- throw new Error("useL10n must be used within a L10nContext");
- }
-
- return context;
-}
+const L10nContext = React.createContext({});
-/**
- * Returns the current locale according to Cockpit
- *
- * It takes the locale from the CockpitLang cookie.
- *
- * @return {string|undefined} language tag in xx_XX format or undefined if
- * it was not set.
- */
-function cockpitLanguage() {
- // language from cookie, empty string if not set (regexp taken from Cockpit)
- // https://github.com/cockpit-project/cockpit/blob/98a2e093c42ea8cd2431cf15c7ca0e44bb4ce3f1/pkg/shell/shell-modals.jsx#L91
- const languageString = decodeURIComponent(document.cookie.replace(/(?:(?:^|.*;\s*)CockpitLang\s*=\s*([^;]*).*$)|^.*$/, "$1"));
- if (languageString) {
- return languageString.toLowerCase();
- }
-}
-
-/**
- * Helper function for storing the Cockpit language.
- *
- * This function automatically converts the language tag from xx_XX to xx-xx,
- * as it is the one used by Cockpit.
- *
- * @param {string} lang the new language tag (like "cs", "cs_CZ",...)
- * @return {boolean} returns true if the locale changed; false otherwise
- */
-function storeUILanguage(lang) {
- const current = cockpitLanguage();
- if (current === lang) {
- return false;
- }
- // code taken from Cockpit
- const cookie = "CockpitLang=" + encodeURIComponent(lang) + "; path=/; expires=Sun, 16 Jul 3567 06:23:41 GMT";
- document.cookie = cookie;
- window.localStorage.setItem("cockpit.lang", lang);
- return true;
-}
-
-/**
- * Returns the language from the query string.
- *
- * @return {string|undefined} language tag in 'xx-xx' format (or just 'xx') or undefined if it was
- * not set. It supports 'xx-xx', 'xx_xx', 'xx-XX' and 'xx_XX'.
- */
-function languageFromQuery() {
- const lang = (new URLSearchParams(window.location.search)).get("lang");
- if (!lang) return undefined;
+function L10nProvider({ children }) {
+ const client = useInstallerClient();
+ const { cancellablePromise } = useCancellablePromise();
+ const [timezones, setTimezones] = useState();
+ const [selectedTimezone, setSelectedTimezone] = useState();
+ const [locales, setLocales] = useState();
+ const [selectedLocales, setSelectedLocales] = useState();
+ const [keymaps, setKeymaps] = useState();
+ const [selectedKeymap, setSelectedKeymap] = useState();
- const [language, country] = lang.toLowerCase().split(/[-_]/);
- return (country) ? `${language}-${country}` : language;
-}
+ useEffect(() => {
+ const load = async () => {
+ const timezones = await cancellablePromise(client.l10n.timezones());
+ const selectedTimezone = await cancellablePromise(client.l10n.getTimezone());
+ const locales = await cancellablePromise(client.l10n.locales());
+ const selectedLocales = await cancellablePromise(client.l10n.getLocales());
+ const keymaps = await cancellablePromise(client.l10n.keymaps());
+ const selectedKeymap = await cancellablePromise(client.l10n.getKeymap());
+ setTimezones(timezones);
+ setSelectedTimezone(selectedTimezone);
+ setLocales(locales);
+ setSelectedLocales(selectedLocales);
+ setKeymaps(keymaps);
+ setSelectedKeymap(selectedKeymap);
+ };
+
+ if (client) {
+ load().catch(console.error);
+ }
+ }, [cancellablePromise, client, setKeymaps, setLocales, setSelectedKeymap, setSelectedLocales, setSelectedTimezone, setTimezones]);
-/**
- * Converts a language tag from the backend to a one compatible with RFC 5646 or
- * BCP 78
- *
- * @param {string} tag - language tag from the backend
- * @return {string} Language tag compatible with RFC 5646 or BCP 78
- *
- * @private
- * @see https://datatracker.ietf.org/doc/html/rfc5646
- * @see https://www.rfc-editor.org/info/bcp78
- */
-function languageFromBackend(tag) {
- return tag.replace("_", "-").toLowerCase();
-}
+ useEffect(() => {
+ if (!client) return;
-/**
- * Converts a language tag compatible with RFC 5646 to the format used by the backend
- *
- * @param {string} tag - language tag from the backend
- * @return {string} Language tag compatible with the backend
- *
- * @private
- * @see https://datatracker.ietf.org/doc/html/rfc5646
- * @see https://www.rfc-editor.org/info/bcp78
- */
-function languageToBackend(tag) {
- const [language, country] = tag.split("-");
- return (country) ? `${language}_${country.toUpperCase()}` : language;
-}
+ return client.l10n.onTimezoneChange(setSelectedTimezone);
+ }, [client, setSelectedTimezone]);
-/**
- * Returns the list of languages from the navigator in RFC 5646 (or BCP 78)
- * format
- *
- * @return {Array} List of languages from the navigator
- */
-function navigatorLanguages() {
- return navigator.languages.map(l => l.toLowerCase());
-}
+ useEffect(() => {
+ if (!client) return;
-/**
- * Returns the first supported language from the given list.
- *
- * @param {Array} languages - Candidate languages
- * @return {string|undefined} First supported language or undefined if none
- * of the given languages is supported.
- */
-function findSupportedLanguage(languages) {
- const supported = Object.keys(cockpit.manifests.agama?.locales || {});
+ return client.l10n.onLocalesChange(setSelectedLocales);
+ }, [client, setSelectedLocales]);
- for (const candidate of languages) {
- const [language, country] = candidate.split("-");
+ useEffect(() => {
+ if (!client) return;
- const match = supported.find(s => {
- const [supportedLanguage, supportedCountry] = s.split("-");
- if (language === supportedLanguage) {
- return country === undefined || country === supportedCountry;
- } else {
- return false;
- }
- });
- if (match) return match;
- }
-}
+ return client.l10n.onKeymapChange(setSelectedKeymap);
+ }, [client, setSelectedKeymap]);
-/**
- * Reloads the page
- *
- * It uses the window.location.replace instead of the reload function
- * synchronizing the "lang" argument from the URL if present.
- *
- * @param {string} newLanguage
- */
-function reload(newLanguage) {
- const query = new URLSearchParams(window.location.search);
- if (query.has("lang") && query.get("lang") !== newLanguage) {
- query.set("lang", newLanguage);
- // Setting location search with a different value makes the browser to navigate
- // to the new URL.
- setLocationSearch(query.toString());
- } else {
- locationReload();
- }
+ const value = { timezones, selectedTimezone, locales, selectedLocales, keymaps, selectedKeymap };
+ return {children};
}
/**
- * This provider sets the application language. By default, it uses the
- * URL "lang" query parameter or the preferred language from the browser and
- * synchronizes the UI and the backend languages. To activate a new language it
- * reloads the whole page.
- *
- * Additionally, it offers a function to change the current language.
- *
- * The format of the language tag follows the
- * [RFC 5646](https://datatracker.ietf.org/doc/html/rfc5646) specification.
- *
- * @param {object} props
- * @param {React.ReactNode} [props.children] - content to display within the wrapper
- * @param {import("~/client").InstallerClient} [props.client] - client
+ * Localization context.
+ * @function
*
- * @see useL10n
+ * @typedef {object} L10nContext
+ * @property {Locale[]} locales
+ * @property {Keymap[]} keymaps
+ * @property {Timezone[]} timezones
+ * @property {Locale[]} selectedLocales
+ * @property {Keymap|undefined} selectedKeymap
+ * @property {Timezone|undefined} selectedTimezone
+ *
+ * @returns {L10nContext}
*/
-function L10nProvider({ children }) {
- const client = useInstallerClient();
- const [language, setLanguage] = useState(undefined);
- const [backendPending, setBackendPending] = useState(false);
- const { cancellablePromise } = useCancellablePromise();
-
- const storeBackendLanguage = useCallback(async languageString => {
- if (!client) {
- setBackendPending(true);
- return false;
- }
-
- const currentLang = await cancellablePromise(client.language.getUILanguage());
- const normalizedLang = languageFromBackend(currentLang);
-
- if (normalizedLang !== languageString) {
- // FIXME: fallback to en-US if the language is not supported.
- await cancellablePromise(
- client.language.setUILanguage(languageToBackend(languageString))
- );
- return true;
- }
- return false;
- }, [client, cancellablePromise]);
-
- const changeLanguage = useCallback(async lang => {
- const wanted = lang || languageFromQuery();
-
- if (wanted === "xx" || wanted === "xx-xx") {
- cockpit.language = wanted;
- setLanguage(wanted);
- return;
- }
-
- const current = cockpitLanguage();
- const candidateLanguages = [wanted, current].concat(navigatorLanguages())
- .filter(l => l);
- const newLanguage = findSupportedLanguage(candidateLanguages) || "en-us";
-
- let mustReload = storeUILanguage(newLanguage);
- mustReload = await storeBackendLanguage(newLanguage) || mustReload;
- if (mustReload) {
- reload(newLanguage);
- } else {
- setLanguage(newLanguage);
- }
- }, [storeBackendLanguage, setLanguage]);
+function useL10n() {
+ const context = useContext(L10nContext);
- useEffect(() => {
- if (!language) changeLanguage();
- }, [changeLanguage, language]);
+ if (!context) {
+ throw new Error("useL10n must be used within a L10nProvider");
+ }
- useEffect(() => {
- if (!client || !backendPending) return;
+ const {
+ timezones = [],
+ selectedTimezone: selectedTimezoneId,
+ locales = [],
+ selectedLocales: selectedLocalesId = [],
+ keymaps = [],
+ selectedKeymap: selectedKeymapId
+ } = context;
- storeBackendLanguage(language);
- setBackendPending(false);
- }, [client, language, backendPending, storeBackendLanguage]);
+ const selectedTimezone = timezones.find(t => t.id === selectedTimezoneId);
+ const selectedLocales = selectedLocalesId.map(id => locales.find(l => l.id === id));
+ const selectedKeymap = keymaps.find(k => k.id === selectedKeymapId);
- return (
- {children}
- );
+ return { timezones, selectedTimezone, locales, selectedLocales, keymaps, selectedKeymap };
}
-export {
- L10nProvider,
- useL10n
-};
+export { L10nProvider, useL10n };
diff --git a/web/src/context/product.jsx b/web/src/context/product.jsx
index 4f476f710a..1a4387c190 100644
--- a/web/src/context/product.jsx
+++ b/web/src/context/product.jsx
@@ -23,6 +23,11 @@ import React, { useContext, useEffect, useState } from "react";
import { useCancellablePromise } from "~/utils";
import { useInstallerClient } from "./installer";
+/**
+ * @typedef {import ("~/clients/software").Product} Product
+ * @typedef {import ("~/clients/software").Registration} Registration
+ */
+
const ProductContext = React.createContext([]);
function ProductProvider({ children }) {
@@ -64,6 +69,18 @@ function ProductProvider({ children }) {
return {children};
}
+/**
+ * Product context.
+ * @function
+ *
+ * @typedef {object} ProductContext
+ * @property {Product[]} products
+ * @property {Product|null} selectedProduct
+ * @property {string} selectedId
+ * @property {Registration} registration
+ *
+ * @returns {ProductContext}
+ */
function useProduct() {
const context = useContext(ProductContext);
diff --git a/web/src/manifest.json b/web/src/manifest.json
index 4fba146b5f..225e2391bf 100644
--- a/web/src/manifest.json
+++ b/web/src/manifest.json
@@ -10,10 +10,10 @@
},
"locales": {
"en-us": "English",
- "ja-jp": "日本語",
"fr-fr": "Français",
+ "ja-jp": "日本語",
"nl-nl": "Nederlands",
- "sv-se": "Svenska",
- "es-es": "Español"
+ "es-es": "Español",
+ "sv-se": "Svenska"
}
}
\ No newline at end of file
diff --git a/web/src/test-utils.js b/web/src/test-utils.js
index 1848f5a0e0..8e7a5f143d 100644
--- a/web/src/test-utils.js
+++ b/web/src/test-utils.js
@@ -36,6 +36,7 @@ import { NotificationProvider } from "~/context/notification";
import { Layout } from "~/components/layout";
import { noop } from "./utils";
import cockpit from "./lib/cockpit";
+import { InstallerL10nProvider } from "./context/installerL10n";
import { L10nProvider } from "./context/l10n";
/**
@@ -84,9 +85,11 @@ const Providers = ({ children, withL10n }) => {
if (withL10n) {
return (
-
- {children}
-
+
+
+ {children}
+
+
);
}
diff --git a/web/src/utils.js b/web/src/utils.js
index 3cd85fb228..1b3c9dab65 100644
--- a/web/src/utils.js
+++ b/web/src/utils.js
@@ -162,6 +162,47 @@ const useLocalStorage = (storageKey, fallbackState) => {
return [value, setValue];
};
+/**
+ * Debounce hook.
+ * @function
+ *
+ * Source {@link https://designtechworld.medium.com/create-a-custom-debounce-hook-in-react-114f3f245260}
+ *
+ * @param {function} callback - Function to be called after some delay.
+ * @param {number} delay - Delay in milliseconds.
+ * @returns {function}
+ *
+ * @example
+ *
+ * const log = useDebounce(console.log, 1000);
+ * log("test ", 1) // The message will be logged after at least 1 second.
+ * log("test ", 2) // Subsequent calls cancels pending calls.
+ */
+const useDebounce = (callback, delay) => {
+ const timeoutRef = useRef(null);
+
+ useEffect(() => {
+ // Cleanup the previous timeout on re-render
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+ };
+ }, []);
+
+ const debouncedCallback = (...args) => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+
+ timeoutRef.current = setTimeout(() => {
+ callback(...args);
+ }, delay);
+ };
+
+ return debouncedCallback;
+};
+
const hex = (value) => {
const sanitizedValue = value.replaceAll(".", "");
return parseInt(sanitizedValue, 16);
@@ -208,14 +249,67 @@ const setLocationSearch = (query) => {
window.location.search = query;
};
+/**
+ * Time for the given timezone.
+ *
+ * @param {string} timezone - E.g., "Atlantic/Canary".
+ * @param {object} [options]
+ * @param {Date} options.date - Date to take the time from.
+ *
+ * @returns {string|undefined} - Time in 24 hours format (e.g., "23:56"). Undefined for an unknown
+ * timezone.
+ */
+const timezoneTime = (timezone, { date = new Date() }) => {
+ try {
+ const formatter = new Intl.DateTimeFormat(
+ "en-US",
+ { timeZone: timezone, timeStyle: "short", hour12: false }
+ );
+
+ return formatter.format(date);
+ } catch (e) {
+ if (e instanceof RangeError) return undefined;
+
+ throw e;
+ }
+};
+
+/**
+ * UTC offset for the given timezone.
+ *
+ * @param {string} timezone - E.g., "Atlantic/Canary".
+ * @returns {number|undefined} - undefined for an unknown timezone.
+ */
+const timezoneUTCOffset = (timezone) => {
+ try {
+ const date = new Date();
+ const dateLocaleString = date.toLocaleString(
+ "en-US",
+ { timeZone: timezone, timeZoneName: "short" }
+ );
+ const [timezoneName] = dateLocaleString.split(' ').slice(-1);
+ const dateString = date.toString();
+ const offset = Date.parse(`${dateString} UTC`) - Date.parse(`${dateString} ${timezoneName}`);
+
+ return offset / 3600000;
+ } catch (e) {
+ if (e instanceof RangeError) return undefined;
+
+ throw e;
+ }
+};
+
export {
noop,
partition,
classNames,
useCancellablePromise,
useLocalStorage,
+ useDebounce,
hex,
toValidationError,
locationReload,
- setLocationSearch
+ setLocationSearch,
+ timezoneTime,
+ timezoneUTCOffset
};