webui: show empty state while the selected scenario is not available

Also parse the selectedDisks from global state instead of re-fetching it from the API.
rhinstaller · Jun 28, 2023 · f8d0c7d · f8d0c7d
1 parent 422352c
commit f8d0c7d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/ui/webui/src/components/AnacondaWizard.jsx b/ui/webui/src/components/AnacondaWizard.jsx
@@ -75,6 +75,7 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, onAddE
                 label: _("Storage devices")
             }, {
                 component: StorageConfiguration,
+                data: { selectedDisks: storageData.diskSelection.selectedDisks },
                 id: "storage-configuration",
                 label: _("Storage configuration")
             }, {

diff --git a/ui/webui/src/components/storage/StorageConfiguration.jsx b/ui/webui/src/components/storage/StorageConfiguration.jsx
@@ -50,21 +50,20 @@ import { HelpIcon } from "@patternfly/react-icons";
 import ExclamationTriangleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon";
 
 import { helpEraseAll, helpUseFreeSpace } from "./HelpAutopartOptions.jsx";
+import { AnacondaPage } from "../AnacondaPage.jsx";
+import { EmptyStatePanel } from "cockpit-components-empty-state.jsx";
 
 import {
     getRequiredDeviceSize,
     getDiskTotalSpace,
     getDiskFreeSpace,
-    getSelectedDisks,
     setInitializationMode,
 } from "../../apis/storage.js";
 
 import {
     getRequiredSpace,
 } from "../../apis/payloads";
 
-import { AnacondaPage } from "../AnacondaPage.jsx";
-
 const _ = cockpit.gettext;
 
 // TODO unify with HelpDrawer ?
@@ -223,7 +222,7 @@ const predefinedStorageInfo = (
 );
 
 // TODO add aria items
-const GuidedPartitioning = ({ idPrefix, scenarios, storageScenarioId, setStorageScenarioId, setIsFormValid }) => {
+const GuidedPartitioning = ({ idPrefix, scenarios, selectedDisks, storageScenarioId, setStorageScenarioId, setIsFormValid }) => {
     const [selectedScenario, setSelectedScenario] = useState();
     const [scenarioAvailability, setScenarioAvailability] = useState(Object.fromEntries(
         scenarios.map((s) => [s.id, new AvailabilityState()])
@@ -235,7 +234,6 @@ const GuidedPartitioning = ({ idPrefix, scenarios, storageScenarioId, setStorage
         const updateScenarioState = async (scenarios) => {
             const requiredSpace = await getRequiredSpace();
             const requiredSize = await getRequiredDeviceSize({ requiredSpace });
-            const selectedDisks = await getSelectedDisks();
             let selectedScenarioId = "";
             let availableScenarioExists = false;
             for await (const scenario of scenarios) {
@@ -258,7 +256,7 @@ const GuidedPartitioning = ({ idPrefix, scenarios, storageScenarioId, setStorage
         };
 
         updateScenarioState(scenarios);
-    }, [scenarios, setIsFormValid, storageScenarioId]);
+    }, [scenarios, setIsFormValid, storageScenarioId, selectedDisks]);
 
     useEffect(() => {
         const applyScenario = async (scenarioId) => {
@@ -289,6 +287,10 @@ const GuidedPartitioning = ({ idPrefix, scenarios, storageScenarioId, setStorage
         setIsDetailExpanded(!isDetailExpanded);
     };
 
+    if (!selectedScenario) {
+        return <EmptyStatePanel loading />;
+    }
+
     const scenarioItems = scenarios.map(scenario =>
         <DataListItem key={scenario.id}>
             <DataListItemRow>
@@ -364,7 +366,7 @@ const GuidedPartitioning = ({ idPrefix, scenarios, storageScenarioId, setStorage
     );
 };
 
-export const StorageConfiguration = ({ idPrefix, setIsFormValid, storageScenarioId, setStorageScenarioId }) => {
+export const StorageConfiguration = ({ idPrefix, selectedDisks, setIsFormValid, storageScenarioId, setStorageScenarioId }) => {
     return (
         <AnacondaPage title={_("Select a storage configuration")}>
             <TextContent>
@@ -373,6 +375,7 @@ export const StorageConfiguration = ({ idPrefix, setIsFormValid, storageScenario
             <GuidedPartitioning
               idPrefix={idPrefix}
               scenarios={scenarios}
+              selectedDisks={selectedDisks}
               setIsFormValid={setIsFormValid}
               storageScenarioId={storageScenarioId}
               setStorageScenarioId={setStorageScenarioId}