@opengeoweb/taf 1.2.2 → 2.1.0

package/taf.esm.js

@@ -1,124 +1,177 @@
 import * as React from 'react';
 import React__default from 'react';
-import { makeStyles, Grid, TextField, IconButton, Tooltip, Chip, SvgIcon, Paper, Typography, Button, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Backdrop, CircularProgress } from '@material-ui/core';
+import { makeStyles, Grid, TextField, IconButton, Tooltip, Chip, SvgIcon, Typography, Button, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Backdrop, CircularProgress } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
 import moment from 'moment';
-import { useDraftFormHelpers, useConfirmationDialog, usePreventBrowserClose, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
-import { Delete, Close, DragIndicator, Add, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@material-ui/icons';
+import { useIsMounted, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, usePrevious, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
+import { Delete, DragIndicator, Add, Close, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@material-ui/icons';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { ReactSortable, Sortable } from 'react-sortablejs';
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-function __values(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-}
-
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-}
-
-function __spreadArray(to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _toArray(arr) {
+  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it;
+
+  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+
+      var F = function () {};
+
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var normalCompletion = true,
+      didErr = false,
+      err;
+  return {
+    s: function () {
+      it = o[Symbol.iterator]();
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
 }
 
 /* *
@@ -177,20 +230,41 @@ var tafConfig = {
 	locations: locations
 };
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 }
 
 /* *
@@ -209,19 +283,21 @@ function _typeof(obj) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
+var FORMAT_DAYS_HOURS = 'DDHH';
+var FORMAT_DAYS_HOURS_MINUTS = 'DDHHmm'; // formatters
 
 var formatValidToString = function formatValidToString(valid) {
   // Ensure end of valid period if midnight is shown as 24 and not 00
   var endHours = moment.utc(valid.end).format('kk');
   var endDate = endHours === '24' ? moment.utc(valid.end).add(-1, 'day').format('DD') : moment.utc(valid.end).format('DD');
-  return valid.end ? moment.utc(valid.start).format('DDHH') + "/" + endDate + endHours : moment.utc(valid.start).format('DDHHmm');
+  return valid.end ? "".concat(moment.utc(valid.start).format(FORMAT_DAYS_HOURS), "/").concat(endDate).concat(endHours) : moment.utc(valid.start).format(FORMAT_DAYS_HOURS_MINUTS);
 };
 
 var getSections = function getSections(value, format) {
   return {
     day: parseInt(value.substring(0, 2), 10),
     hour: parseInt(value.substring(2, 4), 10),
-    min: format === 'DDHHmm' ? parseInt(value.substring(4), 10) : 0
+    min: format === FORMAT_DAYS_HOURS_MINUTS ? parseInt(value.substring(4), 10) : 0
   };
 };
 
@@ -251,7 +327,7 @@ var parseValidToObject = function parseValidToObject(value, tafStart, tafEnd) {
   var tafStartMoment = moment.utc(tafStart);
   var tafEndMoment = moment.utc(tafEnd);
   var startEnd = trimmedValue.split('/');
-  var format = trimmedValue.indexOf('/') === -1 ? 'DDHHmm' : 'DDHH';
+  var format = trimmedValue.indexOf('/') === -1 ? FORMAT_DAYS_HOURS_MINUTS : FORMAT_DAYS_HOURS;
   var startSections = getSections(startEnd[0], format);
   var start = getValidityTimeStamp('start', startSections, tafStartMoment, tafEndMoment).format('YYYY-MM-DDTHH:mm:ss[Z]'); // If we only have start value - return that otherwise, also get end time
 
@@ -261,7 +337,7 @@ var parseValidToObject = function parseValidToObject(value, tafStart, tafEnd) {
     };
   }
 
-  var endSections = getSections(startEnd[1], 'DDHH');
+  var endSections = getSections(startEnd[1], FORMAT_DAYS_HOURS);
   var end = getValidityTimeStamp('end', endSections, tafStartMoment, tafEndMoment).format('YYYY-MM-DDTHH:mm:ss[Z]');
   return {
     start: start,
@@ -275,8 +351,8 @@ var invalidValidityMinutesMessage = 'Invalid validity period, specified minutes
 var invalidValidityStartTimeMessage = 'Invalid validity start time, change group validity must lie within the TAF validity period';
 var invalidValidityPeriodMessage = 'Invalid validity period, validity end time has to be after validity start time';
 var invalidValidityEndTimeMessage = 'Invalid validity end time, change group validity must lie within the TAF validity period';
-var invalidValidityLengthMessage = 'Invalid validity period, expected either DDHH/DDHH or DDHHmm';
-var invalidChangeValidInterFieldMessage = 'Invalid validity period, expected DDHH/DDHH for BECMG and TEMPO or DDHHmm for FM'; // Validations
+var invalidChangeValidInterFieldMessage = 'Invalid validity period, expected DDHH/DDHH for BECMG and TEMPO or DDHHmm for FM';
+var invalidBECMGDurationValidInterFieldMessage = 'Invalid validity period, for BECMG only validity periods with a duration of 1, 2, 3 or 4 hours are allowed'; // Validations
 // Ensure all individual sections are correct (DD HH mm etc)
 
 var validateValidSections = function validateValidSections(sections, isStartEnd) {
@@ -300,7 +376,7 @@ var validateIsValidDates = function validateIsValidDates(value, tafStart, tafEnd
   var tafStartMoment = moment.utc(tafStart);
   var tafEndMoment = moment.utc(tafEnd);
   var startEnd = value.split('/');
-  var format = value.indexOf('/') === -1 ? 'DDHHmm' : 'DDHH';
+  var format = value.indexOf('/') === -1 ? FORMAT_DAYS_HOURS_MINUTS : FORMAT_DAYS_HOURS;
   var validateMsg = []; // Validate start time
 
   var startSections = getSections(startEnd[0], format); // Validate individual sections for start
@@ -316,7 +392,7 @@ var validateIsValidDates = function validateIsValidDates(value, tafStart, tafEnd
 
 
   if (startEnd.length > 1) {
-    var endSections = getSections(startEnd[1], 'DDHH'); // Validate individual sections for end
+    var endSections = getSections(startEnd[1], FORMAT_DAYS_HOURS); // Validate individual sections for end
 
     var sectionValidationEnd = validateValidSections(endSections, 'end'); // If invalid end - return with errors
 
@@ -346,7 +422,7 @@ var validateValidField = function validateValidField(value, tafStart, tafEnd) {
 
 
   if (trimmedValue.length < 6 || trimmedValue.length > 9 || !(trimmedValue.match(/^[0-9]{4}\/[0-9]{4}$/) || trimmedValue.match(/^[0-9]{6}$/))) {
-    return invalidValidityLengthMessage;
+    return invalidChangeValidInterFieldMessage;
   } // Ensure valid date(s) can be made
 
 
@@ -360,16 +436,89 @@ var validateValidField = function validateValidField(value, tafStart, tafEnd) {
 
   return true;
 };
-var validateValidChangeGroupInterField = function validateValidChangeGroupInterField(value, valueChange) {
+var validateValidChangeGroupInterField = function validateValidChangeGroupInterField(value, valueChange, tafStart, tafEnd) {
   var trimmedValue = value.trim();
   var trimmedValueChange = valueChange.trim();
 
   if (!trimmedValue.length) {
     return true;
+  } // Ensure format for FM changegroups is correct DDHHmm
+
+
+  if (trimmedValue.length > 6 && trimmedValueChange === 'FM' || trimmedValue.length < 9 && trimmedValueChange !== 'FM') {
+    return invalidChangeValidInterFieldMessage;
+  } // Ensure BECMG changegroup has duration of 1,2,3,4 hours
+
+
+  if (trimmedValueChange === 'BECMG') {
+    var tafStartMoment = moment.utc(tafStart);
+    var tafEndMoment = moment.utc(tafEnd);
+    var startEnd = trimmedValue.split('/');
+    var format = trimmedValue.indexOf('/') === -1 ? FORMAT_DAYS_HOURS_MINUTS : FORMAT_DAYS_HOURS; // Validate start time
+
+    var startSections = getSections(startEnd[0], format);
+    var startTimestamp = getValidityTimeStamp('start', startSections, tafStartMoment, tafEndMoment);
+    var endSections = getSections(startEnd[1], FORMAT_DAYS_HOURS);
+    var endTimestamp = getValidityTimeStamp('end', endSections, tafStartMoment, tafEndMoment);
+    var timeDifference = endTimestamp.diff(startTimestamp, 'hours');
+
+    if (![1, 2, 3, 4].includes(timeDifference)) {
+      return invalidBECMGDurationValidInterFieldMessage;
+    }
+  }
+
+  return true;
+}; // validate previous changeGroup
+
+var validProbChangeOrder = ['FM', 'BECMG', 'TEMPO', 'PROB40', 'PROB30', 'PROB40 TEMPO', 'PROB30 TEMPO'];
+var invalidPreviousChangeGroupIsBeforeMessage = 'Valid time should be after previous valid time';
+var invalidPreviousChangeGroupOrderMessage = "When valid times are equal, the change/probability order should be: ".concat(validProbChangeOrder.join(', '));
+var invalidPreviousChangeGroupHasSameValue = "When valid times are equal, probability/change can't have the same value as previous row value";
+var validatePreviousChangeGroup = function validatePreviousChangeGroup(currentChangeGroup, nextChangeGroup, tafStart, tafEnd) {
+  // extract the needed values from changeGroups
+  var valid = currentChangeGroup.valid,
+      _currentChangeGroup$c = currentChangeGroup.change,
+      change = _currentChangeGroup$c === void 0 ? '' : _currentChangeGroup$c,
+      _currentChangeGroup$p = currentChangeGroup.probability,
+      probability = _currentChangeGroup$p === void 0 ? '' : _currentChangeGroup$p;
+  var previousValid = nextChangeGroup.valid,
+      _nextChangeGroup$chan = nextChangeGroup.change,
+      previousChange = _nextChangeGroup$chan === void 0 ? '' : _nextChangeGroup$chan,
+      _nextChangeGroup$prob = nextChangeGroup.probability,
+      previousProbability = _nextChangeGroup$prob === void 0 ? '' : _nextChangeGroup$prob; // get the parsed values
+
+  var validValue = parseValidToObject(valid, tafStart, tafEnd);
+  var previousValidValue = parseValidToObject(previousValid, tafStart, tafEnd);
+
+  if (!validValue || !previousValidValue || !change.length && !probability.length) {
+    return true;
+  } // validate is valid time before
+
+
+  var currentStartTime = moment(validValue.start);
+  var previousRowStartTime = moment(previousValidValue.start);
+
+  if (currentStartTime.isBefore(previousRowStartTime)) {
+    return invalidPreviousChangeGroupIsBeforeMessage;
+  } // validate same valid time
+
+
+  if (currentStartTime.isSame(previousRowStartTime)) {
+    // validate change/probability order
+    var currentProbChangeValue = "".concat(probability, " ").concat(change).trim();
+    var previousProbChangeValue = "".concat(previousProbability, " ").concat(previousChange).trim();
+
+    if (validProbChangeOrder.indexOf(currentProbChangeValue) < validProbChangeOrder.indexOf(previousProbChangeValue)) {
+      return invalidPreviousChangeGroupOrderMessage;
+    } // validate same valid + change/probability value
+
+
+    if (currentProbChangeValue === previousProbChangeValue) {
+      return invalidPreviousChangeGroupHasSameValue;
+    }
   }
 
-  var isValid = trimmedValue.length < 9 && trimmedValueChange === 'FM' || trimmedValue.length > 6 && trimmedValueChange !== 'FM';
-  return isValid ? true : invalidChangeValidInterFieldMessage;
+  return true;
 };
 
 /* *
@@ -388,11 +537,10 @@ var validateValidChangeGroupInterField = function validateValidChangeGroupInterF
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-
 var prependZeroes = function prependZeroes(value, totalDigits) {
   var valueAsString = value.toString();
-  return __spreadArray([], __read(Array(totalDigits - valueAsString.length))).reduce(function (newVal) {
-    return "0" + newVal;
+  return _toConsumableArray(Array(totalDigits - valueAsString.length)).reduce(function (newVal) {
+    return "0".concat(newVal);
   }, valueAsString);
 };
 
@@ -404,9 +552,7 @@ var config$1 = [{
   size: 1
 }];
 var configAsObject$1 = Object.assign(config$1).reduce(function (list, item) {
-  var _a;
-
-  return __assign(__assign({}, list), (_a = {}, _a[item.key] = item, _a));
+  return Object.assign(Object.assign({}, list), _defineProperty({}, item.key, item));
 }, {}); // formatters
 // if passed true - visibility is CAVOK, if passed a number - prepend zeroes to size 4
 
@@ -943,22 +1089,59 @@ var WeatherPhenomena;
 })(WeatherPhenomena || (WeatherPhenomena = {}));
 
 var invalidWeatherMessage = 'Invalid weather input, expected NSW or a valid weather code';
+var invalidWeatherCodeMessage = 'Invalid weather input, invalid weather code';
 var invalidWeatherNSWMessage = 'Invalid weather input, NSW is not allowed in the baseforecast and can only be used in the first weather group';
 var invalidWeatherWithPreviousEmptyWeather = 'Invalid weather input, value is not allowed when previous weather group(s) are empty';
 var invalidWeatherNonUniqueValue = 'Invalid weather input, weather groups must be unique';
-var invalidWeatherNonEmptyNSWGroups = 'Invalid weather input, when NSW is used, other weather groups must be empty'; // validations
+var invalidWeatherNonEmptyNSWGroups = 'Invalid weather input, when NSW is used, other weather groups must be empty';
+var invalidWeatherCAVOKMessage = 'Invalid weather input, when CAVOK is used, weather groups must be empty';
+var invalidWeatherVisibilityBelow5000 = 'Invalid weather input, weather codes FU, DU, HZ, DRDU and BLDU need to be combined with a visibility of 5000m or less';
+var invalidWeatherBRVisibility = 'Invalid weather input, weather code BR needs to be combined with a visibility between 1000 and 5000m';
+var invalidWeatherFGVisibility = 'Invalid weather input, weather code FG needs to be combined with a visibility below 1000m'; // validations
+
+var WeatherVisibilityBelow5000 = [WeatherPhenomena.FU, WeatherPhenomena.DU, WeatherPhenomena.HZ, WeatherPhenomena.DRDU, WeatherPhenomena.BLDU];
+var validateWeatherField = function validateWeatherField(value, visibilityValue) {
+  var NSWAllowed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var trimmedValue = value.trim(); // if empty, validate as true
+
+  if (trimmedValue === '') {
+    return true;
+  } // In case of NSW - validate if allowed
+
+
+  if (trimmedValue === 'NSW' && !NSWAllowed) {
+    return invalidWeatherNSWMessage;
+  } // Check if cavOK - then weather group should be empty
+
 
-var validateWeatherField = function validateWeatherField(value, NSWAllowed) {
-  if (NSWAllowed === void 0) {
-    NSWAllowed = true;
+  if (trimmedValue && visibilityValue === 'CAVOK') {
+    return invalidWeatherCAVOKMessage;
+  } // Validate if entered weather is one of the allowed weather phenomena
+
+
+  if (!(trimmedValue in WeatherPhenomena) && trimmedValue !== 'NSW') {
+    return NSWAllowed ? invalidWeatherMessage : invalidWeatherCodeMessage;
+  } // Validate the weather code in combination with the visibility range
+
+
+  var visibilityRange = parseInt(visibilityValue, 10);
+
+  if (WeatherVisibilityBelow5000.includes(trimmedValue) && visibilityRange > 5000) {
+    return invalidWeatherVisibilityBelow5000;
   }
 
-  var trimmedValue = value.trim();
-  var isValid = trimmedValue === '' || trimmedValue in WeatherPhenomena || NSWAllowed && trimmedValue === 'NSW';
-  var errorMessage = NSWAllowed ? invalidWeatherMessage : invalidWeatherNSWMessage;
-  return isValid ? true : errorMessage;
+  if (trimmedValue === WeatherPhenomena.BR && (visibilityRange < 1000 || visibilityRange > 5000)) {
+    return invalidWeatherBRVisibility;
+  }
+
+  if (trimmedValue === WeatherPhenomena.FG && visibilityRange >= 1000) {
+    return invalidWeatherFGVisibility;
+  } // Everything validated ok - return true
+
+
+  return true;
 };
-var validateSecondWeatherField = function validateSecondWeatherField(weather1Value, weather2Value) {
+var validateSecondWeatherField = function validateSecondWeatherField(weather1Value, weather2Value, visibilityValue) {
   var trimmedWeather2Value = weather2Value.trim(); // Field can be left empty
 
   if (!trimmedWeather2Value.length) {
@@ -981,9 +1164,9 @@ var validateSecondWeatherField = function validateSecondWeatherField(weather1Val
     return invalidWeatherNonUniqueValue;
   }
 
-  return validateWeatherField(weather2Value, false);
+  return validateWeatherField(weather2Value, visibilityValue, false);
 };
-var validateThirdWeatherField = function validateThirdWeatherField(weather1Value, weather2Value, weather3Value) {
+var validateThirdWeatherField = function validateThirdWeatherField(weather1Value, weather2Value, weather3Value, visibilityValue) {
   var trimmedWeather3Value = weather3Value.trim(); // Field can be left empty
 
   if (!trimmedWeather3Value.length) {
@@ -1007,25 +1190,23 @@ var validateThirdWeatherField = function validateThirdWeatherField(weather1Value
     return invalidWeatherNonUniqueValue;
   }
 
-  return validateWeatherField(weather3Value, false);
+  return validateWeatherField(weather3Value, visibilityValue, false);
 }; // parser
 // TODO: value type = Weather, but couldn't get it to work properly https://gitlab.com/opengeoweb/opengeoweb/-/issues/119
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 
 function parseWeatherToObject(value) {
   var trimmedWeather = Object.keys(value).reduce(function (obj, key) {
-    var _a; // only parse it if it has a value
-
-
+    // only parse it if it has a value
     if (value[key] && value[key].trim()) {
-      return __assign(__assign({}, obj), (_a = {}, _a[key] = obj[key].trim(), _a));
+      return Object.assign(Object.assign({}, obj), _defineProperty({}, key, obj[key].trim()));
     } // if it doesn't have a value, remove it from the list
 
 
-    var _b = obj,
-        _c = key;
-        _b[_c];
-        var rest = __rest(_b, [_typeof(_c) === "symbol" ? _c : _c + ""]);
+    var _a = obj,
+        _b = key;
+        _a[_b];
+        var rest = __rest(_a, [_typeof(_b) === "symbol" ? _b : _b + ""]);
 
     return rest;
   }, value);
@@ -1050,9 +1231,7 @@ var config = [{
   size: 2
 }];
 var configAsObject = Object.assign(config).reduce(function (list, item) {
-  var _a;
-
-  return __assign(__assign({}, list), (_a = {}, _a[item.key] = item, _a));
+  return Object.assign(Object.assign({}, list), _defineProperty({}, item.key, item));
 }, {}); // wind formatters:
 
 var formatWindValues = function formatWindValues(key, value) {
@@ -1073,22 +1252,22 @@ var formatWindValues = function formatWindValues(key, value) {
           return 'P99';
         }
 
-        var size = configAsObject[key].size;
-        return prependZeroes(value, size);
+        var _size = configAsObject[key].size;
+        return prependZeroes(value, _size);
       }
 
     case 'gust':
       {
         // if there is a P as first character - return P99
-        var valueAsString = value.toString();
+        var _valueAsString = value.toString();
 
-        if (valueAsString.length && valueAsString[0] === 'P') {
+        if (_valueAsString.length && _valueAsString[0] === 'P') {
           return 'GP99';
         }
 
-        var size = configAsObject[key].size;
-        var newValue = prependZeroes(value, size);
-        return "G" + newValue.toString();
+        var _size2 = configAsObject[key].size;
+        var newValue = prependZeroes(value, _size2);
+        return "G".concat(newValue.toString());
       }
 
     case 'unit':
@@ -1115,11 +1294,8 @@ var formatWindToString = function formatWindToString(value) {
   }, '');
 };
 
-var extractValidateWindSections = function extractValidateWindSections(value, validation) {
-  if (validation === void 0) {
-    validation = false;
-  }
-
+var extractValidateWindSections = function extractValidateWindSections(value) {
+  var validation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return config.reduce(function (obj, item) {
     var key = item.key,
         size = item.size;
@@ -1136,14 +1312,14 @@ var extractValidateWindSections = function extractValidateWindSections(value, va
             var valDirection = validateDirection(direction); // If validated not ok - add validation feedback
 
             var validations = valDirection !== true ? obj.validations.concat(valDirection) : obj.validations;
-            return __assign(__assign({}, obj), {
+            return Object.assign(Object.assign({}, obj), {
               direction: direction,
               remainder: remainder,
               validations: validations
             });
           }
 
-          return __assign(__assign({}, obj), {
+          return Object.assign(Object.assign({}, obj), {
             direction: direction,
             remainder: remainder
           });
@@ -1156,22 +1332,25 @@ var extractValidateWindSections = function extractValidateWindSections(value, va
 
           var dirLength = obj.remainder.length && obj.remainder[0] === 'P' ? maxSize : minSize;
           var speed = obj.remainder.slice(0, dirLength);
-          var remainder = obj.remainder.substring(dirLength); // Validate speed
+
+          var _remainder = obj.remainder.substring(dirLength); // Validate speed
+
 
           if (validation) {
             var valSpeed = validateSpeed(speed); // If validated not ok - add validation feedback
 
-            var validations = valSpeed !== true ? obj.validations.concat(valSpeed) : obj.validations;
-            return __assign(__assign({}, obj), {
+            var _validations = valSpeed !== true ? obj.validations.concat(valSpeed) : obj.validations;
+
+            return Object.assign(Object.assign({}, obj), {
               speed: speed,
-              remainder: remainder,
-              validations: validations
+              remainder: _remainder,
+              validations: _validations
             });
           }
 
-          return __assign(__assign({}, obj), {
+          return Object.assign(Object.assign({}, obj), {
             speed: speed,
-            remainder: remainder
+            remainder: _remainder
           });
         }
 
@@ -1179,30 +1358,35 @@ var extractValidateWindSections = function extractValidateWindSections(value, va
         {
           // Only parse gust if still chars left and these start with G
           if (obj.remainder.length && obj.remainder !== 'KT' && obj.remainder[0] === 'G') {
-            var maxSize = item.maxSize,
-                minSize = item.minSize; // Remove G
+            var _maxSize = item.maxSize,
+                _minSize = item.minSize; // Remove G
 
             var rest = obj.remainder.substring(1); // In case the first char of the gust is a P - it's 3 chars long, otherwise 2
 
-            var dirLength = rest[0] === 'P' ? maxSize : minSize;
-            var gust = rest.slice(0, dirLength);
-            var remainder = rest.substring(dirLength); // Validate gusts
+            var _dirLength = rest[0] === 'P' ? _maxSize : _minSize;
+
+            var gust = rest.slice(0, _dirLength);
+
+            var _remainder2 = rest.substring(_dirLength); // Validate gusts
+
 
             if (validation) {
               var valGust = validateGust(gust); // If validated not ok - add validation feedback
 
               valGust !== true && returnObj.validations.push(valGust);
-              var validations = valGust !== true ? obj.validations.concat(valGust) : obj.validations;
-              return __assign(__assign({}, obj), {
+
+              var _validations2 = valGust !== true ? obj.validations.concat(valGust) : obj.validations;
+
+              return Object.assign(Object.assign({}, obj), {
                 gust: gust,
-                remainder: remainder,
-                validations: validations
+                remainder: _remainder2,
+                validations: _validations2
               });
             }
 
-            return __assign(__assign({}, obj), {
+            return Object.assign(Object.assign({}, obj), {
               gust: gust,
-              remainder: remainder
+              remainder: _remainder2
             });
           }
 
@@ -1214,9 +1398,11 @@ var extractValidateWindSections = function extractValidateWindSections(value, va
           if (obj.remainder.length) {
             // Validate units
             var valUnits = validateUnit(returnObj.remainder);
-            var validations = valUnits !== true ? obj.validations.concat(valUnits) : obj.validations;
-            return __assign(__assign({}, obj), {
-              validations: validations
+
+            var _validations3 = valUnits !== true ? obj.validations.concat(valUnits) : obj.validations;
+
+            return Object.assign(Object.assign({}, obj), {
+              validations: _validations3
             });
           }
 
@@ -1243,8 +1429,7 @@ var parseWindToObject = function parseWindToObject(value) {
 
   var windSections = extractValidateWindSections(trimmedValue, false);
   var gust = windSections.gust === 'P99' || windSections.gust === '' ? windSections.gust : parseInt(windSections.gust, 10);
-
-  var windObject = __assign(__assign({
+  var windObject = Object.assign(Object.assign({
     direction: windSections.direction === 'VRB' ? windSections.direction : parseInt(windSections.direction, 10),
     speed: windSections.speed === 'P99' ? windSections.speed : parseInt(windSections.speed, 10)
   }, gust !== '' ? {
@@ -1252,7 +1437,6 @@ var parseWindToObject = function parseWindToObject(value) {
   } : {}), {
     unit: windSections.unit
   });
-
   return windObject;
 }; // messages
 
@@ -1351,7 +1535,7 @@ var validateWindField = function validateWindField(value) {
 
 var formatSingleCloud = function formatSingleCloud(value) {
   if (!value) return null;
-  return value.type ? "" + value.coverage + prependZeroes(value.height, 3) + value.type : "" + value.coverage + prependZeroes(value.height, 3);
+  return value.type ? "".concat(value.coverage).concat(prependZeroes(value.height, 3)).concat(value.type) : "".concat(value.coverage).concat(prependZeroes(value.height, 3));
 }; // TODO: clouds type = Clouds, but couldn't get it to work properly https://gitlab.com/opengeoweb/opengeoweb/-/issues/119
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 
@@ -1360,30 +1544,28 @@ var formatCloudsToString = function formatCloudsToString(clouds) {
   if (!clouds) return null;
   return Object.keys(clouds).reduce(function (list, key) {
     // only format it if it has a value
-    var _a, _b, _c, _d;
-
     if (clouds[key]) {
       switch (key) {
         case 'cloud1':
           {
             if (clouds[key].verticalVisibility !== undefined) {
               // Format Vertical Visibility
-              return __assign(__assign({}, list), (_a = {}, _a[key] = "VV" + prependZeroes(clouds[key].verticalVisibility, 3), _a));
+              return Object.assign(Object.assign({}, list), _defineProperty({}, key, "VV".concat(prependZeroes(clouds[key].verticalVisibility, 3))));
             }
 
             if (clouds[key].coverage) {
               // Format Cloud
-              return __assign(__assign({}, list), (_b = {}, _b[key] = formatSingleCloud(clouds[key]), _b));
+              return Object.assign(Object.assign({}, list), _defineProperty({}, key, formatSingleCloud(clouds[key])));
             } // Format No Significant Clouds
 
 
-            return __assign(__assign({}, list), (_c = {}, _c[key] = clouds[key], _c));
+            return Object.assign(Object.assign({}, list), _defineProperty({}, key, clouds[key]));
           }
 
         default:
           {
             // Other cloud keys can only contain a cloud
-            return __assign(__assign({}, list), (_d = {}, _d[key] = formatSingleCloud(clouds[key]), _d));
+            return Object.assign(Object.assign({}, list), _defineProperty({}, key, formatSingleCloud(clouds[key])));
           }
       }
     }
@@ -1396,7 +1578,7 @@ var parseSingleCloud = function parseSingleCloud(value) {
   if (!value) return null;
   var trimmedCloud = value.trim();
   var cloudType = trimmedCloud.substr(6, 3);
-  return __assign({
+  return Object.assign({
     coverage: trimmedCloud.substr(0, 3),
     height: parseInt(trimmedCloud.substr(3, 3), 10)
   }, cloudType && {
@@ -1409,42 +1591,40 @@ var parseSingleCloud = function parseSingleCloud(value) {
 var parseCloudsToObject = function parseCloudsToObject(clouds) {
   if (!clouds) return null;
   return Object.keys(clouds).reduce(function (list, key) {
-    var _a, _b, _c, _d; // only parse it if it has a value
-
-
+    // only parse it if it has a value
     if (clouds[key] && clouds[key].trim()) {
       switch (key) {
         case 'cloud1':
           {
             if (isVerticalVisibility(clouds[key])) {
               // Parse Vertical Visibility
-              return __assign(__assign({}, list), (_a = {}, _a[key] = {
+              return Object.assign(Object.assign({}, list), _defineProperty({}, key, {
                 verticalVisibility: parseInt(clouds[key].substr(2, 3), 10)
-              }, _a));
+              }));
             }
 
             if (clouds[key] === 'NSC') {
               // Parse No Significant Clouds
-              return __assign(__assign({}, list), (_b = {}, _b[key] = clouds[key], _b));
+              return Object.assign(Object.assign({}, list), _defineProperty({}, key, clouds[key]));
             } // Parse Cloud
 
 
-            return __assign(__assign({}, list), (_c = {}, _c[key] = parseSingleCloud(clouds[key]), _c));
+            return Object.assign(Object.assign({}, list), _defineProperty({}, key, parseSingleCloud(clouds[key])));
           }
 
         default:
           {
             // Other cloud keys can only contain a cloud
-            return __assign(__assign({}, list), (_d = {}, _d[key] = parseSingleCloud(clouds[key]), _d));
+            return Object.assign(Object.assign({}, list), _defineProperty({}, key, parseSingleCloud(clouds[key])));
           }
       }
     } // if it doesn't have a value, remove it from the list
 
 
-    var _e = list,
-        _f = key;
-        _e[_f];
-        var rest = __rest(_e, [_typeof(_f) === "symbol" ? _f : _f + ""]);
+    var _a = list,
+        _b = key;
+        _a[_b];
+        var rest = __rest(_a, [_typeof(_b) === "symbol" ? _b : _b + ""]);
 
     return rest;
   }, clouds);
@@ -1465,7 +1645,8 @@ var invalidCloud3CoverageTypeCombinationMessage = 'Invalid cloud input, cloud ty
 var invalidCloudWithVerticalVisibilityMessage = 'Invalid cloud input, third or fourth cloud group is not allowed when Vertical Visibility is given';
 var invalidCloudWithPreviousEmptyCloud = 'Invalid cloud input, value is not allowed when previous cloud group is empty';
 var invalidCloudWithNSCMessage = 'Invalid cloud input, other cloud groups are not allowed when No Significant Clouds is given';
-var invalidCloud4WithPreviousType = 'Invalid cloud input, value is not allowed when previous cloud group has a type'; // validations
+var invalidCloud4WithPreviousType = 'Invalid cloud input, value is not allowed when previous cloud group has a type';
+var invalidCloudCAVOKMessage = 'Invalid cloud input, when CAVOK is used, cloud groups must be empty'; // validations
 
 var isLengthValid = function isLengthValid(value) {
   var onlyDigitsOrSpecificLetters = RegExp(/^[0-9FEWSCTBKNOVU]+$/);
@@ -1536,10 +1717,10 @@ var isVerticalVisibilityValid = function isVerticalVisibilityValid(value) {
   return true;
 };
 
-var sharedCloudValidations = function sharedCloudValidations(_a) {
-  var value = _a.value,
-      _b = _a.canBeNSC,
-      canBeNSC = _b === void 0 ? false : _b;
+var sharedCloudValidations = function sharedCloudValidations(_ref) {
+  var value = _ref.value,
+      _ref$canBeNSC = _ref.canBeNSC,
+      canBeNSC = _ref$canBeNSC === void 0 ? false : _ref$canBeNSC;
   var errorMessages = []; // Validate length and ensure it doesn't contain any invalid characters
 
   if (!isLengthValid(value)) {
@@ -1582,11 +1763,15 @@ var sharedCloudValidations = function sharedCloudValidations(_a) {
   };
 };
 
-var validateFirstCloud = function validateFirstCloud(value) {
+var validateFirstCloud = function validateFirstCloud(value, visibilityValue) {
   var trimmedValue = value.trim(); // Field can be left empty
 
   if (!trimmedValue.length) {
     return true;
+  }
+
+  if (trimmedValue && visibilityValue === 'CAVOK') {
+    return invalidCloudCAVOKMessage;
   } // Check for No Signicant Clouds
 
 
@@ -1611,14 +1796,16 @@ var validateFirstCloud = function validateFirstCloud(value) {
     return true;
   }
 
-  var errorMessages = sharedCloudValidations({
+  var _sharedCloudValidatio = sharedCloudValidations({
     value: trimmedValue,
     canBeNSC: true
-  }).errorMessages; // Return first error if any
+  }),
+      errorMessages = _sharedCloudValidatio.errorMessages; // Return first error if any
+
 
   return errorMessages.length ? errorMessages[0] : true;
 };
-var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCloudValue) {
+var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCloudValue, visibilityValue) {
   var trimmedValue = secondCloudValue.trim(); // Field can be left empty
 
   if (!trimmedValue.length) {
@@ -1626,13 +1813,13 @@ var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCl
   } // Generic validations
 
 
-  var _a = sharedCloudValidations({
+  var _sharedCloudValidatio2 = sharedCloudValidations({
     value: trimmedValue
   }),
-      coverage = _a.coverage,
-      height = _a.height,
-      type = _a.type,
-      errorMessages = _a.errorMessages; // Return first error if any
+      coverage = _sharedCloudValidatio2.coverage,
+      height = _sharedCloudValidatio2.height,
+      type = _sharedCloudValidatio2.type,
+      errorMessages = _sharedCloudValidatio2.errorMessages; // Return first error if any
 
 
   if (errorMessages.length) {
@@ -1646,7 +1833,7 @@ var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCl
   } // If Cloud1 is not valid, skip further validation of Cloud2
 
 
-  if (validateFirstCloud(firstCloudValue) !== true) {
+  if (validateFirstCloud(firstCloudValue, visibilityValue) !== true) {
     return true;
   } // If Cloud1 is NSC, Cloud2 has to be empty
 
@@ -1676,7 +1863,7 @@ var validateSecondCloud = function validateSecondCloud(firstCloudValue, secondCl
 
   return true;
 };
-var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondCloudValue, thirdCloudValue) {
+var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondCloudValue, thirdCloudValue, visibilityValue) {
   var trimmedValue = thirdCloudValue.trim(); // Field can be left empty
 
   if (!trimmedValue.length) {
@@ -1684,13 +1871,13 @@ var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondClou
   } // Generic validations
 
 
-  var _a = sharedCloudValidations({
+  var _sharedCloudValidatio3 = sharedCloudValidations({
     value: trimmedValue
   }),
-      coverage = _a.coverage,
-      height = _a.height,
-      type = _a.type,
-      errorMessages = _a.errorMessages; // Return generic errors if any
+      coverage = _sharedCloudValidatio3.coverage,
+      height = _sharedCloudValidatio3.height,
+      type = _sharedCloudValidatio3.type,
+      errorMessages = _sharedCloudValidatio3.errorMessages; // Return generic errors if any
 
 
   if (errorMessages.length) {
@@ -1704,7 +1891,7 @@ var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondClou
   } // If Cloud1 is not valid, skip further validation of Cloud3
 
 
-  if (validateFirstCloud(firstCloudValue) !== true) {
+  if (validateFirstCloud(firstCloudValue, visibilityValue) !== true) {
     return true;
   } // If Cloud1 is empty Cloud3 should be empty
 
@@ -1724,7 +1911,7 @@ var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondClou
   } // If Cloud2 is not valid, skip further validation of Cloud3
 
 
-  if (validateSecondCloud(firstCloudValue, secondCloudValue) !== true) {
+  if (validateSecondCloud(firstCloudValue, secondCloudValue, visibilityValue) !== true) {
     return true;
   } // If Cloud2 is empty Cloud3 should be empty
 
@@ -1742,7 +1929,7 @@ var validateThirdCloud = function validateThirdCloud(firstCloudValue, secondClou
 
   return true;
 };
-var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCloudValue, thirdCloudValue, fourthCloudValue) {
+var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCloudValue, thirdCloudValue, fourthCloudValue, visibilityValue) {
   var trimmedValue = fourthCloudValue.trim(); // Field can be left empty
 
   if (!trimmedValue.length) {
@@ -1750,12 +1937,12 @@ var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCl
   } // Generic validations
 
 
-  var _a = sharedCloudValidations({
+  var _sharedCloudValidatio4 = sharedCloudValidations({
     value: trimmedValue
   }),
-      height = _a.height,
-      type = _a.type,
-      errorMessages = _a.errorMessages; // Return generic errors if any
+      height = _sharedCloudValidatio4.height,
+      type = _sharedCloudValidatio4.type,
+      errorMessages = _sharedCloudValidatio4.errorMessages; // Return generic errors if any
 
 
   if (errorMessages.length) {
@@ -1769,7 +1956,7 @@ var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCl
   } // If Cloud1 is not valid, skip further validation of Cloud4
 
 
-  if (validateFirstCloud(firstCloudValue) !== true) {
+  if (validateFirstCloud(firstCloudValue, visibilityValue) !== true) {
     return true;
   } // If Cloud1 contains Vertical Visibility then Cloud4 should be empty
 
@@ -1789,7 +1976,7 @@ var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCl
   } // If Cloud3 is not valid, skip further validation of Cloud4
 
 
-  if (validateThirdCloud(firstCloudValue, secondCloudValue, thirdCloudValue) !== true) {
+  if (validateThirdCloud(firstCloudValue, secondCloudValue, thirdCloudValue, visibilityValue) !== true) {
     return true;
   } // If Cloud3 contains a type, Cloud4 should be empty
 
@@ -1812,21 +1999,21 @@ var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCl
 };
 
 var formatIssueTime = function formatIssueTime(issueDate) {
-  return issueDate ? moment(issueDate).utc().format('DDHHmm') + "Z" : 'Not issued';
+  return issueDate ? "".concat(moment(issueDate).utc().format('DDHHmm'), "Z") : 'Not issued';
 };
 function formatFormValues(row) {
   return Object.keys(row).reduce(function (list, key) {
     switch (key) {
       case 'valid':
         {
-          return __assign(__assign({}, list), {
+          return Object.assign(Object.assign({}, list), {
             valid: formatValidToString(list[key])
           });
         }
 
       case 'wind':
         {
-          return __assign(__assign({}, list), {
+          return Object.assign(Object.assign({}, list), {
             wind: formatWindToString(list[key])
           });
         }
@@ -1834,7 +2021,7 @@ function formatFormValues(row) {
       case 'visibility':
         {
           // Assume if visibility field set - no cavOK
-          return __assign(__assign({}, list), {
+          return Object.assign(Object.assign({}, list), {
             visibility: formatVisibilityToString(list[key])
           });
         }
@@ -1842,14 +2029,14 @@ function formatFormValues(row) {
       case 'cavOK':
         {
           // Assume if cavOK field set to true - no visibility field, otherwise return the original list containing the visibility
-          return list[key] ? __assign(__assign({}, list), {
+          return list[key] ? Object.assign(Object.assign({}, list), {
             visibility: formatVisibilityToString(list[key])
           }) : list;
         }
 
       case 'cloud':
         {
-          return __assign(__assign({}, list), {
+          return Object.assign(Object.assign({}, list), {
             cloud: formatCloudsToString(list[key])
           });
         }
@@ -1869,33 +2056,33 @@ function reduceRowValues(row, tafStart, tafEnd) {
     switch (key) {
       case 'valid':
         {
-          return __assign(__assign({}, list), {
+          return Object.assign(Object.assign({}, list), {
             valid: parseValidToObject(list[key], tafStart, tafEnd)
           });
         }
 
       case 'wind':
         {
-          return __assign(__assign({}, list), {
+          return Object.assign(Object.assign({}, list), {
             wind: parseWindToObject(list[key])
           });
         }
 
       case 'visibility':
         {
-          return __assign(__assign({}, list), parseVisibilityToObject(list[key]));
+          return Object.assign(Object.assign({}, list), parseVisibilityToObject(list[key]));
         }
 
       case 'weather':
         {
-          return __assign(__assign({}, list), {
+          return Object.assign(Object.assign({}, list), {
             weather: parseWeatherToObject(list[key])
           });
         }
 
       case 'cloud':
         {
-          return __assign(__assign({}, list), {
+          return Object.assign(Object.assign({}, list), {
             cloud: parseCloudsToObject(list[key])
           });
         }
@@ -1904,7 +2091,7 @@ function reduceRowValues(row, tafStart, tafEnd) {
       case 'change':
       case 'probability':
         {
-          return __assign(__assign({}, list), (_a = {}, _a[key] = list[key].trim(), _a));
+          return Object.assign(Object.assign({}, list), _defineProperty({}, key, (_a = list[key]) === null || _a === void 0 ? void 0 : _a.trim()));
         }
 
       default:
@@ -1915,9 +2102,7 @@ function reduceRowValues(row, tafStart, tafEnd) {
   }, row);
 }
 
-var parseFormValues = function parseFormValues( // TODO: remove next line - couldn't get the typing to work! https://gitlab.com/opengeoweb/geoweb-assets/-/issues/1119
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-row, tafStart, tafEnd) {
+function parseFormValues(row, tafStart, tafEnd) {
   var reducedRow = reduceRowValues(row, tafStart, tafEnd);
   return Object.keys(reducedRow).reduce(function (list, key) {
     switch (key) {
@@ -1939,9 +2124,9 @@ row, tafStart, tafEnd) {
           // If cloud is undefined or empty, remove it from the list
           if (!reducedRow.cloud || Object.keys(reducedRow.cloud).length === 0) {
             list.cloud;
-                var rest = __rest(list, ["cloud"]);
+                var _rest = __rest(list, ["cloud"]);
 
-            return rest;
+            return _rest;
           }
 
           return list;
@@ -1952,9 +2137,9 @@ row, tafStart, tafEnd) {
           // If empty, remove it from the list
           if (!reducedRow.weather.weather1) {
             list.weather;
-                var rest = __rest(list, ["weather"]);
+                var _rest2 = __rest(list, ["weather"]);
 
-            return rest;
+            return _rest2;
           }
 
           return list;
@@ -1963,11 +2148,11 @@ row, tafStart, tafEnd) {
       case 'wind':
         {
           // If empty, remove it from the list
-          if (!reducedRow.wind.direction && isNaN(reducedRow.wind.direction)) {
+          if (!reducedRow.wind.direction && isNaN(Number(reducedRow.wind.direction))) {
             list.wind;
-                var rest = __rest(list, ["wind"]);
+                var _rest3 = __rest(list, ["wind"]);
 
-            return rest;
+            return _rest3;
           }
 
           return list;
@@ -1978,9 +2163,9 @@ row, tafStart, tafEnd) {
           // If empty, remove it from the list
           if (!reducedRow.visibility.range && isNaN(reducedRow.visibility.range)) {
             list.visibility;
-                var rest = __rest(list, ["visibility"]);
+                var _rest4 = __rest(list, ["visibility"]);
 
-            return rest;
+            return _rest4;
           }
 
           return list;
@@ -1988,16 +2173,28 @@ row, tafStart, tafEnd) {
 
       case 'change':
       case 'probability':
+        // If empty, remove it from the list
+        if (!reducedRow[key]) {
+          var _a = list,
+              _b = key;
+              _a[_b];
+              var _rest5 = __rest(_a, [_typeof(_b) === "symbol" ? _b : _b + ""]);
+
+          return _rest5;
+        }
+
+        return list;
+
       case 'valid':
         {
           // If empty, remove it from the list
           if (!reducedRow[key]) {
-            var _a = list,
-                _b = key;
-                _a[_b];
-                var rest = __rest(_a, [_typeof(_b) === "symbol" ? _b : _b + ""]);
+            var _c = list,
+                _d = key;
+                _c[_d];
+                var _rest6 = __rest(_c, [_typeof(_d) === "symbol" ? _d : _d + ""]);
 
-            return rest;
+            return _rest6;
           }
 
           return list;
@@ -2009,9 +2206,7 @@ row, tafStart, tafEnd) {
         }
     }
   }, reducedRow);
-}; // TODO: create a type for formData https://gitlab.com/opengeoweb/opengeoweb/-/issues/137
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-
+}
 var convertTafValuesToObject = function convertTafValuesToObject(formData) {
   formData.IS_DRAFT;
       var productToPost = __rest(formData, ["IS_DRAFT"]);
@@ -2025,12 +2220,10 @@ var convertTafValuesToObject = function convertTafValuesToObject(formData) {
   .filter(function (value) {
     return Object.keys(value).length;
   });
-
-  var parsedFormValues = __assign(__assign({}, productToPost), {
+  var parsedFormValues = Object.assign(Object.assign({}, productToPost), {
     baseForecast: parseFormValues(productToPost.baseForecast, tafStart, tafEnd),
     changeGroups: parsedChangeGroups
   });
-
   return Object.keys(parsedFormValues).reduce(function (list, key) {
     switch (key) {
       case 'changeGroups':
@@ -2056,9 +2249,9 @@ var convertTafValuesToObject = function convertTafValuesToObject(formData) {
             var _a = list,
                 _b = key;
                 _a[_b];
-                var rest = __rest(_a, [_typeof(_b) === "symbol" ? _b : _b + ""]);
+                var _rest7 = __rest(_a, [_typeof(_b) === "symbol" ? _b : _b + ""]);
 
-            return rest;
+            return _rest7;
           }
 
           return list;
@@ -2070,58 +2263,65 @@ var convertTafValuesToObject = function convertTafValuesToObject(formData) {
         }
     }
   }, parsedFormValues);
-};
-var noTAC = 'Missing data: no TAC can be generated'; // Ensure we have enough data to retrieve a TAC - we only need to check for wind and visibility/ cavok as those are the only ones required in all cases
+}; // Ensure we have enough data to retrieve a TAC - we only need to check for wind and visibility/ cavok as those are the only ones required in all cases
 
 var shouldRetrieveTAC = function shouldRetrieveTAC(product) {
-  if (product && product.baseForecast && product.baseForecast.wind && product.baseForecast.wind.speed && product.baseForecast.wind.speed !== '' && (product.baseForecast.visibility && product.baseForecast.visibility.range && product.baseForecast.visibility.range !== '' || product.baseForecast.cavOK)) {
+  if (product && product.baseForecast && product.baseForecast.wind && 'speed' in product.baseForecast.wind && product.baseForecast.wind.speed !== '' && (product.baseForecast.visibility && 'range' in product.baseForecast.visibility && product.baseForecast.visibility.range !== '' || product.baseForecast.cavOK)) {
     return true;
   }
 
   return false;
 };
-
 var getFieldNames = function getFieldNames(isChangeGroup, index) {
-  var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
-  return __assign(__assign(__assign({}, !isChangeGroup && {
+  var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[".concat(index, "]");
+  return Object.assign(Object.assign(Object.assign({}, !isChangeGroup && {
     messageType: 'messageType',
     location: 'location',
     issueDate: 'issueDate'
   }), isChangeGroup && {
-    probability: namePrefix + ".probability",
-    change: namePrefix + ".change"
+    probability: "".concat(namePrefix, ".probability"),
+    change: "".concat(namePrefix, ".change")
   }), {
-    valid: namePrefix + ".valid",
-    wind: namePrefix + ".wind",
-    visibility: namePrefix + ".visibility",
-    weather1: namePrefix + ".weather.weather1",
-    weather2: namePrefix + ".weather.weather2",
-    weather3: namePrefix + ".weather.weather3",
-    cloud1: namePrefix + ".cloud.cloud1",
-    cloud2: namePrefix + ".cloud.cloud2",
-    cloud3: namePrefix + ".cloud.cloud3",
-    cloud4: namePrefix + ".cloud.cloud4"
+    valid: "".concat(namePrefix, ".valid"),
+    wind: "".concat(namePrefix, ".wind"),
+    visibility: "".concat(namePrefix, ".visibility"),
+    weather1: "".concat(namePrefix, ".weather.weather1"),
+    weather2: "".concat(namePrefix, ".weather.weather2"),
+    weather3: "".concat(namePrefix, ".weather.weather3"),
+    cloud1: "".concat(namePrefix, ".cloud.cloud1"),
+    cloud2: "".concat(namePrefix, ".cloud.cloud2"),
+    cloud3: "".concat(namePrefix, ".cloud.cloud3"),
+    cloud4: "".concat(namePrefix, ".cloud.cloud4")
   });
 };
-var useTACGenerator = function useTACGenerator(taf, requestTAC, standardTAC) {
-  if (standardTAC === void 0) {
-    standardTAC = '';
-  }
+var TAC_MISSING_DATA = 'Missing data: no TAC can be generated';
+var TAC_NOT_AVAILABLE = 'No TAC available';
+var TAC_RETRIEVING_DATA = 'Retrieving TAC';
+var useTACGenerator = function useTACGenerator(taf, requestTAC) {
+  var standardTAC = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
 
-  var _a = __read(React__default.useState(taf.status === 'NEW' ? 'No TAC available' : 'Retrieving TAC'), 2),
-      TAC = _a[0],
-      setTAC = _a[1];
+  var _React$useState = React__default.useState(taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      TAC = _React$useState2[0],
+      setTAC = _React$useState2[1];
+
+  var _useIsMounted = useIsMounted(),
+      isMounted = _useIsMounted.isMounted;
 
   var retrieveTAC = function retrieveTAC(tafToPost) {
     if (shouldRetrieveTAC(tafToPost)) {
       requestTAC(tafToPost).then(function (result) {
-        setTAC(result.data);
+        if (isMounted.current) {
+          setTAC(result.data);
+        }
       })["catch"](function () {
-        setTAC('Failed to retrieve TAC');
+        if (isMounted.current) {
+          setTAC('Failed to retrieve TAC');
+        }
       });
+    } else {
+      setTAC(TAC_MISSING_DATA);
     }
-
-    setTAC(noTAC);
   };
 
   React__default.useEffect(function () {
@@ -2137,69 +2337,57 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC, standardTAC) {
   }, [standardTAC]);
   return [TAC, retrieveTAC];
 };
-var getRange = function getRange(min, max) {
-  return Array.from({
-    length: max - min + 1
-  }, function (_, i) {
-    return min + i;
-  });
-};
-var useDragOrder = function useDragOrder(trigger, move, fields) {
-  // create simple ordered list with hover (chosen) state
-  var _a = __read(React__default.useState([]), 2),
-      sortedFields = _a[0],
-      setSortedFields = _a[1];
-
-  var _b = __read(React__default.useState([null, null]), 2),
-      lastDragOrder = _b[0],
-      onUpdatelastDragOrder = _b[1];
-
-  var onChangeOrder = function onChangeOrder(_a) {
-    var oldIndex = _a.oldIndex,
-        newIndex = _a.newIndex;
+var useDragOrder = function useDragOrder(trigger, move, onFormBlur) {
+  var _React$useState3 = React__default.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      activeDraggingIndex = _React$useState4[0],
+      setIsDragging = _React$useState4[1];
+
+  var _React$useState5 = React__default.useState([null, null]),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      lastDragOrder = _React$useState6[0],
+      onUpdatelastDragOrder = _React$useState6[1];
+
+  var onChangeOrder = function onChangeOrder(_ref) {
+    var oldIndex = _ref.oldIndex,
+        newIndex = _ref.newIndex;
     if (oldIndex === undefined || newIndex === undefined) return;
     move(oldIndex, newIndex);
     onUpdatelastDragOrder([oldIndex, newIndex]);
+    setIsDragging(false);
   };
 
-  React__default.useEffect(function () {
-    setSortedFields(fields.map(function (_a) {
-      var id = _a.id;
-      return {
-        id: id,
-        chosen: false
-      };
-    }));
-  }, [fields]); // triggers validation AFTER render of new sorted elements
+  var onStartDrag = function onStartDrag(_ref2) {
+    var oldIndex = _ref2.oldIndex;
+    return setIsDragging(oldIndex);
+  }; // triggers validation AFTER render of new sorted elements
+
 
   React__default.useEffect(function () {
-    var _a = __read(lastDragOrder, 2),
-        oldIndex = _a[0],
-        newIndex = _a[1];
+    var _lastDragOrder = _slicedToArray(lastDragOrder, 2),
+        oldIndex = _lastDragOrder[0],
+        newIndex = _lastDragOrder[1];
 
     if (oldIndex !== null && newIndex !== null) {
-      // trigger validation of moved rows
-      var _b = __read([oldIndex, newIndex].sort(function (a, b) {
-        return a - b;
-      }), 2),
-          start = _b[0],
-          end = _b[1];
-
-      var changedRows = getRange(start, end);
-      var fieldsToValidate = changedRows.reduce(function (list, rowIndex) {
-        var fieldsDict = getFieldNames(true, rowIndex);
-        var fields = Object.keys(fieldsDict).map(function (key) {
-          return fieldsDict[key];
-        });
-        return list.concat(fields);
-      }, []);
-      trigger(fieldsToValidate);
+      // trigger validation of all fields
+      trigger();
     }
-  }, [lastDragOrder, trigger]);
+  }, [lastDragOrder, trigger]); // trigger onFormBlur AFTER render of new sorted elements so the TAC gets updated
+
+  React__default.useEffect(function () {
+    var _lastDragOrder2 = _slicedToArray(lastDragOrder, 2),
+        oldIndex = _lastDragOrder2[0],
+        newIndex = _lastDragOrder2[1];
+
+    if (oldIndex !== null && newIndex !== null) {
+      onFormBlur();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [lastDragOrder]);
   return {
     onChangeOrder: onChangeOrder,
-    sortedFields: sortedFields,
-    setSortedFields: setSortedFields
+    activeDraggingIndex: activeDraggingIndex,
+    onStartDrag: onStartDrag
   };
 }; // dialog utils
 
@@ -2333,7 +2521,7 @@ var getDisplayValue = function getDisplayValue(value, disabled) {
 };
 var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
   var classes = useStyles$9();
-  return /*#__PURE__*/React__default.createElement(TextField, __assign({
+  return /*#__PURE__*/React__default.createElement(TextField, Object.assign({
     type: "text",
     variant: "filled",
     InputProps: {
@@ -2352,48 +2540,49 @@ var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
   return prevProps.value === nextProps.value && prevProps.error === nextProps.error && prevProps.name === nextProps.name;
 });
 
-var TafFormTextField = function TafFormTextField(_a) {
-  var label = _a.label,
-      _b = _a.disabled,
-      disabled = _b === void 0 ? false : _b,
-      _c = _a.name,
-      name = _c === void 0 ? '' : _c,
-      _d = _a.onChange,
-      onChange = _d === void 0 ? function () {} : _d,
-      _e = _a.onBlur,
-      onBlur = _e === void 0 ? function () {} : _e,
-      _f = _a.defaultValue,
-      defaultValue = _f === void 0 ? '' : _f,
-      _g = _a.formatter,
-      formatter = _g === void 0 ? null : _g,
-      rules = _a.rules,
-      _h = _a.autoComplete,
-      autoComplete = _h === void 0 ? [] : _h,
-      _j = _a.autoFocus,
-      autoFocus = _j === void 0 ? false : _j;
+var 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 classes = useStyles$9();
 
-  var _k = useFormContext(),
-      control = _k.control,
-      getValues = _k.getValues,
-      setValue = _k.setValue,
-      errors = _k.errors;
+  var _useFormContext = useFormContext(),
+      control = _useFormContext.control,
+      getValues = _useFormContext.getValues,
+      setValue = _useFormContext.setValue,
+      errors = _useFormContext.errors;
 
   var inputRef = React__default.useRef(null);
   var fieldErrors = getTafErrors(name, errors);
 
-  var _l = __read(React__default.useState(null), 2),
-      maxLength = _l[0],
-      setMaxLength = _l[1];
+  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 currentValue = getValues(name).toString();
     var textSelection = currentValue.substring(inputRef.current.selectionStart, inputRef.current.selectionEnd);
 
     if (autoComplete && !currentValue.length || textSelection.length && currentValue.length && textSelection === currentValue) {
-      var pressedKey_1 = event.key.toString().toUpperCase();
+      var pressedKey = event.key.toString().toUpperCase();
       var foundValue = autoComplete.find(function (el) {
-        return el.key === pressedKey_1;
+        return el.key === pressedKey;
       }) || null;
 
       if (foundValue) {
@@ -2480,7 +2669,7 @@ var TafFormTextField = function TafFormTextField(_a) {
  * */
 // messages
 var invalidChangeMessage = 'Invalid Change input, only BECMG, TEMPO or FM are allowed';
-var invalidChangeProbCombinationMessage = 'A probability is only allowed in combination with TEMPO'; // validations
+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();
@@ -2532,48 +2721,57 @@ var getDefaultValue = function getDefaultValue(fieldName, data) {
 };
 
 var getRequiredCrossFields = function getRequiredCrossFields(fieldNames) {
-  return [[fieldNames.valid, fieldNames.change], [fieldNames.probability], [fieldNames.wind, fieldNames.visibility, fieldNames.weather1, fieldNames.cloud1]];
+  return [[fieldNames.valid], [fieldNames.change, fieldNames.probability], [fieldNames.wind, fieldNames.visibility, fieldNames.weather1, fieldNames.cloud1] // sub fields
+  ];
 };
 
 var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
-  var _b = _a.isChangeGroup,
-      isChangeGroup = _b === void 0 ? false : _b,
-      _c = _a.disabled,
-      disabled = _c === void 0 ? false : _c,
-      _d = _a.index,
-      index = _d === void 0 ? -1 : _d,
-      _e = _a.lastRow,
-      lastRow = _e === void 0 ? false : _e,
+  var _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,
+      _a$lastRow = _a.lastRow,
+      lastRow = _a$lastRow === void 0 ? false : _a$lastRow,
       onRemoveChangeGroup = _a.onRemoveChangeGroup,
-      _f = _a.field,
-      field = _f === void 0 ? null : _f,
-      _g = _a.dragHandle,
-      dragHandle = _g === void 0 ? null : _g,
+      _a$field = _a.field,
+      field = _a$field === void 0 ? null : _a$field,
+      _a$dragHandle = _a.dragHandle,
+      dragHandle = _a$dragHandle === void 0 ? null : _a$dragHandle,
       props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle"]);
 
-  var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
+  var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[".concat(index, "]");
   var fieldNames = getFieldNames(isChangeGroup, index);
 
-  var _h = useFormContext(),
-      getValues = _h.getValues,
-      trigger = _h.trigger;
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues,
+      trigger = _useFormContext.trigger;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isNotRequiredForAction = _useDraftFormHelpers.isRequired; // cross-field required validation
 
-  var isNotRequiredForAction = useDraftFormHelpers().isRequired; // cross-field required validation
 
-  var _j = __read(getRequiredCrossFields(fieldNames), 3),
-      mainFields = _j[0],
-      mainOptionalFields = _j[1],
-      subFields = _j[2];
+  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 two required fields for change groups: Change and Valid
+  }; // 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 _validateRequiredMain = function validateRequiredMain(value, fieldName) {
-    return isNotRequiredForAction(value) !== true && isChangeGroup && !value.length && (hasFieldsValue(subFields) || hasFieldsValue(mainFields) || hasFieldsValue(mainOptionalFields)) ? fieldName + " is required" : true;
+  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
 
 
@@ -2583,8 +2781,8 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
 
 
   var _validateRequiredMainFields = function validateRequiredMainFields(value, fieldName) {
-    var changeField = getValues(namePrefix + ".change");
-    var visibilityField = getValues(namePrefix + ".visibility");
+    var changeField = getValues("".concat(namePrefix, ".change"));
+    var visibilityField = getValues("".concat(namePrefix, ".visibility"));
     var isFM = changeField && changeField.trim() === 'FM';
     var isCAVOK = visibilityField && visibilityField.trim() === 'CAVOK';
 
@@ -2600,15 +2798,37 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
           return true;
         }
 
-        return fieldName + " is required";
+        return "".concat(fieldName, " is required");
       }
     }
 
     return true;
   };
 
-  return /*#__PURE__*/React__default.createElement(Grid, __assign({
-    "data-testid": "row-" + namePrefix,
+  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 getFieldFromNextRow = function getFieldFromNextRow() {
+    var fieldname = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'valid';
+    var nextValidFieldName = "changeGroups[".concat(index + 1, "].").concat(fieldname);
+    var nextRowValidValue = getValues(nextValidFieldName);
+    return nextRowValidValue ? [nextValidFieldName] : [];
+  };
+
+  return /*#__PURE__*/React__default.createElement(Grid, Object.assign({
+    "data-testid": "row-".concat(namePrefix),
     container: true,
     ref: ref
   }, props), !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
@@ -2637,6 +2857,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     defaultValue: getDefaultValue('probability', field),
     rules: {
       validate: {
+        validateRequiredMainOptional: validateRequiredMainOptional,
         validateProbabilityField: validateProbabilityField
       }
     },
@@ -2649,7 +2870,8 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     }],
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)));
+        var nextValidFieldName = getFieldFromNextRow();
+        trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName)));
       }
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
@@ -2659,9 +2881,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     defaultValue: getDefaultValue('change', field),
     rules: {
       validate: {
-        validateRequiredMain: function validateRequiredMain(value) {
-          return _validateRequiredMain(value, 'Change');
-        },
+        validateRequiredMainOptional: validateRequiredMainOptional,
         validateChangeField: validateChangeField,
         validateChangeFieldInterField: function validateChangeFieldInterField$1(value) {
           return validateChangeFieldInterField(value, getValues(fieldNames.probability));
@@ -2680,7 +2900,8 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     }],
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)));
+        var nextValidFieldName = getFieldFromNextRow();
+        trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName)));
       }
     }
   })), /*#__PURE__*/React__default.createElement(TafFormTextField, {
@@ -2691,20 +2912,20 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     defaultValue: getDefaultValue('valid', field),
     rules: {
       validate: {
-        validateRequiredMain: function validateRequiredMain(value) {
-          return _validateRequiredMain(value, 'Valid');
-        },
+        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)) : true;
-        }
+          return isChangeGroup ? validateValidChangeGroupInterField(value, getValues(fieldNames.change), getValues('validDateStart'), getValues('validDateEnd')) : true;
+        },
+        validatePreviousRow: validatePreviousRow
       }
     },
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)));
+        var nextValidFieldName = getFieldFromNextRow();
+        trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName)));
       }
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
@@ -2723,7 +2944,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     },
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger(__spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)));
+        trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)));
       }
     },
     autoFocus: !isChangeGroup
