@opengeoweb/taf 2.4.1 → 2.7.0

package/index.esm.js

@@ -4,13 +4,13 @@ import { TextField, SvgIcon, Grid, Box, Button, IconButton, Tooltip, Chip, Typog
 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';
+import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, isAxiosError, getAxiosErrorMessage, AlertBanner, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
 import { isEqual } from 'lodash';
+import moment from 'moment';
 import makeStyles from '@mui/styles/makeStyles';
 import { DragIndicator, Schedule, CheckCircle } from '@mui/icons-material';
 import ReactDOM from 'react-dom';
+import { useApiContext, useApi, createApiInstance, ApiProvider } from '@opengeoweb/api';
 import LinearProgress from '@mui/material/LinearProgress';
 import DoDisturbIcon from '@mui/icons-material/DoDisturb';
 import Box$1 from '@mui/material/Box';
@@ -1994,6 +1994,22 @@ var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCl
   return true;
 };
 
+var emptyBaseForecast = {
+  wind: '',
+  visibility: '',
+  weather: {
+    weather1: '',
+    weather2: '',
+    weather3: ''
+  },
+  cloud: {
+    cloud1: '',
+    cloud2: '',
+    cloud3: '',
+    cloud4: ''
+  }
+}; // formatters
+
 var formatIssueTime = function formatIssueTime(issueDate) {
   return issueDate ? "".concat(moment(issueDate).utc().format('DDHHmm'), "Z") : 'Not issued';
 };
