From 4717a3648bdac50f4feacf1273ed2cd15ed6b31d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Wed, 4 Sep 2024 13:30:37 +0100
Subject: [PATCH] fix(web): restore the radios in product selection

Since it's arguably that they might confuse users and also because of
consistent with the rest of the UI. They could be drop or hidden later,
but thinking globally in all selectors and implications of doing so.

Also, this commit improves a little the proposed layout by making use of
the label for "increasing" the clickable area instead of adding a
handler for the PF/Card component itself. Again, this can be refactored
later if really needed.
---
 web/src/assets/styles/app.scss                |  8 ++++
 .../product/ProductSelectionPage.jsx          | 39 ++++++++++---------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/web/src/assets/styles/app.scss b/web/src/assets/styles/app.scss
index c8dfab146e..509cba4a17 100644
--- a/web/src/assets/styles/app.scss
+++ b/web/src/assets/styles/app.scss
@@ -35,3 +35,11 @@ button.remove-link:hover {
   position: relative;
   width: 100%;
 }
+
+#productSelectionForm {
+  .pf-v5-c-radio input {
+    align-self: center;
+    width: 20px;
+    height: 20px;
+  }
+}
diff --git a/web/src/components/product/ProductSelectionPage.jsx b/web/src/components/product/ProductSelectionPage.jsx
index a15f9326d6..d223ee7d56 100644
--- a/web/src/components/product/ProductSelectionPage.jsx
+++ b/web/src/components/product/ProductSelectionPage.jsx
@@ -21,7 +21,7 @@
  */
 
 import React, { useState } from "react";
-import { Card, CardBody, Flex, Form, Grid, GridItem } from "@patternfly/react-core";
+import { Card, CardBody, Flex, Form, Grid, GridItem, Radio, Split, Stack } from "@patternfly/react-core";
 import { Page } from "~/components/core";
 import { Center } from "~/components/layout";
 import { useConfigMutation, useProduct } from "~/queries/software";
@@ -62,17 +62,12 @@ function ProductSelectionPage() {
         src={productIcon}
         alt={alt}
         width="80px"
-        style={{ height: 'auto', width: '10%', float: 'left', padding: '0 20px 20px 0' }}
       />
     );
   };
 
   const isSelectionDisabled = !nextProduct || nextProduct === selectedProduct;
 
-  const handleCardClick = (product) => {
-    setNextProduct(product);
-  };
-
   return (
     <Page>
       <Center>
@@ -83,21 +78,27 @@ function ProductSelectionPage() {
                 <Card
                   key={index}
                   isRounded
-                  onClick={() => handleCardClick(product)}
-                  style={{
-                    cursor: 'pointer',  // Change the cursor to indicate clickable
-                    border: nextProduct === product ? '2px solid #51c38d' : 'none',  // highlight selected card
-                  }}
                 >
                   <CardBody>
-                    <ProductIcon
-                      src={product.icon}
-                      alt={`${product.name} product icon`}
+                    <Radio
+                      key={index}
+                      name="product"
+                      id={product.name}
+                      label={
+                        <Split hasGutter>
+                          <ProductIcon
+                            src={product.icon}
+                            alt={`${product.name} product icon`}
+                          />
+                          <Stack hasGutter>
+                            <Label>{product.name}</Label>
+                            <p>{product.description}</p>
+                          </Stack>
+                        </Split>
+                      }
+                      isChecked={nextProduct === product}
+                      onChange={() => setNextProduct(product)}
                     />
-                    <div>
-                      <Label>{product.name}</Label>
-                      <p>{product.description}</p>
-                    </div>
                   </CardBody>
                 </Card>
               </Item>
@@ -122,4 +123,4 @@ function ProductSelectionPage() {
   );
 }
 
-export default ProductSelectionPage;
\ No newline at end of file
+export default ProductSelectionPage;