@opengeoweb/core 9.15.0 → 9.17.0

package/index.esm.js

@@ -1,24 +1,140 @@
 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 } 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, useTranslation } from 'react-i18next';
 import { SnackbarWrapperConnect } from '@opengeoweb/snackbar';
 import { useNavigate } from 'react-router-dom';
+import * as Sentry from '@sentry/react';
+
+var en = {
+	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 = {
+	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 = {
+	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 = {
+	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,
+	fi: fi,
+	no: no,
+	nl: nl
+};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1896,7 +2012,7 @@ const layerManagerStyle = {
       }
     },
     '.header-layermanager': {
-      '.header-left, .header-title': {
+      '.header-left': {
         display: 'none'
       },
       '&>div': {
@@ -2262,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,
@@ -2275,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;
@@ -2322,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,
@@ -2361,6 +2525,9 @@ const DimensionSelectName = ({
   dimensionNames,
   skipLocalStyling
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   return /*#__PURE__*/React__default.createElement(TooltipSelect, {
     disableUnderline: true,
     tooltip: tooltip,
@@ -2387,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))));
@@ -2497,6 +2664,9 @@ const RenderLayers = ({
   skipLocalStyling
 }) => {
   var _a;
+  const {
+    t
+  } = useCoreTranslation();
   if (!_layers || !_layers.length) {
     return /*#__PURE__*/React.createElement(Box, {
       sx: {
@@ -2512,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();
@@ -2545,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,
@@ -2589,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();
@@ -2676,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,
@@ -2834,6 +3007,9 @@ const RenderStyles = ({
   skipLocalStyling
 }) => {
   var _a;
+  const {
+    t
+  } = useCoreTranslation();
   const styles = [{
     title: 'default',
     name: 'default',
@@ -2872,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))));
@@ -3094,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 => {
@@ -3117,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))));
@@ -3386,6 +3566,9 @@ const LayerRowUnstyled = ({
   layerLoadDurationLayout,
   className
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   const onClickRow = () => _onLayerRowClick(layerId);
   const changeEnable = event => {
     event.stopPropagation();
@@ -3495,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,
@@ -3580,6 +3763,9 @@ const Accordion = ({
   LeftButtons,
   LoadDuration
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   return /*#__PURE__*/React__default.createElement(CustomAccordion, {
     className: "medium-layermanager",
     defaultExpanded: false,
@@ -3613,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: {
@@ -3623,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"
@@ -4853,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 => ({
@@ -4887,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)))));
@@ -5421,6 +5610,9 @@ const WMSServerList = ({
   handleChangeService,
   service: activeService
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   const handleListItemClick = (event, service) => {
     handleChangeService(service);
   };
@@ -5437,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'
@@ -5476,6 +5668,9 @@ const WMSLayerTreeHeader = ({
   serviceName,
   onClickReload
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     direction: "row",
@@ -5486,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)))));
@@ -5500,6 +5697,9 @@ const WMSLayerTree = ({
   onClickLayer,
   highlightedLayers
 }) => {
+  const {
+    t
+  } = useCoreTranslation();
   const initialTree = {
     name: 'loading wms getcapabilities',
     leaf: true,
@@ -5549,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
@@ -5883,10 +6083,10 @@ const preloadedDefaultBaseServices = baseServices;
 const preloadedDefaultMapServices = services;
 
 var defaultConfigurations = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	availableDefaultBaseLayers: availableDefaultBaseLayers,
-	preloadedDefaultBaseServices: preloadedDefaultBaseServices,
-	preloadedDefaultMapServices: preloadedDefaultMapServices
+  __proto__: null,
+  availableDefaultBaseLayers: availableDefaultBaseLayers,
+  preloadedDefaultBaseServices: preloadedDefaultBaseServices,
+  preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
 const validateServiceUrl = url => {
@@ -5906,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]);
@@ -5942,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);
     }
   };
@@ -5965,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,
@@ -5977,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 => {
@@ -6035,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 = {
@@ -6279,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",
@@ -6316,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%'
@@ -6332,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)))))));
@@ -8105,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);
@@ -8249,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')))));
 };
 
 /* *
@@ -10680,79 +10890,19 @@ const simplePolygonGeoJSON = {
 };
 
 var testLayers = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	baseLayer: baseLayer,
-	baseLayerGrey: baseLayerGrey,
-	baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL,
-	baseLayerArcGisCanvas: baseLayerArcGisCanvas,
-	baseLayerWorldMap: baseLayerWorldMap,
-	baseLayerArcGisSat: baseLayerArcGisSat,
-	overLayer: overLayer,
-	overLayer2: overLayer2,
-	radarLayer: radarLayer,
-	simplePolygonGeoJSON: simplePolygonGeoJSON
+  __proto__: null,
+  baseLayer: baseLayer,
+  baseLayerGrey: baseLayerGrey,
+  baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL,
+  baseLayerArcGisCanvas: baseLayerArcGisCanvas,
+  baseLayerWorldMap: baseLayerWorldMap,
+  baseLayerArcGisSat: baseLayerArcGisSat,
+  overLayer: overLayer,
+  overLayer2: overLayer2,
+  radarLayer: radarLayer,
+  simplePolygonGeoJSON: simplePolygonGeoJSON
 });
 
-var en = {
-	core: "Core"
-};
-var fi = {
-	core: "Core"
-};
-var no = {
-	core: "Core"
-};
-var nl = {
-	core: "Core"
-};
-var coreTranslations = {
-	en: en,
-	fi: fi,
-	no: no,
-	nl: nl
-};
-
-/* *
- * 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: coreTranslations.en
-      },
-      fi: {
-        core: coreTranslations.fi
-      },
-      no: {
-        core: coreTranslations.no
-      },
-      nl: {
-        core: coreTranslations.nl
-      }
-    }
-  });
-};
-
 /**
  * A Provider component which provides the GeoWeb theme
  * @param children
@@ -10767,9 +10917,9 @@ const CoreThemeProvider = ({
 const ThemeWrapperWithModules = withEggs([...coreModuleConfig, layerSelectConfig])(({
   theme,
   children
-}) => ( /*#__PURE__*/React__default.createElement(CoreI18nProvider, null, /*#__PURE__*/React__default.createElement(CoreThemeProvider, {
+}) => ( /*#__PURE__*/React__default.createElement(CoreThemeProvider, {
   theme: theme
-}, children))));
+}, children)));
 /**
  * A Provider component which provides the GeoWeb theme and store for the core.
  * Note: Should only be used with core components, as the provided store is only for core.
@@ -10780,25 +10930,11 @@ const CoreThemeStoreProvider = ({
   children,
   theme: _theme2 = lightTheme,
   store
-}) => ( /*#__PURE__*/React__default.createElement(CoreI18nProvider, null, /*#__PURE__*/React__default.createElement(Provider, {
+}) => ( /*#__PURE__*/React__default.createElement(Provider, {
   store: store
 }, /*#__PURE__*/React__default.createElement(ThemeWrapperWithModules, {
   theme: _theme2
-}, /*#__PURE__*/React__default.createElement(SnackbarWrapperConnect, null, children)))));
-const CoreTranslationsWrapper = ({
-  children
-}) => {
-  const {
-    i18n
-  } = useTranslation(CORE_NAMESPACE);
-  React__default.useEffect(() => {
-    i18n.addResourceBundle('en', CORE_NAMESPACE, coreTranslations.en);
-    i18n.addResourceBundle('fi', CORE_NAMESPACE, coreTranslations.fi);
-    i18n.addResourceBundle('no', CORE_NAMESPACE, coreTranslations.no);
-    i18n.addResourceBundle('nl', CORE_NAMESPACE, coreTranslations.nl);
-  }, [i18n]);
-  return children;
-};
+}, /*#__PURE__*/React__default.createElement(SnackbarWrapperConnect, null, children))));
 const CoreI18nProvider = ({
   children
 }) => {
@@ -10807,6 +10943,10 @@ const CoreI18nProvider = ({
     i18n: i18n
   }, children);
 };
