@opengeoweb/sigmet-airmet 4.3.0 → 4.5.0

package/index.esm.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import React__default from 'react';
-import { FormControlLabel, Radio, Grid, Typography, Tooltip, Box, Button, Checkbox, MenuItem, FormHelperText, useTheme, Dialog, DialogTitle, DialogContent, Card, List, ListItem, Skeleton, Backdrop, CircularProgress } from '@mui/material';
+import { FormControlLabel, Radio, Grid, Typography, Box, Button, Checkbox, MenuItem, FormHelperText, useTheme, Dialog, DialogTitle, DialogContent, Card, 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 { 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, ReactHookFormFormControl, isGeometryDirty, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import produce, { produce as produce$1 } from 'immer';
 import * as turf from '@turf/turf';
 import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
-import { useDraftFormHelpers, ToggleMenu, useIsMounted, StatusTag, AlertBanner, usePreventBrowserClose, useConfirmationDialog, isAxiosError, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
+import { useDraftFormHelpers, CustomTooltip, ToggleMenu, useIsMounted, IS_JEST, StatusTag, AlertBanner, usePreventBrowserClose, useConfirmationDialog, isAxiosError, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
 import { Location, DrawRegion, DrawPolygon, DrawFIRLand, Delete, ChevronLeft, Edit, Success, Clock } from '@opengeoweb/theme';
 import moment from 'moment';
 import { debounce } from 'lodash';
@@ -1038,9 +1038,6 @@ var Change = function Change(_ref) {
   var isDisabled = _ref.isDisabled,
       isReadOnly = _ref.isReadOnly;
 
-  var _useFormContext = useFormContext(),
-      watch = _useFormContext.watch;
-
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
@@ -1057,18 +1054,19 @@ var Change = function Change(_ref) {
         isRequired: isRequired
       }
     },
-    disabled: isDisabled
-  }, (!isReadOnly || watch('change') === 'WKN') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "WKN",
     label: "Weakening",
     disabled: isDisabled,
     "data-testid": "change-WKN"
-  }), (!isReadOnly || watch('change') === 'NC') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "NC",
     label: "No change",
     disabled: isDisabled,
     "data-testid": "change-NC"
-  }), (!isReadOnly || watch('change') === 'INTSF') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "INTSF",
     label: "Intensifying",
     disabled: isDisabled,
@@ -1119,7 +1117,7 @@ var DrawTools = function DrawTools(_ref) {
     spacing: 1
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Drop a point as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(Location, null),
@@ -1133,7 +1131,7 @@ var DrawTools = function DrawTools(_ref) {
     sx: styles$1.radioInput
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Draw a box as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(DrawRegion, null),
@@ -1146,7 +1144,7 @@ var DrawTools = function DrawTools(_ref) {
     sx: styles$1.radioInput
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Draw a shape as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(DrawPolygon, null),
@@ -1159,7 +1157,7 @@ var DrawTools = function DrawTools(_ref) {
     sx: styles$1.radioInput
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Set FIR as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(DrawFIRLand, null),
@@ -1172,7 +1170,7 @@ var DrawTools = function DrawTools(_ref) {
     sx: styles$1.radioInput
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Remove geometry"
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(Delete, null),
@@ -1600,6 +1598,10 @@ var rewindGeometry = function rewindGeometry(geoJSON) {
     }
   });
 };
+var getFieldLabel = function getFieldLabel(title, isDisabled) {
+  var action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'Select';
+  return isDisabled ? title : "".concat(action, " ").concat(title.toLowerCase());
+};
 
 var location_indicator_mwo$1 = "EHDB";
 var firareas$1 = {
@@ -1769,6 +1771,7 @@ var Levels = function Levels(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     onChange: function onChange() {
       // Reset default value for the level value to '' so when it rerenders it uses this empty default value
       var currentValues = getValues();
@@ -1788,7 +1791,7 @@ var Levels = function Levels(_ref) {
 
       clearErrors(['level', 'lowerLevel']);
     }
-  }, (!isReadOnly || watch('levelInfoMode') === 'AT' || watch('levelInfoMode') === 'TOPS') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "AT",
     label: "At",
     checked: watch('levelInfoMode') === 'AT' || watch('levelInfoMode') === 'TOPS',
@@ -1805,7 +1808,7 @@ var Levels = function Levels(_ref) {
     item: true,
     xs: 12,
     md: 3
-  }, (!isReadOnly || watch('levelInfoMode') === 'TOPS') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('levelInfoMode') === 'TOPS',
       onChange: function onChange() {
@@ -1832,6 +1835,7 @@ var Levels = function Levels(_ref) {
     },
     sx: styles$2.unit,
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: 'FL',
     onChange: function onChange() {
       if (getValues('level.value') || getValues('level.value') === 0) {
@@ -1875,8 +1879,9 @@ var Levels = function Levels(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     autoFocus: true
-  }))) : null, (!isReadOnly || watch('levelInfoMode') === 'BETW' || watch('levelInfoMode') === 'BETW_SFC') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }))) : null, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "BETW",
     label: "Between",
     checked: watch('levelInfoMode') === 'BETW' || watch('levelInfoMode') === 'BETW_SFC',
