@opengeoweb/warnings 12.12.0 → 12.13.0

package/index.esm.js

@@ -3,11 +3,11 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Polygons, ExitDomain, Share, Edit, Delete, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Snow, Lightning, Fog, Wind, Thunderstorm, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, DrawPolygon, Visibility, Add, ArrowUpCompact, ArrowDownCompact, breakpoints, DragHandle, Options, Close, ChevronDown, ChevronUp, Copy, Update, Cancel, Success, Expire, Remove } from '@opengeoweb/theme';
 import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawingToolSelectors, layerSelectors, uiSelectors, drawingToolActions, layerActions, mapListener, layersListener, drawingToolListener, syncGroupsListener, openlayersListener, syncGroupsReducer, drawingToolReducer, uiReducer, layerReducer, mapReducer, useSetupDialog, genericSelectors, useUpdateSharedData, genericActions, selectorMemoizationOptions } from '@opengeoweb/store';
 import { defaultPolygon, emptyGeoJSON, MapControlButton, getIcon, rewindGeometry, getGeoJSONPropertyValue, currentlySupportedDrawModes, defaultLayers, viewUtils, OpenLayersMapView, MapControls, OpenLayersZoomControl, OpenLayersLayer, OpenLayersFeatureLayer, genericOpenLayersFeatureStyle } from '@opengeoweb/webmap-react';
-import { SHARED_NAMESPACE, useConfirmationDialog, dateUtils, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, sessionStorageProvider, ConfirmationDialog, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, FilterChip, TooltipSelect, usePreventBrowserClose, CustomToggleButton, Filter, FilterOption, StatusTag, LastUpdateTime, getAxiosErrorMessage, ErrorBoundary } from '@opengeoweb/shared';
+import { SHARED_NAMESPACE, useConfirmationDialog, dateUtils, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, sessionStorageProvider, ConfirmationDialog, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, FilterChip, TooltipSelect, LastUpdateTime, usePreventBrowserClose, CustomToggleButton, Filter, FilterOption, StatusTag, getAxiosErrorMessage, ErrorBoundary } from '@opengeoweb/shared';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, current, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { defaultBbox } from '@opengeoweb/core';
 import { FORM_FIELDS_NAMESPACE, useDraftFormHelpers, ReactHookFormSelect, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, errorMessages, isEmpty, ReactHookFormDateTime, isXHoursAfter, isXHoursBefore } from '@opengeoweb/form-fields';
-import { SA_NAMESPACE, isInstanceOfCancelSigmet, getDefaultValidFromValue, isInstanceOfCancelAirmet, getTacGeometry, getMaxPolygonPoints, getDefaultValidUntilValue, useShortTestHelpers, ProductAction, SigmetForm, AirmetForm, getConfirmationDialogCancelLabel, getConfirmationDialogButtonLabel, getConfirmationDialogContent, getConfirmationDialogTitle, isVAPhenomenon, CancelSigmetVolcanicMovements, createAirmetPostParameter, createSigmetPostParameter, prepareCancelSigmet, getProductFormMode } from '@opengeoweb/sigmet-airmet';
+import { SA_NAMESPACE, isInstanceOfCancelSigmet, getDefaultValidFromValue, isInstanceOfCancelAirmet, getDefaultValidUntilValue, useShortTestHelpers, ProductAction, SigmetForm, AirmetForm, getConfirmationDialogCancelLabel, getConfirmationDialogButtonLabel, getConfirmationDialogContent, getConfirmationDialogTitle, isVAPhenomenon, CancelSigmetVolcanicMovements, createAirmetPostParameter, createSigmetPostParameter, prepareCancelSigmet, getProductFormMode } from '@opengeoweb/sigmet-airmet';
 import { LayerType, generateMapId } from '@opengeoweb/webmap';
 import { t } from 'i18next';
 import { useTranslation } from 'react-i18next';
