[Dashboard] add selected regulatoryAreas accordion and fix Panel

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

@@ -1,4 +1,4 @@
-import { Accent, Icon, IconButton, Size } from '@mtes-mct/monitor-ui'
+import { Accent, Icon, IconButton } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
 type AccordionProps = {
@@ -22,7 +22,6 @@ export function Accordion({ children, headerButton, isExpanded, setExpandedAccor
           accent={Accent.TERTIARY}
           Icon={Icon.Chevron}
           onClick={setExpandedAccordion}
-          size={Size.SMALL}
         />
       </AccordionHeader>
       <HeaderSeparator />
@@ -39,7 +38,7 @@ const StyledIconButton = styled(IconButton)<{ $isExpanded: boolean }>`
   transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0deg)')};
   transition: transform 0.3s;
 `
-const AccordionHeader = styled.div`
+const AccordionHeader = styled.header`
   display: flex;
   justify-content: space-between;
   padding: 24px;

frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/Layer.tsx

@@ -7,6 +7,7 @@ import { Accent, Icon, IconButton, THEME } from '@mtes-mct/monitor-ui'
 import { transformExtent } from 'ol/proj'
 import Projection from 'ol/proj/Projection'
 import { createRef } from 'react'
+import styled from 'styled-components'
 
 import { useGetRegulatoryLayersQuery } from '../../../../../api/regulatoryLayersAPI'
 import { MonitorEnvLayers } from '../../../../../domain/entities/layers/constants'
@@ -16,10 +17,11 @@ import { useAppDispatch } from '../../../../../hooks/useAppDispatch'
 
 type RegulatoryLayerProps = {
   dashboardId: number
+  isSelected: boolean
   layerId: number
 }
 
-export function Layer({ dashboardId, layerId }: RegulatoryLayerProps) {
+export function Layer({ dashboardId, isSelected, layerId }: RegulatoryLayerProps) {
   const dispatch = useAppDispatch()
   const ref = createRef<HTMLSpanElement>()
 
@@ -54,16 +56,17 @@ export function Layer({ dashboardId, layerId }: RegulatoryLayerProps) {
     }
   }
 
+  const removeZone = e => {
+    e.stopPropagation()
+    dispatch(dashboardActions.removeItems({ itemIds: [layerId], type: Dashboard.Block.REGULATORY_AREAS }))
+  }
+
   const toggleZoneMetadata = () => {
     dispatch(dashboardActions.setDashboardPanel({ id: layerId, type: Dashboard.Block.REGULATORY_AREAS }))
   }
 
   return (
-    <LayerSelector.Layer
-      ref={ref}
-      // $metadataIsShown={metadataIsShown}
-      onClick={toggleZoneMetadata}
-    >
+    <StyledLayer ref={ref} onClick={toggleZoneMetadata}>
       <LayerLegend
         layerType={MonitorEnvLayers.REGULATORY_ENV}
         legendKey={layer?.entity_name ?? 'aucun'}
@@ -74,15 +77,31 @@ export function Layer({ dashboardId, layerId }: RegulatoryLayerProps) {
       </LayerSelector.Name>
 
       <LayerSelector.IconGroup>
-        <IconButton
-          accent={Accent.TERTIARY}
-          aria-label="Sélectionner la zone"
-          color={isZoneSelected ? THEME.color.blueGray : THEME.color.slateGray}
-          data-cy="regulatory-zone-check"
-          Icon={isZoneSelected ? Icon.PinFilled : Icon.Pin}
-          onClick={handleSelectZone}
-        />
+        {isSelected ? (
+          <IconButton
+            accent={Accent.TERTIARY}
+            aria-label="Supprimer la zone"
+            color={THEME.color.slateGray}
+            Icon={Icon.Close}
+            onClick={removeZone}
+            title="Supprimer la/ zone"
+          />
+        ) : (
+          <IconButton
+            accent={Accent.TERTIARY}
+            aria-label="Sélectionner la zone"
+            color={isZoneSelected ? THEME.color.blueGray : THEME.color.slateGray}
+            data-cy="regulatory-zone-check"
+            Icon={isZoneSelected ? Icon.PinFilled : Icon.Pin}
+            onClick={handleSelectZone}
+          />
+        )}
       </LayerSelector.IconGroup>
-    </LayerSelector.Layer>
+    </StyledLayer>
   )
 }
+
+const StyledLayer = styled(LayerSelector.Layer)`
+  padding-left: 24px;
+  padding-right: 24px;
+`

frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/ListLayerGroup.tsx

@@ -8,15 +8,17 @@ import { Accent, Icon, IconButton, THEME } from '@mtes-mct/monitor-ui'
 import { getTitle } from 'domain/entities/layers/utils'
 import { includes, intersection } from 'lodash'
 import { useState } from 'react'
+import styled from 'styled-components'
 
 import { Layer } from './Layer'
 
 type ResultListLayerGroupProps = {
   dashboardId: number
   groupName: string
+  isSelected?: boolean
   layerIds: number[]
 }
-export function ListLayerGroup({ dashboardId, groupName, layerIds }: ResultListLayerGroupProps) {
+export function ListLayerGroup({ dashboardId, groupName, isSelected = false, layerIds }: ResultListLayerGroupProps) {
   const dispatch = useAppDispatch()
   const [zonesAreOpen, setZonesAreOpen] = useState(false)
 
@@ -40,34 +42,55 @@ export function ListLayerGroup({ dashboardId, groupName, layerIds }: ResultListL
     }
   }
 
+  const removeAllZones = e => {
+    e.stopPropagation()
+    const payload = { itemIds: layerIds, type: Dashboard.Block.REGULATORY_AREAS }
+    dispatch(dashboardActions.removeItems(payload))
+  }
+
   const clickOnGroupZones = () => {
     setZonesAreOpen(!zonesAreOpen)
   }
 
   return (
     <>
-      <LayerSelector.GroupWrapper $isOpen={forceZonesAreOpen || zonesAreOpen} onClick={clickOnGroupZones}>
+      <StyledGroupWrapper $isOpen={forceZonesAreOpen || zonesAreOpen} onClick={clickOnGroupZones}>
         <LayerSelector.GroupName data-cy="result-group" title={groupName}>
           {getTitle(groupName) ?? ''}
         </LayerSelector.GroupName>
         <LayerSelector.IconGroup>
           <LayerSelector.ZonesNumber>{`${layerIds.length}/${totalNumberOfZones}`}</LayerSelector.ZonesNumber>
-
-          <IconButton
-            accent={Accent.TERTIARY}
-            aria-label="Sélectionner la/les zone(s)"
-            color={allTopicZonesAreChecked ? THEME.color.blueGray : THEME.color.slateGray}
-            Icon={allTopicZonesAreChecked ? Icon.PinFilled : Icon.Pin}
-            onClick={handleCheckAllZones}
-            title="Sélectionner la/les zone(s)"
-          />
+          {isSelected ? (
+            <IconButton
+              accent={Accent.TERTIARY}
+              aria-label="Supprimer la/les zone(s)"
+              color={THEME.color.slateGray}
+              Icon={Icon.Close}
+              onClick={removeAllZones}
+              title="Supprimer la/les zone(s)"
+            />
+          ) : (
+            <IconButton
+              accent={Accent.TERTIARY}
+              aria-label="Sélectionner la/les zone(s)"
+              color={allTopicZonesAreChecked ? THEME.color.blueGray : THEME.color.slateGray}
+              Icon={allTopicZonesAreChecked ? Icon.PinFilled : Icon.Pin}
+              onClick={handleCheckAllZones}
+              title="Sélectionner la/les zone(s)"
+            />
+          )}
         </LayerSelector.IconGroup>
-      </LayerSelector.GroupWrapper>
+      </StyledGroupWrapper>
       <LayerSelector.SubGroup isOpen={forceZonesAreOpen || zonesAreOpen} length={layerIds?.length}>
         {layerIds?.map(layerId => (
-          <Layer key={layerId} dashboardId={dashboardId} layerId={layerId} />
+          <Layer key={layerId} dashboardId={dashboardId} isSelected={isSelected} layerId={layerId} />
         ))}
       </LayerSelector.SubGroup>
     </>
   )
 }
+
+const StyledGroupWrapper = styled(LayerSelector.GroupWrapper)`
+  padding-left: 24px;
+  padding-right: 24px;
+`

frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/Panel.tsx

@@ -9,12 +9,13 @@ import { Accent, Icon, IconButton } from '@mtes-mct/monitor-ui'
 import { skipToken } from '@reduxjs/toolkit/query'
 import { MonitorEnvLayers } from 'domain/entities/layers/constants'
 import { getTitle } from 'domain/entities/layers/utils'
+import { useEffect } from 'react'
 import { FingerprintSpinner } from 'react-epic-spinners'
 import styled from 'styled-components'
 
 const FOUR_HOURS = 4 * 60 * 60 * 1000
 
-export function RegulatoryPanel({ dashboardId }: { dashboardId: number }) {
+export function RegulatoryPanel({ $marginLeft, dashboardId }: { $marginLeft: number; dashboardId: number }) {
   const dispatch = useAppDispatch()
   const openPanel = useAppSelector(state => state.dashboard.dashboards?.[dashboardId]?.openPanel)
 
@@ -26,8 +27,18 @@ export function RegulatoryPanel({ dashboardId }: { dashboardId: number }) {
     dispatch(dashboardActions.setDashboardPanel())
   }
 
+  useEffect(
+    () => () => {
+      dispatch(dashboardActions.setDashboardPanel())
+    },
+    [dispatch]
+  )
+  if (!openPanel) {
+    return null
+  }
+
   return (
-    <Wrapper $isOpen={!!openPanel}>
+    <Wrapper $isOpen={!!openPanel} $marginLeft={$marginLeft}>
       {regulatoryMetadata ? (
         <>
           <Header data-cy="regulatory-metadata-header">
@@ -63,16 +74,16 @@ export function RegulatoryPanel({ dashboardId }: { dashboardId: number }) {
   )
 }
 
-const Wrapper = styled.div<{ $isOpen: boolean }>`
+const Wrapper = styled.div<{ $isOpen: boolean; $marginLeft: number }>`
   background-color: ${p => p.theme.color.white};
   box-shadow: 0px 3px 5px #70778540;
-  display: block;
-  margin-left: 37px;
-  opacity: ${p => (p.$isOpen ? 1 : 0)};
   position: absolute;
-  transform: translateX(100%);
-  transition: all 0.5s;
   width: 400px;
+  z-index: 1;
+  left: ${p =>
+    `calc(
+    ${p.$marginLeft}px + 40px + 64px + 20px
+  )`}; // 40px is the padding, 64px is the width of the lsidebar, 20px is the margin
 `
 
 const RegulatoryZoneName = styled.span`
@@ -86,7 +97,7 @@ const RegulatoryZoneName = styled.span`
   margin-right: 5px;
 `
 
-const Header = styled.div`
+const Header = styled.header`
   background-color: ${p => p.theme.color.gainsboro};
   color: ${p => p.theme.color.gunMetal};
   text-align: left;

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

@@ -1,28 +1,50 @@
 import { useGetRegulatoryLayersQuery } from '@api/regulatoryLayersAPI'
+import { Dashboard } from '@features/Dashboard/types'
 import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
+import { useAppSelector } from '@hooks/useAppSelector'
+import { pluralize } from '@mtes-mct/monitor-ui'
 import { groupBy } from 'lodash'
+import { useRef, useState } from 'react'
 import styled from 'styled-components'
 
 import { ListLayerGroup } from './ListLayerGroup'
 import { RegulatoryPanel } from './Panel'
 import { Accordion } from '../Accordion'
+import { SmallAccordion } from '../SmallAccordion'
 
 type RegulatoriesAreasProps = {
   dashboardId: number
   isExpanded: boolean
   setExpandedAccordion: () => void
 }
 export function RegulatoryAreas({ dashboardId, isExpanded, setExpandedAccordion }: RegulatoriesAreasProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const width = ref.current?.clientWidth
+
+  const selectedLayerIds = useAppSelector(
+    state => state.dashboard.dashboards?.[dashboardId]?.[Dashboard.Block.REGULATORY_AREAS]
+  )
+
+  const [isExpandedSmallAccordion, setExpandedSmallAccordion] = useState(false)
   const { data: regulatoryLayers } = useGetRegulatoryLayersQuery()
 
   const regulatoryAreasByLayerName = groupBy(
     Object.values(regulatoryLayers?.ids ?? {}),
-    r => regulatoryLayers?.entities[r]?.layer_name
+    (r: number) => regulatoryLayers?.entities[r]?.layer_name
+  )
+
+  const selectedRegulatoryAreaIds = Object.values(regulatoryLayers?.ids ?? {}).filter(id =>
+    selectedLayerIds?.includes(id)
+  )
+  const selectedRegulatoryAreasByLayerName = groupBy(
+    selectedRegulatoryAreaIds,
+    (r: number) => regulatoryLayers?.entities[r]?.layer_name
   )
 
   return (
-    <div>
-      <RegulatoryPanel dashboardId={dashboardId} />
+    <div ref={ref}>
+      <RegulatoryPanel $marginLeft={width ?? 0} dashboardId={dashboardId} />
+
       <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones règlementaires">
         <StyledLayerList
           $baseLayersLength={Object.values(regulatoryAreasByLayerName).length}
@@ -39,6 +61,25 @@ export function RegulatoryAreas({ dashboardId, isExpanded, setExpandedAccordion
           ))}
         </StyledLayerList>
       </Accordion>
+      <SmallAccordion
+        isExpanded={isExpandedSmallAccordion}
+        isReadOnly={selectedLayerIds?.length === 0}
+        setExpandedAccordion={() => setExpandedSmallAccordion(!isExpandedSmallAccordion)}
+        title={`${selectedLayerIds?.length ?? 0} ${pluralize('zone', selectedLayerIds?.length ?? 0)} ${pluralize(
+          'sélectionée',
+          selectedLayerIds?.length ?? 0
+        )}`}
+      >
+        {Object.entries(selectedRegulatoryAreasByLayerName).map(([layerGroupName, layerIdsInGroup]) => (
+          <ListLayerGroup
+            key={layerGroupName}
+            dashboardId={dashboardId}
+            groupName={layerGroupName}
+            isSelected
+            layerIds={layerIdsInGroup}
+          />
+        ))}
+      </SmallAccordion>
     </div>
   )
 }