@opengeoweb/warnings 12.2.0 → 12.3.0

package/index.esm.js

@@ -1,27 +1,27 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
-import { Polygons, ExitDomain, Share, Edit, Delete, DrawPolygon, Visibility, Add, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Snow, Lightning, Fog, Wind, Thunderstorm, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, breakpoints, Options, Close, ChevronDown, ChevronUp, Copy, Update, Success, Expire, Remove, ArrowUpCompact, ArrowDownCompact } from '@opengeoweb/theme';
-import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawingToolSelectors, layerSelectors, uiSelectors, drawingToolActions, layerActions, useSetupDialog, genericSelectors, selectorMemoizationOptions, useUpdateSharedData, mapListener, layersListener, drawingToolListener, syncGroupsListener, syncGroupsReducer, drawingToolReducer, uiReducer, layerReducer, mapReducer } from '@opengeoweb/store';
+import { Polygons, ExitDomain, Share, Edit, Delete, DrawPolygon, Visibility, Add, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Snow, Lightning, Fog, Wind, Thunderstorm, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, breakpoints, Options, Close, ChevronDown, ChevronUp, Copy, Update, Cancel, Success, Expire, Remove, ArrowUpCompact, ArrowDownCompact } from '@opengeoweb/theme';
+import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawingToolSelectors, layerSelectors, uiSelectors, drawingToolActions, layerActions, useSetupDialog, genericSelectors, selectorMemoizationOptions, useUpdateSharedData, mapListener, layersListener, drawingToolListener, syncGroupsListener, openlayersListener, syncGroupsReducer, drawingToolReducer, uiReducer, layerReducer, mapReducer } 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, ConfirmationDialog, getAxiosErrorMessage, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, CustomToggleButton, Filter, FilterChip, FilterOption, StatusTag, LastUpdateTime, ErrorBoundary, isAxiosError } from '@opengeoweb/shared';
+import { SHARED_NAMESPACE, useConfirmationDialog, dateUtils, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, ConfirmationDialog, getAxiosErrorMessage, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, sessionStorageProvider, CustomToggleButton, Filter, FilterChip, FilterOption, StatusTag, LastUpdateTime, ErrorBoundary, isAxiosError } from '@opengeoweb/shared';
 import { createEntityAdapter, createSlice, createSelector, current, createListenerMiddleware, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { defaultBbox } from '@opengeoweb/core';
 import { FORM_FIELDS_NAMESPACE, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormSelect, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, useDraftFormHelpers, errorMessages, isEmpty, ReactHookFormDateTime, isXHoursAfter, isXHoursBefore } from '@opengeoweb/form-fields';
-import { SA_NAMESPACE, airmetConfig, sigmetConfig, isInstanceOfCancelSigmet, isInstanceOfCancelAirmet, getDefaultValidUntilValue, useShortTestHelpers, SigmetForm, AirmetForm, ProductAction, getConfirmationDialogCancelLabel, getConfirmationDialogButtonLabel, getConfirmationDialogContent, getConfirmationDialogTitle, isVAPhenomenon, CancelSigmetVolcanicMovements, createAirmetPostParameter, createSigmetPostParameter, getProductFormMode } from '@opengeoweb/sigmet-airmet';
+import { SA_NAMESPACE, airmetConfig, sigmetConfig, isInstanceOfCancelSigmet, isInstanceOfCancelAirmet, getDefaultValidUntilValue, useShortTestHelpers, SigmetForm, AirmetForm, ProductAction, isVAPhenomenon, prepareCancelSigmet, getConfirmationDialogCancelLabel, getConfirmationDialogButtonLabel, getConfirmationDialogContent, getConfirmationDialogTitle, CancelSigmetVolcanicMovements, createAirmetPostParameter, createSigmetPostParameter, getProductFormMode } from '@opengeoweb/sigmet-airmet';
 import { LayerType, generateMapId } from '@opengeoweb/webmap';
-import 'i18next';
+import { t } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { snackbarActions, snackbarTypes, snackbarListener, snackbarReducer } from '@opengeoweb/snackbar';
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { styled, Box, Typography, ListItem, Paper, ListItemButton, Stack, Grid2, LinearProgress, Button, FormHelperText, MenuItem, Card, CardContent, Tabs, Tab, CircularProgress, Menu, DialogTitle, DialogContent, Switch, ListItemText } from '@mui/material';
+import { styled, Box, Typography, ListItem, Paper, ListItemButton, Stack, Grid, LinearProgress, Button, FormHelperText, MenuItem, Card, CardContent, Tabs, Tab, CircularProgress, Menu, DialogTitle, DialogContent, Switch, ListItemText } from '@mui/material';
 import { VariableSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { getApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider, getHeaders, handleResponse, useAuthQuery, useAuthenticationContext, ProductStatus, AirmetPhenomena, SigmetPhenomena, optimisticUpdate } from '@opengeoweb/api';
 import { http, HttpResponse, passthrough, delay } from 'msw';
 import { concat, isEqual, cloneDeep, clamp, groupBy, pick } from 'lodash';
 import { useFormContext, useForm, FormProvider } from 'react-hook-form';
-import { getConfig, useAuthenticationContext as useAuthenticationContext$1 } from '@opengeoweb/authentication';
+import { useAuthenticationContext as useAuthenticationContext$1 } from '@opengeoweb/authentication';
 import { useQueryClient, useMutation } from '@tanstack/react-query';
 
 var en = {
@@ -1694,10 +1694,10 @@ var Objects = function Objects(_ref2) {
               children: jsx(ListItem, {
                 style: style,
                 disablePadding: true,
-                secondaryAction: jsxs(Grid2, {
+                secondaryAction: jsxs(Grid, {
                   container: true,
                   rowSpacing: 1,
-                  children: [jsx(Grid2, {
+                  children: [jsx(Grid, {
                     className: "objectActions",
                     children: jsx(ToggleMenu, {
                       buttonSx: (_buttonSx = {
@@ -1730,7 +1730,7 @@ var Objects = function Objects(_ref2) {
                         icon: jsx(ExitDomain, {})
                       }]
                     })
-                  }), object.scope === 'user' && jsx(Grid2, {
+                  }), object.scope === 'user' && jsx(Grid, {
                     className: "objectActions",
                     children: jsx(ToggleMenu, {
                       menuTitle: t('object-manager-options-menu'),
@@ -1988,9 +1988,6 @@ var getApiRoutes$1 = function getApiRoutes(axiosInstance) {
     },
     updateWarning: function updateWarning(warningId, data) {
       return axiosInstance.post("/warnings/" + warningId + "/", data);
-    },
-    deleteWarning: function deleteWarning(warningId) {
-      return axiosInstance.post("/warnings/" + warningId + "?delete=true");
     }
   };
 };
@@ -7582,12 +7579,6 @@ var getApiRoutes = function getApiRoutes(axiosInstance) {
     },
     updateWarning: function updateWarning(warningId, data) {
       return axiosInstance.post("/warnings/" + warningId + "/", data);
-    },
-    deleteWarning: function deleteWarning(warningId) {
-      warningList.splice(warningList.findIndex(function (warning) {
-        return warning.id === warningId;
-      }), 1);
-      return axiosInstance.post("/warnings/" + warningId + "?delete=true");
     }
   };
 };
@@ -7808,20 +7799,20 @@ var DrawingToolFormContentsNoMemo = function DrawingToolFormContentsNoMemo(_ref)
           title: dialogError,
           shouldClose: true
         })
-      }), jsxs(Grid2, {
+      }), jsxs(Grid, {
         "data-testid": "drawingToolForm",
         container: true,
         direction: "column",
         spacing: 1,
         padding: 2,
-        children: [jsx(Grid2, {
+        children: [jsx(Grid, {
           children: jsx(Typography, {
             variant: "body2",
             children: t('drawing-tool-form-tools')
           })
-        }), jsx(Grid2, {
+        }), jsx(Grid, {
           container: true,
-          children: jsxs(Grid2, {
+          children: jsxs(Grid, {
             children: [drawModes.map(function (mode) {
               return jsx(CustomIconButton, {
                 variant: "tool",
@@ -7867,10 +7858,10 @@ var DrawingToolFormContentsNoMemo = function DrawingToolFormContentsNoMemo(_ref)
               }
             })]
           })
-        }), jsx(Grid2, {
+        }), jsx(Grid, {
           container: true,
           size: "grow",
-          children: jsx(Grid2, {
+          children: jsx(Grid, {
             size: {
               xs: 12,
               sm: 6
@@ -7893,7 +7884,7 @@ var DrawingToolFormContentsNoMemo = function DrawingToolFormContentsNoMemo(_ref)
               })
             })
           })
-        }), jsxs(Grid2, {
+        }), jsxs(Grid, {
           children: [jsx(ReactHookFormTextField, {
             name: "objectName",
             label: t('drawing-tool-form-object-name'),
@@ -8417,7 +8408,7 @@ var PublicWarningsFormDialog = function PublicWarningsFormDialog(_ref) {
   }));
 };
 
-var config$1 = getConfig();
+var config$1 = sessionStorageProvider.getConfig();
 var airmetBaseUrl = config$1.GW_AIRMET_BASE_URL || '';
 var sigmetBaseUrl = config$1.GW_SIGMET_BASE_URL || '';
 // API
@@ -9053,6 +9044,7 @@ var WarningsMapView = function WarningsMapView(_ref) {
     children: jsxs(OpenLayersMapView, {
       view: viewRef.current,
       holdShiftToScroll: true,
+      mapId: mapId,
       children: [jsx(MapControls, {
         style: {
           top: 0
@@ -9842,12 +9834,12 @@ var Phenomenon = function Phenomenon(_ref) {
     children: warningFormPhenomena.map(function (phenomenon) {
       return jsx(MenuItem, {
         value: phenomenon.key,
-        children: jsxs(Grid2, {
+        children: jsxs(Grid, {
           container: true,
           justifyContent: "space-between",
-          children: [jsx(Grid2, {
+          children: [jsx(Grid, {
             children: t(phenomenon.translationKey)
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             sx: {
               minWidth: 56
             },
@@ -10091,16 +10083,16 @@ var ContainerGrid = styled('div')(function (_ref3) {
   var theme = _ref3.theme;
   return _ref4 = {
     backgroundColor: theme.palette.background.paper,
-    '.MuiGrid2-grid-sm-6, .MuiGrid2-grid-sm-4': {
+    '.MuiGrid-grid-sm-6, .MuiGrid-grid-sm-4': {
       width: '100%',
       minWidth: '100%'
     }
   }, _ref4[containerQueryBreakpoint] = {
-    '.MuiGrid2-grid-sm-6': {
+    '.MuiGrid-grid-sm-6': {
       width: sm6Width,
       minWidth: sm6Width
     },
-    '.MuiGrid2-grid-sm-4': {
+    '.MuiGrid-grid-sm-4': {
       width: sm4Width,
       minWidth: sm4Width
     }
@@ -10266,6 +10258,7 @@ var Form = function Form(_ref5) {
     _ref5$warningType = _ref5.warningType,
     warningType = _ref5$warningType === void 0 ? 'public' : _ref5$warningType,
     mode = _ref5.mode,
+    formState = _ref5.formState,
     _ref5$onSetViewModeRe = _ref5.onSetViewModeResetArea,
     onSetViewModeResetArea = _ref5$onSetViewModeRe === void 0 ? function () {} : _ref5$onSetViewModeRe,
     storedStartGeoJSON = _ref5.storedStartGeoJSON,
@@ -10299,7 +10292,8 @@ var Form = function Form(_ref5) {
     reset = _useFormContext.reset,
     dirtyFields = _useFormContext.formState.dirtyFields,
     getValues = _useFormContext.getValues,
-    setValue = _useFormContext.setValue;
+    setValue = _useFormContext.setValue,
+    watch = _useFormContext.watch;
   var _useDraftFormHelpers = useDraftFormHelpers(),
     toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
     DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
@@ -10440,7 +10434,20 @@ var Form = function Form(_ref5) {
             return _ref12.apply(this, arguments);
           };
         }())();
+        break;
       case ProductAction.CANCEL:
+        void showConfirmDialog(action).then(function () {
+          setIsPublishing(true);
+          // if volcanic sigmet - add to which FIR it's moving
+          if (isVAPhenomenon(selectedAviationProduct, action)) {
+            void onSaveAviationForm(prepareCancelSigmet(selectedAviationProduct, watch('vaSigmetMoveToFIR')), 'CANCELLED', warningType);
+          } else {
+            void onSaveAviationForm(selectedAviationProduct, 'CANCELLED', warningType);
+          }
+          setIsPublishing(false);
+          onCloseForm();
+        });
+        break;
       case ProductAction.RENEW:
       case ProductAction.DISCARD:
       case ProductAction.DUPLICATE:
@@ -10581,14 +10588,14 @@ var Form = function Form(_ref5) {
           storedGeoJSON: storedStartGeoJSON
         })
       }) : jsx(ContainerGrid, {
-        children: jsxs(Grid2, {
+        children: jsxs(Grid, {
           size: {
             xs: 12
           },
           container: true,
           rowSpacing: 2,
           columnSpacing: 2,
-          children: [jsx(Grid2, {
+          children: [jsx(Grid, {
             size: {
               xs: 12
             },
@@ -10596,7 +10603,7 @@ var Form = function Form(_ref5) {
               isDisabled: areFieldsDisabled,
               isReadOnly: isReadOnly
             })
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             size: {
               xs: 12
             },
@@ -10607,7 +10614,7 @@ var Form = function Form(_ref5) {
               onAddObject: onAddObject,
               isDisabled: areFieldsDisabled || isReadOnly
             })
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             size: {
               xs: 12
             },
@@ -10616,7 +10623,7 @@ var Form = function Form(_ref5) {
               defaultMapPreset: defaultMapPreset,
               isSnapshot: isSnapshot
             })
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             size: {
               xs: 12,
               sm: 6
@@ -10625,7 +10632,7 @@ var Form = function Form(_ref5) {
               isDisabled: areFieldsDisabled,
               isReadOnly: isReadOnly
             })
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             size: {
               xs: 12,
               sm: 6
@@ -10634,13 +10641,13 @@ var Form = function Form(_ref5) {
               isDisabled: areFieldsDisabled,
               isReadOnly: isReadOnly
             })
-          }), jsxs(Grid2, {
+          }), jsxs(Grid, {
             size: {
               xs: 12
             },
             container: true,
             spacing: 2,
-            children: [jsx(Grid2, {
+            children: [jsx(Grid, {
               size: {
                 xs: 12,
                 sm: 6
@@ -10649,7 +10656,7 @@ var Form = function Form(_ref5) {
                 isDisabled: areFieldsDisabled,
                 isReadOnly: isReadOnly
               })
-            }), jsx(Grid2, {
+            }), jsx(Grid, {
               size: {
                 xs: 12,
                 sm: 6
@@ -10659,13 +10666,13 @@ var Form = function Form(_ref5) {
                 isReadOnly: isReadOnly
               })
             })]
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             size: {
               xs: 12
             },
             container: true,
             spacing: 2,
-            children: jsx(Grid2, {
+            children: jsx(Grid, {
               size: {
                 xs: 12
               },
@@ -10679,7 +10686,7 @@ var Form = function Form(_ref5) {
       }), jsx(DraftFieldHelper, {}), jsx(ReactHookFormHiddenInput, {
         name: "id"
       })]
-    }), !isReadOnly && jsx(Box, {
+    }), formState !== 'cancel' && !isReadOnly && jsx(Box, {
       sx: {
         padding: '24px 10px 14px 10px',
         position: 'absolute',
@@ -10692,10 +10699,10 @@ var Form = function Form(_ref5) {
         border: 'none'
       },
       children: jsx(ContainerGrid, {
-        children: jsxs(Grid2, {
+        children: jsxs(Grid, {
           container: true,
           spacing: 2,
-          children: [jsx(Grid2, {
+          children: [jsx(Grid, {
             size: {
               xs: 12,
               sm: 4
@@ -10710,7 +10717,7 @@ var Form = function Form(_ref5) {
               onClick: onPressClear,
               children: t('warning-button-clear')
             })
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             size: {
               xs: 12,
               sm: 4
@@ -10736,7 +10743,7 @@ var Form = function Form(_ref5) {
                 })]
               })
             })
-          }), jsx(Grid2, {
+          }), jsx(Grid, {
             size: {
               xs: 12,
               sm: 4
@@ -10764,6 +10771,51 @@ var Form = function Form(_ref5) {
           })]
         })
       })
+    }), formState === 'cancel' && jsx(Box, {
+      sx: {
+        padding: '24px 10px 14px 10px',
+        position: 'absolute',
+        bottom: 0,
+        width: '100%',
+        backgroundColor: 'geowebColors.background.surfaceApp',
+        boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.5)',
+        zIndex: 1,
+        overflowX: 'hidden',
+        border: 'none'
+      },
+      children: jsx(ContainerGrid, {
+        children: jsx(Grid, {
+          container: true,
+          spacing: 2,
+          children: jsx(Grid, {
+            size: {
+              xs: 12,
+              sm: 4,
+              md: 4
+            },
+            children: jsx(Button, {
+              variant: "primary",
+              sx: {
+                width: '100%'
+              },
+              disabled: isSaving,
+              onClick: function onClick() {
+                selectedAviationProduct ? handleSubmitAviationProduct(ProductAction.CANCEL, warningType) : onPressPublish();
+              },
+              children: jsxs("span", {
+                style: {
+                  position: 'relative'
+                },
+                children: [isPublishing ? t('warning-button-publishing') : t('warning-button-publish'), isPublishing && jsx(CircularProgress, {
+                  "data-testid": "spinner",
+                  color: "inherit",
+                  sx: spinnerSx
+                })]
+              })
+            })
+          })
+        })
+      })
     })]
   });
 };
@@ -10798,7 +10850,7 @@ var PublicWarningsForm = function PublicWarningsForm(props) {
  * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var config = getConfig();
+var config = sessionStorageProvider.getConfig();
 var publicWarningBaseUrl = config.GW_DRAWINGS_BASE_URL || '';
 // API
 var getPublicWarningList = function getPublicWarningList(auth) {
@@ -10832,6 +10884,12 @@ var postPublicWarning = function postPublicWarning(auth, data) {
     body: JSON.stringify(data)
   }).then(handleResponse);
 };
+var deleteWarning = function deleteWarning(warningId, auth) {
+  return fetch(publicWarningBaseUrl + "/warnings/" + warningId + "?delete=true", {
+    headers: getHeaders(auth),
+    method: 'POST'
+  }).then(handleResponse);
+};
 
 /**
  * @param disabled - Disables fetching, but still returns cached values.
@@ -10993,6 +11051,49 @@ var useMutateWarning = function useMutateWarning(snackBarMessage) {
     }()
   }));
 };
+var useMutateDeleteWarning = function useMutateDeleteWarning() {
+  var queryClient = useQueryClient();
+  var dispatch = useDispatch();
+  var _useAuthenticationCon3 = useAuthenticationContext(),
+    auth = _useAuthenticationCon3.auth;
+  return useMutation({
+    mutationFn: function mutationFn(_ref6) {
+      var id = _ref6.id;
+      if (!auth) {
+        throw new Error('Authentication context not found');
+      }
+      return deleteWarning(id, auth);
+    },
+    onSuccess: function () {
+      var _onSuccess3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_, variables) {
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              void queryClient.cancelQueries({
+                queryKey: ['public-warning-list']
+              });
+              queryClient.setQueryData(['public-warning-list'], function (old) {
+                return old == null ? void 0 : old.filter(function (warning) {
+                  return warning.id !== variables.id;
+                });
+              });
+              dispatch(snackbarActions.openSnackbar({
+                type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
+                key: t('warning-dialog-delete-succes')
+              }));
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      function onSuccess(_x5, _x6) {
+        return _onSuccess3.apply(this, arguments);
+      }
+      return onSuccess;
+    }()
+  });
+};
 var usePublishWarning = function usePublishWarning() {
   return useMutateWarning('warning-publish-succes');
 };
@@ -11209,6 +11310,9 @@ var PublicWarningsFormConnect = function PublicWarningsFormConnect(_ref) {
     if ((selectedAviationProduct == null ? void 0 : selectedAviationProduct.status) === 'DRAFT') {
       return false;
     }
+    if (formState === 'cancel') {
+      return true;
+    }
     if (formState === 'edit') {
       return false;
     }
@@ -11259,6 +11363,7 @@ var PublicWarningsFormConnect = function PublicWarningsFormConnect(_ref) {
     selectedAviationProduct: selectedAviationProduct,
     warningType: warningType,
     mode: formMode,
+    formState: formState,
     onSetViewModeResetArea: onSetViewModeResetArea,
     storedStartGeoJSON: storedStartGeoJSON,
     storedEndGeoJSON: storedEndGeoJSON
@@ -12376,7 +12481,7 @@ var ExpandableFilterChip = function ExpandableFilterChip(_ref) {
           },
           isDisabled: isDisabled,
           size: "medium",
-          actionIcon: jsxs(Grid2, {
+          actionIcon: jsxs(Grid, {
             container: true,
             alignItems: "center",
             style: {
@@ -12442,7 +12547,7 @@ var ExpandableFilterChip = function ExpandableFilterChip(_ref) {
         sx: {
           padding: '0px 24px 16px 24px'
         },
-        children: [jsxs(Grid2, {
+        children: [jsxs(Grid, {
           container: true,
           justifyContent: "space-between",
           alignItems: "center",
@@ -12621,7 +12726,7 @@ var WarningListColumnContent = function WarningListColumnContent(_ref) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 76 : _ref$width,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  return jsxs(Grid2, {
+  return jsxs(Grid, {
     sx: Object.assign({}, props.sx, {
       width: width
     }),
@@ -12753,7 +12858,15 @@ var WarningListItemMenu = function WarningListItemMenu(_ref) {
               }
             },
             icon: jsx(Update, {})
-          }, aviationDuplicate];
+          }, aviationDuplicate, {
+            text: 'CNL',
+            action: function action() {
+              if (warning) {
+                onActionAviationWarning(warning, ProductAction.CANCEL);
+              }
+            },
+            icon: jsx(Cancel, {})
+          }];
         case ProductStatus.CANCELLED:
           return [];
         case ProductStatus.EXPIRED:
@@ -12949,7 +13062,7 @@ var WarningListItem = function WarningListItem(_ref) {
       },
       "aria-label": "warning item for " + warning.id,
       selected: activeWarningId === warning.id,
-      children: jsxs(Grid2, {
+      children: jsxs(Grid, {
         className: "warning-list",
         container: true,
         rowSpacing: 0,
@@ -13225,7 +13338,7 @@ var WarningListHeaderContent = function WarningListHeaderContent(_ref) {
     sortDirection = _ref.sortDirection,
     sortable = _ref.sortable,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return jsx(Grid2, {
+  return jsx(Grid, {
     sx: Object.assign({}, props.sx, {
       width: width,
       cursor: _onClick ? 'pointer' : 'default'
@@ -13436,32 +13549,26 @@ var PublicWarningList = function PublicWarningList(_ref) {
         containerType: 'inline-size'
       },
       "data-testid": "publicWarningList",
-      children: [jsxs(Grid2, {
-        container: true,
-        justifyItems: "flex-end",
+      children: [jsxs(Box, {
         ref: filterRef,
-        sx: (_sx = {}, _sx["@container publicWarningList (max-width: " + breakpoints.tablet + "px)"] = {
-          ' .MuiGrid2-grid-sm-12': {
-            maxWidth: '100%',
-            flexBasis: '100%'
-          },
-          ' .warning-filter': {
-            order: 2
-          },
+        sx: (_sx = {
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'flex-end',
+          flexDirection: 'column'
+        }, _sx["@container publicWarningList (min-width: " + breakpoints.desktop + "px)"] = {
+          flexDirection: 'row',
           ' .create-warning': {
-            order: 1
+            order: 2
           }
         }, _sx),
-        children: [jsx(Grid2, {
+        children: [jsx(Box, {
           className: "warning-filter",
-          order: {
-            xs: 2,
-            md: 1
-          },
-          size: {
-            xs: 12,
-            sm: 12,
-            md: 8
+          sx: {
+            flex: 1,
+            minWidth: 0,
+            order: 2,
+            alignSelf: 'flex-start'
           },
           children: jsx(FilterList, {
             isAllSelected: allSelected,
@@ -13469,21 +13576,10 @@ var PublicWarningList = function PublicWarningList(_ref) {
             filterState: filterState,
             updateFilter: updateFilter
           })
-        }), jsxs(Grid2, {
+        }), jsxs(Box, {
           className: "create-warning",
-          order: {
-            xs: 1,
-            md: 2
-          },
           sx: {
-            display: 'flex'
-          },
-          justifyContent: "flex-end",
-          alignItems: "self-start",
-          size: {
-            xs: 12,
-            sm: 12,
-            md: 4
+            order: 1
           },
           children: [lastUpdatedTime && jsx(Box, {
             sx: {
@@ -13502,7 +13598,7 @@ var PublicWarningList = function PublicWarningList(_ref) {
       }), error && jsx(AlertBanner, {
         title: error.message,
         shouldClose: true
-      }), !error && jsxs(Grid2, {
+      }), !error && jsxs(Grid, {
         container: true,
         rowSpacing: 0,
         columnSpacing: 0,
@@ -13982,7 +14078,7 @@ var ConfirmDeleteWarningDialog = function ConfirmDeleteWarningDialog(_ref) {
             _context.next = 4;
             return request();
           case 4:
-            callback();
+            callback && callback();
             setIsLoading(false);
             _context.next = 12;
             break;
@@ -14034,6 +14130,8 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
   var panelId = _ref.panelId,
     presetFilterState = _ref.presetFilterState;
   var updatePublicWarningEditor = useMutatePublicWarningEditor();
+  var _useMutateDeleteWarni = useMutateDeleteWarning(),
+    deletePublicWarning = _useMutateDeleteWarni.mutateAsync;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var dispatch = useDispatch();
@@ -14208,12 +14306,16 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
     switch (actionType) {
       case 'RENEW':
         updatedWarning = renewAviationProduct(warning, aviationConfig);
+        void openPublicWarningDialog('edit', updatedWarning, type);
         break;
       case 'DUPLICATE':
         updatedWarning = duplicateAviationProduct(warning);
+        void openPublicWarningDialog('edit', updatedWarning, type);
+        break;
+      case 'CANCEL':
+        void openPublicWarningDialog('cancel', warning, type);
         break;
     }
-    void openPublicWarningDialog('edit', updatedWarning, type);
   };
   var openSnackbar = function openSnackbar(message) {
     dispatch(snackbarActions.openSnackbar({
@@ -14228,10 +14330,13 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
       title: t('warning-dialog-delete-title'),
       description: t('warning-dialog-delete-description'),
       request: function request() {
-        return warningsApi.deleteWarning(warningId);
-      },
-      callback: function callback() {
-        return onRemoveSuccess(warningId, t('warning-dialog-delete-succes'));
+        return deletePublicWarning({
+          id: warningId
+        }, {
+          onSuccess: function onSuccess() {
+            return onRemoveSuccessHooks(warningId);
+          }
+        });
       },
       isLocked: isLocked
     });
@@ -14252,6 +14357,17 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
       }
     });
   };
+  var onRemoveSuccessHooks = function onRemoveSuccessHooks(warningId) {
+    setConfirmDialogOptions(undefined);
+    // Close warning dialog if needed
+    if (selectedWarningId === warningId) {
+      dispatch(uiActions.setToggleOpenDialog({
+        setOpen: false,
+        type: publicWarningDialogType
+      }));
+    }
+  };
+  // TODO remove when all is moved to tanstack
   var onRemoveSuccess = function onRemoveSuccess(warningId, snackbarMessage) {
     // close confirm dialog
     setConfirmDialogOptions(undefined);
@@ -14590,7 +14706,7 @@ var warningsReducersMap = {
   snackbar: snackbarReducer,
   syncGroups: syncGroupsReducer
 };
-var warningsMiddlewares = [mapListener.middleware, layersListener.middleware, drawingToolListener.middleware, warningsDrawingsListener.middleware, publicWarningsListener.middleware, publicWarningFormListener.middleware, snackbarListener.middleware, syncGroupsListener.middleware];
+var warningsMiddlewares = [mapListener.middleware, layersListener.middleware, drawingToolListener.middleware, warningsDrawingsListener.middleware, publicWarningsListener.middleware, publicWarningFormListener.middleware, snackbarListener.middleware, syncGroupsListener.middleware, openlayersListener.middleware];
 var warningsRootReducer = combineReducers(warningsReducersMap);
 var createMockStore = function createMockStore(mockState) {
   return configureStore({