Merge pull request #489 from MTES-MCT/fix/ulam-front-action

Fix/ulam front action

frontend/src/v2/features/common/hooks/use-action-registry.tsx

@@ -1,9 +1,8 @@
-import { ActionTypeEnum } from '@common/types/env-mission-types'
-import { CompletenessForStatsStatusEnum } from '@common/types/mission-types'
-import { Icon, IconProps, THEME } from '@mtes-mct/monitor-ui'
+import { Icon, IconProps } from '@mtes-mct/monitor-ui'
 import { FunctionComponent } from 'react'
 import MissionActionItemAntiPollution from '../../mission-action/components/elements/mission-action-item-anti-pollution'
 import MissionActionItemBAAEMPermanence from '../../mission-action/components/elements/mission-action-item-baaem-performance'
+import MissionActionItemContact from '../../mission-action/components/elements/mission-action-item-contact'
 import MissionActionItemControl from '../../mission-action/components/elements/mission-action-item-control'
 import MissionActionItemIllegalImmigration from '../../mission-action/components/elements/mission-action-item-illegal-immigration'
 import MissionActionItemNauticalEvent from '../../mission-action/components/elements/mission-action-item-nautical-event'
@@ -13,209 +12,91 @@ import MissionActionItemRepresentation from '../../mission-action/components/ele
 import MissionActionItemRescue from '../../mission-action/components/elements/mission-action-item-rescue'
 import MissionActionItemSurveillance from '../../mission-action/components/elements/mission-action-item-surveillance'
 import MissionActionItemVigimer from '../../mission-action/components/elements/mission-action-item-vigimer'
-import MissionTimelineItemControlCard from '../../mission-timeline/components/elements/mission-timeline-item-control-card'
-import MissionTimelineItemGenericCard from '../../mission-timeline/components/elements/mission-timeline-item-generic-card'
-import MissionTimelineItemRescueCard from '../../mission-timeline/components/elements/mission-timeline-item-rescue-card'
-import MissionTimelineItemSurveillanceCard from '../../mission-timeline/components/elements/mission-timeline-item-surveillance-card'
-import { MissionTimelineAction } from '../../mission-timeline/types/mission-timeline-output'
+import { ActionType } from '../types/action-type'
 import { MissionAction } from '../types/mission-action'
 
