fix: remove envbanner on unmount

Author: maximeperrault

frontend/src/components/BannerStack/EnvBannerStack.ts

@@ -0,0 +1,20 @@
+import { Level } from '@mtes-mct/monitor-ui'
+
+import type { Environment } from '../../types'
+
+const environment = import.meta.env.FRONTEND_SENTRY_ENV as Environment
+const version = import.meta.env.FRONTEND_MONITORENV_VERSION
+
+export namespace EnvBannerStack {
+  const message = `Vous êtes sur l'environnement ${
+    environment === 'integration' ? "d'intégration" : 'de pré-production'
+  } - Version : ${version}`
+
+  export const Props = {
+    children: message,
+    isClosable: false,
+    isCollapsible: true,
+    isFixed: true,
+    level: Level.WARNING
+  }
+}

frontend/src/features/SideWindow/index.tsx

@@ -1,3 +1,4 @@
+import { EnvBannerStack } from '@components/BannerStack/EnvBannerStack'
 import { DashboardForms } from '@features/Dashboard/components/DashboardForm'
 import { DashboardsList } from '@features/Dashboard/components/DashboardsList'
 import { DashboardsNavBar } from '@features/Dashboard/components/DashboardsNavBar'
@@ -12,17 +13,16 @@ import { reportingActions } from '@features/Reportings/slice'
 import { VigilancesAreasList } from '@features/VigilanceArea/components/VigilanceAreasList'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
-import { Icon, NewWindowContext, SideMenu, type NewWindowContextValue } from '@mtes-mct/monitor-ui'
+import { Icon, NewWindowContext, type NewWindowContextValue, SideMenu } from '@mtes-mct/monitor-ui'
 import {
   isDashboardPage,
   isDashboardsPage,
   isMissionOrMissionsPage,
   isMissionPage,
   isReportingsPage
 } from '@utils/routes'
-import { shouldDisplayEnvBanner } from '@utils/shouldDisplayEnvBanner'
 import { omit } from 'lodash'
-import { useEffect, useMemo, useRef, useState, type MutableRefObject } from 'react'
+import { type MutableRefObject, useEffect, useMemo, useRef, useState } from 'react'
 import { generatePath } from 'react-router'
 import { StyleSheetManager } from 'styled-components'
 
