@opengeoweb/taf 1.2.5 → 2.1.2

package/taf.esm.js

@@ -3,8 +3,8 @@ import React__default from 'react';
 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, ToolContainerDraggable, useConfirmationDialog, useIsMounted, usePreventBrowserClose, 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 { useIsMounted, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
+import { Add, Delete, DragIndicator, 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';
@@ -26,6 +26,72 @@ function _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);
@@ -43,29 +109,69 @@ function _arrayLikeToArray(arr, len) {
   return arr2;
 }
 
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+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;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
+
+      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.");
   }
 
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
+  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,19 +283,21 @@ function __awaiter(thisArg, _arguments, P, generator) {
  * 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
   };
 };
 
@@ -219,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
 
@@ -229,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,
@@ -268,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
@@ -284,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,11 +454,11 @@ var validateValidChangeGroupInterField = function validateValidChangeGroupInterF
     var tafStartMoment = moment.utc(tafStart);
     var tafEndMoment = moment.utc(tafEnd);
     var startEnd = trimmedValue.split('/');
-    var format = trimmedValue.indexOf('/') === -1 ? 'DDHHmm' : 'DDHH'; // Validate start time
+    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], 'DDHH');
+    var endSections = getSections(startEnd[1], FORMAT_DAYS_HOURS);
     var endTimestamp = getValidityTimeStamp('end', endSections, tafStartMoment, tafEndMoment);
     var timeDifference = endTimestamp.diff(startTimestamp, 'hours');
 
@@ -359,6 +467,57 @@ var validateValidChangeGroupInterField = function validateValidChangeGroupInterF
     }
   }
 
+  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;
+    }
+  }
+
   return true;
 };
 