-export type ActionTimeline = {
-  dropdownText?: string
-  noPadding?: boolean
-  component: FunctionComponent<{
-    title?: string
-    isSelected?: boolean
-    action?: MissionTimelineAction
-    icon?: FunctionComponent<IconProps>
-    prevAction?: MissionTimelineAction
-  }>
-}
-
-export type ActionStyle = {
-  color?: string
-  minHeight?: number
-  borderColor?: string
-  backgroundColor?: string
-}
-
 export type ActionRegistryItem = {
   title?: string
-  style?: ActionStyle
-  timeline: ActionTimeline
-  hasStatusTag?: boolean
   icon?: FunctionComponent<IconProps>
-  actionComponent?: FunctionComponent<{
+  component?: FunctionComponent<{
     action: MissionAction
     onChange: (newAction: MissionAction, debounceTime?: number) => Promise<unknown>
     isMissionFinished?: boolean
   }>
 }
 
 export type ActionRegistry = {
-  [key in ActionTypeEnum]?: ActionRegistryItem
+  [key in ActionType]?: ActionRegistryItem
 }
 
 const ACTION_REGISTRY: ActionRegistry = {
-  [ActionTypeEnum.CONTROL]: {
-    style: { backgroundColor: THEME.color.white, borderColor: THEME.color.lightGray },
+  [ActionType.CONTROL]: {
     title: 'Contrôles',
     icon: Icon.ControlUnit,
-    timeline: {
-      dropdownText: 'Ajouter des contrôles',
-      component: MissionTimelineItemControlCard
-    },
-    actionComponent: MissionActionItemControl
+    component: MissionActionItemControl
   },
-  [ActionTypeEnum.SURVEILLANCE]: {
-    style: { backgroundColor: '#e5e5eb', borderColor: THEME.color.lightGray },
+  [ActionType.SURVEILLANCE]: {
     icon: Icon.Observation,
     title: 'Surveillance Environnement',
-    timeline: {
-      dropdownText: `Surveillance`,
-      component: MissionTimelineItemSurveillanceCard
-    },
-    actionComponent: MissionActionItemSurveillance
+    component: MissionActionItemSurveillance
   },
-  [ActionTypeEnum.NOTE]: {
-    style: { backgroundColor: THEME.color.blueYonder25, borderColor: THEME.color.lightGray },
+  [ActionType.NOTE]: {
     title: 'Note libre',
     icon: Icon.Note,
-    timeline: {
-      dropdownText: 'Ajouter une note libre',
-      component: MissionTimelineItemGenericCard
-    },
-    actionComponent: MissionActionItemNote
+    component: MissionActionItemNote
   },
-  [ActionTypeEnum.VIGIMER]: {
-    style: {
-      backgroundColor: THEME.color.blueGray25,
-      borderColor: THEME.color.lightGray
-    },
+  [ActionType.VIGIMER]: {
     icon: Icon.More,
     title: 'Permanence Vigimer',
-    timeline: {
-      dropdownText: 'Permanence Vigimer',
-      component: MissionTimelineItemGenericCard
-    },
-    actionComponent: MissionActionItemVigimer
+    component: MissionActionItemVigimer
   },
-  [ActionTypeEnum.NAUTICAL_EVENT]: {
-    style: {
-      backgroundColor: THEME.color.blueGray25,
-      borderColor: THEME.color.lightGray
-    },
+  [ActionType.NAUTICAL_EVENT]: {
     icon: Icon.More,
     title: 'Manifestation nautique',
-    timeline: {
-      dropdownText: 'Sécu de manifestation nautique',
-      component: MissionTimelineItemGenericCard
-    },
-    actionComponent: MissionActionItemNauticalEvent
+    component: MissionActionItemNauticalEvent
   },
-  [ActionTypeEnum.RESCUE]: {
-    style: {
-      backgroundColor: THEME.color.goldenPoppy25,
-      borderColor: THEME.color.blueYonder25
-    },
+  [ActionType.RESCUE]: {
     title: 'Assistance et sauvetage',
     icon: Icon.Rescue,
-    timeline: {
-      dropdownText: 'Ajouter une assistance / sauvetage',
-      component: MissionTimelineItemRescueCard
-    },
-    actionComponent: MissionActionItemRescue
+    component: MissionActionItemRescue
   },
-  [ActionTypeEnum.REPRESENTATION]: {
-    style: {
-      backgroundColor: THEME.color.blueGray25,
-      borderColor: THEME.color.lightGray
-    },
+  [ActionType.REPRESENTATION]: {
     icon: Icon.More,
     title: 'Représentation',
-    timeline: {
-      dropdownText: 'Représentation',
-      component: MissionTimelineItemGenericCard
-    },
-    actionComponent: MissionActionItemRepresentation
+    component: MissionActionItemRepresentation
   },
-  [ActionTypeEnum.PUBLIC_ORDER]: {
-    style: {
-      backgroundColor: THEME.color.blueGray25,
-      borderColor: THEME.color.lightGray
-    },
+  [ActionType.PUBLIC_ORDER]: {
     icon: Icon.More,
     title: `Maintien de l'ordre public`,
-    timeline: {
-      dropdownText: `Maintien de l'ordre public`,
-      component: MissionTimelineItemGenericCard
-    },
-    actionComponent: MissionActionItemPublicOrder
+    component: MissionActionItemPublicOrder
   },
-  [ActionTypeEnum.ANTI_POLLUTION]: {
-    style: {
-      backgroundColor: THEME.color.blueGray25,
-      borderColor: THEME.color.lightGray
-    },
+  [ActionType.ANTI_POLLUTION]: {
     icon: Icon.More,
     title: 'Opération de lutte anti-pollution',
-    timeline: {
-      dropdownText: 'Opération de lutte anti-pollution',
-      component: MissionTimelineItemGenericCard
-    },
-    actionComponent: MissionActionItemAntiPollution
+    component: MissionActionItemAntiPollution
   },
-  [ActionTypeEnum.BAAEM_PERMANENCE]: {
-    style: {
-      backgroundColor: THEME.color.blueGray25,
-      borderColor: THEME.color.lightGray
-    },
+  [ActionType.BAAEM_PERMANENCE]: {
     icon: Icon.More,
     title: 'Permanence BAAEM',
-    timeline: {
-      dropdownText: 'Permanence BAAEM',
-      component: MissionTimelineItemGenericCard
-    },
-    actionComponent: MissionActionItemBAAEMPermanence
+    component: MissionActionItemBAAEMPermanence
   },
-  [ActionTypeEnum.ILLEGAL_IMMIGRATION]: {
-    style: {
-      backgroundColor: THEME.color.blueGray25,
-      borderColor: THEME.color.lightGray
-    },
+  [ActionType.ILLEGAL_IMMIGRATION]: {
     icon: Icon.More,
     title: `Lutte contre l'immigration illégale`,
-    timeline: {
-      dropdownText: `Lutte contre l'immigration illégale`,
-      component: MissionTimelineItemGenericCard
-    },
-    actionComponent: MissionActionItemIllegalImmigration
+    component: MissionActionItemIllegalImmigration
   },
-  [ActionTypeEnum.OTHER]: {
-    style: {},
-    icon: Icon.More,
-    timeline: {
-      dropdownText: 'Ajouter une autre activité de mission',
-      component: MissionTimelineItemGenericCard
-    }
+  [ActionType.OTHER]: {
+    icon: Icon.More
   },
-  [ActionTypeEnum.CONTACT]: {
-    style: {},
-    timeline: {
-      dropdownText: `Contact`,
-      component: MissionTimelineItemGenericCard
-    }
+  [ActionType.CONTACT]: {
+    icon: Icon.Observation,
+    title: 'Contact',
+    component: MissionActionItemContact
   }
 }
 
-export type ActionRegistryHook = {
-  isIncomplete: (action?: MissionTimelineAction) => boolean
-} & ActionRegistryItem
+export type ActionRegistryHook = ActionRegistryItem
 
-export function useActionRegistry(actionType: ActionTypeEnum): ActionRegistryHook {
-  const getAction = () => ACTION_REGISTRY[actionType] ?? ({} as ActionRegistryItem)
-  const action = getAction()
-  const isIncomplete = (action?: MissionTimelineAction) =>
-    action?.completenessForStats?.status === CompletenessForStatsStatusEnum.INCOMPLETE
-  return { ...action, isIncomplete }
+export function useActionRegistry(actionType: ActionType): ActionRegistryHook {
+  return { ...(ACTION_REGISTRY[actionType] ?? ({} as ActionRegistryItem)) }
 }

frontend/src/v2/features/common/hooks/use-mission-timeline.tsx

@@ -1,24 +1,25 @@
-import { ActionTypeEnum, MissionSourceEnum } from '@common/types/env-mission-types'
+import { ActionType } from '../types/action-type'
 import { MissionNavAction } from '../types/mission-action'
+import { MissionSource } from '../types/mission-types'
 
-type ActionRegistryInput = { [key in ActionTypeEnum]?: unknown }
+type ActionRegistryInput = { [key in ActionType]?: unknown }
 type Input = { missionId: number; startDateTimeUtc: Date }
 
 const ACTION_REGISTRY_INPUT: ActionRegistryInput = {
-  [ActionTypeEnum.NOTE]: { endDateTimeUtc: new Date().toISOString() },
-  [ActionTypeEnum.RESCUE]: { isPersonRescue: false, isVesselRescue: true }
+  [ActionType.NOTE]: { endDateTimeUtc: new Date().toISOString() },
+  [ActionType.RESCUE]: { isPersonRescue: false, isVesselRescue: true }
 }
 
 interface TimelineHook<T> {
-  getActionInput: (actionType: ActionTypeEnum, moreData?: unknown) => MissionNavAction
+  getActionInput: (actionType: ActionType, moreData?: unknown) => MissionNavAction
 }
 
 export function useMissionTimeline<T>(missionId?: number): TimelineHook<T> {
-  const getActionInput = (actionType: ActionTypeEnum, moreData?: unknown): MissionNavAction => {
+  const getActionInput = (actionType: ActionType, moreData?: unknown): MissionNavAction => {
     const input = {
       missionId: Number(missionId),
       actionType,
-      source: MissionSourceEnum.RAPPORTNAV,
+      source: MissionSource.RAPPORTNAV,
       data: {
         ...(moreData ?? {}),
         ...(ACTION_REGISTRY_INPUT[actionType] ?? {}),