@opengeoweb/taf 4.8.0 → 4.10.0

package/index.esm.js

@@ -11,7 +11,7 @@ import { HIDDEN_INPUT_HELPER_IS_DRAFT, useIsMounted, ToggleMenu, CustomTooltip,
 import { snackbarActions } from '@opengeoweb/core';
 import moment from 'moment';
 import { isEqual } from 'lodash';
-import { Add, Delete, Close, DragHandle as DragHandle$1, ThumbsUp, Clock, Cancel, Edit, Success, Export, ListItem, Cached } from '@opengeoweb/theme';
+import { Add, Delete, Close, DragHandle as DragHandle$1, ThumbsUp, Clock, Cancel, Success, Edit, Export, ListItem, Cached } from '@opengeoweb/theme';
 import ReactDOM from 'react-dom';
 import { useApiContext, createApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
 import LinearProgress from '@mui/material/LinearProgress';
@@ -2014,7 +2014,8 @@ var emptyBaseForecast = {
     cloud3: '',
     cloud4: ''
   }
-}; // formatters
+};
+var MIN_NUMBER_CHANGE_GROUP = 5; // formatters
 
 var formatIssueTime = function formatIssueTime(issueDate) {
   return issueDate ? "".concat(moment(issueDate).utc().format('DDHHmm'), "Z") : 'Not issued';
@@ -2421,7 +2422,7 @@ var useDragOrder = function useDragOrder(trigger, move) {
 }; // dialog utils
 
 var getConfirmationDialogTitle = function getConfirmationDialogTitle(action) {
-  if (action === 'DISCARD') return 'Discard TAF';
+  if (action === 'CLEAR') return 'Clear TAF';
   if (action === 'PUBLISH') return 'Publish';
   if (action === 'AMEND') return 'This TAF is an amendment';
   if (action === 'CORRECT') return 'This TAF is a correction';
@@ -2446,8 +2447,8 @@ var isTafAmendedCorrectedChanged = function isTafAmendedCorrectedChanged(isFormD
 };
 var getConfirmationDialogContent = function getConfirmationDialogContent(action, isFormDirty) {
   switch (action) {
-    case 'DISCARD':
-      return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
+    case 'CLEAR':
+      return 'Are you sure you would like to clear this TAF? All content will be lost';
 
     case 'PUBLISH':
       return 'Are you sure you want to publish this TAF?';
@@ -2462,9 +2463,9 @@ var getConfirmationDialogContent = function getConfirmationDialogContent(action,
 };
 var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel(action) {
   switch (action) {
-    case 'DISCARD':
+    case 'CLEAR':
       {
-        return 'Discard';
+        return 'Clear';
       }
 
     case 'CANCEL':
@@ -2555,7 +2556,7 @@ var createChangeGroup = function createChangeGroup(changeGroup) {
   });
 };
 var prepareTafValues = function prepareTafValues(_taf, tafAction) {
-  var addEmptyChangeGroup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var addEmptyChangeGroups = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
   var _a; // 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
@@ -2568,15 +2569,43 @@ var prepareTafValues = function prepareTafValues(_taf, tafAction) {
     cloud: Object.assign(Object.assign({}, emptyBaseForecast.cloud), formattedBaseForecast.cloud)
   });
   var formattedChangeGroups = ((_a = taf.changeGroups) === null || _a === void 0 ? void 0 : _a.map(formatFormValues)) || [];
-  var changeGroups = formattedChangeGroups.map(createChangeGroup);
-  return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
+  var changeGroups = formattedChangeGroups.map(createChangeGroup); // If addEmptyChangeGroups is true - ensure there are at least MIN_NUMBER_CHANGE_GROUP changegroups
+
+  if (addEmptyChangeGroups) {
+    var changeGroupsToAdd = MIN_NUMBER_CHANGE_GROUP - changeGroups.length;
+
+    if (changeGroupsToAdd > 0) {
+      Array.from(Array(changeGroupsToAdd)).map(function () {
+        return changeGroups.push(emptyChangegroup);
+      });
+    }
+  }
+
+  return Object.assign(Object.assign({
+    issueDate: '',
+    previousId: null,
+    previousValidDateStart: null,
+    previousValidDateEnd: null
+  }, taf), _defineProperty({
     messageType: getMessageType(taf, tafAction),
-    baseForecast: baseForecast
-  }), changeGroups.length && {
+    baseForecast: baseForecast,
     changeGroups: changeGroups
-  }), addEmptyChangeGroup && {
-    changeGroups: [emptyChangegroup]
-  }), _defineProperty({}, HIDDEN_INPUT_HELPER_IS_DRAFT, true));
+  }, HIDDEN_INPUT_HELPER_IS_DRAFT, true));
+};
+var clearTafFormData = function clearTafFormData(tafFormValues) {
+  // Remove all except for the validity times
+  var baseForecast = {
+    valid: tafFormValues.baseForecast.valid
+  };
+  var emptyChangeGroups = [];
+  Array.from(Array(MIN_NUMBER_CHANGE_GROUP)).map(function () {
+    return emptyChangeGroups.push(emptyChangegroup);
+  });
+  return Object.assign(Object.assign({}, tafFormValues), {
+    baseForecast: Object.assign(Object.assign({}, emptyBaseForecast), baseForecast),
+    // Add empty change groups
+    changeGroups: emptyChangeGroups
+  });
 };
 var getIsFormDefaultDisabled = function getIsFormDefaultDisabled(status) {
   return !(status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED');
@@ -3478,13 +3507,13 @@ var TafFormButtons = function TafFormButtons(_ref2) {
     canBe: canBe,
     onTafViewModeButtonPress: onTafViewModeButtonPress
   }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "discardtaf",
+    "data-testid": "cleartaf",
     variant: "tertiary",
     onClick: function onClick() {
       // Simply discard the changes and close the dialog.
-      onTafEditModeButtonPress('DISCARD');
+      onTafEditModeButtonPress('CLEAR');
     }
-  }, "Discard"), /*#__PURE__*/React__default.createElement(Button, {
+  }, "Clear"), /*#__PURE__*/React__default.createElement(Button, {
     "data-testid": "savedrafttaf",
     variant: "tertiary",
     onClick: function onClick() {
@@ -3551,9 +3580,7 @@ var DragHandle = function DragHandle(_ref) {
       '&:hover': {
         backgroundColor: 'transparent'
       },
-      cursor: function cursor() {
-        return isSorting ? 'grabbing' : 'grab';
-      }
+      cursor: isSorting ? 'grabbing' : 'grab'
     }
   }, /*#__PURE__*/React__default.createElement(DragHandle$1, null));
 };
