@opengeoweb/taf 1.2.2 → 2.1.0

package/taf.umd.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@material-ui/core'), require('@material-ui/lab'), require('moment'), require('@opengeoweb/shared'), require('@material-ui/icons'), require('@opengeoweb/api'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-sortablejs')) :
     typeof define === 'function' && define.amd ? define(['exports', 'react', '@material-ui/core', '@material-ui/lab', 'moment', '@opengeoweb/shared', '@material-ui/icons', '@opengeoweb/api', '@opengeoweb/form-fields', 'react-hook-form', 'react-sortablejs'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.core, global.lab, global.moment, global.shared, global.icons, global.api, global.formFields, global.reactHookForm, global.reactSortablejs));
-}(this, (function (exports, React, core, lab, moment, shared, icons, api, formFields, reactHookForm, reactSortablejs) { 'use strict';
+})(this, (function (exports, React, core, lab, moment, shared, icons, api, formFields, reactHookForm, reactSortablejs) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,14 +15,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -229,19 +227,21 @@
      * 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__default['default'].utc(valid.end).format('kk');
-      var endDate = endHours === '24' ? moment__default['default'].utc(valid.end).add(-1, 'day').format('DD') : moment__default['default'].utc(valid.end).format('DD');
-      return valid.end ? moment__default['default'].utc(valid.start).format('DDHH') + "/" + endDate + endHours : moment__default['default'].utc(valid.start).format('DDHHmm');
+      var endHours = moment__default["default"].utc(valid.end).format('kk');
+      var endDate = endHours === '24' ? moment__default["default"].utc(valid.end).add(-1, 'day').format('DD') : moment__default["default"].utc(valid.end).format('DD');
+      return valid.end ? moment__default["default"].utc(valid.start).format(FORMAT_DAYS_HOURS) + "/" + endDate + endHours : moment__default["default"].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
       };
     };
 
@@ -268,10 +268,10 @@
       if (!value) return null; // Create valid object from passed string
 
       var trimmedValue = value.trim();
-      var tafStartMoment = moment__default['default'].utc(tafStart);
-      var tafEndMoment = moment__default['default'].utc(tafEnd);
+      var tafStartMoment = moment__default["default"].utc(tafStart);
+      var tafEndMoment = moment__default["default"].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
 
@@ -281,7 +281,7 @@
         };
       }
 
-      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,
@@ -295,8 +295,8 @@
     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) {
@@ -317,10 +317,10 @@
 
 
     var validateIsValidDates = function validateIsValidDates(value, tafStart, tafEnd) {
-      var tafStartMoment = moment__default['default'].utc(tafStart);
-      var tafEndMoment = moment__default['default'].utc(tafEnd);
+      var tafStartMoment = moment__default["default"].utc(tafStart);
+      var tafEndMoment = moment__default["default"].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
@@ -336,7 +336,7 @@
 
 
       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
 
@@ -366,7 +366,7 @@
 
 
       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
 
 
@@ -380,16 +380,89 @@
 
       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__default["default"].utc(tafStart);
+        var tafEndMoment = moment__default["default"].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;
+        }
       }
 
