@opengeoweb/taf 1.1.3 → 1.2.2

package/taf.esm.js

@@ -1,12 +1,14 @@
-import React__default, { createElement } from 'react';
+import * as React from 'react';
+import React__default from 'react';
 import { makeStyles, Grid, TextField, IconButton, Tooltip, Chip, SvgIcon, Paper, Typography, Button, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Backdrop, CircularProgress } from '@material-ui/core';
-import { Alert, Skeleton } from '@material-ui/lab';
+import { Skeleton } from '@material-ui/lab';
 import moment from 'moment';
-import { Delete, Close, Add, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@material-ui/icons';
+import { useDraftFormHelpers, useConfirmationDialog, usePreventBrowserClose, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
+import { Delete, Close, DragIndicator, Add, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@material-ui/icons';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
-import { useConfirmationDialog, usePreventBrowserClose, StatusTag, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
+import { ReactSortable, Sortable } from 'react-sortablejs';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -113,10 +115,10 @@ function __read(o, n) {
     return ar;
 }
 
-function __spread() {
-    for (var ar = [], i = 0; i < arguments.length; i++)
-        ar = ar.concat(__read(arguments[i]));
-    return ar;
+function __spreadArray(to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
 }
 
 /* *
@@ -175,74 +177,6 @@ var tafConfig = {
 	locations: locations
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var useStyles = makeStyles({
-  textFieldGridItem: {
-    marginRight: 4
-  },
-  textFieldInput: {
-    fontSize: '14px',
-    paddingLeft: 1,
-    paddingRight: 1,
-    color: '#051039'
-  },
-  textFieldLabel: {
-    fontSize: '14px'
-  },
-  textFieldLabelShrink: {
-    transform: 'translate(2px, 10px) scale(0.75) !important'
-  },
-  formRow: {
-    marginTop: 8
-  },
-  tacTitle: {
-    fontSize: '20px',
-    fontWeight: 500
-  },
-  tacText: {
-    fontSize: '14px',
-    color: '#000000'
-  },
-  tacLine: {
-    margin: '0',
-    padding: '.1em .1em .1em 0.8em',
-    textIndent: '-0.7em',
-    borderRadius: '3px'
-  },
-  addButton: {
-    marginRight: '38px'
-  },
-  lifecycleButtons: {
-    marginTop: '40px',
-    marginBottom: '16px'
-  },
-  actionButton: {
-    marginRight: '16px'
-  },
-  lastButton: {
-    marginRight: '90px'
-  },
-  backdrop: {
-    zIndex: 1500,
-    color: '#fff'
-  }
-});
-
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -341,7 +275,8 @@ var invalidValidityMinutesMessage = 'Invalid validity period, specified minutes
 var invalidValidityStartTimeMessage = 'Invalid validity start time, change group validity must lie within the TAF validity period';
 var invalidValidityPeriodMessage = 'Invalid validity period, validity end time has to be after validity start time';
 var invalidValidityEndTimeMessage = 'Invalid validity end time, change group validity must lie within the TAF validity period';
-var invalidValidityLengthMessage = 'Invalid validity period, expected either DDHH/DDHH or DDHHmm'; // Validations
+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
 // Ensure all individual sections are correct (DD HH mm etc)
 
 var validateValidSections = function validateValidSections(sections, isStartEnd) {
@@ -425,6 +360,17 @@ var validateValidField = function validateValidField(value, tafStart, tafEnd) {
 
   return true;
 };
+var validateValidChangeGroupInterField = function validateValidChangeGroupInterField(value, valueChange) {
+  var trimmedValue = value.trim();
+  var trimmedValueChange = valueChange.trim();
+
+  if (!trimmedValue.length) {
+    return true;
+  }
+
+  var isValid = trimmedValue.length < 9 && trimmedValueChange === 'FM' || trimmedValue.length > 6 && trimmedValueChange !== 'FM';
+  return isValid ? true : invalidChangeValidInterFieldMessage;
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -445,19 +391,19 @@ var validateValidField = function validateValidField(value, tafStart, tafEnd) {
 
 var prependZeroes = function prependZeroes(value, totalDigits) {
   var valueAsString = value.toString();
-  return __spread(Array(totalDigits - valueAsString.length)).reduce(function (newVal) {
+  return __spreadArray([], __read(Array(totalDigits - valueAsString.length))).reduce(function (newVal) {
     return "0" + newVal;
   }, valueAsString);
 };
 
-var config = [{
+var config$1 = [{
   key: 'range',
   size: 4
 }, {
   key: 'unit',
   size: 1
 }];
-var configAsObject = Object.assign(config).reduce(function (list, item) {
+var configAsObject$1 = Object.assign(config$1).reduce(function (list, item) {
   var _a;
 
   return __assign(__assign({}, list), (_a = {}, _a[item.key] = item, _a));
@@ -475,7 +421,7 @@ var formatVisibilityToString = function formatVisibilityToString(value) {
   } // else, format visibility number
 
 
-  var size = configAsObject.range.size;
+  var size = configAsObject$1.range.size;
   return prependZeroes(value.range, size);
 }; // parsers
 // returns object with validity if passed numbers - returns object with cavOK: true if passed CAVOK
@@ -1077,16 +1023,16 @@ function parseWeatherToObject(value) {
 
 
     var _b = obj,
-        _c = key,
-        emptyKey = _b[_c],
-        rest = __rest(_b, [_typeof(_c) === "symbol" ? _c : _c + ""]);
+        _c = key;
+        _b[_c];
+        var rest = __rest(_b, [_typeof(_c) === "symbol" ? _c : _c + ""]);
 
     return rest;
   }, value);
   return trimmedWeather;
 }
 
-var config$1 = [{
+var config = [{
   key: 'direction',
   size: 3
 }, {
@@ -1103,7 +1049,7 @@ var config$1 = [{
   key: 'unit',
   size: 2
 }];
-var configAsObject$1 = Object.assign(config$1).reduce(function (list, item) {
+var configAsObject = Object.assign(config).reduce(function (list, item) {
   var _a;
 
   return __assign(__assign({}, list), (_a = {}, _a[item.key] = item, _a));
@@ -1114,7 +1060,7 @@ var formatWindValues = function formatWindValues(key, value) {
     case 'direction':
       {
         // make sure the values get the right size
-        var size = configAsObject$1[key].size;
+        var size = configAsObject[key].size;
         return prependZeroes(value, size);
       }
 
@@ -1127,7 +1073,7 @@ var formatWindValues = function formatWindValues(key, value) {
           return 'P99';
         }
 
-        var size = configAsObject$1[key].size;
+        var size = configAsObject[key].size;
         return prependZeroes(value, size);
       }
 
@@ -1140,7 +1086,7 @@ var formatWindValues = function formatWindValues(key, value) {
           return 'GP99';
         }
 
-        var size = configAsObject$1[key].size;
+        var size = configAsObject[key].size;
         var newValue = prependZeroes(value, size);
         return "G" + newValue.toString();
       }
@@ -1161,7 +1107,7 @@ var formatWindToString = function formatWindToString(value) {
     return value;
   }
 
-  return config$1.reduce(function (stringValue, item) {
+  return config.reduce(function (stringValue, item) {
     var key = item.key;
     var propValue = value[key];
     var hasValue = propValue !== undefined && propValue !== null && propValue !== '';
@@ -1174,7 +1120,7 @@ var extractValidateWindSections = function extractValidateWindSections(value, va
     validation = false;
   }
 
-  return config$1.reduce(function (obj, item) {
+  return config.reduce(function (obj, item) {
     var key = item.key,
         size = item.size;
     var returnObj = obj;
@@ -1496,9 +1442,9 @@ var parseCloudsToObject = function parseCloudsToObject(clouds) {
 
 
     var _e = list,
-        _f = key,
-        emptyKey = _e[_f],
-        rest = __rest(_e, [_typeof(_f) === "symbol" ? _f : _f + ""]);
+        _f = key;
+        _e[_f];
+        var rest = __rest(_e, [_typeof(_f) === "symbol" ? _f : _f + ""]);
 
     return rest;
   }, clouds);
@@ -1979,8 +1925,8 @@ row, tafStart, tafEnd) {
         {
           // if cavOK is set - remove visibility from the list
           if (reducedRow.cavOK) {
-            var visibility = list.visibility,
-                rest = __rest(list, ["visibility"]);
+            list.visibility;
+                var rest = __rest(list, ["visibility"]);
 
             return rest;
           }
@@ -1992,8 +1938,8 @@ row, tafStart, tafEnd) {
         {
           // If cloud is undefined or empty, remove it from the list
           if (!reducedRow.cloud || Object.keys(reducedRow.cloud).length === 0) {
-            var cloud = list.cloud,
-                rest = __rest(list, ["cloud"]);
+            list.cloud;
+                var rest = __rest(list, ["cloud"]);
 
             return rest;
           }
@@ -2005,8 +1951,8 @@ row, tafStart, tafEnd) {
         {
           // If empty, remove it from the list
           if (!reducedRow.weather.weather1) {
-            var weather = list.weather,
-                rest = __rest(list, ["weather"]);
+            list.weather;
+                var rest = __rest(list, ["weather"]);
 
             return rest;
           }
@@ -2018,8 +1964,8 @@ row, tafStart, tafEnd) {
         {
           // If empty, remove it from the list
           if (!reducedRow.wind.direction && isNaN(reducedRow.wind.direction)) {
-            var wind = list.wind,
-                rest = __rest(list, ["wind"]);
+            list.wind;
+                var rest = __rest(list, ["wind"]);
 
             return rest;
           }
@@ -2031,8 +1977,8 @@ row, tafStart, tafEnd) {
         {
           // If empty, remove it from the list
           if (!reducedRow.visibility.range && isNaN(reducedRow.visibility.range)) {
-            var visibility = list.visibility,
-                rest = __rest(list, ["visibility"]);
+            list.visibility;
+                var rest = __rest(list, ["visibility"]);
 
             return rest;
           }
@@ -2047,9 +1993,9 @@ row, tafStart, tafEnd) {
           // If empty, remove it from the list
           if (!reducedRow[key]) {
             var _a = list,
-                _b = key,
-                emptyKey = _a[_b],
-                rest = __rest(_a, [_typeof(_b) === "symbol" ? _b : _b + ""]);
+                _b = key;
+                _a[_b];
+                var rest = __rest(_a, [_typeof(_b) === "symbol" ? _b : _b + ""]);
 
             return rest;
           }
@@ -2067,9 +2013,12 @@ row, tafStart, tafEnd) {
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 
 var convertTafValuesToObject = function convertTafValuesToObject(formData) {
-  var tafStart = formData.validDateStart;
-  var tafEnd = formData.validDateEnd;
-  var parsedChangeGroups = formData.changeGroups && formData.changeGroups // parse data for each changegroup row
+  formData.IS_DRAFT;
+      var productToPost = __rest(formData, ["IS_DRAFT"]);
+
+  var tafStart = productToPost.validDateStart;
+  var tafEnd = productToPost.validDateEnd;
+  var parsedChangeGroups = productToPost.changeGroups && productToPost.changeGroups // parse data for each changegroup row
   .map(function (row) {
     return parseFormValues(row, tafStart, tafEnd);
   }) // filter out empty changegroup rows
@@ -2077,8 +2026,8 @@ var convertTafValuesToObject = function convertTafValuesToObject(formData) {
     return Object.keys(value).length;
   });
 
-  var parsedFormValues = __assign(__assign({}, formData), {
-    baseForecast: parseFormValues(formData.baseForecast, tafStart, tafEnd),
+  var parsedFormValues = __assign(__assign({}, productToPost), {
+    baseForecast: parseFormValues(productToPost.baseForecast, tafStart, tafEnd),
     changeGroups: parsedChangeGroups
   });
 
@@ -2088,8 +2037,8 @@ var convertTafValuesToObject = function convertTafValuesToObject(formData) {
         {
           // remove changeGroups when empty
           if (!parsedFormValues.changeGroups || !parsedFormValues.changeGroups.length) {
-            var changeGroups = list.changeGroups,
-                rest = __rest(list, ["changeGroups"]);
+            list.changeGroups;
+                var rest = __rest(list, ["changeGroups"]);
 
             return rest;
           }
@@ -2105,9 +2054,9 @@ var convertTafValuesToObject = function convertTafValuesToObject(formData) {
           // remove when empty
           if (!parsedFormValues[key]) {
             var _a = list,
-                _b = key,
-                emtpyKey = _a[_b],
-                rest = __rest(_a, [_typeof(_b) === "symbol" ? _b : _b + ""]);
+                _b = key;
+                _a[_b];
+                var rest = __rest(_a, [_typeof(_b) === "symbol" ? _b : _b + ""]);
 
             return rest;
           }
@@ -2122,6 +2071,38 @@ var convertTafValuesToObject = function convertTafValuesToObject(formData) {
     }
   }, parsedFormValues);
 };
+var noTAC = 'Missing data: no TAC can be generated'; // Ensure we have enough data to retrieve a TAC - we only need to check for wind and visibility/ cavok as those are the only ones required in all cases
+
+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)) {
+    return true;
+  }
+
+  return false;
+};
+
+var getFieldNames = function getFieldNames(isChangeGroup, index) {
+  var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
+  return __assign(__assign(__assign({}, !isChangeGroup && {
+    messageType: 'messageType',
+    location: 'location',
+    issueDate: 'issueDate'
+  }), isChangeGroup && {
+    probability: namePrefix + ".probability",
+    change: namePrefix + ".change"
+  }), {
+    valid: namePrefix + ".valid",
+    wind: namePrefix + ".wind",
+    visibility: namePrefix + ".visibility",
+    weather1: namePrefix + ".weather.weather1",
+    weather2: namePrefix + ".weather.weather2",
+    weather3: namePrefix + ".weather.weather3",
+    cloud1: namePrefix + ".cloud.cloud1",
+    cloud2: namePrefix + ".cloud.cloud2",
+    cloud3: namePrefix + ".cloud.cloud3",
+    cloud4: namePrefix + ".cloud.cloud4"
+  });
+};
 var useTACGenerator = function useTACGenerator(taf, requestTAC, standardTAC) {
   if (standardTAC === void 0) {
     standardTAC = '';
@@ -2132,11 +2113,15 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC, standardTAC) {
       setTAC = _a[1];
 
   var retrieveTAC = function retrieveTAC(tafToPost) {
-    requestTAC(tafToPost).then(function (result) {
-      setTAC(result.data);
-    })["catch"](function () {
-      setTAC('Failed to retrieve TAC');
-    });
+    if (shouldRetrieveTAC(tafToPost)) {
+      requestTAC(tafToPost).then(function (result) {
+        setTAC(result.data);
+      })["catch"](function () {
+        setTAC('Failed to retrieve TAC');
+      });
+    }
+
+    setTAC(noTAC);
   };
 
   React__default.useEffect(function () {
@@ -2151,25 +2136,90 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC, standardTAC) {
     }
   }, [standardTAC]);
   return [TAC, retrieveTAC];
+};
+var getRange = function getRange(min, max) {
+  return Array.from({
+    length: max - min + 1
+  }, function (_, i) {
+    return min + i;
+  });
+};
+var useDragOrder = function useDragOrder(trigger, move, fields) {
+  // create simple ordered list with hover (chosen) state
+  var _a = __read(React__default.useState([]), 2),
+      sortedFields = _a[0],
+      setSortedFields = _a[1];
+
+  var _b = __read(React__default.useState([null, null]), 2),
+      lastDragOrder = _b[0],
+      onUpdatelastDragOrder = _b[1];
+
+  var onChangeOrder = function onChangeOrder(_a) {
+    var oldIndex = _a.oldIndex,
+        newIndex = _a.newIndex;
+    if (oldIndex === undefined || newIndex === undefined) return;
+    move(oldIndex, newIndex);
+    onUpdatelastDragOrder([oldIndex, newIndex]);
+  };
+
+  React__default.useEffect(function () {
+    setSortedFields(fields.map(function (_a) {
+      var id = _a.id;
+      return {
+        id: id,
+        chosen: false
+      };
+    }));
+  }, [fields]); // triggers validation AFTER render of new sorted elements
+
+  React__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);
+    }
+  }, [lastDragOrder, trigger]);
+  return {
+    onChangeOrder: onChangeOrder,
+    sortedFields: sortedFields,
+    setSortedFields: setSortedFields
+  };
 }; // dialog utils
 
 var getConfirmationDialogTitle = function getConfirmationDialogTitle(action) {
-  if (action === 'DISCARDED') return 'Discard TAF';
-  if (action === 'PUBLISHED') return 'Publish';
-  if (action === 'AMENDED') return 'This TAF is an amendment';
-  if (action === 'CORRECTED') return 'This TAF is a correction';
+  if (action === 'DISCARD') return 'Discard TAF';
+  if (action === 'PUBLISH') return 'Publish';
+  if (action === 'AMEND') return 'This TAF is an amendment';
+  if (action === 'CORRECT') return 'This TAF is a correction';
   return 'Cancel TAF';
 };
 var getConfirmationDialogContent = function getConfirmationDialogContent(action) {
-  if (action === 'DISCARDED') return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
-  if (action === 'PUBLISHED') return 'Are you sure you want to publish this TAF?';
-  if (action === 'AMENDED') return 'Do you want to publish it?';
-  if (action === 'CORRECTED') return 'Do you want to publish it?';
+  if (action === 'DISCARD') return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
+  if (action === 'PUBLISH') return 'Are you sure you want to publish this TAF?';
+  if (action === 'AMEND') return 'Do you want to publish it?';
+  if (action === 'CORRECT') return 'Do you want to publish it?';
   return 'Are you sure you want to cancel this TAF?';
 };
 var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel(action) {
   switch (action) {
-    case 'DISCARDED':
+    case 'DISCARD':
       {
         return 'Discard';
       }
@@ -2181,6 +2231,86 @@ var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel
   }
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var useStyles$9 = makeStyles(function (theme) {
+  return {
+    textFieldGridItem: {
+      marginRight: 4
+    },
+    textFieldInput: {
+      fontSize: '14px',
+      paddingLeft: 1,
+      paddingRight: 1,
+      color: '#051039',
+      WebkitTextFillColor: '#051039' // safari text color fix
+
+    },
+    textFieldLabel: {
+      fontSize: '14px'
+    },
+    textFieldLabelShrink: {
+      transform: 'translate(2px, 10px) scale(0.75) !important'
+    },
+    formRow: {
+      marginTop: 8,
+      backgroundColor: theme.palette.common.white,
+      position: 'relative',
+      '&.sortable-chosen': {
+        boxShadow: theme.shadows[1]
+      },
+      '&.sortable-ghost': {
+        opacity: 0.5
+      }
+    },
+    tacTitle: {
+      fontSize: '20px',
+      fontWeight: 500
+    },
+    tacText: {
+      fontSize: '14px',
+      color: '#000000'
+    },
+    tacLine: {
+      margin: '0',
+      padding: '.1em .1em .1em 0.8em',
+      textIndent: '-0.7em',
+      borderRadius: '3px'
+    },
+    addButton: {
+      marginRight: '38px'
+    },
+    lifecycleButtons: {
+      marginTop: '40px',
+      marginBottom: '16px'
+    },
+    actionButton: {
+      marginRight: '16px'
+    },
+    lastButton: {
+      marginRight: '90px'
+    },
+    backdrop: {
+      zIndex: 1500,
+      color: '#fff'
+    }
+  };
+});
+
 var getTafErrors = function getTafErrors(name, errors) {
   var nameAsArray = name.split('.');
 
@@ -2202,7 +2332,7 @@ var getDisplayValue = function getDisplayValue(value, disabled) {
   return disabled && !value ? '-' : value;
 };
 var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
-  var classes = useStyles();
+  var classes = useStyles$9();
   return /*#__PURE__*/React__default.createElement(TextField, __assign({
     type: "text",
     variant: "filled",
@@ -2241,7 +2371,7 @@ var TafFormTextField = function TafFormTextField(_a) {
       autoComplete = _h === void 0 ? [] : _h,
       _j = _a.autoFocus,
       autoFocus = _j === void 0 ? false : _j;
-  var classes = useStyles();
+  var classes = useStyles$9();
 
   var _k = useFormContext(),
       control = _k.control,
@@ -2349,13 +2479,24 @@ var TafFormTextField = function TafFormTextField(_a) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 // messages
-var invalidChangeMessage = 'Invalid Change input, only BECMG, TEMPO or FM are allowed'; // validations
+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 validateChangeField = function validateChangeField(value) {
   var trimmedValue = value.trim();
   var isValid = trimmedValue === '' || trimmedValue === 'FM' || trimmedValue === 'TEMPO' || trimmedValue === 'BECMG';
   return isValid ? true : invalidChangeMessage;
 };
+var validateChangeFieldInterField = function validateChangeFieldInterField(value, valueProb) {
+  var trimmedProbValue = valueProb.trim();
+  var trimmedValue = value.trim();
+
+  if (trimmedProbValue !== '' && trimmedValue !== '' && trimmedValue !== 'TEMPO') {
+    return invalidChangeProbCombinationMessage;
+  }
+
+  return true;
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2390,11 +2531,11 @@ var getDefaultValue = function getDefaultValue(fieldName, data) {
   return getDeepProperty(fieldName.split('.'), data) || '';
 };
 
-var getRequiredCrossFields = function getRequiredCrossFields(namePrefix) {
-  return [[namePrefix + ".valid"], [namePrefix + ".change", namePrefix + ".probability"], [namePrefix + ".wind", namePrefix + ".visibility", namePrefix + ".weather.weather1", namePrefix + ".cloud.cloud1"]];
+var getRequiredCrossFields = function getRequiredCrossFields(fieldNames) {
+  return [[fieldNames.valid, fieldNames.change], [fieldNames.probability], [fieldNames.wind, fieldNames.visibility, fieldNames.weather1, fieldNames.cloud1]];
 };
 
-var TafFormRow = function TafFormRow(_a) {
+var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   var _b = _a.isChangeGroup,
       isChangeGroup = _b === void 0 ? false : _b,
       _c = _a.disabled,
@@ -2405,37 +2546,41 @@ var TafFormRow = function TafFormRow(_a) {
       lastRow = _e === void 0 ? false : _e,
       onRemoveChangeGroup = _a.onRemoveChangeGroup,
       _f = _a.field,
-      field = _f === void 0 ? null : _f;
-  var classes = useStyles();
+      field = _f === void 0 ? null : _f,
+      _g = _a.dragHandle,
+      dragHandle = _g === void 0 ? null : _g,
+      props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle"]);
+
   var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
+  var fieldNames = getFieldNames(isChangeGroup, index);
 
-  var _g = useFormContext(),
-      getValues = _g.getValues,
-      trigger = _g.trigger; // cross-field required validation
+  var _h = useFormContext(),
+      getValues = _h.getValues,
+      trigger = _h.trigger;
 
+  var isNotRequiredForAction = useDraftFormHelpers().isRequired; // cross-field required validation
 
-  var _h = __read(getRequiredCrossFields(namePrefix), 3),
-      mainFields = _h[0],
-      mainOptionalFields = _h[1],
-      subFields = _h[2];
+  var _j = __read(getRequiredCrossFields(fieldNames), 3),
+      mainFields = _j[0],
+      mainOptionalFields = _j[1],
+      subFields = _j[2];
 
   var hasFieldsValue = function hasFieldsValue(fields) {
     return fields.map(getValues).find(function (field) {
       return !!field;
     });
-  };
+  }; // Used to validate the two required fields for change groups: Change and Valid
+
 
   var _validateRequiredMain = function validateRequiredMain(value, fieldName) {
-    return isChangeGroup && !value.length && (hasFieldsValue(subFields) || hasFieldsValue(mainFields) || hasFieldsValue(mainOptionalFields)) ? fieldName + " is required" : true;
-  };
+    return isNotRequiredForAction(value) !== true && isChangeGroup && !value.length && (hasFieldsValue(subFields) || hasFieldsValue(mainFields) || hasFieldsValue(mainOptionalFields)) ? fieldName + " is required" : true;
+  }; // Used to ensure one wind, visibility, weather or cloud is entered when start editing a changegroup and all of these are empty
 
-  var _validateRequiredMainOptional = function validateRequiredMainOptional() {
-    return isChangeGroup && (hasFieldsValue(subFields) || hasFieldsValue(mainFields)) && !hasFieldsValue(mainOptionalFields) ? 'Prob and/or Change are required' : true;
-  };
 
-  var validateRequiredSub = function validateRequiredSub() {
-    return isChangeGroup && (hasFieldsValue(mainFields) || hasFieldsValue(mainOptionalFields)) && !hasFieldsValue(subFields) ? 'Wind, visibility, weather or cloud is required' : true;
-  };
+  var validateRequiredSub = function validateRequiredSub(value) {
+    return isNotRequiredForAction(value) !== true && isChangeGroup && (hasFieldsValue(mainFields) || hasFieldsValue(mainOptionalFields)) && !hasFieldsValue(subFields) ? 'Wind, visibility, weather or cloud is required' : true;
+  }; // Used to validate the combination of change group and wind, visibility, weather and/or cloud data entered
+
 
   var _validateRequiredMainFields = function validateRequiredMainFields(value, fieldName) {
     var changeField = getValues(namePrefix + ".change");
@@ -2443,7 +2588,7 @@ var TafFormRow = function TafFormRow(_a) {
     var isFM = changeField && changeField.trim() === 'FM';
     var isCAVOK = visibilityField && visibilityField.trim() === 'CAVOK';
 
-    if (!value.length) {
+    if (isNotRequiredForAction(value) !== true && !value.length) {
       if (isChangeGroup && isFM || !isChangeGroup) {
         // exception for CavOK
         if (isCAVOK && (fieldName === 'Clouds' || fieldName === 'Weather')) {
@@ -2462,13 +2607,13 @@ var TafFormRow = function TafFormRow(_a) {
     return true;
   };
 
-  return /*#__PURE__*/React__default.createElement(Grid, {
+  return /*#__PURE__*/React__default.createElement(Grid, __assign({
     "data-testid": "row-" + namePrefix,
     container: true,
-    className: classes.formRow
-  }, !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
+    ref: ref
+  }, props), !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Type",
-    name: "messageType",
+    name: fieldNames.messageType,
     disabled: true
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Location",
@@ -2481,18 +2626,18 @@ var TafFormRow = function TafFormRow(_a) {
     disabled: true
   })), isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: true
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
+    xs: true,
+    style: {
+      display: 'flex'
+    }
+  }, dragHandle), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Prob",
-    name: namePrefix + ".probability",
+    name: fieldNames.probability,
     disabled: disabled,
     defaultValue: getDefaultValue('probability', field),
     rules: {
       validate: {
-        validateProbabilityField: validateProbabilityField,
-        validateRequiredMainOptional: function validateRequiredMainOptional() {
-          return _validateRequiredMainOptional();
-        }
+        validateProbabilityField: validateProbabilityField
       }
     },
     autoComplete: [{
@@ -2504,20 +2649,23 @@ var TafFormRow = function TafFormRow(_a) {
     }],
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger(__spread(subFields, mainOptionalFields, mainFields));
+        trigger(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)));
       }
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Change",
-    name: namePrefix + ".change",
+    name: fieldNames.change,
     disabled: disabled,
     defaultValue: getDefaultValue('change', field),
     rules: {
       validate: {
-        validateRequiredMainOptional: function validateRequiredMainOptional() {
-          return _validateRequiredMainOptional();
+        validateRequiredMain: function validateRequiredMain(value) {
+          return _validateRequiredMain(value, 'Change');
         },
-        validateChangeField: validateChangeField
+        validateChangeField: validateChangeField,
+        validateChangeFieldInterField: function validateChangeFieldInterField$1(value) {
+          return validateChangeFieldInterField(value, getValues(fieldNames.probability));
+        }
       }
     },
     autoComplete: [{
@@ -2532,12 +2680,12 @@ var TafFormRow = function TafFormRow(_a) {
     }],
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger(__spread(subFields, mainOptionalFields, mainFields));
+        trigger(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)));
       }
     }
   })), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Valid",
-    name: namePrefix + ".valid",
+    name: fieldNames.valid,
     // always disabled for baseforecast row
     disabled: !isChangeGroup ? true : disabled,
     defaultValue: getDefaultValue('valid', field),
@@ -2548,21 +2696,23 @@ var TafFormRow = function TafFormRow(_a) {
         },
         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;
         }
       }
     },
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger(__spread(subFields, mainOptionalFields, mainFields));
+        trigger(__spreadArray(__spreadArray(__spreadArray([], __read(subFields)), __read(mainOptionalFields)), __read(mainFields)));
       }
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Wind",
-    name: namePrefix + ".wind",
+    name: fieldNames.wind,
     disabled: disabled,
     defaultValue: getDefaultValue('wind', field),
     rules: {
-      required: !isChangeGroup,
       validate: {
         validateRequiredMainFields: function validateRequiredMainFields(value) {
           return _validateRequiredMainFields(value, 'Wind');
@@ -2573,17 +2723,16 @@ var TafFormRow = function TafFormRow(_a) {
     },
     onBlur: function onBlur() {
       if (isChangeGroup) {
-        trigger(__spread(subFields, mainFields));
+        trigger(__spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)));
       }
     },
     autoFocus: !isChangeGroup
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Visibility",
-    name: namePrefix + ".visibility",
+    name: fieldNames.visibility,
     disabled: disabled,
     defaultValue: getDefaultValue('visibility', field),
     rules: {
-      required: !isChangeGroup,
       validate: {
         validateRequiredMainFields: function validateRequiredMainFields(value) {
           return _validateRequiredMainFields(value, 'Visibility');
@@ -2597,11 +2746,11 @@ var TafFormRow = function TafFormRow(_a) {
       value: 'CAVOK'
     }],
     onBlur: function onBlur() {
-      trigger(isChangeGroup ? __spread(subFields, mainFields) : subFields);
+      trigger(isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : subFields);
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Weather",
-    name: namePrefix + ".weather.weather1",
+    name: fieldNames.weather1,
     disabled: disabled,
     defaultValue: getDefaultValue('weather.weather1', field),
     rules: {
@@ -2616,40 +2765,40 @@ var TafFormRow = function TafFormRow(_a) {
       }
     },
     onBlur: function onBlur() {
-      var fields = isChangeGroup ? __spread(subFields, mainFields) : [];
-      return trigger(__spread(fields, [namePrefix + ".weather.weather2", namePrefix + ".weather.weather3"]));
+      var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
+      return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather2, fieldNames.weather3]));
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Weather",
-    name: namePrefix + ".weather.weather2",
+    name: fieldNames.weather2,
     disabled: disabled,
     defaultValue: getDefaultValue('weather.weather2', field),
     rules: {
       validate: {
         validateSecondWeatherField: function validateSecondWeatherField$1(value) {
-          return validateSecondWeatherField(getValues(namePrefix + ".weather.weather1"), value);
+          return validateSecondWeatherField(getValues(fieldNames.weather1), value);
         }
       }
     },
     onBlur: function onBlur() {
-      var fields = isChangeGroup ? __spread(subFields, mainFields) : [];
-      return trigger(__spread(fields, [namePrefix + ".weather.weather3"]));
+      var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
+      return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.weather3]));
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Weather",
-    name: namePrefix + ".weather.weather3",
+    name: fieldNames.weather3,
     disabled: disabled,
     defaultValue: getDefaultValue('weather.weather3', field),
     rules: {
       validate: {
         validateThirdWeatherField: function validateThirdWeatherField$1(value) {
-          return validateThirdWeatherField(getValues(namePrefix + ".weather.weather1"), getValues(namePrefix + ".weather.weather2"), value);
+          return validateThirdWeatherField(getValues(fieldNames.weather1), getValues(fieldNames.weather2), value);
         }
       }
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Cloud",
-    name: namePrefix + ".cloud.cloud1",
+    name: fieldNames.cloud1,
     disabled: disabled,
     defaultValue: getDefaultValue('cloud.cloud1', field),
     rules: {
@@ -2662,48 +2811,48 @@ var TafFormRow = function TafFormRow(_a) {
       }
     },
     onBlur: function onBlur() {
-      var fields = isChangeGroup ? __spread(subFields, mainFields) : [];
-      return trigger(__spread(fields, [namePrefix + ".cloud.cloud2", namePrefix + ".cloud.cloud3", namePrefix + ".cloud.cloud4"]));
+      var fields = isChangeGroup ? __spreadArray(__spreadArray([], __read(subFields)), __read(mainFields)) : [];
+      return trigger(__spreadArray(__spreadArray([], __read(fields)), [fieldNames.cloud2, fieldNames.cloud3, fieldNames.cloud4]));
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Cloud",
-    name: namePrefix + ".cloud.cloud2",
+    name: fieldNames.cloud2,
     disabled: disabled,
     defaultValue: getDefaultValue('cloud.cloud2', field),
     rules: {
       validate: {
         validateSecondCloud: function validateSecondCloud$1(value) {
-          return validateSecondCloud(getValues(namePrefix + ".cloud.cloud1"), value);
+          return validateSecondCloud(getValues(fieldNames.cloud1), value);
         }
       }
     },
     onBlur: function onBlur() {
-      return trigger([namePrefix + ".cloud.cloud3", namePrefix + ".cloud.cloud4"]);
+      return trigger([fieldNames.cloud3, fieldNames.cloud4]);
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Cloud",
-    name: namePrefix + ".cloud.cloud3",
+    name: fieldNames.cloud3,
     disabled: disabled,
     defaultValue: getDefaultValue('cloud.cloud3', field),
     rules: {
       validate: {
         validateThirdCloud: function validateThirdCloud$1(value) {
-          return validateThirdCloud(getValues(namePrefix + ".cloud.cloud1"), getValues(namePrefix + ".cloud.cloud2"), value);
+          return validateThirdCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), value);
         }
       }
     },
     onBlur: function onBlur() {
-      return trigger(namePrefix + ".cloud.cloud4");
+      return trigger(fieldNames.cloud4);
     }
   }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Cloud",
-    name: namePrefix + ".cloud.cloud4",
+    name: fieldNames.cloud4,
     disabled: disabled,
     defaultValue: getDefaultValue('cloud.cloud4', field),
     rules: {
       validate: {
         validateFourthCloud: function validateFourthCloud$1(value) {
-          return validateFourthCloud(getValues(namePrefix + ".cloud.cloud1"), getValues(namePrefix + ".cloud.cloud2"), getValues(namePrefix + ".cloud.cloud3"), value);
+          return validateFourthCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), getValues(fieldNames.cloud3), value);
         }
       }
     }
@@ -2722,7 +2871,7 @@ var TafFormRow = function TafFormRow(_a) {
   }, lastRow ? {
     tabIndex: '-1'
   } : {}), /*#__PURE__*/React__default.createElement(Delete, null))));