@@ -218,9 +218,7 @@ var en = {
 	"maritime-add-area": "Add",
 	"maritime-no-area-selected": "(no area selected)",
 	"maritime-no-district-selected": "(no district selected)",
-	"maritime-backing": "Backing",
-	"maritime-veering": "Veering",
-	"maritime-no-change": "No change",
+	"maritime-no-change-selected": "(no change selected)",
 	"maritime-windforce": "{{value}} Bft",
 	"maritime-header-direction": "Direction",
 	"maritime-header-direction-from": "Direction from",
@@ -229,22 +227,25 @@ var en = {
 	"maritime-header-areas": "Areas",
 	"maritime-header-districts": "Districts",
 	"maritime-header-change": "Change",
-	"maritime-direction-n": "North",
-	"maritime-direction-nne": "North to Northeast",
-	"maritime-direction-ne": "Northeast",
-	"maritime-direction-nen": "Northeast to North",
-	"maritime-direction-e": "East",
-	"maritime-direction-ese": "East to Southeast",
-	"maritime-direction-se": "Southeast",
-	"maritime-direction-ses": "Southeast to South",
-	"maritime-direction-s": "South",
-	"maritime-direction-ssw": "South to Southwest",
-	"maritime-direction-sw": "Southwest",
-	"maritime-direction-sww": "Southwest to West",
-	"maritime-direction-w": "West",
-	"maritime-direction-wnw": "West to Northwest",
-	"maritime-direction-nw": "Northwest",
-	"maritime-direction-nwn": "Northwest to North",
+	"maritime-direction-N": "North",
+	"maritime-direction-NNE": "North to Northeast",
+	"maritime-direction-NE": "Northeast",
+	"maritime-direction-ENE": "East to Northeast",
+	"maritime-direction-E": "East",
+	"maritime-direction-ESE": "East to Southeast",
+	"maritime-direction-SE": "Southeast",
+	"maritime-direction-SSE": "South to Southeast",
+	"maritime-direction-S": "South",
+	"maritime-direction-SSW": "South to Southwest",
+	"maritime-direction-SW": "Southwest",
+	"maritime-direction-WSW": "West to Southwest",
+	"maritime-direction-W": "West",
+	"maritime-direction-WNW": "West to Northwest",
+	"maritime-direction-NW": "Northwest",
+	"maritime-direction-NNW": "North to Northwest",
+	"maritime-change-NO_CHANGE": "No change",
+	"maritime-change-BACKING": "Backing",
+	"maritime-change-VEERING": "Veering",
 	"maritime-delete-button": "Delete",
 	"maritime-retract-warning": "Retract warning",
 	"maritime-no-change-of-direction": "(no change of direction)",
@@ -252,17 +253,19 @@ var en = {
 	"maritime-retract-dialog-description-suffix": "will be removed",
 	"maritime-retract-dialog-empty-warning-description": "The warning will be retracted",
 	"maritime-retract-dialog-confirm": "Retract",
-	"maritime-retract-success": "Warning retracted successfully",
 	"maritime-clear-dialog-title": "Clear all",
 	"maritime-clear-dialog-description": "All warnings will be removed from the list",
-	"maritime-clear-success": "Warning list cleared successfully",
 	"maritime-warning-title-coastal": "Warning Maritime - Coastal Waters",
 	"maritime-warning-title-northsea": "Warning Maritime - North Sea Districts",
 	"maritime-domain-coastal": "Coastal Waters",
 	"maritime-domain-northsea": "North Sea Districts",
 	"maritime-editor-on": "You are now the editor of the Maritime Warnings for {{domain}}",
 	"maritime-editor-off": "You are now no longer the editor of the Maritime Warnings for {{domain}}",
-	"maritime-warning-post-success": "Warning published successfully"
+	"maritime-warning-post-success": "Warning published successfully",
+	"maritime-loading-config": "Loading config...",
+	"maritime-config-error": "Something went wrong with loading the configuration file",
+	"maritime-warning-validfrom": "Start time: ",
+	"maritime-warning-validuntil": "End time: "
 };
 var nl = {
 	"drawing-tool-form-tools": "Gereedschap",
@@ -419,9 +422,10 @@ var nl = {
 	"maritime-add-area": "Toevoegen",
 	"maritime-no-area-selected": "(geen gebied geselecteerd)",
 	"maritime-no-district-selected": "(geen district geselecteerd)",
-	"maritime-backing": "Krimpend",
-	"maritime-veering": "Ruimend",
-	"maritime-no-change": "Geen wijziging",
+	"maritime-no-change-selected": "(geen wijziging geselecteerd)",
+	"maritime-change-NO_CHANGE": "Geen wijziging",
+	"maritime-change-BACKING": "Krimpend",
+	"maritime-change-VEERING": "Ruimend",
 	"maritime-windforce": "{{value}} Bft",
 	"maritime-header-direction": "Richting",
 	"maritime-header-direction-from": "Richting van",
@@ -430,35 +434,37 @@ var nl = {
 	"maritime-header-areas": "Gebieden",
 	"maritime-header-districts": "Districten",
 	"maritime-header-change": "Wijziging",
-	"maritime-direction-n": "Noord",
-	"maritime-direction-nne": "Noord tot noordoost",
-	"maritime-direction-ne": "Noordoost",
-	"maritime-direction-nen": "Noordoost tot noord",
-	"maritime-direction-e": "Oost",
-	"maritime-direction-ese": "Oost tot zuidoost",
-	"maritime-direction-se": "Zuidoost",
-	"maritime-direction-ses": "Zuidoost tot zuid",
-	"maritime-direction-s": "Zuid",
-	"maritime-direction-ssw": "Zuid tot zuidwest",
-	"maritime-direction-sw": "Zuidwest",
-	"maritime-direction-sww": "Zuidwest tot west",
-	"maritime-direction-w": "West",
-	"maritime-direction-wnw": "West tot noordwest",
-	"maritime-direction-nw": "Noordwest",
-	"maritime-direction-nwn": "Noordwest tot noord",
+	"maritime-direction-N": "Noord",
+	"maritime-direction-NNE": "Noord tot noordoost",
+	"maritime-direction-NE": "Noordoost",
+	"maritime-direction-ENE": "Oost tot noordoost",
+	"maritime-direction-E": "Oost",
+	"maritime-direction-ESE": "Oost tot zuidoost",
+	"maritime-direction-SE": "Zuidoost",
+	"maritime-direction-SSE": "Zuid tot zuidoost",
+	"maritime-direction-S": "Zuid",
+	"maritime-direction-SSW": "Zuid tot zuidwest",
+	"maritime-direction-SW": "Zuidwest",
+	"maritime-direction-WSW": "West tot zuidwest",
+	"maritime-direction-W": "West",
+	"maritime-direction-WNW": "West tot noordwest",
+	"maritime-direction-NW": "Noordwest",
+	"maritime-direction-NNW": "Noord tot noordwest",
 	"maritime-delete-button": "Verwijderen",
 	"maritime-retract-warning": "Waarschuwing intrekken",
 	"maritime-retract-dialog-no-change": "(geen wijziging in richting)",
 	"maritime-retract-dialog-empty-warning-description": "De waarschuwing wordt verwijderd",
 	"maritime-retract-dialog-description-suffix": "wordt verwijderd",
 	"maritime-retract-dialog-confirm": "Intrekken",
-	"maritime-retract-success": "Waarschuwing succesvol ingetrokken",
 	"maritime-clear-dialog-title": "Wissen",
 	"maritime-clear-dialog-description": "Alle waarschuwingen worden verwijderd",
-	"maritime-clear-success": "Alle waarchuwingen zijn verwijderd",
 	"maritime-warning-title-coastal": "Maritieme Waarschuwing - Kustgebieden",
 	"maritime-warning-title-northsea": "Maritieme Waarschuwing - Noordzee Districten",
-	"maritime-warning-post-success": "Waarschuwing succesvol gepubliceerd"
+	"maritime-warning-post-success": "Waarschuwing succesvol gepubliceerd",
+	"maritime-loading-config": "Laden van configuratie...",
+	"maritime-config-error": "Er is iets misgegaan bij het laden van het configuratiebestand",
+	"maritime-warning-validfrom": "Start tijd: ",
+	"maritime-warning-validuntil": "Eind tijd: "
 };
 var fi = {
 	"drawing-tool-form-tools": "Työkalut",
@@ -2008,8 +2014,9 @@ var getPublicWarningList = function getPublicWarningList(auth) {
     headers: getHeaders(auth)
   }).then(handleResponse).then(function (warnings) {
     return warnings.map(function (warning) {
+      var _warning$warningDetai;
       return Object.assign({}, warning, {
-        type: 'public'
+        type: ((_warning$warningDetai = warning.warningDetail) == null ? void 0 : _warning$warningDetai.domain) || 'public'
       });
     });
   });
@@ -2027,13 +2034,26 @@ var updatePublicWarning = function updatePublicWarning(warningId, auth, data) {
     body: JSON.stringify(data)
   }).then(handleResponse);
 };
-var postWarning = function postWarning(auth, data) {
+var postPublicWarning = function postPublicWarning(auth, data) {
   return fetch(publicWarningBaseUrl + "/warnings/", {
     headers: getHeaders(auth),
     method: 'POST',
     body: JSON.stringify(data)
   }).then(handleResponse);
 };
+var postMaritimeWarnings = function postMaritimeWarnings(auth, data) {
+  return fetch(publicWarningBaseUrl + "/maritime/", {
+    headers: getHeaders(auth),
+    method: 'POST',
+    body: JSON.stringify(data)
+  }).then(handleResponse);
+};
+var updateMaritimeWarningsEditor = function updateMaritimeWarningsEditor(domain, isEditor, auth, force) {
+  return fetch(publicWarningBaseUrl + "/maritime/" + domain + "?editor=" + (isEditor ? 'true' : 'false') + "&force=" + (force ? 'true' : 'false'), {
+    headers: getHeaders(auth),
+    method: 'POST'
+  }).then(handleResponse);
+};
 var deleteWarning = function deleteWarning(warningId, auth) {
   return fetch(publicWarningBaseUrl + "/warnings/" + warningId + "?delete=true", {
     headers: getHeaders(auth),
@@ -2117,6 +2137,12 @@ var deleteDrawing = function deleteDrawing(auth, drawingId) {
     headers: getHeaders(auth)
   }).then(handleResponse);
 };
+var getMaritimeWarningsConfig = function getMaritimeWarningsConfig(auth) {
+  var url = publicWarningBaseUrl + "/maritime-warnings-config";
+  return fetch(url, {
+    headers: getHeaders(auth)
+  }).then(handleResponse);
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2145,6 +2171,11 @@ var PublicWarningStatus;
   PublicWarningStatus["IGNORED"] = "IGNORED";
   PublicWarningStatus["WITHDRAWN"] = "WITHDRAWN";
 })(PublicWarningStatus || (PublicWarningStatus = {}));
+var MaritimeWarningAction;
+(function (MaritimeWarningAction) {
+  MaritimeWarningAction["SELECT"] = "SELECT";
+  MaritimeWarningAction["UPDATE"] = "UPDATE";
+})(MaritimeWarningAction || (MaritimeWarningAction = {}));
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3052,7 +3083,7 @@ var useMutateWarning = function useMutateWarning(snackBarMessage) {
       if (id) {
         return updatePublicWarning(id, auth, data);
       }
-      return postWarning(auth, data);
+      return postPublicWarning(auth, data);
     },
     onError: function onError(error) {
       void queryClient.invalidateQueries({
@@ -3311,7 +3342,7 @@ var useMutateDeleteDrawing = function useMutateDeleteDrawing() {
     }
   });
 };
-var usePostMaritimeWarning = function usePostMaritimeWarning() {
+var usePostMaritimeWarnings = function usePostMaritimeWarnings() {
   var _useAuthenticationCon6 = useAuthenticationContext(),
     auth = _useAuthenticationCon6.auth;
   var queryClient = useQueryClient();
@@ -3321,10 +3352,16 @@ var usePostMaritimeWarning = function usePostMaritimeWarning() {
       if (!auth) {
         throw new Error('Authentication context not found');
       }
-      return postWarning(auth, data);
+      return postMaritimeWarnings(auth, data);
     },
-    onSuccess: function () {
-      var _onSuccess4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+    onSuccess: function onSuccess() {
+      dispatch(snackbarActions.openSnackbar({
+        type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
+        key: 'maritime-warning-post-success'
+      }));
+    },
+    onSettled: function () {
+      var _onSettled = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
         return _regeneratorRuntime().wrap(function _callee6$(_context6) {
           while (1) switch (_context6.prev = _context6.next) {
             case 0:
@@ -3333,23 +3370,40 @@ var usePostMaritimeWarning = function usePostMaritimeWarning() {
                 queryKey: ['public-warning-list']
               });
             case 2:
-              dispatch(snackbarActions.openSnackbar({
-                type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
-                key: 'maritime-warning-post-success'
-              }));
-            case 3:
             case "end":
               return _context6.stop();
           }
         }, _callee6);
       }));
-      function onSuccess() {
-        return _onSuccess4.apply(this, arguments);
+      function onSettled() {
+        return _onSettled.apply(this, arguments);
       }
-      return onSuccess;
+      return onSettled;
     }()
   });
 };