+// used for react stories/tests
+const DemoWrapper = props => ( /*#__PURE__*/React__default.createElement(CoreI18nProvider, null, /*#__PURE__*/React__default.createElement(CoreThemeProvider, Object.assign({}, props))));
+// used for redux stories/tests
+const DemoWrapperConnect = props => ( /*#__PURE__*/React__default.createElement(CoreI18nProvider, null, /*#__PURE__*/React__default.createElement(CoreThemeStoreProvider, Object.assign({}, props))));
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -10850,4 +10990,46 @@ const RouterWrapperConnect = withEggs([routerModuleConfig])(props => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavigateSetter, null), props.children);
 });
 
-export { ConfigurableMapConnect, CoreI18nProvider, CoreThemeProvider, CoreThemeStoreProvider, CoreTranslationsWrapper, 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, 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.15.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 +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/LayerManager/LayerManager.stories.d.ts

@@ -11,7 +11,7 @@ export declare const LayerManagerLightTheme: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
 export declare const DockedLayerManagerLightTheme: {
     (): React.ReactElement;
@@ -21,11 +21,11 @@ export declare const DockedLayerManagerLightTheme: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
 export declare const LayerManagerLightThemeSmall: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const LayerManagerLightThemeMedium: {
     (): React.ReactElement;
@@ -35,7 +35,7 @@ export declare const LayerManagerLightThemeMedium: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
 export declare const LayerManagerDarkTheme: {
     (): React.ReactElement;
@@ -45,7 +45,7 @@ export declare const LayerManagerDarkTheme: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
 export declare const DockedLayerManagerDarkTheme: {
     (): React.ReactElement;
@@ -55,11 +55,11 @@ export declare const DockedLayerManagerDarkTheme: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
 export declare const LayerManagerDarkThemeSmall: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const LayerManagerDarkThemeMedium: {
     (): React.ReactElement;
@@ -69,14 +69,14 @@ export declare const LayerManagerDarkThemeMedium: {
             link: string;
         }[];
     };
-    storyName: string;
+    tags: string[];
 };
 export declare const LayerManagerLoadingState: () => React.ReactElement;
 export declare const LayerManagerWithErrorLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const LayerManagerWithErrorDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };

package/src/lib/components/LayerManager/LayerManagerUtils.d.ts

@@ -90,7 +90,7 @@ export declare const layerManagerStyle: {
             };
         };
         '.header-layermanager': {
-            '.header-left, .header-title': {
+            '.header-left': {
                 display: string;
             };
             '&>div': {

package/src/lib/components/MapViewConnect/MapViewConnect.MapPin.stories.d.ts

@@ -6,10 +6,10 @@ declare const _default: {
 export default _default;
 export declare const SetMapPinAction: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const SetMapPinActionDisabled: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const ToggleMapPinAction: () => React.ReactElement;

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

@@ -1,19 +1,18 @@
 import React from 'react';
 import { Theme } from '@mui/material';
+import { ThemeProviderProps } from '@opengeoweb/theme';
 import { Store } from '@reduxjs/toolkit';
 interface CoreThemeProviderProps {
     children?: React.ReactNode;
     theme?: Theme;
 }
-interface CoreTranslationWrapperProps {
-    children?: React.ReactNode;
-}
 /**
  * A Provider component which provides the GeoWeb theme
  * @param children
  * @returns
  */
 export declare const CoreThemeProvider: React.FC<CoreThemeProviderProps>;
+export declare const ThemeWrapperWithModules: React.FC<ThemeProviderProps>;
 interface CoreThemeStoreProviderProps extends CoreThemeProviderProps {
     store: Store;
 }
@@ -24,6 +23,6 @@ interface CoreThemeStoreProviderProps extends CoreThemeProviderProps {
  * @returns
  */
 export declare const CoreThemeStoreProvider: React.FC<CoreThemeStoreProviderProps>;
-export declare const CoreTranslationsWrapper: React.FC<CoreTranslationWrapperProps>;
-export declare const CoreI18nProvider: React.FC<CoreTranslationWrapperProps>;
+export declare const DemoWrapper: React.FC<CoreThemeProviderProps>;
+export declare const DemoWrapperConnect: React.FC<CoreThemeStoreProviderProps>;
 export {};

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/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>;