Release 3.23.0

docs/changelog.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 3.23.0 (2024-10-08)
+
+**✨ Improvements**
+
+- Style the new image gallery feature for Flatpage content (Available since Geotrek admin 2.109.2) (#1265)
+- Improve tooltip content style for annotation HDViewpoints (#1260)
+- Add className on annotation HDViewpoints pathes to CSS customization purpose (#1260)
+
+**🔧 Maintenance**
+
+- Bump react and react-dom from 18.2.0 to 18.3.1 (#1269)
+- Bump next from 13.1.6 to 13.2.4 (#1268)
+- Bump @sentry/nextjs from 7.12.1 to 8.32.0 (#1268)
+- Install sharp package (#1262)
+- Update caniuse-lite (#1261)
+- Bump react-leaflet from 3.1.0 to 4.2.1 (#1258)
+- Replace react-leaflet-markercluster by next-leaflet-cluster package (#1258)
+- Bump @types/leaflet from 1.7.5 to 1.9.12 (#1258)
+- Bump @raruto/leaflet-elevation from 1.7.0 to 1.9.0 (#1258)
+- Bump leaflet.offline from 3.0.1 to 3.1.0 (#1258)
+- Bump @20tab/react-leaflet-resetview from 1.0.1 to 1.1.0 (#1258)
+
+**🐛 Fixes**
+
+- Fix the itinerancyStep display on the map - regression since 3.20.0 (#1259)
+
 ## 3.22.1 (2024-09-17)
 
 **🐛 Fixes**
@@ -8,7 +34,7 @@
 
 ## 3.22.0 (2024-09-17)
 
-# :warning: **WARNING!** :warning:
+### :warning: **WARNING!** :warning:
 
 **Do not use - docker installation will not work. Please install version 3.22.1 (or higher) instead**
 

frontend/next.config.js

@@ -27,7 +27,13 @@ const plugins = [
   [withPWA],
   [withSourceMaps()],
   [withBundleAnalyzer],
-  nextConfig => withSentryConfig(nextConfig, { silent: true }),
+  nextConfig =>
+    withSentryConfig(nextConfig, {
+      hideSourceMaps: true,
+      disableServerWebpackPlugin: true,
+      disableClientWebpackPlugin: true,
+      silent: true,
+    }),
 ];
 
 const nextConfig = {
@@ -53,11 +59,6 @@ const nextConfig = {
     locales: mergedHeaderConfig.menu.supportedLanguages,
     defaultLocale: mergedHeaderConfig.menu.defaultLanguage,
   },
-  sentry: {
-    hideSourceMaps: true,
-    disableServerWebpackPlugin: true, //process.env.SENTRY_DSN === undefined,
-    disableClientWebpackPlugin: true, //process.env.SENTRY_DSN === undefined,
-  },
   publicRuntimeConfig: getAllConfigs,
   images: {
     remotePatterns: [
@@ -66,6 +67,9 @@ const nextConfig = {
       },
     ],
   },
+  experimental: {
+    instrumentationHook: true,
+  },
 };
 
 module.exports = async (phase, { defaultConfig }) =>

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.22.1",
+  "version": "3.23.0",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",
@@ -34,13 +34,13 @@
     }
   },
   "dependencies": {
-    "@20tab/react-leaflet-resetview": "^1.0.1",
+    "@20tab/react-leaflet-resetview": "^1.1.0",
     "@hcaptcha/react-hcaptcha": "^1.4.4",
     "@makina-corpus/rando3d": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.1",
-    "@raruto/leaflet-elevation": "1.7.0",
+    "@raruto/leaflet-elevation": "1.9.0",
     "@react-hook/resize-observer": "^1.2.6",
-    "@sentry/nextjs": "^7.12.1",
+    "@sentry/nextjs": "^8.32.0",
     "@tanstack/react-query": "^5.51.1",
     "@tanstack/react-query-devtools": "^5.51.1",
     "@zeit/next-source-maps": "^0.0.4-canary.1",
@@ -54,33 +54,33 @@
     "diacritics": "^1.3.0",
     "dotenv-flow": "^3.2.0",
     "express": "^4.17.1",
-    "html-react-parser": "^2.0.0",
-    "leaflet": "^1.7.1",
+    "html-react-parser": "^5.1.16",
     "leaflet-boundary-canvas": "^1.0.0",
     "leaflet-rastercoords": "^1.0.5",
     "leaflet.locatecontrol": "^0.81.1",
-    "leaflet.offline": "^3.0.1",
-    "next": "^13.1.6",
+    "leaflet.offline": "^3.1.0",
+    "next": "13.2.4",
     "next-compose-plugins": "^2.2.1",
+    "next-leaflet-cluster": "^1.0.0",
     "next-pwa": "^5.6.0",
     "orejime": "^2.3.0",
     "postcss": "8.3.6",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-accessible-accordion": "^5.0.0",
     "react-country-flag": "^3.0.2",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-infinite-scroll-component": "6.1.0",
     "react-inlinesvg": "^4.0.4",
     "react-intl": "^6.2.1",
-    "react-leaflet": "3.1.0",
+    "react-leaflet": "^4.2.1",
     "react-leaflet-fullscreen": "^4.1.0",
-    "react-leaflet-markercluster": "^3.0.0-rc1",
     "react-leaflet-textpath": "2.1.0",
     "react-media-hook": "^0.5.0",
     "react-select": "^5.7.2",
     "react-slick": "^0.29.0",
     "screenfull": "^6.0.2",
     "semver": "^7.6.3",
+    "sharp": "^0.33.5",
     "slick-carousel": "^1.8.1",
     "store": "^2.0.12",
     "striptags": "^3.2.0",
@@ -101,10 +101,10 @@
     "@testing-library/react": "^16.0.0",
     "@types/debounce": "^1.2.1",
     "@types/jest": "27.0.2",
-    "@types/leaflet": "1.7.5",
+    "@types/leaflet": "^1.9.12",
     "@types/node": "22.5.4",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
     "@types/react-leaflet": "2.8.2",
     "@types/react-leaflet-markercluster": "^2.0.0",
     "@types/react-loader": "2.4.5",
@@ -132,7 +132,7 @@
     "typescript-eslint": "^7.1.0"
   },
   "resolutions": {
-    "@types/react": "^18.0.24",
-    "@types/react-dom": "^18.0.8"
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0"
   }
 }

frontend/src/__mocks__/react-leaflet.js

@@ -0,0 +1,11 @@
+const MapContainer = ({ children }) => <div data-testid="MapContainer">{children}</div>;
+
+const useMap = () => ({ fitBounds: () => {} });
+
+const TileLayer = () => <div data-testid="TileLayer" />;
+
+const Marker = ({ children }) => <div data-testid="Marker">{children}</div>;
+
+const Popup = () => <div data-testid="Popup" />;
+
+export { MapContainer, TileLayer, Marker, Popup, useMap };

frontend/src/components/HtmlParser/HtmlParser.tsx

@@ -27,7 +27,7 @@ const option = ({ needsConsent, triggerConsentModal }: ParserOptionsProps) => ({
       const props = attributesToProps(domNode.attribs);
       return (
         <button {...props} onClick={triggerConsentModal}>
-          {domToReact(domNode.children)}
+          {domToReact(domNode.children as DOMNode[])}
         </button>
       );
     }

frontend/src/components/Map/DetailsMap/DetailsMap.tsx

@@ -32,22 +32,23 @@
 import { OutdoorCourseResult } from 'modules/outdoorCourse/interface';
 import { cn } from 'services/utils/cn';
 import { BackToMapButton } from 'components/BackToMapButton';
-import { BackButton } from '../components/BackButton';
 
-import { TrekMarkersAndCourse } from './TrekMarkersAndCourse';
-import { getMapConfig } from '../config';
-import { AltimetricProfile } from '../components/AltimetricProfile';
-import { ControlSection } from '../components/ControlSection';
-import { useDetailsMap } from './useDetailsMap';
+import { BackButton } from 'components/Map/components/BackButton';
+import { AltimetricProfile } from 'components/Map/components/AltimetricProfile';
+import { ControlSection } from 'components/Map/components/ControlSection';
+import DetailsMapDrawer from 'components/Map/components/DetailsMapDrawer';
+import { ResetView } from 'components/Map/components/ResetView';
+import TileLayerManager from 'components/Map/components/TileLayerManager';
+import FullscreenControl from 'components/Map/components/FullScreenControl';
+import ViewPointHD from 'components/Map/components/ViewPointHD';
+import { CRSPixel } from 'components/Map/components/ViewPointHD/CRSPixel';
+import { AnnotationList } from 'components/Map/components/ViewPointHD/AnnotationList';
+import LocateControl from 'components/Map/components/LocateControl';
+
 import { MapChildren, PointWithIcon } from './MapChildren';
-import DetailsMapDrawer from '../components/DetailsMapDrawer';
-import { ResetView } from '../components/ResetView';
-import TileLayerManager from '../components/TileLayerManager';
-import FullscreenControl from '../components/FullScreenControl';
-import ViewPointHD from '../components/ViewPointHD';
-import { CRSPixel } from '../components/ViewPointHD/CRSPixel';
-import { AnnotationList } from '../components/ViewPointHD/AnnotationList';
-import LocateControl from '../components/LocateControl';
+import { useDetailsMap } from './useDetailsMap';
+import { getMapConfig } from '../config';
+import { TrekMarkersAndCourse } from './TrekMarkersAndCourse';
 
 export interface GeometryListProps {
   geometry:
@@ -160,7 +161,7 @@
     if (visibleSection === 'report' && reportVisibility) {
       props.setMapId?.('default');
     }
   }, [visibleSection, props.setMapId]);
 
   const hasTitle = Boolean(props.title);
 
@@ -189,7 +190,7 @@
           navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? []))
         }
         zoomControl={props.hasZoomControl}
-        whenCreated={setMapInstance}
+        ref={setMapInstance}
         bounds={bounds}
         {...(mapToDisplay !== 'default' && { crs: CRSPixel(mapToDisplay) })}
       >
@@ -198,7 +199,7 @@
             <FormattedMessage id="report.mapButton.validate" />
           </BackButton>
         ) : (
-          <BackButton icon={<ArrowLeft size={24} />} onClick={hideMap} />
+          <BackButton icon={<ArrowLeft size={18} />} onClick={hideMap} />
         )}
         {props.hasZoomControl && <FullscreenControl />}
         {mapToDisplay !== 'default' && (

frontend/src/components/Map/SearchMap/MapContainer.tsx

@@ -18,7 +18,7 @@ const MapContainer: React.FC<Props> = ({ children, whenCreated, hasZoomControl =
       center={mapConfig.searchMapCenter as [number, number]}
       zoom={mapConfig.searchMapZoom}
       maxZoom={mapConfig.maximumZoomLevel}
-      whenCreated={whenCreated}
+      ref={whenCreated}
       scrollWheelZoom
       zoomControl={hasZoomControl}
       id="search_map"

frontend/src/components/Map/SearchMap/index.tsx

@@ -1,19 +1,18 @@
-import MapContainer from 'components/Map/SearchMap/MapContainer';
-import MoveHandler from 'components/Map/SearchMap/MoveHandler';
-import SearchMapChildrens from 'components/Map/SearchMap/SearchMapChildrens';
 import { LatLngBounds } from 'leaflet';
-import React from 'react';
 import { ScaleControl } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 
+import MapContainer from 'components/Map/SearchMap/MapContainer';
+import MoveHandler from 'components/Map/SearchMap/MoveHandler';
+import SearchMapChildrens from 'components/Map/SearchMap/SearchMapChildrens';
 import { ArrowLeft } from 'components/Icons/ArrowLeft';
 import { useTileLayer } from 'hooks/useTileLayer';
-import { BackButton } from '../components/BackButton';
-import { FilterButton } from '../components/FilterButton';
-import { ResetView } from '../components/ResetView';
-import TileLayerManager from '../components/TileLayerManager';
-import FullscreenControl from '../components/FullScreenControl';
-import LocateControl from '../components/LocateControl';
+import { BackButton } from 'components/Map/components/BackButton';
+import { FilterButton } from 'components/Map/components/FilterButton';
+import { ResetView } from 'components/Map/components/ResetView';
+import TileLayerManager from 'components/Map/components/TileLayerManager';
+import FullscreenControl from 'components/Map/components/FullScreenControl';
+import LocateControl from 'components/Map/components/LocateControl';
 
 export type PropsType = {
   segments?: { x: number; y: number }[];
@@ -41,7 +40,7 @@ const SearchMap: React.FC<PropsType> = props => {
     <MapContainer whenCreated={setMapInstance} hasZoomControl={props.hasZoomControl}>
       {props.onMove && <MoveHandler onMove={props.onMove} />}
       <TileLayerManager />
-      <BackButton icon={<ArrowLeft size={24} />} onClick={hideMap} />
+      <BackButton icon={<ArrowLeft size={18} />} onClick={hideMap} />
       <FilterButton openFilterMenu={props.openFilterMenu} />
       {props.hasZoomControl === true && <FullscreenControl />}
       <ResetView />

frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { MapContainer, ScaleControl } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 
-import { ArrowLeft } from 'components/Icons/ArrowLeft';
 import { Bbox } from 'modules/details/interface';
 import {
   GeometryCollection,
@@ -15,13 +14,16 @@ import {
   PolygonGeometry,
 } from 'modules/interface';
 import { useTileLayer } from 'hooks/useTileLayer';
-import { BackButton } from '../components/BackButton';
+import { ArrowLeft } from 'components/Icons/ArrowLeft';
+import { BackButton } from 'components/Map/components/BackButton';
 
-import { GeometryList } from '../DetailsMap/GeometryList';
-import { getMapConfig } from '../config';
-import { GeometryListProps } from '../DetailsMap/DetailsMap';
-import { ResetView } from '../components/ResetView';
-import TileLayerManager from '../components/TileLayerManager';
+import { GeometryList } from 'components/Map/DetailsMap/GeometryList';
+import { getMapConfig } from 'components/Map/config';
+import { GeometryListProps } from 'components/Map/DetailsMap/DetailsMap';
+import { ResetView } from 'components/Map/components/ResetView';
+import TileLayerManager from 'components/Map/components/TileLayerManager';
+import LocateControl from 'components/Map/components/LocateControl';
+import FullscreenControl from 'components/Map/components/FullScreenControl';
 
 interface TouristicContentGeometryNullable {
   geometry:
@@ -46,12 +48,12 @@ export type PropsType = {
 };
 
 export const TouristicContentMap: React.FC<PropsType> = props => {
-  const center: LatLngBoundsExpression = [
+  const bounds: LatLngBoundsExpression = [
     [props.bbox.corner1.y, props.bbox.corner1.x],
     [props.bbox.corner2.y, props.bbox.corner2.x],
   ];
 
-  const { setMapInstance } = useTileLayer(Number(props.touristicContentGeometry.id), center);
+  const { setMapInstance } = useTileLayer(Number(props.touristicContentGeometry.id), bounds);
 
   const hideMap = () => {
     if (props.hideMap) {
@@ -61,32 +63,30 @@ export const TouristicContentMap: React.FC<PropsType> = props => {
 
   const mapConfig = getMapConfig();
   return (
-    <>
-      <MapContainer
-        className="size-full"
-        scrollWheelZoom
-        maxZoom={
-          navigator.onLine
-            ? mapConfig.maximumZoomLevel
-            : Math.max(...(mapConfig?.zoomAvailableOffline ?? []))
-        }
-        minZoom={
-          navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? []))
-        }
-        whenCreated={setMapInstance}
-        zoomControl={props.hasZoomControl}
-        bounds={center}
-        attributionControl={false}
-      >
-        <BackButton className="desktop:hidden" icon={<ArrowLeft size={24} />} onClick={hideMap} />
-        <ResetView />
-        <TileLayerManager />
-        <ScaleControl />
-        {props.touristicContentGeometry !== null && (
-          <GeometryList contents={[props.touristicContentGeometry as GeometryListProps]} />
-        )}
-      </MapContainer>
-    </>
+    <MapContainer
+      className="size-full"
+      scrollWheelZoom
+      maxZoom={
+        navigator.onLine
+          ? mapConfig.maximumZoomLevel
+          : Math.max(...(mapConfig?.zoomAvailableOffline ?? []))
+      }
+      minZoom={navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? []))}
+      ref={setMapInstance}
+      zoomControl={props.hasZoomControl}
+      bounds={bounds}
+      attributionControl={false}
+    >
+      <BackButton icon={<ArrowLeft size={18} />} onClick={hideMap} />
+      {props.hasZoomControl === true && <FullscreenControl />}
+      <ResetView />
+      <TileLayerManager />
+      <LocateControl />
+      <ScaleControl />
+      {props.touristicContentGeometry !== null && (
+        <GeometryList contents={[props.touristicContentGeometry as GeometryListProps]} />
+      )}
+    </MapContainer>
   );
 };