@@ -2746,7 +2967,8 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       value: 'CAVOK'
     }],
     onBlur: function onBlur() {
-      trigger(isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : subFields);
+      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",
@@ -2760,13 +2982,13 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
         },
         validateRequiredSub: validateRequiredSub,
         validateWeatherField: function validateWeatherField$1(value) {
-          return validateWeatherField(value, !!isChangeGroup);
+          return validateWeatherField(value, getValues(fieldNames.visibility), !!isChangeGroup);
         }
       }
     },
     onBlur: function onBlur() {
-      var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
-      return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather2, fieldNames.weather3]));
+      var fields = isChangeGroup ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : [];
+      return trigger([].concat(_toConsumableArray(fields), [fieldNames.weather2, fieldNames.weather3]));
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Weather",
@@ -2776,13 +2998,13 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     rules: {
       validate: {
         validateSecondWeatherField: function validateSecondWeatherField$1(value) {
-          return validateSecondWeatherField(getValues(fieldNames.weather1), value);
+          return validateSecondWeatherField(getValues(fieldNames.weather1), value, getValues(fieldNames.visibility));
         }
       }
     },
     onBlur: function onBlur() {
-      var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
-      return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather3]));
+      var fields = isChangeGroup ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : [];
+      return trigger([].concat(_toConsumableArray(fields), [fieldNames.weather3]));
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Weather",
@@ -2792,7 +3014,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     rules: {
       validate: {
         validateThirdWeatherField: function validateThirdWeatherField$1(value) {
-          return validateThirdWeatherField(getValues(fieldNames.weather1), getValues(fieldNames.weather2), value);
+          return validateThirdWeatherField(getValues(fieldNames.weather1), getValues(fieldNames.weather2), value, getValues(fieldNames.visibility));
         }
       }
     }