-      var isValid = trimmedValue.length < 9 && trimmedValueChange === 'FM' || trimmedValue.length > 6 && trimmedValueChange !== 'FM';
-      return isValid ? true : invalidChangeValidInterFieldMessage;
+      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: " + 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,
+          _a = currentChangeGroup.change,
+          change = _a === void 0 ? '' : _a,
+          _b = currentChangeGroup.probability,
+          probability = _b === void 0 ? '' : _b;
+      var previousValid = nextChangeGroup.valid,
+          _c = nextChangeGroup.change,
+          previousChange = _c === void 0 ? '' : _c,
+          _d = nextChangeGroup.probability,
+          previousProbability = _d === void 0 ? '' : _d; // 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__default["default"](validValue.start);
+      var previousRowStartTime = moment__default["default"](previousValidValue.start);
+
+      if (currentStartTime.isBefore(previousRowStartTime)) {
+        return invalidPreviousChangeGroupIsBeforeMessage;
+      } // validate same valid time
+
+
+      if (currentStartTime.isSame(previousRowStartTime)) {
+        // validate change/probability order
+        var currentProbChangeValue = (probability + " " + change).trim();
+        var previousProbChangeValue = (previousProbability + " " + previousChange).trim();
+
+        if (validProbChangeOrder.indexOf(currentProbChangeValue) < validProbChangeOrder.indexOf(previousProbChangeValue)) {
+          return invalidPreviousChangeGroupOrderMessage;
+        } // validate same valid + change/probability value
+
+
+        if (currentProbChangeValue === previousProbChangeValue) {
+          return invalidPreviousChangeGroupHasSameValue;
+        }
+      }
+
+      return true;
     };
 
     /* *
@@ -963,22 +1036,62 @@
     })(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 validateWeatherField = function validateWeatherField(value, NSWAllowed) {
+    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, NSWAllowed) {
       if (NSWAllowed === void 0) {
         NSWAllowed = true;
       }
 
-      var trimmedValue = value.trim();
-      var isValid = trimmedValue === '' || trimmedValue in WeatherPhenomena || NSWAllowed && trimmedValue === 'NSW';
-      var errorMessage = NSWAllowed ? invalidWeatherMessage : invalidWeatherNSWMessage;
-      return isValid ? true : errorMessage;
+      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
+
+
+      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;
+      }
+
+      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) {
@@ -1001,9 +1114,9 @@
         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) {
@@ -1027,7 +1140,7 @@
         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
@@ -1485,7 +1598,8 @@
     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]+$/);
@@ -1602,11 +1716,15 @@
       };
     };
 
-    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
 
 
@@ -1638,7 +1756,7 @@
 
       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) {
@@ -1666,7 +1784,7 @@
       } // 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
 
@@ -1696,7 +1814,7 @@
 
       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) {
@@ -1724,7 +1842,7 @@
       } // 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
 
@@ -1744,7 +1862,7 @@
       } // 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
 
@@ -1762,7 +1880,7 @@
 
       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) {
@@ -1789,7 +1907,7 @@
       } // 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
 
@@ -1809,7 +1927,7 @@
       } // 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
 
@@ -1832,7 +1950,7 @@
     };
 
     var formatIssueTime = function formatIssueTime(issueDate) {
-      return issueDate ? moment__default['default'](issueDate).utc().format('DDHHmm') + "Z" : 'Not issued';
+      return issueDate ? moment__default["default"](issueDate).utc().format('DDHHmm') + "Z" : 'Not issued';
     };
     function formatFormValues(row) {
       return Object.keys(row).reduce(function (list, key) {
@@ -1886,6 +2004,8 @@
       return Object.keys(row).reduce(function (list, key) {
         var _a;
 
+        var _b;
+
         switch (key) {
           case 'valid':
             {
@@ -1924,7 +2044,7 @@
           case 'change':
           case 'probability':
             {
-              return __assign(__assign({}, list), (_a = {}, _a[key] = list[key].trim(), _a));
+              return __assign(__assign({}, list), (_a = {}, _a[key] = (_b = list[key]) === null || _b === void 0 ? void 0 : _b.trim(), _a));
             }
 
           default:
@@ -1935,9 +2055,7 @@
       }, 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) {
@@ -1983,7 +2101,7 @@
           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"]);
 
@@ -2008,14 +2126,26 @@
 
           case 'change':
           case 'probability':
+            // 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 + ""]);
+
+              return rest;
+            }
+
+            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 rest = __rest(_c, [_typeof(_d) === "symbol" ? _d : _d + ""]);
 
                 return rest;
               }
@@ -2029,9 +2159,7 @@
             }
         }
       }, 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"]);
@@ -2090,17 +2218,15 @@
             }
         }
       }, 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 && {
@@ -2123,54 +2249,55 @@
         cloud4: namePrefix + ".cloud.cloud4"
       });
     };
+    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, standardTAC) {
       if (standardTAC === void 0) {
         standardTAC = '';
       }
 
-      var _a = __read(React__default['default'].useState(taf.status === 'NEW' ? 'No TAC available' : 'Retrieving TAC'), 2),
+      var _a = __read(React__default["default"].useState(taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA), 2),
           TAC = _a[0],
           setTAC = _a[1];
 
+      var isMounted = shared.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['default'].useEffect(function () {
+      React__default["default"].useEffect(function () {
         if (taf.status !== 'NEW' && !standardTAC) {
           retrieveTAC(taf);
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
       }, []);
-      React__default['default'].useEffect(function () {
+      React__default["default"].useEffect(function () {
         if (standardTAC !== '') {
           setTAC(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['default'].useState([]), 2),
-          sortedFields = _a[0],
-          setSortedFields = _a[1];
+    var useDragOrder = function useDragOrder(trigger, move, onFormBlur) {
+      var _a = __read(React__default["default"].useState(null), 2),
+          activeDraggingIndex = _a[0],
+          setIsDragging = _a[1];
 
-      var _b = __read(React__default['default'].useState([null, null]), 2),
+      var _b = __read(React__default["default"].useState([null, null]), 2),
           lastDragOrder = _b[0],
           onUpdatelastDragOrder = _b[1];
 
@@ -2180,46 +2307,40 @@
         if (oldIndex === undefined || newIndex === undefined) return;
         move(oldIndex, newIndex);
         onUpdatelastDragOrder([oldIndex, newIndex]);
+        setIsDragging(false);
       };
 
-      React__default['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(_a) {
+        var oldIndex = _a.oldIndex;
+        return setIsDragging(oldIndex);
+      }; // triggers validation AFTER render of new sorted elements
+
 
-      React__default['default'].useEffect(function () {
+      React__default["default"].useEffect(function () {
         var _a = __read(lastDragOrder, 2),
             oldIndex = _a[0],
             newIndex = _a[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["default"].useEffect(function () {
+        var _a = __read(lastDragOrder, 2),
+            oldIndex = _a[0],
+            newIndex = _a[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
 
@@ -2351,9 +2472,9 @@
     var getDisplayValue = function getDisplayValue(value, disabled) {
       return disabled && !value ? '-' : value;
     };
-    var BaseTextField = /*#__PURE__*/React__default['default'].memo(function (props) {
+    var BaseTextField = /*#__PURE__*/React__default["default"].memo(function (props) {
       var classes = useStyles$9();
-      return /*#__PURE__*/React__default['default'].createElement(core.TextField, __assign({
+      return /*#__PURE__*/React__default["default"].createElement(core.TextField, __assign({
         type: "text",
         variant: "filled",
         InputProps: {
@@ -2399,14 +2520,14 @@
           setValue = _k.setValue,
           errors = _k.errors;
 
-      var inputRef = React__default['default'].useRef(null);
+      var inputRef = React__default["default"].useRef(null);
       var fieldErrors = getTafErrors(name, errors);
 
-      var _l = __read(React__default['default'].useState(null), 2),
+      var _l = __read(React__default["default"].useState(null), 2),
           maxLength = _l[0],
           setMaxLength = _l[1];
 
-      var onKeyDown = React__default['default'].useCallback(function (event) {
+      var onKeyDown = React__default["default"].useCallback(function (event) {
         var currentValue = getValues(name).toString();
         var textSelection = currentValue.substring(inputRef.current.selectionStart, inputRef.current.selectionEnd);
 
@@ -2423,7 +2544,7 @@
           }
         }
       }, [name, autoComplete, setValue, getValues]);
-      var onChangeField = React__default['default'].useCallback(function (event, callback) {
+      var onChangeField = React__default["default"].useCallback(function (event, callback) {
         var valueUppercase = event.currentTarget.value.toUpperCase();
 
         if (autoComplete) {
@@ -2437,24 +2558,24 @@
         callback(valueUppercase);
         onChange(valueUppercase);
       }, [onChange, autoComplete]);
-      var onBlurField = React__default['default'].useCallback(function (callback) {
+      var onBlurField = React__default["default"].useCallback(function (callback) {
         callback();
         onBlur();
       }, [onBlur]);
-      var onFocusField = React__default['default'].useCallback(function () {
+      var onFocusField = React__default["default"].useCallback(function () {
         var _a;
 
         inputRef.current.disabled = false;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }, []);
-      return /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: true,
         className: classes.textFieldGridItem
-      }, /*#__PURE__*/React__default['default'].createElement(reactHookForm.Controller, {
+      }, /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
         render: function render(_props) {
           var displayValue = formatter ? formatter(_props.value) : getDisplayValue(_props.value, disabled);
-          return /*#__PURE__*/React__default['default'].createElement(BaseTextField, {
+          return /*#__PURE__*/React__default["default"].createElement(BaseTextField, {
             label: label,
             disabled: disabled,
             name: name,
@@ -2500,7 +2621,7 @@
      * */
     // 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();
@@ -2552,10 +2673,11 @@
     };
 
     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['default'].forwardRef(function (_a, ref) {
+    var TafFormRow = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
       var _b = _a.isChangeGroup,
           isChangeGroup = _b === void 0 ? false : _b,
           _c = _a.disabled,
@@ -2589,11 +2711,16 @@
         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
 
 
@@ -2627,36 +2754,62 @@
         return true;
       };
 
-      return /*#__PURE__*/React__default['default'].createElement(core.Grid, __assign({
+      var validatePreviousRow = React__default["default"].useCallback(function () {
+        if (isChangeGroup && index > 0) {
+          var _a = getValues(),
+              validDateEnd = _a.validDateEnd,
+              validDateStart = _a.validDateStart,
+              changeGroups = _a.changeGroups;
+
+          var currentChangeGroup = changeGroups[index];
+          var previousChangeGroup = changeGroups[index - 1];
+          return validatePreviousChangeGroup(currentChangeGroup, previousChangeGroup, validDateStart, validDateEnd);
+        }
+
+        return true;
+      }, [index, isChangeGroup, getValues]);
+
+      var getFieldFromNextRow = function getFieldFromNextRow(fieldname) {
+        if (fieldname === void 0) {
+          fieldname = 'valid';
+        }
+
+        var nextValidFieldName = "changeGroups[" + (index + 1) + "]." + fieldname;
+        var nextRowValidValue = getValues(nextValidFieldName);
+        return nextRowValidValue ? [nextValidFieldName] : [];
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement(core.Grid, __assign({
         "data-testid": "row-" + namePrefix,
         container: true,
         ref: ref
-      }, props), !isChangeGroup && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }, props), !isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Type",
         name: fieldNames.messageType,
         disabled: true
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Location",
         name: "location",
         disabled: true
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         formatter: formatIssueTime,
         label: "Issue time",
         name: "issueDate",
         disabled: true
-      })), isChangeGroup && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      })), isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: true,
         style: {
           display: 'flex'
         }
-      }, dragHandle), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }, dragHandle), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Prob",
         name: fieldNames.probability,
         disabled: disabled,
         defaultValue: getDefaultValue('probability', field),
         rules: {
           validate: {
+            validateRequiredMainOptional: validateRequiredMainOptional,
             validateProbabilityField: validateProbabilityField
           }
         },
@@ -2669,19 +2822,18 @@
         }],
         onBlur: function onBlur() {
           if (isChangeGroup) {
-            trigger(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)));
+            var nextValidFieldName = getFieldFromNextRow();
+            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)));
           }
         }
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Change",
         name: fieldNames.change,
         disabled: disabled,
         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));
@@ -2700,10 +2852,11 @@
         }],
         onBlur: function onBlur() {
           if (isChangeGroup) {
-            trigger(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)));
+            var nextValidFieldName = getFieldFromNextRow();
+            trigger(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)));
           }
         }
-      })), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      })), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Valid",
         name: fieldNames.valid,
         // always disabled for baseforecast row
@@ -2711,23 +2864,23 @@
         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(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)), __read(nextValidFieldName)));
           }
         }
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Wind",
         name: fieldNames.wind,
         disabled: disabled,
@@ -2747,7 +2900,7 @@
           }
         },
         autoFocus: !isChangeGroup
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Visibility",
         name: fieldNames.visibility,
         disabled: disabled,
@@ -2766,9 +2919,10 @@
           value: 'CAVOK'
         }],
         onBlur: function onBlur() {
-          trigger(isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : subFields);
+          var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : subFields;
+          trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather1, fieldNames.weather2, fieldNames.weather3]));
         }
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Weather",
         name: fieldNames.weather1,
         disabled: disabled,
@@ -2780,7 +2934,7 @@
             },
             validateRequiredSub: validateRequiredSub,
             validateWeatherField: function validateWeatherField$1(value) {
-              return validateWeatherField(value, !!isChangeGroup);
+              return validateWeatherField(value, getValues(fieldNames.visibility), !!isChangeGroup);
             }
           }
         },
@@ -2788,7 +2942,7 @@
           var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
           return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather2, fieldNames.weather3]));
         }
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Weather",
         name: fieldNames.weather2,
         disabled: disabled,