@@ -1910,6 +1915,7 @@ var Levels = function Levels(_ref) {
     },
     sx: styles$2.unit,
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: 'FL',
     onChange: function onChange() {
       trigger([].concat(_toConsumableArray(getValues('level.value') || getValues('level.value') === 0 ? ['level.value'] : []), _toConsumableArray(getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0 ? ['lowerLevel.value'] : []), ['lowerLevel.unit']));
@@ -1951,6 +1957,7 @@ var Levels = function Levels(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     onChange: function onChange() {
       return (getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0) && trigger('lowerLevel.value');
     },
@@ -1966,7 +1973,7 @@ var Levels = function Levels(_ref) {
     item: true,
     xs: 12,
     md: 3
-  }, (!isReadOnly || watch('levelInfoMode') === 'BETW_SFC') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('levelInfoMode') === 'BETW_SFC',
       onChange: function onChange() {
@@ -2000,6 +2007,7 @@ var Levels = function Levels(_ref) {
     },
     sx: styles$2.unit,
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: getValues('level.unit') || 'FL',
     onChange: function onChange() {
       if (getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0) {
@@ -2048,8 +2056,9 @@ var Levels = function Levels(_ref) {
         }
       }
     },
-    disabled: isDisabled
-  }))))) : null, (!isReadOnly || watch('levelInfoMode') === 'ABV' || watch('levelInfoMode') === 'TOPS_ABV') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
+  }))))) : null, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "ABV",
     label: "Above",
     disabled: isDisabled,
@@ -2066,7 +2075,7 @@ var Levels = function Levels(_ref) {
     item: true,
     xs: 12,
     md: 3
-  }, (!isReadOnly || watch('levelInfoMode') === 'TOPS_ABV') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('levelInfoMode') === 'TOPS_ABV',
       onChange: function onChange() {
@@ -2092,6 +2101,7 @@ var Levels = function Levels(_ref) {
     },
     sx: styles$2.unit,
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: 'FL',
     onChange: function onChange() {
       if (getValues('level.value') || getValues('level.value') === 0) {
@@ -2134,6 +2144,7 @@ var Levels = function Levels(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     autoFocus: true
   }))) : null)));
 };
@@ -2186,7 +2197,8 @@ var ObservationForecast = function ObservationForecast(_ref) {
       if (getValues('observationOrForecastTime')) {
         trigger('observationOrForecastTime');
       }
-    }
+    },
+    isReadOnly: isReadOnly
   }, (!isReadOnly || watch('isObservationOrForecast') === 'OBS') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "OBS",
     label: "Observed",