@@ -4011,9 +4038,8 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
       onStartDrag = _useDragOrder.onStartDrag,
       activeDraggingIndex = _useDragOrder.activeDraggingIndex;
 
-  var dirtyFields = formState.dirtyFields,
+  var isFormDirty = formState.isDirty,
       errors = formState.errors;
-  var isFormDirty = Object.keys(dirtyFields).length > 0;
   usePreventBrowserClose(isFormDirty && !isDisabled); // Needed to be able to show a confirmation dialog on closing parent view
 
   React__default.useEffect(function () {
@@ -4037,8 +4063,9 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
   };
 
   var resetFormValues = function resetFormValues(formData) {
+    var keepDirty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     reset(formData, {
-      keepDirty: false,
+      keepDirty: keepDirty,
       keepDirtyValues: false
     });
   };
@@ -4047,7 +4074,7 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
     var resetDisabled = arguments.length > 1 ? arguments[1] : undefined;
     var tafToReset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : originalTaf;
-    var shouldAddEmptyChangGroup = !(tafToReset && tafToReset.changeGroups) && !resetDisabled;
+    var shouldAddEmptyChangGroup = !resetDisabled;
     var newTaf = prepareTafValues(tafToReset, action, shouldAddEmptyChangGroup);
     resetFormValues(newTaf);
     setIsDisabled(resetDisabled);
@@ -4185,15 +4212,18 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
         })();
         break;
 
-      case 'DISCARD':
-        if (isFormDirty) {
-          showConfirmDialog(action).then(function () {
-            resetFormState(undefined, isDefaultDisabled);
-          });
-        } else {
-          resetFormState(undefined, isDefaultDisabled);
-        }
+      case 'CLEAR':
+        showConfirmDialog(action).then(function () {
+          var emptiedForm = clearTafFormData(getValues()); // Trigger an invisible change to dirty the form
+          // This is needed to trigger the autosave on changing location/time
 
+          var baseForecastFields = getFieldNames(false, -1);
+          setValue(baseForecastFields.wind, ' ', {
+            shouldDirty: true
+          });
+          resetFormValues(emptiedForm, true);
+          showSnackbar('TAF has been cleared');
+        });
         break;
 
       case 'AMEND':
