front: add search tool in editor map

Author: SarahBellaha

front/src/applications/editor/Editor.scss

@@ -103,7 +103,7 @@
     overflow-y: auto;
   }
 
-  .nav-box  {
+  .nav-box {
     position: absolute;
     right: 0;
     top: 0;
@@ -142,6 +142,10 @@
     & > .map {
       flex-grow: 1;
 
+      .map-modal {
+        width: clamp(25%, 50%, 100%);
+    }
+
       .popup {
         text-align: center;
 

front/src/applications/editor/Editor.tsx

@@ -16,6 +16,7 @@ import { updateInfraID } from 'reducers/osrdconf';
 import { updateViewport, Viewport } from 'reducers/map';
 import { getInfraID } from 'reducers/osrdconf/selectors';
 import useKeyboardShortcuts from 'utils/hooks/useKeyboardShortcuts';
+import MapSearch from 'common/Map/Search/MapSearch';
 import Tipped from './components/Tipped';
 import Map from './Map';
 import NavButtons from './nav';
@@ -50,6 +51,7 @@ const Editor: FC = () => {
     tool: TOOLS[TOOL_TYPES.SELECTION],
     state: TOOLS[TOOL_TYPES.SELECTION].getInitialState({ infraID, switchTypes }),
   });
+  const [isSearchToolOpened, setIsSearchToolOpened] = useState(false);
   const [renderingFingerprint, setRenderingFingerprint] = useState(Date.now());
   const forceRender = useCallback(() => {
     setRenderingFingerprint(Date.now());
@@ -283,6 +285,12 @@ const Editor: FC = () => {
                   setToolState,
                 }}
               />
+              {isSearchToolOpened && (
+                <MapSearch
+                  map={mapRef.current!}
+                  closeMapSearchPopUp={() => setIsSearchToolOpened(false)}
+                />
+              )}
 
               <div className="nav-box">
                 {NavButtons.flatMap((navButtons, i, a) => {
@@ -308,6 +316,7 @@ const Editor: FC = () => {
                             viewport,
                             openModal,
                             closeModal,
+                            setIsSearchToolOpened,
                             editorState,
                             mapRef: mapRef.current,
                           },

front/src/applications/editor/nav.tsx

@@ -3,7 +3,6 @@ import { Dispatch } from 'redux';
 import { IconType } from 'react-icons';
 import { BiTargetLock } from 'react-icons/bi';
 import { BsFillExclamationOctagonFill } from 'react-icons/bs';
-import { FiLayers, FiZoomIn, FiZoomOut } from 'react-icons/fi';
 import { FaCompass } from 'react-icons/fa';
 import { GiRailway } from 'react-icons/gi';
 import { isNil } from 'lodash';
@@ -15,6 +14,7 @@ import { selectLayers } from 'reducers/editor';
 import { Shortcut } from 'utils/hooks/useKeyboardShortcuts';
 import { ModalContextType } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
 import InfraSelectorModal from 'common/InfraSelector/InfraSelectorModal';
+import { GoSearch, GoStack, GoZoomIn, GoZoomOut } from 'react-icons/go';
 import { EditorState, EDITOAST_TO_LAYER_DICT, EditoastType } from './tools/types';
 import LayersModal from './components/LayersModal';
 import { SelectionState } from './tools/selection/types';
@@ -52,6 +52,7 @@ export interface NavButton {
       setViewport: (newViewport: Partial<Viewport>) => void;
       openModal: ModalContextType['openModal'];
       closeModal: ModalContextType['closeModal'];
+      setIsSearchToolOpened: React.Dispatch<React.SetStateAction<boolean>>;
       mapRef: MapRef;
     },
     toolContext: {
@@ -65,9 +66,17 @@ export interface NavButton {
 
 const NavButtons: NavButton[][] = [
   [
+    {
+      id: 'search',
+      icon: GoSearch,
+      labelTranslationKey: 'common.search',
+      onClick({ setIsSearchToolOpened }) {
+        setIsSearchToolOpened((state) => !state);
+      },
+    },
     {
       id: 'zoom-in',
-      icon: FiZoomIn,
+      icon: GoZoomIn,
       labelTranslationKey: 'common.zoom-in',
       onClick({ setViewport, viewport }) {
         setViewport({
@@ -78,7 +87,7 @@ const NavButtons: NavButton[][] = [
     },
     {
       id: 'zoom-out',
-      icon: FiZoomOut,
+      icon: GoZoomOut,
       labelTranslationKey: 'common.zoom-out',
       onClick({ setViewport, viewport }) {
         setViewport({
@@ -114,7 +123,7 @@ const NavButtons: NavButton[][] = [
   [
     {
       id: 'layers',
-      icon: FiLayers,
+      icon: GoStack,
       labelTranslationKey: 'Editor.nav.toggle-layers',
       shortcut: { code: 'KeyL', optionalKeys: { ctrlKey: true, shiftKey: true } },
       onClick({ openModal, editorState }, { activeTool, toolState, setToolState }) {