+var useMutateMaritimeWarningsEditor = function useMutateMaritimeWarningsEditor() {
+  var _useAuthenticationCon7 = useAuthenticationContext(),
+    auth = _useAuthenticationCon7.auth;
+  return useMutation({
+    mutationFn: function mutationFn(_ref0) {
+      var domain = _ref0.domain,
+        isEditor = _ref0.isEditor,
+        force = _ref0.force;
+      if (!auth) {
+        throw new Error('Authentication context not found');
+      }
+      return updateMaritimeWarningsEditor(domain, isEditor, auth, force);
+    }
+  });
+};
+var useMaritimeWarningsConfig = function useMaritimeWarningsConfig(disabled) {
+  if (disabled === void 0) {
+    disabled = false;
+  }
+  var maritimeConfigQuery = useAuthQuery(['maritime-warnings-config'], getMaritimeWarningsConfig, disabled);
+  return maritimeConfigQuery;
+};
 
 var getDeleteDescription = function getDeleteDescription(objectName, t) {
   return t('delete-dialog-description') + " \"" + objectName + "\"?";
@@ -4757,15 +4811,12 @@ var flattenPublicWarning = function flattenPublicWarning(publicWarning) {
   }
   return {};
 };
-var transformAirmetToWarningFormat = function transformAirmetToWarningFormat(apiAirmet, productConfig) {
+var transformAirmetToWarningFormat = function transformAirmetToWarningFormat(apiAirmet) {
+  var _airmet$startGeometry;
   var airmet = apiAirmet.airmet;
-  var tacGeometry = getTacGeometry({
-    startGeometry: airmet.startGeometry,
-    startGeometryIntersect: airmet.startGeometryIntersect,
-    maxPoints: getMaxPolygonPoints(airmet.locationIndicatorATSR, productConfig)
-  });
+  var tacGeometry = (_airmet$startGeometry = airmet.startGeometryIntersect) != null ? _airmet$startGeometry : airmet.startGeometry;
   var areas = [];
-  if (airmet.startGeometry) {
+  if (airmet.startGeometry && tacGeometry.features.length > 0) {
     areas.push({
       areaId: airmet.uuid + "-start",
       geoJSON: Object.assign({}, tacGeometry, {
@@ -4802,18 +4853,11 @@ var transformAirmetToWarningFormat = function transformAirmetToWarningFormat(api
     type: 'airmet'
   };
 };
-var transformSigmetToWarningFormat = function transformSigmetToWarningFormat(apiSigmet, productConfig) {
+var transformSigmetToWarningFormat = function transformSigmetToWarningFormat(apiSigmet) {
+  var _sigmet$startGeometry, _sigmet$endGeometryIn;
   var sigmet = apiSigmet.sigmet;
-  var tacGeometryStart = getTacGeometry({
-    startGeometry: sigmet.startGeometry,
-    startGeometryIntersect: sigmet.startGeometryIntersect,
-    maxPoints: getMaxPolygonPoints(sigmet.locationIndicatorATSR, productConfig)
-  });
-  var tacGeometryEnd = getTacGeometry({
-    startGeometry: sigmet.endGeometry,
-    startGeometryIntersect: sigmet.endGeometryIntersect,
-    maxPoints: getMaxPolygonPoints(sigmet.locationIndicatorATSR, productConfig)
-  });
+  var tacGeometryStart = (_sigmet$startGeometry = sigmet.startGeometryIntersect) != null ? _sigmet$startGeometry : sigmet.startGeometry;
+  var tacGeometryEnd = (_sigmet$endGeometryIn = sigmet.endGeometryIntersect) != null ? _sigmet$endGeometryIn : sigmet.endGeometry;
   var areas = [];
   if (sigmet.startGeometry) {
     areas.push({
@@ -5729,7 +5773,7 @@ var AreaList = /*#__PURE__*/React__default.memo(function (_ref2) {
   var _useFilterChipSelect = useFilterChipSelect({
       selectedIds: selected,
       assignedIds: areas.map(function (area) {
-        return area.id;
+        return area.districtName;
       }),
       onSelectMultiple: onSelectMultipleAreas,
       onToggleSelect: onToggleSelectArea
@@ -5751,20 +5795,20 @@ var AreaList = /*#__PURE__*/React__default.memo(function (_ref2) {
       }
     },
     children: areas.map(function (area) {
-      var isDisabled = disabled.includes(area.id);
-      var isSelected = !isDisabled && selected.includes(area.id);
+      var isDisabled = disabled.includes(area.districtName);
+      var isSelected = !isDisabled && selected.includes(area.districtName);
       return jsx(FilterChip, {
-        id: area.id,
-        label: area.label,
+        id: area.districtName,
+        label: area.districtName,
         isSelected: isSelected,
         isDisabled: isDisabled,
         onClick: function onClick(_ref, event) {
           if (!isReadOnly) {
-            handleChipClick == null || handleChipClick(area.id, event);
+            handleChipClick == null || handleChipClick(area.districtName, event);
           }
         },
         size: "medium"
-      }, area.id);
+      }, area.districtName);
     })
   });
 });
@@ -5838,7 +5882,7 @@ var AssignedAreas = function AssignedAreas(_ref) {
     t = _useWarningsTranslati.t;
   var assignedAreaIds = React__default.useMemo(function () {
     return new Set(assignedAreas.map(function (area) {
-      return area.id;
+      return area.districtName;
     }));
   }, [assignedAreas]);
   // can add the selected areas when they don't appear in the assigned area list
@@ -5895,21 +5939,21 @@ var AssignedAreas = function AssignedAreas(_ref) {
         pointerEvents: !isReadOnly ? 'auto' : 'none'
       },
       children: assignedAreas.map(function (area) {
-        var isSelected = selectedAreaIds.includes(area.id);
+        var isSelected = selectedAreaIds.includes(area.districtName);
         return jsx(FilterChip, {
           size: "small",
-          id: area.id,
-          label: area.label,
+          id: area.districtName,
+          label: area.districtName,
           isSelected: isSelected,
           onClick: function onClick(_chipRef, event) {
             if (!isReadOnly) {
-              handleChipClick(area.id, event);
+              handleChipClick(area.districtName, event);
             }
           },
           onClickIcon: isSelected && !isReadOnly ? function () {
-            onDeleteClick(area.id);
+            onDeleteClick(area.districtName);
           } : undefined
-        }, area.id);
+        }, area.districtName);
       })
     }), !isReadOnly && jsx(AddButton, {
       show: canAddSelectedAreas,
@@ -5951,7 +5995,9 @@ var WarningListSelect = /*#__PURE__*/React__default.memo(function (_ref) {
     gridArea = _ref.gridArea,
     additionalStyling = _ref.additionalStyling,
     _ref$isReadOnly = _ref.isReadOnly,
-    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly;
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$displayEmpty = _ref.displayEmpty,
+    displayEmpty = _ref$displayEmpty === void 0 ? false : _ref$displayEmpty;
   var currentIndex = options.findIndex(function (option) {
     return option.value === value;
   });
@@ -5969,6 +6015,7 @@ var WarningListSelect = /*#__PURE__*/React__default.memo(function (_ref) {
       isEnabled: !isReadOnly,
       disabled: isReadOnly,
       value: value != null ? value : '',
+      displayEmpty: displayEmpty,
       SelectDisplayProps: {
         'aria-label': label
       },
@@ -6124,126 +6171,6 @@ var WindForceSelect = function WindForceSelect(_ref) {
   });
 };
 
-var windDirections = [{
-  value: 'NORTH',
-  label: function label(t) {
-    return t('maritime-direction-n');
-  }
-}, {
-  value: 'NORTH_TO_NORTHEAST',
-  label: function label(t) {
-    return t('maritime-direction-nne');
-  }
-}, {
-  value: 'NORTHEAST',
-  label: function label(t) {
-    return t('maritime-direction-ne');
-  }
-}, {
-  value: 'NORTHEAST_TO_NORTH',
-  label: function label(t) {
-    return t('maritime-direction-nen');
-  }
-}, {
-  value: 'EAST',
-  label: function label(t) {
-    return t('maritime-direction-e');
-  }
-}, {
-  value: 'EAST_TO_SOUTHEAST',
-  label: function label(t) {
-    return t('maritime-direction-ese');
-  }
-}, {
-  value: 'SOUTHEAST',
-  label: function label(t) {
-    return t('maritime-direction-se');
-  }
-}, {
-  value: 'SOUTHEAST_TO_SOUTH',
-  label: function label(t) {
-    return t('maritime-direction-ses');
-  }
-}, {
-  value: 'SOUTH',
-  label: function label(t) {
-    return t('maritime-direction-s');
-  }
-}, {
-  value: 'SOUTH_TO_SOUTHWEST',
-  label: function label(t) {
-    return t('maritime-direction-ssw');
-  }
-}, {
-  value: 'SOUTHWEST',
-  label: function label(t) {
-    return t('maritime-direction-sw');
-  }
-}, {
-  value: 'SOUTHWEST_TO_WEST',
-  label: function label(t) {
-    return t('maritime-direction-sww');
-  }
-}, {
-  value: 'WEST',
-  label: function label(t) {
-    return t('maritime-direction-w');
-  }
-}, {
-  value: 'WEST_TO_NORTHWEST',
-  label: function label(t) {
-    return t('maritime-direction-wnw');
-  }
-}, {
-  value: 'NORTHWEST',
-  label: function label(t) {
-    return t('maritime-direction-nw');
-  }
-}, {
-  value: 'NORTHWEST_TO_NORTH',
-  label: function label(t) {
-    return t('maritime-direction-nwn');
-  }
-}];
-var change = [{
-  value: 'NO_CHANGE',
-  label: function label(t) {
-    return t('maritime-no-change');
-  }
-}, {
-  value: 'BACKING',
-  label: function label(t) {
-    return t('maritime-backing');
-  }
-}, {
-  value: 'VEERING',
-  label: function label(t) {
-    return t('maritime-veering');
-  }
-}];
-var windForce = [{
-  level: WindForceLevel.extreme,
-  value: '12'
-}, {
-  level: WindForceLevel.extreme,
-  value: '11'
-}, {
-  level: WindForceLevel.extreme,
-  value: '10'
-}, {
-  level: WindForceLevel.severe,
-  value: '9'
-}, {
-  level: WindForceLevel.severe,
-  value: '8'
-}, {
-  level: WindForceLevel.moderate,
-  value: '7'
-}, {
-  level: WindForceLevel.moderate,
-  value: '6'
-}];
-
 var WarningListDragHandle = function WarningListDragHandle() {
   return jsx(CustomIconButton, {
     className: "handle",
@@ -6260,6 +6187,38 @@ var WarningListDragHandle = function WarningListDragHandle() {
   });
 };
 
+var getWindDirectionsFromConfig = function getWindDirectionsFromConfig(directionConfig, t) {
+  return directionConfig.map(function (direction) {
+    return {
+      value: direction.value,
+      label: t("maritime-direction-" + direction.value) || direction.label
+    };
+  });
+};
+var getWindForceFromConfig = function getWindForceFromConfig(forceConfig) {
+  if (forceConfig.maritimeLevelsSummer) {
+    return forceConfig.maritimeLevelsSummer.map(function (force) {
+      return {
+        value: force.windForce,
+        level: force.level
+      };
+    });
+  }
+  return forceConfig.maritimeLevelsWinter.map(function (force) {
+    return {
+      value: force.windForce,
+      level: force.level
+    };
+  });
+};
+var getChangeTypeFromConfig = function getChangeTypeFromConfig(changeConfig, t) {
+  return changeConfig.map(function (change) {
+    return {
+      value: change.key,
+      label: t("maritime-change-" + change.key) || change.label
+    };
+  });
+};
 var WarningListItem$1 = /*#__PURE__*/React__default.memo(function (_ref) {
   var warning = _ref.warning,
     areas = _ref.areas,
@@ -6272,10 +6231,11 @@ var WarningListItem$1 = /*#__PURE__*/React__default.memo(function (_ref) {
     onRemoveArea = _ref.onRemoveArea,
     isReadOnly = _ref.isReadOnly,
     _ref$shouldShowDistri = _ref.shouldShowDistricts,
-    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri;
+    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri,
+    maritimeConfig = _ref.maritimeConfig;
   var areasById = React__default.useMemo(function () {
     return new Map(areas.map(function (area) {
-      return [area.id, area];
+      return [area.districtName, area];
     }));
   }, [areas]);
   var assignedAreas = React__default.useMemo(function () {
@@ -6316,19 +6276,20 @@ var WarningListItem$1 = /*#__PURE__*/React__default.memo(function (_ref) {
     onAddClick(warning.id);
   }, [warning.id, onAddClick]);
   var shouldDisableDirTo = warning.changeType === 'NO_CHANGE' || isReadOnly;
+  var changeOptions = getChangeTypeFromConfig(maritimeConfig.changeType, t);
   return jsxs(StyledItem, {
     "data-testid": "maritime-warning",
     children: [!isReadOnly && jsx(WarningListDragHandle, {}), jsx(WarningListSelect, {
       gridArea: "dirFrom",
       label: t('maritime-header-direction-from'),
-      options: windDirections,
+      options: getWindDirectionsFromConfig(maritimeConfig.windDirectionDefinition, t),
       onChange: handleChangeFromDirection,
       value: warning.windDirectionFrom,
       isReadOnly: isReadOnly
     }), jsx(WindForceSelect, {
       gridArea: "windForce",
       value: warning.windForce,
-      options: windForce,
+      options: getWindForceFromConfig(maritimeConfig.maritimeLevelDefinition),
       onChange: handleChangeWindForce,
       isReadOnly: isReadOnly
     }), jsx(AssignedAreas, {
@@ -6343,14 +6304,31 @@ var WarningListItem$1 = /*#__PURE__*/React__default.memo(function (_ref) {
     }), jsx(WarningListSelect, {
       gridArea: "changeType",
       label: t('maritime-header-change'),
-      options: change,
+      options: changeOptions,
       onChange: handleChangeWindChangeType,
       value: warning.changeType,
-      isReadOnly: isReadOnly
+      isReadOnly: isReadOnly,
+      renderValue: function renderValue(value) {
+        if (value === '') {
+          return jsx(Typography, {
+            variant: "caption",
+            color: "textSecondary",
+            sx: {
+              alignSelf: 'center'
+            },
+            children: t('maritime-no-change-selected')
+          });
+        }
+        var option = changeOptions.find(function (item) {
+          return item.value === value;
+        });
+        return typeof (option == null ? void 0 : option.label) === 'function' ? option.label(t) : option == null ? void 0 : option.label;
+      },
+      displayEmpty: true
     }), jsx(WarningListSelect, {
       gridArea: "dirTo",
       label: t('maritime-header-direction-to'),
-      options: windDirections,
+      options: getWindDirectionsFromConfig(maritimeConfig.windDirectionDefinition, t),
       onChange: handleChangeToDirection,
       value: warning.windDirectionTo,
       isReadOnly: shouldDisableDirTo
@@ -6408,7 +6386,8 @@ var WarningList = function WarningList(_ref) {
     onMoveWarning = _ref.onMoveWarning,
     isReadOnly = _ref.isReadOnly,
     _ref$shouldShowDistri = _ref.shouldShowDistricts,
-    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri;
+    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri,
+    maritimeConfig = _ref.maritimeConfig;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var onSort = React__default.useCallback(function (event) {
@@ -6421,7 +6400,7 @@ var WarningList = function WarningList(_ref) {
       flexDirection: 'column',
       minHeight: 0,
       marginBottom: 1,
-      '--grid-columns': '30px 150px 60px 2fr 100px 150px 1fr'
+      '--grid-columns': '30px 150px 60px 2fr 150px 150px 1fr'
     },
     children: [jsxs(Box, {
       sx: (_sx = {
@@ -6469,7 +6448,8 @@ var WarningList = function WarningList(_ref) {
           onRemove: onRemoveWarning,
           onChange: onChangeWarning,
           onRemoveArea: onRemoveArea,
-          shouldShowDistricts: shouldShowDistricts
+          shouldShowDistricts: shouldShowDistricts,
+          maritimeConfig: maritimeConfig
         }, warning.id);
       })
     })]
@@ -6667,6 +6647,12 @@ function reducer(state, action) {
           selectedAreaIds: []
         });
       }
+    case 'submitWarnings':
+      {
+        return Object.assign({}, state, {
+          modified: false
+        });
+      }
     default:
       {
         return state;
@@ -6680,36 +6666,46 @@ function useMaritimeWarningsFormState() {
 function useConfirmRetractDialog(_ref) {
   var areas = _ref.areas,
     warnings = _ref.warnings,
+    maritimeConfig = _ref.maritimeConfig,
     onRemoveWarning = _ref.onRemoveWarning;
   var confirmDialog = useConfirmationDialog();
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
-  var getLabelFromOption = React__default.useCallback(function (options, value) {
-    var option = options.find(function (option) {
-      return option.value === value;
+  var getLabelFromWindDirectionConfig = React__default.useCallback(function (directionConfig, value) {
+    var option = directionConfig.find(function (direction) {
+      return direction.value === value;
     });
     if (!option) {
       return '';
     }
-    return typeof option.label === 'function' ? option.label(t) : option.label;
+    return t("maritime-direction-" + option.value);
+  }, [t]);
+  var getLabelFromChangeConfig = React__default.useCallback(function (changeConfig, value) {
+    var option = changeConfig.find(function (change) {
+      return change.key === value;
+    });
+    if (!option) {
+      return '';
+    }
+    return t("maritime-change-" + option.key);
   }, [t]);
   var getWarningDescription = React__default.useCallback(function (warning) {
     if (!isPublishedWarning(warning)) {
       return t('maritime-retract-dialog-empty-warning-description');
     }
-    var windDirectionFromLabel = getLabelFromOption(windDirections, warning.windDirectionFrom);
+    var windDirectionFromLabel = getLabelFromWindDirectionConfig(maritimeConfig.windDirectionDefinition, warning.windDirectionFrom);
     var areasById = new Map(areas.map(function (area) {
-      return [area.id, area];
+      return [area.districtName, area];
     }));
     var areaLabels = warning.assignedAreaIds.map(function (areaId) {
-      return areasById.get(areaId).label;
+      return areasById.get(areaId).districtName;
     });
-    var changeToLabel = warning.changeType === 'NO_CHANGE' ? t('maritime-retract-dialog-no-change') : getLabelFromOption(change, warning.changeType) + " " + getLabelFromOption(windDirections, warning.windDirectionTo);
+    var changeToLabel = warning.changeType === 'NO_CHANGE' ? t('maritime-retract-dialog-no-change') : getLabelFromChangeConfig(maritimeConfig.changeType, warning.changeType) + " " + getLabelFromWindDirectionConfig(maritimeConfig.windDirectionDefinition, warning.windDirectionTo);
     var warningDescription = [windDirectionFromLabel + " " + t('maritime-windforce', {
       value: warning.windForce
     })].concat(areaLabels, [changeToLabel]).join(', ');
     return warningDescription + ". " + t('maritime-retract-dialog-description-suffix');
-  }, [areas, t, getLabelFromOption]);
+  }, [getLabelFromWindDirectionConfig, maritimeConfig.windDirectionDefinition, maritimeConfig.changeType, areas, t, getLabelFromChangeConfig]);
   return {
     onRemoveWarningWithConfirmation: React__default.useCallback(/*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(id) {
@@ -6798,19 +6794,13 @@ var isWarningsValid = function isWarningsValid(warnings) {
     return !isWarningEmpty(warning) && isWarningValid(warning);
   });
 };
-// FIXME: should be based on the config from BE
-var getLevelFromWindForce = function getLevelFromWindForce(windForce) {
-  var force = parseInt(windForce, 10);
-  if (isNaN(force)) {
-    return '';
-  }
-  if (force < 8) {
-    return 'moderate';
-  }
-  if (force < 10) {
-    return 'severe';
-  }
-  return 'extreme';
+var getLevelFromWindForce = function getLevelFromWindForce(maritimeConfig, windForce) {
+  var _maritimeConfig$marit;
+  var period = maritimeConfig.maritimeLevelDefinition.maritimeLevelsSummer ? 'maritimeLevelsSummer' : 'maritimeLevelsWinter';
+  var levelInfo = (_maritimeConfig$marit = maritimeConfig.maritimeLevelDefinition) == null ? void 0 : _maritimeConfig$marit[period].find(function (level) {
+    return (level == null ? void 0 : level.windForce) === windForce;
+  });
+  return (levelInfo == null ? void 0 : levelInfo.level) || 'extreme';
 };
 var getType = function getType(domain) {
   switch (domain) {
@@ -6821,8 +6811,20 @@ var getType = function getType(domain) {
       return 'maritimeWarningNorthSea';
   }
 };
-var mapItemsToMaritimeWarnings = function mapItemsToMaritimeWarnings(warnings, domain, editor) {
+var mapItemsToMaritimeWarnings = function mapItemsToMaritimeWarnings(warnings, domain, maritimeConfig, editor) {
   var type = getType(domain);
+  if (warnings.length === 1 && warnings[0].assignedAreaIds.length === 0) {
+    // 1 warning without any areas means cancel/withdraw all warnings
+    return [{
+      type: type,
+      editor: editor,
+      status: PublicWarningStatus.PUBLISHED,
+      warningDetail: {
+        areas: [],
+        domain: type
+      }
+    }];
+  }
   return warnings.map(function (warning) {
     return {
       type: type,
@@ -6832,12 +6834,15 @@ var mapItemsToMaritimeWarnings = function mapItemsToMaritimeWarnings(warnings, d
         phenomenon: 'wind',
         validFrom: new Date().toISOString(),
         validUntil: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
-        level: getLevelFromWindForce(warning.windForce || ''),
+        level: getLevelFromWindForce(maritimeConfig, warning.windForce || ''),
         probability: 100,
         areas: warning.assignedAreaIds.map(function (areaId) {
+          var areaDetails = maritimeConfig.districtList[domain].find(function (district) {
+            return district.districtName === areaId;
+          });
           return {
             objectName: areaId,
-            geoJSON: {
+            geoJSON: (areaDetails == null ? void 0 : areaDetails.geoJSON) || {
               type: 'FeatureCollection',
               features: []
             }
@@ -6845,7 +6850,7 @@ var mapItemsToMaritimeWarnings = function mapItemsToMaritimeWarnings(warnings, d
         }),
         windDirectionFrom: warning.windDirectionFrom,
         windForce: warning.windForce,
-        changeType: warning.changeType,
+        changeType: warning.changeType || 'NO_CHANGE',
         windDirectionTo: warning.windDirectionTo,
         descriptionOriginal: '',
         descriptionTranslation: '',
@@ -6865,7 +6870,9 @@ var mapMaritimeWarningsToItems = function mapMaritimeWarningsToItems(warnings) {
       windDirectionFrom: warning.warningDetail.windDirectionFrom,
       windDirectionTo: warning.warningDetail.windDirectionTo,
       windForce: warning.warningDetail.windForce,
-      changeType: warning.warningDetail.changeType
+      changeType: warning.warningDetail.changeType,
+      validFrom: warning.warningDetail.validFrom,
+      validUntil: warning.warningDetail.validUntil
     };
   });
 };
@@ -6886,6 +6893,11 @@ var MaritimeWarningAvatar = function MaritimeWarningAvatar(_ref) {
   });
 };
 
+var getWarningsValidity = function getWarningsValidity(t, warnings) {
+  var validFrom = warnings.length > 0 && warnings[0].validFrom ? dateUtils.dateToString(dateUtils.createDate(warnings[0].validFrom), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH) : '';
+  var validUntil = warnings.length > 0 && warnings[0].validUntil ? dateUtils.dateToString(dateUtils.createDate(warnings[0].validUntil), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH) : '';
+  return validFrom && validUntil ? "" + t('maritime-warning-validfrom') + validFrom + " - " + t('maritime-warning-validuntil') + validUntil : '';
+};
 var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
   var _sx, _sx2, _sx3, _sx4;
   var areas = _ref.areas,
@@ -6904,9 +6916,14 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
     onMoveWarning = _ref.onMoveWarning,
     onToggleReadOnly = _ref.onToggleReadOnly,
     isReadOnly = _ref.isReadOnly,
+    shouldHideEditorToggle = _ref.shouldHideEditorToggle,
     _ref$shouldShowDistri = _ref.shouldShowDistricts,
     shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri,
-    editor = _ref.editor;
+    editor = _ref.editor,
+    error = _ref.error,
+    maritimeConfig = _ref.maritimeConfig,
+    _ref$lastUpdatedTime = _ref.lastUpdatedTime,
+    lastUpdatedTime = _ref$lastUpdatedTime === void 0 ? '' : _ref$lastUpdatedTime;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var showConfirmDialog = useConfirmationDialog();
@@ -6916,6 +6933,7 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
   var _useConfirmRetractDia = useConfirmRetractDialog({
       areas: areas,
       warnings: warnings,
+      maritimeConfig: maritimeConfig,
       onRemoveWarning: onRemoveWarning
     }),
     onRemoveWarningWithConfirmation = _useConfirmRetractDia.onRemoveWarningWithConfirmation;
@@ -6970,6 +6988,7 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
+  var validTimes = getWarningsValidity(t, warnings);
   return jsxs(Box, {
     sx: (_sx = {
       display: 'flex',
@@ -6986,26 +7005,61 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
     }, _sx["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
       padding: 3
     }, _sx),
-    children: [jsxs(Box, {
+    children: [error && jsx(AlertBanner, {
+      title: error.title,
+      severity: error.severity,
+      shouldClose: true
+    }), jsxs(Box, {
       sx: (_sx2 = {
         display: 'flex',
+        flexWrap: 'wrap',
         gap: 1,
-        alignItems: 'center'
+        alignItems: 'center',
+        width: '100%'
       }, _sx2["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
-        justifyContent: 'flex-end'
+        justifyContent: 'space-between'
       }, _sx2),
-      children: [jsx(SwitchButton, {
-        inActiveLabel: t('warning-editor-user-viewer'),
-        activeLabel: t('warning-editor-user-editor'),
-        checked: !isReadOnly,
-        onChange: onSwitchMode
+      children: [jsx(Typography, {
+        sx: {
+          color: 'geowebColors.captions.captionStatus.rgba',
+          fontSize: '10px',
+          lineHeight: '1.6',
+          letterSpacing: '0.33px',
+          minWidth: '300px'
+        },
+        children: validTimes
       }), jsx(Box, {
         sx: {
-          width: '16px',
-          marginLeft: 1
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 1,
+          alignItems: 'center',
+          height: '38px'
         },
-        children: editor && jsx(MaritimeWarningAvatar, {
-          editor: editor
+        children: !shouldHideEditorToggle && jsxs(Fragment, {
+          children: [jsx(SwitchButton, {
+            inActiveLabel: t('warning-editor-user-viewer'),
+            activeLabel: t('warning-editor-user-editor'),
+            checked: !isReadOnly,
+            onChange: onSwitchMode
+          }), jsx(Box, {
+            sx: {
+              width: '16px',
+              marginLeft: 1
+            },
+            children: editor && jsx(MaritimeWarningAvatar, {
+              editor: editor
+            })
+          }), lastUpdatedTime && jsx(Box, {
+            sx: {
+              "float": 'left',
+              paddingTop: 0.5
+            },
+            children: jsx(LastUpdateTime, {
+              lastUpdateTime: lastUpdatedTime,
+              showRefreshButton: false
+            })
+          })]
         })
       })]
     }), jsx(AreaList, {
@@ -7027,7 +7081,8 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
       onRemoveArea: onRemoveArea,
       onMoveWarning: onMoveWarning,
       shouldShowDistricts: shouldShowDistricts,
-      isReadOnly: isReadOnly
+      isReadOnly: isReadOnly,
+      maritimeConfig: maritimeConfig
     }), !isReadOnly && jsxs(Button, {
       onClick: onAddWarning,
       variant: "tertiary",
@@ -7075,82 +7130,62 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
   });
 };
 
-var areasByDomain = {
-  northSeaDistricts: [{
-    id: 'DOVER',
-    label: 'Dover'
-  }, {
-    id: 'THAMES',
-    label: 'Thames'
-  }, {
-    id: 'HUMBER',
-    label: 'Humber'
-  }, {
-    id: 'DOGGER',
-    label: 'Dogger'
-  }, {
-    id: 'GERMAN_BIGHT',
-    label: 'German Bight'
-  }],
-  coastalWaters: [{
-    id: 'VLISSINGEN',
-    label: 'Vlissingen'
-  }, {
-    id: 'ZIERIKZEE',
-    label: 'Zierikzee'
-  }, {
-    id: 'HOEK_VAN_HOLLAND',
-    label: 'Hoek van Holland'
-  }, {
-    id: 'IJMUIDEN',
-    label: 'IJmuiden'
-  }, {
-    id: 'TEXEL',
-    label: 'Texel'
-  }, {
-    id: 'HARLINGEN',
-    label: 'Harlingen'
-  }, {
-    id: 'ROTTUM',
-    label: 'Rottum'
-  }, {
-    id: 'DELFZIJL',
-    label: 'Delfzijl'
-  }, {
-    id: 'IJSSELMEER',
-    label: 'IJsselmeer'
-  }, {
-    id: 'MARKERMEER',
-    label: 'Markermeer'
-  }]
-};
-
 var MaritimeWarningsFormConnect = function MaritimeWarningsFormConnect(_ref) {
   var domain = _ref.domain,
     onPreventCloseView = _ref.onPreventCloseView,
     onModifyForm = _ref.onModifyForm;
-  var areas = areasByDomain[domain];
-  var shouldShowDistricts = domain === 'northSeaDistricts';
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var _useAuthenticationCon = useAuthenticationContext$1(),
-    auth = _useAuthenticationCon.auth;
+    auth = _useAuthenticationCon.auth,
+    isLoggedIn = _useAuthenticationCon.isLoggedIn;
+  var confirmDialog = useConfirmationDialog();
+  var _useState = useState(),
+    error = _useState[0],
+    setError = _useState[1];
+  var domainLabel = React__default.useMemo(function () {
+    return domain === 'coastalWaters' ? t('maritime-domain-coastal') : t('maritime-domain-northsea');
+  }, [domain, t]);
+  var _useMaritimeWarningsC = useMaritimeWarningsConfig(),
+    maritimeConfig = _useMaritimeWarningsC.data,
+    isFetchingConfig = _useMaritimeWarningsC.isFetching,
+    configError = _useMaritimeWarningsC.error,
+    refetchConfig = _useMaritimeWarningsC.refetch;
+  var _usePublicWarnings = usePublicWarnings(),
+    data = _usePublicWarnings.data,
+    isFetchingWarnings = _usePublicWarnings.isFetching,
+    refetchWarnings = _usePublicWarnings.refetch,
+    dataUpdatedAt = _usePublicWarnings.dataUpdatedAt;
+  var _usePostMaritimeWarni = usePostMaritimeWarnings(),
+    postWarnings = _usePostMaritimeWarni.mutate,
+    publishError = _usePostMaritimeWarni.error;
+  var _useMutateMaritimeWar = useMutateMaritimeWarningsEditor(),
+    mutateEditor = _useMutateMaritimeWar.mutate,
+    editorError = _useMutateMaritimeWar.error;
+  var _useState2 = useState(isFetchingWarnings),
+    hasFetched = _useState2[0],
+    setHasFetched = _useState2[1];
+  React__default.useEffect(function () {
+    if (isFetchingWarnings) {
+      setHasFetched(true);
+    }
+  }, [isFetchingWarnings]);
+  var lastUpdateTime = dateUtils.dateToString(new Date(dataUpdatedAt), dateUtils.DATE_FORMAT_HOURS);
+  var areas = maritimeConfig == null ? void 0 : maritimeConfig.districtList[domain];
+  var shouldShowDistricts = domain === 'northSeaDistricts';
   var maritimeWarningsType = getType(domain);
-  // TODO this should be retrieved (and updated) from the api using a react-query
-  var _React$useState = React__default.useState(auth == null ? void 0 : auth.username),
-    editor = _React$useState[0],
-    setEditor = _React$useState[1];
-  var isReadOnly = editor !== undefined && editor !== (auth == null ? void 0 : auth.username);
   var _useMaritimeWarningsF = useMaritimeWarningsFormState(),
     state = _useMaritimeWarningsF[0],
     dispatch = _useMaritimeWarningsF[1];
-  var _usePublicWarnings = usePublicWarnings(),
-    data = _usePublicWarnings.data;
   var warningsFromApi = React__default.useMemo(function () {
-    return (data == null ? void 0 : data.filter(function (warning) {
-      return warning.warningDetail.domain === maritimeWarningsType && warning.status === 'PUBLISHED';
-    })) || [];
+    return ((data == null ? void 0 : data.filter(function (warning) {
+      return warning.type === maritimeWarningsType && warning.status === 'PUBLISHED';
+    })) || []).reverse();
   }, [data, maritimeWarningsType]);
+  var isNew = warningsFromApi.length === 0;
+  var editor = warningsFromApi && warningsFromApi.length > 0 ? warningsFromApi[0].editor : undefined;
+  var previousEditor = usePrevious(editor);
+  var isReadOnly = !isNew && editor !== (auth == null ? void 0 : auth.username);
   var warningItemsFromApi = React__default.useMemo(function () {
     return mapMaritimeWarningsToItems(warningsFromApi || []);
   }, [warningsFromApi]);
@@ -7203,11 +7238,7 @@ var MaritimeWarningsFormConnect = function MaritimeWarningsFormConnect(_ref) {
         id: id
       });
     });
-    showSnackbar({
-      type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
-      key: 'maritime-retract-success'
-    });
-  }, [dispatch, showSnackbar]);
+  }, [dispatch]);
   var onAddWarning = React__default.useCallback(function () {
     React__default.startTransition(function () {
       dispatch({
@@ -7238,11 +7269,7 @@ var MaritimeWarningsFormConnect = function MaritimeWarningsFormConnect(_ref) {
         type: 'clearWarnings'
       });
     });
-    showSnackbar({
-      type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
-      key: 'maritime-clear-success'
-    });
-  }, [dispatch, showSnackbar]);
+  }, [dispatch]);
   var onMoveWarning = React__default.useCallback(function (oldIndex, newIndex) {
     dispatch({
       type: 'moveWarning',
@@ -7250,57 +7277,169 @@ var MaritimeWarningsFormConnect = function MaritimeWarningsFormConnect(_ref) {
       newIndex: newIndex
     });
   }, [dispatch]);
-  var _usePostMaritimeWarni = usePostMaritimeWarning(),
-    postWarning = _usePostMaritimeWarni.mutate;
-  var onSubmit = React__default.useCallback(function () {
-    dispatch({
-      type: 'mergeWarnings'
-    });
-    var nextState = reducer(state, {
-      type: 'mergeWarnings'
-    });
-    var maritimeWarnings = mapItemsToMaritimeWarnings(nextState.warnings, domain, auth == null ? void 0 : auth.username);
-    maritimeWarnings.forEach(function (warning) {
-      postWarning(warning);
-    });
-  }, [dispatch, state, domain, auth == null ? void 0 : auth.username, postWarning]);
+  var onSubmit = React__default.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var nextState, maritimeWarnings;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          dispatch({
+            type: 'mergeWarnings'
+          });
+          nextState = reducer(state, {
+            type: 'mergeWarnings'
+          });
+          maritimeWarnings = mapItemsToMaritimeWarnings(nextState.warnings, domain, maritimeConfig, auth == null ? void 0 : auth.username);
+          postWarnings(maritimeWarnings, {
+            onSuccess: function onSuccess() {
+              dispatch({
+                type: 'submitWarnings'
+              });
+            }
+          });
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [dispatch, state, domain, maritimeConfig, auth == null ? void 0 : auth.username, postWarnings]);
   var onToggleReadOnly = React__default.useCallback(function (isReadOnly) {
-    // FIXME: do a api call here
-    if (isReadOnly) {
-      setEditor('');
+    var message = isReadOnly ? t('maritime-editor-off', {
+      domain: domainLabel
+    }) : t('maritime-editor-on', {
+      domain: domainLabel
+    });
+    var updateEditor = function updateEditor(force) {
+      return mutateEditor({
+        domain: getType(domain),
+        isEditor: !isReadOnly,
+        force: force
+      }, {
+        onError: function onError(e) {
+          if (e.cause === 409) {
+            void refetchWarnings();
+            void confirmDialog({
+              title: t('warning-edit-mode-title'),
+              description: t('warning-edit-mode-description'),
+              confirmLabel: t('warning-edit-mode-confirm'),
+              cancelLabel: t('warning-dialog-cancel')
+            }).then(function () {
+              return void updateEditor(true);
+            }); // force update editor
+          } else {
+            void refetchWarnings();
+          }
+        },
+        onSuccess: function () {
+          var _onSuccess = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  void refetchWarnings();
+                  showSnackbar({
+                    type: snackbarTypes.SnackbarMessageType.VERBATIM_MESSAGE,
+                    message: message
+                  });
+                case 2:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2);
+          }));
+          function onSuccess() {
+            return _onSuccess.apply(this, arguments);
+          }
+          return onSuccess;
+        }()
+      });
+    };
+    void updateEditor(false);
+  }, [t, domainLabel, mutateEditor, domain, refetchWarnings, confirmDialog, showSnackbar]);
+  useEffect(function () {
+    if (publishError) {
+      setError({
+        title: publishError.message,
+        severity: 'error'
+      });
+    } else if (editorError && editorError.cause !== 409) {
+      setError({
+        title: editorError.message,
+        severity: 'error'
+      });
     } else {
-      setEditor(auth == null ? void 0 : auth.username);
+      setError(undefined);
     }
-    // FIXME: reset warnings to latest known api state
-    var domainLabel = domain === 'coastalWaters' ? t('maritime-domain-coastal') : t('maritime-domain-northsea');
-    showSnackbar({
-      type: snackbarTypes.SnackbarMessageType.VERBATIM_MESSAGE,
-      message: isReadOnly ? t('maritime-editor-off', {
-        domain: domainLabel
-      }) : t('maritime-editor-on', {
-        domain: domainLabel
-      })
+  }, [publishError, editorError]);
+  var shouldGiveEditorWarning = React__default.useCallback(function (newEditor, oldEditor) {
+    var oldEditorIsYou = oldEditor && oldEditor === (auth == null ? void 0 : auth.username);
+    if (oldEditorIsYou && newEditor && newEditor !== oldEditor) {
+      setError({
+        title: t('maritime-editor-off', {
+          domain: domainLabel
+        }),
+        severity: 'warning'
+      });
+    }
+  }, [auth == null ? void 0 : auth.username, domainLabel, t]);
+  useEffect(function () {
+    // Only give editor warning when the change in editor is from a refetch
+    if (hasFetched) {
+      setHasFetched(false);
+      shouldGiveEditorWarning(editor, previousEditor);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  if (!isLoggedIn) {
+    return jsx(AlertBanner, {
+      title: t('error-auth-login')
     });
-  }, [showSnackbar, t, domain, auth]);
-  return jsx(MaritimeWarningsForm, {
-    areas: areas,
-    selectedAreaIds: state.selectedAreaIds,
-    warnings: state.warnings,
-    modified: state.modified,
-    isReadOnly: isReadOnly,
-    shouldShowDistricts: shouldShowDistricts,
-    editor: editor,
-    onToggleSelectArea: onToggleSelectArea,
-    onSelectMultipleAreas: onSelectMultipleAreas,
-    onAddSelectedAreas: onAddSelectedAreas,
-    onRemoveWarning: onRemoveWarning,
-    onRemoveArea: onRemoveArea,
-    onAddWarning: onAddWarning,
-    onChangeWarning: onChangeWarning,
-    onMoveWarning: onMoveWarning,
-    onToggleReadOnly: onToggleReadOnly,
-    onClear: onClear,
-    onSubmit: onSubmit
+  }
+  if (configError) {
+    return jsx(AlertBanner, {
+      title: t('maritime-config-error'),
+      info: configError.message,
+      actionButtonProps: {
+        title: t('error-title-retry'),
+        onClick: function onClick() {
+          void refetchConfig();
+        }
+      }
+    });
+  }
+  return jsxs(Fragment, {
+    children: [(isFetchingConfig || isFetchingWarnings || !maritimeConfig) && jsx(LinearProgress, {
+      "data-testid": "loading-bar",
+      color: "secondary",
+      sx: {
+        position: 'absolute',
+        width: '100%',
+        top: 0
+      }
+    }), !maritimeConfig ? jsxs("div", {
+      children: [" ", t('maritime-loading-config')]
+    }) : jsx(MaritimeWarningsForm, {
+      areas: areas || [],
+      selectedAreaIds: state.selectedAreaIds,
+      warnings: state.warnings,
+      modified: state.modified,
+      isReadOnly: isReadOnly,
+      shouldShowDistricts: shouldShowDistricts,
+      editor: editor,
+      onToggleSelectArea: onToggleSelectArea,
+      onSelectMultipleAreas: onSelectMultipleAreas,
+      onAddSelectedAreas: onAddSelectedAreas,
+      onRemoveWarning: onRemoveWarning,
+      onRemoveArea: onRemoveArea,
+      onAddWarning: onAddWarning,
+      onChangeWarning: onChangeWarning,
+      onMoveWarning: onMoveWarning,
+      onToggleReadOnly: onToggleReadOnly,
+      onClear: onClear,
+      onSubmit: onSubmit,
+      maritimeConfig: maritimeConfig,
+      lastUpdatedTime: lastUpdateTime,
+      error: error,
+      shouldHideEditorToggle: isNew
+    })]
   });
 };
 
@@ -8227,7 +8366,7 @@ var PublicWarningsForm = function PublicWarningsForm(props) {
   var defaultValues = selectedAviationProduct || getFormData(publicWarningDetails, object);
   return jsx(ReactHookFormProvider, {
     options: Object.assign({}, defaultFormOptions, {
-      mode: 'onSubmit',
+      mode: selectedAviationProduct ? defaultFormOptions.mode : 'onSubmit',
       defaultValues: defaultValues
     }),
     children: jsx(Form, Object.assign({}, props))
@@ -9199,18 +9338,15 @@ var useWarnings = function useWarnings(disabled) {
     sigmetWarnings = _useSigmetList.data,
     refetchSigmet = _useSigmetList.refetch,
     isFetchingSigmet = _useSigmetList.isFetching;
-  var warningType = useSelector(getWarningType);
-  var _useProductConfig = useProductConfig(warningType, false),
-    aviationConfig = _useProductConfig.data;
   var combinedWarnings = useMemo(function () {
     var transformedSigmets = (sigmetWarnings == null ? void 0 : sigmetWarnings.map(function (sigmet) {
-      return transformSigmetToWarningFormat(sigmet, aviationConfig);
+      return transformSigmetToWarningFormat(sigmet);
     })) || [];
     var transformedAirmets = (airmetWarnings == null ? void 0 : airmetWarnings.map(function (airmet) {
-      return transformAirmetToWarningFormat(airmet, aviationConfig);
+      return transformAirmetToWarningFormat(airmet);
     })) || [];
     return concat(publicWarnings || [], transformedSigmets, transformedAirmets);
-  }, [sigmetWarnings, airmetWarnings, publicWarnings, aviationConfig]);
+  }, [sigmetWarnings, airmetWarnings, publicWarnings]);
   var refetchWarnings = function refetchWarnings() {
     void refetchPublicWarnings();
     void refetchAirmet();
@@ -9877,9 +10013,17 @@ var WarningListItemMenu = function WarningListItemMenu(_ref) {
     onWithdrawWarning = _ref$onWithdrawWarnin === void 0 ? function () {} : _ref$onWithdrawWarnin,
     _ref$onActionAviation = _ref.onActionAviationWarning,
     onActionAviationWarning = _ref$onActionAviation === void 0 ? function () {} : _ref$onActionAviation,
+    _ref$onActionMaritime = _ref.onActionMaritimeWarning,
+    onActionMaritimeWarning = _ref$onActionMaritime === void 0 ? function () {} : _ref$onActionMaritime,
     t = _ref.t;
-  if (warning.warningDetail.domain === 'maritimeWarningCoastal' || warning.warningDetail.domain === 'maritimeWarningNorthSea') {
-    return [];
+  if (warning.type === 'maritimeWarningCoastal' || warning.type === 'maritimeWarningNorthSea') {
+    return [{
+      text: t('warning-list-button-update'),
+      action: function action() {
+        return onActionMaritimeWarning(warning, MaritimeWarningAction.UPDATE);
+      },
+      icon: jsx(Edit, {})
+    }];
   }
   var duplicate = {
     text: t('warning-list-button-duplicate'),
@@ -10012,7 +10156,7 @@ var WarningListItemMenu = function WarningListItemMenu(_ref) {
   }
 };
 
-var _excluded = ["warning", "activeWarningId", "highlightedItem", "onSelectWarning", "onEditWarning", "onDeleteWarning", "onDeleteReviewWarning", "onExpireWarning", "onWithdrawWarning", "onActionAviationWarning"];
+var _excluded = ["warning", "activeWarningId", "highlightedItem", "onSelectWarning", "onEditWarning", "onDeleteWarning", "onDeleteReviewWarning", "onExpireWarning", "onWithdrawWarning", "onActionAviationWarning", "onActionMaritimeWarning"];
 var renderLevelText = function renderLevelText(levelString) {
   if (!levelString) {
     return null;
@@ -10109,6 +10253,8 @@ var WarningListItem = function WarningListItem(_ref) {
     onWithdrawWarning = _ref$onWithdrawWarnin === void 0 ? function () {} : _ref$onWithdrawWarnin,
     _ref$onActionAviation = _ref.onActionAviationWarning,
     onActionAviationWarning = _ref$onActionAviation === void 0 ? function () {} : _ref$onActionAviation,
+    _ref$onActionMaritime = _ref.onActionMaritimeWarning,
+    onActionMaritimeWarning = _ref$onActionMaritime === void 0 ? function () {} : _ref$onActionMaritime,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
@@ -10163,7 +10309,8 @@ var WarningListItem = function WarningListItem(_ref) {
         onDeleteWarning: onDeleteWarning,
         onExpireWarning: onExpireWarning,
         onWithdrawWarning: onWithdrawWarning,
-        onActionAviationWarning: onActionAviationWarning
+        onActionAviationWarning: onActionAviationWarning,
+        onActionMaritimeWarning: onActionMaritimeWarning
       }),
       buttonIcon: jsx(Options, {})
     }),
@@ -10532,6 +10679,8 @@ var PublicWarningList = function PublicWarningList(_ref) {
     onWithdrawWarning = _ref$onWithdrawWarnin === void 0 ? function () {} : _ref$onWithdrawWarnin,
     _ref$onActionAviation = _ref.onActionAviationWarning,
     onActionAviationWarning = _ref$onActionAviation === void 0 ? function () {} : _ref$onActionAviation,
+    _ref$onActionMaritime = _ref.onActionMaritimeWarning,
+    onActionMaritimeWarning = _ref$onActionMaritime === void 0 ? function () {} : _ref$onActionMaritime,
     hoveredFeatureId = _ref.hoveredFeatureId,
     expandedSections = _ref.expandedSections,
     setExpandedSections = _ref.setExpandedSections;
@@ -10805,7 +10954,8 @@ var PublicWarningList = function PublicWarningList(_ref) {
                   activeWarningId: selectedWarningId,
                   onExpireWarning: onExpireWarning,
                   onWithdrawWarning: onWithdrawWarning,
-                  onActionAviationWarning: onActionAviationWarning
+                  onActionAviationWarning: onActionAviationWarning,
+                  onActionMaritimeWarning: onActionMaritimeWarning
                 }, key);
               }
             });
@@ -11055,7 +11205,7 @@ var useWarningFilters = function useWarningFilters(warnings, onUpdateFilters, sa
       if (['SIG', 'AIR'].includes(warning.warningDetail.level)) {
         return Domain.aviation;
       }
-      if (warning.warningDetail.domain === 'maritimeWarningCoastal' || warning.warningDetail.domain === 'maritimeWarningNorthSea') {
+      if (warning.type === 'maritimeWarningCoastal' || warning.type === 'maritimeWarningNorthSea') {
         return Domain.maritime;
       }
       return Domain["public"];
@@ -11179,6 +11329,8 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
   var panelId = _ref.panelId,
     presetFilterState = _ref.presetFilterState;
   var updatePublicWarningEditor = useMutatePublicWarningEditor();
+  var _useMutateMaritimeWar = useMutateMaritimeWarningsEditor(),
+    updateMaritimeWarningEditor = _useMutateMaritimeWar.mutateAsync;
   var _useMutateDeleteWarni = useMutateDeleteWarning(),
     deletePublicWarning = _useMutateDeleteWarni.mutateAsync;
   var _useSaveWarning = useSaveWarning(),
@@ -11245,8 +11397,12 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
-  var selectWarning = function selectWarning(publicWarning) {
-    void openPublicWarningDialog('readonly', publicWarning);
+  var selectWarning = function selectWarning(warning) {
+    if ((warning == null ? void 0 : warning.type) === 'maritimeWarningCoastal' || (warning == null ? void 0 : warning.type) === 'maritimeWarningNorthSea') {
+      handleMaritimeProductClick(warning, MaritimeWarningAction.SELECT);
+    } else {
+      void openPublicWarningDialog('readonly', warning);
+    }
   };
   var createWarning = function createWarning(warningType) {
     void openPublicWarningDialog('', undefined, warningType);
@@ -11416,6 +11572,54 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
         }
     }
   };
+  var editMaritimeWarning = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(warning) {
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            if (!(warning && auth != null && auth.username && !warning.editor)) {
+              _context4.next = 9;
+              break;
+            }
+            _context4.prev = 1;
+            _context4.next = 4;
+            return updateMaritimeWarningEditor({
+              domain: warning.type,
+              isEditor: true
+            });
+          case 4:
+            _context4.next = 8;
+            break;
+          case 6:
+            _context4.prev = 6;
+            _context4.t0 = _context4["catch"](1);
+          case 8:
+            refetchWarnings();
+          case 9:
+            void openPublicWarningDialog('', undefined, warning.type);
+          case 10:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, null, [[1, 6]]);
+    }));
+    return function editMaritimeWarning(_x8) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var handleMaritimeProductClick = function handleMaritimeProductClick(warning, actionType) {
+    if (!warning) {
+      return;
+    }
+    switch (actionType) {
+      case MaritimeWarningAction.SELECT:
+        void openPublicWarningDialog('', undefined, warning.type);
+        break;
+      case MaritimeWarningAction.UPDATE:
+        void editMaritimeWarning(warning);
+        break;
+    }
+  };
   var openSnackbar = function openSnackbar(message) {
     dispatch(snackbarActions.openSnackbar({
       type: snackbarTypes.SnackbarMessageType.VERBATIM_MESSAGE,
@@ -11558,7 +11762,8 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
       onRefetchWarnings: refetchWarnings,
       filterHookState: filterHookState,
       hoveredFeatureId: hoveredFeatureId,
-      onActionAviationWarning: handleAviationProductClick
+      onActionAviationWarning: handleAviationProductClick,
+      onActionMaritimeWarning: handleMaritimeProductClick
     }), confirmDialogOptions && jsx(ConfirmDeleteWarningDialog, {
       onClose: function onClose() {
         return setConfirmDialogOptions(undefined);