[Missions] Modifier les styles des champs en erreurs en rouge allégé (#…

…3019)

## Linked issues

- [x] Resolve #2969
- [x] Resolve #2985
- [x] Resolve #2820 
- "modifier l'ordre des items dans le menu déroulant des infractions,
pour suivre l'ordre du formulaire et mettre le autre à la fin"

----

- [ ] Tests E2E (Cypress)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
- Improved the Mission Form by introducing automated calculation and
filling logic for the 'Fin de mission' field based on custom date
formats.
- **Bug Fixes**
- Enhanced the auto-save functionality by implementing a more robust
conditional check for 'missionId' to prevent unexpected behavior.
- **UI/UX Enhancements**
- Refined the Draft Cancellation Confirmation Dialog in the Mission Form
for better clarity and consistency in French. Updated button accents and
introduced a new styled component for emphasized text.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

frontend/cypress/e2e/side_window/mission_form/air_control.spec.ts

@@ -123,22 +123,17 @@ context('Side Window > Mission Form > Air Control', () => {
 
     // -------------------------------------------------------------------------
     // Form Live Validation
-
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('exist')
-    cy.contains('Veuillez indiquer le navire contrôlé.').should('exist')
-    cy.contains('Veuillez indiquer votre trigramme dans "Saisi par".').should('exist')
 
     getCloseButton().should('be.disabled')
 
     // Navire
     cy.get('input[placeholder="Rechercher un navire..."]').type('mal')
     cy.contains('mark', 'MAL').click()
-    cy.contains('Veuillez indiquer le navire contrôlé.').should('not.exist')
 
     // Saisi par
     cy.fill('Saisi par', 'Gaumont')
     cy.wait(500)
-    cy.contains('Veuillez indiquer votre trigramme dans "Saisi par".').should('not.exist')
 
     // Mission is now valid for saving (but not for closure)
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('not.exist')
@@ -150,14 +145,11 @@ context('Side Window > Mission Form > Air Control', () => {
     // -------------------------------------------------------------------------
     // Form Closure Validation
 
-    cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('exist')
-    cy.contains('Veuillez indiquer votre trigramme dans "Clôturé par".').should('exist')
     cy.contains('Rouvrir la mission').should('not.exist')
 
     // Clôturé par
     // TODO Handle multiple inputs with same label via an `index` in monitor-ui.
     cy.get('[name="closedBy"]').eq(1).type('Alice')
-    cy.contains('Veuillez indiquer votre trigramme dans "Clôturé par".').should('not.exist')
 
     // Mission is now valid for closure
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('not.exist')

frontend/cypress/e2e/side_window/mission_form/air_surveillance.spec.ts

@@ -146,15 +146,11 @@ context('Side Window > Mission Form > Air Surveillance', () => {
     // -------------------------------------------------------------------------
     // Form Live Validation
 
-    cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('exist')
-    cy.contains('Veuillez indiquer votre trigramme dans "Saisi par".').should('exist')
-
     getCloseButton().should('be.disabled')
 
     // Saisi par
     cy.fill('Saisi par', 'Gaumont')
     cy.wait(500)
-    cy.contains('Veuillez indiquer votre trigramme dans "Saisi par".').should('not.exist')
 
     // Mission is now valid for saving (but not for closure)
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('not.exist')
@@ -166,13 +162,9 @@ context('Side Window > Mission Form > Air Surveillance', () => {
     // -------------------------------------------------------------------------
     // Form Closure Validation
 
-    cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('exist')
-    cy.contains('Veuillez indiquer votre trigramme dans "Clôturé par".').should('exist')
-
     // Clôturé par
     // TODO Handle multiple inputs with same label via an `index` in monitor-ui.
     cy.get('[name="closedBy"]').eq(1).type('Alice')
-    cy.contains('Veuillez indiquer votre trigramme dans "Clôturé par".').should('not.exist')
     cy.contains('Rouvrir la mission').should('not.exist')
 
     // Mission is now valid for closure

frontend/cypress/e2e/side_window/mission_form/land_control.spec.ts

@@ -215,25 +215,19 @@ context('Side Window > Mission Form > Land Control', () => {
     // Form Live Validation
 
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('exist')
-    cy.contains('Veuillez indiquer le navire contrôlé.').should('exist')
-    cy.contains('Veuillez indiquer le port de contrôle.').should('exist')
-    cy.contains('Veuillez indiquer votre trigramme dans "Saisi par".').should('exist')
 
     getCloseButton().should('be.disabled')
 
     // Navire
     cy.get('input[placeholder="Rechercher un navire..."]').type('mal')
     cy.contains('mark', 'MAL').click().wait(500)
-    cy.contains('Veuillez indiquer le navire contrôlé.').should('not.exist')
 
     // Port de contrôle
     cy.fill('Port de contrôle', 'Auray')
-    cy.contains('Veuillez indiquer le port de contrôle.').should('not.exist')
 
     // Saisi par
     cy.fill('Saisi par', 'Gaumont')
     cy.wait(500)
-    cy.contains('Veuillez indiquer votre trigramme dans "Saisi par".').should('not.exist')
 
     // Mission is now valid for saving (but not for closure)
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('not.exist')
@@ -246,16 +240,6 @@ context('Side Window > Mission Form > Land Control', () => {
     // Form Closure Validation
 
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('exist')
-    cy.contains('Veuillez indiquer si le navire émet un signal VMS.').should('exist')
-    cy.contains('Veuillez indiquer si le navire émet un signal AIS.').should('exist')
-    cy.contains('Veuillez indiquer si le journal de bord correspond à l’activité du navire.').should('exist')
-    cy.contains('Veuillez indiquer si les licences correspondent à l’activité du navire.').should('exist')
-    cy.contains('Veuillez indiquer les engins à bord.').should('exist')
-    cy.contains('Veuillez indiquer si le poids des espèces a été contrôlé.').should('exist')
-    cy.contains('Veuillez indiquer si la taille des espèces a été contrôlée.').should('exist')
-    cy.contains('Veuillez indiquer si les espèces soumises à plan sont séparées.').should('exist')
-    cy.contains('Veuillez indiquer si le navire est ciblé par le CNSP.').should('exist')
-    cy.contains('Veuillez indiquer votre trigramme dans "Clôturé par".').should('exist')
 
     cy.contains('Rouvrir la mission').should('not.exist')
 
@@ -265,39 +249,21 @@ context('Side Window > Mission Form > Land Control', () => {
     cy.fill('Déclarations journal de pêche conformes à l’activité du navire', 'Non concerné')
     cy.fill('Autorisations de pêche conformes à l’activité du navire (zone, engins, espèces)', 'Non')
 
-    cy.contains('Veuillez indiquer si le navire émet un signal VMS.').should('not.exist')
-    cy.contains('Veuillez indiquer si le navire émet un signal AIS.').should('not.exist')
-    cy.contains('Veuillez indiquer si le journal de bord correspond à l’activité du navire.').should('not.exist')
-    cy.contains('Veuillez indiquer si les licences correspondent à l’activité du navire.').should('not.exist')
-
     // Engins à bord
     cy.fill('Ajouter un engin', 'MIS')
-
-    cy.contains('Veuillez indiquer les engins à bord.').should('not.exist')
-    cy.contains("Veuillez indiquer si l'engin a été contrôlé.").should('exist')
-
     cy.fill('Engin contrôlé', 'Oui')
 
-    cy.contains("Veuillez indiquer si l'engin a été contrôlé.").should('not.exist')
-
     // Espèces à bord
     cy.fill('Poids des espèces vérifiés', 'Oui')
     cy.fill('Taille des espèces vérifiées', 'Non')
     cy.fill('Arrimage séparé des espèces soumises à plan', 'Oui')
 
-    cy.contains('Veuillez indiquer si le poids des espèces a été contrôlé.').should('not.exist')
-    cy.contains('Veuillez indiquer si la taille des espèces a été contrôlée.').should('not.exist')
-    cy.contains('Veuillez indiquer si les espèces soumises à plan sont séparées.').should('not.exist')
-
     // Qualité du contrôle
     cy.fill('Navire ciblé par le CNSP', 'Non')
 
-    cy.contains('Veuillez indiquer si le navire est ciblé par le CNSP.').should('not.exist')
-
     // Clôturé par
     // TODO Handle multiple inputs with same label via an `index` in monitor-ui.
     cy.get('[name="closedBy"]').eq(1).type('Alice')
-    cy.contains('Veuillez indiquer votre trigramme dans "Clôturé par".').should('not.exist')
 
     // Mission is now valid for closure
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('not.exist')

frontend/cypress/e2e/side_window/mission_form/main_form.spec.ts

@@ -4,6 +4,7 @@ import { SeaFrontGroup } from '../../../../src/domain/entities/seaFront/constant
 import { SideWindowMenuLabel } from '../../../../src/domain/entities/sideWindow/constants'
 import { FAKE_MISSION_WITH_EXTERNAL_ACTIONS, FAKE_MISSION_WITHOUT_EXTERNAL_ACTIONS } from '../../constants'
 import { customDayjs } from '../../utils/customDayjs'
+import { getUtcDateInMultipleFormats } from '../../utils/getUtcDateInMultipleFormats'
 import { editSideWindowMissionListMissionWithId } from '../mission_list/utils'
 
 context('Side Window > Mission Form > Main Form', () => {
@@ -45,6 +46,10 @@ context('Side Window > Mission Form > Main Form', () => {
       statusCode: 201
     }).as('getCreatedMission')
 
+    const endDate = customDayjs().utc().add(7, 'day')
+    cy.fill('Fin de mission', getUtcDateInMultipleFormats(endDate.toISOString()).utcDateTupleWithTime)
+    const expectedEndDateTimeUtc = new RegExp(`${endDate.format('YYYY-MM-DDTHH')}:\\d{2}:00\\.000Z`)
+
     cy.fill('Types de mission', ['Mer'])
 
     cy.fill('Administration 1', 'DDTM')
@@ -55,9 +60,9 @@ context('Side Window > Mission Form > Main Form', () => {
         assert.fail('`interception.response` is undefined.')
       }
 
-      assert.isUndefined(interception.request.body.endDateTimeUtc)
       // We need to accurately test this prop in one test, no need to repeat it for each case
       assert.match(interception.request.body.startDateTimeUtc, expectedStartDateTimeUtc)
+      assert.match(interception.request.body.endDateTimeUtc, expectedEndDateTimeUtc)
       assert.deepInclude(interception.request.body, {
         controlUnits: [
           {
@@ -111,6 +116,9 @@ context('Side Window > Mission Form > Main Form', () => {
         statusCode: 201
       }).as('createMission')
 
+      const endDate = getUtcDateInMultipleFormats(customDayjs().utc().add(7, 'day').toISOString())
+      cy.fill('Fin de mission', endDate.utcDateTupleWithTime)
+
       cy.fill('Types de mission', ['Mer'])
 
       cy.fill('Administration 1', 'DDTM')
@@ -134,7 +142,6 @@ context('Side Window > Mission Form > Main Form', () => {
           assert.fail('`interception.response` is undefined.')
         }
 
-        assert.isUndefined(interception.request.body.endDateTimeUtc)
         // We need to accurately test this prop in one test, no need to repeat it for each case
         assert.match(interception.request.body.startDateTimeUtc, expectedStartDateTimeUtc)
         assert.deepInclude(interception.request.body, {
@@ -614,6 +621,8 @@ context('Side Window > Mission Form > Main Form', () => {
 
     openSideWindowNewMission()
 
+    const endDate = getUtcDateInMultipleFormats(customDayjs().utc().add(7, 'day').toISOString())
+    cy.fill('Fin de mission', endDate.utcDateTupleWithTime)
     cy.fill('Administration 1', 'Douane')
     cy.fill('Unité 1', 'BGC Lorient - DF 36 Kan An Avel')
 

frontend/cypress/e2e/side_window/mission_form/observation.spec.ts

@@ -99,14 +99,12 @@ context('Side Window > Mission Form > Observation', () => {
     // Form Live Validation
 
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('exist')
-    cy.contains('Veuillez indiquer votre trigramme dans "Saisi par".').should('exist')
 
     getCloseButton().should('be.disabled')
 
     // Saisi par
     cy.fill('Saisi par', 'Gaumont')
     cy.wait(500)
-    cy.contains('Veuillez indiquer votre trigramme dans "Saisi par".').should('not.exist')
 
     // Mission is now valid for saving (but not for closure)
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('not.exist')

frontend/cypress/e2e/side_window/mission_form/sea_control.spec.ts

@@ -378,20 +378,16 @@ context('Side Window > Mission Form > Sea Control', () => {
     // Form Live Validation
 
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('exist')
-    cy.contains('Veuillez indiquer le navire contrôlé.').should('exist')
-    cy.contains('Veuillez indiquer votre trigramme dans "Saisi par".').should('exist')
 
     getCloseButton().should('be.disabled')
 
     // Navire
     cy.get('input[placeholder="Rechercher un navire..."]').type('mal')
     cy.contains('mark', 'MAL').click().wait(500)
-    cy.contains('Veuillez indiquer le navire contrôlé.').should('not.exist')
 
     // Saisi par
     cy.fill('Saisi par', 'Gaumont')
     cy.wait(500)
-    cy.contains('Veuillez indiquer votre trigramme dans "Saisi par".').should('not.exist')
 
     // Mission is now valid for saving (but not for closure)
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('not.exist')
@@ -404,16 +400,6 @@ context('Side Window > Mission Form > Sea Control', () => {
     // Form Closure Validation
 
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('exist')
-    cy.contains('Veuillez indiquer si le navire émet un signal VMS.').should('exist')
-    cy.contains('Veuillez indiquer si le navire émet un signal AIS.').should('exist')
-    cy.contains('Veuillez indiquer si le journal de bord correspond à l’activité du navire.').should('exist')
-    cy.contains('Veuillez indiquer si les licences correspondent à l’activité du navire.').should('exist')
-    cy.contains('Veuillez indiquer les engins à bord.').should('exist')
-    cy.contains('Veuillez indiquer si le poids des espèces a été contrôlé.').should('exist')
-    cy.contains('Veuillez indiquer si la taille des espèces a été contrôlée.').should('exist')
-    cy.contains('Veuillez indiquer si les espèces soumises à plan sont séparées.').should('exist')
-    cy.contains('Veuillez indiquer si le navire est ciblé par le CNSP.').should('exist')
-    cy.contains('Veuillez indiquer votre trigramme dans "Clôturé par".').should('exist')
 
     cy.contains('Rouvrir la mission').should('not.exist')
 
@@ -423,39 +409,21 @@ context('Side Window > Mission Form > Sea Control', () => {
     cy.fill('Déclarations journal de pêche conformes à l’activité du navire', 'Non concerné')
     cy.fill('Autorisations de pêche conformes à l’activité du navire (zone, engins, espèces)', 'Non')
 
-    cy.contains('Veuillez indiquer si le navire émet un signal VMS.').should('not.exist')
-    cy.contains('Veuillez indiquer si le navire émet un signal AIS.').should('not.exist')
-    cy.contains('Veuillez indiquer si le journal de bord correspond à l’activité du navire.').should('not.exist')
-    cy.contains('Veuillez indiquer si les licences correspondent à l’activité du navire.').should('not.exist')
-
     // Engins à bord
     cy.fill('Ajouter un engin', 'MIS')
-
-    cy.contains('Veuillez indiquer les engins à bord.').should('not.exist')
-    cy.contains("Veuillez indiquer si l'engin a été contrôlé.").should('exist')
-
     cy.fill('Engin contrôlé', 'Oui')
 
-    cy.contains("Veuillez indiquer si l'engin a été contrôlé.").should('not.exist')
-
     // Espèces à bord
     cy.fill('Poids des espèces vérifiés', 'Oui')
     cy.fill('Taille des espèces vérifiées', 'Non')
     cy.fill('Arrimage séparé des espèces soumises à plan', 'Oui')
 
-    cy.contains('Veuillez indiquer si le poids des espèces a été contrôlé.').should('not.exist')
-    cy.contains('Veuillez indiquer si la taille des espèces a été contrôlée.').should('not.exist')
-    cy.contains('Veuillez indiquer si les espèces soumises à plan sont séparées.').should('not.exist')
-
     // Qualité du contrôle
     cy.fill('Navire ciblé par le CNSP', 'Non')
 
-    cy.contains('Veuillez indiquer si le navire est ciblé par le CNSP.').should('not.exist')
-
     // Clôturé par
     // TODO Handle multiple inputs with same label via an `index` in monitor-ui.
     cy.get('[name="closedBy"]').eq(1).type('Alice')
-    cy.contains('Veuillez indiquer votre trigramme dans "Clôturé par".').should('not.exist')
 
     // Mission is now valid for closure
     cy.contains('Veuillez compléter les champs manquants dans cette action de contrôle.').should('not.exist')

frontend/cypress/e2e/side_window/mission_form/utils.ts

@@ -1,4 +1,6 @@
 import { SideWindowMenuLabel } from '../../../../src/domain/entities/sideWindow/constants'
+import { customDayjs } from '../../utils/customDayjs'
+import { getUtcDateInMultipleFormats } from '../../utils/getUtcDateInMultipleFormats'
 
 import type { Mission } from '../../../../src/domain/entities/mission/types'
 
@@ -91,4 +93,7 @@ export const fillSideWindowMissionFormBase = (
   cy.fill('Unité 1', 'Cultures marines 56')
   cy.wait(500)
   cy.fill('Moyen 1', ['Brezel - FAH 7185'])
+
+  const endDate = getUtcDateInMultipleFormats(customDayjs().utc().add(7, 'day').toISOString())
+  cy.fill('Fin de mission', endDate.utcDateTupleWithTime)
 }

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

@@ -57,7 +57,9 @@ export function AirControlForm({ initialValues, onChange }: AirControlFormProps)
 
             <FormikDatePicker
               baseContainer={newWindowContainerRef.current}
+              isErrorMessageHidden
               isLight
+              isRequired
               isStringDate
               label="Date et heure du contrôle"
               name="actionDatetimeUtc"

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

@@ -70,7 +70,9 @@ export function LandControlForm({ initialValues, onChange }: LandControlFormProp
 
             <FormikDatePicker
               baseContainer={newWindowContainerRef.current}
+              isErrorMessageHidden
               isLight
+              isRequired
               isStringDate
               label="Date et heure du contrôle"
               name="actionDatetimeUtc"

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

@@ -38,7 +38,7 @@ export function ObservationForm({ initialValues, onChange }: ObservationFormProp
           <FormBody>
             <FormikTextarea isLight label="Observations, commentaires..." name="otherComments" rows={3} />
 
-            <FormikTextInput isLight label="Saisi par" name="userTrigram" />
+            <FormikTextInput isErrorMessageHidden isLight isRequired label="Saisi par" name="userTrigram" />
           </FormBody>
         </>
       )}

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

@@ -70,7 +70,9 @@ export function SeaControlForm({ initialValues, onChange }: SeaControlFormProps)
 
             <FormikDatePicker
               baseContainer={newWindowContainerRef.current}
+              isErrorMessageHidden
               isLight
+              isRequired
               isStringDate
               label="Date et heure du contrôle"
               name="actionDatetimeUtc"