@@ -2230,12 +2242,14 @@ var ObservationForecastTime = function ObservationForecastTime(_ref) {
   var _useFormContext = useFormContext(),
       watch = _useFormContext.watch;
 
+  var label = getFieldLabel('Date and time', isReadOnly);
   return (!isReadOnly || watch('observationOrForecastTime') !== null) && /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
     title: "At"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormDateTime, {
     disablePast: watch('isObservationOrForecast') === 'FCST',
     disableFuture: watch('isObservationOrForecast') === 'OBS',
     name: "observationOrForecastTime",
+    label: label,
     rules: {
       validate: {
         isValidDate: isValidDate,
@@ -2248,6 +2262,7 @@ var ObservationForecastTime = function ObservationForecastTime(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     helperText: helperText,
     onChange: onChange,
     sx: styles$2.helperText
@@ -2257,6 +2272,7 @@ var ObservationForecastTime = function ObservationForecastTime(_ref) {
 var Phenomenon = function Phenomenon(_ref) {
   var productType = _ref.productType,
       isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {
     return null;
@@ -2268,15 +2284,17 @@ var Phenomenon = function Phenomenon(_ref) {
       trigger = _useFormContext.trigger;
 
   var phenomenaList = productType === 'sigmet' ? SigmetPhenomena : AirmetPhenomena;
+  var label = getFieldLabel('Phenomenon', isReadOnly);
   return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
     title: "What"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
     name: "phenomenon",
-    label: "Select phenomenon",
+    label: label,
     rules: {
       required: true
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     "data-testid": "phenomenon",
     onChange: function onChange() {
       if (getValues('movementType') === 'NO_VA_EXP') {
@@ -2498,18 +2516,19 @@ var Progress = function Progress(_ref) {
     },
     onChange: function onChange() {
       return setDrawModeType ? setDrawModeType(MapDrawMode.DELETE, StartOrEndDrawing.end) : null;
-    }
-  }, watch('phenomenon') === 'VA_CLD' && (!isReadOnly || movementType === 'NO_VA_EXP') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+    },
+    isReadOnly: isReadOnly
+  }, watch('phenomenon') === 'VA_CLD' && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "NO_VA_EXP",
     label: "No volcanic ash expected",
     disabled: isDisabled,
     "data-testid": "movementType-NO_VA_EXP"
-  }), (!isReadOnly || movementType === 'STATIONARY') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "STATIONARY",
     label: "Stationary",
     disabled: isDisabled,
     "data-testid": "movementType-STATIONARY"
-  }), (!isReadOnly || movementType === 'MOVEMENT') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "MOVEMENT",
     label: "Movement",
     disabled: isDisabled,
@@ -2525,6 +2544,7 @@ var Progress = function Progress(_ref) {
     },
     sx: styles$2.movement,
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     "data-testid": "movement-movementDirection",
     onChange: function onChange(event) {
       event.stopPropagation();
@@ -2552,6 +2572,7 @@ var Progress = function Progress(_ref) {
     },
     sx: styles$2.unit,
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: 'KT',
     "data-testid": "movement-movementUnit",
     onChange: function onChange(event) {
@@ -2596,11 +2617,12 @@ var Progress = function Progress(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     "data-testid": "movement-movementSpeed",
     onChange: function onChange(event) {
       return event && event.stopPropagation();
     }
-  })))), productType === 'sigmet' && (!isReadOnly || movementType === 'FORECAST_POSITION') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  })))), productType === 'sigmet' && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "FORECAST_POSITION",
     label: "End position",
     disabled: isDisabled,
