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

- Resolve MTES-MCT/monitorfish#2480
MTES-MCT · Oct 16, 2023 · d987c4b · d987c4b
2 parents 594b1c9 + b71fdf4
commit d987c4b
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 8 deletions.
diff --git a/frontend/cypress/e2e/side_window/mission/create_mission.spec.ts b/frontend/cypress/e2e/side_window/mission/create_mission.spec.ts
@@ -149,4 +149,17 @@ context('Mission', () => {
     // Then
     cy.get('*[data-cy="delete-mission"]').should('be.disabled')
   })
+
+  it('A warning should be displayed When a control unit is already engaged in a mission ', () => {
+    // Given
+    cy.wait(200)
+    cy.intercept('GET', '/api/v1/missions/engaged_control_units').as('getEngagedControlUnits')
+
+    // When
+    cy.get('*[data-cy="edit-mission-43"]').click({ force: true })
+    cy.wait('@getEngagedControlUnits')
+
+    // Then
+    cy.get('body').contains('Cette unité est actuellement sélectionnée dans une autre mission en cours.')
+  })
 })
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -31,7 +31,7 @@
     "test:unit:watch": "npm run test:unit -- --watch"
   },
   "dependencies": {
-    "@mtes-mct/monitor-ui": "10.1.1",
+    "@mtes-mct/monitor-ui": "10.4.0",
     "@reduxjs/toolkit": "1.9.5",
     "@rsuite/responsive-nav": "5.0.1",
     "@sentry/browser": "7.73.0",

diff --git a/frontend/src/api/missionsAPI.ts b/frontend/src/api/missionsAPI.ts
@@ -1,5 +1,8 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
+import { monitorenvPublicApi } from './api'
+import { ControlUnit } from '../domain/entities/controlUnit'
+
 import type { Mission } from '../domain/entities/missions'
 
 type MissionsResponse = Mission[]
@@ -83,10 +86,20 @@ export const missionsAPI = createApi({
   tagTypes: ['Missions']
 })
 
+export const publicMissionsAPI = monitorenvPublicApi.injectEndpoints({
+  endpoints: builder => ({
+    getEngagedControlUnits: builder.query<ControlUnit.ControlUnit[], void>({
+      query: () => `/v1/missions/engaged_control_units`
+    })
+  })
+})
+
 export const {
   useCreateMissionMutation,
   useDeleteMissionMutation,
   useGetMissionQuery,
   useGetMissionsQuery,
   useUpdateMissionMutation
 } = missionsAPI
+
+export const { useGetEngagedControlUnitsQuery } = publicMissionsAPI
diff --git a/frontend/src/features/missions/MissionForm/ControlUnitSelector.tsx b/frontend/src/features/missions/MissionForm/ControlUnitSelector.tsx
@@ -1,12 +1,14 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { FieldError, FormikTextInput } from '@mtes-mct/monitor-ui'
+import { FieldError, FormikTextInput, Level, Message } from '@mtes-mct/monitor-ui'
 import { useField } from 'formik'
 import _ from 'lodash'
 import { type MutableRefObject, useMemo, useRef } from 'react'
 import { Form, IconButton, TagPicker } from 'rsuite'
 import styled from 'styled-components'
 
+import { FIVE_MINUTES } from '../../../api/APIWorker'
 import { useGetLegacyControlUnitsQuery } from '../../../api/legacyControlUnitsAPI'
+import { useGetEngagedControlUnitsQuery } from '../../../api/missionsAPI'
 import { FormikErrorWrapper } from '../../../uiMonitor/CustomFormikFields/FormikErrorWrapper'
 import { SelectPicker } from '../../../uiMonitor/CustomRsuite/SelectPicker'
 import { ReactComponent as DeleteSVG } from '../../../uiMonitor/icons/Delete.svg'
@@ -24,9 +26,22 @@ export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, removeC
   )
 
   const resourcesRef = useRef() as MutableRefObject<HTMLDivElement>
-  const { data, isError, isLoading } = useGetLegacyControlUnitsQuery()
+  const { data: controlUnitsData, isError, isLoading } = useGetLegacyControlUnitsQuery()
 
-  const filteredControlUnits = useMemo(() => data?.filter(unit => !unit.isArchived) || [], [data])
+  const filteredControlUnits = useMemo(
+    () => controlUnitsData?.filter(unit => !unit.isArchived) || [],
+    [controlUnitsData]
+  )
+
+  const { data: engagedControlUnitsData } = useGetEngagedControlUnitsQuery(undefined, { pollingInterval: FIVE_MINUTES })
+
+  const engagedControlUnits = useMemo(() => {
+    if (!engagedControlUnitsData) {
+      return []
+    }
+
+    return engagedControlUnitsData
+  }, [engagedControlUnitsData])
 
   const administrationList = _.chain(filteredControlUnits)
     .map(unit => unit.administration)
@@ -91,9 +106,12 @@ export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, removeC
   if (isError) {
     return <div>Erreur</div>
   }
+
   if (isLoading) {
     return <div>Chargement</div>
   }
+
+  const isEngaged = !!engagedControlUnits.find(engaged => engaged.id === unitField.value)
   const resourceUnitIndexDisplayed = controlUnitIndex + 1
 
   return (
@@ -138,6 +156,11 @@ export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, removeC
           />
         </FormikErrorWrapper>
         {unitNameMeta.error && <FieldError>{unitNameMeta.error}</FieldError>}
+        {isEngaged && (
+          <StyledMessage level={Level.WARNING}>
+            Cette unité est actuellement sélectionnée dans une autre mission en cours.
+          </StyledMessage>
+        )}
       </FormGroupFixed>
       <FormGroupFixed>
         <RefWrapper ref={resourcesRef} data-cy="unit-tag-picker">
@@ -169,6 +192,10 @@ export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, removeC
   )
 }
 
+const StyledMessage = styled(Message)`
+  margin-top: 8px;
+`
+
 const RessourceUnitWrapper = styled.div`
   margin-bottom: 14px;
   display: flex;