front: editor: move save button to action bar

front/public/locales/en/translation.json

@@ -233,9 +233,10 @@
       "catenary-edition": {
         "actions": {
           "confirm-delete-catenary": "Are you sure you want to remove the catenary?",
+          "delete-catenary": "Delete the catenary",
           "new-catenary": "Create a new catenary",
           "reset-catenary": "Cancel the current modifications",
-          "delete-catenary": "Delete the catenary"
+          "save-catenary": "Save the catenary"
         },
         "help": {
           "init": "Click on a track section to link it to the catenary",
@@ -246,8 +247,6 @@
         "catenaries": "Electrification",
         "catenary-default": "Default catenary",
         "label": "Catenary tool",
-        "save-existing-catenary": "Save modifications",
-        "save-new-catenary": "Save the new catenary",
         "voltage": "{{voltage}}V"
       },
       "detector-edition": {
@@ -382,9 +381,10 @@
       "speed-edition": {
         "actions": {
           "confirm-delete-speed-section": "Are you sure you want to remove the speed limit?",
+          "delete-speed-section": "Delete the speed limit",
           "new-speed-section": "Create a new speed limit",
           "reset-speed-section": "Cancel the current modifications",
-          "delete-speed-section": "Delete the speed limit"
+          "save-speed-section": "Save the speed limit"
         },
         "add-new-speed-limit": "Add new speed limit",
         "add-sign": "Add a sign from {{signType}} type",
@@ -408,8 +408,6 @@
         "sign-value": "Speed",
         "signs-section-list": "Section signs list",
         "remove-track-range": "Click to detatch from:",
-        "save-existing-speed-section": "Save modifications",
-        "save-new-speed-section": "Save the new speed limit",
         "speed-limits": "Speed limits",
         "toggle-psl": "Permanent speed limit",
         "toggle-psl-help": "Click on a track section first to be able to activate this option"
@@ -442,7 +440,8 @@
           "mode-add-point": "Add a point",
           "mode-delete-point": "Delete points",
           "mode-move-point": "Move points",
-          "toggle-anchoring": "Toggle anchoring on/off"
+          "toggle-anchoring": "Toggle anchoring on/off",
+          "save-line": "Save the line"
         },
         "help": {
           "add-anchor-point": "Click to add a point at the end of the track section. Click on the track to add an intermediate point.",

front/public/locales/fr/translation.json

@@ -233,21 +233,20 @@
       "catenary-edition": {
         "actions": {
           "confirm-delete-catenary": "Êtes-vous sûr(e) de vouloir supprimer l'électrification ?",
+          "delete-catenary": "Supprimer l'électrification",
           "new-catenary": "Créer une nouvelle électrification",
           "reset-catenary": "Annuler les modifications en cours",
-          "delete-catenary": "Supprimer l'électrification"
+          "save-catenary": "Sauvegarder l'électrification"
         },
         "help": {
-          "init":"Cliquez sur un tronçon d'itinéraire pour l'associer à l'électrification",
+          "init": "Cliquez sur un tronçon d'itinéraire pour l'associer à l'électrification",
           "add-track": "Ajouter le tronçon '{{track.id}}' à l'électrification {{voltage}}",
           "remove-range": "Supprimer le tronçon de l'électrification {{voltage}}"
         },
         "add-new-catenary": "Ajouter une nouvelle électrification",
         "catenaries": "Électrification",
         "catenary-default": "Électrification par défaut",
         "label": "Outil \"Électrification\"",
-        "save-existing-catenary": "Sauvegarder les modifications",
-        "save-new-catenary": "Sauvegarder la nouvelle électrification",
         "voltage": "{{voltage}}V"
       },
       "detector-edition": {
@@ -382,9 +381,10 @@
       "speed-edition": {
         "actions": {
           "confirm-delete-speed-section": "Êtes-vous sûr(e) de vouloir supprimer la vitesse limite ?",
+          "delete-speed-section": "Supprimer la vitesse limite",
           "new-speed-section": "Créer une nouvelle vitesse limite",
           "reset-speed-section": "Annuler les modifications en cours",
-          "delete-speed-section": "Supprimer la vitesse limite"
+          "save-speed-section": "Sauvegarder la vitesse limite"
         },
         "add-new-speed-limit": "Ajouter une nouvelle limitation",
         "add-sign": "Ajouter un panneau de type {{signType}}",
@@ -408,8 +408,6 @@
         "sign-value": "Vitesse",
         "signs-section-list": "Liste des panneaux de la section",
         "remove-track-range": "Cliquer pour détacher de :",
-        "save-existing-speed-section": "Sauvegarder les modifications",
-        "save-new-speed-section": "Sauvegarder la nouvelle limite de vitesse",
         "speed-limits": "Limitations de vitesses",
         "toggle-psl": "Limite permanente de vitesse",
         "toggle-psl-help": "Cliquez d'abord sur un tronçon d'itinéraire pour pouvoir activer cette option"
@@ -442,7 +440,8 @@
           "mode-add-point": "Ajouter un point",
           "mode-delete-point": "Supprimer des points",
           "mode-move-point": "Déplacer les points",
-          "toggle-anchoring": "Activer / désactiver l'ancrage automatique"
+          "toggle-anchoring": "Activer / désactiver l'ancrage automatique",
+          "save-line": "Sauvegarder la ligne"
         },
         "help": {
           "add-anchor-point": "Cliquez pour ajouter un point au bout de la section de ligne. Cliquez sur la ligne pour ajouter un point intermédiaire.",

front/src/applications/editor/Editor.tsx

@@ -15,6 +15,7 @@ import { loadDataModel, selectLayers, updateTotalsIssue } from 'reducers/editor'
 import { updateInfraID } from 'reducers/osrdconf';
 import { updateViewport, Viewport } from 'reducers/map';
 import { getInfraID } from 'reducers/osrdconf/selectors';
+import { getIsLoading } from 'reducers/main/mainSelector';
 import useKeyboardShortcuts from 'utils/hooks/useKeyboardShortcuts';
 import MapSearch from 'common/Map/Search/MapSearch';
 import Tipped from './components/Tipped';
@@ -44,6 +45,7 @@ const Editor: FC = () => {
   const mapRef = useRef<MapRef>(null);
   const { urlInfra } = useParams();
   const infraID = useSelector(getInfraID);
+  const isLoading = useSelector(getIsLoading);
   const editorState = useSelector((state: { editor: EditorState }) => state.editor);
   const switchTypes = useSwitchTypes(infraID);
   const { register } = useKeyboardShortcuts();
@@ -58,6 +60,8 @@ const Editor: FC = () => {
     setRenderingFingerprint(Date.now());
   }, [setRenderingFingerprint]);
 
+  const [formError, setFormError] = useState<string | null>(null);
+
   const switchTool = useCallback(
     ({ toolType, toolState }: switchProps) => {
       const tool = TOOLS[toolType];
@@ -128,6 +132,9 @@ const Editor: FC = () => {
       dispatch,
       editorState,
       infraID,
+      isLoading,
+      formError,
+      setFormError,
       switchTypes,
       mapState: {
         viewport,

front/src/applications/editor/Map.tsx

@@ -23,9 +23,10 @@ import Hillshade from 'common/Map/Layers/Hillshade';
 import PlatformsLayer from 'common/Map/Layers/Platforms';
 import { useMapBlankStyle } from 'common/Map/Layers/blankStyle';
 import IGN_BD_ORTHO from 'common/Map/Layers/IGN_BD_ORTHO';
+import { Viewport } from 'reducers/map';
 import { getInfraID } from 'reducers/osrdconf/selectors';
+import { getIsLoading } from 'reducers/main/mainSelector';
 import { getShowOSM, getTerrain3DExaggeration } from 'reducers/map/selectors';
-import { Viewport } from 'reducers/map';
 import { getMapMouseEventNearestFeature } from 'utils/mapHelper';
 import { InfraError } from './components/InfraErrors/types';
 import EditorContext from './context';
@@ -75,13 +76,15 @@ const MapUnplugged: FC<PropsWithChildren<MapProps>> = ({
   const editorState = useSelector((state: { editor: EditorState }) => state.editor);
   const showOSM = useSelector(getShowOSM);
   const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
+  const isLoading = useSelector(getIsLoading);
 
   const extendedContext = useMemo<ExtendedEditorContextType<CommonToolState>>(
     () => ({
       ...context,
       dispatch,
       editorState,
       infraID,
+      isLoading,
       switchTypes,
       mapState: {
         viewport,

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

@@ -24,8 +24,10 @@ const fields = {
 
 interface EditorFormProps<T> {
   data: T;
-  onSubmit: (data: T) => Promise<void>;
+  onSubmit?: (data: T) => Promise<void>;
   onChange?: (data: T) => void;
+  formError?: string | null;
+  setFormError?: (error: string | null) => void;
 
   // Overrides:
   overrideSchema?: JSONSchema7;
@@ -40,12 +42,14 @@ function EditorForm<T extends Omit<EditorEntity, 'objType'> & { objType: string
   data,
   onSubmit,
   onChange,
+  formError,
+  setFormError,
   overrideSchema,
   overrideUiSchema,
   overrideFields,
   children,
 }: PropsWithChildren<EditorFormProps<T>>) {
-  const [error, setError] = useState<string | null>(null);
+  // const [error, setError] = useState<string | null>(null);
   const [formData, setFormData] = useState<GeoJsonProperties>(data.properties);
   const [submited, setSubmited] = useState<boolean>(false);
   const { t } = useTranslation('infraEditor');
@@ -77,19 +81,34 @@ function EditorForm<T extends Omit<EditorEntity, 'objType'> & { objType: string
   /**
    * When errors are displayed, we scroll to them.
    */
+  // useEffect(() => {
+  //   const container = document.getElementsByClassName('panel-box')[0];
+  //   if (error && container) {
+  //     container.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  //   }
+  // }, [error]);
+
   useEffect(() => {
+    console.log('formerror : ', formError);
     const container = document.getElementsByClassName('panel-box')[0];
-    if (error && container) {
+    if (formError && container) {
       container.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+      setSubmited(true);
     }
-  }, [error]);
+    return () => setFormError && setFormError(null);
+  }, [formError]);
 
   return (
     <div>
-      {submited && error !== null && (
+      {/* {submited && error !== null && (
         <div className="form-error mt-3 mb-3">
           <p>{error}</p>
         </div>
+      )} */}
+      {submited && formError !== null && (
+        <div className="form-error mt-3 mb-3">
+          <p>{formError}</p>
+        </div>
       )}
       <Form
         fields={{ ...fields, ...(overrideFields || {}) }}
@@ -102,6 +121,9 @@ function EditorForm<T extends Omit<EditorEntity, 'objType'> & { objType: string
           length: {
             'ui:widget': FormLineStringLength,
           },
+          'ui:submitButtonOptions': {
+            norender: true,
+          },
           ...(overrideUiSchema || {}),
         }}
         formData={formData}
@@ -111,17 +133,19 @@ function EditorForm<T extends Omit<EditorEntity, 'objType'> & { objType: string
           isCreation: isNil(formData?.id) || formData?.id === NEW_ENTITY_ID,
         }}
         onError={() => setSubmited(true)}
-        onSubmit={async () => {
-          try {
-            setError(null);
-            await onSubmit({ ...data, properties: { ...data.properties, ...formData } });
-          } catch (e) {
-            if (e instanceof Error) setError(e.message);
-            else setError(JSON.stringify(e));
-          } finally {
-            setSubmited(true);
-          }
-        }}
+        // onSubmit={async () => {
+        //   if (onSubmit) {
+        //     try {
+        //       setError(null);
+        //       await onSubmit({ ...data, properties: { ...data.properties, ...formData } });
+        //     } catch (e) {
+        //       if (e instanceof Error) setError(e.message);
+        //       else setError(JSON.stringify(e));
+        //     } finally {
+        //       setSubmited(true);
+        //     }
+        //   }
+        // }}
         onChange={(event) => {
           setFormData({ ...data.properties, ...event.formData });
           onChange?.({ ...data, properties: { ...data.properties, ...event.formData } });

front/src/applications/editor/tools/editorContextTypes.ts

@@ -48,6 +48,9 @@ export interface ExtendedEditorContextType<S> extends EditorContextType<S> {
   mapState: MapState;
   infraID: number | undefined;
   switchTypes: SwitchType[] | undefined;
+  isLoading: boolean;
+  formError?: string | null;
+  setFormError?: (error: string | null) => void;
 }
 
 export type ReadOnlyEditorContextType<S> = Omit<

front/src/applications/editor/tools/rangeEdition/components.tsx

@@ -1,9 +1,8 @@
-import { cloneDeep, isEqual } from 'lodash';
-import { useDispatch, useSelector } from 'react-redux';
+import { cloneDeep } from 'lodash';
+import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import React, { FC, useContext, useState } from 'react';
 import { BsArrowBarRight } from 'react-icons/bs';
-import { AiFillSave } from 'react-icons/ai';
 import { MdShowChart } from 'react-icons/md';
 import { FaFlagCheckered, FaTimes } from 'react-icons/fa';
 
@@ -18,14 +17,11 @@ import {
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
 import CheckboxRadioSNCF from 'common/BootstrapSNCF/CheckboxRadioSNCF';
 import { LoaderFill } from 'common/Loader';
-import { save } from 'reducers/editor';
-import { getIsLoading } from 'reducers/main/mainSelector';
 import { getInfraID } from 'reducers/osrdconf/selectors';
 import {
   APPLICABLE_DIRECTIONS,
   ApplicableDirection,
   CatenaryEntity,
-  EntityObjectOperationResult,
   SpeedSectionEntity,
   SpeedSectionPslEntity,
 } from 'types';
@@ -215,15 +211,13 @@ export const TrackRangesList: FC = () => {
 };
 
 export const RangeEditionLeftPanel: FC = () => {
-  const dispatch = useDispatch();
   const { t } = useTranslation();
   const {
     setState,
     state: { entity, initialEntity },
   } = useContext(EditorContext) as ExtendedEditorContextType<
     RangeEditionState<SpeedSectionEntity | CatenaryEntity>
   >;
-  const isLoading = useSelector(getIsLoading);
 
   const isNew = entity.properties.id === NEW_ENTITY_ID;
   const isPSL = speedSectionIsPsl(entity as SpeedSectionEntity);
@@ -247,64 +241,11 @@ export const RangeEditionLeftPanel: FC = () => {
     });
   };
 
-  let saveMessage;
-  if (entity.objType === 'SpeedSection') {
-    saveMessage = isNew
-      ? t('Editor.tools.speed-edition.save-new-speed-section')
-      : t('Editor.tools.speed-edition.save-existing-speed-section');
-  } else {
-    saveMessage = isNew
-      ? t('Editor.tools.catenary-edition.save-new-catenary')
-      : t('Editor.tools.catenary-edition.save-existing-catenary');
-  }
-
   return (
     <div>
-      <legend>
+      <legend className="mb-4">
         {t(`Editor.obj-types.${entity.objType === 'SpeedSection' ? 'SpeedSection' : 'Catenary'}`)}
       </legend>
-      <div className="my-4">
-        <button
-          type="button"
-          className="btn btn-primary w-100 text-wrap"
-          disabled={isLoading || isEqual(entity, initialEntity)}
-          onClick={async () => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const res: any = await dispatch(
-              save(
-                infraID,
-                !isNew
-                  ? {
-                      update: [
-                        {
-                          source: initialEntity,
-                          target: entity,
-                        },
-                      ],
-                    }
-                  : { create: [entity] }
-              )
-            );
-            const operation = res[0] as EntityObjectOperationResult;
-            const { id } = operation.railjson;
-
-            const savedEntity =
-              id && id !== entity.properties.id
-                ? {
-                    ...entity,
-                    properties: { ...entity.properties, id: `${id}` },
-                  }
-                : entity;
-            setState({
-              entity: cloneDeep(savedEntity),
-              initialEntity: cloneDeep(savedEntity),
-            });
-          }}
-        >
-          <AiFillSave className="mr-2" />
-          {saveMessage}
-        </button>
-      </div>
       {initialEntity.objType === 'SpeedSection' ? (
         <SpeedSectionMetadataForm />
       ) : (