fix(web): allow reloading the page during installation (#1503)

The new `useProduct` hook uses the Suspense API to display a "loading"
message while retrieving the
list of products. Unfortunately, that's a problem during installation:
the software service won't
response with the list of products and the UI will get stuck.

This PR fixes the problem by adding a `suspense` option `useProduct` so
you can decide when to use
the Suspense API.

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Fri Jul 26 11:42:05 UTC 2024 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
+
+- Allow reloading the page during installation
+ (gh#openSUSE/agama#1503).
+
 -------------------------------------------------------------------
 Mon Jul 22 15:28:42 UTC 2024 - Josef Reidinger <jreidinger@suse.com>
 

web/src/MainLayout.jsx

@@ -47,7 +47,7 @@ import { rootRoutes } from "~/router";
 import { useProduct } from "./queries/software";
 
 const Header = () => {
- const { selectedProduct } = useProduct();
+ const { selectedProduct } = useProduct({ suspense: true });
  // NOTE: Agama is a name, do not translate
  const title = selectedProduct?.name || _("Agama");
 
@@ -84,7 +84,7 @@ const Header = () => {
 
 const ChangeProductButton = () => {
  const navigate = useNavigate();
- const { products } = useProduct();
+ const { products } = useProduct({ suspense: true });
 
  if (!products.length) return null;
 

web/src/components/product/ProductSelectionPage.jsx

@@ -33,7 +33,7 @@ const Label = ({ children }) => (
 );
 
 function ProductSelectionPage() {
- const { products, selectedProduct } = useProduct();
+ const { products, selectedProduct } = useProduct({ suspense: true });
  const setConfig = useConfigMutation();
  const [nextProduct, setNextProduct] = useState(selectedProduct);
  const [isLoading, setIsLoading] = useState(false);

web/src/components/product/ProductSelectionProgress.jsx

@@ -33,7 +33,7 @@ import { useInstallerClient } from "~/context/installer";
  * Shows progress steps when a product is selected.
  */
 function ProductSelectionProgress() {
- const { selectedProduct } = useProduct();
+ const { selectedProduct } = useProduct({ suspense: true });
  const { manager } = useInstallerClient();
  const [status, setStatus] = useState();
 

web/src/components/storage/ProposalTransactionalInfo.jsx

@@ -38,7 +38,7 @@ import { isTransactionalSystem } from "~/components/storage/utils";
  * @param {ProposalSettings} props.settings - Settings used for calculating a proposal.
  */
 export default function ProposalTransactionalInfo({ settings }) {
- const { selectedProduct } = useProduct();
+ const { selectedProduct } = useProduct({ suspense: true });
 
  if (!isTransactionalSystem(settings?.volumes)) return;
 

web/src/queries/software.ts

@@ -22,6 +22,7 @@
 import React from "react";
 import {
  useMutation,
+ useQueries,
  useQueryClient,
  useSuspenseQueries,
  useSuspenseQuery,
@@ -116,11 +117,21 @@ const useConfigMutation = () => {
 /**
  * Returns available products and selected one, if any
  */
-const useProduct = (): { products: Product[]; selectedProduct: Product | undefined } => {
- const [{ data: selected }, { data: products }] = useSuspenseQueries({
+const useProduct = (
+ options?: QueryHookOptions,
+): { products?: Product[]; selectedProduct?: Product } => {
+ const func = options?.suspense ? useSuspenseQueries : useQueries;
+ const [
+ { data: selected, isPending: isSelectedPending },
+ { data: products, isPending: isProductsPending },
+ ] = func({
  queries: [selectedProductQuery(), productsQuery()],
  });
 
+ if (isSelectedPending || isProductsPending) {
+ return {};
+ }
+
  const selectedProduct = products.find((p: Product) => p.id === selected);
  return {
  products,

web/src/types/queries.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) [2024] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+/**
+ * Typical options for our queries hooks.
+ */
+type QueryHookOptions = {
+ suspense?: boolean;
+};