[Mission] Affichage des actions Env dans la timeline du formulaire d…

…e mission (#3033)

## Linked issues

- Resolve #3023 

----

- [x] Tests E2E (Cypress)


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


- **Refactor**
	- Updated ESLint configuration for improved code quality checks.
- Standardized import statements for `Mission` across test files for
consistency.
- Comprehensive update across numerous files to consolidate and update
import paths, reflecting a reorganization of file structure for better
maintainability.
- **Tests**
- Added a new test case for verifying the display of environmental
actions in the Side Window Mission Form Action List.
- **Style**
- Adjusted styling properties in components for enhanced user interface
consistency.
- **New Features**
- Introduced a new `EnvMissionAction` type for better handling of
environmental actions in missions.
- **New Features**
- Added a new React component `ActionCard` to display mission action
details with interactive selection functionality.
- **New Features**
- Introduced a new component `EnvActionCard` to display environmental
mission actions with corresponding icons and labels.
- **New Features**
- Refactored the `FishActionCard` component to focus on displaying
action details and providing options for duplicating and removing
actions.
- **New Features**
- Updated the `ActionList` component with new imports, hooks, props, and
modified logic for sorting and displaying mission actions.
- **New Features**
- Added styled components for `ActionLabel` and `Head` in the
`ActionList` component for improved UI design.

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

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

@@ -219,8 +219,8 @@ context('Side Window > Mission Form > Action List', () => {
         'est automatiquement calculée selon le point ou la zone de la dernière action rapportée par l’unité.'
     )
 
-    cy.wait(250)
-    cy.clickButton('Supprimer l’action').eq(0)
+    cy.wait(500)
+    cy.clickButton('Supprimer l’action')
 
     // There is still a valid control with a geometry that could be used for the mission zone
     cy.get('.Toastify__toast--success').contains(
@@ -241,4 +241,16 @@ context('Side Window > Mission Form > Action List', () => {
         'est automatiquement calculée selon le point ou la zone de la dernière action rapportée par l’unité.'
     )
   })
+
+  it('Should show Env actions on the actions timeline', () => {
+    editSideWindowMissionListMissionWithId(34, SeaFrontGroup.MEMN)
+
+    cy.get('[data-cy="mission-form-action-list"]').children().eq(0).contains('28 Nov à 13:59')
+    cy.get('[data-cy="mission-form-action-list"]').children().eq(0).contains('Surveillance')
+    cy.get('[data-cy="mission-form-action-list"]').children().eq(1).contains('Action CACEM')
+
+    cy.get('[data-cy="mission-form-action-list"]').children().eq(2).contains('17 Nov à 13:59')
+    cy.get('[data-cy="mission-form-action-list"]').children().eq(2).contains('Contrôle')
+    cy.get('[data-cy="mission-form-action-list"]').children().eq(3).contains('Action CACEM')
+  })
 })

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

@@ -1,5 +1,6 @@
+import { Mission } from '@features/Mission/mission.types'
+
 import { fillSideWindowMissionFormBase, openSideWindowNewMission } from './utils'