@@ -2294,10 +2310,12 @@ var getFieldNames = function getFieldNames(isChangeGroup, index) {
 var TAC_MISSING_DATA = 'Missing data: no TAC can be generated';
 var TAC_NOT_AVAILABLE = 'No TAC available';
 var TAC_RETRIEVING_DATA = 'Retrieving TAC';
+var TAC_FAILED = 'Failed to retrieve TAC';
+var tacHasError = function tacHasError(tac) {
+  return tac === TAC_MISSING_DATA || tac === TAC_NOT_AVAILABLE || tac === TAC_RETRIEVING_DATA || tac === TAC_FAILED;
+};
 var useTACGenerator = function useTACGenerator(taf, requestTAC) {
-  var standardTAC = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-
-  var _React$useState = React__default.useState(taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA),
+  var _React$useState = React__default.useState(!taf || taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       TAC = _React$useState2[0],
       setTAC = _React$useState2[1];
@@ -2305,34 +2323,44 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
   var _useIsMounted = useIsMounted(),
       isMounted = _useIsMounted.isMounted;
 
-  var retrieveTAC = function retrieveTAC(tafToPost) {
+  var controller = React__default.useRef(null);
+
+  var onSetTac = function onSetTac(newTAC) {
+    if (controller.current) {
+      controller.current.abort();
+    }
+
+    setTAC(newTAC);
+  };
+
+  var retrieveTAC = React__default.useCallback(function (tafToPost) {
     if (shouldRetrieveTAC(tafToPost)) {
-      requestTAC(tafToPost).then(function (result) {
+      if (controller.current) {
+        controller.current.abort();
+      }
+
+      controller.current = new AbortController();
+      setTAC(TAC_RETRIEVING_DATA);
+      requestTAC(tafToPost, controller.current.signal).then(function (result) {
         if (isMounted.current) {
           setTAC(result.data);
         }
-      })["catch"](function () {
-        if (isMounted.current) {
-          setTAC('Failed to retrieve TAC');
+      })["catch"](function (error) {
+        if (isMounted && error.message !== 'canceled') {
+          setTAC(TAC_FAILED);
         }
       });
     } else {
       setTAC(TAC_MISSING_DATA);
     }
-  };
-
+  }, [isMounted, requestTAC]);
   React__default.useEffect(function () {
-    if (taf.status !== 'NEW' && !standardTAC) {
+    if (taf && taf.status !== 'NEW') {
       retrieveTAC(taf);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
-  React__default.useEffect(function () {
-    if (standardTAC !== '') {
-      setTAC(standardTAC);
-    }
-  }, [standardTAC]);
-  return [TAC, retrieveTAC];
+  return [TAC, retrieveTAC, onSetTac];
 };
 var useDragOrder = function useDragOrder(trigger, move, onFormBlur) {
   var _React$useState3 = React__default.useState(null),
@@ -2483,6 +2511,10 @@ var getMessageType = function getMessageType(taf, tafAction) {
     return 'AMD';
   }
 
+  if (tafAction === 'CANCEL') {
+    return 'CNL';
+  }
+
   return taf.messageType;
 }; // For corrections and amendment we need to add the previousValidStart and End for the TAC converter
 
@@ -2517,15 +2549,50 @@ var prepareTafValues = function prepareTafValues(_taf, tafAction) {
   // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
   // If action is AMEND/DRAFT_AMEND - update validity start time to current time
   var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
+  var formattedBaseForecast = formatFormValues(taf.baseForecast);
+  var baseForecast = Object.assign(Object.assign(Object.assign({}, emptyBaseForecast), formattedBaseForecast), {
+    weather: Object.assign(Object.assign({}, emptyBaseForecast.weather), formattedBaseForecast.weather),
+    cloud: Object.assign(Object.assign({}, emptyBaseForecast.cloud), formattedBaseForecast.cloud)
+  });
   return Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
     messageType: getMessageType(taf, tafAction),
-    baseForecast: formatFormValues(taf.baseForecast)
+    baseForecast: baseForecast
   }), taf.changeGroups && {
     changeGroups: taf.changeGroups.map(formatFormValues)
   }), addEmptyChangeGroup && {
     changeGroups: [emptyChangegroup]
   });
 };
+var getIsFormDefaultDisabled = function getIsFormDefaultDisabled(status) {
+  return !(status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED');
+};
+var fromStatusToAction = function fromStatusToAction(tafStatus) {
+  switch (tafStatus) {
+    case 'DRAFT':
+      return 'DRAFT';
+
+    case 'DRAFT_AMENDED':
+      return 'DRAFT_AMEND';
+
+    case 'DRAFT_CORRECTED':
+      return 'DRAFT_CORRECT';
+
+    case 'PUBLISHED':
+      return 'PUBLISH';
+
+    case 'AMENDED':
+      return 'AMEND';
+
+    case 'CORRECTED':
+      return 'CORRECT';
+
+    case 'CANCELLED':
+      return 'CANCEL';
+
+    default:
+      return 'NEW';
+  }
+};
 
 var textFieldStyle = function textFieldStyle(theme) {
   return {
@@ -2876,7 +2943,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       getValues = _useFormContext.getValues,
       trigger = _useFormContext.trigger;
 
-  var _useDraftFormHelpers = useDraftFormHelpers(),
+  var _useDraftFormHelpers = useDraftFormHelpers(true),
       isNotRequiredForAction = _useDraftFormHelpers.isRequired; // cross-field required validation
 
 
@@ -3310,6 +3377,36 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
+var tafActionToDraftAction = function tafActionToDraftAction(tafAction) {
+  switch (tafAction) {
+    case 'AMEND':
+    case 'DRAFT_AMEND':
+      return 'DRAFT_AMEND';
+
+    case 'CORRECT':
+    case 'DRAFT_CORRECT':
+      return 'DRAFT_CORRECT';
+
+    default:
+      return 'DRAFT';
+  }
+};
+
+var tafActionToPublishAction = function tafActionToPublishAction(tafAction) {
+  switch (tafAction) {
+    case 'AMEND':
+    case 'DRAFT_AMEND':
+      return 'AMEND';
+
+    case 'CORRECT':
+    case 'DRAFT_CORRECT':
+      return 'CORRECT';
+
+    default:
+      return 'PUBLISH';
+  }
+};
+
 var buttonsStyle = {
   button: {
     minWidth: {
@@ -3339,7 +3436,7 @@ var ViewModeButtons = function ViewModeButtons(_ref) {
       return onTafViewModeButtonPress('CANCEL');
     }
   }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "correctaf",
+    "data-testid": "correcttaf",
     variant: "tertiary",
     onClick: function onClick() {
       return onTafViewModeButtonPress('CORRECT');
@@ -3393,21 +3490,7 @@ var TafFormButtons = function TafFormButtons(_ref2) {
       if action DRAFT_AMEND - new status will be DRAFT_AMENDED
       if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
       */
-      switch (tafAction) {
-        case 'AMEND':
-        case 'DRAFT_AMEND':
-          onTafEditModeButtonPress('DRAFT_AMEND');
-          break;
-
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          onTafEditModeButtonPress('DRAFT_CORRECT');
-          break;
-
-        default:
-          onTafEditModeButtonPress('DRAFT');
-          break;
-      }
+      onTafEditModeButtonPress(tafActionToDraftAction(tafAction));
     }
   }, "Save"), /*#__PURE__*/React__default.createElement(Button, {
     "data-testid": "publishtaf",
@@ -3420,21 +3503,7 @@ var TafFormButtons = function TafFormButtons(_ref2) {
       if action DRAFT_AMEND - new status will be AMENDED
       if action DRAFT_CORRECT - new status will be CORRECTED
       */
-      switch (tafAction) {
-        case 'AMEND':
-        case 'DRAFT_AMEND':
-          onTafEditModeButtonPress('AMEND');
-          break;
-
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          onTafEditModeButtonPress('CORRECT');
-          break;
-
-        default:
-          onTafEditModeButtonPress('PUBLISH');
-          break;
-      }
+      onTafEditModeButtonPress(tafActionToPublishAction(tafAction));
     }
   }, "Publish"))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -3703,20 +3772,6 @@ var getPaneTitle = function getPaneTitle(sumOfErrors) {
   }
 };
 
-var getErrorDefaultMessage = function getErrorDefaultMessage(error) {
-  switch (error.type) {
-    case 'required':
-      {
-        return 'this field is required';
-      }
-
-    default:
-      {
-        return error.message;
-      }
-  }
-};
-
 var capitalizeWord = function capitalizeWord(_ref) {
   var _ref2 = _toArray(_ref),
       firstLetter = _ref2[0],
@@ -3754,7 +3809,7 @@ var getErrorMessage = function getErrorMessage(error, index) {
       firstNamePart = _name$split2[0];
 
   var fieldErrorTitle = humanizeErrorMessage(firstNamePart);
-  return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(getErrorDefaultMessage(error));
+  return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(error.message);
 };
 var MODAL_DIALOG_ELEMENT = 'modal-dialog';
 var useIssuesPane = function useIssuesPane() {
@@ -3835,76 +3890,121 @@ var IssuesPane = function IssuesPane(_ref3) {
   }))), rootElement);
 };
 
-var fromStatusToAction = function fromStatusToAction(tafStatus) {
-  switch (tafStatus) {
-    case 'DRAFT':
-      return 'DRAFT';
+var TafModuleContext = /*#__PURE__*/React.createContext({
+  onValidateForm: null,
+  registerValidateForm: null,
+  tafAction: null,
+  setTafAction: null,
+  isFormDirty: null,
+  setIsFormDirty: null
+});
+var useTafModuleContext = function useTafModuleContext() {
+  return React.useContext(TafModuleContext);
+};
+var useTafModuleState = function useTafModuleState(_ref) {
+  var onPreventCloseView = _ref.onPreventCloseView;
 
-    case 'DRAFT_AMENDED':
-      return 'DRAFT_AMEND';
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
 
-    case 'DRAFT_CORRECTED':
-      return 'DRAFT_CORRECT';
+  var _React$useState = React.useState(function () {
+    return new Promise(function () {
+      return true;
+    });
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      onValidateForm = _React$useState2[0],
+      registerValidateForm = _React$useState2[1];
 
-    case 'PUBLISHED':
-      return 'PUBLISH';
+  var _React$useState3 = React.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      tafAction = _React$useState4[0],
+      setTafAction = _React$useState4[1];
 
-    case 'AMENDED':
-      return 'AMEND';
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isFormDirty = _React$useState6[0],
+      setIsFormDirty = _React$useState6[1];
 
-    case 'CORRECTED':
-      return 'CORRECT';
+  var _useTACGenerator = useTACGenerator(undefined, api.getTAC),
+      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 3),
+      TAC = _useTACGenerator2[0],
+      updateTAC = _useTACGenerator2[1],
+      setTAC = _useTACGenerator2[2];
 
-    case 'CANCELLED':
-      return 'CANCEL';
+  var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
+    registerValidateForm(function () {
+      return promiseToRegister;
+    });
+  };
 
-    default:
-      return 'NEW';
-  }
-}; // prevents default functionality
+  var onChangeFormDirty = function onChangeFormDirty(isDirty) {
+    if (isDirty !== isFormDirty) {
+      setIsFormDirty(isDirty);
+      onPreventCloseView(isDirty);
+    }
+  };
 
+  return {
+    onValidateForm: onValidateForm,
+    registerValidateForm: onRegisterValidateForm,
+    tafAction: tafAction,
+    setTafAction: setTafAction,
+    TAC: TAC,
+    updateTAC: updateTAC,
+    setTAC: setTAC,
+    isFormDirty: isFormDirty,
+    setIsFormDirty: onChangeFormDirty
+  };
+};
+var TafModuleProvider = function TafModuleProvider(_ref2) {
+  var children = _ref2.children,
+      _ref2$onPreventCloseV = _ref2.onPreventCloseView,
+      onPreventCloseView = _ref2$onPreventCloseV === void 0 ? function () {} : _ref2$onPreventCloseV;
+  var contextState = useTafModuleState({
+    onPreventCloseView: onPreventCloseView
+  });
+  return /*#__PURE__*/React.createElement(TafModuleContext.Provider, {
+    value: contextState
+  }, children);
+};
 
 var noop = function noop() {};
 
 var TafForm = function TafForm(_ref) {
-  var _ref$isDisabled = _ref.isDisabled,
-      isDefaultDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      tafFromBackend = _ref.tafFromBackend,
+  var 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;
+  } : _ref$setIsIssuesPaneO,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$setIsDisabled = _ref.setIsDisabled,
+      setIsDisabled = _ref$setIsDisabled === void 0 ? function () {
+    return null;
+  } : _ref$setIsDisabled;
   var originalTaf = tafFromBackend.taf;
-  var defaultTafAction = fromStatusToAction(originalTaf.status);
-
-  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 isDefaultDisabled = getIsFormDefaultDisabled(tafFromBackend.taf.status);
   var confirmDialog = useConfirmationDialog();
 
-  var _useDraftFormHelpers = useDraftFormHelpers(),
+  var _useDraftFormHelpers = useDraftFormHelpers(true),
       toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
       DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
 
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
+  var _useTafModuleContext = useTafModuleContext(),
+      registerValidateForm = _useTafModuleContext.registerValidateForm,
+      tafAction = _useTafModuleContext.tafAction,
+      setIsFormDirty = _useTafModuleContext.setIsFormDirty,
+      setTafAction = _useTafModuleContext.setTafAction,
+      TAC = _useTafModuleContext.TAC,
+      updateTAC = _useTafModuleContext.updateTAC,
+      setTAC = _useTafModuleContext.setTAC;
 
   var _useIsMounted = useIsMounted(),
       isMounted = _useIsMounted.isMounted;
@@ -3923,20 +4023,25 @@ 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(getValues()),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      delayedFormValues = _React$useState6[0],
-      setDelayedFormValues = _React$useState6[1];
-
-  var _useTACGenerator = useTACGenerator(tafFromBackend.taf, api.getTAC),
-      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
-      TAC = _useTACGenerator2[0],
-      updateTAC = _useTACGenerator2[1];
+  var _React$useState = React__default.useState(getValues()),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      delayedFormValues = _React$useState2[0],
+      setDelayedFormValues = _React$useState2[1];
 
   var hasErrors = Object.keys(errors).length;
 
   var onFormBlur = function onFormBlur() {
-    setDelayedFormValues(getValues());
+    if (!isEqual(getValues(), delayedFormValues)) {
+      setDelayedFormValues(getValues());
+    }
+  };
+
+  var resetTAC = function resetTAC() {
+    if (originalTaf.status !== 'NEW') {
+      updateTAC(originalTaf);
+    } else {
+      setTAC(TAC_NOT_AVAILABLE);
+    }
   };
 
   React__default.useEffect(function () {
@@ -3955,8 +4060,8 @@ var TafForm = function TafForm(_ref) {
   }, [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]);
+    setIsFormDirty(isFormDirty);
+  }, [isFormDirty, setIsFormDirty]);
 
   var onSubmit = function onSubmit(data) {
     // eslint-disable-next-line no-console
@@ -3997,6 +4102,7 @@ var TafForm = function TafForm(_ref) {
         toggleIsDraft(true);
         handleSubmit(function (data) {
           onFormAction(action, convertTafValuesToObject(data));
+          reset(getValues());
         })();
         break;
 
@@ -4004,6 +4110,7 @@ var TafForm = function TafForm(_ref) {
         if (isFormDirty) {
           showConfirmDialog(action).then(function () {
             resetForm(undefined, isDefaultDisabled);
+            resetTAC();
           });
         } else {
           resetForm(undefined, isDefaultDisabled);
@@ -4058,7 +4165,7 @@ var TafForm = function TafForm(_ref) {
     switch (action) {
       case 'CANCEL':
         showConfirmDialog(action).then(function () {
-          onFormAction(action, tafFromBackend.taf);
+          onFormAction(action, convertTafValuesToObject(prepareTafValues(tafFromBackend.taf, action)));
         });
         break;
 
@@ -4149,21 +4256,47 @@ 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];
+  var _React$useState3 = React__default.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      shouldValidate = _React$useState4[0],
+      setShouldValidate = _React$useState4[1];
 
   React__default.useEffect(function () {
-    var defaultValues = prepareTafValues(tafFromBackend.taf, undefined, !isDisabled && !tafFromBackend.taf.changeGroups); // set initial form values
+    setIsDisabled(isDefaultDisabled);
+    var defaultValues = prepareTafValues(tafFromBackend.taf, undefined, !isDefaultDisabled && !tafFromBackend.taf.changeGroups); // set initial form values
 
     reset(defaultValues); // set validate flag to validate after the values have been set
 
-    setShouldValidate(true);
+    setShouldValidate(true); // register validate method to use in parent components
+
+    var onValidateFormPromise = function onValidateFormPromise() {
+      return new Promise(function (resolve, reject) {
+        toggleIsDraft(true);
+        handleSubmit(function (formData) {
+          resolve(convertTafValuesToObject(formData));
+        })().then(function (formData) {
+          if (formData === undefined) {
+            reject();
+          }
+
+          resolve(formData);
+        });
+      });
+    };
+
+    registerValidateForm(onValidateFormPromise); // set default taf action
+
+    setTafAction(fromStatusToAction(originalTaf.status));
+    resetTAC();
     return function () {
-      reset();
+      reset({});
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  React__default.useEffect(function () {
+    var newValues = prepareTafValues(tafFromBackend.taf, undefined, !isDefaultDisabled && !tafFromBackend.taf.changeGroups); // set new form values when tafFromBackend changed
+
+    reset(newValues); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tafFromBackend]);
   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
@@ -4449,6 +4582,20 @@ var muiTabA11yProps = function muiTabA11yProps(index) {
     'aria-controls': "simple-tabpanel-".concat(index)
   };
 };
+var prepareTafExportValues = function prepareTafExportValues(tafToCopy, currentTaf) {
+  var _a;
+
+  var convertedCopy = prepareTafValues(tafToCopy, undefined, false);
+  var baseForecast = convertedCopy.baseForecast,
+      _convertedCopy$change = convertedCopy.changeGroups,
+      changeGroups = _convertedCopy$change === void 0 ? [] : _convertedCopy$change;
+  return Object.assign(Object.assign({}, currentTaf), {
+    baseForecast: Object.assign(Object.assign({}, baseForecast), {
+      valid: (_a = currentTaf === null || currentTaf === void 0 ? void 0 : currentTaf.baseForecast) === null || _a === void 0 ? void 0 : _a.valid
+    }),
+    changeGroups: changeGroups
+  });
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4539,10 +4686,44 @@ var StatusIcon = function StatusIcon(_ref) {
   }));
 };
 
+/* *
+ * 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 ExportIcon = /*#__PURE__*/React__default.createElement(SvgIcon, null, /*#__PURE__*/React__default.createElement("path", {
+  d: "M14.744 5.476a1.252 1.252 0 1 0 0 2.504h2.752v9.516H6.48v-1.753a1.251 1.251 0 1 0-2.504 0v3.004c0 .693.561 1.253 1.252 1.253h13.52C19.44 20 20 19.44 20 18.747V6.727c0-.69-.56-1.251-1.252-1.251zM9.133 2.385a1.252 1.252 0 0 0-1.77 0L1.773 7.974l5.54 5.54c.49.49 1.281.49 1.77 0l.022-.026a1.25 1.25 0 0 0-.021-1.745L6.568 9.225h1.371c.914 0 2.756.618 4.045 2.763 1.29 2.145.352 2.526.653 2.526.301 0 1.943-1.798.721-4.295-1.71-3.498-4.6-3.498-5.346-3.498H6.568l2.565-2.565a1.253 1.253 0 0 0 0-1.771z"
+}));
+
+var ExportButton = function ExportButton(_ref) {
+  var onClick = _ref.onClick,
+      isHidden = _ref.isHidden;
+  return isHidden ? null : /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Import TAC",
+    placement: "left"
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(ToolButton, {
+    onClick: onClick,
+    "data-testid": "export-tac-button"
+  }, ExportIcon)));
+};
+
 var TacContainer = function TacContainer(_ref) {
   var taf = _ref.taf,
       _ref$isActive = _ref.isActive,
-      isActive = _ref$isActive === void 0 ? false : _ref$isActive;
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+      _ref$isFormDisabled = _ref.isFormDisabled,
+      isFormDisabled = _ref$isFormDisabled === void 0 ? false : _ref$isFormDisabled;
 
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
@@ -4557,6 +4738,30 @@ var TacContainer = function TacContainer(_ref) {
       baseTime = taf.baseTime;
   var locationLabel = getLocationSetting(location).label;
   var timeSlot = getTafTimeSlot(baseTime, location, status);
+
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues,
+      trigger = _useFormContext.trigger,
+      setValue = _useFormContext.setValue;
+
+  var _useTafModuleContext = useTafModuleContext(),
+      updateTAC = _useTafModuleContext.updateTAC;
+
+  var handleExport = function handleExport() {
+    var currentTaf = getValues();
+    var newTaf = prepareTafExportValues(taf, currentTaf);
+    setValue('baseForecast', newTaf.baseForecast, {
+      shouldDirty: true
+    });
+    setValue('changeGroups', newTaf.changeGroups, {
+      shouldDirty: true
+    });
+    setTimeout(function () {
+      trigger(); // trigger all fields validation
+    }, 0);
+    updateTAC(convertTafValuesToObject(newTaf));
+  };
+
   React__default.useEffect(function () {
     if (isActive) {
       retrieveTAC(taf);
@@ -4572,14 +4777,22 @@ var TacContainer = function TacContainer(_ref) {
     sx: {
       display: 'flex',
       alignItems: 'center',
-      marginBottom: '2px'
+      justifyContent: 'space-between',
+      height: 24
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
-      width: 20,
-      height: 20,
       display: 'flex',
-      marginRight: '6px'
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      width: 24,
+      height: 24,
+      display: 'flex',
+      marginRight: '2px',
+      alignItems: 'center',
+      justifyContent: 'center'
     }
   }, /*#__PURE__*/React__default.createElement(StatusIcon, {
     timeSlot: timeSlot,
@@ -4606,7 +4819,10 @@ var TacContainer = function TacContainer(_ref) {
     },
     "data-testid": "tafLocationLabel",
     component: "span"
-  }, locationLabel))), /*#__PURE__*/React__default.createElement(Box, {
+  }, locationLabel))), /*#__PURE__*/React__default.createElement(ExportButton, {
+    onClick: handleExport,
+    isHidden: isFormDisabled || tacHasError(TAC)
+  })), /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       fontSize: '12px',
       letterSpacing: '0.4px',
@@ -4642,7 +4858,9 @@ var TacOverview = function TacOverview(_ref) {
       _ref$hideTitle = _ref.hideTitle,
       hideTitle = _ref$hideTitle === void 0 ? false : _ref$hideTitle,
       _ref$activeTaf = _ref.activeTaf,
-      activeTaf = _ref$activeTaf === void 0 ? null : _ref$activeTaf;
+      activeTaf = _ref$activeTaf === void 0 ? null : _ref$activeTaf,
+      _ref$isFormDisabled = _ref.isFormDisabled,
+      isFormDisabled = _ref$isFormDisabled === void 0 ? false : _ref$isFormDisabled;
 
   var _React$useState = React__default.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4739,7 +4957,8 @@ var TacOverview = function TacOverview(_ref) {
       return /*#__PURE__*/React__default.createElement(TacContainer, {
         key: taf.uuid,
         taf: taf,
-        isActive: isActiveLocation(taf.location)
+        isActive: isActiveLocation(taf.location),
+        isFormDisabled: isFormDisabled
       });
     }));
   })));
@@ -5008,25 +5227,22 @@ var fromActionToStatus = function fromActionToStatus(tafAction) {
   }
 };
 
