fix Gui issues problem

Signed-off-by: basseche <[email protected]>

Author: basseche

src/components/dialogs/limits/limits-pane-utils.ts

@@ -14,6 +14,7 @@ import {
     ID,
     LIMIT_SETS_MODIFICATION_TYPE,
     LIMITS,
+    LIMITS_PROPERTIES,
     NAME,
     OPERATIONAL_LIMITS_GROUPS,
     PERMANENT_LIMIT,
@@ -24,6 +25,7 @@ import {
     TEMPORARY_LIMIT_NAME,
     TEMPORARY_LIMIT_VALUE,
     TEMPORARY_LIMITS,
+    VALUE,
 } from 'components/utils/field-constants';
 import {
     areArrayElementsUnique,
@@ -53,6 +55,7 @@ const limitsGroupValidationSchema = (isModification: boolean) => ({
     [NAME]: yup.string().nonNullable().required(),
     [APPLICABIlITY]: yup.string().nonNullable().required(),
     [CURRENT_LIMITS]: yup.object().shape(currentLimitsValidationSchema(isModification)),
+    [LIMITS_PROPERTIES]: yup.array().of(limitsPropertyValidationSchema()),
 });
 
 const temporaryLimitsValidationSchema = () => {
@@ -68,6 +71,12 @@ const temporaryLimitsValidationSchema = () => {
             }),
     });
 };
+const limitsPropertyValidationSchema = () => {
+    return yup.object().shape({
+        [NAME]: yup.string().nullable(),
+        [VALUE]: yup.string().nullable(),
+    });
+};
 
 const currentLimitsValidationSchema = (isModification = false) => ({
     [PERMANENT_LIMIT]: isModification

src/components/dialogs/limits/limits-properties-side-stack.tsx

@@ -10,16 +10,19 @@ import { useCallback, useMemo, useState } from 'react';
 import { AddCircle, Delete } from '@mui/icons-material';
 import { useIntl } from 'react-intl';
 import { LimitsProperty } from '../../../services/network-modification-types';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useFieldArray } from 'react-hook-form';
 import { usePredefinedProperties } from '@gridsuite/commons-ui';
 
 export interface LimitsPropertiesSideStackProps {
     formName: string;
     disabled?: boolean;
 }
 export function LimitsPropertiesSideStack({ formName, disabled }: Readonly<LimitsPropertiesSideStackProps>) {
-    const { setValue } = useFormContext();
-    const limitsProperties: LimitsProperty[] = useWatch({ name: formName });
+    const {
+        fields: limitsProperties,
+        append,
+        remove,
+    } = useFieldArray<{ [key: string]: LimitsProperty[] }>({ name: formName });
 
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const [hovered, setHovered] = useState<boolean>(false);
@@ -39,18 +42,17 @@ export function LimitsPropertiesSideStack({ formName, disabled }: Readonly<Limit
                 if (!propertyName.trim() || !propertyValue.trim()) {
                     return;
                 }
-                if (!limitsProperties?.length) {
-                    setValue(formName, [{ name: propertyName, value: propertyValue }]);
-                } else if (limitsProperties.some((l) => l.name === propertyName)) {
+
+                if (limitsProperties.some((l) => l.name === propertyName)) {
                     setEditorError(intl.formatMessage({ id: 'NameUnique' }));
                     return;
                 } else {
-                    setValue(formName, [...limitsProperties, { name: propertyName, value: propertyValue }]);
+                    append({ name: propertyName, value: propertyValue });
                 }
                 setIsEditing(false);
             }
         },
-        [formName, intl, limitsProperties, propertyName, propertyValue, setValue]
+        [append, intl, limitsProperties, propertyName, propertyValue]
     );
 
     const handleOnChange = useCallback((value: string) => {
@@ -63,9 +65,9 @@ export function LimitsPropertiesSideStack({ formName, disabled }: Readonly<Limit
             if (limitsProperties?.length <= index) {
                 return;
             }
-            setValue(formName, [...limitsProperties.slice(0, index), ...limitsProperties.slice(index + 1)]);
+            remove(index);
         },
-        [formName, limitsProperties, setValue]
+        [limitsProperties?.length, remove]
     );
 
     return (