@opengeoweb/sigmet-airmet 4.3.0 → 4.5.0

package/index.umd.js

@@ -1011,7 +1011,6 @@
     var Change = function Change(_a) {
       var isDisabled = _a.isDisabled,
           isReadOnly = _a.isReadOnly;
-      var watch = reactHookForm.useFormContext().watch;
       var isRequired = shared.useDraftFormHelpers().isRequired;
       return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
         title: "Change",
@@ -1026,18 +1025,19 @@
             isRequired: isRequired
           }
         },
-        disabled: isDisabled
-      }, (!isReadOnly || watch('change') === 'WKN') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
+      }, /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "WKN",
         label: "Weakening",
         disabled: isDisabled,
         "data-testid": "change-WKN"
-      }), (!isReadOnly || watch('change') === 'NC') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "NC",
         label: "No change",
         disabled: isDisabled,
         "data-testid": "change-NC"
-      }), (!isReadOnly || watch('change') === 'INTSF') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "INTSF",
         label: "Intensifying",
         disabled: isDisabled,
@@ -1088,7 +1088,7 @@
         spacing: 1
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Drop a point as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.Location, null),
@@ -1102,7 +1102,7 @@
         sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Draw a box as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, null),
@@ -1115,7 +1115,7 @@
         sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Draw a shape as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, null),
@@ -1128,7 +1128,7 @@
         sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Set FIR as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, null),
@@ -1141,7 +1141,7 @@
         sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }, /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: "Remove geometry"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
@@ -1595,6 +1595,13 @@
         }
       });
     };
+    var getFieldLabel = function getFieldLabel(title, isDisabled, action) {
+      if (action === void 0) {
+        action = 'Select';
+      }
+
+      return isDisabled ? title : action + " " + title.toLowerCase();
+    };
 
     var location_indicator_mwo$1 = "EHDB";
     var firareas$1 = {
@@ -1759,6 +1766,7 @@
           }
         },
         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();
@@ -1778,7 +1786,7 @@
 
           clearErrors(['level', 'lowerLevel']);
         }
-      }, (!isReadOnly || watch('levelInfoMode') === 'AT' || watch('levelInfoMode') === 'TOPS') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }, /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "AT",
         label: "At",
         checked: watch('levelInfoMode') === 'AT' || watch('levelInfoMode') === 'TOPS',
@@ -1795,7 +1803,7 @@
         item: true,
         xs: 12,
         md: 3
-      }, (!isReadOnly || watch('levelInfoMode') === 'TOPS') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('levelInfoMode') === 'TOPS',
           onChange: function onChange() {
@@ -1822,6 +1830,7 @@
         },
         sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'FL',
         onChange: function onChange() {
           if (getValues('level.value') || getValues('level.value') === 0) {
@@ -1862,8 +1871,9 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         autoFocus: true
-      }))) : null, (!isReadOnly || watch('levelInfoMode') === 'BETW' || watch('levelInfoMode') === 'BETW_SFC') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }))) : null, /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "BETW",
         label: "Between",
         checked: watch('levelInfoMode') === 'BETW' || watch('levelInfoMode') === 'BETW_SFC',
@@ -1896,6 +1906,7 @@
         },
         sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'FL',
         onChange: function onChange() {
           trigger(__spreadArray(__spreadArray(__spreadArray([], __read(getValues('level.value') || getValues('level.value') === 0 ? ['level.value'] : [])), __read(getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0 ? ['lowerLevel.value'] : [])), ['lowerLevel.unit']));
@@ -1934,6 +1945,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         onChange: function onChange() {
           return (getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0) && trigger('lowerLevel.value');
         },
@@ -1949,7 +1961,7 @@
         item: true,
         xs: 12,
         md: 3
-      }, (!isReadOnly || watch('levelInfoMode') === 'BETW_SFC') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('levelInfoMode') === 'BETW_SFC',
           onChange: function onChange() {
@@ -1982,6 +1994,7 @@
         },
         sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: getValues('level.unit') || 'FL',
         onChange: function onChange() {
           if (getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0) {
@@ -2026,8 +2039,9 @@
             }
           }
         },
