fix(observation-unit): empty case

 - Had delay trigger of 5sec on the form.
 - filter only init trigger (oldValue === newValue)
 - Add tests

frontend/src/features/pam/mission/components/elements/mission-observation-unit.test.tsx

@@ -1,7 +1,7 @@
+import * as usePatchModule from '@features/pam/mission/hooks/use-patch-mission-env'
 import { vi } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '../../../../../test-utils.tsx'
 import MissionObservationByUnit from './mission-observations-unit.tsx'
-import * as usePatchModule from '@features/pam/mission/hooks/use-patch-mission-env'
 
 const patchMock = vi.fn()
 
@@ -32,12 +32,33 @@ describe('MissionObservation', () => {
     })
   })
 
-  it('should not call update observation under 4', () => {
+  it('should trigger 5 secondes after typing', () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    const observationsByUnit = 'my observations!!!!!'
     const wrapper = render(<MissionObservationByUnit missionId={1} observationsByUnit={'My beautiful observation'} />)
     const element = wrapper.getByTestId('mission-general-observation')
     fireEvent.change(element, {
-      target: { value: 'my' }
+      target: { value: observationsByUnit }
     })
     expect(patchMock).not.toHaveBeenCalled()
+    vi.advanceTimersByTime(5000)
+    expect(patchMock).toHaveBeenCalled()
+    expect(patchMock).toHaveBeenCalledWith({
+      variables: { mission: expect.objectContaining({ observationsByUnit }) }
+    })
+  })
+
+  it('should call update observations event empty', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    const wrapper = render(<MissionObservationByUnit missionId={1} observationsByUnit={'My beautiful observation'} />)
+    const element = wrapper.getByTestId('mission-general-observation')
+    fireEvent.change(element, {
+      target: { value: '' }
+    })
+    vi.advanceTimersByTime(5000)
+    expect(patchMock).toHaveBeenCalled()
+    expect(patchMock).toHaveBeenCalledWith({
+      variables: { mission: expect.objectContaining({ observationsByUnit: '' }) }
+    })
   })
 })

frontend/src/features/pam/mission/components/elements/mission-observations-unit.tsx

@@ -1,8 +1,10 @@
 import { FormikEffect, FormikTextarea } from '@mtes-mct/monitor-ui'
 import { Formik } from 'formik'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import usePatchMissionEnv from '../../hooks/use-patch-mission-env.tsx'
 
+const DEBOUNCE_TIME_TRIGGER = 5000
+
 type ObservationsByUnit = {
   observations?: string
 }
@@ -14,20 +16,25 @@ interface MissionObservationsByUnitProps {
 
 const MissionObservationsUnit: React.FC<MissionObservationsByUnitProps> = ({ missionId, observationsByUnit }) => {
   const [patchMissionObservation] = usePatchMissionEnv()
+  const timerRef = useRef<ReturnType<typeof setTimeout>>()
   const [initValue, setInitValue] = useState<ObservationsByUnit>()
 
   useEffect(() => {
     setInitValue({ observations: observationsByUnit })
   }, [observationsByUnit])
 
-  const handleSubmit = async ({ observations }: ObservationsByUnit) => {
-    if (!observations || observations.length < 4 || observations === observationsByUnit) return
+  const handleSubmit = async ({ observations }: ObservationsByUnit): Promise<void> => {
+    clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(() => patchObservationUnit(observations), DEBOUNCE_TIME_TRIGGER)
+  }
 
+  const patchObservationUnit = async (observations?: string) => {
+    if (observations === observationsByUnit) return
     await patchMissionObservation({
       variables: {
         mission: {
           missionId,
-          observationsByUnit: observations
+          observationsByUnit: observations || ''
         }
       }
     })