@@ -4367,7 +4397,7 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   React__default.useEffect(function () {
-    var newValues = prepareTafValues(originalTaf, undefined, !isDefaultDisabled && !originalTaf.changeGroups); // set new form values when taf values changed
+    var newValues = prepareTafValues(originalTaf, undefined, !isDefaultDisabled); // set new form values when taf values changed
 
     resetFormValues(newValues); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [originalTaf]);
@@ -4429,10 +4459,10 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     handle: ".handle",
     direction: "vertical",
     // hover props
-    forceFallback: true,
+    forceFallback: false,
     onStart: function onStart(event) {
       onStartDrag(event);
-      Sortable.ghost.style.opacity = '1';
+      if (Sortable.ghost) Sortable.ghost.style.opacity = '1';
     }
   }, fields.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(TafFormRow, {
@@ -4739,69 +4769,72 @@ var IconWithTooltip = function IconWithTooltip(_ref) {
       children = _ref.children;
   return /*#__PURE__*/React.createElement(CustomTooltip, {
     title: title,
-    placement: "right"
+    placement: "right",
+    "data-testid": "statusIcon-tooltip"
   }, /*#__PURE__*/React.createElement(Box, {
     component: "span"
   }, children));
 };
 
 var StatusIcon = function StatusIcon(_ref2) {
-  var timeSlot = _ref2.timeSlot,
-      status = _ref2.status;
+  var status = _ref2.status,
+      timeSlot = _ref2.timeSlot;
 
-  if (status === 'NEW') {
-    return null;
-  }
+  switch (status) {
+    case 'DRAFT':
+    case 'DRAFT_AMENDED':
+    case 'DRAFT_CORRECTED':
+      return /*#__PURE__*/React.createElement(IconWithTooltip, {
+        title: getTafStatusLabel(status)
+      }, /*#__PURE__*/React.createElement(Edit, {
+        "data-testid": "status-draft",
+        sx: {
+          color: 'geowebColors.buttons.tertiary.default.color'
+        }
+      }));
 
-  if (status === 'EXPIRED') {
-    return /*#__PURE__*/React.createElement(IconWithTooltip, {
-      title: "Expired"
-    }, /*#__PURE__*/React.createElement(Clock, {
-      "data-testid": "status-expired",
-      sx: {
-        transform: 'scaleX(-1)',
-        color: 'geowebColors.buttons.tertiary.disabled.color'
-      }
-    }));
-  }
+    case 'PUBLISHED':
+    case 'CORRECTED':
+    case 'AMENDED':
+      return /*#__PURE__*/React.createElement(IconWithTooltip, {
+        title: getTafStatusLabel(status)
+      }, timeSlot === 'ACTIVE' ? /*#__PURE__*/React.createElement(Success, {
+        "data-testid": "status-active",
+        sx: {
+          color: 'geowebColors.functional.success'
+        }
+      }) : /*#__PURE__*/React.createElement(Clock, {
+        "data-testid": "status-upcoming",
+        sx: {
+          color: 'geowebColors.functional.success'
+        }
+      }));
 
-  if (status === 'CANCELLED') {
-    return /*#__PURE__*/React.createElement(IconWithTooltip, {
-      title: "Cancelled"
-    }, /*#__PURE__*/React.createElement(Cancel, {
-      "data-testid": "status-cancelled",
-      sx: {
-        color: 'geowebColors.captions.captionError.rgba'
-      }
-    }));
-  }
+    case 'CANCELLED':
+      return /*#__PURE__*/React.createElement(IconWithTooltip, {
+        title: getTafStatusLabel(status)
+      }, /*#__PURE__*/React.createElement(Cancel, {
+        "data-testid": "status-cancelled",
+        sx: {
+          color: 'geowebColors.captions.captionError.rgba'
+        }
+      }));
 
-  if (status === 'DRAFT' || status === 'DRAFT_CORRECTED' || status === 'DRAFT_AMENDED') {
-    return /*#__PURE__*/React.createElement(IconWithTooltip, {
-      title: "Draft"
-    }, /*#__PURE__*/React.createElement(Edit, {
-      "data-testid": "status-draft",
-      sx: {
-        color: 'geowebColors.buttons.tertiary.default.color'
-      }
-    }));
-  }
+    case 'EXPIRED':
+      return /*#__PURE__*/React.createElement(IconWithTooltip, {
+        title: getTafStatusLabel(status)
+      }, /*#__PURE__*/React.createElement(Clock, {
+        "data-testid": "status-expired",
+        sx: {
+          transform: 'scaleX(-1)',
+          color: 'geowebColors.buttons.tertiary.disabled.color'
+        }
+      }));
 
-  return timeSlot === 'ACTIVE' ? /*#__PURE__*/React.createElement(IconWithTooltip, {
-    title: "Active"
-  }, /*#__PURE__*/React.createElement(Success, {
-    "data-testid": "status-active",
-    sx: {
-      color: 'geowebColors.functional.success'
-    }
-  })) : /*#__PURE__*/React.createElement(IconWithTooltip, {
-    title: "Upcoming"
-  }, /*#__PURE__*/React.createElement(Clock, {
-    "data-testid": "status-upcoming",
-    sx: {
-      color: 'geowebColors.functional.success'
-    }
-  }));
+    case 'NEW':
+    default:
+      return null;
+  }
 };
 
 /* *
@@ -4847,8 +4880,8 @@ var ExportButton = function ExportButton(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var AdverseWeatherTACMessage = function AdverseWeatherTACMessage(_ref) {
   var TAC = _ref.TAC,
@@ -4879,7 +4912,8 @@ var AdverseWeatherTACMessage = function AdverseWeatherTACMessage(_ref) {
         }, isActive && {
           backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
         }), word.type === 'adverse' && {
-          color: 'geowebColors.captions.captionError.rgba'
+          color: 'geowebColors.captions.captionError.rgba',
+          fontWeight: 'bold'
         })
       }, word.text === '=' ? "".concat(word.text) : " ".concat(word.text));
     }));
@@ -5227,9 +5261,7 @@ var TopTabs = function TopTabs(_ref) {
   } : _ref$tafFromBackend;
 
   var _useFormContext = useFormContext(),
-      dirtyFields = _useFormContext.formState.dirtyFields;
-
-  var isDirty = Object.keys(dirtyFields).length > 0;
+      isDirty = _useFormContext.formState.isDirty;
 
   if (!tafFromBackend) {
     return null;
@@ -5297,9 +5329,8 @@ var LocationTabs = function LocationTabs(_ref) {
       timeSlot = _ref.timeSlot;
 
   var _useFormContext = useFormContext(),
-      dirtyFields = _useFormContext.formState.dirtyFields;
+      isDirty = _useFormContext.formState.isDirty;
 
-  var isDirty = Object.keys(dirtyFields).length > 0;
   return /*#__PURE__*/React.createElement(MenuList, {
     "data-testid": "location-tabs",
     sx: {

package/index.umd.js

@@ -2015,7 +2015,8 @@
         cloud3: '',
         cloud4: ''
       }
-    }; // formatters
+    };
+    var MIN_NUMBER_CHANGE_GROUP = 5; // formatters
 
     var formatIssueTime = function formatIssueTime(issueDate) {
       return issueDate ? moment__default["default"](issueDate).utc().format('DDHHmm') + "Z" : 'Not issued';
@@ -2423,7 +2424,7 @@
     }; // dialog utils
 
     var getConfirmationDialogTitle = function getConfirmationDialogTitle(action) {
-      if (action === 'DISCARD') return 'Discard TAF';
+      if (action === 'CLEAR') return 'Clear TAF';
       if (action === 'PUBLISH') return 'Publish';
       if (action === 'AMEND') return 'This TAF is an amendment';
       if (action === 'CORRECT') return 'This TAF is a correction';
@@ -2448,8 +2449,8 @@
     };
     var getConfirmationDialogContent = function getConfirmationDialogContent(action, isFormDirty) {
       switch (action) {
-        case 'DISCARD':
-          return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
+        case 'CLEAR':
+          return 'Are you sure you would like to clear this TAF? All content will be lost';
 
         case 'PUBLISH':
           return 'Are you sure you want to publish this TAF?';
@@ -2464,9 +2465,9 @@
     };
     var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel(action) {
       switch (action) {
-        case 'DISCARD':
+        case 'CLEAR':
           {
-            return 'Discard';
+            return 'Clear';
           }
 
         case 'CANCEL':
@@ -2556,13 +2557,13 @@
         cloud: __assign(__assign({}, emptyChangegroup.cloud), changeGroup.cloud)
       });
     };
-    var prepareTafValues = function prepareTafValues(_taf, tafAction, addEmptyChangeGroup) {
+    var prepareTafValues = function prepareTafValues(_taf, tafAction, addEmptyChangeGroups) {
       var _a;
 
       var _b;
 
-      if (addEmptyChangeGroup === void 0) {
-        addEmptyChangeGroup = false;
+      if (addEmptyChangeGroups === void 0) {
+        addEmptyChangeGroups = 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
 
@@ -2576,15 +2577,43 @@
       });
 
       var formattedChangeGroups = ((_b = taf.changeGroups) === null || _b === void 0 ? void 0 : _b.map(formatFormValues)) || [];
-      var changeGroups = formattedChangeGroups.map(createChangeGroup);
-      return __assign(__assign(__assign(__assign(__assign({}, taf), {
+      var changeGroups = formattedChangeGroups.map(createChangeGroup); // If addEmptyChangeGroups is true - ensure there are at least MIN_NUMBER_CHANGE_GROUP changegroups
+
+      if (addEmptyChangeGroups) {
+        var changeGroupsToAdd = MIN_NUMBER_CHANGE_GROUP - changeGroups.length;
+
+        if (changeGroupsToAdd > 0) {
+          Array.from(Array(changeGroupsToAdd)).map(function () {
+            return changeGroups.push(emptyChangegroup);
+          });
+        }
+      }
+
+      return __assign(__assign({
+        issueDate: '',
+        previousId: null,
+        previousValidDateStart: null,
+        previousValidDateEnd: null
+      }, taf), (_a = {
         messageType: getMessageType(taf, tafAction),
-        baseForecast: baseForecast
-      }), changeGroups.length && {
+        baseForecast: baseForecast,
         changeGroups: changeGroups
-      }), addEmptyChangeGroup && {
-        changeGroups: [emptyChangegroup]
-      }), (_a = {}, _a[shared.HIDDEN_INPUT_HELPER_IS_DRAFT] = true, _a));
+      }, _a[shared.HIDDEN_INPUT_HELPER_IS_DRAFT] = true, _a));
+    };
+    var clearTafFormData = function clearTafFormData(tafFormValues) {
+      // Remove all except for the validity times
+      var baseForecast = {
+        valid: tafFormValues.baseForecast.valid
+      };
+      var emptyChangeGroups = [];
+      Array.from(Array(MIN_NUMBER_CHANGE_GROUP)).map(function () {
+        return emptyChangeGroups.push(emptyChangegroup);
+      });
+      return __assign(__assign({}, tafFormValues), {
+        baseForecast: __assign(__assign({}, emptyBaseForecast), baseForecast),
+        // Add empty change groups
+        changeGroups: emptyChangeGroups
+      });
     };
     var getIsFormDefaultDisabled = function getIsFormDefaultDisabled(status) {
       return !(status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED');
@@ -3482,13 +3511,13 @@
         canBe: canBe,
         onTafViewModeButtonPress: onTafViewModeButtonPress
       }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "discardtaf",
+        "data-testid": "cleartaf",
         variant: "tertiary",
         onClick: function onClick() {
           // Simply discard the changes and close the dialog.
-          onTafEditModeButtonPress('DISCARD');
+          onTafEditModeButtonPress('CLEAR');
         }
-      }, "Discard"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
+      }, "Clear"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "savedrafttaf",
         variant: "tertiary",
         onClick: function onClick() {
@@ -3555,9 +3584,7 @@
           '&:hover': {
             backgroundColor: 'transparent'
           },
-          cursor: function cursor() {
-            return isSorting ? 'grabbing' : 'grab';
-          }
+          cursor: isSorting ? 'grabbing' : 'grab'
         }
       }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null));
     };
