@opengeoweb/core 9.16.0 → 9.17.0

package/index.esm.js

@@ -1,36 +1,133 @@
 import * as React from 'react';
 import React__default, { useState, useCallback, useRef } from 'react';
 import { Grid, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styled, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, Button, ListItemIcon, Checkbox } from '@mui/material';
-import { CustomIconButton, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomTooltip, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, calculateStartSize, ToolContainerDraggable, useDebounce, dateUtils, withEggs } from '@opengeoweb/shared';
+import { CustomIconButton, SHARED_NAMESPACE, sharedTranslations, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomTooltip, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, calculateStartSize, ToolContainerDraggable, useDebounce, dateUtils, withEggs, ErrorBoundary } from '@opengeoweb/shared';
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, List as List$1, ExitDomain, Info, Search, MyLocation, Close, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { useDispatch, useSelector, connect, useStore, Provider } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
 import { layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericActions, drawtoolSelectors, syncConstants, loadingIndicatorActions, IS_LEGEND_OPEN_BY_DEFAULT, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelectors, syncGroupsSelector, coreModuleConfig, routerUtils, routerModuleConfig } from '@opengeoweb/store';
-import { LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, ZoomControls, MapView, MapViewLayer, LegendDialog, registerDrawFunction, emptyGeoJSON, MapControls, publicLayers, WEBMAP_REACT_NAMESPACE, webmapReactTranslations } from '@opengeoweb/webmap-react';
+import { WEBMAP_REACT_NAMESPACE, webmapReactTranslations, LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, ZoomControls, MapView, MapViewLayer, LegendDialog, registerDrawFunction, emptyGeoJSON, MapControls, publicLayers } from '@opengeoweb/webmap-react';
+import i18n from 'i18next';
+import { useTranslation, initReactI18next, I18nextProvider } from 'react-i18next';
+import { TIMESLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, TIME_SLIDER_LEGEND_HEIGHT, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, marks as marks$1, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSlider, onsetNewDateDebounced, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/timeslider';
 import { webmapUtils, getCapabilities, WMGetServiceFromStore, LayerType, handleDateUtilsISOString, wmServiceListener, EVENT_GETCAPABILITIES_START, EVENT_GETCAPABILITIES_READY, WMLayer } from '@opengeoweb/webmap';
-import { Box as Box$1 } from '@mui/system';
-import { defaultTimeSpan, TIME_SLIDER_LEGEND_HEIGHT, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, marks as marks$1, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSlider, onsetNewDateDebounced, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/timeslider';
+import { Box as Box$1, styled as styled$1 } from '@mui/system';
 import _, { isEqual, range } from 'lodash';
 import { LayerSelectButtonConnect, LayerSelectConnect, layerSelectConfig } from '@opengeoweb/layer-select';
 import axios from 'axios';
 import * as DOMPurify from 'dompurify';
-import i18n from 'i18next';
-import { initReactI18next, I18nextProvider } from 'react-i18next';
 import { SnackbarWrapperConnect } from '@opengeoweb/snackbar';
 import { useNavigate } from 'react-router-dom';
+import * as Sentry from '@sentry/react';
 
 var en = {
-	core: "Core"
+	feature_info_title: "Click on the map for info.",
+	feature_info_no_layers: "No layers added to the map.",
+	"add-layer-popup-title": "Load WMS layer(s)",
+	"add-layer-popup-service-url": "Service URL",
+	"add-layer-popup-available-services": "Available services",
+	"add-layer-popup-available-layers": "Available layers for {{serviceName}}",
+	"add-layer-popup-reload-layers": "Reload layers from service",
+	"layermanager-baselayers-title": "Base layer",
+	"layermanager-baselayers-no-available": "No service available",
+	"layermanager-acceptance-time": "Acc Time",
+	"layermanager-dimensions-total-values": "Dimension value ({{total_dimensions}} options)",
+	"layermanager-dimension-title": "Dimension",
+	"layermanager-opacity-title": "Opacity",
+	"layermanager-opacity-tooltip-prefix": "Opacity: ",
+	"layermanager-style-title": "Style",
+	"layermanager-layer-error": "This layer could not be loaded: does not exist on the server.",
+	"layermanager-layer": "Layer",
+	"projection-title": "Projection",
+	"wms-loader-title": "Load WMS layer(s)",
+	"wms-loader-description": "Please enter a wms server, or select one from the list.",
+	"wms-loader-no-data": "No data",
+	"wms-loader-error-http": "Use https or allow Mixed Content in your browser to use this WMS service",
+	"wms-loader-error-valid-service": "Please enter a valid WMS service",
+	"wms-loader-error-valid-url": "Please enter a valid URL",
+	"actions-close": "Close"
 };
 var fi = {
-	core: "Core"
+	feature_info_title: "ei käännetty",
+	feature_info_no_layers: "ei käännetty",
+	"add-layer-popup-title": "ei käännetty",
+	"add-layer-popup-service-url": "ei käännetty",
+	"add-layer-popup-available-services": "ei käännetty",
+	"add-layer-popup-available-layers": "ei käännetty",
+	"add-layer-popup-reload-layers": "ei käännetty",
+	"layermanager-baselayers-title": "ei käännetty",
+	"layermanager-baselayers-no-available": "ei käännetty",
+	"layermanager-acceptance-time": "ei käännetty",
+	"layermanager-dimensions-total-values": "ei käännetty",
+	"layermanager-dimension-title": "ei käännetty",
+	"layermanager-opacity-title": "ei käännetty",
+	"layermanager-opacity-tooltip-prefix": "ei käännetty",
+	"layermanager-style-title": "ei käännetty",
+	"layermanager-layer-error": "ei käännetty",
+	"layermanager-layer": "ei käännetty",
+	"projection-title": "ei käännetty",
+	"wms-loader-title": "ei käännetty",
+	"wms-loader-description": "ei käännetty",
+	"wms-loader-no-data": "ei käännetty",
+	"wms-loader-error-http": "ei käännetty",
+	"wms-loader-error-valid-service": "ei käännetty",
+	"wms-loader-error-valid-url": "ei käännetty",
+	"actions-close": "ei käännetty"
 };
 var no = {
-	core: "Core"
+	feature_info_title: "ikke oversatt",
+	feature_info_no_layers: "ikke oversatt",
+	"add-layer-popup-title": "ikke oversatt",
+	"add-layer-popup-service-url": "ikke oversatt",
+	"add-layer-popup-available-services": "ikke oversatt",
+	"add-layer-popup-available-layers": "ikke oversatt",
+	"add-layer-popup-reload-layers": "ikke oversatt",
+	"layermanager-baselayers-title": "ikke oversatt",
+	"layermanager-baselayers-no-available": "ikke oversatt",
+	"layermanager-acceptance-time": "ikke oversatt",
+	"layermanager-dimensions-total-values": "ikke oversatt",
+	"layermanager-dimension-title": "ikke oversatt",
+	"layermanager-opacity-title": "ikke oversatt",
+	"layermanager-opacity-tooltip-prefix": "ikke oversatt",
+	"layermanager-style-title": "ikke oversatt",
+	"layermanager-layer-error": "ikke oversatt",
+	"layermanager-layer": "ikke oversatt",
+	"projection-title": "ikke oversatt",
+	"wms-loader-title": "ikke oversatt",
+	"wms-loader-description": "ikke oversatt",
+	"wms-loader-no-data": "ikke oversatt",
+	"wms-loader-error-http": "ikke oversatt",
+	"wms-loader-error-valid-service": "ikke oversatt",
+	"wms-loader-error-valid-url": "ikke oversatt",
+	"actions-close": "ikke oversatt"
 };
 var nl = {
-	core: "Core"
+	feature_info_title: "niet vertaald",
+	feature_info_no_layers: "niet vertaald",
+	"add-layer-popup-title": "niet vertaald",
+	"add-layer-popup-service-url": "niet vertaald",
+	"add-layer-popup-available-services": "niet vertaald",
+	"add-layer-popup-available-layers": "niet vertaald",
+	"add-layer-popup-reload-layers": "niet vertaald",
+	"layermanager-baselayers-title": "niet vertaald",
+	"layermanager-baselayers-no-available": "niet vertaald",
+	"layermanager-acceptance-time": "niet vertaald",
+	"layermanager-dimensions-total-values": "niet vertaald",
+	"layermanager-dimension-title": "niet vertaald",
+	"layermanager-opacity-title": "niet vertaald",
+	"layermanager-opacity-tooltip-prefix": "niet vertaald",
+	"layermanager-style-title": "niet vertaald",
+	"layermanager-layer-error": "niet vertaald",
+	"layermanager-layer": "niet vertaald",
+	"projection-title": "niet vertaald",
+	"wms-loader-title": "niet vertaald",
+	"wms-loader-description": "niet vertaald",
+	"wms-loader-no-data": "niet vertaald",
+	"wms-loader-error-http": "niet vertaald",
+	"wms-loader-error-valid-service": "niet vertaald",
+	"wms-loader-error-valid-url": "niet vertaald",
+	"actions-close": "niet vertaald"
 };
 var coreTranslations = {
 	en: en,
@@ -2281,6 +2378,49 @@ $$7({ target: 'Array', proto: true, forced: String(test$1) === String(test$1.rev
   }
 });
 
+const CORE_NAMESPACE = 'core';
+const initCoreReactI18n = () => {
+  i18n.use(initReactI18next).init({
+    lng: 'en',
+    fallbackLng: 'en',
+    ns: CORE_NAMESPACE,
+    interpolation: {
+      escapeValue: false
+    },
+    resources: {
+      en: {
+        [CORE_NAMESPACE]: coreTranslations.en,
+        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.en,
+        [SHARED_NAMESPACE]: sharedTranslations.en,
+        [TIMESLIDER_NAMESPACE]: timesliderTranslations.en
+      },
+      fi: {
+        [CORE_NAMESPACE]: coreTranslations.fi,
+        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.fi,
+        [SHARED_NAMESPACE]: sharedTranslations.fi,
+        [TIMESLIDER_NAMESPACE]: timesliderTranslations.fi
+      },
+      no: {
+        [CORE_NAMESPACE]: coreTranslations.no,
+        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.no,
+        [SHARED_NAMESPACE]: sharedTranslations.no,
+        [TIMESLIDER_NAMESPACE]: timesliderTranslations.no
+      },
+      nl: {
+        [CORE_NAMESPACE]: coreTranslations.nl,
+        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.nl,
+        [SHARED_NAMESPACE]: sharedTranslations.nl,
+        [TIMESLIDER_NAMESPACE]: timesliderTranslations.nl
+      }
+    }
+  });
+};
+const ns = [CORE_NAMESPACE, TIMESLIDER_NAMESPACE];
+const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, Object.assign({
+  ns
+}, params));
+const useCoreTranslation = () => useTranslation(ns);
+
 const DimensionSelectValue = ({
   isEnabled,
   tooltip,
@@ -2294,6 +2434,9 @@ const DimensionSelectValue = ({
   skipLocalStyling
 }) => {
   var _a;
+  const {
+    t
+  } = useCoreTranslation();
   const dimensionValuesRaw = (_a = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _a === void 0 ? void 0 : _a.split(',').slice(0, 100).reverse();
   if (!(selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.name) || !(dimensionValuesRaw === null || dimensionValuesRaw === void 0 ? void 0 : dimensionValuesRaw.length)) {
     return null;
@@ -2341,7 +2484,9 @@ const DimensionSelectValue = ({
     skipLocalStyling: skipLocalStyling
   }, /*#__PURE__*/React__default.createElement(MenuItem, {
     disabled: true
-  }, "Dimension value (", dimensionValues.length, " options)"), dimensionValues.map(dimensionValue => {
+  }, t('layermanager-dimensions-total-values', {
+    total_dimensions: dimensionValues.length
+  })), dimensionValues.map(dimensionValue => {
     var _a;
     return /*#__PURE__*/React__default.createElement(MenuItem, {
       key: dimensionValue,
@@ -2380,6 +2525,9 @@ const DimensionSelectName = ({
   dimensionNames,
   skipLocalStyling
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   return /*#__PURE__*/React__default.createElement(TooltipSelect, {
     disableUnderline: true,
     tooltip: tooltip,
@@ -2406,7 +2554,7 @@ const DimensionSelectName = ({
     skipLocalStyling: skipLocalStyling
   }, /*#__PURE__*/React__default.createElement(MenuItem, {
     disabled: true
-  }, "Dimension"), dimensionNames.map(name => ( /*#__PURE__*/React__default.createElement(MenuItem, {
+  }, t('layermanager-dimension-title')), dimensionNames.map(name => ( /*#__PURE__*/React__default.createElement(MenuItem, {
     key: name,
     value: name
   }, (nameMappings === null || nameMappings === void 0 ? void 0 : nameMappings[name]) || name))));
@@ -2516,6 +2664,9 @@ const RenderLayers = ({
   skipLocalStyling
 }) => {
   var _a;
+  const {
+    t
+  } = useCoreTranslation();
   if (!_layers || !_layers.length) {
     return /*#__PURE__*/React.createElement(Box, {
       sx: {
@@ -2531,7 +2682,7 @@ const RenderLayers = ({
         color: 'geowebColors.layerManager.tableRowDefaultText.rgba',
         fontWeight: 500
       }
-    }, "No service available"));
+    }, t('layermanager-baselayers-no-available')));
   }
   const selectLayer = event => {
     event.stopPropagation();
@@ -2564,7 +2715,7 @@ const RenderLayers = ({
     renderValue: value => extendedLayers.find(layer => layer.name === value).title
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Layer"), extendedLayers.map((layerFromServiceLayers, currentIndex) => ( /*#__PURE__*/React.createElement(MenuItem, {
+  }, t('layermanager-layer')), extendedLayers.map((layerFromServiceLayers, currentIndex) => ( /*#__PURE__*/React.createElement(MenuItem, {
     key: layerFromServiceLayers.name,
     value: layerFromServiceLayers.name,
     disabled: !layerFromServiceLayers.leaf,
@@ -2608,8 +2759,11 @@ const OpacitySelect = ({
   currentOpacity,
   onLayerChangeOpacity,
   isEnabled: _isEnabled = true,
-  tooltipPrefix: _tooltipPrefix = 'Opacity: '
+  tooltipPrefix: _tooltipPrefix = translateKeyOutsideComponents('layermanager-opacity-tooltip-prefix')
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   const [anchorEl, setAnchorEl] = React.useState(null);
   const isOpen = Boolean(anchorEl);
   const theme = useTheme();
@@ -2695,7 +2849,7 @@ const OpacitySelect = ({
     }, theme.palette.geowebColors.layerManager.opacitySelect.popper)
   }, /*#__PURE__*/React.createElement(Box, {
     sx: sliderHeaderStyle
-  }, "Opacity"), /*#__PURE__*/React.createElement(CustomSlider, {
+  }, t('layermanager-opacity-title')), /*#__PURE__*/React.createElement(CustomSlider, {
     "data-testid": "opacitySlider",
     orientation: "vertical",
     value: currentOpacity,
@@ -2853,6 +3007,9 @@ const RenderStyles = ({
   skipLocalStyling
 }) => {
   var _a;
+  const {
+    t
+  } = useCoreTranslation();
   const styles = [{
     title: 'default',
     name: 'default',
@@ -2891,7 +3048,7 @@ const RenderStyles = ({
     skipLocalStyling: skipLocalStyling
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Style"), styles.map(styleFromlayer => ( /*#__PURE__*/React.createElement(MenuItem, {
+  }, t('layermanager-style-title')), styles.map(styleFromlayer => ( /*#__PURE__*/React.createElement(MenuItem, {
     key: styleFromlayer.name,
     value: styleFromlayer.name
   }, styleFromlayer.title))));
@@ -3113,13 +3270,17 @@ const AcceptanceTime = ({
   tooltipTitle,
   skipLocalStyling
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   const onChange = acceptanceTimeRaw => {
     const acceptanceTime = acceptanceTimeRaw === 'off' ? undefined : Number(acceptanceTimeRaw);
     onChangeAcceptanceTime(acceptanceTime);
   };
   const layerAcceptanceTime = acceptanceTimeInMinutes === undefined ? 'off' : acceptanceTimeInMinutes.toString();
+  const title = t('layermanager-acceptance-time');
   return /*#__PURE__*/React__default.createElement(TooltipSelect, {
-    tooltip: tooltipTitle !== null && tooltipTitle !== void 0 ? tooltipTitle : 'Acc Time',
+    tooltip: tooltipTitle !== null && tooltipTitle !== void 0 ? tooltipTitle : title,
     isEnabled: _isEnabled,
     value: layerAcceptanceTime,
     onChange: event => {
@@ -3136,7 +3297,7 @@ const AcceptanceTime = ({
     skipLocalStyling: skipLocalStyling
   }, /*#__PURE__*/React__default.createElement(MenuItem, {
     disabled: true
-  }, "Acc Time"), acceptanceTimes.map(accTime => ( /*#__PURE__*/React__default.createElement(MenuItem, {
+  }, title), acceptanceTimes.map(accTime => ( /*#__PURE__*/React__default.createElement(MenuItem, {
     key: accTime.text,
     value: accTime.value
   }, accTime.text))));
@@ -3405,6 +3566,9 @@ const LayerRowUnstyled = ({
   layerLoadDurationLayout,
   className
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   const onClickRow = () => _onLayerRowClick(layerId);
   const changeEnable = event => {
     event.stopPropagation();
@@ -3514,7 +3678,7 @@ const LayerRowUnstyled = ({
       item: true,
       className: columnClasses.column7
     }, /*#__PURE__*/React__default.createElement(AlertBanner, {
-      title: "This layer could not be loaded: does not exist on the server.",
+      title: t('layermanager-layer-error'),
       isCompact: true
     }))) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
@@ -3599,6 +3763,9 @@ const Accordion = ({
   LeftButtons,
   LoadDuration
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   return /*#__PURE__*/React__default.createElement(CustomAccordion, {
     className: "medium-layermanager",
     defaultExpanded: false,
@@ -3632,7 +3799,7 @@ const Accordion = ({
     item: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, "Style"), Styles), /*#__PURE__*/React__default.createElement(Grid, {
+  }, t('layermanager-style-title')), Styles), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
     sx: {
@@ -3642,12 +3809,12 @@ const Accordion = ({
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, "Opacity"), Opacity), /*#__PURE__*/React__default.createElement(Grid, {
+  }, t('layermanager-opacity-title')), Opacity), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, "Acc Time"), Acceptance), /*#__PURE__*/React__default.createElement(Grid, {
+  }, t('layermanager-acceptance-time')), Acceptance), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
     flexDirection: "column"
@@ -4872,8 +5039,11 @@ const BaseLayers = ({
   tooltipPrefix: _tooltipPrefix = 'Layer: '
 }) => {
   var _a;
+  const {
+    t
+  } = useCoreTranslation();
   if (!availableBaseLayers || !availableBaseLayers.length) {
-    return /*#__PURE__*/React.createElement("div", null, "No service available");
+    return /*#__PURE__*/React.createElement("div", null, t('layermanager-baselayers-no-available'));
   }
   const selectedBaseLayerId = typeof selectedBaseLayers[0] !== 'undefined' ? selectedBaseLayers[0].id : '';
   const list = availableBaseLayers.map(layer => ({
@@ -4906,7 +5076,7 @@ const BaseLayers = ({
     IconComponent: icon
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Base layer"), availableBaseLayers.map(baseLayer => ( /*#__PURE__*/React.createElement(MenuItem, {
+  }, t('layermanager-baselayers-title')), availableBaseLayers.map(baseLayer => ( /*#__PURE__*/React.createElement(MenuItem, {
     key: baseLayer.id,
     value: baseLayer.id
   }, baseLayer.name)))));
@@ -5440,6 +5610,9 @@ const WMSServerList = ({
   handleChangeService,
   service: activeService
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   const handleListItemClick = (event, service) => {
     handleChangeService(service);
   };
@@ -5456,7 +5629,7 @@ const WMSServerList = ({
   }, /*#__PURE__*/React.createElement(InputLabel, {
     shrink: true,
     htmlFor: "select-multiple-native"
-  }, "Available services"))), /*#__PURE__*/React.createElement(Paper, {
+  }, t('add-layer-popup-available-services')))), /*#__PURE__*/React.createElement(Paper, {
     style: {
       height: 200,
       overflow: 'auto'
@@ -5495,6 +5668,9 @@ const WMSLayerTreeHeader = ({
   serviceName,
   onClickReload
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     direction: "row",
@@ -5505,10 +5681,12 @@ const WMSLayerTreeHeader = ({
   }, /*#__PURE__*/React.createElement(InputLabel, {
     shrink: true,
     htmlFor: "select-multiple-native"
-  }, "Available layers for ", serviceName)), onClickReload && ( /*#__PURE__*/React.createElement(Grid, {
+  }, t('add-layer-popup-available-layers', {
+    serviceName
+  }))), onClickReload && ( /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React.createElement(CustomIconButton, {
-    tooltipTitle: "Reload layers from service",
+    tooltipTitle: t('add-layer-popup-reload-layers'),
     "data-testid": "reloadLayers",
     onClick: onClickReload
   }, /*#__PURE__*/React.createElement(Cached, null)))));
@@ -5519,6 +5697,9 @@ const WMSLayerTree = ({
   onClickLayer,
   highlightedLayers
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   const initialTree = {
     name: 'loading wms getcapabilities',
     leaf: true,
@@ -5568,7 +5749,7 @@ const WMSLayerTree = ({
       display: "flex"
     }, /*#__PURE__*/React.createElement(Typography, {
       variant: "body2"
-    }, "No data"))));
+    }, t('wms-loader-no-data')))));
   }
   // Base case where there exists at least one layer
   // TODO: find a better way of doing this, without using prototype
@@ -5925,6 +6106,9 @@ const AddLayersPopup = ({
   handleClose,
   layerType: _layerType = LayerType.mapLayer
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   const [serviceURL, setServiceURL] = React.useState('');
   const [services, setServices] = React.useState(_preloadedServices);
   const [activeService, setActiveService] = React.useState(_preloadedServices[0]);
@@ -5961,11 +6145,11 @@ const AddLayersPopup = ({
         setUrlError('');
         setLoading(false);
       }).catch(() => {
-        setUrlError('Please enter a valid WMS service');
+        setUrlError(t('wms-loader-error-valid-service'));
         setLoading(false);
       });
     } else {
-      setUrlError('Please enter a valid URL');
+      setUrlError(t('wms-loader-error-valid-url'));
       setLoading(false);
     }
   };
@@ -5984,7 +6168,7 @@ const AddLayersPopup = ({
     "data-testid": "addLayersPopup"
   }, /*#__PURE__*/React.createElement(DialogTitle, {
     id: "form-dialog-title"
-  }, "Load WMS layer(s)"), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(DialogContentText, null, "Please enter a wms server, or select one from the list."), /*#__PURE__*/React.createElement(Box, {
+  }, t('add-layer-popup-title')), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(DialogContentText, null, t('wms-loader-description')), /*#__PURE__*/React.createElement(Box, {
     m: 2
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -5996,7 +6180,7 @@ const AddLayersPopup = ({
   }, /*#__PURE__*/React.createElement(TextField, {
     margin: "dense",
     id: "serviceurl",
-    label: "Service URL",
+    label: t('add-layer-popup-service-url'),
     value: serviceURL,
     type: "url",
     onChange: event => {
@@ -6054,7 +6238,7 @@ const AddLayersPopup = ({
   })))))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
     onClick: handleClose,
     color: "primary"
-  }, "Close")));
+  }, t('actions-close'))));
 };
 
 const styles$2 = {
@@ -6298,12 +6482,16 @@ const ProjectionSelect = ({
   currentProjection,
   onChangeProjection
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   const selectProjection = newProj => {
     const newProjDetails = availableProjections.find(proj => proj.value === newProj);
     onChangeProjection(newProjDetails);
   };
   const index = availableProjections.findIndex(projection => projection.value === currentProjection);
   const currentProjectionObject = availableProjections.find(projection => projection.value === currentProjection);
+  const title = t('projection-title');
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     className: "setProjection-column",
@@ -6335,7 +6523,7 @@ const ProjectionSelect = ({
     SelectDisplayProps: {
       'aria-label': 'projectionSelect'
     },
-    tooltip: `Projection: ${currentProjectionObject === null || currentProjectionObject === void 0 ? void 0 : currentProjectionObject.name}`,
+    tooltip: `${title}: ${currentProjectionObject === null || currentProjectionObject === void 0 ? void 0 : currentProjectionObject.name}`,
     isEnabled: true,
     style: {
       maxWidth: '100%'
@@ -6351,7 +6539,7 @@ const ProjectionSelect = ({
     requiresCtrlToChange: true
   }, /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, "Projection"), availableProjections.map(projection => ( /*#__PURE__*/React.createElement(MenuItem, {
+  }, title), availableProjections.map(projection => ( /*#__PURE__*/React.createElement(MenuItem, {
     key: projection.name,
     value: projection.value
   }, projection.name)))))));
@@ -8124,6 +8312,9 @@ const GetFeatureInfoDialog = ({
   source: _source = 'app',
   mapPinLocation
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   /* Ref and state for maplocation */
   const mapLocationWasChanged = React__default.useRef(false);
   const [isInitialMapLocationChanged, setInitialMapLocationIsChanged] = React__default.useState(false);
@@ -8268,13 +8459,13 @@ const GetFeatureInfoDialog = ({
     sx: {
       padding: '10px'
     }
-  }, "Click on the map for info.")), !hasLayers && ( /*#__PURE__*/React__default.createElement(Typography, {
+  }, t('feature_info_title'))), !hasLayers && ( /*#__PURE__*/React__default.createElement(Typography, {
     "data-testid": "NoLayers",
     variant: "subtitle1",
     sx: {
       padding: '10px'
     }
-  }, "No layers added to the map."))));
+  }, t('feature_info_no_layers')))));
 };
 
 /* *
@@ -10712,51 +10903,6 @@ var testLayers = /*#__PURE__*/Object.freeze({
   simplePolygonGeoJSON: simplePolygonGeoJSON
 });
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
-const CORE_NAMESPACE = 'core';
-const initCoreReactI18n = () => {
-  i18n.use(initReactI18next).init({
-    lng: 'en',
-    ns: CORE_NAMESPACE,
-    interpolation: {
-      escapeValue: false
-    },
-    resources: {
-      en: {
-        [CORE_NAMESPACE]: coreTranslations.en,
-        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.en
-      },
-      fi: {
-        [CORE_NAMESPACE]: coreTranslations.fi,
-        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.fi
-      },
-      no: {
-        [CORE_NAMESPACE]: coreTranslations.no,
-        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.no
-      },
-      nl: {
-        [CORE_NAMESPACE]: coreTranslations.nl,
-        [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.nl
-      }
-    }
-  });
-};
-
 /**
  * A Provider component which provides the GeoWeb theme
  * @param children
@@ -10844,4 +10990,46 @@ const RouterWrapperConnect = withEggs([routerModuleConfig])(props => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavigateSetter, null), props.children);
 });
 
-export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, RouterWrapperConnect, SearchControlButtonConnect, SearchControlConnect, SearchDialog, SyncGroupViewerConnect, TimeSliderConnect, ZoomControlConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, testLayers, useFetchServices, useUpdateTimeSpan, useUpdateTimestep };
+const Circle = styled$1('div')(({
+  isRecording
+}) => ({
+  width: '70%',
+  height: '70%',
+  borderRadius: '50%',
+  backgroundColor: isRecording ? 'red' : 'gray',
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+}));
+const SentryRecordButton = () => {
+  const [isRecording, setIsRecording] = React__default.useState(false);
+  const replay = Sentry.getReplay();
+  const toggleRecord = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!isRecording) {
+      replay === null || replay === void 0 ? void 0 : replay.start();
+      setIsRecording(true);
+    } else {
+      setIsRecording(false);
+      yield replay === null || replay === void 0 ? void 0 : replay.stop();
+    }
+  });
+  return /*#__PURE__*/React__default.createElement(ErrorBoundary, {
+    handlePromiseRejections: true,
+    displayOnTop: true
+  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
+    title: isRecording ? 'Stop Recording' : 'Start Recording'
+  }, /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    variant: "flat",
+    onClick: toggleRecord,
+    "data-testid": "sentryRecordButton",
+    sx: {
+      margin: '10px',
+      border: 'solid 1px gray'
+    }
+  }, /*#__PURE__*/React__default.createElement(Circle, {
+    isRecording: isRecording
+  }))));
+};
+
+export { CORE_NAMESPACE, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, RouterWrapperConnect, SearchControlButtonConnect, SearchControlConnect, SearchDialog, SentryRecordButton, SyncGroupViewerConnect, ThemeWrapperWithModules, TimeSliderConnect, ZoomControlConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, testLayers, translateKeyOutsideComponents, useFetchServices, useUpdateTimeSpan, useUpdateTimestep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "9.16.0",
+  "version": "9.17.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -28,7 +28,8 @@
     "react-draggable": "^4.4.6",
     "i18next": "^23.7.11",
     "react-i18next": "^13.5.0",
-    "dompurify": "^3.0.6"
+    "dompurify": "^3.0.6",
+    "@sentry/react": "^7.109.0"
   },
   "peerDependencies": {
     "react": "18"

package/src/index.d.ts

@@ -1,3 +1,4 @@
 import coreTranslations from '../locales/core.json';
 export * from './lib';
+export { translateKeyOutsideComponents, CORE_NAMESPACE, } from './lib/utils/i18n';
 export { coreTranslations };

package/src/lib/components/LanguageSelect/DemoLanguages.stories.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import '../../utils/languagesService';
+import './languagesService';
 declare const _default: {
     title: string;
 };

package/src/lib/{utils → components/LanguageSelect}/languagesService.d.ts

@@ -24,6 +24,7 @@ export declare const outsideComponentTranslations: {
     deleteOK: string;
     restore: string;
 };
+export declare const translateKeyOutsideComponents: (key: string, params?: Record<string, string | number> | undefined) => string;
 interface Languages {
     language: string;
     code: string;

package/src/lib/components/Providers/Providers.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Theme } from '@mui/material';
+import { ThemeProviderProps } from '@opengeoweb/theme';
 import { Store } from '@reduxjs/toolkit';
 interface CoreThemeProviderProps {
     children?: React.ReactNode;
@@ -11,6 +12,7 @@ interface CoreThemeProviderProps {
  * @returns
  */
 export declare const CoreThemeProvider: React.FC<CoreThemeProviderProps>;
+export declare const ThemeWrapperWithModules: React.FC<ThemeProviderProps>;
 interface CoreThemeStoreProviderProps extends CoreThemeProviderProps {
     store: Store;
 }

package/src/lib/components/SentryRecordButton/SentryRecordButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SentryRecordButton: React.FC;
+export default SentryRecordButton;

package/src/lib/components/SentryRecordButton/SentryRecordButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/components/SentryRecordButton/index.d.ts

@@ -0,0 +1 @@
+export { default as SentryRecordButton } from './SentryRecordButton';

package/src/lib/index.d.ts

@@ -18,3 +18,4 @@ export * from './components/RouterWrapper';
 export * from './components/Search';
 export * from './components/TimeSliderConnect';
 export * from './components/LayerInfoConnect';
+export * from './components/SentryRecordButton';

package/src/lib/utils/i18n.d.ts

@@ -1,2 +1,6 @@
+import i18n from 'i18next';
+import { UseTranslationResponse } from 'react-i18next';
 export declare const CORE_NAMESPACE = "core";
 export declare const initCoreReactI18n: () => void;
+export declare const translateKeyOutsideComponents: (key: string, params?: Record<string, string | number> | undefined) => string;
+export declare const useCoreTranslation: () => UseTranslationResponse<typeof CORE_NAMESPACE, typeof i18n>;