-var TafPanel = function TafPanel(_ref) {
-  var tafFromBackend = _ref.tafFromBackend,
-      activeTafIndex = _ref.activeTafIndex,
-      index = _ref.index,
-      _ref$onPostTaf = _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 parseErrorMessage = function parseErrorMessage(error, params) {
+  return params.changeStatusTo === 'CANCELLED' ? {
+    type: 'CANCELLED',
+    title: 'Cancelling this TAF failed, please try again'
+  } : {
+    type: 'SERVER',
+    title: 'An error has occurred while saving, please try again',
+    message: isAxiosError(error) ? getAxiosErrorMessage(error) : error.message
+  };
+};
 
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
+var usePostTafRequest = function usePostTafRequest(request) {
+  var errorParser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : parseErrorMessage;
+
+  var _useIsMounted = useIsMounted(),
+      isMounted = _useIsMounted.isMounted;
 
   var _React$useState = React__default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -5036,68 +5252,92 @@ var TafPanel = function TafPanel(_ref) {
   var _React$useState3 = React__default.useState(null),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       error = _React$useState4[0],
-      setError = _React$useState4[1]; // removes cancelled error message
-
+      setError = _React$useState4[1];
 
-  React__default.useEffect(function () {
-    var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
-      setError(null);
-    }, 10000) : null;
-    return function () {
-      if (cancelErrorTimeout !== null) {
-        clearTimeout(cancelErrorTimeout);
-      }
-    };
-  }, [error]);
-
-  var postTaf = function postTaf(data) {
+  var doRequest = function doRequest(params) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var newError;
+      var newErrorr;
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _context.prev = 0;
               setLoading(true);
-              _context.next = 4;
-              return api.postTaf(data);
+              setError(null);
+              _context.prev = 2;
+              _context.next = 5;
+              return request(params);
+
+            case 5:
+              if (isMounted.current) {
+                _context.next = 7;
+                break;
+              }
 
-            case 4:
+              return _context.abrupt("return");
+
+            case 7:
               setLoading(false);
               setError(null);
-              onFormDirty(false); // callback
-
-              onPostTaf();
-              _context.next = 16;
+              _context.next = 19;
               break;
 
-            case 10:
-              _context.prev = 10;
-              _context.t0 = _context["catch"](0);
-              newError = data.changeStatusTo === 'CANCELLED' ? {
-                type: 'CANCELLED',
-                title: 'Cancelling this TAF failed, please try again'
-              } : {
-                type: 'SERVER',
-                title: 'An error has occurred while saving, please try again',
-                message: getAxiosErrorMessage(_context.t0)
-              };
-              setError(newError);
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](2);
+
+              if (isMounted.current) {
+                _context.next = 15;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 15:
+              newErrorr = errorParser ? errorParser(_context.t0, params) : _context.t0;
               setLoading(false);
-              throw _context.t0;
+              setError(newErrorr);
+              throw newErrorr;
 
-            case 16:
+            case 19:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 10]]);
+      }, _callee, null, [[2, 11]]);
     }));
   };
 