@@ -4013,9 +4040,8 @@
           onStartDrag = _o.onStartDrag,
           activeDraggingIndex = _o.activeDraggingIndex;
 
-      var dirtyFields = formState.dirtyFields,
+      var isFormDirty = formState.isDirty,
           errors = formState.errors;
-      var isFormDirty = Object.keys(dirtyFields).length > 0;
       shared.usePreventBrowserClose(isFormDirty && !isDisabled); // Needed to be able to show a confirmation dialog on closing parent view
 
       React__default["default"].useEffect(function () {
@@ -4038,9 +4064,13 @@
         });
       };
 
-      var resetFormValues = function resetFormValues(formData) {
+      var resetFormValues = function resetFormValues(formData, keepDirty) {
+        if (keepDirty === void 0) {
+          keepDirty = false;
+        }
+
         reset(formData, {
-          keepDirty: false,
+          keepDirty: keepDirty,
           keepDirtyValues: false
         });
       };
@@ -4054,7 +4084,7 @@
           tafToReset = originalTaf;
         }
 
-        var shouldAddEmptyChangGroup = !(tafToReset && tafToReset.changeGroups) && !resetDisabled;
+        var shouldAddEmptyChangGroup = !resetDisabled;
         var newTaf = prepareTafValues(tafToReset, action, shouldAddEmptyChangGroup);
         resetFormValues(newTaf);
         setIsDisabled(resetDisabled);