-        disabled: isDisabled
-      }))))) : null, (!isReadOnly || watch('levelInfoMode') === 'ABV' || watch('levelInfoMode') === 'TOPS_ABV') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
+      }))))) : null, /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "ABV",
         label: "Above",
         disabled: isDisabled,
@@ -2044,7 +2058,7 @@
         item: true,
         xs: 12,
         md: 3
-      }, (!isReadOnly || watch('levelInfoMode') === 'TOPS_ABV') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('levelInfoMode') === 'TOPS_ABV',
           onChange: function onChange() {
@@ -2070,6 +2084,7 @@
         },
         sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'FL',
         onChange: function onChange() {
           if (getValues('level.value') || getValues('level.value') === 0) {
@@ -2109,6 +2124,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         autoFocus: true
       }))) : null)));
     };
@@ -2159,7 +2175,8 @@
           if (getValues('observationOrForecastTime')) {
             trigger('observationOrForecastTime');
           }
-        }
+        },
+        isReadOnly: isReadOnly
       }, (!isReadOnly || watch('isObservationOrForecast') === 'OBS') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "OBS",
         label: "Observed",
@@ -2200,12 +2217,14 @@
         return null;
       } : _b;
       var watch = reactHookForm.useFormContext().watch;
+      var label = getFieldLabel('Date and time', isReadOnly);
       return (!isReadOnly || watch('observationOrForecastTime') !== null) && /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
         title: "At"
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormDateTime, {
         disablePast: watch('isObservationOrForecast') === 'FCST',
         disableFuture: watch('isObservationOrForecast') === 'OBS',
         name: "observationOrForecastTime",
+        label: label,
         rules: {
           validate: {
             isValidDate: formFields.isValidDate,
@@ -2218,6 +2237,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         helperText: helperText,
         onChange: onChange,
         sx: styles$2.helperText
@@ -2227,6 +2247,7 @@
     var Phenomenon = function Phenomenon(_a) {
       var productType = _a.productType,
           isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly,
           _b = _a.onChange,
           _onChange = _b === void 0 ? function () {
         return null;
@@ -2238,15 +2259,17 @@
           trigger = _c.trigger;
 
       var phenomenaList = productType === 'sigmet' ? SigmetPhenomena : AirmetPhenomena;
+      var label = getFieldLabel('Phenomenon', isReadOnly);
       return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
         title: "What"
       }, /*#__PURE__*/React__default["default"].createElement(formFields.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') {
@@ -2463,18 +2486,19 @@
         },
         onChange: function onChange() {
           return setDrawModeType ? setDrawModeType(MapDrawMode.DELETE, StartOrEndDrawing.end) : null;
-        }
-      }, watch('phenomenon') === 'VA_CLD' && (!isReadOnly || movementType === 'NO_VA_EXP') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+        },
+        isReadOnly: isReadOnly
+      }, watch('phenomenon') === 'VA_CLD' && /*#__PURE__*/React__default["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["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "STATIONARY",
         label: "Stationary",
         disabled: isDisabled,
         "data-testid": "movementType-STATIONARY"
-      }), (!isReadOnly || movementType === 'MOVEMENT') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "MOVEMENT",
         label: "Movement",
         disabled: isDisabled,
@@ -2490,6 +2514,7 @@
         },
         sx: styles$2.movement,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         "data-testid": "movement-movementDirection",
         onChange: function onChange(event) {
           event.stopPropagation();
@@ -2517,6 +2542,7 @@
         },
         sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'KT',
         "data-testid": "movement-movementUnit",
         onChange: function onChange(event) {
@@ -2558,11 +2584,12 @@
           }
         },
         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["default"].createElement(RadioButtonAndLabel, {
+      })))), productType === 'sigmet' && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "FORECAST_POSITION",
         label: "End position",
         disabled: isDisabled,
@@ -2633,7 +2660,8 @@
 
     var SelectFIR = function SelectFIR(_a) {
       var productType = _a.productType,
-          isDisabled = _a.isDisabled;
+          isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly;
       var setValue = reactHookForm.useFormContext().setValue;
       var isRequired = shared.useDraftFormHelpers().isRequired;
       var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
@@ -2648,13 +2676,14 @@
         sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(formFields.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);
@@ -2700,7 +2729,6 @@
     var Type = function Type(_a) {
       var isReadOnly = _a.isReadOnly,
           isDisabled = _a.isDisabled;
-      var watch = reactHookForm.useFormContext().watch;
       var isRequired = shared.useDraftFormHelpers().isRequired;
       return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
         title: "Type",
@@ -2716,18 +2744,19 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: "NORMAL"
-      }, (!isReadOnly || watch('type') === 'NORMAL') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }, /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "NORMAL",
         label: "Normal",
         disabled: isDisabled,
         "data-testid": "type-NORMAL"
