@opengeoweb/taf 4.11.0 → 4.12.0

package/index.umd.js

@@ -135,6 +135,158 @@
         return to.concat(ar || Array.prototype.slice.call(from));
     }
 
+    /* *
+     * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+    var tafActionToDraftAction = function tafActionToDraftAction(tafAction) {
+      switch (tafAction) {
+        case 'AMEND':
+        case 'DRAFT_AMEND':
+          return 'DRAFT_AMEND';
+
+        case 'CORRECT':
+        case 'DRAFT_CORRECT':
+          return 'DRAFT_CORRECT';
+
+        default:
+          return 'DRAFT';
+      }
+    };
+
+    var tafActionToPublishAction = function tafActionToPublishAction(tafAction) {
+      switch (tafAction) {
+        case 'AMEND':
+        case 'DRAFT_AMEND':
+          return 'AMEND';
+
+        case 'CORRECT':
+        case 'DRAFT_CORRECT':
+          return 'CORRECT';
+
+        default:
+          return 'PUBLISH';
+      }
+    };
+
+    var buttonsStyle = {
+      button: {
+        minWidth: {
+          xs: '56px',
+          sm: '64px'
+        },
+        width: {
+          xs: '56px',
+          sm: '64px'
+        },
+        marginLeft: {
+          xs: 0.5,
+          sm: 1
+        },
+        marginTop: 3,
+        marginBottom: 3
+      }
+    };
+
+    var ViewModeButtons = function ViewModeButtons(_a) {
+      var canBe = _a.canBe,
+          onTafViewModeButtonPress = _a.onTafViewModeButtonPress;
+      return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, canBe.includes('CANCELLED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "canceltaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          return onTafViewModeButtonPress('CANCEL');
+        }
+      }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "correcttaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          return onTafViewModeButtonPress('CORRECT');
+        }
+      }, "Correct"), canBe.includes('AMENDED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "amendtaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          return onTafViewModeButtonPress('AMEND');
+        }
+      }, "Amend"));
+    };
+
+    var TafFormButtons = function TafFormButtons(_a) {
+      var _b = _a.isFormDisabled,
+          isFormDisabled = _b === void 0 ? false : _b,
+          tafAction = _a.tafAction,
+          _c = _a.canBe,
+          canBe = _c === void 0 ? [] : _c,
+          onTafEditModeButtonPress = _a.onTafEditModeButtonPress,
+          onTafViewModeButtonPress = _a.onTafViewModeButtonPress;
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        justifyContent: "flex-end",
+        sx: buttonsStyle,
+        columns: 24
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        container: true,
+        justifyContent: "flex-end",
+        columns: 24,
+        xs: 24,
+        sm: 23
+      }, isFormDisabled ? /*#__PURE__*/React__default["default"].createElement(ViewModeButtons, {
+        canBe: canBe,
+        onTafViewModeButtonPress: onTafViewModeButtonPress
+      }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "cleartaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          // Simply discard the changes and close the dialog.
+          onTafEditModeButtonPress('CLEAR');
+        }
+      }, "Clear"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "savedrafttaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          /* Save the TAF as draft:
+          if action NEW or DRAFT - new status will be DRAFT -- default
+          if action AMEND - new status will be DRAFT_AMENDED
+          if action CORRECT - new status will be DRAFT_CORRECTED
+          if action DRAFT_AMEND - new status will be DRAFT_AMENDED
+          if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
+          */
+          onTafEditModeButtonPress(tafActionToDraftAction(tafAction));
+        }
+      }, "Save"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "publishtaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          /* Publish the TAF:
+          if action NEW or DRAFT - new status will be PUBLISHED -- default
+          if action AMEND - new status will be AMENDED
+          if action CORRECT - new status will be CORRECTED
+          if action DRAFT_AMEND - new status will be AMENDED
+          if action DRAFT_CORRECT - new status will be CORRECTED
+          */
+          onTafEditModeButtonPress(tafActionToPublishAction(tafAction));
+        }
+      }, "Publish"))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        columns: 24,
+        sm: 1
+      }));
+    };
+
     function _typeof(obj) {
       "@babel/helpers - typeof";
 
@@ -453,8 +605,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var prependZeroes = function prependZeroes(value, totalDigits) {
@@ -463,6 +615,9 @@
         return "0" + newVal;
       }, valueAsString);
     };
