@opengeoweb/taf 2.4.1 → 2.7.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('react-sortablejs'), require('@opengeoweb/form-fields'), require('@opengeoweb/api'), require('@opengeoweb/shared'), require('moment'), require('lodash'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-dom'), require('@mui/material/LinearProgress'), require('@mui/icons-material/DoDisturb'), require('@mui/material/Box')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'react-sortablejs', '@opengeoweb/form-fields', '@opengeoweb/api', '@opengeoweb/shared', 'moment', 'lodash', '@mui/styles/makeStyles', '@mui/icons-material', 'react-dom', '@mui/material/LinearProgress', '@mui/icons-material/DoDisturb', '@mui/material/Box'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.reactHookForm, global.reactSortablejs, global.formFields, global.api, global.shared, global.moment, global.lodash, global.makeStyles, global.iconsMaterial, global.ReactDOM, global.LinearProgress, global.DoDisturbIcon, global.Box));
-})(this, (function (exports, React, material, reactHookForm, reactSortablejs, formFields, api, shared, moment, lodash, makeStyles, iconsMaterial, ReactDOM, LinearProgress, DoDisturbIcon, Box) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('react-sortablejs'), require('@opengeoweb/form-fields'), require('@opengeoweb/shared'), require('lodash'), require('moment'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-dom'), require('@opengeoweb/api'), require('@mui/material/LinearProgress'), require('@mui/icons-material/DoDisturb'), require('@mui/material/Box')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'react-sortablejs', '@opengeoweb/form-fields', '@opengeoweb/shared', 'lodash', 'moment', '@mui/styles/makeStyles', '@mui/icons-material', 'react-dom', '@opengeoweb/api', '@mui/material/LinearProgress', '@mui/icons-material/DoDisturb', '@mui/material/Box'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.reactHookForm, global.reactSortablejs, global.formFields, global.shared, global.lodash, global.moment, global.makeStyles, global.iconsMaterial, global.ReactDOM, global.api, global.LinearProgress, global.DoDisturbIcon, global.Box));
+})(this, (function (exports, React, material, reactHookForm, reactSortablejs, formFields, shared, lodash, moment, makeStyles, iconsMaterial, ReactDOM, api, LinearProgress, DoDisturbIcon, Box) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1994,6 +1994,22 @@
       return true;
     };
 
+    var emptyBaseForecast = {
+      wind: '',
+      visibility: '',
+      weather: {
+        weather1: '',
+        weather2: '',
+        weather3: ''
+      },
+      cloud: {
+        cloud1: '',
+        cloud2: '',
+        cloud3: '',
+        cloud4: ''
+      }
+    }; // formatters
+
     var formatIssueTime = function formatIssueTime(issueDate) {
       return issueDate ? moment__default["default"](issueDate).utc().format('DDHHmm') + "Z" : 'Not issued';
     };
@@ -2298,45 +2314,54 @@
     var TAC_MISSING_DATA = 'Missing data: no TAC can be generated';
     var TAC_NOT_AVAILABLE = 'No TAC available';
     var TAC_RETRIEVING_DATA = 'Retrieving TAC';
-    var useTACGenerator = function useTACGenerator(taf, requestTAC, standardTAC) {
-      if (standardTAC === void 0) {
-        standardTAC = '';
-      }
-
-      var _a = __read(React__default["default"].useState(taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA), 2),
+    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 _a = __read(React__default["default"].useState(!taf || taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA), 2),
           TAC = _a[0],
           setTAC = _a[1];
 
       var isMounted = shared.useIsMounted().isMounted;
+      var controller = React__default["default"].useRef(null);
+
+      var onSetTac = function onSetTac(newTAC) {
+        if (controller.current) {
+          controller.current.abort();
+        }
 
-      var retrieveTAC = function retrieveTAC(tafToPost) {
+        setTAC(newTAC);
+      };
+
+      var retrieveTAC = React__default["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["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["default"].useEffect(function () {
-        if (standardTAC !== '') {
-          setTAC(standardTAC);
-        }
-      }, [standardTAC]);
-      return [TAC, retrieveTAC];
+      return [TAC, retrieveTAC, onSetTac];
     };
     var useDragOrder = function useDragOrder(trigger, move, onFormBlur) {
       var _a = __read(React__default["default"].useState(null), 2),
@@ -2485,6 +2510,10 @@
         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
 
@@ -2522,15 +2551,52 @@
 
 
       var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
+      var formattedBaseForecast = formatFormValues(taf.baseForecast);
+
+      var baseForecast = __assign(__assign(__assign({}, emptyBaseForecast), formattedBaseForecast), {
+        weather: __assign(__assign({}, emptyBaseForecast.weather), formattedBaseForecast.weather),
+        cloud: __assign(__assign({}, emptyBaseForecast.cloud), formattedBaseForecast.cloud)
+      });
+
       return __assign(__assign(__assign(__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 {
@@ -2880,7 +2946,7 @@
           getValues = _g.getValues,
           trigger = _g.trigger;
 
-      var isNotRequiredForAction = shared.useDraftFormHelpers().isRequired; // cross-field required validation
+      var isNotRequiredForAction = shared.useDraftFormHelpers(true).isRequired; // cross-field required validation
 
       var _h = __read(getRequiredCrossFields(fieldNames), 3),
           mainFields = _h[0],
@@ -3309,6 +3375,36 @@
      * 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: {
@@ -3338,7 +3434,7 @@
           return onTafViewModeButtonPress('CANCEL');
         }
       }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "correctaf",
+        "data-testid": "correcttaf",
         variant: "tertiary",
         onClick: function onClick() {
           return onTafViewModeButtonPress('CORRECT');
@@ -3392,21 +3488,7 @@
           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["default"].createElement(material.Button, {
         "data-testid": "publishtaf",
@@ -3419,21 +3501,7 @@
           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["default"].createElement(material.Grid, {
         item: true,
@@ -3685,20 +3753,6 @@
       }
     };
 
-    var getErrorDefaultMessage = function getErrorDefaultMessage(error) {
-      switch (error.type) {
-        case 'required':
-          {
-            return 'this field is required';
-          }
-
-        default:
-          {
-            return error.message;
-          }
-      }
-    };
-
     var capitalizeWord = function capitalizeWord(_a) {
       var _b = __read(_a),
           firstLetter = _b[0],
@@ -3734,7 +3788,7 @@
           firstNamePart = _a[0];
 
       var fieldErrorTitle = humanizeErrorMessage(firstNamePart);
-      return index + 1 + ". " + fieldErrorTitle + ": " + getErrorDefaultMessage(error);
+      return index + 1 + ". " + fieldErrorTitle + ": " + error.message;
     };
     var MODAL_DIALOG_ELEMENT = 'modal-dialog';
     var useIssuesPane = function useIssuesPane() {
@@ -3813,101 +3867,150 @@
       }))), rootElement);
     };
 
-    var fromStatusToAction = function fromStatusToAction(tafStatus) {
-      switch (tafStatus) {
-        case 'DRAFT':
-          return 'DRAFT';
-
-        case 'DRAFT_AMENDED':
-          return 'DRAFT_AMEND';
+    var TafModuleContext = /*#__PURE__*/React__namespace.createContext({
+      onValidateForm: null,
+      registerValidateForm: null,
+      tafAction: null,
+      setTafAction: null,
+      isFormDirty: null,
+      setIsFormDirty: null
+    });
+    var useTafModuleContext = function useTafModuleContext() {
+      return React__namespace.useContext(TafModuleContext);
+    };
+    var useTafModuleState = function useTafModuleState(_a) {
+      var onPreventCloseView = _a.onPreventCloseView;
+      var api$1 = api.useApiContext().api;
 
-        case 'DRAFT_CORRECTED':
-          return 'DRAFT_CORRECT';
+      var _b = __read(React__namespace.useState(function () {
+        return new Promise(function () {
+          return true;
+        });
+      }), 2),
+          onValidateForm = _b[0],
+          registerValidateForm = _b[1];
 
-        case 'PUBLISHED':
-          return 'PUBLISH';
+      var _c = __read(React__namespace.useState(), 2),
+          tafAction = _c[0],
+          setTafAction = _c[1];
 
-        case 'AMENDED':
-          return 'AMEND';
+      var _d = __read(React__namespace.useState(false), 2),
+          isFormDirty = _d[0],
+          setIsFormDirty = _d[1];
 
-        case 'CORRECTED':
-          return 'CORRECT';
+      var _e = __read(useTACGenerator(undefined, api$1.getTAC), 3),
+          TAC = _e[0],
+          updateTAC = _e[1],
+          setTAC = _e[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(_a) {
+      var children = _a.children,
+          _b = _a.onPreventCloseView,
+          onPreventCloseView = _b === void 0 ? function () {} : _b;
+      var contextState = useTafModuleState({
+        onPreventCloseView: onPreventCloseView
+      });
+      return /*#__PURE__*/React__namespace.createElement(TafModuleContext.Provider, {
+        value: contextState
+      }, children);
+    };
 
     var noop = function noop() {};
 
     var TafForm = function TafForm(_a) {
-      var _b = _a.isDisabled,
-          isDefaultDisabled = _b === void 0 ? false : _b,
-          tafFromBackend = _a.tafFromBackend,
-          _c = _a.onFormAction,
-          onFormAction = _c === void 0 ? function () {
+      var tafFromBackend = _a.tafFromBackend,
+          _b = _a.onFormAction,
+          onFormAction = _b === void 0 ? function () {
         return null;
-      } : _c,
-          _d = _a.onFormDirty,
-          onFormDirty = _d === void 0 ? function () {
+      } : _b,
+          _c = _a.isIssuesPaneOpen,
+          isIssuesPaneOpen = _c === void 0 ? false : _c,
+          _d = _a.setIsIssuesPaneOpen,
+          setIsIssuesPaneOpen = _d === void 0 ? function () {
         return null;
       } : _d,
-          _e = _a.isIssuesPaneOpen,
-          isIssuesPaneOpen = _e === void 0 ? false : _e,
-          _f = _a.setIsIssuesPaneOpen,
-          setIsIssuesPaneOpen = _f === void 0 ? function () {
+          _e = _a.isDisabled,
+          isDisabled = _e === void 0 ? false : _e,
+          _f = _a.setIsDisabled,
+          setIsDisabled = _f === void 0 ? function () {
         return null;
       } : _f;
       var originalTaf = tafFromBackend.taf;
-      var defaultTafAction = fromStatusToAction(originalTaf.status);
-
-      var _g = __read(React__default["default"].useState(defaultTafAction), 2),
-          tafAction = _g[0],
-          setTafAction = _g[1];
-
-      var _h = __read(React__default["default"].useState(isDefaultDisabled), 2),
-          isDisabled = _h[0],
-          setIsDisabled = _h[1];
-
+      var isDefaultDisabled = getIsFormDefaultDisabled(tafFromBackend.taf.status);
       var confirmDialog = shared.useConfirmationDialog();
 
-      var _j = shared.useDraftFormHelpers(),
-          toggleIsDraft = _j.toggleIsDraft,
-          DraftFieldHelper = _j.DraftFieldHelper;
+      var _g = shared.useDraftFormHelpers(true),
+          toggleIsDraft = _g.toggleIsDraft,
+          DraftFieldHelper = _g.DraftFieldHelper;
+
+      var _h = useTafModuleContext(),
+          registerValidateForm = _h.registerValidateForm,
+          tafAction = _h.tafAction,
+          setIsFormDirty = _h.setIsFormDirty,
+          setTafAction = _h.setTafAction,
+          TAC = _h.TAC,
+          updateTAC = _h.updateTAC,
+          setTAC = _h.setTAC;
 
-      var api$1 = api.useApiContext().api;
       var isMounted = shared.useIsMounted().isMounted;
 
-      var _k = reactHookForm.useFormContext(),
-          control = _k.control,
-          handleSubmit = _k.handleSubmit,
-          trigger = _k.trigger,
-          formState = _k.formState,
-          getValues = _k.getValues,
-          setValue = _k.setValue,
-          reset = _k.reset;
+      var _j = reactHookForm.useFormContext(),
+          control = _j.control,
+          handleSubmit = _j.handleSubmit,
+          trigger = _j.trigger,
+          formState = _j.formState,
+          getValues = _j.getValues,
+          setValue = _j.setValue,
+          reset = _j.reset;
 
       var isFormDirty = formState.isDirty,
           errors = formState.errors;
       shared.usePreventBrowserClose(isFormDirty && !isDisabled);
       var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
-      var _l = __read(React__default["default"].useState(getValues()), 2),
-          delayedFormValues = _l[0],
-          setDelayedFormValues = _l[1];
-
-      var _m = __read(useTACGenerator(tafFromBackend.taf, api$1.getTAC), 2),
-          TAC = _m[0],
-          updateTAC = _m[1];
+      var _k = __read(React__default["default"].useState(getValues()), 2),
+          delayedFormValues = _k[0],
+          setDelayedFormValues = _k[1];
 
       var hasErrors = Object.keys(errors).length;
 
       var onFormBlur = function onFormBlur() {
-        setDelayedFormValues(getValues());
+        if (!lodash.isEqual(getValues(), delayedFormValues)) {
+          setDelayedFormValues(getValues());
+        }
+      };
+
+      var resetTAC = function resetTAC() {
+        if (originalTaf.status !== 'NEW') {
+          updateTAC(originalTaf);
+        } else {
+          setTAC(TAC_NOT_AVAILABLE);
+        }
       };
 
       React__default["default"].useEffect(function () {
@@ -3926,8 +4029,8 @@
       }, [hasErrors]); // Needed to be able to show a confirmation dialog on switching tabs when form is edited and not saved
 
       React__default["default"].useEffect(function () {
-        onFormDirty(isFormDirty);
-      }, [isFormDirty, onFormDirty]);
+        setIsFormDirty(isFormDirty);
+      }, [isFormDirty, setIsFormDirty]);
 
       var onSubmit = function onSubmit(data) {
         // eslint-disable-next-line no-console
@@ -3972,6 +4075,7 @@
             toggleIsDraft(true);
             handleSubmit(function (data) {
               onFormAction(action, convertTafValuesToObject(data));
+              reset(getValues());
             })();
             break;
 
@@ -3979,6 +4083,7 @@
             if (isFormDirty) {
               showConfirmDialog(action).then(function () {
                 resetForm(undefined, isDefaultDisabled);
+                resetTAC();
               });
             } else {
               resetForm(undefined, isDefaultDisabled);
@@ -4035,7 +4140,7 @@
         switch (action) {
           case 'CANCEL':
             showConfirmDialog(action).then(function () {
-              onFormAction(action, tafFromBackend.taf);
+              onFormAction(action, convertTafValuesToObject(prepareTafValues(tafFromBackend.taf, action)));
             });
             break;
 
@@ -4045,19 +4150,19 @@
         }
       };
 
-      var _o = reactHookForm.useFieldArray({
+      var _l = reactHookForm.useFieldArray({
         control: control,
         name: 'changeGroups'
       }),
-          fields = _o.fields,
-          insert = _o.insert,
-          remove = _o.remove,
-          move = _o.move;
+          fields = _l.fields,
+          insert = _l.insert,
+          remove = _l.remove,
+          move = _l.move;
 
-      var _p = useDragOrder(trigger, move, onFormBlur),
-          onChangeOrder = _p.onChangeOrder,
-          onStartDrag = _p.onStartDrag,
-          activeDraggingIndex = _p.activeDraggingIndex;
+      var _m = useDragOrder(trigger, move, onFormBlur),
+          onChangeOrder = _m.onChangeOrder,
+          onStartDrag = _m.onStartDrag,
+          activeDraggingIndex = _m.activeDraggingIndex;
 
       var onRemoverow = function onRemoverow(index) {
         confirmDialog({
@@ -4138,20 +4243,46 @@
         });
       };
 
-      var _q = __read(React__default["default"].useState(false), 2),
-          shouldValidate = _q[0],
-          setShouldValidate = _q[1];
+      var _o = __read(React__default["default"].useState(false), 2),
+          shouldValidate = _o[0],
+          setShouldValidate = _o[1];
 
       React__default["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["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["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
@@ -4443,6 +4574,20 @@
         'aria-controls': "simple-tabpanel-" + index
       };
     };
+    var prepareTafExportValues = function prepareTafExportValues(tafToCopy, currentTaf) {
+      var _a;
+
+      var convertedCopy = prepareTafValues(tafToCopy, undefined, false);
+      var baseForecast = convertedCopy.baseForecast,
+          _b = convertedCopy.changeGroups,
+          changeGroups = _b === void 0 ? [] : _b;
+      return __assign(__assign({}, currentTaf), {
+        baseForecast: __assign(__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");
@@ -4533,6 +4678,38 @@
       }));
     };
 
+    /* *
+     * 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["default"].createElement(material.SvgIcon, null, /*#__PURE__*/React__default["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(_a) {
+      var onClick = _a.onClick,
+          isHidden = _a.isHidden;
+      return isHidden ? null : /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: "Import TAC",
+        placement: "left"
+      }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+        onClick: onClick,
+        "data-testid": "export-tac-button"
+      }, ExportIcon)));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -4553,18 +4730,43 @@
     var TacContainer = function TacContainer(_a) {
       var taf = _a.taf,
           _b = _a.isActive,
-          isActive = _b === void 0 ? false : _b;
+          isActive = _b === void 0 ? false : _b,
+          _c = _a.isFormDisabled,
+          isFormDisabled = _c === void 0 ? false : _c;
       var api$1 = api.useApiContext().api;
 
-      var _c = __read(useTACGenerator(taf, api$1.getTAC), 2),
-          TAC = _c[0],
-          retrieveTAC = _c[1];
+      var _d = __read(useTACGenerator(taf, api$1.getTAC), 2),
+          TAC = _d[0],
+          retrieveTAC = _d[1];
 
       var status = taf.status,
           location = taf.location,
           baseTime = taf.baseTime;
       var locationLabel = getLocationSetting(location).label;
       var timeSlot = getTafTimeSlot(baseTime, location, status);
+
+      var _e = reactHookForm.useFormContext(),
+          getValues = _e.getValues,
+          trigger = _e.trigger,
+          setValue = _e.setValue;
+
+      var 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["default"].useEffect(function () {
         if (isActive) {
           retrieveTAC(taf);
@@ -4580,14 +4782,22 @@
         sx: {
           display: 'flex',
           alignItems: 'center',
-          marginBottom: '2px'
+          justifyContent: 'space-between',
+          height: 24
         }
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
-          width: 20,
-          height: 20,
           display: 'flex',
-          marginRight: '6px'
+          alignItems: 'center'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          width: 24,
+          height: 24,
+          display: 'flex',
+          marginRight: '2px',
+          alignItems: 'center',
+          justifyContent: 'center'
         }
       }, /*#__PURE__*/React__default["default"].createElement(StatusIcon, {
         timeSlot: timeSlot,
@@ -4614,7 +4824,10 @@
         },
         "data-testid": "tafLocationLabel",
         component: "span"
-      }, locationLabel))), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      }, locationLabel))), /*#__PURE__*/React__default["default"].createElement(ExportButton, {
+        onClick: handleExport,
+        isHidden: isFormDisabled || tacHasError(TAC)
+      })), /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
           fontSize: '12px',
           letterSpacing: '0.4px',
@@ -4650,11 +4863,13 @@
           _e = _a.hideTitle,
           hideTitle = _e === void 0 ? false : _e,
           _f = _a.activeTaf,
-          activeTaf = _f === void 0 ? null : _f;
+          activeTaf = _f === void 0 ? null : _f,
+          _g = _a.isFormDisabled,
+          isFormDisabled = _g === void 0 ? false : _g;
 
-      var _g = __read(React__default["default"].useState(0), 2),
-          activeTab = _g[0],
-          setActiveTab = _g[1];
+      var _h = __read(React__default["default"].useState(0), 2),
+          activeTab = _h[0],
+          setActiveTab = _h[1];
 
       var scrollRef = React__default["default"].useRef(null);
       var tabs = [{
@@ -4746,7 +4961,8 @@
           return /*#__PURE__*/React__default["default"].createElement(TacContainer, {
             key: taf.uuid,
             taf: taf,
-            isActive: isActiveLocation(taf.location)
+            isActive: isActiveLocation(taf.location),
+            isFormDisabled: isFormDisabled
           });
         }));
       })));