-      }), (!isReadOnly || watch('type') === 'TEST') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "TEST",
         label: "Test",
         disabled: isDisabled,
         "data-testid": "type-TEST"
-      }), (!isReadOnly || watch('type') === 'EXERCISE') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "EXERCISE",
         label: "Exercise",
         disabled: isDisabled,
@@ -2760,6 +2789,7 @@
     var ValidFrom = function ValidFrom(_a) {
       var productType = _a.productType,
           isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly,
           _b = _a.onChange,
           _onChange = _b === void 0 ? function () {
         return null;
@@ -2771,11 +2801,13 @@
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
       var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
+      var label = getFieldLabel('Date and time', isReadOnly);
       return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
         title: "Valid from"
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormDateTime, {
         disablePast: true,
         name: "validDateStart",
+        label: label,
         defaultNullValue: moment__default["default"].utc().add(VALID_FROM_TIME_DELAY_IN_MINUTES, 'minutes').format('YYYY-MM-DDTHH:mm:ss[Z]'),
         rules: {
           validate: {
@@ -2803,6 +2835,7 @@
           _onChange();
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         "data-testid": "valid-from"
       }));
     };
@@ -2832,6 +2865,7 @@
     var ValidUntil = function ValidUntil(_a) {
       var productType = _a.productType,
           isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly,
           _b = _a.onChange,
           _onChange = _b === void 0 ? function () {
         return null;
@@ -2842,6 +2876,7 @@
           trigger = _c.trigger;
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
+      var label = getFieldLabel('Date and time', isReadOnly);
       var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
       var defaultHoursValid = getDefaultHoursValid(productType);
       return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
@@ -2849,6 +2884,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormDateTime, {
         disablePast: true,
         name: "validDateEnd",
+        label: label,
         defaultNullValue: moment__default["default"].utc().add(defaultHoursValid, 'hour').add(VALID_FROM_TIME_DELAY_IN_MINUTES, 'minutes').format('YYYY-MM-DDTHH:mm:ss[Z]'),
         rules: {
           validate: {
@@ -2865,6 +2901,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         onChange: function onChange() {
           if (getValues('validDateStart')) {
             trigger('validDateStart');
@@ -2915,7 +2952,8 @@
         },
         disabled: isDisabled,
         helperText: helperText,
-        upperCase: true
+        upperCase: true,
+        isReadOnly: isReadOnly
       })), (!isReadOnly || !!watch('vaSigmetVolcanoCoordinates.latitude')) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 6
@@ -2939,7 +2977,8 @@
         helperText: helperText,
         onChange: function onChange() {
           return trigger('vaSigmetVolcanoCoordinates.longitude');
-        }
+        },
+        isReadOnly: isReadOnly
       })), (!isReadOnly || !!watch('vaSigmetVolcanoCoordinates.longitude')) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 6
@@ -2963,7 +3002,8 @@
         onChange: function onChange() {
           return trigger('vaSigmetVolcanoCoordinates.latitude');
         },
-        sx: styles$2.helperText
+        sx: styles$2.helperText,
+        isReadOnly: isReadOnly
       }))));
     };
 
