@opengeoweb/taf 2.4.0 → 2.4.1

package/index.esm.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import React__default from 'react';
-import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
-import { TextField, SvgIcon, Grid, Box, Button, IconButton, Typography, Tooltip, Chip, useTheme, Card, Tabs, Tab, Dialog, MenuList, MenuItem, Backdrop, CircularProgress } from '@mui/material';
+import { TextField, SvgIcon, Grid, Box, Button, IconButton, Tooltip, Chip, Typography, createSvgIcon, Card, Tabs, Tab, Dialog, MenuList, MenuItem, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { ReactSortable, Sortable } from 'react-sortablejs';
+import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
 import moment from 'moment';
@@ -2216,8 +2216,9 @@ var convertTafValuesToObject = function convertTafValuesToObject(formData) {
   .filter(function (value) {
     return Object.keys(value).length;
   });
+  var parsedBaseForecast = productToPost.baseForecast && parseFormValues(productToPost.baseForecast, tafStart, tafEnd);
   var parsedFormValues = Object.assign(Object.assign({}, productToPost), {
-    baseForecast: parseFormValues(productToPost.baseForecast, tafStart, tafEnd),
+    baseForecast: parsedBaseForecast,
     changeGroups: parsedChangeGroups
   });
   return Object.keys(parsedFormValues).reduce(function (list, key) {
@@ -3487,6 +3488,171 @@ var DragHandle = function DragHandle(_ref) {
   }, /*#__PURE__*/React__default.createElement(DragIndicator, null));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var getCustomError = function getCustomError(error) {
+  var name = error.ref.name;
+  var isChangeGroup = name.includes('changeGroups');
+  var matchRowNumber = name.match(/\[(.*?)\]/);
+  var row = matchRowNumber ? parseInt(matchRowNumber[1], 10) : null;
+  return Object.assign(Object.assign({}, error), {
+    isChangeGroup: isChangeGroup,
+    row: row
+  });
+};
+var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
+  switch (sumOfErrors) {
+    case 0:
+      return '0 issues';
+
+    case 1:
+      return '1 issue';
+
+    default:
+      return "".concat(sumOfErrors, " issues");
+  }
+};
+
+var getErrorValues = function getErrorValues(fieldErrors) {
+  if (!fieldErrors) return [];
+  return Object.keys(fieldErrors).reduce(function (list, key) {
+    var error = Object.assign({}, fieldErrors[key]);
+
+    if (error.ref) {
+      return list.concat(getCustomError(error));
+    }
+
+    return list.concat(getErrorValues(error));
+  }, []);
+};
+
+var filterDuplicateErrors = function filterDuplicateErrors(errors) {
+  return errors.reduce(function (list, error) {
+    // check on type validateRequiredSub and validateRequiredMainOptional since these are giving 'duplicates'
+    if (error.type === 'validateRequiredSub') {
+      var exist = list.find(function (e) {
+        return e.type === 'validateRequiredSub' && e.row === error.row;
+      });
+      return exist ? list : list.concat(error);
+    }
+
+    if (error.type === 'validateRequiredMainOptional') {
+      var _exist = list.find(function (e) {
+        return e.type === 'validateRequiredMainOptional' && e.row === error.row;
+      });
+
+      return _exist ? list : list.concat(error);
+    }
+
+    return list.concat(error);
+  }, []);
+};
+var getErrors = function getErrors(errors) {
+  var errorList = Object.keys(errors).reduce(function (list, key) {
+    var errorValue = errors[key];
+
+    if (Array.isArray(errorValue)) {
+      var errorValues = errorValue.reduce(function (l, i) {
+        return l.concat(getErrorValues(i));
+      }, []);
+      return list.concat.apply(list, _toConsumableArray(errorValues));
+    }
+
+    return list.concat(getErrorValues(errorValue));
+  }, []);
+  return errorList;
+};
+
+/* *
+ * 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 IssuesButton = function IssuesButton(_ref) {
+  var _ref$errors = _ref.errors,
+      errors = _ref$errors === void 0 ? {} : _ref$errors,
+      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
+      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
+      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
+      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
+    return null;
+  } : _ref$setIsIssuesPaneO;
+  var errorList = filterDuplicateErrors(getErrors(errors));
+  var totalErrors = errorList.length;
+  var errorStatus = totalErrors > 0 ? 'error' : 'success';
+  var buttonColor = "geowebColors.functional.".concat(errorStatus);
+
+  var toggleIssuesPane = function toggleIssuesPane(newPosition) {
+    return setIsIssuesPaneOpen(!isIssuesPaneOpen, newPosition);
+  };
+
+  var onClickButton = function onClickButton(event) {
+    var _a;
+
+    var _event$currentTarget$ = event.currentTarget.getBoundingClientRect(),
+        left = _event$currentTarget$.left,
+        top = _event$currentTarget$.top;
+
+    var parentOffset = ((_a = document.getElementById('tafmodule')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
+      top: 0,
+      left: 0
+    };
+    var newPosition = {
+      left: left - parentOffset.left + 100,
+      top: top - parentOffset.top
+    };
+    toggleIssuesPane(newPosition);
+  };
+
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: "View details"
+  }, /*#__PURE__*/React.createElement(Chip, {
+    "data-testid": "issuesButton",
+    className: "status-".concat(errorStatus),
+    size: "small",
+    label: getIssuesLabel(totalErrors),
+    onClick: onClickButton,
+    sx: {
+      width: '74px',
+      color: '#ffffff',
+      backgroundColor: buttonColor,
+      '&:hover': {
+        backgroundColor: buttonColor
+      },
+      '&:focus': {
+        backgroundColor: buttonColor
+      },
+      fontSize: 12
+    }
+  }));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3591,12 +3757,42 @@ var getErrorMessage = function getErrorMessage(error, index) {
   return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(getErrorDefaultMessage(error));
 };
 var MODAL_DIALOG_ELEMENT = 'modal-dialog';
+var useIssuesPane = function useIssuesPane() {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isIssuesPaneOpen = _React$useState2[0],
+      setIsIssuesPaneOpen = _React$useState2[1];
+
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      startPosition = _React$useState4[0],
+      setStartPosition = _React$useState4[1];
+
+  var onToggleIssuesPane = function onToggleIssuesPane(isOpen, newPosition) {
+    if (!startPosition) {
+      setStartPosition(newPosition);
+    }
+
+    setIsIssuesPaneOpen(isOpen);
+  };
+
+  var onCloseIssuesPane = function onCloseIssuesPane() {
+    return setIsIssuesPaneOpen(false);
+  };
+
+  return {
+    isIssuesPaneOpen: isIssuesPaneOpen,
+    startPosition: startPosition,
+    onToggleIssuesPane: onToggleIssuesPane,
+    onCloseIssuesPane: onCloseIssuesPane
+  };
+};
 
 var IssuesPane = function IssuesPane(_ref3) {
-  var isOpen = _ref3.isOpen,
-      handleClose = _ref3.handleClose,
-      _ref3$errorList = _ref3.errorList,
+  var _ref3$errorList = _ref3.errorList,
       errorList = _ref3$errorList === void 0 ? [] : _ref3$errorList,
+      isOpen = _ref3.isOpen,
+      handleClose = _ref3.handleClose,
       _ref3$startPosition = _ref3.startPosition,
       startPosition = _ref3$startPosition === void 0 ? {
     left: 20,
@@ -3639,182 +3835,73 @@ var IssuesPane = function IssuesPane(_ref3) {
   }))), rootElement);
 };
 
