From 263616b84c4d9ff7bd83e8f3f2f65518c250e86a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Sat, 10 Feb 2024 01:29:50 +0000
Subject: [PATCH] [web] Adapt product/ProductSelector to core/Selector

---
 .../components/product/ProductPage.test.jsx   | 10 +++---
 .../product/ProductSelectionPage.jsx          |  2 +-
 .../components/product/ProductSelector.jsx    | 32 +++++++++----------
 .../product/ProductSelector.test.jsx          | 14 ++++----
 4 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/web/src/components/product/ProductPage.test.jsx b/web/src/components/product/ProductPage.test.jsx
index 9981ee1360..6b27ff8c50 100644
--- a/web/src/components/product/ProductPage.test.jsx
+++ b/web/src/components/product/ProductPage.test.jsx
@@ -201,10 +201,10 @@ describe("when the button for changing the product is clicked", () => {
 
       const popup = await screen.findByRole("dialog");
       within(popup).getByText("Choose a product");
-      within(popup).getByRole("radio", { name: "Test Product1" });
-      const radio = within(popup).getByRole("radio", { name: "Test Product2" });
+      within(popup).getByRole("row", { name: /Test Product1/ });
+      const productOption = within(popup).getByRole("row", { name: /Test Product2/ });
 
-      await user.click(radio);
+      await user.click(productOption);
       const accept = within(popup).getByRole("button", { name: "Accept" });
       await user.click(accept);
 
@@ -220,9 +220,9 @@ describe("when the button for changing the product is clicked", () => {
         await user.click(button);
 
         const popup = await screen.findByRole("dialog");
-        const radio = within(popup).getByRole("radio", { name: "Test Product2" });
+        const productOption = within(popup).getByRole("row", { name: /Test Product2/ });
 
-        await user.click(radio);
+        await user.click(productOption);
         const cancel = within(popup).getByRole("button", { name: "Cancel" });
         await user.click(cancel);
 
diff --git a/web/src/components/product/ProductSelectionPage.jsx b/web/src/components/product/ProductSelectionPage.jsx
index 76e2dc06de..ae6cc22629 100644
--- a/web/src/components/product/ProductSelectionPage.jsx
+++ b/web/src/components/product/ProductSelectionPage.jsx
@@ -62,7 +62,7 @@ function ProductSelectionPage() {
     // TRANSLATORS: page title
     <Page icon="home_storage" title={_("Product selection")}>
       <Form id="productSelectionForm" onSubmit={onSubmit}>
-        <FormGroup isStack label={_("Choose a product")} role="radiogroup">
+        <FormGroup isStack label={_("Choose a product")}>
           <ProductSelector value={newProductId} products={products} onChange={setNewProductId} />
         </FormGroup>
       </Form>
diff --git a/web/src/components/product/ProductSelector.jsx b/web/src/components/product/ProductSelector.jsx
index 311a6a7e89..c03be42edb 100644
--- a/web/src/components/product/ProductSelector.jsx
+++ b/web/src/components/product/ProductSelector.jsx
@@ -20,7 +20,7 @@
  */
 
 import React from "react";
-import { Card, CardBody, Radio } from "@patternfly/react-core";
+import { Selector } from "~/components/core";
 
 import { _ } from "~/i18n";
 import { noop } from "~/utils";
@@ -28,22 +28,22 @@ import { noop } from "~/utils";
 export default function ProductSelector({ value, products = [], onChange = noop }) {
   if (products.length === 0) return <p>{_("No products available for selection")}</p>;
 
-  const isSelected = (product) => product.id === value;
+  const onSelectionChange = (selection) => onChange(selection[0]);
 
   return (
-    products.map((p) => (
-      <Card key={p.id} className={isSelected(p) && "selected-product"}>
-        <CardBody>
-          <Radio
-            id={p.id}
-            name="product"
-            label={p.name}
-            description={p.description}
-            isChecked={isSelected(p)}
-            onClick={() => onChange(p.id)}
-          />
-        </CardBody>
-      </Card>
-    ))
+    <Selector
+      aria-label={_("Available products")}
+      selectedIds={[value]}
+      onSelectionChange={onSelectionChange}
+    >
+      { products.map(p => (
+        <Selector.Option id={p.id} key={p.id}>
+          <div className="stack">
+            <h3>{p.name}</h3>
+            <p>{p.description}</p>
+          </div>
+        </Selector.Option>
+      ))}
+    </Selector>
   );
 }
diff --git a/web/src/components/product/ProductSelector.test.jsx b/web/src/components/product/ProductSelector.test.jsx
index b40af415a0..c5d08e6bcb 100644
--- a/web/src/components/product/ProductSelector.test.jsx
+++ b/web/src/components/product/ProductSelector.test.jsx
@@ -51,21 +51,23 @@ beforeEach(() => {
 
 it("shows an option for each product", async () => {
   installerRender(<ProductSelector products={products} />);
-  await screen.findByRole("radio", { name: "ALP Dolomite" });
-  await screen.findByRole("radio", { name: "openSUSE Tumbleweed" });
-  await screen.findByRole("radio", { name: "openSUSE MicroOS" });
+
+  await screen.findByRole("grid", { name: "Available products" });
+  screen.getByRole("row", { name: /ALP Dolomite/ });
+  screen.getByRole("row", { name: /openSUSE Tumbleweed/ });
+  screen.getByRole("row", { name: /openSUSE MicroOS/ });
 });
 
 it("selects the given value", async () => {
   installerRender(<ProductSelector value="Tumbleweed" products={products} />);
-  await screen.findByRole("radio", { name: "openSUSE Tumbleweed", clicked: true });
+  await screen.findByRole("row", { name: /openSUSE Tumbleweed/, selected: true });
 });
 
 it("calls onChange if a new option is clicked", async () => {
   const onChangeFn = jest.fn();
   const { user } = installerRender(<ProductSelector products={products} onChange={onChangeFn} />);
-  const radio = await screen.findByRole("radio", { name: "openSUSE Tumbleweed" });
-  await user.click(radio);
+  const productOption = await screen.findByRole("row", { name: /openSUSE Tumbleweed/ });
+  await user.click(productOption);
   expect(onChangeFn).toHaveBeenCalledWith("Tumbleweed");
 });