[Couches REG] Zoom auto. lors de la recherche

frontend/cypress/e2e/sidebars/regulatory_layers.spec.ts

@@ -301,8 +301,13 @@ context('Sidebars > Regulatory Layers', () => {
     cy.get('*[data-cy="regulation-search-box-filter-selected"]').should('exist')
     cy.get('*[data-cy="regulatory-layer-topic"]').should('have.length', 2)
     cy.get('*[data-cy="regulatory-layer-topic"]').contains('Ouest Cotentin Bivalves')
+    cy.get('*[data-cy="regulatory-layer-topic"]').first().click()
     cy.get('*[data-cy="regulatory-layer-topic"]').contains('Armor CSJ')
 
+    cy.get('[title="Afficher la réglementation"]').click()
+    // No zoom is triggered when drawing a zone
+    cy.url().should('include', '/#@-224002.65,6302673.54,8.70')
+
     cy.get('*[data-cy="vessel-filter-remove-tag"]').eq(0).click()
     cy.get('*[data-cy="regulation-search-box-filter"]').should('exist')
     cy.get('*[data-cy="regulation-search-box-filter-selected"]').should('not.exist')

frontend/src/features/Backoffice/index.tsx

@@ -15,7 +15,7 @@ import { AdministrativeLayers } from '../AdministrativeZone/layers/Administrativ
 import { BaseLayer } from '../BaseMap/layers/BaseLayer'
 import { EmptyResult } from '../commonStyles/Text.style'
 import { BaseMap } from '../map/BaseMap'
-import { RegulatoryZoneMetadata } from '../Regulation/components/RegulatoryZones/RegulatoryZoneMetadata'
+import { RegulatoryZoneMetadata } from '../Regulation/components/RegulatoryZoneMetadata'
 import { RegulatoryLayers } from '../Regulation/layers/RegulatoryLayers'
 import { RegulatoryPreviewLayer } from '../Regulation/layers/RegulatoryPreviewLayer'
 import { setRegulatoryZoneMetadata } from '../Regulation/slice'

frontend/src/features/LayersSidebar/index.tsx → frontend/src/features/LayersSidebar/components/index.tsx

@@ -1,22 +1,22 @@
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 
-import { COLORS } from '../../constants/constants'
-import { NamespaceContext } from '../../context/NamespaceContext'
-import { LeftBoxOpened } from '../../domain/entities/global'
-import { setLeftBoxOpened } from '../../domain/shared_slices/Global'
-import { useMainAppDispatch } from '../../hooks/useMainAppDispatch'
-import { useMainAppSelector } from '../../hooks/useMainAppSelector'
-import { AdministrativeZones } from '../AdministrativeZone/components/AdministrativeZones'
-import { BaseMaps } from '../BaseMap/components/BaseMaps'
-import { MapButton } from '../commonStyles/MapButton'
-import { MapComponent } from '../commonStyles/MapComponent'
-import { CustomZones } from '../CustomZone/components/CustomZones'
-import LayersSVG from '../icons/Couches.svg?react'
-import { RegulatoryZones } from '../Regulation/components/RegulatoryZones'
-import { RegulatoryZoneMetadata } from '../Regulation/components/RegulatoryZones/RegulatoryZoneMetadata'
-import { RegulatoryLayerSearch } from '../Regulation/components/RegulatoryZones/search/RegulatoryLayerSearch'
-import { closeRegulatoryZoneMetadata } from '../Regulation/useCases/closeRegulatoryZoneMetadata'
+import { COLORS } from '../../../constants/constants'
+import { NamespaceContext } from '../../../context/NamespaceContext'
+import { LeftBoxOpened } from '../../../domain/entities/global'
+import { setLeftBoxOpened } from '../../../domain/shared_slices/Global'
+import { useMainAppDispatch } from '../../../hooks/useMainAppDispatch'
+import { useMainAppSelector } from '../../../hooks/useMainAppSelector'
+import { AdministrativeZones } from '../../AdministrativeZone/components/AdministrativeZones'
+import { BaseMaps } from '../../BaseMap/components/BaseMaps'
+import { MapButton } from '../../commonStyles/MapButton'
+import { MapComponent } from '../../commonStyles/MapComponent'
+import { CustomZones } from '../../CustomZone/components/CustomZones'
+import LayersSVG from '../../icons/Couches.svg?react'
+import { RegulationSearch } from '../../Regulation/components/RegulationSearch'
+import { RegulatoryZoneMetadata } from '../../Regulation/components/RegulatoryZoneMetadata'
+import { RegulatoryZones } from '../../Regulation/components/RegulatoryZones'
+import { closeRegulatoryZoneMetadata } from '../../Regulation/useCases/closeRegulatoryZoneMetadata'
 
 export function LayersSidebar() {
   const dispatch = useMainAppDispatch()
@@ -53,7 +53,7 @@ export function LayersSidebar() {
             isOpen={leftBoxOpened === LeftBoxOpened.REGULATIONS}
             isVisible={leftBoxOpened === LeftBoxOpened.REGULATIONS || regulatoryZoneMetadataPanelIsOpen}
           >
-            <RegulatoryLayerSearch
+            <RegulationSearch
               namespace={namespace}
               numberOfRegulatoryLayersSaved={numberOfRegulatoryLayersSaved}
               setNumberOfRegulatoryLayersSaved={setNumberOfRegulatoryLayersSaved}

frontend/src/features/MainWindow.tsx

@@ -6,7 +6,7 @@ import { ErrorToastNotification } from './commonComponents/ErrorToastNotificatio
 import { ControlUnitDialog } from './ControlUnit/components/ControlUnitDialog'
 import { ControlUnitListDialog } from './ControlUnit/components/ControlUnitListDialog'
 import { HealthcheckHeadband } from './Healthcheck/components/HealthcheckHeadband'
-import { LayersSidebar } from './LayersSidebar'
+import { LayersSidebar } from './LayersSidebar/components'
 import { DrawLayerModal } from './map/draw/DrawModal'
 import { Map } from './map/Map'
 import { MapButtons } from './MapButtons'

frontend/src/features/Regulation/components/RegulatoryZones/search/RegulatoryLayerSearchResultLawType.tsx → frontend/src/features/Regulation/components/RegulationSearch/ResultLawType.tsx

@@ -1,23 +1,20 @@
 import styled from 'styled-components'
 
-import { RegulatoryLayerSearchResultTopic } from './RegulatoryLayerSearchResultTopic'
+import { ResultTopic } from './ResultTopic'
 
-import type { RegulatoryZone } from '../../../types'
+import type { RegulatoryZone } from '../../types'
 
 export type RegulatoryLayerSearchResultLawTypeProps = {
   regulatoryLayerLawType: string
   topic: Record<string, RegulatoryZone[]>
 }
-export function RegulatoryLayerSearchResultLawType({
-  regulatoryLayerLawType,
-  topic
-}: RegulatoryLayerSearchResultLawTypeProps) {
+export function ResultLawType({ regulatoryLayerLawType, topic }: RegulatoryLayerSearchResultLawTypeProps) {
   return (
     <Wrapper>
       <LayerLawType>{regulatoryLayerLawType}</LayerLawType>
       {Object.keys(topic).length > 0 &&
         Object.entries(topic).map(([regulatoryLayerTopic, topicDetails]) => (
-          <RegulatoryLayerSearchResultTopic
+          <ResultTopic
             key={regulatoryLayerTopic}
             regulatoryLayerLawType={regulatoryLayerLawType}
             regulatoryLayerTopic={regulatoryLayerTopic}

frontend/src/features/Regulation/components/RegulatoryZones/search/RegulatoryLayerSearchResultList.tsx → frontend/src/features/Regulation/components/RegulationSearch/ResultList.tsx

@@ -2,17 +2,17 @@ import { logSoftError } from '@mtes-mct/monitor-ui'
 import { useMemo } from 'react'
 import styled from 'styled-components'
 
-import { RegulatoryLayerSearchResultLawType } from './RegulatoryLayerSearchResultLawType'
-import layer from '../../../../../domain/shared_slices/Layer'
-import { useMainAppDispatch } from '../../../../../hooks/useMainAppDispatch'
-import { useMainAppSelector } from '../../../../../hooks/useMainAppSelector'
+import { ResultLawType } from './ResultLawType'
+import layer from '../../../../domain/shared_slices/Layer'
+import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch'
+import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
 
-import type { LayerSliceNamespace } from '../../../../../domain/entities/layers/types'
+import type { LayerSliceNamespace } from '../../../../domain/entities/layers/types'
 
 export type RegulatoryLayerSearchResultListProps = {
   namespace: LayerSliceNamespace
 }
-export function RegulatoryLayerSearchResultList({ namespace }: RegulatoryLayerSearchResultListProps) {
+export function ResultList({ namespace }: RegulatoryLayerSearchResultListProps) {
   const dispatch = useMainAppDispatch()
   const { setLayersSideBarOpenedLayerType } = layer[namespace].actions
   const { advancedSearchIsOpen, regulatoryLayersSearchResult } = useMainAppSelector(
@@ -49,7 +49,7 @@ export function RegulatoryLayerSearchResultList({ namespace }: RegulatoryLayerSe
         <List $advancedSearchIsOpen={advancedSearchIsOpen}>
           {hasSearchResults && regulatoryLayersSearchResult
             ? Object.entries(regulatoryLayersSearchResult)?.map(([lawType, topic]) => (
-                <RegulatoryLayerSearchResultLawType key={lawType} regulatoryLayerLawType={lawType} topic={topic} />
+                <ResultLawType key={lawType} regulatoryLayerLawType={lawType} topic={topic} />
               ))
             : null}
         </List>

frontend/src/features/Regulation/components/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx → frontend/src/features/Regulation/components/RegulationSearch/ResultTopic.tsx

@@ -3,13 +3,13 @@ import { memo, useMemo, useState } from 'react'
 import { Checkbox, CheckboxGroup } from 'rsuite'
 import styled from 'styled-components'
 
-import { RegulatoryLayerSearchResultZones } from './RegulatoryLayerSearchResultZones'
+import { ResultZones } from './ResultZones'
 import { checkRegulatoryZones, uncheckRegulatoryZones } from './slice'
-import { COLORS } from '../../../../../constants/constants'
-import { useMainAppDispatch } from '../../../../../hooks/useMainAppDispatch'
-import { useMainAppSelector } from '../../../../../hooks/useMainAppSelector'
+import { COLORS } from '../../../../constants/constants'
+import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch'
+import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
 
-import type { RegulatoryZone } from '../../../types'
+import type { RegulatoryZone } from '../../types'
 
 export type RegulatoryLayerSearchResultTopicProps = {
   regulatoryLayerLawType?: string
@@ -139,7 +139,7 @@ function UnmemoizedRegulatoryLayerSearchResultTopic({
           ]}
         </CheckboxGroup>
       </LayerTopic>
-      <RegulatoryLayerSearchResultZones
+      <ResultZones
         regulatoryLayerLawType={regulatoryLayerLawType}
         regulatoryLayerTopic={regulatoryLayerTopic}
         zonesAreOpen={zonesAreOpen}
@@ -194,4 +194,4 @@ const LayerTopic = styled.div`
   }
 `
 
-export const RegulatoryLayerSearchResultTopic = memo(UnmemoizedRegulatoryLayerSearchResultTopic)
+export const ResultTopic = memo(UnmemoizedRegulatoryLayerSearchResultTopic)

frontend/src/features/Regulation/components/RegulatoryZones/search/RegulatoryLayerSearchResultZone.tsx → frontend/src/features/Regulation/components/RegulationSearch/ResultZone.tsx

@@ -3,21 +3,21 @@ import { Checkbox, CheckboxGroup } from 'rsuite'
 import styled, { css } from 'styled-components'
 
 import { checkRegulatoryZones, uncheckRegulatoryZones } from './slice'
-import { useMainAppDispatch } from '../../../../../hooks/useMainAppDispatch'
-import { useMainAppSelector } from '../../../../../hooks/useMainAppSelector'
-import { PaperDarkIcon, PaperIcon } from '../../../../commonStyles/icons/REGPaperIcon.style'
-import { getRegulatoryLayerStyle } from '../../../layers/styles/regulatoryLayer.style'
-import { closeRegulatoryZoneMetadata } from '../../../useCases/closeRegulatoryZoneMetadata'
-import { showRegulatoryZoneMetadata } from '../../../useCases/showRegulatoryZoneMetadata'
-import { showOrHideMetadataIcon } from '../RegulatoryZone'
+import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch'
+import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
+import { PaperDarkIcon, PaperIcon } from '../../../commonStyles/icons/REGPaperIcon.style'
+import { getRegulatoryLayerStyle } from '../../layers/styles/regulatoryLayer.style'
+import { closeRegulatoryZoneMetadata } from '../../useCases/closeRegulatoryZoneMetadata'
+import { showRegulatoryZoneMetadata } from '../../useCases/showRegulatoryZoneMetadata'
+import { showOrHideMetadataIcon } from '../RegulatoryZones/RegulatoryZone'
 
-import type { RegulatoryZone } from '../../../types'
+import type { RegulatoryZone } from '../../types'
 
 export type RegulatoryLayerSearchResultZoneProps = {
   isOpen: boolean
   regulatoryZone: RegulatoryZone
 }
-export function RegulatoryLayerSearchResultZone({ isOpen, regulatoryZone }: RegulatoryLayerSearchResultZoneProps) {
+export function ResultZone({ isOpen, regulatoryZone }: RegulatoryLayerSearchResultZoneProps) {
   const dispatch = useMainAppDispatch()
 
   const { regulatoryZoneMetadata } = useMainAppSelector(state => state.regulatory)

frontend/src/features/Regulation/components/RegulatoryZones/search/RegulatoryLayerSearchResultZones.tsx → frontend/src/features/Regulation/components/RegulationSearch/ResultZones.tsx

@@ -1,15 +1,15 @@
 import { useCallback } from 'react'
 import styled from 'styled-components'
 
-import { RegulatoryLayerSearchResultZone } from './RegulatoryLayerSearchResultZone'
-import { useMainAppSelector } from '../../../../../hooks/useMainAppSelector'
+import { ResultZone } from './ResultZone'
+import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
 
 export type RegulatoryLayerSearchResultZonesProps = {
   regulatoryLayerLawType: any
   regulatoryLayerTopic: any
   zonesAreOpen: any
 }
-export function RegulatoryLayerSearchResultZones({
+export function ResultZones({
   regulatoryLayerLawType,
   regulatoryLayerTopic,
   zonesAreOpen
@@ -31,11 +31,7 @@ export function RegulatoryLayerSearchResultZones({
   return (
     <RegulatoryZones $isOpen={zonesAreOpen} $length={getRegulatoryZones().length}>
       {getRegulatoryZones().map(regulatoryZone => (
-        <RegulatoryLayerSearchResultZone
-          key={regulatoryZone.id}
-          isOpen={zonesAreOpen}
-          regulatoryZone={regulatoryZone}
-        />
+        <ResultZone key={regulatoryZone.id} isOpen={zonesAreOpen} regulatoryZone={regulatoryZone} />
       ))}
     </RegulatoryZones>
   )

frontend/src/features/Regulation/components/RegulatoryZones/search/RegulatoryLayerSearchInput.tsx → frontend/src/features/Regulation/components/RegulationSearch/SearchInput.tsx

@@ -9,26 +9,26 @@ import {
   setRegulatoryLayersSearchResult,
   setZoneSelected
 } from './slice'
-import { LayerType as LayersType } from '../../../../../domain/entities/layers/constants'
-import { InteractionListener, InteractionType } from '../../../../../domain/entities/map/constants'
-import { resetInteraction, setInteractionTypeAndListener } from '../../../../../domain/shared_slices/Draw'
-import { useListenForDrawedGeometry } from '../../../../../hooks/useListenForDrawing'
-import { useMainAppDispatch } from '../../../../../hooks/useMainAppDispatch'
-import { useMainAppSelector } from '../../../../../hooks/useMainAppSelector'
-import { theme } from '../../../../../ui/theme'
-import CloseIconSVG from '../../../../icons/Croix_grise.svg?react'
-import PolygonFilterSVG from '../../../../icons/Filtre_zone_polygone.svg?react'
-import PolygonFilterSelectedSVG from '../../../../icons/Filtre_zone_polygone_selected.svg?react'
-import BoxFilterSVG from '../../../../icons/Filtre_zone_rectangle.svg?react'
-import BoxFilterSelectedSVG from '../../../../icons/Filtre_zone_rectangle_selected.svg?react'
-import SearchIconSVG from '../../../../icons/Loupe_dark.svg?react'
-import FilterTag from '../../../../MapButtons/VesselFilters/FilterTag'
-import { closeRegulatoryZoneMetadataPanel } from '../../../slice'
-import { MINIMUM_SEARCH_CHARACTERS_NUMBER, searchRegulatoryLayers } from '../../../useCases/searchRegulatoryLayers'
+import { LayerType as LayersType } from '../../../../domain/entities/layers/constants'
+import { InteractionListener, InteractionType } from '../../../../domain/entities/map/constants'
+import { resetInteraction, setInteractionTypeAndListener } from '../../../../domain/shared_slices/Draw'
+import { useListenForDrawedGeometry } from '../../../../hooks/useListenForDrawing'
+import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch'
+import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
+import { theme } from '../../../../ui/theme'
+import CloseIconSVG from '../../../icons/Croix_grise.svg?react'
+import PolygonFilterSVG from '../../../icons/Filtre_zone_polygone.svg?react'
+import PolygonFilterSelectedSVG from '../../../icons/Filtre_zone_polygone_selected.svg?react'
+import BoxFilterSVG from '../../../icons/Filtre_zone_rectangle.svg?react'
+import BoxFilterSelectedSVG from '../../../icons/Filtre_zone_rectangle_selected.svg?react'
+import SearchIconSVG from '../../../icons/Loupe_dark.svg?react'
+import FilterTag from '../../../MapButtons/VesselFilters/FilterTag'
+import { closeRegulatoryZoneMetadataPanel } from '../../slice'
+import { MINIMUM_SEARCH_CHARACTERS_NUMBER, searchRegulatoryLayers } from '../../useCases/searchRegulatoryLayers'
 
 import type { IconButtonProps } from '@mtes-mct/monitor-ui'
 
-export function RegulatoryLayerSearchInput() {
+export function SearchInput() {
   const dispatch = useMainAppDispatch()
   const { advancedSearchIsOpen, zoneSelected } = useMainAppSelector(state => state.regulatoryLayerSearch)
 
@@ -48,6 +48,13 @@ export function RegulatoryLayerSearchInput() {
     }
   }, [dispatch, advancedSearchIsOpen])
 
+  useEffect(
+    () => () => {
+      dispatch(resetZoneSelected())
+    },
+    [dispatch]
+  )
+
   useEffect(() => {
     if (searchQuery?.length < MINIMUM_SEARCH_CHARACTERS_NUMBER && !zoneSelected) {
       dispatch(setRegulatoryLayersSearchResult({}))

frontend/src/features/Regulation/components/RegulatoryZones/search/constants.ts → frontend/src/features/Regulation/components/RegulationSearch/constants.ts

@@ -1,4 +1,4 @@
-import type { RegulatoryZone } from '../../../types'
+import type { RegulatoryZone } from '../../types'
 import type { IFuseOptions } from 'fuse.js'
 
 export const REGULATION_SEARCH_OPTIONS: IFuseOptions<RegulatoryZone[]> = {

frontend/src/features/Regulation/components/RegulatoryZones/search/RegulatoryLayerSearch.tsx → frontend/src/features/Regulation/components/RegulationSearch/index.tsx

@@ -2,28 +2,28 @@ import { logSoftError } from '@mtes-mct/monitor-ui'
 import { useEffect, useRef } from 'react'
 import styled from 'styled-components'
 
-import { RegulatoryLayerSearchInput } from './RegulatoryLayerSearchInput'
-import { RegulatoryLayerSearchResultList } from './RegulatoryLayerSearchResultList'
+import { ResultList } from './ResultList'
+import { SearchInput } from './SearchInput'
 import { resetRegulatoryZonesChecked, setRegulatoryLayersSearchResult } from './slice'
-import layer from '../../../../../domain/shared_slices/Layer'
-import { useEscapeFromKeyboard } from '../../../../../hooks/useEscapeFromKeyboard'
-import { useMainAppDispatch } from '../../../../../hooks/useMainAppDispatch'
-import { useMainAppSelector } from '../../../../../hooks/useMainAppSelector'
+import layer from '../../../../domain/shared_slices/Layer'
+import { useEscapeFromKeyboard } from '../../../../hooks/useEscapeFromKeyboard'
+import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch'
+import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
 import {
   addRegulatoryZonesToMyLayers,
   closeRegulatoryZoneMetadataPanel,
   resetRegulatoryGeometriesToPreview
-} from '../../../slice'
+} from '../../slice'
 
-import type { LayerSliceNamespace } from '../../../../../domain/entities/layers/types'
+import type { LayerSliceNamespace } from '../../../../domain/entities/layers/types'
 import type { Promisable } from 'type-fest'
 
 export type RegulatoryLayerSearchProps = {
   namespace: LayerSliceNamespace
   numberOfRegulatoryLayersSaved: number
   setNumberOfRegulatoryLayersSaved: (length: number) => Promisable<void>
 }
-export function RegulatoryLayerSearch({
+export function RegulationSearch({
   namespace,
   numberOfRegulatoryLayersSaved,
   setNumberOfRegulatoryLayersSaved
@@ -85,8 +85,8 @@ export function RegulatoryLayerSearch({
 
   return (
     <Search ref={wrapperRef}>
-      <RegulatoryLayerSearchInput />
-      <RegulatoryLayerSearchResultList namespace={namespace} />
+      <SearchInput />
+      <ResultList namespace={namespace} />
       {/* TODO Use monitor-ui `<Button />` here. */}
       <AddRegulatoryLayer
         $isShown={!!regulatoryZonesChecked?.length}

frontend/src/features/Regulation/components/RegulatoryZones/search/slice.ts → frontend/src/features/Regulation/components/RegulationSearch/slice.ts

@@ -1,7 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit'
 
-import type { GeoJSON } from '../../../../../domain/types/GeoJSON'
-import type { RegulatoryLawTypes, RegulatoryZone } from '../../../types'
+import type { GeoJSON } from '../../../../domain/types/GeoJSON'
+import type { RegulatoryLawTypes, RegulatoryZone } from '../../types'
 import type { PayloadAction } from '@reduxjs/toolkit'
 
 type ZoneSelected = {

frontend/src/features/Regulation/components/RegulatoryZones/metadata/CodeAndName.tsx → frontend/src/features/Regulation/components/RegulatoryZoneMetadata/CodeAndName.tsx

@@ -1,8 +1,8 @@
 import { Label } from './RegulatoryMetadata.style'
-import { COLORS } from '../../../../../constants/constants'
-import { InfoPoint } from '../../../../Backoffice/edit_regulation/InfoPoint'
+import { COLORS } from '../../../../constants/constants'
+import { InfoPoint } from '../../../Backoffice/edit_regulation/InfoPoint'
 
-import type { Gear } from '../../../../../domain/types/Gear'
+import type { Gear } from '../../../../domain/types/Gear'
 
 export type CodeAndNameProps = {
   categoriesToGears?: Record<string, Gear[]> | undefined

frontend/src/features/Regulation/components/RegulatoryZones/metadata/OutdatedRegulatoryReferences.tsx → frontend/src/features/Regulation/components/RegulatoryZoneMetadata/OutdatedRegulatoryReferences.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 
-import { COLORS } from '../../../../../constants/constants'
-import { useMainAppSelector } from '../../../../../hooks/useMainAppSelector'
-import { INFINITE } from '../../../../Backoffice/constants'
-import AlertSVG from '../../../../icons/Picto_alerte.svg?react'
+import { COLORS } from '../../../../constants/constants'
+import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
+import { INFINITE } from '../../../Backoffice/constants'
+import AlertSVG from '../../../icons/Picto_alerte.svg?react'
 
 export function OutdatedRegulatoryReferences() {
   const { hasAtLeastOneOutdatedReference, hasOneRegulatoryReference } = useMainAppSelector(state => {