Missions - Corrections UI des infractions

frontend/cypress/e2e/side_window/mission_form/action_list.spec.ts

@@ -135,26 +135,26 @@ context('Side Window > Mission Form > Action List', () => {
     cy.clickButton('Ajouter un contrôle en mer')
 
     cy.clickButton('Ajouter une infraction')
-    cy.fill('Type d’infraction', 'Avec PV')
-    cy.fill('Groupe', 'Infraction obligations déclaratives et autorisations de pêche')
+    cy.fill('Résultat de l’infraction', 'Avec PV')
+    cy.fill('Catégorie d’infraction', 'Infraction obligations déclaratives et autorisations de pêche')
     cy.fill('NATINF', '23581')
     cy.clickButton('Valider l’infraction')
 
     cy.clickButton('Ajouter une infraction')
-    cy.fill('Type d’infraction', 'Avec PV')
-    cy.fill('Groupe', 'Infraction obligations déclaratives et autorisations de pêche')
+    cy.fill('Résultat de l’infraction', 'Avec PV')
+    cy.fill('Catégorie d’infraction', 'Infraction obligations déclaratives et autorisations de pêche')
     cy.fill('NATINF', '23588')
     cy.clickButton('Valider l’infraction')
 
     cy.clickButton('Ajouter une infraction')
-    cy.fill('Type d’infraction', 'Sans PV')
-    cy.fill('Groupe', 'Infraction obligations déclaratives et autorisations de pêche')
+    cy.fill('Résultat de l’infraction', 'Sans PV')
+    cy.fill('Catégorie d’infraction', 'Infraction obligations déclaratives et autorisations de pêche')
     cy.fill('NATINF', '23584')
     cy.clickButton('Valider l’infraction')
 
     cy.clickButton('Ajouter une infraction')
-    cy.fill('Type d’infraction', 'En attente')
-    cy.fill('Groupe', 'Infraction obligations déclaratives et autorisations de pêche')
+    cy.fill('Résultat de l’infraction', 'En attente')
+    cy.fill('Catégorie d’infraction', 'Infraction obligations déclaratives et autorisations de pêche')
     cy.clickButton('Valider l’infraction')
 
     cy.get('.Element-Tag').contains('2 INF AVEC PV').should('be.visible')

frontend/cypress/e2e/side_window/mission_form/air_control.spec.ts

@@ -30,8 +30,8 @@ context('Side Window > Mission Form > Air Control', () => {
 
     // Infractions
     cy.clickButton('Ajouter une infraction')
-    cy.fill('Type d’infraction', 'Avec PV')
-    cy.fill('Groupe', 'Autre infraction')
+    cy.fill('Résultat de l’infraction', 'Avec PV')
+    cy.fill('Catégorie d’infraction', 'Autre infraction')
     cy.fill('NATINF', '23581')
     cy.fill('Observations sur l’infraction', 'Une observation sur l’infraction.')
     cy.clickButton('Valider l’infraction')

frontend/cypress/e2e/side_window/mission_form/land_control.spec.ts

@@ -66,22 +66,22 @@ context('Side Window > Mission Form > Land Control', () => {
 
     // Infractions
     cy.clickButton('Ajouter une infraction')
-    cy.fill('Type d’infraction', 'Avec PV')
-    cy.fill('Groupe', 'Infraction obligations déclaratives et autorisations de pêche')
+    cy.fill('Résultat de l’infraction', 'Avec PV')
+    cy.fill('Catégorie d’infraction', 'Infraction obligations déclaratives et autorisations de pêche')
     cy.fill('NATINF', '23581')
     cy.fill('Observations sur l’infraction', 'Une observation sur l’infraction déclarative.')
     cy.clickButton('Valider l’infraction')
 
     cy.clickButton('Ajouter une infraction')
-    cy.fill('Type d’infraction', 'Sans PV')
-    cy.fill('Groupe', 'Infraction espèces')
+    cy.fill('Résultat de l’infraction', 'Sans PV')
+    cy.fill('Catégorie d’infraction', 'Infraction espèces')
     cy.fill('NATINF', '23588')
     cy.fill('Observations sur l’infraction', 'Une observation sur l’infraction espèce.')
     cy.clickButton('Valider l’infraction')
 
     cy.clickButton('Ajouter une infraction')
-    cy.fill('Type d’infraction', 'Sans PV')
-    cy.fill('Groupe', 'Autre infraction')
+    cy.fill('Résultat de l’infraction', 'Sans PV')
+    cy.fill('Catégorie d’infraction', 'Autre infraction')
     cy.fill('NATINF', '27689')
     cy.fill('Observations sur l’infraction', 'Une observation sur l’infraction autre.')
     cy.clickButton('Valider l’infraction')

frontend/cypress/e2e/side_window/mission_form/sea_control.spec.ts

@@ -117,22 +117,22 @@ context('Side Window > Mission Form > Sea Control', () => {
 
     // Infractions
     cy.clickButton('Ajouter une infraction')
-    cy.fill('Type d’infraction', 'Avec PV')
-    cy.fill('Groupe', 'Infraction obligations déclaratives et autorisations de pêche')
+    cy.fill('Résultat de l’infraction', 'Avec PV')
+    cy.fill('Catégorie d’infraction', 'Infraction obligations déclaratives et autorisations de pêche')
     cy.fill('NATINF', '23581')
     cy.fill('Observations sur l’infraction', 'Une observation sur l’infraction déclarative.')
     cy.clickButton('Valider l’infraction')
 
     cy.clickButton('Ajouter une infraction')
-    cy.fill('Type d’infraction', 'Sans PV')
-    cy.fill('Groupe', 'Infraction espèces')
+    cy.fill('Résultat de l’infraction', 'Sans PV')
+    cy.fill('Catégorie d’infraction', 'Infraction espèces')
     cy.fill('NATINF', '23588')
     cy.fill('Observations sur l’infraction', 'Une observation sur l’infraction espèce.')
     cy.clickButton('Valider l’infraction')
 
     cy.clickButton('Ajouter une infraction')
-    cy.fill('Type d’infraction', 'Sans PV')
-    cy.fill('Groupe', 'Autre infraction')
+    cy.fill('Résultat de l’infraction', 'Sans PV')
+    cy.fill('Catégorie d’infraction', 'Autre infraction')
     cy.fill('NATINF', '27689')
     cy.fill('Observations sur l’infraction', 'Une observation sur l’infraction autre.')
     cy.clickButton('Valider l’infraction')
@@ -482,16 +482,16 @@ context('Side Window > Mission Form > Sea Control', () => {
     cy.clickButton('Valider l’infraction')
     getSubmitButton().should('be.disabled')
 
-    cy.fill('Type d’infraction', 'En attente')
+    cy.fill('Résultat de l’infraction', 'En attente')
     getSubmitButton().should('be.enabled')
 
-    cy.fill('Type d’infraction', 'Sans PV')
+    cy.fill('Résultat de l’infraction', 'Sans PV')
     getSubmitButton().should('be.disabled')
 
-    cy.fill('Type d’infraction', 'Avec PV')
+    cy.fill('Résultat de l’infraction', 'Avec PV')
     getSubmitButton().should('be.disabled')
 
-    cy.fill('Groupe', 'Infraction engins')
+    cy.fill('Catégorie d’infraction', 'Infraction engins')
     getSubmitButton().should('be.disabled')
 
     cy.fill('NATINF', '23581')
@@ -515,7 +515,7 @@ context('Side Window > Mission Form > Sea Control', () => {
 
     cy.clickButton("Éditer l'infraction")
 
-    cy.fill('Type d’infraction', 'Sans PV')
+    cy.fill('Résultat de l’infraction', 'Sans PV')
     // Click the "X" button in the NATINF tag
     cy.contains('23581 - Taille de maille non réglementaire')
       .parentsUntil('.rs-picker-toggle')

frontend/src/features/SideWindow/MissionForm/ActionForm/schemas.ts

@@ -167,7 +167,7 @@ export const InfractionFormLiveSchema = object({
   comments: string(),
   infractionType: string()
     .oneOf(Object.values(MissionAction.InfractionType))
-    .required('Le type d’infraction est un champ obligatoire.'),
+    .required('Le résultat de l’infraction est un champ obligatoire.'),
   natinf: number().when('infractionType', {
     is: (infractionType?: MissionAction.InfractionType) => infractionType !== MissionAction.InfractionType.PENDING,
     then: schema => schema.required('Le NATINF est un champ obligatoire.')

frontend/src/features/SideWindow/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/InfractionForm.tsx

@@ -13,7 +13,7 @@ import { useState } from 'react'
 import styled from 'styled-components'
 
 import { infractionGroupToLabel } from './constants'
-import { InfractionGroup } from './types'
+import { InfractionCategory } from './types'
 import { InfractionFormLiveSchema } from '../../schemas'
 import { INFRACTION_TYPES_AS_OPTIONS } from '../constants'
 
@@ -34,16 +34,16 @@ export function InfractionForm({
   onSubmit
 }: InfractionFormProps) {
   const { newWindowContainerRef } = useNewWindow()
-  const [infractionGroup, setInfractionGroup] = useState<string>(
-    initialValues.group || InfractionGroup.GEAR_INFRACTIONS
+  const [infractionGroup, setInfractionCategory] = useState<string>(
+    initialValues.group || InfractionCategory.GEAR_INFRACTIONS
   )
 
-  const infractionGroupOptions = Object.keys(InfractionGroup).map(group => {
-    const groupValue = InfractionGroup[group]
+  const infractionCategoryOptions = Object.keys(InfractionCategory).map(category => {
+    const categoryValue = InfractionCategory[category]
 
     return {
-      label: infractionGroupToLabel[groupValue],
-      value: groupValue
+      label: infractionGroupToLabel[categoryValue],
+      value: categoryValue
     }
   })
 
@@ -55,31 +55,29 @@ export function InfractionForm({
     >
       {({ isValid }) => (
         <StyledForm>
-          <Columns>
-            <FormikMultiRadio
-              isErrorMessageHidden
-              isInline
-              label="Type d’infraction"
-              name="infractionType"
-              options={INFRACTION_TYPES_AS_OPTIONS}
-            />
-            <StyledGroupSelect
-              baseContainer={newWindowContainerRef.current}
-              cleanable={false}
-              disabled={isEdition}
-              label="Groupe"
-              name="infraction-group"
-              onChange={group => {
-                if (isEdition) {
-                  return
-                }
+          <FormikMultiRadio
+            isErrorMessageHidden
+            isInline
+            label="Résultat de l’infraction"
+            name="infractionType"
+            options={INFRACTION_TYPES_AS_OPTIONS}
+          />
+          <Select
+            baseContainer={newWindowContainerRef.current}
+            cleanable={false}
+            disabled={isEdition}
+            label="Catégorie d’infraction"
+            name="infraction-group"
+            onChange={category => {
+              if (isEdition) {
+                return
+              }
 
-                setInfractionGroup(group as string)
-              }}
-              options={infractionGroupOptions}
-              value={infractionGroup}
-            />
-          </Columns>
+              setInfractionCategory(category as string)
+            }}
+            options={infractionCategoryOptions}
+            value={infractionGroup}
+          />
           <HackedFormikSelect
             baseContainer={newWindowContainerRef.current}
             isErrorMessageHidden
@@ -104,15 +102,6 @@ export function InfractionForm({
   )
 }
 
-const StyledGroupSelect = styled(Select)`
-  margin-left: 16px;
-  max-width: 350px;
-`
-
-const Columns = styled.div`
-  display: flex;
-`
-
 const StyledForm = styled(Form)`
   background-color: transparent;
   border: 0;
@@ -121,6 +110,10 @@ const StyledForm = styled(Form)`
   > .Element-Field,
   > .Element-Fieldset {
     margin-top: 16px;
+
+    :first-child {
+      margin-top: 0px;
+    }
   }
 `
 

frontend/src/features/SideWindow/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/constants.ts

@@ -1,8 +1,8 @@
-import { InfractionGroup } from './types'
+import { InfractionCategory } from './types'
 
-export const infractionGroupToLabel: Record<InfractionGroup, string> = {
-  [InfractionGroup.GEAR_INFRACTIONS]: 'Infraction engins',
-  [InfractionGroup.LOGBOOK_INFRACTION]: 'Infraction obligations déclaratives et autorisations de pêche',
-  [InfractionGroup.OTHER_INFRACTIONS]: 'Autre infraction',
-  [InfractionGroup.SPECIES_INFRACTIONS]: 'Infraction espèces'
+export const infractionGroupToLabel: Record<InfractionCategory, string> = {
+  [InfractionCategory.GEAR_INFRACTIONS]: 'Infraction engins',
+  [InfractionCategory.LOGBOOK_INFRACTION]: 'Infraction obligations déclaratives et autorisations de pêche',
+  [InfractionCategory.OTHER_INFRACTIONS]: 'Autre infraction',
+  [InfractionCategory.SPECIES_INFRACTIONS]: 'Infraction espèces'
 }

frontend/src/features/SideWindow/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/index.tsx

@@ -7,7 +7,7 @@ import styled from 'styled-components'
 
 import { Infraction } from './Infraction'
 import { InfractionForm } from './InfractionForm'
-import { InfractionGroup } from './types'
+import { InfractionCategory } from './types'
 import { FrontendError } from '../../../../../../libs/FrontendError'
 import { FrontendErrorBoundary } from '../../../../../../ui/FrontendErrorBoundary'
 import { useGetNatinfsAsOptions } from '../../../hooks/useGetNatinfsAsOptions'
@@ -31,17 +31,19 @@ export function FormikMultiInfractionPicker({ addButtonLabel, label }: FormikMul
 
   const infractionsWithLabelAndGroup = useMemo(() => {
     const allInfractions = [
-      ...(values.gearInfractions?.map(infraction => ({ ...infraction, group: InfractionGroup.GEAR_INFRACTIONS })) ||
+      ...(values.gearInfractions?.map(infraction => ({ ...infraction, group: InfractionCategory.GEAR_INFRACTIONS })) ||
         []),
       ...(values.logbookInfractions?.map(infraction => ({
         ...infraction,
-        group: InfractionGroup.LOGBOOK_INFRACTION
+        group: InfractionCategory.LOGBOOK_INFRACTION
+      })) || []),
+      ...(values.otherInfractions?.map(infraction => ({
+        ...infraction,
+        group: InfractionCategory.OTHER_INFRACTIONS
       })) || []),
-      ...(values.otherInfractions?.map(infraction => ({ ...infraction, group: InfractionGroup.OTHER_INFRACTIONS })) ||
-        []),
       ...(values.speciesInfractions?.map(infraction => ({
         ...infraction,
-        group: InfractionGroup.SPECIES_INFRACTIONS
+        group: InfractionCategory.SPECIES_INFRACTIONS
       })) || [])
     ]
     if (!allInfractions.length) {

frontend/src/features/SideWindow/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/types.ts

@@ -1,4 +1,4 @@
-export enum InfractionGroup {
+export enum InfractionCategory {
   GEAR_INFRACTIONS = 'gearInfractions',
   LOGBOOK_INFRACTION = 'logbookInfractions',
   OTHER_INFRACTIONS = 'otherInfractions',