@@ -2807,12 +3029,14 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
           return _validateRequiredMainFields(value, 'Clouds');
         },
         validateRequiredSub: validateRequiredSub,
-        validateFirstCloud: validateFirstCloud
+        validateFirstCloud: function validateFirstCloud$1(value) {
+          return validateFirstCloud(value, getValues(fieldNames.visibility));
+        }
       }
     },
     onBlur: function onBlur() {
-      var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
-      return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.cloud2, fieldNames.cloud3, fieldNames.cloud4]));
+      var fields = isChangeGroup ? [].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)) : [];
+      return trigger([].concat(_toConsumableArray(fields), [fieldNames.cloud2, fieldNames.cloud3, fieldNames.cloud4]));
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Cloud",
@@ -2822,7 +3046,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     rules: {
       validate: {
         validateSecondCloud: function validateSecondCloud$1(value) {
-          return validateSecondCloud(getValues(fieldNames.cloud1), value);
+          return validateSecondCloud(getValues(fieldNames.cloud1), value, getValues(fieldNames.visibility));
         }
       }
     },
@@ -2837,7 +3061,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     rules: {
       validate: {
         validateThirdCloud: function validateThirdCloud$1(value) {
-          return validateThirdCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), value);
+          return validateThirdCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), value, getValues(fieldNames.visibility));
         }
       }
     },
