Préavis & CR de contrôle - Améliorations (#3731)

## Linked issues

- Resolve #3691
- Resolve #3727
- Resolve #3724
- Resolve #3697
- 
----

- [ ] Tests E2E (Cypress)

frontend/src/domain/entities/beaconMalfunction/constants.tsx

@@ -251,6 +251,14 @@ const NOTIFICATION_TYPE = {
   }
 }
 
+/* eslint-enable sort-keys-fix/sort-keys-fix */
+export const SELECTABLE_NOTIFICATION_TYPES: Array<keyof typeof NOTIFICATION_TYPE> = [
+  'MALFUNCTION_AT_PORT_REMINDER',
+  'MALFUNCTION_AT_SEA_REMINDER',
+  'MALFUNCTION_NOTIFICATION_TO_FOREIGN_FMC'
+]
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+
 const COMMUNICATION_MEAN = {
   EMAIL: {
     addresseePreposition: 'à',

frontend/src/features/Mission/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;

frontend/src/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>
+      )}
+    </>
   )
 }
 

frontend/src/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;

frontend/src/features/PriorNotification/components/ManualPriorNotificationForm/fields/FormikFishingCatchesMultiSelect/index.tsx

@@ -96,21 +96,6 @@ export function FormikFishingCatchesMultiSelect({ isReadOnly }: FormikFishingCat
 
   return (
     <>
-      <Select
-        key={String(values.fishingCatches?.length)}
-        customSearch={customSearch}
-        disabled={!speciesAsOptions}
-        error={validationError}
-        label="Espèces à bord et à débarquer"
-        name="fishingCatches"
-        onChange={add}
-        options={speciesAsOptions ?? []}
-        optionValueKey="code"
-        readOnly={isReadOnly}
-        searchable
-        virtualized
-      />
-
       <Wrapper>
         {values.fishingCatches.map((fishingCatch, index) => (
           <Fragment key={fishingCatch.specyCode}>
@@ -163,6 +148,21 @@ export function FormikFishingCatchesMultiSelect({ isReadOnly }: FormikFishingCat
           </Fragment>
         ))}
       </Wrapper>
+
+      <Select
+        key={String(values.fishingCatches?.length)}
+        customSearch={customSearch}
+        disabled={!speciesAsOptions}
+        error={validationError}
+        label="Espèces à bord et à débarquer"
+        name="fishingCatches"
+        onChange={add}
+        options={speciesAsOptions ?? []}
+        optionValueKey="code"
+        readOnly={isReadOnly}
+        searchable
+        virtualized
+      />
     </>
   )
 }

frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx

@@ -32,19 +32,16 @@ import {
   ExpectedArrivalPeriod,
   FILTER_STATUSES_AS_OPTIONS
 } from './constants'
+import { useIsSuperUser } from '../../../../auth/hooks/useIsSuperUser'
 import { priorNotificationActions } from '../../slice'
 
 import type { FilterStatus } from './types'
-import type { Promisable } from 'type-fest'
 
-export type FilterBarProps = {
-  onQueryChange: (nextQuery: string | undefined) => Promisable<void>
-  searchQuery: string | undefined
-}
 export function FilterBar() {
+  const dispatch = useMainAppDispatch()
+  const isSuperUser = useIsSuperUser()
   const { newWindowContainerRef } = useNewWindow()
   const listFilterValues = useMainAppSelector(store => store.priorNotification.listFilterValues)
-  const dispatch = useMainAppDispatch()
 
   const { fleetSegmentsAsOptions } = useGetFleetSegmentsAsOptions()
   const { gearsAsTreeOptions } = useGetGearsAsTreeOptions()
@@ -219,16 +216,18 @@ export function FilterBar() {
           style={{ minWidth: 224 }}
           value={listFilterValues.lastControlPeriod}
         />
-        <RichBooleanCheckbox
-          falseOptionLabel="Sans signalement"
-          isInline
-          isLabelHidden
-          label="Signalements"
-          name="hasOneOrMoreReportings"
-          onChange={updateHasOneOrMoreReportings}
-          trueOptionLabel="Avec signalements"
-          value={listFilterValues.hasOneOrMoreReportings}
-        />
+        {isSuperUser && (
+          <RichBooleanCheckbox
+            falseOptionLabel="Sans signalement"
+            isInline
+            isLabelHidden
+            label="Signalements"
+            name="hasOneOrMoreReportings"
+            onChange={updateHasOneOrMoreReportings}
+            trueOptionLabel="Avec signalements"
+            value={listFilterValues.hasOneOrMoreReportings}
+          />
+        )}
       </Row>
 
       <Row>

frontend/src/features/SideWindow/BeaconMalfunctionBoard/SendNotification.tsx

@@ -1,13 +1,12 @@
-import { type Option, Select } from '@mtes-mct/monitor-ui'
+import { useGetForeignFmcsQuery } from '@api/foreignFmc'
+import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
+import { type Option, Select, THEME } from '@mtes-mct/monitor-ui'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { SelectPicker } from 'rsuite'
 import styled from 'styled-components'
 
-import { useGetForeignFmcsQuery } from '../../../api/foreignFmc'
-import { COLORS } from '../../../constants/constants'
-import { NOTIFICATION_TYPE } from '../../../domain/entities/beaconMalfunction/constants'
+import { NOTIFICATION_TYPE, SELECTABLE_NOTIFICATION_TYPES } from '../../../domain/entities/beaconMalfunction/constants'
 import { sendNotification } from '../../../domain/use_cases/beaconMalfunction/sendNotification'
-import { useMainAppDispatch } from '../../../hooks/useMainAppDispatch'
 
 import type { CSSProperties } from 'react'
 
@@ -17,15 +16,6 @@ export function SendNotification({ beaconMalfunction }) {
   const selectMenuRef = useRef<HTMLDivElement>()
   const [isSendingNotification, setIsSendingNotification] = useState<string | null>('')
   const [isShowingForeignFmcList, setIsShowingForeignFmcList] = useState<boolean>(false)
-  /* eslint-enable sort-keys-fix/sort-keys-fix */
-  const notificationTypes: Array<keyof typeof NOTIFICATION_TYPE> = [
-    'MALFUNCTION_AT_PORT_INITIAL_NOTIFICATION',
-    'MALFUNCTION_AT_PORT_REMINDER',
-    'MALFUNCTION_AT_SEA_INITIAL_NOTIFICATION',
-    'MALFUNCTION_AT_SEA_REMINDER',
-    'MALFUNCTION_NOTIFICATION_TO_FOREIGN_FMC'
-  ]
-  /* eslint-disable sort-keys-fix/sort-keys-fix */
 
   const foreignFmcsAsOptions: Option[] = useMemo(() => {
     if (!getForeignFmcsApiQuery.data) {
@@ -47,7 +37,7 @@ export function SendNotification({ beaconMalfunction }) {
     if (selectMenuRef.current?.previousSibling) {
       ;(selectMenuRef.current.previousSibling as HTMLElement).style.setProperty(
         'background',
-        COLORS.charcoal,
+        THEME.color.charcoal,
         'important'
       )
       ;(selectMenuRef.current.previousSibling as HTMLElement).style.setProperty(
@@ -61,7 +51,7 @@ export function SendNotification({ beaconMalfunction }) {
         '.rs-picker-toggle-placeholder'
       )
       if (toggleElement?.style) {
-        toggleElement.style.setProperty('color', COLORS.gainsboro, 'important')
+        toggleElement.style.setProperty('color', THEME.color.gainsboro, 'important')
         toggleElement.style.setProperty('font-size', '13', 'important')
       }
     }
@@ -108,7 +98,7 @@ export function SendNotification({ beaconMalfunction }) {
       <SelectPicker
         cleanable={false}
         container={() => selectMenuRef.current as any}
-        data={notificationTypes.map(type => ({
+        data={SELECTABLE_NOTIFICATION_TYPES.map(type => ({
           label: NOTIFICATION_TYPE[type].followUpMessage,
           value: type
         }))}