-var getCustomError = function getCustomError(error) {
-  var name = error.ref.name;
-  var isChangeGroup = name.includes('changeGroups');
-  var matchRowNumber = name.match(/\[(.*?)\]/);
-  var row = matchRowNumber ? parseInt(matchRowNumber[1], 10) : null;
-  return Object.assign(Object.assign({}, error), {
-    isChangeGroup: isChangeGroup,
-    row: row
-  });
-};
+var fromStatusToAction = function fromStatusToAction(tafStatus) {
+  switch (tafStatus) {
+    case 'DRAFT':
+      return 'DRAFT';
 
-var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
-  switch (sumOfErrors) {
-    case 0:
-      return '0 issues';
+    case 'DRAFT_AMENDED':
+      return 'DRAFT_AMEND';
 
-    case 1:
-      return '1 issue';
+    case 'DRAFT_CORRECTED':
+      return 'DRAFT_CORRECT';
+
+    case 'PUBLISHED':
+      return 'PUBLISH';
+
+    case 'AMENDED':
+      return 'AMEND';
+
+    case 'CORRECTED':
+      return 'CORRECT';
+
+    case 'CANCELLED':
+      return 'CANCEL';
 
     default:
-      return "".concat(sumOfErrors, " issues");
+      return 'NEW';
   }
-};
+}; // prevents default functionality
 
-var getErrorValues = function getErrorValues(fieldErrors) {
-  if (!fieldErrors) return [];
-  return Object.keys(fieldErrors).reduce(function (list, key) {
-    var error = Object.assign({}, fieldErrors[key]);
 
-    if (error.ref) {
-      return list.concat(getCustomError(error));
-    }
+var noop = function noop() {};
 
-    return list.concat(getErrorValues(error));
-  }, []);
-};
+var TafForm = function TafForm(_ref) {
+  var _ref$isDisabled = _ref.isDisabled,
+      isDefaultDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      tafFromBackend = _ref.tafFromBackend,
+      _ref$onFormAction = _ref.onFormAction,
+      onFormAction = _ref$onFormAction === void 0 ? function () {
+    return null;
+  } : _ref$onFormAction,
+      _ref$onFormDirty = _ref.onFormDirty,
+      onFormDirty = _ref$onFormDirty === void 0 ? function () {
+    return null;
+  } : _ref$onFormDirty,
+      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
+      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
+      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
+      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
+    return null;
+  } : _ref$setIsIssuesPaneO;
+  var originalTaf = tafFromBackend.taf;
+  var defaultTafAction = fromStatusToAction(originalTaf.status);
 