-  var getViewMode = function getViewMode(status) {
-    return status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED' ? 'edit' : 'view';
+  return {
+    isLoading: isLoading,
+    error: error,
+    setError: setError,
+    doRequest: doRequest
   };
+};
+
+var TafPanel = function TafPanel(_ref) {
+  var tafFromBackend = _ref.tafFromBackend,
+      activeTafIndex = _ref.activeTafIndex,
+      index = _ref.index,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$postTaf = _ref.postTaf,
+      postTaf = _ref$postTaf === void 0 ? function () {
+    return null;
+  } : _ref$postTaf,
+      _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,
+      _ref$isFormDisabled = _ref.isFormDisabled,
+      isFormDisabled = _ref$isFormDisabled === void 0 ? false : _ref$isFormDisabled,
+      _ref$setIsFormDisable = _ref.setIsFormDisabled,
+      setIsFormDisabled = _ref$setIsFormDisable === void 0 ? function () {
+    return null;
+  } : _ref$setIsFormDisable,
+      error = _ref.error;
 
   var onTafAction = function onTafAction(action, taf) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
@@ -5158,15 +5398,21 @@ var TafPanel = function TafPanel(_ref) {
     severity: "error",
     title: error.title,
     info: error.message,
-    dataTestId: "taf-error"
-  }), /*#__PURE__*/React__default.createElement(TafForm, {
-    isDisabled: getViewMode(tafFromBackend.taf.status) === 'view',
+    dataTestId: "taf-error",
+    shouldClose: true
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      marginTop: '10px',
+      padding: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(TafForm, {
     tafFromBackend: tafFromBackend,
     onFormAction: onTafAction,
-    onFormDirty: onFormDirty,
     isIssuesPaneOpen: isIssuesPaneOpen,
-    setIsIssuesPaneOpen: setIsIssuesPaneOpen
-  }));
+    setIsIssuesPaneOpen: setIsIssuesPaneOpen,
+    isDisabled: isFormDisabled,
+    setIsDisabled: setIsFormDisabled
+  })));
 };
 
 /* *
@@ -5196,11 +5442,21 @@ var IssuesPaneWrapper = function IssuesPaneWrapper(props) {
   }, props));
 };
 
+var CONFIRM_DIALOG_OPTIONS = {
+  title: 'Whoops',
+  description: "It's not possible to autosave this TAF due to the presence of issue(s). Are you sure you want to close this TAF? Any changes made will be lost.",
+  confirmLabel: 'Exit without saving'
+};
+
 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 _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
   var confirmDialog = useConfirmationDialog();
 
   var _useIssuesPane = useIssuesPane(),
@@ -5209,6 +5465,17 @@ var TafLayout = function TafLayout(_ref) {
       onCloseIssuesPane = _useIssuesPane.onCloseIssuesPane,
       startPosition = _useIssuesPane.startPosition;
 
+  var _usePostTafRequest = usePostTafRequest(api.postTaf),
+      isLoading = _usePostTafRequest.isLoading,
+      postTafRequest = _usePostTafRequest.doRequest,
+      error = _usePostTafRequest.error,
+      setError = _usePostTafRequest.setError;
+
+  var _useTafModuleContext = useTafModuleContext(),
+      onValidateForm = _useTafModuleContext.onValidateForm,
+      tafAction = _useTafModuleContext.tafAction,
+      isFormDirty = _useTafModuleContext.isFormDirty;
+
   var _React$useState = React__default.useState(sortTafTimeSlots(tafList)),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       _React$useState2$ = _React$useState2[0],
@@ -5238,21 +5505,83 @@ var TafLayout = function TafLayout(_ref) {
 
   var _React$useState9 = React__default.useState(false),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      isFormDirty = _React$useState10[0],
-      setIsFormDirty = _React$useState10[1];
+      isFormDisabled = _React$useState10[0],
+      setIsFormDisabled = _React$useState10[1];
+
+  var postTaf = function postTaf(data) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return postTafRequest(data);
+
+            case 2:
+              // callback
+              onPostTaf();
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  };
 
   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);
-    }
+    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var taf;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!isFormDirty) {
+                _context2.next = 15;
+                break;
+              }
+
+              _context2.prev = 1;
+              _context2.next = 4;
+              return onValidateForm();
+
+            case 4:
+              taf = _context2.sent;
+              _context2.next = 7;
+              return postTaf({
+                taf: taf,
+                changeStatusTo: fromActionToStatus(tafActionToDraftAction(tafAction))
+              });
+
+            case 7:
+              action(value);
+              _context2.next = 13;
+              break;
+
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](1);
+              confirmDialog(CONFIRM_DIALOG_OPTIONS).then(function () {
+                action(value);
+                setError(null);
+              });
+
+            case 13:
+              _context2.next = 17;
+              break;
+
+            case 15:
+              action(value);
+              setError(null);
+
+            case 17:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[1, 10]]);
+    }));
   }
 
   var onChangeLocationTab = function onChangeLocationTab(index) {
@@ -5276,11 +5605,23 @@ var TafLayout = function TafLayout(_ref) {
     setLocations(updatedLocations); // update active index
 
     var newActiveIndex = updatedLocations.findIndex(function (location) {
-      return location.taf.previousId === locations[activeTafIndex].taf.uuid;
+      var _a, _b, _c;
+
+      return ((_a = location === null || location === void 0 ? void 0 : location.taf) === null || _a === void 0 ? void 0 : _a.previousId) === ((_c = (_b = locations[activeTafIndex]) === null || _b === void 0 ? void 0 : _b.taf) === null || _c === void 0 ? void 0 : _c.uuid);
     });
     var newIndex = newActiveIndex !== -1 ? newActiveIndex : activeTafIndex;
     setActiveTafIndex(newIndex); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tafList, setLocations]);
+  React__default.useEffect(function () {
+    var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
+      setError(null);
+    }, 10000) : null;
+    return function () {
+      if (cancelErrorTimeout !== null) {
+        clearTimeout(cancelErrorTimeout);
+      }
+    };
+  }, [error, setError]);
 
   if (!tafList) {
     return null;
@@ -5355,10 +5696,9 @@ var TafLayout = function TafLayout(_ref) {
   }, /*#__PURE__*/React__default.createElement(Card, {
     variant: "outlined",
     sx: {
-      padding: 1,
-      paddingTop: 0,
       marginBottom: '12px',
-      position: 'relative'
+      position: 'relative',
+      minHeight: locations.length * 62 + 32
     }
   }, /*#__PURE__*/React__default.createElement(TacOverviewMobile, {
     upcomingTafs: upcoming,
@@ -5371,26 +5711,32 @@ var TafLayout = function TafLayout(_ref) {
       activeTafIndex: activeTafIndex,
       index: index,
       tafFromBackend: tafFromBackend,
-      onPostTaf: onPostTaf,
-      onFormDirty: setIsFormDirty,
       isIssuesPaneOpen: isIssuesPaneOpen,
-      setIsIssuesPaneOpen: onToggleIssuesPane
+      setIsIssuesPaneOpen: onToggleIssuesPane,
+      isFormDisabled: isFormDisabled,
+      setIsFormDisabled: setIsFormDisabled,
+      postTaf: postTaf,
+      isLoading: isLoading,
+      error: error
     });
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3,
-    sx: {
-      height: '100%'
+    xs: 0,
+    sm: 3,
+    height: {
+      xs: 0,
+      sm: '100%'
     },
-    display: {
-      xs: 'none',
-      sm: 'block'
+    width: {
+      xs: 0,
+      sm: '100%'
     }
   }, /*#__PURE__*/React__default.createElement(TacOverview, {
     upcomingTafs: upcoming,
     currentTafs: current,
     expiredTafs: expired,
-    activeTaf: activeTaf
+    activeTaf: activeTaf,
+    isFormDisabled: isFormDisabled
   })))))), /*#__PURE__*/React__default.createElement(IssuesPaneWrapper, {
     handleClose: onCloseIssuesPane,
     isOpen: isIssuesPaneOpen,
@@ -5398,6 +5744,19 @@ var TafLayout = function TafLayout(_ref) {
   }));
 };
 