@@ -2999,12 +3039,15 @@
 
     var SurfaceVisibility = function SurfaceVisibility(_a) {
       var isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly,
           _b = _a.onChange,
           _onChange = _b === void 0 ? function () {
         return null;
       } : _b;
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
+      var visibilityLabel = getFieldLabel('Visibility', isReadOnly);
+      var visibilityCauseLabel = getFieldLabel('Cause', isReadOnly);
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         container: true,
@@ -3026,7 +3069,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "visibilityValue",
         "data-testid": "surfaceVisibility-visibilityValue",
-        label: "Select visibility",
+        label: visibilityLabel,
         helperText: "Value in meters",
         rules: {
           min: {
@@ -3042,19 +3085,21 @@
             validateSurfaceVisibility: validateSurfaceVisibility
           }
         },
-        disabled: isDisabled
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12
       }, /*#__PURE__*/React__default["default"].createElement(formFields.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();
@@ -3095,6 +3140,7 @@
 
     var SurfaceWind = function SurfaceWind(_a) {
       var isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly,
           _b = _a.onChange,
           _onChange = _b === void 0 ? function () {
         return null;
@@ -3110,6 +3156,8 @@
       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["default"].createElement(material.Grid, {
         item: true,
         container: true,
@@ -3130,7 +3178,7 @@
         sx: styles$2.surfaceWind
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "windDirection",
-        label: "Set wind direction",
+        label: windLabel,
         helperText: "Value in degrees",
         rules: {
           min: {
@@ -3147,6 +3195,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         "data-testid": "surfaceWind-windDirection"
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -3165,6 +3214,7 @@
         },
         sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'KT',
         "data-testid": "surfaceWind-windUnit",
         onChange: function onChange() {
@@ -3184,7 +3234,7 @@
         xs: 7
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "windSpeed",
-        label: "Set speed",
+        label: speedLabel,
         rules: {
           validate: {
             isRequired: isRequired,
@@ -3200,6 +3250,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         "data-testid": "surfaceWind-windSpeed"
       })))));
     };
@@ -3292,7 +3343,10 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4
-      }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
+      }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormFormControl, {
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
+      }, /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV',
           onChange: function onChange() {
@@ -3328,7 +3382,7 @@
         }),
         "data-testid": "cloudLevels-Above",
         label: "Above"
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
@@ -3342,6 +3396,7 @@
         },
         sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'FT',
         onChange: function onChange() {
           if (getValues('cloudLevel.value') || getValues('cloudLevel.value') === 0) {
@@ -3388,6 +3443,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         onChange: function onChange() {
           return (getValues('cloudLowerLevel.value') || getValues('cloudLowerLevel.value') === 0) && trigger('cloudLowerLevel.value');
         }
@@ -3398,7 +3454,10 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4
-      }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
+      }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormFormControl, {
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
+      }, /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV',
           onChange: function onChange() {
@@ -3434,7 +3493,7 @@
         }),
         "data-testid": "cloudLevels-SFC",
         label: "SFC"
-      })), watch('cloudLevelInfoMode') !== 'BETW_SFC' && watch('cloudLevelInfoMode') !== 'BETW_SFC_ABV' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }))), watch('cloudLevelInfoMode') !== 'BETW_SFC' && watch('cloudLevelInfoMode') !== 'BETW_SFC_ABV' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
@@ -3448,6 +3507,7 @@
         },
         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) {
@@ -3496,7 +3556,8 @@
             }
           }
         },
-        disabled: isDisabled
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
       })))))));
     };
 
@@ -3615,7 +3676,8 @@
     };
 
     var IssuedAt = function IssuedAt(_a) {
-      var date = _a.date;
+      var date = _a.date,
+          isReadOnly = _a.isReadOnly;
       return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
         title: "Issued at"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -3625,7 +3687,7 @@
         variant: "body2",
         sx: __assign(__assign({}, styles$2.body), {
           fontSize: '1rem',
-          color: 'geowebColors.buttons.primary.disabled.color'
+          color: isReadOnly ? 'geowebColors.typographyAndIcons.text' : 'geowebColors.buttons.primary.disabled.color'
         })
       }, date)));
     };