-var filterDuplicateErrors = function filterDuplicateErrors(errors) {
-  return errors.reduce(function (list, error) {
-    // check on type validateRequiredSub and validateRequiredMainOptional since these are giving 'duplicates'
-    if (error.type === 'validateRequiredSub') {
-      var exist = list.find(function (e) {
-        return e.type === 'validateRequiredSub' && e.row === error.row;
-      });
-      return exist ? list : list.concat(error);
-    }
+  var _React$useState = React__default.useState(defaultTafAction),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      tafAction = _React$useState2[0],
+      setTafAction = _React$useState2[1];
 
-    if (error.type === 'validateRequiredMainOptional') {
-      var _exist = list.find(function (e) {
-        return e.type === 'validateRequiredMainOptional' && e.row === error.row;
-      });
+  var _React$useState3 = React__default.useState(isDefaultDisabled),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isDisabled = _React$useState4[0],
+      setIsDisabled = _React$useState4[1];
 
-      return _exist ? list : list.concat(error);
-    }
+  var confirmDialog = useConfirmationDialog();
 
-    return list.concat(error);
-  }, []);
-};
-
-var getErrors = function getErrors(errors) {
-  var errorList = Object.keys(errors).reduce(function (list, key) {
-    var errorValue = errors[key];
-
-    if (Array.isArray(errorValue)) {
-      var errorValues = errorValue.reduce(function (l, i) {
-        return l.concat(getErrorValues(i));
-      }, []);
-      return list.concat.apply(list, _toConsumableArray(errorValues));
-    }
-
-    return list.concat(getErrorValues(errorValue));
-  }, []);
-  return errorList;
-};
-
-var IssuesButton = function IssuesButton(_ref) {
-  var _ref$errors = _ref.errors,
-      errors = _ref$errors === void 0 ? {} : _ref$errors;
-  var errorList = filterDuplicateErrors(getErrors(errors));
-  var totalErrors = errorList.length;
-  var errorStatus = totalErrors > 0 ? 'error' : 'success';
-  var buttonColor = "geowebColors.functional.".concat(errorStatus);
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isIssuesPaneOpen = _React$useState2[0],
-      setIsIssuesPaneOpen = _React$useState2[1];
-
-  var toggleIssuesPane = function toggleIssuesPane() {
-    return setIsIssuesPaneOpen(!isIssuesPaneOpen);
-  };
-
-  var _React$useState3 = React.useState({
-    left: 0,
-    top: 0
-  }),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      startPosition = _React$useState4[0],
-      setStartPosition = _React$useState4[1];
-
-  var onClickButton = function onClickButton(event) {
-    var _a;
-
-    var _event$currentTarget$ = event.currentTarget.getBoundingClientRect(),
-        left = _event$currentTarget$.left,
-        top = _event$currentTarget$.top;
-
-    var parentOffset = ((_a = document.getElementById('tafmodule')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
-      top: 0,
-      left: 0
-    };
-    var newPosition = {
-      left: left - parentOffset.left + 100,
-      top: top - parentOffset.top
-    };
-    setStartPosition(newPosition);
-    toggleIssuesPane();
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "View details"
-  }, /*#__PURE__*/React.createElement(Chip, {
-    "data-testid": "issuesButton",
-    className: "status-".concat(errorStatus),
-    size: "small",
-    label: getIssuesLabel(totalErrors),
-    onClick: onClickButton,
-    sx: {
-      width: '74px',
-      color: '#ffffff',
-      backgroundColor: buttonColor,
-      '&:hover': {
-        backgroundColor: buttonColor
-      },
-      '&:focus': {
-        backgroundColor: buttonColor
-      },
-      fontSize: 12
-    }
-  })), /*#__PURE__*/React.createElement(IssuesPane, {
-    errorList: errorList,
-    handleClose: toggleIssuesPane,
-    isOpen: isIssuesPaneOpen,
-    startPosition: startPosition
-  }));
-};
-
-var noop = function noop() {};
-
-var TafForm = function TafForm(_ref) {
-  var defaultTafAction = _ref.tafAction,
-      isDefaultDisabled = _ref.isDisabled,
-      _ref$staticTAC = _ref.staticTAC,
-      staticTAC = _ref$staticTAC === void 0 ? '' : _ref$staticTAC,
-      tafFromBackend = _ref.tafFromBackend,
-      _ref$onFormAction = _ref.onFormAction,
-      onFormAction = _ref$onFormAction === void 0 ? function () {
-    return null;
-  } : _ref$onFormAction;
-  var originalTaf = tafFromBackend.taf;
-
-  var _React$useState = React__default.useState(defaultTafAction),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      tafAction = _React$useState2[0],
-      setTafAction = _React$useState2[1];
-
-  var _React$useState3 = React__default.useState(isDefaultDisabled),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isDisabled = _React$useState4[0],
-      setIsDisabled = _React$useState4[1];
-
-  var confirmDialog = useConfirmationDialog();
-
-  var _useDraftFormHelpers = useDraftFormHelpers(),
-      toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
-      DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
+      DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
 
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
@@ -3825,7 +3912,6 @@ var TafForm = function TafForm(_ref) {
   var _useFormContext = useFormContext(),
       control = _useFormContext.control,
       handleSubmit = _useFormContext.handleSubmit,
-      watch = _useFormContext.watch,
       trigger = _useFormContext.trigger,
       formState = _useFormContext.formState,
       getValues = _useFormContext.getValues,
@@ -3837,12 +3923,12 @@ var TafForm = function TafForm(_ref) {
   usePreventBrowserClose(isFormDirty && !isDisabled);
   var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
-  var _React$useState5 = React__default.useState(watch()),
+  var _React$useState5 = React__default.useState(getValues()),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       delayedFormValues = _React$useState6[0],
       setDelayedFormValues = _React$useState6[1];
 
-  var _useTACGenerator = useTACGenerator(convertTafValuesToObject(delayedFormValues), api.getTAC, staticTAC),
+  var _useTACGenerator = useTACGenerator(tafFromBackend.taf, api.getTAC),
       _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
       TAC = _useTACGenerator2[0],
       updateTAC = _useTACGenerator2[1];
@@ -3854,7 +3940,7 @@ var TafForm = function TafForm(_ref) {
   };
 
   React__default.useEffect(function () {
-    if (staticTAC === '' && isMounted.current && isFormDirty) {
+    if (isMounted.current && isFormDirty) {
       var newTAC = hasErrors ? null : convertTafValuesToObject(delayedFormValues);
       updateTAC(newTAC);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -3866,7 +3952,11 @@ var TafForm = function TafForm(_ref) {
       updateTAC(convertTafValuesToObject(delayedFormValues));
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [hasErrors]);
+  }, [hasErrors]); // Needed to be able to show a confirmation dialog on switching tabs when form is edited and not saved
+
+  React__default.useEffect(function () {
+    onFormDirty(isFormDirty);
+  }, [isFormDirty, onFormDirty]);
 
   var onSubmit = function onSubmit(data) {
     // eslint-disable-next-line no-console
@@ -4059,16 +4149,33 @@ var TafForm = function TafForm(_ref) {
     });
   };
 
+  var _React$useState7 = React__default.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      shouldValidate = _React$useState8[0],
+      setShouldValidate = _React$useState8[1];
+
   React__default.useEffect(function () {
-    if (!isDisabled) {
+    var defaultValues = prepareTafValues(tafFromBackend.taf, undefined, !isDisabled && !tafFromBackend.taf.changeGroups); // set initial form values
+
+    reset(defaultValues); // set validate flag to validate after the values have been set
+
+    setShouldValidate(true);
+    return function () {
+      reset();
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React__default.useEffect(function () {
+    if (shouldValidate && !isDisabled) {
       // trigger validation on all changegroup validity times after initial load since they could be outside the new validity period
-      var validFields = fields.map(function (_field, index) {
+      var _tafFromBackend$taf$c = tafFromBackend.taf.changeGroups,
+          changeGroups = _tafFromBackend$taf$c === void 0 ? [] : _tafFromBackend$taf$c;
+      var validFields = changeGroups.map(function (_field, index) {
         return "changeGroups[".concat(index, "].valid");
       });
       trigger(validFields);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, []);
+  }, [shouldValidate]);
   return /*#__PURE__*/React__default.createElement("form", {
     "data-testid": "taf-form",
     onSubmit: handleSubmit(onSubmit),
@@ -4146,7 +4253,9 @@ var TafForm = function TafForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(IssuesButton, {
-    errors: errors
+    errors: errors,
+    isIssuesPaneOpen: isIssuesPaneOpen,
+    setIsIssuesPaneOpen: setIsIssuesPaneOpen
   }))), /*#__PURE__*/React__default.createElement(TafFormButtons, {
     isFormDisabled: isDisabled,
     tafAction: tafAction,
@@ -4161,50 +4270,6 @@ var TafForm = function TafForm(_ref) {
   }), /*#__PURE__*/React__default.createElement(DraftFieldHelper, null));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-
-var TafFormWrapper = function TafFormWrapper(_ref) {
-  var tafFromBackend = _ref.tafFromBackend,
-      mode = _ref.mode,
-      _ref$TAC = _ref.TAC,
-      TAC = _ref$TAC === void 0 ? '' : _ref$TAC,
-      onFormAction = _ref.onFormAction,
-      tafAction = _ref.tafAction;
-  var taf = tafFromBackend.taf;
-  var isDisabled = mode === 'view';
-  var defaultValues = prepareTafValues(taf, undefined, !isDisabled && !taf.changeGroups);
-  var options = {
-    defaultValues: defaultValues,
-    mode: 'onTouched',
-    reValidateMode: 'onChange',
-    criteriaMode: 'all'
-  };
-  return /*#__PURE__*/React__default.createElement(ReactHookFormProvider, {
-    options: options
-  }, /*#__PURE__*/React__default.createElement(TafForm, {
-    isDisabled: isDisabled,
-    staticTAC: TAC,
-    onFormAction: onFormAction,
-    tafFromBackend: tafFromBackend,
-    tafAction: tafAction
-  }));
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4401,15 +4466,9 @@ var muiTabA11yProps = function muiTabA11yProps(index) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-
-var EditIcon = function EditIcon(props) {
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-    d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
-    fillRule: "evenodd",
-    fill: "".concat(theme.palette.geowebColors.buttons.tertiary["default"].color)
-  })));
-};
+var EditIcon = createSvgIcon( /*#__PURE__*/React.createElement("path", {
+  d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z"
+}), 'Edit');
 
 var StatusIcon = function StatusIcon(_ref) {
   var timeSlot = _ref.timeSlot,
@@ -4420,45 +4479,64 @@ var StatusIcon = function StatusIcon(_ref) {
   }
 
   if (status === 'EXPIRED') {
-    return /*#__PURE__*/React.createElement(Schedule, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Expired",
+      placement: "right"
+    }, /*#__PURE__*/React.createElement(Schedule, {
       "data-testid": "status-expired",
       fontSize: "small",
       sx: {
         transform: 'scaleX(-1)',
         color: 'geowebColors.buttons.tertiary.disabled.color'
       }
-    });
+    }));
   }
 
   if (status === 'CANCELLED') {
-    return /*#__PURE__*/React.createElement(DoDisturbIcon, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Cancelled",
+      placement: "right"
+    }, /*#__PURE__*/React.createElement(DoDisturbIcon, {
       "data-testid": "status-cancelled",
       fontSize: "small",
       sx: {
         color: 'geowebColors.captions.captionError.rgba'
       }
-    });
+    }));
   }
 
   if (status === 'DRAFT' || status === 'DRAFT_CORRECTED' || status === 'DRAFT_AMENDED') {
-    return /*#__PURE__*/React.createElement(EditIcon, {
-      "data-testid": "status-draft"
-    });
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Draft",
+      placement: "right"
+    }, /*#__PURE__*/React.createElement(SvgIcon, {
+      component: EditIcon,
+      "data-testid": "status-draft",
+      sx: {
+        color: 'geowebColors.buttons.tertiary.default.color'
+      }
+    }));
   }
 
