Tech – Migre Vite de v4 à la v5 (#3633)

## Linked issues None ---- - [ ] Tests E2E (Cypress)
MTES-MCT · Sep 9, 2024 · 330635c · 330635c
2 parents f0add7e + 720ef6f
commit 330635c
Show file tree

Hide file tree

Showing 34 changed files with 567 additions and 304 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,7 +11,7 @@
   },
   "scripts": {
     "build": "vite build && npm run bundle-sw",
-    "clean": "rm -Rf ./node-modules/.vite ./node-modules/build",
+    "clean": "rm -Rf ./node-modules/.vite ./build",
     "dev": "import-meta-env-prepare -x ./.env.local.defaults && vite --port 3000",
     "dev-cypress": "FRONTEND_OIDC_ENABLED=false import-meta-env-prepare -u -x ./.env.local.defaults && vite --port 3000",
     "dev-monitorenv": "FRONTEND_MONITORENV_URL=//localhost:9880 import-meta-env-prepare -u -x ./.env.local.defaults && vite --port 3000",
@@ -142,9 +142,9 @@
     "ts-jest": "29.2.5",
     "type-fest": "4.26.0",
     "typescript": "5.5.4",
-    "vite": "4.5.3",
+    "vite": "5.4.3",
     "vite-plugin-svgr": "4.2.0",
-    "vite-tsconfig-paths": "4.3.2"
+    "vite-tsconfig-paths": "5.0.1"
   },
   "overrides": {
     "socket.io": ">=2.5.0",

diff --git a/frontend/src/domain/entities/estimatedPosition.js b/frontend/src/domain/entities/estimatedPosition.js
@@ -4,11 +4,11 @@ import Point from 'ol/geom/Point'
 import { transform } from 'ol/proj'
 
 import { LayerProperties } from './layers/constants'
+import { MonitorFishLayer } from './layers/types'
 import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from './map/constants'
 import { Vessel } from './vessel/vessel'
 import { COLORS } from '../../constants/constants'
 import { theme } from '../../ui/theme'
-import { MonitorFishLayer } from './layers/types'
 
 class EstimatedPosition {
   static colorProperty = 'color'

diff --git a/frontend/src/features/Account/components/Account.tsx b/frontend/src/features/Account/components/Account.tsx
@@ -24,7 +24,7 @@ export function Account() {
 
   return (
     <Wrapper>
-      <MissionMenuBox data-cy="map-account-box" isOpen={rightMapBoxOpened === MapBox.ACCOUNT}>
+      <MissionMenuBox $isOpen={rightMapBoxOpened === MapBox.ACCOUNT} data-cy="map-account-box">
         <StyledContainer>
           <MapMenuDialog.Header>
             <MapMenuDialog.Title>Déconnexion</MapMenuDialog.Title>

diff --git a/...end/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZone.tsx b/...end/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZone.tsx
@@ -16,9 +16,9 @@ type AdministrativeZoneType = {
 export function AdministrativeZone({ isFirst, isGrouped, isShown, showOrHideZone, zone }: AdministrativeZoneType) {
   return (
     <Row
+      $isFirst={isFirst}
+      $isGrouped={isGrouped}
       data-cy="administrative-layer-toggle"
-      isFirst={isFirst}
-      isGrouped={isGrouped}
       onClick={() => showOrHideZone(isShown)}
     >
       <LayerName title={zone.name}>{zone.name}</LayerName>
@@ -41,12 +41,12 @@ const LayerName = styled.span`
 `
 
 const Row = styled.span<{
-  isFirst: boolean | undefined
-  isGrouped: boolean | undefined
+  $isFirst: boolean | undefined
+  $isGrouped: boolean | undefined
 }>`
-  margin-top: ${p => (p.isFirst ? 5 : 0)}px;
+  margin-top: ${p => (p.$isFirst ? 5 : 0)}px;
   padding: 4px 0 4px 20px;
-  padding-left: ${p => (p.isGrouped ? '38px' : '20px')};
+  padding-left: ${p => (p.$isGrouped ? '38px' : '20px')};
   line-height: 20px;
   display: block;
   user-select: none;

diff --git a/...c/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZonesGroup.tsx b/...c/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZonesGroup.tsx
@@ -21,13 +21,13 @@ export function AdministrativeZonesGroup({ group, showOrHideZone, zones }: Admin
 
   return (
     <Row>
-      <Zone isOpen={isOpen}>
+      <Zone $isOpen={isOpen}>
         <Text onClick={() => setIsOpen(!isOpen)} title={group.name}>
           {group.name}
         </Text>
         <Chevron $isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} />
       </Zone>
-      <List isOpen={isOpen} length={zones.length} title={group.name.replace(/\s/g, '-')}>
+      <List $isOpen={isOpen} $length={zones.length} title={group.name.replace(/\s/g, '-')}>
         {zones.map((zone, index) => (
           <AdministrativeZone
             key={zone.code}
@@ -68,7 +68,7 @@ const Text = styled.span`
 `
 
 const Zone = styled.span<{
-  isOpen: boolean
+  $isOpen: boolean
 }>`
   width: 100%;
   width: -moz-available;
@@ -77,18 +77,18 @@ const Zone = styled.span<{
   display: flex;
   user-select: none;
   padding-bottom: 2px;
-  ${p => (!p.isOpen ? null : `border-bottom: 1px solid ${COLORS.lightGray};`)}
+  ${p => (!p.$isOpen ? null : `border-bottom: 1px solid ${COLORS.lightGray};`)}
 
   &:hover {
     background: ${THEME.color.blueGray25};
   }
 `
 
 const List = styled.div<{
-  isOpen: boolean
-  length: number
+  $isOpen: boolean
+  $length: number
 }>`
-  height: ${p => (p.isOpen && p.length ? p.length * 37 + 10 : 0)}px;
+  height: ${p => (p.$isOpen && p.$length ? p.$length * 37 + 10 : 0)}px;
   overflow: hidden;
   transition: 0.2s all;
 `

diff --git a/frontend/src/features/AdministrativeZone/components/AdministrativeZones/index.tsx b/frontend/src/features/AdministrativeZone/components/AdministrativeZones/index.tsx
@@ -96,10 +96,10 @@ export function AdministrativeZones({ hideLayersListWhenSearching = false, names
 
   return (
     <>
-      <SectionTitle data-cy="administrative-zones-open" isOpened={isOpened} onClick={onSectionTitleClicked}>
+      <SectionTitle $isOpened={isOpened} data-cy="administrative-zones-open" onClick={onSectionTitleClicked}>
         Zones administratives <ChevronIcon $isOpen={isOpened} />
       </SectionTitle>
-      <List isOpened={isOpened} zonesLength={zonesLength}>
+      <List $isOpened={isOpened} $zonesLength={zonesLength}>
         {zones.zones.map(zone => (
           <Row key={zone.code}>
             <AdministrativeZone
@@ -124,7 +124,7 @@ export function AdministrativeZones({ hideLayersListWhenSearching = false, names
 }
 
 const SectionTitle = styled.div<{
-  isOpened: boolean
+  $isOpened: boolean
 }>`
   height: 30px;
   padding-left: 20px;
@@ -138,8 +138,8 @@ const SectionTitle = styled.div<{
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
-  border-bottom-left-radius: ${p => (p.isOpened ? '0' : '2px')};
-  border-bottom-right-radius: ${p => (p.isOpened ? '0' : '2px')};
+  border-bottom-left-radius: ${p => (p.$isOpened ? '0' : '2px')};
+  border-bottom-right-radius: ${p => (p.$isOpened ? '0' : '2px')};
 
   .Element-IconBox {
     float: right;
@@ -148,14 +148,14 @@ const SectionTitle = styled.div<{
 `
 
 const List = styled.ul<{
-  isOpened: boolean
-  zonesLength: number
+  $isOpened: boolean
+  $zonesLength: number
 }>`
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   max-height: 48vh;
-  height: ${p => (p.isOpened && p.zonesLength ? 36 * p.zonesLength : 0)}px;
+  height: ${p => (p.$isOpened && p.$zonesLength ? 36 * p.$zonesLength : 0)}px;
   background: ${COLORS.white};
   transition: 0.5s all;
   border-bottom-left-radius: 2px;

diff --git a/frontend/src/features/BaseMap/components/BaseMaps/index.tsx b/frontend/src/features/BaseMap/components/BaseMaps/index.tsx
@@ -52,11 +52,11 @@ export function BaseMaps({ namespace }) {
 
   return (
     <>
-      <Title isShowed={isBaseLayersShowed} onClick={openOrCloseBaseLayers}>
+      <Title $isShowed={isBaseLayersShowed} onClick={openOrCloseBaseLayers}>
         Fonds de carte <ChevronIcon $isOpen={isBaseLayersShowed} />
       </Title>
       <RadioGroup onChange={showLayer} value={selectedBaseLayer}>
-        <List isShowed={isBaseLayersShowed} layersLength={baseLayers.length}>
+        <List $isShowed={isBaseLayersShowed} $layersLength={baseLayers.length}>
           {baseLayers.map(layer => (
             <BaseMap key={layer} layer={layer} onChange={showLayer} selectedBaseLayer={selectedBaseLayer} />
           ))}
@@ -67,7 +67,7 @@ export function BaseMaps({ namespace }) {
 }
 
 const Title = styled.div<{
-  isShowed: boolean
+  $isShowed: boolean
 }>`
   height: 30px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
@@ -81,8 +81,8 @@ const Title = styled.div<{
   user-select: none;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
-  border-bottom-left-radius: ${p => (p.isShowed ? '0' : '2px')};
-  border-bottom-right-radius: ${p => (p.isShowed ? '0' : '2px')};
+  border-bottom-left-radius: ${p => (p.$isShowed ? '0' : '2px')};
+  border-bottom-right-radius: ${p => (p.$isShowed ? '0' : '2px')};
 
   .Element-IconBox {
     float: right;
@@ -91,13 +91,13 @@ const Title = styled.div<{
 `
 
 const List = styled.ul<{
-  isShowed: boolean
-  layersLength: number
+  $isShowed: boolean
+  $layersLength: number
 }>`
   margin: 0;
   border-radius: 0;
   padding: 0;
-  height: ${p => (p.isShowed && p.layersLength ? 37 * p.layersLength : 0)}px;
+  height: ${p => (p.$isShowed && p.$layersLength ? 37 * p.$layersLength : 0)}px;
   overflow-y: hidden;
   overflow-x: hidden;
   background: ${p => p.theme.color.white};

diff --git a/frontend/src/features/CustomZone/components/CustomZones/index.tsx b/frontend/src/features/CustomZone/components/CustomZones/index.tsx
@@ -79,10 +79,10 @@ export function CustomZones({ hideLayersListWhenSearching = false, namespace }:
 
   return (
     <>
-      <Title data-cy="custom-zones-toggle" isOpened={isOpened} onClick={onSectionTitleClicked}>
+      <Title $isOpened={isOpened} data-cy="custom-zones-toggle" onClick={onSectionTitleClicked}>
         Mes zones importées <ChevronIcon $isOpen={isOpened} />
       </Title>
-      <List isOpened={isOpened} zonesLength={zonesLength}>
+      <List $isOpened={isOpened} $zonesLength={zonesLength}>
         {zoneList.map(zone => (
           <CustomZone
             key={zone.uuid}
@@ -111,7 +111,7 @@ const HowTo = styled.li`
 `
 
 const Title = styled.div<{
-  isOpened: boolean
+  $isOpened: boolean
 }>`
   height: 30px;
   padding-left: 20px;
@@ -125,8 +125,8 @@ const Title = styled.div<{
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
-  border-bottom-left-radius: ${p => (p.isOpened ? '0' : '2px')};
-  border-bottom-right-radius: ${p => (p.isOpened ? '0' : '2px')};
+  border-bottom-left-radius: ${p => (p.$isOpened ? '0' : '2px')};
+  border-bottom-right-radius: ${p => (p.$isOpened ? '0' : '2px')};
 
   .Element-IconBox {
     float: right;
@@ -135,14 +135,14 @@ const Title = styled.div<{
 `
 
 const List = styled.ul<{
-  isOpened: boolean
-  zonesLength: number
+  $isOpened: boolean
+  $zonesLength: number
 }>`
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   max-height: 48vh;
-  height: ${p => (p.isOpened ? 36 * p.zonesLength + 110 : 0)}px;
+  height: ${p => (p.$isOpened ? 36 * p.$zonesLength + 110 : 0)}px;
   background: ${COLORS.white};
   transition: 0.5s all;
   border-bottom-left-radius: 2px;

diff --git a/frontend/src/features/Healthcheck/components/HealthcheckHeadband.tsx b/frontend/src/features/Healthcheck/components/HealthcheckHeadband.tsx
@@ -49,7 +49,7 @@ export function HealthcheckHeadband() {
     <>
       {!!healthcheckTextWarning.length && !previewFilteredVesselsMode && (
         <HealthcheckWarnings
-          hasMultipleWarnings={healthcheckTextWarning.length > 1}
+          $hasMultipleWarnings={healthcheckTextWarning.length > 1}
           onClick={() => setAreAllWarningsOpened(!areAllWarningsOpened)}
         >
           <WarningIcon />
@@ -65,9 +65,9 @@ export function HealthcheckHeadband() {
           <MultipleWarningsHeadband
             // eslint-disable-next-line react/no-array-index-key
             key={`${index}-${warning}`}
-            isLast={healthcheckTextWarning.length === index + 1}
-            isOpen={areAllWarningsOpened}
-            topOffset={index + 1}
+            $isLast={healthcheckTextWarning.length === index + 1}
+            $isOpen={areAllWarningsOpened}
+            $topOffset={index + 1}
           >
             {warning}
           </MultipleWarningsHeadband>
@@ -91,7 +91,7 @@ const WarningIcon = styled(WarningSVG)`
 `
 
 const HealthcheckWarnings = styled.div<{
-  hasMultipleWarnings: boolean
+  $hasMultipleWarnings: boolean
 }>`
   font: normal normal bold 16px/22px Marianne;
   background: ${p => p.theme.color.goldenPoppy} 0% 0% no-repeat padding-box;
@@ -101,26 +101,26 @@ const HealthcheckWarnings = styled.div<{
   padding: 13px;
   border-bottom: 2px solid #e3be05;
   color: ${p => p.theme.color.gunMetal};
-  cursor: ${p => (p.hasMultipleWarnings ? 'pointer' : 'unset')};
+  cursor: ${p => (p.$hasMultipleWarnings ? 'pointer' : 'unset')};
 `
 
 const MultipleWarningsHeadband = styled.div<{
-  isLast: boolean
-  isOpen: boolean
-  topOffset: number
+  $isLast: boolean
+  $isOpen: boolean
+  $topOffset: number
 }>`
   position: absolute;
-  top: ${p => (p.isOpen ? p.topOffset * 50 : 0)}px;
+  top: ${p => (p.$isOpen ? p.$topOffset * 50 : 0)}px;
   background: ${p => p.theme.color.goldenPoppy25} 0% 0% no-repeat padding-box;
   width: 100vw;
-  height: ${p => (p.isOpen ? 22 : 0)}px;
+  height: ${p => (p.$isOpen ? 22 : 0)}px;
   text-align: center;
-  padding: ${p => (p.isOpen ? '13px 0 13px 0' : '0 0 0 0')};
+  padding: ${p => (p.$isOpen ? '13px 0 13px 0' : '0 0 0 0')};
   border-bottom: 2px solid #e3be05;
   color: ${p => p.theme.color.gunMetal};
   z-index: 9999;
   font: normal normal bold 16px/22px Marianne;
   transition: all 0.5s;
-  opacity: ${p => (p.isOpen ? 1 : 0)};
-  ${p => p.isLast && `box-shadow: 0px 2px ${p.isOpen ? 4 : 0}px #707785bf;`}
+  opacity: ${p => (p.$isOpen ? 1 : 0)};
+  ${p => p.$isLast && `box-shadow: 0px 2px ${p.$isOpen ? 4 : 0}px #707785bf;`}
 `
diff --git a/frontend/src/features/InterestPoint/components/InterestPointMapButton/EditInterestPoint.tsx b/frontend/src/features/InterestPoint/components/InterestPointMapButton/EditInterestPoint.tsx
@@ -127,7 +127,7 @@ export function EditInterestPoint({ close, isOpen }: EditInterestPointProps) {
   }
 
   return (
-    <Wrapper data-cy="save-interest-point" isOpen={isOpen}>
+    <Wrapper $isOpen={isOpen} data-cy="save-interest-point">
       <Header>Créer un point d&apos;intérêt</Header>
       <Body>
         <p>Coordonnées</p>