[web] Limit when link to navigation page is rendered

By not displaying it when already in the product selection path.

web/src/components/core/ChangeProductButton.jsx

@@ -20,15 +20,16 @@
  */
 
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { useSoftware } from "~/context/software";
 import { Icon } from "~/components/layout";
 
 export default function ChangeProductButton() {
   const { products } = useSoftware();
+  const { pathname } = useLocation();
   const multiProduct = products?.length > 1;
 
-  if (!multiProduct) {
+  if (!multiProduct || pathname === "/products") {
     return null;
   }
 

web/src/components/core/ChangeProductButton.test.jsx

@@ -21,7 +21,7 @@
 
 import React from "react";
 import { screen, waitFor } from "@testing-library/react";
-import { plainRender, installerRender } from "~/test-utils";
+import { installerRender, mockRoutes } from "~/test-utils";
 import { createClient } from "~/client";
 import { ChangeProductButton } from "~/components/core";
 
@@ -48,6 +48,21 @@ beforeEach(() => {
 });
 
 describe("ChangeProductButton", () => {
+  describe("when it's already in the product selection path", () => {
+    beforeEach(() => {
+      mockRoutes("/products");
+      mockProducts = [
+        { id: "openSUSE", name: "openSUSE Tumbleweed" },
+        { id: "Leap Micro", name: "openSUSE Micro" }
+      ];
+    });
+
+    it("renders nothing", async () => {
+      const { container } = installerRender(<ChangeProductButton />);
+      await waitFor(() => expect(container).toBeEmptyDOMElement());
+    });
+  });
+
   describe("when there is only a single product", () => {
     beforeEach(() => {
       mockProducts = [
@@ -56,7 +71,7 @@ describe("ChangeProductButton", () => {
     });
 
     it("renders nothing", async () => {
-      const { container } = plainRender(<ChangeProductButton />);
+      const { container } = installerRender(<ChangeProductButton />);
       await waitFor(() => expect(container).toBeEmptyDOMElement());
     });
   });

web/src/test-utils.js

@@ -33,6 +33,11 @@ import { render } from "@testing-library/react";
 import { createClient } from "~/client/index";
 import { InstallerClientProvider } from "~/context/installer";
 
+/**
+ * Internal mock for manipulating routes, using ["/"] by default
+ */
+const initialRoutes = jest.fn().mockReturnValue(["/"]);
+
 /**
  * Allows checking when react-router-dom navigate function  was
  * called with certain path
@@ -42,6 +47,18 @@ import { InstallerClientProvider } from "~/context/installer";
  */
 const mockNavigateFn = jest.fn();
 
+/**
+ * Allows manipulating MemoryRouter routes for testing purpose
+ *
+ * NOTE: on purpose, it will take effect only once.
+ *
+ * @example
+ *   mockRoutes("/products", "/storage");
+ *
+ * @param {...string} routes
+ */
+const mockRoutes = (...routes) => initialRoutes.mockReturnValueOnce(routes);
+
 // Centralize the react-router-dom mock here
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual("react-router-dom"),
@@ -55,7 +72,7 @@ const Providers = ({ children }) => {
 
   return (
     <InstallerClientProvider client={client}>
-      <MemoryRouter>
+      <MemoryRouter initialEntries={initialRoutes()}>
         {children}
       </MemoryRouter>
     </InstallerClientProvider>
@@ -138,5 +155,6 @@ export {
   createCallbackMock,
   mockComponent,
   mockLayout,
-  mockNavigateFn
+  mockNavigateFn,
+  mockRoutes,
 };