+var TafWrapper = function TafWrapper(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return /*#__PURE__*/React.createElement(TafModuleProvider, Object.assign({}, props), /*#__PURE__*/React.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React.createElement(ReactHookFormProvider, {
+    options: {
+      mode: 'onTouched',
+      reValidateMode: 'onChange',
+      criteriaMode: 'all'
+    }
+  }, children)));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -5415,29 +5774,13 @@ var TafLayout = function TafLayout(_ref) {
  * 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() {
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isLoading = _React$useState2[0],
-      setLoading = _React$useState2[1];
-
   var _useApi = useApi(api.getTafList),
       getTafListError = _useApi.error,
-      isFetchingInitial = _useApi.isLoading,
+      isLoading = _useApi.isLoading,
       tafList = _useApi.result,
       fetchNewTafList = _useApi.fetchApiData;
 
@@ -5445,45 +5788,11 @@ var TafModule = function TafModule() {
     return fetchNewTafList({});
   });
 
-  var reFetchNewTafList = function reFetchNewTafList() {
-    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              setLoading(true);
-              _context.next = 4;
-              return fetchNewTafList({});
-
-            case 4:
-              setLoading(false);
-              _context.next = 10;
-              break;
-
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](0);
-              setLoading(false);
-
-            case 10:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 7]]);
-    }));
+  var onPostTaf = function onPostTaf() {
+    fetchNewTafList({});
   };
 
   var hasTafListError = getTafListError !== null;