@@ -4980,84 +5196,72 @@
       }
     };
 
-    var TafPanel = function TafPanel(_a) {
-      var tafFromBackend = _a.tafFromBackend,
-          activeTafIndex = _a.activeTafIndex,
-          index = _a.index,
-          _b = _a.onPostTaf,
-          onPostTaf = _b === void 0 ? function () {} : _b,
-          _c = _a.onFormDirty,
-          onFormDirty = _c === void 0 ? function () {
-        return null;
-      } : _c,
-          _d = _a.isIssuesPaneOpen,
-          isIssuesPaneOpen = _d === void 0 ? false : _d,
-          _e = _a.setIsIssuesPaneOpen,
-          setIsIssuesPaneOpen = _e === void 0 ? function () {
-        return null;
-      } : _e;
-      var api$1 = api.useApiContext().api;
+    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: shared.isAxiosError(error) ? shared.getAxiosErrorMessage(error) : error.message
+      };
+    };
 
-      var _f = __read(React__default["default"].useState(false), 2),
-          isLoading = _f[0],
-          setLoading = _f[1];
+    var usePostTafRequest = function usePostTafRequest(request, errorParser) {
+      if (errorParser === void 0) {
+        errorParser = parseErrorMessage;
+      }
 
-      var _g = __read(React__default["default"].useState(null), 2),
-          error = _g[0],
-          setError = _g[1]; // removes cancelled error message
+      var isMounted = shared.useIsMounted().isMounted;
 
+      var _a = __read(React__default["default"].useState(false), 2),
+          isLoading = _a[0],
+          setLoading = _a[1];
 
-      React__default["default"].useEffect(function () {
-        var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
-          setError(null);
-        }, 10000) : null;
-        return function () {
-          if (cancelErrorTimeout !== null) {
-            clearTimeout(cancelErrorTimeout);
-          }
-        };
-      }, [error]);
+      var _b = __read(React__default["default"].useState(null), 2),
+          error = _b[0],
+          setError = _b[1];
 