@@ -2796,7 +2950,7 @@
         rules: {
           validate: {
             validateSecondWeatherField: function validateSecondWeatherField$1(value) {
-              return validateSecondWeatherField(getValues(fieldNames.weather1), value);
+              return validateSecondWeatherField(getValues(fieldNames.weather1), value, getValues(fieldNames.visibility));
             }
           }
         },
@@ -2804,7 +2958,7 @@
           var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
           return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather3]));
         }
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Weather",
         name: fieldNames.weather3,
         disabled: disabled,
@@ -2812,11 +2966,11 @@
         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));
             }
           }
         }
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Cloud",
         name: fieldNames.cloud1,
         disabled: disabled,
@@ -2827,14 +2981,16 @@
               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]));
         }
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Cloud",
         name: fieldNames.cloud2,
         disabled: disabled,
@@ -2842,14 +2998,14 @@
         rules: {
           validate: {
             validateSecondCloud: function validateSecondCloud$1(value) {
-              return validateSecondCloud(getValues(fieldNames.cloud1), value);
+              return validateSecondCloud(getValues(fieldNames.cloud1), value, getValues(fieldNames.visibility));
             }
           }
         },
         onBlur: function onBlur() {
           return trigger([fieldNames.cloud3, fieldNames.cloud4]);
         }
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Cloud",
         name: fieldNames.cloud3,
         disabled: disabled,
@@ -2857,14 +3013,14 @@
         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));
             }
           }
         },
         onBlur: function onBlur() {
           return trigger(fieldNames.cloud4);
         }
-      }), /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Cloud",
         name: fieldNames.cloud4,
         disabled: disabled,
@@ -2872,17 +3028,17 @@
         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));
             }
           }
         }
-      }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: true
-      }), isChangeGroup && !disabled && /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }), isChangeGroup && !disabled && /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: true
-      }, /*#__PURE__*/React__default['default'].createElement(core.IconButton, __assign({
+      }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, __assign({
         "aria-label": "delete",
         "data-testid": "remove-changeGroup",
         onClick: function onClick() {
@@ -2890,7 +3046,7 @@
         }
       }, lastRow ? {
         tabIndex: '-1'
-      } : {}), /*#__PURE__*/React__default['default'].createElement(icons.Delete, null))));
+      } : {}), /*#__PURE__*/React__default["default"].createElement(icons.Delete, null))));
     });
 
     var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