+    var getFieldValue = function getFieldValue(fieldValue) {
+      return fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.trim().toUpperCase();
+    };
 
     var config$1 = [{
       key: 'range',
@@ -2433,7 +2588,8 @@
     }; // Check if the amended/corrected TAF has been changed. Only compare the fields users are able to fill in
     // (i.e. exclude baseforecast valid time as that gets updated when doing an amendment automatically outside of the users influence)
 
-    var isTafAmendedCorrectedChanged = function isTafAmendedCorrectedChanged(isFormDirty, originalTaf, currentTaf) {
+    var isTafAmendedCorrectedChanged = function isTafAmendedCorrectedChanged(originalTaf, currentTaf) {
+      if (originalTaf === null || currentTaf === null) return false;
       var originalBaseF = originalTaf.baseForecast,
           originalChG = originalTaf.changeGroups;
       var currentBaseF = currentTaf.baseForecast,
@@ -2445,7 +2601,7 @@
       currentBaseF.valid;
           var currentNoValid = __rest(currentBaseF, ["valid"]);
 
-      return isFormDirty && (!lodash.isEqual(originalNoValid, currentNoValid) || !lodash.isEqual(originalChG, currentChG));
+      return !lodash.isEqual(originalNoValid, currentNoValid) || !lodash.isEqual(originalChG, currentChG);
     };
     var getConfirmationDialogContent = function getConfirmationDialogContent(action, isFormDirty) {
       switch (action) {
@@ -2497,13 +2653,30 @@
       change: '',
       probability: ''
     };
-    var getTafStatusLabel = function getTafStatusLabel(status) {
+    var getTafStatusLabel = function getTafStatusLabel(status, action, isFormDisabled) {
+      // See if we need to base status label on action if form is not disabled and action passed
+      var baseOnAction = isFormDisabled !== undefined && !isFormDisabled && action;
+
+      if (baseOnAction && action === 'AMEND' && (status === 'PUBLISHED' || status === 'AMENDED' || status === 'CORRECTED')) {
+        return 'new amendment';
+      }
+
+      if (baseOnAction && action === 'CORRECT' && (status === 'PUBLISHED' || status === 'AMENDED' || status === 'CORRECTED')) {
+        return 'new correction';
+      }
+
       switch (status) {
         case 'DRAFT_AMENDED':
-          return 'draft amended';
+          return 'draft amendment';
 
         case 'DRAFT_CORRECTED':
-          return 'draft corrected';
+          return 'draft correction';
+
+        case 'AMENDED':
+          return 'published amendment';
+
+        case 'CORRECTED':
+          return 'published correction';
 
         default:
           return status.toLocaleLowerCase();
@@ -2648,191 +2821,56 @@
     var isFormDirty = function isFormDirty(dirtyFields) {
       return Object.keys(dirtyFields).length > 0;
     };
+    var getFormRowPosition = function getFormRowPosition(formRow) {
+      var _a = formRow.getBoundingClientRect(),
+          top = _a.top,
+          left = _a.left,
+          height = _a.height;
 
-    var textFieldStyle = function textFieldStyle(theme) {
+      var newTop = top + height;
       return {
-        // input
-        marginRight: '2px',
-        marginBottom: '4px',
-        width: 56,
-        height: 46,
-        input: {
-          textAlign: 'center',
-          fontSize: 10,
-          fontWeight: 500,
-          paddingLeft: 0,
-          paddingRight: 0,
-          '&.Mui-disabled': {
-            color: 'geowebColors.typographyAndIcons.text',
-            WebkitTextFillColor: theme.palette.geowebColors.typographyAndIcons.text
-          },
-          // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1995 disables the default autofill styling, should be a better fix
-          '&:-webkit-autofill': {
-            WebkitTransitionDelay: '86400s' // 1 day delay
+        top: newTop,
+        left: left
+      };
+    };
 
-          }
-        },
-        label: {
-          transformOrigin: 'center top',
-          right: 0,
-          textAlign: 'center',
-          fontSize: '10px',
-          '&.Mui-disabled': {
-            color: 'geowebColors.captions.captionStatus.rgba'
-          },
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-          transform: 'translate(0px, 16px) scale(1)'
-        },
-        // shrink
-        ' .MuiInputLabel-shrink': {
-          transform: 'translate(2px, 10px) scale(0.75) !important',
-          letterSpacing: '0.33px',
-          textAlign: 'left'
-        },
-        // root
-        '&': {
-          '.Mui-error.MuiFilledInput-root': {
-            backgroundColor: 'geowebColors.captions.captionErrorBackground.rgba'
+    /* *
+     * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var DragHandle = function DragHandle(_a) {
+      var _b = _a.isSorting,
+          isSorting = _b === void 0 ? false : _b,
+          _c = _a.isDisabled,
+          isDisabled = _c === void 0 ? false : _c,
+          index = _a.index;
+      return /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+        className: "handle",
+        "data-testid": "dragHandle-" + index,
+        disableRipple: true,
+        disabled: isDisabled,
+        size: "large",
+        sx: {
+          backgroundColor: 'transparent',
+          '&:hover': {
+            backgroundColor: 'transparent'
           },
-          '.Mui-disabled:before': {
-            borderColor: 'transparent'
-          }
+          cursor: isSorting ? 'grabbing' : 'grab'
         }
-      };
-    };
-
-    var getTafErrors = function getTafErrors(name, errors) {
-      var nameAsArray = name.split('.');
-
-      if (nameAsArray[0].includes('changeGroups')) {
-        if (errors.changeGroups) {
-          var changeGroupNum = nameAsArray[0].slice(13, nameAsArray[0].length - 1);
-          var restArray = nameAsArray.slice(1);
-          return formFields.getDeepProperty(restArray, errors.changeGroups[changeGroupNum]);
-        } // No changegroup errors
-
-
-        return null;
-      }
-
-      return formFields.getDeepProperty(nameAsArray, errors);
-    };
-
-    var getDisplayValue = function getDisplayValue(value, disabled) {
-      return disabled && !value ? '-' : value;
-    };
-    var BaseTextField = /*#__PURE__*/React__default["default"].memo(function (props) {
-      return /*#__PURE__*/React__default["default"].createElement(material.TextField, __assign({
-        type: "text",
-        variant: "filled",
-        sx: textFieldStyle
-      }, props));
-    }, function (prevProps, nextProps) {
-      return prevProps.value === nextProps.value && prevProps.error === nextProps.error && prevProps.name === nextProps.name && prevProps.disabled === nextProps.disabled;
-    });
-
-    var TafFormTextField = function TafFormTextField(_a) {
-      var label = _a.label,
-          _b = _a.disabled,
-          disabled = _b === void 0 ? false : _b,
-          _c = _a.name,
-          name = _c === void 0 ? '' : _c,
-          _d = _a.onChange,
-          onChange = _d === void 0 ? function () {} : _d,
-          _e = _a.onBlur,
-          onBlur = _e === void 0 ? function () {} : _e,
-          _f = _a.defaultValue,
-          defaultValue = _f === void 0 ? '' : _f,
-          _g = _a.formatter,
-          formatter = _g === void 0 ? null : _g,
-          rules = _a.rules,
-          _h = _a.autoComplete,
-          autoComplete = _h === void 0 ? [] : _h,
-          _j = _a.autoFocus,
-          autoFocus = _j === void 0 ? false : _j;
-
-      var _k = reactHookForm.useFormContext(),
-          control = _k.control,
-          setValue = _k.setValue,
-          errors = _k.formState.errors;
-
-      var fieldErrors = getTafErrors(name, errors);
-
-      var _l = __read(React__default["default"].useState(null), 2),
-          maxLength = _l[0],
-          setMaxLength = _l[1];
-
-      var onKeyDown = React__default["default"].useCallback(function (event) {
-        var target = event.target;
-        var currentValue = target.value,
-            selectionStart = target.selectionStart,
-            selectionEnd = target.selectionEnd;
-        var textSelection = currentValue.substring(selectionStart, selectionEnd);
-
-        if (autoComplete && !currentValue.length || textSelection.length && currentValue.length && textSelection === currentValue) {
-          var pressedKey_1 = event.key.toString().toUpperCase();
-          var foundValue = autoComplete.find(function (el) {
-            return el.key === pressedKey_1;
-          }) || null;
-
-          if (foundValue) {
-            setValue(name, foundValue.value, {
-              shouldDirty: true
-            });
-            setMaxLength(foundValue.value.length);
-            event.preventDefault();
-          }
-        }
-      }, [name, autoComplete, setValue]);
-      var onChangeField = React__default["default"].useCallback(function (event, callback) {
-        var valueUppercase = event.currentTarget.value.toUpperCase();
-
-        if (autoComplete) {
-          var exist = autoComplete.find(function (e) {
-            return e.value === valueUppercase;
-          });
-          var newMaxLength = exist ? valueUppercase.length : null;
-          setMaxLength(newMaxLength);
-        }
-
-        callback(valueUppercase);
-        onChange(valueUppercase);
-      }, [onChange, autoComplete]);
-      var onBlurField = React__default["default"].useCallback(function (callback) {
-        callback();
-        onBlur();
-      }, [onBlur]);
-      var hasError = !!fieldErrors;
-      return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-        render: function render(_a) {
-          var field = _a.field;
-          var displayValue = formatter ? formatter(field.value) : getDisplayValue(field.value, disabled);
-          return /*#__PURE__*/React__default["default"].createElement(BaseTextField, {
-            label: label,
-            disabled: disabled,
-            name: name,
-            value: displayValue,
-            inputRef: field.ref,
-            onChange: function onChange(e) {
-              return onChangeField(e, field.onChange);
-            },
-            onKeyDown: onKeyDown,
-            error: hasError,
-            onBlur: function onBlur() {
-              return onBlurField(field.onBlur);
-            },
-            inputProps: {
-              maxLength: maxLength
-            },
-            autoFocus: autoFocus
-          });
-        },
-        name: name,
-        control: control,
-        defaultValue: defaultValue,
-        rules: rules
-      });
+      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null));
     };
 
     /* *
@@ -2848,27 +2886,82 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    // messages
-    var invalidChangeMessage = 'Invalid Change input, only BECMG, TEMPO or FM are allowed';
-    var invalidChangeProbCombinationMessage = 'A probability is only allowed in combination with TEMPO or an empty Change input'; // validations
+    var getCustomError = function getCustomError(error, isChangeGroup, rowIndex) {
+      return __assign(__assign({}, error), {
+        isChangeGroup: isChangeGroup,
+        rowIndex: rowIndex
+      });
+    };
+    var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
+      switch (sumOfErrors) {
+        case 0:
+          return '0 issues';
 
-    var validateChangeField = function validateChangeField(value) {
-      var trimmedValue = value.trim();
-      var isValid = trimmedValue === '' || trimmedValue === 'FM' || trimmedValue === 'TEMPO' || trimmedValue === 'BECMG';
-      return isValid ? true : invalidChangeMessage;
+        case 1:
+          return '1 issue';
+
+        default:
+          return sumOfErrors + " issues";
+      }
     };
-    var validateChangeFieldInterField = function validateChangeFieldInterField(value, valueProb) {
-      var trimmedProbValue = valueProb.trim();
-      var trimmedValue = value.trim();
+    var getErrorValues = function getErrorValues(fieldErrors, isChangeGroup, rowIndex) {
+      if (isChangeGroup === void 0) {
+        isChangeGroup = false;
+      }
 
-      if (trimmedProbValue !== '' && trimmedValue !== '' && trimmedValue !== 'TEMPO') {
-        return invalidChangeProbCombinationMessage;
+      if (rowIndex === void 0) {
+        rowIndex = -1;
       }
 
-      return true;
+      if (!fieldErrors) return [];
+      return Object.keys(fieldErrors).reduce(function (list, key) {
+        var error = __assign({}, fieldErrors[key]);
+
+        if (error.ref) {
+          return list.concat(getCustomError(error, isChangeGroup, rowIndex));
+        }
+
+        return list.concat(getErrorValues(error, isChangeGroup, rowIndex));
+      }, []);
+    };
+    var filterDuplicateErrors = function filterDuplicateErrors(errors) {
+      return errors.reduce(function (list, error) {
+        // check on type validateRequiredSub and validateRequiredMainOptional since these are giving 'duplicates'
+        if (error.type === 'validateRequiredSub') {
+          var exist = list.find(function (e) {
+            return e.type === 'validateRequiredSub' && e.rowIndex === error.rowIndex;
+          });
+          return exist ? list : list.concat(error);
+        }
+
+        if (error.type === 'validateRequiredMainOptional') {
+          var exist = list.find(function (e) {
+            return e.type === 'validateRequiredMainOptional' && e.rowIndex === error.rowIndex;
+          });
+          return exist ? list : list.concat(error);
+        }
+
+        return list.concat(error);
+      }, []);
+    };
+    var getErrors = function getErrors(errors) {
+      var errorList = Object.keys(errors).reduce(function (list, key) {
+        var errorValue = errors[key]; // changeGroups
+
+        if (Array.isArray(errorValue)) {
+          var errorValues = errorValue.reduce(function (changeGroupErrors, changeGroupError, index) {
+            return changeGroupErrors.concat(getErrorValues(changeGroupError, true, index));
+          }, []);
+          return list.concat.apply(list, __spreadArray([], __read(errorValues)));
+        } // baseForecast
+
+
+        return list.concat(getErrorValues(errorValue, false, -1));
+      }, []);
+      return errorList;
     };
 
     /* *
@@ -2887,672 +2980,475 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    // messages
-    var invalidProbabilityMessage = 'Invalid Probability input, only PROB30 or PROB40 are allowed'; // validations
 
-    var validateProbabilityField = function validateProbabilityField(value) {
-      var trimmedValue = value.trim();
-      var isValid = trimmedValue === '' || trimmedValue === 'PROB30' || trimmedValue === 'PROB40';
-      return isValid ? true : invalidProbabilityMessage;
-    };
+    var IssuesButton = function IssuesButton(_a) {
+      var _b = _a.errors,
+          errors = _b === void 0 ? {} : _b,
+          _c = _a.isIssuesPaneOpen,
+          isIssuesPaneOpen = _c === void 0 ? false : _c,
+          _d = _a.setIsIssuesPaneOpen,
+          setIsIssuesPaneOpen = _d === void 0 ? function () {
+        return null;
+      } : _d;
+      var errorList = filterDuplicateErrors(getErrors(errors));
+      var totalErrors = errorList.length;
+      var errorStatus = totalErrors > 0 ? 'error' : 'success';
+      var buttonColor = "geowebColors.functional." + errorStatus;
 
-    /* *
-     * 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 toggleIssuesPane = function toggleIssuesPane(newPosition) {
+        return setIsIssuesPaneOpen(!isIssuesPaneOpen, newPosition);
+      };
 
-    var TafFormOptionsButton = function TafFormOptionsButton(_a) {
-      var isChangeGroup = _a.isChangeGroup,
-          addChangeGroupBelow = _a.addChangeGroupBelow,
-          addChangeGroupAbove = _a.addChangeGroupAbove,
-          removeChangeGroup = _a.removeChangeGroup,
-          clearRow = _a.clearRow,
-          index = _a.index;
-      var insertAbove = {
-        text: 'Insert 1 row above',
-        icon: /*#__PURE__*/React__namespace.createElement(theme.Add, null),
-        action: addChangeGroupAbove
-      };
-      var insertBelow = {
-        text: 'Insert 1 row below',
-        icon: /*#__PURE__*/React__namespace.createElement(theme.Add, null),
-        action: addChangeGroupBelow
-      };
-      var deleteRow = {
-        text: 'Delete row',
-        icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
-        action: removeChangeGroup
-      };
-      var clear = {
-        text: 'Clear row',
-        icon: /*#__PURE__*/React__namespace.createElement(theme.Close, null),
-        action: clearRow
-      };
-      var menuItemsBaseForecast = [insertBelow, clear];
-      var menuItemsChangeGroup = [insertAbove, insertBelow, deleteRow, clear];
-      return /*#__PURE__*/React__namespace.createElement(shared.ToggleMenu, {
-        buttonTestId: "tafFormOptions[" + index + "]",
-        buttonSx: {
-          marginTop: '10px',
-          marginLeft: '4px'
-        },
-        menuItems: isChangeGroup ? menuItemsChangeGroup : menuItemsBaseForecast
-      });
-    };
+      var onClickButton = function onClickButton(event) {
+        var _a;
 
-    var getDefaultValue = function getDefaultValue(fieldName, data) {
-      if (!data) {
-        return '';
-      }
+        var _b = event.currentTarget.getBoundingClientRect(),
+            left = _b.left,
+            top = _b.top;
 
-      return formFields.getDeepProperty(fieldName.split('.'), data) || '';
-    };
+        var parentOffset = ((_a = document.getElementById('tafmodule')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
+          top: 0,
+          left: 0
+        };
+        var newPosition = {
+          left: left - parentOffset.left + 100,
+          top: top - parentOffset.top
+        };
+        toggleIssuesPane(newPosition);
+      };
 
-    var getRequiredCrossFields = function getRequiredCrossFields(fieldNames) {
-      return [[fieldNames.valid], [fieldNames.change, fieldNames.probability], [fieldNames.wind, fieldNames.visibility, fieldNames.weather1, fieldNames.cloud1] // sub fields
-      ];
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
+        title: "View details"
+      }, /*#__PURE__*/React__namespace.createElement(material.Chip, {
+        "data-testid": "issuesButton",
+        className: "status-" + errorStatus,
+        size: "small",
+        label: getIssuesLabel(totalErrors),
+        onClick: onClickButton,
+        sx: {
+          width: '74px',
+          color: '#ffffff',
+          backgroundColor: buttonColor,
+          '&:hover': {
+            backgroundColor: buttonColor
+          },
+          '&:focus': {
+            backgroundColor: buttonColor
+          },
+          fontSize: 12
+        }
+      }));
     };
 
-    var TafFormRow = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
-      var isNotRequiredForAction = _a.isNotRequiredForAction,
-          _b = _a.isChangeGroup,
-          isChangeGroup = _b === void 0 ? false : _b,
-          _c = _a.disabled,
-          disabled = _c === void 0 ? false : _c,
-          _d = _a.index,
-          index = _d === void 0 ? -1 : _d,
-          onRemoveChangeGroup = _a.onRemoveChangeGroup,
-          _e = _a.field,
-          field = _e === void 0 ? null : _e,
-          _f = _a.dragHandle,
-          dragHandle = _f === void 0 ? null : _f,
-          onAddChangeGroupBelow = _a.onAddChangeGroupBelow,
-          onAddChangeGroupAbove = _a.onAddChangeGroupAbove,
-          onClearRow = _a.onClearRow,
-          props = __rest(_a, ["isNotRequiredForAction", "isChangeGroup", "disabled", "index", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroupBelow", "onAddChangeGroupAbove", "onClearRow"]);
-
-      var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
-      var fieldNames = getFieldNames(isChangeGroup, index);
-
-      var _g = reactHookForm.useFormContext(),
-          getValues = _g.getValues,
-          trigger = _g.trigger; // cross-field required validation
-
-
-      var _h = __read(getRequiredCrossFields(fieldNames), 3),
-          mainFields = _h[0],
-          mainOptionalFields = _h[1],
-          subFields = _h[2];
-
-      var hasFieldsValue = function hasFieldsValue(fields) {
-        return fields.map(getValues).find(function (field) {
-          return !!field;
-        });
-      }; // Used to validate the required field for change groups: Valid
-
-
-      var validateRequiredMain = function validateRequiredMain(value) {
-        return isNotRequiredForAction(value) !== true && isChangeGroup && !value.length && (hasFieldsValue(subFields) || hasFieldsValue(mainFields) || hasFieldsValue(mainOptionalFields)) ? 'Valid is required' : true;
-      }; // Used to ensure either probability or change is entered, or both
-
-
-      var validateRequiredMainOptional = function validateRequiredMainOptional(value) {
-        return isNotRequiredForAction(value) !== true && isChangeGroup && (hasFieldsValue(mainFields) || hasFieldsValue(subFields)) && !hasFieldsValue(mainOptionalFields) ? 'Probability or change is required' : true;
-      }; // Used to ensure one wind, visibility, weather or cloud is entered when start editing a changegroup and all of these are empty
-
-
-      var validateRequiredSub = function validateRequiredSub(value) {
-        return isNotRequiredForAction(value) !== true && isChangeGroup && (hasFieldsValue(mainFields) || hasFieldsValue(mainOptionalFields)) && !hasFieldsValue(subFields) ? 'Wind, visibility, weather or cloud is required' : true;
-      }; // Used to validate the combination of change group and wind, visibility, weather and/or cloud data entered
+    var getPaneTitle = function getPaneTitle(sumOfErrors) {
+      switch (sumOfErrors) {
+        case 0:
+          return 'Looks good';
 
+        case 1:
+          return 'There is an issue to address';
 
-      var _validateRequiredMainFields = function validateRequiredMainFields(value, fieldName) {
-        var changeField = getValues(namePrefix + ".change");
-        var visibilityField = getValues(namePrefix + ".visibility");
-        var isFM = changeField && changeField.trim() === 'FM';
-        var isCAVOK = visibilityField && visibilityField.trim() === 'CAVOK';
+        default:
+          return 'There are a few issues to address';
+      }
+    };
 
-        if (isNotRequiredForAction(value) !== true && !value.length) {
-          if (isChangeGroup && isFM || !isChangeGroup) {
-            // exception for CavOK
-            if (isCAVOK && (fieldName === 'Clouds' || fieldName === 'Weather')) {
-              return true;
-            } // exception for visibility > 5000
+    var humanizeErrorMessage = function humanizeErrorMessage(errorTitle, fieldNumberedValue) {
+      if (fieldNumberedValue !== undefined && fieldNumberedValue >= 0) {
+        // when name contains a number we assume it's a formgroup and we add a index +1 for human readability
+        var fieldNumber = fieldNumberedValue + 1;
+        return errorTitle + " " + fieldNumber;
+      }
 
+      return errorTitle;
+    };
+    var getErrorMessage = function getErrorMessage(error, index) {
+      var errorTitleCategory = error.isChangeGroup ? 'Changegroups' : 'Baseforecast';
+      var fieldErrorTitle = humanizeErrorMessage(errorTitleCategory, error.rowIndex);
+      return index + 1 + ". " + fieldErrorTitle + ": " + error.message;
+    };
+    var MODAL_DIALOG_ELEMENT = 'modal-dialog';
+    var useIssuesPane = function useIssuesPane() {
+      var _a = __read(React__namespace.useState(false), 2),
+          isIssuesPaneOpen = _a[0],
+          setIsIssuesPaneOpen = _a[1];
 
-            if (visibilityField && parseInt(visibilityField.trim(), 10) >= 5000 && fieldName === 'Weather') {
-              return true;
-            }
+      var _b = __read(React__namespace.useState(null), 2),
+          startPosition = _b[0],
+          setStartPosition = _b[1];
 
-            return fieldName + " is required";
-          }
-        }
+      var _c = __read(React__namespace.useState(false), 2),
+          hasUserDragged = _c[0],
+          setHasUserDragged = _c[1];
 
-        return true;
+      var onUserHasDragged = function onUserHasDragged() {
+        return setHasUserDragged(true);
       };
 
-      var validatePreviousRow = React__default["default"].useCallback(function () {
-        if (isChangeGroup && index > 0) {
-          var _a = getValues(),
-              validDateEnd = _a.validDateEnd,
-              validDateStart = _a.validDateStart,
-              changeGroups = _a.changeGroups;
-
-          var currentChangeGroup = changeGroups[index];
-          var previousChangeGroup = changeGroups[index - 1];
-          return validatePreviousChangeGroup(currentChangeGroup, previousChangeGroup, validDateStart, validDateEnd);
+      var onToggleIssuesPane = function onToggleIssuesPane(isOpen, newPosition) {
+        if (!hasUserDragged) {
+          setStartPosition(newPosition);
         }
 
-        return true;
-      }, [index, isChangeGroup, getValues]);
-
-      var getFieldFromRow = function getFieldFromRow(fieldname, rowIndex) {
-        var indexedFieldName = "changeGroups[" + rowIndex + "]." + fieldname;
-        var rowValue = getValues(indexedFieldName);
-        return rowValue ? [indexedFieldName] : [];
+        setIsIssuesPaneOpen(isOpen);
       };
 
-      var getValidFieldFromNextRow = function getValidFieldFromNextRow() {
-        return getFieldFromRow('valid', index + 1);
+      var onCloseIssuesPane = function onCloseIssuesPane() {
+        return setIsIssuesPaneOpen(false);
       };
 
-      var validateNextRows = React__default["default"].useCallback(function () {
-        if (isChangeGroup) {
-          var _a = getValues(),
-              validDateEnd = _a.validDateEnd,
-              validDateStart = _a.validDateStart,
-              changeGroups = _a.changeGroups;
-
-          var currentChangeGroup = changeGroups[index];
-          var nextChangeGroups = changeGroups.slice(index + 1);
-          return validateOverlapWithFM(currentChangeGroup, nextChangeGroups, validDateStart, validDateEnd);
-        }
-
-        return true;
-      }, [index, isChangeGroup, getValues]);
-
-      var getPreviousValidFields = function getPreviousValidFields(rowIndex) {
-        var changeGroups = getValues().changeGroups;
-        var previousChangeGroups = changeGroups.slice(0, rowIndex);
-        var validFields = previousChangeGroups.map(function (_element, index) {
-          return getFieldFromRow('valid', index)[0];
-        });
-        return validFields;
+      return {
+        isIssuesPaneOpen: isIssuesPaneOpen,
+        startPosition: startPosition,
+        onToggleIssuesPane: onToggleIssuesPane,
+        onCloseIssuesPane: onCloseIssuesPane,
+        onUserHasDragged: onUserHasDragged
       };
+    };
 
-      var addChangeGroupBelow = React__default["default"].useCallback(function () {
-        onAddChangeGroupBelow(index);
-      }, [onAddChangeGroupBelow, index]);
-      var addChangeGroupAbove = React__default["default"].useCallback(function () {
-        onAddChangeGroupAbove(index);
-      }, [onAddChangeGroupAbove, index]);
-      var clearRow = React__default["default"].useCallback(function () {
-        onClearRow(index);
-      }, [onClearRow, index]);
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, __assign({
-        sx: {
-          marginTop: '8px',
-          backgroundColor: 'geowebColors.cards.cardContainer',
-          position: 'relative',
-          '&.sortable-chosen': {
-            boxShadow: 1
-          },
-          '&.sortable-ghost': {
-            opacity: 0.5
-          }
-        },
-        justifyContent: "flex-start",
-        "data-testid": "row-" + namePrefix,
-        container: true,
-        ref: ref
-      }, props), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        columns: 24,
-        item: true,
-        container: true,
-        justifyContent: "flex-end",
-        xs: 24,
-        sm: 23
-      }, !isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Type",
-        name: fieldNames.messageType,
-        disabled: true
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Location",
-        name: "location",
-        disabled: true
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        formatter: formatIssueTime,
-        label: "Issue time",
-        name: "issueDate",
-        disabled: true
-      })), isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        sx: {
-          width: 56,
-          marginRight: '2px'
-        }
-      }, !disabled && dragHandle), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Prob",
-        name: fieldNames.probability,
-        disabled: disabled,
-        defaultValue: getDefaultValue('probability', field),
-        rules: {
-          validate: {
-            validateRequiredMainOptional: validateRequiredMainOptional,
-            validateProbabilityField: validateProbabilityField
-          }
+    var IssuesPane = function IssuesPane(_a) {
+      var _b = _a.errorList,
+          errorList = _b === void 0 ? [] : _b,
+          isOpen = _a.isOpen,
+          handleClose = _a.handleClose,
+          _c = _a.startPosition,
+          startPosition = _c === void 0 ? {
+        left: 20,
+        top: 50
+      } : _c,
+          _d = _a.onUserHasDragged,
+          onUserHasDragged = _d === void 0 ? function () {} : _d;
+      var rootElement = document.getElementById(MODAL_DIALOG_ELEMENT) || document.body;
+      return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
+        startSize: {
+          width: '577px',
+          height: '200px'
         },
-        autoComplete: [{
-          key: '3',
-          value: 'PROB30'
-        }, {
-          key: '4',
-          value: 'PROB40'
-        }],
-        onBlur: function onBlur() {
-          if (isChangeGroup) {
-            var nextValidFieldName = getValidFieldFromNextRow();
-            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)));
+        startPosition: startPosition,
+        minWidth: 300,
+        onClose: handleClose,
+        title: getPaneTitle(errorList.length),
+        headerSize: "xs",
+        isOpen: isOpen,
+        "data-testid": "moveable-issues-pane",
+        bounds: "parent",
+        onDragEnd: function onDragEnd(event) {
+          if (event.x !== 0 && event.y !== 0) {
+            onUserHasDragged();
           }
         }
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Change",
-        name: fieldNames.change,
-        disabled: disabled,
-        defaultValue: getDefaultValue('change', field),
-        rules: {
-          validate: {
-            validateRequiredMainOptional: validateRequiredMainOptional,
-            validateChangeField: validateChangeField,
-            validateChangeFieldInterField: function validateChangeFieldInterField$1(value) {
-              return validateChangeFieldInterField(value, getValues(fieldNames.probability));
-            }
-          }
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        component: "div",
+        sx: {
+          marginTop: '16px',
+          marginLeft: '24px'
+        }
+      }, errorList.length === 0 && /*#__PURE__*/React__namespace.createElement(material.Box, {
+        component: "div",
+        sx: {
+          fontSize: '4rem'
         },
-        autoComplete: [{
-          key: 'T',
-          value: 'TEMPO'
-        }, {
-          key: 'B',
-          value: 'BECMG'
-        }, {
-          key: 'F',
-          value: 'FM'
-        }],
-        onBlur: function onBlur() {
-          if (isChangeGroup) {
-            var nextValidFieldName = getValidFieldFromNextRow();
-            var previousValidFieldNames = getPreviousValidFields(index);
-            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)), __read(previousValidFieldNames)));
-          }
+        "data-testid": "zeroIssuesImage"
+      }, /*#__PURE__*/React__namespace.createElement(theme.ThumbsUp, {
+        sx: {
+          height: '69px',
+          width: '58px'
         }
-      })), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Valid",
-        name: fieldNames.valid,
-        // always disabled for baseforecast row
-        disabled: !isChangeGroup ? true : disabled,
-        defaultValue: getDefaultValue('valid', field),
-        rules: {
-          validate: {
-            validateRequiredMain: validateRequiredMain,
-            validateValidField: function validateValidField$1(value) {
-              return isChangeGroup ? validateValidField(value, getValues('validDateStart'), getValues('validDateEnd')) : true;
-            },
-            validateValidChangeGroupInterField: function validateValidChangeGroupInterField$1(value) {
-              return isChangeGroup ? validateValidChangeGroupInterField(value, getValues(fieldNames.change), getValues(fieldNames.probability), getValues('validDateStart'), getValues('validDateEnd')) : true;
-            },
-            validatePreviousRow: validatePreviousRow,
-            validateNextRows: validateNextRows
+      })), errorList.length > 0 && errorList.map(function (error, index) {
+        return /*#__PURE__*/React__namespace.createElement(material.Typography // eslint-disable-next-line react/no-array-index-key
+        , {
+          // eslint-disable-next-line react/no-array-index-key
+          key: "message-" + index,
+          variant: "body1",
+          "data-testid": "errorMessage"
+        }, getErrorMessage(error, index));
+      }))), rootElement);
+    };
+
+    /* *
+     * 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 TafModuleContext = /*#__PURE__*/React__namespace.createContext({
+      onValidateForm: null,
+      registerValidateForm: null,
+      tafAction: null,
+      setTafAction: null,
+      onPreventCloseView: null
+    });
+    var useTafModuleContext = function useTafModuleContext() {
+      return React__namespace.useContext(TafModuleContext);
+    };
+    var useTafModuleState = function useTafModuleState(_a) {
+      var onPreventCloseView = _a.onPreventCloseView;
+
+      var _b = __read(React__namespace.useState(function () {
+        return new Promise(function () {
+          return true;
+        });
+      }), 2),
+          onValidateForm = _b[0],
+          registerValidateForm = _b[1];
+
+      var _c = __read(React__namespace.useState(), 2),
+          tafAction = _c[0],
+          setTafAction = _c[1];
+
+      var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
+        registerValidateForm(function () {
+          return promiseToRegister;
+        });
+      };
+
+      return {
+        onValidateForm: onValidateForm,
+        registerValidateForm: onRegisterValidateForm,
+        tafAction: tafAction,
+        setTafAction: setTafAction,
+        onPreventCloseView: onPreventCloseView
+      };
+    };
+    var TafModuleProvider = function TafModuleProvider(_a) {
+      var children = _a.children,
+          _b = _a.onPreventCloseView,
+          onPreventCloseView = _b === void 0 ? function () {} : _b;
+      var contextState = useTafModuleState({
+        onPreventCloseView: onPreventCloseView
+      });
+      return /*#__PURE__*/React__namespace.createElement(TafModuleContext.Provider, {
+        value: contextState
+      }, children);
+    };
+
+    var styles = {
+      label: {
+        color: 'geowebColors.buttons.tertiary.default.color',
+        opacity: 1,
+        fontSize: '12px',
+        fontWeight: 500
+      }
+    };
+
+    var SwitchButton = function SwitchButton(props) {
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
+        title: "Switch mode"
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.FormLabel, {
+        sx: styles.label
+      }, "Viewer"), /*#__PURE__*/React__namespace.createElement(material.Switch, __assign({
+        "data-testid": "switchMode"
+      }, props)), /*#__PURE__*/React__namespace.createElement(material.FormLabel, {
+        sx: styles.label
+      }, "Editor")));
+    };
+
+    var TafAvatar = function TafAvatar(_a) {
+      var editor = _a.editor,
+          _b = _a.tooltipPlacement,
+          tooltipPlacement = _b === void 0 ? 'bottom' : _b;
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
+        title: "Editor: " + editor,
+        placement: tooltipPlacement
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.Avatar, {
+        size: "small"
+      }, shared.getInitials(editor))));
+    };
+
+    var textFieldStyle = function textFieldStyle(theme) {
+      return {
+        // input
+        marginRight: '2px',
+        marginBottom: '4px',
+        width: 56,
+        height: 46,
+        input: {
+          textAlign: 'center',
+          fontSize: 10,
+          fontWeight: 500,
+          paddingLeft: 0,
+          paddingRight: 0,
+          '&.Mui-disabled': {
+            color: 'geowebColors.typographyAndIcons.text',
+            WebkitTextFillColor: theme.palette.geowebColors.typographyAndIcons.text
+          },
+          // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1995 disables the default autofill styling, should be a better fix
+          '&:-webkit-autofill': {
+            WebkitTransitionDelay: '86400s' // 1 day delay
+
           }
         },
-        onBlur: function onBlur() {
-          if (isChangeGroup) {
-            var nextValidFieldName = getValidFieldFromNextRow();
-            var previousValidFieldNames = getPreviousValidFields(index);
-            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)), __read(previousValidFieldNames)));
-          }
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Wind",
-        name: fieldNames.wind,
-        disabled: disabled,
-        defaultValue: getDefaultValue('wind', field),
-        rules: {
-          validate: {
-            validateRequiredMainFields: function validateRequiredMainFields(value) {
-              return _validateRequiredMainFields(value, 'Wind');
-            },
-            validateRequiredSub: validateRequiredSub,
-            validateWindField: function validateWindField$1(value) {
-              return validateWindField(value, getValues(fieldNames.weather1), getValues(fieldNames.weather2), getValues(fieldNames.weather3));
-            }
-          }
-        },
-        onBlur: function onBlur() {
-          if (isChangeGroup) {
-            trigger(__spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)));
-          }
-        },
-        autoFocus: !isChangeGroup
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Visibility",
-        name: fieldNames.visibility,
-        disabled: disabled,
-        defaultValue: getDefaultValue('visibility', field),
-        rules: {
-          validate: {
-            validateRequiredMainFields: function validateRequiredMainFields(value) {
-              return _validateRequiredMainFields(value, 'Visibility');
-            },
-            validateRequiredSub: validateRequiredSub,
-            validateVisibilityField: validateVisibilityField
-          }
-        },
-        autoComplete: [{
-          key: 'C',
-          value: 'CAVOK'
-        }],
-        onBlur: function onBlur() {
-          var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : subFields;
-          trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather1, fieldNames.weather2, fieldNames.weather3]));
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Weather",
-        name: fieldNames.weather1,
-        disabled: disabled,
-        defaultValue: getDefaultValue('weather.weather1', field),
-        rules: {
-          validate: {
-            validateRequiredMainFields: function validateRequiredMainFields(value) {
-              return _validateRequiredMainFields(value, 'Weather');
-            },
-            validateRequiredSub: validateRequiredSub,
-            validateWeatherField: function validateWeatherField$1(value) {
-              return validateWeatherField(value, getValues(fieldNames.visibility), !!isChangeGroup);
-            }
-          }
-        },
-        onBlur: function onBlur() {
-          var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
-          return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather2, fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Weather",
-        name: fieldNames.weather2,
-        disabled: disabled,
-        defaultValue: getDefaultValue('weather.weather2', field),
-        rules: {
-          validate: {
-            validateSecondWeatherField: function validateSecondWeatherField$1(value) {
-              return validateSecondWeatherField(getValues(fieldNames.weather1), value, getValues(fieldNames.visibility));
-            }
-          }
-        },
-        onBlur: function onBlur() {
-          var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
-          return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Weather",
-        name: fieldNames.weather3,
-        disabled: disabled,
-        defaultValue: getDefaultValue('weather.weather3', field),
-        rules: {
-          validate: {
-            validateThirdWeatherField: function validateThirdWeatherField$1(value) {
-              return validateThirdWeatherField(getValues(fieldNames.weather1), getValues(fieldNames.weather2), value, getValues(fieldNames.visibility));
-            }
-          }
-        },
-        onBlur: function onBlur() {
-          return trigger([fieldNames.wind, fieldNames.cloud1]);
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Cloud",
-        name: fieldNames.cloud1,
-        disabled: disabled,
-        defaultValue: getDefaultValue('cloud.cloud1', field),
-        rules: {
-          validate: {
-            validateRequiredMainFields: function validateRequiredMainFields(value) {
-              return _validateRequiredMainFields(value, 'Clouds');
-            },
-            validateRequiredSub: validateRequiredSub,
-            validateFirstCloud: function validateFirstCloud$1(value) {
-              return validateFirstCloud(value, getValues(fieldNames.visibility), getValues(fieldNames.weather1), getValues(fieldNames.weather2), getValues(fieldNames.weather3));
-            }
-          }
-        },
-        onBlur: function onBlur() {
-          var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
-          return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.cloud2, fieldNames.cloud3, fieldNames.cloud4]));
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Cloud",
-        name: fieldNames.cloud2,
-        disabled: disabled,
-        defaultValue: getDefaultValue('cloud.cloud2', field),
-        rules: {
-          validate: {
-            validateSecondCloud: function validateSecondCloud$1(value) {
-              return validateSecondCloud(getValues(fieldNames.cloud1), value, getValues(fieldNames.visibility));
-            }
-          }
+        label: {
+          transformOrigin: 'center top',
+          right: 0,
+          textAlign: 'center',
+          fontSize: '10px',
+          '&.Mui-disabled': {
+            color: 'geowebColors.captions.captionStatus.rgba'
+          },
+          whiteSpace: 'nowrap',
+          maxWidth: '100%',
+          transform: 'translate(0px, 16px) scale(1)'
         },
-        onBlur: function onBlur() {
-          return trigger([fieldNames.cloud3, fieldNames.cloud4]);
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Cloud",
-        name: fieldNames.cloud3,
-        disabled: disabled,
-        defaultValue: getDefaultValue('cloud.cloud3', field),
-        rules: {
-          validate: {
-            validateThirdCloud: function validateThirdCloud$1(value) {
-              return validateThirdCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), value, getValues(fieldNames.visibility));
-            }
-          }
+        // shrink
+        ' .MuiInputLabel-shrink': {
+          transform: 'translate(2px, 10px) scale(0.75) !important',
+          letterSpacing: '0.33px',
+          textAlign: 'left'
         },
-        onBlur: function onBlur() {
-          return trigger(fieldNames.cloud4);
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
-        label: "Cloud",
-        name: fieldNames.cloud4,
-        disabled: disabled,
-        defaultValue: getDefaultValue('cloud.cloud4', field),
-        rules: {
-          validate: {
-            validateFourthCloud: function validateFourthCloud$1(value) {
-              return validateFourthCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), getValues(fieldNames.cloud3), value, getValues(fieldNames.visibility));
-            }
+        // root
+        '&': {
+          '.Mui-error.MuiFilledInput-root': {
+            backgroundColor: 'geowebColors.captions.captionErrorBackground.rgba'
+          },
+          '.Mui-disabled:before': {
+            borderColor: 'transparent'
           }
         }
-      })), !disabled && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        justifyContent: "flex-end",
-        alignItems: "flex-end",
-        xs: 24,
-        sm: 1,
-        sx: {
-          marginBottom: '16px'
-        },
-        columns: 24
-      }, /*#__PURE__*/React__default["default"].createElement(TafFormOptionsButton, {
-        isChangeGroup: isChangeGroup,
-        addChangeGroupBelow: addChangeGroupBelow,
-        addChangeGroupAbove: addChangeGroupAbove,
-        removeChangeGroup: function removeChangeGroup() {
-          return onRemoveChangeGroup(index);
-        },
-        clearRow: clearRow,
-        index: index
-      })));
-    });
-
-    /* *
-     * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-    var tafActionToDraftAction = function tafActionToDraftAction(tafAction) {
-      switch (tafAction) {
-        case 'AMEND':
-        case 'DRAFT_AMEND':
-          return 'DRAFT_AMEND';
-
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          return 'DRAFT_CORRECT';
-
-        default:
-          return 'DRAFT';
-      }
+      };
     };
 
-    var tafActionToPublishAction = function tafActionToPublishAction(tafAction) {
-      switch (tafAction) {
-        case 'AMEND':
-        case 'DRAFT_AMEND':
-          return 'AMEND';
+    var getTafErrors = function getTafErrors(name, errors) {
+      var nameAsArray = name.split('.');
 
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          return 'CORRECT';
+      if (nameAsArray[0].includes('changeGroups')) {
+        if (errors.changeGroups) {
+          var changeGroupNum = nameAsArray[0].slice(13, nameAsArray[0].length - 1);
+          var restArray = nameAsArray.slice(1);
+          return formFields.getDeepProperty(restArray, errors.changeGroups[changeGroupNum]);
+        } // No changegroup errors
 
-        default:
-          return 'PUBLISH';
+
+        return null;
       }
-    };
 
-    var buttonsStyle = {
-      button: {
-        minWidth: {
-          xs: '56px',
-          sm: '64px'
-        },
-        width: {
-          xs: '56px',
-          sm: '64px'
-        },
-        marginLeft: {
-          xs: 0.5,
-          sm: 1
-        },
-        marginTop: 3,
-        marginBottom: 3
-      }
+      return formFields.getDeepProperty(nameAsArray, errors);
     };
 
-    var ViewModeButtons = function ViewModeButtons(_a) {
-      var canBe = _a.canBe,
-          onTafViewModeButtonPress = _a.onTafViewModeButtonPress;
-      return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, canBe.includes('CANCELLED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "canceltaf",
-        variant: "tertiary",
-        onClick: function onClick() {
-          return onTafViewModeButtonPress('CANCEL');
-        }
-      }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "correcttaf",
-        variant: "tertiary",
-        onClick: function onClick() {
-          return onTafViewModeButtonPress('CORRECT');
-        }
-      }, "Correct"), canBe.includes('AMENDED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "amendtaf",
-        variant: "tertiary",
-        onClick: function onClick() {
-          return onTafViewModeButtonPress('AMEND');
-        }
-      }, "Amend"));
+    var getDisplayValue = function getDisplayValue(value, disabled) {
+      return disabled && !value ? '-' : value;
     };
+    var BaseTextField = /*#__PURE__*/React__default["default"].memo(function (props) {
+      return /*#__PURE__*/React__default["default"].createElement(material.TextField, __assign({
+        type: "text",
+        variant: "filled",
+        sx: textFieldStyle
+      }, props));
+    }, function (prevProps, nextProps) {
+      return prevProps.value === nextProps.value && prevProps.error === nextProps.error && prevProps.name === nextProps.name && prevProps.disabled === nextProps.disabled;
+    });
 
