Refactor fleet segment display to handle plurial

MTES-MCT · Feb 6, 2025 · dbd71d0 · dbd71d0
1 parent abb61ee
commit dbd71d0
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 48 deletions.
diff --git a/frontend/cypress/e2e/main_window/vessel_sidebar/logbook.spec.ts b/frontend/cypress/e2e/main_window/vessel_sidebar/logbook.spec.ts
@@ -45,7 +45,7 @@ context('Vessel sidebar logbook tab', () => {
     cy.get('*[data-cy^="vessel-menu-fishing"]', { timeout: 10000 }).should('be.visible')
 
     cy.get('*[data-cy="Zones de la marée"]').contains('27.8.b, 27.8.c')
-    cy.get('*[data-cy="Engins de la marée (FAR)"]').contains('Chaluts de fond à panneaux (OTB)')
+    cy.get('*[data-cy="Engin de la marée (FAR)"]').contains('Chaluts de fond à panneaux (OTB)')
     cy.get('*[data-cy="Majorité d\'espèces à bord"]').contains('Pélagique')
     cy.get('*[data-cy="Espèces cibles à bord"]').contains('NEP (≥ 20% du total des captures)')
 

diff --git a/frontend/cypress/e2e/main_window/vessel_sidebar/resume.spec.ts b/frontend/cypress/e2e/main_window/vessel_sidebar/resume.spec.ts
@@ -21,7 +21,7 @@ context('Vessel sidebar resume tab', () => {
     cy.get('*[data-cy^="impact-risk-factor"]').contains('2.1')
     cy.get('*[data-cy^="impact-risk-factor"]').click({ force: true, timeout: 10000 })
     cy.get('*[data-cy="Zones de la marée"]').contains('27.8.b, 27.8.c')
-    cy.get('*[data-cy="Engins de la marée (FAR)"]').contains('Chaluts de fond à panneaux (OTB)')
+    cy.get('*[data-cy="Engin de la marée (FAR)"]').contains('Chaluts de fond à panneaux (OTB)')
     cy.get('*[data-cy="Majorité d\'espèces à bord"]').contains('Pélagique')
     cy.get('*[data-cy="Espèces cibles à bord"]').contains('NEP (≥ 20% du total des captures)')
 

diff --git a/frontend/src/features/FleetSegment/components/VesselCurrentFleetSegmentDetails/index.tsx b/frontend/src/features/FleetSegment/components/VesselCurrentFleetSegmentDetails/index.tsx
@@ -8,6 +8,7 @@ import {
 import { SpeciesTypeToSpeciesTypeLabel } from '@features/FleetSegment/constants'
 import { FlatKeyValue } from '@features/Vessel/components/VesselSidebar/common/FlatKeyValue'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
+import { pluralize } from '@mtes-mct/monitor-ui'
 import { type ForwardedRef, forwardRef, useMemo } from 'react'
 import styled from 'styled-components'
 
@@ -41,17 +42,18 @@ function VesselCurrentFleetSegmentDetailsWithRef(
 
   const targetSpeciesIncludedInSegments = getTargetSpeciesIncludedInSegments(riskFactor, fleetSegments)
   const gearsWithName = getGearsWithNames(gearsReferential, riskFactor)
+  const numberOfGears = gearsWithName?.length ?? 0
   const faoZones = getFaoZones(riskFactor)
 
   const columns = useMemo(() => {
     let baseColumns = [
       {
-        key: 'Zones de la marée',
-        value: faoZones
+        key: `${pluralize('Zone', faoZones.length)} de la marée`,
+        value: faoZones.length > 0 ? faoZones.join(', ') : undefined
       },
       {
         hasMultipleLines: true,
-        key: 'Engins de la marée (FAR)',
+        key: `${pluralize('Engin', numberOfGears)} de la marée (FAR)`,
         value: gearsWithName?.length ? (
           <>
             {gearsWithName?.map(gear => (
@@ -67,7 +69,7 @@ function VesselCurrentFleetSegmentDetailsWithRef(
     if (isFleetSegmentSpecifyingMeshSize) {
       baseColumns = baseColumns.concat({
         hasMultipleLines: true,
-        key: 'Maillage des engins',
+        key: `Maillage ${pluralize('de', numberOfGears)} ${numberOfGears === 1 ? "l'" : ''}${pluralize('engin', numberOfGears)}`,
         value: (
           <>
             {gearsWithName?.map(gear => (
@@ -95,7 +97,14 @@ function VesselCurrentFleetSegmentDetailsWithRef(
     }
 
     return baseColumns
-  }, [faoZones, mainScipSpeciesType, isFleetSegmentSpecifyingMeshSize, targetSpeciesIncludedInSegments, gearsWithName])
+  }, [
+    faoZones,
+    numberOfGears,
+    mainScipSpeciesType,
+    isFleetSegmentSpecifyingMeshSize,
+    targetSpeciesIncludedInSegments,
+    gearsWithName
+  ])
 
   return <FlatKeyValue ref={ref} className={className} column={columns} keyWidth={170} />
 }

diff --git a/frontend/src/features/FleetSegment/components/VesselCurrentFleetSegmentDetails/utils.ts b/frontend/src/features/FleetSegment/components/VesselCurrentFleetSegmentDetails/utils.ts
@@ -38,20 +38,22 @@ export function getGearsWithNames(gearsReferential: Gear[] | undefined, riskFact
     return undefined
   }
 
-  return riskFactor.gearOnboard.map(gear => {
-    const gearName =
-      gearsReferential?.find(gearFromReferential => gearFromReferential.code === gear.gear)?.name ?? undefined
-
-    return { ...gear, gearName }
-  })
+  return riskFactor.gearOnboard
+    .filter(gear => !!gear.gear)
+    .map(gear => {
+      const gearName =
+        gearsReferential?.find(gearFromReferential => gearFromReferential.code === gear.gear)?.name ?? undefined
+
+      return { ...gear, gearName }
+    })
 }
 
-export function getFaoZones(riskFactor: RiskFactor | undefined): string | undefined {
+export function getFaoZones(riskFactor: RiskFactor | undefined): string[] {
   if (!riskFactor?.speciesOnboard) {
-    return undefined
+    return []
   }
 
   const nextFaoZones = riskFactor.speciesOnboard.map(species => species.faoZone)
 
-  return uniq(nextFaoZones).join(', ')
+  return uniq(nextFaoZones)
 }
diff --git a/frontend/src/features/FleetSegment/constants.ts b/frontend/src/features/FleetSegment/constants.ts
@@ -7,8 +7,8 @@ export const FLEET_SEGMENT_VESSEL_TYPES = [
 ]
 
 export const SpeciesTypeToSpeciesTypeLabel: Record<ScipSpeciesType, string> = {
-  [ScipSpeciesType.DEMERSAL]: 'Démersal',
+  [ScipSpeciesType.DEMERSAL]: 'Démersales',
   [ScipSpeciesType.OTHER]: 'Autres',
-  [ScipSpeciesType.PELAGIC]: 'Pélagique',
-  [ScipSpeciesType.TUNA]: 'Thon'
+  [ScipSpeciesType.PELAGIC]: 'Pélagiques',
+  [ScipSpeciesType.TUNA]: 'Thons'
 }
diff --git a/...src/features/Logbook/components/VesselLogbook/LogbookSummary/FleetSegmentsWithTooltip.tsx b/...src/features/Logbook/components/VesselLogbook/LogbookSummary/FleetSegmentsWithTooltip.tsx
@@ -1,5 +1,5 @@
 import { useGetFleetSegmentsQuery } from '@features/FleetSegment/apis'
-import { Icon } from '@mtes-mct/monitor-ui'
+import { Icon, THEME } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
 import { getSegmentInfo, getTripSegments } from './utils'
@@ -17,13 +17,13 @@ export function FleetSegmentsWithTooltip({ segments }: FleetSegmentsProps) {
       {segments ? (
         segments.map((segment, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <span key={index}>
+          <Text key={index}>
             {segment}
             <TitleWrapper title={getSegmentInfo(tripSegments[index])}>
-              <StyledIconInfo size={16} />
+              <StyledIconInfo color={THEME.color.gunMetal} size={18} />
             </TitleWrapper>
             {segments.length === index + 1 ? '' : ', '}
-          </span>
+          </Text>
         ))
       ) : (
         <NoValue>-</NoValue>
@@ -32,8 +32,10 @@ export function FleetSegmentsWithTooltip({ segments }: FleetSegmentsProps) {
   )
 }
 
+const Text = styled.span``
+
 const TitleWrapper = styled.span`
-  vertical-align: baseline;
+  vertical-align: middle;
 `
 
 const NoValue = styled.span`

diff --git a/frontend/src/features/Logbook/components/VesselLogbook/LogbookSummary/index.tsx b/frontend/src/features/Logbook/components/VesselLogbook/LogbookSummary/index.tsx
@@ -3,7 +3,7 @@ import { VesselCurrentFleetSegmentDetails } from '@features/FleetSegment/compone
 import { getLastLogbookTripsOptions } from '@features/Logbook/components/VesselLogbook/LogbookMessages/utils'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
-import { Accent, Icon, IconButton, Select } from '@mtes-mct/monitor-ui'
+import { Accent, Icon, IconButton, pluralize, Select } from '@mtes-mct/monitor-ui'
 import { skipToken } from '@reduxjs/toolkit/query'
 import { useMemo } from 'react'
 import styled from 'styled-components'
@@ -64,13 +64,18 @@ export function LogbookSummary({ showLogbookMessages }: LogbookSummaryProps) {
   const getLogbookTrip = (nextTripNumber: string | undefined) =>
     dispatch(getVesselLogbook(selectedVesselIdentity, NavigateTo.EQUALS, true, nextTripNumber))
 
+  const numberOfSegments = selectedVessel?.segments?.length ?? 0
+
   return (
     <>
       {fishingActivities ? (
         <Body>
           <Zone $isWhite>
             <Title>
-              <Text>Segment(s) de flotte(s) actuel(s)</Text>
+              <Text>
+                {pluralize('Segment', numberOfSegments)} de {pluralize('flotte', numberOfSegments)}{' '}
+                {pluralize('actuel', numberOfSegments)}
+              </Text>
               <TextValue>
                 <FleetSegmentsWithTooltip segments={selectedVessel?.segments} />
               </TextValue>

diff --git a/frontend/src/features/Logbook/components/VesselLogbook/LogbookSummary/utils.ts b/frontend/src/features/Logbook/components/VesselLogbook/LogbookSummary/utils.ts
@@ -1,6 +1,7 @@
 import { SpeciesTypeToSpeciesTypeLabel } from '@features/FleetSegment/constants'
+import { pluralize } from '@mtes-mct/monitor-ui'
 
-import type { FleetSegment } from '../../../../FleetSegment/types'
+import type { FleetSegment } from '@features/FleetSegment/types'
 
 export function getTripSegments(
   segments: string[] | undefined,
@@ -26,14 +27,17 @@ export function getSegmentInfo(segment: FleetSegment | undefined): string {
   }
 
   const gears = segment.gears?.length ? segment.gears.join(', ') : 'aucun'
+  const numberOfGears = segment.gears?.length ?? 0
   const faoAreas = segment.faoAreas?.length ? segment.faoAreas.join(', ') : 'aucune'
+  const numberOfFaoAreas = segment.faoAreas?.length ?? 0
   const targetSpecies = segment.targetSpecies?.length ? segment.targetSpecies.join(', ') : 'aucune'
+  const numberOfTargetSpecies = segment.targetSpecies?.length ?? 0
   const percent = segment.minShareOfTargetSpecies ? segment.minShareOfTargetSpecies * 100 : undefined
 
-  return `Zones : ${faoAreas}
-Engins : ${gears}
+  return `${pluralize('Zone', numberOfFaoAreas)} : ${faoAreas}
+${pluralize('Engin', numberOfGears)} : ${gears}
 Maillage min. : ${segment.minMesh ? `${segment.minMesh}mm` : 'aucun'}
 Maillage max. : ${segment.maxMesh ? `${segment.maxMesh}mm` : 'aucun'}
 Majorité d'espèces : ${segment.mainScipSpeciesType ? SpeciesTypeToSpeciesTypeLabel[segment.mainScipSpeciesType] : 'aucun'}
-Espèces cibles ${percent ? `(≥ ${percent}% du total des captures) ` : ''}: ${targetSpecies}`
+${pluralize('Espèce', numberOfTargetSpecies)} ${pluralize('cible', numberOfTargetSpecies)} ${percent ? `(≥ ${percent}% du total des captures) ` : ''}: ${targetSpecies}`
 }
diff --git a/.../features/Vessel/components/VesselSidebar/risk_factor/details/ImpactRiskFactorDetails.tsx b/.../features/Vessel/components/VesselSidebar/risk_factor/details/ImpactRiskFactorDetails.tsx
@@ -1,11 +1,10 @@
 import { VesselCurrentFleetSegmentDetails } from '@features/FleetSegment/components/VesselCurrentFleetSegmentDetails'
+import { FleetSegmentsWithTooltip } from '@features/Logbook/components/VesselLogbook/LogbookSummary/FleetSegmentsWithTooltip'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
 import { assertNotNullish } from '@utils/assertNotNullish'
 import { useRef } from 'react'
 import styled from 'styled-components'
 
-import InfoSVG from '../../../../../icons/Information.svg?react'
-
 export function ImpactRiskFactorDetails({ isOpen }) {
   const riskFactor = useMainAppSelector(state => state.vessel.selectedVessel)?.riskFactor
   assertNotNullish(riskFactor)
@@ -26,13 +25,7 @@ export function ImpactRiskFactorDetails({ isOpen }) {
                 <Field>
                   <Key>Segment de flotte actuel</Key>
                   <Value>
-                    {riskFactor.segmentHighestImpact}{' '}
-                    <Info
-                      title={
-                        'La note de risque de ce segment est la note attribuée par la DIRM de la ' +
-                        'façade dans son Plan de contrôle annuel.'
-                      }
-                    />
+                    <FleetSegmentsWithTooltip segments={[riskFactor.segmentHighestImpact]} />
                   </Value>
                 </Field>
               </TableBody>
@@ -59,15 +52,6 @@ const Line = styled.div`
   border-bottom: 1px solid ${p => p.theme.color.lightGray};
 `
 
-const Info = styled(InfoSVG)<{
-  $isInfoSegment?: boolean
-}>`
-  width: 14px;
-  vertical-align: text-bottom;
-  margin-bottom: 2px;
-  margin-left: ${p => (p.$isInfoSegment ? '5px' : '2px')};
-`
-
 const SubRiskDetails = styled.div<{
   $elementHeight: number | undefined
   $hasSegment: boolean