Skip to content

Commit

Permalink
fixup! Port deprecated Wizard component to new PF5 implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@KKoukiou
KKoukiou committed Dec 5, 2023
1 parent 7985cda commit 5d3c1c0
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 113 deletions.
143 changes: 32 additions & 111 deletions src/components/AnacondaWizard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import {

import { AnacondaPage } from "./AnacondaPage.jsx";
import { InstallationMethod, getPageProps as getInstallationMethodProps } from "./storage/InstallationMethod.jsx";
import { getDefaultScenario, getScenario } from "./storage/InstallationScenario.jsx";
import { getDefaultScenario } 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";
Expand Down Expand Up @@ -67,7 +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 [isStepDisabled, setIsStepDisabled] = useState({});
const [currentStepId, setCurrentStepId] = useState();
const osRelease = useContext(OsReleaseContext);
const isBootIso = useContext(SystemTypeContext) === "BOOT_ISO";

Expand All @@ -84,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.
Expand Down Expand Up @@ -173,43 +180,6 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim
];
}, [accounts, dispatch, isBootIso, isFormValid, language, localizationData, osRelease, requiredMountPoints, reusePartitioning, runtimeData.passwordPolicies, storageData.devices, storageData.diskSelection, storageData.partitioning, storageEncryption, storageScenarioId]);

useEffect(() => {
setIsStepDisabled(prevState => {
const updatedState = { ...prevState };

const updateStateForStep = (step, index, isSubStep = false) => {
if (updatedState[step.id] === undefined) {
updatedState[step.id] = isSubStep || index !== 0;
}

if (step.steps) {
step.steps.forEach((subStep, subIndex) => {
updateStateForStep(subStep, subIndex, true);
});
}
};

stepsOrder.forEach((step, index) => {
updateStateForStep(step, index);
});
Object.keys(updatedState).forEach(stepId => {
if (!stepsOrder.some(step => step.id === stepId || (step.steps && step.steps.some(subStep => subStep.id === stepId)))) {
delete updatedState[stepId];
}
});

return updatedState;
});
}, [stepsOrder]);

const updateStepDisabledState = (currentStepId) => {
const newStepDisabledState = { ...isStepDisabled };
Object.keys(newStepDisabledState).forEach(stepId => {
newStepDisabledState[stepId] = isStepFollowedBy(currentStepId, stepId);
});
setIsStepDisabled(newStepDisabledState);
};

const componentProps = {
isFormDisabled,
onCritFail,
Expand All @@ -220,66 +190,36 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim
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 findPreviousVisibleStep = (currentStepId) => {
let previousVisibleStepId = null;

for (let i = 0; i < flattenedStepsIds.length; i++) {
const step = flattenedStepsIds[i];
if (step === currentStepId) {
break;
}
previousVisibleStepId = step;
}

return previousVisibleStepId;
};

const findNextVisibleStep = (currentStepId) => {
let nextVisibleStepId = null;
let foundCurrentStep = false;

for (let i = 0; i < flattenedStepsIds.length; i++) {
const step = flattenedStepsIds[i];

if (foundCurrentStep) {
nextVisibleStepId = step;
break;
}

if (step === currentStepId) {
foundCurrentStep = true;
continue;
}
}
return nextVisibleStepId;
};
const firstStepId = stepsOrder.filter(step => !step.isHidden)[0].id;

const isStepFollowedBy = (earlierStepId, laterStepId) => {
const earlierStepIdx = flattenedStepsIds.findIndex(s => s === earlierStepId);
const laterStepIdx = flattenedStepsIds.findIndex(s => s === laterStepId);
return earlierStepIdx < laterStepIdx;
if (laterStepIdx === -1) {
return true;
}
return laterStepIdx > earlierStepIdx;
};

const createSteps = (stepsOrder, componentProps) => {
return stepsOrder.map(s => {
const isVisited = !isStepFollowedBy(currentStepId || firstStepId, s.id);
let stepProps = {
id: s.id,
isHidden: s.isHidden,
isDisabled: isStepDisabled[s.id],
isVisited,
name: s.label,
stepNavItemProps: { id: s.id },
...(s.steps?.length && { isExpandable: true }),
Expand All @@ -306,7 +246,7 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim
};
}
return (
<WizardStep key={s.id} {...stepProps} />
<WizardStep key={s.id + s.isVisited} {...stepProps} />
);
});
};
Expand All @@ -325,14 +265,12 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim
setIsFormDisabled(true);
resetPartitioning()
.then(
() => updateStepDisabledState(newStep.id),
() => 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 {
updateStepDisabledState(newStep.id);
cockpit.location.go([newStep.id]);
setCurrentStepId(newStep.id);
}
};