@@ -2933,6 +3089,7 @@
       return /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
         title: "View details"
       }, /*#__PURE__*/React__namespace.createElement(core.Chip, {
+        "data-testid": "issuesButton",
         size: "small",
         label: getIssuesLabel(sumOfErrors),
         style: __assign({}, buttonStyle(color)),
@@ -2941,20 +3098,20 @@
     };
 
     var ThumbsUp = function ThumbsUp(props) {
-      return /*#__PURE__*/React__default['default'].createElement(core.SvgIcon, __assign({
+      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, __assign({
         fontSize: "inherit",
         viewBox: "0 0 58 69"
-      }, props), /*#__PURE__*/React__default['default'].createElement("title", null, "Thumbs up"), /*#__PURE__*/React__default['default'].createElement("g", {
+      }, props), /*#__PURE__*/React__default["default"].createElement("title", null, "Thumbs up"), /*#__PURE__*/React__default["default"].createElement("g", {
         id: "Thumbs-up",
         stroke: "none",
         strokeWidth: "1",
         fill: "none",
         fillRule: "evenodd"
-      }, /*#__PURE__*/React__default['default'].createElement("path", {
+      }, /*#__PURE__*/React__default["default"].createElement("path", {
         d: "M3.99883665,31.7843145 C7.41834232,30.0745617 7.39773108,30.3805485 10.9988366,28.8843145 C14.5999422,27.3880805 16.06167,27.0500418 18.1988366,25.8843145 C19.0904815,25.3979628 19.820202,24.8243341 20.5488366,24.1634286 C20.9845024,23.7682595 22.8819728,21.7794437 23.5488366,20.8277879 C24.2586546,19.8148341 25.1756722,18.5003429 25.9988366,16.8843145 C28.3936103,12.1829184 28.889513,9.4076237 29.8988366,6.88431453 C30.4506375,5.50481234 31.0206747,4.13576029 31.6089482,2.77715837 C31.8562473,2.20602771 32.1648239,1.47549588 32.9988366,0.88431453 C33.2365758,0.715795602 34.0556054,0.253858312 35.0144255,0.0843145301 C36.0262338,-0.0945989315 37.1937102,0.0296108539 37.9980376,0.28431453 C38.7449403,0.520833719 39.4692925,0.860990256 40.1710941,1.30478414 C40.2879689,1.37869154 41.2393256,2.13799569 41.8988366,3.58269657 C42.290748,4.4412034 42.5040976,4.92788584 42.7988366,6.88431453 C42.9953293,8.18860032 43.0453293,9.52193365 42.9488366,10.8843145 C42.947848,11.8251839 42.6645146,13.1585172 42.0988366,14.8843145 C41.9160014,15.4421169 41.6403041,16.2990156 41.2988366,17.1941099 C40.9325633,18.1542284 40.4965053,19.1582935 40.1988366,19.8843145 C39.1594737,22.4193462 37.7498356,25.6900566 37.4561402,26.5124038 C37.2603433,27.0606352 37.1745754,27.6512721 37.1988366,28.2843145 C37.21217,28.4109812 37.2455033,28.5187344 37.2988366,28.6075742 C37.35217,28.6964139 37.45217,28.821994 37.5988366,28.9843145 C38.7401033,28.7100145 39.6802034,28.5266812 40.4191367,28.4343145 C41.6262088,28.2834305 44.7342553,28.0975232 47.4943878,28.1962584 C50.2545202,28.2949937 51.7465936,28.4428269 52.9988366,28.8843145 C53.8336653,29.1786396 54.540332,29.8453063 55.1188366,30.8843145 C55.3507184,31.5616882 55.477385,32.2303996 55.4988366,32.8904489 C55.5202882,33.5504981 55.4369549,34.21512 55.2488366,34.8843145 C54.956044,35.585751 54.5393773,36.1190843 53.9988366,36.4843145 C53.4582959,36.8495447 52.6416293,37.1495447 51.5488366,37.3843145 C51.46217,37.6709812 51.4455033,37.9376479 51.4988366,38.1843145 C51.55217,38.4309812 51.7188366,38.5976479 51.9988366,38.6843145 C53.0027645,38.7154727 53.6750204,38.7821393 54.0156044,38.8843145 C54.7031375,39.0905745 55.3642149,39.4239078 55.9988366,39.8843145 C56.4980387,40.3674862 56.831372,40.7202741 56.9988366,40.9426784 C57.2459451,41.2708552 57.8988366,42.3863253 57.8988366,43.8843145 C57.8988366,44.882974 57.53217,45.882974 56.7988366,46.8843145 C56.4100652,47.2645006 55.9767318,47.5818962 55.4988366,47.8365013 C55.0209415,48.0911064 54.5157721,48.2737108 53.9833285,48.3843145 L52.6988366,48.3843145 C52.2988366,48.6576479 52.0988366,48.9643145 52.0988366,49.3043145 C52.0988366,49.6443145 52.1655033,49.9376479 52.2988366,50.1843145 L53.4440689,50.6343145 C54.0486381,50.9097065 54.566894,51.3263732 54.9988366,51.8843145 C55.2403033,52.1962176 55.7126861,53.1830494 55.7488366,53.8843145 C55.7849872,54.5855797 55.7892838,54.8412841 55.675362,55.3021772 C55.5409724,55.8458769 55.3321306,56.373256 54.9488366,56.8843145 C54.6880408,57.2320423 54.3421972,57.542124 54.0113058,57.8145598 C53.720974,58.0536013 53.0623839,58.3923099 52.0355354,58.6843145 C51.8426264,58.739172 51.4970601,58.8058387 50.9988366,58.8843145 L49.2488366,58.9843145 C48.96217,59.1509812 48.7955033,59.3509812 48.7488366,59.5843145 C48.70217,59.8176479 48.7855033,60.0643145 48.9988366,60.3243145 L50.0168579,60.6843145 C51.0110333,61.2176479 51.5216929,61.9496429 51.5488366,62.8802998 C51.5895523,64.276285 51.475285,65.4556464 50.0016466,66.7843145 C49.4876586,67.2477386 48.8545536,67.4912052 48.1023318,67.7343145 C47.6452927,67.8820242 46.8607943,68.0486909 45.7488366,68.2343145 L40.0010327,68.6843145 C38.1462353,68.7443145 36.81217,68.7776479 35.9988366,68.7843145 C34.7788366,68.7943145 28.6377735,68.7414839 25.3910307,68.5132824 C22.1442879,68.2850808 21.4236621,68.1168902 18.9258088,67.5843145 C16.4279556,67.0517389 16.0894589,66.9976619 13.9988366,66.0843145 C12.6050885,65.4754163 11.2717551,64.6754163 9.99883665,63.6843145 L5.99912679,59.8445931 C5.6005732,59.505994 5.13964906,59.1744645 4.61635438,58.8500046 C3.83141237,58.3633147 3.44878136,58.2942773 2.99883665,57.9843145 C2.44718062,57.6042838 2.05635486,57.1737105 1.71932092,56.7662516 C1.30382099,56.2639309 0.723401214,54.7703696 0.498836646,53.8721113 C0.239479861,52.8346842 0.182966814,51.4491222 0.134208514,50.425802 C0.00166588165,47.644049 0.0975252306,47.2982714 0.0687602378,44.8458357 C0.0452570713,42.8420109 -0.0277106081,40.4082829 0.0112302522,39.9409643 C0.224109489,37.3862585 0.450803729,36.3915418 0.898836646,34.8843145 C1.09883665,34.2114947 1.78104521,33.1945675 2.17275045,32.889441 C2.5644557,32.5843145 3.13875358,32.2143561 3.99883665,31.7843145 Z",
         id: "Path-2",
         fill: "#FFBF00"
-      }), /*#__PURE__*/React__default['default'].createElement("path", {
+      }), /*#__PURE__*/React__default["default"].createElement("path", {
         d: "M37.1988366,28.2843145 C36.6491114,28.3570112 36.2566531,28.4236779 36.0214618,28.4843145 C35.0603746,28.7321005 34.3937143,29.0314706 34.021481,29.207818 C33.777778,29.3232735 32.5285093,30.04554 31.6988366,30.8956082 C31.0356177,31.5751308 30.7670551,32.3363186 30.5620165,32.9344937 C29.9561734,34.7019667 30.4904911,36.5989836 30.5988366,36.8981554 C30.8174274,37.5017447 31.0945063,37.9694877 31.2988366,38.4843145 C31.4064264,38.7553957 31.4498365,39.7521385 31.3985954,40.9130014 C31.388536,41.1408948 31.3995111,42.8738523 30.5816296,45.1307691 C30.125032,46.3907349 29.4940749,47.743868 28.6988366,48.906031 C27.6082165,50.4998658 26.3589437,51.7345157 26.1988366,51.8770596 C25.2520649,52.7199732 23.8988366,53.516454 23.3777374,54.1031009 C22.8566381,54.6897478 22.8988366,54.7174426 22.8988366,54.8843145 C22.8988366,55.0643438 22.9342857,55.2139882 23.0063234,55.32641 C23.2544011,55.7135594 23.9363916,55.6592779 25.0988366,54.8843145 C25.8683088,54.3713331 26.8213311,53.5952018 27.5988366,52.8259025 C28.3369913,52.0955388 28.9092218,51.3713331 29.2988366,50.8843145 C29.6096134,50.4958436 30.1890589,49.8244169 30.7488366,48.8700346 C31.0160857,48.4143934 31.4327524,47.5858201 31.9988366,46.3843145 C31.9988366,46.7176479 32.33217,47.2176479 32.9988366,47.8843145 C33.1686748,48.0541527 33.5020081,48.3041527 33.9988366,48.6343145 C33.535822,48.6343145 33.2024887,48.6676479 32.9988366,48.7343145 C31.9774176,49.1343145 31.4345654,49.3440777 30.8488366,49.8843145 C30.1709576,50.5095446 29.6310297,51.1756019 29.3988366,52.3843145 C29.1722814,53.5636787 29.3142136,54.632966 29.6488366,55.5921767 C29.928312,56.3933044 30.3156141,57.1176481 30.9865396,57.7652076 C31.1856402,57.9573742 31.5230725,58.2304098 31.9988366,58.5843145 C30.2988366,59.4509812 29.4488366,60.8843145 29.4488366,62.8843145 C29.4488366,65.8843145 31.4988366,68.7843145 35.9988366,68.7843145 C37.2162866,68.7843145 38.5382158,68.7607397 39.9988366,68.6843145 C41.1579568,68.623665 43.0746234,68.473665 45.7488366,68.2343145 C42.81999,68.0652276 40.9033233,67.948561 39.9988366,67.8843145 C38.4397862,67.7735739 34.9576244,67.4218793 34.5109642,67.2843145 C33.8898949,67.0930342 33.3876529,66.66767 32.9988366,66.3843145 C31.7988366,65.509797 31.6488366,63.8668327 31.6488366,63.3843145 C31.6488366,62.6767971 32.115551,61.4820497 32.7124803,60.9291427 C33.2967248,60.387985 34.101504,59.9827037 34.9988366,59.8343145 C36.8129843,59.5343145 37.8279851,59.6343145 38.9968712,59.6343145 C41.8836014,59.6343145 46.4559662,59.9063364 47.0327603,59.9503801 C47.6352731,59.9963876 48.2906319,60.1194654 48.9988366,60.3196132 C48.7881139,60.0647262 48.7047806,59.8196266 48.7488366,59.5843145 C48.7928927,59.3490025 48.9595594,59.1490025 49.2488366,58.9843145 C41.7042463,58.5910176 37.2875796,58.2576842 35.9988366,57.9843145 C34.0657222,57.57426 33.0783849,56.5232188 32.4988366,55.3843145 C32.1808463,54.7594131 31.9988366,54.0680377 32.1988366,52.8843145 C32.4054546,51.661422 33.0758788,51.154421 33.9988366,50.7343145 C35.0343809,50.2629616 36.2160776,50.213626 38.0168693,50.1343145 C41.4226671,49.9843145 41.9988366,49.8715355 44.9988366,49.8843145 C47.4322993,49.8928339 49.8656327,49.9928339 52.2988366,50.1843145 C52.1655033,49.9452767 52.0988366,49.6535253 52.0988366,49.3090604 C52.0988366,48.9645954 52.2988366,48.6563468 52.6988366,48.3843145 C49.4970675,48.4374708 47.2644784,48.4840975 46.0010696,48.5241946 C42.8267531,48.6249387 40.1650305,48.7843145 38.0159019,48.6090596 C36.5073153,48.3843145 35.5349602,47.7454709 35.0988366,47.3586886 C33.5267511,45.9644623 33.6909724,44.1458838 33.6988366,43.902953 C33.7490538,42.3517256 34.2594453,41.6540102 34.9988366,41.2843145 C36.9988366,40.2843145 38.521019,40.3843145 40.9988366,39.8843145 L51.9988366,38.6843145 C51.7847588,38.5992008 51.6347588,38.4325341 51.5488366,38.1843145 C51.4629145,37.9360949 51.4629145,37.6694283 51.5488366,37.3843145 C48.6830402,37.6590904 46.693269,37.8590904 45.579523,37.9843145 C44.2653604,38.1320725 42.7384649,38.3154059 40.9988366,38.5343145 C38.9988366,38.6009812 37.6749072,38.5733169 37.0270482,38.4513217 C35.0988366,38.2216852 33.4888366,37.4843145 33.4388366,34.8545872 C33.3888366,32.7744565 33.7430954,32.2207578 33.8988366,31.9295788 C34.3117653,31.1575537 34.9128559,30.575799 35.3988366,30.1843145 C36.0681111,29.6451768 36.8014444,29.2451768 37.5988366,28.9843145 C37.4503711,28.8228789 37.3503711,28.6970685 37.2988366,28.6068833 C37.2473022,28.516698 37.2139689,28.4091751 37.1988366,28.2843145 Z",
         id: "Path",
         fill: "#F28700"
@@ -2978,32 +3135,9 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
     var useStyles$8 = core.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'
@@ -3076,23 +3210,28 @@
     };
 
     var IssuesPane = function IssuesPane(_a) {
-      var handleClose = _a.handleClose,
+      var isOpen = _a.isOpen,
+          handleClose = _a.handleClose,
           _b = _a.errorList,
           errorList = _b === void 0 ? [] : _b;
       var classes = useStyles$8();
-      return /*#__PURE__*/React__namespace.createElement(core.Paper, {
-        elevation: 3,
-        className: classes.issuesPane
+      return /*#__PURE__*/React__namespace.createElement(shared.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__namespace.createElement("div", {
-        className: classes.paneHeader
-      }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
-        "data-testid": "issuesPaneTitle",
-        className: classes.paneTitle
-      }, getPaneTitle(errorList.length)), /*#__PURE__*/React__namespace.createElement(core.IconButton, {
-        "data-testid": "closeIssuesPane",
-        size: "small",
-        onClick: handleClose
-      }, /*#__PURE__*/React__namespace.createElement(icons.Close, null))), /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.paneContent
       }, errorList.length === 0 && /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.image,
@@ -3150,7 +3289,7 @@
 
     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;
@@ -3158,6 +3297,13 @@
           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);
       }, []);
     };
@@ -3169,7 +3315,7 @@
       var errors = reactHookForm.useFormContext().errors;
       var errorList = filterDuplicateErrors(getErrors(errors));
 
-      var _b = __read(React__default['default'].useState(false), 2),
+      var _b = __read(React__default["default"].useState(false), 2),
           isIssuesPaneOpen = _b[0],
           setIsIssuesPaneOpen = _b[1];
 
@@ -3177,19 +3323,19 @@
         return setIsIssuesPaneOpen(!isIssuesPaneOpen);
       };
 
-      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         container: true,
         justify: "space-between",
         alignItems: "center",
         className: classes.lifecycleButtons
-      }, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true
-      }, /*#__PURE__*/React__default['default'].createElement(IssuesButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(IssuesButton, {
         sumOfErrors: errorList.length,
         togglePane: toggleIssuesPane
-      })), /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true
-      }, /*#__PURE__*/React__default['default'].createElement(core.Button, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Button, {
         "data-testid": "discardtaf",
         variant: "outlined",
         color: "secondary",
@@ -3199,7 +3345,7 @@
           // Simply discard the changes and close the dialog.
           onTafFormButtonPress('DISCARD');
         }
-      }, "Discard"), /*#__PURE__*/React__default['default'].createElement(core.Button, {
+      }, "Discard"), /*#__PURE__*/React__default["default"].createElement(core.Button, {
         "data-testid": "savedrafttaf",
         variant: "outlined",
         color: "secondary",
@@ -3229,7 +3375,7 @@
               break;
           }
         }
