@opengeoweb/sigmet-airmet 2.1.2 → 2.2.0

package/{sigmet-airmet.esm.js → index.esm.js}

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import React__default from 'react';
-import { makeStyles, FormControlLabel, Radio, Grid, Typography, SvgIcon, Tooltip, Button, Checkbox, MenuItem, FormHelperText, Dialog, DialogTitle, DialogContent, Card, CardContent, List, ListItem, Backdrop, CircularProgress } from '@material-ui/core';
+import { FormControlLabel, Radio, Grid, Typography, SvgIcon, Tooltip, Button, Checkbox, MenuItem, FormHelperText, Dialog, DialogTitle, DialogContent, Card, CardContent, List, ListItem, Skeleton, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormNumberField, isInteger, isValidMax, isValidMin, isEmpty, ReactHookFormDateTime, isValidDate, isBefore, isBetween, hasMaxFeaturePoints, hasMulitpleIntersections, ReactHookFormHiddenInput, isMaximumOneDrawing, hasIntersectionWithFIR, isValidGeoJsonCoordinates, isXHoursBefore, isAfter, isXHoursAfter, ReactHookFormTextField, containsNoCommas, isLatitude, isNonOrBothCoordinates, isLongitude, errorMessages, isGeometryDirty, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import produce, { produce as produce$1 } from 'immer';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { mapTypes, mapSelectors, generateMapId, generateTimesliderId, SyncGroups, generateLayerId, mapActions, publicLayers, MapControls, LayerManagerMapButtonConnect, MapViewConnect, MapViewLayer, TimeSliderConnect } from '@opengeoweb/core';
+import { mapTypes, mapSelectors, generateMapId, generateTimesliderId, SyncGroups, generateLayerId, mapActions, publicLayers, MapControls, LayerManagerMapButtonConnect, LegendMapButtonConnect, MultiDimensionSelectMapButtonsConnect, MapViewConnect, MapViewLayer, TimeSliderConnect } from '@opengeoweb/core';
 import * as turf from '@turf/turf';
 import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
+import makeStyles from '@mui/styles/makeStyles';
 import { useDraftFormHelpers, useIsMounted, StatusTag, AlertBanner, usePreventBrowserClose, useConfirmationDialog, isAxiosError, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
-import { LocationOn, Delete, ArrowBackIos, InfoOutlined, Create, CheckCircle, Schedule } from '@material-ui/icons';
+import { LocationOn, Delete, ArrowBackIos, InfoOutlined, Create, CheckCircle, Schedule } from '@mui/icons-material';
 import moment from 'moment';
 import { debounce } from 'lodash';
-import { Skeleton } from '@material-ui/lab';
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -450,20 +450,20 @@ var StartOrEndDrawing;
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 var adagucBaseUrl = 'https://adaguc-server-geoweb.geoweb.knmi.cloud/adagucserver';
-var KNMIGeoWebSigmetAirmetOverlays = {
-  name: 'SigmetAirmetOverlays',
-  url: "".concat(adagucBaseUrl, "?dataset=OVL-sigmetairmet"),
-  id: 'sigmetairmetoverlays'
+var KNMIGeoWebOverlays = {
+  name: 'KNMIGeoWebOverlays',
+  url: "".concat(adagucBaseUrl, "?dataset=OVL"),
+  id: 'knmigeoweboverlays'
 };
 var northSeaPlatforms = {
-  service: KNMIGeoWebSigmetAirmetOverlays.url,
+  service: KNMIGeoWebOverlays.url,
   name: 'northseastations',
   format: 'image/png',
   layerType: mapTypes.LayerType.overLayer,
   enabled: true
 };
 var majorAirportsEHAA = {
-  service: KNMIGeoWebSigmetAirmetOverlays.url,
+  service: KNMIGeoWebOverlays.url,
   name: 'airports',
   format: 'image/png',
   layerType: mapTypes.LayerType.overLayer,
@@ -601,6 +601,12 @@ var MapViewGeoJson = function MapViewGeoJson(_ref) {
   }, /*#__PURE__*/React.createElement(MapControls, null, /*#__PURE__*/React.createElement(LayerManagerMapButtonConnect, {
     source: "module",
     mapId: mapId
+  }), /*#__PURE__*/React.createElement(LegendMapButtonConnect, {
+    source: "module",
+    mapId: mapId
+  }), /*#__PURE__*/React.createElement(MultiDimensionSelectMapButtonsConnect, {
+    source: "module",
+    mapId: mapId
   })), /*#__PURE__*/React.createElement(MapViewConnect, {
     mapId: mapId
   }, /*#__PURE__*/React.createElement(MapViewLayer, {
@@ -1122,6 +1128,9 @@ var useStyles$6 = makeStyles({
   body: {
     paddingTop: '17px'
   },
+  containerItem: {
+    paddingTop: '8px'
+  },
   volcanicField: {
     marginBottom: 16
   },
@@ -1148,7 +1157,7 @@ var useStyles$6 = makeStyles({
     opacity: '1'
   },
   drawSection: {
-    paddingBottom: '10px'
+    padding: '10px 0px'
   }
 });
 
@@ -1242,12 +1251,13 @@ var Change = function Change(_ref) {
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
-    spacing: 2
+    spacing: 2,
+    className: classes.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
@@ -1255,7 +1265,7 @@ var Change = function Change(_ref) {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
@@ -1373,7 +1383,7 @@ var DrawTools = function DrawTools(_ref) {
     item: true,
     xs: 12,
     container: true,
-    justify: "space-between",
+    justifyContent: "space-between",
     "data-testid": "drawtools"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
@@ -1668,7 +1678,7 @@ var getProductFormLifecycleButtons = function getProductFormLifecycleButtons(can
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     spacing: 1,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, canBe.includes('DISCARDED') && /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React.createElement(Button, {
@@ -1993,12 +2003,13 @@ var Levels = function Levels(_ref) {
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
-    spacing: 2
+    spacing: 2,
+    className: classes.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
@@ -2006,7 +2017,7 @@ var Levels = function Levels(_ref) {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
@@ -2402,12 +2413,12 @@ var ObservationForecast = function ObservationForecast(_ref) {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormRadioGroup, {
     name: "isObservationOrForecast",
     disabled: isDisabled,
@@ -2473,7 +2484,7 @@ var ObservationForecastTime = function ObservationForecastTime(_ref) {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
@@ -2481,7 +2492,7 @@ var ObservationForecastTime = function ObservationForecastTime(_ref) {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormDateTime, {
     disablePast: watch('isObservationOrForecast') === 'FCST',
     disableFuture: watch('isObservationOrForecast') === 'OBS',
@@ -2526,7 +2537,7 @@ var Phenomenon = function Phenomenon(_ref) {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
@@ -2534,7 +2545,7 @@ var Phenomenon = function Phenomenon(_ref) {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
     name: "phenomenon",
     label: "Select phenomenon",
@@ -2618,7 +2629,7 @@ var StartGeometry = function StartGeometry(_ref) {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
@@ -2766,12 +2777,13 @@ var Progress = function Progress(_ref) {
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
-    spacing: 2
+    spacing: 2,
+    className: classes.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
@@ -2779,7 +2791,7 @@ var Progress = function Progress(_ref) {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
@@ -2985,12 +2997,13 @@ var SelectFIR = function SelectFIR(_ref) {
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
-    spacing: 2
+    spacing: 2,
+    className: classes.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
@@ -2998,7 +3011,7 @@ var SelectFIR = function SelectFIR(_ref) {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
     name: "locationIndicatorATSR",
     label: "Select FIR",
@@ -3064,12 +3077,13 @@ var Type = function Type(_ref) {
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
-    spacing: 2
+    spacing: 2,
+    className: classes.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
@@ -3077,7 +3091,7 @@ var Type = function Type(_ref) {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
@@ -3152,7 +3166,7 @@ var ValidFrom = function ValidFrom(_ref) {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
@@ -3160,7 +3174,7 @@ var ValidFrom = function ValidFrom(_ref) {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormDateTime, {
     disablePast: true,
     name: "validDateStart",
@@ -3246,7 +3260,7 @@ var ValidUntil = function ValidUntil(_ref) {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
@@ -3254,7 +3268,7 @@ var ValidUntil = function ValidUntil(_ref) {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormDateTime, {
     disablePast: true,
     name: "validDateEnd",
@@ -3327,12 +3341,12 @@ var VolcanicFields = function VolcanicFields(_ref) {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, (!isReadOnly || !!watch('vaSigmetVolcanoName')) && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -3446,12 +3460,12 @@ var SurfaceVisibility = function SurfaceVisibility(_ref) {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -3557,12 +3571,12 @@ var SurfaceWind = function SurfaceWind(_ref) {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -3711,12 +3725,13 @@ var CloudLevels = function CloudLevels(_ref) {
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
-    spacing: 2
+    spacing: 2,
+    className: classes.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
@@ -3724,7 +3739,7 @@ var CloudLevels = function CloudLevels(_ref) {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-start"
+    justifyContent: "flex-start"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
@@ -4165,6 +4180,152 @@ var SigmetForm = function SigmetForm(_ref) {
       setIsDisabled(isInDrawMode);
     }
   }, [drawMode.start, drawMode.end, isReadOnly, isDisabled]);
+
+  var renderForm = function renderForm() {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
+      container: true,
+      direction: "column",
+      spacing: 2
+    }, !isCancelSigmet && /*#__PURE__*/React__default.createElement(Phenomenon, {
+      productType: "sigmet",
+      isDisabled: isDisabled,
+      onChange: onChangeForm
+    }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(ObservationForecast, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
+    }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(ObservationForecastTime, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      helperText: helperText,
+      onChange: onChangeForm
+    }), !isCancelSigmet && watch('phenomenon') === 'VA_CLD' && /*#__PURE__*/React__default.createElement(VolcanicFields, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      helperText: helperText
+    }), /*#__PURE__*/React__default.createElement(ValidFrom, {
+      productType: "sigmet",
+      isDisabled: isDisabled,
+      onChange: onChangeForm
+    }), /*#__PURE__*/React__default.createElement(ValidUntil, {
+      productType: "sigmet",
+      isDisabled: isDisabled,
+      onChange: onChangeForm
+    })), /*#__PURE__*/React__default.createElement(SelectFIR, {
+      productType: "sigmet",
+      isDisabled: isDisabled
+    }), /*#__PURE__*/React__default.createElement(StartGeometry, {
+      isReadOnly: isReadOnly,
+      drawMode: drawMode,
+      geoJSONs: geoJSONs,
+      setDrawModeType: function setDrawModeType(mapDrawMode, StartOrEndDrawing) {
+        _setDrawModeType(mapDrawMode, StartOrEndDrawing, updateStartDrawing);
+      }
+    }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(Levels, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      onChange: onChangeForm,
+      productType: "sigmet"
+    }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(Progress, {
+      productType: "sigmet",
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      drawMode: drawMode,
+      geoJSONs: geoJSONs,
+      setDrawModeType: function setDrawModeType(mapDrawMode, StartOrEndDrawing) {
+        _setDrawModeType(mapDrawMode, StartOrEndDrawing, updateEndDrawing);
+      },
+      onChange: onChangeForm
+    }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(Change, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
+    }), isCancelSigmet && watch('vaSigmetMoveToFIR') && /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      container: true,
+      spacing: 2
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 4,
+      container: true,
+      justifyContent: "flex-end"
+    }), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 8,
+      container: true,
+      justifyContent: "flex-start"
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 12
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "body2",
+      className: classes.body,
+      "data-testid": "vaSigmetMoveToFIR"
+    }, "Volcanic Cloud is moving in the direction of:", ' ', /*#__PURE__*/React__default.createElement("b", null, " ", watch('vaSigmetMoveToFIR')))))), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      container: true,
+      spacing: 2,
+      className: classes.containerItem
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 4,
+      container: true,
+      justifyContent: "flex-end"
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "subtitle1",
+      className: classes.label
+    }, "Issued at")), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 8,
+      container: true,
+      justifyContent: "flex-start"
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 12
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "body2",
+      className: classes.body
+    }, getProductIssueDate(initialSigmet, initialCancelSigmet)))), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      container: true,
+      spacing: 2
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 4,
+      container: true,
+      justifyContent: "flex-end"
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "subtitle1",
+      className: classes.label
+    }, "TAC")), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 8,
+      container: true,
+      justifyContent: "flex-start"
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 12
+    }, /*#__PURE__*/React__default.createElement(ProductFormTAC, {
+      tac: tac
+    })))), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+      name: "sequence",
+      defaultValue: "-1"
+    }),
+    /* Add hidden fields for TAC generation in case of cancel sigmet */
+    isCancelSigmet && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+      name: "cancelsSigmetSequenceId"
+    }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+      name: "validDateEndOfSigmetToCancel"
+    }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+      name: "validDateStartOfSigmetToCancel"
+    }))), /*#__PURE__*/React__default.createElement(Type, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
+    }));
+  };
+
+  if (!showMap) {
+    return renderForm();
+  }
+
   return /*#__PURE__*/React__default.createElement("form", {
     onChange: onChangeForm,
     onSubmit: handleSubmit(function () {
@@ -4181,7 +4342,7 @@ var SigmetForm = function SigmetForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8
-  }, showMap && /*#__PURE__*/React__default.createElement(MapViewGeoJson, {
+  }, /*#__PURE__*/React__default.createElement(MapViewGeoJson, {
     geoJSONs: geoJSONs,
     setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
       return _setLayerGeoJSONs(createInterSections(geoJSONs));
@@ -4195,143 +4356,7 @@ var SigmetForm = function SigmetForm(_ref) {
     item: true,
     xs: 4,
     className: classes.productForm
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    direction: "column",
-    spacing: 2
-  }, !isCancelSigmet && /*#__PURE__*/React__default.createElement(Phenomenon, {
-    productType: "sigmet",
-    isDisabled: isDisabled,
-    onChange: onChangeForm
-  }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(ObservationForecast, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly
-  }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(ObservationForecastTime, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    helperText: helperText,
-    onChange: onChangeForm
-  }), !isCancelSigmet && watch('phenomenon') === 'VA_CLD' && /*#__PURE__*/React__default.createElement(VolcanicFields, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    helperText: helperText
-  }), /*#__PURE__*/React__default.createElement(ValidFrom, {
-    productType: "sigmet",
-    isDisabled: isDisabled,
-    onChange: onChangeForm
-  }), /*#__PURE__*/React__default.createElement(ValidUntil, {
-    productType: "sigmet",
-    isDisabled: isDisabled,
-    onChange: onChangeForm
-  })), /*#__PURE__*/React__default.createElement(SelectFIR, {
-    productType: "sigmet",
-    isDisabled: isDisabled
-  }), /*#__PURE__*/React__default.createElement(StartGeometry, {
-    isReadOnly: isReadOnly,
-    drawMode: drawMode,
-    geoJSONs: geoJSONs,
-    setDrawModeType: function setDrawModeType(mapDrawMode, StartOrEndDrawing) {
-      _setDrawModeType(mapDrawMode, StartOrEndDrawing, updateStartDrawing);
-    }
-  }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(Levels, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    onChange: onChangeForm,
-    productType: "sigmet"
-  }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(Progress, {
-    productType: "sigmet",
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    drawMode: drawMode,
-    geoJSONs: geoJSONs,
-    setDrawModeType: function setDrawModeType(mapDrawMode, StartOrEndDrawing) {
-      _setDrawModeType(mapDrawMode, StartOrEndDrawing, updateEndDrawing);
-    },
-    onChange: onChangeForm
-  }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(Change, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly
-  }), isCancelSigmet && watch('vaSigmetMoveToFIR') && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justify: "flex-end"
-  }), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justify: "flex-start"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "body2",
-    className: classes.body,
-    "data-testid": "vaSigmetMoveToFIR"
-  }, "Volcanic Cloud is moving in the direction of:", ' ', /*#__PURE__*/React__default.createElement("b", null, " ", watch('vaSigmetMoveToFIR')))))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justify: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    className: classes.label
-  }, "Issued at")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justify: "flex-start"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "body2",
-    className: classes.body
-  }, getProductIssueDate(initialSigmet, initialCancelSigmet)))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justify: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    className: classes.label
-  }, "TAC")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justify: "flex-start"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(ProductFormTAC, {
-    tac: tac
-  })))), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
-    name: "sequence",
-    defaultValue: "-1"
-  }),
-  /* Add hidden fields for TAC generation in case of cancel sigmet */
-  isCancelSigmet && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
-    name: "cancelsSigmetSequenceId"
-  }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
-    name: "validDateEndOfSigmetToCancel"
-  }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
-    name: "validDateStartOfSigmetToCancel"
-  }))), /*#__PURE__*/React__default.createElement(Type, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly
-  })))));
+  }, renderForm())));
 };
 
 var AirmetForm = function AirmetForm(_ref) {
@@ -4413,6 +4438,132 @@ var AirmetForm = function AirmetForm(_ref) {
       setIsDisabled(isInDrawMode);
     }
   }, [drawMode.start, isReadOnly, isDisabled]);
