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

@@ -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;
+  }
+}

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;
+export default ProductSelectionPage;