-      var postTaf = function postTaf(data) {
+      var doRequest = function doRequest(params) {
         return __awaiter(void 0, void 0, void 0, function () {
-          var error_1, newError;
+          var error_1, newErrorr;
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
-                _a.trys.push([0, 2,, 3]);
-
                 setLoading(true);
+                setError(null);
+                _a.label = 1;
+
+              case 1:
+                _a.trys.push([1, 3,, 4]);
+
                 return [4
                 /*yield*/
-                , api$1.postTaf(data)];
+                , request(params)];
 
-              case 1:
+              case 2:
                 _a.sent();
 
+                if (!isMounted.current) return [2
+                /*return*/
+                ];
                 setLoading(false);
                 setError(null);
-                onFormDirty(false); // callback
-
-                onPostTaf();
                 return [3
                 /*break*/
-                , 3];
+                , 4];
 
-              case 2:
+              case 3:
                 error_1 = _a.sent();
-                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: shared.getAxiosErrorMessage(error_1)
-                };
-                setError(newError);
+                if (!isMounted.current) return [2
+                /*return*/
+                ];
+                newErrorr = errorParser ? errorParser(error_1, params) : error_1;
                 setLoading(false);
-                throw error_1;
+                setError(newErrorr);
+                throw newErrorr;
 
-              case 3:
+              case 4:
                 return [2
                 /*return*/
                 ];
@@ -5066,9 +5270,37 @@
         });
       };
 
