front: manage error lifecycle on editor's form

Fix #7446

When the initialEntity ref changes in the editor context, we remount the
form to reset its state (mainly its isSubmitted state).
It avoids top errors to be displayed when they should not.

front/src/applications/editor/components/EditorForm.tsx

@@ -72,7 +72,6 @@ function EditorForm<T extends Omit<EditorEntity, 'objType'> & { objType: string
 
   /**
    * When data or schema change
-   * => recompute formData by fixing LM
    */
   useEffect(() => {
     setFormData(omitBy(data.properties, isNil));
@@ -98,6 +97,7 @@ function EditorForm<T extends Omit<EditorEntity, 'objType'> & { objType: string
       <Form
         fields={{ ...fields, ...(overrideFields || {}) }}
         liveValidate={submited}
+        showErrorList={submited ? 'top' : false}
         action={undefined}
         noHtml5Validate
         validator={validator}

front/src/applications/editor/tools/pointEdition/components/PointEditionLeftPanel.tsx

@@ -2,6 +2,7 @@ import React, { type ComponentType, useContext, useEffect, useRef, useState } fr
 
 import along from '@turf/along';
 import length from '@turf/length';
+import { uniqueId } from 'lodash';
 import { useTranslation } from 'react-i18next';
 
 import EditorForm from 'applications/editor/components/EditorForm';
@@ -48,6 +49,7 @@ const PointEditionLeftPanel = <Entity extends EditorEntity>({
     EditorContext
   ) as ExtendedEditorContextType<PointEditionState<Entity>>;
   const submitBtnRef = useRef<HTMLButtonElement>(null);
+  const [formKey, setFormKey] = useState(state.initialEntity.properties.id);
 
   const isWayPoint = type === 'BufferStop' || type === 'Detector';
   const isNew = state.entity.properties.id === NEW_ENTITY_ID;
@@ -91,6 +93,14 @@ const PointEditionLeftPanel = <Entity extends EditorEntity>({
     }
   }, [infraID, setState, state, state.entity.properties.track, trackState.id, trackState.type]);
 
+  /**
+   * When the ref of the initialEntity changed,
+   * we remount the form (to reset its state, mainly for errors)
+   */
+  useEffect(() => {
+    setFormKey(uniqueId());
+  }, [state.initialEntity]);
+
   return (
     <>
       {isWayPoint && !isNew && (
@@ -101,6 +111,7 @@ const PointEditionLeftPanel = <Entity extends EditorEntity>({
         </>
       )}
       <EditorForm
+        key={formKey}
         data={state.entity as Entity}
         overrideUiSchema={{
           logical_signals: {

front/src/applications/editor/tools/pointEdition/tool-factory.tsx

@@ -93,8 +93,11 @@ function getPointEditionTool<T extends EditorPoint>({
             return isEqual(entity, initialEntity);
           },
           onClick({ setState, state: { initialEntity } }) {
+            const entity = cloneDeep(initialEntity);
+            // We set the initialEntity, so its ref changes and the form is remounted
             setState({
-              entity: cloneDeep(initialEntity),
+              entity,
+              initialEntity: entity,
             });
           },
         },

front/src/applications/editor/tools/trackEdition/components/TrackEditionLeftPanel.tsx

@@ -1,7 +1,7 @@
-import React, { useContext, useEffect, useRef, useMemo } from 'react';
+import React, { useContext, useEffect, useRef, useMemo, useState } from 'react';
 
 import type { JSONSchema7 } from 'json-schema';
-import { isNil, omit } from 'lodash';
+import { isNil, omit, uniqueId } from 'lodash';
 import { useTranslation } from 'react-i18next';
 
 import EditorForm from 'applications/editor/components/EditorForm';
@@ -33,6 +33,7 @@ const TrackEditionLeftPanel: React.FC = () => {
     EditorContext
   ) as ExtendedEditorContextType<TrackEditionState>;
   const submitBtnRef = useRef<HTMLButtonElement>(null);
+  const [formKey, setFormKey] = useState(state.initialTrack.properties.id);
   const { track, initialTrack } = state;
   const isNew = track.properties.id === NEW_ENTITY_ID;
 
@@ -68,9 +69,18 @@ const TrackEditionLeftPanel: React.FC = () => {
     } as JSONSchema7;
   }, [editorState.editorSchema, track.objType, track.properties.extensions?.source]);
 
+  /**
+   * When the ref of the initialEntity changed,
+   * we remount the form (to reset its state, mainly for errors)
+   */
+  useEffect(() => {
+    setFormKey(uniqueId());
+  }, [state.initialTrack]);
+
   return (
     <>
       <EditorForm
+        key={formKey}
         data={track}
         overrideSchema={schema}
         overrideUiSchema={{

front/src/applications/editor/tools/trackEdition/tool.tsx

@@ -59,8 +59,11 @@ const TrackEditionTool: Tool<TrackEditionState> = {
           return isEqual(track, initialTrack);
         },
         onClick({ setState, state: { initialTrack } }) {
+          // We set the initialEntity, so its ref changes and the form is remounted
+          const track = cloneDeep(initialTrack);
           setState({
-            track: cloneDeep(initialTrack),
+            track,
+            initialTrack: track,
           });
         },
       },