-    var TafFormButtons = function TafFormButtons(_a) {
-      var _b = _a.isFormDisabled,
-          isFormDisabled = _b === void 0 ? false : _b,
-          tafAction = _a.tafAction,
-          _c = _a.canBe,
-          canBe = _c === void 0 ? [] : _c,
-          onTafEditModeButtonPress = _a.onTafEditModeButtonPress,
-          onTafViewModeButtonPress = _a.onTafViewModeButtonPress;
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        justifyContent: "flex-end",
-        sx: buttonsStyle,
-        columns: 24
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        justifyContent: "flex-end",
-        columns: 24,
-        xs: 24,
-        sm: 23
-      }, isFormDisabled ? /*#__PURE__*/React__default["default"].createElement(ViewModeButtons, {
-        canBe: canBe,
-        onTafViewModeButtonPress: onTafViewModeButtonPress
-      }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "cleartaf",
-        variant: "tertiary",
-        onClick: function onClick() {
-          // Simply discard the changes and close the dialog.
-          onTafEditModeButtonPress('CLEAR');
-        }
-      }, "Clear"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "savedrafttaf",
-        variant: "tertiary",
-        onClick: function onClick() {
-          /* Save the TAF as draft:
-          if action NEW or DRAFT - new status will be DRAFT -- default
-          if action AMEND - new status will be DRAFT_AMENDED
-          if action CORRECT - new status will be DRAFT_CORRECTED
-          if action DRAFT_AMEND - new status will be DRAFT_AMENDED
-          if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
-          */
-          onTafEditModeButtonPress(tafActionToDraftAction(tafAction));
+    var TafFormTextField = function TafFormTextField(_a) {
+      var label = _a.label,
+          _b = _a.disabled,
+          disabled = _b === void 0 ? false : _b,
+          _c = _a.name,
+          name = _c === void 0 ? '' : _c,
+          _d = _a.onChange,
+          onChange = _d === void 0 ? function () {} : _d,
+          _e = _a.onBlur,
+          onBlur = _e === void 0 ? function () {} : _e,
+          _f = _a.defaultValue,
+          defaultValue = _f === void 0 ? '' : _f,
+          _g = _a.formatter,
+          formatter = _g === void 0 ? null : _g,
+          rules = _a.rules,
+          _h = _a.autoComplete,
+          autoComplete = _h === void 0 ? [] : _h,
+          _j = _a.autoFocus,
+          autoFocus = _j === void 0 ? false : _j;
+
+      var _k = reactHookForm.useFormContext(),
+          control = _k.control,
+          setValue = _k.setValue,
+          errors = _k.formState.errors;
+
+      var fieldErrors = getTafErrors(name, errors);
+
+      var _l = __read(React__default["default"].useState(null), 2),
+          maxLength = _l[0],
+          setMaxLength = _l[1];
+
+      var onKeyDown = React__default["default"].useCallback(function (event) {
+        var target = event.target;
+        var currentValue = target.value,
+            selectionStart = target.selectionStart,
+            selectionEnd = target.selectionEnd;
+        var textSelection = currentValue.substring(selectionStart, selectionEnd);
+
+        if (autoComplete && !currentValue.length || textSelection.length && currentValue.length && textSelection === currentValue) {
+          var pressedKey_1 = event.key.toString().toUpperCase();
+          var foundValue = autoComplete.find(function (el) {
+            return el.key === pressedKey_1;
+          }) || null;
+
+          if (foundValue) {
+            setValue(name, foundValue.value, {
+              shouldDirty: true
+            });
+            setMaxLength(foundValue.value.length);
+            event.preventDefault();
+          }
         }
-      }, "Save"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "publishtaf",
-        variant: "tertiary",
-        onClick: function onClick() {
-          /* Publish the TAF:
-          if action NEW or DRAFT - new status will be PUBLISHED -- default
-          if action AMEND - new status will be AMENDED
-          if action CORRECT - new status will be CORRECTED
-          if action DRAFT_AMEND - new status will be AMENDED
-          if action DRAFT_CORRECT - new status will be CORRECTED
-          */
-          onTafEditModeButtonPress(tafActionToPublishAction(tafAction));
+      }, [name, autoComplete, setValue]);
+      var onChangeField = React__default["default"].useCallback(function (event, callback) {
+        var valueUppercase = event.currentTarget.value.toUpperCase();
+
+        if (autoComplete) {
+          var exist = autoComplete.find(function (e) {
+            return e.value === valueUppercase;
+          });
+          var newMaxLength = exist ? valueUppercase.length : null;
+          setMaxLength(newMaxLength);
         }
-      }, "Publish"))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        columns: 24,
-        sm: 1
-      }));
+
+        callback(valueUppercase);
+        onChange(valueUppercase);
+      }, [onChange, autoComplete]);
+      var onBlurField = React__default["default"].useCallback(function (callback) {
+        callback();
+        onBlur();
+      }, [onBlur]);
+      var hasError = !!fieldErrors;
+      return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
+        render: function render(_a) {
+          var field = _a.field;
+          var displayValue = formatter ? formatter(field.value) : getDisplayValue(field.value, disabled);
+          return /*#__PURE__*/React__default["default"].createElement(BaseTextField, {
+            label: label,
+            disabled: disabled,
+            name: name,
+            value: displayValue,
+            inputRef: field.ref,
+            onChange: function onChange(e) {
+              return onChangeField(e, field.onChange);
+            },
+            onKeyDown: onKeyDown,
+            error: hasError,
+            onBlur: function onBlur() {
+              return onBlurField(field.onBlur);
+            },
+            inputProps: {
+              maxLength: maxLength
+            },
+            autoFocus: autoFocus
+          });
+        },
+        name: name,
+        control: control,
+        defaultValue: defaultValue,
+        rules: rules
+      });
     };
 
     /* *
@@ -3568,30 +3464,27 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
-    var DragHandle = function DragHandle(_a) {
-      var _b = _a.isSorting,
-          isSorting = _b === void 0 ? false : _b,
-          _c = _a.isDisabled,
-          isDisabled = _c === void 0 ? false : _c,
-          index = _a.index;
-      return /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-        className: "handle",
-        "data-testid": "dragHandle-" + index,
-        disableRipple: true,
-        disabled: isDisabled,
-        size: "large",
-        sx: {
-          backgroundColor: 'transparent',
-          '&:hover': {
-            backgroundColor: 'transparent'
-          },
-          cursor: isSorting ? 'grabbing' : 'grab'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null));
+    var invalidChangeMessage = 'Invalid Change input, only BECMG, TEMPO or FM are allowed';
+    var invalidChangeProbCombinationMessage = 'A probability is only allowed in combination with TEMPO or an empty Change input'; // validations
+
+    var validateChangeField = function validateChangeField(value) {
+      var trimmedValue = getFieldValue(value);
+      var isValid = trimmedValue === '' || trimmedValue === 'FM' || trimmedValue === 'TEMPO' || trimmedValue === 'BECMG';
+      return isValid ? true : invalidChangeMessage;
+    };
+    var validateChangeFieldInterField = function validateChangeFieldInterField(value, valueProb) {
+      var trimmedProbValue = getFieldValue(valueProb);
+      var trimmedValue = getFieldValue(value);
+
+      if (trimmedProbValue !== '' && trimmedValue !== '' && trimmedValue !== 'TEMPO') {
+        return invalidChangeProbCombinationMessage;
+      }
+
+      return true;
     };
 
     /* *
@@ -3607,82 +3500,16 @@
      * 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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var getCustomError = function getCustomError(error, isChangeGroup, rowIndex) {
-      return __assign(__assign({}, error), {
-        isChangeGroup: isChangeGroup,
-        rowIndex: rowIndex
-      });
-    };
-    var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
-      switch (sumOfErrors) {
-        case 0:
-          return '0 issues';
-
-        case 1:
-          return '1 issue';
-
-        default:
-          return sumOfErrors + " issues";
-      }
-    };
-    var getErrorValues = function getErrorValues(fieldErrors, isChangeGroup, rowIndex) {
-      if (isChangeGroup === void 0) {
-        isChangeGroup = false;
-      }
-
-      if (rowIndex === void 0) {
-        rowIndex = -1;
-      }
-
-      if (!fieldErrors) return [];
-      return Object.keys(fieldErrors).reduce(function (list, key) {
-        var error = __assign({}, fieldErrors[key]);
-
-        if (error.ref) {
-          return list.concat(getCustomError(error, isChangeGroup, rowIndex));
-        }
-
-        return list.concat(getErrorValues(error, isChangeGroup, rowIndex));
-      }, []);
-    };
-    var filterDuplicateErrors = function filterDuplicateErrors(errors) {
-      return errors.reduce(function (list, error) {
-        // check on type validateRequiredSub and validateRequiredMainOptional since these are giving 'duplicates'
-        if (error.type === 'validateRequiredSub') {
-          var exist = list.find(function (e) {
-            return e.type === 'validateRequiredSub' && e.rowIndex === error.rowIndex;
-          });
-          return exist ? list : list.concat(error);
-        }
-
-        if (error.type === 'validateRequiredMainOptional') {
-          var exist = list.find(function (e) {
-            return e.type === 'validateRequiredMainOptional' && e.rowIndex === error.rowIndex;
-          });
-          return exist ? list : list.concat(error);
-        }
-
-        return list.concat(error);
-      }, []);
-    };
-    var getErrors = function getErrors(errors) {
-      var errorList = Object.keys(errors).reduce(function (list, key) {
-        var errorValue = errors[key]; // changeGroups
-
-        if (Array.isArray(errorValue)) {
-          var errorValues = errorValue.reduce(function (changeGroupErrors, changeGroupError, index) {
-            return changeGroupErrors.concat(getErrorValues(changeGroupError, true, index));
-          }, []);
-          return list.concat.apply(list, __spreadArray([], __read(errorValues)));
-        } // baseForecast
 
+    var invalidProbabilityMessage = 'Invalid Probability input, only PROB30 or PROB40 are allowed'; // validations
 
-        return list.concat(getErrorValues(errorValue, false, -1));
-      }, []);
-      return errorList;
+    var validateProbabilityField = function validateProbabilityField(value) {
+      var trimmedValue = getFieldValue(value);
+      var isValid = trimmedValue === '' || trimmedValue === 'PROB30' || trimmedValue === 'PROB40';
+      return isValid ? true : invalidProbabilityMessage;
     };
 
     /* *
@@ -3698,277 +3525,501 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
-    var IssuesButton = function IssuesButton(_a) {
-      var _b = _a.errors,
-          errors = _b === void 0 ? {} : _b,
-          _c = _a.isIssuesPaneOpen,
-          isIssuesPaneOpen = _c === void 0 ? false : _c,
-          _d = _a.setIsIssuesPaneOpen,
-          setIsIssuesPaneOpen = _d === void 0 ? function () {
-        return null;
-      } : _d;
-      var errorList = filterDuplicateErrors(getErrors(errors));
-      var totalErrors = errorList.length;
-      var errorStatus = totalErrors > 0 ? 'error' : 'success';
-      var buttonColor = "geowebColors.functional." + errorStatus;
-
-      var toggleIssuesPane = function toggleIssuesPane(newPosition) {
-        return setIsIssuesPaneOpen(!isIssuesPaneOpen, newPosition);
+    var TafFormOptionsButton = function TafFormOptionsButton(_a) {
+      var isChangeGroup = _a.isChangeGroup,
+          addChangeGroupBelow = _a.addChangeGroupBelow,
+          addChangeGroupAbove = _a.addChangeGroupAbove,
+          removeChangeGroup = _a.removeChangeGroup,
+          clearRow = _a.clearRow,
+          index = _a.index;
+      var insertAbove = {
+        text: 'Insert 1 row above',
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Add, null),
+        action: addChangeGroupAbove
       };
+      var insertBelow = {
+        text: 'Insert 1 row below',
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Add, null),
+        action: addChangeGroupBelow
+      };
+      var deleteRow = {
+        text: 'Delete row',
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
+        action: removeChangeGroup
+      };
+      var clear = {
+        text: 'Clear row',
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Close, null),
+        action: clearRow
+      };
+      var menuItemsBaseForecast = [insertBelow, clear];
+      var menuItemsChangeGroup = [insertAbove, insertBelow, deleteRow, clear];
+      return /*#__PURE__*/React__namespace.createElement(shared.ToggleMenu, {
+        buttonTestId: "tafFormOptions[" + index + "]",
+        buttonSx: {
+          marginTop: '10px',
+          marginLeft: '4px'
+        },
+        menuItems: isChangeGroup ? menuItemsChangeGroup : menuItemsBaseForecast
+      });
+    };
 