-      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(_a) {
+      var tafFromBackend = _a.tafFromBackend,
+          activeTafIndex = _a.activeTafIndex,
+          index = _a.index,
+          _b = _a.isLoading,
+          isLoading = _b === void 0 ? false : _b,
+          _c = _a.postTaf,
+          postTaf = _c === void 0 ? function () {
+        return null;
+      } : _c,
+          _d = _a.isIssuesPaneOpen,
+          isIssuesPaneOpen = _d === void 0 ? false : _d,
+          _e = _a.setIsIssuesPaneOpen,
+          setIsIssuesPaneOpen = _e === void 0 ? function () {
+        return null;
+      } : _e,
+          _f = _a.isFormDisabled,
+          isFormDisabled = _f === void 0 ? false : _f,
+          _g = _a.setIsFormDisabled,
+          setIsFormDisabled = _g === void 0 ? function () {
+        return null;
+      } : _g,
+          error = _a.error;
 
       var onTafAction = function onTafAction(action, taf) {
         return __awaiter(void 0, void 0, void 0, function () {
@@ -5181,15 +5413,21 @@
         severity: "error",
         title: error.title,
         info: error.message,
-        dataTestId: "taf-error"
-      }), /*#__PURE__*/React__default["default"].createElement(TafForm, {
-        isDisabled: getViewMode(tafFromBackend.taf.status) === 'view',
+        dataTestId: "taf-error",
+        shouldClose: true
+      }), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          marginTop: '10px',
+          padding: 1
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(TafForm, {
         tafFromBackend: tafFromBackend,
         onFormAction: onTafAction,
-        onFormDirty: onFormDirty,
         isIssuesPaneOpen: isIssuesPaneOpen,
-        setIsIssuesPaneOpen: setIsIssuesPaneOpen
-      }));
+        setIsIssuesPaneOpen: setIsIssuesPaneOpen,
+        isDisabled: isFormDisabled,
+        setIsDisabled: setIsFormDisabled
+      })));
     };
 
     var IssuesPaneWrapper = function IssuesPaneWrapper(props) {
@@ -5200,11 +5438,18 @@
       }, 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(_a) {
       var _b = _a.tafList,
           tafList = _b === void 0 ? [] : _b,
           _c = _a.onPostTaf,
           onPostTaf = _c === void 0 ? function () {} : _c;
+      var api$1 = api.useApiContext().api;
       var confirmDialog = shared.useConfirmationDialog();
 
       var _d = useIssuesPane(),
@@ -5213,44 +5458,127 @@
           onCloseIssuesPane = _d.onCloseIssuesPane,
           startPosition = _d.startPosition;
 
-      var _e = __read(React__default["default"].useState(sortTafTimeSlots(tafList)), 2),
-          _f = _e[0],
-          upcoming = _f.upcoming,
-          current = _f.current,
-          expired = _f.expired,
-          updateSortedTafs = _e[1];
+      var _e = usePostTafRequest(api$1.postTaf),
+          isLoading = _e.isLoading,
+          postTafRequest = _e.doRequest,
+          error = _e.error,
+          setError = _e.setError;
+
+      var _f = useTafModuleContext(),
+          onValidateForm = _f.onValidateForm,
+          tafAction = _f.tafAction,
+          isFormDirty = _f.isFormDirty;
 
-      var _g = __read(current.slice(-1), 1),
-          lastCurrentTaf = _g[0];
+      var _g = __read(React__default["default"].useState(sortTafTimeSlots(tafList)), 2),
+          _h = _g[0],
+          upcoming = _h.upcoming,
+          current = _h.current,
+          expired = _h.expired,
+          updateSortedTafs = _g[1];
 
-      var _h = __read(React__default["default"].useState('UPCOMING'), 2),
-          timeSlot = _h[0],
-          setTimeSlot = _h[1];
+      var _j = __read(current.slice(-1), 1),
+          lastCurrentTaf = _j[0];
 
-      var _j = __read(React__default["default"].useState(upcoming), 2),
-          locations = _j[0],
-          setLocations = _j[1];
+      var _k = __read(React__default["default"].useState('UPCOMING'), 2),
+          timeSlot = _k[0],
+          setTimeSlot = _k[1];
 
-      var _k = __read(React__default["default"].useState(0), 2),
-          activeTafIndex = _k[0],
-          setActiveTafIndex = _k[1];
+      var _l = __read(React__default["default"].useState(upcoming), 2),
+          locations = _l[0],
+          setLocations = _l[1];
 
-      var _l = __read(React__default["default"].useState(false), 2),
-          isFormDirty = _l[0],
-          setIsFormDirty = _l[1];
+      var _m = __read(React__default["default"].useState(0), 2),
+          activeTafIndex = _m[0],
+          setActiveTafIndex = _m[1];
+
+      var _o = __read(React__default["default"].useState(false), 2),
+          isFormDisabled = _o[0],
+          setIsFormDisabled = _o[1];
+
+      var postTaf = function postTaf(data) {
+        return __awaiter(void 0, void 0, void 0, function () {
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                return [4
+                /*yield*/
+                , postTafRequest(data)];
+
+              case 1:
+                _a.sent(); // callback
+
+
+                onPostTaf();
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
+      };
 
       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);
+        return __awaiter(this, void 0, void 0, function () {
+          var taf;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                if (!isFormDirty) return [3
+                /*break*/
+                , 6];
+                _a.label = 1;
+
+              case 1:
+                _a.trys.push([1, 4,, 5]);
+
+                return [4
+                /*yield*/
+                , onValidateForm()];
+
+              case 2:
+                taf = _a.sent();
+                return [4
+                /*yield*/
+                , postTaf({
+                  taf: taf,
+                  changeStatusTo: fromActionToStatus(tafActionToDraftAction(tafAction))
+                })];
+
+              case 3:
+                _a.sent();
+
+                action(value);
+                return [3
+                /*break*/
+                , 5];
+
+              case 4:
+                _a.sent();
+                confirmDialog(CONFIRM_DIALOG_OPTIONS).then(function () {
+                  action(value);
+                  setError(null);
+                });
+                return [3
+                /*break*/
+                , 5];
+
+              case 5:
+                return [3
+                /*break*/
+                , 7];
+
+              case 6:
+                action(value);
+                setError(null);
+                _a.label = 7;
+
+              case 7:
+                return [2
+                /*return*/
+                ];
+            }
           });
-        } else {
-          action(value);
-        }
+        });
       }
 
       var onChangeLocationTab = function onChangeLocationTab(index) {
@@ -5274,11 +5602,23 @@
         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["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;
@@ -5353,10 +5693,9 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Card, {
         variant: "outlined",
         sx: {
-          padding: 1,
-          paddingTop: 0,
           marginBottom: '12px',
-          position: 'relative'
+          position: 'relative',
+          minHeight: locations.length * 62 + 32
         }
       }, /*#__PURE__*/React__default["default"].createElement(TacOverviewMobile, {
         upcomingTafs: upcoming,
@@ -5369,26 +5708,32 @@
           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["default"].createElement(material.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["default"].createElement(TacOverview, {
         upcomingTafs: upcoming,
         currentTafs: current,
         expiredTafs: expired,
-        activeTaf: activeTaf
+        activeTaf: activeTaf,
+        isFormDisabled: isFormDisabled
       })))))), /*#__PURE__*/React__default["default"].createElement(IssuesPaneWrapper, {
         handleClose: onCloseIssuesPane,
         isOpen: isIssuesPaneOpen,
@@ -5396,96 +5741,37 @@
       }));
     };
 
