fix(web): use product ID instead of generated slug (#1873)

The product selection page was using a dynamically generated slug based
on the product name. Since each product already has a unique ID, it is
more reliable and efficient to use it instead of generating a new one.

web/package/agama-web-ui.changes

@@ -1,8 +1,14 @@
+-------------------------------------------------------------------
+Wed Jan  8 15:16:51 UTC 2025 - David Diaz <[email protected]>
+
+- Use product ID instead of slug to link labels and descriptions to
+  their corresponding radio inputs (gh#agama-project/agama#1873).
+
 -------------------------------------------------------------------
 Wed Jan  8 13:12:44 UTC 2025 - David Diaz <[email protected]>
 
 - Show the cancel action at product selection page only when
-  a product is already selected (gh#agama-project/agama#1881).
+  a product is already selected (gh#agama-project/agama#1871).
 
 -------------------------------------------------------------------
 Fri Dec 20 12:53:41 UTC 2024 - David Diaz <[email protected]>

web/src/components/product/ProductSelectionPage.tsx

@@ -39,7 +39,6 @@ import { Center } from "~/components/layout";
 import { useConfigMutation, useProduct } from "~/queries/software";
 import pfTextStyles from "@patternfly/react-styles/css/utilities/Text/text";
 import pfRadioStyles from "@patternfly/react-styles/css/components/Radio/radio";
-import { slugify } from "~/utils";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
 import { useNavigate } from "react-router-dom";
@@ -51,8 +50,7 @@ const ResponsiveGridItem = ({ children }) => (
 );
 
 const Option = ({ product, isChecked, onChange }) => {
-  const id = slugify(product.name);
-  const detailsId = `${id}-details`;
+  const detailsId = `${product.id}-details`;
   const logoSrc = `assets/logos/${product.icon}`;
   // TRANSLATORS: %s will be replaced by a product name. E.g., "openSUSE Tumbleweed"
   const logoAltText = sprintf(_("%s logo"), product.name);
@@ -63,7 +61,7 @@ const Option = ({ product, isChecked, onChange }) => {
         <CardBody>
           <Split hasGutter>
             <input
-              id={id}
+              id={product.id}
               type="radio"
               name="product"
               className={pfRadioStyles.radioInput}
@@ -74,7 +72,7 @@ const Option = ({ product, isChecked, onChange }) => {
             <img aria-hidden src={logoSrc} alt={logoAltText} />
             <Stack hasGutter>
               <label
-                htmlFor={id}
+                htmlFor={product.id}
                 className={`${pfTextStyles.fontSizeLg} ${pfTextStyles.fontWeightBold}`}
               >
                 {product.name}