-      var onClickButton = function onClickButton(event) {
-        var _a;
-
-        var _b = event.currentTarget.getBoundingClientRect(),
-            left = _b.left,
-            top = _b.top;
+    var getDefaultValue = function getDefaultValue(fieldName, data) {
+      if (!data) {
+        return '';
+      }
 
-        var parentOffset = ((_a = document.getElementById('tafmodule')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
-          top: 0,
-          left: 0
-        };
-        var newPosition = {
-          left: left - parentOffset.left + 100,
-          top: top - parentOffset.top
-        };
-        toggleIssuesPane(newPosition);
-      };
+      return formFields.getDeepProperty(fieldName.split('.'), data) || '';
+    };
 
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "View details"
-      }, /*#__PURE__*/React__namespace.createElement(material.Chip, {
-        "data-testid": "issuesButton",
-        className: "status-" + errorStatus,
-        size: "small",
-        label: getIssuesLabel(totalErrors),
-        onClick: onClickButton,
-        sx: {
-          width: '74px',
-          color: '#ffffff',
-          backgroundColor: buttonColor,
-          '&:hover': {
-            backgroundColor: buttonColor
-          },
-          '&:focus': {
-            backgroundColor: buttonColor
-          },
-          fontSize: 12
-        }
-      }));
+    var getRequiredCrossFields = function getRequiredCrossFields(fieldNames) {
+      return [[fieldNames.valid], [fieldNames.change, fieldNames.probability], [fieldNames.wind, fieldNames.visibility, fieldNames.weather1, fieldNames.cloud1] // sub fields
+      ];
     };
 
