[Unités] Fixe plusieurs bugs concernant l'affichage des bases sur la …

…carte (#970)

## Related Pull Requests & Issues

- Resolve #698
- Resolve #952

----

- [ ] Tests E2E (Cypress)

frontend/cypress/e2e/main_window/station_overlay.spec.ts

@@ -7,14 +7,12 @@ context('Main Window > Station Overlay', () => {
     cy.clickButton('Afficher les bases').wait(1000)
   })
 
-  it('Should show the expected station card and select the expected station filter when clicked', () => {
+  it('Should show the expected station card when selected', () => {
     // Click on Marseille base
     cy.get('.ol-viewport').click(750, 720, { force: true })
 
     cy.getDataCy('StationOverlay-card').contains('Marseille').should('be.visible')
     cy.getDataCy('StationOverlay-card').contains('Cultures marines – DDTM 40').should('be.visible')
     cy.getDataCy('StationOverlay-card').find('.Element-Tag').should('have.text', '2 Barges')
-    // Expected base filter in control unit list dialog
-    cy.get('.rs-picker-toggle-value').should('have.text', 'Marseille')
   })
 })

frontend/src/components/OverlayCard.tsx

@@ -13,7 +13,7 @@ export function OverlayCard({ children, isCloseButtonHidden = false, onClose, ti
   return (
     <StyledMapMenuDialogContainer {...props}>
       <MapMenuDialog.Header>
-        <StyledMapMenuDialogTitle>{title}</StyledMapMenuDialogTitle>
+        <StyledMapMenuDialogTitle title={title}>{title}</StyledMapMenuDialogTitle>
         <MapMenuDialog.CloseButton
           Icon={Icon.Close}
           onClick={onClose}
@@ -30,7 +30,10 @@ const StyledMapMenuDialogContainer = styled(MapMenuDialog.Container)`
 `
 
 const StyledMapMenuDialogTitle = styled(MapMenuDialog.Title)`
+  display: block;
   flex-grow: 1;
-  margin-left: 32px;
+  overflow: hidden;
   text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `

frontend/src/domain/entities/layers/constants.ts

@@ -6,6 +6,7 @@ export enum LayerType {
   REGULATORY = 'REGULATORY'
 }
 
+// TODO Generate `zIndex` from order of declaration rather than manually setting it.
 export const Layers = {
   ACTIONS: {
     code: 'actions',
@@ -149,7 +150,8 @@ export const Layers = {
   },
   STATIONS: {
     code: 'stations',
-    zIndex: 1200
+    // Station layer should always appear above all other layers
+    zIndex: 2000
   },
   THREE_MILES: {
     code: '3_miles_areas',

frontend/src/features/ControlUnit/components/ControlUnitListDialog/index.tsx

@@ -52,9 +52,9 @@ export function ControlUnitListDialog({ onClose }: ControlUnitListDialogProps) {
         <MapMenuDialog.Title>Unités de contrôle</MapMenuDialog.Title>
         <MapMenuDialog.VisibilityButton
           accent={Accent.SECONDARY}
-          Icon={global.displayBaseLayer ? Icon.Display : Icon.Hide}
+          Icon={displayBaseLayer ? Icon.Display : Icon.Hide}
           onClick={toggleBaseLayer}
-          title={global.displayBaseLayer ? 'Masquer les bases' : 'Afficher les bases'}
+          title={displayBaseLayer ? 'Masquer les bases' : 'Afficher les bases'}
         />
       </MapMenuDialog.Header>
       <MapMenuDialog.Body>

frontend/src/features/Station/components/StationLayer/index.ts

@@ -9,7 +9,6 @@ import { removeOverlayCoordinatesByName } from '../../../../domain/shared_slices
 import { useAppDispatch } from '../../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
 import { FrontendError } from '../../../../libs/FrontendError'
-import { controlUnitListDialogActions } from '../../../ControlUnit/components/ControlUnitListDialog/slice'
 import { stationActions } from '../../slice'
 
 import type { VectorLayerWithName } from '../../../../domain/types/layer'
@@ -32,12 +31,16 @@ export function StationLayer({ map, mapClickEvent }: BaseMapChildrenProps) {
   const dispatch = useAppDispatch()
   const displayStationLayer = useAppSelector(state => state.global.displayStationLayer)
   const overlayCoordinates = useAppSelector(state => state.global.overlayCoordinates)
-  const station = useAppSelector(state => state.station)
+  const highlightedFeatureIds = useAppSelector(state => state.station.highlightedFeatureIds)
+  const selectedFeatureId = useAppSelector(state => state.station.selectedFeatureId)
   const listener = useAppSelector(state => state.draw.listener)
 
   const { data: stations } = useGetStationsQuery()
 
-  const stationsAsFeatures = useMemo(() => (stations || []).map(getStationPointFeature), [stations])
+  const stationsAsFeatures = useMemo(
+    () => (stations || []).filter(station => station.controlUnitResourceIds.length > 0).map(getStationPointFeature),
+    [stations]
+  )
 
   // ---------------------------------------------------------------------------
   // Features Events
@@ -53,16 +56,8 @@ export function StationLayer({ map, mapClickEvent }: BaseMapChildrenProps) {
       return
     }
 
-    const featureProps = feature.getProperties()
-
     dispatch(stationActions.selectFeatureId(featureId))
     dispatch(stationActions.hightlightFeatureIds([featureId]))
-    dispatch(
-      controlUnitListDialogActions.setFilter({
-        key: 'stationId',
-        value: featureProps.station.id
-      })
-    )
     dispatch(removeOverlayCoordinatesByName(Layers.STATIONS.code))
   }, [dispatch, mapClickEvent])
 
@@ -81,12 +76,12 @@ export function StationLayer({ map, mapClickEvent }: BaseMapChildrenProps) {
       }
 
       feature.setProperties({
-        isHighlighted: station.highlightedFeatureIds.includes(featureId),
-        isSelected: featureId === station.selectedFeatureId,
-        overlayCoordinates: featureId === station.selectedFeatureId ? overlayCoordinates.stations : undefined
+        isHighlighted: highlightedFeatureIds.includes(featureId),
+        isSelected: featureId === selectedFeatureId,
+        overlayCoordinates: featureId === selectedFeatureId ? overlayCoordinates.stations : undefined
       })
     })
-  }, [station.highlightedFeatureIds, station.selectedFeatureId, overlayCoordinates])
+  }, [highlightedFeatureIds, overlayCoordinates, selectedFeatureId])
 
   // ---------------------------------------------------------------------------
   // Features Visibility

frontend/src/features/Station/components/StationLayer/utils.ts

@@ -38,7 +38,7 @@ export const getFeatureStyle = ((feature: Feature) => {
       fill: new Fill({
         color: THEME.color.white
       }),
-      font: '13px Marianne',
+      font: '12px Marianne',
       offsetX: featureProps.controlUnitsCount === 1 ? 16.5 : 16,
       offsetY: -35,
       text: featureProps.controlUnitsCount.toString()

frontend/src/features/Station/components/StationOverlay/StationCard/Item.tsx

@@ -25,8 +25,8 @@ export function Item({ controlUnit }: ItemProps) {
 
   return (
     <Wrapper onClick={edit}>
-      <NameText>{controlUnit.name}</NameText>
-      <AdministrationText>{controlUnit.administration.name}</AdministrationText>
+      <NameText title={controlUnit.administration.name}>{controlUnit.name}</NameText>
+      <AdministrationText title={controlUnit.administration.name}>{controlUnit.administration.name}</AdministrationText>
       <ResourcesBar>{displayControlUnitResourcesFromControlUnit(controlUnit)}</ResourcesBar>
     </Wrapper>
   )
@@ -35,7 +35,7 @@ export function Item({ controlUnit }: ItemProps) {
 const Wrapper = styled.div`
   background-color: ${p => p.theme.color.gainsboro};
   cursor: pointer;
-  padding: 8px 12px;
+  padding: 8px 4px 0 12px;
 
   &:hover {
     background-color: ${p => p.theme.color.lightGray};
@@ -46,18 +46,27 @@ const NameText = styled.div`
   color: ${p => p.theme.color.gunMetal};
   font-weight: bold;
   line-height: 18px;
+  margin-right: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 const AdministrationText = styled.div`
   color: ${p => p.theme.color.gunMetal};
   line-height: 18px;
-  margin: 2px 0 8px;
+  margin: 2px 4px 8px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 const ResourcesBar = styled.div`
-  line-height: 18px;
+  display: flex;
+  flex-wrap: wrap;
 
-  > .Element-Tag:not(:first-child) {
-    margin-left: 8px;
+  > .Element-Tag {
+    margin: 0 8px 8px 0;
+    white-space: nowrap;
   }
 `

frontend/src/features/Station/components/StationOverlay/StationCard/index.tsx

@@ -80,7 +80,7 @@ export function StationCard({ feature, selected = false }: { feature: Feature; s
 }
 
 const StyledMapMenuDialogBody = styled(MapMenuDialog.Body)`
-  height: 480px;
+  height: 294px;
 
   > div:not(:first-child) {
     margin-top: 8px;

frontend/src/features/Station/components/StationOverlay/constants.ts

@@ -3,6 +3,6 @@ export const OVERLAY_MARGINS = {
   xMiddle: -75,
   xRight: -260,
   yBottom: 0,
-  yMiddle: -280,
-  yTop: -580
+  yMiddle: -215,
+  yTop: -404
 }

frontend/src/features/map/overlays/reportings/ReportingCard.tsx

@@ -73,7 +73,7 @@ export function ReportingCard({
 
   const closeReportingCard = useCallback(() => {
     dispatch(reportingActions.setSelectedReportingIdOnMap(undefined))
-    dispatch(removeOverlayCoordinatesByName(Layers.REPORTING_SELECTED.code))
+    dispatch(removeOverlayCoordinatesByName(Layers.REPORTINGS.code))
   }, [dispatch])
 
   useEffect(() => {