+
+  var renderForm = function renderForm() {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
+      container: true,
+      direction: "column",
+      spacing: 2
+    }, !isCancelAirmet && /*#__PURE__*/React__default.createElement(Phenomenon, {
+      productType: "airmet",
+      isDisabled: isDisabled,
+      onChange: onChangeForm
+    }), !isCancelAirmet && phenomenon === 'SFC_VIS' && /*#__PURE__*/React__default.createElement(SurfaceVisibility, {
+      isDisabled: isDisabled,
+      onChange: onChangeForm
+    }), !isCancelAirmet && phenomenon === 'SFC_WIND' && /*#__PURE__*/React__default.createElement(SurfaceWind, {
+      isDisabled: isDisabled,
+      onChange: onChangeForm
+    }), !isCancelAirmet && /*#__PURE__*/React__default.createElement(ObservationForecast, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
+    }), !isCancelAirmet && /*#__PURE__*/React__default.createElement(ObservationForecastTime, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      helperText: helperText,
+      onChange: onChangeForm
+    }), /*#__PURE__*/React__default.createElement(ValidFrom, {
+      productType: "airmet",
+      isDisabled: isDisabled,
+      onChange: onChangeForm
+    }), /*#__PURE__*/React__default.createElement(ValidUntil, {
+      productType: "airmet",
+      isDisabled: isDisabled,
+      onChange: onChangeForm
+    })), /*#__PURE__*/React__default.createElement(SelectFIR, {
+      productType: "airmet",
+      isDisabled: isDisabled
+    }), /*#__PURE__*/React__default.createElement(StartGeometry, {
+      isReadOnly: isReadOnly,
+      drawMode: drawMode,
+      geoJSONs: geoJSONs,
+      setDrawModeType: function setDrawModeType(mapDrawMode, StartOrEndDrawing) {
+        _setDrawModeType(mapDrawMode, StartOrEndDrawing, updateStartDrawing);
+      }
+    }), !isCancelAirmet && phenomenon !== 'SFC_WIND' && phenomenon !== 'SFC_VIS' && phenomenon !== 'BKN_CLD' && phenomenon !== 'OVC_CLD' && /*#__PURE__*/React__default.createElement(Levels, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      onChange: onChangeForm,
+      productType: "airmet"
+    }), !isCancelAirmet && (phenomenon === 'BKN_CLD' || phenomenon === 'OVC_CLD') && /*#__PURE__*/React__default.createElement(CloudLevels, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      onChange: onChangeForm
+    }), !isCancelAirmet && /*#__PURE__*/React__default.createElement(Progress, {
+      productType: "airmet",
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      onChange: onChangeForm
+    }), !isCancelAirmet && /*#__PURE__*/React__default.createElement(Change, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
+    }), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      container: true,
+      spacing: 2,
+      className: classes.containerItem
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 4,
+      container: true,
+      justifyContent: "flex-end"
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "subtitle1",
+      className: classes.label
+    }, "Issued at")), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 8,
+      container: true,
+      justifyContent: "flex-start"
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 12
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "body2",
+      className: classes.body
+    }, getProductIssueDate(initialAirmet, initialCancelAirmet)))), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      container: true,
+      spacing: 2
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 4,
+      container: true,
+      justifyContent: "flex-end"
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "subtitle1",
+      className: classes.label
+    }, "TAC")), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 8,
+      container: true,
+      justifyContent: "flex-start"
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 12
+    }, /*#__PURE__*/React__default.createElement(ProductFormTAC, {
+      tac: tac
+    })))), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+      name: "sequence",
+      defaultValue: "-1"
+    }),
+    /* Add hidden fields for TAC generation in case of cancel airmet */
+    isCancelAirmet && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+      name: "cancelsAirmetSequenceId"
+    }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+      name: "validDateEndOfAirmetToCancel"
+    }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+      name: "validDateStartOfAirmetToCancel"
+    }))), /*#__PURE__*/React__default.createElement(Type, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
+    }));
+  };
+
+  if (!showMap) {
+    return renderForm();
+  }
+
   return /*#__PURE__*/React__default.createElement("form", {
     onChange: onChangeForm,
     onSubmit: handleSubmit(function () {
@@ -4429,7 +4580,7 @@ var AirmetForm = function AirmetForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8
-  }, showMap && /*#__PURE__*/React__default.createElement(MapViewGeoJson, {
+  }, /*#__PURE__*/React__default.createElement(MapViewGeoJson, {
     geoJSONs: geoJSONs,
     setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
       return _setLayerGeoJSONs(createInterSections(geoJSONs));
@@ -4442,123 +4593,7 @@ var AirmetForm = function AirmetForm(_ref) {
     item: true,
     xs: 4,
     className: classes.productForm
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    direction: "column",
-    spacing: 2
-  }, !isCancelAirmet && /*#__PURE__*/React__default.createElement(Phenomenon, {
-    productType: "airmet",
-    isDisabled: isDisabled,
-    onChange: onChangeForm
-  }), !isCancelAirmet && phenomenon === 'SFC_VIS' && /*#__PURE__*/React__default.createElement(SurfaceVisibility, {
-    isDisabled: isDisabled,
-    onChange: onChangeForm
-  }), !isCancelAirmet && phenomenon === 'SFC_WIND' && /*#__PURE__*/React__default.createElement(SurfaceWind, {
-    isDisabled: isDisabled,
-    onChange: onChangeForm
-  }), !isCancelAirmet && /*#__PURE__*/React__default.createElement(ObservationForecast, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly
-  }), !isCancelAirmet && /*#__PURE__*/React__default.createElement(ObservationForecastTime, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    helperText: helperText,
-    onChange: onChangeForm
-  }), /*#__PURE__*/React__default.createElement(ValidFrom, {
-    productType: "airmet",
-    isDisabled: isDisabled,
-    onChange: onChangeForm
-  }), /*#__PURE__*/React__default.createElement(ValidUntil, {
-    productType: "airmet",
-    isDisabled: isDisabled,
-    onChange: onChangeForm
-  })), /*#__PURE__*/React__default.createElement(SelectFIR, {
-    productType: "airmet",
-    isDisabled: isDisabled
-  }), /*#__PURE__*/React__default.createElement(StartGeometry, {
-    isReadOnly: isReadOnly,
-    drawMode: drawMode,
-    geoJSONs: geoJSONs,
-    setDrawModeType: function setDrawModeType(mapDrawMode, StartOrEndDrawing) {
-      _setDrawModeType(mapDrawMode, StartOrEndDrawing, updateStartDrawing);
-    }
-  }), !isCancelAirmet && phenomenon !== 'SFC_WIND' && phenomenon !== 'SFC_VIS' && phenomenon !== 'BKN_CLD' && phenomenon !== 'OVC_CLD' && /*#__PURE__*/React__default.createElement(Levels, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    onChange: onChangeForm,
-    productType: "airmet"
-  }), !isCancelAirmet && (phenomenon === 'BKN_CLD' || phenomenon === 'OVC_CLD') && /*#__PURE__*/React__default.createElement(CloudLevels, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    onChange: onChangeForm
-  }), !isCancelAirmet && /*#__PURE__*/React__default.createElement(Progress, {
-    productType: "airmet",
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly,
-    onChange: onChangeForm
-  }), !isCancelAirmet && /*#__PURE__*/React__default.createElement(Change, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly
-  }), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justify: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    className: classes.label
-  }, "Issued at")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justify: "flex-start"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "body2",
-    className: classes.body
-  }, getProductIssueDate(initialAirmet, initialCancelAirmet)))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justify: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    className: classes.label
-  }, "TAC")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justify: "flex-start"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(ProductFormTAC, {
-    tac: tac
-  })))), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
-    name: "sequence",
-    defaultValue: "-1"
-  }),
-  /* Add hidden fields for TAC generation in case of cancel airmet */
-  isCancelAirmet && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
-    name: "cancelsAirmetSequenceId"
-  }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
-    name: "validDateEndOfAirmetToCancel"
-  }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
-    name: "validDateStartOfAirmetToCancel"
-  }))), /*#__PURE__*/React__default.createElement(Type, {
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly
-  })))));
+  }, renderForm())));
 };
 
 var useStyles$3 = makeStyles({
@@ -4578,6 +4613,11 @@ var useStyles$3 = makeStyles({
     minHeight: 200,
     minWidth: 400,
     height: '100%'
+  },
+  dialog: {
+    '& .MuiDialogContent-root': {
+      paddingTop: 20
+    }
   }
 });
 
@@ -4607,9 +4647,8 @@ var ContentDialog = function ContentDialog(_a) {
     open: open,
     onClose: handleClose,
     maxWidth: other.maxWidth ? other.maxWidth : 'lg',
-    disableBackdropClick: true
+    className: classes.dialog
   }, other), /*#__PURE__*/React.createElement(DialogTitle, {
-    disableTypography: true,
     className: classes.dialogHeader
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -4901,7 +4940,7 @@ var ProductList = function ProductList(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained",
     color: "secondary",
@@ -4931,7 +4970,7 @@ var ProductList = function ProductList(_ref) {
     }));
   })), isLoading && /*#__PURE__*/React__default.createElement(Skeleton, {
     "data-testid": "productList-skeleton",
-    variant: "rect",
+    variant: "rectangular",
     height: "660px"
   })));
 };