-      }, "Save"), /*#__PURE__*/React__default['default'].createElement(core.Button, {
+      }, "Save"), /*#__PURE__*/React__default["default"].createElement(core.Button, {
         "data-testid": "publishtaf",
         variant: "outlined",
         color: "secondary",
@@ -3259,9 +3405,10 @@
               break;
           }
         }
-      }, "Publish"))), isIssuesPaneOpen && /*#__PURE__*/React__default['default'].createElement(IssuesPane, {
+      }, "Publish"))), /*#__PURE__*/React__default["default"].createElement(IssuesPane, {
         errorList: errorList,
-        handleClose: toggleIssuesPane
+        handleClose: toggleIssuesPane,
+        isOpen: isIssuesPaneOpen
       }));
     };
 
@@ -3299,17 +3446,20 @@
       var _b = _a.isSorting,
           isSorting = _b === void 0 ? false : _b,
           _c = _a.isDisabled,
-          isDisabled = _c === void 0 ? false : _c;
+          isDisabled = _c === void 0 ? false : _c,
+          index = _a.index;
       var classes = useStyles$7(isSorting);
-      return /*#__PURE__*/React__default['default'].createElement(core.IconButton, {
+      return /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
         className: classes.dragHandle + " handle",
-        "data-testid": "dragHandle",
+        "data-testid": "dragHandle-" + index,
         disableRipple: true,
         disabled: isDisabled
-      }, /*#__PURE__*/React__default['default'].createElement(icons.DragIndicator, null));
+      }, /*#__PURE__*/React__default["default"].createElement(icons.DragIndicator, null));
     };
 
-    var emptyRow = {
+    var noop = function noop() {};
+
+    var emptyChangegroup = {
       valid: '',
       wind: '',
       visibility: '',
@@ -3329,8 +3479,7 @@
     };
 
     var TafForm = function TafForm(_a) {
-      var mode = _a.mode,
-          changeGroups = _a.changeGroups,
+      var isDisabled = _a.isDisabled,
           tafAction = _a.tafAction,
           _b = _a.staticTAC,
           staticTAC = _b === void 0 ? '' : _b,
@@ -3346,19 +3495,22 @@
           DraftFieldHelper = _d.DraftFieldHelper;
 
       var api$1 = api.useApiContext().api;
-      var isDisabled = mode === 'view';
+      var isMounted = shared.useIsMounted().isMounted;
 
       var _e = reactHookForm.useFormContext(),
           control = _e.control,
           handleSubmit = _e.handleSubmit,
           watch = _e.watch,
-          getValues = _e.getValues,
-          errors = _e.errors,
-          trigger = _e.trigger;
+          trigger = _e.trigger,
+          formState = _e.formState,
+          getValues = _e.getValues;
 
+      var isFormDirty = formState.isDirty,
+          errors = formState.errors;
+      shared.usePreventBrowserClose(isFormDirty && !isDisabled);
       var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
-      var _f = __read(React__default['default'].useState(watch()), 2),
+      var _f = __read(React__default["default"].useState(watch()), 2),
           delayedFormValues = _f[0],
           setDelayedFormValues = _f[1];
 
@@ -3366,35 +3518,26 @@
           TAC = _g[0],
           updateTAC = _g[1];
 
-      React__default['default'].useEffect(function () {
-        if (!Object.keys(errors).length && staticTAC === '') {
-          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 _h = __read(React__default['default'].useState(false), 2),
-          isFormDirty = _h[0],
-          setFormDirty = _h[1];
-
-      var onFormChange = function onFormChange() {
-        return !isFormDirty ? setFormDirty(true) : null;
-      };
+      React__default["default"].useEffect(function () {
+        if (staticTAC === '' && isMounted.current && isFormDirty) {
+          var newTAC = hasErrors ? null : convertTafValuesToObject(delayedFormValues);
+          updateTAC(newTAC);
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-      shared.usePreventBrowserClose(isFormDirty && !isDisabled);
+      }, [delayedFormValues]);
+      React__default["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 = reactHookForm.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
@@ -3448,69 +3591,69 @@
         }
       };
 
-      var onAddRow = function onAddRow() {
-        append(emptyRow);
-      };
-
-      React__default['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 _h = reactHookForm.useFieldArray({
+        control: control,
+        name: 'changeGroups'
+      }),
+          fields = _h.fields,
+          append = _h.append,
+          remove = _h.remove,
+          move = _h.move;
 
-      }, []);
+      var lastTotalFields = shared.usePrevious(fields.length);
 
-      var _k = useDragOrder(trigger, move, fields),
-          onChangeOrder = _k.onChangeOrder,
-          sortedFields = _k.sortedFields,
-          setSortedFields = _k.setSortedFields;
+      var _j = useDragOrder(trigger, move, onFormBlur),
+          onChangeOrder = _j.onChangeOrder,
+          onStartDrag = _j.onStartDrag,
+          activeDraggingIndex = _j.activeDraggingIndex;
 
       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['default'].createElement("form", {
+      var onAddRow = function onAddRow() {
+        append(emptyChangegroup, true);
+      };
+
+      React__default["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["default"].createElement("form", {
         onSubmit: handleSubmit(onSubmit),
-        onChange: onFormChange,
         onBlur: onFormBlur
-      }, /*#__PURE__*/React__default['default'].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
         className: classes.tacTitle
-      }, "TAC"), /*#__PURE__*/React__default['default'].createElement(core.Typography, {
+      }, "TAC"), /*#__PURE__*/React__default["default"].createElement(core.Typography, {
         "data-testid": "form-tac-message",
         className: classes.tacText
       }, TAC.split('\n').map(function (line) {
-        return /*#__PURE__*/React__default['default'].createElement("span", {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
           key: line,
           className: classes.tacLine,
           "data-testid": "tafform-tac-message-line"
         }, line);
-      })), /*#__PURE__*/React__default['default'].createElement(TafFormRow, {
+      })), /*#__PURE__*/React__default["default"].createElement(TafFormRow, {
         disabled: isDisabled
-      }), /*#__PURE__*/React__default['default'].createElement(reactSortablejs.ReactSortable, {
+      }), /*#__PURE__*/React__default["default"].createElement(reactSortablejs.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);
           reactSortablejs.Sortable.ghost.style.opacity = '1';
         }