-    /* *
-     * 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(_a) {
-      var children = _a.children;
-      return /*#__PURE__*/React__namespace.createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__namespace.createElement(formFields.ReactHookFormProvider, {
+      var children = _a.children,
+          props = __rest(_a, ["children"]);
+
+      return /*#__PURE__*/React__namespace.createElement(TafModuleProvider, __assign({}, props), /*#__PURE__*/React__namespace.createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__namespace.createElement(formFields.ReactHookFormProvider, {
         options: {
           mode: 'onTouched',
           reValidateMode: 'onChange',
           criteriaMode: 'all'
         }
-      }, children));
+      }, children)));
     };
 
     var TafModule = function TafModule() {
       var api$1 = api.useApiContext().api;
 
-      var _a = __read(React__namespace.useState(false), 2),
-          isLoading = _a[0],
-          setLoading = _a[1];
-
-      var _b = api.useApi(api$1.getTafList),
-          getTafListError = _b.error,
-          isFetchingInitial = _b.isLoading,
-          tafList = _b.result,
-          fetchNewTafList = _b.fetchApiData;
+      var _a = api.useApi(api$1.getTafList),
+          getTafListError = _a.error,
+          isLoading = _a.isLoading,
+          tafList = _a.result,
+          fetchNewTafList = _a.fetchApiData;
 
       shared.usePoller([tafList, getTafListError], function () {
         return fetchNewTafList({});
       });
 
-      var reFetchNewTafList = function reFetchNewTafList() {
-        return __awaiter(void 0, void 0, void 0, function () {
-          return __generator(this, function (_a) {
-            switch (_a.label) {
-              case 0:
-                _a.trys.push([0, 2,, 3]);
-
-                setLoading(true);
-                return [4
-                /*yield*/
-                , fetchNewTafList({})];
-
-              case 1:
-                _a.sent();
-
-                setLoading(false);
-                return [3
-                /*break*/
-                , 3];
-
-              case 2:
-                _a.sent();
-                setLoading(false);
-                return [3
-                /*break*/
-                , 3];
-
-              case 3:
-                return [2
-                /*return*/
-                ];
-            }
-          });
-        });
+      var onPostTaf = function onPostTaf() {
+        fetchNewTafList({});
       };
 
       var hasTafListError = getTafListError !== null;
-
-      if (isFetchingInitial) {
-        return /*#__PURE__*/React__namespace.createElement(LinearProgress__default["default"], {
-          color: "secondary",
-          "data-testid": "loading-bar"
-        });
-      }
-
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         component: "div",
         id: "tafmodule",
@@ -5501,15 +5787,20 @@
       }), hasTafListError && /*#__PURE__*/React__namespace.createElement(shared.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__namespace.createElement(TafLayout, {
         tafList: tafList,
-        onPostTaf: reFetchNewTafList
+        onPostTaf: onPostTaf
       }));
     };
 
