[Tech] Fixe les problèmes de style après suppression de mini.css

backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/domain/use_cases/mission_actions/GetActivityReports.kt

@@ -80,7 +80,8 @@ class GetActivityReports(
                 missions.first { mission -> mission.id == control.missionId }
             } catch (e: NoSuchElementException) {
                 logger.error(
-                    "Mission id '${control.missionId}' linked to ${control.actionType} control id '${control.id}' could not be found. Is this mission deleted ?", e
+                    "Mission id '${control.missionId}' linked to ${control.actionType} control id '${control.id}' could not be found. Is this mission deleted ?",
+                    e,
                 )
 
                 return@map null

frontend/cypress/e2e/backoffice/new_regulation.spec.ts

@@ -262,8 +262,7 @@ context('New Regulation', () => {
     cy.get('[data-cy="save-reg-text-name"]').click()
     cy.get('[data-cy="regulatory-gears-section"]').scrollIntoView().click()
     cy.get('[data-cy="authorized-all-towed-gears-option"]').click()
-    cy.get('*[data-cy^="open-regulated-species"]').scrollIntoView().click({ force: true })
-    cy.scrollTo(0, 500)
+    cy.get('*[data-cy^="open-regulated-species"]').scrollIntoView().click({ force: true }).scrollIntoView()
     cy.get('.rs-picker-toggle-placeholder').filter(':contains("catégories d\'espèces")').eq(0).click({ timeout: 10000 })
     cy.get('.rs-picker-search-bar-input').type('Espèce{enter}', { force: true })
     cy.get('.rs-picker-toggle-placeholder').filter(':contains("des espèces")').eq(0).click({ timeout: 10000 })

frontend/cypress/e2e/backoffice/update_regulation.spec.ts

@@ -104,8 +104,7 @@ context('Update Regulation', () => {
     // complete missing values in form
     cy.get('[type="checkbox"]').first().check({ force: true })
     cy.get('[type="checkbox"]').eq(2).check({ force: true })
-    cy.get('*[data-cy^="open-regulated-species"]').click({ force: true })
-    cy.scrollTo(0, 500)
+    cy.get('*[data-cy^="open-regulated-species"]').click({ force: true }).scrollIntoView()
 
     cy.log('Select authorized species and groups')
     cy.get('.rs-picker-toggle-placeholder')
@@ -165,8 +164,7 @@ context('Update Regulation', () => {
     // complete missing values in form
     cy.get('[type="checkbox"]').first().check({ force: true })
     cy.get('[type="checkbox"]').eq(2).check({ force: true })
-    cy.get('*[data-cy^="open-regulated-species"]').click({ force: true })
-    cy.scrollTo(0, 500)
+    cy.get('*[data-cy^="open-regulated-species"]').click({ force: true }).scrollIntoView()
     cy.get('*[data-cy^="regulatory-gears-section"]').click({ force: true })
     cy.get('*[data-cy="authorized-gears-selector"]').scrollIntoView()
 

frontend/src/domain/entities/vessel/riskFactor/index.ts

@@ -1,5 +1,6 @@
 import type { DeclaredLogbookSpecies } from '../types'
 
+// TODO Replace with theme colors.
 export const getRiskFactorColor = (riskFactor: number) => {
   if (riskFactor >= 1 && riskFactor < 1.75) {
     return '#8E9A9F'
@@ -17,7 +18,7 @@ export const getRiskFactorColor = (riskFactor: number) => {
   return undefined
 }
 
-export const getImpactRiskFactorText = (riskFactor: number, hasSegment: boolean) => {
+export const getImpactRiskFactorText = (riskFactor: number, hasSegment: boolean = false) => {
   if (riskFactor >= 1 && riskFactor < 1.75) {
     if (!hasSegment) {
       return 'Pas de segment'
@@ -38,7 +39,7 @@ export const getImpactRiskFactorText = (riskFactor: number, hasSegment: boolean)
   return undefined
 }
 
-export const getProbabilityRiskFactorText = (riskFactor: number, hasBeenControlledLastFiveYears: boolean) => {
+export const getProbabilityRiskFactorText = (riskFactor: number, hasBeenControlledLastFiveYears: boolean = false) => {
   if (riskFactor >= 1 && riskFactor < 1.75) {
     return 'Navire en règle'
   }
@@ -59,7 +60,7 @@ export const getProbabilityRiskFactorText = (riskFactor: number, hasBeenControll
   return undefined
 }
 
-export const getDetectabilityRiskFactorText = (riskFactor: number, isTextReduced: boolean) => {
+export const getDetectabilityRiskFactorText = (riskFactor: number, isTextReduced: boolean = false) => {
   if (riskFactor >= 1 && riskFactor < 1.75) {
     return `Priorité ${isTextReduced ? '' : 'de contrôle '}faible`
   }

frontend/src/features/BackOffice/components/BackOfficeTitle.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+export const BackOfficeTitle = styled.h2`
+  border-bottom: 2px solid ${p => p.theme.color.lightGray};
+  color: #282f3e;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: 12px;
+  padding-bottom: 5px;
+  text-align: left;
+  text-transform: uppercase;
+  width: fit-content;
+`

frontend/src/features/BackOffice/components/BackofficeMenu/constants.ts

@@ -0,0 +1,17 @@
+export enum BackOfficeMenuKey {
+  CONTROL_OBJECTIVE_LIST = 'CONTROL_OBJECTIVE_LIST',
+  FLEET_SEGMENT_LIST = 'CONTROL_UNIT_LIST',
+  REGULATORY_ZONE_LIST = 'REGULATORY_ZONE_LIST'
+}
+
+export const BACK_OFFICE_MENU_LABEL: Record<BackOfficeMenuKey, string> = {
+  [BackOfficeMenuKey.CONTROL_OBJECTIVE_LIST]: 'Objectifs de contrôle',
+  [BackOfficeMenuKey.FLEET_SEGMENT_LIST]: 'Segments de flotte',
+  [BackOfficeMenuKey.REGULATORY_ZONE_LIST]: 'Zones réglementaires'
+}
+
+export const BACK_OFFICE_MENU_PATH: Record<BackOfficeMenuKey, string> = {
+  [BackOfficeMenuKey.CONTROL_OBJECTIVE_LIST]: '/control_objectives',
+  [BackOfficeMenuKey.FLEET_SEGMENT_LIST]: '/fleet_segments',
+  [BackOfficeMenuKey.REGULATORY_ZONE_LIST]: '/regulation'
+}

frontend/src/features/BackOffice/components/BackofficeMenu/index.tsx

@@ -0,0 +1,60 @@
+import { Icon } from '@mtes-mct/monitor-ui'
+import { NavLink } from 'react-router-dom'
+import styled from 'styled-components'
+
+import { BACK_OFFICE_MENU_LABEL, BACK_OFFICE_MENU_PATH, BackOfficeMenuKey } from './constants'
+
+export function BackOfficeMenu() {
+  return (
+    <Wrapper>
+      <StyledNavLink to={`/backoffice${BACK_OFFICE_MENU_PATH[BackOfficeMenuKey.REGULATORY_ZONE_LIST]}`}>
+        <Icon.MapLayers />
+        {BACK_OFFICE_MENU_LABEL[BackOfficeMenuKey.REGULATORY_ZONE_LIST]}
+      </StyledNavLink>
+      <StyledNavLink to={`/backoffice${BACK_OFFICE_MENU_PATH[BackOfficeMenuKey.CONTROL_OBJECTIVE_LIST]}`}>
+        <Icon.ControlUnit />
+        {BACK_OFFICE_MENU_LABEL[BackOfficeMenuKey.CONTROL_OBJECTIVE_LIST]}
+      </StyledNavLink>
+      <StyledNavLink to={`/backoffice${BACK_OFFICE_MENU_PATH[BackOfficeMenuKey.FLEET_SEGMENT_LIST]}`}>
+        <Icon.FleetSegment />
+        {BACK_OFFICE_MENU_LABEL[BackOfficeMenuKey.FLEET_SEGMENT_LIST]}
+      </StyledNavLink>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  background: ${p => p.theme.color.charcoal};
+  border-right: solid 1px black;
+  color: ${p => p.theme.color.gainsboro};
+  display: flex;
+  flex-direction: column;
+  letter-spacing: 0.5px;
+  line-height: 1;
+  min-width: 130px;
+  padding: 16px 24px;
+`
+
+const StyledNavLink = styled(NavLink)`
+  align-items: center;
+  color: ${p => p.theme.color.gainsboro};
+  display: flex;
+  height: 55px;
+  text-align: left;
+  line-height: 17px;
+  width: 140px;
+
+  && {
+    color: ${p => p.theme.color.gainsboro};
+  }
+  &:after {
+    color: ${p => p.theme.color.gainsboro};
+  }
+  &:before {
+    color: ${p => p.theme.color.gainsboro};
+  }
+
+  > .Element-IconBox {
+    margin-right: 8px;
+  }
+`

frontend/src/features/Backoffice/edit_regulation/EditRegulation.tsx

@@ -384,13 +384,14 @@ const ErrorMessage = styled.div`
 
 const Wrapper = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  overflow-y: auto;
   width: 100%;
 `
 
 const Body = styled.div`
-  height: calc(100vh - 75px);
-  overflow-y: scroll;
+  flex-grow: 1;
+  padding-bottom: 50px;
 `
 
 const Header = styled.div`

frontend/src/features/Backoffice/edit_regulation/gear_regulation/RegulatedGears.jsx

@@ -329,7 +329,7 @@ const DerogationRadioWrapper = styled.div`
 `
 const DerogationRadio = styled(RadioGroup)`
   ${customRadioGroup}
-  padding-right: 10px!important;
+  padding: 10px !important;
   border: 1.5px solid ${props => props.$isYellow ? props.theme.color.goldenPoppy : props.theme.color.lightGray}!important;
   :focus {
     border: 1.5px solid ${props => props.$isYellow ? props.theme.color.goldenPoppy : props.theme.color.lightGray}!important;

frontend/src/features/Backoffice/fleet_segments/FleetSegments.tsx

@@ -15,6 +15,7 @@ import { createFleetSegment } from '../../../domain/use_cases/fleetSegment/creat
 import { getFleetSegmentsYearEntries } from '../../../domain/use_cases/fleetSegment/getFleetSegmentsYearEntries'
 import { useBackofficeAppDispatch } from '../../../hooks/useBackofficeAppDispatch'
 import { theme } from '../../../ui/theme'
+import { BackOfficeTitle } from '../../BackOffice/components/BackOfficeTitle'
 
 import type { FleetSegment } from '../../../domain/types/fleetSegment'
 
@@ -98,28 +99,34 @@ export function FleetSegments() {
   return (
     <Wrapper>
       <Header>
-        <Title>Segments de flotte</Title>
-        <YearSelectPicker
-          cleanable={false}
-          data={yearEntries}
-          data-cy="fleet-segments-select-year"
-          onChange={_year => fetchFleetSegments(_year as number)}
-          searchable={false}
-          size="xs"
-          value={year}
-        />
-        <AddYear>Ajouter</AddYear>
-        <AddYearSelectPicker
-          cleanable={false}
-          data={yearsToAdd}
-          data-cy="fleet-segments-add-year"
-          onChange={_year => addYearEntry(_year as number)}
-          placeholder={"l'année"}
-          searchable={false}
-          size="xs"
-          value={year}
-        />
+        <TitleBox>
+          <BackOfficeTitle>Segments de flotte</BackOfficeTitle>
+          <YearSelectPicker
+            cleanable={false}
+            data={yearEntries}
+            data-cy="fleet-segments-select-year"
+            onChange={_year => fetchFleetSegments(_year as number)}
+            searchable={false}
+            size="xs"
+            value={year}
+          />
+        </TitleBox>
+
+        <AddYearBox>
+          <AddYear>Ajouter</AddYear>
+          <AddYearSelectPicker
+            cleanable={false}
+            data={yearsToAdd}
+            data-cy="fleet-segments-add-year"
+            onChange={_year => addYearEntry(_year as number)}
+            placeholder={"l'année"}
+            searchable={false}
+            size="xs"
+            value={year}
+          />
+        </AddYearBox>
       </Header>
+
       {fleetSegments.length ? (
         <>
           <FleetSegmentsTable
@@ -128,15 +135,19 @@ export function FleetSegments() {
             setFleetSegments={setFleetSegments}
             year={year}
           />
-          <AddSegment data-cy="open-create-fleet-segment-modal" onClick={openNewFleetSegmentModal}>
-            Ajouter un segment
-          </AddSegment>
+
+          <AddSegmentBox>
+            <AddSegment data-cy="open-create-fleet-segment-modal" onClick={openNewFleetSegmentModal}>
+              Ajouter un segment
+            </AddSegment>
+          </AddSegmentBox>
         </>
       ) : (
         <Loading>
           <FulfillingBouncingCircleSpinner className="update-vessels" color={theme.color.lightGray} size={100} />
         </Loading>
       )}
+
       {isNewFleetSegmentModalOpen && (
         <NewFleetSegmentModal
           faoAreasList={faoAreas}
@@ -149,81 +160,70 @@ export function FleetSegments() {
   )
 }
 
+const Wrapper = styled.div`
+  flex-grow: 1;
+  margin: 20px 20px 20px 40px;
+  box-sizing: border-box;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .rs-picker-input {
+    border: none;
+    margin-left: 7px;
+    margin-top: -3px;
+  }
+`
+
 const Header = styled.div`
+  align-items: flex-start;
   display: flex;
+  justify-content: space-between;
   margin-bottom: 10px;
 `
 
 const AddYear = styled.span`
   color: ${COLORS.gunMetal};
-  margin-left: auto;
   margin-right: 10px;
+`
+
+const AddSegmentBox = styled.div`
   margin-top: 12px;
 `
 
 const AddSegment = styled.a`
   color: ${COLORS.gunMetal};
   cursor: pointer;
-  display: block;
-  height: fit-content;
-  margin-top: 10px;
   text-decoration: underline;
-  width: fit-content;
 `
 
 const YearSelectPicker = styled(SelectPicker)`
-  height: fit-content;
-  margin-left: 5px;
-  margin-right: 20px;
-  margin-top: 14px;
-  width: fit-content;
+  margin-left: 16px;
 
   .rs-picker-toggle {
-    width: 80px;
+    width: 120px;
   }
 `
 
 const AddYearSelectPicker = styled(SelectPicker)`
-  height: fit-content;
-  margin-right: 20px;
-  margin-top: 10px;
-  width: fit-content;
-
   .rs-picker-toggle-placeholder {
     color: ${COLORS.gunMetal} !important;
     font-size: 13px;
   }
-
-  .rs-picker-toggle {
-    width: 50px;
-  }
 `
 
 const Loading = styled.div`
   margin-left: calc(50vw - 200px);
   margin-top: 200px;
 `
 
-const Wrapper = styled.div`
-  height: calc(100vh - 50px);
-  margin-left: 40px;
-  margin-top: 20px;
-  width: calc(100vw - 200px);
-
-  .rs-picker-input {
-    border: none;
-    margin-left: 7px;
-    margin-top: -3px;
-  }
+const TitleBox = styled.div`
+  align-items: flex-start;
+  display: flex;
 `
 
-const Title = styled.h2`
-  border-bottom: 2px solid ${p => p.theme.color.lightGray};
-  color: #282f3e;
-  font-size: 16px;
-  font-weight: 700;
-  padding-bottom: 5px;
-  text-align: left;
-  text-transform: uppercase;
-  width: fit-content;
+const AddYearBox = styled.div`
+  align-items: center;
+  display: flex;
 `