-  return timeSlot === 'ACTIVE' ? /*#__PURE__*/React.createElement(CheckCircle, {
+  return timeSlot === 'ACTIVE' ? /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Active",
+    placement: "right"
+  }, /*#__PURE__*/React.createElement(CheckCircle, {
     "data-testid": "status-active",
     fontSize: "small",
     sx: {
       color: 'geowebColors.functional.success'
     }
-  }) : /*#__PURE__*/React.createElement(Schedule, {
+  })) : /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Upcoming",
+    placement: "right"
+  }, /*#__PURE__*/React.createElement(Schedule, {
     "data-testid": "status-upcoming",
     fontSize: "small",
     sx: {
       color: 'geowebColors.functional.success'
     }
-  });
+  }));
 };
 
 var TacContainer = function TacContainer(_ref) {
@@ -4744,6 +4822,7 @@ var TacOverviewMobile = function TacOverviewMobile(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
+
 var formatBaseTime = function formatBaseTime(time) {
   return time.format('HH:mm DD MMM');
 };
@@ -4752,7 +4831,13 @@ var TopTabs = function TopTabs(_ref) {
   var timeSlot = _ref.timeSlot,
       _ref$onChangeTimeSlot = _ref.onChangeTimeSlot,
       onChangeTimeSlot = _ref$onChangeTimeSlot === void 0 ? function () {} : _ref$onChangeTimeSlot,
-      tafFromBackend = _ref.tafFromBackend;
+      _ref$tafFromBackend = _ref.tafFromBackend,
+      tafFromBackend = _ref$tafFromBackend === void 0 ? {
+    taf: {
+      baseTime: '2022-01-06T12:00:00Z',
+      location: 'EHAM'
+    }
+  } : _ref$tafFromBackend;
 
   if (!tafFromBackend) {
     return null;
@@ -4780,12 +4865,13 @@ var TopTabs = function TopTabs(_ref) {
     value: activeTab,
     onChange: onChangeTab,
     "aria-label": "timeslot-tabs",
+    "data-testid": "timeslot-tabs",
     variant: "fullWidth"
   }, tabs.map(function (tab, index) {
     return /*#__PURE__*/React__default.createElement(Tab, Object.assign({
       key: tab.title,
       label: tab.title,
-      "data-testid": "tab-".concat(index),
+      "data-testid": "toptab-".concat(index),
       sx: {
         fontSize: 16
       }
@@ -4927,7 +5013,17 @@ var TafPanel = function TafPanel(_ref) {
       activeTafIndex = _ref.activeTafIndex,
       index = _ref.index,
       _ref$onPostTaf = _ref.onPostTaf,
-      onPostTaf = _ref$onPostTaf === void 0 ? function () {} : _ref$onPostTaf;
+      onPostTaf = _ref$onPostTaf === void 0 ? function () {} : _ref$onPostTaf,
+      _ref$onFormDirty = _ref.onFormDirty,
+      onFormDirty = _ref$onFormDirty === void 0 ? function () {
+    return null;
+  } : _ref$onFormDirty,
+      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
+      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
+      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
+      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
+    return null;
+  } : _ref$setIsIssuesPaneO;
 
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
@@ -4968,14 +5064,15 @@ var TafPanel = function TafPanel(_ref) {
 
             case 4:
               setLoading(false);
-              setError(null); // callback
+              setError(null);
+              onFormDirty(false); // callback
 
               onPostTaf();
-              _context.next = 15;
+              _context.next = 16;
               break;
 
-            case 9:
-              _context.prev = 9;
+            case 10:
+              _context.prev = 10;
               _context.t0 = _context["catch"](0);
               newError = data.changeStatusTo === 'CANCELLED' ? {
                 type: 'CANCELLED',
@@ -4989,12 +5086,12 @@ var TafPanel = function TafPanel(_ref) {
               setLoading(false);
               throw _context.t0;
 
-            case 15:
+            case 16:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 9]]);
+      }, _callee, null, [[0, 10]]);
     }));
   };
 
@@ -5062,18 +5159,55 @@ var TafPanel = function TafPanel(_ref) {
     title: error.title,
     info: error.message,
     dataTestId: "taf-error"
-  }), /*#__PURE__*/React__default.createElement(TafFormWrapper, {
-    mode: getViewMode(tafFromBackend.taf.status),
+  }), /*#__PURE__*/React__default.createElement(TafForm, {
+    isDisabled: getViewMode(tafFromBackend.taf.status) === 'view',
     tafFromBackend: tafFromBackend,
-    onFormAction: onTafAction
+    onFormAction: onTafAction,
+    onFormDirty: onFormDirty,
+    isIssuesPaneOpen: isIssuesPaneOpen,
+    setIsIssuesPaneOpen: setIsIssuesPaneOpen
   }));
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var IssuesPaneWrapper = function IssuesPaneWrapper(props) {
+  var _useFormContext = useFormContext(),
+      errors = _useFormContext.formState.errors;
+
+  var errorList = filterDuplicateErrors(getErrors(errors));
+  return /*#__PURE__*/React.createElement(IssuesPane, Object.assign({
+    errorList: errorList
+  }, props));
+};
+
 var TafLayout = function TafLayout(_ref) {
   var _ref$tafList = _ref.tafList,
       tafList = _ref$tafList === void 0 ? [] : _ref$tafList,
       _ref$onPostTaf = _ref.onPostTaf,
       onPostTaf = _ref$onPostTaf === void 0 ? function () {} : _ref$onPostTaf;
+  var confirmDialog = useConfirmationDialog();
+
+  var _useIssuesPane = useIssuesPane(),
+      isIssuesPaneOpen = _useIssuesPane.isIssuesPaneOpen,
+      onToggleIssuesPane = _useIssuesPane.onToggleIssuesPane,
+      onCloseIssuesPane = _useIssuesPane.onCloseIssuesPane,
+      startPosition = _useIssuesPane.startPosition;
 
   var _React$useState = React__default.useState(sortTafTimeSlots(tafList)),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -5083,9 +5217,9 @@ var TafLayout = function TafLayout(_ref) {
       expired = _React$useState2$.expired,
       updateSortedTafs = _React$useState2[1];
 
-  var _upcoming$slice = upcoming.slice(-1),
-      _upcoming$slice2 = _slicedToArray(_upcoming$slice, 1),
-      lastUpcomingTaf = _upcoming$slice2[0];
+  var _current$slice = current.slice(-1),
+      _current$slice2 = _slicedToArray(_current$slice, 1),
+      lastCurrentTaf = _current$slice2[0];
 
   var _React$useState3 = React__default.useState('UPCOMING'),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
@@ -5102,7 +5236,34 @@ var TafLayout = function TafLayout(_ref) {
       activeTafIndex = _React$useState8[0],
       setActiveTafIndex = _React$useState8[1];
 
+  var _React$useState9 = React__default.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      isFormDirty = _React$useState10[0],
+      setIsFormDirty = _React$useState10[1];
+
+  function onChangeTab(action, value) {
+    if (isFormDirty) {
+      confirmDialog({
+        title: 'Whoops',
+        description: 'Do you want to leave this open TAF without saving it? All changes will be lost.',
+        confirmLabel: 'Exit without saving'
+      }).then(function () {
+        action(value);
+      });
+    } else {
+      action(value);
+    }
+  }
+
+  var onChangeLocationTab = function onChangeLocationTab(index) {
+    onChangeTab(setActiveTafIndex, index);
+  };
+
   var onChangeTimeSlot = function onChangeTimeSlot(newTimeSlot) {
+    onChangeTab(changeTimeSlot, newTimeSlot);
+  };
+
+  var changeTimeSlot = function changeTimeSlot(newTimeSlot) {
     setTimeSlot(newTimeSlot);
     setLocations(newTimeSlot === 'ACTIVE' ? current : upcoming);
     setActiveTafIndex(0);
@@ -5162,7 +5323,7 @@ var TafLayout = function TafLayout(_ref) {
     xs: 12,
     sm: 9
   }, /*#__PURE__*/React__default.createElement(TopTabs, {
-    tafFromBackend: lastUpcomingTaf,
+    tafFromBackend: lastCurrentTaf,
     timeSlot: timeSlot,
     onChangeTimeSlot: onChangeTimeSlot
   }))), /*#__PURE__*/React__default.createElement(Grid, {
@@ -5186,7 +5347,7 @@ var TafLayout = function TafLayout(_ref) {
   }, /*#__PURE__*/React__default.createElement(LocationTabs, {
     tafList: locations,
     activeIndex: activeTafIndex,
-    onChangeTab: setActiveTafIndex,
+    onChangeTab: onChangeLocationTab,
     timeSlot: timeSlot
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -5210,7 +5371,10 @@ var TafLayout = function TafLayout(_ref) {
       activeTafIndex: activeTafIndex,
       index: index,
       tafFromBackend: tafFromBackend,
-      onPostTaf: onPostTaf
+      onPostTaf: onPostTaf,
+      onFormDirty: setIsFormDirty,
+      isIssuesPaneOpen: isIssuesPaneOpen,
+      setIsIssuesPaneOpen: onToggleIssuesPane
     });
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -5227,7 +5391,39 @@ var TafLayout = function TafLayout(_ref) {
     currentTafs: current,
     expiredTafs: expired,
     activeTaf: activeTaf
-  })))))));
+  })))))), /*#__PURE__*/React__default.createElement(IssuesPaneWrapper, {
+    handleClose: onCloseIssuesPane,
+    isOpen: isIssuesPaneOpen,
+    startPosition: startPosition
+  }));
+};
+
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var TafWrapper = function TafWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React.createElement(ReactHookFormProvider, {
+    options: {
+      mode: 'onTouched',
+      reValidateMode: 'onChange',
+      criteriaMode: 'all'
+    }
+  }, children));
 };
 
 var TafModule = function TafModule() {
@@ -5311,7 +5507,7 @@ var TafModule = function TafModule() {
 };
 
 var Wrapper = function Wrapper() {
-  return /*#__PURE__*/React.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React.createElement(TafModule, null));
+  return /*#__PURE__*/React.createElement(TafWrapper, null, /*#__PURE__*/React.createElement(TafModule, null));
 };
 
 /* *
@@ -5330,7 +5526,7 @@ var Wrapper = function Wrapper() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
+var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
   var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
   return {
     // api data
@@ -5346,4 +5542,971 @@ var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, aut
   };
 };
 
-export { TafFormWrapper, Wrapper as TafModule, createApi };
+var currentDate = moment.utc().format('YYYY-MM-DD');
+var tomorrowDate = moment.utc().add(1, 'day').format('YYYY-MM-DD');
+var airportPeriod = 6;
+var airportValidity = 40;
+
+var validDateRange = function validDateRange(refHour, period) {
+  var startHour = period * Math.floor(parseInt(refHour.format('HH'), 10) / period) % 24;
+  var start = refHour.set({
+    hour: startHour,
+    minute: 0,
+    second: 0
+  });
+  var end = start.clone().add(airportValidity, 'hours');
+  return [start.format('YYYY-MM-DDTHH:mm:ss'), end.format('YYYY-MM-DDTHH:mm:ss')];
+};
+
+var dateAdd = function dateAdd(refDateAsString, hours) {
+  return moment.utc(refDateAsString).add(hours, 'hours').format('YYYY-MM-DDTHH:mm:ss');
+};
+
+var _validDateRange = validDateRange(moment.utc(), airportPeriod),
+    _validDateRange2 = _slicedToArray(_validDateRange, 2),
+    currentValidDateStart = _validDateRange2[0],
+    currentValidDateEnd = _validDateRange2[1];
+
+var _validDateRange3 = validDateRange(moment.utc().add(6, 'hours'), airportPeriod),
+    _validDateRange4 = _slicedToArray(_validDateRange3, 2),
+    upcomingValidDateStart = _validDateRange4[0],
+    upcomingValidDateEnd = _validDateRange4[1];
+
+var _validDateRange5 = validDateRange(moment.utc().add(-6, 'hours'), airportPeriod),
+    _validDateRange6 = _slicedToArray(_validDateRange5, 2),
+    expiredValidDateStart = _validDateRange6[0],
+    expiredValidDateEnd = _validDateRange6[1];
+
+var fakeTafList = [{
+  creationDate: upcomingValidDateStart,
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: '5f9583fjdf0f337925',
+    baseTime: upcomingValidDateStart,
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    location: 'EHAM',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateStart,
+        end: upcomingValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: '5f9583fjd111137925',
+    baseTime: upcomingValidDateStart,
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    location: 'EHRD',
+    status: 'DRAFT',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateStart,
+        end: upcomingValidDateEnd
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      cavOK: true
+    }
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['CANCELLED', 'AMENDED', 'DISCARDED'],
+  taf: {
+    uuid: '754905485',
+    baseTime: upcomingValidDateStart,
+    previousId: '5f9583fjdf45ff4330f337925',
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    previousValidDateStart: upcomingValidDateStart,
+    previousValidDateEnd: upcomingValidDateEnd,
+    location: 'EHLE',
+    status: 'DRAFT_AMENDED',
+    type: 'NORMAL',
+    messageType: 'AMD',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateStart,
+        end: upcomingValidDateEnd
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    },
+    changeGroups: [{
+      change: 'TEMPO',
+      probability: 'PROB30',
+      valid: {
+        start: dateAdd(upcomingValidDateStart, 3),
+        end: dateAdd(upcomingValidDateStart, 4)
+      },
+      visibility: {
+        range: 100,
+        unit: 'M'
+      },
+      cloud: {
+        cloud1: {
+          verticalVisibility: 5
+        }
+      }
+    }]
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: {
+    uuid: '43545345345',
+    issueDate: upcomingValidDateStart,
+    baseTime: "".concat(currentDate, "T18:00:00Z"),
+    validDateStart: "".concat(currentDate, "T18:00:00Z"),
+    validDateEnd: upcomingValidDateEnd,
+    previousId: 'jkdjkdfjkgdf',
+    previousValidDateStart: upcomingValidDateStart,
+    previousValidDateEnd: upcomingValidDateEnd,
+    location: 'EHLE',
+    status: 'CORRECTED',
+    type: 'NORMAL',
+    messageType: 'COR',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateStart,
+        end: upcomingValidDateEnd
+      },
+      wind: {
+        direction: 350,
+        speed: 46,
+        gust: 67,
+        unit: 'KT'
+      },
+      cavOK: true
+    },
+    changeGroups: [{
+      change: 'BECMG',
+      valid: {
+        start: dateAdd(upcomingValidDateStart, 1),
+        end: dateAdd(upcomingValidDateStart, 2)
+      },
+      visibility: {
+        range: 1000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: 'MIFG'
+      },
+      cloud: {
+        cloud1: 'NSC'
+      }
+    }, {
+      change: 'FM',
+      valid: {
+        start: dateAdd(upcomingValidDateStart, 2)
+      },
+      visibility: {
+        range: 6000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: '+SHRA'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 40
+        },
+        cloud2: {
+          coverage: 'OVC',
+          height: 60,
+          type: 'CB'
+        }
+      }
+    }]
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: {
+    uuid: '5f9583fjdf45ff4330f337925',
+    issueDate: upcomingValidDateStart,
+    baseTime: upcomingValidDateStart,
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    location: 'EHGG',
+    status: 'PUBLISHED',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateEnd,
+        end: upcomingValidDateEnd
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    },
+    changeGroups: [{
+      change: 'TEMPO',
+      probability: 'PROB30',
+      valid: {
+        start: dateAdd(upcomingValidDateStart, 1),
+        end: dateAdd(upcomingValidDateStart, 2)
+      },
+      visibility: {
+        range: 200,
+        unit: 'M'
+      },
+      cloud: {
+        cloud1: {
+          verticalVisibility: 5
+        }
+      }
+    }]
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['AMENDED'],
+  taf: {
+    uuid: '5464565464',
+    previousId: '5445fghrfg3546456',
+    issueDate: upcomingValidDateStart,
+    baseTime: upcomingValidDateStart,
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    previousValidDateStart: upcomingValidDateStart,
+    previousValidDateEnd: upcomingValidDateEnd,
+    location: 'EHBK',
+    status: 'CANCELLED',
+    type: 'NORMAL',
+    messageType: 'CNL',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateStart,
+        end: upcomingValidDateEnd
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    }
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: {
+    uuid: 'gh56734fghfgh',
+    previousId: '8574jnf93475',
+    issueDate: "".concat(currentDate, "T16:16:00Z"),
+    baseTime: upcomingValidDateStart,
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    previousValidDateStart: upcomingValidDateStart,
+    previousValidDateEnd: upcomingValidDateEnd,
+    location: 'TNCB',
+    status: 'AMENDED',
+    type: 'NORMAL',
+    messageType: 'AMD',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T16:12:00Z"),
+        end: upcomingValidDateEnd
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    }
+  }
+}, {
+  creationDate: currentValidDateStart,
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: {
+    uuid: 'giskdj09845872039',
+    issueDate: currentValidDateStart,
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'EHAM',
+    status: 'PUBLISHED',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      },
+      visibility: {
+        range: 500,
+        unit: 'M'
+      },
+      wind: {
+        direction: 200,
+        speed: 20,
+        gust: 35,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 40
+        }
+      }
+    }
+  }
+}, {
+  creationDate: currentValidDateStart,
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: 'ghskdj09845872039',
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'EHRD',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: currentValidDateStart,
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: 'ghskdj09845872040',
+    issueDate: currentValidDateStart,
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'EHLE',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: "".concat(currentDate, "T06:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: 'ghskdj09845872041',
+    issueDate: currentValidDateStart,
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'EHGG',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: "".concat(currentDate, "T06:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: 'ghskdj09845872042',
+    issueDate: currentValidDateStart,
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'EHBK',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: "".concat(currentDate, "T06:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: 'ghskdj09845872043',
+    issueDate: currentValidDateStart,
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'TNCB',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: expiredValidDateStart,
+  canbe: [],
+  taf: {
+    uuid: 'sdkjhsdf90845890',
+    issueDate: expiredValidDateStart,
+    baseTime: expiredValidDateStart,
+    validDateStart: expiredValidDateStart,
+    validDateEnd: expiredValidDateEnd,
+    location: 'EHAM',
+    status: 'EXPIRED',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: expiredValidDateStart,
+        end: expiredValidDateEnd
+      },
+      cavOK: true,
+      wind: {
+        direction: 50,
+        speed: 5,
+        unit: 'KT'
+      }
+    },
+    changeGroups: [{
+      change: 'BECMG',
+      valid: {
+        start: dateAdd(expiredValidDateStart, 1),
+        end: dateAdd(expiredValidDateStart, 4)
+      },
+      visibility: {
+        range: 1000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: 'MIFG'
+      }
+    }, {
+      change: 'FM',
+      valid: {
+        start: dateAdd(expiredValidDateStart, 5)
+      },
+      visibility: {
+        range: 6000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: '+SHRA'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 40
+        },
+        cloud2: {
+          coverage: 'OVC',
+          height: 60,
+          type: 'CB'
+        }
+      }
+    }]
+  }
+}];
+var fakeNewTaf = {
+  creationDate: "".concat(currentDate, "T12:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    type: 'NORMAL',
+    messageType: 'ORG',
+    status: 'NEW',
+    uuid: '5f9583fjdf0445332f337925',
+    baseTime: "".concat(currentDate, "T12:00:00Z"),
+    validDateStart: "".concat(currentDate, "T12:00:00Z"),
+    validDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    location: 'EHBK',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T12:00:00Z"),
+        end: "".concat(tomorrowDate, "T18:00:00Z")
+      }
+    }
+  }
+};
+({
+  creationDate: "2022-01-06T12:00:00Z",
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: Object.assign(Object.assign({}, fakeNewTaf.taf), {
+    baseTime: "2022-01-06T12:00:00Z",
+    validDateStart: "2022-01-06T12:00:00Z",
+    validDateEnd: "2022-01-07T18:00:00Z",
+    baseForecast: {
+      valid: {
+        start: "2022-01-06T12:00:00Z",
+        end: "2022-01-07T18:00:00Z"
+      }
+    }
+  })
+});
+var fakePublishedTaf = {
+  creationDate: "".concat(currentDate, "T12:00:00Z"),
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: {
+    uuid: 'slsdkjg-023895',
+    issueDate: "".concat(currentDate, "T12:00:00Z"),
+    baseTime: "".concat(currentDate, "T12:00:00Z"),
+    validDateStart: "".concat(currentDate, "T12:00:00Z"),
+    validDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    location: 'EHLE',
+    status: 'PUBLISHED',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T12:00:00Z"),
+        end: "".concat(tomorrowDate, "T18:00:00Z")
+      },
+      wind: {
+        direction: 50,
+        speed: 5,
+        unit: 'KT'
+      },
+      cavOK: true
+    },
+    changeGroups: [{
+      change: 'FM',
+      valid: {
+        start: "".concat(currentDate, "T12:00:00Z")
+      },
+      visibility: {
+        range: 6000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: '+SHRA'
+      },
+      wind: {
+        direction: 10,
+        speed: 10,
+        unit: 'KT',
+        gust: 35
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 40
+        },
+        cloud2: {
+          coverage: 'OVC',
+          height: 60,
+          type: 'CB'
+        }
+      }
+    }, {
+      change: 'BECMG',
+      valid: {
+        start: "".concat(currentDate, "T23:00:00Z"),
+        end: "".concat(tomorrowDate, "T00:00:00Z")
+      },
+      wind: {
+        direction: 150,
+        speed: 5,
+        unit: 'KT'
+      },
+      visibility: {
+        range: 1000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: 'MIFG'
+      }
+    }]
+  }
+};
+({
+  creationDate: "2022-01-06T12:00:00Z",
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: Object.assign(Object.assign({}, fakePublishedTaf.taf), {
+    location: 'EHGG',
+    baseTime: "2022-01-06T12:00:00Z",
+    issueDate: "2022-01-06T12:00:00Z",
+    validDateStart: "2022-01-06T12:00:00Z",
+    validDateEnd: "2022-01-07T18:00:00Z",
+    baseForecast: Object.assign(Object.assign({}, fakePublishedTaf.taf.baseForecast), {
+      valid: {
+        start: "2022-01-06T12:00:00Z",
+        end: "2022-01-07T18:00:00Z"
+      }
+    }),
+    changeGroups: [{
+      change: 'FM',
+      valid: {
+        start: "2022-01-06T12:00:00Z"
+      },
+      visibility: {
+        range: 6000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: '+SHRA'
+      },
+      wind: {
+        direction: 10,
+        speed: 10,
+        unit: 'KT',
+        gust: 35
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 40
+        },
+        cloud2: {
+          coverage: 'OVC',
+          height: 60,
+          type: 'CB'
+        }
+      }
+    }, {
+      change: 'BECMG',
+      valid: {
+        start: "2022-01-06T23:00:00Z",
+        end: "2022-01-07T00:00:00Z"
+      },
+      wind: {
+        direction: 150,
+        speed: 5,
+        unit: 'KT'
+      },
+      visibility: {
+        range: 1000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: 'MIFG'
+      }
+    }]
+  })
+});
+var fakeDraftTaf = {
+  creationDate: "".concat(currentDate, "T18:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: '5f9583fjdf0f337925',
+    baseTime: "".concat(currentDate, "T18:00:00Z"),
+    validDateStart: "".concat(currentDate, "T18:00:00Z"),
+    validDateEnd: "".concat(tomorrowDate, "T23:59:00Z"),
+    location: 'EHLE',
+    status: 'DRAFT',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T18:00:00Z"),
+        end: "".concat(tomorrowDate, "T23:59:00Z")
+      },
+      wind: {
+        direction: 150,
+        speed: 5,
+        unit: 'KT'
+      },
+      visibility: {
+        range: 1000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: 'BCFG'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'FEW',
+          height: 15
+        }
+      }
+    }
+  }
+};
+({
+  creationDate: "2022-01-06T18:00:00Z",
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: Object.assign(Object.assign({}, fakeDraftTaf.taf), {
+    baseTime: "2022-01-06T18:00:00Z",
+    validDateStart: "2022-01-06T18:00:00Z",
+    validDateEnd: "2022-01-07T23:59:00Z",
+    baseForecast: Object.assign(Object.assign({}, fakeDraftTaf.taf.baseForecast), {
+      valid: {
+        start: "2022-01-06T18:00:00Z",
+        end: "2022-01-07T23:59:00Z"
+      }
+    })
+  })
+});
+var fakeDraftAmendmentTaf = {
+  creationDate: "".concat(currentDate, "T14:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: '954905487',
+    previousId: '5f9583fjdf45ff4330f337925',
+    issueDate: "".concat(currentDate, "T14:00:00Z"),
+    baseTime: "".concat(currentDate, "T12:00:00Z"),
+    validDateStart: "".concat(currentDate, "T14:00:00Z"),
+    validDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    previousValidDateStart: "".concat(currentDate, "T12:00:00Z"),
+    previousValidDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    location: 'EHAM',
+    status: 'DRAFT_AMENDED',
+    type: 'NORMAL',
+    messageType: 'AMD',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T14:00:00Z"),
+        end: "".concat(tomorrowDate, "T18:00:00Z")
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    },
+    changeGroups: [{
+      change: 'TEMPO',
+      probability: 'PROB30',
+      valid: {
+        start: "".concat(currentDate, "T15:00:00Z"),
+        end: "".concat(currentDate, "T16:00:00Z")
+      },
+      visibility: {
+        range: 100,
+        unit: 'M'
+      },
+      cloud: {
+        cloud1: {
+          verticalVisibility: 5
+        }
+      }
+    }]
+  }
+};
+
+({
+  creationDate: "2022-01-06T14:00:00Z",
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: Object.assign(Object.assign({}, fakeDraftAmendmentTaf.taf), {
+    location: 'EHRD',
+    issueDate: "2022-01-06T14:00:00Z",
+    baseTime: "2022-01-06T12:00:00Z",
+    validDateStart: "2022-01-06T14:00:00Z",
+    validDateEnd: "2022-01-07T18:00:00Z",
+    previousValidDateStart: "2022-01-06T12:00:00Z",
+    previousValidDateEnd: "2022-01-07T18:00:00Z",
+    baseForecast: Object.assign(Object.assign({}, fakeDraftAmendmentTaf.taf.baseForecast), {
+      valid: {
+        start: "2022-01-06T14:00:00Z",
+        end: "2022-01-07T18:00:00Z"
+      }
+    }),
+    changeGroups: []
+  })
+});
+var fakeAmendmentTaf = {
+  creationDate: "".concat(currentDate, "T14:00:00Z"),
+  canbe: ['CANCELLED', 'CORRECTED', 'AMENDED'],
+  taf: {
+    uuid: '754905486',
+    previousId: '5f9583fjdf45ff4330f337925',
+    issueDate: "".concat(currentDate, "T14:00:00Z"),
+    baseTime: "".concat(currentDate, "T12:00:00Z"),
+    validDateStart: "".concat(currentDate, "T14:00:00Z"),
+    validDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    previousValidDateStart: "".concat(currentDate, "T12:00:00Z"),
+    previousValidDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    location: 'EHAM',
+    status: 'AMENDED',
+    type: 'NORMAL',
+    messageType: 'AMD',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T14:00:00Z"),
+        end: "".concat(tomorrowDate, "T18:00:00Z")
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    }
+  }
+}; // Only use for display purposes in the list!
+
+({
+  creationDate: "2022-01-06T14:00:00Z",
+  canbe: ['CANCELLED', 'CORRECTED', 'AMENDED'],
+  taf: Object.assign(Object.assign({}, fakeAmendmentTaf.taf), {
+    uuid: '7549058980',
+    issueDate: "2022-01-06T14:00:00Z",
+    baseTime: "2022-01-06T12:00:00Z",
+    validDateStart: "2022-01-06T14:00:00Z",
+    validDateEnd: "2022-01-07T18:00:00Z",
+    previousValidDateStart: "2022-01-06T12:00:00Z",
+    previousValidDateEnd: "2022-01-07T18:00:00Z",
+    baseForecast: Object.assign(Object.assign({}, fakeAmendmentTaf.taf.baseForecast), {
+      valid: {
+        start: "2022-01-06T14:00:00Z",
+        end: "2022-01-07T18:00:00Z"
+      }
+    })
+  })
+});
+
+var fakeTafTac = 'TAF EHAM 0812/0918 20020G35KT 0500 SN BKN040\nBECMG 0814/0816 0700 BKN001=';
+
+var fakePromise = function fakePromise(withRandomError) {
+  return new Promise(function (resolve, reject) {
+    setTimeout(function () {
+      if (!withRandomError) return resolve();
+      var randomError = Math.floor(Math.random() * 4) + 1;
+      return randomError === 4 ? reject(new Error('something went wrong')) : resolve();
+    }, 300);
+  });
+};
+
+var fakeAxiosInstance = {
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
+  get: function get(_url, _params) {
+    return fakePromise(false);
+  },
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
+  post: function post(_url, _params) {
+    return fakePromise(false);
+  }
+};
+var createApi = function createApi() {
+  return {
+    getTafList: function getTafList() {
+      // eslint-disable-next-line no-console
+      console.log('Retrieving new TAF list');
+      return fakeAxiosInstance.get('/taflist').then(function () {
+        return {
+          data: _toConsumableArray(fakeTafList)
+        };
+      });
+    },
+    getTAC: function getTAC() {
+      // eslint-disable-next-line no-console
+      return fakeAxiosInstance.post('/taf2tac').then(function () {
+        return {
+          data: fakeTafTac
+        };
+      });
+    },
+    postTaf: function postTaf(_postTaf) {
+      // eslint-disable-next-line no-console
+      console.log("The new status of the taf will be ".concat(_postTaf.changeStatusTo)); // eslint-disable-next-line no-console
+
+      console.log('form has been posted with following values:', _postTaf.taf);
+      return fakeAxiosInstance.post('/taf', _postTaf);
+    }
+  };
+};
+
+export { TafForm, Wrapper as TafModule, createApi$1 as createApi, createApi as createFakeApi };