Expand All @@ -353,8 +291,6 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim
isVisitRequired
startIndex={firstVisibleStepIndex}
footer={<Footer
findNextVisibleStep={findNextVisibleStep}
findPreviousVisibleStep={findPreviousVisibleStep}
onCritFail={onCritFail}
isFormValid={isFormValid}
partitioning={storageData.partitioning?.path}
Expand All @@ -366,7 +302,6 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim
stepsOrder={stepsOrder}
storageEncryption={storageEncryption}
storageScenarioId={storageScenarioId}
updateStepDisabledState={updateStepDisabledState}
accounts={accounts}
/>}
onStepChange={((event, currentStep, prevStep) => goToStep(currentStep, prevStep))}
Expand All @@ -378,8 +313,6 @@ export const AnacondaWizard = ({ dispatch, storageData, localizationData, runtim
};

const Footer = ({
findNextVisibleStep,
findPreviousVisibleStep,
onCritFail,
isFormValid,
setIsFormValid,
Expand All @@ -391,7 +324,6 @@ const Footer = ({
stepsOrder,
storageEncryption,
storageScenarioId,
updateStepDisabledState,
accounts,
}) => {
const [nextWaitsConfirmation, setNextWaitsConfirmation] = useState(false);
Expand All @@ -400,10 +332,6 @@ const Footer = ({
const isBootIso = useContext(SystemTypeContext) === "BOOT_ISO";

const onNext = (activeStep, goToNextStep) => {
const nextStepAction = () => {
updateStepDisabledState(findNextVisibleStep(activeStep.id));
goToNextStep();
};
// first reset validation state to default
setIsFormValid(true);

Expand All @@ -417,7 +345,7 @@ const Footer = ({
setStepNotification({ step: activeStep.id, ...ex });
},
onSuccess: () => {
nextStepAction();
goToNextStep();

// Reset the state after the onNext call. Otherwise,
// React will try to render the current step again.
Expand All @@ -440,7 +368,7 @@ const Footer = ({
setStepNotification({ step: activeStep.id, ...ex });
},
onSuccess: () => {
nextStepAction();
goToNextStep();

// Reset the state after the onNext call. Otherwise,
// React will try to render the current step again.
Expand All @@ -453,31 +381,24 @@ const Footer = ({
.then(cryptedPassword => {
const users = accountsToDbusUsers({ ...accounts, password: cryptedPassword });
setUsers(users);
nextStepAction();
goToNextStep();
}, onCritFail({ context: N_("Password ecryption failed.") }));
} else {
nextStepAction();
goToNextStep();
}
};

const onBack = (goToPrevStep, errorHandler) => {
const onBack = () => {
// first reset validation state to default
setIsFormValid(false);
updateStepDisabledState(findPreviousVisibleStep(activeStep.id));
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;
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 (
<WizardFooterWrapper>
Expand All @@ -486,7 +407,7 @@ const Footer = ({
nextWaitsConfirmation &&
<ReviewConfigurationConfirmModal
idPrefix={activeStep.id}
goToNextStep={() => { setShowWizard(false); cockpit.location.go(["installation-progress"]) }}
onNext={() => { setShowWizard(false); cockpit.location.go(["installation-progress"]) }}
setNextWaitsConfirmation={setNextWaitsConfirmation}
storageScenarioId={storageScenarioId}
/>}
Expand All @@ -509,7 +430,7 @@ const Footer = ({
</Button>
<Button
id="installation-next-btn"
variant={activeStep.id === "installation-review" ? "warning" : "primary"}
variant={nextButtonVariant}
isDisabled={
!isFormValid ||
isFormDisabled ||
Expand Down
4 changes: 2 additions & 2 deletions src/components/review/ReviewConfiguration.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export const ReviewConfiguration = ({ deviceData, diskSelection, language, local
);
};

export const ReviewConfigurationConfirmModal = ({ idPrefix, goToNextStep, setNextWaitsConfirmation, storageScenarioId }) => {
export const ReviewConfigurationConfirmModal = ({ idPrefix, onNext, setNextWaitsConfirmation, storageScenarioId }) => {
const scenario = getScenario(storageScenarioId);
return (
<Modal
Expand All @@ -197,7 +197,7 @@ export const ReviewConfigurationConfirmModal = ({ idPrefix, goToNextStep, setNex
key="confirm"
onClick={() => {
setNextWaitsConfirmation(false);
goToNextStep();
onNext();
}}
variant={scenario.buttonVariant}
>
Expand Down

0 comments on commit 5d3c1c0

Please sign in to comment.