@opengeoweb/taf 4.11.0 → 4.12.0

package/index.esm.js

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import React__default from 'react';
-import { TextField, Grid, Box, Button, IconButton, Chip, Typography, FormLabel, Switch, Card, Tabs, Tab, Dialog, MenuList, MenuItem, Backdrop, CircularProgress } from '@mui/material';
+import { Grid, Button, IconButton, Chip, Box, Typography, FormLabel, Switch, TextField, Card, Tabs, Tab, Dialog, MenuList, MenuItem, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { useDispatch } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
 import { useAuthenticationContext } from '@opengeoweb/authentication';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
-import { HIDDEN_INPUT_HELPER_IS_DRAFT, useIsMounted, ToggleMenu, CustomTooltip, ToolContainerDraggable, Avatar, getInitials, useConfirmationDialog, useDraftFormHelpers, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getErrorMessage as getErrorMessage$1, getWarningMessage, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
+import { HIDDEN_INPUT_HELPER_IS_DRAFT, useIsMounted, CustomTooltip, ToolContainerDraggable, Avatar, getInitials, ToggleMenu, useConfirmationDialog, useDraftFormHelpers, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getErrorMessage as getErrorMessage$1, getWarningMessage, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
 import { snackbarActions } from '@opengeoweb/core';
 import moment from 'moment';
 import { isEqual } from 'lodash';
-import { Add, Delete, Close, DragHandle as DragHandle$1, ThumbsUp, Clock, Cancel, Success, Edit, Export, ListItem, Cached } from '@opengeoweb/theme';
+import { DragHandle as DragHandle$1, ThumbsUp, Add, Delete, Close, Clock, Cancel, Success, Edit, Export, ListItem, Cached } from '@opengeoweb/theme';
 import ReactDOM from 'react-dom';
 import { useApiContext, createApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
 import LinearProgress from '@mui/material/LinearProgress';
@@ -157,6 +157,158 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
+/* *
+ * 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(_ref) {
+  var canBe = _ref.canBe,
+      onTafViewModeButtonPress = _ref.onTafViewModeButtonPress;
+  return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, canBe.includes('CANCELLED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "canceltaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      return onTafViewModeButtonPress('CANCEL');
+    }
+  }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "correcttaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      return onTafViewModeButtonPress('CORRECT');
+    }
+  }, "Correct"), canBe.includes('AMENDED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "amendtaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      return onTafViewModeButtonPress('AMEND');
+    }
+  }, "Amend"));
+};
+
+var TafFormButtons = function TafFormButtons(_ref2) {
+  var _ref2$isFormDisabled = _ref2.isFormDisabled,
+      isFormDisabled = _ref2$isFormDisabled === void 0 ? false : _ref2$isFormDisabled,
+      tafAction = _ref2.tafAction,
+      _ref2$canBe = _ref2.canBe,
+      canBe = _ref2$canBe === void 0 ? [] : _ref2$canBe,
+      onTafEditModeButtonPress = _ref2.onTafEditModeButtonPress,
+      onTafViewModeButtonPress = _ref2.onTafViewModeButtonPress;
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justifyContent: "flex-end",
+    sx: buttonsStyle,
+    columns: 24
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    container: true,
+    justifyContent: "flex-end",
+    columns: 24,
+    xs: 24,
+    sm: 23
+  }, isFormDisabled ? /*#__PURE__*/React__default.createElement(ViewModeButtons, {
+    canBe: canBe,
+    onTafViewModeButtonPress: onTafViewModeButtonPress
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "cleartaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      // Simply discard the changes and close the dialog.
+      onTafEditModeButtonPress('CLEAR');
+    }
+  }, "Clear"), /*#__PURE__*/React__default.createElement(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.createElement(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.createElement(Grid, {
+    item: true,
+    columns: 24,
+    sm: 1
+  }));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -459,8 +611,8 @@ var validateOverlapWithFM = function validateOverlapWithFM(currentChangeGroup, n
  * 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) {
   var valueAsString = value.toString();
@@ -468,6 +620,9 @@ var prependZeroes = function prependZeroes(value, totalDigits) {
     return "0".concat(newVal);
   }, valueAsString);
 };
+var getFieldValue = function getFieldValue(fieldValue) {
+  return fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.trim().toUpperCase();
+};
 
 var config$1 = [{
   key: 'range',
@@ -2431,7 +2586,8 @@ var getConfirmationDialogTitle = function getConfirmationDialogTitle(action) {
 }; // 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,
@@ -2443,7 +2599,7 @@ var isTafAmendedCorrectedChanged = function isTafAmendedCorrectedChanged(isFormD
   currentBaseF.valid;
       var currentNoValid = __rest(currentBaseF, ["valid"]);
 
-  return isFormDirty && (!isEqual(originalNoValid, currentNoValid) || !isEqual(originalChG, currentChG));
+  return !isEqual(originalNoValid, currentNoValid) || !isEqual(originalChG, currentChG);
 };
 var getConfirmationDialogContent = function getConfirmationDialogContent(action, isFormDirty) {
   switch (action) {
@@ -2495,13 +2651,30 @@ var emptyChangegroup = {
   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();
@@ -2640,192 +2813,56 @@ var fromStatusToAction = function fromStatusToAction(tafStatus) {
 var isFormDirty = function isFormDirty(dirtyFields) {
   return Object.keys(dirtyFields).length > 0;
 };
+var getFormRowPosition = function getFormRowPosition(formRow) {
+  var _formRow$getBoundingC = formRow.getBoundingClientRect(),
+      top = _formRow$getBoundingC.top,
+      left = _formRow$getBoundingC.left,
+      height = _formRow$getBoundingC.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(_ref) {
+  var _ref$isSorting = _ref.isSorting,
+      isSorting = _ref$isSorting === void 0 ? false : _ref$isSorting,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      index = _ref.index;
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "handle",
+    "data-testid": "dragHandle-".concat(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 getDeepProperty(restArray, errors.changeGroups[changeGroupNum]);
-    } // No changegroup errors
-
-
-    return null;
-  }
-
-  return getDeepProperty(nameAsArray, errors);
-};
-
-var getDisplayValue = function getDisplayValue(value, disabled) {
-  return disabled && !value ? '-' : value;
-};
-var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
-  return /*#__PURE__*/React__default.createElement(TextField, Object.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(_ref) {
-  var label = _ref.label,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? '' : _ref$name,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$onBlur = _ref.onBlur,
-      onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
-      _ref$defaultValue = _ref.defaultValue,
-      defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
-      _ref$formatter = _ref.formatter,
-      formatter = _ref$formatter === void 0 ? null : _ref$formatter,
-      rules = _ref.rules,
-      _ref$autoComplete = _ref.autoComplete,
-      autoComplete = _ref$autoComplete === void 0 ? [] : _ref$autoComplete,
-      _ref$autoFocus = _ref.autoFocus,
-      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
-
-  var _useFormContext = useFormContext(),
-      control = _useFormContext.control,
-      setValue = _useFormContext.setValue,
-      errors = _useFormContext.formState.errors;
-
-  var fieldErrors = getTafErrors(name, errors);
-
-  var _React$useState = React__default.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      maxLength = _React$useState2[0],
-      setMaxLength = _React$useState2[1];
-
-  var onKeyDown = React__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 = event.key.toString().toUpperCase();
-      var foundValue = autoComplete.find(function (el) {
-        return el.key === pressedKey;
-      }) || null;
-
-      if (foundValue) {
-        setValue(name, foundValue.value, {
-          shouldDirty: true
-        });
-        setMaxLength(foundValue.value.length);
-        event.preventDefault();
-      }
-    }
-  }, [name, autoComplete, setValue]);
-  var onChangeField = React__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.useCallback(function (callback) {
-    callback();
-    onBlur();
-  }, [onBlur]);
-  var hasError = !!fieldErrors;
-  return /*#__PURE__*/React__default.createElement(Controller, {
-    render: function render(_ref2) {
-      var field = _ref2.field;
-      var displayValue = formatter ? formatter(field.value) : getDisplayValue(field.value, disabled);
-      return /*#__PURE__*/React__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.createElement(DragHandle$1, null));
 };
 
 /* *
@@ -2841,27 +2878,77 @@ var TafFormTextField = function TafFormTextField(_ref) {
  * 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 validateChangeField = function validateChangeField(value) {
-  var trimmedValue = value.trim();
-  var isValid = trimmedValue === '' || trimmedValue === 'FM' || trimmedValue === 'TEMPO' || trimmedValue === 'BECMG';
-  return isValid ? true : invalidChangeMessage;
+var getCustomError = function getCustomError(error, isChangeGroup, rowIndex) {
+  return Object.assign(Object.assign({}, error), {
+    isChangeGroup: isChangeGroup,
+    rowIndex: rowIndex
+  });
 };
-var validateChangeFieldInterField = function validateChangeFieldInterField(value, valueProb) {
-  var trimmedProbValue = valueProb.trim();
-  var trimmedValue = value.trim();
+var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
+  switch (sumOfErrors) {
+    case 0:
+      return '0 issues';
 
-  if (trimmedProbValue !== '' && trimmedValue !== '' && trimmedValue !== 'TEMPO') {
-    return invalidChangeProbCombinationMessage;
+    case 1:
+      return '1 issue';
+
+    default:
+      return "".concat(sumOfErrors, " issues");
   }
+};
+var getErrorValues = function getErrorValues(fieldErrors) {
+  var isChangeGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var rowIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
+  if (!fieldErrors) return [];
+  return Object.keys(fieldErrors).reduce(function (list, key) {
+    var error = Object.assign({}, fieldErrors[key]);
 
-  return true;
+    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, _toConsumableArray(errorValues));
+    } // baseForecast
+
+
+    return list.concat(getErrorValues(errorValue, false, -1));
+  }, []);
+  return errorList;
 };
 
 /* *
@@ -2880,524 +2967,246 @@ var validateChangeFieldInterField = function validateChangeFieldInterField(value
  * 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(_ref) {
+  var _ref$errors = _ref.errors,
+      errors = _ref$errors === void 0 ? {} : _ref$errors,
+      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
+      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
+      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
+      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
+    return null;
+  } : _ref$setIsIssuesPaneO;
+  var errorList = filterDuplicateErrors(getErrors(errors));
+  var totalErrors = errorList.length;
+  var errorStatus = totalErrors > 0 ? 'error' : 'success';
+  var buttonColor = "geowebColors.functional.".concat(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(_ref) {
-  var isChangeGroup = _ref.isChangeGroup,
-      addChangeGroupBelow = _ref.addChangeGroupBelow,
-      addChangeGroupAbove = _ref.addChangeGroupAbove,
-      removeChangeGroup = _ref.removeChangeGroup,
-      clearRow = _ref.clearRow,
-      index = _ref.index;
-  var insertAbove = {
-    text: 'Insert 1 row above',
-    icon: /*#__PURE__*/React.createElement(Add, null),
-    action: addChangeGroupAbove
-  };
-  var insertBelow = {
-    text: 'Insert 1 row below',
-    icon: /*#__PURE__*/React.createElement(Add, null),
-    action: addChangeGroupBelow
-  };
-  var deleteRow = {
-    text: 'Delete row',
-    icon: /*#__PURE__*/React.createElement(Delete, null),
-    action: removeChangeGroup
-  };
-  var clear = {
-    text: 'Clear row',
-    icon: /*#__PURE__*/React.createElement(Close, null),
-    action: clearRow
-  };
-  var menuItemsBaseForecast = [insertBelow, clear];
-  var menuItemsChangeGroup = [insertAbove, insertBelow, deleteRow, clear];
-  return /*#__PURE__*/React.createElement(ToggleMenu, {
-    buttonTestId: "tafFormOptions[".concat(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 _event$currentTarget$ = event.currentTarget.getBoundingClientRect(),
+        left = _event$currentTarget$.left,
+        top = _event$currentTarget$.top;
 
-  return 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.createElement(CustomTooltip, {
+    title: "View details"
+  }, /*#__PURE__*/React.createElement(Chip, {
+    "data-testid": "issuesButton",
+    className: "status-".concat(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.forwardRef(function (_a, ref) {
-  var isNotRequiredForAction = _a.isNotRequiredForAction,
-      _a$isChangeGroup = _a.isChangeGroup,
-      isChangeGroup = _a$isChangeGroup === void 0 ? false : _a$isChangeGroup,
-      _a$disabled = _a.disabled,
-      disabled = _a$disabled === void 0 ? false : _a$disabled,
-      _a$index = _a.index,
-      index = _a$index === void 0 ? -1 : _a$index,
-      onRemoveChangeGroup = _a.onRemoveChangeGroup,
-      _a$field = _a.field,
-      field = _a$field === void 0 ? null : _a$field,
-      _a$dragHandle = _a.dragHandle,
-      dragHandle = _a$dragHandle === void 0 ? null : _a$dragHandle,
-      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[".concat(index, "]");
-  var fieldNames = getFieldNames(isChangeGroup, index);
-
-  var _useFormContext = useFormContext(),
-      getValues = _useFormContext.getValues,
-      trigger = _useFormContext.trigger; // cross-field required validation
-
-
-  var _getRequiredCrossFiel = getRequiredCrossFields(fieldNames),
-      _getRequiredCrossFiel2 = _slicedToArray(_getRequiredCrossFiel, 3),
-      mainFields = _getRequiredCrossFiel2[0],
-      mainOptionalFields = _getRequiredCrossFiel2[1],
-      subFields = _getRequiredCrossFiel2[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("".concat(namePrefix, ".change"));
-    var visibilityField = getValues("".concat(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 "".concat(errorTitle, " ").concat(fieldNumber);
+  }
 
+  return errorTitle;
+};
+var getErrorMessage = function getErrorMessage(error, index) {
+  var errorTitleCategory = error.isChangeGroup ? 'Changegroups' : 'Baseforecast';
+  var fieldErrorTitle = humanizeErrorMessage(errorTitleCategory, error.rowIndex);
+  return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(error.message);
+};
+var MODAL_DIALOG_ELEMENT = 'modal-dialog';
+var useIssuesPane = function useIssuesPane() {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isIssuesPaneOpen = _React$useState2[0],
+      setIsIssuesPaneOpen = _React$useState2[1];
 
-        if (visibilityField && parseInt(visibilityField.trim(), 10) >= 5000 && fieldName === 'Weather') {
-          return true;
-        }
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      startPosition = _React$useState4[0],
+      setStartPosition = _React$useState4[1];
 
-        return "".concat(fieldName, " is required");
-      }
-    }
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      hasUserDragged = _React$useState6[0],
+      setHasUserDragged = _React$useState6[1];
 
-    return true;
+  var onUserHasDragged = function onUserHasDragged() {
+    return setHasUserDragged(true);
   };
 
-  var validatePreviousRow = React__default.useCallback(function () {
-    if (isChangeGroup && index > 0) {
-      var _getValues = getValues(),
-          validDateEnd = _getValues.validDateEnd,
-          validDateStart = _getValues.validDateStart,
-          changeGroups = _getValues.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[".concat(rowIndex, "].").concat(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.useCallback(function () {
-    if (isChangeGroup) {
-      var _getValues2 = getValues(),
-          validDateEnd = _getValues2.validDateEnd,
-          validDateStart = _getValues2.validDateStart,
-          changeGroups = _getValues2.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 _getValues3 = getValues(),
-        changeGroups = _getValues3.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.useCallback(function () {
-    onAddChangeGroupBelow(index);
-  }, [onAddChangeGroupBelow, index]);
-  var addChangeGroupAbove = React__default.useCallback(function () {
-    onAddChangeGroupAbove(index);
-  }, [onAddChangeGroupAbove, index]);
-  var clearRow = React__default.useCallback(function () {
-    onClearRow(index);
-  }, [onClearRow, index]);
-  return /*#__PURE__*/React__default.createElement(Grid, Object.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-".concat(namePrefix),
-    container: true,
-    ref: ref
-  }, props), /*#__PURE__*/React__default.createElement(Grid, {
-    columns: 24,
-    item: true,
-    container: true,
-    justifyContent: "flex-end",
-    xs: 24,
-    sm: 23
-  }, !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Type",
-    name: fieldNames.messageType,
-    disabled: true
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Location",
-    name: "location",
-    disabled: true
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    formatter: formatIssueTime,
-    label: "Issue time",
-    name: "issueDate",
-    disabled: true
-  })), isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      width: 56,
-      marginRight: '2px'
-    }
-  }, !disabled && dragHandle), /*#__PURE__*/React__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([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName)));
-      }
-    }
-  }), /*#__PURE__*/React__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([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName), _toConsumableArray(previousValidFieldNames)));
-      }
-    }
-  })), /*#__PURE__*/React__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([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName), _toConsumableArray(previousValidFieldNames)));
-      }
-    }
-  }), /*#__PURE__*/React__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([].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)));
-      }
-    },
-    autoFocus: !isChangeGroup
-  }), /*#__PURE__*/React__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 ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : subFields;
-      trigger([].concat(_toConsumableArray(fields), [fieldNames.weather1, fieldNames.weather2, fieldNames.weather3]));
-    }
-  }), /*#__PURE__*/React__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);
-        }
-      }
+var IssuesPane = function IssuesPane(_ref) {
+  var _ref$errorList = _ref.errorList,
+      errorList = _ref$errorList === void 0 ? [] : _ref$errorList,
+      isOpen = _ref.isOpen,
+      handleClose = _ref.handleClose,
+      _ref$startPosition = _ref.startPosition,
+      startPosition = _ref$startPosition === void 0 ? {
+    left: 20,
+    top: 50
+  } : _ref$startPosition,
+      _ref$onUserHasDragged = _ref.onUserHasDragged,
+      onUserHasDragged = _ref$onUserHasDragged === void 0 ? function () {} : _ref$onUserHasDragged;
+  var rootElement = document.getElementById(MODAL_DIALOG_ELEMENT) || document.body;
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+    startSize: {
+      width: '577px',
+      height: '200px'
     },
-    onBlur: function onBlur() {
-      var fields = isChangeGroup ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : [];
-      return trigger([].concat(_toConsumableArray(fields), [fieldNames.weather2, fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
-    }
-  }), /*#__PURE__*/React__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));
-        }
+    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();
       }
