[Missions] Affichage d'une unité déjà mobilisé (#2585)

## Linked issues

- Resolve #2480

----

- [ ] Tests E2E (Cypress)

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

@@ -517,4 +517,14 @@ context('Side Window > Mission Form > Main Form', () => {
     cy.get('@getMissionStubbed.all').should('have.length', 3)
     cy.get('*[data-cy="mission-form-error"]').contains("Nous n'avons pas pu récupérer la mission")
   })
+
+  it('Should show a warning indicating that a control unit is already engaged in a mission', () => {
+    editSideWindowMissionListMissionWithId(43, SeaFrontGroup.MED)
+
+    cy.get('body').should('not.contain', 'Cette unité est actuellement sélectionnée dans une autre mission en cours.')
+
+    editSideWindowMissionListMissionWithId(4, SeaFrontGroup.MEMN)
+
+    cy.get('body').contains('Cette unité est actuellement sélectionnée dans une autre mission en cours.')
+  })
 })

frontend/cypress/mappings/get-engaged-control-units.json

@@ -0,0 +1,77 @@
+{
+  "request": {
+    "method": "GET",
+    "urlPath": "/api/v1/missions/engaged_control_units"
+  },
+  "response": {
+    "status": 200,
+    "headers": {
+      "Content-Type": "application/json",
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "*"
+    },
+    "jsonBody": [
+      {
+        "id": 10015,
+        "administration": "Douane",
+        "name": "BGC Bastia",
+        "resources": [],
+        "contact": null,
+        "isArchived": false
+      },
+      {
+        "id": 10003,
+        "administration": "DDTM",
+        "name": "DML 2A",
+        "resources": [],
+        "contact": null,
+        "isArchived": false
+      },
+      {
+        "id": 10001,
+        "administration": "DDTM",
+        "name": "Cultures marines – DDTM 40",
+        "resources": [
+          {
+            "id": 1,
+            "name": "Semi-rigide 1"
+          }
+        ],
+        "contact": null,
+        "isArchived": false
+      },
+      {
+        "id": 10016,
+        "administration": "Douane",
+        "name": "BSN Ste Maxime",
+        "resources": [],
+        "contact": null,
+        "isArchived": false
+      },
+      {
+        "id": 10017,
+        "administration": "Douane",
+        "name": "DF 25 Libecciu",
+        "resources": [],
+        "contact": null,
+        "isArchived": false
+      },
+      {
+        "id": 10018,
+        "administration": "Douane",
+        "name": "DF 61 Port-de-Bouc",
+        "resources": [],
+        "contact": null,
+        "isArchived": false
+      },
+      {
+        "id": 10012,
+        "administration": "DIRM DM",
+        "name": "Cross Etel",
+        "resources": [],
+        "contact": null,
+        "isArchived": false
+      }
+    ]
+  }
+}

frontend/package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/modifiers": "6.0.1",
-    "@mtes-mct/monitor-ui": "10.0.0",
+    "@mtes-mct/monitor-ui": "10.4.0",
     "@reduxjs/toolkit": "1.9.6",
     "@sentry/browser": "7.55.2",
     "@sentry/react": "7.52.1",

frontend/src/api/mission.ts

@@ -2,8 +2,10 @@ import { monitorenvApi, monitorfishApi } from '.'
 import { ApiError } from '../libs/ApiError'
 
 import type { Mission, MissionWithActions } from '../domain/entities/mission/types'
+import type { ControlUnit } from '../domain/types/controlUnit'
 
 const GET_MISSION_ERROR_MESSAGE = "Nous n'avons pas pu récupérer la mission"
