feat: do not link active dashboard to displaying all dashboard

frontend/src/domain/shared_slices/Global.ts

@@ -32,111 +32,109 @@ type OverlayCoordinates = {
   name: string
 }
 
-/* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
 type GlobalStateType = {
+  healthcheckTextWarning?: string
+  layers: {
+    displayDashboardLayer: boolean
+    displayInterestPointLayer: boolean
+    displayMissionEditingLayer: boolean
+    displayMissionSelectedLayer: boolean
+    displayMissionToAttachLayer: boolean
+    displayMissionsLayer: boolean
+    displayReportingEditingLayer: boolean
+    displayReportingSelectedLayer: boolean
+
+    displayReportingToAttachLayer: boolean
+    displayReportingsLayer: boolean
+    displayReportingsOverlay: boolean
+    displaySemaphoresLayer: boolean
+
+    displayStationLayer: boolean
+    displayVigilanceAreaLayer: boolean
+    isLayersSidebarVisible: boolean
+  }
   menus: {
     displayAccountButton: boolean
-    displayMissionMenuButton: boolean
+    displayDashboard: boolean
     displayDrawModal: boolean
+    displayInterestPoint: boolean
     displayLayersSidebar: boolean
     displayLocateOnMap: boolean
     displayMeasurement: boolean
-    displayInterestPoint: boolean
-    displayDashboard: boolean
-    displaySearchSemaphoreButton: boolean
+    displayMissionMenuButton: boolean
     displayReportingsButton: boolean
     displayRightMenuControlUnitListButton: boolean
+    displaySearchSemaphoreButton: boolean
   }
+  openedOverlayId?: string
+  overlayCoordinates: OverlayCoordinates[]
+  previousDisplayedItems: Record<string, any>
+  toast?: Toast
   visibility: {
-    isDashboardDialogVisible: boolean
-    isSearchMissionsVisible: boolean
-    isLayersSidebarVisible: boolean
     isAccountDialogVisible: boolean
     isControlUnitDialogVisible: boolean
     isControlUnitListDialogVisible: boolean
-    isSearchSemaphoreVisible: boolean
+    isDashboardDialogVisible: boolean
+    isLayersSidebarVisible: boolean
+    isMapToolVisible?: MapToolType
+    isSearchMissionsVisible: boolean
     isSearchReportingsVisible: boolean
+    isSearchSemaphoreVisible: boolean
     reportingFormVisibility: ReportingFormVisibilityProps
-    isMapToolVisible?: MapToolType
   }
+}
+const initialState: GlobalStateType = {
   layers: {
-    displayMissionEditingLayer: boolean
-    displayMissionsLayer: boolean
-    displayMissionSelectedLayer: boolean
-    displayMissionToAttachLayer: boolean
-    displayInterestPointLayer: boolean
-    displayReportingToAttachLayer: boolean
-    displayVigilanceAreaLayer: boolean
-    displayDashboardLayer: boolean
+    displayDashboardLayer: false,
+    displayInterestPointLayer: true,
+    displayMissionEditingLayer: true,
+    displayMissionSelectedLayer: true,
+    displayMissionsLayer: true,
+    displayMissionToAttachLayer: true,
+    displayReportingEditingLayer: true,
+    displayReportingSelectedLayer: true,
 
-    displayReportingsLayer: boolean
-    displayReportingsOverlay: boolean
-    displayReportingEditingLayer: boolean
-    displayReportingSelectedLayer: boolean
+    displayReportingsLayer: true,
+    displayReportingsOverlay: true,
+    displayReportingToAttachLayer: true,
+    displaySemaphoresLayer: true,
 
-    displayStationLayer: boolean
-    isLayersSidebarVisible: boolean
-    displaySemaphoresLayer: boolean
-  }
-  healthcheckTextWarning?: string
-  overlayCoordinates: OverlayCoordinates[]
-  toast?: Toast
-  openedOverlayId?: string
-  previousDisplayedItems: Record<string, any>
-}
-const initialState: GlobalStateType = {
+    displayStationLayer: false,
+    displayVigilanceAreaLayer: true,
+    isLayersSidebarVisible: true
+  },
   menus: {
     displayAccountButton: true,
-    displayMissionMenuButton: true,
+    displayDashboard: true,
     displayDrawModal: false,
+    displayInterestPoint: true,
     displayLayersSidebar: true,
     displayLocateOnMap: true,
     displayMeasurement: true,
-    displayInterestPoint: true,
-    displayDashboard: true,
-    displaySearchSemaphoreButton: true,
+    displayMissionMenuButton: true,
     displayReportingsButton: true,
-    displayRightMenuControlUnitListButton: true
+    displayRightMenuControlUnitListButton: true,
+    displaySearchSemaphoreButton: true
   },
+  overlayCoordinates: [],
+
+  previousDisplayedItems: {},
+
   visibility: {
-    isDashboardDialogVisible: false,
-    isSearchMissionsVisible: false,
-    isLayersSidebarVisible: false,
     isAccountDialogVisible: false,
     isControlUnitDialogVisible: false,
     isControlUnitListDialogVisible: false,
-    isSearchSemaphoreVisible: false,
+    isDashboardDialogVisible: false,
+    isLayersSidebarVisible: false,
+    isSearchMissionsVisible: false,
     isSearchReportingsVisible: false,
+    isSearchSemaphoreVisible: false,
     reportingFormVisibility: {
       context: ReportingContext.MAP,
       visibility: VisibilityState.NONE
     }
-  },
-  layers: {
-    displayMissionEditingLayer: true,
-    displayMissionsLayer: true,
-    displayMissionSelectedLayer: true,
-    displayMissionToAttachLayer: true,
-    displayInterestPointLayer: true,
-    displayReportingToAttachLayer: true,
-    displayVigilanceAreaLayer: true,
-    displayDashboardLayer: false,
-
-    displayReportingsLayer: true,
-    displayReportingsOverlay: true,
-    displayReportingEditingLayer: true,
-    displayReportingSelectedLayer: true,
-
-    displayStationLayer: false,
-    isLayersSidebarVisible: true,
-    displaySemaphoresLayer: true
-  },
-
-  overlayCoordinates: [],
-
-  previousDisplayedItems: {}
+  }
 }
-/* eslint-enable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
 
 const globalSlice = createSlice({
   initialState,

frontend/src/features/Dashboard/components/Layers/ActiveDashboardLayer.tsx

@@ -16,16 +16,14 @@ import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import { useCallback, useEffect, useRef } from 'react'
 
-import { getDashboardStyle } from './style'
+import { dashboardIcon, getDashboardStyle } from './style'
 import { Dashboard } from '../../types'
 
 import type { BaseMapChildrenProps } from '@features/map/BaseMap'
 import type { VectorLayerWithName } from 'domain/types/layer'
 import type { Geometry } from 'ol/geom'
 
 export function ActiveDashboardLayer({ map }: BaseMapChildrenProps) {
-  const displayDashboardLayer = useAppSelector(state => state.global.layers.displayDashboardLayer)
-
   const isolatedLayer = useAppSelector(state => state.map.isolatedLayer)
 
   const activeDashboardId = useAppSelector(state => state.dashboard.activeDashboardId)
@@ -44,7 +42,7 @@ export function ActiveDashboardLayer({ map }: BaseMapChildrenProps) {
   const openPanel = dashboard?.openPanel
   const activeDashboard = dashboard?.dashboard
 
-  const isLayerVisible = displayDashboardLayer && !!dashboard
+  const isLayerVisible = !!dashboard
 
   const metadataLayerId = useAppSelector(state => state.layersMetadata.metadataLayerId)
   const drawBorder = useCallback(
@@ -177,7 +175,7 @@ export function ActiveDashboardLayer({ map }: BaseMapChildrenProps) {
         if (!dashboardAreaFeature) {
           return
         }
-        dashboardAreaFeature?.setStyle([measurementStyle, measurementStyleWithCenter])
+        dashboardAreaFeature?.setStyle([measurementStyle, measurementStyleWithCenter, dashboardIcon()])
 
         layersVectorSourceRef.current.addFeature(dashboardAreaFeature)
       }

frontend/src/features/Dashboard/components/Layers/DashboardsLayer.tsx

@@ -7,14 +7,14 @@ import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
 import { Layers } from 'domain/entities/layers/constants'
 import { convertToFeature } from 'domain/types/map'
 import { Feature } from 'ol'
-import { getCenter } from 'ol/extent'
 import { GeoJSON as OLGeoJSON } from 'ol/format'
-import { Point, type Geometry } from 'ol/geom'
+import { type Geometry } from 'ol/geom'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
-import { Icon, Style } from 'ol/style'
 import { useEffect, useRef, type MutableRefObject } from 'react'
 
+import { dashboardIcon } from './style'
+
 import type { BaseMapChildrenProps } from '@features/map/BaseMap'
 import type { VectorLayerWithName } from 'domain/types/layer'
 
@@ -80,17 +80,3 @@ export function DashboardsLayer({ map, mapClickEvent }: BaseMapChildrenProps) {
     }
   }, [dispatch, mapClickEvent])
 }
-
-const dashboardIcon = () => [
-  new Style({
-    geometry: feature => {
-      const extent = feature?.getGeometry()?.getExtent()
-      const center = extent && getCenter(extent)
-
-      return center && new Point(center)
-    },
-    image: new Icon({
-      src: 'icons/bullseye_border.svg'
-    })
-  })
-]

frontend/src/features/Dashboard/components/Layers/style.ts

@@ -3,6 +3,9 @@ import { getAMPLayerStyle } from '@features/map/layers/AMP/AMPLayers.style'
 import { getRegulatoryLayerStyle } from '@features/map/layers/styles/administrativeAndRegulatoryLayers.style'
 import { editingReportingStyleFn } from '@features/Reportings/components/ReportingLayer/Reporting/style'
 import { getVigilanceAreaLayerStyle } from '@features/VigilanceArea/components/VigilanceAreaLayer/style'
+import { getCenter } from 'ol/extent'
+import { Point } from 'ol/geom'
+import { Icon, Style } from 'ol/style'
 
 import type { FeatureLike } from 'ol/Feature'
 
@@ -31,3 +34,16 @@ export const getDashboardStyle = (feature: FeatureLike) => {
 
   return undefined
 }
+
+export const dashboardIcon = () =>
+  new Style({
+    geometry: feature => {
+      const extent = feature?.getGeometry()?.getExtent()
+      const center = extent && getCenter(extent)
+
+      return center && new Point(center)
+    },
+    image: new Icon({
+      src: 'icons/bullseye_border.svg'
+    })
+  })