-    var getPaneTitle = function getPaneTitle(sumOfErrors) {
-      switch (sumOfErrors) {
-        case 0:
-          return 'Looks good';
+    var TafFormRow = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
+      var isNotRequiredForAction = _a.isNotRequiredForAction,
+          _b = _a.isChangeGroup,
+          isChangeGroup = _b === void 0 ? false : _b,
+          _c = _a.disabled,
+          disabled = _c === void 0 ? false : _c,
+          _d = _a.index,
+          index = _d === void 0 ? -1 : _d,
+          onRemoveChangeGroup = _a.onRemoveChangeGroup,
+          _e = _a.field,
+          field = _e === void 0 ? null : _e,
+          _f = _a.dragHandle,
+          dragHandle = _f === void 0 ? null : _f,
+          onAddChangeGroupBelow = _a.onAddChangeGroupBelow,
+          onAddChangeGroupAbove = _a.onAddChangeGroupAbove,
+          onClearRow = _a.onClearRow,
+          props = __rest(_a, ["isNotRequiredForAction", "isChangeGroup", "disabled", "index", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroupBelow", "onAddChangeGroupAbove", "onClearRow"]);
 
-        case 1:
-          return 'There is an issue to address';
+      var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
+      var fieldNames = getFieldNames(isChangeGroup, index);
 
-        default:
-          return 'There are a few issues to address';
-      }
-    };
+      var _g = reactHookForm.useFormContext(),
+          getValues = _g.getValues,
+          trigger = _g.trigger; // cross-field required validation
 
-    var humanizeErrorMessage = function humanizeErrorMessage(errorTitle, fieldNumberedValue) {
-      if (fieldNumberedValue !== undefined && fieldNumberedValue >= 0) {
-        // when name contains a number we assume it's a formgroup and we add a index +1 for human readability
-        var fieldNumber = fieldNumberedValue + 1;
-        return errorTitle + " " + fieldNumber;
-      }
 
-      return errorTitle;
-    };
-    var getErrorMessage = function getErrorMessage(error, index) {
-      var errorTitleCategory = error.isChangeGroup ? 'Changegroups' : 'Baseforecast';
-      var fieldErrorTitle = humanizeErrorMessage(errorTitleCategory, error.rowIndex);
-      return index + 1 + ". " + fieldErrorTitle + ": " + error.message;
-    };
-    var MODAL_DIALOG_ELEMENT = 'modal-dialog';
-    var useIssuesPane = function useIssuesPane() {
-      var _a = __read(React__namespace.useState(false), 2),
-          isIssuesPaneOpen = _a[0],
-          setIsIssuesPaneOpen = _a[1];
+      var _h = __read(getRequiredCrossFields(fieldNames), 3),
+          mainFields = _h[0],
+          mainOptionalFields = _h[1],
+          subFields = _h[2];
 
-      var _b = __read(React__namespace.useState(null), 2),
-          startPosition = _b[0],
-          setStartPosition = _b[1];
+      var hasFieldsValue = function hasFieldsValue(fields) {
+        return fields.map(getValues).find(function (field) {
+          return !!field;
+        });
+      }; // Used to validate the required field for change groups: Valid
 
-      var onToggleIssuesPane = function onToggleIssuesPane(isOpen, newPosition) {
-        if (!startPosition) {
-          setStartPosition(newPosition);
+
+      var validateRequiredMain = function validateRequiredMain(value) {
+        return isNotRequiredForAction(value) !== true && isChangeGroup && !value.length && (hasFieldsValue(subFields) || hasFieldsValue(mainFields) || hasFieldsValue(mainOptionalFields)) ? 'Valid is required' : true;
+      }; // Used to ensure either probability or change is entered, or both
+
+
+      var validateRequiredMainOptional = function validateRequiredMainOptional(value) {
+        return isNotRequiredForAction(value) !== true && isChangeGroup && (hasFieldsValue(mainFields) || hasFieldsValue(subFields)) && !hasFieldsValue(mainOptionalFields) ? 'Probability or change is required' : true;
+      }; // Used to ensure one wind, visibility, weather or cloud is entered when start editing a changegroup and all of these are empty
+
+
+      var validateRequiredSub = function validateRequiredSub(value) {
+        return isNotRequiredForAction(value) !== true && isChangeGroup && (hasFieldsValue(mainFields) || hasFieldsValue(mainOptionalFields)) && !hasFieldsValue(subFields) ? 'Wind, visibility, weather or cloud is required' : true;
+      }; // Used to validate the combination of change group and wind, visibility, weather and/or cloud data entered
+
+
+      var _validateRequiredMainFields = function validateRequiredMainFields(value, fieldName) {
+        var changeField = getValues(namePrefix + ".change");
+        var visibilityField = getValues(namePrefix + ".visibility");
+        var isFM = changeField && changeField.trim() === 'FM';
+        var isCAVOK = visibilityField && visibilityField.trim() === 'CAVOK';
+
+        if (isNotRequiredForAction(value) !== true && !value.length) {
+          if (isChangeGroup && isFM || !isChangeGroup) {
+            // exception for CavOK
+            if (isCAVOK && (fieldName === 'Clouds' || fieldName === 'Weather')) {
+              return true;
+            } // exception for visibility > 5000
+
+
+            if (visibilityField && parseInt(visibilityField.trim(), 10) >= 5000 && fieldName === 'Weather') {
+              return true;
+            }
+
+            return fieldName + " is required";
+          }
+        }
+
+        return true;
+      };
+
+      var validatePreviousRow = React__default["default"].useCallback(function () {
+        if (isChangeGroup && index > 0) {
+          var _a = getValues(),
+              validDateEnd = _a.validDateEnd,
+              validDateStart = _a.validDateStart,
+              changeGroups = _a.changeGroups;
+
+          var currentChangeGroup = changeGroups[index];
+          var previousChangeGroup = changeGroups[index - 1];
+          return validatePreviousChangeGroup(currentChangeGroup, previousChangeGroup, validDateStart, validDateEnd);
+        }
+
+        return true;
+      }, [index, isChangeGroup, getValues]);
+
+      var getFieldFromRow = function getFieldFromRow(fieldname, rowIndex) {
+        var indexedFieldName = "changeGroups[" + rowIndex + "]." + fieldname;
+        var rowValue = getValues(indexedFieldName);
+        return rowValue ? [indexedFieldName] : [];
+      };
+
+      var getValidFieldFromNextRow = function getValidFieldFromNextRow() {
+        return getFieldFromRow('valid', index + 1);
+      };
+
+      var validateNextRows = React__default["default"].useCallback(function () {
+        if (isChangeGroup) {
+          var _a = getValues(),
+              validDateEnd = _a.validDateEnd,
+              validDateStart = _a.validDateStart,
+              changeGroups = _a.changeGroups;
+
+          var currentChangeGroup = changeGroups[index];
+          var nextChangeGroups = changeGroups.slice(index + 1);
+          return validateOverlapWithFM(currentChangeGroup, nextChangeGroups, validDateStart, validDateEnd);
+        }
+
+        return true;
+      }, [index, isChangeGroup, getValues]);
+
+      var getPreviousValidFields = function getPreviousValidFields(rowIndex) {
+        var changeGroups = getValues().changeGroups;
+        var previousChangeGroups = changeGroups.slice(0, rowIndex);
+        var validFields = previousChangeGroups.map(function (_element, index) {
+          return getFieldFromRow('valid', index)[0];
+        });
+        return validFields;
+      };
+
+      var addChangeGroupBelow = React__default["default"].useCallback(function () {
+        onAddChangeGroupBelow(index);
+      }, [onAddChangeGroupBelow, index]);
+      var addChangeGroupAbove = React__default["default"].useCallback(function () {
+        onAddChangeGroupAbove(index);
+      }, [onAddChangeGroupAbove, index]);
+      var clearRow = React__default["default"].useCallback(function () {
+        onClearRow(index);
+      }, [onClearRow, index]);
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, __assign({
+        sx: {
+          marginTop: '8px',
+          backgroundColor: 'geowebColors.cards.cardContainer',
+          position: 'relative',
+          '&.sortable-chosen': {
+            boxShadow: 1
+          },
+          '&.sortable-ghost': {
+            opacity: 0.5
+          }
+        },
+        justifyContent: "flex-start",
+        "data-testid": "row-" + namePrefix,
+        container: true,
+        ref: ref
+      }, props, {
+        className: "formRow"
+      }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        columns: 24,
+        item: true,
+        container: true,
+        justifyContent: "flex-end",
+        xs: 24,
+        sm: 23
+      }, !isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Type",
+        name: fieldNames.messageType,
+        disabled: true
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Location",
+        name: "location",
+        disabled: true
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        formatter: formatIssueTime,
+        label: "Issue time",
+        name: "issueDate",
+        disabled: true
+      })), isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          width: 56,
+          marginRight: '2px'
+        }
+      }, !disabled && dragHandle), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Prob",
+        name: fieldNames.probability,
+        disabled: disabled,
+        defaultValue: getDefaultValue('probability', field),
+        rules: {
+          validate: {
+            validateRequiredMainOptional: validateRequiredMainOptional,
+            validateProbabilityField: validateProbabilityField
+          }
+        },
+        autoComplete: [{
+          key: '3',
+          value: 'PROB30'
+        }, {
+          key: '4',
+          value: 'PROB40'
+        }],
+        onBlur: function onBlur() {
+          if (isChangeGroup) {
+            var nextValidFieldName = getValidFieldFromNextRow();
+            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)));
+          }
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Change",
+        name: fieldNames.change,
+        disabled: disabled,
+        defaultValue: getDefaultValue('change', field),
+        rules: {
+          validate: {
+            validateRequiredMainOptional: validateRequiredMainOptional,
+            validateChangeField: validateChangeField,
+            validateChangeFieldInterField: function validateChangeFieldInterField$1(value) {
+              return validateChangeFieldInterField(value, getValues(fieldNames.probability));
+            }
+          }
+        },
+        autoComplete: [{
+          key: 'T',
+          value: 'TEMPO'
+        }, {
+          key: 'B',
+          value: 'BECMG'
+        }, {
+          key: 'F',
+          value: 'FM'
+        }],
+        onBlur: function onBlur() {
+          if (isChangeGroup) {
+            var nextValidFieldName = getValidFieldFromNextRow();
+            var previousValidFieldNames = getPreviousValidFields(index);
+            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)), __read(previousValidFieldNames)));
+          }
+        }
+      })), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Valid",
+        name: fieldNames.valid,
+        // always disabled for baseforecast row
+        disabled: !isChangeGroup ? true : disabled,
+        defaultValue: getDefaultValue('valid', field),
+        rules: {
+          validate: {
+            validateRequiredMain: validateRequiredMain,
+            validateValidField: function validateValidField$1(value) {
+              return isChangeGroup ? validateValidField(value, getValues('validDateStart'), getValues('validDateEnd')) : true;
+            },
+            validateValidChangeGroupInterField: function validateValidChangeGroupInterField$1(value) {
+              return isChangeGroup ? validateValidChangeGroupInterField(value, getValues(fieldNames.change), getValues(fieldNames.probability), getValues('validDateStart'), getValues('validDateEnd')) : true;
+            },
+            validatePreviousRow: validatePreviousRow,
+            validateNextRows: validateNextRows
+          }
+        },
+        onBlur: function onBlur() {
+          if (isChangeGroup) {
+            var nextValidFieldName = getValidFieldFromNextRow();
+            var previousValidFieldNames = getPreviousValidFields(index);
+            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)), __read(previousValidFieldNames)));
+          }
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Wind",
+        name: fieldNames.wind,
+        disabled: disabled,
+        defaultValue: getDefaultValue('wind', field),
+        rules: {
+          validate: {
+            validateRequiredMainFields: function validateRequiredMainFields(value) {
+              return _validateRequiredMainFields(value, 'Wind');
+            },
+            validateRequiredSub: validateRequiredSub,
+            validateWindField: function validateWindField$1(value) {
+              return validateWindField(value, getValues(fieldNames.weather1), getValues(fieldNames.weather2), getValues(fieldNames.weather3));
+            }
+          }
+        },
+        onBlur: function onBlur() {
+          if (isChangeGroup) {
+            trigger(__spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)));
+          }
+        },
+        autoFocus: !isChangeGroup
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Visibility",
+        name: fieldNames.visibility,
+        disabled: disabled,
+        defaultValue: getDefaultValue('visibility', field),
+        rules: {
+          validate: {
+            validateRequiredMainFields: function validateRequiredMainFields(value) {
+              return _validateRequiredMainFields(value, 'Visibility');
+            },
+            validateRequiredSub: validateRequiredSub,
+            validateVisibilityField: validateVisibilityField
+          }
+        },
+        autoComplete: [{
+          key: 'C',
+          value: 'CAVOK'
+        }],
+        onBlur: function onBlur() {
+          var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : subFields;
+          trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather1, fieldNames.weather2, fieldNames.weather3]));
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Weather",
+        name: fieldNames.weather1,
+        disabled: disabled,
+        defaultValue: getDefaultValue('weather.weather1', field),
+        rules: {
+          validate: {
+            validateRequiredMainFields: function validateRequiredMainFields(value) {
+              return _validateRequiredMainFields(value, 'Weather');
+            },
+            validateRequiredSub: validateRequiredSub,
+            validateWeatherField: function validateWeatherField$1(value) {
+              return validateWeatherField(value, getValues(fieldNames.visibility), !!isChangeGroup);
+            }
+          }
+        },
+        onBlur: function onBlur() {
+          var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
+          return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather2, fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Weather",
+        name: fieldNames.weather2,
+        disabled: disabled,
+        defaultValue: getDefaultValue('weather.weather2', field),
+        rules: {
+          validate: {
+            validateSecondWeatherField: function validateSecondWeatherField$1(value) {
+              return validateSecondWeatherField(getValues(fieldNames.weather1), value, getValues(fieldNames.visibility));
+            }
+          }
+        },
+        onBlur: function onBlur() {
+          var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
+          return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Weather",
+        name: fieldNames.weather3,
+        disabled: disabled,
+        defaultValue: getDefaultValue('weather.weather3', field),
+        rules: {
+          validate: {
+            validateThirdWeatherField: function validateThirdWeatherField$1(value) {
+              return validateThirdWeatherField(getValues(fieldNames.weather1), getValues(fieldNames.weather2), value, getValues(fieldNames.visibility));
+            }
+          }
+        },
+        onBlur: function onBlur() {
+          return trigger([fieldNames.wind, fieldNames.cloud1]);
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Cloud",
+        name: fieldNames.cloud1,
+        disabled: disabled,
+        defaultValue: getDefaultValue('cloud.cloud1', field),
+        rules: {
+          validate: {
+            validateRequiredMainFields: function validateRequiredMainFields(value) {
+              return _validateRequiredMainFields(value, 'Clouds');
+            },
+            validateRequiredSub: validateRequiredSub,
+            validateFirstCloud: function validateFirstCloud$1(value) {
+              return validateFirstCloud(value, getValues(fieldNames.visibility), getValues(fieldNames.weather1), getValues(fieldNames.weather2), getValues(fieldNames.weather3));
+            }
+          }
+        },
+        onBlur: function onBlur() {
+          var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
+          return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.cloud2, fieldNames.cloud3, fieldNames.cloud4]));
         }
