front: rework layer activation

Author: SarahBellaha

front/public/locales/en/map-settings.json

@@ -6,7 +6,6 @@
   "detectors": "Detectors",
   "jdz": "Zone junction",
   "layers": "Data layers",
-  "lights": "Light signals",
   "mapSettings": "Map settings",
   "mapstyles": {
     "blueprint": "Blueprint",
@@ -18,6 +17,7 @@
   "routes": "Train blocks",
   "signalingtype": "Signalling block type",
   "signalisation": "Signaling",
+  "signals": "Light signals",
   "showIGNBDORTHO": "BD Ortho photo ©IGN",
   "showIGNSCAN25": "SCAN PLAN/25/100 ©IGN",
   "showIGNCadastre": "Cadastre ©IGN",

front/public/locales/fr/map-settings.json

@@ -6,7 +6,6 @@
   "detectors": "Détecteurs",
   "jdz": "Joints de zone",
   "layers": "Couches de données",
-  "lights": "Signaux lumineux",
   "mapSettings": "Paramètres cartographie",
   "mapstyles": {
     "blueprint": "Blueprint",
@@ -18,6 +17,7 @@
   "routes": "Cantons",
   "signalingtype": "Type de block",
   "signalisation": "Signalisation",
+  "signals": "Signaux lumineux",
   "showIGNBDORTHO": "BD Ortho photo ©IGN",
   "showIGNSCAN25": "SCAN PLAN/25/100 ©IGN",
   "showIGNCadastre": "Cadastre ©IGN",

front/src/applications/editor/Editor.tsx

@@ -11,7 +11,7 @@ import 'common/Map/Map.scss';
 
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
 import { LoaderState } from 'common/Loader';
-import { loadDataModel, updateTotalsIssue } from 'reducers/editor';
+import { loadDataModel, selectLayers, updateTotalsIssue } from 'reducers/editor';
 import { updateInfraID } from 'reducers/osrdconf';
 import { updateViewport, Viewport } from 'reducers/map';
 import { getInfraID } from 'reducers/osrdconf/selectors';
@@ -27,7 +27,6 @@ import {
   EditorContextType,
   ExtendedEditorContextType,
   FullTool,
-  ReadOnlyEditorContextType,
   Reducer,
 } from './tools/editorContextTypes';
 import { switchProps } from './tools/switchProps';
@@ -182,6 +181,13 @@ const Editor: FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [toolAndState.tool]);
 
+  useEffect(() => {
+    const layersList = toolAndState.tool.requiredLayers
+      ? new Set([...editorState.editorLayers, ...toolAndState.tool.requiredLayers])
+      : editorState.editorLayers;
+    dispatch(selectLayers(layersList));
+  }, [toolAndState.tool]);
+
   return (
     <EditorContext.Provider value={extendedContext as EditorContextType<unknown>}>
       <main
@@ -191,7 +197,7 @@ const Editor: FC = () => {
           <div className="tool-box bg-primary">
             {Object.values(TOOL_TYPES).map((toolType: TOOL_TYPES) => {
               const tool = TOOLS[toolType];
-              const { id, icon: IconComponent, labelTranslationKey, isDisabled } = tool;
+              const { id, icon: IconComponent, labelTranslationKey } = tool;
               const label = t(labelTranslationKey);
 
               return (
@@ -206,10 +212,6 @@ const Editor: FC = () => {
                     onClick={() => {
                       switchTool({ toolType, toolState: {} });
                     }}
-                    disabled={
-                      // TODO: clarify the type of extendedContext
-                      isDisabled && isDisabled(extendedContext as ReadOnlyEditorContextType<any>)
-                    }
                   >
                     <span className="sr-only">{label}</span>
                     <IconComponent />

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

@@ -40,13 +40,13 @@ interface LayersModalProps {
   initialLayers: Set<LayerType>;
   selection?: EditorEntity[];
   frozenLayers?: Set<LayerType>;
-  onSubmit: (args: { newLayers: Set<LayerType> }) => void;
+  onChange: (args: { newLayers: Set<LayerType> }) => void;
 }
 const LayersModal: FC<LayersModalProps> = ({
   initialLayers,
   selection,
   frozenLayers,
-  onSubmit,
+  onChange,
 }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -128,16 +128,25 @@ const LayersModal: FC<LayersModalProps> = ({
                 <div className="d-flex align-items-center mt-2">
                   <SwitchSNCF
                     type="switch"
-                    onChange={() =>
-                      setSelectedLayers((set) => {
-                        const newSet = new Set(set);
+                    onChange={() => {
+                      const newSelectedLayersList = () => {
+                        const newSet = new Set(selectedLayers);
                         layers.forEach((id) => {
                           if (newSet.has(id)) newSet.delete(id);
                           else newSet.add(id);
                         });
                         return newSet;
-                      })
-                    }
+                      };
+                      setSelectedLayers(newSelectedLayersList());
+                      dispatch(selectLayers(newSelectedLayersList()));
+                      dispatch(
+                        updateLayersSettings({
+                          ...layersSettings,
+                          speedlimittag: speedLimitTag as string,
+                        })
+                      );
+                      onChange({ newLayers: newSelectedLayersList() });
+                    }}
                     name={`editor-layer-${layerKey}`}
                     id={`editor-layer-${layerKey}`}
                     checked={layers.every((id) => selectedLayers.has(id))}
@@ -205,14 +214,6 @@ const LayersModal: FC<LayersModalProps> = ({
           type="button"
           className="btn btn-primary"
           onClick={() => {
-            dispatch(selectLayers(selectedLayers));
-            dispatch(
-              updateLayersSettings({
-                ...layersSettings,
-                speedlimittag: speedLimitTag as string,
-              })
-            );
-            onSubmit({ newLayers: selectedLayers });
             closeModal();
           }}
         >

front/src/applications/editor/nav.tsx

@@ -127,7 +127,7 @@ const NavButtons: NavButton[][] = [
                 ? (toolState as unknown as SelectionState).selection
                 : undefined
             }
-            onSubmit={({ newLayers }) => {
+            onChange={({ newLayers }) => {
               if (activeTool.id === 'select-items') {
                 const currentState = toolState as unknown as SelectionState;
                 (setToolState as unknown as (newState: SelectionState) => void)({