fix(ulam): Refactor ulam component to use new changes

 - new hook for timeline
 - action registry and header

frontend/src/v2/features/ulam/components/element/mission-action-item-ulam.tsx

@@ -16,12 +16,11 @@ interface MissionActionItemUlamProps {
 const MissionActionItemUlam: FC<MissionActionItemUlamProps> = ({ action, missionId, isMissionFinished }) => {
   const { handleExecuteOnDelay } = useDelay()
   const debounceTime = useStore(store, state => state.delayQuery.debounceTime)
-  const { actionComponent } = useUlamActionRegistry(action.actionType)
+  const { component } = useUlamActionRegistry(action.actionType)
 
   const mutation = useUpdateMissionActionMutation(missionId, action.id)
 
   const onChange = async (newAction: MissionAction) => {
-    // const input = getMissionActionInput(newAction)
     handleExecuteOnDelay(async () => {
       await mutation.mutateAsync(newAction)
       if (debounceTime !== undefined) resetDebounceTime()
@@ -30,7 +29,7 @@ const MissionActionItemUlam: FC<MissionActionItemUlamProps> = ({ action, mission
 
   return (
     <div style={{ width: '100%' }}>
-      {actionComponent && createElement(actionComponent, { action, onChange, isMissionFinished })}
+      {component && createElement(component, { action, onChange, isMissionFinished })}
     </div>
   )
 }

frontend/src/v2/features/ulam/components/element/mission-action-ulam-body.tsx

@@ -4,10 +4,9 @@ import MissionActionWrapper from '../../../mission-action/components/layout/miss
 import MissionActionItemUlam from './mission-action-item-ulam'
 
 interface MissionActionProps {
-  actionId?: string
   missionId: number
-  error?: Error
   isLoading?: boolean
+  error?: Error | null
   action?: MissionAction
 }
 

frontend/src/v2/features/ulam/components/element/mission-action-ulam.tsx

@@ -21,7 +21,14 @@ const MissionActionUlam: FC<MissionActionProps> = ({ missionId, actionId, status
           <MissionActionUlamHeader missionId={Number(missionId)} action={query.data} missionStatus={status} />
         )
       }
-      sectionBody={<MissionActionUlamBody missionId={Number(missionId)} actionId={actionId} />}
+      sectionBody={
+        <MissionActionUlamBody
+          action={query.data}
+          error={query.error}
+          isLoading={query.isLoading}
+          missionId={Number(missionId)}
+        />
+      }
     />
   )
 }

frontend/src/v2/features/ulam/components/element/mission-list/mission-list-item-ulam.tsx

@@ -1,23 +1,23 @@
+import Text from '@common/components/ui/text.tsx'
 import { Mission } from '@common/types/mission-types.ts'
-import React, { MouseEvent, useEffect, useRef } from 'react'
+import { formatDateForFrenchHumans } from '@common/utils/dates-for-humans.ts'
+import MissionOpenByTag from '@features/pam/mission/components/elements/mission-open-by-tag.tsx'
+import { formatMissionName } from '@features/pam/mission/utils/utils.ts'
 import { Accent, Icon, IconButton, THEME } from '@mtes-mct/monitor-ui'
-import { Divider, FlexboxGrid, Stack } from 'rsuite'
+import { ULAM_V2_HOME_PATH } from '@router/router.tsx'
+import React, { MouseEvent, useEffect, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { Divider, FlexboxGrid, Stack } from 'rsuite'
 import styled from 'styled-components'
-import { useControlUnitResourceLabel } from '../../../hooks/use-ulam-home-unit-resources.tsx'
-import { formatDateForFrenchHumans } from '@common/utils/dates-for-humans.ts'
+import ExportFileButton from '../../../../common/components/elements/export-file-button.tsx'
 import MissionCompletenessForStatsTag from '../../../../common/components/elements/mission-completeness-for-stats-tag.tsx'
 import MissionStatusTag from '../../../../common/components/elements/mission-status-tag.tsx'
-import MissionOpenByTag from '@features/pam/mission/components/elements/mission-open-by-tag.tsx'
-import { useCrewForMissionList } from '../../../hooks/use-crew-for-mission-list.tsx'
-import { ULAM_V2_HOME_PATH } from '@router/router.tsx'
-import Text from '@common/components/ui/text.tsx'
-import { formatMissionName } from '@features/pam/mission/utils/utils.ts'
-import MissionIconUlam from '../../ui/mission-icon-ulam.tsx'
+import { isCompleteForStats } from '../../../../common/hooks/use-mission-completeness-for-stats.tsx'
 import { useMissionReportExport } from '../../../../common/hooks/use-mission-report-export.tsx'
 import { ExportMode, ExportReportType } from '../../../../common/types/mission-export-types.ts'
-import ExportFileButton from '../../../../common/components/elements/export-file-button.tsx'
-import { isCompleteForStats } from '../../../../common/hooks/use-mission-completeness-for-stats.tsx'
+import { useUlamCrewForMissionList } from '../../../hooks/use-ulam-crew-for-mission-list.tsx'
+import { useControlUnitResourceLabel } from '../../../hooks/use-ulam-home-unit-resources.tsx'
+import MissionIconUlam from '../../ui/mission-icon-ulam.tsx'
 
 interface MissionListItemProps {
   mission?: Mission
@@ -51,7 +51,7 @@ const MissionListItemUlam: React.FC<MissionListItemProps> = ({ mission, index, o
   const controlUnitResourcesText = useControlUnitResourceLabel(mission?.controlUnits)
   const missionName = formatMissionName(mission?.startDateTimeUtc)
   const missionDate = formatDateForFrenchHumans(mission?.startDateTimeUtc)
-  const missionCrew = useCrewForMissionList(mission?.crew)
+  const missionCrew = useUlamCrewForMissionList(mission?.crew)
 
   const { exportMissionReport, loading: exportIsLoading } = useMissionReportExport()
   const exportAEM = async (mission?: Mission, event?: React.MouseEvent) => {
@@ -119,7 +119,7 @@ const MissionListItemUlam: React.FC<MissionListItemProps> = ({ mission, index, o
           </Text>
         </FlexboxGrid.Item>
 
-        <FlexboxGrid.Item colspan={3} data-testid={'mission-list-item-open_by'} style={{padding: '0 4px'}}>
+        <FlexboxGrid.Item colspan={3} data-testid={'mission-list-item-open_by'} style={{ padding: '0 4px' }}>
           <MissionOpenByTag missionSource={mission?.missionSource} isFake={mission?.openBy === 'fake'} />
         </FlexboxGrid.Item>
 

frontend/src/v2/features/ulam/components/element/mission-timeline-header-ulam.tsx

@@ -1,13 +1,24 @@
 import { FC } from 'react'
-import { ModuleType } from '../../../../features/common/types/module-type'
+import { useNavigate } from 'react-router-dom'
 import MissionTimelineHeaderWrapper from '../../../../features/mission-timeline/components/layout/mission-timeline-Header-wrapper'
+import { useUlamTimelineRegistry } from '../../hooks/use-ulam-timeline-registry'
 
 interface MissionTimelineHeaderUlamProps {
   missionId: number
 }
 
 const MissionTimelineHeaderUlam: FC<MissionTimelineHeaderUlamProps> = ({ missionId }) => {
-  return <MissionTimelineHeaderWrapper missionId={missionId} moduleType={ModuleType.ULAM} hideStatus={true} />
+  const navigate = useNavigate()
+  const { timelineDropdownItems } = useUlamTimelineRegistry()
+  const handleOnSubmit = (id?: string) => navigate(`/v2/ulam/missions/${missionId}/${id}`)
+  return (
+    <MissionTimelineHeaderWrapper
+      hideStatus={true}
+      missionId={missionId}
+      onSubmit={handleOnSubmit}
+      dropdownItems={timelineDropdownItems}
+    />
+  )
 }
 
 export default MissionTimelineHeaderUlam

frontend/src/v2/features/ulam/components/element/mission-timeline-item-ulam.tsx

@@ -2,8 +2,9 @@ import { createElement, FC, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { ModuleType } from '../../../../features/common/types/module-type'
 import MissionTimelineItemWrapper from '../../../mission-timeline/components/layout/mission-timeline-item-wrapper'
+import { useTimeline } from '../../../mission-timeline/hooks/use-timeline'
 import { MissionTimelineAction } from '../../../mission-timeline/types/mission-timeline-output'
-import { useUlamActionRegistry } from '../../hooks/use-ulam-action-registry'
+import { useUlamTimelineRegistry } from '../../hooks/use-ulam-timeline-registry'
 
 interface MissionTimelineItemUlamProps {
   missionId?: number
@@ -13,21 +14,28 @@ interface MissionTimelineItemUlamProps {
 
 const MissionTimelineItemUlam: FC<MissionTimelineItemUlamProps> = ({ action, prevAction, missionId }) => {
   const { actionId } = useParams()
+  const { isIncomplete } = useTimeline()
+  const { getTimeline } = useUlamTimelineRegistry()
   const [isSelected, setIsSelected] = useState<boolean>(false)
-  const { style, icon, timeline, title, isIncomplete } = useUlamActionRegistry(action.type)
 
   useEffect(() => {
     setIsSelected(action.id === actionId)
   }, [action, actionId])
   return (
     <MissionTimelineItemWrapper
-      style={style}
+      style={getTimeline(action.type)?.style}
       action={action}
       missionId={missionId}
       isSelected={isSelected}
       moduleType={ModuleType.ULAM}
-      card={createElement(timeline.component, { icon, title, action, prevAction, isSelected })}
       isIncomplete={isIncomplete(action)}
+      card={createElement(getTimeline(action.type).component, {
+        icon: getTimeline(action.type).icon,
+        title: getTimeline(action.type).title,
+        action,
+        prevAction,
+        isSelected
+      })}
     />
   )
 }

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

@@ -1,14 +1,15 @@
-import { ActionTypeEnum } from '@common/types/env-mission-types'
 import { ActionRegistryHook, ActionRegistryItem, useActionRegistry } from '../../common/hooks/use-action-registry'
+import { ActionType } from '../../common/types/action-type'
 
 type UlamActionRegistry = {
-  [key in ActionTypeEnum]?: ActionRegistryItem
+  [key in ActionType]?: ActionRegistryItem
 }
+
 const ULAM_ACTION_REGISTRY: UlamActionRegistry = {}
 
 type UlamActionRegistryHook = {} & UlamActionRegistry & ActionRegistryHook
 
-export function useUlamActionRegistry(actionType: ActionTypeEnum): UlamActionRegistryHook {
+export function useUlamActionRegistry(actionType: ActionType): UlamActionRegistryHook {
   const common = useActionRegistry(actionType)
   const ulam = ULAM_ACTION_REGISTRY[actionType]
   return { ...ulam, ...common }

frontend/src/v2/features/ulam/hooks/use-ulam-crew-for-mission-list.tsx

@@ -0,0 +1,9 @@
+import { MissionCrew } from '@common/types/crew-types.ts'
+
+export function useUlamCrewForMissionList(missionCrew?: MissionCrew[]): { text: string; style?: object } {
+  const result = missionCrew?.length
+    ? missionCrew.map(crew => `${crew.agent?.firstName ?? ''} ${crew.agent?.lastName ?? ''}`.trim()).join(', ')
+    : '--'
+
+  return { text: result }
+}

frontend/src/v2/features/ulam/hooks/use-ulam-home-unit-resources.tsx

@@ -1,7 +1,7 @@
 import { ControlUnit } from '@mtes-mct/monitor-ui'
 import ControlUnitResourceType = ControlUnit.ControlUnitResourceType
 
-type ResourceUnitTypeRegistry = { [key in ControlUnitResourceType]: string }
+type ResourceUnitTypeRegistry = { [key in ControlUnitResourceType]?: string }
 
 const RESOURCE_UNIT_REGISTRY: ResourceUnitTypeRegistry = {
   [ControlUnitResourceType.PIROGUE]: 'Pirogue',
@@ -10,17 +10,21 @@ const RESOURCE_UNIT_REGISTRY: ResourceUnitTypeRegistry = {
   [ControlUnitResourceType.CAR]: 'Voiture'
 }
 
-export function useControlUnitResourceLabel(controlUnits: ControlUnit[]): string {
+export function useControlUnitResourceLabel(controlUnits: ControlUnit.ControlUnit[]): string {
   if (controlUnits && controlUnits.length > 0) {
-    return controlUnits.map((controlUnit) => {
-      if (controlUnit.controlUnitResources && controlUnit.controlUnitResources.length > 0) {
-        return controlUnit.controlUnitResources.map((resource) => {
-          const resourceType = resource.name as ControlUnitResourceType
-          return RESOURCE_UNIT_REGISTRY[resourceType] || 'Inconnu'
-        }).join(', ')
-      }
-      return 'N/A'
-    }).join(', ')
+    return controlUnits
+      .map(controlUnit => {
+        if (controlUnit.controlUnitResources && controlUnit.controlUnitResources.length > 0) {
+          return controlUnit.controlUnitResources
+            .map(resource => {
+              const resourceType = resource.name as ControlUnitResourceType
+              return RESOURCE_UNIT_REGISTRY[resourceType] || 'Inconnu'
+            })
+            .join(', ')
+        }
+        return 'N/A'
+      })
+      .join(', ')
   }
   return 'N/A'
 }