-    },
-    onBlur: function onBlur() {
-      var fields = isChangeGroup ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : [];
-      return trigger([].concat(_toConsumableArray(fields), [fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
     }
-  }), /*#__PURE__*/React__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.createElement(Box, {
+    component: "div",
+    sx: {
+      marginTop: '16px',
+      marginLeft: '24px'
     }
-  }), /*#__PURE__*/React__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));
-        }
-      }
+  }, errorList.length === 0 && /*#__PURE__*/React.createElement(Box, {
+    component: "div",
+    sx: {
+      fontSize: '4rem'
     },
-    onBlur: function onBlur() {
-      var fields = isChangeGroup ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : [];
-      return trigger([].concat(_toConsumableArray(fields), [fieldNames.cloud2, fieldNames.cloud3, fieldNames.cloud4]));
+    "data-testid": "zeroIssuesImage"
+  }, /*#__PURE__*/React.createElement(ThumbsUp, {
+    sx: {
+      height: '69px',
+      width: '58px'
     }
-  }), /*#__PURE__*/React__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));
-        }
-      }
-    },
-    onBlur: function onBlur() {
-      return trigger([fieldNames.cloud3, fieldNames.cloud4]);
-    }
-  }), /*#__PURE__*/React__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));
-        }
-      }
-    },
-    onBlur: function onBlur() {
-      return trigger(fieldNames.cloud4);
-    }
-  }), /*#__PURE__*/React__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.createElement(Grid, {
-    item: true,
-    container: true,
-    justifyContent: "flex-end",
-    alignItems: "flex-end",
-    xs: 24,
-    sm: 1,
-    sx: {
-      marginBottom: '16px'
-    },
-    columns: 24
-  }, /*#__PURE__*/React__default.createElement(TafFormOptionsButton, {
-    isChangeGroup: isChangeGroup,
-    addChangeGroupBelow: addChangeGroupBelow,
-    addChangeGroupAbove: addChangeGroupAbove,
-    removeChangeGroup: function removeChangeGroup() {
-      return onRemoveChangeGroup(index);
-    },
-    clearRow: clearRow,
-    index: index
-  })));
+  })), errorList.length > 0 && errorList.map(function (error, index) {
+    return /*#__PURE__*/React.createElement(Typography // eslint-disable-next-line react/no-array-index-key
+    , {
+      // eslint-disable-next-line react/no-array-index-key
+      key: "message-".concat(index),
+      variant: "body1",
+      "data-testid": "errorMessage"
+    }, getErrorMessage(error, index));
+  }))), rootElement);
+};
+
+var TafModuleContext = /*#__PURE__*/React.createContext({
+  onValidateForm: null,
+  registerValidateForm: null,
+  tafAction: null,
+  setTafAction: null,
+  onPreventCloseView: null
 });