-
-        setIsIssuesPaneOpen(isOpen);
-      };
-
-      var onCloseIssuesPane = function onCloseIssuesPane() {
-        return setIsIssuesPaneOpen(false);
-      };
-
-      return {
-        isIssuesPaneOpen: isIssuesPaneOpen,
-        startPosition: startPosition,
-        onToggleIssuesPane: onToggleIssuesPane,
-        onCloseIssuesPane: onCloseIssuesPane
-      };
-    };
-
-    var IssuesPane = function IssuesPane(_a) {
-      var _b = _a.errorList,
-          errorList = _b === void 0 ? [] : _b,
-          isOpen = _a.isOpen,
-          handleClose = _a.handleClose,
-          _c = _a.startPosition,
-          startPosition = _c === void 0 ? {
-        left: 20,
-        top: 50
-      } : _c;
-      var rootElement = document.getElementById(MODAL_DIALOG_ELEMENT) || document.body;
-      return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
-        startSize: {
-          width: '577px',
-          height: '200px'
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Cloud",
+        name: fieldNames.cloud2,
+        disabled: disabled,
+        defaultValue: getDefaultValue('cloud.cloud2', field),
+        rules: {
+          validate: {
+            validateSecondCloud: function validateSecondCloud$1(value) {
+              return validateSecondCloud(getValues(fieldNames.cloud1), value, getValues(fieldNames.visibility));
+            }
+          }
         },
-        startPosition: startPosition,
-        minWidth: 300,
-        onClose: handleClose,
-        title: getPaneTitle(errorList.length),
-        headerSize: "xs",
-        isOpen: isOpen,
-        "data-testid": "moveable-issues-pane",
-        bounds: "parent"
-      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        component: "div",
-        sx: {
-          marginTop: '16px',
-          marginLeft: '24px'
+        onBlur: function onBlur() {
+          return trigger([fieldNames.cloud3, fieldNames.cloud4]);
         }
-      }, errorList.length === 0 && /*#__PURE__*/React__namespace.createElement(material.Box, {
-        component: "div",
-        sx: {
-          fontSize: '4rem'
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Cloud",
+        name: fieldNames.cloud3,
+        disabled: disabled,
+        defaultValue: getDefaultValue('cloud.cloud3', field),
+        rules: {
+          validate: {
+            validateThirdCloud: function validateThirdCloud$1(value) {
+              return validateThirdCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), value, getValues(fieldNames.visibility));
+            }
+          }
         },
-        "data-testid": "zeroIssuesImage"
-      }, /*#__PURE__*/React__namespace.createElement(theme.ThumbsUp, {
-        sx: {
-          height: '69px',
-          width: '58px'
+        onBlur: function onBlur() {
+          return trigger(fieldNames.cloud4);
         }
-      })), errorList.length > 0 && errorList.map(function (error, index) {
-        return /*#__PURE__*/React__namespace.createElement(material.Typography // eslint-disable-next-line react/no-array-index-key
-        , {
-          // eslint-disable-next-line react/no-array-index-key
-          key: "message-" + index,
-          variant: "body1",
-          "data-testid": "errorMessage"
-        }, getErrorMessage(error, index));
-      }))), rootElement);
-    };
-
-    /* *
-     * 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 TafModuleContext = /*#__PURE__*/React__namespace.createContext({
-      onValidateForm: null,
-      registerValidateForm: null,
-      tafAction: null,
-      setTafAction: null,
-      onPreventCloseView: null
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        label: "Cloud",
+        name: fieldNames.cloud4,
+        disabled: disabled,
+        defaultValue: getDefaultValue('cloud.cloud4', field),
+        rules: {
+          validate: {
+            validateFourthCloud: function validateFourthCloud$1(value) {
+              return validateFourthCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), getValues(fieldNames.cloud3), value, getValues(fieldNames.visibility));
+            }
+          }
+        }
+      })), !disabled && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        container: true,
+        justifyContent: "flex-end",
+        alignItems: "flex-end",
+        xs: 24,
+        sm: 1,
+        sx: {
+          marginBottom: '16px'
+        },
+        columns: 24
+      }, /*#__PURE__*/React__default["default"].createElement(TafFormOptionsButton, {
+        isChangeGroup: isChangeGroup,
+        addChangeGroupBelow: addChangeGroupBelow,
+        addChangeGroupAbove: addChangeGroupAbove,
+        removeChangeGroup: function removeChangeGroup() {
+          return onRemoveChangeGroup(index);
+        },
+        clearRow: clearRow,
+        index: index
+      })));
     });