-    var Wrapper = function Wrapper() {
-      return /*#__PURE__*/React__namespace.createElement(TafWrapper, null, /*#__PURE__*/React__namespace.createElement(TafModule, null));
+    var Wrapper = function Wrapper(props) {
+      return /*#__PURE__*/React__namespace.createElement(TafWrapper, __assign({}, props), /*#__PURE__*/React__namespace.createElement(TafModule, null));
     };
 
     var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
@@ -5522,8 +5813,10 @@
         postTaf: function postTaf(formData) {
           return axiosInstance.post('/taf', __assign({}, formData));
         },
-        getTAC: function getTAC(tafData) {
-          return axiosInstance.post('/taf2tac', __assign({}, tafData));
+        getTAC: function getTAC(tafData, signal) {
+          return axiosInstance.post.apply(axiosInstance, __spreadArray(['/taf2tac'], __read(__spreadArray([__assign({}, tafData)], __read(signal ? [{
+            signal: signal
+          }] : [])))));
         }
       };
     };
@@ -6163,7 +6456,7 @@
           change: 'BECMG',
           valid: {
             start: currentDate + "T23:00:00Z",
-            end: tomorrowDate + "T00:00:00Z"
+            end: tomorrowDate + "T01:00:00Z"
           },
           wind: {
             direction: 150,
@@ -6419,7 +6712,7 @@
           }
         }
       }