+var useTafModuleContext = function useTafModuleContext() {
+  return React.useContext(TafModuleContext);
+};
+var useTafModuleState = function useTafModuleState(_ref) {
+  var onPreventCloseView = _ref.onPreventCloseView;
+
+  var _React$useState = React.useState(function () {
+    return new Promise(function () {
+      return true;
+    });
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      onValidateForm = _React$useState2[0],
+      registerValidateForm = _React$useState2[1];
+
+  var _React$useState3 = React.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      tafAction = _React$useState4[0],
+      setTafAction = _React$useState4[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(_ref2) {
+  var children = _ref2.children,
+      _ref2$onPreventCloseV = _ref2.onPreventCloseView,
+      onPreventCloseView = _ref2$onPreventCloseV === void 0 ? function () {} : _ref2$onPreventCloseV;
+  var contextState = useTafModuleState({
+    onPreventCloseView: onPreventCloseView
+  });
+  return /*#__PURE__*/React.createElement(TafModuleContext.Provider, {
+    value: contextState
+  }, children);
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3412,143 +3221,227 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
  * 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 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 styles = {
+  label: {
+    color: 'geowebColors.buttons.tertiary.default.color',
+    opacity: 1,
+    fontSize: '12px',
+    fontWeight: 500
   }
 };
 
-var tafActionToPublishAction = function tafActionToPublishAction(tafAction) {
-  switch (tafAction) {
-    case 'AMEND':
-    case 'DRAFT_AMEND':
-      return 'AMEND';
-
-    case 'CORRECT':
-    case 'DRAFT_CORRECT':
-      return 'CORRECT';
+var SwitchButton = function SwitchButton(props) {
+  return /*#__PURE__*/React.createElement(CustomTooltip, {
+    title: "Switch mode"
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormLabel, {
+    sx: styles.label
+  }, "Viewer"), /*#__PURE__*/React.createElement(Switch, Object.assign({
+    "data-testid": "switchMode"
+  }, props)), /*#__PURE__*/React.createElement(FormLabel, {
+    sx: styles.label
+  }, "Editor")));
+};
 
-    default:
-      return 'PUBLISH';
-  }
+var TafAvatar = function TafAvatar(_ref) {
+  var editor = _ref.editor,
+      _ref$tooltipPlacement = _ref.tooltipPlacement,
+      tooltipPlacement = _ref$tooltipPlacement === void 0 ? 'bottom' : _ref$tooltipPlacement;
+  return /*#__PURE__*/React.createElement(CustomTooltip, {
+    title: "Editor: ".concat(editor),
+    placement: tooltipPlacement
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Avatar, {
+    size: "small"
+  }, getInitials(editor))));
 };
 
-var buttonsStyle = {
-  button: {
-    minWidth: {
-      xs: '56px',
-      sm: '64px'
+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
+
+      }
     },
-    width: {
-      xs: '56px',
-      sm: '64px'
+    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)'
     },
-    marginLeft: {
-      xs: 0.5,
-      sm: 1
+    // shrink
+    ' .MuiInputLabel-shrink': {
+      transform: 'translate(2px, 10px) scale(0.75) !important',
+      letterSpacing: '0.33px',
+      textAlign: 'left'
     },
-    marginTop: 3,
-    marginBottom: 3
-  }
-};
-
-var ViewModeButtons = function ViewModeButtons(_ref) {
-  var canBe = _ref.canBe,
-      onTafViewModeButtonPress = _ref.onTafViewModeButtonPress;
-  return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, canBe.includes('CANCELLED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "canceltaf",
-    variant: "tertiary",
-    onClick: function onClick() {
-      return onTafViewModeButtonPress('CANCEL');
-    }
-  }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "correcttaf",
-    variant: "tertiary",
-    onClick: function onClick() {
-      return onTafViewModeButtonPress('CORRECT');
-    }
-  }, "Correct"), canBe.includes('AMENDED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "amendtaf",
-    variant: "tertiary",
-    onClick: function onClick() {
-      return onTafViewModeButtonPress('AMEND');
+    // root
+    '&': {
+      '.Mui-error.MuiFilledInput-root': {
+        backgroundColor: 'geowebColors.captions.captionErrorBackground.rgba'
+      },
+      '.Mui-disabled:before': {
+        borderColor: 'transparent'
+      }
     }
-  }, "Amend"));
+  };
 };
 
