@centreon/ui 26.3.4 → 26.3.6

package/src/FileDropZone/index.tsx

@@ -1,26 +1,25 @@
+import PostAddIcon from '@mui/icons-material/PostAdd';
+import { alpha, Box, FormHelperText, Typography } from '@mui/material';
+
+import { userAtom } from '@centreon/ui-context';
+
 import { useAtomValue } from 'jotai';
 import {
-  T,
   cond,
   equals,
   flatten,
   identity,
   includes,
   isNil,
-  split
+  split,
+  T
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import PostAddIcon from '@mui/icons-material/PostAdd';
-import { Box, FormHelperText, Typography, alpha } from '@mui/material';
-
-import { userAtom } from '@centreon/ui-context';
-
 import { useMemoComponent } from '../utils';
-
 import { labelDropOr, labelSelectAFile } from './translatedLabels';
-import useDropzone, { UseDropzoneState } from './useDropzone';
+import useDropzone, { type UseDropzoneState } from './useDropzone';
 
 interface StylesProps {
   hasCustomDropZoneContent: boolean;
@@ -36,8 +35,8 @@ const useStyles = makeStyles<StylesProps>()(
         cursor: 'pointer'
       },
       border: `${theme.spacing(0.3)} dashed ${theme.palette.primary.main}`,
-      boxShadow: isDraggingOver ? theme.shadows[3] : theme.shadows[0],
       borderRadius: `${theme.shape.borderRadius}px`,
+      boxShadow: isDraggingOver ? theme.shadows[3] : theme.shadows[0],
       padding: theme.spacing(0.5, 1),
       width: hasCustomDropZoneContent ? '100%' : theme.spacing(50)
     },
@@ -147,12 +146,12 @@ const Dropzone = ({
           <div className={classes.dropzoneInfo}>
             {hasCustomDropZoneContent ? (
               <CustomDropZoneContent
-                openFileExplorer={openFileExplorer}
                 files={files}
                 label={label}
+                openFileExplorer={openFileExplorer}
               />
             ) : (
-              <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+              <Box sx={{ alignItems: 'center', display: 'flex', gap: 2 }}>
                 <PostAddIcon color="primary" fontSize="large" />
                 <Typography>
                   {t(labelDropOr)} {t(labelSelectAFile)}
@@ -164,9 +163,9 @@ const Dropzone = ({
               aria-label={t(labelSelectAFile)}
               className={classes.input}
               multiple={multiple}
+              onChange={handleChangeFiles}
               ref={fileInputRef}
               type="file"
-              onChange={handleChangeFiles}
             />
           </div>
         </Box>

package/src/FileDropZone/useDropzone.test.ts

@@ -1,7 +1,10 @@
-import { RenderHookResult, act, renderHook } from '@testing-library/react';
+import { act, type RenderHookResult, renderHook } from '@testing-library/react';
 
 import { labelFileTooBig, labelInvalidFileType } from './translatedLabels';
-import useDropzone, { UseDropzoneProps, UseDropzoneState } from './useDropzone';
+import useDropzone, {
+  type UseDropzoneProps,
+  type UseDropzoneState
+} from './useDropzone';
 
 const mockChangeFiles = jest.fn();
 const mockResetFilesStatusAndUploadData = jest.fn();

package/src/FileDropZone/useDropzone.ts

@@ -1,17 +1,15 @@
+import { all, isNil, lte, not, path, pluck } from 'ramda';
 import {
-  ChangeEvent,
-  DragEvent,
-  MutableRefObject,
+  type ChangeEvent,
+  type DragEvent,
+  type MutableRefObject,
   useCallback,
   useRef,
   useState
 } from 'react';
 
-import { path, all, isNil, lte, not, pluck } from 'ramda';
-
-import { labelFileTooBig, labelInvalidFileType } from './translatedLabels';
-
 import { transformFileListToArray } from '.';
+import { labelFileTooBig, labelInvalidFileType } from './translatedLabels';
 
 export interface UseDropzoneState {
   dragOver: (dragOverValue: boolean) => (event: DragEvent) => void;
@@ -60,7 +58,7 @@ const useDropzone = ({
         event.preventDefault();
         setIsDraggingOver(dragOverValue);
       },
-    [isDraggingOver]
+    []
   );
 
   const openFileExplorer = (): void => {

package/src/Form/CollapsibleGroup.tsx

@@ -1,10 +1,4 @@
-import { useCallback, useState } from 'react';
-
-import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
-
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
-
 import {
   Box,
   Collapse,
@@ -14,7 +8,11 @@ import {
   Typography
 } from '@mui/material';
 
-import { Group } from './Inputs/models';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import type { Group } from './Inputs/models';
 
 interface Props {
   children: React.ReactNode;
@@ -35,10 +33,10 @@ const useStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexDirection: 'row'
   },
+  title: {},
   tooltip: {
     maxWidth: theme.spacing(60)
-  },
-  title: {}
+  }
 }));
 
 const CollapsibleGroup = ({
@@ -67,11 +65,11 @@ const CollapsibleGroup = ({
     }: Pick<Props, 'children'>): JSX.Element =>
       isCollapsible ? (
         <ListItemButton
+          aria-label={group?.name}
+          className={`${cx(classes.groupTitleContainer, containerClassName)} bg-background-listing-header`}
           dense
           disableGutters
           disableRipple
-          aria-label={group?.name}
-          className={`${cx(classes.groupTitleContainer, containerClassName)} bg-background-listing-header`}
           onClick={toggle}
         >
           {containerComponentChildren}
@@ -81,7 +79,14 @@ const CollapsibleGroup = ({
           {containerComponentChildren}
         </Box>
       ),
-    [isCollapsible]
+    [
+      isCollapsible,
+      classes.groupTitleContainer,
+      containerClassName,
+      cx,
+      group?.name,
+      toggle
+    ]
   );
 
   return (
@@ -89,10 +94,10 @@ const CollapsibleGroup = ({
       {hasGroupTitle && (
         <ContainerComponent>
           <div
-            data-testid={`${group?.name}-header`}
             className={
               'snap-y flex flex-row justify-between w-full pl-3 pr-1 text-white items-center'
             }
+            data-testid={`${group?.name}-header`}
           >
             <Typography
               className="groupText scroll-m-12 snap-start"

package/src/Form/Form.cypress.spec.tsx

@@ -1,11 +1,10 @@
+import { Typography } from '@mui/material';
+
 import { faker } from '@faker-js/faker';
 import { useFormikContext } from 'formik';
 import { object } from 'yup';
 
-import { Typography } from '@mui/material';
-
 import { Button } from '../components';
-
 import { Form } from './Form';
 import { InputType } from './Inputs/models';
 
@@ -22,7 +21,7 @@ const AddItem = ({ addItem }: { addItem: (item) => void }): JSX.Element => {
   };
 
   return (
-    <Button variant="ghost" onClick={add}>
+    <Button onClick={add} variant="ghost">
       Add item
     </Button>
   );
@@ -54,9 +53,9 @@ const initializeFormList = (): void => {
             label: '',
             list: {
               AddItem,
-              SortContent,
               addItemLabel: 'Add an item to the list',
               itemProps: ['id', 'name', 'alias'],
+              SortContent,
               sortLabel: 'Sort items'
             },
             type: InputType.List
@@ -136,10 +135,6 @@ const initializeFormWithSections = (): void => {
   cy.mount({
     Component: (
       <Form
-        isCollapsible
-        initialValues={{
-          list: []
-        }}
         groups={[
           {
             name: 'First group',
@@ -158,6 +153,9 @@ const initializeFormWithSections = (): void => {
             order: 4
           }
         ]}
+        initialValues={{
+          list: []
+        }}
         inputs={[
           {
             fieldName: 'First name',
@@ -238,6 +236,7 @@ const initializeFormWithSections = (): void => {
             type: InputType.Text
           }
         ]}
+        isCollapsible
         submit={cy.stub()}
         validationSchema={object()}
       />
@@ -255,12 +254,12 @@ const initializeFile = () => {
         inputs={[
           {
             fieldName: 'list',
-            group: '',
-            label: 'json',
-            type: InputType.File,
             file: {
               accept: '.json'
-            }
+            },
+            group: '',
+            label: 'json',
+            type: InputType.File
           }
         ]}
         submit={cy.stub()}

package/src/Form/Form.stories.tsx

@@ -1,11 +1,11 @@
 import { Form, GroupDirection } from './Form';
 import {
-  BasicForm,
-  CustomButton,
+  type BasicForm,
   basicFormGroups,
   basicFormInitialValues,
   basicFormInputs,
-  basicFormValidationSchema
+  basicFormValidationSchema,
+  CustomButton
 } from './storiesData';
 
 export default { title: 'Form' };
@@ -33,7 +33,7 @@ export const basicFormWithGroups = (): JSX.Element => (
 );
 
 export const basicFormWithCollapsibleGroups = (): JSX.Element => (
-  <Form<BasicForm> {...mandatoryProps} isCollapsible groups={basicFormGroups} />
+  <Form<BasicForm> {...mandatoryProps} groups={basicFormGroups} isCollapsible />
 );
 
 export const basicFormWithCustomButton = (): JSX.Element => (
@@ -45,7 +45,7 @@ export const loadingForm = (): JSX.Element => (
 );
 
 export const loadingFormWithGroups = (): JSX.Element => (
-  <Form<BasicForm> {...mandatoryProps} isLoading groups={basicFormGroups} />
+  <Form<BasicForm> {...mandatoryProps} groups={basicFormGroups} isLoading />
 );
 
 export const basicFormWithHorizontalGroups = (): JSX.Element => (

package/src/Form/Form.tsx

@@ -1,16 +1,16 @@
 import {
   Formik,
-  FormikHelpers,
-  FormikSharedConfig,
-  FormikValues
+  type FormikHelpers,
+  type FormikSharedConfig,
+  type FormikValues
 } from 'formik';
+import type { ComponentType } from 'react';
+import type { Schema } from 'yup';
 
-import { ComponentType } from 'react';
-import { Schema } from 'yup';
 import { useStyles } from './Form.styles';
 import FormButtons from './FormButtons';
 import Inputs from './Inputs';
-import { Group, InputProps } from './Inputs/models';
+import type { Group, InputProps } from './Inputs/models';
 import { FormSection } from './Section/FormSection';
 
 export enum GroupDirection {
@@ -57,12 +57,12 @@ const Form = <T extends object>({
   if (isLoading) {
     return (
       <Inputs
-        isLoading
         areGroupsOpen={areGroupsOpen}
         groups={groups}
         groupsClassName={groupsClassName}
         inputs={inputs}
         isCollapsible={isCollapsible}
+        isLoading
       />
     );
   }
@@ -71,9 +71,9 @@ const Form = <T extends object>({
     <Formik<T>
       enableReinitialize
       initialValues={initialValues}
+      onSubmit={submit}
       validate={validate}
       validationSchema={validationSchema}
-      onSubmit={submit}
       {...formikSharedConfig}
     >
       <div>

package/src/Form/FormButtons.tsx

@@ -1,15 +1,13 @@
-import { useState } from 'react';
+import { Button } from '@mui/material';
 
-import { FormikValues, useFormikContext } from 'formik';
+import { type FormikValues, useFormikContext } from 'formik';
 import { not } from 'ramda';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { Button } from '@mui/material';
-
 import SaveButton from '../Button/Save';
 import { getNormalizedId, useMemoComponent } from '../utils';
-
 import {
   labelReset,
   labelSave,
@@ -60,8 +58,8 @@ const FormButtons = (): JSX.Element => {
           data-testid={labelReset}
           disabled={not(canReset)}
           id={getNormalizedId(labelReset)}
-          size="small"
           onClick={reset}
+          size="small"
         >
           {t(labelReset)}
         </Button>
@@ -72,9 +70,9 @@ const FormButtons = (): JSX.Element => {
           labelSave={labelSave}
           labelSucceeded={labelSaved}
           loading={isSubmitting}
+          onClick={submit}
           size="small"
           succeeded={submitted}
-          onClick={submit}
         />
       </div>
     ),

package/src/Form/Inputs/Autocomplete.tsx

@@ -1,18 +1,16 @@
-import { useCallback, useMemo, useState } from 'react';
+import { FormHelperText, Stack } from '@mui/material';
 
-import { FormikValues, useFormikContext } from 'formik';
-import { path, equals, isNil, map, not, prop, type } from 'ramda';
+import { type FormikValues, useFormikContext } from 'formik';
+import { equals, isNil, map, not, path, prop, type } from 'ramda';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { FormHelperText, Stack } from '@mui/material';
-
-import { SelectEntry } from '../../InputField/Select';
+import type { SelectEntry } from '../../InputField/Select';
 import SingleAutocompleteField from '../../InputField/Select/Autocomplete';
 import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
 import { useMemoComponent } from '../../utils';
 import { labelPressEnterToAccept } from '../translatedLabels';
-
-import { InputPropsWithoutGroup, InputType } from './models';
+import { type InputPropsWithoutGroup, InputType } from './models';
 
 const normalizeNewValues = ({
   newValues,
@@ -77,12 +75,12 @@ const Autocomplete = ({
     if (change) {
       setFieldTouched(fieldName, true, false);
       change({
-        setFieldValue,
-        value: normalizedNewValues,
         setFieldTouched,
+        setFieldValue,
+        setTouched,
         setValues,
-        values,
-        setTouched
+        value: normalizedNewValues,
+        values
       });
 
       return;
@@ -181,16 +179,16 @@ const Autocomplete = ({
             equals(option, selectedValue)
           }
           label={`${t(label)}${additionalLabel}`}
+          onChange={changeValues}
+          onTextChange={textChange}
           open={isCreatable ? false : undefined}
           options={autocomplete?.options || []}
           popupIcon={isCreatable ? null : undefined}
           required={isRequired}
-          value={getValues() ?? null}
-          onChange={changeValues}
-          onTextChange={textChange}
           style={{
             width: (autocomplete?.fullWidth ?? true) ? 'auto' : '180px'
           }}
+          value={getValues() ?? null}
         />
         {inputErrors && (
           <Stack>

package/src/Form/Inputs/Checkbox.tsx

@@ -1,14 +1,12 @@
-import { ChangeEvent } from 'react';
+import { Box } from '@mui/material';
 
-import { FormikValues, useFormikContext } from 'formik';
+import { type FormikValues, useFormikContext } from 'formik';
 import { path, split } from 'ramda';
-
-import { Box } from '@mui/material';
+import type { ChangeEvent } from 'react';
 
 import { useMemoComponent } from '../..';
 import { Checkbox as CheckboxComponent } from '../../Checkbox';
-
-import { InputPropsWithoutGroup } from './models';
+import type { InputPropsWithoutGroup } from './models';
 
 const Checkbox = ({
   checkbox,
@@ -42,10 +40,10 @@ const Checkbox = ({
       <Box />
     ) : (
       <CheckboxComponent
-        Icon={value?.Icon}
         checked={value?.checked}
         dataTestId={dataTestId || ''}
         disabled={disabled}
+        Icon={value?.Icon}
         label={label}
         labelPlacement={checkbox?.labelPlacement || 'end'}
         onChange={handleChange}

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -1,14 +1,12 @@
-import { ChangeEvent, useEffect } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import { path, equals, includes, split } from 'ramda';
-
 import { Box, Typography } from '@mui/material';
 
+import { type FormikValues, useFormikContext } from 'formik';
+import { equals, includes, path, split } from 'ramda';
+import { type ChangeEvent, useEffect } from 'react';
+
 import { useMemoComponent } from '../..';
 import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
-
-import { InputPropsWithoutGroup } from './models';
+import type { InputPropsWithoutGroup } from './models';
 
 const CheckboxGroup = ({
   checkbox,
@@ -36,7 +34,7 @@ const CheckboxGroup = ({
       checked: false
     }));
     setFieldValue(fieldName, resetedValue);
-  }, [disabled, hideCheckbox]);
+  }, [disabled, hideCheckbox, fieldName, setFieldValue, value?.map]);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
     const label = event.target.id;
@@ -63,9 +61,9 @@ const CheckboxGroup = ({
           direction={checkbox?.direction}
           disabled={disabled}
           labelPlacement={checkbox?.labelPlacement || 'end'}
+          onChange={handleChange}
           options={checkbox?.options as Array<string>}
           values={value}
-          onChange={handleChange}
         />
       </Box>
     ),

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,17 +1,15 @@
+import { type FormikValues, useFormikContext } from 'formik';
+import { equals, isEmpty, path, propEq, reject, split } from 'ramda';
 import { useCallback, useMemo } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import { path, equals, isEmpty, propEq, reject, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
-  SingleConnectedAutocompleteField,
   buildListingEndpoint,
+  SingleConnectedAutocompleteField,
   useMemoComponent
 } from '../..';
 import MultiConnectedAutocompleteField from '../../InputField/Select/Autocomplete/Connected/Multi';
-
-import { InputPropsWithoutGroup, InputType } from './models';
+import { type InputPropsWithoutGroup, InputType } from './models';
 
 const defaultFilterKey = 'name';
 
@@ -47,6 +45,7 @@ const ConnectedAutocomplete = ({
   const getEndpoint = (parameters): string =>
     buildListingEndpoint({
       baseEndpoint: connectedAutocomplete?.endpoint,
+      customQueryParameters: connectedAutocomplete?.customQueryParameters || [],
       parameters: {
         ...parameters,
         search: {
@@ -57,8 +56,7 @@ const ConnectedAutocomplete = ({
           ...parameters.search
         },
         sort: { [filterKey]: 'ASC' }
-      },
-      customQueryParameters: connectedAutocomplete?.customQueryParameters || []
+      }
     });
 
   const fieldNamePath = split('.', fieldName);
@@ -67,12 +65,12 @@ const ConnectedAutocomplete = ({
     (_, value): void => {
       if (change) {
         change({
-          setFieldValue,
-          value,
           setFieldTouched,
+          setFieldValue,
+          setTouched,
           setValues,
-          values,
-          setTouched
+          value,
+          values
         });
 
         return;
@@ -81,7 +79,15 @@ const ConnectedAutocomplete = ({
       setFieldTouched(fieldName, true, false);
       setFieldValue(fieldName, value);
     },
-    [fieldName, touched, additionalMemoProps]
+    [
+      fieldName,
+      change,
+      setFieldTouched,
+      setFieldValue,
+      setTouched,
+      setValues,
+      values
+    ]
   );
 
   const blur = (): void => setFieldTouched(fieldName, true);
@@ -129,27 +135,27 @@ const ConnectedAutocomplete = ({
       <AutocompleteField
         chipProps={chipProps}
         dataTestId={dataTestId}
+        decoder={connectedAutocomplete?.decoder}
         disableClearable={false}
-        disableSortedOptions={disableSortedOptions}
         disabled={disabled}
+        disableSelectAll={connectedAutocomplete?.disableSelectAll}
+        disableSortedOptions={disableSortedOptions}
         error={error}
         field={filterKey}
         getEndpoint={getEndpoint}
-        decoder={connectedAutocomplete?.decoder}
-        getRenderedOptionText={connectedAutocomplete?.getRenderedOptionText}
         getOptionLabel={connectedAutocomplete?.getOptionLabel}
-        optionProperty={connectedAutocomplete?.optionProperty}
+        getRenderedOptionText={connectedAutocomplete?.getRenderedOptionText}
         initialPage={1}
         isOptionEqualToValue={isOptionEqualToValue}
         label={t(label)}
+        limitTags={connectedAutocomplete?.limitTags}
         name={fieldName}
-        required={isRequired}
-        value={value ?? null}
         onBlur={blur}
         onChange={changeAutocomplete}
-        disableSelectAll={connectedAutocomplete?.disableSelectAll}
-        limitTags={connectedAutocomplete?.limitTags}
+        optionProperty={connectedAutocomplete?.optionProperty}
+        required={isRequired}
         searchConditions={connectedAutocomplete?.additionalConditionParameters}
+        value={value ?? null}
       />
     ),
     memoProps: [

package/src/Form/Inputs/Custom.tsx

@@ -1,6 +1,6 @@
 import { isNil } from 'ramda';
 
-import { InputPropsWithoutGroup } from './models';
+import type { InputPropsWithoutGroup } from './models';
 
 const Custom = ({
   custom,