@@ -380,8 +539,8 @@ var validateValidChangeGroupInterField = function validateValidChangeGroupInterF
  * */
 var prependZeroes = function prependZeroes(value, totalDigits) {
   var valueAsString = value.toString();
-  return [].concat(Array(totalDigits - valueAsString.length)).reduce(function (newVal) {
-    return "0" + newVal;
+  return _toConsumableArray(Array(totalDigits - valueAsString.length)).reduce(function (newVal) {
+    return "0".concat(newVal);
   }, valueAsString);
 };
 
@@ -393,9 +552,7 @@ var config$1 = [{
   size: 1
 }];
 var configAsObject$1 = Object.assign(config$1).reduce(function (list, item) {
-  var _Object$assign;
-
-  return Object.assign(Object.assign({}, list), (_Object$assign = {}, _Object$assign[item.key] = item, _Object$assign));
+  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,11 +1100,8 @@ var invalidWeatherBRVisibility = 'Invalid weather input, weather code BR needs t
 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, NSWAllowed) {
-  if (NSWAllowed === void 0) {
-    NSWAllowed = true;
-  }
-
+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 === '') {
@@ -1045,9 +1199,7 @@ function parseWeatherToObject(value) {
   var trimmedWeather = Object.keys(value).reduce(function (obj, key) {
     // only parse it if it has a value
     if (value[key] && value[key].trim()) {
-      var _Object$assign;
-
-      return Object.assign(Object.assign({}, obj), (_Object$assign = {}, _Object$assign[key] = obj[key].trim(), _Object$assign));
+      return Object.assign(Object.assign({}, obj), _defineProperty({}, key, obj[key].trim()));
     } // if it doesn't have a value, remove it from the list
 
 
@@ -1079,9 +1231,7 @@ var config = [{
   size: 2
 }];
 var configAsObject = Object.assign(config).reduce(function (list, item) {
-  var _Object$assign;
-
-  return Object.assign(Object.assign({}, list), (_Object$assign = {}, _Object$assign[item.key] = item, _Object$assign));
+  return Object.assign(Object.assign({}, list), _defineProperty({}, item.key, item));
 }, {}); // wind formatters:
 
 var formatWindValues = function formatWindValues(key, value) {
@@ -1117,7 +1267,7 @@ var formatWindValues = function formatWindValues(key, value) {
 
         var _size2 = configAsObject[key].size;
         var newValue = prependZeroes(value, _size2);
-        return "G" + newValue.toString();
+        return "G".concat(newValue.toString());
       }
 
     case 'unit':
@@ -1144,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;
@@ -1299,8 +1446,11 @@ var invalidWindDirectionMinMaxMessage = 'Invalid wind direction, the direction m
 var invalidWindDirectionStepMessage = 'Invalid wind direction, the direction must be rounded to the nearest step of 10 degrees';
 var invalidWindSpeedMessage = 'Invalid wind speed, expected a speed equal to 2 digits or P99';
 var invalidWindGustsMessage = 'Invalid wind gusts, expected gusts equal to 2 digits or P99';
-var invalidWindGustSpeedCombinationMessage = 'Invalid wind, wind gusts must at least be 10 knots greater than the wind speed';
-var invalidGustForWindP99Message = 'Invalid wind speed and gust combination, if wind is P99, gusts can only be empty or P99'; // validations
+var invalidWindGustSpeedCombinationMessage = 'Invalid wind gusts, gusts must at least be 10 knots greater than the wind speed';
+var invalidWindGustSpeedBelow15Message = 'Invalid wind gusts, gusts are only allowed for a minimum wind speed of 15 knots';
+var invalidGustForWindP99Message = 'Invalid wind speed and gust combination, if wind is P99, gusts can only be empty or P99';
+var invalidWindSpeedForDirectionZeroMessage = 'Invalid wind speed, if direction is 000, speed can only be 00';
+var invalidWindSpeedForDirectionNonZeroMessage = 'Invalid wind speed, if direction is not 000, speed can not be 00'; // validations
 
 var validateDirection = function validateDirection(value) {
   // if not a number
@@ -1348,8 +1498,16 @@ var validateUnit = function validateUnit(value) {
   return value === 'KT' || value === '' || invalidWindMessage;
 };
 
-var validateWindInterSection = function validateWindInterSection(speed, gust) {
-  if (gust === '' || gust === 'P99') {
+var validateWindInterSection = function validateWindInterSection(speed, gust, direction) {
+  if (direction === '000' && speed !== '00') {
+    return invalidWindSpeedForDirectionZeroMessage;
+  }
+
+  if (direction !== '000' && speed === '00') {
+    return invalidWindSpeedForDirectionNonZeroMessage;
+  }
+
+  if (gust === '') {
     return true;
   }
 
@@ -1357,7 +1515,15 @@ var validateWindInterSection = function validateWindInterSection(speed, gust) {
     return invalidGustForWindP99Message;
   }
 
-  return parseInt(gust, 10) - parseInt(speed, 10) >= 10 || invalidWindGustSpeedCombinationMessage;
+  if (parseInt(speed, 10) < 15) {
+    return invalidWindGustSpeedBelow15Message;
+  }
+
+  if (gust !== 'P99' && parseInt(gust, 10) - parseInt(speed, 10) < 10) {
+    return invalidWindGustSpeedCombinationMessage;
+  }
+
+  return true;
 }; // Main validation function
 
 
@@ -1383,12 +1549,12 @@ var validateWindField = function validateWindField(value) {
   } // Then do any intersection validation
 
 
-  return validateWindInterSection(windValidationIndv.speed, windValidationIndv.gust);
+  return validateWindInterSection(windValidationIndv.speed, windValidationIndv.gust, windValidationIndv.direction);
 };
 
 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
 
@@ -1401,32 +1567,24 @@ var formatCloudsToString = function formatCloudsToString(clouds) {
       switch (key) {
         case 'cloud1':
           {
-            var _Object$assign3;
-
             if (clouds[key].verticalVisibility !== undefined) {
-              var _Object$assign;
-
               // Format Vertical Visibility
-              return Object.assign(Object.assign({}, list), (_Object$assign = {}, _Object$assign[key] = "VV" + prependZeroes(clouds[key].verticalVisibility, 3), _Object$assign));
+              return Object.assign(Object.assign({}, list), _defineProperty({}, key, "VV".concat(prependZeroes(clouds[key].verticalVisibility, 3))));
             }
 
             if (clouds[key].coverage) {
-              var _Object$assign2;
-
               // Format Cloud
-              return Object.assign(Object.assign({}, list), (_Object$assign2 = {}, _Object$assign2[key] = formatSingleCloud(clouds[key]), _Object$assign2));
+              return Object.assign(Object.assign({}, list), _defineProperty({}, key, formatSingleCloud(clouds[key])));
             } // Format No Significant Clouds
 
 
-            return Object.assign(Object.assign({}, list), (_Object$assign3 = {}, _Object$assign3[key] = clouds[key], _Object$assign3));
+            return Object.assign(Object.assign({}, list), _defineProperty({}, key, clouds[key]));
           }
 
         default:
           {
-            var _Object$assign4;
-
             // Other cloud keys can only contain a cloud
-            return Object.assign(Object.assign({}, list), (_Object$assign4 = {}, _Object$assign4[key] = formatSingleCloud(clouds[key]), _Object$assign4));
+            return Object.assign(Object.assign({}, list), _defineProperty({}, key, formatSingleCloud(clouds[key])));
           }
       }
     }
@@ -1457,34 +1615,26 @@ var parseCloudsToObject = function parseCloudsToObject(clouds) {
       switch (key) {
         case 'cloud1':
           {
-            var _Object$assign7;
-
             if (isVerticalVisibility(clouds[key])) {
-              var _Object$assign5;
-
               // Parse Vertical Visibility
-              return Object.assign(Object.assign({}, list), (_Object$assign5 = {}, _Object$assign5[key] = {
+              return Object.assign(Object.assign({}, list), _defineProperty({}, key, {
                 verticalVisibility: parseInt(clouds[key].substr(2, 3), 10)
-              }, _Object$assign5));
+              }));
             }
 
             if (clouds[key] === 'NSC') {
-              var _Object$assign6;
-
               // Parse No Significant Clouds
-              return Object.assign(Object.assign({}, list), (_Object$assign6 = {}, _Object$assign6[key] = clouds[key], _Object$assign6));
+              return Object.assign(Object.assign({}, list), _defineProperty({}, key, clouds[key]));
             } // Parse Cloud
 
 
-            return Object.assign(Object.assign({}, list), (_Object$assign7 = {}, _Object$assign7[key] = parseSingleCloud(clouds[key]), _Object$assign7));
+            return Object.assign(Object.assign({}, list), _defineProperty({}, key, parseSingleCloud(clouds[key])));
           }
 
         default:
           {
-            var _Object$assign8;
-
             // Other cloud keys can only contain a cloud
-            return Object.assign(Object.assign({}, list), (_Object$assign8 = {}, _Object$assign8[key] = parseSingleCloud(clouds[key]), _Object$assign8));
+            return Object.assign(Object.assign({}, list), _defineProperty({}, key, parseSingleCloud(clouds[key])));
           }
       }
     } // if it doesn't have a value, remove it from the list
@@ -1868,7 +2018,7 @@ 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) {
@@ -1920,6 +2070,8 @@ function formatFormValues(row) {
 
 function reduceRowValues(row, tafStart, tafEnd) {
   return Object.keys(row).reduce(function (list, key) {
+    var _a;
+
     switch (key) {
       case 'valid':
         {
@@ -1958,9 +2110,7 @@ function reduceRowValues(row, tafStart, tafEnd) {
       case 'change':
       case 'probability':
         {
-          var _Object$assign;
-
-          return Object.assign(Object.assign({}, list), (_Object$assign = {}, _Object$assign[key] = list[key].trim(), _Object$assign));
+          return Object.assign(Object.assign({}, list), _defineProperty({}, key, (_a = list[key]) === null || _a === void 0 ? void 0 : _a.trim()));
         }
 
       default:
@@ -2132,8 +2282,7 @@ 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 && 'speed' in product.baseForecast.wind && product.baseForecast.wind.speed !== '' && (product.baseForecast.visibility && 'range' in product.baseForecast.visibility && product.baseForecast.visibility.range !== '' || product.baseForecast.cavOK)) {
@@ -2143,46 +2292,55 @@ var shouldRetrieveTAC = function shouldRetrieveTAC(product) {
   return false;
 };
 var getFieldNames = function getFieldNames(isChangeGroup, index) {
-  var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
+  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 _React$useState = React__default.useState(taf.status === 'NEW' ? 'No TAC available' : 'Retrieving TAC'),
-      TAC = _React$useState[0],
-      setTAC = _React$useState[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 () {
@@ -2198,22 +2356,16 @@ 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, onFormBlur) {
-  // create simple ordered list with hover (chosen) state
-  var _React$useState2 = React__default.useState([]),
-      sortedFields = _React$useState2[0],
-      setSortedFields = _React$useState2[1];
+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$useState3 = React__default.useState([null, null]),
-      lastDragOrder = _React$useState3[0],
-      onUpdatelastDragOrder = _React$useState3[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,
@@ -2221,45 +2373,30 @@ var useDragOrder = function useDragOrder(trigger, move, fields, onFormBlur) {
     if (oldIndex === undefined || newIndex === undefined) return;
     move(oldIndex, newIndex);
     onUpdatelastDragOrder([oldIndex, newIndex]);
+    setIsDragging(false);
   };
 
-  React__default.useEffect(function () {
-    setSortedFields(fields.map(function (_ref2) {
-      var id = _ref2.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 oldIndex = lastDragOrder[0],
-        newIndex = lastDragOrder[1];
+    var _lastDragOrder = _slicedToArray(lastDragOrder, 2),
+        oldIndex = _lastDragOrder[0],
+        newIndex = _lastDragOrder[1];
 
     if (oldIndex !== null && newIndex !== null) {
-      // trigger validation of moved rows
-      var _sort = [oldIndex, newIndex].sort(function (a, b) {
-        return a - b;
-      }),
-          start = _sort[0],
-          end = _sort[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]); // trigger onFormBlur AFTER render of new sorted elements so the TAC gets updated
 
   React__default.useEffect(function () {
-    var oldIndex = lastDragOrder[0],
-        newIndex = lastDragOrder[1];
+    var _lastDragOrder2 = _slicedToArray(lastDragOrder, 2),
+        oldIndex = _lastDragOrder2[0],
+        newIndex = _lastDragOrder2[1];
 
     if (oldIndex !== null && newIndex !== null) {
       onFormBlur();
@@ -2268,8 +2405,8 @@ var useDragOrder = function useDragOrder(trigger, move, fields, onFormBlur) {
   }, [lastDragOrder]);
   return {
     onChangeOrder: onChangeOrder,
-    sortedFields: sortedFields,
-    setSortedFields: setSortedFields
+    activeDraggingIndex: activeDraggingIndex,
+    onStartDrag: onStartDrag
   };
 }; // dialog utils
 
@@ -2281,11 +2418,22 @@ var getConfirmationDialogTitle = function getConfirmationDialogTitle(action) {
   return 'Cancel TAF';
 };
 var getConfirmationDialogContent = function getConfirmationDialogContent(action) {
-  if (action === 'DISCARD') return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
-  if (action === 'PUBLISH') return 'Are you sure you want to publish this TAF?';
-  if (action === 'AMEND') return 'Do you want to publish it?';
-  if (action === 'CORRECT') return 'Do you want to publish it?';
-  return 'Are you sure you want to cancel this TAF?';
+  var isFormDirty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+  switch (action) {
+    case 'DISCARD':
+      return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
+
+    case 'PUBLISH':
+      return 'Are you sure you want to publish this TAF?';
+
+    case 'AMEND':
+    case 'CORRECT':
+      return isFormDirty ? 'Do you want to publish it?' : 'Are you sure you want to publish the TAF? You did not make any changes!';
+
+    default:
+      return 'Are you sure you want to cancel this TAF?';
+  }
 };
 var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel(action) {
   switch (action) {
@@ -2362,7 +2510,7 @@ var useStyles$9 = makeStyles(function (theme) {
       borderRadius: '3px'
     },
     addButton: {
-      marginRight: '38px'
+      marginRight: '48px'
     },
     lifecycleButtons: {
       marginTop: '40px',
@@ -2377,27 +2525,13 @@ var useStyles$9 = makeStyles(function (theme) {
     backdrop: {
       zIndex: 1500,
       color: '#fff'
+    },
+    emptyButtonContainer: {
+      minWidth: 96
     }
   };
 });
 
-/* *
- * 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 getTafErrors = function getTafErrors(name, errors) {
   var nameAsArray = name.split('.');
 
@@ -2470,8 +2604,9 @@ var TafFormTextField = function TafFormTextField(_ref) {
   var fieldErrors = getTafErrors(name, errors);
 
   var _React$useState = React__default.useState(null),
-      maxLength = _React$useState[0],
-      setMaxLength = _React$useState[1];
+      _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();
@@ -2637,9 +2772,11 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       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"]);
+      onAddChangeGroup = _a.onAddChangeGroup,
+      props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroup"]);
 
-  var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
+  var classes = useStyles$9();
+  var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[".concat(index, "]");
   var fieldNames = getFieldNames(isChangeGroup, index);
 
   var _useFormContext = useFormContext(),
@@ -2651,9 +2788,10 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
 
 
   var _getRequiredCrossFiel = getRequiredCrossFields(fieldNames),
-      mainFields = _getRequiredCrossFiel[0],
-      mainOptionalFields = _getRequiredCrossFiel[1],
-      subFields = _getRequiredCrossFiel[2];
+      _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) {
@@ -2678,8 +2816,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';
 
@@ -2695,15 +2833,40 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
           return true;
         }
 
-        return fieldName + " is required";
+        return "".concat(fieldName, " is required");
       }
     }
 
     return true;
   };
 
+  var validatePreviousRow = React__default.useCallback(function () {
+    if (isChangeGroup && index > 0) {
+      var _getValues = getValues(),
+          validDateEnd = _getValues.validDateEnd,
+          validDateStart = _getValues.validDateStart,
+          changeGroups = _getValues.changeGroups;
+
+      var currentChangeGroup = changeGroups[index];
+      var previousChangeGroup = changeGroups[index - 1];
+      return validatePreviousChangeGroup(currentChangeGroup, previousChangeGroup, validDateStart, validDateEnd);
+    }
+
+    return true;
+  }, [index, isChangeGroup, getValues]);
+
+  var 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] : [];
+  };
+
+  var addChangeGroup = React__default.useCallback(function () {
+    onAddChangeGroup(index);
+  }, [onAddChangeGroup, index]);
   return /*#__PURE__*/React__default.createElement(Grid, Object.assign({
-    "data-testid": "row-" + namePrefix,
+    "data-testid": "row-".concat(namePrefix),
     container: true,
     ref: ref
   }, props), !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
@@ -2745,7 +2908,8 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     }],
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger([].concat(subFields, mainOptionalFields, mainFields));
+        var nextValidFieldName = getFieldFromNextRow();
+        trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName)));
       }
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
@@ -2774,7 +2938,8 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     }],
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger([].concat(subFields, mainOptionalFields, mainFields));
+        var nextValidFieldName = getFieldFromNextRow();
+        trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName)));
       }
     }
   })), /*#__PURE__*/React__default.createElement(TafFormTextField, {
@@ -2791,12 +2956,14 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
         },
         validateValidChangeGroupInterField: function validateValidChangeGroupInterField$1(value) {
           return isChangeGroup ? validateValidChangeGroupInterField(value, getValues(fieldNames.change), getValues('validDateStart'), getValues('validDateEnd')) : true;
-        }
+        },
+        validatePreviousRow: validatePreviousRow
       }
     },
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger([].concat(subFields, mainOptionalFields, mainFields));
+        var nextValidFieldName = getFieldFromNextRow();
+        trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainOptionalFields), _toConsumableArray(mainFields), _toConsumableArray(nextValidFieldName)));
       }
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
@@ -2815,7 +2982,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     },
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger([].concat(subFields, mainFields));
+        trigger([].concat(_toConsumableArray(subFields), _toConsumableArray(mainFields)));
       }
     },
     autoFocus: !isChangeGroup
@@ -2838,8 +3005,8 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       value: 'CAVOK'
     }],
     onBlur: function onBlur() {
-      var fields = isChangeGroup ? [].concat(subFields, mainFields) : subFields;
-      trigger([].concat(fields, [fieldNames.weather1, fieldNames.weather2, fieldNames.weather3]));
+      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",
@@ -2858,8 +3025,8 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       }
     },
     onBlur: function onBlur() {
-      var fields = isChangeGroup ? [].concat(subFields, mainFields) : [];
-      return trigger([].concat(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",
@@ -2874,8 +3041,8 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       }
     },
     onBlur: function onBlur() {
-      var fields = isChangeGroup ? [].concat(subFields, mainFields) : [];
-      return trigger([].concat(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",
@@ -2906,8 +3073,8 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       }
     },
     onBlur: function onBlur() {
-      var fields = isChangeGroup ? [].concat(subFields, mainFields) : [];
-      return trigger([].concat(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",
@@ -2952,12 +3119,20 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       }
     }
   }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default.createElement(Grid, {
+    className: classes.emptyButtonContainer,
     item: true,
     xs: true
-  }), isChangeGroup && !disabled && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: true
-  }, /*#__PURE__*/React__default.createElement(IconButton, Object.assign({
+  }, !disabled && /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "add",
+    "data-testid": "add-changeGroup",
+    onClick: addChangeGroup
+  }, /*#__PURE__*/React__default.createElement(Add, null))), isChangeGroup && !disabled && /*#__PURE__*/React__default.createElement(Grid, {
+    item: true
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "add",
+    "data-testid": "add-changeGroup",
+    onClick: addChangeGroup
+  }, /*#__PURE__*/React__default.createElement(Add, null)), /*#__PURE__*/React__default.createElement(IconButton, Object.assign({
     "aria-label": "delete",
     "data-testid": "remove-changeGroup",
     onClick: function onClick() {
@@ -2994,7 +3169,7 @@ var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
       return '1 issue';
 
     default:
-      return sumOfErrors + " issues";
+      return "".concat(sumOfErrors, " issues");
   }
 };
 
@@ -3096,23 +3271,6 @@ var useStyles$8 = makeStyles({
   }
 });
 
-/* *
- * 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 getPaneTitle = function getPaneTitle(sumOfErrors) {
   switch (sumOfErrors) {
     case 0:
@@ -3141,8 +3299,9 @@ var getErrorDefaultMessage = function getErrorDefaultMessage(error) {
 };
 
 var capitalizeWord = function capitalizeWord(_ref) {
-  var firstLetter = _ref[0],
-      restOfWord = _ref.slice(1);
+  var _ref2 = _toArray(_ref),
+      firstLetter = _ref2[0],
+      restOfWord = _ref2.slice(1);
 
   return firstLetter.toUpperCase() + restOfWord.join('');
 };
@@ -3151,19 +3310,19 @@ var humanizeErrorMessage = function humanizeErrorMessage(nameAsString) {
   var nameLowerCase = nameWithoutBrackets.toLowerCase();
 
   var _nameLowerCase$split$ = nameLowerCase.split(/([0-9]+)/) // split numbers from field and build array
-  . // split numbers from field and build array
-  filter(function (s) {
+  .filter(function (s) {
     return s.length;
   }),
-      fieldName = _nameLowerCase$split$[0],
-      fieldNumberedValue = _nameLowerCase$split$[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;
@@ -3172,17 +3331,18 @@ var getErrorMessage = function getErrorMessage(error, index) {
   var name = error.ref.name;
 
   var _name$split = name.split('.'),
-      firstNamePart = _name$split[0];
+      _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(_ref2) {
-  var isOpen = _ref2.isOpen,
-      handleClose = _ref2.handleClose,
-      _ref2$errorList = _ref2.errorList,
-      errorList = _ref2$errorList === void 0 ? [] : _ref2$errorList;
+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(ToolContainerDraggable, {
     startSize: {
@@ -3209,29 +3369,13 @@ var IssuesPane = function IssuesPane(_ref2) {
     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));
   })));
 };
 
-/* *
- * 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 getCustomError = function getCustomError(error) {
   var name = error.ref.name;
   var isChangeGroup = name.includes('changeGroups');
@@ -3264,7 +3408,7 @@ var getErrors = function getErrors(errors) {
       var errorValues = errorValue.reduce(function (l, i) {
         return l.concat(getErrorValues(i));
       }, []);
-      return list.concat.apply(list, errorValues);
+      return list.concat.apply(list, _toConsumableArray(errorValues));
     }
 
     return list.concat(getErrorValues(errorValue));
@@ -3305,8 +3449,9 @@ var TafFormButtons = function TafFormButtons(_ref) {
   var errorList = filterDuplicateErrors(getErrors(errors));
 
   var _React$useState = React__default.useState(false),
-      isIssuesPaneOpen = _React$useState[0],
-      setIsIssuesPaneOpen = _React$useState[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isIssuesPaneOpen = _React$useState2[0],
+      setIsIssuesPaneOpen = _React$useState2[1];
 
   var toggleIssuesPane = function toggleIssuesPane() {
     return setIsIssuesPaneOpen(!isIssuesPaneOpen);
@@ -3439,30 +3584,16 @@ var DragHandle = function DragHandle(_ref) {
       index = _ref.index;
   var classes = useStyles$7(isSorting);
   return /*#__PURE__*/React__default.createElement(IconButton, {
-    className: classes.dragHandle + " handle",
-    "data-testid": "dragHandle-" + index,
+    className: "".concat(classes.dragHandle, " handle"),
+    "data-testid": "dragHandle-".concat(index),
     disableRipple: true,
     disabled: isDisabled
   }, /*#__PURE__*/React__default.createElement(DragIndicator, 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 emptyRow = {
+var noop = function noop() {};
+
+var emptyChangegroup = {
   valid: '',
   wind: '',
   visibility: '',
@@ -3482,8 +3613,7 @@ var emptyRow = {
 };
 
 var TafForm = function TafForm(_ref) {
-  var mode = _ref.mode,
-      changeGroups = _ref.changeGroups,
+  var isDisabled = _ref.isDisabled,
       tafAction = _ref.tafAction,
       _ref$staticTAC = _ref.staticTAC,
       staticTAC = _ref$staticTAC === void 0 ? '' : _ref$staticTAC,
@@ -3504,55 +3634,49 @@ var TafForm = function TafForm(_ref) {
   var _useIsMounted = useIsMounted(),
       isMounted = _useIsMounted.isMounted;
 
-  var isDisabled = mode === 'view';
-
   var _useFormContext = useFormContext(),
       control = _useFormContext.control,
       handleSubmit = _useFormContext.handleSubmit,
       watch = _useFormContext.watch,
-      getValues = _useFormContext.getValues,
-      errors = _useFormContext.errors,
-      trigger = _useFormContext.trigger;
+      trigger = _useFormContext.trigger,
+      formState = _useFormContext.formState,
+      getValues = _useFormContext.getValues;
 
+  var isFormDirty = formState.isDirty,
+      errors = formState.errors;
+  usePreventBrowserClose(isFormDirty && !isDisabled);
   var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
   var _React$useState = React__default.useState(watch()),
-      delayedFormValues = _React$useState[0],
-      setDelayedFormValues = _React$useState[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      delayedFormValues = _React$useState2[0],
+      setDelayedFormValues = _React$useState2[1];
 
   var _useTACGenerator = useTACGenerator(convertTafValuesToObject(delayedFormValues), api.getTAC, staticTAC),
-      TAC = _useTACGenerator[0],
-      updateTAC = _useTACGenerator[1];
+      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
+      TAC = _useTACGenerator2[0],
+      updateTAC = _useTACGenerator2[1];
 
-  React__default.useEffect(function () {
-    if (!Object.keys(errors).length && staticTAC === '' && isMounted.current) {
-      updateTAC(convertTafValuesToObject(delayedFormValues));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [delayedFormValues]);
+  var hasErrors = Object.keys(errors).length;
 
   var onFormBlur = function onFormBlur() {
     setDelayedFormValues(getValues());
   };
 
-  var _React$useState2 = React__default.useState(false),
-      isFormDirty = _React$useState2[0],
-      setFormDirty = _React$useState2[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 _useFieldArray = useFieldArray({
-    control: control,
-    name: 'changeGroups'
-  }),
-      fields = _useFieldArray.fields,
-      append = _useFieldArray.append,
-      remove = _useFieldArray.remove,
-      move = _useFieldArray.move;
+  }, [hasErrors]);
 
   var onSubmit = function onSubmit(data) {
     // eslint-disable-next-line no-console
@@ -3562,7 +3686,7 @@ var TafForm = function TafForm(_ref) {
   var showConfirmDialog = function showConfirmDialog(action) {
     return confirmDialog({
       title: getConfirmationDialogTitle(action),
-      description: getConfirmationDialogContent(action),
+      description: getConfirmationDialogContent(action, isFormDirty),
       confirmLabel: getConfirmationDialogButtonLabel(action)
     });
   };
@@ -3606,38 +3730,65 @@ var TafForm = function TafForm(_ref) {
     }
   };
 
+  var _useFieldArray = useFieldArray({
+    control: control,
+    name: 'changeGroups'
+  }),
+      fields = _useFieldArray.fields,
+      insert = _useFieldArray.insert,
+      remove = _useFieldArray.remove,
+      move = _useFieldArray.move;
+
+  var _useDragOrder = useDragOrder(trigger, move, onFormBlur),
+      onChangeOrder = _useDragOrder.onChangeOrder,
+      onStartDrag = _useDragOrder.onStartDrag,
+      activeDraggingIndex = _useDragOrder.activeDraggingIndex;
+
+  var onRemoverow = function onRemoverow(index) {
+    confirmDialog({
+      title: 'Delete row',
+      description: 'Are you sure you want to delete this row?',
+      confirmLabel: 'Yes'
+    }).then(function () {
+      remove(index);
+      trigger(); // trigger all fields validation
+
+      onFormBlur();
+    });
+  }; // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/726 insert (react-hook-form) does not work well with focus (only last row will get focus), so added this dirty solution. This can be fixed in a better way in react-hook-form v7
+
+
+  var focusFirstInput = function focusFirstInput(rowIndex) {
+    var nextRowFirstInput = document.querySelector("[name=\"changeGroups[".concat(rowIndex, "].probability\"]"));
+
+    if (nextRowFirstInput) {
+      nextRowFirstInput.focus();
+    }
+  };
+
   var onAddRow = function onAddRow() {
-    append(emptyRow);
+    var rowIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+    var newRowIndex = rowIndex + 1;
+    insert(newRowIndex, emptyChangegroup, false); // adding rows and validation don't work well combined, with always skipping validation of fields of rows above the one the inserted row. A setTimeout prevents this issue
+
+    setTimeout(function () {
+      focusFirstInput(newRowIndex);
+      trigger(); // trigger all fields validation
+    }, 0);
   };
 
   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);
+    if (!isDisabled) {
+      // trigger validation on all changegroup validity times after initial load since they could be outside the new validity period
+      var validFields = fields.map(function (_field, index) {
+        return "changeGroups[".concat(index, "].valid");
       });
-    } else if (!isDisabled) {
-      append(emptyRow, false);
+      trigger(validFields);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
-
-  var _useDragOrder = useDragOrder(trigger, move, fields, onFormBlur),
-      onChangeOrder = _useDragOrder.onChangeOrder,
-      sortedFields = _useDragOrder.sortedFields,
-      setSortedFields = _useDragOrder.setSortedFields;
-
-  var onRemoverow = function onRemoverow(index) {
-    remove(index);
-    var newList = fields.length > 1 ? fields.filter(function (_, fieldIndex) {
-      return fieldIndex === index;
-    }) : [];
-    setSortedFields(newList);
-  };
-
   return /*#__PURE__*/React__default.createElement("form", {
     onSubmit: handleSubmit(onSubmit),
-    onChange: onFormChange,
     onBlur: onFormBlur
   }, /*#__PURE__*/React__default.createElement(Typography, {
     className: classes.tacTitle
@@ -3651,23 +3802,23 @@ var TafForm = function TafForm(_ref) {
       "data-testid": "tafform-tac-message-line"
     }, line);
   })), /*#__PURE__*/React__default.createElement(TafFormRow, {
-    disabled: isDisabled
+    disabled: isDisabled,
+    onAddChangeGroup: onAddRow
   }), /*#__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 (_ref2, index) {
-    var chosen = _ref2.chosen;
-    var item = fields[index];
+  }, fields.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(TafFormRow, {
       field: item,
       className: classes.formRow,
@@ -3676,27 +3827,18 @@ var TafForm = function TafForm(_ref) {
       lastRow: fields.length === index + 1,
       disabled: isDisabled,
       onRemoveChangeGroup: onRemoverow,
+      onAddChangeGroup: onAddRow,
       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, {
-    container: true,
-    item: true,
-    xs: 12,
-    justify: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "add",
-    "data-testid": "add-changeGroup",
-    onClick: onAddRow,
-    className: classes.addButton
-  }, /*#__PURE__*/React__default.createElement(Add, null))), /*#__PURE__*/React__default.createElement(TafFormButtons, {
+  })), !isDisabled && /*#__PURE__*/React__default.createElement(TafFormButtons, {
     tafAction: tafAction,
     onTafFormButtonPress: onTafButtonPress
-  })), hiddenInputFields.map(function (field) {
+  }), hiddenInputFields.map(function (field) {
     return /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
       name: field,
       key: field
@@ -3704,6 +3846,22 @@ var TafForm = function TafForm(_ref) {
   }), /*#__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';
@@ -3743,14 +3901,17 @@ var getAmendedCorrectedTafTimes = function getAmendedCorrectedTafTimes(taf, tafA
   });
 };
 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 Object.assign(Object.assign(Object.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]
   });
 };
 
@@ -3761,13 +3922,9 @@ var TafFormWrapper = function TafFormWrapper(_ref) {
       _ref$TAC = _ref.TAC,
       TAC = _ref$TAC === void 0 ? '' : _ref$TAC,
       onFormAction = _ref.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 _a = prepareTafValues(taf, tafAction),
-      _a$changeGroups = _a.changeGroups,
-      changeGroups = _a$changeGroups === void 0 ? [] : _a$changeGroups,
-      defaultValues = __rest(_a, ["changeGroups"]);
-
+  var taf = tafFromBackend.taf;
+  var isDisabled = mode === 'view';
+  var defaultValues = prepareTafValues(taf, tafAction, !isDisabled && !taf.changeGroups);
   var options = {
     defaultValues: defaultValues,
     mode: 'onTouched',
@@ -3777,8 +3934,7 @@ var TafFormWrapper = function TafFormWrapper(_ref) {
   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
@@ -4184,22 +4340,6 @@ var TafListButtons = function TafListButtons(_ref) {
   }, "Amend")));
 };
 
-/* *
- * 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 useStyles$3 = makeStyles({
   accordion: {
     marginBottom: '5px'
@@ -4238,8 +4378,9 @@ var TafListAccordion = function TafListAccordion(_ref) {
       api = _useApiContext.api;
 
   var _useTACGenerator = useTACGenerator(tafListItem.taf, api.getTAC),
-      TAC = _useTACGenerator[0],
-      requestTAC = _useTACGenerator[1];
+      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
+      TAC = _useTACGenerator2[0],
+      requestTAC = _useTACGenerator2[1];
 
   React__default.useEffect(function () {
     // only re-retrieve TAC if draft state
@@ -4344,10 +4485,10 @@ var TafListSection = function TafListSection(_ref) {
     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,
@@ -4386,20 +4527,29 @@ var TafList = function TafList(_ref) {
   var expiredTafs = [];
 
   if (tafList) {
-    for (var _iterator = _createForOfIteratorHelperLoose(tafList), _step; !(_step = _iterator()).done;) {
-      var taf = _step.value;
-      var now = moment.utc();
-      var baseTime = moment.utc(taf.taf.baseTime);
-      var activityPeriod = locationSettings[taf.taf.location].activity_period;
-      var nextBaseTime = moment.utc(taf.taf.baseTime).add(activityPeriod, 'hours');
-
-      if (taf.taf.status === 'EXPIRED') {
-        expiredTafs.push(taf);
-      } else if (baseTime < now && nextBaseTime > now) {
-        currentTafs.push(taf);
-      } else {
-        upcomingTafs.push(taf);
+    var _iterator = _createForOfIteratorHelper(tafList),
+        _step;
+
+    try {
+      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;
+        var nextBaseTime = moment.utc(taf.taf.baseTime).add(activityPeriod, 'hours');
+
+        if (taf.taf.status === 'EXPIRED') {
+          expiredTafs.push(taf);
+        } else if (baseTime < now && nextBaseTime > now) {
+          currentTafs.push(taf);
+        } else {
+          upcomingTafs.push(taf);
+        }
       }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
   }
 
@@ -4474,14 +4624,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 _React$useState = React__default.useState([]),
-      errorCancelTaf = _React$useState[0],
-      setErrorCancelTaf = _React$useState[1];
+      _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 () {
@@ -4510,34 +4659,41 @@ var TafWrapper = function TafWrapper() {
 
   var confirmDialog = useConfirmationDialog();
 
-  var _React$useState2 = React__default.useState(false),
-      isTafDialogOpen = _React$useState2[0],
-      setTafDialogOpen = _React$useState2[1];
+  var _React$useState3 = React__default.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isTafDialogOpen = _React$useState4[0],
+      setTafDialogOpen = _React$useState4[1];
 
-  var _React$useState3 = React__default.useState(null),
-      selectedTafId = _React$useState3[0],
-      setselectedTafId = _React$useState3[1];
+  var _React$useState5 = React__default.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      selectedTafId = _React$useState6[0],
+      setselectedTafId = _React$useState6[1];
 
-  var _React$useState4 = React__default.useState(null),
-      tafDialogAction = _React$useState4[0],
-      setTafDialogAction = _React$useState4[1];
+  var _React$useState7 = React__default.useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      tafDialogAction = _React$useState8[0],
+      setTafDialogAction = _React$useState8[1];
 
-  var _React$useState5 = React__default.useState(false),
-      errorPostMessage = _React$useState5[0],
-      setErrorPostMessage = _React$useState5[1];
+  var _React$useState9 = React__default.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      errorPostMessage = _React$useState10[0],
+      setErrorPostMessage = _React$useState10[1];
 
-  var _React$useState6 = React__default.useState(''),
-      errorPostMessageText = _React$useState6[0],
-      setErrorPostMessageText = _React$useState6[1];
+  var _React$useState11 = React__default.useState(''),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      errorPostMessageText = _React$useState12[0],
+      setErrorPostMessageText = _React$useState12[1];
 
-  var _React$useState7 = React__default.useState(false),
-      showSpinner = _React$useState7[0],
-      setSpinner = _React$useState7[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 _useTimeoutCancelErro = useTimeoutCancelError(),
-      errorCancelTaf = _useTimeoutCancelErro[0],
-      setErrorCancelTaf = _useTimeoutCancelErro[1]; // Retrieve list of tafs
+      _useTimeoutCancelErro2 = _slicedToArray(_useTimeoutCancelErro, 2),
+      errorCancelTaf = _useTimeoutCancelErro2[0],
+      setErrorCancelTaf = _useTimeoutCancelErro2[1]; // Retrieve list of tafs
 
 
   var _useApi = useApi(api.getTafList),
@@ -4618,7 +4774,7 @@ var TafWrapper = function TafWrapper() {
               _context.t0 = _context["catch"](1);
 
               if (data.changeStatusTo === 'CANCELLED') {
-                setErrorCancelTaf([].concat(errorCancelTaf, [data.taf.uuid]));
+                setErrorCancelTaf([].concat(_toConsumableArray(errorCancelTaf), [data.taf.uuid]));
               } else {
                 setErrorPostMessage(true);
 
@@ -4747,8 +4903,8 @@ var ConfirmationWrapper = function ConfirmationWrapper() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl) {
-  var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl);
+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() {