V2Wizard: Clean up for a fresh start

To make code reviews easier, these files are being removed for now. They
will be added back over time in a way that results in clearer diffs.
This commit is contained in:
lucasgarfield 2024-01-05 17:19:49 +01:00 committed by Lucas Garfield
parent 247c436b90
commit e1f66dd444
11 changed files with 0 additions and 1419 deletions

View file

@ -1,152 +0,0 @@
import React, { useState } from 'react';
import {
Button,
Wizard,
WizardFooterWrapper,
WizardStep,
useWizardContext,
} from '@patternfly/react-core';
import { useNavigate } from 'react-router-dom';
import {
EnvironmentStateType,
filterEnvironment,
hasUserSelectedAtLeastOneEnv,
useGetAllowedTargets,
} from './steps/ImageOutput/Environment';
import ImageOutputStep from './steps/ImageOutput/ImageOutput';
import ReviewStep from './steps/Review/ReviewStep';
import { RHEL_9, X86_64 } from '../../constants';
import './CreateImageWizard.scss';
import { ArchitectureItem, Distributions } from '../../store/imageBuilderApi';
import { resolveRelPath } from '../../Utilities/path';
import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader';
/**
* @return true if the array in prevAllowedTargets is equivalent to the array
* allowedTargets, false otherwise
*/
const isIdenticalToPrev = (
prevAllowedTargets: string[],
allowedTargets: string[]
) => {
let identicalToPrev = true;
if (allowedTargets.length === prevAllowedTargets.length) {
allowedTargets.forEach((elem) => {
if (!prevAllowedTargets.includes(elem)) {
identicalToPrev = false;
}
});
} else {
identicalToPrev = false;
}
return identicalToPrev;
};
type CustomWizardFooterPropType = {
isNextDisabled: boolean;
};
/**
* The custom wizard footer is only switching the order of the buttons compared
* to the default wizard footer from the PF5 library.
*/
const CustomWizardFooter = ({ isNextDisabled }: CustomWizardFooterPropType) => {
const { goToNextStep, goToPrevStep, close } = useWizardContext();
return (
<WizardFooterWrapper>
<Button
variant="primary"
onClick={goToNextStep}
isDisabled={isNextDisabled}
>
Next
</Button>
<Button variant="secondary" onClick={goToPrevStep}>
Back
</Button>
<Button variant="link" onClick={close}>
Cancel
</Button>
</WizardFooterWrapper>
);
};
const CreateImageWizard = () => {
const navigate = useNavigate();
// Image output step states
const [release, setRelease] = useState<Distributions>(RHEL_9);
const [arch, setArch] = useState<ArchitectureItem['arch']>(X86_64);
const {
data: allowedTargets,
isFetching,
isSuccess,
isError,
} = useGetAllowedTargets({
architecture: arch,
release: release,
});
const [environment, setEnvironment] = useState<EnvironmentStateType>(
filterEnvironment(
{
aws: { selected: false, authorized: false },
azure: { selected: false, authorized: false },
gcp: { selected: false, authorized: false },
oci: { selected: false, authorized: false },
'vsphere-ova': { selected: false, authorized: false },
vsphere: { selected: false, authorized: false },
'guest-image': { selected: false, authorized: false },
'image-installer': { selected: false, authorized: false },
wsl: { selected: false, authorized: false },
},
allowedTargets
)
);
// Update of the environment when the architecture and release are changed.
// This pattern prevents the usage of a useEffect See https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
const [prevAllowedTargets, setPrevAllowedTargets] = useState(allowedTargets);
if (!isIdenticalToPrev(prevAllowedTargets, allowedTargets)) {
setPrevAllowedTargets(allowedTargets);
setEnvironment(filterEnvironment(environment, allowedTargets));
}
return (
<>
<ImageBuilderHeader />
<section className="pf-l-page__main-section pf-c-page__main-section">
<Wizard onClose={() => navigate(resolveRelPath(''))} isVisitRequired>
<WizardStep
name="Image output"
id="step-image-output"
footer={
<CustomWizardFooter
isNextDisabled={!hasUserSelectedAtLeastOneEnv(environment)}
/>
}
>
<ImageOutputStep
release={release}
setRelease={setRelease}
arch={arch}
setArch={setArch}
environment={environment}
setEnvironment={setEnvironment}
isFetching={isFetching}
isError={isError}
isSuccess={isSuccess}
/>
</WizardStep>
<WizardStep
name="Review"
id="step-review"
footer={<CustomWizardFooter isNextDisabled={true} />}
>
<ReviewStep release={release} arch={arch} />
</WizardStep>
</Wizard>
</section>
</>
);
};
export default CreateImageWizard;