-    }; // Only use for display purposes in the list!
+    };
 
     ({
       creationDate: "2022-01-06T14:00:00Z",
@@ -6443,13 +6736,21 @@
 
     var fakeTafTac = 'TAF EHAM 0812/0918 20020G35KT 0500 SN BKN040\nBECMG 0814/0816 0700 BKN001=';
 
-    var fakePromise = function fakePromise(withRandomError) {
+    var fakePromise = function fakePromise(withRandomError, signal) {
+      if (signal === void 0) {
+        signal = 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'));
+        });
       });
     };
 
@@ -6459,8 +6760,8 @@
         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() {
@@ -6474,28 +6775,119 @@
             };
           });
         },
-        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 " + _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, __spreadArray(['/taf2tac'], __read(__spreadArray([__assign({}, tafData)], __read(signal ? [{
+            signal: signal
+          }] : []))))).then(function () {
+            return {
+              data: fakeTafTac
+            };
+          });
         }
       };
     };
 
+    /* *
+     * 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(_a) {
+      var config = _a.config,
+          auth = _a.auth,
+          onSetAuth = _a.onSetAuth,
+          onPreventCloseView = _a.onPreventCloseView;
+      return config ? /*#__PURE__*/React__namespace.createElement(api.ApiProvider, {
+        baseURL: config.baseUrl,
+        appURL: config.appUrl,
+        auth: auth,
+        onSetAuth: onSetAuth,
+        createApi: createApi$1,
+        authTokenUrl: config.authTokenUrl,
+        authClientId: config.authClientId
+      }, /*#__PURE__*/React__namespace.createElement(shared.ErrorBoundary, null, /*#__PURE__*/React__namespace.createElement(Wrapper, {
+        onPreventCloseView: onPreventCloseView
+      }))) : null;
+    };
+    var componentsLookUp = function componentsLookUp(payload, _a, // TODO: find a good way to type this module without the apps complaining
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    ConnectedModuleWrapper) {
+      var config = _a.config,
+          auth = _a.auth,
+          onSetAuth = _a.onSetAuth;
+
+      if (ConnectedModuleWrapper === void 0) {
+        ConnectedModuleWrapper = null;
+      }
+
+      var componentType = payload.componentType;
+
+      switch (componentType) {
+        case 'TafModule':
+          if (ConnectedModuleWrapper) {
+            return /*#__PURE__*/React__namespace.createElement(ConnectedModuleWrapper, {
+              component: TafApiWrapper,
+              payload: payload,
+              "data-testid": "tafmodule",
+              config: config,
+              auth: auth,
+              onSetAuth: onSetAuth
+            });
+          }
+
+          return /*#__PURE__*/React__namespace.createElement(TafApiWrapper, {
+            "data-testid": "tafmodule",
+            config: config,
+            auth: auth,
+            onSetAuth: onSetAuth
+          });
+
+        default:
+          return null;
+      }
+    };
+
+    exports.TafApiWrapper = TafApiWrapper;
     exports.TafForm = TafForm;
     exports.TafModule = Wrapper;
+    exports.componentsLookUp = componentsLookUp;
     exports.createApi = createApi$1;
     exports.createFakeApi = createApi;
+    exports.tafScreenPreset = tafScreenPreset;
 
     Object.defineProperty(exports, '__esModule', { value: true });