Remove fleet segment removal in control and fix infraction text ellipsis

MTES-MCT · Oct 3, 2024 · e8dc37b · e8dc37b
1 parent 0d9374e
commit e8dc37b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 38 deletions.
diff --git a/...ssion/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/Infraction.tsx b/...ssion/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/Infraction.tsx
@@ -25,7 +25,9 @@ export function Infraction({ data, index, onDelete, onEdit }: InfractionProps) {
           <TagGroup>
             <Tag accent={Accent.PRIMARY}>{MissionAction.INFRACTION_TYPE_LABEL[data.infractionType]}</Tag>
             {data.infractionType !== MissionAction.InfractionType.PENDING && (
-              <Tag accent={Accent.PRIMARY}>NATINF : {data.label ?? data.natinf}</Tag>
+              <StyledTag accent={Accent.PRIMARY} title={data.label ?? String(data.natinf)}>
+                NATINF : {data.label ?? data.natinf}
+              </StyledTag>
             )}
           </TagGroup>
 
@@ -57,6 +59,14 @@ export function Infraction({ data, index, onDelete, onEdit }: InfractionProps) {
   )
 }
 
+const StyledTag = styled(Tag)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 400px;
+  display: inline-block;
+`
+
 const InnerWrapper = styled.div`
   > div {
     display: flex;

diff --git a/...features/Mission/components/MissionForm/ActionForm/shared/FormikSpeciesQuantitySeized.tsx b/...features/Mission/components/MissionForm/ActionForm/shared/FormikSpeciesQuantitySeized.tsx
@@ -1,16 +1,27 @@
-import { FormikNumberInput } from '@mtes-mct/monitor-ui'
+import { HIDDEN_ERROR } from '@features/Mission/components/MissionForm/constants'
+import { FieldError, FormikNumberInput } from '@mtes-mct/monitor-ui'
 import { useFormikContext } from 'formik'
 import styled from 'styled-components'
 
 import type { MissionActionFormValues } from '@features/Mission/components/MissionForm/types'
 
 export function FormikSpeciesQuantitySeized() {
-  const { values } = useFormikContext<MissionActionFormValues>()
+  const { errors, values } = useFormikContext<MissionActionFormValues>()
 
   return (
-    !!values.hasSomeSpeciesSeized && (
-      <StyledFormikNumberInput isRequired label="Quantités saisies (kg)" name="speciesQuantitySeized" />
-    )
+    <>
+      {!!values.hasSomeSpeciesSeized && (
+        <StyledFormikNumberInput
+          isErrorMessageHidden
+          isRequired
+          label="Quantités saisies (kg)"
+          name="speciesQuantitySeized"
+        />
+      )}
+      {typeof errors.speciesQuantitySeized === 'string' && errors.speciesQuantitySeized !== HIDDEN_ERROR && (
+        <FieldError>{errors.speciesQuantitySeized}</FieldError>
+      )}
+    </>
   )
 }
 

diff --git a/...rc/features/Mission/components/MissionForm/ActionForm/shared/VesselFleetSegmentsField.tsx b/...rc/features/Mission/components/MissionForm/ActionForm/shared/VesselFleetSegmentsField.tsx
@@ -1,10 +1,9 @@
 import { useGetFleetSegmentsQuery } from '@features/FleetSegment/apis'
-import { FrontendError } from '@libs/FrontendError'
-import { Field, Label, SingleTag, TagGroup } from '@mtes-mct/monitor-ui'
+import { Accent, Field, Label, SingleTag, Tag, TagGroup } from '@mtes-mct/monitor-ui'
 import { sortByAscendingValue } from '@utils/sortByAscendingValue'
 import { useFormikContext } from 'formik'
-import { remove as ramdaRemove, uniq } from 'ramda'
-import { useCallback, useMemo } from 'react'
+import { uniq } from 'ramda'
+import { useMemo } from 'react'
 import styled from 'styled-components'
 
 import { useGetMissionActionFormikUsecases } from '../../hooks/useGetMissionActionFormikUsecases'
@@ -30,26 +29,6 @@ export function VesselFleetSegmentsField({ label }: VesselFleetSegmentsFieldProp
     updateSegments({ ...values, faoAreas: nextFaoAreas })
   }
 
-  const removeFleetSegment = useCallback(
-    (fleetSegmentIndex: number | undefined) => {
-      if (!values.segments) {
-        throw new FrontendError('`segments` is undefined')
-      }
-
-      if (fleetSegmentIndex === undefined) {
-        throw new FrontendError('`fleetSegmentIndex` is undefined')
-      }
-
-      const nextFleetSegments = ramdaRemove(fleetSegmentIndex, 1, values.segments)
-      const normalizedNextSegments = nextFleetSegments.length > 0 ? nextFleetSegments : undefined
-
-      setFieldValue('segments', normalizedNextSegments)
-    },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [values.segments]
-  )
-
   const faoAreaTags = () => {
     if (!values.faoAreas) {
       return []
@@ -67,14 +46,11 @@ export function VesselFleetSegmentsField({ label }: VesselFleetSegmentsFieldProp
   const fleetSegmentTags = useMemo(
     () =>
       values.segments
-        ? values.segments.map(({ segment, segmentName }, index) => (
-            <SingleTag
-              key={segment}
-              onDelete={() => removeFleetSegment(index)}
-            >{`${segment} - ${segmentName}`}</SingleTag>
+        ? values.segments.map(({ segment, segmentName }) => (
+            <Tag key={segment} accent={Accent.PRIMARY}>{`${segment} - ${segmentName}`}</Tag>
           ))
         : [],
-    [values.segments, removeFleetSegment]
+    [values.segments]
   )
 
   if (isLoading) {
@@ -95,14 +71,14 @@ export function VesselFleetSegmentsField({ label }: VesselFleetSegmentsFieldProp
           {faoAreaTags.length > 0 && (
             <Field>
               <Label>Zones de pêche de la marée (issues des FAR)</Label>
-              <TagGroup>{faoAreaTags()}</TagGroup>
+              <StyledTagGroup>{faoAreaTags()}</StyledTagGroup>
             </Field>
           )}
 
           {fleetSegmentTags.length > 0 && (
             <Field>
               <Label>Segment de flotte de la marée</Label>
-              <TagGroup>{fleetSegmentTags}</TagGroup>
+              <StyledTagGroup>{fleetSegmentTags}</StyledTagGroup>
             </Field>
           )}
         </>
@@ -111,6 +87,10 @@ export function VesselFleetSegmentsField({ label }: VesselFleetSegmentsFieldProp
   )
 }
 
+const StyledTagGroup = styled(TagGroup)`
+  padding-top: 8px;
+`
+
 const Helper = styled.p`
   color: ${p => p.theme.color.slateGray};
   font-style: italic;