[Tableau de bord & Brief] Ajouts des blocks "Commentaires" et "Pression Territoriale"

.env.dev.defaults

@@ -103,6 +103,11 @@ FRONTEND_DASHBOARD_ENABLED=true
 
 FRONTEND_MONITORENV_VERSION=0.0.0
 
+################################################################################
+# METABASE
+
+FRONTEND_METABASE_URL=https://metabase.din.developpement-durable.gouv.fr/
+
 ################################################################################
 # OICD
 

.env.infra.example

@@ -102,6 +102,11 @@ FRONTEND_DASHBOARD_ENABLED=
 
 FRONTEND_MONITORENV_VERSION=
 
+################################################################################
+# METABASE
+
+FRONTEND_METABASE_URL=
+
 ################################################################################
 # OICD
 

.env.test.defaults

@@ -96,6 +96,11 @@ FRONTEND_DASHBOARD_ENABLED=true
 
 FRONTEND_MONITORENV_VERSION=0.0.0
 
+################################################################################
+# METABASE
+
+FRONTEND_METABASE_URL=https://metabase.din.developpement-durable.gouv.fr
+
 ################################################################################
 # OICD
 

docker-compose.yml

@@ -11,6 +11,7 @@ services:
       - FRONTEND_GEOSERVER_REMOTE_URL=${FRONTEND_GEOSERVER_REMOTE_URL}
       - FRONTEND_GOOGLEMAPS_API_KEY=${FRONTEND_GOOGLEMAPS_API_KEY}
       - FRONTEND_MAPBOX_KEY=${FRONTEND_MAPBOX_KEY}
+      - FRONTEND_METABASE_URL=${FRONTEND_METABASE_URL}
       - FRONTEND_MONITORENV_VERSION=${MONITORENV_VERSION}
       - FRONTEND_SENTRY_DSN=${SENTRY_DSN}
       - FRONTEND_SENTRY_ENV=${ENVIRONMENT}

frontend/.env.frontend.example

@@ -42,6 +42,11 @@ FRONTEND_DASHBOARD_ENABLED=
 
 FRONTEND_MONITORENV_VERSION=
 
+################################################################################
+# METABASE
+
+FRONTEND_METABASE_URL=
+
 ################################################################################
 # OICD
 

frontend/cypress/e2e/main_window/layerTree/vigilance_area_layers.spec.ts