-      }, sortedFields.map(function (_a, index) {
-        var chosen = _a.chosen;
-        var item = fields[index];
-        return /*#__PURE__*/React__default['default'].createElement(TafFormRow, {
+      }, fields.map(function (item, index) {
+        return /*#__PURE__*/React__default["default"].createElement(TafFormRow, {
           field: item,
           className: classes.formRow,
           key: item.id,
@@ -3519,30 +3662,31 @@
           disabled: isDisabled,
           onRemoveChangeGroup: onRemoverow,
           isChangeGroup: true,
-          dragHandle: /*#__PURE__*/React__default['default'].createElement(DragHandle, {
-            isDisabled: sortedFields.length === 1 || isDisabled,
-            isSorting: chosen
+          dragHandle: /*#__PURE__*/React__default["default"].createElement(DragHandle, {
+            isDisabled: fields.length === 1 || isDisabled,
+            isSorting: activeDraggingIndex === index,
+            index: index
           })
         });
-      })), !isDisabled && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      })), !isDisabled && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         container: true,
         item: true,
         xs: 12,
         justify: "flex-end"
-      }, /*#__PURE__*/React__default['default'].createElement(core.IconButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
         "aria-label": "add",
         "data-testid": "add-changeGroup",
         onClick: onAddRow,
         className: classes.addButton
-      }, /*#__PURE__*/React__default['default'].createElement(icons.Add, null))), /*#__PURE__*/React__default['default'].createElement(TafFormButtons, {
+      }, /*#__PURE__*/React__default["default"].createElement(icons.Add, null))), /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
         tafAction: tafAction,
         onTafFormButtonPress: onTafButtonPress
       })), hiddenInputFields.map(function (field) {
-        return /*#__PURE__*/React__default['default'].createElement(formFields.ReactHookFormHiddenInput, {
+        return /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
           name: field,
           key: field
         });
-      }), /*#__PURE__*/React__default['default'].createElement(DraftFieldHelper, null));
+      }), /*#__PURE__*/React__default["default"].createElement(DraftFieldHelper, null));
     };
 
     var getMessageType = function getMessageType(taf, tafAction) {
@@ -3562,8 +3706,8 @@
       var previousValidDateEnd = taf.previousValidDateEnd && tafAction !== 'AMEND' ? taf.previousValidDateEnd : taf.validDateEnd; // For amendment change valid start time to current time
       // only do this if we're already within the validity period
 
-      if ((tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND') && moment__default['default'].utc() >= moment__default['default'].utc(taf.validDateStart)) {
-        var now = moment__default['default'].utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+      if ((tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND') && moment__default["default"].utc() >= moment__default["default"].utc(taf.validDateStart)) {
+        var now = moment__default["default"].utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
         var validObj = {
           start: now,
           end: taf.baseForecast.valid.end
@@ -3583,15 +3727,21 @@
         previousValidDateEnd: previousValidDateEnd
       });
     };
-    var prepareTafValues = function prepareTafValues(_taf, tafAction) {
-      // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
+    var prepareTafValues = function prepareTafValues(_taf, tafAction, addEmptyChangeGroup) {
+      if (addEmptyChangeGroup === void 0) {
+        addEmptyChangeGroup = 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 __assign(__assign(__assign(__assign({}, taf), {
         messageType: getMessageType(taf, tafAction),
         baseForecast: formatFormValues(taf.baseForecast)
       }), taf.changeGroups && {
         changeGroups: taf.changeGroups.map(formatFormValues)
+      }), addEmptyChangeGroup && {
+        changeGroups: [emptyChangegroup]
       });
     };
 
@@ -3602,24 +3752,19 @@
           _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 taf = tafFromBackend.taf;
+      var isDisabled = mode === 'view';
+      var defaultValues = prepareTafValues(taf, tafAction, !isDisabled && !taf.changeGroups);
       var options = {
         defaultValues: defaultValues,
         mode: 'onTouched',
         reValidateMode: 'onChange',
         criteriaMode: 'all'
       };
-      return /*#__PURE__*/React__default['default'].createElement(formFields.ReactHookFormProvider, {
+      return /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormProvider, {
         options: options
-      }, /*#__PURE__*/React__default['default'].createElement(TafForm, {
-        mode: mode,
-        changeGroups: changeGroups,
+      }, /*#__PURE__*/React__default["default"].createElement(TafForm, {
+        isDisabled: isDisabled,
         tafAction: tafAction,
         staticTAC: TAC,
         onFormAction: onFormAction
@@ -3669,7 +3814,12 @@
           return onFormAction('CLOSE');
         },
         maxWidth: other.maxWidth ? other.maxWidth : 'lg',
-        disableBackdropClick: true
+        disableBackdropClick: true,
+        PaperProps: {
+          style: {
+            position: 'inherit'
+          }
+        }
       }, other), /*#__PURE__*/React__namespace.createElement(core.DialogTitle, {
         disableTypography: true,
         className: classes.dialogHeader
@@ -3712,11 +3862,11 @@
      * */
 
     var getActiveStatus = function getActiveStatus(listType, className) {
-      return listType === 'ACTIVE' ? /*#__PURE__*/React__default['default'].createElement(icons.CheckCircle, {
+      return listType === 'ACTIVE' ? /*#__PURE__*/React__default["default"].createElement(icons.CheckCircle, {
         "data-testid": "status-active",
         className: className,
         fontSize: "small"
-      }) : /*#__PURE__*/React__default['default'].createElement(icons.Schedule, {
+      }) : /*#__PURE__*/React__default["default"].createElement(icons.Schedule, {
         "data-testid": "status-upcoming",
         className: className,
         fontSize: "small"
@@ -3728,13 +3878,13 @@
       if (taf.status === 'NEW') return null;
 
       if (taf.status === 'CANCELLED') {
-        return /*#__PURE__*/React__default['default'].createElement(shared.StatusTag, {
+        return /*#__PURE__*/React__default["default"].createElement(shared.StatusTag, {
           content: "cancelled",
           color: "red"
         });
       }
 
-      return /*#__PURE__*/React__default['default'].createElement(shared.StatusTag, {
+      return /*#__PURE__*/React__default["default"].createElement(shared.StatusTag, {
         content: taf.status.toLowerCase(),
         color: taf.status === 'EXPIRED' ? 'grey' : 'green'
       });
@@ -3778,101 +3928,101 @@
           _c = _a.showTac,
           showTac = _c === void 0 ? false : _c;
       var classes = useStyles$5();
-      var validTimeDate = moment__default['default'].utc(taf.validDateStart).format('DD MMM');
-      var baseTime = moment__default['default'].utc(taf.baseTime).format('HH:mm');
-      return /*#__PURE__*/React__default['default'].createElement(core.Card, {
+      var validTimeDate = moment__default["default"].utc(taf.validDateStart).format('DD MMM');
+      var baseTime = moment__default["default"].utc(taf.baseTime).format('HH:mm');
+      return /*#__PURE__*/React__default["default"].createElement(core.Card, {
         elevation: 0,
         className: classes.cardWrapper
-      }, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         container: true,
         alignItems: "center",
         spacing: 1
-      }, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: 3,
         sm: 2,
         md: 1
-      }, /*#__PURE__*/React__default['default'].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
         variant: "subtitle2",
         noWrap: true,
         className: classes.font
-      }, taf.location)), /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, taf.location)), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: 3,
         sm: 3,
         md: 1,
         container: true
-      }, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: 3,
         sm: 3,
         md: 3,
         className: classes.alignIcon
-      }, showTac && /*#__PURE__*/React__default['default'].createElement(core.Tooltip, {
+      }, showTac && /*#__PURE__*/React__default["default"].createElement(core.Tooltip, {
         "data-testid": "taflistrow-tactooltip",
-        title: /*#__PURE__*/React__default['default'].createElement("div", {
+        title: /*#__PURE__*/React__default["default"].createElement("div", {
           style: {
             whiteSpace: 'pre-line'
           }
         }, TAC),
         placement: "bottom-start"
-      }, /*#__PURE__*/React__default['default'].createElement(icons.InfoOutlined, {
+      }, /*#__PURE__*/React__default["default"].createElement(icons.InfoOutlined, {
         "data-testid": "taflistrow-tacicon",
         color: "secondary",
         fontSize: "small"
-      }))), /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: 9,
         sm: 9,
         md: 9
-      }, /*#__PURE__*/React__default['default'].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
         variant: "subtitle2",
         className: classes.font,
         "data-testid": "baseTime"
-      }, baseTime))), /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, baseTime))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: 3,
         sm: 2,
         md: 1
-      }, /*#__PURE__*/React__default['default'].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
         variant: "subtitle2",
         className: classes.font,
         "data-testid": "validTimeDate"
-      }, validTimeDate)), /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, validTimeDate)), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: 3,
         sm: 3,
         md: 6
-      }, /*#__PURE__*/React__default['default'].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
         variant: "subtitle2",
         className: classes.font,
         "data-testid": "validTimeSlot"
       }, formatValidToString({
         start: taf.validDateStart,
         end: taf.validDateEnd
-      }))), /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: 12,
         sm: 4,
         md: 3
