From 395bbe437dc9c480ce094892bd035eb290ad2217 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.com>
Date: Wed, 8 Jan 2025 15:05:36 +0000
Subject: [PATCH 1/2] fix(web): use product ID instead of generated slug

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/src/components/product/ProductSelectionPage.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/web/src/components/product/ProductSelectionPage.tsx b/web/src/components/product/ProductSelectionPage.tsx
index aa5d918f64..a4ac2009dd 100644
--- a/web/src/components/product/ProductSelectionPage.tsx
+++ b/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}

From 9e7b1b54a4e0aa901b7be1fe0f97112f80d04dc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.com>
Date: Wed, 8 Jan 2025 15:21:32 +0000
Subject: [PATCH 2/2] doc(web): add entry in changes file

And fix the previous one, which has a wrong reference to related PR.
---
 web/package/agama-web-ui.changes | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/package/agama-web-ui.changes b/web/package/agama-web-ui.changes
index f83863a04d..734d86f2e8 100644
--- a/web/package/agama-web-ui.changes
+++ b/web/package/agama-web-ui.changes
@@ -1,8 +1,14 @@
+-------------------------------------------------------------------
+Wed Jan  8 15:16:51 UTC 2025 - David Diaz <dgonzalez@suse.com>
+
+- 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 <dgonzalez@suse.com>
 
 - 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 <dgonzalez@suse.com>