-var TafFormButtons = function TafFormButtons(_ref2) {
-  var _ref2$isFormDisabled = _ref2.isFormDisabled,
-      isFormDisabled = _ref2$isFormDisabled === void 0 ? false : _ref2$isFormDisabled,
-      tafAction = _ref2.tafAction,
-      _ref2$canBe = _ref2.canBe,
-      canBe = _ref2$canBe === void 0 ? [] : _ref2$canBe,
-      onTafEditModeButtonPress = _ref2.onTafEditModeButtonPress,
-      onTafViewModeButtonPress = _ref2.onTafViewModeButtonPress;
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "flex-end",
-    sx: buttonsStyle,
-    columns: 24
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    justifyContent: "flex-end",
-    columns: 24,
-    xs: 24,
-    sm: 23
-  }, isFormDisabled ? /*#__PURE__*/React__default.createElement(ViewModeButtons, {
-    canBe: canBe,
-    onTafViewModeButtonPress: onTafViewModeButtonPress
-  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "cleartaf",
-    variant: "tertiary",
-    onClick: function onClick() {
-      // Simply discard the changes and close the dialog.
-      onTafEditModeButtonPress('CLEAR');
-    }
-  }, "Clear"), /*#__PURE__*/React__default.createElement(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 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 getDeepProperty(restArray, errors.changeGroups[changeGroupNum]);
+    } // No changegroup errors
+
+
+    return null;
+  }
+
+  return getDeepProperty(nameAsArray, errors);
+};
+
+var getDisplayValue = function getDisplayValue(value, disabled) {
+  return disabled && !value ? '-' : value;
+};
+var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
+  return /*#__PURE__*/React__default.createElement(TextField, Object.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(_ref) {
+  var label = _ref.label,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$onBlur = _ref.onBlur,
+      onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+      _ref$formatter = _ref.formatter,
+      formatter = _ref$formatter === void 0 ? null : _ref$formatter,
+      rules = _ref.rules,
+      _ref$autoComplete = _ref.autoComplete,
+      autoComplete = _ref$autoComplete === void 0 ? [] : _ref$autoComplete,
+      _ref$autoFocus = _ref.autoFocus,
+      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
+
+  var _useFormContext = useFormContext(),
+      control = _useFormContext.control,
+      setValue = _useFormContext.setValue,
+      errors = _useFormContext.formState.errors;
+
+  var fieldErrors = getTafErrors(name, errors);
+
+  var _React$useState = React__default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      maxLength = _React$useState2[0],
+      setMaxLength = _React$useState2[1];
+
+  var onKeyDown = React__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 = event.key.toString().toUpperCase();
+      var foundValue = autoComplete.find(function (el) {
+        return el.key === pressedKey;
+      }) || null;
+
+      if (foundValue) {
+        setValue(name, foundValue.value, {
+          shouldDirty: true
+        });
+        setMaxLength(foundValue.value.length);
+        event.preventDefault();
+      }
     }
-  }, "Save"), /*#__PURE__*/React__default.createElement(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.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.createElement(Grid, {
-    item: true,
-    columns: 24,
-    sm: 1
-  }));
+
+    callback(valueUppercase);
+    onChange(valueUppercase);
+  }, [onChange, autoComplete]);
+  var onBlurField = React__default.useCallback(function (callback) {
+    callback();
+    onBlur();
+  }, [onBlur]);
+  var hasError = !!fieldErrors;
+  return /*#__PURE__*/React__default.createElement(Controller, {
+    render: function render(_ref2) {
+      var field = _ref2.field;
+      var displayValue = formatter ? formatter(field.value) : getDisplayValue(field.value, disabled);
+      return /*#__PURE__*/React__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
+  });
 };
 
 /* *
@@ -3564,30 +3457,27 @@ var TafFormButtons = function TafFormButtons(_ref2) {
  * 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(_ref) {
-  var _ref$isSorting = _ref.isSorting,
-      isSorting = _ref$isSorting === void 0 ? false : _ref$isSorting,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      index = _ref.index;
-  return /*#__PURE__*/React__default.createElement(IconButton, {
-    className: "handle",
-    "data-testid": "dragHandle-".concat(index),
-    disableRipple: true,
-    disabled: isDisabled,
-    size: "large",
-    sx: {
-      backgroundColor: 'transparent',
-      '&:hover': {
-        backgroundColor: 'transparent'
-      },
-      cursor: isSorting ? 'grabbing' : 'grab'
-    }
-  }, /*#__PURE__*/React__default.createElement(DragHandle$1, 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;
 };
 
 /* *
@@ -3603,77 +3493,16 @@ var DragHandle = function DragHandle(_ref) {
  * 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 Object.assign(Object.assign({}, error), {
-    isChangeGroup: isChangeGroup,
-    rowIndex: rowIndex
-  });
-};
-var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
-  switch (sumOfErrors) {
-    case 0:
-      return '0 issues';
 
-    case 1:
-      return '1 issue';
+var invalidProbabilityMessage = 'Invalid Probability input, only PROB30 or PROB40 are allowed'; // validations
 
-    default:
-      return "".concat(sumOfErrors, " issues");
-  }
-};
-var getErrorValues = function getErrorValues(fieldErrors) {
-  var isChangeGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var rowIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
-  if (!fieldErrors) return [];
-  return Object.keys(fieldErrors).reduce(function (list, key) {
-    var error = Object.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, _toConsumableArray(errorValues));
-    } // baseForecast
-
-
-    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;
 };
 
 /* *
@@ -3689,281 +3518,504 @@ var getErrors = function getErrors(errors) {
  * 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(_ref) {
-  var _ref$errors = _ref.errors,
-      errors = _ref$errors === void 0 ? {} : _ref$errors,
-      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
-      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
-      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
-      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
-    return null;
-  } : _ref$setIsIssuesPaneO;
-  var errorList = filterDuplicateErrors(getErrors(errors));
-  var totalErrors = errorList.length;
-  var errorStatus = totalErrors > 0 ? 'error' : 'success';
-  var buttonColor = "geowebColors.functional.".concat(errorStatus);
-
-  var toggleIssuesPane = function toggleIssuesPane(newPosition) {
-    return setIsIssuesPaneOpen(!isIssuesPaneOpen, newPosition);
+var TafFormOptionsButton = function TafFormOptionsButton(_ref) {
+  var isChangeGroup = _ref.isChangeGroup,
+      addChangeGroupBelow = _ref.addChangeGroupBelow,
+      addChangeGroupAbove = _ref.addChangeGroupAbove,
+      removeChangeGroup = _ref.removeChangeGroup,
+      clearRow = _ref.clearRow,
+      index = _ref.index;
+  var insertAbove = {
+    text: 'Insert 1 row above',
+    icon: /*#__PURE__*/React.createElement(Add, null),
+    action: addChangeGroupAbove
   };
