[Unités] Fixe quelques glitchs sur les bases (#1110)

## Related Pull Requests & Issues - Resolve #1105 - Resolve #1102 ---- - [ ] Tests E2E (Cypress)
MTES-MCT · Jan 8, 2024 · 7418c5e · 7418c5e
2 parents 9675cca + a420531
commit 7418c5e
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 37 deletions.
diff --git a/...ouv/cacem/monitorenv/infrastructure/database/repositories/JpaReportingRepositoryITests.kt b/...ouv/cacem/monitorenv/infrastructure/database/repositories/JpaReportingRepositoryITests.kt
@@ -121,8 +121,7 @@ class JpaReportingRepositoryITests : AbstractDBTests() {
             jpaReportingRepository.save(
                 existingReportingDTO.reporting.copy(
                     missionId = 38,
-                    attachedToMissionAtUtc =
-                        ZonedDateTime.parse("2023-04-01T00:00:00Z"),
+                    attachedToMissionAtUtc = ZonedDateTime.parse("2023-04-01T00:00:00Z"),
                 ),
             )
         assertThat(reportingWithMissionDTO.reporting.attachedEnvActionId).isNull()
@@ -131,8 +130,7 @@ class JpaReportingRepositoryITests : AbstractDBTests() {
 
         jpaReportingRepository.save(
             reportingWithMissionDTO.reporting.copy(
-                attachedEnvActionId =
-                    UUID.fromString("e2257638-ddef-4611-960c-7675a3254c38"),
+                attachedEnvActionId = UUID.fromString("e2257638-ddef-4611-960c-7675a3254c38"),
             ),
         )
 
@@ -345,8 +343,9 @@ class JpaReportingRepositoryITests : AbstractDBTests() {
             assertThrows<NotFoundException> {
                 jpaReportingRepository.save(
                     existingReportingDTO.reporting.copy(
-                        attachedEnvActionId =
-                            UUID.fromString("e2257638-ddef-4611-960c-7675a3254c38"),
+                        attachedEnvActionId = UUID.fromString(
+                            "e2257638-ddef-4611-960c-7675a3254c38",
+                        ),
                     ),
                 )
             }
@@ -372,8 +371,9 @@ class JpaReportingRepositoryITests : AbstractDBTests() {
                 jpaReportingRepository.save(
                     existingReportingDTO.reporting.copy(
                         missionId = 42,
-                        attachedEnvActionId =
-                            UUID.fromString("e2257638-ddef-4611-960c-7675a3254c38"),
+                        attachedEnvActionId = UUID.fromString(
+                            "e2257638-ddef-4611-960c-7675a3254c38",
+                        ),
                     ),
                 )
             }
@@ -397,8 +397,7 @@ class JpaReportingRepositoryITests : AbstractDBTests() {
                 jpaReportingRepository.save(
                     existingReportingDTO.reporting.copy(
                         missionId = 100,
-                        attachedToMissionAtUtc =
-                            ZonedDateTime.parse("2023-04-01T00:00:00Z"),
+                        attachedToMissionAtUtc = ZonedDateTime.parse("2023-04-01T00:00:00Z"),
                     ),
                 )
             }
@@ -420,8 +419,7 @@ class JpaReportingRepositoryITests : AbstractDBTests() {
             assertThrows<NotFoundException> {
                 jpaReportingRepository.save(
                     existingReportingDTO.reporting.copy(
-                        detachedFromMissionAtUtc =
-                            ZonedDateTime.parse("2023-04-01T00:00:00Z"),
+                        detachedFromMissionAtUtc = ZonedDateTime.parse("2023-04-01T00:00:00Z"),
                     ),
                 )
             }

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -29,7 +29,7 @@
     "test:unit:watch": "npm run test:unit -- --watch"
   },
   "dependencies": {
-    "@mtes-mct/monitor-ui": "10.13.0",
+    "@mtes-mct/monitor-ui": "10.17.1",
     "@reduxjs/toolkit": "1.9.7",
     "@rsuite/responsive-nav": "5.0.1",
     "@sentry/browser": "7.73.0",

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,6 +1,6 @@
 /*
- *    class selectors 
- * classnames used in app scope 
+ *    class selectors
+ * classnames used in app scope
  *
  */
 
@@ -28,6 +28,8 @@
 }
 
 /* classNames added via ol component */
+/* TODO Why repeat width, height 0 everywhere? Could be done in OL default class. */
+/* TODO Maybe rather use a common "-hover" class with a high z-index to always show hovered overlays above everything else? */
 
 .overlay-mission-hover .overlay-mission-to-attach-hover {
   z-index: 5000;
@@ -69,3 +71,8 @@
   width: 0;
   height: 0;
 }
+
+.overlay-station-hover,
+.overlay-station-selected {
+  z-index: 7000;
+}
diff --git a/...nd/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitResourceList/Item.tsx b/...nd/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitResourceList/Item.tsx
@@ -40,6 +40,7 @@ export function Item({ controlUnitResource, onEdit }: ItemProps) {
 const Wrapper = styled.div`
   background-color: ${p => p.theme.color.cultured};
   display: flex;
+  min-height: 96px;
 `
 
 const InfoBox = styled.div`
@@ -66,6 +67,7 @@ const Note = styled.div`
   -webkit-line-clamp: 3;
   display: -webkit-box;
   overflow: hidden;
+  margin-bottom: 4px;
 `
 
 const Name = styled.p`

diff --git a/...features/ControlUnit/components/ControlUnitDialog/ControlUnitResourceList/Placeholder.tsx b/...features/ControlUnit/components/ControlUnitDialog/ControlUnitResourceList/Placeholder.tsx
@@ -13,12 +13,13 @@ export function Placeholder({ type }: PlaceholderProps) {
 }
 
 const Wrapper = styled.div`
-  align-items: center;
+  align-items: flex-start;
   background-color: ${p => p.theme.color.lightGray};
   display: flex;
-  height: 94px;
+  flex-grow: 1;
   justify-content: center;
-  min-height: 94px;
+  max-width: 116px;
   min-width: 116px;
+  padding-top: 32px;
   width: 116px;
 `
diff --git a/frontend/src/features/Station/components/StationLayer/utils.ts b/frontend/src/features/Station/components/StationLayer/utils.ts
@@ -29,7 +29,7 @@ export const getFeatureStyle = ((feature: Feature) => {
       fill: new Fill({
         color: THEME.color.charcoal
       }),
-      radius: 9
+      radius: 10
     })
   })
 
@@ -41,7 +41,8 @@ export const getFeatureStyle = ((feature: Feature) => {
       font: '12px Marianne',
       offsetX: featureProps.controlUnitsCount === 1 ? 16.5 : 16,
       offsetY: -35,
-      text: featureProps.controlUnitsCount.toString()
+      text: featureProps.controlUnitsCount.toString(),
+      textAlign: 'center'
     })
   })
 

diff --git a/frontend/src/features/Station/components/StationOverlay/index.tsx b/frontend/src/features/Station/components/StationOverlay/index.tsx
@@ -28,7 +28,7 @@ export function StationOverlay({ currentFeatureOver: hoveredFeature, map }: Base
     <>
       <OverlayPositionOnCentroid
         appClassName="overlay-station-hover"
-        feature={canDisplayHoveredFeature && hoveredFeature}
+        feature={canDisplayHoveredFeature ? hoveredFeature : undefined}
         map={map}
         options={{ margins: OVERLAY_MARGINS }}
       >

diff --git a/frontend/src/features/map/overlays/OverlayPositionOnCentroid.tsx b/frontend/src/features/map/overlays/OverlayPositionOnCentroid.tsx
@@ -10,6 +10,9 @@ import { useAppDispatch } from '../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../hooks/useAppSelector'
 import { useMoveOverlayWhenDragging } from '../../../hooks/useMoveOverlayWhenDragging'
 
+import type { Feature } from 'ol'
+import type { Geometry } from 'ol/geom'
+
 const OVERLAY_HEIGHT = 174
 
 const INITIAL_OFFSET_VALUE = [-90, 10]
@@ -22,17 +25,34 @@ const defaultMargins = {
   yTop: -180
 }
 
+type OverlayPositionOnCentroidProps = {
+  appClassName: string
+  children: React.ReactNode
+  feature: Feature<Geometry> | null | undefined
+  featureIsShowed?: boolean
+  map: any
+  options?: {
+    margins?: {
+      xLeft: number
+      xMiddle: number
+      xRight: number
+      yBottom: number
+      yMiddle: number
+      yTop: number
+    }
+  }
+}
 export function OverlayPositionOnCentroid({
   appClassName,
   children,
   feature,
   featureIsShowed = false,
   map,
   options: { margins = defaultMargins } = {}
-}) {
+}: OverlayPositionOnCentroidProps) {
   const dispatch = useAppDispatch()
-  const overlayRef = useRef(null)
-  const olOverlayObjectRef = useRef(null)
+  const overlayRef = useRef<HTMLDivElement | null>(null)
+  const olOverlayObjectRef = useRef<Overlay | null>(null)
   const isThrottled = useRef(false)
   const [showed, setShowed] = useState(false)
   const currentCoordinates = useRef([])
@@ -42,7 +62,7 @@ export function OverlayPositionOnCentroid({
   const currentOffset = useRef(INITIAL_OFFSET_VALUE)
 
   const overlayCallback = useCallback(
-    ref => {
+    (ref: HTMLDivElement) => {
       overlayRef.current = ref
       if (ref) {
         olOverlayObjectRef.current = new Overlay({
@@ -146,18 +166,20 @@ export function OverlayPositionOnCentroid({
   useMoveOverlayWhenDragging(olOverlayObjectRef.current, map, currentOffset, moveCardWithThrottle, showed)
 
   return (
-    <OverlayComponent ref={overlayCallback} overlayTopLeftMargin={overlayTopLeftMargin}>
+    <OverlayComponent ref={overlayCallback} $overlayTopLeftMargin={overlayTopLeftMargin}>
       {feature && children}
     </OverlayComponent>
   )
 }
 
-const OverlayComponent = styled.div`
-  position: absolute;
-  top: ${props => props.overlayTopLeftMargin[0]}px;
-  left: ${props => props.overlayTopLeftMargin[1]}px;
-  text-align: left;
+const OverlayComponent = styled.div<{
+  $overlayTopLeftMargin: number[]
+}>`
   background-color: ${p => p.theme.color.white};
   border-radius: 2px;
   cursor: grabbing;
+  left: ${p => p.$overlayTopLeftMargin[1]}px;
+  position: absolute;
+  text-align: left;
+  top: ${p => p.$overlayTopLeftMargin[0]}px;
 `
diff --git a/frontend/src/features/map/overlays/actions/index.tsx b/frontend/src/features/map/overlays/actions/index.tsx
@@ -20,7 +20,7 @@ export function ActionOverlay({ currentFeatureOver, map }: BaseMapChildrenProps)
   return (
     <OverlayPositionOnCentroid
       appClassName="overlay-action-hover"
-      feature={displayHoveredFeature && currentFeatureOver}
+      feature={displayHoveredFeature ? currentFeatureOver : undefined}
       map={map}
     >
       {displayControlCard && <ControlCard feature={currentFeatureOver} />}

diff --git a/frontend/src/features/missions/Overlays/ReportingToAttach/index.tsx b/frontend/src/features/missions/Overlays/ReportingToAttach/index.tsx
@@ -34,7 +34,7 @@ export function ReportingToAttachOverlays({ currentFeatureOver, map }: BaseMapCh
   return (
     <OverlayPositionOnCentroid
       appClassName="overlay-reporting-to-attach-hover"
-      feature={displayReportingToAttachLayer && displayHoveredFeature && currentFeatureOver}
+      feature={displayReportingToAttachLayer && displayHoveredFeature ? currentFeatureOver : undefined}
       map={map}
       options={{ margins: hoveredMargins }}
     >