-
-  if (isFetchingInitial) {
-    return /*#__PURE__*/React.createElement(LinearProgress, {
-      color: "secondary",
-      "data-testid": "loading-bar"
-    });
-  }
-
   return /*#__PURE__*/React.createElement(Box, {
     component: "div",
     id: "tafmodule",
@@ -5499,33 +5808,22 @@ var TafModule = function TafModule() {
   }), hasTafListError && /*#__PURE__*/React.createElement(AlertBanner, {
     severity: "error",
     title: "An error has occurred while retrieving the list",
-    info: getTafListError.message
+    info: getTafListError.message,
+    dataTestId: "taf-list-error",
+    actionButtonProps: {
+      title: 'Try again',
+      onClick: fetchNewTafList
+    }
   }), /*#__PURE__*/React.createElement(TafLayout, {
     tafList: tafList,
-    onPostTaf: reFetchNewTafList
+    onPostTaf: onPostTaf
   }));
 };
 
-var Wrapper = function Wrapper() {
-  return /*#__PURE__*/React.createElement(TafWrapper, null, /*#__PURE__*/React.createElement(TafModule, null));
+var Wrapper = function Wrapper(props) {
+  return /*#__PURE__*/React.createElement(TafWrapper, Object.assign({}, props), /*#__PURE__*/React.createElement(TafModule, 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 createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
   var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
   return {
@@ -5536,8 +5834,10 @@ var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, a
     postTaf: function postTaf(formData) {
       return axiosInstance.post('/taf', Object.assign({}, formData));
     },
-    getTAC: function getTAC(tafData) {
-      return axiosInstance.post('/taf2tac', Object.assign({}, tafData));
+    getTAC: function getTAC(tafData, signal) {
+      return axiosInstance.post.apply(axiosInstance, ['/taf2tac'].concat([Object.assign({}, tafData)].concat(_toConsumableArray(signal ? [{
+        signal: signal
+      }] : []))));
     }
   };
 };
@@ -6180,7 +6480,7 @@ var fakePublishedTaf = {
       change: 'BECMG',
       valid: {
         start: "".concat(currentDate, "T23:00:00Z"),
-        end: "".concat(tomorrowDate, "T00:00:00Z")
+        end: "".concat(tomorrowDate, "T01:00:00Z")
       },
       wind: {
         direction: 150,
@@ -6436,7 +6736,7 @@ var fakeAmendmentTaf = {
       }
     }
   }
-}; // Only use for display purposes in the list!
+};
 
 ({
   creationDate: "2022-01-06T14:00:00Z",
@@ -6461,12 +6761,17 @@ var fakeAmendmentTaf = {
 var fakeTafTac = 'TAF EHAM 0812/0918 20020G35KT 0500 SN BKN040\nBECMG 0814/0816 0700 BKN001=';
 
 var fakePromise = function fakePromise(withRandomError) {
+  var signal = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return new Promise(function (resolve, reject) {
-    setTimeout(function () {
+    var timer = 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);
+    signal === null || signal === void 0 ? void 0 : signal.signal.addEventListener('abort', function () {
+      clearTimeout(timer);
+      reject(new Error('canceled'));
+    });
   });
 };
 
@@ -6476,8 +6781,8 @@ var fakeAxiosInstance = {
     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);
+  post: function post(_url, _params, _signal) {
+    return fakePromise(false, _signal);
   }
 };
 var createApi = function createApi() {
@@ -6491,22 +6796,104 @@ var createApi = function createApi() {
         };
       });
     },
-    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);
+    },
+    getTAC: function getTAC(tafData, signal) {
+      return fakeAxiosInstance.post.apply(fakeAxiosInstance, ['/taf2tac'].concat([Object.assign({}, tafData)].concat(_toConsumableArray(signal ? [{
+        signal: signal
+      }] : [])))).then(function () {
+        return {
+          data: fakeTafTac
+        };
+      });
     }
   };
 };
 
