@centreon/ui 26.3.4 → 26.3.6

package/src/Wizard/ActionsBar.test.tsx

@@ -1,130 +1,130 @@
-import { fireEvent, render, screen } from '../../test/testRenderer';
+import { fireEvent, render, screen } from "../../test/testRenderer";
 
-import ActionsBar from './ActionsBar';
+import ActionsBar from "./ActionsBar";
 
 const goToPreviousStep = jest.fn();
 const goToNextStep = jest.fn();
 const submit = jest.fn();
 
 const actionsBarLabels = {
-  labelFinish: 'Finish',
-  labelNext: 'Next',
-  labelPrevious: 'Previous'
+	labelFinish: "Finish",
+	labelNext: "Next",
+	labelPrevious: "Previous",
 };
 
-describe('ActionsBar', () => {
-  it('cannot finish if the form is not valid', () => {
-    render(
-      <ActionsBar
-        disableActionButtons
-        isLastStep
-        actionsBarLabels={actionsBarLabels}
-        goToNextStep={goToNextStep}
-        goToPreviousStep={goToPreviousStep}
-        isFirstStep={false}
-        isSubmitting={false}
-        submit={submit}
-      />
-    );
+describe("ActionsBar", () => {
+	it("cannot finish if the form is not valid", () => {
+		render(
+			<ActionsBar
+				disableActionButtons
+				isLastStep
+				actionsBarLabels={actionsBarLabels}
+				goToNextStep={goToNextStep}
+				goToPreviousStep={goToPreviousStep}
+				isFirstStep={false}
+				isSubmitting={false}
+				submit={submit}
+			/>,
+		);
 
-    expect(screen.getByLabelText('Finish')).toHaveAttribute('disabled');
-  });
+		expect(screen.getByLabelText("Finish")).toHaveAttribute("disabled");
+	});
 
-  it('displays the given previous and next labels when the current page is not the last one', () => {
-    render(
-      <ActionsBar
-        actionsBarLabels={{
-          labelFinish: 'Custom finish',
-          labelNext: 'Custom next',
-          labelPrevious: 'Custom previous'
-        }}
-        disableActionButtons={false}
-        goToNextStep={goToNextStep}
-        goToPreviousStep={goToPreviousStep}
-        isFirstStep={false}
-        isLastStep={false}
-        isSubmitting={false}
-        submit={submit}
-      />
-    );
+	it("displays the given previous and next labels when the current page is not the last one", () => {
+		render(
+			<ActionsBar
+				actionsBarLabels={{
+					labelFinish: "Custom finish",
+					labelNext: "Custom next",
+					labelPrevious: "Custom previous",
+				}}
+				disableActionButtons={false}
+				goToNextStep={goToNextStep}
+				goToPreviousStep={goToPreviousStep}
+				isFirstStep={false}
+				isLastStep={false}
+				isSubmitting={false}
+				submit={submit}
+			/>,
+		);
 
-    expect(screen.getByText('Custom previous')).toBeInTheDocument();
-    expect(screen.getByText('Custom next')).toBeInTheDocument();
-  });
+		expect(screen.getByText("Custom previous")).toBeInTheDocument();
+		expect(screen.getByText("Custom next")).toBeInTheDocument();
+	});
 
-  it('displays the given previous and finish labels when the current page is the last one', () => {
-    render(
-      <ActionsBar
-        disableActionButtons
-        isLastStep
-        actionsBarLabels={{
-          labelFinish: 'Custom finish',
-          labelNext: 'Custom next',
-          labelPrevious: 'Custom previous'
-        }}
-        goToNextStep={goToNextStep}
-        goToPreviousStep={goToPreviousStep}
-        isFirstStep={false}
-        isSubmitting={false}
-        submit={submit}
-      />
-    );
+	it("displays the given previous and finish labels when the current page is the last one", () => {
+		render(
+			<ActionsBar
+				disableActionButtons
+				isLastStep
+				actionsBarLabels={{
+					labelFinish: "Custom finish",
+					labelNext: "Custom next",
+					labelPrevious: "Custom previous",
+				}}
+				goToNextStep={goToNextStep}
+				goToPreviousStep={goToPreviousStep}
+				isFirstStep={false}
+				isSubmitting={false}
+				submit={submit}
+			/>,
+		);
 
-    expect(screen.getByText('Custom previous')).toBeInTheDocument();
-    expect(screen.getByText('Custom finish')).toBeInTheDocument();
-  });
+		expect(screen.getByText("Custom previous")).toBeInTheDocument();
+		expect(screen.getByText("Custom finish")).toBeInTheDocument();
+	});
 
-  it('goes to previous step when the "Previous" button is clicked', () => {
-    render(
-      <ActionsBar
-        actionsBarLabels={actionsBarLabels}
-        disableActionButtons={false}
-        goToNextStep={goToNextStep}
-        goToPreviousStep={goToPreviousStep}
-        isFirstStep={false}
-        isLastStep={false}
-        isSubmitting={false}
-        submit={submit}
-      />
-    );
+	it('goes to previous step when the "Previous" button is clicked', () => {
+		render(
+			<ActionsBar
+				actionsBarLabels={actionsBarLabels}
+				disableActionButtons={false}
+				goToNextStep={goToNextStep}
+				goToPreviousStep={goToPreviousStep}
+				isFirstStep={false}
+				isLastStep={false}
+				isSubmitting={false}
+				submit={submit}
+			/>,
+		);
 
-    fireEvent.click(screen.getByLabelText('Previous'));
-    expect(goToPreviousStep).toHaveBeenCalled();
-  });
+		fireEvent.click(screen.getByLabelText("Previous"));
+		expect(goToPreviousStep).toHaveBeenCalled();
+	});
 
-  it('goes to next step when the "Next" button is clicked', () => {
-    render(
-      <ActionsBar
-        actionsBarLabels={actionsBarLabels}
-        disableActionButtons={false}
-        goToNextStep={goToNextStep}
-        goToPreviousStep={goToPreviousStep}
-        isFirstStep={false}
-        isLastStep={false}
-        isSubmitting={false}
-        submit={submit}
-      />
-    );
+	it('goes to next step when the "Next" button is clicked', () => {
+		render(
+			<ActionsBar
+				actionsBarLabels={actionsBarLabels}
+				disableActionButtons={false}
+				goToNextStep={goToNextStep}
+				goToPreviousStep={goToPreviousStep}
+				isFirstStep={false}
+				isLastStep={false}
+				isSubmitting={false}
+				submit={submit}
+			/>,
+		);
 
-    fireEvent.click(screen.getByLabelText('Next'));
-    expect(goToNextStep).toHaveBeenCalled();
-  });
+		fireEvent.click(screen.getByLabelText("Next"));
+		expect(goToNextStep).toHaveBeenCalled();
+	});
 
-  it('submits the wizard when the "Finish" button is clicked', () => {
-    render(
-      <ActionsBar
-        isLastStep
-        actionsBarLabels={actionsBarLabels}
-        disableActionButtons={false}
-        goToNextStep={goToNextStep}
-        goToPreviousStep={goToPreviousStep}
-        isFirstStep={false}
-        isSubmitting={false}
-        submit={submit}
-      />
-    );
+	it('submits the wizard when the "Finish" button is clicked', () => {
+		render(
+			<ActionsBar
+				isLastStep
+				actionsBarLabels={actionsBarLabels}
+				disableActionButtons={false}
+				goToNextStep={goToNextStep}
+				goToPreviousStep={goToPreviousStep}
+				isFirstStep={false}
+				isSubmitting={false}
+				submit={submit}
+			/>,
+		);
 
-    fireEvent.click(screen.getByLabelText('Finish'));
-    expect(submit).toHaveBeenCalled();
-  });
+		fireEvent.click(screen.getByLabelText("Finish"));
+		expect(submit).toHaveBeenCalled();
+	});
 });

package/src/Wizard/ActionsBar.tsx

@@ -1,8 +1,8 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Button, CircularProgress, Grid, Typography } from '@mui/material';
 
-import { ActionsBarProps } from './models';
+import { makeStyles } from 'tss-react/mui';
+
+import type { ActionsBarProps } from './models';
 
 const useStyles = makeStyles()((theme) => ({
   container: {
@@ -39,9 +39,9 @@ const ActionsBar = ({
 
   return (
     <Grid
-      container
       alignItems="center"
       className={classes.container}
+      container
       direction="row"
       justifyContent="flex-end"
     >

package/src/Wizard/StepIcon.tsx

@@ -1,9 +1,9 @@
-import { makeStyles } from 'tss-react/mui';
-
 import Check from '@mui/icons-material/Check';
-import { StepIconProps } from '@mui/material';
+import type { StepIconProps } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 
+import { makeStyles } from 'tss-react/mui';
+
 const useStepIconStyles = makeStyles()((theme) => ({
   avatar: {
     fontSize: theme.typography.body2.fontSize,

package/src/Wizard/Stepper.tsx

@@ -1,10 +1,10 @@
+import { Stepper as MUIStepper, Step, StepLabel } from '@mui/material';
+
 import { gte, length } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Stepper as MUIStepper, Step, StepLabel } from '@mui/material';
-
+import type { Step as StepType } from './models';
 import StepIcon from './StepIcon';
-import { Step as StepType } from './models';
 
 interface Props {
   currentStep: number;
@@ -35,17 +35,17 @@ const Stepper = ({ steps, currentStep }: Props): JSX.Element | null => {
 
   return (
     <MUIStepper
-      alternativeLabel
       activeStep={currentStep}
+      alternativeLabel
       className={classes.stepper}
     >
       {steps.map(({ stepName }) => (
         <Step key={stepName}>
           <StepLabel
-            StepIconComponent={StepIcon}
             classes={{
               alternativeLabel: classes.label
             }}
+            StepIconComponent={StepIcon}
           >
             {stepName}
           </StepLabel>

package/src/Wizard/WizardContent.tsx

@@ -1,11 +1,10 @@
-import { useEffect } from 'react';
-
 import { useFormikContext } from 'formik';
 import { equals } from 'ramda';
+import { useEffect } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import ActionsBar from './ActionsBar';
-import { WizardContentProps } from './models';
+import type { WizardContentProps } from './models';
 
 const useStyles = makeStyles()(() => ({
   content: {
@@ -26,7 +25,6 @@ const WizardContent = ({
   isFirstStep,
   disableNextOnSendingRequests,
   goToPreviousStep,
-  currentStep,
   actionsBarLabels,
   goToNextStep
 }: WizardContentProps): JSX.Element => {
@@ -45,7 +43,7 @@ const WizardContent = ({
 
   useEffect(() => {
     validateForm();
-  }, [currentStep]);
+  }, [validateForm]);
 
   const disableActionButtons =
     sendingRequest || isSubmitting || !isValid || getFormChanged();

package/src/Wizard/index.stories.tsx

@@ -1,12 +1,10 @@
-import { useEffect, useState } from 'react';
-
-import { FormikErrors, FormikValues, useFormikContext } from 'formik';
-
 import { TextField, Typography } from '@mui/material';
 
-import { StepComponentProps } from './models';
+import { type FormikErrors, type FormikValues, useFormikContext } from 'formik';
+import { useEffect, useState } from 'react';
 
 import Wizard from '.';
+import type { StepComponentProps } from './models';
 
 export default { title: 'Wizard' };
 
@@ -83,12 +81,12 @@ export const threeStepsWithMediumSize = (): JSX.Element => (
 
 export const threeStepsWithCustomActionsBarLabels = (): JSX.Element => (
   <Wizard
-    open
     actionsBarLabels={{
       labelFinish: 'Finish wizard',
       labelNext: 'Next step',
       labelPrevious: 'Previous step'
     }}
+    open
     steps={[
       {
         Component: (): JSX.Element => (
@@ -161,13 +159,13 @@ export const threeStepsWithFullHeight = (): JSX.Element => (
 
 export const threeStepsWithCustomConfirmDialogLabels = (): JSX.Element => (
   <Wizard
-    open
     confirmDialogLabels={{
       labelCancel: 'Cancel',
       labelConfirm: 'Exit',
       labelMessage: "Wizard's progress will not be saved",
       labelTitle: 'Exit wizard ?'
     }}
+    open
     steps={[
       {
         Component: (): JSX.Element => (
@@ -242,10 +240,10 @@ const FirstStepWithTextField = (): JSX.Element => {
       helperText={touched.email ? errors.email : ''}
       label="email"
       name="email"
-      type="email"
-      value={values.email}
       onBlur={handleBlur('email')}
       onChange={handleChange('email')}
+      type="email"
+      value={values.email}
     />
   );
 };
@@ -263,7 +261,7 @@ const SecondStep = ({
         setFieldValue('password', 'pwd');
       }, 1000);
     }
-  }, []);
+  }, [disableNextOnSendingRequests, setFieldValue, values.password]);
 
   return (
     <TextField
@@ -271,10 +269,10 @@ const SecondStep = ({
       helperText={touched.password ? errors.password : ''}
       label="password"
       name="password"
-      type="password"
-      value={values.password}
       onBlur={handleBlur('password')}
       onChange={handleChange('password')}
+      type="password"
+      value={values.password}
     />
   );
 };
@@ -298,11 +296,17 @@ const Form = (): JSX.Element => {
 
   return (
     <Wizard
-      open
       initialValues={{
         email: '',
         password: ''
       }}
+      onSubmit={(_, { setSubmitting }): void => {
+        setTimeout(() => {
+          setSubmitting(false);
+          setSubmitted(true);
+        }, 500);
+      }}
+      open
       steps={[
         {
           Component: FirstStepWithTextField,
@@ -336,12 +340,6 @@ const Form = (): JSX.Element => {
           stepName: 'Third Step'
         }
       ]}
-      onSubmit={(_, { setSubmitting }): void => {
-        setTimeout(() => {
-          setSubmitting(false);
-          setSubmitted(true);
-        }, 500);
-      }}
     />
   );
 };