From c75fb72fbc03a7452fabf30bc9d88e3517eb1b58 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 13:06:01 +0000
Subject: [PATCH 1/2] fix(web): restore cancel behaviour at product selection
 page

By displaying the action only when there is a product already
selected. It reverts a mistake introduced at 2a611955943.
---
 .../product/ProductSelectionPage.test.tsx     | 66 +++++++++++++------
 .../product/ProductSelectionPage.tsx          |  2 +-
 2 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/web/src/components/product/ProductSelectionPage.test.tsx b/web/src/components/product/ProductSelectionPage.test.tsx
index 4209e2da58..a1682bc38d 100644
--- a/web/src/components/product/ProductSelectionPage.test.tsx
+++ b/web/src/components/product/ProductSelectionPage.test.tsx
@@ -27,7 +27,6 @@ import { ProductSelectionPage } from "~/components/product";
 import { Product } from "~/types/software";
 import { useProduct } from "~/queries/software";
 
-const mockConfigMutation = jest.fn();
 const tumbleweed: Product = {
   id: "Tumbleweed",
   name: "openSUSE Tumbleweed",
@@ -42,37 +41,64 @@ const microOs: Product = {
   description: "MicroOS description",
 };
 
+const mockConfigMutation = jest.fn();
+let mockSelectedProduct: Product;
+
 jest.mock("~/queries/software", () => ({
   ...jest.requireActual("~/queries/software"),
   useProduct: (): ReturnType<typeof useProduct> => {
     return {
       products: [tumbleweed, microOs],
-      selectedProduct: tumbleweed,
+      selectedProduct: mockSelectedProduct,
     };
   },
   useProductChanges: () => jest.fn(),
   useConfigMutation: () => ({ mutate: mockConfigMutation }),
 }));
 
-describe("when the user chooses a product and hits the confirmation button", () => {
-  it("triggers the product selection", async () => {
-    const { user } = installerRender(<ProductSelectionPage />);
-    const productOption = screen.getByRole("radio", { name: microOs.name });
-    const selectButton = screen.getByRole("button", { name: "Select" });
-    await user.click(productOption);
-    await user.click(selectButton);
-    expect(mockConfigMutation).toHaveBeenCalledWith({ product: microOs.id });
+describe("ProductSelectionPage", () => {
+  beforeEach(() => {
+    mockSelectedProduct = tumbleweed;
+  });
+
+  describe("when there is a product already selected", () => {
+    it("renders the Cancel button", () => {
+      installerRender(<ProductSelectionPage />);
+      screen.getByRole("button", { name: "Cancel" });
+    });
+  });
+
+  describe("when there is not a product selected yet", () => {
+    beforeEach(() => {
+      mockSelectedProduct = undefined;
+    });
+
+    it("does not render the Cancel button", () => {
+      installerRender(<ProductSelectionPage />);
+      expect(screen.queryByRole("button", { name: "Cancel" })).toBeNull();
+    });
+  });
+
+  describe("when the user chooses a product and hits the confirmation button", () => {
+    it("triggers the product selection", async () => {
+      const { user } = installerRender(<ProductSelectionPage />);
+      const productOption = screen.getByRole("radio", { name: microOs.name });
+      const selectButton = screen.getByRole("button", { name: "Select" });
+      await user.click(productOption);
+      await user.click(selectButton);
+      expect(mockConfigMutation).toHaveBeenCalledWith({ product: microOs.id });
+    });
   });
-});
 
-describe("when the user chooses a product but hits the cancel button", () => {
-  it("does not trigger the product selection and goes back", async () => {
-    const { user } = installerRender(<ProductSelectionPage />);
-    const productOption = screen.getByRole("radio", { name: microOs.name });
-    const cancelButton = screen.getByRole("button", { name: "Cancel" });
-    await user.click(productOption);
-    await user.click(cancelButton);
-    expect(mockConfigMutation).not.toHaveBeenCalled();
-    expect(mockNavigateFn).toHaveBeenCalledWith("/");
+  describe("when the user chooses a product but hits the cancel button", () => {
+    it("does not trigger the product selection and goes back", async () => {
+      const { user } = installerRender(<ProductSelectionPage />);
+      const productOption = screen.getByRole("radio", { name: microOs.name });
+      const cancelButton = screen.getByRole("button", { name: "Cancel" });
+      await user.click(productOption);
+      await user.click(cancelButton);
+      expect(mockConfigMutation).not.toHaveBeenCalled();
+      expect(mockNavigateFn).toHaveBeenCalledWith("/");
+    });
   });
 });
diff --git a/web/src/components/product/ProductSelectionPage.tsx b/web/src/components/product/ProductSelectionPage.tsx
index c24135c712..aa5d918f64 100644
--- a/web/src/components/product/ProductSelectionPage.tsx
+++ b/web/src/components/product/ProductSelectionPage.tsx
@@ -139,7 +139,7 @@ function ProductSelectionPage() {
         </Center>
       </Page.Content>
       <Page.Actions>
-        <BackLink />
+        {selectedProduct && !isLoading && <BackLink />}
         <Page.Submit
           form="productSelectionForm"
           isDisabled={isSelectionDisabled}

From a2ae276dc71a7b72303df8226a33276d291a5665 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 13:14:24 +0000
Subject: [PATCH 2/2] doc(web): update changes file

---
 web/package/agama-web-ui.changes | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web/package/agama-web-ui.changes b/web/package/agama-web-ui.changes
index 398cf686d1..f83863a04d 100644
--- a/web/package/agama-web-ui.changes
+++ b/web/package/agama-web-ui.changes
@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+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).
+
 -------------------------------------------------------------------
 Fri Dec 20 12:53:41 UTC 2024 - David Diaz <dgonzalez@suse.com>