-import { Mission } from '../../../../src/domain/entities/mission/types'
 import { getUtcDateInMultipleFormats } from '../../utils/getUtcDateInMultipleFormats'
 
 context('Side Window > Mission Form > Air Control', () => {

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

@@ -1,5 +1,6 @@
+import { Mission } from '@features/Mission/mission.types'
+
 import { fillSideWindowMissionFormBase, openSideWindowNewMission } from './utils'
-import { Mission } from '../../../../src/domain/entities/mission/types'
 
 context('Side Window > Mission Form > Air Surveillance', () => {
   beforeEach(() => {

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

@@ -1,5 +1,6 @@
+import { Mission } from '@features/Mission/mission.types'
+
 import { fillSideWindowMissionFormBase, openSideWindowNewMission } from './utils'
-import { Mission } from '../../../../src/domain/entities/mission/types'
 import { getUtcDateInMultipleFormats } from '../../utils/getUtcDateInMultipleFormats'
 
 context('Side Window > Mission Form > Land Control', () => {

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

@@ -1,5 +1,6 @@
+import { Mission } from '@features/Mission/mission.types'
+
 import { fillSideWindowMissionFormBase, openSideWindowNewMission } from './utils'
-import { Mission } from '../../../../src/domain/entities/mission/types'
 import { SeaFrontGroup } from '../../../../src/domain/entities/seaFront/constants'
 import { SideWindowMenuLabel } from '../../../../src/domain/entities/sideWindow/constants'
 import { FAKE_MISSION_WITH_EXTERNAL_ACTIONS, FAKE_MISSION_WITHOUT_EXTERNAL_ACTIONS } from '../../constants'
@@ -41,6 +42,7 @@ context('Side Window > Mission Form > Main Form', () => {
     }).as('createMission')
     cy.intercept('GET', '/api/v1/missions/1', {
       body: {
+        envActions: [],
         id: 1
       },
       statusCode: 201
@@ -99,6 +101,7 @@ context('Side Window > Mission Form > Main Form', () => {
       openSideWindowNewMission()
       cy.intercept('GET', '/api/v1/missions/1', {
         body: {
+          envActions: [],
           id: 1
         },
         statusCode: 201
@@ -171,6 +174,7 @@ context('Side Window > Mission Form > Main Form', () => {
     openSideWindowNewMission()
     cy.intercept('GET', '/api/v1/missions/1', {
       body: {
+        envActions: [],
         id: 1
       },
       statusCode: 201

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

@@ -1,5 +1,6 @@
+import { Mission } from '@features/Mission/mission.types'
+
 import { fillSideWindowMissionFormBase, openSideWindowNewMission } from './utils'
-import { Mission } from '../../../../src/domain/entities/mission/types'
 
 context('Side Window > Mission Form > Observation', () => {
   beforeEach(() => {

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

@@ -1,5 +1,6 @@
+import { Mission } from '@features/Mission/mission.types'
+
 import { fillSideWindowMissionFormBase, openSideWindowNewMission } from './utils'
-import { Mission } from '../../../../src/domain/entities/mission/types'
 import { getUtcDateInMultipleFormats } from '../../utils/getUtcDateInMultipleFormats'
 
 context('Side Window > Mission Form > Sea Control', () => {

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

@@ -2,7 +2,7 @@ import { SideWindowMenuLabel } from '../../../../src/domain/entities/sideWindow/
 import { customDayjs } from '../../utils/customDayjs'
 import { getUtcDateInMultipleFormats } from '../../utils/getUtcDateInMultipleFormats'
 
-import type { Mission } from '../../../../src/domain/entities/mission/types'
+import type { Mission } from '@features/Mission/mission.types'
 
 export const openSideWindowNewMission = () => {
   cy.viewport(1920, 1080)
@@ -64,6 +64,7 @@ export const fillSideWindowMissionFormBase = (
   }).as('createMission')
   cy.intercept('GET', '/api/v1/missions/1', {
     body: {
+      envActions: [],
       id: 1,
       isClosed: isReturningClosed
     },

frontend/src/api/missionAction.ts

@@ -2,7 +2,7 @@ import { monitorfishApi, monitorfishApiKy } from './api'
 import { ApiError } from '../libs/ApiError'
 import { FrontendApiError } from '../libs/FrontendApiError'
 
-import type { MissionAction } from '../domain/types/missionAction'
+import type { MissionAction } from '@features/Mission/missionAction.types'
 
 const GET_MISSION_ACTIONS_ERROR_MESSAGE = "Nous n'avons pas pu récupérer les actions de la mission"
 

frontend/src/context/MissionEventContext.ts

@@ -1,5 +1,5 @@
 import React from 'react'
 
-import type { Mission } from '../domain/entities/mission/types'
+import type { Mission } from '@features/Mission/mission.types'
 
 export const MissionEventContext = React.createContext<Mission.Mission | undefined>(undefined)

frontend/src/domain/entities/alerts/types.ts

@@ -1,7 +1,7 @@
 import { SeaFront } from '../seaFront/constants'
 
-import type { MissionAction } from '../../types/missionAction'
 import type { VesselIdentifier, VesselIdentity } from '../vessel/types'
+import type { MissionAction } from '@features/Mission/missionAction.types'
 import type { Except } from 'type-fest'
 
 export enum PendingAlertValueType {

frontend/src/domain/entities/controls.ts

@@ -1,7 +1,6 @@
+import { MissionAction } from '@features/Mission/missionAction.types'
 import { customDayjs } from '@mtes-mct/monitor-ui'
 
-import { MissionAction } from '../types/missionAction'
-
 import type { MissionActionFormValues } from '@features/Mission/components/MissionForm/types'
 
 import InfractionType = MissionAction.InfractionType

frontend/src/domain/entities/mission/__tests__/getMissionStatus.test.ts

@@ -1,7 +1,7 @@
+import { Mission } from '@features/Mission/mission.types'
 import { expect } from '@jest/globals'
 import { customDayjs } from '@mtes-mct/monitor-ui'
 
-import { Mission } from '../types'
 import { getMissionStatus } from '../utils'
 
 // TODO Test all mission statuses.

frontend/src/domain/entities/mission/filters/__tests__/seaFrontFilterFunction.test.ts

@@ -1,8 +1,8 @@
+import { Mission } from '@features/Mission/mission.types'
 import { expect } from '@jest/globals'
 import { getUtcizedDayjs } from '@mtes-mct/monitor-ui'
 
 import { SEA_FRONT_GROUP_SEA_FRONTS, SeaFront } from '../../../seaFront/constants'
-import { Mission } from '../../types'
 import { seaFrontFilterFunction } from '../seaFrontFilterFunction'
 
 import MissionSource = Mission.MissionSource
@@ -12,6 +12,7 @@ describe('domain/entities/mission/filters/seaFrontFilterFunction.ts()', () => {
   it('should return true when the facade is included in the mission facade', () => {
     const mission = {
       controlUnits: [],
+      envActions: [],
       facade: SeaFront.MED,
       id: 123,
       isClosed: false,
@@ -30,6 +31,7 @@ describe('domain/entities/mission/filters/seaFrontFilterFunction.ts()', () => {
   it('should return false when the facade is not included in the mission facade', () => {
     const mission = {
       controlUnits: [],
+      envActions: [],
       facade: SeaFront.SA,
       id: 123,
       isClosed: false,
@@ -48,6 +50,7 @@ describe('domain/entities/mission/filters/seaFrontFilterFunction.ts()', () => {
   it('should return true when the facade is not filtered', () => {
     const mission = {
       controlUnits: [],
+      envActions: [],
       facade: SeaFront.SA,
       id: 123,
       isClosed: false,
@@ -66,6 +69,7 @@ describe('domain/entities/mission/filters/seaFrontFilterFunction.ts()', () => {
   it('should return true when a group of facade is filtered', () => {
     const mission = {
       controlUnits: [],
+      envActions: [],
       facade: SeaFront.GUADELOUPE,
       id: 123,
       isClosed: false,

frontend/src/domain/entities/mission/filters/administrationFilterFunction.ts

@@ -1,4 +1,4 @@
-import { Mission } from '../types'
+import { Mission } from '@features/Mission/mission.types'
 
 export function administrationFilterFunction(mission: Mission.Mission, filter: string[]) {
   if (filter.length === 0) {

frontend/src/domain/entities/mission/filters/seaFrontFilterFunction.ts

@@ -1,5 +1,6 @@
+import { Mission } from '@features/Mission/mission.types'
+
 import { SeaFront } from '../../seaFront/constants'
-import { Mission } from '../types'
 
 export function seaFrontFilterFunction(mission: Mission.Mission, filter: SeaFront[]) {
   if (filter.length === 0) {

frontend/src/domain/entities/mission/filters/unitFilterFunction.ts

@@ -1,4 +1,4 @@
-import { Mission } from '../types'
+import { Mission } from '@features/Mission/mission.types'
 
 export function unitFilterFunction(mission: Mission.Mission, filter: string[]) {
   if (filter.length === 0) {

frontend/src/domain/entities/mission/index.ts

@@ -1,4 +1,6 @@
 import { getMissionActionInfractionsFromMissionActionFormValues } from '@features/Mission/components/MissionForm/ActionList/utils'
+import { Mission } from '@features/Mission/mission.types'
+import { MissionAction } from '@features/Mission/missionAction.types'
 import { isLandControl } from '@features/Mission/useCases/getLastControlCircleGeometry'
 import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
 import { random } from 'lodash'
@@ -9,17 +11,15 @@ import { circular } from 'ol/geom/Polygon'
 import { transform } from 'ol/proj'
 
 import { LAND_CONTROL_ZONE_RADIUS, SEA_CONTROL_ZONE_RADIUS } from './constants'
-import { Mission } from './types'
 import { getMissionStatus } from './utils'
 import { getMissionColor } from '../../../features/Mission/layers/MissionLayer/styles'
 import { booleanToInt, getDate, getDateTime } from '../../../utils'
-import { MissionAction } from '../../types/missionAction'
 import { getNumberOfInfractions, getNumberOfInfractionsWithRecord } from '../controls'
 import { MonitorFishLayer } from '../layers/types'
 import { OpenLayersGeometryType } from '../map/constants'
 
-import type { MissionWithActions } from './types'
 import type { MissionActionFormValues, MissionMainFormValues } from '@features/Mission/components/MissionForm/types'
+import type { MissionWithActions } from '@features/Mission/mission.types'
 import type { MultiPolygon } from 'ol/geom'
 
 import MissionStatus = Mission.MissionStatus

frontend/src/domain/entities/mission/utils.ts

@@ -1,7 +1,6 @@
+import { Mission } from '@features/Mission/mission.types'
 import { customDayjs } from '@mtes-mct/monitor-ui'
 
-import { Mission } from './types'
-
 export const getMissionStatus = ({
   endDateTimeUtc,
   isClosed,

frontend/src/domain/entities/vessel/types.ts

@@ -1,4 +1,4 @@
-// TODO This should be moved to `entities/vessel/types.ts`
+// TODO This should be moved to `entities/vessel/mission.types.ts`
 
 import type { RiskFactor } from './riskFactor/types'
 import type { ReportingType } from '../../types/reporting'

frontend/src/domain/shared_slices/Control.ts

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit'
 
-import type { MissionAction } from '../types/missionAction'
+import type { MissionAction } from '@features/Mission/missionAction.types'
 import type { PayloadAction } from '@reduxjs/toolkit'
 
 export type ControlState = {

frontend/src/features/ActivityReport/types.ts

@@ -1,6 +1,6 @@
 import type { Vessel } from '../../domain/entities/vessel/types'
 import type { LegacyControlUnit } from '../../domain/types/legacyControlUnit'
-import type { MissionAction } from '../../domain/types/missionAction'
+import type { MissionAction } from '../Mission/missionAction.types'
 
 export type ActivityReports = {
   activityReports: ActivityReport[]

frontend/src/features/ActivityReport/utils.ts

@@ -1,7 +1,7 @@
 import { range, sortBy } from 'lodash'
 
 import { JDP, UNTARGETED_SPECIES_CODE } from './constants'
-import { MissionAction } from '../../domain/types/missionAction'
+import { MissionAction } from '../Mission/missionAction.types'
 
 import type { ActivityReportWithId } from './types'
 import type { DownloadAsCsvMap } from '@utils/downloadAsCsv'

frontend/src/features/Backoffice/edit_regulation/identification/RegulationRegionLine.tsx

@@ -1,5 +1,5 @@
 import { formatDataForSelectPicker } from '@features/Backoffice/utils'
-import { OptionValue } from '@features/SideWindow/MissionList/FilterBar'
+import { OptionValue } from '@features/Mission/components/MissionList/FilterBar'
 import { useBackofficeAppDispatch } from '@hooks/useBackofficeAppDispatch'
 import { useBackofficeAppSelector } from '@hooks/useBackofficeAppSelector'
 import { MultiSelect, SingleTag } from '@mtes-mct/monitor-ui'

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

@@ -1,4 +1,4 @@
-import { MissionAction } from 'domain/types/missionAction'
+import { MissionAction } from '@features/Mission/missionAction.types'
 import { memo } from 'react'
 import styled from 'styled-components'
 import { FrontendErrorBoundary } from 'ui/FrontendErrorBoundary'

frontend/src/features/Mission/components/MissionForm/ActionForm/schemas.ts

@@ -1,9 +1,9 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 
 import { HIDDEN_ERROR } from '@features/Mission/components/MissionForm/constants'
+import { MissionAction } from '@features/Mission/missionAction.types'
 import { customDayjs } from '@mtes-mct/monitor-ui'
 import { mainStore } from '@store/index'
-import { MissionAction } from 'domain/types/missionAction'
 import { array, boolean, number, object, string } from 'yup'
 
 // -----------------------------------------------------------------------------

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

@@ -1,5 +1,5 @@
+import { MissionAction } from '@features/Mission/missionAction.types'
 import { FormikCheckbox, FormikMultiRadio, FormikTextarea } from '@mtes-mct/monitor-ui'
-import { MissionAction } from 'domain/types/missionAction'
 import styled from 'styled-components'
 
 import { FieldsetGroup } from '../../shared/FieldsetGroup'

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

@@ -8,8 +8,8 @@ import styled from 'styled-components'
 import { FieldsetGroupSpinner } from '../../shared/FieldsetGroup'
 
 import type { MissionActionFormValues } from '../../types'
+import type { MissionAction } from '@features/Mission/missionAction.types'
 import type { Option } from '@mtes-mct/monitor-ui'
-import type { MissionAction } from 'domain/types/missionAction'
 
 type FleetSegmentsFieldProps = Readonly<{
   label: string

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

@@ -1,4 +1,5 @@
 import { HIDDEN_ERROR } from '@features/Mission/components/MissionForm/constants'
+import { MissionAction } from '@features/Mission/missionAction.types'
 import { addOrEditControlCoordinates } from '@features/Mission/useCases/addOrEditControlCoordinates'
 import { useListenForDrawedGeometry } from '@hooks/useListenForDrawing'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
@@ -8,7 +9,6 @@ import { isCypress } from '@utils/isCypress'
 import { convertToGeoJSONGeometryObject } from 'domain/entities/layers'
 import { InteractionListener, OpenLayersGeometryType } from 'domain/entities/map/constants'
 import { fitToExtent } from 'domain/shared_slices/Map'
-import { MissionAction } from 'domain/types/missionAction'
 import { getCoordinatesExtent } from 'domain/use_cases/map/getCoordinatesExtent'
 import { useField, useFormikContext } from 'formik'
 import Feature from 'ol/Feature'

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

@@ -1,5 +1,5 @@
+import { MissionAction } from '@features/Mission/missionAction.types'
 import { Accent, Icon, IconButton, Legend, Tag, TagGroup, THEME } from '@mtes-mct/monitor-ui'
-import { MissionAction } from 'domain/types/missionAction'
 import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'
 

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

@@ -16,7 +16,7 @@ import { InfractionCategory } from './types'
 import { InfractionFormLiveSchema } from '../../schemas'
 import { INFRACTION_TYPES_AS_OPTIONS } from '../constants'
 
-import type { MissionAction } from 'domain/types/missionAction'
+import type { MissionAction } from '@features/Mission/missionAction.types'
 
 type InfractionFormProps = Readonly<{
   initialValues: MissionAction.Infraction & { group?: string | undefined }

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

@@ -15,7 +15,7 @@ import { FieldsetGroup, FieldsetGroupSpinner } from '../../../shared/FieldsetGro
 import { FieldsetGroupSeparator } from '../../../shared/FieldsetGroupSeparator'
 
 import type { MissionActionFormValues } from '../../../types'
-import type { MissionAction } from 'domain/types/missionAction'
+import type { MissionAction } from '@features/Mission/missionAction.types'
 
 type FormikMultiInfractionPickerProps = Readonly<{
   addButtonLabel: string

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

@@ -21,9 +21,9 @@ import { FieldsetGroup, FieldsetGroupSpinner } from '../../shared/FieldsetGroup'
 import { FieldsetGroupSeparator } from '../../shared/FieldsetGroupSeparator'
 
 import type { MissionActionFormValues } from '../../types'
+import type { MissionAction } from '@features/Mission/missionAction.types'
 import type { Option } from '@mtes-mct/monitor-ui'
 import type { Gear } from 'domain/types/Gear'
-import type { MissionAction } from 'domain/types/missionAction'
 import type { DeepPartial } from 'types'
 
 export function GearsField() {

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

@@ -1,5 +1,5 @@
+import { MissionAction } from '@features/Mission/missionAction.types'
 import { FormikMultiRadio, FormikTextarea } from '@mtes-mct/monitor-ui'
-import { MissionAction } from 'domain/types/missionAction'
 
 import { FieldsetGroup } from '../../shared/FieldsetGroup'
 import { FieldsetGroupSeparator } from '../../shared/FieldsetGroupSeparator'

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

@@ -1,5 +1,5 @@
+import { MissionAction } from '@features/Mission/missionAction.types'
 import { getOptionsFromLabelledEnum } from '@utils/getOptionsFromLabelledEnum'
-import { MissionAction } from 'domain/types/missionAction'
 
 export const FLIGHT_GOALS_AS_OPTIONS = getOptionsFromLabelledEnum(MissionAction.FLIGHT_GOAL_LABEL)
 export const INFRACTION_TYPES_AS_OPTIONS = getOptionsFromLabelledEnum(MissionAction.INFRACTION_TYPE_LABEL)

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

@@ -1,5 +1,5 @@
+import { MissionAction } from '@features/Mission/missionAction.types'
 import { getLocalizedDayjs } from '@mtes-mct/monitor-ui'
-import { MissionAction } from 'domain/types/missionAction'
 
 import type { FleetSegment } from '@features/FleetSegment/types'
 import type { Option } from '@mtes-mct/monitor-ui'