@opengeoweb/layer-select 12.1.2 → 12.3.0

package/index.esm.js

@@ -2,18 +2,18 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { CustomIconButton, FilterOption, ToolContainerDraggable, CustomAccordion, CustomToggleButton, CustomTooltip, SearchHighlight, SearchField, ToggleMenu } from '@opengeoweb/shared';
-import { Filter, LayersAdd, Add, Cached, Edit, Visibility, Delete, Close, Copy } from '@opengeoweb/theme';
-import { uiTypes, serviceActions, selectorMemoizationOptions, serviceSelectors, uiActions, getUserAddedServices, setUserAddedServices, layerActions, uiSelectors, layerSelectors, mapListener, serviceListener, layersListener, mapReducer, serviceReducer, layerReducer, uiReducer, useSetupDialog, mapSelectors, layerTypes } from '@opengeoweb/store';
+import { CustomIconButton, FilterOption, ToolContainerDraggable, CustomAccordion, CustomToggleButton, CustomTooltip, SearchHighlight, SearchField, AlertBanner, ToggleMenu, CustomDialog } from '@opengeoweb/shared';
+import { Filter, LayersAdd, Add, Cached, Edit, Visibility, Delete, Copy } from '@opengeoweb/theme';
+import { uiTypes, serviceActions, selectorMemoizationOptions, serviceSelectors, uiActions, getUserAddedServices, setUserAddedServices, layerActions, uiSelectors, layerSelectors, mapListener, serviceListener, layersListener, openlayersListener, uiReducer, layerReducer, serviceReducer, mapReducer, useSetupDialog, mapSelectors, layerTypes } from '@opengeoweb/store';
 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, Grid2, List, Box, Typography, useTheme, Backdrop, CircularProgress, Button, ListItem, ListItemText, Dialog, DialogTitle, LinearProgress, DialogContent, InputAdornment, DialogActions } from '@mui/material';
+import { Switch, Grid, List, Box, 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 } from '@opengeoweb/webmap-react';
-import { webmapUtils, LayerType, getWMSServiceId, queryWMSServiceInfo, queryWMSLayers, invalidateWMSGetCapabilities, clearImageCacheForAllMaps } from '@opengeoweb/webmap';
+import { LayerType, webmapUtils, getWMSServiceId, queryWMSServiceInfo, queryWMSLayers, invalidateWMSGetCapabilities, clearImageCacheForAllMaps } from '@opengeoweb/webmap';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
 import { useFormContext } from 'react-hook-form';
 
