From 9d91f3d2e700d9686a715a3abfbddd498e483321 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Ka=C5=88kovsk=C3=BD?= Date: Mon, 20 Nov 2023 14:44:56 +0100 Subject: [PATCH] Port deprecated Wizard component to new PF5 implementation --- src/components/AnacondaWizard.jsx | 359 +++++++++++++++--------------- 1 file changed, 182 insertions(+), 177 deletions(-) diff --git a/src/components/AnacondaWizard.jsx b/src/components/AnacondaWizard.jsx index c90537d9d5..504c7565d7 100644 --- a/src/components/AnacondaWizard.jsx +++ b/src/components/AnacondaWizard.jsx @@ -25,13 +25,12 @@ import { PageSection, PageSectionTypes, PageSectionVariants, - Stack -} from "@patternfly/react-core"; -import { + Stack, + useWizardContext, Wizard, - WizardFooter, - WizardContextConsumer -} from "@patternfly/react-core/deprecated"; + WizardFooterWrapper, + WizardStep +} from "@patternfly/react-core"; import { AnacondaPage } from "./AnacondaPage.jsx"; import { InstallationMethod, getPageProps as getInstallationMethodProps } from "./storage/InstallationMethod.jsx"; @@ -43,7 +42,6 @@ import { Accounts, getPageProps as getAccountsProps, getAccountsState, accountsT import { InstallationProgress } from "./installation/InstallationProgress.jsx"; import { ReviewConfiguration, ReviewConfigurationConfirmModal, getPageProps as getReviewConfigurationProps } from "./review/ReviewConfiguration.jsx"; import { exitGui } from "../helpers/exit.js"; -import { usePageLocation } from "hooks"; import { getRequiredMountPoints, } from "../apis/storage_devicetree.js"; @@ -69,6 +67,7 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim const [storageScenarioId, setStorageScenarioId] = useState(window.sessionStorage.getItem("storage-scenario-id") || getDefaultScenario().id); const [accounts, setAccounts] = useState(getAccountsState()); const [showWizard, setShowWizard] = useState(true); + const [currentStepId, setCurrentStepId] = useState(); const osRelease = useContext(OsReleaseContext); const isBootIso = useContext(SystemTypeContext) === "BOOT_ISO"; @@ -85,6 +84,13 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim updateRequiredMountPoints(); }, []); + useEffect(() => { + if (!currentStepId) { + return; + } + cockpit.location.go([currentStepId]); + }, [currentStepId]); + useEffect(() => { /* * When disk selection changes or the user re-scans the devices we need to re-create the partitioning. @@ -103,159 +109,168 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim } } }, [localizationData]); - const stepsOrder = [ - { - component: InstallationLanguage, - data: { dispatch, languages: localizationData.languages, language: localizationData.language, commonLocales: localizationData.commonLocales }, - ...getInstallationLanguageProps({ isBootIso, osRelease }) - }, - { - component: InstallationMethod, - data: { - deviceData: storageData.devices, - diskSelection: storageData.diskSelection, - dispatch, - storageScenarioId, - setStorageScenarioId: (scenarioId) => { - window.sessionStorage.setItem("storage-scenario-id", scenarioId); - setStorageScenarioId(scenarioId); - } + const stepsOrder = useMemo(() => { + return [ + { + component: InstallationLanguage, + data: { dispatch, languages: localizationData.languages, language: localizationData.language, commonLocales: localizationData.commonLocales }, + ...getInstallationLanguageProps({ isBootIso, osRelease }) }, - ...getInstallationMethodProps({ isBootIso, osRelease, isFormValid }) - }, - { - id: "disk-configuration", - label: _("Disk configuration"), - steps: [{ - component: MountPointMapping, + { + component: InstallationMethod, data: { deviceData: storageData.devices, diskSelection: storageData.diskSelection, dispatch, - partitioningData: storageData.partitioning, - requiredMountPoints, - reusePartitioning, - setReusePartitioning, + storageScenarioId, + setStorageScenarioId: (scenarioId) => { + window.sessionStorage.setItem("storage-scenario-id", scenarioId); + setStorageScenarioId(scenarioId); + } }, - ...getMountPointMappingProps({ storageScenarioId }) - }, { - component: DiskEncryption, + ...getInstallationMethodProps({ isBootIso, osRelease, isFormValid }) + }, + { + id: "disk-configuration", + label: _("Disk configuration"), + steps: [{ + component: MountPointMapping, + data: { + deviceData: storageData.devices, + diskSelection: storageData.diskSelection, + dispatch, + partitioningData: storageData.partitioning, + requiredMountPoints, + reusePartitioning, + setReusePartitioning, + }, + ...getMountPointMappingProps({ storageScenarioId }) + }, { + component: DiskEncryption, + data: { + storageEncryption, + setStorageEncryption, + passwordPolicies: runtimeData.passwordPolicies, + }, + ...getDiskEncryptionProps({ storageScenarioId }) + }] + }, + { + component: Accounts, data: { - storageEncryption, - setStorageEncryption, + accounts, + setAccounts, passwordPolicies: runtimeData.passwordPolicies, }, - ...getDiskEncryptionProps({ storageScenarioId }) - }] - }, - { - component: Accounts, - data: { - accounts, - setAccounts, - passwordPolicies: runtimeData.passwordPolicies, + ...getAccountsProps({ isBootIso }) }, - ...getAccountsProps({ isBootIso }) - }, - { - component: ReviewConfiguration, - data: { - deviceData: storageData.devices, - diskSelection: storageData.diskSelection, - requests: storageData.partitioning ? storageData.partitioning.requests : null, - language, - localizationData, - storageScenarioId, - accounts, + { + component: ReviewConfiguration, + data: { + deviceData: storageData.devices, + diskSelection: storageData.diskSelection, + requests: storageData.partitioning ? storageData.partitioning.requests : null, + language, + localizationData, + storageScenarioId, + accounts, + }, + ...getReviewConfigurationProps({ storageScenarioId }) }, - ...getReviewConfigurationProps({ storageScenarioId }) - }, - ]; + ]; + }, [accounts, dispatch, isBootIso, isFormValid, language, localizationData, osRelease, requiredMountPoints, reusePartitioning, runtimeData.passwordPolicies, storageData.devices, storageData.diskSelection, storageData.partitioning, storageEncryption, storageScenarioId]); + + const componentProps = { + isFormDisabled, + onCritFail, + setIsFormDisabled, + setIsFormValid, + }; const getFlattenedStepsIds = (steps) => { const stepIds = []; for (const step of steps) { + stepIds.push(step.id); if (step.steps) { for (const childStep of step.steps) { if (childStep?.isHidden !== true) { stepIds.push(childStep.id); } } - } else { - stepIds.push(step.id); } } return stepIds; }; const flattenedStepsIds = getFlattenedStepsIds(stepsOrder); - - const { path } = usePageLocation(); const firstStepId = stepsOrder.filter(step => !step.isHidden)[0].id; - const currentStepId = path[0] || firstStepId; const isStepFollowedBy = (earlierStepId, laterStepId) => { const earlierStepIdx = flattenedStepsIds.findIndex(s => s === earlierStepId); const laterStepIdx = flattenedStepsIds.findIndex(s => s === laterStepId); - return earlierStepIdx < laterStepIdx; - }; - - const canJumpToStep = (stepId, currentStepId) => { - return stepId === currentStepId || isStepFollowedBy(stepId, currentStepId); + if (laterStepIdx === -1) { + return true; + } + return laterStepIdx > earlierStepIdx; }; - const createSteps = (stepsOrder) => { - const steps = stepsOrder.filter(s => !s.isHidden).map(s => { - let step = ({ + const createSteps = (stepsOrder, componentProps) => { + return stepsOrder.map(s => { + const isVisited = !isStepFollowedBy(currentStepId || firstStepId, s.id); + let stepProps = { id: s.id, + isHidden: s.isHidden, + isVisited, name: s.label, stepNavItemProps: { id: s.id }, - canJumpTo: canJumpToStep(s.id, currentStepId), - }); + ...(s.steps?.length && { isExpandable: true }), + }; if (s.component) { - step = ({ - ...step, - component: ( + stepProps = { + children: ( setStepNotification({ step: s.id, ...ex })} - isFormDisabled={isFormDisabled} - setIsFormDisabled={setIsFormDisabled} + {...componentProps} {...s.data} /> ), - }); + ...stepProps + }; } else if (s.steps) { - step.steps = createSteps(s.steps); + const subSteps = createSteps(s.steps, componentProps); + stepProps = { + ...stepProps, + steps: [...subSteps] + }; } - return step; + return ( + + ); }); - return steps; }; - const steps = createSteps(stepsOrder); + const steps = createSteps(stepsOrder, componentProps); const goToStep = (newStep, prevStep) => { - if (prevStep.prevId !== newStep.id) { + if (prevStep.id !== newStep.id) { // first reset validation state to default setIsFormValid(false); } // Reset the applied partitioning when going back from a step after creating partitioning to a step // before creating partitioning. - if ((prevStep.prevId === "accounts" || isStepFollowedBy("accounts", prevStep.prevId)) && + if ((prevStep.id === "accounts" || isStepFollowedBy("accounts", prevStep.id)) && isStepFollowedBy(newStep.id, "accounts")) { setIsFormDisabled(true); resetPartitioning() .then( - () => cockpit.location.go([newStep.id]), + () => setCurrentStepId(newStep.id), () => onCritFail({ context: cockpit.format(N_("Error was hit when going back from $0."), prevStep.prevName) }) ) .always(() => setIsFormDisabled(false)); } else { - cockpit.location.go([newStep.id]); + setCurrentStepId(newStep.id); } }; @@ -267,10 +282,14 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim ); } + const firstVisibleStepIndex = steps.findIndex(step => !step.props.isHidden) + 1; + return ( } - hideClose - mainAriaLabel={`${title} content`} - navAriaLabel={`${title} steps`} - onBack={goToStep} - onGoToStep={goToStep} - onNext={goToStep} - steps={steps} - isNavExpandable - /> + onStepChange={((event, currentStep, prevStep) => goToStep(currentStep, prevStep))} + > + {steps} + ); }; @@ -314,9 +328,10 @@ const Footer = ({ }) => { const [nextWaitsConfirmation, setNextWaitsConfirmation] = useState(false); const [quitWaitsConfirmation, setQuitWaitsConfirmation] = useState(false); + const { activeStep, goToNextStep, goToPrevStep } = useWizardContext(); const isBootIso = useContext(SystemTypeContext) === "BOOT_ISO"; - const goToNextStep = (activeStep, onNext) => { + const onNext = (activeStep, goToNextStep) => { // first reset validation state to default setIsFormValid(true); @@ -330,7 +345,7 @@ const Footer = ({ setStepNotification({ step: activeStep.id, ...ex }); }, onSuccess: () => { - onNext(); + goToNextStep(); // Reset the state after the onNext call. Otherwise, // React will try to render the current step again. @@ -353,7 +368,7 @@ const Footer = ({ setStepNotification({ step: activeStep.id, ...ex }); }, onSuccess: () => { - onNext(); + goToNextStep(); // Reset the state after the onNext call. Otherwise, // React will try to render the current step again. @@ -366,85 +381,75 @@ const Footer = ({ .then(cryptedPassword => { const users = accountsToDbusUsers({ ...accounts, password: cryptedPassword }); setUsers(users); - onNext(); + goToNextStep(); }, onCritFail({ context: N_("Password ecryption failed.") })); } else { - onNext(); + goToNextStep(); } }; - const goToPreviousStep = (activeStep, onBack, errorHandler) => { + const onBack = () => { // first reset validation state to default - setIsFormValid(true); - onBack(); + setIsFormValid(false); + goToPrevStep(); }; + const currentStep = stepsOrder.find(s => s.id === activeStep.id); + const footerHelperText = currentStep?.footerHelperText; + const isFirstScreen = stepsOrder.filter(step => !step.isHidden)[0].id === activeStep.id; + const nextButtonText = currentStep?.nextButtonText || _("Next"); + const nextButtonVariant = currentStep?.nextButtonVariant || "primary"; + return ( - - - {({ activeStep, onNext, onBack }) => { - const currentStep = stepsOrder.find(s => s.id === activeStep.id); - const footerHelperText = currentStep?.footerHelperText; - const isFirstScreen = stepsOrder.filter(step => !step.isHidden)[0].id === activeStep.id; - const nextButtonText = currentStep?.nextButtonText || _("Next"); - const nextButtonVariant = currentStep?.nextButtonVariant || "primary"; - - return ( - - {activeStep.id === "installation-review" && - nextWaitsConfirmation && - { setShowWizard(false); cockpit.location.go(["installation-progress"]) }} - setNextWaitsConfirmation={setNextWaitsConfirmation} - storageScenarioId={storageScenarioId} - />} - {quitWaitsConfirmation && - } - {footerHelperText} - - - - - - - ); - }} - - + + + {activeStep.id === "installation-review" && + nextWaitsConfirmation && + { setShowWizard(false); cockpit.location.go(["installation-progress"]) }} + setNextWaitsConfirmation={setNextWaitsConfirmation} + storageScenarioId={storageScenarioId} + />} + {quitWaitsConfirmation && + } + {footerHelperText} + + + + + + + ); };