WIP

web/src/components/layout/Icon.jsx

@@ -47,6 +47,7 @@ import HomeStorage from "@icons/home_storage.svg?component";
 import Info from "@icons/info.svg?component";
 import Inventory from "@icons/inventory_2.svg?component";
 import Lan from "@icons/lan.svg?component";
+import ListAlt from "@icons/list_alt.svg?component";
 import Lock from "@icons/lock.svg?component";
 import ManageAccounts from "@icons/manage_accounts.svg?component";
 import Menu from "@icons/menu.svg?component";
@@ -60,7 +61,6 @@ import SettingsEthernet from "@icons/settings_ethernet.svg?component";
 import SettingsFill from "@icons/settings-fill.svg?component";
 import SignalCellularAlt from "@icons/signal_cellular_alt.svg?component";
 import Storage from "@icons/storage.svg?component";
-import Summarize from "@icons/summarize.svg?component";
 import TaskAlt from "@icons/task_alt.svg?component";
 import Terminal from "@icons/terminal.svg?component";
 import Translate from "@icons/translate.svg?component";
@@ -101,6 +101,7 @@ const icons = {
   inventory_2: Inventory,
   lan: Lan,
   loading: Loading,
+  list_alt: ListAlt,
   lock: Lock,
   manage_accounts: ManageAccounts,
   menu: Menu,
@@ -114,7 +115,6 @@ const icons = {
   settings_ethernet: SettingsEthernet,
   signal_cellular_alt: SignalCellularAlt,
   storage: Storage,
-  summarize: Summarize,
   task_alt: TaskAlt,
   terminal: Terminal,
   translate: Translate,

web/src/components/overview/Overview.jsx

@@ -45,7 +45,7 @@ function Overview() {
     <Page
       // TRANSLATORS: page title
       title={_("Installation Summary")}
-      icon="summarize"
+      icon="list_alt"
       action={<InstallButton onClick={() => setShowErrors(true)} />}
     >
       <ProductSection />

web/src/components/product/ProductPage.jsx

@@ -20,23 +20,26 @@
  */
 
 import React, { useEffect, useState } from "react";
-import { Button } from "@patternfly/react-core";
+import { Button, Form } from "@patternfly/react-core";
 
 import { _ } from "~/i18n";
 import { BUSY } from "~/client/status";
 import { If, Page, Popup, Section } from "~/components/core";
 import { noop, useCancellablePromise } from "~/utils";
-import { ProductSelectionForm } from "~/components/product";
+import { ProductSelector } from "~/components/product";
 import { useInstallerClient } from "~/context/installer";
 import { useProduct } from "~/context/product";
 
 const ProductSelectionPopup = ({ isOpen = false, onAccept = noop, onCancel = noop }) => {
   const { manager, software } = useInstallerClient();
-  const { selectedProduct } = useProduct();
+  const { products, selectedProduct } = useProduct();
+  const [newProductId, setNewProductId] = useState(selectedProduct?.id);
 
-  const onSubmit = async (id) => {
-    if (id !== selectedProduct?.id) {
-      await software.product.select(id);
+  const onSubmit = async (e) => {
+    e.preventDefault();
+
+    if (newProductId !== selectedProduct?.id) {
+      await software.product.select(newProductId);
       manager.startProbing();
     }
 
@@ -49,7 +52,9 @@ const ProductSelectionPopup = ({ isOpen = false, onAccept = noop, onCancel = noo
       description=""
       isOpen={isOpen}
     >
-      <ProductSelectionForm id="productSelectionForm" onSubmit={onSubmit} />
+      <Form id="productSelectionForm" onSubmit={onSubmit}>
+        <ProductSelector value={newProductId} products={products} onChange={setNewProductId} />
+      </Form>
       <Popup.Actions>
         <Popup.Confirm form="productSelectionForm" type="submit">
           {_("Accept")}

web/src/components/product/ProductSelectionPage.jsx

@@ -19,32 +19,35 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Button } from "@patternfly/react-core";
+import { Button, Form, FormGroup } from "@patternfly/react-core";
 
 import { _ } from "~/i18n";
 import { Icon, Loading } from "~/components/layout";
-import { ProductSelectionForm } from "~/components/product";
+import { ProductSelector } from "~/components/product";
 import { Title, PageIcon, MainActions } from "~/components/layout/Layout";
 import { useInstallerClient } from "~/context/installer";
 import { useProduct } from "~/context/product";
 
 function ProductSelectionPage() {
   const { manager, software } = useInstallerClient();
   const navigate = useNavigate();
-  const { selectedProduct, products } = useProduct();
+  const { products, selectedProduct } = useProduct();
+  const [newProductId, setNewProductId] = useState(selectedProduct?.id);
 
   useEffect(() => {
     // TODO: display a notification in the UI to emphasizes that
     // selected product has changed
     return software.product.onChange(() => navigate("/"));
   }, [software, navigate]);
 
-  const onSubmit = async (id) => {
-    if (id !== selectedProduct?.id) {
+  const onSubmit = async (e) => {
+    e.preventDefault();
+
+    if (newProductId !== selectedProduct?.id) {
       // TODO: handle errors
-      await software.product.select(id);
+      await software.product.select(newProductId);
       manager.startProbing();
     }
 
@@ -66,11 +69,11 @@ function ProductSelectionPage() {
           {_("Select")}
         </Button>
       </MainActions>
-      <ProductSelectionForm
-        id="productSelectionForm"
-        label={_("Choose a product")}
-        onSubmit={onSubmit}
-      />
+      <Form id="productSelectionForm" onSubmit={onSubmit}>
+        <FormGroup isStack label={_("Choose a product")} role="radiogroup">
+          <ProductSelector value={newProductId} products={products} onChange={setNewProductId} />
+        </FormGroup>
+      </Form>
     </>
   );
 }

web/src/components/product/ProductSelector.jsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { Card, CardBody, Radio } from "@patternfly/react-core";
+
+import { _ } from "~/i18n";
+import { If } from "~/components/core";
+import { noop } from "~/utils";
+
+export default function ProductSelector({ value, products = [], onChange = noop }) {
+  const isSelected = (product) => product.id === value;
+
+  return (
+    <If
+      condition={products.length === 0}
+      then={<p>{_("No products available for selection")}</p>}
+      else={
+        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>
+        ))
+      }
+    />
+  );
+}

web/src/components/product/ProductSelectionForm.test.jsx → web/src/components/product/ProductSelector.test.jsx

@@ -22,24 +22,11 @@
 import React from "react";
 import { screen } from "@testing-library/react";
 import { installerRender } from "~/test-utils";
-import { ProductSelectionForm } from "~/components/product";
+import { ProductSelector } from "~/components/product";
 import { createClient } from "~/client";
 
-let mockProducts;
-let mockSelectedProduct;
-
 jest.mock("~/client");
 
-jest.mock("~/context/product", () => ({
-  ...jest.requireActual("~/context/product"),
-  useProduct: () => {
-    return {
-      products: mockProducts,
-      selectedProduct: mockSelectedProduct
-    };
-  }
-}));
-
 const products = [
   {
     id: "ALP-Dolomite",
@@ -59,33 +46,30 @@ const products = [
 ];
 
 beforeEach(() => {
-  mockProducts = products;
-  mockSelectedProduct = products[0];
-
   createClient.mockImplementation(() => ({}));
 });
 
 it("shows an option for each product", async () => {
-  installerRender(<ProductSelectionForm />);
+  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" });
 });
 
-it("selects the current product by default", async () => {
-  installerRender(<ProductSelectionForm />);
-  await screen.findByRole("radio", { name: "ALP Dolomite", checked: true });
+it("selects the given value", async () => {
+  installerRender(<ProductSelector value="Tumbleweed" products={products} />);
+  await screen.findByRole("radio", { name: "openSUSE Tumbleweed", clicked: true });
 });
 
-it("selects the clicked product", async () => {
-  const { user } = installerRender(<ProductSelectionForm />);
+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);
-  await screen.findByRole("radio", { name: "openSUSE Tumbleweed", clicked: true });
+  expect(onChangeFn).toHaveBeenCalledWith("Tumbleweed");
 });
 
 it("shows a message if there is no product for selection", async () => {
-  mockProducts = [];
-  installerRender(<ProductSelectionForm />);
-  await screen.findByText(/no products found/i);
+  installerRender(<ProductSelector />);
+  await screen.findByText(/no products available/i);
 });

web/src/components/product/index.js

@@ -20,5 +20,5 @@
  */
 
 export { default as ProductPage } from "./ProductPage";
-export { default as ProductSelectionForm } from "./ProductSelectionForm";
 export { default as ProductSelectionPage } from "./ProductSelectionPage";
+export { default as ProductSelector } from "./ProductSelector";