particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: fix state change on render

Browse source 
A setState action was occuring in during render in the customStatusNavItem
component of the CreateImageWizard. We just needed to wrap this setState
call in a useEffect hook. I also renamed the component to CustomStatusNavItem
for React component naming conventions.

See: https://reactjs.org/link/setstate-in-render
This commit is contained in:
Gianluca Zuccarelli 2025-06-18 13:20:35 +01:00 • committed by Klara Simickova
parent 66ed82a531
commit 16e5bdbe3a
1 changed files with 23 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/Components/CreateImageWizard/CreateImageWizard.tsx
View file

@ -307,7 +307,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
// Duplicating some of the logic from the Wizard component to allow for custom nav items status // Duplicating some of the logic from the Wizard component to allow for custom nav items status
// for original code see https://github.com/patternfly/patternfly-react/blob/184c55f8d10e1d94ffd72e09212db56c15387c5e/packages/react-core/src/components/Wizard/WizardNavInternal.tsx#L128 // for original code see https://github.com/patternfly/patternfly-react/blob/184c55f8d10e1d94ffd72e09212db56c15387c5e/packages/react-core/src/components/Wizard/WizardNavInternal.tsx#L128
const customStatusNavItem = ( const CustomStatusNavItem = (
step: WizardStepType, step: WizardStepType,
activeStep: WizardStepType, activeStep: WizardStepType,
steps: WizardStepType[], steps: WizardStepType[],
@ -316,6 +316,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
const isVisitOptional = const isVisitOptional =
'parentId' in step && step.parentId === 'step-optional-steps'; 'parentId' in step && step.parentId === 'step-optional-steps';
useEffect(() => {
if (process.env.IS_ON_PREMISE) { if (process.env.IS_ON_PREMISE) {
if (step.id === 'step-oscap' && step.isVisited) { if (step.id === 'step-oscap' && step.isVisited) {
setWasRegisterVisited(true); setWasRegisterVisited(true);
@ -323,6 +324,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
} else if (step.id === 'step-register' && step.isVisited) { } else if (step.id === 'step-register' && step.isVisited) {
setWasRegisterVisited(true); setWasRegisterVisited(true);
} }
}, [step.id, step.isVisited]);
const hasVisitedNextStep = steps.some( const hasVisitedNextStep = steps.some(
(s) => s.index > step.index && s.isVisited (s) => s.index > step.index && s.isVisited
@ -460,7 +462,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
id="step-register" id="step-register"
key="step-register" key="step-register"
isHidden={!!process.env.IS_ON_PREMISE || !isRhel(distribution)} isHidden={!!process.env.IS_ON_PREMISE || !isRhel(distribution)}
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
status={ status={
wasRegisterVisited wasRegisterVisited
? registrationValidation.disabledNext ? registrationValidation.disabledNext
@ -482,7 +484,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
id="step-oscap" id="step-oscap"
key="step-oscap" key="step-oscap"
isHidden={distribution === RHEL_10_BETA} isHidden={distribution === RHEL_10_BETA}
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
footer={ footer={
<CustomWizardFooter disableNext={false} optional={true} /> <CustomWizardFooter disableNext={false} optional={true} />
} }
@ -493,7 +495,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="File system configuration" name="File system configuration"
id="step-file-system" id="step-file-system"
key="step-file-system" key="step-file-system"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
footer={ footer={
<CustomWizardFooter <CustomWizardFooter
beforeNext={() => { beforeNext={() => {
@ -518,7 +520,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="Repeatable build" name="Repeatable build"
id="wizard-repository-snapshot" id="wizard-repository-snapshot"
key="wizard-repository-snapshot" key="wizard-repository-snapshot"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
status={snapshotValidation.disabledNext ? 'error' : 'default'} status={snapshotValidation.disabledNext ? 'error' : 'default'}
isHidden={ isHidden={
distribution === RHEL_10_BETA || distribution === RHEL_10_BETA ||
@ -538,7 +540,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="Custom repositories" name="Custom repositories"
id="wizard-custom-repositories" id="wizard-custom-repositories"
key="wizard-custom-repositories" key="wizard-custom-repositories"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
isHidden={ isHidden={
distribution === RHEL_10_BETA || distribution === RHEL_10_BETA ||
!!process.env.IS_ON_PREMISE || !!process.env.IS_ON_PREMISE ||
@ -555,7 +557,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="Additional packages" name="Additional packages"
id="wizard-additional-packages" id="wizard-additional-packages"
key="wizard-additional-packages" key="wizard-additional-packages"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
isHidden={isFedoraEnv} isHidden={isFedoraEnv}
isDisabled={snapshotValidation.disabledNext} isDisabled={snapshotValidation.disabledNext}
footer={ footer={
@ -568,7 +570,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="Users" name="Users"
id="wizard-users" id="wizard-users"
key="wizard-users" key="wizard-users"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
status={usersValidation.disabledNext ? 'error' : 'default'} status={usersValidation.disabledNext ? 'error' : 'default'}
footer={ footer={
<CustomWizardFooter <CustomWizardFooter
@ -583,7 +585,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="Timezone" name="Timezone"
id="wizard-timezone" id="wizard-timezone"
key="wizard-timezone" key="wizard-timezone"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
status={timezoneValidation.disabledNext ? 'error' : 'default'} status={timezoneValidation.disabledNext ? 'error' : 'default'}
footer={ footer={
<CustomWizardFooter <CustomWizardFooter
@ -598,7 +600,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="Locale" name="Locale"
id="wizard-locale" id="wizard-locale"
key="wizard-locale" key="wizard-locale"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
status={localeValidation.disabledNext ? 'error' : 'default'} status={localeValidation.disabledNext ? 'error' : 'default'}
footer={ footer={
<CustomWizardFooter <CustomWizardFooter
@ -613,7 +615,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="Hostname" name="Hostname"
id="wizard-hostname" id="wizard-hostname"
key="wizard-hostname" key="wizard-hostname"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
status={hostnameValidation.disabledNext ? 'error' : 'default'} status={hostnameValidation.disabledNext ? 'error' : 'default'}
footer={ footer={
<CustomWizardFooter <CustomWizardFooter
@ -628,7 +630,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="Kernel" name="Kernel"
id="wizard-kernel" id="wizard-kernel"
key="wizard-kernel" key="wizard-kernel"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
status={kernelValidation.disabledNext ? 'error' : 'default'} status={kernelValidation.disabledNext ? 'error' : 'default'}
footer={ footer={
<CustomWizardFooter <CustomWizardFooter
@ -643,7 +645,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="Firewall" name="Firewall"
id="wizard-firewall" id="wizard-firewall"
key="wizard-firewall" key="wizard-firewall"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
status={firewallValidation.disabledNext ? 'error' : 'default'} status={firewallValidation.disabledNext ? 'error' : 'default'}
footer={ footer={
<CustomWizardFooter <CustomWizardFooter
@ -658,7 +660,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="Systemd services" name="Systemd services"
id="wizard-services" id="wizard-services"
key="wizard-services" key="wizard-services"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
status={servicesValidation.disabledNext ? 'error' : 'default'} status={servicesValidation.disabledNext ? 'error' : 'default'}
footer={ footer={
<CustomWizardFooter <CustomWizardFooter
@ -673,7 +675,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
name="First boot script configuration" name="First boot script configuration"
id="wizard-first-boot" id="wizard-first-boot"
key="wizard-first-boot" key="wizard-first-boot"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
status={firstBootValidation.disabledNext ? 'error' : 'default'} status={firstBootValidation.disabledNext ? 'error' : 'default'}
isHidden={!!process.env.IS_ON_PREMISE || isFedoraEnv} isHidden={!!process.env.IS_ON_PREMISE || isFedoraEnv}
footer={ footer={
@ -690,7 +692,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
<WizardStep <WizardStep
name="Details" name="Details"
id="step-details" id="step-details"
navItem={customStatusNavItem} navItem={CustomStatusNavItem}
status={detailsValidation.disabledNext ? 'error' : 'default'} status={detailsValidation.disabledNext ? 'error' : 'default'}
footer={ footer={
<CustomWizardFooter <CustomWizardFooter