fix(web): restore cancel behavior at product selection page (#1871)

## Problem

The `Cancel` action at product selection page should be only rendered if
there is a product already selected. By mistake, such a behavior was
drop in #1769, when sticking
actions to the bottom of the page.

## Solution

Restore the conditional rendering for the mentioned action and add a
unit test to be aware if come change breaks it again.

## Testing

- Added a new unit test
- Tested manually

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Wed Jan  8 13:12:44 UTC 2025 - David Diaz <[email protected]>
+
+- 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 <[email protected]>
 

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("/");
+    });
   });
 });

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}