-    var useTafModuleContext = function useTafModuleContext() {
-      return React__namespace.useContext(TafModuleContext);
-    };
-    var useTafModuleState = function useTafModuleState(_a) {
-      var onPreventCloseView = _a.onPreventCloseView;
-
-      var _b = __read(React__namespace.useState(function () {
-        return new Promise(function () {
-          return true;
-        });
-      }), 2),
-          onValidateForm = _b[0],
-          registerValidateForm = _b[1];
-
-      var _c = __read(React__namespace.useState(), 2),
-          tafAction = _c[0],
-          setTafAction = _c[1];
-
-      var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
-        registerValidateForm(function () {
-          return promiseToRegister;
-        });
-      };
-
-      return {
-        onValidateForm: onValidateForm,
-        registerValidateForm: onRegisterValidateForm,
-        tafAction: tafAction,
-        setTafAction: setTafAction,
-        onPreventCloseView: onPreventCloseView
-      };
-    };
-    var TafModuleProvider = function TafModuleProvider(_a) {
-      var children = _a.children,
-          _b = _a.onPreventCloseView,
-          onPreventCloseView = _b === void 0 ? function () {} : _b;
-      var contextState = useTafModuleState({
-        onPreventCloseView: onPreventCloseView
-      });
-      return /*#__PURE__*/React__namespace.createElement(TafModuleContext.Provider, {
-        value: contextState
-      }, children);
-    };
-
-    var styles = {
-      label: {
-        color: 'geowebColors.buttons.tertiary.default.color',
-        opacity: 1,
-        fontSize: '12px',
-        fontWeight: 500
-      }
-    };
-
-    var SwitchButton = function SwitchButton(props) {
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "Switch mode"
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.FormLabel, {
-        sx: styles.label
-      }, "Viewer"), /*#__PURE__*/React__namespace.createElement(material.Switch, __assign({
-        "data-testid": "switchMode"
-      }, props)), /*#__PURE__*/React__namespace.createElement(material.FormLabel, {
-        sx: styles.label
-      }, "Editor")));
-    };
-
-    var TafAvatar = function TafAvatar(_a) {
-      var editor = _a.editor,
-          _b = _a.tooltipPlacement,
-          tooltipPlacement = _b === void 0 ? 'bottom' : _b;
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "Editor: " + editor,
-        placement: tooltipPlacement
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.Avatar, {
-        size: "small"
-      }, shared.getInitials(editor))));
-    };
 
     var noop = function noop() {};
 
