refactor(web): drop products context (#1454)

Use TanStack to replace `ProductProvider`. It is related to #1439 and
#1452.

web/src/App.jsx

@@ -26,7 +26,7 @@ import { Questions } from "~/components/questions";
 import { ServerError, Installation } from "~/components/core";
 import { useInstallerL10n } from "./context/installerL10n";
 import { useInstallerClientStatus } from "~/context/installer";
-import { useProduct } from "./context/product";
+import { useProduct, useProductChanges } from "./queries/software";
 import { CONFIG, INSTALL, STARTUP } from "~/client/phase";
 import { BUSY } from "~/client/status";
 import { useL10nConfigChanges } from "~/queries/l10n";
@@ -44,6 +44,7 @@ function App() {
   const { selectedProduct, products } = useProduct();
   const { language } = useInstallerL10n();
   useL10nConfigChanges();
+  useProductChanges();
 
   const Content = () => {
     if (error) return <ServerError />;
@@ -58,7 +59,7 @@ function App() {
       return <Loading />;
     }
 
-    if (selectedProduct === null && location.pathname !== "/products") {
+    if ((selectedProduct === undefined) && (location.pathname !== "/products")) {
       return <Navigate to="/products" />;
     }
 

web/src/App.test.jsx

@@ -28,21 +28,23 @@ import { createClient } from "~/client";
 import { STARTUP, CONFIG, INSTALL } from "~/client/phase";
 import { IDLE, BUSY } from "~/client/status";
 import { useL10nConfigChanges } from "./queries/l10n";
+import { useProductChanges } from "./queries/software";
 
 jest.mock("~/client");
 
 // list of available products
 let mockProducts;
 let mockSelectedProduct;
 
-jest.mock("~/context/product", () => ({
-  ...jest.requireActual("~/context/product"),
+jest.mock("~/queries/software", () => ({
+  ...jest.requireActual("~/queries/software"),
   useProduct: () => {
     return {
       products: mockProducts,
       selectedProduct: mockSelectedProduct
     };
-  }
+  },
+  useProductChanges: () => jest.fn()
 }));
 
 jest.mock("~/queries/l10n", () => ({
@@ -78,7 +80,7 @@ describe("App", () => {
         l10n: {
           getUIKeymap: jest.fn().mockResolvedValue("en"),
           getUILocale: jest.fn().mockResolvedValue("en_us"),
-          setUILocale: jest.fn().mockResolvedValue("en_us"),
+          setUILocale: jest.fn().mockResolvedValue("en_us")
         }
       };
     });
@@ -125,6 +127,7 @@ describe("App", () => {
     describe("if the service is busy", () => {
       beforeEach(() => {
         mockClientStatus.status = BUSY;
+        mockSelectedProduct = { id: "Tumbleweed" };
       });
 
       it("redirects to product selection progress", async () => {

web/src/MainLayout.jsx

@@ -32,7 +32,7 @@ import { Icon, Loading } from "~/components/layout";
 import { About, InstallerOptions, LogsButton } from "~/components/core";
 import { _ } from "~/i18n";
 import { rootRoutes } from "~/router";
-import { useProduct } from "~/context/product";
+import { useProduct } from "./queries/software";
 
 const Header = () => {
   const { selectedProduct } = useProduct();

web/src/SimpleLayout.jsx

@@ -19,7 +19,7 @@
  * find current contact information at www.suse.com.
  */
 
-import React from "react";
+import React, { Suspense } from "react";
 import { Outlet } from "react-router-dom";
 import {
   Masthead, MastheadContent,
@@ -28,6 +28,7 @@ import {
 } from "@patternfly/react-core";
 import { InstallerOptions } from "./components/core";
 import { _ } from "~/i18n";
+import { Loading } from "./components/layout";
 
 /**
  * Simple layout for displaying content that comes before product configuration
@@ -49,7 +50,9 @@ export default function SimpleLayout({ showOutlet = true, showInstallerOptions =
           </Toolbar>
         </MastheadContent>
       </Masthead>
-      {showOutlet ? <Outlet /> : children}
+      <Suspense fallback={<Loading />}>
+        {showOutlet ? <Outlet /> : children}
+      </Suspense>
     </Page>
   );
 }

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

@@ -29,9 +29,10 @@ const startInstallationFn = jest.fn();
 let mockSelectedProduct = { id: "Tumbleweed" };
 
 jest.mock("~/client");
-jest.mock("~/context/product", () => ({
-  ...jest.requireActual("~/context/product"),
-  useProduct: () => ({ selectedProduct: mockSelectedProduct })
+jest.mock("~/queries/software", () => ({
+  ...jest.requireActual("~/queries/software"),
+  useProduct: () => ({ selectedProduct: mockSelectedProduct }),
+  useProductChanges: () => jest.fn()
 }));
 
 jest.mock("~/components/overview/L10nSection", () => () => <div>Localization Section</div>);

web/src/components/product/ProductRegistrationPage.jsx

@@ -23,7 +23,7 @@ import React, { useState } from "react";
 import { Alert, Form, FormGroup } from "@patternfly/react-core";
 import { useNavigate } from "react-router-dom";
 import { EmailInput, Page, PasswordInput } from "~/components/core";
-import { useProduct } from "~/context/product";
+import { useProduct } from "~/queries/software";
 import { useInstallerClient } from "~/context/installer";
 import { _ } from "~/i18n";
 import { sprintf } from "sprintf-js";

web/src/components/product/ProductSelectionPage.jsx

@@ -32,7 +32,7 @@ import styles from '@patternfly/react-styles/css/utilities/Text/text';
 import { _ } from "~/i18n";
 import { Page } from "~/components/core";
 import { Loading, Center } from "~/components/layout";
-import { useProduct } from "~/context/product";
+import { useConfigMutation, useProduct } from "~/queries/software";
 
 const Label = ({ children }) => (
   <span className={`${styles.fontSizeLg} ${styles.fontWeightBold}`}>
@@ -41,23 +41,20 @@ const Label = ({ children }) => (
 );
 
 function ProductSelectionPage() {
-  const { products, selectedProduct, selectProduct } = useProduct();
+  const { products, selectedProduct } = useProduct();
+  const setConfig = useConfigMutation();
   const [nextProduct, setNextProduct] = useState(selectedProduct);
   const [isLoading, setIsLoading] = useState(false);
 
   const onSubmit = async (e) => {
     e.preventDefault();
 
     if (nextProduct) {
-      await selectProduct(nextProduct.id);
+      setConfig.mutate({ product: nextProduct.id });
       setIsLoading(true);
     }
   };
 
-  if (!products) return (
-    <Loading text={_("Loading available products, please wait...")} />
-  );
-
   const Item = ({ children }) => {
     return (
       <GridItem sm={10} smOffset={1} lg={8} lgOffset={2} xl={6} xlOffset={3}>

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

@@ -39,14 +39,15 @@ const products = [
 ];
 
 jest.mock("~/client");
-jest.mock("~/context/product", () => ({
-  ...jest.requireActual("~/context/product"),
+jest.mock("~/queries/software", () => ({
+  ...jest.requireActual("~/queries/software"),
   useProduct: () => {
     return {
       products,
       selectedProduct: products[0]
     };
-  }
+  },
+  useProductChanges: () => jest.fn()
 }));
 
 const managerMock = {

web/src/components/product/ProductSelectionProgress.jsx

@@ -22,7 +22,7 @@
 import React, { useEffect, useState } from "react";
 import { Navigate } from "react-router-dom";
 import { _ } from "~/i18n";
-import { useProduct } from "~/context/product";
+import { useProduct } from "~/queries/software";
 import { ProgressReport } from "~/components/core";
 import { IDLE } from "~/client/status";
 import { useInstallerClient } from "~/context/installer";
@@ -42,10 +42,6 @@ function ProductSelectionProgress() {
     return manager.onStatusChange(setStatus);
   }, [manager, setStatus]);
 
-  if (!selectedProduct) {
-    return;
-  }
-
   if (status === IDLE) return <Navigate to="/" replace />;
 
   return (

web/src/components/storage/ProposalPage.test.jsx

@@ -48,11 +48,12 @@ jest.mock("@patternfly/react-core", () => {
 });
 jest.mock("./DevicesTechMenu", () => () => <div>Devices Tech Menu</div>);
 
-jest.mock("~/context/product", () => ({
-  ...jest.requireActual("~/context/product"),
+jest.mock("~/queries/software", () => ({
+  ...jest.requireActual("~/queries/software"),
   useProduct: () => ({
     selectedProduct: { name: "Test" }
-  })
+  }),
+  useProductChanges: () => jest.fn()
 }));
 
 const createClientMock = /** @type {jest.Mock} */(createClient);

web/src/components/storage/ProposalTransactionalInfo.jsx

@@ -23,7 +23,7 @@ import React from "react";
 import { Alert } from "@patternfly/react-core";
 import { _ } from "~/i18n";
 import { sprintf } from "sprintf-js";
-import { useProduct } from "~/context/product";
+import { useProduct } from "~/queries/software";
 import { isTransactionalSystem } from "~/components/storage/utils";
 
 /**

web/src/components/storage/ProposalTransactionalInfo.test.jsx

@@ -24,11 +24,12 @@ import { screen } from "@testing-library/react";
 import { plainRender } from "~/test-utils";
 import { ProposalTransactionalInfo } from "~/components/storage";
 
-jest.mock("~/context/product", () => ({
-  ...jest.requireActual("~/context/product"),
+jest.mock("~/queries/software", () => ({
+  ...jest.requireActual("~/queries/software"),
   useProduct: () => ({
     selectedProduct : { name: "Test" }
-  })
+  }),
+  useProductChanges: () => jest.fn()
 }));
 
 let props;

web/src/context/app.jsx

@@ -24,7 +24,6 @@
 import React from "react";
 import { InstallerClientProvider } from "./installer";
 import { InstallerL10nProvider } from "./installerL10n";
-import { ProductProvider } from "./product";
 import { IssuesProvider } from "./issues";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
@@ -41,11 +40,9 @@ function AppProviders({ children }) {
     <InstallerClientProvider>
       <QueryClientProvider client={queryClient}>
         <InstallerL10nProvider>
-          <ProductProvider>
-            <IssuesProvider>
-              {children}
-            </IssuesProvider>
-          </ProductProvider>
+          <IssuesProvider>
+            {children}
+          </IssuesProvider>
         </InstallerL10nProvider>
       </QueryClientProvider>
     </InstallerClientProvider>