@@ -47,7 +47,6 @@ export function SideWindow() {
   const dispatch = useAppDispatch()
   const wrapperRef = useRef<HTMLDivElement | null>(null)
   const currentPath = useAppSelector(state => state.sideWindow.currentPath)
-  const bannerStack = useAppSelector(state => state.sideWindow.bannerStack)
 
   const [isMounted, setIsMounted] = useState(false)
   const missionEvent = useListenMissionEventUpdates()
@@ -95,16 +94,16 @@ export function SideWindow() {
       dispatch(dashboardActions.setMapFocus(false))
       dispatch(restorePreviousDisplayedItems())
     }
+    let bannerId: number
     if (environment === 'integration' || environment === 'preprod') {
-      const bannerProps = shouldDisplayEnvBanner(bannerStack)
+      bannerId = dispatch(addSideWindowBanner(EnvBannerStack.Props))
+    }
 
-      if (!bannerProps) {
-        return
+    return () => {
+      if (bannerId) {
+        dispatch(sideWindowActions.removeBanner(bannerId))
       }
-      dispatch(addSideWindowBanner(bannerProps))
     }
-    // we want to trigger this effect only when the currentPath change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentPath, dispatch])
 
   const navigate = (nextPath: string) => {

frontend/src/pages/BackOfficePage.tsx

@@ -1,8 +1,8 @@
+import { EnvBannerStack } from '@components/BannerStack/EnvBannerStack'
 import { BannerStack } from '@features/BackOffice/components/BannerStack'
+import { backOfficeActions } from '@features/BackOffice/slice'
 import { addBackOfficeBanner } from '@features/BackOffice/useCases/addBackOfficeBanner'
 import { useAppDispatch } from '@hooks/useAppDispatch'
-import { useAppSelector } from '@hooks/useAppSelector'
-import { shouldDisplayEnvBanner } from '@utils/shouldDisplayEnvBanner'
 import { useEffect } from 'react'
 import { Route, Routes } from 'react-router'
 import styled from 'styled-components'
@@ -22,20 +22,19 @@ const environment = import.meta.env.FRONTEND_SENTRY_ENV as Environment
 
 export function BackOfficePage() {
   const dispatch = useAppDispatch()
-  const bannerStack = useAppSelector(state => state.backOffice.bannerStack)
 
   useEffect(() => {
+    let bannerId: number
     if (environment === 'integration' || environment === 'preprod') {
-      const bannerProps = shouldDisplayEnvBanner(bannerStack)
+      bannerId = dispatch(addBackOfficeBanner(EnvBannerStack.Props))
+    }
 
-      if (!bannerProps) {
-        return
+    return () => {
+      if (bannerId) {
+        dispatch(backOfficeActions.removeBanner(bannerId))
       }
-      dispatch(addBackOfficeBanner(bannerProps))
     }
-    // just want to run this once on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [dispatch])
 
   return (
     <Wrapper>

frontend/src/pages/HomePage.tsx

@@ -1,15 +1,16 @@
+import { EnvBannerStack } from '@components/BannerStack/EnvBannerStack'
 import { Menu } from '@components/Menu'
 import { MapFocusForDashboardBanner } from '@features/Dashboard/components/MapFocusForDashboardBanner'
 import { useSearchLayers } from '@features/layersSelector/search/hooks/useSearchLayers'
 import { BannerStack } from '@features/MainWindow/components/BannerStack'
+import { mainWindowActions } from '@features/MainWindow/slice'
 import { addMainWindowBanner } from '@features/MainWindow/useCases/addMainWindowBanner'
 import { AttachMissionToReportingModal } from '@features/Reportings/components/ReportingForm/AttachMission/AttachMissionToReportingModal'
 import { REPORTING_EVENT_UNSYNCHRONIZED_PROPERTIES } from '@features/Reportings/components/ReportingForm/constants'
 import { useListenReportingEventUpdates } from '@features/Reportings/components/ReportingForm/hooks/useListenReportingEventUpdates'
 import { reportingActions } from '@features/Reportings/slice'
 import { SideWindowStatus } from '@features/SideWindow/slice'
 import { useAppDispatch } from '@hooks/useAppDispatch'
-import { shouldDisplayEnvBanner } from '@utils/shouldDisplayEnvBanner'
 import { omit } from 'lodash'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useBeforeUnload } from 'react-router'
@@ -34,7 +35,6 @@ const environment = import.meta.env.FRONTEND_SENTRY_ENV as Environment
 
 export function HomePage() {
   const dispatch = useAppDispatch()
-  const bannerStack = useAppSelector(state => state.mainWindow.bannerStack)
 
   const isSuperUser = useAppSelector(state => state.account.isSuperUser)
   const sideWindowStatus = useAppSelector(state => state.sideWindow.status)
@@ -96,17 +96,17 @@ export function HomePage() {
   }, [dispatch, reportingEvent])
 
   useEffect(() => {
+    let bannerId: number
     if (environment === 'integration' || environment === 'preprod') {
-      const bannerProps = shouldDisplayEnvBanner(bannerStack)
+      bannerId = dispatch(addMainWindowBanner(EnvBannerStack.Props))
+    }
 
-      if (!bannerProps) {
-        return
+    return () => {
+      if (bannerId) {
+        dispatch(mainWindowActions.removeBanner(bannerId))
       }
-      dispatch(addMainWindowBanner(bannerProps))
     }
-    // just want to run this once on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [dispatch])
 
   useSearchLayers()