@@ -4000,7 +4051,10 @@
           _h = _a.fetchNewTafList,
           fetchNewTafList = _h === void 0 ? function () {
         return null;
-      } : _h;
+      } : _h,
+          _j = _a.previousTaf,
+          previousTaf = _j === void 0 ? null : _j;
+      var formRef = React__default["default"].useRef();
       var originalTaf = tafFromBackend.taf,
           editor = tafFromBackend.editor;
       var auth = authentication.useAuthenticationContext().auth;
@@ -4009,41 +4063,41 @@
       var isDefaultDisabled = getIsFormDefaultDisabled(originalTaf.status);
       var confirmDialog = shared.useConfirmationDialog();
 
-      var _j = shared.useDraftFormHelpers(),
-          toggleIsDraft = _j.toggleIsDraft,
-          isNotRequiredForAction = _j.isRequired;
-
-      var _k = useTafModuleContext(),
-          registerValidateForm = _k.registerValidateForm,
-          tafAction = _k.tafAction,
-          setTafAction = _k.setTafAction,
-          onPreventCloseView = _k.onPreventCloseView;
-
-      var _l = reactHookForm.useFormContext(),
-          control = _l.control,
-          handleSubmit = _l.handleSubmit,
-          trigger = _l.trigger,
-          formState = _l.formState,
-          getValues = _l.getValues,
-          setValue = _l.setValue,
-          resetField = _l.resetField; // added this ignore as the build is failing otherwise on: Type instantiation is excessively deep and possibly infinite.
+      var _k = shared.useDraftFormHelpers(),
+          toggleIsDraft = _k.toggleIsDraft,
+          isNotRequiredForAction = _k.isRequired;
+
+      var _l = useTafModuleContext(),
+          registerValidateForm = _l.registerValidateForm,
+          tafAction = _l.tafAction,
+          setTafAction = _l.setTafAction,
+          onPreventCloseView = _l.onPreventCloseView;
+
+      var _m = reactHookForm.useFormContext(),
+          control = _m.control,
+          handleSubmit = _m.handleSubmit,
+          trigger = _m.trigger,
+          formState = _m.formState,
+          getValues = _m.getValues,
+          setValue = _m.setValue,
+          resetField = _m.resetField; // added this ignore as the build is failing otherwise on: Type instantiation is excessively deep and possibly infinite.
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
 
 
-      var _m = reactHookForm.useFieldArray({
+      var _o = reactHookForm.useFieldArray({
         control: control,
         name: 'changeGroups'
       }),
-          fields = _m.fields,
-          insert = _m.insert,
-          remove = _m.remove,
-          move = _m.move;
+          fields = _o.fields,
+          insert = _o.insert,
+          remove = _o.remove,
+          move = _o.move;
 
-      var _o = useDragOrder(trigger, move),
-          onChangeOrder = _o.onChangeOrder,
-          onStartDrag = _o.onStartDrag,
-          activeDraggingIndex = _o.activeDraggingIndex;
+      var _p = useDragOrder(trigger, move),
+          onChangeOrder = _p.onChangeOrder,
+          onStartDrag = _p.onStartDrag,
+          activeDraggingIndex = _p.activeDraggingIndex;
 
       var dirtyFields = formState.dirtyFields,
           errors = formState.errors;
@@ -4064,7 +4118,8 @@
         return confirmDialog({
           title: getConfirmationDialogTitle(action),
           description: getConfirmationDialogContent(action, function () {
-            return isTafAmendedCorrectedChanged(isFormDirty$1, originalTaf, convertTafValuesToObject(getValues()));
+            return isTafAmendedCorrectedChanged( // If already saved as draft amd/cor then send over the previous taf
+            originalTaf.status === 'DRAFT_AMENDED' || originalTaf.status === 'DRAFT_CORRECTED' ? previousTaf : originalTaf, convertTafValuesToObject(getValues()));
           }),
           confirmLabel: getConfirmationDialogButtonLabel(action)
         });
@@ -4271,11 +4326,32 @@
 
                       return [2
                       /*return*/
-                      ];
+                      , true];
                   }
                 });
               });
-            })();
+            })().then(function () {
+              var hasFormErrors = Object.keys(errors).length;
+              var formNodeRef = formRef.current;
+
+              if (hasFormErrors && formNodeRef) {
+                var inputsWithError = formNodeRef.querySelectorAll('.Mui-error');
+                var firstFormGroupWithError = inputsWithError.length ? inputsWithError[inputsWithError.length - 1].closest('.formRow') : null;
+
+                if (firstFormGroupWithError) {
+                  var _a = getFormRowPosition(firstFormGroupWithError),
+                      top_1 = _a.top,
+                      left = _a.left;
+
+                  var tafModuleNode = formNodeRef.closest('#tafmodule');
+                  var newTop = top_1 - (tafModuleNode === null || tafModuleNode === void 0 ? void 0 : tafModuleNode.getBoundingClientRect().top) || 0;
+                  setIsIssuesPaneOpen(true, {
+                    top: newTop,
+                    left: left
+                  });
+                }
+              }
+            });
             break;
 
           default:
@@ -4395,9 +4471,9 @@
         });
       };
 
-      var _p = __read(React__default["default"].useState(false), 2),
-          shouldValidate = _p[0],
-          setShouldValidate = _p[1];
+      var _q = __read(React__default["default"].useState(false), 2),
+          shouldValidate = _q[0],
+          setShouldValidate = _q[1];
 
       React__default["default"].useEffect(function () {
         setIsDisabled(!isEditor || isDefaultDisabled); // set validate flag to validate after the values have been set
@@ -4474,7 +4550,8 @@
         editor: editor
       }))), /*#__PURE__*/React__default["default"].createElement("form", {
         "data-testid": "taf-form",
-        onSubmit: handleSubmit(onSubmit)
+        onSubmit: handleSubmit(onSubmit),
+        ref: formRef
       }, /*#__PURE__*/React__default["default"].createElement(TafFormRow, {
         disabled: isDisabled,
         onAddChangeGroupBelow: onAddRow,
@@ -4771,6 +4848,14 @@
 
       return 0;
     };
+    var getPreviousTaf = function getPreviousTaf(tafList, currentTaf) {
+      var previousId = currentTaf.taf.previousId;
+      if (!previousId) return null;
+      var previousTaf = tafList.find(function (taf) {
+        return taf.taf.uuid === previousId;
+      });
+      return previousTaf ? previousTaf.taf : null;
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -5574,7 +5659,10 @@
           _j = _a.fetchNewTafList,
           fetchNewTafList = _j === void 0 ? function () {
         return null;
-      } : _j;
+      } : _j,
+          _k = _a.previousTaf,
+          previousTaf = _k === void 0 ? null : _k,
+          tafAction = _a.tafAction;
       var severity = isWarning(error) ? 'warning' : 'error';
 
       var onTafAction = function onTafAction(action, taf) {
@@ -5676,7 +5764,7 @@
         index: index,
         "data-testid": "taf-panel" + (activeTafIndex === index ? '-active' : '')
       }, /*#__PURE__*/React__default["default"].createElement(TafHeader, {
-        title: getTafStatusLabel(tafFromBackend.taf.status),
+        title: getTafStatusLabel(tafFromBackend.taf.status, tafAction, isFormDisabled),
         sx: {
           marginBottom: '4px'
         }
@@ -5709,7 +5797,8 @@
         isDisabled: isFormDisabled,
         setIsDisabled: setIsFormDisabled,
         onSwitchEditor: patchTaf,
-        fetchNewTafList: fetchNewTafList
+        fetchNewTafList: fetchNewTafList,
+        previousTaf: previousTaf
       })));
     };
 
@@ -5804,7 +5893,7 @@
           return 'Saved as draft';
 
         case 'DRAFT_AMENDED':
-          return 'Saved as draft amended';
+          return 'Saved as draft amendment';
 
         case 'DRAFT_CORRECTED':
           return 'Saved as draft correction';
@@ -5842,7 +5931,8 @@
           isIssuesPaneOpen = _d.isIssuesPaneOpen,
           onToggleIssuesPane = _d.onToggleIssuesPane,
           onCloseIssuesPane = _d.onCloseIssuesPane,
-          startPosition = _d.startPosition;
+          startPosition = _d.startPosition,
+          onUserHasDragged = _d.onUserHasDragged;
 
       var _e = usePostTafRequest(api$1.postTaf),
           isLoading = _e.isLoading,
@@ -6182,7 +6272,9 @@
           patchTaf: patchTaf,
           isLoading: isLoading,
           error: error,
-          fetchNewTafList: onUpdateTaf
+          fetchNewTafList: onUpdateTaf,
+          previousTaf: getPreviousTaf(tafList, tafFromBackend),
+          tafAction: tafAction
         });
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -6205,7 +6297,8 @@
       })))))), /*#__PURE__*/React__default["default"].createElement(IssuesPaneWrapper, {
         handleClose: onCloseIssuesPane,
         isOpen: isIssuesPaneOpen,
-        startPosition: startPosition
+        startPosition: startPosition,
+        onUserHasDragged: onUserHasDragged
       }));
     };
 
@@ -7197,15 +7290,21 @@
       }
     };
 
+    var _d = fakeDraftAmendmentTaf.taf;
+        _d.changeGroups;
+        var fakeDraftAmendmentWithoutChangeGroups = __rest(_d, ["changeGroups"]); // Only use for display purposes in the list!
+
+
     ({
       creationDate: "2022-01-06T14:00:00Z",
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
       editor: null,
-      taf: __assign(__assign({}, fakeDraftAmendmentTaf.taf), {
+      taf: __assign(__assign({}, fakeDraftAmendmentWithoutChangeGroups), {
         location: 'EHRD',
         baseTime: "2022-01-06T12:00:00Z",
         validDateStart: "2022-01-06T14:00:00Z",
         validDateEnd: "2022-01-07T18:00:00Z",
+        previousId: "previousIdOfPreviousTAF",
         previousValidDateStart: "2022-01-06T12:00:00Z",
         previousValidDateEnd: "2022-01-07T18:00:00Z",
         baseForecast: __assign(__assign({}, fakeDraftAmendmentTaf.taf.baseForecast), {
@@ -7213,8 +7312,32 @@
             start: "2022-01-06T14:00:00Z",
             end: "2022-01-07T18:00:00Z"
           }
-        }),
-        changeGroups: []
+        })
+      })
+    }); // Use as the original previous TAF for TAF above
+
+    ({
+      creationDate: "2022-01-06T14:00:00Z",
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: null,
+      taf: __assign(__assign({}, fakeDraftAmendmentWithoutChangeGroups), {
+        status: 'AMENDED',
+        uuid: 'previousIdOfPreviousTAF',
+        location: 'EHRD',
+        baseTime: "2022-01-06T12:00:00Z",
+        validDateStart: "2022-01-06T14:00:00Z",
+        validDateEnd: "2022-01-07T18:00:00Z",
+        baseForecast: __assign(__assign({}, fakeDraftAmendmentTaf.taf.baseForecast), {
+          valid: {
+            start: "2022-01-06T14:00:00Z",
+            end: "2022-01-07T18:00:00Z"
+          },
+          wind: {
+            direction: 344,
+            speed: 90,
+            unit: 'KT'
+          }
+        })
       })
     });
     var fakeAmendmentTaf = {