@@ -4036,6 +4098,7 @@
         }, !isCancelSigmet && /*#__PURE__*/React__default["default"].createElement(Phenomenon, {
           productType: "sigmet",
           isDisabled: isDisabled,
+          isReadOnly: isReadOnly,
           onChange: onChangeForm
         }), !isCancelSigmet && /*#__PURE__*/React__default["default"].createElement(ObservationForecast, {
           isDisabled: isDisabled,
@@ -4052,14 +4115,17 @@
         }), /*#__PURE__*/React__default["default"].createElement(ValidFrom, {
           productType: "sigmet",
           isDisabled: isDisabled,
+          isReadOnly: isReadOnly,
           onChange: onChangeForm
         }), /*#__PURE__*/React__default["default"].createElement(ValidUntil, {
           productType: "sigmet",
           isDisabled: isDisabled,
+          isReadOnly: isReadOnly,
           onChange: onChangeForm
         }), /*#__PURE__*/React__default["default"].createElement(SelectFIR, {
           productType: "sigmet",
-          isDisabled: isDisabled
+          isDisabled: isDisabled,
+          isReadOnly: isReadOnly
         }), /*#__PURE__*/React__default["default"].createElement(StartGeometry, {
           isReadOnly: isReadOnly,
           drawMode: drawMode,
@@ -4093,7 +4159,8 @@
           sx: styles$2.body,
           "data-testid": "vaSigmetMoveToFIR"
         }, "Volcanic Cloud is moving in the direction of:", ' ', /*#__PURE__*/React__default["default"].createElement("b", null, " ", watch('vaSigmetMoveToFIR'))))), /*#__PURE__*/React__default["default"].createElement(IssuedAt, {
-          date: getProductIssueDate(initialSigmet, initialCancelSigmet)
+          date: getProductIssueDate(initialSigmet, initialCancelSigmet),
+          isReadOnly: isReadOnly
         }), /*#__PURE__*/React__default["default"].createElement(Tac, {
           tac: tac
         }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
@@ -4221,11 +4288,14 @@
         }, !isCancelAirmet && /*#__PURE__*/React__default["default"].createElement(Phenomenon, {
           productType: "airmet",
           isDisabled: isDisabled,
+          isReadOnly: isReadOnly,
           onChange: onChangeForm
         }), !isCancelAirmet && phenomenon === 'SFC_VIS' && /*#__PURE__*/React__default["default"].createElement(SurfaceVisibility, {
+          isReadOnly: isReadOnly,
           isDisabled: isDisabled,
           onChange: onChangeForm
         }), !isCancelAirmet && phenomenon === 'SFC_WIND' && /*#__PURE__*/React__default["default"].createElement(SurfaceWind, {
+          isReadOnly: isReadOnly,
           isDisabled: isDisabled,
           onChange: onChangeForm
         }), !isCancelAirmet && /*#__PURE__*/React__default["default"].createElement(ObservationForecast, {
@@ -4238,14 +4308,17 @@
           onChange: onChangeForm
         }), /*#__PURE__*/React__default["default"].createElement(ValidFrom, {
           productType: "airmet",
+          isReadOnly: isReadOnly,
           isDisabled: isDisabled,
           onChange: onChangeForm
         }), /*#__PURE__*/React__default["default"].createElement(ValidUntil, {
           productType: "airmet",
+          isReadOnly: isReadOnly,
           isDisabled: isDisabled,
           onChange: onChangeForm
         }), /*#__PURE__*/React__default["default"].createElement(SelectFIR, {
           productType: "airmet",
+          isReadOnly: isReadOnly,
           isDisabled: isDisabled
         }), /*#__PURE__*/React__default["default"].createElement(StartGeometry, {
           isReadOnly: isReadOnly,
@@ -4272,6 +4345,7 @@
           isDisabled: isDisabled,
           isReadOnly: isReadOnly
         }), /*#__PURE__*/React__default["default"].createElement(IssuedAt, {
+          isReadOnly: isReadOnly,
           date: getProductIssueDate(initialAirmet, initialCancelAirmet)
         }), /*#__PURE__*/React__default["default"].createElement(Tac, {
           tac: tac
@@ -4414,11 +4488,26 @@
       }, children));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
     var styles = {
       activeStatus: {
         color: '#72bb23',
-        paddingLeft: '6px',
-        paddingTop: '2px'
+        paddingLeft: '6px'
       },
       font: {
         fontWeight: 'normal'
@@ -4448,21 +4537,30 @@
       if (cancelsSeqId !== null) {
         return /*#__PURE__*/React__default["default"].createElement(shared.StatusTag, {
           content: "cancels " + cancelsSeqId,
-          color: "red"
+          color: "red",
+          sx: {
+            width: '80px'
+          }
         });
       }
 
       if (product.status === 'CANCELLED') {
         return /*#__PURE__*/React__default["default"].createElement(shared.StatusTag, {
           content: "cancelled " + product.sequence,
-          color: "red"
+          color: "red",
+          sx: {
+            width: '80px'
+          }
         });
       }
 
       if (moment__default["default"](product.validDateEnd) < moment__default["default"].utc(new Date())) {
         return /*#__PURE__*/React__default["default"].createElement(shared.StatusTag, {
           content: "expired",
-          color: "grey"
+          color: "grey",
+          sx: {
+            width: '80px'
+          }
         });
       }
 
@@ -4470,7 +4568,8 @@
         content: product.status.toLowerCase(),
         color: product.status === 'PUBLISHED' ? 'green' : 'grey',
         sx: {
-          marginRight: '0!important'
+          marginRight: '0!important',
+          width: '80px'
         }
       });
     };