@@ -2671,7 +2693,8 @@ var Progress = function Progress(_ref) {
 
 var SelectFIR = function SelectFIR(_ref) {
   var productType = _ref.productType,
-      isDisabled = _ref.isDisabled;
+      isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly;
 
   var _useFormContext = useFormContext(),
       setValue = _useFormContext.setValue;
@@ -2691,13 +2714,14 @@ var SelectFIR = function SelectFIR(_ref) {
     sx: styles$2.containerItem
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
     name: "locationIndicatorATSR",
-    label: "Select FIR",
+    label: isReadOnly ? 'FIR' : 'Select FIR',
     rules: {
       validate: {
         isRequired: isRequired
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: defaultATSR,
     onChange: function onChange(changeEvent) {
       setValue('locationIndicatorATSU', allFIRS[changeEvent.target.value].location_indicator_atsu);
@@ -2744,9 +2768,6 @@ var Type = function Type(_ref) {
   var isReadOnly = _ref.isReadOnly,
       isDisabled = _ref.isDisabled;
 
-  var _useFormContext = useFormContext(),
-      watch = _useFormContext.watch;
-
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
@@ -2764,18 +2785,19 @@ var Type = function Type(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: "NORMAL"
-  }, (!isReadOnly || watch('type') === 'NORMAL') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "NORMAL",
     label: "Normal",
     disabled: isDisabled,
     "data-testid": "type-NORMAL"
-  }), (!isReadOnly || watch('type') === 'TEST') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "TEST",
     label: "Test",
     disabled: isDisabled,
     "data-testid": "type-TEST"
-  }), (!isReadOnly || watch('type') === 'EXERCISE') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "EXERCISE",
     label: "Exercise",
     disabled: isDisabled,
@@ -2808,6 +2830,7 @@ var getValidFromXHoursBeforeMessage = function getValidFromXHoursBeforeMessage(h
 var ValidFrom = function ValidFrom(_ref) {
   var productType = _ref.productType,
       isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {
     return null;
@@ -2821,11 +2844,13 @@ var ValidFrom = function ValidFrom(_ref) {
       isRequired = _useDraftFormHelpers.isRequired;
 
   var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
+  var label = getFieldLabel('Date and time', isReadOnly);
   return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
     title: "Valid from"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormDateTime, {
     disablePast: true,
     name: "validDateStart",
+    label: label,
     defaultNullValue: moment.utc().add(VALID_FROM_TIME_DELAY_IN_MINUTES, 'minutes').format('YYYY-MM-DDTHH:mm:ss[Z]'),
     rules: {
       validate: {
@@ -2853,6 +2878,7 @@ var ValidFrom = function ValidFrom(_ref) {
       _onChange();
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     "data-testid": "valid-from"
   }));
 };
@@ -2882,6 +2908,7 @@ var getDefaultHoursValid = function getDefaultHoursValid(productType) {
 var ValidUntil = function ValidUntil(_ref) {
   var productType = _ref.productType,
       isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {
     return null;
@@ -2894,6 +2921,7 @@ var ValidUntil = function ValidUntil(_ref) {
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
+  var label = getFieldLabel('Date and time', isReadOnly);
   var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
   var defaultHoursValid = getDefaultHoursValid(productType);
   return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
@@ -2901,6 +2929,7 @@ var ValidUntil = function ValidUntil(_ref) {
   }, /*#__PURE__*/React__default.createElement(ReactHookFormDateTime, {
     disablePast: true,
     name: "validDateEnd",
+    label: label,
     defaultNullValue: moment.utc().add(defaultHoursValid, 'hour').add(VALID_FROM_TIME_DELAY_IN_MINUTES, 'minutes').format('YYYY-MM-DDTHH:mm:ss[Z]'),
     rules: {
       validate: {
@@ -2917,6 +2946,7 @@ var ValidUntil = function ValidUntil(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     onChange: function onChange() {
       if (getValues('validDateStart')) {
         trigger('validDateStart');
@@ -2984,7 +3014,8 @@ var VolcanicFields = function VolcanicFields(_ref) {
     },
     disabled: isDisabled,
     helperText: helperText,
-    upperCase: true
+    upperCase: true,
+    isReadOnly: isReadOnly
   })), (!isReadOnly || !!watch('vaSigmetVolcanoCoordinates.latitude')) && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 6
@@ -3008,7 +3039,8 @@ var VolcanicFields = function VolcanicFields(_ref) {
     helperText: helperText,
     onChange: function onChange() {
       return trigger('vaSigmetVolcanoCoordinates.longitude');
-    }
+    },
+    isReadOnly: isReadOnly
   })), (!isReadOnly || !!watch('vaSigmetVolcanoCoordinates.longitude')) && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 6
@@ -3032,7 +3064,8 @@ var VolcanicFields = function VolcanicFields(_ref) {
     onChange: function onChange() {
       return trigger('vaSigmetVolcanoCoordinates.latitude');
     },
-    sx: styles$2.helperText
+    sx: styles$2.helperText,
+    isReadOnly: isReadOnly
   }))));
 };
 
@@ -3068,6 +3101,7 @@ var validateSurfaceVisibility = function validateSurfaceVisibility(value) {
 
 var SurfaceVisibility = function SurfaceVisibility(_ref) {
   var isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {
     return null;
@@ -3076,6 +3110,8 @@ var SurfaceVisibility = function SurfaceVisibility(_ref) {
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
+  var visibilityLabel = getFieldLabel('Visibility', isReadOnly);
+  var visibilityCauseLabel = getFieldLabel('Cause', isReadOnly);
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -3097,7 +3133,7 @@ var SurfaceVisibility = function SurfaceVisibility(_ref) {
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "visibilityValue",
     "data-testid": "surfaceVisibility-visibilityValue",
-    label: "Select visibility",
+    label: visibilityLabel,
     helperText: "Value in meters",
     rules: {
       min: {
@@ -3113,19 +3149,21 @@ var SurfaceVisibility = function SurfaceVisibility(_ref) {
         validateSurfaceVisibility: validateSurfaceVisibility
       }
     },
-    disabled: isDisabled
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
     name: "visibilityCause",
-    label: "Select cause",
+    label: visibilityCauseLabel,
     rules: {
       validate: {
         isRequired: isRequired
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     "data-testid": "surfaceVisibility-visibilityCause",
     onChange: function onChange(event) {
       event.stopPropagation();
@@ -3166,6 +3204,7 @@ var validateSurfaceWindDirection = function validateSurfaceWindDirection(value)
 
 var SurfaceWind = function SurfaceWind(_ref) {
   var isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {
     return null;
@@ -3185,6 +3224,8 @@ var SurfaceWind = function SurfaceWind(_ref) {
   var selectedFIR = watch('locationIndicatorATSR'); // Get allowed speed units based on selected FIR - if no FIR selected, allow all units
 
   var allowedWindUnitsForFir = getAllowedUnits(selectedFIR, allowedUnits, 'surfacewind_unit', WindUnit);
+  var windLabel = getFieldLabel('Wind direction', isReadOnly, 'Set');
+  var speedLabel = getFieldLabel('Speed', isReadOnly, 'Set');
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -3205,7 +3246,7 @@ var SurfaceWind = function SurfaceWind(_ref) {
     sx: styles$2.surfaceWind
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "windDirection",
-    label: "Set wind direction",
+    label: windLabel,
     helperText: "Value in degrees",
     rules: {
       min: {
@@ -3222,6 +3263,7 @@ var SurfaceWind = function SurfaceWind(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     "data-testid": "surfaceWind-windDirection"
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -3240,6 +3282,7 @@ var SurfaceWind = function SurfaceWind(_ref) {
     },
     sx: styles$2.unit,
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: 'KT',
     "data-testid": "surfaceWind-windUnit",
     onChange: function onChange() {
@@ -3259,7 +3302,7 @@ var SurfaceWind = function SurfaceWind(_ref) {
     xs: 7
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "windSpeed",
-    label: "Set speed",
+    label: speedLabel,
     rules: {
       validate: {
         isRequired: isRequired,
@@ -3277,6 +3320,7 @@ var SurfaceWind = function SurfaceWind(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     "data-testid": "surfaceWind-windSpeed"
   })))));
 };
@@ -3373,7 +3417,10 @@ var CloudLevels = function CloudLevels(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4
-  }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
+  }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default.createElement(ReactHookFormFormControl, {
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV',
       onChange: function onChange() {
@@ -3409,7 +3456,7 @@ var CloudLevels = function CloudLevels(_ref) {
     }),
     "data-testid": "cloudLevels-Above",
     label: "Above"
-  })), /*#__PURE__*/React__default.createElement(Grid, {
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 3
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
@@ -3423,6 +3470,7 @@ var CloudLevels = function CloudLevels(_ref) {
     },
     sx: styles$2.unit,
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: 'FT',
     onChange: function onChange() {
       if (getValues('cloudLevel.value') || getValues('cloudLevel.value') === 0) {
@@ -3471,6 +3519,7 @@ var CloudLevels = function CloudLevels(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     onChange: function onChange() {
       return (getValues('cloudLowerLevel.value') || getValues('cloudLowerLevel.value') === 0) && trigger('cloudLowerLevel.value');
     }
@@ -3481,7 +3530,10 @@ var CloudLevels = function CloudLevels(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4
-  }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
+  }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default.createElement(ReactHookFormFormControl, {
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV',
       onChange: function onChange() {
@@ -3517,7 +3569,7 @@ var CloudLevels = function CloudLevels(_ref) {
     }),
     "data-testid": "cloudLevels-SFC",
     label: "SFC"
-  })), watch('cloudLevelInfoMode') !== 'BETW_SFC' && watch('cloudLevelInfoMode') !== 'BETW_SFC_ABV' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
+  }))), watch('cloudLevelInfoMode') !== 'BETW_SFC' && watch('cloudLevelInfoMode') !== 'BETW_SFC_ABV' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 3
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
@@ -3531,6 +3583,7 @@ var CloudLevels = function CloudLevels(_ref) {
     },
     sx: styles$2.unit,
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: getValues('cloudLevel.unit') ? getValues('cloudLevel.unit') : 'FT',
     onChange: function onChange() {
       if (getValues('cloudLowerLevel.value') || getValues('cloudLowerLevel.value') === 0) {
@@ -3582,7 +3635,8 @@ var CloudLevels = function CloudLevels(_ref) {
         }
       }
     },
-    disabled: isDisabled
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
   })))))));
 };
 
@@ -3715,7 +3769,8 @@ var ProductFormTAC = function ProductFormTAC(_ref) {
  * */
 
 var IssuedAt = function IssuedAt(_ref) {
-  var date = _ref.date;
+  var date = _ref.date,
+      isReadOnly = _ref.isReadOnly;
   return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
     title: "Issued at"
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -3725,7 +3780,7 @@ var IssuedAt = function IssuedAt(_ref) {
     variant: "body2",
     sx: Object.assign(Object.assign({}, styles$2.body), {
       fontSize: '1rem',
-      color: 'geowebColors.buttons.primary.disabled.color'
+      color: isReadOnly ? 'geowebColors.typographyAndIcons.text' : 'geowebColors.buttons.primary.disabled.color'
     })
   }, date)));
 };
@@ -4154,6 +4209,7 @@ var SigmetForm = function SigmetForm(_ref) {
     }, !isCancelSigmet && /*#__PURE__*/React__default.createElement(Phenomenon, {
       productType: "sigmet",
       isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
       onChange: onChangeForm
     }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(ObservationForecast, {
       isDisabled: isDisabled,
@@ -4170,14 +4226,17 @@ var SigmetForm = function SigmetForm(_ref) {
     }), /*#__PURE__*/React__default.createElement(ValidFrom, {
       productType: "sigmet",
       isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
       onChange: onChangeForm
     }), /*#__PURE__*/React__default.createElement(ValidUntil, {
       productType: "sigmet",
       isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
       onChange: onChangeForm
     }), /*#__PURE__*/React__default.createElement(SelectFIR, {
       productType: "sigmet",
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
     }), /*#__PURE__*/React__default.createElement(StartGeometry, {
       isReadOnly: isReadOnly,
       drawMode: drawMode,
@@ -4211,7 +4270,8 @@ var SigmetForm = function SigmetForm(_ref) {
       sx: styles$2.body,
       "data-testid": "vaSigmetMoveToFIR"
     }, "Volcanic Cloud is moving in the direction of:", ' ', /*#__PURE__*/React__default.createElement("b", null, " ", watch('vaSigmetMoveToFIR'))))), /*#__PURE__*/React__default.createElement(IssuedAt, {
-      date: getProductIssueDate(initialSigmet, initialCancelSigmet)
+      date: getProductIssueDate(initialSigmet, initialCancelSigmet),
+      isReadOnly: isReadOnly
     }), /*#__PURE__*/React__default.createElement(Tac, {
       tac: tac
     }, /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
@@ -4343,11 +4403,14 @@ var AirmetForm = function AirmetForm(_ref) {
     }, !isCancelAirmet && /*#__PURE__*/React__default.createElement(Phenomenon, {
       productType: "airmet",
       isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
       onChange: onChangeForm
     }), !isCancelAirmet && phenomenon === 'SFC_VIS' && /*#__PURE__*/React__default.createElement(SurfaceVisibility, {
+      isReadOnly: isReadOnly,
       isDisabled: isDisabled,
       onChange: onChangeForm
     }), !isCancelAirmet && phenomenon === 'SFC_WIND' && /*#__PURE__*/React__default.createElement(SurfaceWind, {
+      isReadOnly: isReadOnly,
       isDisabled: isDisabled,
       onChange: onChangeForm
     }), !isCancelAirmet && /*#__PURE__*/React__default.createElement(ObservationForecast, {
@@ -4360,14 +4423,17 @@ var AirmetForm = function AirmetForm(_ref) {
       onChange: onChangeForm
     }), /*#__PURE__*/React__default.createElement(ValidFrom, {
       productType: "airmet",
+      isReadOnly: isReadOnly,
       isDisabled: isDisabled,
       onChange: onChangeForm
     }), /*#__PURE__*/React__default.createElement(ValidUntil, {
       productType: "airmet",
+      isReadOnly: isReadOnly,
       isDisabled: isDisabled,
       onChange: onChangeForm
     }), /*#__PURE__*/React__default.createElement(SelectFIR, {
       productType: "airmet",
+      isReadOnly: isReadOnly,
       isDisabled: isDisabled
     }), /*#__PURE__*/React__default.createElement(StartGeometry, {
       isReadOnly: isReadOnly,
@@ -4394,6 +4460,7 @@ var AirmetForm = function AirmetForm(_ref) {
       isDisabled: isDisabled,
       isReadOnly: isReadOnly
     }), /*#__PURE__*/React__default.createElement(IssuedAt, {
+      isReadOnly: isReadOnly,
       date: getProductIssueDate(initialAirmet, initialCancelAirmet)
     }), /*#__PURE__*/React__default.createElement(Tac, {
       tac: tac
@@ -4537,8 +4604,7 @@ var ContentDialog = function ContentDialog(_a) {
 var styles = {
   activeStatus: {
     color: '#72bb23',
-    paddingLeft: '6px',
-    paddingTop: '2px'
+    paddingLeft: '6px'
   },
   font: {
     fontWeight: 'normal'
@@ -4566,21 +4632,30 @@ var getStatusTagList = function getStatusTagList(product) {
   if (cancelsSeqId !== null) {
     return /*#__PURE__*/React__default.createElement(StatusTag, {
       content: "cancels ".concat(cancelsSeqId),
-      color: "red"
+      color: "red",
+      sx: {
+        width: '80px'
+      }
     });
   }
 
   if (product.status === 'CANCELLED') {
     return /*#__PURE__*/React__default.createElement(StatusTag, {
       content: "cancelled ".concat(product.sequence),
-      color: "red"
+      color: "red",
+      sx: {
+        width: '80px'
+      }
     });
   }
 
   if (moment(product.validDateEnd) < moment.utc(new Date())) {
     return /*#__PURE__*/React__default.createElement(StatusTag, {
       content: "expired",
-      color: "grey"
+      color: "grey",
+      sx: {
+        width: '80px'
+      }
     });
   }
 
@@ -4588,7 +4663,8 @@ var getStatusTagList = function getStatusTagList(product) {
     content: product.status.toLowerCase(),
     color: product.status === 'PUBLISHED' ? 'green' : 'grey',
     sx: {
-      marginRight: '0!important'
+      marginRight: '0!important',
+      width: '80px'
     }
   });
 };
@@ -4668,36 +4744,67 @@ var ProductListRow = function ProductListRow(_ref2) {
     variant: "outlined",
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     sx: function sx(theme) {
-      return _defineProperty({
+      return Object.assign({
         width: '100%',
-        paddingLeft: 1,
-        paddingRight: 1,
-        paddingTop: 1.5,
-        paddingBottom: 1.5,
-        '&:last-child': {
-          paddingBottom: 1.5
-        }
-      }, theme.breakpoints.up('sm'), {
-        paddingLeft: 4,
-        paddingRight: 4,
-        paddingTop: 2,
-        paddingBottom: 2,
-        '&:last-child': {
-          paddingBottom: 2
+        '.wrapper-container': _defineProperty({
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1.5,
+          paddingBottom: 1.5,
+          '&:last-child': {
+            paddingBottom: 1.5
+          }
+        }, theme.breakpoints.up('sm'), {
+          paddingLeft: 4,
+          paddingRight: 4,
+          paddingTop: 2,
+          paddingBottom: 2,
+          '&:last-child': {
+            paddingBottom: 2
+          }
+        })
+      }, !IS_JEST && {
+        '@container (max-width: 768px)': {
+          '.wrapper-container:not(.container-query-polyfill)': {
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 1.5,
+            paddingBottom: 1.5
+          },
+          '.col-1:not(.container-query-polyfill)': {
+            maxWidth: '25%',
+            flexBasis: '25%'
+          },
+          '.col-2:not(.container-query-polyfill)': {
+            maxWidth: '75%',
+            flexBasis: '75%'
+          },
+          '.col-3:not(.container-query-polyfill)': {
+            maxWidth: '100%',
+            flexBasis: '100%'
+          },
+          '.col-4:not(.container-query-polyfill)': {
+            maxWidth: '100%',
+            flexBasis: '100%',
+            justifyContent: 'center'
+          }
         }
       });
     }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    className: "wrapper-container"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     alignItems: "center",
     spacing: 2
   }, /*#__PURE__*/React__default.createElement(Grid, {
+    className: "col-1",
     item: true,
     xs: 3,
     sm: 1
   }, phenomenon !== null && /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
     title: productType.toUpperCase()
-  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }), /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: phenomenon !== null ? getPhenomenon(productType, phenomenon) : '',
     placement: "bottom-start"
   }, /*#__PURE__*/React__default.createElement(Typography, {
@@ -4705,12 +4812,13 @@ var ProductListRow = function ProductListRow(_ref2) {
     noWrap: true,
     sx: styles.font
   }, phenomenon !== null ? phenomenon : 'Cancel'))), /*#__PURE__*/React__default.createElement(Grid, {
+    className: "col-2",
     item: true,
     xs: 9,
     sm: 3
   }, /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
     title: "Issue time"
-  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }), /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
       title: "TAC"
     }), /*#__PURE__*/React__default.createElement(Typography, {
@@ -4745,9 +4853,10 @@ var ProductListRow = function ProductListRow(_ref2) {
     sx: styles.font,
     "data-testid": "issueTime"
   }, product.issueDate ? "".concat(moment.utc(product.issueDate).format('DD MMM YYYY, HH:mm'), " UTC") : '(Not published)'))), /*#__PURE__*/React__default.createElement(Grid, {
+    className: "col-3",
     item: true,
     xs: 12,
-    sm: 6
+    sm: 5
   }, /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
     title: "Valid time"
   }), /*#__PURE__*/React__default.createElement(Typography, {
@@ -4756,10 +4865,12 @@ var ProductListRow = function ProductListRow(_ref2) {
     "data-testid": "validTime"
   }, validTime)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
+    className: "col-4",
     xs: 12,
-    sm: 2,
+    sm: 3,
     container: true,
     justifyContent: "center",
+    alignItems: "center",
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     sx: function sx(theme) {
       return _defineProperty({}, theme.breakpoints.up('sm'), {
@@ -4778,7 +4889,7 @@ var ProductListRow = function ProductListRow(_ref2) {
     },
     variant: "flat",
     startIcon: /*#__PURE__*/React__default.createElement(Edit, null)
-  }, "DRAFT") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product))));
+  }, "DRAFT") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product)))));
 };
 
 /* *
@@ -4833,7 +4944,8 @@ var ProductList = function ProductList(_ref) {
     dataTestId: "productList-alert"
   }), productList && /*#__PURE__*/React__default.createElement(List, {
     sx: {
-      paddingTop: 4
+      paddingTop: 4,
+      containerType: 'inline-size'
     }
   }, productList.map(function (productListItem, index) {
     var product = productListItem[productType];
@@ -4845,7 +4957,7 @@ var ProductList = function ProductList(_ref) {
       },
       key: product.sequence && product.issueDate ? "".concat(product.sequence, "-").concat(product.issueDate) : "draft-".concat(index),
       sx: {
-        padding: '2px'
+        padding: 0.25
       }
     }, /*#__PURE__*/React__default.createElement(ProductListRow, {
       product: product,