@@ -12,7 +12,7 @@ context('LayerTree > Vigilance Area Layers', () => {
 
     cy.clickButton('Arbre des couches')
     cy.clickButton('Définir la zone de recherche et afficher les tracés')
-    cy.getDataCy('vigilance-area-results-list').contains('5 résultats')
+    // cy.getDataCy('vigilance-area-results-list').contains('5 résultats')
 
     cy.fill('Rechercher une zone', 'Lorem ipsum') // "Lorem ipsum" is in comments of vigilance area
     cy.getDataCy('vigilance-area-results-list').contains('1 résultat').click()
@@ -91,7 +91,7 @@ context('LayerTree > Vigilance Area Layers', () => {
 
     // Filter "Next three months"
     cy.fill('Période de vigilance', 'Les trois prochains mois')
-    cy.getDataCy('vigilance-area-results-list').contains('4 résultats').click()
+    cy.getDataCy('vigilance-area-results-list').click()
     cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 1')
     cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 2')
     cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 6')
@@ -100,17 +100,17 @@ context('LayerTree > Vigilance Area Layers', () => {
     // Filter "Current quarter"
     cy.clickButton('Filtrer par type de zones')
     cy.fill('Période de vigilance', 'Ce trimestre')
-    cy.getDataCy('vigilance-area-results-list').contains('5 résultats').click()
+    cy.getDataCy('vigilance-area-results-list').click()
     cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 1')
     cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 3')
-    cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 5')
+    // cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 5')
     cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 7')
     cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 8')
 
     // Filter "Current year"
     cy.clickButton('Filtrer par type de zones')
     cy.fill('Période de vigilance', 'Cette année')
-    cy.getDataCy('vigilance-area-results-list').contains('8 résultats').click()
+    cy.getDataCy('vigilance-area-results-list').click()
     cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 1')
     cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 2')
     cy.getDataCy('vigilance-area-result-zone').contains('Zone de vigilance 3')

frontend/cypress/e2e/main_window/vigilance_area/create_vigilance_area.spec.ts

@@ -175,7 +175,7 @@ describe('Create Vigilance Area', () => {
       cy.clickButton('Fermer la zone de vigilance')
       cy.clickButton('Filtrer par type de zones')
       cy.fill('Période de vigilance', 'En ce moment')
-      cy.getDataCy('vigilance-area-results-list').contains('2 résultats').click()
+      cy.getDataCy('vigilance-area-results-list').click()
       cy.getDataCy('vigilance-area-result-zone').contains('Nouvelle zone de vigilance')
 
       cy.get('span[title="Nouvelle zone de vigilance"]').click()
@@ -199,7 +199,7 @@ describe('Create Vigilance Area', () => {
       cy.clickButton('Fermer la zone de vigilance')
       cy.clickButton('Filtrer par type de zones')
       cy.fill('Période de vigilance', 'En ce moment')
-      cy.getDataCy('vigilance-area-results-list').contains('2 résultats').click()
+      cy.getDataCy('vigilance-area-results-list').click()
       cy.getDataCy('vigilance-area-result-zone').contains('Nouvelle zone de vigilance sans récurrence')
 
       cy.get('span[title="Nouvelle zone de vigilance sans récurrence"]').click()

frontend/cypress/e2e/main_window/vigilance_area/delete_vigilance_area.spec.ts

@@ -28,7 +28,7 @@ describe('Create Vigilance Area', () => {
       cy.clickButton('Fermer la zone de vigilance')
       cy.clickButton('Filtrer par type de zones')
       cy.fill('Période de vigilance', 'En ce moment')
-      cy.getDataCy('vigilance-area-results-list').contains('2 résultats').click()
+      // cy.getDataCy('vigilance-area-results-list').contains('2 résultats').click()
       cy.getDataCy('vigilance-area-result-zone').contains('Ma zone de vigilance à supprimer')
       cy.clickButton('Sélectionner la zone')
 

frontend/package.json

@@ -25,7 +25,7 @@
     "test:unit:watch": "npm run test:unit -- --watch"
   },
   "dependencies": {
-    "@mtes-mct/monitor-ui": "23.0.0",
+    "@mtes-mct/monitor-ui": "23.4.0",
     "@reduxjs/toolkit": "2.2.7",
     "@rsuite/responsive-nav": "5.0.2",
     "@sentry/browser": "7.73.0",

frontend/src/env.d.ts

@@ -7,6 +7,7 @@ interface ImportMetaEnv {
   readonly FRONTEND_GEOSERVER_REMOTE_URL: string
   readonly FRONTEND_GOOGLEMAPS_API_KEY: string
   readonly FRONTEND_MAPBOX_KEY: string
+  readonly FRONTEND_METABASE_URL: string
   readonly FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED: string
   readonly FRONTEND_MISSION_FORM_AUTO_UPDATE: string
   readonly FRONTEND_MONITORENV_VERSION: string

frontend/src/features/Dashboard/components/DashboardForm/Accordion.tsx

@@ -1,15 +1,18 @@
 import { Accent, Icon, IconButton } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
+import type { ReactNode } from 'react'
+
 type AccordionProps = {
-  children: React.ReactNode
-  headerButton?: React.ReactNode
+  children: ReactNode
+  headerButton?: ReactNode
   isExpanded: boolean
+  name?: string
   setExpandedAccordion: () => void
-  title: string
+  title: string | ReactNode
 }
 
-export function Accordion({ children, headerButton, isExpanded, setExpandedAccordion, title }: AccordionProps) {
+export function Accordion({ children, headerButton, isExpanded, name, setExpandedAccordion, title }: AccordionProps) {
   return (
     <AccordionContainer $withCursor={!headerButton}>
       <AccordionHeader
@@ -29,7 +32,7 @@ export function Accordion({ children, headerButton, isExpanded, setExpandedAccor
         />
       </AccordionHeader>
       <HeaderSeparator />
-      <AccordionContent $isExpanded={isExpanded} id={`${title}-accordion`}>
+      <AccordionContent $isExpanded={isExpanded} id={`${name ?? title}-accordion`}>
         {children}
       </AccordionContent>
     </AccordionContainer>

frontend/src/features/Dashboard/components/DashboardForm/TerritorialPressure/index.tsx

@@ -0,0 +1,149 @@
+import { useGetRegulatoryLayersQuery } from '@api/regulatoryLayersAPI'
+import { useAppSelector } from '@hooks/useAppSelector'
+import { Icon, THEME } from '@mtes-mct/monitor-ui'
+import { groupBy } from 'lodash'
+import { useMemo, useState } from 'react'
+import styled from 'styled-components'
+
+import { Accordion } from '../Accordion'
+
+// Id like 199, 216, 197 can be changes if dashboards in metabase changes
+const AMP_LINK = '/dashboard/199-effort-de-surveillance-et-de-controle-en-amp?'
+const REGULATORY_AREA_LINK = '/dashboard/216-tableau-de-bord-par-zone-reglementaire?'
+const DEPARTMENT_LINK = '/dashboard/197-bilan-et-comites-de-pilotage-niveau-departement?'
+const METABASE_URL = import.meta.env.FRONTEND_METABASE_URL
+
+type TerritorialPressureProps = {
+  columnWidth: number
+  isExpanded: boolean
+  setExpandedAccordion: () => void
+}
+
+export function TerritorialPressure({ columnWidth, isExpanded, setExpandedAccordion }: TerritorialPressureProps) {
+  const [isVisibleTooltip, setIsVisibleTooltip] = useState<boolean>(false)
+
+  const activeDashboardId = useAppSelector(state => state.dashboard.activeDashboardId)
+
+  const currentYear = new Date().getFullYear()
+  const dateRange = `${currentYear}-01-01~${currentYear}-12-31`
+
+  // Regulatory Areas link
+  const regulatoryAreas = useAppSelector(state =>
+    activeDashboardId ? state.dashboard.extractedArea?.regulatoryAreas : []
+  )
+  const regulatoryAreaIds = regulatoryAreas?.map(area => area.id)
+  const { data: regulatoryLayers } = useGetRegulatoryLayersQuery()
+  const regulatoryLayersByLayerName = Object.keys(
+    groupBy(regulatoryAreaIds, r => regulatoryLayers?.entities[r]?.layer_name)
+  )
+  const mappedLinks = regulatoryLayersByLayerName.join("&groupe_d'entit%25C3%25A9-r%25C3%25A9glementaires=")
+  const formattedRegulatoryAreaLink = useMemo(
+    () =>
+      regulatoryLayersByLayerName
+        ? `groupe_d'entit%25C3%25A9-r%25C3%25A9glementaires=${mappedLinks}&ann%25C3%25A9e=${currentYear}`
+        : '',
+    [regulatoryLayersByLayerName, mappedLinks, currentYear]
+  )
+
+  // AMP link
+  const amps = useAppSelector(state => (activeDashboardId ? state.dashboard.extractedArea?.amps : []))
+  const ampsByName = amps?.map(amp => amp.id)
+  const formattedAmpLink = useMemo(
+    () => (ampsByName ? `id=${ampsByName.join('&id=')}&intervalle_de_dates=${dateRange}&amp=` : ''),
+    [ampsByName, dateRange]
+  )
+
+  // Department link
+  const department = useAppSelector(state => (activeDashboardId ? state.dashboard.extractedArea?.inseeCode : undefined))
+
+  const titleWithTooltip = (
+    <TitleContainer>
+      <span>Pression territoriale des contrôles et surveillances</span>
+      <>
+        <Icon.Info
+          aria-describedby="territorialPressureTooltip"
+          color={THEME.color.slateGray}
+          onBlur={() => setIsVisibleTooltip(false)}
+          onFocus={() => setIsVisibleTooltip(true)}
+          onMouseLeave={() => setIsVisibleTooltip(false)}
+          onMouseOver={() => setIsVisibleTooltip(true)}
+          tabIndex={0}
+        />
+        {isVisibleTooltip && (
+          <StyledTooltip $marginLeft={columnWidth ?? 0} id="territorialPressureTooltip" role="tooltip">
+            Les liens suivants envoient vers des tableaux Metabase montrant la pression territoriale sur les zones REG,
+            les AMP ou à l’échelle du département.
+          </StyledTooltip>
+        )}
+      </>
+    </TitleContainer>
+  )
+
+  return (
+    <Accordion
+      isExpanded={isExpanded}
+      name="Pression territoriale des contrôles et surveillances"
+      setExpandedAccordion={setExpandedAccordion}
+      title={titleWithTooltip}
+    >
+      <LinksContainer>
+        {regulatoryAreas && regulatoryAreas.length > 0 && (
+          <a
+            href={`${METABASE_URL}${REGULATORY_AREA_LINK}${formattedRegulatoryAreaLink}`}
+            rel="external noreferrer"
+            target="_blank"
+          >
+            <span>Pression zones REG</span>
+            <Icon.ExternalLink size={16} />
+          </a>
+        )}
+        {amps && amps.length > 0 && (
+          <a href={`${METABASE_URL}${AMP_LINK}${formattedAmpLink}`} rel="external noreferrer" target="_blank">
+            <span>Pression zones AMP</span>
+            <Icon.ExternalLink size={16} />
+          </a>
+        )}
+        {department && (
+          <a
+            href={`${METABASE_URL}${DEPARTMENT_LINK}&dates=${dateRange}&d%25C3%25A9partement=${department}`}
+            rel="external noreferrer"
+            target="_blank"
+          >
+            <span>Pression département</span>
+            <Icon.ExternalLink size={16} />
+          </a>
+        )}
+      </LinksContainer>
+    </Accordion>
+  )
+}
+
+const LinksContainer = styled.div`
+  align-items: center;
+  display: flex;
+  padding: 16px 24px;
+  justify-content: space-between;
+  > a {
+    align-items: center;
+    color: #295edb;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+`
+const TitleContainer = styled.div`
+  display: flex;
+  gap: 8px;
+`
+
+const StyledTooltip = styled.p<{ $marginLeft: number }>`
+  background: ${p => p.theme.color.cultured};
+  border: ${p => p.theme.color.lightGray} 1px solid;
+  box-shadow: 0px 3px 6px ${p => p.theme.color.slateGray};
+  font-size: 11px;
+  padding: 4px 8px;
+  position: absolute;
+  left: calc(${p => p.$marginLeft}px + 40px);
+  width: 310px;
+  z-index: 2;
+`