+const GET_ENGAGED_CONTROL_UNITS_ERROR_MESSAGE = "Nous n'avons pas pu récupérer les unités en mission"
 
 export const monitorenvMissionApi = monitorenvApi.injectEndpoints({
   endpoints: builder => ({
@@ -32,6 +34,11 @@ export const monitorenvMissionApi = monitorenvApi.injectEndpoints({
       })
     }),
 
+    getEngagedControlUnits: builder.query<ControlUnit.ControlUnit[], void>({
+      query: () => `missions/engaged_control_units`,
+      transformErrorResponse: response => new ApiError(GET_ENGAGED_CONTROL_UNITS_ERROR_MESSAGE, response)
+    }),
+
     getMission: builder.query<Mission.Mission, Mission.Mission['id']>({
       providesTags: [{ type: 'Missions' }],
       query: id => `missions/${id}`,
@@ -96,7 +103,12 @@ export const monitorfishMissionApi = monitorfishApi.injectEndpoints({
   })
 })
 
-export const { useCreateMissionMutation, useDeleteMissionMutation, useGetMissionQuery, useUpdateMissionMutation } =
-  monitorenvMissionApi
+export const {
+  useCreateMissionMutation,
+  useDeleteMissionMutation,
+  useGetEngagedControlUnitsQuery,
+  useGetMissionQuery,
+  useUpdateMissionMutation
+} = monitorenvMissionApi
 
 export const { useGetMissionsQuery } = monitorfishMissionApi

frontend/src/features/SideWindow/Alert/AlertListAndReportingList/PendingAlertsList.tsx

@@ -1,4 +1,4 @@
-import { CustomSearch, THEME } from '@mtes-mct/monitor-ui'
+import { CustomSearch, ExclamationPoint } from '@mtes-mct/monitor-ui'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { FlexboxGrid, List } from 'rsuite'
 import styled from 'styled-components'
@@ -129,7 +129,7 @@ export function PendingAlertsList({ baseRef, numberOfSilencedAlerts, selectedSea
           data-cy="side-window-alerts-number-silenced-vessels"
           style={numberOfSilencedAlertsStyle}
         >
-          <Warning style={warningStyle}>!</Warning>
+          <StyledExclamationPoint />
           {numberOfAlertsMessage}
         </NumberOfSilencedAlerts>
       )}
@@ -196,19 +196,9 @@ export function PendingAlertsList({ baseRef, numberOfSilencedAlerts, selectedSea
   )
 }
 
-const Warning = styled.span``
-const warningStyle = {
-  background: THEME.color.goldenPoppy,
-  borderRadius: 15,
-  color: COLORS.charcoal,
-  display: 'inline-block',
-  font: 'normal normal bold 10px/11px Arial',
-  height: 5,
-  lineHeight: '7px',
-  marginRight: 5,
-  padding: '5px 4px 5px 6px',
-  width: 5
-}
+const StyledExclamationPoint = styled(ExclamationPoint)`
+  margin-right: 5px;
+`
 
 const NumberOfSilencedAlerts = styled.div``
 const numberOfSilencedAlertsStyle = {

frontend/src/features/SideWindow/MissionForm/MainForm/FormikMultiControlUnitPicker/ControlUnitSelect.tsx

@@ -1,4 +1,14 @@
-import { Accent, Icon, IconButton, MultiSelect, Select, TextInput, useNewWindow } from '@mtes-mct/monitor-ui'
+import {
+  Accent,
+  Icon,
+  IconButton,
+  Level,
+  Message,
+  MultiSelect,
+  Select,
+  TextInput,
+  useNewWindow
+} from '@mtes-mct/monitor-ui'
 import { useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
@@ -7,6 +17,8 @@ import {
   mapControlUnitsToUniqueSortedNamesAsOptions,
   mapControlUnitToSortedResourcesAsOptions
 } from './utils'
+import { FIVE_MINUTES } from '../../../../../api/APIWorker'
+import { useGetEngagedControlUnitsQuery } from '../../../../../api/mission'
 import { INITIAL_MISSION_CONTROL_UNIT } from '../../constants'
 import { isValidControlUnit } from '../../utils'
 
@@ -42,12 +54,22 @@ export function ControlUnitSelect({
   value
 }: ControlUnitSelectProps) {
   const { newWindowContainerRef } = useNewWindow()
+  const { data: engagedControlUnitsData } = useGetEngagedControlUnitsQuery(undefined, { pollingInterval: FIVE_MINUTES })
+
+  const engagedControlUnits = useMemo(() => {
+    if (!engagedControlUnitsData) {
+      return []
+    }
+
+    return engagedControlUnitsData
+  }, [engagedControlUnitsData])
 
   const [controlledValue, setControlledValue] = useState(value)
   const [selectedControlUnit, setSelectedControlUnit] = useState<ControlUnit.ControlUnit | undefined>(
     isValidControlUnit(value) ? value : undefined
   )
 
+  const isEngaged = !!engagedControlUnits.find(engaged => engaged.id === value.id)
   const isLoading = !allControlUnits.length
 
   const filteredNamesAsOptions = useMemo((): Option[] => {
@@ -169,6 +191,11 @@ export function ControlUnitSelect({
           searchable
           value={controlledValue.name}
         />
+        {isEngaged && (
+          <Message level={Level.WARNING}>
+            Cette unité est actuellement sélectionnée dans une autre mission en cours.
+          </Message>
+        )}
         <MultiSelect
           baseContainer={newWindowContainerRef.current}
           disabled={isLoading || !controlledValue.administration || !controlledValue.name}

frontend/src/features/SideWindow/MissionForm/MainForm/FormikMultiControlUnitPicker/index.tsx

@@ -31,6 +31,7 @@ export function FormikMultiControlUnitPicker({ name }: FormikMultiControlUnitPic
     administrationsAsOptions: allAdministrationsAsOptions,
     unitsAsOptions: allNamesAsOptions
   } = useMemo(() => getControlUnitsOptionsFromControlUnits(controlUnitsQuery.data), [controlUnitsQuery.data])
+
   const errors = (allErrors[name] || []) as Array<{
     administration: string
     name: string
@@ -74,7 +75,7 @@ export function FormikMultiControlUnitPicker({ name }: FormikMultiControlUnitPic
   return (
     <Wrapper>
       <>
-        {(values[name] || []).map((value, index) => (
+        {(values.controlUnits || []).map((value, index) => (
           <ControlUnitSelect
             // eslint-disable-next-line react/no-array-index-key
             key={`unit${index}`}

frontend/src/features/SideWindow/MissionForm/index.tsx

@@ -616,6 +616,10 @@ const Header = styled.div`
   > div {
     vertical-align: middle;
   }
+
+  .Element-Tag {
+    align-self: auto !important;
+  }
 `
 
 const HeaderTitle = styled.h1`

frontend/src/ui/NoRsuiteOverrideWrapper.tsx

@@ -201,9 +201,6 @@ export const NoRsuiteOverrideWrapper = styled.div`
         }
 
         > .rs-tag-icon-close {
-          bottom: 0;
-          padding: 0 6px;
-
           > svg {
             height: 10px;
             width: 10px;