web: More consistent search boxes (#1300)

## Problem - The search box for software patterns used the term "search" while the ones at localization used "filter". - Nothing was shown when there were no results for the filters at localization. ## Solution Make things consistent. There is room for improvement at the localization components, there is a lot of code repetition between the three... but that's not addressed as part of this pull request. ## Testing Unit tests **NOT** adapted.
agama-project · Jun 10, 2024 · 93b00bb · 93b00bb
2 parents 0330481 + 03cdcf8
commit 93b00bb
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 60 deletions.
diff --git a/web/src/components/l10n/KeyboardSelection.jsx b/web/src/components/l10n/KeyboardSelection.jsx
@@ -60,6 +60,32 @@ export default function KeyboardSelection() {
     navigate("..");
   };
 
+  let keymapsList = filteredKeymaps.map((keymap) => {
+    return (
+      <Radio
+        key={keymap.id}
+        name="keymap"
+        id={keymap.id}
+        onChange={() => setSelected(keymap)}
+        label={
+          <>
+            <span className={`${textStyles.fontSizeLg}`}>
+              <b>{keymap.name}</b>
+            </span> <Text component="small">{keymap.id}</Text>
+          </>
+        }
+        value={JSON.stringify(keymap)}
+        defaultChecked={keymap === selected}
+      />
+    );
+  });
+
+  if (keymapsList.length === 0) {
+    keymapsList = (
+      <b>{_("None of the keymaps match the filter.")}</b>
+    );
+  }
+
   return (
     <>
       <Page.Header>
@@ -70,23 +96,7 @@ export default function KeyboardSelection() {
         <Page.CardSection>
           <Form id="keymapSelection" onSubmit={onSubmit}>
             <FormGroup isStack>
-              {filteredKeymaps.map((keymap) => (
-                <Radio
-                  key={keymap.id}
-                  name="keymap"
-                  id={keymap.id}
-                  onChange={() => setSelected(keymap)}
-                  label={
-                    <>
-                      <span className={`${textStyles.fontSizeLg}`}>
-                        <b>{keymap.name}</b>
-                      </span> <Text component="small">{keymap.id}</Text>
-                    </>
-                  }
-                  value={JSON.stringify(keymap)}
-                  defaultChecked={keymap === selected}
-                />
-              ))}
+              {keymapsList}
             </FormGroup>
           </Form>
         </Page.CardSection>

diff --git a/web/src/components/l10n/LocaleSelection.jsx b/web/src/components/l10n/LocaleSelection.jsx
@@ -59,6 +59,32 @@ export default function LocaleSelection() {
     navigate("..");
   };
 
+  let localesList = filteredLocales.map((locale) => {
+    return (
+      <Radio
+        key={locale.id}
+        name="locale"
+        id={locale.id}
+        onChange={() => setSelected(locale)}
+        label={
+          <Flex gap={{ default: "gapSm" }}>
+            <span className={textStyles.fontSizeLg}><b>{locale.name}</b></span>
+            <span className={[textStyles.fontSizeMd, textStyles.color_100].join(" ")}>{locale.territory}</span>
+            <span className={[textStyles.fontSizeXs, textStyles.color_400].join(" ")}>{locale.id}</span>
+          </Flex>
+        }
+        value={JSON.stringify(locale)}
+        checked={locale === selected}
+      />
+    );
+  });
+
+  if (localesList.length === 0) {
+    localesList = (
+      <b>{_("None of the locales match the filter.")}</b>
+    );
+  }
+
   return (
     <>
       <Page.Header>
@@ -70,23 +96,7 @@ export default function LocaleSelection() {
         <Page.CardSection>
           <Form id="localeSelection" onSubmit={onSubmit}>
             <FormGroup isStack>
-              {filteredLocales.map((locale) => (
-                <Radio
-                  key={locale.id}
-                  name="locale"
-                  id={locale.id}
-                  onChange={() => setSelected(locale)}
-                  label={
-                    <Flex gap={{ default: "gapSm" }}>
-                      <span className={textStyles.fontSizeLg}><b>{locale.name}</b></span>
-                      <span className={[textStyles.fontSizeMd, textStyles.color_100].join(" ")}>{locale.territory}</span>
-                      <span className={[textStyles.fontSizeXs, textStyles.color_400].join(" ")}>{locale.id}</span>
-                    </Flex>
-                  }
-                  value={JSON.stringify(locale)}
-                  checked={locale === selected}
-                />
-              ))}
+              {localesList}
             </FormGroup>
           </Form>
         </Page.CardSection>

diff --git a/web/src/components/l10n/TimezoneSelection.jsx b/web/src/components/l10n/TimezoneSelection.jsx
@@ -90,6 +90,39 @@ export default function TimezoneSelection() {
     navigate("..");
   };
 
+  let timezonesList = filteredTimezones.map((timezone) => {
+    return (
+      <Radio
+        key={timezone.id}
+        name="timezone"
+        id={timezone.id}
+        onChange={() => setSelected(timezone)}
+        label={
+          <>
+            <span className={`${textStyles.fontSizeLg}`}>
+              <b>{timezone.parts.join('-')}</b>
+            </span> <Text component="small">{timezone.country}</Text>
+          </>
+        }
+        description={
+          <Flex columnGap={{ default: "columnGapXs" }}>
+            <Text component="small">{timezoneTime(timezone.id, { date }) || ""}</Text>
+            <Divider orientation={{ default: "vertical" }} />
+            <div>{timezone.details}</div>
+          </Flex>
+        }
+        value={JSON.stringify(timezone)}
+        defaultChecked={timezone === selected}
+      />
+    );
+  });
+
+  if (timezonesList.length === 0) {
+    timezonesList = (
+      <b>{_("None of the time zones match the filter.")}</b>
+    );
+  }
+
   return (
     <>
       <Page.Header>
@@ -101,30 +134,7 @@ export default function TimezoneSelection() {
         <Page.CardSection>
           <Form id="timezoneSelection" onSubmit={onSubmit}>
             <FormGroup isStack>
-              {filteredTimezones.map((timezone) => (
-                <Radio
-                  key={timezone.id}
-                  name="timezone"
-                  id={timezone.id}
-                  onChange={() => setSelected(timezone)}
-                  label={
-                    <>
-                      <span className={`${textStyles.fontSizeLg}`}>
-                        <b>{timezone.parts.join('-')}</b>
-                      </span> <Text component="small">{timezone.country}</Text>
-                    </>
-                  }
-                  description={
-                    <Flex columnGap={{ default: "columnGapXs" }}>
-                      <Text component="small">{timezoneTime(timezone.id, { date }) || ""}</Text>
-                      <Divider orientation={{ default: "vertical" }} />
-                      <div>{timezone.details}</div>
-                    </Flex>
-                  }
-                  value={JSON.stringify(timezone)}
-                  defaultChecked={timezone === selected}
-                />
-              ))}
+              {timezonesList}
             </FormGroup>
           </Form>
         </Page.CardSection>

diff --git a/web/src/components/software/SoftwarePatternsSelection.jsx b/web/src/components/software/SoftwarePatternsSelection.jsx
@@ -238,8 +238,8 @@ function SoftwarePatternsSelection() {
           <h2>{_("Software selection")}</h2>
           <SearchInput
             // TRANSLATORS: search field placeholder text
-            placeholder={_("Search")}
-            aria-label={_("Search")}
+            placeholder={_("Filter by pattern title or description")}
+            aria-label={_("Filter by pattern title or description")}
             value={searchValue}
             onChange={(_event, value) => setSearchValue(value)}
             onClear={() => setSearchValue("")}