+  var insertBelow = {
+    text: 'Insert 1 row below',
+    icon: /*#__PURE__*/React.createElement(Add, null),
+    action: addChangeGroupBelow
+  };
+  var deleteRow = {
+    text: 'Delete row',
+    icon: /*#__PURE__*/React.createElement(Delete, null),
+    action: removeChangeGroup
+  };
+  var clear = {
+    text: 'Clear row',
+    icon: /*#__PURE__*/React.createElement(Close, null),
+    action: clearRow
+  };
+  var menuItemsBaseForecast = [insertBelow, clear];
+  var menuItemsChangeGroup = [insertAbove, insertBelow, deleteRow, clear];
+  return /*#__PURE__*/React.createElement(ToggleMenu, {
+    buttonTestId: "tafFormOptions[".concat(index, "]"),
+    buttonSx: {
+      marginTop: '10px',
+      marginLeft: '4px'
+    },
+    menuItems: isChangeGroup ? menuItemsChangeGroup : menuItemsBaseForecast
+  });
+};
 
-  var onClickButton = function onClickButton(event) {
-    var _a;
-
-    var _event$currentTarget$ = event.currentTarget.getBoundingClientRect(),
-        left = _event$currentTarget$.left,
-        top = _event$currentTarget$.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 getDeepProperty(fieldName.split('.'), data) || '';
+};
 
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "View details"
-  }, /*#__PURE__*/React.createElement(Chip, {
-    "data-testid": "issuesButton",
-    className: "status-".concat(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.forwardRef(function (_a, ref) {
+  var isNotRequiredForAction = _a.isNotRequiredForAction,
+      _a$isChangeGroup = _a.isChangeGroup,
+      isChangeGroup = _a$isChangeGroup === void 0 ? false : _a$isChangeGroup,
+      _a$disabled = _a.disabled,
+      disabled = _a$disabled === void 0 ? false : _a$disabled,
+      _a$index = _a.index,
+      index = _a$index === void 0 ? -1 : _a$index,
+      onRemoveChangeGroup = _a.onRemoveChangeGroup,
+      _a$field = _a.field,
+      field = _a$field === void 0 ? null : _a$field,
+      _a$dragHandle = _a.dragHandle,
+      dragHandle = _a$dragHandle === void 0 ? null : _a$dragHandle,
+      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[".concat(index, "]");
+  var fieldNames = getFieldNames(isChangeGroup, index);
 
-    default:
-      return 'There are a few issues to address';
-  }
-};
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues,
+      trigger = _useFormContext.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 "".concat(errorTitle, " ").concat(fieldNumber);
-  }
 
-  return errorTitle;
-};
-var getErrorMessage = function getErrorMessage(error, index) {
-  var errorTitleCategory = error.isChangeGroup ? 'Changegroups' : 'Baseforecast';
-  var fieldErrorTitle = humanizeErrorMessage(errorTitleCategory, error.rowIndex);
-  return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(error.message);
-};
-var MODAL_DIALOG_ELEMENT = 'modal-dialog';
-var useIssuesPane = function useIssuesPane() {
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isIssuesPaneOpen = _React$useState2[0],
-      setIsIssuesPaneOpen = _React$useState2[1];
+  var _getRequiredCrossFiel = getRequiredCrossFields(fieldNames),
+      _getRequiredCrossFiel2 = _slicedToArray(_getRequiredCrossFiel, 3),
+      mainFields = _getRequiredCrossFiel2[0],
+      mainOptionalFields = _getRequiredCrossFiel2[1],
+      subFields = _getRequiredCrossFiel2[2];
 
-  var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      startPosition = _React$useState4[0],
-      setStartPosition = _React$useState4[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("".concat(namePrefix, ".change"));
+    var visibilityField = getValues("".concat(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 "".concat(fieldName, " is required");
+      }
+    }
+
+    return true;
+  };
+
+  var validatePreviousRow = React__default.useCallback(function () {
+    if (isChangeGroup && index > 0) {
+      var _getValues = getValues(),
+          validDateEnd = _getValues.validDateEnd,
+          validDateStart = _getValues.validDateStart,
+          changeGroups = _getValues.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[".concat(rowIndex, "].").concat(fieldname);
+    var rowValue = getValues(indexedFieldName);
+    return rowValue ? [indexedFieldName] : [];
+  };
+
+  var getValidFieldFromNextRow = function getValidFieldFromNextRow() {
+    return getFieldFromRow('valid', index + 1);
+  };
+
+  var validateNextRows = React__default.useCallback(function () {
+    if (isChangeGroup) {
+      var _getValues2 = getValues(),
+          validDateEnd = _getValues2.validDateEnd,
+          validDateStart = _getValues2.validDateStart,
+          changeGroups = _getValues2.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 _getValues3 = getValues(),
+        changeGroups = _getValues3.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.useCallback(function () {
+    onAddChangeGroupBelow(index);
+  }, [onAddChangeGroupBelow, index]);
+  var addChangeGroupAbove = React__default.useCallback(function () {
+    onAddChangeGroupAbove(index);
+  }, [onAddChangeGroupAbove, index]);
+  var clearRow = React__default.useCallback(function () {
+    onClearRow(index);
+  }, [onClearRow, index]);
+  return /*#__PURE__*/React__default.createElement(Grid, Object.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-".concat(namePrefix),
+    container: true,
+    ref: ref
+  }, props, {
+    className: "formRow"
+  }), /*#__PURE__*/React__default.createElement(Grid, {
+    columns: 24,
+    item: true,
+    container: true,
+    justifyContent: "flex-end",
+    xs: 24,
+    sm: 23
+  }, !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
+    label: "Type",
+    name: fieldNames.messageType,
+    disabled: true
+  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
+    label: "Location",
+    name: "location",
+    disabled: true
+  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
+    formatter: formatIssueTime,
+    label: "Issue time",
+    name: "issueDate",
+    disabled: true
+  })), isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      width: 56,
+      marginRight: '2px'
+    }
+  }, !disabled && dragHandle), /*#__PURE__*/React__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([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName)));
+      }
+    }
+  }), /*#__PURE__*/React__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([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName), _toConsumableArray(previousValidFieldNames)));
+      }
+    }
+  })), /*#__PURE__*/React__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([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName), _toConsumableArray(previousValidFieldNames)));
+      }
+    }
+  }), /*#__PURE__*/React__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([].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)));
+      }
+    },
+    autoFocus: !isChangeGroup
+  }), /*#__PURE__*/React__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 ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : subFields;
+      trigger([].concat(_toConsumableArray(fields), [fieldNames.weather1, fieldNames.weather2, fieldNames.weather3]));
+    }
+  }), /*#__PURE__*/React__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 ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : [];
+      return trigger([].concat(_toConsumableArray(fields), [fieldNames.weather2, fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
+    }
+  }), /*#__PURE__*/React__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 ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : [];
+      return trigger([].concat(_toConsumableArray(fields), [fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]));
+    }
+  }), /*#__PURE__*/React__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.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 ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : [];
+      return trigger([].concat(_toConsumableArray(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(_ref) {
-  var _ref$errorList = _ref.errorList,
-      errorList = _ref$errorList === void 0 ? [] : _ref$errorList,
-      isOpen = _ref.isOpen,
-      handleClose = _ref.handleClose,
-      _ref$startPosition = _ref.startPosition,
-      startPosition = _ref$startPosition === void 0 ? {
-    left: 20,
-    top: 50
-  } : _ref$startPosition;
-  var rootElement = document.getElementById(MODAL_DIALOG_ELEMENT) || document.body;
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    startSize: {
-      width: '577px',
-      height: '200px'
+  }), /*#__PURE__*/React__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.createElement(Box, {
-    component: "div",
-    sx: {
-      marginTop: '16px',
-      marginLeft: '24px'
+    onBlur: function onBlur() {
+      return trigger([fieldNames.cloud3, fieldNames.cloud4]);
     }
-  }, errorList.length === 0 && /*#__PURE__*/React.createElement(Box, {
-    component: "div",
-    sx: {
-      fontSize: '4rem'
+  }), /*#__PURE__*/React__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.createElement(ThumbsUp, {
-    sx: {
-      height: '69px',
-      width: '58px'
+    onBlur: function onBlur() {
+      return trigger(fieldNames.cloud4);
     }
-  })), errorList.length > 0 && errorList.map(function (error, index) {
-    return /*#__PURE__*/React.createElement(Typography // eslint-disable-next-line react/no-array-index-key
-    , {
-      // eslint-disable-next-line react/no-array-index-key
-      key: "message-".concat(index),
-      variant: "body1",
-      "data-testid": "errorMessage"
-    }, getErrorMessage(error, index));
-  }))), rootElement);
-};
-
-var TafModuleContext = /*#__PURE__*/React.createContext({
-  onValidateForm: null,
-  registerValidateForm: null,
-  tafAction: null,
-  setTafAction: null,
-  onPreventCloseView: null
+  }), /*#__PURE__*/React__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.createElement(Grid, {
+    item: true,
+    container: true,
+    justifyContent: "flex-end",
+    alignItems: "flex-end",
+    xs: 24,
+    sm: 1,
+    sx: {
+      marginBottom: '16px'
+    },
+    columns: 24
+  }, /*#__PURE__*/React__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.useContext(TafModuleContext);
-};
-var useTafModuleState = function useTafModuleState(_ref) {
-  var onPreventCloseView = _ref.onPreventCloseView;
-
-  var _React$useState = React.useState(function () {
-    return new Promise(function () {
-      return true;
-    });
-  }),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      onValidateForm = _React$useState2[0],
-      registerValidateForm = _React$useState2[1];
-
-  var _React$useState3 = React.useState(),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tafAction = _React$useState4[0],
-      setTafAction = _React$useState4[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(_ref2) {
-  var children = _ref2.children,
-      _ref2$onPreventCloseV = _ref2.onPreventCloseView,
-      onPreventCloseView = _ref2$onPreventCloseV === void 0 ? function () {} : _ref2$onPreventCloseV;
-  var contextState = useTafModuleState({
-    onPreventCloseView: onPreventCloseView
-  });
-  return /*#__PURE__*/React.createElement(TafModuleContext.Provider, {
-    value: contextState
-  }, children);
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var styles = {
-  label: {
-    color: 'geowebColors.buttons.tertiary.default.color',
-    opacity: 1,
-    fontSize: '12px',
-    fontWeight: 500
-  }
-};
-
-var SwitchButton = function SwitchButton(props) {
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "Switch mode"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormLabel, {
-    sx: styles.label
-  }, "Viewer"), /*#__PURE__*/React.createElement(Switch, Object.assign({
-    "data-testid": "switchMode"
-  }, props)), /*#__PURE__*/React.createElement(FormLabel, {
-    sx: styles.label
-  }, "Editor")));
-};
-
-var TafAvatar = function TafAvatar(_ref) {
-  var editor = _ref.editor,
-      _ref$tooltipPlacement = _ref.tooltipPlacement,
-      tooltipPlacement = _ref$tooltipPlacement === void 0 ? 'bottom' : _ref$tooltipPlacement;
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: "Editor: ".concat(editor),
-    placement: tooltipPlacement
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Avatar, {
-    size: "small"
-  }, getInitials(editor))));
-};
 
 var noop = function noop() {};
 