-      }, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         container: true,
         justify: "flex-start",
         spacing: 2
-      }, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         xs: 8,
         container: true,
         justify: "flex-end"
-      }, taf.status === 'DRAFT' || taf.status === 'DRAFT_CORRECTED' || taf.status === 'DRAFT_AMENDED' ? /*#__PURE__*/React__default['default'].createElement(core.Button, {
+      }, taf.status === 'DRAFT' || taf.status === 'DRAFT_CORRECTED' || taf.status === 'DRAFT_AMENDED' ? /*#__PURE__*/React__default["default"].createElement(core.Button, {
         color: "secondary",
         size: "small",
         "data-testid": "tafRow-draft",
-        startIcon: /*#__PURE__*/React__default['default'].createElement(icons.Create, {
+        startIcon: /*#__PURE__*/React__default["default"].createElement(icons.Create, {
           fontSize: "small",
           color: "secondary"
         })
-      }, getDraftTitle(taf.status)) : getStatusTagList(taf)), /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, getDraftTitle(taf.status)) : getStatusTagList(taf)), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         className: classes.alignIcon
       }, taf.status !== 'NEW' && taf.status !== 'DRAFT' && taf.status !== 'DRAFT_CORRECTED' && taf.status !== 'DRAFT_AMENDED' && taf.status !== 'CANCELLED' && listType !== 'EXPIRED' && getActiveStatus(listType, classes.activeStatus))))));
