web: Start adapting locale selection

web/src/components/core/ListSearch.jsx

@@ -19,8 +19,8 @@
  * find current contact information at www.suse.com.
  */
 
-import React from "react";
-
+import React, { useState } from "react";
+import { SearchInput } from "@patternfly/react-core";
 import { _ } from "~/i18n";
 import { noop, useDebounce } from "~/utils";
 
@@ -38,6 +38,7 @@ const search = (elements, term) => {
 };
 
 /**
+ * TODO: Rename
  * Input field for searching in a given list of elements.
  * @component
  *
@@ -51,11 +52,26 @@ export default function ListSearch({
   elements = [],
   onChange: onChangeProp = noop
 }) {
-  const searchHandler = useDebounce(term => onChangeProp(search(elements, term)), 500);
+  const [value, setValue] = useState("");
+  const [resultSize, setResultSize] = useState(elements.length);
+  const searchHandler = useDebounce(term => {
+    const result = search(elements, term);
+    setResultSize(result.length);
+    onChangeProp(result);
+  }, 500);
 
-  const onChange = (e) => searchHandler(e.target.value);
+  const onChange = (value) => {
+    setValue(value);
+    searchHandler(value);
+  };
 
   return (
-    <input role="search" type="text" placeholder={placeholder} onChange={onChange} />
+    <SearchInput
+      placeholder={placeholder}
+      value={value}
+      onChange={(_, value) => onChange(value)}
+      onClear={() => onChangeProp(elements)}
+      resultsCount={resultSize}
+    />
   );
 }

web/src/components/core/ListSearch.test.jsx

@@ -47,7 +47,7 @@ const FruitList = ({ fruits }) => {
 it("searches for elements matching the given term (case-insensitive)", async () => {
   const { user } = plainRender(<FruitList fruits={fruits} />);
 
-  const searchInput = screen.getByRole("search");
+  const searchInput = screen.getByRole("textbox");
 
   // Search for "medium" size fruit
   await user.type(searchInput, "medium");

web/src/components/l10n/L10nPage.jsx

@@ -20,13 +20,14 @@
  */
 
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import { Button, Form } from "@patternfly/react-core";
 import { sprintf } from "sprintf-js";
 
 import { useInstallerClient } from "~/context/installer";
 import { _ } from "~/i18n";
-import { If, Page, Popup, Section } from "~/components/core";
-import { KeymapSelector, LocaleSelector, TimezoneSelector } from "~/components/l10n";
+import { If, Popup, Section } from "~/components/core";
+import { KeymapSelector, TimezoneSelector } from "~/components/l10n";
 import { noop } from "~/utils";
 import { useL10n } from "~/context/l10n";
 import { useProduct } from "~/context/product";
@@ -145,120 +146,22 @@ const TimezoneSection = () => {
   );
 };
 
-/**
- * Popup for selecting a locale.
- * @component
- *
- * @param {object} props
- * @param {function} props.onFinish - Callback to be called when the locale is correctly selected.
- * @param {function} props.onCancel - Callback to be called when the locale selection is canceled.
- */
-const LocalePopup = ({ onFinish = noop, onCancel = noop }) => {
-  const { l10n } = useInstallerClient();
-  const { locales, selectedLocales } = useL10n();
-  const { selectedProduct } = useProduct();
-  const [localeId, setLocaleId] = useState(selectedLocales[0]?.id);
-
-  const sortedLocales = locales.sort((locale1, locale2) => {
-    const localeText = l => [l.name, l.territory].join('').toLowerCase();
-    return localeText(locale1) > localeText(locale2) ? 1 : -1;
-  });
-
-  const onSubmit = async (e) => {
-    e.preventDefault();
-
-    const [locale] = selectedLocales;
-
-    if (localeId !== locale?.id) {
-      await l10n.setLocales([localeId]);
-    }
-
-    onFinish();
-  };
-
-  return (
-    <Popup
-      isOpen
-      title={_("Select language")}
-      description={sprintf(_("%s will use the selected language."), selectedProduct.name)}
-      blockSize="large"
-    >
-      <Form id="localeForm" onSubmit={onSubmit}>
-        <LocaleSelector value={localeId} locales={sortedLocales} onChange={setLocaleId} />
-      </Form>
-      <Popup.Actions>
-        <Popup.Confirm form="localeForm" type="submit">
-          {_("Accept")}
-        </Popup.Confirm>
-        <Popup.Cancel onClick={onCancel} />
-      </Popup.Actions>
-    </Popup>
-  );
-};
-
-/**
- * Button for opening the selection of locales.
- * @component
- *
- * @param {object} props
- * @param {React.ReactNode} props.children - Button children.
- */
-const LocaleButton = ({ children }) => {
-  const [isPopupOpen, setIsPopupOpen] = useState(false);
-
-  const openPopup = () => setIsPopupOpen(true);
-  const closePopup = () => setIsPopupOpen(false);
-
-  return (
-    <>
-      <Button
-        variant="link"
-        className="p-0"
-        onClick={openPopup}
-      >
-        {children}
-      </Button>
-
-      <If
-        condition={isPopupOpen}
-        then={
-          <LocalePopup
-            isOpen
-            onFinish={closePopup}
-            onCancel={closePopup}
-          />
-        }
-      />
-    </>
-  );
-};
-
 /**
  * Section for configuring locales.
  * @component
  */
 const LocaleSection = () => {
   const { selectedLocales } = useL10n();
-
   const [locale] = selectedLocales;
 
   return (
     <Section title={_("Language")} icon="translate">
-      <If
-        condition={locale}
-        then={
-          <>
-            <p>{locale?.name} - {locale?.territory}</p>
-            <LocaleButton>{_("Change language")}</LocaleButton>
-          </>
-        }
-        else={
-          <>
-            <p>{_("Language not selected yet")}</p>
-            <LocaleButton>{_("Select language")}</LocaleButton>
-          </>
-        }
-      />
+      <p>
+        {locale ? `${locale.name} - ${locale.territory}` : _("Language not selected yet")}
+      </p>
+      <Link to="language/select">
+        {locale ? _("Change language") : _("Select language")}
+      </Link>
     </Section>
   );
 };
