@opengeoweb/taf 2.5.0 → 2.8.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';
     };
@@ -2302,24 +2318,36 @@
     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, standardTAC) {
-      if (standardTAC === void 0) {
-        standardTAC = '';
-      }
-
-      var _a = __read(React__default["default"].useState(taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA), 2),
+    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();
+        }
+
+        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) {
+          })["catch"](function (error) {
+            if (isMounted && error.message !== 'canceled') {
               setTAC(TAC_FAILED);
             }
           });
@@ -2328,17 +2356,12 @@
         }
       }, [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),
@@ -2528,9 +2551,16 @@
 
 
       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 && {
@@ -2916,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],
@@ -3723,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],
@@ -3772,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() {
@@ -3855,23 +3871,37 @@
       onValidateForm: null,
       registerValidateForm: null,
       tafAction: null,
-      setTafAction: null
+      setTafAction: null,
+      isFormDirty: null,
+      setIsFormDirty: null
     });
     var useTafModuleContext = function useTafModuleContext() {
       return React__namespace.useContext(TafModuleContext);
     };
-    var useTafModuleState = function useTafModuleState() {
-      var _a = __read(React__namespace.useState(function () {
+    var useTafModuleState = function useTafModuleState(_a) {
+      var onPreventCloseView = _a.onPreventCloseView;
+      var api$1 = api.useApiContext().api;
+
+      var _b = __read(React__namespace.useState(function () {
         return new Promise(function () {
           return true;
         });
       }), 2),
-          onValidateForm = _a[0],
-          registerValidateForm = _a[1];
+          onValidateForm = _b[0],
+          registerValidateForm = _b[1];
+
+      var _c = __read(React__namespace.useState(), 2),
+          tafAction = _c[0],
+          setTafAction = _c[1];
 
-      var _b = __read(React__namespace.useState(), 2),
-          tafAction = _b[0],
-          setTafAction = _b[1];
+      var _d = __read(React__namespace.useState(false), 2),
+          isFormDirty = _d[0],
+          setIsFormDirty = _d[1];
+
+      var _e = __read(useTACGenerator(undefined, api$1.getTAC), 3),
+          TAC = _e[0],
+          updateTAC = _e[1],
+          setTAC = _e[2];
 
       var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
         registerValidateForm(function () {
@@ -3879,16 +3909,32 @@
         });
       };
 
+      var onChangeFormDirty = function onChangeFormDirty(isDirty) {
+        if (isDirty !== isFormDirty) {
+          setIsFormDirty(isDirty);
+          onPreventCloseView(isDirty);
+        }
+      };
+
       return {
         onValidateForm: onValidateForm,
         registerValidateForm: onRegisterValidateForm,
         tafAction: tafAction,
-        setTafAction: setTafAction
+        setTafAction: setTafAction,
+        TAC: TAC,
+        updateTAC: updateTAC,
+        setTAC: setTAC,
+        isFormDirty: isFormDirty,
+        setIsFormDirty: onChangeFormDirty
       };
     };
     var TafModuleProvider = function TafModuleProvider(_a) {
-      var children = _a.children;
-      var contextState = useTafModuleState();
+      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);
@@ -3902,64 +3948,69 @@
           onFormAction = _b === void 0 ? function () {
         return null;
       } : _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 () {
+          _c = _a.isIssuesPaneOpen,
+          isIssuesPaneOpen = _c === void 0 ? false : _c,
+          _d = _a.setIsIssuesPaneOpen,
+          setIsIssuesPaneOpen = _d === void 0 ? function () {
         return null;
-      } : _e,
-          _f = _a.isDisabled,
-          isDisabled = _f === void 0 ? false : _f,
-          _g = _a.setIsDisabled,
-          setIsDisabled = _g === void 0 ? function () {
+      } : _d,
+          _e = _a.isDisabled,
+          isDisabled = _e === void 0 ? false : _e,
+          _f = _a.setIsDisabled,
+          setIsDisabled = _f === void 0 ? function () {
         return null;
-      } : _g;
+      } : _f;
       var originalTaf = tafFromBackend.taf;
       var isDefaultDisabled = getIsFormDefaultDisabled(tafFromBackend.taf.status);
       var confirmDialog = shared.useConfirmationDialog();
 
-      var _h = shared.useDraftFormHelpers(),
-          toggleIsDraft = _h.toggleIsDraft,
-          DraftFieldHelper = _h.DraftFieldHelper;
+      var _g = shared.useDraftFormHelpers(true),
+          toggleIsDraft = _g.toggleIsDraft,
+          DraftFieldHelper = _g.DraftFieldHelper;
 
-      var _j = useTafModuleContext(),
-          registerValidateForm = _j.registerValidateForm,
-          tafAction = _j.tafAction,
-          setTafAction = _j.setTafAction;
+      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 () {
@@ -3978,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
@@ -4032,6 +4083,7 @@
             if (isFormDirty) {
               showConfirmDialog(action).then(function () {
                 resetForm(undefined, isDefaultDisabled);
+                resetTAC();
               });
             } else {
               resetForm(undefined, isDefaultDisabled);
@@ -4098,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({
@@ -4191,9 +4243,9 @@
         });
       };
 
-      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 () {
         setIsDisabled(isDefaultDisabled);
@@ -4221,10 +4273,16 @@
         registerValidateForm(onValidateFormPromise); // set default taf action
 
         setTafAction(fromStatusToAction(originalTaf.status));
+        resetTAC();
         return function () {
           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
@@ -4516,21 +4574,6 @@
         'aria-controls': "simple-tabpanel-" + index
       };
     };
-    var emptyBaseForecast = {
-      wind: '',
-      visibility: '',
-      weather: {
-        weather1: '',
-        weather2: '',
-        weather3: ''
-      },
-      cloud: {
-        cloud1: '',
-        cloud2: '',
-        cloud3: '',
-        cloud4: ''
-      }
-    };
     var prepareTafExportValues = function prepareTafExportValues(tafToCopy, currentTaf) {
       var _a;
 
@@ -4539,7 +4582,7 @@
           _b = convertedCopy.changeGroups,
           changeGroups = _b === void 0 ? [] : _b;
       return __assign(__assign({}, currentTaf), {
-        baseForecast: __assign(__assign(__assign({}, emptyBaseForecast), baseForecast), {
+        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
@@ -4707,6 +4750,8 @@
           trigger = _e.trigger,
           setValue = _e.setValue;
 
+      var updateTAC = useTafModuleContext().updateTAC;
+
       var handleExport = function handleExport() {
         var currentTaf = getValues();
         var newTaf = prepareTafExportValues(taf, currentTaf);
@@ -4719,6 +4764,7 @@
         setTimeout(function () {
           trigger(); // trigger all fields validation
         }, 0);
+        updateTAC(convertTafValuesToObject(newTaf));
       };
 
       React__default["default"].useEffect(function () {
@@ -5157,7 +5203,7 @@
       } : {
         type: 'SERVER',
         title: 'An error has occurred while saving, please try again',
-        message: shared.getAxiosErrorMessage(error)
+        message: shared.isAxiosError(error) ? shared.getAxiosErrorMessage(error) : error.message
       };
     };
 
@@ -5183,6 +5229,7 @@
             switch (_a.label) {
               case 0:
                 setLoading(true);
+                setError(null);
                 _a.label = 1;
 
               case 1:
@@ -5241,22 +5288,18 @@
           postTaf = _c === void 0 ? function () {
         return null;
       } : _c,
-          _d = _a.onFormDirty,
-          onFormDirty = _d === void 0 ? function () {
-        return null;
-      } : _d,
-          _e = _a.isIssuesPaneOpen,
-          isIssuesPaneOpen = _e === void 0 ? false : _e,
-          _f = _a.setIsIssuesPaneOpen,
-          setIsIssuesPaneOpen = _f === void 0 ? function () {
+          _d = _a.isIssuesPaneOpen,
+          isIssuesPaneOpen = _d === void 0 ? false : _d,
+          _e = _a.setIsIssuesPaneOpen,
+          setIsIssuesPaneOpen = _e === void 0 ? function () {
         return null;
-      } : _f,
-          _g = _a.isFormDisabled,
-          isFormDisabled = _g === void 0 ? false : _g,
-          _h = _a.setIsFormDisabled,
-          setIsFormDisabled = _h === void 0 ? function () {
+      } : _e,
+          _f = _a.isFormDisabled,
+          isFormDisabled = _f === void 0 ? false : _f,
+          _g = _a.setIsFormDisabled,
+          setIsFormDisabled = _g === void 0 ? function () {
         return null;
-      } : _h,
+      } : _g,
           error = _a.error;
 
       var onTafAction = function onTafAction(action, taf) {
@@ -5370,16 +5413,21 @@
         severity: "error",
         title: error.title,
         info: error.message,
-        dataTestId: "taf-error"
-      }), /*#__PURE__*/React__default["default"].createElement(TafForm, {
+        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,
         isDisabled: isFormDisabled,
         setIsDisabled: setIsFormDisabled
-      }));
+      })));
     };
 
     var IssuesPaneWrapper = function IssuesPaneWrapper(props) {
@@ -5418,7 +5466,8 @@
 
       var _f = useTafModuleContext(),
           onValidateForm = _f.onValidateForm,
-          tafAction = _f.tafAction;
+          tafAction = _f.tafAction,
+          isFormDirty = _f.isFormDirty;
 
       var _g = __read(React__default["default"].useState(sortTafTimeSlots(tafList)), 2),
           _h = _g[0],
@@ -5443,12 +5492,8 @@
           setActiveTafIndex = _m[1];
 
       var _o = __read(React__default["default"].useState(false), 2),
-          isFormDirty = _o[0],
-          setIsFormDirty = _o[1];
-
-      var _p = __read(React__default["default"].useState(false), 2),
-          isFormDisabled = _p[0],
-          setIsFormDisabled = _p[1];
+          isFormDisabled = _o[0],
+          setIsFormDisabled = _o[1];
 
       var postTaf = function postTaf(data) {
         return __awaiter(void 0, void 0, void 0, function () {
@@ -5511,6 +5556,7 @@
                 _a.sent();
                 confirmDialog(CONFIRM_DIALOG_OPTIONS).then(function () {
                   action(value);
+                  setError(null);
                 });
                 return [3
                 /*break*/
@@ -5523,6 +5569,7 @@
 
               case 6:
                 action(value);
+                setError(null);
                 _a.label = 7;
 
               case 7:
@@ -5555,7 +5602,9 @@
         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
@@ -5644,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,
@@ -5660,7 +5708,6 @@
           activeTafIndex: activeTafIndex,
           index: index,
           tafFromBackend: tafFromBackend,
-          onFormDirty: setIsFormDirty,
           isIssuesPaneOpen: isIssuesPaneOpen,
           setIsIssuesPaneOpen: onToggleIssuesPane,
           isFormDisabled: isFormDisabled,
@@ -5671,13 +5718,15 @@
         });
       }))), /*#__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,
@@ -5692,26 +5741,11 @@
       }));
     };
 
-    /* *
-     * 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(TafModuleProvider, null, /*#__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',
@@ -5723,65 +5757,21 @@
     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",
@@ -5797,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) {
@@ -5818,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
+          }] : [])))));
         }
       };
     };
@@ -6739,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'));
+        });
       });
     };
 
@@ -6755,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() {
@@ -6770,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 });