@@ -741,9 +741,9 @@ function _regeneratorRuntime() {
   function define(t, e, r) {
     return Object.defineProperty(t, e, {
       value: r,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
+      enumerable: true,
+      configurable: true,
+      writable: true
     }), t[e];
   }
   try {
@@ -836,7 +836,7 @@ function _regeneratorRuntime() {
         if ("throw" === i) throw a;
         return {
           value: t,
-          done: !0
+          done: true
         };
       }
       for (n.method = i, n.arg = a;;) {
@@ -887,7 +887,7 @@ function _regeneratorRuntime() {
   function Context(t) {
     this.tryEntries = [{
       tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(!0);
+    }], t.forEach(pushTryEntry, this), this.reset(true);
   }
   function values(e) {
     if (e || "" === e) {
@@ -897,8 +897,8 @@ function _regeneratorRuntime() {
       if (!isNaN(e.length)) {
         var o = -1,
           i = function next() {
-            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
-            return next.value = t, next.done = !0, next;
+            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = false, next;
+            return next.value = t, next.done = true, next;
           };
         return i.next = i;
       }
@@ -907,10 +907,10 @@ function _regeneratorRuntime() {
   }
   return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
     value: GeneratorFunctionPrototype,
-    configurable: !0
+    configurable: true
   }), o(GeneratorFunctionPrototype, "constructor", {
     value: GeneratorFunction,
-    configurable: !0
+    configurable: true
   }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
     var e = "function" == typeof t && t.constructor;
     return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
@@ -939,17 +939,17 @@ function _regeneratorRuntime() {
     return r.reverse(), function next() {
       for (; r.length;) {
         var t = r.pop();
-        if (t in e) return next.value = t, next.done = !1, next;
+        if (t in e) return next.value = t, next.done = false, next;
       }
-      return next.done = !0, next;
+      return next.done = true, next;
     };
   }, e.values = values, Context.prototype = {
     constructor: Context,
     reset: function (e) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = false, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
     },
     stop: function () {
-      this.done = !0;
+      this.done = true;
       var t = this.tryEntries[0].completion;
       if ("throw" === t.type) throw t.arg;
       return this.rval;
@@ -968,10 +968,10 @@ function _regeneratorRuntime() {
           var c = n.call(i, "catchLoc"),
             u = n.call(i, "finallyLoc");
           if (c && u) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
           } else if (c) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
           } else {
             if (!u) throw Error("try statement without catch or finally");
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
@@ -1197,7 +1197,7 @@ var layerSelectReducersMap = {
   ui: uiReducer,
   snackbar: snackbarReducer
 };
-var layerSelectMiddlewares = [mapListener.middleware, serviceListener.middleware, layersListener.middleware, layerSelectListener.middleware, snackbarListener.middleware];
+var layerSelectMiddlewares = [mapListener.middleware, serviceListener.middleware, layersListener.middleware, layerSelectListener.middleware, snackbarListener.middleware, openlayersListener.middleware];
 var layerSelectRootReducer = combineReducers(layerSelectReducersMap);
 var createMockStore = function createMockStore(mockState) {
   return configureStore({
@@ -1335,7 +1335,7 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
     onMouseDown: onMouseDown,
     order: order,
     source: source,
-    children: [jsxs(Grid2, {
+    children: [jsxs(Grid, {
       container: true,
       size: {
         xs: 12
@@ -1348,7 +1348,7 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
         top: 0,
         zIndex: 100
       },
-      children: [jsx(Grid2, {
+      children: [jsx(Grid, {
         container: true,
         size: {
           xs: 6
@@ -1359,7 +1359,7 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
           padding: '15px 15px 0 24px'
         },
         children: t('select-all')
-      }), jsx(Grid2, {
+      }), jsx(Grid, {
         container: true,
         size: {
           xs: 6
@@ -1619,7 +1619,7 @@ var LayerListRow = function LayerListRow(_ref) {
   var rowHeight = widthToRowHeight(layerSelectWidth);
   var columns = widthToColumns(layerSelectWidth);
   var dimensions = getDimensionsList(layer.dimensions);
-  return jsxs(Grid2, {
+  return jsxs(Grid, {
     "data-testid": "layerListLayerRow",
     container: true,
     justifyContent: "center",
@@ -1632,10 +1632,10 @@ var LayerListRow = function LayerListRow(_ref) {
       border: 'solid 1px',
       borderColor: 'geowebColors.cards.cardContainerBorder'
     },
-    children: [jsxs(Grid2, {
+    children: [jsxs(Grid, {
       container: true,
       sx: columns.column8,
-      children: [jsx(Grid2, {
+      children: [jsx(Grid, {
         size: {
           xs: 12
         },
@@ -1653,7 +1653,7 @@ var LayerListRow = function LayerListRow(_ref) {
             search: searchFilter
           })
         })
-      }), jsxs(Grid2, {
+      }), jsxs(Grid, {
         container: true,
         direction: "column",
         sx: columns.column1,
@@ -1673,9 +1673,9 @@ var LayerListRow = function LayerListRow(_ref) {
           isActive: hasActiveLayer,
           onClick: onToggleActiveLayer
         })]
-      }), jsxs(Grid2, {
+      }), jsxs(Grid, {
         sx: columns.column2,
-        children: [jsx(Grid2, {
+        children: [jsx(Grid, {
           sx: columns.column3,
           children: layer["abstract"] && jsx(Typography, {
             "data-testid": "layerAbstract",
@@ -1685,15 +1685,15 @@ var LayerListRow = function LayerListRow(_ref) {
               search: searchFilter
             })
           })
-        }), jsxs(Grid2, {
+        }), jsxs(Grid, {
           container: true,
           sx: columns.column4,
-          children: [jsx(Grid2, {
+          children: [jsx(Grid, {
             sx: columns.column5,
             children: jsx(LayerListDimensions, {
               dimensions: dimensions
             })
-          }), jsxs(Grid2, {
+          }), jsxs(Grid, {
             sx: columns.column6,
             children: [layer.path.length > 0 && jsxs(Typography, {
               sx: layerInfoStyle,
@@ -1713,7 +1713,7 @@ var LayerListRow = function LayerListRow(_ref) {
           })]
         })]
       })]
-    }), jsx(Grid2, {
+    }), jsx(Grid, {
       container: true,
       sx: columns.column9,
       justifyContent: "flex-end",
@@ -2127,11 +2127,14 @@ var styles = {
   header: {
     position: 'sticky',
     top: 0,
-    fontSize: 'default',
     padding: '12px',
     backgroundColor: 'geowebColors.background.surface',
     zIndex: 100
   },
+  text: {
+    fontSize: 'default',
+    opacity: 0.67
+  },
   loading: {
     position: 'absolute',
     zIndex: 101
@@ -2164,7 +2167,8 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     selectedLayers = _ref.selectedLayers,
     setServicePopupInfo = _ref.setServicePopupInfo,
     _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    error = _ref.error;
   var _useLayerSelectTransl = useLayerSelectTranslation(),
     t = _useLayerSelectTransl.t;
   var openAddService = function openAddService() {
@@ -2188,9 +2192,15 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     },
     tabIndex: -1,
     ref: dialogRef,
-    children: [jsx(Box, {
+    children: [jsxs(Box, {
       sx: styles.header,
-      children: t('services')
+      children: [jsx(Box, {
+        sx: styles.text,
+        children: t('services')
+      }), error && jsx(AlertBanner, {
+        title: error,
+        shouldClose: true
+      })]
     }), jsx(Backdrop, {
       sx: Object.assign({}, styles.loading, {
         backgroundSize: 'cover'
@@ -2270,7 +2280,7 @@ var Rows = function Rows(_ref2) {
               marginLeft: 1
             }
           },
-          children: jsxs(Grid2, {
+          children: jsxs(Grid, {
             container: true,
             justifyContent: "left",
             sx: {
@@ -2475,22 +2485,17 @@ var getServiceSuccesUpdateMessage = function getServiceSuccesUpdateMessage(servi
     }
   };
 };
-var getServiceFailedUpdateMessage = function getServiceFailedUpdateMessage(error) {
-  var message = error.message;
-  return {
-    type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
-    key: 'unable-to-update-service',
-    params: {
-      message: message
-    }
-  };
-};
 var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
   var mapId = _ref.mapId;
   var _React$useState = React.useState(false),
     isLoading = _React$useState[0],
     setIsLoading = _React$useState[1];
+  var _React$useState2 = React.useState(undefined),
+    error = _React$useState2[0],
+    setError = _React$useState2[1];
   var dispatch = useDispatch();
+  var _useLayerSelectTransl = useLayerSelectTranslation(),
+    t = _useLayerSelectTransl.t;
   var serviceSetLayers = React.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(Object.assign({}, payload, {
       isUpdating: true
@@ -2532,10 +2537,11 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             setIsLoading(true);
-            _context.prev = 1;
-            _context.next = 4;
+            setError(undefined);
+            _context.prev = 2;
+            _context.next = 5;
             return loadWMSService(serviceUrl, true);
-          case 4:
+          case 5:
             layersForService = _context.sent;
             service = getService(services, serviceUrl);
             serviceSetLayers({
@@ -2550,35 +2556,36 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
             clearImageCacheForAllMaps();
             serviceTitle = service && service.serviceName || layersForService.name;
             showSnackbar(getServiceSuccesUpdateMessage(serviceTitle));
-            _context.next = 15;
+            _context.next = 16;
             break;
-          case 12:
-            _context.prev = 12;
-            _context.t0 = _context["catch"](1);
-            // TODO: Maarten Plieger 2022-11-02: Snackbars should not be used to inform the user that something went wrong.
-            // https://gitlab.com/opengeoweb/opengeoweb/-/issues/2819
-            showSnackbar(getServiceFailedUpdateMessage(_context.t0));
-          case 15:
-            _context.prev = 15;
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](2);
+            setError(t('unable-to-update-service', {
+              message: _context.t0.message
+            }));
+          case 16:
+            _context.prev = 16;
             setIsLoading(false);
-            return _context.finish(15);
-          case 18:
+            return _context.finish(16);
+          case 19:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[1, 12, 15, 18]]);
+      }, _callee, null, [[2, 13, 16, 19]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [serviceSetLayers, services, showSnackbar]);
+  }(), [serviceSetLayers, services, showSnackbar, t]);
   return jsx(ServiceOptionsDialog, {
     selectedLayers: selectedLayers,
     services: services,
     layerSelectRemoveService: layerSelectRemoveService,
     layerSelectReloadService: layerSelectReloadService,
     setServicePopupInfo: setServicePopupInfo,
-    isLoading: isLoading
+    isLoading: isLoading,
+    error: error
   });
 };
 
@@ -2684,7 +2691,8 @@ var LayerSelect = function LayerSelect(_ref) {
       },
       children: jsx(KeywordFilterButtonConnect, {
         mapId: mapId,
-        isMultiMap: isMultiMap
+        isMultiMap: isMultiMap,
+        source: source
       })
     }), jsx(Box, {
       sx: {
@@ -2912,177 +2920,150 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
   var isSubmitDisabled = getFormHasformErrors() || getFormAreRequiredFieldsEmpty();
   var isShowPopup = servicePopupVariant === 'show';
   var isServiceUrlDisabled = isShowPopup || servicePopupVariant === 'edit';
-  return jsx(Dialog, {
+  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'
+        }
+      },
+      children: t('close')
+    }) : jsxs(Fragment, {
+      children: [jsx(Button, {
+        onClick: closePopup,
+        "data-testid": "closePopupButtonCancel",
+        variant: "tertiary",
+        sx: {
+          width: {
+            xs: '100%',
+            sm: '117px'
+          }
+        },
+        children: t('cancel')
+      }), jsx(Button, {
+        type: "submit",
+        variant: "primary",
+        form: "servicePopupForm",
+        disabled: isSubmitDisabled || isLoading,
+        "data-testid": "saveServiceButton",
+        sx: {
+          marginLeft: {
+            xs: '0px!important',
+            sm: '8px!important'
+          },
+          width: {
+            xs: '100%',
+            sm: '117px'
+          }
+        },
+        children: t('save')
+      })]
+    }),
     children: jsxs("form", {
+      id: "servicePopupForm",
       onSubmit: handleSubmit(function (formValues) {
         return addNewService(formValues);
       }),
-      children: [jsxs(DialogTitle, {
+      children: [isLoading && jsx(Box, {
         sx: {
-          alignItems: 'center',
-          padding: '16px 16px 24px 16px'
+          position: 'relative'
         },
-        children: [jsxs(Box, {
+        children: jsx(LinearProgress, {
+          "data-testid": "loadingIndicator",
+          color: "secondary",
           sx: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            ' span': {
-              fontSize: '1rem',
-              fontWeight: 500,
-              fontStyle: 'normal',
-              lineHeight: '1.38',
-              letterSpacing: '0.12px'
-            }
-          },
-          children: [jsx(Typography, {
-            variant: "h5",
-            component: "span",
-            children: getTitleForVariant(t, servicePopupVariant)
-          }), jsx(CustomIconButton, {
-            "aria-label": "close",
-            onClick: closePopup,
-            "data-testid": "closePopupButtonCross",
-            sx: {
-              marginTop: 'auto',
-              marginBottom: 'auto',
-              '&.MuiButtonBase-root': {
-                color: 'geowebColors.greys.accessible'
-              }
-            },
-            children: jsx(Close, {})
-          })]
-        }), isLoading && jsx(Box, {
-          sx: {
-            position: 'relative'
-          },
-          children: jsx(LinearProgress, {
-            "data-testid": "loadingIndicator",
-            color: "secondary",
-            sx: {
-              position: 'absolute',
-              width: '100%',
-              top: 8
-            }
+            position: 'absolute',
+            width: '100%',
+            top: 8
+          }
+        })
+      }), 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
           })
-        })]
-      }), jsxs(DialogContent, {
-        sx: {
-          padding: '8px 16px'
         },
-        children: [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
-            })
-          },
-          disabled: isServiceUrlDisabled || isLoading,
-          isReadOnly: isShowPopup,
-          inputSlotProps: {
-            disableUnderline: isShowPopup,
-            endAdornment: isShowPopup && jsx(InputAdornment, {
-              position: "end",
-              children: jsx(CustomIconButton, {
-                "aria-label": "copy url",
-                onClick: function onClick() {
-                  void navigator.clipboard.writeText(serviceUrl);
-                  showSnackbar(t('copy-url-message'));
-                },
-                sx: {
-                  marginTop: 0.5
-                },
-                children: jsx(Copy, {})
-              })
+        disabled: isServiceUrlDisabled || isLoading,
+        isReadOnly: isShowPopup,
+        inputSlotProps: {
+          disableUnderline: isShowPopup,
+          endAdornment: isShowPopup && jsx(InputAdornment, {
+            position: "end",
+            children: jsx(CustomIconButton, {
+              "aria-label": "copy url",
+              onClick: function onClick() {
+                void navigator.clipboard.writeText(serviceUrl);
+                showSnackbar(t('copy-url-message'));
+              },
+              sx: {
+                marginTop: 0.5
+              },
+              children: jsx(Copy, {})
             })
-          },
-          defaultValue: serviceUrl
-        }), jsx(ReactHookFormTextField, {
-          name: FormFields.serviceName,
-          label: t('service-name-label'),
-          rules: {
-            required: true,
-            validate: {
-              onValidateServiceName: onValidateServiceName
-            }
-          },
-          disabled: isShowPopup || isLoading,
-          isReadOnly: isShowPopup,
-          inputSlotProps: {
-            disableUnderline: isShowPopup
-          },
-          sx: style.textField,
-          defaultValue: serviceName
-        }), jsx(ReactHookFormTextField, {
-          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: ""
-        }), !isServiceUrlDisabled && jsx(InitialValidationsTrigger, {
-          trigger: trigger,
-          getValues: getValues,
-          onValidField: fetchServiceData
-        })]
-      }), jsx(DialogActions, {
-        sx: {
-          padding: 2
+          })
         },
-        children: isShowPopup ? jsx(Button, {
-          onClick: function onClick() {
-            return closePopup();
-          },
-          variant: "tertiary",
-          sx: {
-            width: '117px'
-          },
-          children: t('close')
-        }) : jsxs(Fragment, {
-          children: [jsx(Button, {
-            onClick: closePopup,
-            "data-testid": "closePopupButtonCancel",
-            variant: "tertiary",
-            sx: {
-              width: '117px'
-            },
-            children: t('cancel')
-          }), jsx(Button, {
-            type: "submit",
-            variant: "primary",
-            disabled: isSubmitDisabled || isLoading,
-            "data-testid": "saveServiceButton",
-            sx: {
-              width: '117px',
-              marginLeft: '16px!important'
-            },
-            children: t('save')
-          })]
-        })
+        defaultValue: serviceUrl
+      }), jsx(ReactHookFormTextField, {
+        name: FormFields.serviceName,
+        label: t('service-name-label'),
+        rules: {
+          required: true,
+          validate: {
+            onValidateServiceName: onValidateServiceName
+          }
+        },
+        disabled: isShowPopup || isLoading,
+        isReadOnly: isShowPopup,
+        inputSlotProps: {
+          disableUnderline: isShowPopup
+        },
+        sx: style.textField,
+        defaultValue: serviceName
+      }), jsx(ReactHookFormTextField, {
+        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: ""
+      }), !isServiceUrlDisabled && jsx(InitialValidationsTrigger, {
+        trigger: trigger,
+        getValues: getValues,
+        onValidField: fetchServiceData
       })]
     })
   });
@@ -3209,4 +3190,4 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
   });
 };
 
-export { AllChipConnect, 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, getServiceFailedUpdateMessage, getServiceSuccesUpdateMessage, getSuccesMessage, isUserAddedService, layerSelectActions, initialState as layerSelectInitialState, layerSelectListener, layerSelectMiddlewares, layerSelectReducer, layerSelectReducersMap, selectors as layerSelectSelectors, layerSelectTranslations, types as layerSelectTypes, useAppSelector };
+export { AllChipConnect, 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 };