@@ -2852,7 +3076,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     rules: {
       validate: {
         validateFourthCloud: function validateFourthCloud$1(value) {
-          return validateFourthCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), getValues(fieldNames.cloud3), value);
+          return validateFourthCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), getValues(fieldNames.cloud3), value, getValues(fieldNames.visibility));
         }
       }
     }
@@ -2862,7 +3086,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   }), isChangeGroup && !disabled && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
-  }, /*#__PURE__*/React__default.createElement(IconButton, __assign({
+  }, /*#__PURE__*/React__default.createElement(IconButton, Object.assign({
     "aria-label": "delete",
     "data-testid": "remove-changeGroup",
     onClick: function onClick() {
@@ -2873,6 +3097,23 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   } : {}), /*#__PURE__*/React__default.createElement(Delete, null))));
 });
 
+/* *
+ * 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 getIssuesLabel = function getIssuesLabel(sumOfErrors) {
   switch (sumOfErrors) {
     case 0:
@@ -2882,7 +3123,7 @@ var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
       return '1 issue';
 
     default:
-      return sumOfErrors + " issues";
+      return "".concat(sumOfErrors, " issues");
   }
 };
 
@@ -2906,22 +3147,39 @@ var buttonStyle = function buttonStyle(color) {
   };
 };
 
-var IssuesButton = function IssuesButton(_a) {
-  var togglePane = _a.togglePane,
-      sumOfErrors = _a.sumOfErrors;
+var IssuesButton = function IssuesButton(_ref) {
+  var togglePane = _ref.togglePane,
+      sumOfErrors = _ref.sumOfErrors;
   var color = sumOfErrors > 0 ? 'red' : 'green';
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: "View details"
   }, /*#__PURE__*/React.createElement(Chip, {
+    "data-testid": "issuesButton",
     size: "small",
     label: getIssuesLabel(sumOfErrors),
-    style: __assign({}, buttonStyle(color)),
+    style: Object.assign({}, buttonStyle(color)),
     onClick: togglePane
   }));
 };
 
