[Surveillance] Lors de l'édition de la zone de surveillance le bouton…

… "zone identique a zone de mission" est décoché et inactif (#579)

- Resolve #571 
- Resolve #570

frontend/src/features/missions/MissionForm/ActionForm/SurveillanceForm.tsx

@@ -1,10 +1,12 @@
 import { FormikCheckbox, FormikDatePicker, FormikTextarea } from '@mtes-mct/monitor-ui'
 import { useField } from 'formik'
+import { useMemo } from 'react'
 import { Form, IconButton } from 'rsuite'
 import styled from 'styled-components'
 
 import { InteractionListener } from '../../../../domain/entities/map/constants'
 import { ActionTypeEnum, type EnvAction } from '../../../../domain/entities/missions'
+import { useAppSelector } from '../../../../hooks/useAppSelector'
 import { useNewWindow } from '../../../../ui/NewWindow'
 import { ReactComponent as DeleteSVG } from '../../../../uiMonitor/icons/Delete.svg'
 import { ReactComponent as SurveillanceIconSVG } from '../../../../uiMonitor/icons/Observation.svg'
@@ -25,6 +27,9 @@ export function SurveillanceForm({ currentActionIndex, readOnly, remove, setCurr
   const hasCustomZone = geomField.value && geomField.value.coordinates.length > 0
   const surveillances = actionsFields.value.filter(action => action.actionType === ActionTypeEnum.SURVEILLANCE)
 
+  const { listener } = useAppSelector(state => state.draw)
+  const isEditingZone = useMemo(() => listener === InteractionListener.SURVEILLANCE_ZONE, [listener])
+
   const duration = dateDifferenceInHours(
     envActionField.value.actionStartDateTimeUtc,
     envActionField.value.actionEndDateTimeUtc
@@ -107,7 +112,7 @@ export function SurveillanceForm({ currentActionIndex, readOnly, remove, setCurr
           readOnly={readOnly}
         />
         <StyledFormikCheckbox
-          disabled={hasCustomZone}
+          disabled={hasCustomZone || isEditingZone}
           inline
           label="Zone de surveillance équivalente à la zone de mission"
           name={`envActions[${currentActionIndex}].coverMissionZone`}

frontend/src/features/missions/MultiPointPicker.tsx

@@ -148,9 +148,6 @@ const Field = styled.div`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
-  > button {
-    max-width: 416px;
-  }
 `
 const Center = styled.div`
   cursor: pointer;
@@ -170,7 +167,7 @@ const Row = styled.div`
   }
   align-items: center;
   display: flex;
-
+  width: 100%;
   margin-bottom: 4px;
 
   > button {
@@ -185,5 +182,4 @@ const ZoneWrapper = styled.div`
   font-size: 13px;
   justify-content: space-between;
   padding: 5px 0.75rem 4px;
-  width: 416px;
 `

frontend/src/features/missions/MultiZonePicker.tsx

@@ -47,7 +47,10 @@ export function MultiZonePicker({
   const { value } = field
 
   const { listener } = useAppSelector(state => state.draw)
-  const isEditingZone = useMemo(() => listener === InteractionListener.MISSION_ZONE, [listener])
+  const isEditingZone = useMemo(
+    () => listener === InteractionListener.MISSION_ZONE || listener === InteractionListener.SURVEILLANCE_ZONE,
+    [listener]
+  )
 
   const polygons = useMemo(() => {
     if (!value) {
@@ -143,6 +146,7 @@ const Field = styled.div`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
+  width: 100%;
 `
 const Center = styled.a`
   cursor: pointer;
@@ -160,6 +164,7 @@ const Row = styled.div`
   align-items: center;
   display: flex;
   margin: 0.5rem 0 0;
+  width: 100%;
 
   > button {
     margin: 0 0 0 0.5rem;
@@ -173,7 +178,6 @@ const ZoneWrapper = styled.div<{ isLight?: boolean }>`
   font-size: 13px;
   justify-content: space-between;
   padding: 5px 0.75rem 4px;
-  width: 416px;
 `
 
 const ErrorMessage = styled.div`