Equipement VMS - Correction de l'erreur quand l'equipement n'est pas trouvé (#3330)

## Linked issues

- Resolve
#3223 (comment)

----

- [ ] Tests E2E (Cypress)

Author: louptheron

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

@@ -31,6 +31,20 @@ context('Vessel sidebar ers/vms tab', () => {
     cy.get('*[data-cy="vessel-equipments"]').contains('Non')
   })
 
+  it('ERS/VMS tab Should not throw When a beacon is missing', () => {
+    // Given
+    cy.get('input[placeholder="Rechercher un navire..."]').type('MERLU')
+    cy.contains('mark', 'MERLU').click()
+    cy.wait(50)
+    cy.get('*[data-cy="vessel-sidebar"]', { timeout: 10000 }).should('be.visible')
+    cy.intercept('GET', '/bff/v1/vessels/beacon_malfunctions*').as('vesselBeaconMalfunctions')
+
+    // When
+    cy.get('*[data-cy="vessel-menu-ers-vms"]').click({ timeout: 10000 })
+
+    // Then, it does not throw
+  })
+
   it('ERS/VMS tab Should contain history of beacon malfunctions and show a malfunction detail in history', () => {
     // Given
     cy.get('.VESSELS_POINTS').click(460, 460, { force: true, timeout: 10000 })

frontend/src/features/Vessel/Vessel.types.ts

@@ -42,7 +42,7 @@ export namespace Vessel {
   }
 
   export interface EnrichedVessel extends Vessel {
-    beacon: Beacon
+    beacon: Beacon | undefined
     hasLogbookEsacapt: boolean
     hasVisioCaptures: boolean | undefined
     logbookEquipmentStatus: string | undefined

frontend/src/features/VesselSidebar/Equipment/resume/EquipmentResume.tsx

@@ -52,6 +52,14 @@ export function EquipmentResume({ setIsCurrentBeaconMalfunctionDetails }: Beacon
     dispatch(setVesselBeaconMalfunctionsFromDate(nextDate))
   }
 
+  const beaconType = useMemo(() => {
+    if (selectedVessel?.beacon?.isCoastal === undefined) {
+      return undefined
+    }
+
+    return selectedVessel.beacon.isCoastal ? 'Côtier' : 'Satellitaire'
+  }, [selectedVessel?.beacon?.isCoastal])
+
   return (
     <>
       {!loadingVesselBeaconMalfunctions ? (
@@ -61,16 +69,17 @@ export function EquipmentResume({ setIsCurrentBeaconMalfunctionDetails }: Beacon
               column={[
                 {
                   key: 'N° balise VMS',
-                  value: selectedVessel?.beacon.beaconNumber
+                  value: selectedVessel?.beacon?.beaconNumber
                 },
                 {
                   key: 'Type de balise',
-                  value: selectedVessel?.beacon.isCoastal ? 'Côtier' : 'Satellitaire'
+                  value: beaconType
                 },
                 {
                   key: 'Date de loggage',
                   value:
-                    !!selectedVessel?.beacon.loggingDatetimeUtc && getDateTime(selectedVessel.beacon.loggingDatetimeUtc)
+                    !!selectedVessel?.beacon?.loggingDatetimeUtc &&
+                    getDateTime(selectedVessel.beacon.loggingDatetimeUtc)
                 }
               ]}
               valueEllipsisedForWidth={100}

frontend/src/features/VesselSidebar/Identity/index.tsx

@@ -1,20 +1,21 @@
 import { FlatTwoColumnKeyValue } from '@features/VesselSidebar/common/FlatTwoColumnKeyValue'
+import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
+import { useMainAppSelector } from '@hooks/useMainAppSelector'
+import { THEME } from '@mtes-mct/monitor-ui'
 import countries from 'i18n-iso-countries'
 import { useEffect, useMemo } from 'react'
 import { FingerprintSpinner } from 'react-epic-spinners'
 import styled from 'styled-components'
 
-import { COLORS } from '../../../constants/constants'
 import { showVessel } from '../../../domain/use_cases/vessel/showVessel'
-import { useMainAppDispatch } from '../../../hooks/useMainAppDispatch'
-import { useMainAppSelector } from '../../../hooks/useMainAppSelector'
 import { getDate } from '../../../utils'
 
 export function Identity() {
   const dispatch = useMainAppDispatch()
-  const { loadingVessel, selectedVessel, selectedVesselIdentity, selectedVesselPositions } = useMainAppSelector(
-    state => state.vessel
-  )
+  const loadingVessel = useMainAppSelector(state => state.vessel.loadingVessel)
+  const selectedVessel = useMainAppSelector(state => state.vessel.selectedVessel)
+  const selectedVesselIdentity = useMainAppSelector(state => state.vessel.selectedVesselIdentity)
+  const selectedVesselPositions = useMainAppSelector(state => state.vessel.selectedVesselPositions)
   const gears = useMainAppSelector(state => state.gear.gears)
 
   const lastPosition = useMemo(() => {
@@ -52,11 +53,12 @@ export function Identity() {
     if (selectedVessel && selectedVessel[propertyName]) {
       return selectedVessel[propertyName]
     }
+
     if (lastPosition && lastPosition[propertyName]) {
       return lastPosition[propertyName]
     }
 
-    return <NoValue>-</NoValue>
+    return undefined
   }
 
   return !loadingVessel ? (
@@ -73,7 +75,7 @@ export function Identity() {
           },
           {
             key: 'Balise n°',
-            value: getVesselOrLastPositionProperty('beaconNumber')
+            value: selectedVessel?.beacon?.beaconNumber
           }
         ]}
         secondColumn={[
@@ -272,7 +274,7 @@ export function Identity() {
       </Zone>
     </Body>
   ) : (
-    <FingerprintSpinner className="radar" color={COLORS.charcoal} size={100} />
+    <FingerprintSpinner className="radar" color={THEME.color.charcoal} size={100} />
   )
 }