From 9c7cd190b7eb39bab8c848dba34807c6f6f7d670 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 | 233 +++++++++--------- src/components/review/ReviewConfiguration.jsx | 4 +- 2 files changed, 118 insertions(+), 119 deletions(-) diff --git a/src/components/AnacondaWizard.jsx b/src/components/AnacondaWizard.jsx index c90537d9d5..65c6a48659 100644 --- a/src/components/AnacondaWizard.jsx +++ b/src/components/AnacondaWizard.jsx @@ -25,17 +25,16 @@ 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"; -import { getDefaultScenario } from "./storage/InstallationScenario.jsx"; +import { getDefaultScenario, getScenario } from "./storage/InstallationScenario.jsx"; import { MountPointMapping, getPageProps as getMountPointMappingProps } from "./storage/MountPointMapping.jsx"; import { DiskEncryption, getStorageEncryptionState, getPageProps as getDiskEncryptionProps } from "./storage/DiskEncryption.jsx"; import { InstallationLanguage, getPageProps as getInstallationLanguageProps } from "./localization/InstallationLanguage.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"; @@ -172,6 +170,13 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim }, ]; + const componentProps = { + isFormDisabled, + onCritFail, + setIsFormDisabled, + setIsFormValid, + }; + const getFlattenedStepsIds = (steps) => { const stepIds = []; for (const step of steps) { @@ -189,63 +194,58 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim }; 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); - }; - - const createSteps = (stepsOrder) => { - const steps = stepsOrder.filter(s => !s.isHidden).map(s => { - let step = ({ + const createSteps = (stepsOrder, componentProps) => { + return stepsOrder.map(s => { + let stepProps = { id: s.id, + isHidden: s.isHidden, 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() @@ -267,10 +267,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 +313,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 +330,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 +353,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 +366,84 @@ 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 = (goToPrevStep, errorHandler) => { // first reset validation state to default - setIsFormValid(true); - onBack(); + setIsFormValid(false); + goToPrevStep(); }; + const isFirstScreen = ( + activeStep.id === "installation-language" || (activeStep.id === "installation-method" && !isBootIso) + ); + + const nextButtonText = ( + activeStep.id === "installation-review" + ? getScenario(storageScenarioId).buttonLabel + : _("Next") + ); + + const footerHelperText = stepsOrder.find(step => step.id === activeStep.id)?.footerHelperText; + 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} + + + + + + + ); }; diff --git a/src/components/review/ReviewConfiguration.jsx b/src/components/review/ReviewConfiguration.jsx index a597759717..3080efda0c 100644 --- a/src/components/review/ReviewConfiguration.jsx +++ b/src/components/review/ReviewConfiguration.jsx @@ -187,7 +187,7 @@ export const ReviewConfiguration = ({ deviceData, diskSelection, language, local ); }; -export const ReviewConfigurationConfirmModal = ({ idPrefix, onNext, setNextWaitsConfirmation, storageScenarioId }) => { +export const ReviewConfigurationConfirmModal = ({ idPrefix, goToNextStep, setNextWaitsConfirmation, storageScenarioId }) => { const scenario = getScenario(storageScenarioId); return ( { setNextWaitsConfirmation(false); - onNext(); + goToNextStep(); }} variant={scenario.buttonVariant} >