fix(web): fix the 'Cancel' button in the products selection (#1666)

Workaround the "404 Not Found" error. In production, and in that
scenario, calling `navigate(-1)` adds a '-1' to the URL. We might need
to do further research, but this patch should fix the issue.

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Fri Oct 11 09:46:02 UTC 2024 - Imobach Gonzalez Sosa <[email protected]>
+
+- Workaround the "not found" problem in the products selection page
+  (gh#agama-project/agama#1666).
+
 -------------------------------------------------------------------
 Thu Oct 10 17:55:34 UTC 2024 - Victorhck <[email protected]>
 

web/src/components/product/ProductSelectionPage.test.tsx

@@ -73,6 +73,6 @@ describe("when the user chooses a product but hits the cancel button", () => {
     await user.click(productOption);
     await user.click(cancelButton);
     expect(mockConfigMutation).not.toHaveBeenCalled();
-    expect(mockNavigateFn).toHaveBeenCalledWith(-1);
+    expect(mockNavigateFn).toHaveBeenCalledWith("/");
   });
 });

web/src/components/product/ProductSelectionPage.tsx

@@ -34,6 +34,7 @@ import {
   Split,
   Stack,
   FormGroup,
+  Button,
 } from "@patternfly/react-core";
 import { Page } from "~/components/core";
 import { Center } from "~/components/layout";
@@ -42,6 +43,7 @@ import styles from "@patternfly/react-styles/css/utilities/Text/text";
 import { slugify } from "~/utils";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
+import { useNavigate } from "react-router-dom";
 
 const ResponsiveGridItem = ({ children }) => (
   <GridItem sm={10} smOffset={1} lg={8} lgOffset={2} xl={6} xlOffset={3}>
@@ -82,6 +84,15 @@ const Option = ({ product, isChecked, onChange }) => {
   );
 };
 
+const BackLink = () => {
+  const navigate = useNavigate();
+  return (
+    <Button size="lg" variant="link" onClick={() => navigate("/")}>
+      {_("Cancel")}
+    </Button>
+  );
+};
+
 function ProductSelectionPage() {
   const setConfig = useConfigMutation();
   const { products, selectedProduct } = useProduct({ suspense: true });
@@ -120,7 +131,7 @@ function ProductSelectionPage() {
             </ResponsiveGridItem>
             <ResponsiveGridItem>
               <Flex justifyContent={{ default: "justifyContentFlexEnd" }}>
-                {selectedProduct && !isLoading && <Page.Back>{_("Cancel")}</Page.Back>}
+                {selectedProduct && !isLoading && <BackLink />}
                 <Page.Submit
                   form="productSelectionForm"
                   isDisabled={isSelectionDisabled}