@@ -4547,36 +4646,67 @@
         sx: function sx(theme) {
           var _a;
 
-          return _a = {
+          return __assign({
             width: '100%',
-            paddingLeft: 1,
-            paddingRight: 1,
-            paddingTop: 1.5,
-            paddingBottom: 1.5,
-            '&:last-child': {
-              paddingBottom: 1.5
-            }
-          }, _a[theme.breakpoints.up('sm')] = {
-            paddingLeft: 4,
-            paddingRight: 4,
-            paddingTop: 2,
-            paddingBottom: 2,
-            '&:last-child': {
-              paddingBottom: 2
+            '.wrapper-container': (_a = {
+              paddingLeft: 1,
+              paddingRight: 1,
+              paddingTop: 1.5,
+              paddingBottom: 1.5,
+              '&:last-child': {
+                paddingBottom: 1.5
+              }
+            }, _a[theme.breakpoints.up('sm')] = {
+              paddingLeft: 4,
+              paddingRight: 4,
+              paddingTop: 2,
+              paddingBottom: 2,
+              '&:last-child': {
+                paddingBottom: 2
+              }
+            }, _a)
+          }, !shared.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'
+              }
             }
-          }, _a;
+          });
         }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        className: "wrapper-container"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center",
         spacing: 2
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        className: "col-1",
         item: true,
         xs: 3,
         sm: 1
       }, phenomenon !== null && /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
         title: productType.toUpperCase()
-      }), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }), /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: phenomenon !== null ? getPhenomenon(productType, phenomenon) : '',
         placement: "bottom-start"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
@@ -4584,12 +4714,13 @@
         noWrap: true,
         sx: styles.font
       }, phenomenon !== null ? phenomenon : 'Cancel'))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        className: "col-2",
         item: true,
         xs: 9,
         sm: 3
       }, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
         title: "Issue time"
-      }), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+      }), /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
         title: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
           title: "TAC"
         }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
@@ -4624,9 +4755,10 @@
         sx: styles.font,
         "data-testid": "issueTime"
       }, product.issueDate ? moment__default["default"].utc(product.issueDate).format('DD MMM YYYY, HH:mm') + " UTC" : '(Not published)'))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        className: "col-3",
         item: true,
         xs: 12,
-        sm: 6
+        sm: 5
       }, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
         title: "Valid time"
       }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
@@ -4635,10 +4767,12 @@
         "data-testid": "validTime"
       }, validTime)), /*#__PURE__*/React__default["default"].createElement(material.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) {
           var _a;
@@ -4659,7 +4793,7 @@
         },
         variant: "flat",
         startIcon: /*#__PURE__*/React__default["default"].createElement(theme.Edit, null)
-      }, "DRAFT") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product))));
+      }, "DRAFT") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product)))));
     };
 
     /* *
@@ -4714,7 +4848,8 @@
         dataTestId: "productList-alert"
       }), productList && /*#__PURE__*/React__default["default"].createElement(material.List, {
         sx: {
-          paddingTop: 4
+          paddingTop: 4,
+          containerType: 'inline-size'
         }
       }, productList.map(function (productListItem, index) {
         var product = productListItem[productType];
@@ -4726,7 +4861,7 @@
           },
           key: product.sequence && product.issueDate ? product.sequence + "-" + product.issueDate : "draft-" + index,
           sx: {
-            padding: '2px'
+            padding: 0.25
           }
         }, /*#__PURE__*/React__default["default"].createElement(ProductListRow, {
           product: product,