-export { TafForm, Wrapper as TafModule, createApi$1 as createApi, createApi as createFakeApi };
+/* *
+ * 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 tafScreenPreset = {
+  id: 'screenConfigTaf',
+  title: 'TAF',
+  views: {
+    byId: {
+      taf: {
+        title: 'TAF',
+        componentType: 'TafModule',
+        initialProps: {}
+      }
+    },
+    allIds: ['taf']
+  },
+  syncGroups: [],
+  mosaicNode: 'taf'
+};
+var TafApiWrapper = function TafApiWrapper(_ref) {
+  var config = _ref.config,
+      auth = _ref.auth,
+      onSetAuth = _ref.onSetAuth,
+      onPreventCloseView = _ref.onPreventCloseView;
+  return config ? /*#__PURE__*/React.createElement(ApiProvider, {
+    baseURL: config.baseUrl,
+    appURL: config.appUrl,
+    auth: auth,
+    onSetAuth: onSetAuth,
+    createApi: createApi$1,
+    authTokenUrl: config.authTokenUrl,
+    authClientId: config.authClientId
+  }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(Wrapper, {
+    onPreventCloseView: onPreventCloseView
+  }))) : null;
+};
+var componentsLookUp = function componentsLookUp(payload, _ref2) {
+  var config = _ref2.config,
+      auth = _ref2.auth,
+      onSetAuth = _ref2.onSetAuth;
+  var ConnectedModuleWrapper = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var componentType = payload.componentType;
+
+  switch (componentType) {
+    case 'TafModule':
+      if (ConnectedModuleWrapper) {
+        return /*#__PURE__*/React.createElement(ConnectedModuleWrapper, {
+          component: TafApiWrapper,
+          payload: payload,
+          "data-testid": "tafmodule",
+          config: config,
+          auth: auth,
+          onSetAuth: onSetAuth
+        });
+      }
+
+      return /*#__PURE__*/React.createElement(TafApiWrapper, {
+        "data-testid": "tafmodule",
+        config: config,
+        auth: auth,
+        onSetAuth: onSetAuth
+      });
+
+    default:
+      return null;
+  }
+};
+
+export { TafApiWrapper, TafForm, Wrapper as TafModule, componentsLookUp, createApi$1 as createApi, createApi as createFakeApi, tafScreenPreset };