diff --git a/src/components/AnacondaWizard.jsx b/src/components/AnacondaWizard.jsx
index c90537d9d5..d30b832b2f 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.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}
>