@@ -3995,7 +4047,10 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
       _ref$fetchNewTafList = _ref.fetchNewTafList,
       fetchNewTafList = _ref$fetchNewTafList === void 0 ? function () {
     return null;
-  } : _ref$fetchNewTafList;
+  } : _ref$fetchNewTafList,
+      _ref$previousTaf = _ref.previousTaf,
+      previousTaf = _ref$previousTaf === void 0 ? null : _ref$previousTaf;
+  var formRef = React__default.useRef();
   var originalTaf = tafFromBackend.taf,
       editor = tafFromBackend.editor;
 
@@ -4062,7 +4117,8 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     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)
     });
@@ -4259,14 +4315,37 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
                       resetFormState(null, true, convertTafValuesToObject(data));
                     }
 
-                  case 6:
+                    return _context3.abrupt("return", true);
+
+                  case 7:
                   case "end":
                     return _context3.stop();
                 }
               }
             }, _callee3);
           }));
-        })();
+        })().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 _getFormRowPosition = getFormRowPosition(firstFormGroupWithError),
+                  top = _getFormRowPosition.top,
+                  left = _getFormRowPosition.left;
+
+              var tafModuleNode = formNodeRef.closest('#tafmodule');
+              var newTop = top - (tafModuleNode === null || tafModuleNode === void 0 ? void 0 : tafModuleNode.getBoundingClientRect().top) || 0;
+              setIsIssuesPaneOpen(true, {
+                top: newTop,
+                left: left
+              });
+            }
+          }
+        });
         break;
 
       default:
@@ -4452,7 +4531,8 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     editor: editor
   }))), /*#__PURE__*/React__default.createElement("form", {
     "data-testid": "taf-form",
-    onSubmit: handleSubmit(onSubmit)
+    onSubmit: handleSubmit(onSubmit),
+    ref: formRef
   }, /*#__PURE__*/React__default.createElement(TafFormRow, {
     disabled: isDisabled,
     onAddChangeGroupBelow: onAddRow,
@@ -4754,6 +4834,14 @@ var getNewTafLocationIndex = function getNewTafLocationIndex(tafLocations, previ
 
   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");
@@ -5592,7 +5680,10 @@ var TafPanel = function TafPanel(_ref) {
       _ref$fetchNewTafList = _ref.fetchNewTafList,
       fetchNewTafList = _ref$fetchNewTafList === void 0 ? function () {
     return null;
-  } : _ref$fetchNewTafList;
+  } : _ref$fetchNewTafList,
+      _ref$previousTaf = _ref.previousTaf,
+      previousTaf = _ref$previousTaf === void 0 ? null : _ref$previousTaf,
+      tafAction = _ref.tafAction;
   var severity = isWarning(error) ? 'warning' : 'error';
 
   var onTafAction = function onTafAction(action, taf) {
@@ -5642,7 +5733,7 @@ var TafPanel = function TafPanel(_ref) {
     index: index,
     "data-testid": "taf-panel".concat(activeTafIndex === index ? '-active' : '')
   }, /*#__PURE__*/React__default.createElement(TafHeader, {
-    title: getTafStatusLabel(tafFromBackend.taf.status),
+    title: getTafStatusLabel(tafFromBackend.taf.status, tafAction, isFormDisabled),
     sx: {
       marginBottom: '4px'
     }
@@ -5675,7 +5766,8 @@ var TafPanel = function TafPanel(_ref) {
     isDisabled: isFormDisabled,
     setIsDisabled: setIsFormDisabled,
     onSwitchEditor: patchTaf,
-    fetchNewTafList: fetchNewTafList
+    fetchNewTafList: fetchNewTafList,
+    previousTaf: previousTaf
   })));
 };
 
@@ -5786,7 +5878,7 @@ var getSnackbarMessage = function getSnackbarMessage(tafFromFrontEnd) {
       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';
@@ -5827,7 +5919,8 @@ var TafLayout = function TafLayout(_ref2) {
       isIssuesPaneOpen = _useIssuesPane.isIssuesPaneOpen,
       onToggleIssuesPane = _useIssuesPane.onToggleIssuesPane,
       onCloseIssuesPane = _useIssuesPane.onCloseIssuesPane,
-      startPosition = _useIssuesPane.startPosition;
+      startPosition = _useIssuesPane.startPosition,
+      onUserHasDragged = _useIssuesPane.onUserHasDragged;
 
   var _usePostTafRequest = usePostTafRequest(api.postTaf),
       isLoading = _usePostTafRequest.isLoading,
@@ -6151,7 +6244,9 @@ var TafLayout = function TafLayout(_ref2) {
       patchTaf: patchTaf,
       isLoading: isLoading,
       error: error,
-      fetchNewTafList: onUpdateTaf
+      fetchNewTafList: onUpdateTaf,
+      previousTaf: getPreviousTaf(tafList, tafFromBackend),
+      tafAction: tafAction
     });
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -6174,7 +6269,8 @@ var TafLayout = function TafLayout(_ref2) {
   })))))), /*#__PURE__*/React__default.createElement(IssuesPaneWrapper, {
     handleClose: onCloseIssuesPane,
     isOpen: isIssuesPaneOpen,
-    startPosition: startPosition
+    startPosition: startPosition,
+    onUserHasDragged: onUserHasDragged
   }));
 };
 
@@ -7191,15 +7287,21 @@ var fakeDraftAmendmentTaf = {
   }
 };
 
+var _a = fakeDraftAmendmentTaf.taf;
+    _a.changeGroups;
+    var fakeDraftAmendmentWithoutChangeGroups = __rest(_a, ["changeGroups"]); // Only use for display purposes in the list!
+
+
 ({
   creationDate: "2022-01-06T14:00:00Z",
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
   editor: null,
-  taf: Object.assign(Object.assign({}, fakeDraftAmendmentTaf.taf), {
+  taf: Object.assign(Object.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: Object.assign(Object.assign({}, fakeDraftAmendmentTaf.taf.baseForecast), {
@@ -7207,8 +7309,32 @@ var fakeDraftAmendmentTaf = {
         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: Object.assign(Object.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: Object.assign(Object.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 = {