-};
+});
 
 var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
   switch (sumOfErrors) {
@@ -2761,9 +2910,9 @@ var IssuesButton = function IssuesButton(_a) {
   var togglePane = _a.togglePane,
       sumOfErrors = _a.sumOfErrors;
   var color = sumOfErrors > 0 ? 'red' : 'green';
-  return /*#__PURE__*/createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
     title: "View details"
-  }, /*#__PURE__*/createElement(Chip, {
+  }, /*#__PURE__*/React.createElement(Chip, {
     size: "small",
     label: getIssuesLabel(sumOfErrors),
     style: __assign({}, buttonStyle(color)),
@@ -2808,7 +2957,7 @@ var ThumbsUp = function ThumbsUp(props) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$1 = makeStyles({
+var useStyles$8 = makeStyles({
   issuesPane: {
     display: 'flex',
     flexDirection: 'column',
@@ -2910,26 +3059,26 @@ var IssuesPane = function IssuesPane(_a) {
   var handleClose = _a.handleClose,
       _b = _a.errorList,
       errorList = _b === void 0 ? [] : _b;
-  var classes = useStyles$1();
-  return /*#__PURE__*/createElement(Paper, {
+  var classes = useStyles$8();
+  return /*#__PURE__*/React.createElement(Paper, {
     elevation: 3,
     className: classes.issuesPane
-  }, /*#__PURE__*/createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: classes.paneHeader
-  }, /*#__PURE__*/createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Typography, {
     "data-testid": "issuesPaneTitle",
     className: classes.paneTitle
-  }, getPaneTitle(errorList.length)), /*#__PURE__*/createElement(IconButton, {
+  }, getPaneTitle(errorList.length)), /*#__PURE__*/React.createElement(IconButton, {
     "data-testid": "closeIssuesPane",
     size: "small",
     onClick: handleClose
-  }, /*#__PURE__*/createElement(Close, null))), /*#__PURE__*/createElement("div", {
+  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement("div", {
     className: classes.paneContent
-  }, errorList.length === 0 && /*#__PURE__*/createElement("div", {
+  }, errorList.length === 0 && /*#__PURE__*/React.createElement("div", {
     className: classes.image,
     "data-testid": "zeroIssuesImage"
-  }, /*#__PURE__*/createElement(ThumbsUp, null)), errorList.length > 0 && errorList.map(function (error, index) {
-    return /*#__PURE__*/createElement(Typography // eslint-disable-next-line react/no-array-index-key
+  }, /*#__PURE__*/React.createElement(ThumbsUp, null)), errorList.length > 0 && errorList.map(function (error, index) {
+    return /*#__PURE__*/React.createElement(Typography // eslint-disable-next-line react/no-array-index-key
     , {
       // eslint-disable-next-line react/no-array-index-key
       key: "message-" + index,
@@ -2971,7 +3120,7 @@ var getErrors = function getErrors(errors) {
       var errorValues = errorValue.reduce(function (l, i) {
         return l.concat(getErrorValues(i));
       }, []);
-      return list.concat.apply(list, __spread(errorValues));
+      return list.concat.apply(list, __spreadArray([], __read(errorValues)));
     }
 
     return list.concat(getErrorValues(errorValue));
@@ -2996,7 +3145,7 @@ var filterDuplicateErrors = function filterDuplicateErrors(errors) {
 var TafFormButtons = function TafFormButtons(_a) {
   var tafAction = _a.tafAction,
       onTafFormButtonPress = _a.onTafFormButtonPress;
-  var classes = useStyles();
+  var classes = useStyles$9();
   var errors = useFormContext().errors;
   var errorList = filterDuplicateErrors(getErrors(errors));
 
@@ -3028,7 +3177,7 @@ var TafFormButtons = function TafFormButtons(_a) {
     className: classes.actionButton,
     onClick: function onClick() {
       // Simply discard the changes and close the dialog.
-      onTafFormButtonPress('DISCARDED');
+      onTafFormButtonPress('DISCARD');
     }
   }, "Discard"), /*#__PURE__*/React__default.createElement(Button, {
     "data-testid": "savedrafttaf",
@@ -3039,20 +3188,20 @@ var TafFormButtons = function TafFormButtons(_a) {
     onClick: function onClick() {
       /* Save the TAF as draft:
       if action NEW or DRAFT - new status will be DRAFT -- default
-      if action AMENDED - new status will be DRAFT_AMENDED
-      if action CORRECTED - new status will be DRAFT_CORRECTED
-      if action DRAFT_AMENDED - new status will be DRAFT_AMENDED
-      if action DRAFT_CORRECTED - new status will be DRAFT_CORRECTED
+      if action AMEND - new status will be DRAFT_AMENDED
+      if action CORRECT - new status will be DRAFT_CORRECTED
+      if action DRAFT_AMEND - new status will be DRAFT_AMENDED
+      if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
       */
       switch (tafAction) {
-        case 'AMENDED':
-        case 'DRAFT_AMENDED':
-          onTafFormButtonPress('DRAFT_AMENDED');
+        case 'AMEND':
+        case 'DRAFT_AMEND':
+          onTafFormButtonPress('DRAFT_AMEND');
           break;
 
-        case 'CORRECTED':
-        case 'DRAFT_CORRECTED':
-          onTafFormButtonPress('DRAFT_CORRECTED');
+        case 'CORRECT':
+        case 'DRAFT_CORRECT':
+          onTafFormButtonPress('DRAFT_CORRECT');
           break;
 
         default:
@@ -3069,24 +3218,24 @@ var TafFormButtons = function TafFormButtons(_a) {
     onClick: function onClick() {
       /* Publish the TAF:
       if action NEW or DRAFT - new status will be PUBLISHED -- default
-      if action AMENDED - new status will be AMENDED
-      if action CORRECTED - new status will be CORRECTED
-      if action DRAFT_AMENDED - new status will be AMENDED
-      if action DRAFT_CORRECTED - new status will be CORRECTED
+      if action AMEND - new status will be AMENDED
+      if action CORRECT - new status will be CORRECTED
+      if action DRAFT_AMEND - new status will be AMENDED
+      if action DRAFT_CORRECT - new status will be CORRECTED
       */
       switch (tafAction) {
-        case 'AMENDED':
-        case 'DRAFT_AMENDED':
-          onTafFormButtonPress('AMENDED');
+        case 'AMEND':
+        case 'DRAFT_AMEND':
+          onTafFormButtonPress('AMEND');
           break;
 
-        case 'CORRECTED':
-        case 'DRAFT_CORRECTED':
-          onTafFormButtonPress('CORRECTED');
+        case 'CORRECT':
+        case 'DRAFT_CORRECT':
+          onTafFormButtonPress('CORRECT');
           break;
 
         default:
-          onTafFormButtonPress('PUBLISHED');
+          onTafFormButtonPress('PUBLISH');
           break;
       }
     }
@@ -3096,6 +3245,50 @@ var TafFormButtons = function TafFormButtons(_a) {
   }));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var useStyles$7 = makeStyles(function () {
+  return {
+    dragHandle: {
+      backgroundColor: 'transparent',
+      '&:hover': {
+        backgroundColor: 'transparent'
+      },
+      cursor: function cursor(isSorting) {
+        return isSorting ? 'grabbing' : 'grab';
+      }
+    }
+  };
+});
+
+var DragHandle = function DragHandle(_a) {
+  var _b = _a.isSorting,
+      isSorting = _b === void 0 ? false : _b,
+      _c = _a.isDisabled,
+      isDisabled = _c === void 0 ? false : _c;
+  var classes = useStyles$7(isSorting);
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    className: classes.dragHandle + " handle",
+    "data-testid": "dragHandle",
+    disableRipple: true,
+    disabled: isDisabled
+  }, /*#__PURE__*/React__default.createElement(DragIndicator, null));
+};
+
 var emptyRow = {
   valid: '',
   wind: '',
@@ -3125,27 +3318,33 @@ var TafForm = function TafForm(_a) {
       onFormAction = _c === void 0 ? function () {
     return null;
   } : _c;
-  var classes = useStyles();
+  var classes = useStyles$9();
   var confirmDialog = useConfirmationDialog();
+
+  var _d = useDraftFormHelpers(),
+      toggleIsDraft = _d.toggleIsDraft,
+      DraftFieldHelper = _d.DraftFieldHelper;
+
   var api = useApiContext().api;
   var isDisabled = mode === 'view';
 
-  var _d = useFormContext(),
-      control = _d.control,
-      handleSubmit = _d.handleSubmit,
-      watch = _d.watch,
-      getValues = _d.getValues,
-      errors = _d.errors;
+  var _e = useFormContext(),
+      control = _e.control,
+      handleSubmit = _e.handleSubmit,
+      watch = _e.watch,
+      getValues = _e.getValues,
+      errors = _e.errors,
+      trigger = _e.trigger;
 
   var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
-  var _e = __read(React__default.useState(watch()), 2),
-      delayedFormValues = _e[0],
-      setDelayedFormValues = _e[1];
+  var _f = __read(React__default.useState(watch()), 2),
+      delayedFormValues = _f[0],
+      setDelayedFormValues = _f[1];
 
-  var _f = __read(useTACGenerator(convertTafValuesToObject(delayedFormValues), api.getTAC, staticTAC), 2),
-      TAC = _f[0],
-      updateTAC = _f[1];
+  var _g = __read(useTACGenerator(convertTafValuesToObject(delayedFormValues), api.getTAC, staticTAC), 2),
+      TAC = _g[0],
+      updateTAC = _g[1];
 
   React__default.useEffect(function () {
     if (!Object.keys(errors).length && staticTAC === '') {
@@ -3158,9 +3357,9 @@ var TafForm = function TafForm(_a) {
     setDelayedFormValues(getValues());
   };
 
-  var _g = __read(React__default.useState(false), 2),
-      isFormDirty = _g[0],
-      setFormDirty = _g[1];
+  var _h = __read(React__default.useState(false), 2),
+      isFormDirty = _h[0],
+      setFormDirty = _h[1];
 
   var onFormChange = function onFormChange() {
     return !isFormDirty ? setFormDirty(true) : null;
@@ -3168,13 +3367,14 @@ var TafForm = function TafForm(_a) {
 
   usePreventBrowserClose(isFormDirty && !isDisabled);
 
-  var _h = useFieldArray({
+  var _j = useFieldArray({
     control: control,
     name: 'changeGroups'
   }),
-      fields = _h.fields,
-      append = _h.append,
-      remove = _h.remove;
+      fields = _j.fields,
+      append = _j.append,
+      remove = _j.remove,
+      move = _j.move;
 
   var onSubmit = function onSubmit(data) {
     // eslint-disable-next-line no-console
@@ -3192,14 +3392,15 @@ var TafForm = function TafForm(_a) {
   var onTafButtonPress = function onTafButtonPress(action) {
     switch (action) {
       case 'DRAFT':
-      case 'DRAFT_AMENDED':
-      case 'DRAFT_CORRECTED':
+      case 'DRAFT_AMEND':
+      case 'DRAFT_CORRECT':
+        toggleIsDraft(true);
         handleSubmit(function (data) {
           onFormAction(action, convertTafValuesToObject(data));
         })();
         break;
 
-      case 'DISCARDED':
+      case 'DISCARD':
         if (isFormDirty) {
           showConfirmDialog(action).then(function () {
             onFormAction(action);
@@ -3210,9 +3411,10 @@ var TafForm = function TafForm(_a) {
 
         break;
 
-      case 'AMENDED':
-      case 'CORRECTED':
-      case 'PUBLISHED':
+      case 'AMEND':
+      case 'CORRECT':
+      case 'PUBLISH':
+        toggleIsDraft(false);
         handleSubmit(function (data) {
           showConfirmDialog(action).then(function () {
             onFormAction(action, convertTafValuesToObject(data));
@@ -3230,10 +3432,6 @@ var TafForm = function TafForm(_a) {
     append(emptyRow);
   };
 
-  var onRemoverow = function onRemoverow(index) {
-    remove(index);
-  };
-
   React__default.useEffect(function () {
     // set changegroups on mount (if no changegroups - add empty one by default)
     if (changeGroups.length > 0) {
@@ -3245,6 +3443,20 @@ var TafForm = function TafForm(_a) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
+
+  var _k = useDragOrder(trigger, move, fields),
+      onChangeOrder = _k.onChangeOrder,
+      sortedFields = _k.sortedFields,
+      setSortedFields = _k.setSortedFields;
+
+  var onRemoverow = function onRemoverow(index) {
+    remove(index);
+    var newList = fields.length > 1 ? fields.filter(function (_, fieldIndex) {
+      return fieldIndex === index;
+    }) : [];
+    setSortedFields(newList);
+  };
+
   return /*#__PURE__*/React__default.createElement("form", {
     onSubmit: handleSubmit(onSubmit),
     onChange: onFormChange,
@@ -3262,17 +3474,37 @@ var TafForm = function TafForm(_a) {
     }, line);
   })), /*#__PURE__*/React__default.createElement(TafFormRow, {
     disabled: isDisabled
-  }), fields.map(function (item, index) {
+  }), /*#__PURE__*/React__default.createElement(ReactSortable, {
+    tag: "div",
+    list: sortedFields,
+    setList: setSortedFields,
+    animation: 200,
+    onSort: onChangeOrder,
+    handle: ".handle",
+    direction: "vertical",
+    // hover props
+    forceFallback: true,
+    onStart: function onStart() {
+      Sortable.ghost.style.opacity = '1';
+    }
+  }, sortedFields.map(function (_a, index) {
+    var chosen = _a.chosen;
+    var item = fields[index];
     return /*#__PURE__*/React__default.createElement(TafFormRow, {
       field: item,
+      className: classes.formRow,
       key: item.id,
       index: index,
       lastRow: fields.length === index + 1,
       disabled: isDisabled,
       onRemoveChangeGroup: onRemoverow,
-      isChangeGroup: true
+      isChangeGroup: true,
+      dragHandle: /*#__PURE__*/React__default.createElement(DragHandle, {
+        isDisabled: sortedFields.length === 1 || isDisabled,
+        isSorting: chosen
+      })
     });
-  }), !isDisabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
+  })), !isDisabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
     xs: 12,
@@ -3290,15 +3522,15 @@ var TafForm = function TafForm(_a) {
       name: field,
       key: field
     });
-  }));
+  }), /*#__PURE__*/React__default.createElement(DraftFieldHelper, null));
 };
 
 var getMessageType = function getMessageType(taf, tafAction) {
-  if (tafAction === 'CORRECTED') {
+  if (tafAction === 'CORRECT') {
     return 'COR';
   }
 
-  if (tafAction === 'AMENDED') {
+  if (tafAction === 'AMEND') {
     return 'AMD';
   }
 
@@ -3306,11 +3538,11 @@ var getMessageType = function getMessageType(taf, tafAction) {
 }; // For corrections and amendment we need to add the previousValidStart and End for the TAC converter
 
 var getAmendedCorrectedTafTimes = function getAmendedCorrectedTafTimes(taf, tafAction) {
-  var previousValidDateStart = taf.previousValidDateStart && tafAction !== 'AMENDED' ? taf.previousValidDateStart : taf.validDateStart;
-  var previousValidDateEnd = taf.previousValidDateEnd && tafAction !== 'AMENDED' ? taf.previousValidDateEnd : taf.validDateEnd; // For amendment change valid start time to current time
+  var previousValidDateStart = taf.previousValidDateStart && tafAction !== 'AMEND' ? taf.previousValidDateStart : taf.validDateStart;
+  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 === 'AMENDED' || tafAction === 'DRAFT_AMENDED') && moment.utc() >= moment.utc(taf.validDateStart)) {
+  if ((tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND') && moment.utc() >= moment.utc(taf.validDateStart)) {
     var now = moment.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
     var validObj = {
       start: now,
@@ -3332,9 +3564,9 @@ var getAmendedCorrectedTafTimes = function getAmendedCorrectedTafTimes(taf, tafA
   });
 };
 var prepareTafValues = function prepareTafValues(_taf, tafAction) {
-  // If action is AMENDED/CORRECTED/DRAFT_AMENDED/DRAFT_CORRECTION - add previous valid start and end
-  // If action is AMENDED/DRAFT_AMENDED - update validity start time to current time
-  var taf = tafAction === 'AMENDED' || tafAction === 'DRAFT_AMENDED' || tafAction === 'CORRECTED' || tafAction === 'DRAFT_CORRECTED' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
+  // 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), {
     messageType: getMessageType(taf, tafAction),
     baseForecast: formatFormValues(taf.baseForecast)
@@ -3374,7 +3606,7 @@ var TafFormWrapper = function TafFormWrapper(_a) {
   }));
 };
 
-var useStyles$2 = makeStyles({
+var useStyles$6 = makeStyles({
   dialogHeader: {
     borderRadius: '3px',
     border: 'solid 1px #f6f5f5',
@@ -3399,45 +3631,45 @@ var useStyles$2 = makeStyles({
 });
 
 var ContentDialog = function ContentDialog(_a) {
-  var open = _a.open,
-      toggleDialogStatus = _a.toggleDialogStatus,
-      titleComponent = _a.titleComponent,
-      children = _a.children,
-      onClose = _a.onClose,
-      _b = _a.alertBanner,
+  var open = _a.open;
+      _a.toggleDialogStatus;
+      var titleComponent = _a.titleComponent,
+      children = _a.children;
+      _a.onClose;
+      var _b = _a.alertBanner,
       alertBanner = _b === void 0 ? null : _b,
       onFormAction = _a.onFormAction,
       other = __rest(_a, ["open", "toggleDialogStatus", "titleComponent", "children", "onClose", "alertBanner", "onFormAction"]);
 
-  var classes = useStyles$2();
-  return /*#__PURE__*/createElement(Dialog, __assign({
+  var classes = useStyles$6();
+  return /*#__PURE__*/React.createElement(Dialog, __assign({
     "data-testid": "contentDialog",
     open: open,
     onClose: function onClose() {
-      return onFormAction('CLOSED');
+      return onFormAction('CLOSE');
     },
     maxWidth: other.maxWidth ? other.maxWidth : 'lg',
     disableBackdropClick: true
-  }, other), /*#__PURE__*/createElement(DialogTitle, {
+  }, other), /*#__PURE__*/React.createElement(DialogTitle, {
     disableTypography: true,
     className: classes.dialogHeader
-  }, /*#__PURE__*/createElement(Grid, {
+  }, /*#__PURE__*/React.createElement(Grid, {
     container: true
-  }, /*#__PURE__*/createElement(Grid, {
+  }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 11,
     className: classes.dialogTitle
-  }, titleComponent), /*#__PURE__*/createElement(Grid, {
+  }, titleComponent), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: true,
     className: classes.dialogCloseButton
-  }, /*#__PURE__*/createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconButton, {
     "data-testid": "closeDialog",
     size: "small",
     onClick: function onClick() {
-      return onFormAction('CLOSED');
+      return onFormAction('CLOSE');
     }
-  }, /*#__PURE__*/createElement(Close, null))))), alertBanner !== null && alertBanner, /*#__PURE__*/createElement(DialogContent, {
+  }, /*#__PURE__*/React.createElement(Close, null))))), alertBanner !== null && alertBanner, /*#__PURE__*/React.createElement(DialogContent, {
     className: classes.dialogChildren
   }, children));
 };
@@ -3499,7 +3731,7 @@ var getDraftTitle = function getDraftTitle(status) {
 
   return 'Draft';
 };
-var useStyles$3 = makeStyles({
+var useStyles$5 = makeStyles({
   cardWrapper: {
     width: '100%'
   },
@@ -3525,7 +3757,7 @@ var TafListRow = function TafListRow(_a) {
       TAC = _b === void 0 ? '' : _b,
       _c = _a.showTac,
       showTac = _c === void 0 ? false : _c;
-  var classes = useStyles$3();
+  var classes = useStyles$5();
   var validTimeDate = moment.utc(taf.validDateStart).format('DD MMM');
   var baseTime = moment.utc(taf.baseTime).format('HH:mm');
   return /*#__PURE__*/React__default.createElement(Card, {
@@ -3742,7 +3974,7 @@ var TafListButtons = function TafListButtons(_a) {
     variant: "outlined",
     color: "secondary",
     onClick: function onClick() {
-      return onClickTafActionButton(uuid, 'CANCELLED');
+      return onClickTafActionButton(uuid, 'CANCEL');
     }
   }, "Cancel")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
@@ -3751,7 +3983,7 @@ var TafListButtons = function TafListButtons(_a) {
     variant: "outlined",
     color: "secondary",
     onClick: function onClick() {
-      return onClickTafActionButton(uuid, 'CORRECTED');
+      return onClickTafActionButton(uuid, 'CORRECT');
     }
   }, "Correct")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
@@ -3760,12 +3992,12 @@ var TafListButtons = function TafListButtons(_a) {
     variant: "outlined",
     color: "secondary",
     onClick: function onClick() {
-      return onClickTafActionButton(uuid, 'AMENDED');
+      return onClickTafActionButton(uuid, 'AMEND');
     }
   }, "Amend")));
 };
 
-var useStyles$5 = makeStyles({
+var useStyles$3 = makeStyles({
   accordion: {
     marginBottom: '5px'
   },
@@ -3774,13 +4006,29 @@ var useStyles$5 = makeStyles({
   }
 });
 
+var fromStatusToAction = function fromStatusToAction(tafStatus) {
+  switch (tafStatus) {
+    case 'DRAFT':
+      return 'DRAFT';
+
+    case 'DRAFT_AMENDED':
+      return 'DRAFT_AMEND';
+
+    case 'DRAFT_CORRECTED':
+      return 'DRAFT_CORRECT';
+
+    default:
+      return 'NEW';
+  }
+};
+
 var TafListAccordion = function TafListAccordion(_a) {
   var tafListItem = _a.tafListItem,
       listType = _a.listType,
       _b = _a.errorCancelTaf,
       errorCancelTaf = _b === void 0 ? [] : _b,
       onClickTafActionButton = _a.onClickTafActionButton;
-  var classes = useStyles$5();
+  var classes = useStyles$3();
   var status = tafListItem.taf.status;
   var api = useApiContext().api;
 
@@ -3804,7 +4052,7 @@ var TafListAccordion = function TafListAccordion(_a) {
   } : {}, {
     onClick: function onClick() {
       if (popOut) {
-        onClickTafActionButton(tafListItem.taf.uuid, tafListItem.taf.status);
+        onClickTafActionButton(tafListItem.taf.uuid, fromStatusToAction(tafListItem.taf.status));
       }
     },
     TransitionProps: {
@@ -3830,10 +4078,11 @@ var TafListAccordion = function TafListAccordion(_a) {
     direction: "column"
   }, errorCancelTaf.length > 0 && errorCancelTaf.find(function (uuid) {
     return uuid === tafListItem.taf.uuid;
-  }) && /*#__PURE__*/React__default.createElement(Alert, {
+  }) && /*#__PURE__*/React__default.createElement(AlertBanner, {
     severity: "error",
-    "data-testid": "tafList-cancelAlert"
-  }, "Cancelling this TAF failed, please try again"), /*#__PURE__*/React__default.createElement("div", {
+    title: "Cancelling this TAF failed, please try again",
+    dataTestId: "tafList-cancelAlert"
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: classes.formPadding
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
@@ -3866,7 +4115,7 @@ var TafListAccordion = function TafListAccordion(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$6 = makeStyles({
+var useStyles$2 = makeStyles({
   listHeaders: {
     color: '#9d9d9d'
   },
@@ -3885,7 +4134,7 @@ var TafListSection = function TafListSection(_a) {
       _b = _a.errorCancelTaf,
       errorCancelTaf = _b === void 0 ? [] : _b,
       onClickTafActionButton = _a.onClickTafActionButton;
-  var classes = useStyles$6();
+  var classes = useStyles$2();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle2",
     className: classes.listHeaders
@@ -3902,11 +4151,7 @@ var TafListSection = function TafListSection(_a) {
   })));
 };
 
-var useStyles$7 = makeStyles({
-  errorMessage: {
-    marginBottom: '16px',
-    border: '1px solid #f44336'
-  },
+var useStyles$1 = makeStyles({
   accordion: {
     marginBottom: '5px'
   },
@@ -3928,7 +4173,7 @@ var TafList = function TafList(_a) {
       _c = _a.errorCancelTaf,
       errorCancelTaf = _c === void 0 ? [] : _c,
       onClickTafActionButton = _a.onClickTafActionButton;
-  var classes = useStyles$7();
+  var classes = useStyles$1();
   var locationSettings = useTafSettings(tafConfig).locations;
   var upcomingTafs = [];
   var currentTafs = [];
@@ -3971,11 +4216,12 @@ var TafList = function TafList(_a) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: classes.listBody
-  }, error && /*#__PURE__*/React__default.createElement(Alert, {
+  }, error && /*#__PURE__*/React__default.createElement(AlertBanner, {
     severity: "error",
-    "data-testid": "tafList-alert",
-    className: classes.errorMessage
-  }, error.message), tafList && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafListSection, {
+    title: "An error has occurred while retrieving the list, please try again",
+    info: error.message ? error.message : '',
+    dataTestId: "tafList-alert"
+  }), tafList && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafListSection, {
     title: "Upcoming",
     listType: "UPCOMING",
     tafList: upcomingTafs,
@@ -4016,7 +4262,7 @@ var TafList = function TafList(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$8 = makeStyles({
+var useStyles = makeStyles({
   backdrop: {
     zIndex: 1500,
     color: '#fff'
@@ -4024,7 +4270,7 @@ var useStyles$8 = makeStyles({
 });
 
 var Spinner = function Spinner() {
-  var classes = useStyles$8();
+  var classes = useStyles();
   return /*#__PURE__*/React__default.createElement(Backdrop, {
     open: true,
     className: classes.backdrop
@@ -4084,21 +4330,25 @@ var TafWrapper = function TafWrapper() {
       errorPostMessage = _d[0],
       setErrorPostMessage = _d[1];
 
-  var _e = __read(React__default.useState(false), 2),
-      showSpinner = _e[0],
-      setSpinner = _e[1]; // clear error message for cancel after 10 seconds
+  var _e = __read(React__default.useState(''), 2),
+      errorPostMessageText = _e[0],
+      setErrorPostMessageText = _e[1];
+
+  var _f = __read(React__default.useState(false), 2),
+      showSpinner = _f[0],
+      setSpinner = _f[1]; // clear error message for cancel after 10 seconds
 
 
-  var _f = __read(useTimeoutCancelError(), 2),
-      errorCancelTaf = _f[0],
-      setErrorCancelTaf = _f[1]; // Retrieve list of tafs
+  var _g = __read(useTimeoutCancelError(), 2),
+      errorCancelTaf = _g[0],
+      setErrorCancelTaf = _g[1]; // Retrieve list of tafs
 
 
-  var _g = useApi(api.getTafList),
-      errorList = _g.error,
-      isLoadingList = _g.isLoading,
-      tafList = _g.result,
-      fetchNewTafList = _g.fetchApiData;
+  var _h = useApi(api.getTafList),
+      errorList = _h.error,
+      isLoadingList = _h.isLoading,
+      tafList = _h.result,
+      fetchNewTafList = _h.fetchApiData;
 
   var getNewTafList = function getNewTafList() {
     fetchNewTafList({});
@@ -4111,6 +4361,7 @@ var TafWrapper = function TafWrapper() {
     if (isTafDialogOpen === true) getNewTafList(); // Set error message back to false
 
     setErrorPostMessage(false);
+    setErrorPostMessageText('');
     setTafDialogOpen(!isTafDialogOpen);
   };
 
@@ -4122,7 +4373,7 @@ var TafWrapper = function TafWrapper() {
   }, [selectedTafId]);
 
   var onClickTafActionButton = function onClickTafActionButton(tafUuid, action) {
-    if (action === 'CANCELLED') {
+    if (action === 'CANCEL') {
       confirmDialog({
         title: 'Cancel TAF',
         description: 'Are you sure you want to cancel this TAF?',
@@ -4131,7 +4382,7 @@ var TafWrapper = function TafWrapper() {
         var taf = getSelectedTaf(tafUuid, tafList).taf;
         postTaf({
           taf: taf,
-          changeStatusTo: action
+          changeStatusTo: 'CANCELLED'
         });
       });
     } else if (selectedTafId === tafUuid) {
@@ -4176,9 +4427,13 @@ var TafWrapper = function TafWrapper() {
             error_1 = _a.sent();
 
             if (data.changeStatusTo === 'CANCELLED') {
-              setErrorCancelTaf(__spread(errorCancelTaf, [data.taf.uuid]));
+              setErrorCancelTaf(__spreadArray(__spreadArray([], __read(errorCancelTaf)), [data.taf.uuid]));
             } else {
               setErrorPostMessage(true);
+
+              if (isAxiosError(error_1)) {
+                setErrorPostMessageText(getAxiosErrorMessage(error_1));
+              }
             }
 
             setSpinner(false);
@@ -4195,10 +4450,35 @@ var TafWrapper = function TafWrapper() {
     });
   };
 
+  var fromActionToStatus = function fromActionToStatus(tafAction) {
+    switch (tafAction) {
+      case 'DRAFT':
+        return 'DRAFT';
+
+      case 'DRAFT_AMEND':
+        return 'DRAFT_AMENDED';
+
+      case 'DRAFT_CORRECT':
+        return 'DRAFT_CORRECTED';
+
+      case 'PUBLISH':
+        return 'PUBLISHED';
+
+      case 'AMEND':
+        return 'AMENDED';
+
+      case 'CORRECT':
+        return 'CORRECTED';
+
+      default:
+        return 'NEW';
+    }
+  };
+
   var onFormAction = function onFormAction(action, taf) {
     // Add right actions and their follow up calls to the BE
     switch (action) {
-      case 'CLOSED':
+      case 'CLOSE':
         confirmDialog({
           title: 'Closing TAF',
           description: 'Are you sure you want to close this TAF?  Any changes made will be lost.',
@@ -4209,14 +4489,14 @@ var TafWrapper = function TafWrapper() {
         break;
 
       case 'DRAFT':
-      case 'DRAFT_AMENDED':
-      case 'DRAFT_CORRECTED':
-      case 'PUBLISHED':
-      case 'AMENDED':
-      case 'CORRECTED':
+      case 'DRAFT_AMEND':
+      case 'DRAFT_CORRECT':
+      case 'PUBLISH':
+      case 'AMEND':
+      case 'CORRECT':
         postTaf({
           taf: taf,
-          changeStatusTo: action
+          changeStatusTo: fromActionToStatus(action)
         });
         break;
 
@@ -4237,9 +4517,11 @@ var TafWrapper = function TafWrapper() {
     open: isTafDialogOpen,
     toggleFormDialog: toggleTafDialog,
     tafFromBackend: selectedTaf,
-    alertBanner: errorPostMessage ? /*#__PURE__*/React__default.createElement(Alert, {
-      severity: "error"
-    }, "An error has occurred, please try again") : null,
+    alertBanner: errorPostMessage ? /*#__PURE__*/React__default.createElement(AlertBanner, {
+      severity: "error",
+      title: "An error has occurred while saving, please try again",
+      info: errorPostMessageText
+    }) : null,
     onFormAction: onFormAction
   }, /*#__PURE__*/React__default.createElement(TafFormWrapper, {
     mode: "edit",