[Backoffice] Correction des champs du backoffice (#3014)

## Linked issues

- Correction du tableau de MAJ des segments de flottes
- Passage de deux sections du backoffice REG en champs monitor-ui
- Corrections des tests cypress associés

----

- [ ] Tests E2E (Cypress)


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

- **New Features**
- Introduced components for creating and editing regulatory topics,
fleet segments, and regulatory texts with validation and submission
capabilities.
- Added a component for daytime selection in fishing period regulation
forms.
- Enhanced fleet segment management with functionalities for listing,
creating, updating, and deleting fleet segments.
- Streamlined regulation editing with simplified control flows and
improved form interactions.
- Implemented new UI components for selecting regulatory law types,
regions, and topics with dynamic state management.
- **Bug Fixes**
- Fixed consistency issues in database operations related to fleet
segments.
- Adjusted UI interactions and assertions for better reliability in
fleet segment management.
- Refined form validation checks and interactions in regulation updates
for enhanced usability.
- **Refactor**
- Reorganized import paths across various components and use cases to
align with new module structures.
- Simplified functions and control flows in regulation confirmation and
saving processes.
	- Removed unused imports and components to clean up the codebase.
- **Style**
- Updated styling properties for various components and styled
components for improved UI consistency.
- Adjusted dimensions of the `SquareButton` component for better UI
alignment.
- **Tests**
- Modified and streamlined test scenarios for fleet segment management
and regulation editing.
- Updated Cypress tests to reflect changes in UI interactions and logic
flows.
- **Chores**
- Updated import paths and removed redundant imports across the project
to enhance code maintainability.
- **Documentation**
- Enhanced inline documentation for new features and significant changes
to facilitate understanding and maintenance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/database/repositories/JpaFleetSegmentRepository.kt

@@ -30,10 +30,6 @@ class JpaFleetSegmentRepository(
     @Transactional
     override fun update(segment: String, fields: CreateOrUpdateFleetSegmentFields, year: Int): FleetSegment {
         try {
-            fields.segment?.let {
-                dbFleetSegmentRepository.updateSegment(segment, it, year)
-            }
-
             fields.segmentName?.let {
                 dbFleetSegmentRepository.updateSegmentName(segment, it, year)
             }
@@ -58,6 +54,10 @@ class JpaFleetSegmentRepository(
                 dbFleetSegmentRepository.updateImpactRiskFactor(segment, it, year)
             }
 
+            fields.segment?.let {
+                dbFleetSegmentRepository.updateSegment(segment, it, year)
+            }
+
             return fields.segment?.let {
                 dbFleetSegmentRepository.findBySegmentAndYearEquals(it, year).toFleetSegment()
             } ?: run {

backend/src/test/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/database/repositories/JpaFleetSegmentRepositoryITests.kt

@@ -58,12 +58,13 @@ class JpaFleetSegmentRepositoryITests : AbstractDBTests() {
         // When
         val updatedFleetSegment = jpaFleetSegmentRepository.update(
             "ATL01",
-            CreateOrUpdateFleetSegmentFields("NEXT_ATL01"),
+            CreateOrUpdateFleetSegmentFields("NEXT_ATL01", "A segment name"),
             currentYear,
         )
 
         // Then
         assertThat(updatedFleetSegment.segment).isEqualTo("NEXT_ATL01")
+        assertThat(updatedFleetSegment.segmentName).isEqualTo("A segment name")
     }
 
     @Test

frontend/cypress/e2e/backoffice/update_regulation.spec.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { getDate } from '../../../src/utils'
+import { customDayjs } from '../utils/customDayjs'
 
 context('Update Regulation', () => {
   beforeEach(() => {
@@ -20,32 +20,29 @@ context('Update Regulation', () => {
 
   it('A layer zone Should be edited', () => {
     // When check expected form values
-    cy.get('[data-cy^="tag"]').should('have.length', 10)
-    cy.get('[data-cy="tag-Reg. MEMN"]').should('exist')
-    cy.get('[data-cy="tag-Ouest Cotentin Bivalves"]').should('exist')
-    cy.get('[data-cy="tag-Normandie"]').should('exist')
-    cy.get('[data-cy="tag-Bretagne"]').should('exist')
-    cy.get('[data-cy="tag-598"]').should('exist')
-    cy.get('[data-cy="tag-texte de reference"]').should('exist')
+    cy.get('.Component-SingleTag').contains('Reg. MEMN')
+    cy.get('.Component-SingleTag').contains('Ouest Cotentin Bivalves')
+    cy.get('.Component-SingleTag').contains('Normandie')
+    cy.get('.Component-SingleTag').contains('Bretagne')
+    cy.get('.Component-SingleTag').contains('598')
+    cy.get('[name="reference"]').invoke('val').should('equal', 'texte de reference')
+
     cy.get('[data-cy="tag-OURSINS NCA (URC)"]').should('exist')
     cy.get('[data-cy="tag-OURSINS,ETC. NCA (URX)"]').should('exist')
     cy.get('[data-cy="tag-Dragues"]').should('exist')
     cy.get('[data-cy="input-Praires Ouest cotentin"]').should('exist')
-    cy.get('.rs-picker-date input').eq(0).should('have.value', getDate(new Date().toISOString()))
+    cy.get('.rs-picker-date input').eq(0).should('have.value', customDayjs().utc().format('YYYY-MM-DD'))
     cy.get('[data-cy="regulatory-general-other-info"]').contains('Encore une info importante')
 
     // Then try to save
     cy.get('[data-cy="validate-button"]').contains('Enregister les modifications')
     cy.get('[data-cy="validate-button"]').click()
-    cy.get('.rs-checkbox-wrapper').should('have.css', 'border-top-color', 'rgb(225, 0, 15)')
+    // Saving is blocked as the form contains errors
   })
 
   it('Select another law type should reset selected layer name', () => {
-    cy.get('.rs-btn.rs-btn-default.rs-picker-toggle').eq(0).click()
-    // Since this input is virtualized, we need to scroll and wait for it to render new items
-    cy.get('.rs-picker-select-menu-items > div > div').eq(0).scrollTo(0, 500).wait(500)
-    cy.get('[data-key="R(CE) 494/2002"]').eq(0).click()
-    cy.get('[data-cy="tag-Ouest Cotentin Bivalves"]').should('not.exist')
+    cy.fill('Choisir un ensemble', '494/2002')
+    cy.get('.Component-SingleTag').should('not.contain', 'Ouest Cotentin Bivalves')
   })
 
   it('A species Should be removed', () => {
@@ -235,7 +232,7 @@ context('Update Regulation', () => {
 
   it('If a value is missing, the confirm modal is opened and a warning message is displayed if saving', () => {
     // When
-    cy.get('[data-cy="close-tag-Ouest Cotentin Bivalves"]').click()
+    cy.get('.Component-SingleTag').filter(':contains("Ouest Cotentin Bivalves")').find('button').click()
     cy.get('[data-cy="go-back-link"]').eq(0).click()
     cy.get('[data-cy="regulation-modal"]').should('exist')
     cy.get('[data-cy="confirm-modal-confirm-button"]').click()
@@ -259,7 +256,7 @@ context('Update Regulation', () => {
     cy.cleanScreenshots(1)
 
     // When
-    cy.get('[data-cy="edit-regulation-show-geometry"]').click()
+    cy.get('[title="Afficher"]').click()
     cy.wait(1500)
 
     // Then, the last position should be positioned in the bottom of the window
@@ -276,15 +273,14 @@ context('Update Regulation', () => {
       })
 
     // Delete the current geometry
-    cy.get('[data-cy="tag-598"] > svg').click()
+    cy.get('.Component-SingleTag').filter(':contains("598")').find('button').click()
     cy.wait(200)
 
-    cy.get('.rs-picker-toggle-placeholder').filter(':contains("Choisir un tracé")').eq(0).click()
     // We select the new geometry
-    cy.get('[data-key="598"]').eq(0).click({ force: true })
+    cy.fill('Choisir un tracé', '598')
 
     // When
-    cy.get('[data-cy="edit-regulation-show-geometry"]').click()
+    cy.get('[title="Afficher"]').click()
     cy.wait(1500)
 
     // Then, the last position should be positioned in the bottom of the window
@@ -306,14 +302,13 @@ context('Update Regulation', () => {
     // When F5 is pressed
     cy.reload()
     // then form values are kept
-    cy.get('[data-cy^="tag"]').should('have.length', 10)
-    cy.get('[data-cy="tag-Reg. MEMN"]').should('exist')
-    cy.get('[data-cy="tag-Ouest Cotentin Bivalves"]').should('exist')
-    cy.get('[data-cy="tag-Normandie"]').should('exist')
-    cy.get('[data-cy="tag-Bretagne"]').should('exist')
-    cy.get('[data-cy="tag-598"]').should('exist')
-    cy.get('[data-cy="tag-texte de reference"]').should('exist')
+    cy.get('[data-cy^="tag"]').should('have.length', 4)
+    cy.get('.Component-SingleTag').contains('Reg. MEMN')
+    cy.get('.Component-SingleTag').contains('Ouest Cotentin Bivalves')
+    cy.get('.Component-SingleTag').contains('Normandie')
+    cy.get('.Component-SingleTag').contains('Bretagne')
+    cy.get('[name="reference"]').invoke('val').should('equal', 'texte de reference')
     cy.get('[data-cy="input-Praires Ouest cotentin"]').should('exist')
-    cy.get('.rs-picker-date input').eq(0).should('have.value', getDate(new Date().toISOString()))
+    cy.get('.rs-picker-date input').eq(0).should('have.value', customDayjs().utc().format('YYYY-MM-DD'))
   })
 })

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

@@ -132,11 +132,12 @@ context('Side Window > Mission Form > Air Control', () => {
 
     // Navire
     cy.get('input[placeholder="Rechercher un navire..."]').type('mal')
-    cy.contains('mark', 'MAL').click().wait(500)
+    cy.contains('mark', 'MAL').click()
     cy.contains('Veuillez indiquer le navire contrôlé.').should('not.exist')
 
     // Saisi par
-    cy.fill('Saisi par', 'Gaumont').wait(500)
+    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)

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

@@ -152,7 +152,8 @@ context('Side Window > Mission Form > Air Surveillance', () => {
     getCloseButton().should('be.disabled')
 
     // Saisi par
-    cy.fill('Saisi par', 'Gaumont').wait(500)
+    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)

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

@@ -231,7 +231,8 @@ context('Side Window > Mission Form > Land Control', () => {
     cy.contains('Veuillez indiquer le port de contrôle.').should('not.exist')
 
     // Saisi par
-    cy.fill('Saisi par', 'Gaumont').wait(500)
+    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)

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

@@ -197,7 +197,8 @@ context('Side Window > Mission Form > Main Form', () => {
     cy.fill('Administration 1', 'DDTM')
     cy.fill('Unité 1', 'Cultures marines 56')
     cy.wait(500)
-    cy.fill('Moyen 1', ['Brezel - FAH 7185']).wait(250)
+    cy.fill('Moyen 1', ['Brezel - FAH 7185'])
+    cy.wait(250)
     cy.fill('Contact de l’unité 1', 'Bob')
     cy.fill('Contact de l’unité 1', 'Bob')
 
@@ -210,7 +211,8 @@ context('Side Window > Mission Form > Main Form', () => {
     cy.wait(500)
 
     cy.fill('CACEM : orientations, observations', 'Une note.')
-    cy.fill('CNSP : orientations, observations', 'Une autre note.').wait(250)
+    cy.fill('CNSP : orientations, observations', 'Une autre note.')
+    cy.wait(250)
     cy.fill('Ouvert par', 'Nemo')
     cy.fill('Clôturé par', 'Doris')
 

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

@@ -104,7 +104,8 @@ context('Side Window > Mission Form > Observation', () => {
     getCloseButton().should('be.disabled')
 
     // Saisi par
-    cy.fill('Saisi par', 'Gaumont').wait(500)
+    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)

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

@@ -389,7 +389,8 @@ context('Side Window > Mission Form > Sea Control', () => {
     cy.contains('Veuillez indiquer le navire contrôlé.').should('not.exist')
 
     // Saisi par
-    cy.fill('Saisi par', 'Gaumont').wait(500)
+    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)

frontend/cypress/e2e/side_window/mission_list/filter_bar.spec.ts

@@ -43,7 +43,8 @@ context('Side Window > Mission List > Filter Bar', () => {
     // Default status
     cy.get('[data-cy="mission-list-filter-tags"]').contains('En cours')
     cy.intercept('GET', `*missionStatus=ENDED&*`).as('getMissions')
-    cy.fill('Statut', undefined).wait(500)
+    cy.fill('Statut', undefined)
+    cy.wait(500)
     cy.fill('Statut', ['Terminée'])
     cy.wait('@getMissions')
 

frontend/cypress/support/e2e.ts

@@ -1,6 +1,7 @@
 // Support file
 // This file runs before every single spec file.
 // https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Support-file
+/// <reference path="../../node_modules/@mtes-mct/monitor-ui/cypress/global.d.ts" />
 
 import 'cypress-mouse-position/commands'
 import 'cypress-plugin-snapshots/commands'
@@ -47,36 +48,7 @@ declare global {
           separator: string
         }>
       ): Chainable<null>
-      /* eslint-enable typescript-sort-keys/interface */
-
-      // eslint-disable-next-line typescript-sort-keys/interface
-      clickButton(
-        label: string,
-        options?: Partial<{
-          index: number
-          withinSelector: string
-        }>
-      ): Chainable<JQuery<HTMLButtonElement>>
-      clickLink(linkText: string): Chainable<JQuery<HTMLAnchorElement>>
-      clickOutside(xPosition?: number, yPosition?: number): void
-      fill(
-        label: string,
-        value:
-          | boolean
-          | number
-          | string
-          | string[]
-          | (DateTuple | DateWithTimeTuple)
-          | ([Cypress.DateTuple, Cypress.DateTuple] | [Cypress.DateWithTimeTuple, Cypress.DateWithTimeTuple])
-          | undefined
-      ): Chainable<Element>
-      forceClick(): Chainable<JQuery<HTMLElement>>
-      getDataCy(dataCy: string): Chainable<JQuery<HTMLElement>>
-      waitForLastRequest(alias, partialRequest, maxRequests, level?)
     }
-
-    type DateTuple = [number, number, number]
-    type DateWithTimeTuple = [number, number, number, number, number]
   }
 }
 

frontend/package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/modifiers": "6.0.1",
-    "@mtes-mct/monitor-ui": "13.0.0",
+    "@mtes-mct/monitor-ui": "13.7.1",
     "@reduxjs/toolkit": "1.9.6",
     "@sentry/browser": "7.55.2",
     "@sentry/react": "7.52.1",

frontend/src/api/APIWorker.tsx

@@ -1,6 +1,6 @@
+import { fleetSegmentApi } from '@features/FleetSegment/apis'
 import { useEffect, useRef, useState } from 'react'
 
-import { fleetSegmentApi } from './fleetSegment'
 import { SideWindowStatus } from '../domain/entities/sideWindow/constants'
 import { VesselSidebarTab } from '../domain/entities/vessel/vessel'
 import { setIsUpdatingVessels } from '../domain/shared_slices/Global'

frontend/src/domain/use_cases/vessel/getFleetSegments.ts

@@ -1,6 +1,6 @@
-import { fleetSegmentApi } from '../../../api/fleetSegment'
+import { fleetSegmentApi } from '@features/FleetSegment/apis'
 
-import type { FleetSegment } from '../../types/fleetSegment'
+import type { FleetSegment } from '@features/FleetSegment/types'
 import type { MissionActionFormValues } from '@features/Mission/components/MissionForm/types'
 
 export const getFleetSegments =

frontend/src/features/Backoffice/edit_regulation/ConfirmRegulationModal.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { batch, useDispatch, useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
 
 import { COLORS } from '../../../constants/constants'
-import { setIsConfirmModalOpen, setRegulationModified, setSaveOrUpdateRegulation } from '../slice'
+import { setIsConfirmModalOpen, setSaveOrUpdateRegulation } from '../slice'
 import { CancelButton, ValidateButton } from '../../commonStyles/Buttons.style'
 import { FooterButton } from '../../commonStyles/Backoffice.style'
 import CloseIconSVG from '../../icons/Croix_grise_clair.svg?react'
@@ -13,16 +13,12 @@ const ConfirmRegulationModal = ({ goBackofficeHome }) => {
   const { isConfirmModalOpen } = useSelector(state => state.regulation)
 
   const save = () => {
-    batch(() => {
-      dispatch(setIsConfirmModalOpen(false))
-      dispatch(setSaveOrUpdateRegulation(true))
-      dispatch(setRegulationModified(false))
-    })
+    dispatch(setIsConfirmModalOpen(false))
+    dispatch(setSaveOrUpdateRegulation(true))
   }
 
   const close = () => {
     dispatch(setIsConfirmModalOpen(false))
-    dispatch(setRegulationModified(false))
   }
 
   return (