From d40103a83eb40cca89d8ef9c4de9f0988413478a Mon Sep 17 00:00:00 2001
From: Benoit Simard <contact@bsimard.com>
Date: Tue, 2 Jul 2024 13:54:11 +0200
Subject: [PATCH] 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.
---
 .../applications/editor/components/EditorForm.tsx  |  2 +-
 .../components/PointEditionLeftPanel.tsx           | 11 +++++++++++
 .../editor/tools/pointEdition/tool-factory.tsx     |  5 ++++-
 .../components/TrackEditionLeftPanel.tsx           | 14 ++++++++++++--
 .../editor/tools/trackEdition/tool.tsx             |  5 ++++-
 5 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/front/src/applications/editor/components/EditorForm.tsx b/front/src/applications/editor/components/EditorForm.tsx
index 1d165f64bba..196fd9990e5 100644
--- a/front/src/applications/editor/components/EditorForm.tsx
+++ b/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}
diff --git a/front/src/applications/editor/tools/pointEdition/components/PointEditionLeftPanel.tsx b/front/src/applications/editor/tools/pointEdition/components/PointEditionLeftPanel.tsx
index 7758eaf0d44..3d24804a56d 100644
--- a/front/src/applications/editor/tools/pointEdition/components/PointEditionLeftPanel.tsx
+++ b/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: {
diff --git a/front/src/applications/editor/tools/pointEdition/tool-factory.tsx b/front/src/applications/editor/tools/pointEdition/tool-factory.tsx
index 1596c684c5e..b24e5087b2c 100644
--- a/front/src/applications/editor/tools/pointEdition/tool-factory.tsx
+++ b/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,
             });
           },
         },
diff --git a/front/src/applications/editor/tools/trackEdition/components/TrackEditionLeftPanel.tsx b/front/src/applications/editor/tools/trackEdition/components/TrackEditionLeftPanel.tsx
index 94950cbf8b0..5e25235c061 100644
--- a/front/src/applications/editor/tools/trackEdition/components/TrackEditionLeftPanel.tsx
+++ b/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={{
diff --git a/front/src/applications/editor/tools/trackEdition/tool.tsx b/front/src/applications/editor/tools/trackEdition/tool.tsx
index 6770aab01ca..4ce15ef3ba6 100644
--- a/front/src/applications/editor/tools/trackEdition/tool.tsx
+++ b/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,
           });
         },
       },