fix(web): products selector redirection

web/package/agama-web-ui.changes

@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Thu Jun 13 16:05:53 UTC 2024 - David Diaz <dgonzalez@suse.com>
+
+- Fix redirection to products selector (gh#openSUSE/agama#1333).
+
 -------------------------------------------------------------------
 Thu Jun 13 10:52:22 UTC 2024 - David Diaz <dgonzalez@suse.com>
 

web/src/App.jsx

@@ -20,8 +20,8 @@
  */
 
 import React, { useEffect, useState } from "react";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
 import { Loading } from "./components/layout";
-import { Outlet } from "react-router-dom";
 import { ProductSelectionProgress } from "~/components/product";
 import { Questions } from "~/components/questions";
 import { ServerError, Installation } from "~/components/core";
@@ -40,8 +40,9 @@ import { BUSY } from "~/client/status";
  */
 function App() {
   const client = useInstallerClient();
+  const location = useLocation();
   const { connected, error } = useInstallerClientStatus();
-  const { products } = useProduct();
+  const { selectedProduct, products } = useProduct();
   const { language } = useInstallerL10n();
   const [status, setStatus] = useState(undefined);
   const [phase, setPhase] = useState(undefined);
@@ -84,6 +85,10 @@ function App() {
       return <Loading />;
     }
 
+    if (selectedProduct === null && !location.pathname.includes("products")) {
+      return <Navigate to="/products" />;
+    }
+
     if (phase === CONFIG && status === BUSY) {
       return <ProductSelectionProgress />;
     }

web/src/App.test.jsx

@@ -37,7 +37,9 @@ jest.mock("~/context/product", () => ({
   useProduct: () => {
     return {
       products: mockProducts,
-      selectedProduct: null
+      // FIXME: test that it redirects to products selector if no product
+      // selected yet
+      selectedProduct: {}
     };
   }
 }));

web/src/components/overview/OverviewPage.jsx

@@ -32,15 +32,14 @@ import {
   NotificationDrawerListItemHeader,
   Stack,
 } from "@patternfly/react-core";
-import { useProduct } from "~/context/product";
-import { useInstallerClient } from "~/context/installer";
-import { Link, Navigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Center } from "~/components/layout";
 import { CardField, EmptyState, Page, InstallButton } from "~/components/core";
 import L10nSection from "./L10nSection";
 import StorageSection from "./StorageSection";
 import SoftwareSection from "./SoftwareSection";
 import { _ } from "~/i18n";
+import { useInstallerClient } from "~/context/installer";
 
 const SCOPE_HEADERS = {
   users: _("Users"),
@@ -88,18 +87,13 @@ const IssuesList = ({ issues }) => {
 };
 
 export default function OverviewPage() {
-  const { selectedProduct } = useProduct();
   const [issues, setIssues] = useState([]);
   const client = useInstallerClient();
 
   useEffect(() => {
     client.issues().then(setIssues);
   }, [client]);
 
-  if (selectedProduct === null) {
-    return <Navigate to="/products" />;
-  }
-
   const resultSectionProps =
     issues.isEmpty
       ? {}

web/src/components/overview/OverviewPage.test.jsx

@@ -50,17 +50,6 @@ beforeEach(() => {
   });
 });
 
-describe("when no product is selected", () => {
-  beforeEach(() => {
-    mockSelectedProduct = null;
-  });
-
-  it("redirects to the products page", async () => {
-    installerRender(<OverviewPage />);
-    screen.getByText("Navigating to /products");
-  });
-});
-
 describe("when a product is selected", () => {
   beforeEach(() => {
     mockSelectedProduct = { name: "Tumbleweed" };