@opengeoweb/layer-select 14.3.0 → 14.5.0

package/index.esm.js

@@ -1,21 +1,20 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
-import React__default from 'react';
+import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { CustomIconButton, FilterOption, ToolContainerDraggable, CustomAccordion, CustomToggleButton, CustomTooltip, SearchHighlight, SearchField, AlertBanner, ToggleMenu, CustomDialog, sessionStorageProvider } from '@opengeoweb/shared';
-import { Filter, LayersAdd, Add, Cached, Edit, Visibility, Delete, MeteoGate, Copy } from '@opengeoweb/theme';
+import { CustomIconButton, FilterOption, ToolContainerDraggable, CustomAccordion, CustomTooltip, SearchHighlight, SearchField, CustomToggleButton, AlertBanner, ToggleMenu, CustomDialog, sessionStorageProvider } from '@opengeoweb/shared';
 import { uiTypes, serviceActions, selectorMemoizationOptions, serviceSelectors, uiActions, getUserAddedServices, setUserAddedServices, layerActions, uiSelectors, layerSelectors, mapListener, serviceListener, layersListener, openlayersListener, uiReducer, layerReducer, serviceReducer, mapReducer, useSetupDialog, mapSelectors, layerTypes, mapEnums } from '@opengeoweb/store';
+import { Filter, ArrowDropDownDown, LayersAdd, MeteoGate, Add, Cached, Edit, Visibility, Delete, Copy } from '@opengeoweb/theme';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, isAnyOf, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { compact, countBy, partition } from 'lodash';
 import { snackbarListener, snackbarReducer, snackbarTypes, snackbarActions } from '@opengeoweb/snackbar';
-import { Switch, Grid, List, Box, Typography, useTheme, Backdrop, CircularProgress, Button, ListItem, ListItemText, LinearProgress, InputAdornment } from '@mui/material';
+import { Switch, Grid, List, ToggleButtonGroup, ToggleButton, Box, Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Typography, useTheme, Backdrop, CircularProgress, Button, ListItem, ListItemText, LinearProgress, InputAdornment } from '@mui/material';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 import { FixedSizeList } from 'react-window';
 import { getDimensionsList, LayerInfoButton, clearImageCacheForAllMaps } from '@opengeoweb/webmap-react';
 import { LayerType, webmapUtils, getWMSServiceId, queryWMSServiceInfo, queryWMSLayers, invalidateWMSGetCapabilities } from '@opengeoweb/webmap';
-import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
 import { useFormContext } from 'react-hook-form';
+import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
 
 var en = {
 	"layer-select": "Layer Select",
@@ -52,7 +51,9 @@ var en = {
 	"service-abstracts-label": "Abstracts",
 	"service-successfully-updated": "Service \"{{serviceName}}\" has been succesfully updated",
 	"unable-to-update-service": "Unable to update service, reason: \"{{message}}\"",
-	"service-has-been-deleted": "Service \"{{serviceName}}\" has been deleted"
+	"service-has-been-deleted": "Service \"{{serviceName}}\" has been deleted",
+	"add-to-all-maps": "Add to all maps",
+	"remove-from-all-maps": "Remove from all maps"
 };
 var fi = {
 	"layer-select": "Layer Select",
@@ -89,7 +90,9 @@ var fi = {
 	"service-abstracts-label": "Tiivistelmä",
 	"service-successfully-updated": "Palvelu \"{{serviceName}}\"  päivitetty onnistuneesti",
 	"unable-to-update-service": "Palvelun päivitys epäonnistui. Syy: \"{{message}}\"",
-	"service-has-been-deleted": "Palvelu \"{{serviceName}}\" poistettu"
+	"service-has-been-deleted": "Palvelu \"{{serviceName}}\" poistettu",
+	"add-to-all-maps": "Lisää kaikkiin karttoihin",
+	"remove-from-all-maps": "Poista kaikista kartoista"
 };
 var no = {
 	"layer-select": "Datavelger",
@@ -126,7 +129,9 @@ var no = {
 	"service-abstracts-label": "Sammendrag",
 	"service-successfully-updated": "Tjeneste \"{{serviceName}}\" har blitt oppdatert",
 	"unable-to-update-service": "Kan ikke oppdatere tjeneste, grunn: \"{{message}}\"",
-	"service-has-been-deleted": "Tjeneste \"{{serviceName}}\" har blitt slettet"
+	"service-has-been-deleted": "Tjeneste \"{{serviceName}}\" har blitt slettet",
+	"add-to-all-maps": "Legg til i alle kart",
+	"remove-from-all-maps": "Fjern fra alle kart"
 };
 var nl = {
 	"layer-select": "Layer Select",
@@ -163,7 +168,9 @@ var nl = {
 	"service-abstracts-label": "Beschrijving",
 	"service-successfully-updated": "Service \"{{serviceName}}\" is succesvol bijgewerkt",
 	"unable-to-update-service": "Bijwerken service niet mogelijk, reden: \"{{message}}\"",
-	"service-has-been-deleted": "Service \"{{serviceName}}\" is verwijderd"
+	"service-has-been-deleted": "Service \"{{serviceName}}\" is verwijderd",
+	"add-to-all-maps": "Toevoegen aan alle kaarten",
+	"remove-from-all-maps": "Verwijderen van alle kaarten"
 };
 var layerSelectTranslations = {
 	en: en,
@@ -215,11 +222,11 @@ var filterLayersFromService = function filterLayersFromService(serviceId, servic
   var searchStringArray = searchString.split(' ');
   return mapStoreService.layers.filter(function (layer) {
     return searchStringArray.every(function (search) {
-      var _layer$name, _layer$title, _layer$abstract;
+      var _layer$keywords, _layer$name, _layer$title, _layer$abstract;
       var searchLowercase = search.toLowerCase();
       var layerFilterIds = layer.path.map(function (group) {
         return getFilterId('groups', group);
-      }).concat(layer.keywords.map(function (keyword) {
+      }).concat(((_layer$keywords = layer.keywords) != null ? _layer$keywords : []).map(function (keyword) {
         return getFilterId('keywords', keyword);
       }));
       var isFilterInLayer = (layerFilterIds == null ? void 0 : layerFilterIds.some(function (id) {
@@ -243,23 +250,6 @@ var isUserAddedService = function isUserAddedService(scope) {
   return scope === 'user';
 };
 
-/* *
- * 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)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
 var layerSelectFilterAdapter = createEntityAdapter();
 var layerSelectActiveServicesAdapter = createEntityAdapter({
   selectId: function selectId(service) {
@@ -486,7 +476,7 @@ var layerSelectReducer = slice.reducer,
  * */
 var useAppSelector = useSelector;
 var layerSelectStore = function layerSelectStore(store) {
-  return store && store.layerSelect ? store.layerSelect : null;
+  return store != null && store.layerSelect ? store.layerSelect : null;
 };
 /**
  * Returns search filter string
@@ -680,28 +670,6 @@ var selectors = /*#__PURE__*/Object.freeze({
   useAppSelector: useAppSelector
 });
 
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var types = /*#__PURE__*/Object.freeze({
-  __proto__: null
-});
-
 function _OverloadYield(e, d) {
   this.v = e, this.k = d;
 }
@@ -1183,11 +1151,11 @@ var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
     }));
   }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source, dialogType]);
   return jsx(CustomIconButton, {
-    variant: "tool",
-    onClick: openFilterResultsDialog,
-    isSelected: isOpenInStore,
-    id: "keywordFilterButton",
     "data-testid": "keywordFilterButton",
+    id: "keywordFilterButton",
+    isSelected: isOpenInStore,
+    onClick: openFilterResultsDialog,
+    variant: "tool",
     children: jsx(Filter, {})
   });
 };
@@ -1202,12 +1170,12 @@ var KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemC
     }));
   }, [dispatch]);
   return jsx(FilterOption, {
-    optionId: filter.id,
     checked: !!filter.checked,
+    label: filter.amountVisible ? filter.name + " (" + filter.amountVisible + ")" : filter.name,
     onClick: function onClick(checked, only) {
       toggleFilter(filter.id, only);
     },
-    label: filter.amountVisible ? filter.name + " (" + filter.amountVisible + ")" : filter.name
+    optionId: filter.id
   });
 };
 
@@ -1220,14 +1188,14 @@ var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchC
     dispatch(layerSelectActions.toggleAllFilters());
   }, [dispatch]);
   return jsx(Switch, {
+    checked: allFiltersActive,
+    "data-testid": "customSwitch",
+    onChange: toggleFilters,
     slotProps: {
       input: {
         'aria-label': 'All'
       }
-    },
-    checked: allFiltersActive,
-    onChange: toggleFilters,
-    "data-testid": "customSwitch"
+    }
   });
 };
 