@@ -380,11 +283,10 @@ const KeymapSection = () => {
  */
 export default function L10nPage() {
   return (
-    // TRANSLATORS: page title
-    <Page icon="globe" title={_("Localization")}>
+    <>
       <LocaleSection />
       <KeymapSection />
       <TimezoneSection />
-    </Page>
+    </>
   );
 }

web/src/components/l10n/LocaleSelection.jsx

@@ -0,0 +1,105 @@
+/*
+ * Copyright (c) [2023-2024] 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, { useEffect, useState } from "react";
+import {
+  Form, FormGroup,
+  Radio,
+  Stack,
+  Text
+} from "@patternfly/react-core";
+import { useNavigate } from "react-router-dom";
+import { _ } from "~/i18n";
+import { noop } from "~/utils";
+import { useL10n } from "~/context/l10n";
+import { useInstallerClient } from "~/context/installer";
+import { ListSearch, Page } from "~/components/core";
+import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
+
+// TODO: Add documentation and typechecking
+// TODO: Evaluate if worth it extracting the selector
+export default function LocaleSelector() {
+  const { l10n } = useInstallerClient();
+  const { locales, selectedLocales } = useL10n();
+  const [selected, setSelected] = useState(selectedLocales[0]);
+  const [filteredLocales, setFilteredLocales] = useState(locales);
+  const navigate = useNavigate();
+
+  const searchHelp = _("Filter by language, territory or locale code");
+
+  useEffect(() => {
+    setFilteredLocales(locales);
+  }, [locales, setFilteredLocales]);
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    const dataForm = new FormData(e.target);
+    const nextLocaleId = JSON.parse(dataForm.get("locale"))?.id;
+
+    if (nextLocaleId !== selectedLocales[0]?.id) {
+      await l10n.setLocales([nextLocaleId]);
+    }
+
+    navigate("..");
+  };
+
+  return (
+    <>
+      <Page.MainContent>
+        <Stack hasGutter>
+          <ListSearch placeholder={searchHelp} elements={locales} onChange={setFilteredLocales} />
+          <Form id="localeSelection" onSubmit={onSubmit}>
+            <FormGroup isStack>
+              {filteredLocales.map((locale) => (
+                <Radio
+                  key={locale.id}
+                  name="locale"
+                  id={locale.id}
+                  onChange={() => setSelected(locale)}
+                  label={
+                    <>
+                      <span className={`${textStyles.fontSizeLg}`}>
+                        <b>{locale.name}</b>
+                      </span> <Text component="small">{locale.id}</Text>
+                    </>
+                  }
+                  description={
+                    <>
+                      <span className={textStyles.fontSizeMd}>{locale.territory}</span>
+                    </>
+                  }
+                  value={JSON.stringify(locale)}
+                  checked={locale === selected}
+                />
+              ))}
+            </FormGroup>
+          </Form>
+        </Stack>
+      </Page.MainContent>
+      <Page.NextActions>
+        <Page.CancelAction />
+        <Page.Action type="submit" form="localeSelection">
+          {_("Select")}
+        </Page.Action>
+      </Page.NextActions>
+    </>
+  );
+}