From 354beab1fdf84460b27ede87d2a79b5ebcb9485a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Imobach=20Gonz=C3=A1lez=20Sosa?= Date: Fri, 26 Jul 2024 12:36:50 +0100 Subject: [PATCH 1/4] fix(web): do not suspense when loading products in App --- web/src/MainLayout.jsx | 4 +-- .../product/ProductSelectionPage.jsx | 2 +- .../product/ProductSelectionProgress.jsx | 2 +- .../storage/ProposalTransactionalInfo.jsx | 2 +- web/src/queries/software.ts | 19 +++++++++++-- web/src/types/queries.ts | 27 +++++++++++++++++++ 6 files changed, 49 insertions(+), 7 deletions(-) create mode 100644 web/src/types/queries.ts diff --git a/web/src/MainLayout.jsx b/web/src/MainLayout.jsx index d85734d3d0..d1ad6be238 100644 --- a/web/src/MainLayout.jsx +++ b/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; diff --git a/web/src/components/product/ProductSelectionPage.jsx b/web/src/components/product/ProductSelectionPage.jsx index bd5f2a8403..8bfcbcec58 100644 --- a/web/src/components/product/ProductSelectionPage.jsx +++ b/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); diff --git a/web/src/components/product/ProductSelectionProgress.jsx b/web/src/components/product/ProductSelectionProgress.jsx index 944ebe3243..9e7abdd99e 100644 --- a/web/src/components/product/ProductSelectionProgress.jsx +++ b/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(); diff --git a/web/src/components/storage/ProposalTransactionalInfo.jsx b/web/src/components/storage/ProposalTransactionalInfo.jsx index 1221ad6374..9127aec430 100644 --- a/web/src/components/storage/ProposalTransactionalInfo.jsx +++ b/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; diff --git a/web/src/queries/software.ts b/web/src/queries/software.ts index 9c29d8c73f..a652b3d64b 100644 --- a/web/src/queries/software.ts +++ b/web/src/queries/software.ts @@ -22,6 +22,7 @@ import React from "react"; import { useMutation, + useQueries, useQueryClient, useSuspenseQueries, useSuspenseQuery, @@ -113,14 +114,28 @@ const useConfigMutation = () => { return useMutation(query); }; +type QueryHookOptions = { + suspense: boolean; +}; + /** * 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 | undefined } => { + const func = options?.suspense ? useSuspenseQueries : useQueries; + const [{ data: selected }, { data: products }] = func({ queries: [selectedProductQuery(), productsQuery()], }); + if (!products) { + return { + products: [], + selectedProduct: undefined, + }; + } + const selectedProduct = products.find((p: Product) => p.id === selected); return { products, diff --git a/web/src/types/queries.ts b/web/src/types/queries.ts new file mode 100644 index 0000000000..34fadb4799 --- /dev/null +++ b/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; +}; From f4eb7325a15d0dd6b83ea93ecb77da387bf8111e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Imobach=20Gonz=C3=A1lez=20Sosa?= Date: Fri, 26 Jul 2024 12:51:10 +0100 Subject: [PATCH 2/4] doc(web): update changes file --- web/package/agama-web-ui.changes | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web/package/agama-web-ui.changes b/web/package/agama-web-ui.changes index 2b3de5b9e8..e24a93e7fb 100644 --- a/web/package/agama-web-ui.changes +++ b/web/package/agama-web-ui.changes @@ -1,3 +1,9 @@ +------------------------------------------------------------------- +Fri Jul 26 11:42:05 UTC 2024 - Imobach Gonzalez Sosa + +- Allow reloading the page during installation + (gh#openSUSE/agama#1503). + ------------------------------------------------------------------- Mon Jul 22 15:28:42 UTC 2024 - Josef Reidinger From a7aff1ea1399dbf16bd27abbd0ecf0eaac832116 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Imobach=20Gonz=C3=A1lez=20Sosa?= Date: Fri, 26 Jul 2024 13:02:00 +0100 Subject: [PATCH 3/4] fix(web): make 'suspense' optional --- web/src/queries/software.ts | 4 ---- web/src/types/queries.ts | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/web/src/queries/software.ts b/web/src/queries/software.ts index a652b3d64b..af6dfa7572 100644 --- a/web/src/queries/software.ts +++ b/web/src/queries/software.ts @@ -114,10 +114,6 @@ const useConfigMutation = () => { return useMutation(query); }; -type QueryHookOptions = { - suspense: boolean; -}; - /** * Returns available products and selected one, if any */ diff --git a/web/src/types/queries.ts b/web/src/types/queries.ts index 34fadb4799..f1aed1b1ad 100644 --- a/web/src/types/queries.ts +++ b/web/src/types/queries.ts @@ -23,5 +23,5 @@ * Typical options for our queries hooks. */ type QueryHookOptions = { - suspense: boolean; + suspense?: boolean; }; From 00fb2daa52ab232304d60dc33e00371e06f0a669 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Imobach=20Gonz=C3=A1lez=20Sosa?= Date: Fri, 26 Jul 2024 13:09:00 +0100 Subject: [PATCH 4/4] fix(web): make useProduct hook more robust --- web/src/queries/software.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/web/src/queries/software.ts b/web/src/queries/software.ts index af6dfa7572..9834bf8ec9 100644 --- a/web/src/queries/software.ts +++ b/web/src/queries/software.ts @@ -119,17 +119,17 @@ const useConfigMutation = () => { */ const useProduct = ( options?: QueryHookOptions, -): { products: Product[]; selectedProduct: Product | undefined } => { +): { products?: Product[]; selectedProduct?: Product } => { const func = options?.suspense ? useSuspenseQueries : useQueries; - const [{ data: selected }, { data: products }] = func({ + const [ + { data: selected, isPending: isSelectedPending }, + { data: products, isPending: isProductsPending }, + ] = func({ queries: [selectedProductQuery(), productsQuery()], }); - if (!products) { - return { - products: [], - selectedProduct: undefined, - }; + if (isSelectedPending || isProductsPending) { + return {}; } const selectedProduct = products.find((p: Product) => p.id === selected);