@@ -3896,10 +4046,10 @@
      * */
     var getListType = function getListType(taf, locationSettings) {
       if (!taf) return null;
-      var now = moment__default['default'].utc();
-      var baseTime = moment__default['default'].utc(taf.baseTime);
+      var now = moment__default["default"].utc();
+      var baseTime = moment__default["default"].utc(taf.baseTime);
       var activityPeriod = locationSettings[taf.location].activity_period;
-      var nextBaseTime = moment__default['default'].utc(taf.baseTime).add(activityPeriod, 'hours');
+      var nextBaseTime = moment__default["default"].utc(taf.baseTime).add(activityPeriod, 'hours');
 
       if (taf.status === 'EXPIRED') {
         return 'EXPIRED';
@@ -3939,10 +4089,10 @@
           onFormAction = _a.onFormAction;
       var taf = tafFromBackend ? tafFromBackend.taf : null;
       var locationSettings = useTafSettings(tafConfig).locations;
-      return /*#__PURE__*/React__default['default'].createElement(ContentDialog, {
+      return /*#__PURE__*/React__default["default"].createElement(ContentDialog, {
         open: open,
         toggleDialogStatus: toggleFormDialog,
-        titleComponent: /*#__PURE__*/React__default['default'].createElement(TafListRow, {
+        titleComponent: /*#__PURE__*/React__default["default"].createElement(TafListRow, {
           taf: taf,
           listType: getListType(taf, locationSettings)
         }),
@@ -3980,34 +4130,34 @@
           canBe = _a.canBe,
           onClickTafActionButton = _a.onClickTafActionButton;
       var classes = useStyles$4();
-      return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         container: true,
         alignItems: "center",
         justify: "flex-end",
         "data-testid": "taflist-canbebuttons",
         spacing: 1,
         className: classes.actionButtons
-      }, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true
-      }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default['default'].createElement(core.Button, {
+      }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default["default"].createElement(core.Button, {
         "data-testid": "canceltaf",
         variant: "outlined",
         color: "secondary",
         onClick: function onClick() {
           return onClickTafActionButton(uuid, 'CANCEL');
         }
-      }, "Cancel")), /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, "Cancel")), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true
-      }, canBe.includes('CORRECTED') && /*#__PURE__*/React__default['default'].createElement(core.Button, {
+      }, canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(core.Button, {
         "data-testid": "correctaf",
         variant: "outlined",
         color: "secondary",
         onClick: function onClick() {
           return onClickTafActionButton(uuid, 'CORRECT');
         }
-      }, "Correct")), /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, "Correct")), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true
-      }, canBe.includes('AMENDED') && /*#__PURE__*/React__default['default'].createElement(core.Button, {
+      }, canBe.includes('AMENDED') && /*#__PURE__*/React__default["default"].createElement(core.Button, {
         "data-testid": "amendtaf",
         variant: "outlined",
         color: "secondary",
@@ -4056,7 +4206,7 @@
           TAC = _c[0],
           requestTAC = _c[1];
 
-      React__default['default'].useEffect(function () {
+      React__default["default"].useEffect(function () {
         // only re-retrieve TAC if draft state
         if (tafListItem.taf.status === 'DRAFT' || tafListItem.taf.status === 'DRAFT_AMENDED' || tafListItem.taf.status === 'DRAFT_CORRECTED') {
           requestTAC(tafListItem.taf);
@@ -4064,7 +4214,7 @@
 
       }, [tafListItem.taf]);
       var popOut = status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED';
-      return /*#__PURE__*/React__default['default'].createElement(core.Accordion, __assign({
+      return /*#__PURE__*/React__default["default"].createElement(core.Accordion, __assign({
         "data-testid": "tafListItem",
         className: classes.accordion
       }, popOut ? {
@@ -4078,41 +4228,41 @@
         TransitionProps: {
           unmountOnExit: true
         }
-      }), /*#__PURE__*/React__default['default'].createElement(core.AccordionSummary, {
+      }), /*#__PURE__*/React__default["default"].createElement(core.AccordionSummary, {
         "data-testid": "tafListSectionAccordionSummary",
-        expandIcon: popOut ? /*#__PURE__*/React__default['default'].createElement(core.Tooltip, {
+        expandIcon: popOut ? /*#__PURE__*/React__default["default"].createElement(core.Tooltip, {
           title: "Popout to edit"
-        }, /*#__PURE__*/React__default['default'].createElement(icons.OpenInNew, {
+        }, /*#__PURE__*/React__default["default"].createElement(icons.OpenInNew, {
           "data-testid": "popOutIcon",
           fontSize: "small"
-        })) : /*#__PURE__*/React__default['default'].createElement(icons.ExpandMore, {
+        })) : /*#__PURE__*/React__default["default"].createElement(icons.ExpandMore, {
           "data-testid": "expandIcon"
         })
-      }, /*#__PURE__*/React__default['default'].createElement(TafListRow, {
+      }, /*#__PURE__*/React__default["default"].createElement(TafListRow, {
         taf: tafListItem.taf,
         listType: listType,
         TAC: TAC,
         showTac: true
-      })), /*#__PURE__*/React__default['default'].createElement(core.AccordionDetails, null, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(core.AccordionDetails, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         container: true,
         direction: "column"
       }, errorCancelTaf.length > 0 && errorCancelTaf.find(function (uuid) {
         return uuid === tafListItem.taf.uuid;
-      }) && /*#__PURE__*/React__default['default'].createElement(shared.AlertBanner, {
+      }) && /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
         severity: "error",
         title: "Cancelling this TAF failed, please try again",
         dataTestId: "tafList-cancelAlert"
-      }), /*#__PURE__*/React__default['default'].createElement("div", {
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.formPadding
-      }, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true
-      }, /*#__PURE__*/React__default['default'].createElement(TafFormWrapper, {
+      }, /*#__PURE__*/React__default["default"].createElement(TafFormWrapper, {
         tafFromBackend: tafListItem,
         mode: "view",
         TAC: TAC
-      })), /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true
-      }, /*#__PURE__*/React__default['default'].createElement(TafListButtons, {
+      }, /*#__PURE__*/React__default["default"].createElement(TafListButtons, {
         canBe: tafListItem.canbe,
         uuid: tafListItem.taf.uuid,
         onClickTafActionButton: onClickTafActionButton
@@ -4155,13 +4305,13 @@
           errorCancelTaf = _b === void 0 ? [] : _b,
           onClickTafActionButton = _a.onClickTafActionButton;
       var classes = useStyles$2();
-      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(core.Typography, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
         variant: "subtitle2",
         className: classes.listHeaders
-      }, title), /*#__PURE__*/React__default['default'].createElement("div", {
+      }, title), /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "tafList" + listType
       }, tafList.map(function (tafListItem) {
-        return /*#__PURE__*/React__default['default'].createElement(TafListAccordion, {
+        return /*#__PURE__*/React__default["default"].createElement(TafListAccordion, {
           key: tafListItem.taf.uuid + "-" + tafListItem.taf.status,
           tafListItem: tafListItem,
           listType: listType,
@@ -4203,10 +4353,10 @@
         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;
-            var now = moment__default['default'].utc();
-            var baseTime = moment__default['default'].utc(taf.taf.baseTime);
+            var now = moment__default["default"].utc();
+            var baseTime = moment__default["default"].utc(taf.taf.baseTime);
             var activityPeriod = locationSettings[taf.taf.location].activity_period;
-            var nextBaseTime = moment__default['default'].utc(taf.taf.baseTime).add(activityPeriod, 'hours');
+            var nextBaseTime = moment__default["default"].utc(taf.taf.baseTime).add(activityPeriod, 'hours');
 
             if (taf.taf.status === 'EXPIRED') {
               expiredTafs.push(taf);
@@ -4229,37 +4379,37 @@
         }
       }
 
-      return /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         container: true,
         direction: "column",
         alignItems: "stretch"
-      }, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
         item: true,
         className: classes.listBody
-      }, error && /*#__PURE__*/React__default['default'].createElement(shared.AlertBanner, {
+      }, error && /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
         severity: "error",
         title: "An error has occurred while retrieving the list, please try again",
         info: error.message ? error.message : '',
         dataTestId: "tafList-alert"
-      }), tafList && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TafListSection, {
+      }), tafList && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TafListSection, {
         title: "Upcoming",
         listType: "UPCOMING",
         tafList: upcomingTafs,
         errorCancelTaf: errorCancelTaf,
         onClickTafActionButton: onClickTafActionButton
-      }), /*#__PURE__*/React__default['default'].createElement(TafListSection, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafListSection, {
         title: "Current time slot",
         listType: "ACTIVE",
         tafList: currentTafs,
         errorCancelTaf: errorCancelTaf,
         onClickTafActionButton: onClickTafActionButton
-      }), /*#__PURE__*/React__default['default'].createElement(TafListSection, {
+      }), /*#__PURE__*/React__default["default"].createElement(TafListSection, {
         title: "Expired",
         listType: "EXPIRED",
         tafList: expiredTafs,
         errorCancelTaf: errorCancelTaf,
         onClickTafActionButton: onClickTafActionButton
-      })), isLoading && /*#__PURE__*/React__default['default'].createElement(lab.Skeleton, {
+      })), isLoading && /*#__PURE__*/React__default["default"].createElement(lab.Skeleton, {
         "data-testid": "tafList-skeleton",
         variant: "rect",
         height: "660px"
@@ -4291,10 +4441,10 @@
 
     var Spinner = function Spinner() {
       var classes = useStyles();
-      return /*#__PURE__*/React__default['default'].createElement(core.Backdrop, {
+      return /*#__PURE__*/React__default["default"].createElement(core.Backdrop, {
         open: true,
         className: classes.backdrop
-      }, /*#__PURE__*/React__default['default'].createElement(core.CircularProgress, {
+      }, /*#__PURE__*/React__default["default"].createElement(core.CircularProgress, {
         "data-testid": "spinner",
         color: "inherit"
       }));
@@ -4305,11 +4455,11 @@
         pollingInterval = 10000;
       }
 
-      var _a = __read(React__default['default'].useState([]), 2),
+      var _a = __read(React__default["default"].useState([]), 2),
           errorCancelTaf = _a[0],
           setErrorCancelTaf = _a[1];
 
-      React__default['default'].useEffect(function () {
+      React__default["default"].useEffect(function () {
         var cancelErrorMessageHandler = errorCancelTaf.length > 0 ? setTimeout(function () {
           if (errorCancelTaf.length > 0) {
             setErrorCancelTaf(errorCancelTaf.slice(1));
@@ -4334,27 +4484,27 @@
       var api$1 = api.useApiContext().api;
       var confirmDialog = shared.useConfirmationDialog();
 
-      var _a = __read(React__default['default'].useState(false), 2),
+      var _a = __read(React__default["default"].useState(false), 2),
           isTafDialogOpen = _a[0],
           setTafDialogOpen = _a[1];
 
-      var _b = __read(React__default['default'].useState(null), 2),
+      var _b = __read(React__default["default"].useState(null), 2),
           selectedTafId = _b[0],
           setselectedTafId = _b[1];
 
-      var _c = __read(React__default['default'].useState(null), 2),
+      var _c = __read(React__default["default"].useState(null), 2),
           tafDialogAction = _c[0],
           setTafDialogAction = _c[1];
 
-      var _d = __read(React__default['default'].useState(false), 2),
+      var _d = __read(React__default["default"].useState(false), 2),
           errorPostMessage = _d[0],
           setErrorPostMessage = _d[1];
 
-      var _e = __read(React__default['default'].useState(''), 2),
+      var _e = __read(React__default["default"].useState(''), 2),
           errorPostMessageText = _e[0],
           setErrorPostMessageText = _e[1];
 
-      var _f = __read(React__default['default'].useState(false), 2),
+      var _f = __read(React__default["default"].useState(false), 2),
           showSpinner = _f[0],
           setSpinner = _f[1]; // clear error message for cancel after 10 seconds
 
@@ -4385,7 +4535,7 @@
         setTafDialogOpen(!isTafDialogOpen);
       };
 
-      React__default['default'].useEffect(function () {
+      React__default["default"].useEffect(function () {
         if (selectedTafId) {
           toggleTafDialog();
         } // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4527,28 +4677,28 @@
       };
 
       var selectedTaf = getSelectedTaf(selectedTafId, tafList);
-      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TafList, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TafList, {
         tafList: tafList,
         isLoading: isLoadingList,
         error: errorList,
         onClickTafActionButton: onClickTafActionButton,
         errorCancelTaf: errorCancelTaf
-      }), showSpinner && /*#__PURE__*/React__default['default'].createElement(Spinner, null), selectedTaf !== undefined && /*#__PURE__*/React__default['default'].createElement(TafFormDialog, {
+      }), showSpinner && /*#__PURE__*/React__default["default"].createElement(Spinner, null), selectedTaf !== undefined && /*#__PURE__*/React__default["default"].createElement(TafFormDialog, {
         open: isTafDialogOpen,
         toggleFormDialog: toggleTafDialog,
         tafFromBackend: selectedTaf,
-        alertBanner: errorPostMessage ? /*#__PURE__*/React__default['default'].createElement(shared.AlertBanner, {
+        alertBanner: errorPostMessage ? /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
           severity: "error",
           title: "An error has occurred while saving, please try again",
           info: errorPostMessageText
         }) : null,
         onFormAction: onFormAction
-      }, /*#__PURE__*/React__default['default'].createElement(TafFormWrapper, {
+      }, /*#__PURE__*/React__default["default"].createElement(TafFormWrapper, {
         mode: "edit",
         tafFromBackend: selectedTaf,
         tafAction: tafDialogAction,
         onFormAction: onFormAction
-      }), showSpinner && /*#__PURE__*/React__default['default'].createElement(Spinner, null)));
+      }), showSpinner && /*#__PURE__*/React__default["default"].createElement(Spinner, null)));
     };
     /**
      * Shows the list of Tafs and allows to create, edit and view Tafs.
@@ -4560,11 +4710,11 @@
 
 
     var ConfirmationWrapper = function ConfirmationWrapper() {
-      return /*#__PURE__*/React__default['default'].createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__default['default'].createElement(TafWrapper, null));
+      return /*#__PURE__*/React__default["default"].createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__default["default"].createElement(TafWrapper, null));
     };
 
-    var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl) {
-      var axiosInstance = api.createApiInstance(url, appUrl, auth, setAuth, authTokenUrl);
+    var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
+      var axiosInstance = api.createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
       return {
         // api data
         getTafList: function getTafList() {
@@ -4590,4 +4740,4 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));