[Fiche navire] L'UI du paramétrage de l'affichage de la piste VMS est…

… cassé (#3055)

## Linked issues

- Resolve #3050
- J'ai passé tous les composants `Radio` `rsuite` en `monitor-ui`

----

- [x] Tests E2E (Cypress)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new component for highlighting vessel track positions on
the map.
- Enhanced vessel tracking options with a more flexible depth selection.
    - Updated the Vessel Logbook summary styling for better readability.
- Replaced radio buttons with a styled select component in the track
request feature for improved UI consistency.
- Refactored the Positions Table to use a more sophisticated DataTable
component, enhancing functionality and user experience.

- **Refactor**
- Updated various components and types to support the new
`SelectableVesselTrackDepth` type, ensuring more accurate vessel
tracking.

- **Style**
- Added specific styling adjustments to improve the visual presentation
of the application's components.

- **Chores**
    - Minor comment update for better code documentation clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

frontend/cypress/e2e/favorite_vessel.spec.ts

@@ -86,7 +86,7 @@ context('Favorite Vessel', () => {
 
     // Given
     cy.get('*[data-cy="vessel-visibility"]').click()
-    cy.get('[data-cy="global-vessel-track-depth-twelve-hours"] input').click()
+    cy.fill('Afficher depuis', '12 heures')
     cy.get('*[data-cy="vessel-visibility"]').click()
     cy.get('.VESSELS_POINTS').rightclick(460, 460, { force: true, timeout: 10000 })
     cy.get('*[data-cy="add-vessel-to-favorites"]').click()
@@ -108,7 +108,7 @@ context('Favorite Vessel', () => {
     })
 
     cy.get('*[data-cy="vessel-visibility"]').click()
-    cy.get('*[data-cy="global-vessel-track-depth-one-week"]').click()
+    cy.fill('Afficher depuis', '1 semaine')
     cy.wait(1500)
 
     cy.get('.VESSELS_POINTS').toMatchImageSnapshot({

frontend/cypress/e2e/interest_point.spec.ts

@@ -103,7 +103,8 @@ context('InterestPoint', () => {
     cy.get('#root').click(159, 1000, { timeout: 10000 })
     cy.get('*[data-cy="interest-point"]').click({ timeout: 10000 })
     cy.get('#root').click(490, 580, { timeout: 10000 })
-    cy.get('*[data-cy="interest-point-type-radio-input"]').click({ timeout: 10000 })
+    cy.fill('Type de point', 'Autre point')
+
     cy.get('*[data-cy="interest-point-save"]').click({ timeout: 10000 })
     cy.get('[data-cy="interest-point-edit"]').click({ timeout: 10000 })
     // The interest point is moved to the East side
@@ -119,7 +120,7 @@ context('InterestPoint', () => {
     cy.get('*[data-cy="dms-coordinates-input"]', { timeout: 10000 })
       .eq(1)
       .should('have.value', '47° 45′ 31″ N 007° 54′ 51″ E')
-    cy.get('*[data-cy="interest-point-type-radio-input"]').should('have.class', 'rs-radio-checked')
+    cy.get('.Field-MultiRadio').contains('Type de point').get('[aria-checked="true"]').contains('Autre point')
     cy.get('*[data-cy="interest-point-save"]').click({ timeout: 10000 })
 
     cy.get('*[data-cy^="interest-point-coordinates"]').first().contains('47° 45′', { timeout: 10000 })

frontend/cypress/e2e/map_menu_tools.spec.ts

@@ -35,11 +35,11 @@ context('Map menu tools', () => {
     cy.get('*[data-cy="map-property-trigger"]', { timeout: 10000 })
       .filter(':contains("étiquettes des navires")')
       .should('not.be.visible')
-    cy.get('*[data-cy="global-vessel-track-depth-twelve-hours"]').should('be.visible')
+    cy.get('body').contains('Afficher depuis').should('be.visible')
 
     // Vessel filters
     cy.get('*[data-cy="vessel-filters"]').click({ timeout: 10000 })
-    cy.get('*[data-cy="global-vessel-track-depth-twelve-hours"]').should('not.be.visible')
+    cy.get('body').contains('Afficher depuis').should('not.be.visible')
     cy.get('*[data-cy="vessel-filters-create-new-filter"]').should('be.visible')
 
     // Press on ESC should close the tool and shrink the menu

frontend/cypress/e2e/vessel_sidebar/control_buttons.spec.ts

@@ -21,36 +21,28 @@ context('Vessel sidebar controls buttons', () => {
 
   it('Vessel track depth Should be changed', () => {
     // Given
-    cy.get('.VESSELS_POINTS').click(460, 460, { force: true, timeout: 10000 })
+    cy.get('*[data-cy^="vessel-search-input"]', { timeout: 10000 }).type('Pheno')
+    cy.get('*[data-cy^="vessel-search-item"]').eq(0).click()
     cy.wait(200)
-    cy.get('*[data-cy^="vessel-sidebar"]', { timeout: 10000 }).should('be.visible')
+    cy.get('*[data-cy^="vessel-sidebar"]').should('be.visible')
 
     // When
-    cy.get('*[data-cy^="vessel-track-depth-selection"]').click({ timeout: 10000 })
-    cy.get('[data-cy="vessel-track-depth-three-days"] input').click({ timeout: 10000 })
-    cy.wait(1000)
+    cy.get('*[data-cy^="vessel-track-depth-selection"]').click()
+    cy.fill('Afficher la piste VMS depuis', '3 jours')
+    cy.wait(500)
 
     // Then
-    cy.get('[aria-rowindex="6"] > .rs-table-cell-group > [aria-colindex="2"] > .rs-table-cell-content').contains(
-      '0 nds',
-      { timeout: 10000 }
-    )
+    cy.get('[data-id="5"] > td').eq(2).contains('0 nds')
 
     // And click on a position to zoom in
-    cy.get('[aria-rowindex="6"] > .rs-table-cell-group > [aria-colindex="1"] > .rs-table-cell-content').trigger(
-      'pointermove',
-      { force: true, pointerId: 1 }
-    )
-    cy.get('[aria-rowindex="6"] > .rs-table-cell-group > [aria-colindex="1"] > .rs-table-cell-content').click({
+    cy.get('[data-id="5"] > td').eq(2).trigger('pointermove', { force: true, pointerId: 1 })
+    cy.get('[data-id="5"] > td').eq(2).click({
       force: true
     })
 
     // The table should be sorted in ascending datetime order
-    cy.get('.rs-table-cell-group > :nth-child(1) > .rs-table-cell > .rs-table-cell-content').click({ timeout: 10000 })
-    cy.get('[aria-rowindex="2"] > .rs-table-cell-group > [aria-colindex="2"] > .rs-table-cell-content').contains(
-      '8.7 nds',
-      { timeout: 10000 }
-    )
+    cy.get('.Table-SimpleTable').contains('GDH').click()
+    cy.get('[data-id="0"] > td').eq(2).contains('8.7 nds')
   })
 
   it('Vessel track dates Should be changed When walking in fishing trips', () => {
@@ -64,13 +56,14 @@ context('Vessel sidebar controls buttons', () => {
     cy.get('*[data-cy^="vessel-fishing-previous-trip"]').click({ timeout: 10000 })
     cy.get('*[data-cy^="vessel-track-depth-selection"]').click({ timeout: 10000 })
 
+    // TODO Fix the check of dates entered in DateRanges
     // Then
     // cy.get('.rs-picker-toggle-value').contains('16-02-2019')
     // cy.get('.rs-picker-toggle-value').contains('15-10-2019')
     // cy.get('*[data-cy^="vessel-track-depth-three-days"]').should('not.have.class', 'rs-radio-checked')
 
     // Then, back to another trip depth of three days
-    cy.get('[data-cy="vessel-track-depth-three-days"] input').click({ force: true, timeout: 10000 })
+    cy.fill('Afficher la piste VMS depuis', '3 jours')
     cy.get('*[data-cy^="fishing-activity-name"]').should('not.exist')
   })
 
@@ -108,8 +101,9 @@ context('Vessel sidebar controls buttons', () => {
       expect(request.url).contains(`${startDateAsDayjs.format('DD')}T01:02:00.000Z`)
       expect(request.url).contains(`${endDateAsDayjs.format('DD')}T03:04:59.000Z`)
     })
-    cy.getDataCy('vessel-track-depth-three-days').should('not.have.class', 'rs-radio-checked')
 
+    cy.wait(200)
+    cy.get('[name="vessel-track-depth"]').should('have.value', '')
     cy.getDataCy('vessel-menu-fishing').click()
     cy.getDataCy('custom-dates-showed-text').contains(
       new RegExp(
@@ -127,7 +121,7 @@ context('Vessel sidebar controls buttons', () => {
     cy.wait(200)
     cy.get('*[data-cy^="vessel-sidebar"]', { timeout: 10000 }).should('be.visible')
     cy.get('*[data-cy^="vessel-track-depth-selection"]').click({ timeout: 10000 })
-    cy.get('[data-cy="vessel-track-depth-three-days"] input').click({ timeout: 10000 })
+    cy.fill('Afficher la piste VMS depuis', '3 jours')
     cy.get('*[data-cy^="vessel-track-depth-selection"]').click({ timeout: 10000 })
     cy.intercept(
       'GET',

frontend/cypress/e2e/vessel_sidebar/logbook.spec.ts

@@ -137,7 +137,7 @@ context('Vessel sidebar logbook tab', () => {
     cy.wait(200)
     cy.get('*[data-cy^="vessel-sidebar"]', { timeout: 10000 }).should('be.visible')
     cy.get('*[data-cy^="vessel-track-depth-selection"]').click({ force: true, timeout: 10000 })
-    cy.get('[data-cy="vessel-track-depth-three-days"] input').click({ timeout: 10000 })
+    cy.fill('Afficher la piste VMS depuis', '3 jours')
     cy.get('*[data-cy^="vessel-track-depth-selection"]').click({ force: true, timeout: 10000 })
     cy.get('*[data-cy^="show-all-fishing-activities-on-map"]').click({ timeout: 10000 })
 
@@ -183,7 +183,7 @@ context('Vessel sidebar logbook tab', () => {
     cy.get('*[data-cy="custom-dates-show-last-positions"]').click()
     cy.get('*[data-cy="custom-dates-showed-text"]').should('not.exist')
     cy.get('*[data-cy^="vessel-track-depth-selection"]').click({ force: true, timeout: 10000 })
-    cy.get('[data-cy="vessel-track-depth-twelve-hours"]').should('have.class', 'rs-radio-checked')
+    cy.get('[name="vessel-track-depth"]').should('have.value', 'TWELVE_HOURS')
   })
 
   it('Single fishing activity Should be seen on map When clicking on the position icon', () => {
@@ -192,7 +192,7 @@ context('Vessel sidebar logbook tab', () => {
     cy.wait(200)
     cy.get('*[data-cy^="vessel-sidebar"]', { timeout: 10000 }).should('be.visible')
     cy.get('*[data-cy^="vessel-track-depth-selection"]').click({ force: true, timeout: 10000 })
-    cy.get('[data-cy="vessel-track-depth-three-days"] input').click({ timeout: 10000 })
+    cy.fill('Afficher la piste VMS depuis', '3 jours')
     cy.get('*[data-cy^="vessel-track-depth-selection"]').click({ force: true, timeout: 10000 })
 
     // When

frontend/cypress/e2e/vessels/vessel_search.spec.ts

@@ -74,9 +74,6 @@ context('VesselSearch', () => {
 
     // Then
     cy.get('*[data-cy^="vessel-track-depth-selection"]').click({ timeout: 10000 })
-    cy.get('[aria-rowindex="2"] > .rs-table-cell-group > [aria-colindex="2"] > .rs-table-cell-content').contains(
-      '14 nds',
-      { timeout: 10000 }
-    )
+    cy.get('[data-id="2"] > td').eq(2).contains('14 nds')
   })
 })

frontend/cypress/e2e/vessels/vessel_visibility.spec.ts

@@ -22,7 +22,7 @@ context('Vessel visibility', () => {
   it('Vessels default track depth Should be taken into account', () => {
     // Given
     cy.get('*[data-cy="vessel-visibility"]').click()
-    cy.get('[data-cy="global-vessel-track-depth-one-week"] input').click()
+    cy.fill('Afficher depuis', '1 semaine')
     cy.get('*[data-cy="vessel-visibility"]').click()
 
     // When
@@ -33,6 +33,6 @@ context('Vessel visibility', () => {
 
     // Then
     cy.get('*[data-cy^="vessel-track-depth-selection"]').click()
-    cy.get('*[data-cy^="vessel-track-depth-one-week"]').should('have.class', 'rs-radio-checked')
+    cy.get('[name="vessel-track-depth"]').should('have.value', 'ONE_WEEK')
   })
 })

frontend/src/domain/entities/vessel/types.ts

@@ -3,6 +3,7 @@
 import type { ReportingType } from '../../types/reporting'
 import type { VesselTrackDepth } from '../vesselTrackDepth'
 import type { Vessel } from '@features/Vessel/Vessel.types'
+import type { SelectableVesselTrackDepth } from '@features/VesselSidebar/actions/TrackRequest/types'
 import type Feature from 'ol/Feature'
 import type LineString from 'ol/geom/LineString'
 import type Point from 'ol/geom/Point'
@@ -190,7 +191,7 @@ export type TrackRequestCustom = {
 export type TrackRequestPredefined = {
   afterDateTime: null
   beforeDateTime: null
-  trackDepth: Exclude<VesselTrackDepth, 'CUSTOM'>
+  trackDepth: SelectableVesselTrackDepth
 }
 
 export interface VesselPointFeature extends Feature<Point> {

frontend/src/domain/shared_slices/Map.ts

@@ -7,6 +7,7 @@ import { VesselLabel } from '../entities/vessel/label/types'
 import { VesselTrackDepth } from '../entities/vesselTrackDepth'
 
 import type { LastPositionVisibility } from '../types/map'
+import type { SelectableVesselTrackDepth } from '@features/VesselSidebar/actions/TrackRequest/types'
 import type { PayloadAction } from '@reduxjs/toolkit'
 import type { Extent } from 'ol/extent'
 
@@ -28,7 +29,7 @@ export type MapState = {
   animateToExtent: boolean
   animateToRegulatoryLayer: { center?: [number, number]; extent?: [number, number] } | undefined
   coordinatesFormat: CoordinatesFormat
-  defaultVesselTrackDepth: VesselTrackDepth
+  defaultVesselTrackDepth: SelectableVesselTrackDepth
   doNotAnimate: boolean
   extent: null
   fitToExtent: Extent | undefined
@@ -159,7 +160,7 @@ const mapSlice = createSlice({
       state.riskFactorShowedOnMap = action.payload
     },
 
-    setVesselLabel(state, action) {
+    setVesselLabel(state, action: PayloadAction<string>) {
       window.localStorage.setItem(vesselLabelLocalStorageKey, JSON.stringify(action.payload))
       state.vesselLabel = action.payload
     },

frontend/src/domain/use_cases/vessel/updateDefaultVesselTrackDepth.ts

@@ -1,12 +1,16 @@
 import { updateVesselTracks } from './updateVesselTracks'
 import { setDefaultVesselTrackDepth } from '../../shared_slices/Map'
 
-import type { VesselTrackDepth } from '../../entities/vesselTrackDepth'
+import type { SelectableVesselTrackDepth } from '@features/VesselSidebar/actions/TrackRequest/types'
 
 /**
  * Update the global vessel track Depth and re-render the rendered vessels tracks
  */
-export const updateDefaultVesselTrackDepth = (trackDepth: VesselTrackDepth) => dispatch => {
+export const updateDefaultVesselTrackDepth = (trackDepth: SelectableVesselTrackDepth | undefined) => dispatch => {
+  if (!trackDepth) {
+    return
+  }
+
   dispatch(setDefaultVesselTrackDepth(trackDepth))
   dispatch(updateVesselTracks())
 }

frontend/src/features/BaseMap/components/BaseMaps/BaseMap.tsx

@@ -1,35 +1,44 @@
-import { Radio } from 'rsuite'
+import { Radio } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
 import { BaseLayers } from '../../../../domain/entities/layers/constants'
 
 type BaseLayerRowProps = {
   layer: string
+  onChange: (string) => void
+  selectedBaseLayer: string
 }
-export function BaseMap({ layer }: BaseLayerRowProps) {
+export function BaseMap({ layer, onChange, selectedBaseLayer }: BaseLayerRowProps) {
   return (
-    <Row className="base-layers-selection">
-      <Radio value={layer}>{BaseLayers[layer].text}</Radio>
+    <Row className="base-layers-selection" onClick={() => onChange(layer)}>
+      {BaseLayers[layer].text}{' '}
+      <StyledRadio checked={layer === selectedBaseLayer} name={layer} value={layer}>
+        {' '}
+      </StyledRadio>
     </Row>
   )
 }
 
+const StyledRadio = styled(Radio)`
+  margin-left: auto;
+  margin-right: 4px;
+  padding-top: 3px;
+`
+
 const Row = styled.li`
   padding: 6px 5px 5px 20px;
   margin: 0;
-  text-align: left;
   list-style-type: none;
   width: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden !important;
   cursor: pointer;
-  background: ${p => p.theme.color.white};
   color: ${p => p.theme.color.gunMetal};
   border-bottom: 1px solid ${p => p.theme.color.lightGray};
-  display: block;
-  line-height: 18px;
+  line-height: 25px;
   user-select: none;
+  display: flex;
 
   :hover {
     background: ${p => p.theme.color.blueGray25};

frontend/src/features/BaseMap/components/BaseMaps/index.tsx

@@ -1,15 +1,15 @@
+import { useIsInLightMode } from '@hooks/authorization/useIsInLightMode'
+import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
+import { useMainAppSelector } from '@hooks/useMainAppSelector'
+import { THEME } from '@mtes-mct/monitor-ui'
 import { useCallback, useMemo } from 'react'
 import { RadioGroup } from 'rsuite'
 import styled from 'styled-components'
 
 import { BaseMap } from './BaseMap'
-import { COLORS } from '../../../../constants/constants'
 import { BaseLayers, LayerType } from '../../../../domain/entities/layers/constants'
 import LayerSlice from '../../../../domain/shared_slices/Layer'
 import { selectBaseLayer } from '../../../../domain/shared_slices/Map'
-import { useIsInLightMode } from '../../../../hooks/authorization/useIsInLightMode'
-import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch'
-import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
 import { ChevronIcon } from '../../../commonStyles/icons/ChevronIcon.style'
 import { closeRegulatoryZoneMetadata } from '../../../Regulation/useCases/closeRegulatoryZoneMetadata'
 
@@ -58,7 +58,7 @@ export function BaseMaps({ namespace }) {
       <RadioGroup onChange={showLayer} value={selectedBaseLayer}>
         <List isShowed={isBaseLayersShowed} layersLength={baseLayers.length}>
           {baseLayers.map(layer => (
-            <BaseMap key={layer} layer={layer} />
+            <BaseMap key={layer} layer={layer} onChange={showLayer} selectedBaseLayer={selectedBaseLayer} />
           ))}
         </List>
       </RadioGroup>
@@ -71,8 +71,8 @@ const Title = styled.div<{
 }>`
   height: 30px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-  background: ${COLORS.charcoal};
-  color: ${COLORS.gainsboro};
+  background: ${THEME.color.charcoal};
+  color: ${THEME.color.gainsboro};
   font-size: 16px;
   padding-top: 5px;
   cursor: pointer;

frontend/src/features/Logbook/components/VesselLogbook/LogbookSummary/index.tsx

@@ -386,6 +386,10 @@ const TextValue = styled.div<{
     min-width: 120px !important;
     width: 120px !important;
   }
+
+  .rs-stack {
+    min-width: 125px;
+  }
 `
 
 const Body = styled.div`