gridsuite · Tristan-WorkGH · May 21, 2025 · May 21, 2025 · May 21, 2025 · May 22, 2025
diff --git a/demo/src/app.jsx b/demo/src/app.jsx
@@ -103,6 +103,7 @@ import {
     networkModificationsFr,
     logout,
     equipmentStyles,
+    useYupIntl,
 } from '../../src';
 
 const messages = {
@@ -307,6 +308,7 @@ function AppContent({ language, onLanguageClick }) {
     const navigate = useNavigate();
     const location = useLocation();
     const intl = useIntl();
+    useYupIntl();
     const [searchDisabled, setSearchDisabled] = useState(false);
     const [userManager, setUserManager] = useState({
         instance: null,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,9 +42,9 @@
         "@react-querybuilder/material": "^8.2.0",
         "autosuggest-highlight": "^3.3.4",
         "clsx": "^2.1.1",
-        "mui-nested-menu": "^4.0.0",
         "jwt-decode": "^4.0.0",
         "localized-countries": "^2.0.0",
+        "mui-nested-menu": "^4.0.0",
         "oidc-client": "^1.11.5",
         "prop-types": "^15.8.1",
         "react-csv-downloader": "^3.3.0",
@@ -53,7 +53,8 @@
         "react-querybuilder": "^8.2.0",
         "reconnecting-websocket": "^4.4.0",
         "type-fest": "^4.34.1",
-        "uuid": "^11.0.5"
+        "uuid": "^11.0.5",
+        "yup-locales": "^1.2.28"
     },
     "peerDependencies": {
         "@emotion/react": "^11.14.0",

diff --git a/src/components/contingencyList/criteriaBased/criteriaBasedUtils.ts b/src/components/contingencyList/criteriaBased/criteriaBasedUtils.ts
@@ -5,9 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { type ObjectSchema } from 'yup';
+import * as yup from 'yup';
+import type { ObjectSchema } from 'yup';
 import { FieldConstants } from '../../../utils/constants/fieldConstants';
-import yup from '../../../utils/yupConfig';
 import {
     DEFAULT_RANGE_VALUE,
     getRangeInputSchema,

diff --git a/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx b/src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx
@@ -9,7 +9,7 @@ import { type MouseEvent, type ReactNode, useCallback, useState } from 'react';
 import { FieldErrors, FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
 import { FormattedMessage } from 'react-intl';
 import { Dialog, DialogActions, DialogContent, DialogTitle, Grid, LinearProgress } from '@mui/material';
-import { type ObjectSchema } from 'yup';
+import type { ObjectSchema } from 'yup';
 import { SubmitButton } from '../../inputs/reactHookForm/utils/SubmitButton';
 import { CancelButton } from '../../inputs/reactHookForm/utils/CancelButton';
 import { CustomFormProvider } from '../../inputs/reactHookForm/provider/CustomFormProvider';

diff --git a/src/components/dialogs/descriptionModificationDialog/DescriptionModificationDialog.tsx b/src/components/dialogs/descriptionModificationDialog/DescriptionModificationDialog.tsx
@@ -5,11 +5,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Box } from '@mui/material';
-import yup from '../../../utils/yupConfig';
+import * as yup from 'yup';
 import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import { useSnackMessage } from '../../../hooks/useSnackMessage';
 import { CustomMuiDialog } from '../customMuiDialog/CustomMuiDialog';
@@ -24,11 +25,6 @@ export interface DescriptionModificationDialogProps {
     updateElement: (uuid: string, data: Record<string, string>) => Promise<void>;
 }
 
-const schema = yup.object().shape({
-    [FieldConstants.DESCRIPTION]: yup.string().max(MAX_CHAR_DESCRIPTION, 'descriptionLimitError'),
-});
-type SchemaType = yup.InferType<typeof schema>;
-
 export function DescriptionModificationDialog({
     elementUuid,
     description,
@@ -37,13 +33,23 @@ export function DescriptionModificationDialog({
     updateElement,
 }: Readonly<DescriptionModificationDialogProps>) {
     const { snackError } = useSnackMessage();
+    const intl = useIntl();
 
-    const emptyFormData = {
-        [FieldConstants.DESCRIPTION]: description ?? '',
-    };
+    const schema = useMemo(
+        () =>
+            yup.object().shape({
+                [FieldConstants.DESCRIPTION]: yup
+                    .string()
+                    .max(MAX_CHAR_DESCRIPTION, intl.formatMessage({ id: 'descriptionLimitError' })),
+            }),
+        [intl]
+    );
+    type SchemaType = yup.InferType<typeof schema>;
 
     const methods = useForm({
-        defaultValues: emptyFormData,
+        defaultValues: {
+            [FieldConstants.DESCRIPTION]: description ?? '',
+        },
         resolver: yupResolver(schema),
     });
 

diff --git a/src/components/dialogs/elementSaveDialog/ElementSaveDialog.tsx b/src/components/dialogs/elementSaveDialog/ElementSaveDialog.tsx
@@ -7,11 +7,11 @@
 
 import { FormattedMessage, useIntl } from 'react-intl';
 import { UUID } from 'crypto';
-import { useCallback, useEffect, useState } from 'react';
-import { Grid, Box, Button, CircularProgress, Typography } from '@mui/material';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Box, Button, CircularProgress, Grid, Typography } from '@mui/material';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import yup from '../../../utils/yupConfig';
+import * as yup from 'yup';
 import { TreeViewFinderNodeProps } from '../../treeViewFinder';
 import { DescriptionField, RadioInput, UniqueNameInput } from '../../inputs';
 import { DirectoryItemSelector } from '../../directoryItemSelector';
@@ -89,17 +89,6 @@ export type ElementSaveDialogProps = {
           }
     );
 
-const schema = yup
-    .object()
-    .shape({
-        [FieldConstants.NAME]: yup.string().trim().required(),
-        [FieldConstants.DESCRIPTION]: yup.string().optional().max(MAX_CHAR_DESCRIPTION, 'descriptionLimitError'),
-        [FieldConstants.OPERATION_TYPE]: yup.string().oneOf(Object.values(OperationType)).required(),
-    })
-    .required();
-
-type SchemaType = yup.InferType<typeof schema>;
-
 const emptyFormData: FormData = {
     [FieldConstants.NAME]: '',
     [FieldConstants.DESCRIPTION]: '',
@@ -132,6 +121,24 @@ export function ElementSaveDialog({
         TreeViewFinderNodeProps & { parentFolderId: UUID; fullPath: string }
     >();
 
+    const schema = useMemo(
+        () =>
+            yup
+                .object()
+                .shape({
+                    [FieldConstants.NAME]: yup.string().trim().required(),
+                    [FieldConstants.DESCRIPTION]: yup
+                        .string()
+                        .optional()
+                        .max(MAX_CHAR_DESCRIPTION, intl.formatMessage({ id: 'descriptionLimitError' })),
+                    [FieldConstants.OPERATION_TYPE]: yup.string().oneOf(Object.values(OperationType)).required(),
+                })
+                .required(),
+        [intl]
+    );
+
+    type SchemaType = yup.InferType<typeof schema>;
+
     // Form handling with conditional defaultValues
     const formMethods = useForm({
         defaultValues: {
@@ -170,10 +177,7 @@ export function ElementSaveDialog({
             });
             const dateTime = getCurrentDateTime();
             reset(
-                {
-                    ...emptyFormData,
-                    [FieldConstants.NAME]: `${formattedMessage}-${dateTime}`,
-                },
+                { ...emptyFormData, [FieldConstants.NAME]: `${formattedMessage}-${dateTime}` },
                 { keepDefaultValues: true }
             );
         }
@@ -184,29 +188,20 @@ export function ElementSaveDialog({
         if (open && isCreateMode && studyUuid) {
             fetchDirectoryElementPath(studyUuid).then((res) => {
                 if (!res || res.length < 2) {
-                    snackError({
-                        messageTxt: 'unknown study directory',
-                        headerId: 'studyDirectoryFetchingError',
-                    });
+                    snackError({ messageTxt: 'unknown study directory', headerId: 'studyDirectoryFetchingError' });
                     return;
                 }
                 const parentFolderIndex = res.length - 2;
                 const { elementUuid, elementName } = res[parentFolderIndex];
-                setDestinationFolder({
-                    id: elementUuid,
-                    name: elementName,
-                });
+                setDestinationFolder({ id: elementUuid, name: elementName });
             });
         }
     }, [studyUuid, open, snackError, isCreateMode]);
 
     // Set initial directory for creation if provided
     useEffect(() => {
         if (open && isCreateMode && initDirectory) {
-            setDestinationFolder({
-                id: initDirectory.elementUuid,
-                name: initDirectory.elementName,
-            });
+            setDestinationFolder({ id: initDirectory.elementUuid, name: initDirectory.elementName });
         }
     }, [initDirectory, open, isCreateMode]);
 
@@ -229,10 +224,7 @@ export function ElementSaveDialog({
                 const { id, name, description, parents } = items[0];
 
                 if (!parents) {
-                    snackError({
-                        messageTxt: 'errorNoParent',
-                        headerId: 'error',
-                    });
+                    snackError({ messageTxt: 'errorNoParent', headerId: 'error' });
                     return;
                 }
                 const fullPath = [...parents.map((parent) => parent.name), name].join('/');
@@ -327,9 +319,7 @@ export function ElementSaveDialog({
                             ]}
                             formProps={{
                                 sx: {
-                                    '& .MuiFormControlLabel-root': {
-                                        marginRight: 15,
-                                    },
+                                    '& .MuiFormControlLabel-root': { marginRight: 15 },
                                 },
                             }}
                         />
@@ -357,12 +347,8 @@ export function ElementSaveDialog({
                 types={isCreateMode ? [ElementType.DIRECTORY] : [type]}
                 onlyLeaves={isCreateMode ? false : undefined}
                 multiSelect={false}
-                validationButtonText={intl.formatMessage({
-                    id: 'validate',
-                })}
-                title={intl.formatMessage({
-                    id: isCreateMode ? 'showSelectDirectoryDialog' : selectorTitleId,
-                })}
+                validationButtonText={intl.formatMessage({ id: 'validate' })}
+                title={intl.formatMessage({ id: isCreateMode ? 'showSelectDirectoryDialog' : selectorTitleId })}
             />
         </CustomMuiDialog>
     );

diff --git a/src/components/filter/FilterCreationDialog.tsx b/src/components/filter/FilterCreationDialog.tsx
@@ -6,18 +6,19 @@
  */
 
 import { useCallback, useMemo } from 'react';
-import { FieldValues, Resolver, useForm } from 'react-hook-form';
+import { useIntl } from 'react-intl';
+import { type FieldValues, type Resolver, useForm } from 'react-hook-form';
+import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { UUID } from 'crypto';
+import type { UUID } from 'crypto';
 import { saveExpertFilter, saveExplicitNamingFilter } from './utils/filterApi';
 import { useSnackMessage } from '../../hooks/useSnackMessage';
 import { CustomMuiDialog } from '../dialogs/customMuiDialog/CustomMuiDialog';
 import {
-    explicitNamingFilterSchema,
     getExplicitNamingFilterEmptyFormData,
+    getExplicitNamingFilterSchema,
 } from './explicitNaming/ExplicitNamingFilterForm';
 import { FieldConstants } from '../../utils/constants/fieldConstants';
-import yup from '../../utils/yupConfig';
 import { FilterForm } from './FilterForm';
 import { expertFilterSchema, getExpertFilterEmptyFormData } from './expert/ExpertFilterForm';
 import { FilterType } from './constants/FilterConstants';
@@ -33,18 +34,6 @@ const emptyFormData = {
     ...getExpertFilterEmptyFormData(),
 };
 
-// we use both schemas then we can change the type of filter without losing the filled form fields
-const formSchema = yup
-    .object()
-    .shape({
-        [FieldConstants.NAME]: yup.string().trim().required('nameEmpty'),
-        [FieldConstants.DESCRIPTION]: yup.string().max(MAX_CHAR_DESCRIPTION, 'descriptionLimitError'),
-        [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
-        ...explicitNamingFilterSchema,
-        ...expertFilterSchema,
-    })
-    .required();
-
 export interface FilterCreationDialogProps {
     open: boolean;
     onClose: () => void;
@@ -66,6 +55,28 @@ export function FilterCreationDialog({
     filterType,
 }: FilterCreationDialogProps) {
     const { snackError } = useSnackMessage();
+    const intl = useIntl();
+
+    // we use both schemas then we can change the type of filter without losing the filled form fields
+    const formSchema = useMemo(
+        () =>
+            yup
+                .object()
+                .shape({
+                    [FieldConstants.NAME]: yup
+                        .string()
+                        .trim()
+                        .required(intl.formatMessage({ id: 'nameEmpty' })),
+                    [FieldConstants.DESCRIPTION]: yup
+                        .string()
+                        .max(MAX_CHAR_DESCRIPTION, intl.formatMessage({ id: 'descriptionLimitError' })),
+                    [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
+                    ...getExplicitNamingFilterSchema(intl),
+                    ...expertFilterSchema,
+                })
+                .required(),
+        [intl]
+    );
 
     const formMethods = useForm({
         defaultValues: emptyFormData,

diff --git a/src/components/filter/HeaderFilterForm.tsx b/src/components/filter/HeaderFilterForm.tsx
@@ -6,10 +6,11 @@
  */
 
 import { Grid } from '@mui/material';
-import { UUID } from 'crypto';
+import type { UUID } from 'crypto';
+import * as yup from 'yup';
+import { type IntlShape } from 'react-intl';
 import { ElementType, FieldConstants, MAX_CHAR_DESCRIPTION } from '../../utils';
 import { DescriptionField, UniqueNameInput } from '../inputs';
-import yup from '../../utils/yupConfig';
 
 export const filterStyles = {
     textField: {
@@ -32,11 +33,18 @@ export interface FilterFormProps {
     };
 }
 
-export const HeaderFilterSchema = {
-    [FieldConstants.NAME]: yup.string().trim().required('nameEmpty'),
-    [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
-    [FieldConstants.DESCRIPTION]: yup.string().max(MAX_CHAR_DESCRIPTION, 'descriptionLimitError'),
-};
+export function getHeaderFilterSchema(intl: IntlShape) {
+    return {
+        [FieldConstants.NAME]: yup
+            .string()
+            .trim()
+            .required(intl.formatMessage({ id: 'nameEmpty' })),
+        [FieldConstants.EQUIPMENT_TYPE]: yup.string().required(),
+        [FieldConstants.DESCRIPTION]: yup
+            .string()
+            .max(MAX_CHAR_DESCRIPTION, intl.formatMessage({ id: 'descriptionLimitError' })),
+    };
+}
 
 export function HeaderFilterForm({ creation, activeDirectory }: Readonly<FilterFormProps>) {
     return (