Apply various review comments

frontend/cypress/e2e/side_window/mission_list/filter_bar.spec.ts

@@ -3,7 +3,7 @@ import { customDayjs } from '../../utils/customDayjs'
 import { getUtcDateInMultipleFormats } from '../../utils/getUtcDateInMultipleFormats'
 
 // TODO Add search query, custom period and filter reset E2E tests.
-context('Side Window > Mission List > Filter Bar', () => {
+context('Side Window > Mission List > VesselFilter Bar', () => {
   beforeEach(() => {
     openSideWindowMissionList()
   })

frontend/cypress/e2e/side_window/mission_list/sea_front_filter.spec.ts

@@ -1,6 +1,6 @@
 import { openSideWindowMissionList } from './utils'
 
-context('Side Window > Mission List > Sea Front Filter (= submenu)', () => {
+context('Side Window > Mission List > Sea Front VesselFilter (= submenu)', () => {
   beforeEach(() => {
     openSideWindowMissionList()
   })

frontend/cypress/e2e/side_window/prior_notification_list/filter_bar.spec.ts

@@ -7,7 +7,7 @@ import { assertAll } from '../../utils/assertAll'
 import { customDayjs } from '../../utils/customDayjs'
 import { getUtcDateInMultipleFormats } from '../../utils/getUtcDateInMultipleFormats'
 
-context('Side Window > Prior Notification List > Filter Bar', () => {
+context('Side Window > Prior Notification List > VesselFilter Bar', () => {
   const apiPathBase = '/bff/v1/prior_notifications?'
 
   it('Should filter prior notifications by seafront group', () => {

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

@@ -3,7 +3,7 @@ context('Vessel filters', () => {
     cy.loadPath('/#@-824534.42,6082993.21,8.70')
   })
 
-  it('A Filter Should be created and added on the map', () => {
+  it('A VesselFilter Should be created and added on the map', () => {
     // Given
     cy.get('*[data-cy^="vessel-list"]').click({ timeout: 10000 })
     cy.get('*[data-cy="vessel-list-country-filter"]').click({ force: true })

frontend/src/domain/use_cases/alert/silenceAlert.ts

@@ -1,5 +1,5 @@
 import { removeVesselAlertAndUpdateReporting } from '@features/Vessel/slice'
-import { renderVessels } from '@features/Vessel/useCases/renderVessels'
+import { renderVesselFeatures } from '@features/Vessel/useCases/renderVesselFeatures'
 
 import { silenceAlertFromAPI } from '../../../api/alert'
 import {
@@ -49,7 +49,7 @@ export const silenceAlert =
 
       const nextSilencedAlerts = [silencedAlert, ...previousSilencedAlerts]
       dispatch(setSilencedAlerts(nextSilencedAlerts))
-      await dispatch(renderVessels())
+      dispatch(renderVesselFeatures())
     } catch (error) {
       clearTimeout(timeout)
 

frontend/src/domain/use_cases/alert/validateAlert.ts

@@ -1,6 +1,6 @@
 import { getVesselReportings } from '@features/Reporting/useCases/getVesselReportings'
 import { removeVesselAlertAndUpdateReporting } from '@features/Vessel/slice'
-import { renderVessels } from '@features/Vessel/useCases/renderVessels'
+import { renderVesselFeatures } from '@features/Vessel/useCases/renderVesselFeatures'
 
 import { validateAlertFromAPI } from '../../../api/alert'
 import { setPendingAlerts } from '../../../features/SideWindow/Alert/slice'
@@ -42,7 +42,7 @@ export const validateAlert =
           vesselFeatureId: Vessel.getVesselFeatureId(validatedAlert)
         })
       )
-      await dispatch(renderVessels())
+      dispatch(renderVesselFeatures())
     } catch (error) {
       clearTimeout(timeout)
       dispatch(setPendingAlerts(previousAlerts))

frontend/src/features/MainWindow/components/MapButtons/index.tsx

@@ -1,5 +1,6 @@
 import { Account } from '@features/Account/components/Account'
 import { ControlUnitListMapButton } from '@features/ControlUnit/components/ControlUnitListMapButton'
+import { VesselFiltersMapButton } from '@features/VesselFilter/components/VesselFilters'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
 import { LegacyRsuiteComponentsWrapper } from 'ui/LegacyRsuiteComponentsWrapper'
 
@@ -10,7 +11,6 @@ import { MissionsMenu } from './Missions'
 import { VesselLabelsMapButton } from './VesselLabels'
 import { VesselVisibilityMapButton } from './VesselVisibility'
 import { useIsSuperUser } from '../../../../auth/hooks/useIsSuperUser'
-import { VesselFiltersMapButton } from '../../../Filter/components/VesselFilters'
 import { InterestPointMapButton } from '../../../InterestPoint/components/InterestPointMapButton'
 import { MeasurementMapButton } from '../../../Measurement/components/MeasurementMapButton'
 import { PriorNotificationListButton } from '../../../PriorNotification/components/PriorNotificationListButton'

frontend/src/features/Regulation/slice.ts

@@ -221,17 +221,6 @@ const regulatorySlice = createSlice({
       state.regulatoryZoneMetadataPanelIsOpen = true
     },
 
-    /**
-     * Set the regulation searched zone extent - used to fit the extent into the OpenLayers view
-     * @function setProcessingRegulationSearchedZoneExtent
-     * @memberOf RegulatoryReducer
-     * @param {Object=} state
-     * @param {{payload: number[]}} action - the extent
-     */
-    setProcessingRegulationSearchedZoneExtent(state, action) {
-      state.regulationSearchedZoneExtent = action.payload
-    },
-
     setRegulatoryGeometriesToPreview(state, action: PayloadAction<Partial<RegulatoryZone>[]>) {
       state.regulatoryZonesToPreview = action.payload
     },
@@ -313,6 +302,17 @@ const regulatorySlice = createSlice({
       state.regulatoryZones = action.payload
     },
 
+    /**
+     * Set the regulation searched zone extent - used to fit the extent into the OpenLayers view
+     * @function setSearchedRegulationZoneExtent
+     * @memberOf RegulatoryReducer
+     * @param {Object=} state
+     * @param {{payload: number[]}} action - the extent
+     */
+    setSearchedRegulationZoneExtent(state, action) {
+      state.regulationSearchedZoneExtent = action.payload
+    },
+
     setSelectedRegulatoryZone(state, action) {
       if (action.payload?.length) {
         const regulatoryLayers = action.payload
@@ -369,20 +369,18 @@ export const {
   addRegulatoryZonesToMyLayers,
   closeRegulatoryZoneMetadataPanel,
   removeRegulatoryTopicOpened,
-  removeSelectedZoneById,
-  removeSelectedZonesByTopic,
   resetLoadingRegulatoryZoneMetadata,
   resetRegulatoryGeometriesToPreview,
   setLawTypeOpened,
   setLayersTopicsByRegTerritory,
   setLoadingRegulatoryZoneMetadata,
-  setProcessingRegulationSearchedZoneExtent,
   setRegulatoryGeometriesToPreview,
   setRegulatoryLayerLawTypes,
   setRegulatoryTopics,
   setRegulatoryTopicsOpened,
   setRegulatoryZoneMetadata,
   setRegulatoryZones,
+  setSearchedRegulationZoneExtent,
   setSelectedRegulatoryZone,
   showSimplifiedGeometries,
   showWholeGeometries

frontend/src/features/Reporting/useCases/addReporting.ts

@@ -1,6 +1,6 @@
 import { addReportingFromAPI } from '@api/reporting'
 import { getVesselReportings } from '@features/Reporting/useCases/getVesselReportings'
-import { renderVessels } from '@features/Vessel/useCases/renderVessels'
+import { renderVesselFeatures } from '@features/Vessel/useCases/renderVesselFeatures'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 
 import { Vessel } from '../../../domain/entities/vessel/vessel'
@@ -26,7 +26,7 @@ export const addReporting =
           vesselFeatureId: Vessel.getVesselFeatureId(selectedVesselIdentity)
         })
       )
-      await dispatch(renderVessels())
+      dispatch(renderVesselFeatures())
       await dispatch(getVesselReportings(true))
     } catch (error) {
       dispatch(

frontend/src/features/Reporting/useCases/archiveReporting.ts

@@ -1,7 +1,7 @@
 import { archiveReportingFromAPI } from '@api/reporting'
 import { ReportingType } from '@features/Reporting/types'
 import { getVesselReportings } from '@features/Reporting/useCases/getVesselReportings'
-import { renderVessels } from '@features/Vessel/useCases/renderVessels'
+import { renderVesselFeatures } from '@features/Vessel/useCases/renderVesselFeatures'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 
 import { Vessel } from '../../../domain/entities/vessel/vessel'
@@ -26,7 +26,7 @@ export const archiveReporting =
           vesselFeatureId: Vessel.getVesselFeatureId(selectedVesselIdentity)
         })
       )
-      await dispatch(renderVessels())
+      dispatch(renderVesselFeatures())
 
       await dispatch(getVesselReportings(true))
     } catch (error) {

frontend/src/features/Reporting/useCases/archiveReportings.ts

@@ -1,6 +1,6 @@
 import { archiveReportingsFromAPI } from '@api/reporting'
 import { getVesselReportings } from '@features/Reporting/useCases/getVesselReportings'
-import { renderVessels } from '@features/Vessel/useCases/renderVessels'
+import { renderVesselFeatures } from '@features/Vessel/useCases/renderVesselFeatures'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 
 import { Vessel } from '../../../domain/entities/vessel/vessel'
@@ -22,7 +22,7 @@ export const archiveReportings =
 
       dispatch(removeReportingsIdsFromCurrentReportings(ids))
       dispatch(removeVesselReportings(reportingsInformation))
-      await dispatch(renderVessels())
+      dispatch(renderVesselFeatures())
 
       await dispatch(getVesselReportings(false))
     } catch (error) {

frontend/src/features/Reporting/useCases/deleteReporting.ts

@@ -1,7 +1,7 @@
 import { deleteReportingFromAPI } from '@api/reporting'
 import { ReportingType } from '@features/Reporting/types'
 import { getVesselReportings } from '@features/Reporting/useCases/getVesselReportings'
-import { renderVessels } from '@features/Vessel/useCases/renderVessels'
+import { renderVesselFeatures } from '@features/Vessel/useCases/renderVesselFeatures'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 
 import { Vessel } from '../../../domain/entities/vessel/vessel'
@@ -26,7 +26,7 @@ export const deleteReporting =
           vesselFeatureId: Vessel.getVesselFeatureId(selectedVesselIdentity)
         })
       )
-      await dispatch(renderVessels())
+      dispatch(renderVesselFeatures())
 
       await dispatch(getVesselReportings(true))
     } catch (error) {

frontend/src/features/Reporting/useCases/deleteReportings.ts

@@ -1,6 +1,6 @@
 import { deleteReportingsFromAPI } from '@api/reporting'
 import { getVesselReportings } from '@features/Reporting/useCases/getVesselReportings'
-import { renderVessels } from '@features/Vessel/useCases/renderVessels'
+import { renderVesselFeatures } from '@features/Vessel/useCases/renderVesselFeatures'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 
 import { Vessel } from '../../../domain/entities/vessel/vessel'
@@ -22,7 +22,7 @@ export const deleteReportings =
 
       dispatch(removeReportingsIdsFromCurrentReportings(ids))
       dispatch(removeVesselReportings(reportingsInformation))
-      await dispatch(renderVessels())
+      dispatch(renderVesselFeatures())
 
       await dispatch(getVesselReportings(false))
     } catch (error) {

frontend/src/features/Reporting/useCases/updateReporting.ts

@@ -1,7 +1,7 @@
 import { updateReportingFromAPI } from '@api/reporting'
 import { ReportingType } from '@features/Reporting/types'
 import { getVesselReportings } from '@features/Reporting/useCases/getVesselReportings'
-import { renderVessels } from '@features/Vessel/useCases/renderVessels'
+import { renderVesselFeatures } from '@features/Vessel/useCases/renderVesselFeatures'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 
 import { Vessel } from '../../../domain/entities/vessel/vessel'
@@ -54,7 +54,7 @@ export const updateReporting =
             vesselFeatureId
           })
         )
-        await dispatch(renderVessels())
+        dispatch(renderVesselFeatures())
       }
 
       // If the update is done from the Reporting tab of the vessel sidebar

frontend/src/features/Vessel/components/VesselCardOverlay/VesselCard.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-nested-ternary */
 
+import { extractVesselPropertiesFromFeature } from '@features/Vessel/utils'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
 import { Icon } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
@@ -20,24 +21,24 @@ timeago.register('fr', timeagoFrenchLocale)
 export function VesselCard({ feature, numberOfWarnings, overlayPosition }) {
   const isSuperUser = useIsSuperUser()
   const coordinatesFormat = useMainAppSelector(state => state.map.coordinatesFormat)
-  const vesselProperties = {
-    alerts: feature.get('alerts'),
-    beaconMalfunctionId: feature.get('beaconMalfunctionId'),
-    course: feature.get('course'),
-    dateTime: feature.get('dateTime'),
-    emissionPeriod: feature.get('emissionPeriod'),
-    externalReferenceNumber: feature.get('externalReferenceNumber'),
-    flagState: feature.get('flagState'),
-    hasInfractionSuspicion: feature.get('hasInfractionSuspicion'),
-    internalReferenceNumber: feature.get('internalReferenceNumber'),
-    ircs: feature.get('ircs'),
-    lastLogbookMessageDateTime: feature.get('lastLogbookMessageDateTime'),
-    length: feature.get('length'),
-    mmsi: feature.get('mmsi'),
-    speed: feature.get('speed'),
-    vesselName: feature.get('vesselName'),
-    width: feature.get('width')
-  }
+  const vesselProperties = extractVesselPropertiesFromFeature(feature, [
+    'alerts',
+    'beaconMalfunctionId',
+    'course',
+    'dateTime',
+    'emissionPeriod',
+    'externalReferenceNumber',
+    'flagState',
+    'hasInfractionSuspicion',
+    'internalReferenceNumber',
+    'ircs',
+    'lastLogbookMessageDateTime',
+    'length',
+    'mmsi',
+    'speed',
+    'vesselName',
+    'width'
+  ])
   const featureCoordinates = feature.getGeometry().getCoordinates()
 
   return (

frontend/src/features/Vessel/components/VesselList/VesselListFilters.tsx

@@ -1,6 +1,5 @@
 import { COUNTRIES_AS_ALPHA2_OPTIONS } from '@constants/index'
 import getAdministrativeZoneGeometry from '@features/AdministrativeZone/useCases/getAdministrativeZoneGeometry'
-import { FilterTag } from '@features/Filter/components/VesselFilters/FilterTag'
 import { useGetFleetSegmentsQuery } from '@features/FleetSegment/apis'
 import {
   removeZoneSelected,
@@ -16,6 +15,7 @@ import {
   setZonesFilter,
   setZonesSelected
 } from '@features/Vessel/components/VesselList/slice'
+import { FilterTag } from '@features/VesselFilter/components/VesselFilters/FilterTag'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
 import { THEME } from '@mtes-mct/monitor-ui'

frontend/src/features/Vessel/components/VesselList/VesselListModal.tsx

@@ -1,12 +1,12 @@
 import { StyledModalHeader } from '@features/commonComponents/StyledModalHeader'
 import { PrimaryButton, SecondaryButton } from '@features/commonStyles/Buttons.style'
-import { SaveVesselFiltersModal } from '@features/Filter/components/SaveVesselFiltersModal'
 import { DownloadVesselListModal } from '@features/Vessel/components/VesselList/DownloadVesselListModal'
 import { VesselIcon } from '@features/Vessel/components/VesselList/index'
 import { VesselListFilters } from '@features/Vessel/components/VesselList/VesselListFilters'
 import { VesselListTable } from '@features/Vessel/components/VesselList/VesselListTable'
 import { vesselSelectors } from '@features/Vessel/slice'
 import { previewVessels } from '@features/Vessel/useCases/previewVessels'
+import { SaveVesselFiltersModal } from '@features/VesselFilter/components/SaveVesselFiltersModal'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
 import { THEME } from '@mtes-mct/monitor-ui'

frontend/src/features/Vessel/components/VesselList/tableSort.ts

@@ -47,8 +47,8 @@ export function sortArrayByColumn(a, b, sortColumn, sortType) {
 }
 
 export function sortVesselsByProperty(a, b, sortColumn, sortType) {
-  let x = a[sortColumn] || a[sortColumn]
-  let y = b[sortColumn] || b[sortColumn]
+  let x = a[sortColumn]
+  let y = b[sortColumn]
 
   if (sortColumn === CSVOptions.flagState.code) {
     x = countries.getName(a[sortColumn], 'fr')

frontend/src/features/Vessel/layers/VesselAlertLayer.jsx

@@ -15,7 +15,7 @@ import {
 } from '../../../domain/entities/vessel/vessel'
 import { useIsSuperUser } from '../../../auth/hooks/useIsSuperUser'
 import { monitorfishMap } from '../../map/monitorfishMap'
-import { vesselsAdapter, vesselSelectors } from '../slice'
+import { vesselSelectors } from '../slice'
 
 const VesselAlertLayer = () => {
   const isSuperUser = useIsSuperUser()

frontend/src/features/Vessel/layers/VesselBeaconMalfunctionLayer.jsx

@@ -10,7 +10,7 @@ import { getVesselBeaconMalfunctionStyle } from './style'
 import { getVesselCompositeIdentifier, vesselIsShowed } from '../../../domain/entities/vessel/vessel'
 import { useIsSuperUser } from '../../../auth/hooks/useIsSuperUser'
 import { monitorfishMap } from '../../map/monitorfishMap'
-import { vesselsAdapter, vesselSelectors } from '../slice'
+import { vesselSelectors } from '../slice'
 
 const VesselBeaconMalfunctionLayer = () => {
   const isSuperUser = useIsSuperUser()

frontend/src/features/Vessel/layers/VesselsLabelsLayer.tsx

@@ -1,3 +1,4 @@
+import { extractVesselPropertiesFromFeature } from '@features/Vessel/utils'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
 import { usePrevious } from '@mtes-mct/monitor-ui'
 import LineString from 'ol/geom/LineString'
@@ -233,23 +234,23 @@ export function VesselsLabelsLayer({ mapMovingAndZoomEvent }) {
       }
 
       const nextFeaturesAndLabels = features.map(feature => {
-        const vesselProperties = {
-          beaconMalfunctionId: feature.get('beaconMalfunctionId'),
-          dateTime: feature.get('dateTime'),
-          detectabilityRiskFactor: feature.get('detectabilityRiskFactor'),
-          flagState: feature.get('flagState'),
-          impactRiskFactor: feature.get('impactRiskFactor'),
-          internalReferenceNumber: feature.get('internalReferenceNumber'),
-          isAtPort: feature.get('isAtPort'),
-          lastControlDateTime: feature.get('lastControlDateTime'),
-          probabilityRiskFactor: feature.get('probabilityRiskFactor'),
-          riskFactor: feature.get('riskFactor'),
-          segments: feature.get('segments'),
-          underCharter: feature.get('underCharter'),
-          vesselId: feature.get('vesselId'),
-          vesselIdentifier: feature.get('vesselIdentifier'),
-          vesselName: feature.get('vesselName')
-        }
+        const vesselProperties = extractVesselPropertiesFromFeature(feature, [
+          'beaconMalfunctionId',
+          'dateTime',
+          'detectabilityRiskFactor',
+          'flagState',
+          'impactRiskFactor',
+          'internalReferenceNumber',
+          'isAtPort',
+          'lastControlDateTime',
+          'probabilityRiskFactor',
+          'riskFactor',
+          'segments',
+          'underCharter',
+          'vesselId',
+          'vesselIdentifier',
+          'vesselName'
+        ])
         const label = Vessel.getVesselFeatureLabel(vesselProperties, {
           hideVesselsAtPort,
           isRiskFactorShowed: isSuperUser && riskFactorShowedOnMap,