+/* *
+ * 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 ThumbsUp = function ThumbsUp(props) {
-  return /*#__PURE__*/React__default.createElement(SvgIcon, __assign({
+  return /*#__PURE__*/React__default.createElement(SvgIcon, Object.assign({
     fontSize: "inherit",
     viewBox: "0 0 58 69"
   }, props), /*#__PURE__*/React__default.createElement("title", null, "Thumbs up"), /*#__PURE__*/React__default.createElement("g", {
@@ -2958,32 +3216,9 @@ var ThumbsUp = function ThumbsUp(props) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 var useStyles$8 = makeStyles({
-  issuesPane: {
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-    width: '577px',
-    height: '164px',
-    marginTop: '16px'
-  },
-  paneHeader: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    height: '24px'
-  },
-  paneTitle: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginLeft: '32px',
-    fontSize: '10px',
-    fontWeight: 'bold'
-  },
   paneContent: {
     marginTop: '16px',
-    marginLeft: '32px',
-    overflowY: 'scroll'
+    marginLeft: '24px'
   },
   image: {
     fontSize: '4rem'
@@ -3017,10 +3252,10 @@ var getErrorDefaultMessage = function getErrorDefaultMessage(error) {
   }
 };
 
-var capitalizeWord = function capitalizeWord(_a) {
-  var _b = __read(_a),
-      firstLetter = _b[0],
-      restOfWord = _b.slice(1);
+var capitalizeWord = function capitalizeWord(_ref) {
+  var _ref2 = _toArray(_ref),
+      firstLetter = _ref2[0],
+      restOfWord = _ref2.slice(1);
 
   return firstLetter.toUpperCase() + restOfWord.join('');
 };
@@ -3028,19 +3263,20 @@ var humanizeErrorMessage = function humanizeErrorMessage(nameAsString) {
   var nameWithoutBrackets = nameAsString.replace(/[[\]']+/g, '');
   var nameLowerCase = nameWithoutBrackets.toLowerCase();
 
-  var _a = __read(nameLowerCase.split(/([0-9]+)/) // split numbers from field and build array
+  var _nameLowerCase$split$ = nameLowerCase.split(/([0-9]+)/) // split numbers from field and build array
   .filter(function (s) {
     return s.length;
-  }), 2),
-      fieldName = _a[0],
-      fieldNumberedValue = _a[1];
+  }),
+      _nameLowerCase$split$2 = _slicedToArray(_nameLowerCase$split$, 2),
+      fieldName = _nameLowerCase$split$2[0],
+      fieldNumberedValue = _nameLowerCase$split$2[1];
 
   var nameCapitalized = capitalizeWord(fieldName);
 
   if (fieldNumberedValue) {
     // when name contains a number we assume it's a formgroup and we add a index +1 for human readability
     var fieldNumber = parseInt(fieldNumberedValue, 10) + 1;
-    return nameCapitalized + " " + fieldNumber;
+    return "".concat(nameCapitalized, " ").concat(fieldNumber);
   }
 
   return nameCapitalized;
@@ -3048,31 +3284,37 @@ var humanizeErrorMessage = function humanizeErrorMessage(nameAsString) {
 var getErrorMessage = function getErrorMessage(error, index) {
   var name = error.ref.name;
 
-  var _a = __read(name.split('.'), 1),
-      firstNamePart = _a[0];
+  var _name$split = name.split('.'),
+      _name$split2 = _slicedToArray(_name$split, 1),
+      firstNamePart = _name$split2[0];
 
   var fieldErrorTitle = humanizeErrorMessage(firstNamePart);
-  return index + 1 + ". " + fieldErrorTitle + ": " + getErrorDefaultMessage(error);
+  return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(getErrorDefaultMessage(error));
 };
 
-var IssuesPane = function IssuesPane(_a) {
-  var handleClose = _a.handleClose,
-      _b = _a.errorList,
-      errorList = _b === void 0 ? [] : _b;
+var IssuesPane = function IssuesPane(_ref3) {
+  var isOpen = _ref3.isOpen,
+      handleClose = _ref3.handleClose,
+      _ref3$errorList = _ref3.errorList,
+      errorList = _ref3$errorList === void 0 ? [] : _ref3$errorList;
   var classes = useStyles$8();
-  return /*#__PURE__*/React.createElement(Paper, {
-    elevation: 3,
-    className: classes.issuesPane
+  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+    startSize: {
+      width: '577px',
+      height: '200px'
+    },
+    startPosition: {
+      left: 370,
+      top: 570
+    },
+    minWidth: 300,
+    onClose: handleClose,
+    title: getPaneTitle(errorList.length),
+    headerSize: "xs",
+    isOpen: isOpen,
+    "data-testid": "moveable-issues-pane",
+    bounds: "body"
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes.paneHeader
-  }, /*#__PURE__*/React.createElement(Typography, {
-    "data-testid": "issuesPaneTitle",
-    className: classes.paneTitle
-  }, getPaneTitle(errorList.length)), /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "closeIssuesPane",
-    size: "small",
-    onClick: handleClose
-  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement("div", {
     className: classes.paneContent
   }, errorList.length === 0 && /*#__PURE__*/React.createElement("div", {
     className: classes.image,
@@ -3081,7 +3323,7 @@ var IssuesPane = function IssuesPane(_a) {
     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-" + index,
+      key: "message-".concat(index),
       variant: "body1",
       "data-testid": "errorMessage"
     }, getErrorMessage(error, index));
@@ -3093,7 +3335,7 @@ var getCustomError = function getCustomError(error) {
   var isChangeGroup = name.includes('changeGroups');
   var matchRowNumber = name.match(/\[(.*?)\]/);
   var row = matchRowNumber ? parseInt(matchRowNumber[1], 10) : null;
-  return __assign(__assign({}, error), {
+  return Object.assign(Object.assign({}, error), {
     isChangeGroup: isChangeGroup,
     row: row
   });
@@ -3102,7 +3344,7 @@ var getCustomError = function getCustomError(error) {
 var getErrorValues = function getErrorValues(fieldErrors) {
   if (!fieldErrors) return [];
   return Object.keys(fieldErrors).reduce(function (list, key) {
-    var error = __assign({}, fieldErrors[key]);
+    var error = Object.assign({}, fieldErrors[key]);
 
     if (error.ref) {
       return list.concat(getCustomError(error));
@@ -3120,7 +3362,7 @@ var getErrors = function getErrors(errors) {
       var errorValues = errorValue.reduce(function (l, i) {
         return l.concat(getErrorValues(i));
       }, []);
-      return list.concat.apply(list, __spreadArray([], __read(errorValues)));
+      return list.concat.apply(list, _toConsumableArray(errorValues));
     }
 
     return list.concat(getErrorValues(errorValue));
@@ -3130,7 +3372,7 @@ var getErrors = function getErrors(errors) {
 
 var filterDuplicateErrors = function filterDuplicateErrors(errors) {
   return errors.reduce(function (list, error) {
-    // only check on type validateRequiredSub since this is giving 'duplicates'
+    // 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.row === error.row;
@@ -3138,20 +3380,32 @@ var filterDuplicateErrors = function filterDuplicateErrors(errors) {
       return exist ? list : list.concat(error);
     }
 
+    if (error.type === 'validateRequiredMainOptional') {
+      var _exist = list.find(function (e) {
+        return e.type === 'validateRequiredMainOptional' && e.row === error.row;
+      });
+
+      return _exist ? list : list.concat(error);
+    }
+
     return list.concat(error);
   }, []);
 };
 
-var TafFormButtons = function TafFormButtons(_a) {
-  var tafAction = _a.tafAction,
-      onTafFormButtonPress = _a.onTafFormButtonPress;
+var TafFormButtons = function TafFormButtons(_ref) {
+  var tafAction = _ref.tafAction,
+      onTafFormButtonPress = _ref.onTafFormButtonPress;
   var classes = useStyles$9();
-  var errors = useFormContext().errors;
+
+  var _useFormContext = useFormContext(),
+      errors = _useFormContext.errors;
+
   var errorList = filterDuplicateErrors(getErrors(errors));
 
-  var _b = __read(React__default.useState(false), 2),
-      isIssuesPaneOpen = _b[0],
-      setIsIssuesPaneOpen = _b[1];
+  var _React$useState = React__default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isIssuesPaneOpen = _React$useState2[0],
+      setIsIssuesPaneOpen = _React$useState2[1];
 
   var toggleIssuesPane = function toggleIssuesPane() {
     return setIsIssuesPaneOpen(!isIssuesPaneOpen);
@@ -3239,9 +3493,10 @@ var TafFormButtons = function TafFormButtons(_a) {
           break;
       }
     }
-  }, "Publish"))), isIssuesPaneOpen && /*#__PURE__*/React__default.createElement(IssuesPane, {
+  }, "Publish"))), /*#__PURE__*/React__default.createElement(IssuesPane, {
     errorList: errorList,
-    handleClose: toggleIssuesPane
+    handleClose: toggleIssuesPane,
+    isOpen: isIssuesPaneOpen
   }));
 };
 
@@ -3275,21 +3530,24 @@ var useStyles$7 = makeStyles(function () {
   };
 });
 
-var DragHandle = function DragHandle(_a) {
-  var _b = _a.isSorting,
-      isSorting = _b === void 0 ? false : _b,
-      _c = _a.isDisabled,
-      isDisabled = _c === void 0 ? false : _c;
+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;
   var classes = useStyles$7(isSorting);
   return /*#__PURE__*/React__default.createElement(IconButton, {
-    className: classes.dragHandle + " handle",
-    "data-testid": "dragHandle",
+    className: "".concat(classes.dragHandle, " handle"),
+    "data-testid": "dragHandle-".concat(index),
     disableRipple: true,
     disabled: isDisabled
   }, /*#__PURE__*/React__default.createElement(DragIndicator, null));
 };
 
-var emptyRow = {
+var noop = function noop() {};
+
+var emptyChangegroup = {
   valid: '',
   wind: '',
   visibility: '',
@@ -3308,73 +3566,71 @@ var emptyRow = {
   probability: null
 };
 
-var TafForm = function TafForm(_a) {
-  var mode = _a.mode,
-      changeGroups = _a.changeGroups,
-      tafAction = _a.tafAction,
-      _b = _a.staticTAC,
-      staticTAC = _b === void 0 ? '' : _b,
-      _c = _a.onFormAction,
-      onFormAction = _c === void 0 ? function () {
+var TafForm = function TafForm(_ref) {
+  var isDisabled = _ref.isDisabled,
+      tafAction = _ref.tafAction,
+      _ref$staticTAC = _ref.staticTAC,
+      staticTAC = _ref$staticTAC === void 0 ? '' : _ref$staticTAC,
+      _ref$onFormAction = _ref.onFormAction,
+      onFormAction = _ref$onFormAction === void 0 ? function () {
     return null;
-  } : _c;
+  } : _ref$onFormAction;
   var classes = useStyles$9();
   var confirmDialog = useConfirmationDialog();
 
-  var _d = useDraftFormHelpers(),
-      toggleIsDraft = _d.toggleIsDraft,
-      DraftFieldHelper = _d.DraftFieldHelper;
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
+      DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
 
-  var api = useApiContext().api;
-  var isDisabled = mode === 'view';
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
 
-  var _e = useFormContext(),
-      control = _e.control,
-      handleSubmit = _e.handleSubmit,
-      watch = _e.watch,
-      getValues = _e.getValues,
-      errors = _e.errors,
-      trigger = _e.trigger;
+  var _useIsMounted = useIsMounted(),
+      isMounted = _useIsMounted.isMounted;
 
-  var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
+  var _useFormContext = useFormContext(),
+      control = _useFormContext.control,
+      handleSubmit = _useFormContext.handleSubmit,
+      watch = _useFormContext.watch,
+      trigger = _useFormContext.trigger,
+      formState = _useFormContext.formState,
+      getValues = _useFormContext.getValues;
 
-  var _f = __read(React__default.useState(watch()), 2),
-      delayedFormValues = _f[0],
-      setDelayedFormValues = _f[1];
+  var isFormDirty = formState.isDirty,
+      errors = formState.errors;
+  usePreventBrowserClose(isFormDirty && !isDisabled);
+  var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
-  var _g = __read(useTACGenerator(convertTafValuesToObject(delayedFormValues), api.getTAC, staticTAC), 2),
-      TAC = _g[0],
-      updateTAC = _g[1];
+  var _React$useState = React__default.useState(watch()),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      delayedFormValues = _React$useState2[0],
+      setDelayedFormValues = _React$useState2[1];
 
-  React__default.useEffect(function () {
-    if (!Object.keys(errors).length && staticTAC === '') {
-      updateTAC(convertTafValuesToObject(delayedFormValues));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  var _useTACGenerator = useTACGenerator(convertTafValuesToObject(delayedFormValues), api.getTAC, staticTAC),
+      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
+      TAC = _useTACGenerator2[0],
+      updateTAC = _useTACGenerator2[1];
 
-  }, [delayedFormValues]);
+  var hasErrors = Object.keys(errors).length;
 
   var onFormBlur = function onFormBlur() {
     setDelayedFormValues(getValues());
   };
 
-  var _h = __read(React__default.useState(false), 2),
-      isFormDirty = _h[0],
-      setFormDirty = _h[1];
-
-  var onFormChange = function onFormChange() {
-    return !isFormDirty ? setFormDirty(true) : null;
-  };
+  React__default.useEffect(function () {
+    if (staticTAC === '' && isMounted.current && isFormDirty) {
+      var newTAC = hasErrors ? null : convertTafValuesToObject(delayedFormValues);
+      updateTAC(newTAC);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  usePreventBrowserClose(isFormDirty && !isDisabled);
+  }, [delayedFormValues]);
+  React__default.useEffect(function () {
+    // prevent updating an error while typing
+    if (!hasErrors && isFormDirty && document.activeElement.tagName !== 'INPUT') {
+      updateTAC(convertTafValuesToObject(delayedFormValues));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  var _j = useFieldArray({
-    control: control,
-    name: 'changeGroups'
-  }),
-      fields = _j.fields,
-      append = _j.append,
-      remove = _j.remove,
-      move = _j.move;
+  }, [hasErrors]);
 
   var onSubmit = function onSubmit(data) {
     // eslint-disable-next-line no-console
@@ -3428,38 +3684,39 @@ var TafForm = function TafForm(_a) {
     }
   };
 
-  var onAddRow = function onAddRow() {
-    append(emptyRow);
-  };
-
-  React__default.useEffect(function () {
-    // set changegroups on mount (if no changegroups - add empty one by default)
-    if (changeGroups.length > 0) {
-      changeGroups.forEach(function (group) {
-        append(group, false);
-      });
-    } else if (!isDisabled) {
-      append(emptyRow, false);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  var _useFieldArray = useFieldArray({
+    control: control,
+    name: 'changeGroups'
+  }),
+      fields = _useFieldArray.fields,
+      append = _useFieldArray.append,
+      remove = _useFieldArray.remove,
+      move = _useFieldArray.move;
 
-  }, []);
+  var lastTotalFields = usePrevious(fields.length);
 
-  var _k = useDragOrder(trigger, move, fields),
-      onChangeOrder = _k.onChangeOrder,
-      sortedFields = _k.sortedFields,
-      setSortedFields = _k.setSortedFields;
+  var _useDragOrder = useDragOrder(trigger, move, onFormBlur),
+      onChangeOrder = _useDragOrder.onChangeOrder,
+      onStartDrag = _useDragOrder.onStartDrag,
+      activeDraggingIndex = _useDragOrder.activeDraggingIndex;
 
   var onRemoverow = function onRemoverow(index) {
     remove(index);
-    var newList = fields.length > 1 ? fields.filter(function (_, fieldIndex) {
-      return fieldIndex === index;
-    }) : [];
-    setSortedFields(newList);
   };
 
+  var onAddRow = function onAddRow() {
+    append(emptyChangegroup, true);
+  };
+
+  React__default.useEffect(function () {
+    if (isFormDirty && fields.length !== lastTotalFields) {
+      onFormBlur();
+      trigger(); // trigger all field validation,
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [fields.length, isFormDirty]);
   return /*#__PURE__*/React__default.createElement("form", {
     onSubmit: handleSubmit(onSubmit),
-    onChange: onFormChange,
     onBlur: onFormBlur
   }, /*#__PURE__*/React__default.createElement(Typography, {
     className: classes.tacTitle
@@ -3476,20 +3733,19 @@ var TafForm = function TafForm(_a) {
     disabled: isDisabled
   }), /*#__PURE__*/React__default.createElement(ReactSortable, {
     tag: "div",
-    list: sortedFields,
-    setList: setSortedFields,
+    list: fields,
+    setList: noop,
     animation: 200,
     onSort: onChangeOrder,
     handle: ".handle",
     direction: "vertical",
     // hover props
     forceFallback: true,
-    onStart: function onStart() {
+    onStart: function onStart(event) {
+      onStartDrag(event);
       Sortable.ghost.style.opacity = '1';
     }
-  }, sortedFields.map(function (_a, index) {
-    var chosen = _a.chosen;
-    var item = fields[index];
+  }, fields.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(TafFormRow, {
       field: item,
       className: classes.formRow,
@@ -3500,8 +3756,9 @@ var TafForm = function TafForm(_a) {
       onRemoveChangeGroup: onRemoverow,
       isChangeGroup: true,
       dragHandle: /*#__PURE__*/React__default.createElement(DragHandle, {
-        isDisabled: sortedFields.length === 1 || isDisabled,
-        isSorting: chosen
+        isDisabled: fields.length === 1 || isDisabled,
+        isSorting: activeDraggingIndex === index,
+        index: index
       })
     });
   })), !isDisabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
@@ -3525,6 +3782,22 @@ var TafForm = function TafForm(_a) {
   }), /*#__PURE__*/React__default.createElement(DraftFieldHelper, null));
 };
 
+/* *
+ * 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 getMessageType = function getMessageType(taf, tafAction) {
   if (tafAction === 'CORRECT') {
     return 'COR';
@@ -3548,47 +3821,46 @@ var getAmendedCorrectedTafTimes = function getAmendedCorrectedTafTimes(taf, tafA
       start: now,
       end: taf.baseForecast.valid.end
     };
-    return __assign(__assign({}, taf), {
+    return Object.assign(Object.assign({}, taf), {
       previousValidDateStart: previousValidDateStart,
       previousValidDateEnd: previousValidDateEnd,
       validDateStart: now,
-      baseForecast: __assign(__assign({}, taf.baseForecast), {
+      baseForecast: Object.assign(Object.assign({}, taf.baseForecast), {
         valid: validObj
       })
     });
   }
 
-  return __assign(__assign({}, taf), {
+  return Object.assign(Object.assign({}, taf), {
     previousValidDateStart: previousValidDateStart,
     previousValidDateEnd: previousValidDateEnd
   });
 };
 var prepareTafValues = function prepareTafValues(_taf, tafAction) {
+  var addEmptyChangeGroup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
   // If action is AMEND/DRAFT_AMEND - update validity start time to current time
   var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
-  return __assign(__assign(__assign({}, taf), {
+  return Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
     messageType: getMessageType(taf, tafAction),
     baseForecast: formatFormValues(taf.baseForecast)
   }), taf.changeGroups && {
     changeGroups: taf.changeGroups.map(formatFormValues)
+  }), addEmptyChangeGroup && {
+    changeGroups: [emptyChangegroup]
   });
 };
 
-var TafFormWrapper = function TafFormWrapper(_a) {
-  var tafFromBackend = _a.tafFromBackend,
-      mode = _a.mode,
-      tafAction = _a.tafAction,
-      _b = _a.TAC,
-      TAC = _b === void 0 ? '' : _b,
-      onFormAction = _a.onFormAction;
-  var taf = tafFromBackend.taf; // react-hook-form doesn't work well when setting defaultValues on dynamic list, that's why it's send seperate, and build up in the mount effect
-
-  var _c = prepareTafValues(taf, tafAction),
-      _d = _c.changeGroups,
-      changeGroups = _d === void 0 ? [] : _d,
-      defaultValues = __rest(_c, ["changeGroups"]);
-
+var TafFormWrapper = function TafFormWrapper(_ref) {
+  var tafFromBackend = _ref.tafFromBackend,
+      mode = _ref.mode,
+      tafAction = _ref.tafAction,
+      _ref$TAC = _ref.TAC,
+      TAC = _ref$TAC === void 0 ? '' : _ref$TAC,
+      onFormAction = _ref.onFormAction;
+  var taf = tafFromBackend.taf;
+  var isDisabled = mode === 'view';
+  var defaultValues = prepareTafValues(taf, tafAction, !isDisabled && !taf.changeGroups);
   var options = {
     defaultValues: defaultValues,
     mode: 'onTouched',
@@ -3598,8 +3870,7 @@ var TafFormWrapper = function TafFormWrapper(_a) {
   return /*#__PURE__*/React__default.createElement(ReactHookFormProvider, {
     options: options
   }, /*#__PURE__*/React__default.createElement(TafForm, {
-    mode: mode,
-    changeGroups: changeGroups,
+    isDisabled: isDisabled,
     tafAction: tafAction,
     staticTAC: TAC,
     onFormAction: onFormAction
@@ -3636,20 +3907,25 @@ var ContentDialog = function ContentDialog(_a) {
       var titleComponent = _a.titleComponent,
       children = _a.children;
       _a.onClose;
-      var _b = _a.alertBanner,
-      alertBanner = _b === void 0 ? null : _b,
+      var _a$alertBanner = _a.alertBanner,
+      alertBanner = _a$alertBanner === void 0 ? null : _a$alertBanner,
       onFormAction = _a.onFormAction,
       other = __rest(_a, ["open", "toggleDialogStatus", "titleComponent", "children", "onClose", "alertBanner", "onFormAction"]);
 
   var classes = useStyles$6();
-  return /*#__PURE__*/React.createElement(Dialog, __assign({
+  return /*#__PURE__*/React.createElement(Dialog, Object.assign({
     "data-testid": "contentDialog",
     open: open,
     onClose: function onClose() {
       return onFormAction('CLOSE');
     },
     maxWidth: other.maxWidth ? other.maxWidth : 'lg',
-    disableBackdropClick: true
+    disableBackdropClick: true,
+    PaperProps: {
+      style: {
+        position: 'inherit'
+      }
+    }
   }, other), /*#__PURE__*/React.createElement(DialogTitle, {
     disableTypography: true,
     className: classes.dialogHeader
@@ -3750,13 +4026,13 @@ var useStyles$5 = makeStyles({
   }
 });
 
-var TafListRow = function TafListRow(_a) {
-  var taf = _a.taf,
-      listType = _a.listType,
-      _b = _a.TAC,
-      TAC = _b === void 0 ? '' : _b,
-      _c = _a.showTac,
-      showTac = _c === void 0 ? false : _c;
+var TafListRow = function TafListRow(_ref) {
+  var taf = _ref.taf,
+      listType = _ref.listType,
+      _ref$TAC = _ref.TAC,
+      TAC = _ref$TAC === void 0 ? '' : _ref$TAC,
+      _ref$showTac = _ref.showTac,
+      showTac = _ref$showTac === void 0 ? false : _ref$showTac;
   var classes = useStyles$5();
   var validTimeDate = moment.utc(taf.validDateStart).format('DD MMM');
   var baseTime = moment.utc(taf.baseTime).format('HH:mm');
@@ -3909,16 +4185,19 @@ var getListType = function getListType(taf, locationSettings) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var TafFormDialog = function TafFormDialog(_a) {
-  var open = _a.open,
-      toggleFormDialog = _a.toggleFormDialog,
-      tafFromBackend = _a.tafFromBackend,
-      children = _a.children,
-      _b = _a.alertBanner,
-      alertBanner = _b === void 0 ? null : _b,
-      onFormAction = _a.onFormAction;
+var TafFormDialog = function TafFormDialog(_ref) {
+  var open = _ref.open,
+      toggleFormDialog = _ref.toggleFormDialog,
+      tafFromBackend = _ref.tafFromBackend,
+      children = _ref.children,
+      _ref$alertBanner = _ref.alertBanner,
+      alertBanner = _ref$alertBanner === void 0 ? null : _ref$alertBanner,
+      onFormAction = _ref.onFormAction;
   var taf = tafFromBackend ? tafFromBackend.taf : null;
-  var locationSettings = useTafSettings(tafConfig).locations;
+
+  var _useTafSettings = useTafSettings(tafConfig),
+      locationSettings = _useTafSettings.locations;
+
   return /*#__PURE__*/React__default.createElement(ContentDialog, {
     open: open,
     toggleDialogStatus: toggleFormDialog,
@@ -3955,10 +4234,10 @@ var useStyles$4 = makeStyles({
   }
 });
 
-var TafListButtons = function TafListButtons(_a) {
-  var uuid = _a.uuid,
-      canBe = _a.canBe,
-      onClickTafActionButton = _a.onClickTafActionButton;
+var TafListButtons = function TafListButtons(_ref) {
+  var uuid = _ref.uuid,
+      canBe = _ref.canBe,
+      onClickTafActionButton = _ref.onClickTafActionButton;
   var classes = useStyles$4();
   return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
@@ -4022,19 +4301,22 @@ var fromStatusToAction = function fromStatusToAction(tafStatus) {
   }
 };
 
-var TafListAccordion = function TafListAccordion(_a) {
-  var tafListItem = _a.tafListItem,
-      listType = _a.listType,
-      _b = _a.errorCancelTaf,
-      errorCancelTaf = _b === void 0 ? [] : _b,
-      onClickTafActionButton = _a.onClickTafActionButton;
+var TafListAccordion = function TafListAccordion(_ref) {
+  var tafListItem = _ref.tafListItem,
+      listType = _ref.listType,
+      _ref$errorCancelTaf = _ref.errorCancelTaf,
+      errorCancelTaf = _ref$errorCancelTaf === void 0 ? [] : _ref$errorCancelTaf,
+      onClickTafActionButton = _ref.onClickTafActionButton;
   var classes = useStyles$3();
   var status = tafListItem.taf.status;
-  var api = useApiContext().api;
 
-  var _c = __read(useTACGenerator(tafListItem.taf, api.getTAC), 2),
-      TAC = _c[0],
-      requestTAC = _c[1];
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
+  var _useTACGenerator = useTACGenerator(tafListItem.taf, api.getTAC),
+      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
+      TAC = _useTACGenerator2[0],
+      requestTAC = _useTACGenerator2[1];
 
   React__default.useEffect(function () {
     // only re-retrieve TAC if draft state
@@ -4044,7 +4326,7 @@ var TafListAccordion = function TafListAccordion(_a) {
 
   }, [tafListItem.taf]);
   var popOut = status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED';
-  return /*#__PURE__*/React__default.createElement(Accordion, __assign({
+  return /*#__PURE__*/React__default.createElement(Accordion, Object.assign({
     "data-testid": "tafListItem",
     className: classes.accordion
   }, popOut ? {
@@ -4127,22 +4409,22 @@ var useStyles$2 = makeStyles({
   }
 });
 
-var TafListSection = function TafListSection(_a) {
-  var tafList = _a.tafList,
-      title = _a.title,
-      listType = _a.listType,
-      _b = _a.errorCancelTaf,
-      errorCancelTaf = _b === void 0 ? [] : _b,
-      onClickTafActionButton = _a.onClickTafActionButton;
+var TafListSection = function TafListSection(_ref) {
+  var tafList = _ref.tafList,
+      title = _ref.title,
+      listType = _ref.listType,
+      _ref$errorCancelTaf = _ref.errorCancelTaf,
+      errorCancelTaf = _ref$errorCancelTaf === void 0 ? [] : _ref$errorCancelTaf,
+      onClickTafActionButton = _ref.onClickTafActionButton;
   var classes = useStyles$2();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle2",
     className: classes.listHeaders
   }, title), /*#__PURE__*/React__default.createElement("div", {
-    "data-testid": "tafList" + listType
+    "data-testid": "tafList".concat(listType)
   }, tafList.map(function (tafListItem) {
     return /*#__PURE__*/React__default.createElement(TafListAccordion, {
-      key: tafListItem.taf.uuid + "-" + tafListItem.taf.status,
+      key: "".concat(tafListItem.taf.uuid, "-").concat(tafListItem.taf.status),
       tafListItem: tafListItem,
       listType: listType,
       errorCancelTaf: errorCancelTaf,
@@ -4164,25 +4446,29 @@ var useStyles$1 = makeStyles({
   }
 });
 
-var TafList = function TafList(_a) {
-  var e_1, _b;
-
-  var tafList = _a.tafList,
-      isLoading = _a.isLoading,
-      error = _a.error,
-      _c = _a.errorCancelTaf,
-      errorCancelTaf = _c === void 0 ? [] : _c,
-      onClickTafActionButton = _a.onClickTafActionButton;
+var TafList = function TafList(_ref) {
+  var tafList = _ref.tafList,
+      isLoading = _ref.isLoading,
+      error = _ref.error,
+      _ref$errorCancelTaf = _ref.errorCancelTaf,
+      errorCancelTaf = _ref$errorCancelTaf === void 0 ? [] : _ref$errorCancelTaf,
+      onClickTafActionButton = _ref.onClickTafActionButton;
   var classes = useStyles$1();
-  var locationSettings = useTafSettings(tafConfig).locations;
+
+  var _useTafSettings = useTafSettings(tafConfig),
+      locationSettings = _useTafSettings.locations;
+
   var upcomingTafs = [];
   var currentTafs = [];
   var expiredTafs = [];
 
   if (tafList) {
+    var _iterator = _createForOfIteratorHelper(tafList),
+        _step;
+
     try {
-      for (var tafList_1 = __values(tafList), tafList_1_1 = tafList_1.next(); !tafList_1_1.done; tafList_1_1 = tafList_1.next()) {
-        var taf = tafList_1_1.value;
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var taf = _step.value;
         var now = moment.utc();
         var baseTime = moment.utc(taf.taf.baseTime);
         var activityPeriod = locationSettings[taf.taf.location].activity_period;
@@ -4196,16 +4482,10 @@ var TafList = function TafList(_a) {
           upcomingTafs.push(taf);
         }
       }
-    } catch (e_1_1) {
-      e_1 = {
-        error: e_1_1
-      };
+    } catch (err) {
+      _iterator.e(err);
     } finally {
-      try {
-        if (tafList_1_1 && !tafList_1_1.done && (_b = tafList_1["return"])) _b.call(tafList_1);
-      } finally {
-        if (e_1) throw e_1.error;
-      }
+      _iterator.f();
     }
   }
 
@@ -4280,14 +4560,13 @@ var Spinner = function Spinner() {
   }));
 };
 
-var useTimeoutCancelError = function useTimeoutCancelError(pollingInterval) {
-  if (pollingInterval === void 0) {
-    pollingInterval = 10000;
-  }
+var useTimeoutCancelError = function useTimeoutCancelError() {
+  var pollingInterval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10000;
 
-  var _a = __read(React__default.useState([]), 2),
-      errorCancelTaf = _a[0],
-      setErrorCancelTaf = _a[1];
+  var _React$useState = React__default.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      errorCancelTaf = _React$useState2[0],
+      setErrorCancelTaf = _React$useState2[1];
 
   React__default.useEffect(function () {
     var cancelErrorMessageHandler = errorCancelTaf.length > 0 ? setTimeout(function () {
@@ -4311,44 +4590,53 @@ var getSelectedTaf = function getSelectedTaf(selectedTafId, tafList) {
 };
 
 var TafWrapper = function TafWrapper() {
-  var api = useApiContext().api;
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
   var confirmDialog = useConfirmationDialog();
 
-  var _a = __read(React__default.useState(false), 2),
-      isTafDialogOpen = _a[0],
-      setTafDialogOpen = _a[1];
+  var _React$useState3 = React__default.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isTafDialogOpen = _React$useState4[0],
+      setTafDialogOpen = _React$useState4[1];
 
-  var _b = __read(React__default.useState(null), 2),
-      selectedTafId = _b[0],
-      setselectedTafId = _b[1];
+  var _React$useState5 = React__default.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      selectedTafId = _React$useState6[0],
+      setselectedTafId = _React$useState6[1];
 
-  var _c = __read(React__default.useState(null), 2),
-      tafDialogAction = _c[0],
-      setTafDialogAction = _c[1];
+  var _React$useState7 = React__default.useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      tafDialogAction = _React$useState8[0],
+      setTafDialogAction = _React$useState8[1];
 
-  var _d = __read(React__default.useState(false), 2),
-      errorPostMessage = _d[0],
-      setErrorPostMessage = _d[1];
+  var _React$useState9 = React__default.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      errorPostMessage = _React$useState10[0],
+      setErrorPostMessage = _React$useState10[1];
 
-  var _e = __read(React__default.useState(''), 2),
-      errorPostMessageText = _e[0],
-      setErrorPostMessageText = _e[1];
+  var _React$useState11 = React__default.useState(''),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      errorPostMessageText = _React$useState12[0],
+      setErrorPostMessageText = _React$useState12[1];
 
-  var _f = __read(React__default.useState(false), 2),
-      showSpinner = _f[0],
-      setSpinner = _f[1]; // clear error message for cancel after 10 seconds
+  var _React$useState13 = React__default.useState(false),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      showSpinner = _React$useState14[0],
+      setSpinner = _React$useState14[1]; // clear error message for cancel after 10 seconds
 
 
-  var _g = __read(useTimeoutCancelError(), 2),
-      errorCancelTaf = _g[0],
-      setErrorCancelTaf = _g[1]; // Retrieve list of tafs
+  var _useTimeoutCancelErro = useTimeoutCancelError(),
+      _useTimeoutCancelErro2 = _slicedToArray(_useTimeoutCancelErro, 2),
+      errorCancelTaf = _useTimeoutCancelErro2[0],
+      setErrorCancelTaf = _useTimeoutCancelErro2[1]; // Retrieve list of tafs
 
 
-  var _h = useApi(api.getTafList),
-      errorList = _h.error,
-      isLoadingList = _h.isLoading,
-      tafList = _h.result,
-      fetchNewTafList = _h.fetchApiData;
+  var _useApi = useApi(api.getTafList),
+      errorList = _useApi.error,
+      isLoadingList = _useApi.isLoading,
+      tafList = _useApi.result,
+      fetchNewTafList = _useApi.fetchApiData;
 
   var getNewTafList = function getNewTafList() {
     fetchNewTafList({});
@@ -4379,7 +4667,9 @@ var TafWrapper = function TafWrapper() {
         description: 'Are you sure you want to cancel this TAF?',
         confirmLabel: 'Cancel'
       }).then(function () {
-        var taf = getSelectedTaf(tafUuid, tafList).taf;
+        var _getSelectedTaf = getSelectedTaf(tafUuid, tafList),
+            taf = _getSelectedTaf.taf;
+
         postTaf({
           taf: taf,
           changeStatusTo: 'CANCELLED'
@@ -4395,59 +4685,49 @@ var TafWrapper = function TafWrapper() {
   };
 
   var postTaf = function postTaf(data) {
-    return __awaiter(void 0, void 0, void 0, function () {
-      var error_1;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            setSpinner(true);
-            _a.label = 1;
-
-          case 1:
-            _a.trys.push([1, 3,, 4]);
-
-            return [4
-            /*yield*/
-            , api.postTaf(data)];
-
-          case 2:
-            _a.sent();
-
-            if (isTafDialogOpen) toggleTafDialog();
-            setSpinner(false); // fetch new taflist
-
-            getNewTafList(); // If a post has succeeded remove error message
-
-            setErrorCancelTaf([]);
-            return [3
-            /*break*/
-            , 4];
-
-          case 3:
-            error_1 = _a.sent();
-
-            if (data.changeStatusTo === 'CANCELLED') {
-              setErrorCancelTaf(__spreadArray(__spreadArray([], __read(errorCancelTaf)), [data.taf.uuid]));
-            } else {
-              setErrorPostMessage(true);
-
-              if (isAxiosError(error_1)) {
-                setErrorPostMessageText(getAxiosErrorMessage(error_1));
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setSpinner(true);
+              _context.prev = 1;
+              _context.next = 4;
+              return api.postTaf(data);
+
+            case 4:
+              if (isTafDialogOpen) toggleTafDialog();
+              setSpinner(false); // fetch new taflist
+
+              getNewTafList(); // If a post has succeeded remove error message
+
+              setErrorCancelTaf([]);
+              _context.next = 14;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](1);
+
+              if (data.changeStatusTo === 'CANCELLED') {
+                setErrorCancelTaf([].concat(_toConsumableArray(errorCancelTaf), [data.taf.uuid]));
+              } else {
+                setErrorPostMessage(true);
+
+                if (isAxiosError(_context.t0)) {
+                  setErrorPostMessageText(getAxiosErrorMessage(_context.t0));
+                }
               }
-            }
 
-            setSpinner(false);
-            return [3
-            /*break*/
-            , 4];
+              setSpinner(false);
 
-          case 4:
-            return [2
-            /*return*/
-            ];
+            case 14:
+            case "end":
+              return _context.stop();
+          }
         }
-      });
-    });
+      }, _callee, null, [[1, 10]]);
+    }));
   };
 
   var fromActionToStatus = function fromActionToStatus(tafAction) {
@@ -4543,18 +4823,34 @@ var ConfirmationWrapper = function ConfirmationWrapper() {
   return /*#__PURE__*/React__default.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React__default.createElement(TafWrapper, null));
 };
 
-var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl) {
-  var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl);
+/* *
+ * 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 createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
+  var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
   return {
     // api data
     getTafList: function getTafList() {
       return axiosInstance.get('/taflist');
     },
     postTaf: function postTaf(formData) {
-      return axiosInstance.post('/taf', __assign({}, formData));
+      return axiosInstance.post('/taf', Object.assign({}, formData));
     },
     getTAC: function getTAC(tafData) {
-      return axiosInstance.post('/taf2tac', __assign({}, tafData));
+      return axiosInstance.post('/taf2tac', Object.assign({}, tafData));
     }
   };
 };