[Fixes] Amélioration de l'affichage des sémaphores, du menu latéral e…

…t du statut de mission en cas de réouverture (#619)

- Resolve #465
- Resolve #528
- Resolve #587

(Traitement des retours en bas de ticket suite à la review en intégration)

frontend/package.json

@@ -33,7 +33,7 @@
   "dependencies": {
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/modifiers": "^4.0.0",
-    "@mtes-mct/monitor-ui": "7.3.1",
+    "@mtes-mct/monitor-ui": "7.4.2",
     "@reduxjs/toolkit": "1.9.5",
     "@sentry/browser": "7.47.0",
     "@sentry/react": "7.56.0",

frontend/src/App.tsx

@@ -6,7 +6,7 @@ import { PersistGate } from 'redux-persist/integration/react'
 import { CustomProvider } from 'rsuite'
 
 import { AlertUnsupportedBrowser } from './components/AlertUnsupportedBrowser'
-import { ErrorToastNotification } from './components/ErrorToastNotification'
+import { ToastNotification } from './components/ToastNotification'
 import { SideWindow } from './features/SideWindow'
 import { HomePage } from './pages/HomePage'
 import { homeStore } from './store'
@@ -33,7 +33,7 @@ export function App() {
               </Routes>
             </Router>
 
-            <ErrorToastNotification />
+            <ToastNotification />
           </PersistGate>
         </Provider>
       </CustomProvider>

frontend/src/components/ToastNotification.tsx

@@ -0,0 +1,59 @@
+import { useEffect } from 'react'
+import { toast as toastifyToast } from 'react-toastify'
+
+import { ErrorType } from '../domain/entities/errors'
+import { useAppSelector } from '../hooks/useAppSelector'
+
+import type { ToastOptions } from 'react-toastify'
+
+const DEFAULT_TOAST_TYPE = 'error'
+
+const DEFAULT_TOAST_OPTIONS: ToastOptions = {
+  autoClose: 3000,
+  containerId: 'default',
+  position: 'bottom-right'
+}
+
+// todo use monitor-ui component
+export function ToastNotification() {
+  const { toast } = useAppSelector(state => state.global)
+
+  useEffect(() => {
+    if (toast) {
+      const TOAST_OPTIONS = toast.containerId
+        ? { ...DEFAULT_TOAST_OPTIONS, containerId: toast.containerId }
+        : DEFAULT_TOAST_OPTIONS
+
+      if (toast.type && toast.type === ErrorType.INFO_AND_HIDDEN) {
+        return
+      }
+      const toastMessage = toast.message
+
+      if (toastMessage instanceof Error) {
+        toastifyToast.error(toastMessage.message, TOAST_OPTIONS)
+
+        return
+      }
+
+      const type = toast.type || DEFAULT_TOAST_TYPE
+
+      switch (type) {
+        case ErrorType.INFO:
+          toastifyToast.info(toastMessage, TOAST_OPTIONS)
+          break
+        case ErrorType.SUCCESS:
+          toastifyToast.success(toastMessage, TOAST_OPTIONS)
+          break
+        case ErrorType.WARNING:
+          toastifyToast.warn(toastMessage, TOAST_OPTIONS)
+          break
+        case ErrorType.ERROR:
+        default:
+          toastifyToast.error(toastMessage, TOAST_OPTIONS)
+          break
+      }
+    }
+  }, [toast])
+
+  return null
+}

frontend/src/domain/entities/errors.ts

@@ -1,5 +1,7 @@
 export enum ErrorType {
+  ERROR = 'error',
   INFO = 'info',
   INFO_AND_HIDDEN = 'hidden',
+  SUCCESS = 'success',
   WARNING = 'warning'
 }

frontend/src/domain/shared_slices/Global.ts

@@ -4,6 +4,11 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 import type { MapToolType } from '../entities/map/constants'
 
+type Toast = {
+  message: any
+  type?: string
+  containerId?: string
+}
 type GlobalStateType = {
   // state entry for every component /menu displayed on map whose visibility should be controlled
   displayMissionMenuButton: boolean
@@ -30,11 +35,11 @@ type GlobalStateType = {
 
   mapToolOpened: MapToolType | undefined
 
-  error: any
-
   healthcheckTextWarning?: string
 
   overlayCoordinates: [number, number] | undefined
+
+  toast: Toast | undefined
 }
 const initialState: GlobalStateType = {
   // state entry for every component /menu displayed on map whose visibility should be controlled
@@ -62,19 +67,23 @@ const initialState: GlobalStateType = {
 
   mapToolOpened: undefined,
 
-  error: null,
-
   healthcheckTextWarning: undefined,
 
-  overlayCoordinates: undefined
+  overlayCoordinates: undefined,
+
+  toast: undefined
 }
 
 const globalSlice = createSlice({
   initialState,
   name: 'global',
   reducers: {
-    removeError(state) {
-      state.error = null
+    removeToast(state) {
+      state.toast = undefined
+    },
+
+    setToast(state, action) {
+      state.toast = action.payload
     },
 
     setDisplayedItems(state, action) {
@@ -88,10 +97,6 @@ const globalSlice = createSlice({
       state.mapToolOpened = action.payload
     },
 
-    setError(state, action) {
-      state.error = action.payload
-    },
-
     /**
      * Set warning to show on application header
      * @param {Object} state
@@ -107,12 +112,12 @@ const globalSlice = createSlice({
 })
 
 export const {
-  removeError,
+  removeToast,
   setDisplayedItems,
-  setError,
   setHealthcheckTextWarning,
   setMapToolOpened,
-  setOverlayCoordinates
+  setOverlayCoordinates,
+  setToast
 } = globalSlice.actions
 
 export const globalReducer = globalSlice.reducer

frontend/src/domain/use_cases/missions/addZone.ts

@@ -44,9 +44,7 @@ const openDrawLayerModal = dispatch => {
       displayMissionsLayer: false,
       displayMissionsOverlay: false,
       displaySearchSemaphoreButton: false,
-      displaySelectedMissionLayer: false,
-      displaySemaphoreOverlay: false,
-      displaySemaphoresLayer: false
+      displaySelectedMissionLayer: false
     })
   )
 }
@@ -63,9 +61,7 @@ export const closeDrawLayerModal = dispatch => {
       displayMissionsLayer: true,
       displayMissionsOverlay: true,
       displaySearchSemaphoreButton: true,
-      displaySelectedMissionLayer: true,
-      displaySemaphoreOverlay: true,
-      displaySemaphoresLayer: true
+      displaySelectedMissionLayer: true
     })
   )
 }

frontend/src/domain/use_cases/missions/createOrEditMission.ts

@@ -1,7 +1,7 @@
 import { missionsAPI } from '../../../api/missionsAPI'
 import { sideWindowActions } from '../../../features/SideWindow/slice'
 import { sideWindowPaths } from '../../entities/sideWindow'
-import { setError } from '../../shared_slices/Global'
+import { setToast } from '../../shared_slices/Global'
 
 export const createOrEditMission =
   (values, redirect = true) =>
@@ -18,8 +18,6 @@ export const createOrEditMission =
         }
       })
       .catch(error => {
-        // eslint-disable-next-line no-param-reassign
-        error.containerId = 'sideWindow'
-        dispatch(setError(error))
+        dispatch(setToast({ containerId: 'sideWindow', message: error }))
       })
   }

frontend/src/domain/use_cases/missions/deleteMission.ts

@@ -1,15 +1,19 @@
 import { missionsAPI } from '../../../api/missionsAPI'
 import { sideWindowActions } from '../../../features/SideWindow/slice'
 import { sideWindowPaths } from '../../entities/sideWindow'
-import { setError } from '../../shared_slices/Global'
+import { setToast } from '../../shared_slices/Global'
 
 export const deleteMissionAndGoToMissionsList = id => (dispatch, getState) => {
   const { sideWindow } = getState()
-  dispatch(missionsAPI.endpoints.deleteMission.initiate({ id })).then(response => {
-    if ('error' in response) {
-      dispatch(setError(response.error))
-    } else {
-      dispatch(sideWindowActions.focusAndGoTo(sideWindow.nextPath || sideWindowPaths.MISSIONS))
-    }
-  })
+  dispatch(missionsAPI.endpoints.deleteMission.initiate({ id }))
+    .then(response => {
+      if ('error' in response) {
+        throw Error('Erreur à la suppression de la mission')
+      } else {
+        dispatch(sideWindowActions.focusAndGoTo(sideWindow.nextPath || sideWindowPaths.MISSIONS))
+      }
+    })
+    .catch(error => {
+      dispatch(setToast({ containerId: 'sideWindow', message: error }))
+    })
 }

frontend/src/domain/use_cases/regulatory/loadRegulatoryData.js

@@ -1,11 +1,12 @@
 import { getAllRegulatoryLayersFromAPI } from '../../../api/regulatoryLayersAPI'
-import { setError } from '../../shared_slices/Global'
+import { setToast } from '../../shared_slices/Global'
 import { setRegulatoryLayers } from '../../shared_slices/Regulatory'
 
 export const loadRegulatoryData = () => async dispatch =>
   getAllRegulatoryLayersFromAPI()
     .then(features => dispatch(setRegulatoryLayers(features)))
     .catch(error => {
+      // eslint-disable-next-line no-console
       console.error(error)
-      dispatch(setError(error))
+      dispatch(setToast({ message: error }))
     })

frontend/src/features/map/layers/Semaphores/index.ts

@@ -19,6 +19,7 @@ export function SemaphoresLayer({ map, mapClickEvent }: MapChildrenProps) {
   const { displaySemaphoresLayer } = useAppSelector(state => state.global)
   const { selectedSemaphoreId } = useAppSelector(state => state.semaphoresSlice)
   const { overlayCoordinates } = useAppSelector(state => state.global)
+  const listener = useAppSelector(state => state.draw.listener)
 
   const { data: semaphores } = useGetSemaphoresQuery()
 
@@ -79,8 +80,10 @@ export function SemaphoresLayer({ map, mapClickEvent }: MapChildrenProps) {
   }, [semaphoresPoint])
 
   useEffect(() => {
-    GetVectorLayer()?.setVisible(displaySemaphoresLayer)
-  }, [displaySemaphoresLayer, GetVectorLayer])
+    // we don't want to display semaphores on the map if the user so decides (displaySemaphoresLayer variable)
+    // or if user edits a surveillance zone or a control point (listener variable)
+    GetVectorLayer()?.setVisible(displaySemaphoresLayer && !listener)
+  }, [displaySemaphoresLayer, GetVectorLayer, listener])
 
   useEffect(() => {
     if (mapClickEvent?.feature) {