Fix lint issues in Mission feature

frontend/package.json

@@ -27,6 +27,7 @@
     "test:multi-windows:run": "IS_HEADLESS=true jest --config=./config/multi-windows/jest.config.js --detectOpenHandles",
     "test:lint": "eslint ./src",
     "test:lint:partial": "eslint --config=./.eslintrc.partial.js ./src ./cypress ./puppeteer",
+    "test:lint:partial:bis": "eslint --config=./.eslintrc.partial.js ./src/features/Mission",
     "test:lint:partial:fix": "npm run test:lint:partial -- --fix",
     "test:type": "tsc",
     "test:unit": "jest --config=./config/jest.config.js --detectOpenHandles",

frontend/src/features/Mission/components/MissionForm/ActionForm/AirControlForm.tsx

@@ -20,10 +20,10 @@ import { FormHead } from '../shared/FormHead'
 import type { MissionActionFormValues } from '../types'
 import type { Promisable } from 'type-fest'
 
-export type AirControlFormProps = {
+type AirControlFormProps = Readonly<{
   initialValues: MissionActionFormValues
   onChange: (nextValues: MissionActionFormValues) => Promisable<void>
-}
+}>
 export function AirControlForm({ initialValues, onChange }: AirControlFormProps) {
   const { newWindowContainerRef } = useNewWindow()
 

frontend/src/features/Mission/components/MissionForm/ActionForm/AirSurveillanceForm.tsx

@@ -26,10 +26,10 @@ import { FormHead } from '../shared/FormHead'
 import type { MissionActionFormValues } from '../types'
 import type { Promisable } from 'type-fest'
 
-export type AirSurveillanceFormProps = {
+type AirSurveillanceFormProps = Readonly<{
   initialValues: MissionActionFormValues
   onChange: (nextValues: MissionActionFormValues) => Promisable<void>
-}
+}>
 export function AirSurveillanceForm({ initialValues, onChange }: AirSurveillanceFormProps) {
   const { newWindowContainerRef } = useNewWindow()
 

frontend/src/features/Mission/components/MissionForm/ActionForm/LandControlForm.tsx

@@ -33,10 +33,10 @@ import { FormHead } from '../shared/FormHead'
 import type { MissionActionFormValues } from '../types'
 import type { Promisable } from 'type-fest'
 
-type LandControlFormProps = {
+type LandControlFormProps = Readonly<{
   initialValues: MissionActionFormValues
   onChange: (nextValues: MissionActionFormValues) => Promisable<void>
-}
+}>
 export function LandControlForm({ initialValues, onChange }: LandControlFormProps) {
   const { newWindowContainerRef } = useNewWindow()
 

frontend/src/features/Mission/components/MissionForm/ActionForm/ObservationForm.tsx

@@ -12,10 +12,10 @@ import { FormHead } from '../shared/FormHead'
 import type { MissionActionFormValues } from '../types'
 import type { Promisable } from 'type-fest'
 
-export type ObservationFormProps = {
+type ObservationFormProps = Readonly<{
   initialValues: MissionActionFormValues
   onChange: (nextValues: MissionActionFormValues) => Promisable<void>
-}
+}>
 export function ObservationForm({ initialValues, onChange }: ObservationFormProps) {
   const titleDate = useMemo(
     () => initialValues.actionDatetimeUtc && getTitleDateFromUtcStringDate(initialValues.actionDatetimeUtc),

frontend/src/features/Mission/components/MissionForm/ActionForm/SeaControlForm.tsx

@@ -33,10 +33,10 @@ import { FormHead } from '../shared/FormHead'
 import type { MissionActionFormValues } from '../types'
 import type { Promisable } from 'type-fest'
 
-type SeaControlFormProps = {
+type SeaControlFormProps = Readonly<{
   initialValues: MissionActionFormValues
   onChange: (nextValues: MissionActionFormValues) => Promisable<void>
-}
+}>
 export function SeaControlForm({ initialValues, onChange }: SeaControlFormProps) {
   const { newWindowContainerRef } = useNewWindow()
 

frontend/src/features/Mission/components/MissionForm/ActionForm/index.tsx

@@ -12,10 +12,10 @@ import { SeaControlForm } from './SeaControlForm'
 import type { MissionActionFormValues } from '../types'
 import type { Promisable } from 'type-fest'
 
-type ActionFormProps = {
+type ActionFormProps = Readonly<{
   actionFormValues: MissionActionFormValues | undefined
   onChange: (nextActionFormValues: MissionActionFormValues) => Promisable<void>
-}
+}>
 function UnmemoizedActionForm({ actionFormValues, onChange }: ActionFormProps) {
   if (!actionFormValues) {
     return <Wrapper />

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FleetSegmentsField.tsx

@@ -11,9 +11,9 @@ import type { MissionActionFormValues } from '../../types'
 import type { Option } from '@mtes-mct/monitor-ui'
 import type { MissionAction } from 'domain/types/missionAction'
 
-export type FleetSegmentsFieldProps = {
+type FleetSegmentsFieldProps = Readonly<{
   label: string
-}
+}>
 export function FleetSegmentsField({ label }: FleetSegmentsFieldProps) {
   const [input, , helper] = useField<MissionActionFormValues['segments']>('segments')
 
@@ -27,9 +27,9 @@ export function FleetSegmentsField({ label }: FleetSegmentsFieldProps) {
     }
 
     return getFleetSegmentsApiQuery.data.map(({ faoAreas, segment, segmentName }) => ({
-      faoAreas: faoAreas || [],
+      faoAreas: faoAreas ?? [],
       segment,
-      segmentName: segmentName || undefined
+      segmentName: segmentName ?? undefined
     }))
   }, [getFleetSegmentsApiQuery.data])
 

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikAuthor.tsx

@@ -7,7 +7,7 @@ import type { MissionActionFormValues } from '../../types'
 export function FormikAuthor() {
   const { errors } = useFormikContext<MissionActionFormValues>()
 
-  const error = errors.userTrigram || errors.closedBy
+  const error = errors.userTrigram ?? errors.closedBy
 
   return (
     <Wrapper>

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikCoordinatesPicker.tsx

@@ -42,7 +42,7 @@ export function FormikCoordinatesPicker() {
   const [{ value: latitudeValue }, latitudeMeta, latitudeHelpers] =
     useField<MissionActionFormValues['latitude']>('latitude')
 
-  const error = longitudeMeta.error || latitudeMeta.error
+  const error = longitudeMeta.error ?? latitudeMeta.error
 
   const dispatch = useMainAppDispatch()
   const { drawedGeometry } = useListenForDrawedGeometry(InteractionListener.CONTROL_POINT)

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/Infraction.tsx

@@ -7,12 +7,12 @@ import { infractionGroupToLabel } from './constants'
 
 import type { Promisable } from 'type-fest'
 
-export type InfractionProps = {
+type InfractionProps = Readonly<{
   data: MissionAction.Infraction & { group: string; label: string | undefined }
   index: number
   onDelete: (index: number, infractionGroup: string) => Promisable<void>
   onEdit: (index: number, infractionGroup: string) => Promisable<void>
-}
+}>
 export function Infraction({ data, index, onDelete, onEdit }: InfractionProps) {
   return (
     <>
@@ -25,7 +25,7 @@ export function Infraction({ data, index, onDelete, onEdit }: InfractionProps) {
           <TagGroup>
             <Tag accent={Accent.PRIMARY}>{MissionAction.INFRACTION_TYPE_LABEL[data.infractionType]}</Tag>
             {data.infractionType !== MissionAction.InfractionType.PENDING && (
-              <Tag accent={Accent.PRIMARY}>NATINF : {data.label || data.natinf}</Tag>
+              <Tag accent={Accent.PRIMARY}>NATINF : {data.label ?? data.natinf}</Tag>
             )}
           </TagGroup>
 

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/InfractionForm.tsx

@@ -19,13 +19,13 @@ import { INFRACTION_TYPES_AS_OPTIONS } from '../constants'
 
 import type { MissionAction } from 'domain/types/missionAction'
 
-export type InfractionFormProps = {
+type InfractionFormProps = Readonly<{
   initialValues: MissionAction.Infraction & { group?: string | undefined }
   isEdition?: boolean
   natinfsAsOptions: Option<number>[]
   onCancel: () => void
   onSubmit: (nextInfractionFormValues: MissionAction.Infraction, infractionGroup: string | undefined) => void
-}
+}>
 export function InfractionForm({
   initialValues,
   isEdition = false,
@@ -34,7 +34,7 @@ export function InfractionForm({
   onSubmit
 }: InfractionFormProps) {
   const { newWindowContainerRef } = useNewWindow()
-  const [infractionGroup, setInfractionGroup] = useState<string | undefined>(initialValues.group || undefined)
+  const [infractionGroup, setInfractionGroup] = useState<string | undefined>(initialValues.group ?? undefined)
 
   const infractionCategoryOptions = Object.keys(InfractionCategory).map(category => {
     const categoryValue = InfractionCategory[category]

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/index.tsx

@@ -17,10 +17,10 @@ import { FieldsetGroupSeparator } from '../../../shared/FieldsetGroupSeparator'
 import type { MissionActionFormValues } from '../../../types'
 import type { MissionAction } from 'domain/types/missionAction'
 
-export type FormikMultiInfractionPickerProps = {
+type FormikMultiInfractionPickerProps = Readonly<{
   addButtonLabel: string
   label: string
-}
+}>
 export function FormikMultiInfractionPicker({ addButtonLabel, label }: FormikMultiInfractionPickerProps) {
   const { setFieldValue, values } = useFormikContext<MissionActionFormValues>()
 
@@ -31,20 +31,20 @@ export function FormikMultiInfractionPicker({ addButtonLabel, label }: FormikMul
 
   const infractionsWithLabelAndGroup = useMemo(() => {
     const allInfractions = [
-      ...(values.gearInfractions?.map(infraction => ({ ...infraction, group: InfractionCategory.GEAR_INFRACTIONS })) ||
+      ...(values.gearInfractions?.map(infraction => ({ ...infraction, group: InfractionCategory.GEAR_INFRACTIONS })) ??
         []),
       ...(values.logbookInfractions?.map(infraction => ({
         ...infraction,
         group: InfractionCategory.LOGBOOK_INFRACTION
-      })) || []),
+      })) ?? []),
       ...(values.otherInfractions?.map(infraction => ({
         ...infraction,
         group: InfractionCategory.OTHER_INFRACTIONS
-      })) || []),
+      })) ?? []),
       ...(values.speciesInfractions?.map(infraction => ({
         ...infraction,
         group: InfractionCategory.SPECIES_INFRACTIONS
-      })) || [])
+      })) ?? [])
     ]
     if (!allInfractions.length) {
       return []

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikOtherControlsCheckboxes.tsx

@@ -42,20 +42,18 @@ export function FormikOtherControlsCheckboxes() {
   }
 
   return (
-    <>
-      <StyledFieldsetGroup isLight legend="Autre(s) contrôle(s) effectué(s) par l’unité sur le navire">
-        <FormikCheckbox label="Contrôle administratif" name="isAdministrativeControl" />
-        <FormikCheckbox
-          label="Respect du code de la navigation sur le plan d’eau"
-          name="isComplianceWithWaterRegulationsControl"
-        />
-        <FormikCheckbox label="Gens de mer" name="isSeafarersControl" />
-        <FormikCheckbox
-          label="Equipement de sécurité et respect des normes"
-          name="isSafetyEquipmentAndStandardsComplianceControl"
-        />
-      </StyledFieldsetGroup>
-    </>
+    <StyledFieldsetGroup isLight legend="Autre(s) contrôle(s) effectué(s) par l’unité sur le navire">
+      <FormikCheckbox label="Contrôle administratif" name="isAdministrativeControl" />
+      <FormikCheckbox
+        label="Respect du code de la navigation sur le plan d’eau"
+        name="isComplianceWithWaterRegulationsControl"
+      />
+      <FormikCheckbox label="Gens de mer" name="isSeafarersControl" />
+      <FormikCheckbox
+        label="Equipement de sécurité et respect des normes"
+        name="isSafetyEquipmentAndStandardsComplianceControl"
+      />
+    </StyledFieldsetGroup>
   )
 }
 

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/GearsField.tsx

@@ -53,7 +53,7 @@ export function GearsField() {
     }
 
     const nextGears: MissionAction.GearControl[] = [
-      ...(input.value || []),
+      ...(input.value ?? []),
       {
         comments: undefined,
         controlledMesh: undefined,

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/SpeciesField.tsx

@@ -26,9 +26,9 @@ import type { MissionActionFormValues } from '../../types'
 import type { Option } from '@mtes-mct/monitor-ui'
 import type { Specy } from 'domain/types/specy'
 
-export type SpeciesFieldProps = {
+type SpeciesFieldProps = Readonly<{
   controlledWeightLabel: string
-}
+}>
 export function SpeciesField({ controlledWeightLabel }: SpeciesFieldProps) {
   const { values } = useFormikContext<MissionActionFormValues>()
   const [input, , helper] = useField<MissionActionFormValues['speciesOnboard']>('speciesOnboard')
@@ -84,7 +84,7 @@ export function SpeciesField({ controlledWeightLabel }: SpeciesFieldProps) {
         speciesCode: newSpecy.code,
         underSized: false
       },
-      input.value || []
+      input.value ?? []
     )
 
     helper.setValue(nextSpeciesOnboard)

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselField.tsx

@@ -26,13 +26,13 @@ export function VesselField() {
     }
 
     return {
-      districtCode: values.districtCode || null,
-      externalReferenceNumber: values.externalReferenceNumber || null,
-      flagState: values.flagState || '',
-      internalReferenceNumber: values.internalReferenceNumber || null,
-      ircs: values.ircs || null,
+      districtCode: values.districtCode ?? null,
+      externalReferenceNumber: values.externalReferenceNumber ?? null,
+      flagState: values.flagState ?? '',
+      internalReferenceNumber: values.internalReferenceNumber ?? null,
+      ircs: values.ircs ?? null,
       vesselId: values.vesselId,
-      vesselName: values.vesselName || null
+      vesselName: values.vesselName ?? null
     }
   }, [
     values.flagState,
@@ -67,16 +67,16 @@ export function VesselField() {
 
     setValues({
       ...values,
-      districtCode: nextVessel.districtCode || undefined,
-      externalReferenceNumber: nextVessel.externalReferenceNumber || undefined,
+      districtCode: nextVessel.districtCode ?? undefined,
+      externalReferenceNumber: nextVessel.externalReferenceNumber ?? undefined,
       flagState: nextVessel.flagState,
-      internalReferenceNumber: nextVessel.internalReferenceNumber || undefined,
-      ircs: nextVessel.ircs || undefined,
+      internalReferenceNumber: nextVessel.internalReferenceNumber ?? undefined,
+      ircs: nextVessel.ircs ?? undefined,
       vesselId: nextVessel.vesselId,
       vesselName: nextVessel.vesselName
     })
 
-    const valuesWithVessel = { ...values, internalReferenceNumber: nextVessel.internalReferenceNumber || undefined }
+    const valuesWithVessel = { ...values, internalReferenceNumber: nextVessel.internalReferenceNumber ?? undefined }
     updateFieldsControlledByVessel(valuesWithVessel)
   }
 
@@ -123,7 +123,6 @@ export function VesselField() {
                 <span>{values.externalReferenceNumber}</span> (Marq. ext)
               </>
             )}
-            {/* {values.mmsi && <><span>{values.mmsi}</span> (MMSI)</>} */}
             {values.ircs && (
               <>
                 <span>{values.ircs}</span> (Call Sign)
@@ -133,12 +132,12 @@ export function VesselField() {
         )}
       </Wrapper>
 
-      {errors.vesselId && <Error>{errors.vesselId}</Error>}
+      {errors.vesselId && <ErrorMessage>{errors.vesselId}</ErrorMessage>}
     </>
   )
 }
 
-const Error = styled.p`
+const ErrorMessage = styled.p`
   color: ${p => p.theme.color.maximumRed};
   font-style: italic;
   margin: 4px 0 0 !important;

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselFleetSegmentsField.tsx

@@ -12,9 +12,9 @@ import { FieldsetGroup, FieldsetGroupSpinner } from '../../shared/FieldsetGroup'
 
 import type { MissionActionFormValues } from '../../types'
 
-export type VesselFleetSegmentsFieldProps = {
+type VesselFleetSegmentsFieldProps = Readonly<{
   label: string
-}
+}>
 export function VesselFleetSegmentsField({ label }: VesselFleetSegmentsFieldProps) {
   const { setFieldValue, values } = useFormikContext<MissionActionFormValues>()
   const { updateSegments } = useGetMissionActionFormikUsecases()
@@ -24,7 +24,7 @@ export function VesselFleetSegmentsField({ label }: VesselFleetSegmentsFieldProp
   const isLoading = useMemo(() => !getFleetSegmentsApiQuery.data, [getFleetSegmentsApiQuery.data])
 
   const removeFaoArea = (faoAreaToDelete: string) => {
-    const nextFaoAreas = values.faoAreas?.filter(faoArea => faoArea !== faoAreaToDelete) || []
+    const nextFaoAreas = values.faoAreas?.filter(faoArea => faoArea !== faoAreaToDelete) ?? []
 
     setFieldValue('faoAreas', nextFaoAreas)
     updateSegments({ ...values, faoAreas: nextFaoAreas })

frontend/src/features/Mission/components/MissionForm/ActionForm/shared/utils.ts

@@ -19,7 +19,7 @@ export function getFleetSegmentsAsOption(
     label: `${segment} - ${segmentName}`,
     value: {
       segment,
-      segmentName: segmentName || undefined
+      segmentName: segmentName ?? undefined
     }
   }))
 }

frontend/src/features/Mission/components/MissionForm/ActionList/Item.tsx

@@ -23,13 +23,13 @@ import { useGetNatinfsAsOptions } from '../hooks/useGetNatinfsAsOptions'
 import type { MissionActionFormValues } from '../types'
 import type { Promisable } from 'type-fest'
 
-export type ItemProps = {
+type ItemProps = Readonly<{
   isSelected: boolean
   missionAction: MissionActionFormValues
   onDuplicate: () => Promisable<void>
   onRemove: () => Promisable<void>
   onSelect: () => Promisable<void>
-}
+}>
 export function Item({ isSelected, missionAction, onDuplicate, onRemove, onSelect }: ItemProps) {
   const draft = useMainAppSelector(state => state.missionForm.draft)
 
@@ -99,7 +99,7 @@ export function Item({ isSelected, missionAction, onDuplicate, onRemove, onSelec
     const infractionsTitle = infractionsNatinfs.map(natinf => {
       const infractionLabel = find(natinfsAsOptions, { value: natinf })?.label
 
-      return infractionLabel || natinf.toString()
+      return infractionLabel ?? natinf.toString()
     })
     const infractionsLabel = `${infractionsNatinfs.length} NATINF: ${infractionsNatinfs.join(', ')}`
     const infractionsTag = (