@@ -4189,15 +4219,18 @@
             })();
             break;
 
-          case 'DISCARD':
-            if (isFormDirty) {
-              showConfirmDialog(action).then(function () {
-                resetFormState(undefined, isDefaultDisabled);
-              });
-            } else {
-              resetFormState(undefined, isDefaultDisabled);
-            }
+          case 'CLEAR':
+            showConfirmDialog(action).then(function () {
+              var emptiedForm = clearTafFormData(getValues()); // Trigger an invisible change to dirty the form
+              // This is needed to trigger the autosave on changing location/time
 
+              var baseForecastFields = getFieldNames(false, -1);
+              setValue(baseForecastFields.wind, ' ', {
+                shouldDirty: true
+              });
+              resetFormValues(emptiedForm, true);
+              showSnackbar('TAF has been cleared');
+            });
             break;
 
           case 'AMEND':
@@ -4386,7 +4419,7 @@
         }; // eslint-disable-next-line react-hooks/exhaustive-deps
       }, []);
       React__default["default"].useEffect(function () {
-        var newValues = prepareTafValues(originalTaf, undefined, !isDefaultDisabled && !originalTaf.changeGroups); // set new form values when taf values changed
+        var newValues = prepareTafValues(originalTaf, undefined, !isDefaultDisabled); // set new form values when taf values changed
 
         resetFormValues(newValues); // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [originalTaf]);
@@ -4448,10 +4481,10 @@
         handle: ".handle",
         direction: "vertical",
         // hover props
-        forceFallback: true,
+        forceFallback: false,
         onStart: function onStart(event) {
           onStartDrag(event);
-          Sortable__default["default"].ghost.style.opacity = '1';
+          if (Sortable__default["default"].ghost) Sortable__default["default"].ghost.style.opacity = '1';
         }
       }, fields.map(function (item, index) {
         return /*#__PURE__*/React__default["default"].createElement(TafFormRow, {
@@ -4753,69 +4786,72 @@
           children = _a.children;
       return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
         title: title,
-        placement: "right"
+        placement: "right",
+        "data-testid": "statusIcon-tooltip"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         component: "span"
       }, children));
     };
 
     var StatusIcon = function StatusIcon(_a) {
-      var timeSlot = _a.timeSlot,
-          status = _a.status;
+      var status = _a.status,
+          timeSlot = _a.timeSlot;
 
-      if (status === 'NEW') {
-        return null;
-      }
+      switch (status) {
+        case 'DRAFT':
+        case 'DRAFT_AMENDED':
+        case 'DRAFT_CORRECTED':
+          return /*#__PURE__*/React__namespace.createElement(IconWithTooltip, {
+            title: getTafStatusLabel(status)
+          }, /*#__PURE__*/React__namespace.createElement(theme.Edit, {
+            "data-testid": "status-draft",
+            sx: {
+              color: 'geowebColors.buttons.tertiary.default.color'
+            }
+          }));
 
-      if (status === 'EXPIRED') {
-        return /*#__PURE__*/React__namespace.createElement(IconWithTooltip, {
-          title: "Expired"
-        }, /*#__PURE__*/React__namespace.createElement(theme.Clock, {
-          "data-testid": "status-expired",
-          sx: {
-            transform: 'scaleX(-1)',
-            color: 'geowebColors.buttons.tertiary.disabled.color'
-          }
-        }));
-      }
+        case 'PUBLISHED':
+        case 'CORRECTED':
+        case 'AMENDED':
+          return /*#__PURE__*/React__namespace.createElement(IconWithTooltip, {
+            title: getTafStatusLabel(status)
+          }, timeSlot === 'ACTIVE' ? /*#__PURE__*/React__namespace.createElement(theme.Success, {
+            "data-testid": "status-active",
+            sx: {
+              color: 'geowebColors.functional.success'
+            }
+          }) : /*#__PURE__*/React__namespace.createElement(theme.Clock, {
+            "data-testid": "status-upcoming",
+            sx: {
+              color: 'geowebColors.functional.success'
+            }
+          }));
 
-      if (status === 'CANCELLED') {
-        return /*#__PURE__*/React__namespace.createElement(IconWithTooltip, {
-          title: "Cancelled"
-        }, /*#__PURE__*/React__namespace.createElement(theme.Cancel, {
-          "data-testid": "status-cancelled",
-          sx: {
-            color: 'geowebColors.captions.captionError.rgba'
-          }
-        }));
-      }
+        case 'CANCELLED':
+          return /*#__PURE__*/React__namespace.createElement(IconWithTooltip, {
+            title: getTafStatusLabel(status)
+          }, /*#__PURE__*/React__namespace.createElement(theme.Cancel, {
+            "data-testid": "status-cancelled",
+            sx: {
+              color: 'geowebColors.captions.captionError.rgba'
+            }
+          }));
 
-      if (status === 'DRAFT' || status === 'DRAFT_CORRECTED' || status === 'DRAFT_AMENDED') {
-        return /*#__PURE__*/React__namespace.createElement(IconWithTooltip, {
-          title: "Draft"
-        }, /*#__PURE__*/React__namespace.createElement(theme.Edit, {
-          "data-testid": "status-draft",
-          sx: {
-            color: 'geowebColors.buttons.tertiary.default.color'
-          }
-        }));
-      }
+        case 'EXPIRED':
+          return /*#__PURE__*/React__namespace.createElement(IconWithTooltip, {
+            title: getTafStatusLabel(status)
+          }, /*#__PURE__*/React__namespace.createElement(theme.Clock, {
+            "data-testid": "status-expired",
+            sx: {
+              transform: 'scaleX(-1)',
+              color: 'geowebColors.buttons.tertiary.disabled.color'
+            }
+          }));
 
-      return timeSlot === 'ACTIVE' ? /*#__PURE__*/React__namespace.createElement(IconWithTooltip, {
-        title: "Active"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Success, {
-        "data-testid": "status-active",
-        sx: {
-          color: 'geowebColors.functional.success'
-        }
-      })) : /*#__PURE__*/React__namespace.createElement(IconWithTooltip, {
-        title: "Upcoming"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Clock, {
-        "data-testid": "status-upcoming",
-        sx: {
-          color: 'geowebColors.functional.success'
-        }
-      }));
+        case 'NEW':
+        default:
+          return null;
+      }
     };
 
     /* *
@@ -4861,8 +4897,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var AdverseWeatherTACMessage = function AdverseWeatherTACMessage(_a) {
       var TAC = _a.TAC,
@@ -4893,7 +4929,8 @@
             }, isActive && {
               backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
             }), word.type === 'adverse' && {
-              color: 'geowebColors.captions.captionError.rgba'
+              color: 'geowebColors.captions.captionError.rgba',
+              fontWeight: 'bold'
             })
           }, word.text === '=' ? "" + word.text : " " + word.text);
         }));
@@ -5233,8 +5270,7 @@
           location: 'EHAM'
         }
       } : _c;
-      var dirtyFields = reactHookForm.useFormContext().formState.dirtyFields;
-      var isDirty = Object.keys(dirtyFields).length > 0;
+      var isDirty = reactHookForm.useFormContext().formState.isDirty;
 
       if (!tafFromBackend) {
         return null;
@@ -5300,8 +5336,7 @@
           _c = _a.onChangeTab,
           onChangeTab = _c === void 0 ? function () {} : _c,
           timeSlot = _a.timeSlot;
-      var dirtyFields = reactHookForm.useFormContext().formState.dirtyFields;
-      var isDirty = Object.keys(dirtyFields).length > 0;
+      var isDirty = reactHookForm.useFormContext().formState.isDirty;
       return /*#__PURE__*/React__namespace.createElement(material.MenuList, {
         "data-testid": "location-tabs",
         sx: {

package/lib/components/StatusIcon/StatusIcon.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TafStatus, TimeSlot } from '../../types';
 interface StatusIconProps {
-    timeSlot: TimeSlot;
     status: TafStatus;
+    timeSlot: TimeSlot;
 }
 declare const StatusIcon: React.FC<StatusIconProps>;
 export default StatusIcon;

package/lib/components/TafForm/utils.d.ts

@@ -16,6 +16,7 @@ export declare const emptyBaseForecast: {
         cloud4: string;
     };
 };
+export declare const MIN_NUMBER_CHANGE_GROUP = 5;
 export declare const formatIssueTime: (issueDate: string) => string;
 declare type BaseForecastOrChangeGroupFormData<T extends BaseForecast | ChangeGroup> = T extends ChangeGroup ? ChangeGroupFormData : BaseForecastFormData;
 export declare function formatFormValues<T extends BaseForecast | ChangeGroup>(row: T): BaseForecastOrChangeGroupFormData<T>;
@@ -67,7 +68,8 @@ export declare const getTafStatusLabel: (status: TafStatus) => string;
 export declare const getMessageType: (taf: Taf, tafAction: TafActions) => string;
 export declare const getAmendedCorrectedTafTimes: (taf: Taf, tafAction: TafActions) => Taf;
 export declare const createChangeGroup: (changeGroup: ChangeGroupFormData) => ChangeGroupFormData;
-export declare const prepareTafValues: (_taf: Taf, tafAction: TafActions, addEmptyChangeGroup?: boolean) => TafFormData;
+export declare const prepareTafValues: (_taf: Taf, tafAction: TafActions, addEmptyChangeGroups?: boolean) => TafFormData;
+export declare const clearTafFormData: (tafFormValues: TafFormData) => TafFormData;
 export declare const getIsFormDefaultDisabled: (status: TafStatus) => boolean;
 export declare const fromStatusToAction: (tafStatus: TafStatus) => TafActions;
 export {};

package/lib/types.d.ts

@@ -67,7 +67,7 @@ export interface BaseTaf {
     issueDate?: TafDate;
 }
 export declare type TafStatus = 'NEW' | 'DRAFT' | 'DRAFT_AMENDED' | 'DRAFT_CORRECTED' | 'PUBLISHED' | 'CORRECTED' | 'AMENDED' | 'CANCELLED' | 'EXPIRED';
-export declare type TafActions = 'NEW' | 'DRAFT' | 'DRAFT_AMEND' | 'DRAFT_CORRECT' | 'PUBLISH' | 'CANCEL' | 'CORRECT' | 'AMEND' | 'CLOSE' | 'DISCARD';
+export declare type TafActions = 'NEW' | 'DRAFT' | 'DRAFT_AMEND' | 'DRAFT_CORRECT' | 'PUBLISH' | 'CANCEL' | 'CORRECT' | 'AMEND' | 'CLOSE' | 'CLEAR';
 export declare type TafCanbe = 'DRAFTED' | 'DISCARDED' | 'PUBLISHED' | 'CANCELLED' | 'AMENDED' | 'CORRECTED';
 export interface Taf extends BaseTaf {
     status: TafStatus;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/taf",
-  "version": "4.8.0",
+  "version": "4.10.0",
   "description": "GeoWeb TAF library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -12,32 +12,32 @@
   "typings": "./index.d.ts",
   "dependencies": {},
   "peerDependencies": {
-    "@opengeoweb/core": "4.8.0",
+    "@opengeoweb/api": "4.10.0",
     "react": "^17.0.2",
-    "@opengeoweb/shared": "4.8.0",
+    "axios": "^0.25.0",
+    "@opengeoweb/shared": "4.10.0",
     "@mui/material": "^5.10.8",
-    "@opengeoweb/theme": "4.8.0",
+    "@opengeoweb/theme": "4.10.0",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
     "@redux-eggs/core": "^2.2.0",
     "react-redux": "^8.0.4",
-    "@opengeoweb/form-fields": "4.8.0",
+    "@opengeoweb/form-fields": "4.10.0",
     "react-hook-form": "^7.41.5",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",
     "@mui/x-date-pickers": "^5.0.4",
     "lodash": "^4.17.20",
-    "axios": "^0.25.0",
     "date-fns": "^2.29.3",
-    "@opengeoweb/webmap": "4.8.0",
+    "@opengeoweb/core": "4.10.0",
+    "@opengeoweb/webmap": "4.10.0",
     "throttle-debounce": "^3.0.1",
     "proj4": "^2.6.2",
-    "@opengeoweb/api": "4.8.0",
     "react-intl": "^5.17.5",
     "react-sortablejs": "^6.1.4",
     "sortablejs": "^1.15.0",
-    "react-window": "^1.8.7",
     "immer": "^9.0.15",
+    "react-window": "^1.8.7",
     "@reduxjs/toolkit": "^1.8.3",
     "lodash.clonedeep": "^4.5.0",
     "@turf/turf": "^5.1.6",
@@ -46,7 +46,7 @@
     "@redux-eggs/redux-toolkit": "^2.2.0",
     "@redux-eggs/saga-extension": "^2.2.0",
     "react-dom": "^17.0.2",
-    "@opengeoweb/authentication": "4.8.0",
+    "@opengeoweb/authentication": "4.10.0",
     "react-router-dom": "^6.4.2",
     "query-string": "^6.13.7"
   }