@@ -1275,27 +1243,27 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
   var _useLayerSelectTransl = useLayerSelectTranslation(),
     t = _useLayerSelectTransl.t;
   return jsxs(ToolContainerDraggable, {
-    title: t('groups-and-keywords-dialog-title'),
+    bounds: bounds,
     "data-testid": "keywordFilterResults",
-    startSize: {
-      width: 349,
-      height: 600
-    },
-    minWidth: 312,
-    minHeight: 192,
     isOpen: isOpen,
+    minHeight: 192,
+    minWidth: 312,
     onClose: onClose,
-    bounds: bounds,
     onMouseDown: onMouseDown,
     order: order,
     source: source,
+    startSize: {
+      width: 349,
+      height: 600
+    },
+    title: t('groups-and-keywords-dialog-title'),
     children: [jsxs(Grid, {
+      alignItems: "center",
       container: true,
+      justifyContent: "space-between",
       size: {
         xs: 12
       },
-      justifyContent: "space-between",
-      alignItems: "center",
       sx: {
         backgroundColor: 'background.paper',
         position: 'sticky',
@@ -1303,31 +1271,31 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
         zIndex: 100
       },
       children: [jsx(Grid, {
+        alignItems: "center",
         container: true,
+        justifyContent: "flex-start",
         size: {
           xs: 6
         },
-        justifyContent: "flex-start",
-        alignItems: "center",
         sx: {
           padding: '15px 15px 0 24px'
         },
         children: t('select-all')
       }), jsx(Grid, {
+        alignContent: "center",
         container: true,
+        justifyContent: "flex-end",
         size: {
           xs: 6
         },
-        justifyContent: "flex-end",
-        alignContent: "center",
         sx: {
           padding: '15px 15px 0 15px'
         },
         children: jsx(KeywordFilterSelectAllSwitchConnect, {})
       })]
     }), jsx(CustomAccordion, {
-      title: t('groups'),
       detailsSx: accordionDetailsStyle,
+      title: t('groups'),
       children: jsx(List, {
         dense: true,
         style: listStyle,
@@ -1338,8 +1306,8 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
         })
       })
     }), jsx(CustomAccordion, {
-      title: t('keywords'),
       detailsSx: accordionDetailsStyle,
+      title: t('keywords'),
       children: jsx(List, {
         dense: true,
         style: listStyle,
@@ -1367,52 +1335,174 @@ var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
   var filters = useAppSelector(getFilters);
   return jsx(KeywordFilterResults, {
     bounds: bounds,
+    filters: filters,
     isOpen: isDialogOpen,
     onClose: onCloseDialog,
     onMouseDown: setDialogOrder,
     order: dialogOrder,
-    source: uiSource,
-    filters: filters
+    source: uiSource
   });
 };
 
 var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
   var layer = _ref.layer,
     serviceUrl = _ref.serviceUrl,
+    allLayers = _ref.allLayers,
+    allMapIds = _ref.allMapIds,
     addLayer = _ref.addLayer,
+    addLayerToAllMaps = _ref.addLayerToAllMaps,
     deleteLayer = _ref.deleteLayer,
+    removeLayerFromAllMaps = _ref.removeLayerFromAllMaps,
     mapLayers = _ref.mapLayers;
   var _useLayerSelectTransl = useLayerSelectTranslation(),
     t = _useLayerSelectTransl.t;
-  var foundLayerIndex = mapLayers.findIndex(function (lr) {
-    return lr.name === layer.name && lr.service === serviceUrl;
-  });
+  var _React$useState = React.useState(false),
+    open = _React$useState[0],
+    setOpen = _React$useState[1];
+  var anchorRef = React.useRef(null);
+  var foundLayerIndex = React.useMemo(function () {
+    return mapLayers.findIndex(function (lr) {
+      return lr.name === layer.name && lr.service === serviceUrl;
+    });
+  }, [mapLayers, layer.name, serviceUrl]);
   var foundLayer = foundLayerIndex !== -1 && mapLayers[foundLayerIndex];
-  return jsx(CustomToggleButton, {
-    "data-testid": "layerAddRemoveButton-" + layer.name,
-    onClick: function onClick() {
-      !foundLayer ? addLayer({
-        serviceUrl: serviceUrl,
-        layerName: layer.name
-      }) : deleteLayer({
-        layerId: foundLayer.id,
-        layerIndex: foundLayerIndex
+  var layerExistsInWorkspace = React.useMemo(function () {
+    return allLayers.find(function (current) {
+      return current.name === layer.name && current.service === serviceUrl;
+    });
+  }, [allLayers, layer.name, serviceUrl]);
+  var existsInAllMaps = React.useMemo(function () {
+    return allMapIds.every(function (mapId) {
+      return allLayers.some(function (current) {
+        return current.mapId === mapId && current.name === layer.name && current.service === serviceUrl;
       });
-    },
-    selected: !!foundLayer,
-    variant: "tool",
-    fullWidth: true,
-    sx: {
-      fontSize: '12px'
-    },
-    className: "layerAddRemoveButton",
-    children: !foundLayer ? t('add') : t('remove')
+    });
+  }, [allMapIds, allLayers, layer.name, serviceUrl]);
+  var handleToggle = function handleToggle() {
+    setOpen(function (prevOpen) {
+      return !prevOpen;
+    });
+  };
+  var handleClose = function handleClose(event) {
+    var _anchorRef$current;
+    if ((_anchorRef$current = anchorRef.current) != null && _anchorRef$current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  var handleAddAll = function handleAddAll() {
+    addLayerToAllMaps({
+      serviceUrl: serviceUrl,
+      layerName: layer.name
+    });
+    setOpen(false);
+  };
+  var handleRemoveAll = function handleRemoveAll(id) {
+    removeLayerFromAllMaps(id);
+    setOpen(false);
+  };
+  return jsxs(Fragment, {
+    children: [jsxs(ToggleButtonGroup, {
+      fullWidth: true,
+      ref: anchorRef,
+      style: {
+        height: '32px'
+      },
+      children: [jsx(ToggleButton, {
+        className: "tool",
+        "data-testid": "layerAddRemoveButton-" + layer.name,
+        fullWidth: true,
+        onClick: function onClick() {
+          !foundLayer ? addLayer({
+            serviceUrl: serviceUrl,
+            layerName: layer.name
+          }) : deleteLayer({
+            layerId: foundLayer.id,
+            layerIndex: foundLayerIndex
+          });
+        },
+        onMouseDown: function onMouseDown(e) {
+          e.stopPropagation();
+        },
+        selected: !!foundLayer,
+        style: {
+          borderRadius: '3px 0 0 3px',
+          height: 'inherit',
+          minWidth: '62px',
+          fontSize: '12px'
+        },
+        value: "selected",
+        children: !foundLayer ? t('add') : t('remove')
+      }), jsx(Box, {
+        sx: {
+          minWidth: '1px',
+          backgroundColor: foundLayer || layerExistsInWorkspace ? 'geowebColors.buttons.primary.default.borderColor' : 'geowebColors.buttons.secondary.default.fill'
+        }
+      }), jsx(ToggleButton, {
+        className: "tool",
+        "data-testid": "layerAddRemoveButton-dropdown-" + layer.name,
+        onClick: handleToggle,
+        onMouseDown: function onMouseDown(e) {
+          e.stopPropagation();
+        },
+        selected: !!layerExistsInWorkspace,
+        style: {
+          marginLeft: '0',
+          minWidth: '32px',
+          borderRadius: '0 3px 3px 0',
+          height: 'inherit'
+        },
+        value: "dropdown",
+        children: jsx(ArrowDropDownDown, {
+          style: {
+            marginRight: '1px'
+          }
+        })
+      })]
+    }), jsx(Popper, {
+      anchorEl: anchorRef.current,
+      open: open,
+      placement: "bottom-end",
+      role: undefined,
+      style: {
+        zIndex: 1300
+      },
+      transition: true,
+      children: function children(_ref2) {
+        var TransitionProps = _ref2.TransitionProps,
+          placement = _ref2.placement;
+        return jsx(Grow, Object.assign({}, TransitionProps, {
+          style: {
+            transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
+          },
+          children: jsx(Paper, {
+            children: jsx(ClickAwayListener, {
+              onClickAway: handleClose,
+              children: jsxs(MenuList, {
+                autoFocusItem: true,
+                children: [jsx(MenuItem, {
+                  disabled: existsInAllMaps,
+                  onClick: handleAddAll,
+                  children: t('add-to-all-maps')
+                }), jsx(MenuItem, {
+                  disabled: !layerExistsInWorkspace,
+                  onClick: function onClick() {
+                    layerExistsInWorkspace && handleRemoveAll(layerExistsInWorkspace.id);
+                  },
+                  children: t('remove-from-all-maps')
+                })]
+              })
+            })
+          })
+        }));
+      }
+    })]
   });
 };
 
 var LayerListDimensions = function LayerListDimensions(_ref) {
   var dimensions = _ref.dimensions;
-  if (!dimensions || !dimensions.length) {
+  if (!(dimensions != null && dimensions.length)) {
     return null;
   }
   return jsx(Fragment, {
@@ -1480,10 +1570,10 @@ var layerSelectColumnsLarge = {
     marginLeft: 2
   },
   column8: {
-    width: "calc(100% - " + buttonLarge + "px - 24px)"
+    width: "calc(100% - " + buttonLarge + "px - 32px)"
   },
   column9: {
-    width: "calc(" + buttonLarge + "px + 24px)"
+    width: "calc(" + buttonLarge + "px + 32px)"
   }
 };
 var layerSelectColumnsSmall = {
@@ -1515,10 +1605,10 @@ var layerSelectColumnsSmall = {
     marginLeft: 1
   },
   column8: {
-    width: "calc(100% - " + buttonSmall + "px - 8px)"
+    width: "calc(100% - " + buttonSmall + "px - 50px)"
   },
   column9: {
-    width: "calc(" + buttonSmall + "px + 8px)"
+    width: "calc(" + buttonSmall + "px + 50px)"
   }
 };
 var breakpoint = 500;
@@ -1557,11 +1647,15 @@ var layerInfoStyle = {
   lineHeight: 1
 };
 var LayerListRow = function LayerListRow(_ref) {
-  var _layer$keywords;
+  var _layer$keywords, _layer$keywords2;
   var layer = _ref.layer,
     service = _ref.service,
+    allLayers = _ref.allLayers,
+    allMapIds = _ref.allMapIds,
     addLayer = _ref.addLayer,
+    addLayerToAllMaps = _ref.addLayerToAllMaps,
     deleteLayer = _ref.deleteLayer,
+    removeLayerFromAllMaps = _ref.removeLayerFromAllMaps,
     mapLayers = _ref.mapLayers,
     layerSelectWidth = _ref.layerSelectWidth,
     searchFilter = _ref.searchFilter,
@@ -1574,10 +1668,10 @@ var LayerListRow = function LayerListRow(_ref) {
   var columns = widthToColumns(layerSelectWidth);
   var dimensions = getDimensionsList(layer.dimensions);
   return jsxs(Grid, {
-    "data-testid": "layerListLayerRow",
+    alignItems: "center",
     container: true,
+    "data-testid": "layerListLayerRow",
     justifyContent: "center",
-    alignItems: "center",
     sx: {
       backgroundColor: 'geowebColors.cards.cardContainer',
       padding: '8px',
@@ -1603,8 +1697,8 @@ var LayerListRow = function LayerListRow(_ref) {
             overflow: 'hidden'
           },
           children: jsx(SearchHighlight, {
-            text: layer.title,
-            search: searchFilter
+            search: searchFilter,
+            text: layer.title
           })
         })
       }), jsxs(Grid, {
@@ -1620,8 +1714,8 @@ var LayerListRow = function LayerListRow(_ref) {
             overflow: 'hidden'
           },
           children: jsx(SearchHighlight, {
-            text: service.name,
-            search: searchFilter
+            search: searchFilter,
+            text: service.name
           })
         }), jsx(LayerInfoButton, {
           isActive: hasActiveLayer,
@@ -1631,12 +1725,12 @@ var LayerListRow = function LayerListRow(_ref) {
         sx: columns.column2,
         children: [jsx(Grid, {
           sx: columns.column3,
-          children: layer["abstract"] && jsx(Typography, {
+          children: !!layer["abstract"] && jsx(Typography, {
             "data-testid": "layerAbstract",
             sx: layerInfoStyle,
             children: jsx(SearchHighlight, {
-              text: layer["abstract"],
-              search: searchFilter
+              search: searchFilter,
+              text: layer["abstract"]
             })
           })
         }), jsxs(Grid, {
@@ -1652,34 +1746,42 @@ var LayerListRow = function LayerListRow(_ref) {
             children: [layer.path.length > 0 && jsxs(Typography, {
               sx: layerInfoStyle,
               children: [t('groups'), ":", ' ', jsx(SearchHighlight, {
-                text: layer.path.join(' / '),
-                search: searchFilter
+                search: searchFilter,
+                text: layer.path.join(' / ')
               })]
             }), ((_layer$keywords = layer.keywords) == null ? void 0 : _layer$keywords.length) > 0 && jsxs(Typography, {
               sx: layerInfoStyle,
               children: [t('keywords'), ":", ' ', jsx(SearchHighlight, {
-                text: layer.keywords.slice().sort(function (textA, textB) {
+                search: searchFilter,
+                text: ((_layer$keywords2 = layer.keywords) != null ? _layer$keywords2 : []).slice().sort(function (textA, textB) {
                   return textA.localeCompare(textB);
-                }).join(', '),
-                search: searchFilter
+                }).join(', ')
               })]
             })]
           })]
         })]
       })]
     }), jsx(Grid, {
+      alignItems: "center",
       container: true,
-      sx: columns.column9,
       justifyContent: "flex-end",
-      alignItems: "center",
+      sx: columns.column9,
       children: jsx(Box, {
-        sx: columns.column7,
+        alignItems: "flex-start",
+        sx: (columns.column7, {
+          width: '100%',
+          paddingLeft: '16px'
+        }),
         children: jsx(LayerAddRemoveButton, {
-          layer: layer,
-          serviceUrl: service.serviceUrl,
           addLayer: addLayer,
+          addLayerToAllMaps: addLayerToAllMaps,
+          allLayers: allLayers,
+          allMapIds: allMapIds,
           deleteLayer: deleteLayer,
-          mapLayers: mapLayers
+          layer: layer,
+          mapLayers: mapLayers,
+          removeLayerFromAllMaps: removeLayerFromAllMaps,
+          serviceUrl: service.serviceUrl
         })
       })
     })]
@@ -1692,8 +1794,12 @@ var LayerList = function LayerList(_ref) {
     layerSelectHeight = _ref.layerSelectHeight,
     serviceListHeight = _ref.serviceListHeight,
     layerSelectWidth = _ref.layerSelectWidth,
+    allLayers = _ref.allLayers,
+    allMapIds = _ref.allMapIds,
     addLayer = _ref.addLayer,
+    addLayerToAllMaps = _ref.addLayerToAllMaps,
     deleteLayer = _ref.deleteLayer,
+    removeLayerFromAllMaps = _ref.removeLayerFromAllMaps,
     mapLayers = _ref.mapLayers,
     searchFilter = _ref.searchFilter,
     isLayerInfoVisibleInStore = _ref.isLayerInfoVisibleInStore,
@@ -1726,22 +1832,26 @@ var LayerList = function LayerList(_ref) {
         var isActiveLayer = isLayerInfoVisibleInStore && (currentLayerInfo == null ? void 0 : currentLayerInfo.serviceUrl) === service.serviceUrl && (currentLayerInfo == null ? void 0 : currentLayerInfo.layerName) === filter.name;
         return jsx("div", {
           style: style,
-          children: service && jsx(LayerListRow, {
-            layer: filter,
-            service: service,
+          children: !!service && jsx(LayerListRow, {
             addLayer: addLayer,
+            addLayerToAllMaps: addLayerToAllMaps,
+            allLayers: allLayers,
+            allMapIds: allMapIds,
             deleteLayer: deleteLayer,
-            mapLayers: mapLayers,
-            layerSelectWidth: layerSelectWidth,
-            searchFilter: searchFilter,
             hasActiveLayer: isActiveLayer,
+            layer: filter,
+            layerSelectWidth: layerSelectWidth,
+            mapLayers: mapLayers,
             onToggleActiveLayer: function onToggleActiveLayer() {
               return _onToggleActiveLayer({
                 serviceUrl: service == null ? void 0 : service.serviceUrl,
                 layerName: filter.name,
                 isActiveLayer: isActiveLayer
               });
-            }
+            },
+            removeLayerFromAllMaps: removeLayerFromAllMaps,
+            searchFilter: searchFilter,
+            service: service
           })
         }, filter.name);
       }
@@ -1761,7 +1871,13 @@ var LayerListConnect = function LayerListConnect(_ref) {
   var mapLayers = useAppSelector(function (store) {
     return mapSelectors.getMapLayersWithoutDimensionCurrentValue(store, mapId);
   });
-  var addLayer = function addLayer(_ref2) {
+  var allLayers = useAppSelector(function (store) {
+    return layerSelectors.getAllLayers(store);
+  });
+  var allMapIds = useAppSelector(function (store) {
+    return mapSelectors.getAllMapIds(store);
+  });
+  var _addLayer = function addLayer(_ref2, mapId) {
     var serviceUrl = _ref2.serviceUrl,
       layerName = _ref2.layerName;
     var layer = {
@@ -1771,13 +1887,15 @@ var LayerListConnect = function LayerListConnect(_ref) {
       layerType: LayerType.mapLayer
     };
     addMapLayer({
+      mapId: mapId,
       layerId: layer.id,
       layer: layer,
       origin: layerTypes.LayerActionOrigin.layerManager
     });
   };
   var addMapLayer = React.useCallback(function (_ref3) {
-    var layerId = _ref3.layerId,
+    var mapId = _ref3.mapId,
+      layerId = _ref3.layerId,
       layer = _ref3.layer,
       origin = _ref3.origin;
     return dispatch(layerActions.addLayer({
@@ -1786,10 +1904,25 @@ var LayerListConnect = function LayerListConnect(_ref) {
       layer: layer,
       origin: origin
     }));
-  }, [dispatch, mapId]);
-  var deleteLayer = React.useCallback(function (_ref4) {
-    var layerId = _ref4.layerId,
-      layerIndex = _ref4.layerIndex;
+  }, [dispatch]);
+  var addLayerToAllMaps = function addLayerToAllMaps(_ref4) {
+    var serviceUrl = _ref4.serviceUrl,
+      layerName = _ref4.layerName;
+    allMapIds.forEach(function (mapId) {
+      if (allLayers.find(function (layer) {
+        return layer.name === layerName && layer.service === serviceUrl && layer.mapId === mapId;
+      })) {
+        return;
+      }
+      _addLayer({
+        serviceUrl: serviceUrl,
+        layerName: layerName
+      }, mapId);
+    });
+  };
+  var deleteLayer = React.useCallback(function (_ref5) {
+    var layerId = _ref5.layerId,
+      layerIndex = _ref5.layerIndex;
     return dispatch(layerActions.layerDelete({
       mapId: mapId,
       layerId: layerId,
@@ -1797,6 +1930,23 @@ var LayerListConnect = function LayerListConnect(_ref) {
       origin: layerTypes.LayerActionOrigin.layerManager
     }));
   }, [dispatch, mapId]);
+  var removeLayerFromAllMaps = React.useCallback(function (layerId) {
+    var _allLayers$find;
+    if (!layerId) {
+      return;
+    }
+    var layerName = (_allLayers$find = allLayers.find(function (layer) {
+      return layer.id === layerId;
+    })) == null ? void 0 : _allLayers$find.name;
+    layerName && allLayers.filter(function (layer) {
+      return layer.name === layerName;
+    }).forEach(function (layer) {
+      layer.mapId && layer.id && dispatch(layerActions.layerDelete({
+        mapId: layer.mapId,
+        layerId: layer.id
+      }));
+    });
+  }, [dispatch, allLayers]);
   var filteredLayers = useAppSelector(function (store) {
     return getFilteredLayers(store);
   });
@@ -1809,10 +1959,10 @@ var LayerListConnect = function LayerListConnect(_ref) {
   var currentLayerInfo = useAppSelector(function (store) {
     return layerSelectors.getActiveLayerInfo(store);
   });
-  var onToggleActiveLayer = React.useCallback(function (_ref5) {
-    var serviceUrl = _ref5.serviceUrl,
-      layerName = _ref5.layerName,
-      isActiveLayer = _ref5.isActiveLayer;
+  var onToggleActiveLayer = React.useCallback(function (_ref6) {
+    var serviceUrl = _ref6.serviceUrl,
+      layerName = _ref6.layerName,
+      isActiveLayer = _ref6.isActiveLayer;
     if (!isActiveLayer) {
       dispatch(layerActions.showLayerInfo({
         layerName: layerName,
@@ -1824,18 +1974,24 @@ var LayerListConnect = function LayerListConnect(_ref) {
     }
   }, [mapId, dispatch]);
   return jsx(LayerList, {
+    addLayer: function addLayer(params) {
+      return _addLayer(params, mapId);
+    },
+    addLayerToAllMaps: addLayerToAllMaps,
+    allLayers: allLayers,
+    allMapIds: allMapIds,
+    currentLayerInfo: currentLayerInfo,
+    deleteLayer: deleteLayer,
     filteredLayers: filteredLayers,
-    services: services,
+    isLayerInfoVisibleInStore: isLayerInfoVisibleInStore,
     layerSelectHeight: layerSelectHeight,
-    serviceListHeight: serviceListHeight,
     layerSelectWidth: layerSelectWidth,
-    addLayer: addLayer,
-    deleteLayer: deleteLayer,
     mapLayers: mapLayers,
-    searchFilter: searchFilter,
-    isLayerInfoVisibleInStore: isLayerInfoVisibleInStore,
     onToggleActiveLayer: onToggleActiveLayer,
-    currentLayerInfo: currentLayerInfo
+    removeLayerFromAllMaps: removeLayerFromAllMaps,
+    searchFilter: searchFilter,
+    serviceListHeight: serviceListHeight,
+    services: services
   });
 };
 
@@ -1874,15 +2030,50 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
     }));
   }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source, dialogType]);
   return jsx(CustomIconButton, {
+    "data-testid": "layerSelectButton",
+    id: "layerSelectButton",
     onClick: openLayerSelectDialog,
     sx: style$2,
-    id: "layerSelectButton",
-    "data-testid": "layerSelectButton",
     tooltipTitle: tooltipTitle || t('layer-select-button-tooltip'),
     children: icon
   });
 };
 
+var DataExplorerButtonConnect = function DataExplorerButtonConnect(_ref) {
+  var mapId = _ref.mapId,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source;
+  var dispatch = useDispatch();
+  var dialogType = uiTypes.DialogTypes.DataExplorer;
+  var currentActiveMapId = useSelector(function (store) {
+    return uiSelectors.getDialogMapId(store, dialogType);
+  });
+  var isOpenInStore = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, dialogType);
+  });
+  var openDataExplorerDialog = React.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: dialogType,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source,
+      mapId: mapId,
+      origin: mapEnums.MapActionOrigin.map
+    }));
+  }, [dispatch, dialogType, currentActiveMapId, mapId, isOpenInStore, source]);
+  return jsx(CustomTooltip, {
+    title: "MeteoGate Data Explorer",
+    children: jsx(CustomIconButton, {
+      "data-testid": "dataExplorerButton",
+      isSelected: currentActiveMapId !== mapId ? false : isOpenInStore,
+      onClick: openDataExplorerDialog,
+      variant: "tool",
+      children: jsx(MeteoGate, {
+        sx: {}
+      })
+    })
+  });
+};
+
 var SearchFieldConnect = function SearchFieldConnect() {
   var dispatch = useDispatch();
   var searchFilter = useAppSelector(function (store) {
@@ -1901,9 +2092,9 @@ var SearchFieldConnect = function SearchFieldConnect() {
     }));
   };
   return jsx(SearchField, {
-    setSearchFilter: setSearchFilter,
+    onOpenServicePopup: toggleServicePopup,
     searchFilter: searchFilter,
-    onOpenServicePopup: toggleServicePopup
+    setSearchFilter: setSearchFilter
   });
 };
 
@@ -1929,22 +2120,20 @@ var ServiceChip = function ServiceChip(_ref) {
     t = _useLayerSelectTransl.t;
   var _useTheme = useTheme(),
     geowebColors = _useTheme.palette.geowebColors;
-  var chip = all ? 'all' : service && service.serviceUrl;
+  var chip = all ? 'all' : service == null ? void 0 : service.serviceUrl;
   return jsx(CustomTooltip, {
     title: service != null && service["abstract"] ? "Abstract: " + service["abstract"] : '',
     children: jsx("span", {
       children: jsx(CustomToggleButton, {
-        variant: "boxed",
-        selected: Boolean(isSelected),
-        tabIndex: 0,
         "data-testid": all ? 'serviceChipAll' : 'serviceChip',
+        disabled: isDisabled,
         onClick: function onClick() {
           return toggleChip(chip);
         },
         onKeyDown: function onKeyDown() {
           return toggleChip(chip);
         },
-        disabled: isDisabled,
+        selected: Boolean(isSelected),
         sx: Object.assign({}, style$1, isInSearch && Object.assign({
           backgroundColor: geowebColors.chip.highlightDefault.rgba + "!important",
           '&:hover': {
@@ -1956,6 +2145,8 @@ var ServiceChip = function ServiceChip(_ref) {
             backgroundColor: geowebColors.chip.highlightActiveMouseOver.rgba + "!important"
           }
         })),
+        tabIndex: 0,
+        variant: "boxed",
         children: service ? service.serviceName : t('all')
       })
     })
@@ -1986,36 +2177,38 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
     }));
   };
   return jsx(ServiceChip, {
-    service: service,
-    toggleChip: toggleChip,
-    isSelected: isAllSelected ? false : service.enabled,
     isDisabled: service.isLoading,
-    isInSearch: isInSearch
+    isInSearch: isInSearch,
+    isSelected: isAllSelected ? false : service.enabled,
+    service: service,
+    toggleChip: toggleChip
   });
 };
 var AllChipConnect = function AllChipConnect(_ref2) {
   var isAllSelected = _ref2.isAllSelected;
   var dispatch = useDispatch();
   return jsx(ServiceChip, {
+    isSelected: isAllSelected,
     toggleChip: function toggleChip() {
       if (!isAllSelected) {
         dispatch(layerSelectActions.enableAllActiveServices());
       }
-    },
-    isSelected: isAllSelected
+    }
   });
 };
 
 var ServiceList = function ServiceList(_ref) {
+  var _ref$current;
   var activeServicesById = _ref.activeServicesById,
     setHeight = _ref.setHeight;
   var ref = React.useRef(null);
   var _React$useState = React.useState(0),
     serviceListHeight = _React$useState[0],
     setServiceListHeight = _React$useState[1];
-  var clientHeight = ref && ref.current && ref.current.clientHeight && ref.current.clientHeight;
+  var clientHeight = (ref == null || (_ref$current = ref.current) == null ? void 0 : _ref$current.clientHeight) && ref.current.clientHeight;
   React.useEffect(function () {
-    if (ref && ref.current && ref.current.clientHeight) {
+    var _ref$current2;
+    if (ref != null && (_ref$current2 = ref.current) != null && _ref$current2.clientHeight) {
       setServiceListHeight(ref.current.clientHeight);
     }
   }, [activeServicesById, clientHeight]);
@@ -2028,13 +2221,14 @@ var ServiceList = function ServiceList(_ref) {
     return activeService.enabled;
   });
   return jsx(Box, {
+    "data-testid": "serviceList",
     sx: {
       marginTop: '8px',
       width: '100%',
       overflow: 'hidden'
     },
-    "data-testid": "serviceList",
     children: jsxs(Box, {
+      ref: ref,
       sx: {
         width: '100%',
         display: 'block',
@@ -2045,13 +2239,12 @@ var ServiceList = function ServiceList(_ref) {
         marginBottom: '8px',
         fontSize: '0.875rem'
       },
-      ref: ref,
-      children: [(activeServicesIds == null ? void 0 : activeServicesIds.length) && jsx(AllChipConnect, {
+      children: [!!(activeServicesIds != null && activeServicesIds.length) && jsx(AllChipConnect, {
         isAllSelected: isAllSelected
       }), activeServices.map(function (service) {
         return jsx(ServiceChipConnect, {
-          service: service,
-          isAllSelected: isAllSelected
+          isAllSelected: isAllSelected,
+          service: service
         }, service.serviceUrl);
       })]
     })
@@ -2064,8 +2257,8 @@ var ServiceListConnect = function ServiceListConnect(_ref) {
     return getFilteredActiveServices(store);
   });
   return jsx(ServiceList, {
-    setHeight: setHeight,
-    activeServicesById: sortByService(filteredActiveServices)
+    activeServicesById: sortByService(filteredActiveServices),
+    setHeight: setHeight
   });
 };
 
@@ -2137,45 +2330,45 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     (_dialogRef$current = dialogRef.current) == null || _dialogRef$current.focus();
   }, []);
   return jsxs(Box, {
-    sx: styles.servicesContainer,
     "data-testid": "ServiceDialog",
     onKeyDown: function onKeyDown(event) {
       if (event.key !== 'Escape') {
         event.stopPropagation();
       }
     },
-    tabIndex: -1,
     ref: dialogRef,
+    sx: styles.servicesContainer,
+    tabIndex: -1,
     children: [jsxs(Box, {
       sx: styles.header,
       children: [jsx(Box, {
         sx: styles.text,
         children: t('services')
-      }), error && jsx(AlertBanner, {
-        title: error,
-        shouldClose: true
-      })]
+      }), error ? jsx(AlertBanner, {
+        shouldClose: true,
+        title: error
+      }) : null]
     }), jsx(Backdrop, {
+      open: isLoading,
       sx: Object.assign({}, styles.loading, {
         backgroundSize: 'cover'
       }),
-      open: isLoading,
       children: jsx(CircularProgress, {})
     }), jsx(Rows, {
-      services: services,
-      layerSelectRemoveService: layerSelectRemoveService,
       layerSelectReloadService: layerSelectReloadService,
-      setServicePopupInfo: setServicePopupInfo,
-      selectedLayers: selectedLayers
+      layerSelectRemoveService: layerSelectRemoveService,
+      selectedLayers: selectedLayers,
+      services: services,
+      setServicePopupInfo: setServicePopupInfo
     }), jsx(Box, {
       sx: styles.footer,
       children: jsx(Button, {
+        "data-testid": "openAddServiceButton",
         onClick: openAddService,
         onKeyDown: stopTabPropagation,
-        "data-testid": "openAddServiceButton",
+        startIcon: jsx(Add, {}),
         sx: styles.button,
         variant: "tertiary",
-        startIcon: jsx(Add, {}),
         children: t('add-a-new-service')
       })
     })]
@@ -2246,31 +2439,30 @@ var Rows = function Rows(_ref2) {
             },
             children: [jsx(CustomTooltip, {
               "data-testid": "updateServiceTooltip",
-              title: t('update-service-title'),
               placement: tooltipPlacement(),
               slotProps: {
                 popper: tooltipPopperProps
               },
+              title: t('update-service-title'),
               children: jsx(CustomIconButton, {
-                "data-testid": "updateServiceButton",
                 "aria-label": "Update layers from WMS service",
-                onKeyDown: stopTabPropagation,
+                "data-testid": "updateServiceButton",
                 onClick: function onClick() {
                   layerSelectReloadService(serviceUrl);
                 },
+                onKeyDown: stopTabPropagation,
                 children: jsx(Cached, {})
               })
             }), userAddedService ? jsx(CustomTooltip, {
-              title: t('edit-service-title'),
               placement: tooltipPlacement(),
               slotProps: {
                 popper: tooltipPopperProps
               },
+              title: t('edit-service-title'),
               children: jsx("span", {
                 children: jsx(CustomIconButton, {
                   "aria-label": "edit service",
                   "data-testid": "openEditServiceButton",
-                  onKeyDown: stopTabPropagation,
                   onClick: function onClick() {
                     setServicePopupInfo({
                       isOpen: true,
@@ -2279,20 +2471,20 @@ var Rows = function Rows(_ref2) {
                       variant: 'edit'
                     });
                   },
+                  onKeyDown: stopTabPropagation,
                   children: jsx(Edit, {})
                 })
               })
             }) : jsx(CustomTooltip, {
-              title: t('show-service-title'),
               placement: tooltipPlacement(),
               slotProps: {
                 popper: tooltipPopperProps
               },
+              title: t('show-service-title'),
               children: jsx("span", {
                 children: jsx(CustomIconButton, {
                   "aria-label": "show service",
                   "data-testid": "openShowServiceButton",
-                  onKeyDown: stopTabPropagation,
                   onClick: function onClick() {
                     setServicePopupInfo({
                       isOpen: true,
@@ -2301,26 +2493,27 @@ var Rows = function Rows(_ref2) {
                       variant: 'show'
                     });
                   },
+                  onKeyDown: stopTabPropagation,
                   children: jsx(Visibility, {})
                 })
               })
-            }), userAddedService && jsx(Box, {
+            }), !!userAddedService && jsx(Box, {
               children: jsx(CustomTooltip, {
-                title: deleteServiceTitle(t, serviceHasActiveLayers),
+                "data-testid": "removeServiceTooltip",
+                placement: tooltipPlacement(),
                 slotProps: {
                   popper: tooltipPopperProps
                 },
-                placement: tooltipPlacement(),
-                "data-testid": "removeServiceTooltip",
+                title: deleteServiceTitle(t, serviceHasActiveLayers),
                 children: jsx("span", {
                   children: jsx(CustomIconButton, {
-                    "data-testid": "removeServiceButton",
                     "aria-label": "delete service",
+                    "data-testid": "removeServiceButton",
                     disabled: serviceHasActiveLayers,
-                    onKeyDown: stopTabPropagation,
                     onClick: function onClick() {
                       return layerSelectRemoveService(serviceId, serviceUrl, serviceName);
                     },
+                    onKeyDown: stopTabPropagation,
                     children: jsx(Delete, {})
                   })
                 })
@@ -2508,15 +2701,15 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
             service = getService(services, serviceUrl);
             serviceSetLayers({
               id: layersForService.id,
-              name: service && service.serviceName || layersForService.name,
+              name: (service == null ? void 0 : service.serviceName) || layersForService.name,
               serviceUrl: serviceUrl,
-              "abstract": service && service["abstract"] || layersForService["abstract"],
+              "abstract": (service == null ? void 0 : service["abstract"]) || layersForService["abstract"],
               layers: layersForService.layers,
-              scope: service && service.scope || 'user',
+              scope: (service == null ? void 0 : service.scope) || 'user',
               isUpdating: true
             });
             clearImageCacheForAllMaps();
-            serviceTitle = service && service.serviceName || layersForService.name;
+            serviceTitle = (service == null ? void 0 : service.serviceName) || layersForService.name;
             showSnackbar(getServiceSuccesUpdateMessage(serviceTitle));
             _context.next = 16;
             break;
@@ -2541,13 +2734,13 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
     };
   }(), [serviceSetLayers, services, showSnackbar, t]);
   return jsx(ServiceOptionsDialog, {
+    error: error,
+    isLoading: isLoading,
+    layerSelectReloadService: layerSelectReloadService,
+    layerSelectRemoveService: layerSelectRemoveService,
     selectedLayers: selectedLayers,
     services: services,
-    layerSelectRemoveService: layerSelectRemoveService,
-    layerSelectReloadService: layerSelectReloadService,
-    setServicePopupInfo: setServicePopupInfo,
-    isLoading: isLoading,
-    error: error
+    setServicePopupInfo: setServicePopupInfo
   });
 };
 
@@ -2562,41 +2755,6 @@ var ServiceOptionsButton = function ServiceOptionsButton(_ref) {
   });
 };
 
-var DataExplorerButtonConnect = function DataExplorerButtonConnect(_ref) {
-  var mapId = _ref.mapId,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
-  var dispatch = useDispatch();
-  var dialogType = uiTypes.DialogTypes.DataExplorer;
-  var currentActiveMapId = useSelector(function (store) {
-    return uiSelectors.getDialogMapId(store, dialogType);
-  });
-  var isOpenInStore = useSelector(function (store) {
-    return uiSelectors.getisDialogOpen(store, dialogType);
-  });
-  var openDataExplorerDialog = React.useCallback(function () {
-    dispatch(uiActions.setActiveMapIdForDialog({
-      type: dialogType,
-      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
-      source: source,
-      mapId: mapId,
-      origin: mapEnums.MapActionOrigin.map
-    }));
-  }, [dispatch, dialogType, currentActiveMapId, mapId, isOpenInStore, source]);
-  return jsx(CustomTooltip, {
-    title: "MeteoGate Data Explorer",
-    children: jsx(CustomIconButton, {
-      variant: "tool",
-      "data-testid": "dataExplorerButton",
-      onClick: openDataExplorerDialog,
-      isSelected: currentActiveMapId !== mapId ? false : isOpenInStore,
-      children: jsx(MeteoGate, {
-        sx: {}
-      })
-    })
-  });
-};
-
 var LayerSelect = function LayerSelect(_ref) {
   var mapId = _ref.mapId,
     bounds = _ref.bounds,
@@ -2641,29 +2799,12 @@ var LayerSelect = function LayerSelect(_ref) {
     }
   };
   return jsxs(ToolContainerDraggable, {
-    title: showTitle ? "Layer Select " + mapId : 'Layer Select',
-    startSize: {
-      width: width,
-      height: height
-    },
-    minWidth: 320,
-    minHeight: 126,
-    startPosition: {
-      top: 150,
-      left: 100
-    },
-    isOpen: isOpen,
-    onResizeStop: function onResizeStop(_event, _direction, node) {
-      var width = node.offsetWidth,
-        height = node.offsetHeight;
-      onChangeSize({
-        width: width,
-        height: height
-      });
-    },
-    onClose: onClose,
     bounds: bounds,
     "data-testid": "layerSelectWindow",
+    isOpen: isOpen,
+    minHeight: 126,
+    minWidth: 320,
+    onClose: onClose,
     onMouseDown: function onMouseDown(event) {
       var target = event.target;
       var isButtonInScrollableList = target.closest('.layerInfoButton') || target.closest('.layerAddRemoveButton');
@@ -2674,8 +2815,25 @@ var LayerSelect = function LayerSelect(_ref) {
       }
       _onMouseDown(event);
     },
+    onResizeStop: function onResizeStop(_event, _direction, node) {
+      var width = node.offsetWidth,
+        height = node.offsetHeight;
+      onChangeSize({
+        width: width,
+        height: height
+      });
+    },
     order: order,
     source: source,
+    startPosition: {
+      top: 150,
+      left: 100
+    },
+    startSize: {
+      width: width,
+      height: height
+    },
+    title: showTitle ? "Layer Select " + mapId : 'Layer Select',
     children: [jsx(Box, {
       sx: {
         padding: '4px 16px 0 16px'
@@ -2693,11 +2851,11 @@ var LayerSelect = function LayerSelect(_ref) {
         children: [jsx(Grid, {
           size: 12,
           children: jsx(KeywordFilterButtonConnect, {
-            mapId: mapId,
             isMultiMap: isMultiMap,
+            mapId: mapId,
             source: source
           })
-        }), hasDataExplorer && jsx(Grid, {
+        }), !!hasDataExplorer && jsx(Grid, {
           size: 12,
           children: jsx(DataExplorerButtonConnect, {
             mapId: mapId
@@ -2725,10 +2883,10 @@ var LayerSelect = function LayerSelect(_ref) {
         padding: '0 16px'
       },
       children: jsx(LayerListConnect, {
-        mapId: mapId,
         layerSelectHeight: height,
-        serviceListHeight: serviceListHeight,
-        layerSelectWidth: width
+        layerSelectWidth: width,
+        mapId: mapId,
+        serviceListHeight: serviceListHeight
       })
     })]
   });
@@ -2934,51 +3092,34 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
   var isShowPopup = servicePopupVariant === 'show';
   var isServiceUrlDisabled = isShowPopup || servicePopupVariant === 'edit';
   return jsx(CustomDialog, {
-    open: isOpen,
-    hideBackdrop: hideBackdrop,
-    fullWidth: true,
-    maxWidth: "xs",
-    "data-testid": "servicePopup",
-    title: getTitleForVariant(t, servicePopupVariant),
-    sx: {
-      '& .MuiDialog-paper': {
-        backgroundColor: "geowebColors.cards.cardContainer",
-        maxWidth: 458
-      }
-    },
-    onClose: function onClose() {
-      return closePopup && closePopup();
-    },
     actions: isShowPopup ? jsx(Button, {
       onClick: function onClick() {
         return closePopup();
       },
-      variant: "tertiary",
       sx: {
         width: {
           xs: '100%',
           sm: '117px'
         }
       },
+      variant: "tertiary",
       children: t('close')
     }) : jsxs(Fragment, {
       children: [jsx(Button, {
-        onClick: closePopup,
         "data-testid": "closePopupButtonCancel",
-        variant: "tertiary",
+        onClick: closePopup,
         sx: {
           width: {
             xs: '100%',
             sm: '117px'
           }
         },
+        variant: "tertiary",
         children: t('cancel')
       }), jsx(Button, {
-        type: "submit",
-        variant: "primary",
-        form: "servicePopupForm",
-        disabled: isSubmitDisabled || isLoading,
         "data-testid": "saveServiceButton",
+        disabled: isSubmitDisabled || isLoading,
+        form: "servicePopupForm",
         sx: {
           marginLeft: {
             xs: '0px!important',
@@ -2989,21 +3130,51 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
             sm: '117px'
           }
         },
+        type: "submit",
+        variant: "primary",
         children: t('save')
       })]
     }),
+    "data-testid": "servicePopup",
+    fullWidth: true,
+    hideBackdrop: hideBackdrop,
+    maxWidth: "xs",
+    onClose: function onClose() {
+      return closePopup == null ? void 0 : closePopup();
+    },
+    open: isOpen,
+    sx: {
+      '& .MuiDialog-paper': {
+        backgroundColor: "geowebColors.cards.cardContainer",
+        maxWidth: 458
+      }
+    },
+    title: getTitleForVariant(t, servicePopupVariant),
     children: jsxs("form", {
       id: "servicePopupForm",
-      onSubmit: handleSubmit(function (formValues) {
-        return addNewService(formValues);
-      }),
-      children: [isLoading && jsx(Box, {
+      onSubmit: handleSubmit(/*#__PURE__*/function () {
+        var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(formValues) {
+          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
+              case 0:
+                return _context3.abrupt("return", addNewService(formValues));
+              case 1:
+              case "end":
+                return _context3.stop();
+            }
+          }, _callee3);
+        }));
+        return function (_x3) {
+          return _ref5.apply(this, arguments);
+        };
+      }()),
+      children: [!!isLoading && jsx(Box, {
         sx: {
           position: 'relative'
         },
         children: jsx(LinearProgress, {
-          "data-testid": "loadingIndicator",
           color: "secondary",
+          "data-testid": "loadingIndicator",
           sx: {
             position: 'absolute',
             width: '100%',
@@ -3011,21 +3182,9 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
           }
         })
       }), jsx(ReactHookFormTextField, {
-        name: FormFields.serviceUrl,
-        label: t('service-url-label'),
-        onFocus: onFocusServiceUrl,
         autoFocus: !shouldDisableAutoFocus,
-        onBlur: onBlurServiceUrl,
-        onKeyDown: onKeyDownServiceUrl,
-        sx: style.textField,
-        rules: {
-          required: true,
-          validate: Object.assign({}, !isServiceUrlDisabled && {
-            onValidateServiceUrl: onValidateServiceUrl
-          })
-        },
+        defaultValue: serviceUrl,
         disabled: isServiceUrlDisabled || isLoading,
-        isReadOnly: isShowPopup,
         inputSlotProps: {
           disableUnderline: isShowPopup,
           endAdornment: isShowPopup && jsx(InputAdornment, {
@@ -3043,46 +3202,58 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
             })
           })
         },
-        defaultValue: serviceUrl
+        isReadOnly: isShowPopup,
+        label: t('service-url-label'),
+        name: FormFields.serviceUrl,
+        onBlur: onBlurServiceUrl,
+        onFocus: onFocusServiceUrl,
+        onKeyDown: onKeyDownServiceUrl,
+        rules: {
+          required: true,
+          validate: Object.assign({}, !isServiceUrlDisabled && {
+            onValidateServiceUrl: onValidateServiceUrl
+          })
+        },
+        sx: style.textField
       }), jsx(ReactHookFormTextField, {
-        name: FormFields.serviceName,
+        defaultValue: serviceName,
+        disabled: isShowPopup || isLoading,
+        inputSlotProps: {
+          disableUnderline: isShowPopup
+        },
+        isReadOnly: isShowPopup,
         label: t('service-name-label'),
+        name: FormFields.serviceName,
         rules: {
           required: true,
           validate: {
             onValidateServiceName: onValidateServiceName
           }
         },
+        sx: style.textField
+      }), jsx(ReactHookFormTextField, {
+        defaultValue: "",
         disabled: isShowPopup || isLoading,
-        isReadOnly: isShowPopup,
+        helperText: !isShowPopup ? t('service-popup-helper-text') : '',
         inputSlotProps: {
           disableUnderline: isShowPopup
         },
-        sx: style.textField,
-        defaultValue: serviceName
-      }), jsx(ReactHookFormTextField, {
+        isReadOnly: isShowPopup,
+        label: t('service-abstracts-label'),
         multiline: true,
-        rows: 4,
         name: FormFields.serviceAbstracts,
-        label: t('service-abstracts-label'),
-        disabled: isShowPopup || isLoading,
-        isReadOnly: isShowPopup,
-        inputSlotProps: {
-          disableUnderline: isShowPopup
-        },
-        helperText: !isShowPopup ? t('service-popup-helper-text') : '',
-        sx: style.textField,
-        defaultValue: ""
+        rows: 4,
+        sx: style.textField
       }), !isServiceUrlDisabled && jsx(InitialValidationsTrigger, {
-        trigger: trigger,
         getValues: getValues,
-        onValidField: fetchServiceData
+        onValidField: fetchServiceData,
+        trigger: trigger
       })]
     })
   });
 };
-var ServicePopup = function ServicePopup(_ref5) {
-  var props = Object.assign({}, (_objectDestructuringEmpty(_ref5), _ref5));
+var ServicePopup = function ServicePopup(_ref6) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref6), _ref6));
   return jsx(ReactHookFormProvider, {
     options: Object.assign({}, defaultFormOptions, {
       defaultValues: {
@@ -3113,25 +3284,25 @@ var ServicePopupDialogConnect = function ServicePopupDialogConnect(_ref) {
   var activeService = useAppSelector(function (store) {
     return getActiveServiceById(store, serviceId);
   });
-  var serviceSetLayers = React__default.useCallback(function (payload) {
+  var serviceSetLayers = React.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
-  var showSnackbar = React__default.useCallback(function (message) {
+  var showSnackbar = React.useCallback(function (message) {
     dispatch(snackbarActions.openSnackbar({
       type: snackbarTypes.SnackbarMessageType.VERBATIM_MESSAGE,
       message: message
     }));
   }, [dispatch]);
   return jsx(ServicePopup, {
-    servicePopupVariant: variant,
-    isOpen: isOpen,
     closePopup: setServicePopupClosed,
-    services: services,
-    serviceSetLayers: serviceSetLayers,
+    isOpen: isOpen,
+    serviceAbstracts: activeService == null ? void 0 : activeService["abstract"],
     serviceId: serviceId,
-    serviceUrl: url || (activeService == null ? void 0 : activeService.serviceUrl),
     serviceName: activeService == null ? void 0 : activeService.serviceName,
-    serviceAbstracts: activeService == null ? void 0 : activeService["abstract"],
+    servicePopupVariant: variant,
+    serviceSetLayers: serviceSetLayers,
+    serviceUrl: url || (activeService == null ? void 0 : activeService.serviceUrl),
+    services: services,
     showSnackbar: showSnackbar
   });
 };
@@ -3145,7 +3316,7 @@ var ServicePopupConnect = function ServicePopupConnect() {
     url = _useAppSelector.url,
     serviceId = _useAppSelector.serviceId,
     variant = _useAppSelector.variant;
-  var setServicePopupClosed = React__default.useCallback(function () {
+  var setServicePopupClosed = React.useCallback(function () {
     dispatch(layerSelectActions.closeServicePopupOpen());
   }, [dispatch]);
   if (!isOpen) {
@@ -3154,9 +3325,9 @@ var ServicePopupConnect = function ServicePopupConnect() {
   return jsx(ServicePopupDialogConnect, {
     isOpen: isOpen,
     serviceId: serviceId,
-    variant: variant,
+    setServicePopupClosed: setServicePopupClosed,
     url: url,
-    setServicePopupClosed: setServicePopupClosed
+    variant: variant
   });
 };
 
@@ -3189,21 +3360,21 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
   var hasDataExplorer = !!config.GW_DATA_EXPLORER_CONFIGURATION_FILENAME;
   return jsxs(Fragment, {
     children: [jsx(LayerSelect, {
-      mapId: mapId || initialMapId,
       bounds: bounds,
+      hasDataExplorer: hasDataExplorer,
+      isMultiMap: isMultiMap,
       isOpen: isDialogOpen,
+      mapId: mapId || initialMapId,
       onClose: onCloseDialog,
-      showTitle: showTitle,
       onMouseDown: setDialogOrder,
       order: dialogOrder,
-      source: uiSource,
-      isMultiMap: isMultiMap,
-      hasDataExplorer: hasDataExplorer
+      showTitle: showTitle,
+      source: uiSource
     }), jsx(KeywordFilterResultsConnect, {
-      mapId: mapId || initialMapId,
-      isMultiMap: isMultiMap
+      isMultiMap: isMultiMap,
+      mapId: mapId || initialMapId
     }), jsx(ServicePopupConnect, {})]
   });
 };
 
-export { AllChipConnect, DataExplorerButtonConnect, KeywordFilterButtonConnect, KeywordFilterResults, KeywordFilterResultsConnect, KeywordFilterResultsListItemConnect, KeywordFilterSelectAllSwitchConnect, LAYER_SELECT_NAMESPACE, LayerAddRemoveButton, LayerList, LayerListConnect, LayerListDimensions, LayerListRow, LayerSelectButtonConnect, LayerSelectConnect, SearchFieldConnect, ServiceChip, ServiceChipConnect, ServiceList, ServiceListConnect, ServiceOptionsButton, ServiceOptionsDialog, ServiceOptionsDialogConnect, ServicePopup, ServicePopupConnect, ServicePopupDialogConnect, createMockStore, getServiceSuccesUpdateMessage, getSuccesMessage, isUserAddedService, layerSelectActions, initialState as layerSelectInitialState, layerSelectListener, layerSelectMiddlewares, layerSelectReducer, layerSelectReducersMap, selectors as layerSelectSelectors, layerSelectTranslations, types as layerSelectTypes, useAppSelector };
+export { AllChipConnect, DataExplorerButtonConnect, KeywordFilterButtonConnect, KeywordFilterResults, KeywordFilterResultsConnect, KeywordFilterResultsListItemConnect, KeywordFilterSelectAllSwitchConnect, LAYER_SELECT_NAMESPACE, LayerAddRemoveButton, LayerList, LayerListConnect, LayerListDimensions, LayerListRow, LayerSelectButtonConnect, LayerSelectConnect, SearchFieldConnect, ServiceChip, ServiceChipConnect, ServiceList, ServiceListConnect, ServiceOptionsButton, ServiceOptionsDialog, ServiceOptionsDialogConnect, ServicePopup, ServicePopupConnect, ServicePopupDialogConnect, createMockStore, getServiceSuccesUpdateMessage, getSuccesMessage, isUserAddedService, layerSelectActions, initialState as layerSelectInitialState, layerSelectListener, layerSelectMiddlewares, layerSelectReducer, layerSelectReducersMap, selectors as layerSelectSelectors, layerSelectTranslations, useAppSelector };