Merge pull request #497 from KKoukiou/storage-disabled-when-installing

Do not permit clicking 'Modify storage' button when installation has been started

src/components/AnacondaHeader.jsx

@@ -36,7 +36,7 @@ import "./AnacondaHeader.scss";
 const _ = cockpit.gettext;
 const N_ = cockpit.noop;
 
-export const AnacondaHeader = ({ dispatch, isFormDisabled, onCritFail, reportLinkURL, setShowStorage, showStorage, title }) => {
+export const AnacondaHeader = ({ currentStepId, dispatch, isFormDisabled, onCritFail, reportLinkURL, setShowStorage, showStorage, title }) => {
     const [beta, setBeta] = useState();
     const network = useContext(NetworkContext);
     const isConnected = network.connected;
@@ -57,6 +57,7 @@ export const AnacondaHeader = ({ dispatch, isFormDisabled, onCritFail, reportLin
                 </TextContent>
                 {beta && <Beta />}
                 <HeaderKebab
+                  currentStepId={currentStepId}
                   dispatch={dispatch}
                   isConnected={isConnected}
                   isFormDisabled={isFormDisabled}

src/components/AnacondaWizard.jsx

@@ -18,7 +18,7 @@ import cockpit from "cockpit";
 
 import { usePageLocation } from "hooks";
 
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState } from "react";
 import {
     PageSection,
     PageSectionTypes,
@@ -32,25 +32,17 @@ import { AnacondaWizardFooter } from "./AnacondaWizardFooter.jsx";
 import { FooterContext, StorageContext, SystemTypeContext } from "./Common.jsx";
 import { getSteps } from "./steps.js";
 
-export const AnacondaWizard = ({ dispatch, isFetching, onCritFail, showStorage }) => {
+export const AnacondaWizard = ({ currentStepId, dispatch, isFetching, onCritFail, showStorage }) => {
     // The Form should be disabled while backend checks are in progress
     // or the page initialization is in progress
     const [isFormDisabled, setIsFormDisabled] = useState(false);
     // The Form should be marked as invalid when the user filled data
     // are failing the validation
     const [isFormValid, setIsFormValid] = useState(false);
-    const [currentStepId, setCurrentStepId] = useState();
     const { storageScenarioId } = useContext(StorageContext);
     const isBootIso = useContext(SystemTypeContext) === "BOOT_ISO";
     const { path } = usePageLocation();
 
-    useEffect(() => {
-        if (!currentStepId) {
-            return;
-        }
-        cockpit.location.go([currentStepId]);
-    }, [currentStepId]);
-
     const componentProps = {
         dispatch,
         isFormDisabled: isFormDisabled || isFetching,
@@ -112,7 +104,7 @@ export const AnacondaWizard = ({ dispatch, isFetching, onCritFail, showStorage }
             setIsFormDisabled(true);
         }
 
-        setCurrentStepId(newStep.id);
+        cockpit.location.go([newStep.id]);
     };
 
     const finalStep = stepsOrder[stepsOrder.length - 1];

src/components/HeaderKebab.jsx

@@ -106,7 +106,7 @@ const AnacondaAboutModal = ({ isModalOpen, setIsAboutModalOpen }) => {
     );
 };
 
-export const HeaderKebab = ({ dispatch, isConnected, onCritFail, reportLinkURL, setShowStorage, showStorage }) => {
+export const HeaderKebab = ({ currentStepId, dispatch, isConnected, onCritFail, reportLinkURL, setShowStorage, showStorage }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isAboutModalOpen, setIsAboutModalOpen] = useState(false);
     const [isReportIssueOpen, setIsReportIssueOpen] = useState(false);
@@ -128,7 +128,7 @@ export const HeaderKebab = ({ dispatch, isConnected, onCritFail, reportLinkURL,
 
     const dropdownItems = [
         <ModifyStorage
-          idPrefix="header-kebab"
+          currentStepId={currentStepId}
           key="modify-storage"
           setShowStorage={setShowStorage}
         />,

src/components/app.jsx

@@ -16,6 +16,8 @@
  */
 import cockpit from "cockpit";
 
+import { usePageLocation } from "hooks";
+
 import React, { useCallback, useEffect, useState } from "react";
 import {
     Bullseye,
@@ -51,7 +53,15 @@ export const ApplicationLoading = () => (
 export const Application = ({ conf, dispatch, isFetching, onCritFail, osRelease, reportLinkURL }) => {
     const [storeInitialized, setStoreInitialized] = useState(false);
     const [showStorage, setShowStorage] = useState(false);
+    const [currentStepId, setCurrentStepId] = useState();
     const address = useAddress();
+    const { path } = usePageLocation();
+
+    useEffect(() => {
+        if (path[0] !== currentStepId) {
+            setCurrentStepId(path[0]);
+        }
+    }, [path, currentStepId]);
 
     useEffect(() => {
         if (!address) {
@@ -81,6 +91,7 @@ export const Application = ({ conf, dispatch, isFetching, onCritFail, osRelease,
             <PageGroup
               stickyOnBreakpoint={{ default: "top" }}>
                 <AnacondaHeader
+                  currentStepId={currentStepId}
                   dispatch={dispatch}
                   title={title}
                   reportLinkURL={reportLinkURL}
@@ -90,6 +101,7 @@ export const Application = ({ conf, dispatch, isFetching, onCritFail, osRelease,
                 />
             </PageGroup>
             <AnacondaWizard
+              currentStepId={currentStepId}
               isFetching={isFetching}
               onCritFail={onCritFail}
               title={title}

src/components/storage/CockpitStorageIntegration.jsx

@@ -69,6 +69,7 @@ import { getDeviceByName, getDeviceByPath } from "../../helpers/storage.js";
 import { EmptyStatePanel } from "cockpit-components-empty-state";
 
 import { StorageContext, TargetSystemRootContext } from "../Common.jsx";
+import { getSteps } from "../steps.js";
 import {
     useDiskFreeSpace,
     useDiskTotalSpace,
@@ -634,7 +635,7 @@ const ModifyStorageSideBar = () => {
     );
 };
 
-export const ModifyStorage = ({ setShowStorage }) => {
+export const ModifyStorage = ({ currentStepId, setShowStorage }) => {
     const targetSystemRoot = useContext(TargetSystemRootContext);
     const { diskSelection } = useContext(StorageContext);
     const devices = useOriginalDevices();
@@ -646,10 +647,16 @@ export const ModifyStorage = ({ setShowStorage }) => {
         efi: isEfi,
         mount_point_prefix: targetSystemRoot,
     });
+    const isDisabled = useMemo(() => {
+        const steps = getSteps();
+        const currentStep = steps.find(step => step.id === currentStepId);
+        return currentStep?.isFinal;
+    }, [currentStepId]);
 
     return (
         <DropdownItem
           id="modify-storage"
+          isDisabled={isDisabled}
           onClick={() => {
               window.sessionStorage.setItem("cockpit_anaconda", cockpitAnaconda);
               setShowStorage(true);

test/check-progress

@@ -61,6 +61,10 @@ class TestInstallationProgress(VirtInstallMachineCase):
             ignore=[".logo", "#betanag-icon"],
         )
 
+        # Check that at this stage 'Modify Storage' is not available
+        b.click("#toggle-kebab")
+        b.wait_visible("li.pf-m-disabled #modify-storage")
+
         self.handleReboot()