@opengeoweb/taf 2.5.0 → 2.8.0

package/index.esm.js

@@ -4,13 +4,13 @@ import { TextField, SvgIcon, Grid, Box, Button, IconButton, Tooltip, Chip, Typog
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { ReactSortable, Sortable } from 'react-sortablejs';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
-import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
-import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, getAxiosErrorMessage, AlertBanner, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
-import moment from 'moment';
+import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, isAxiosError, getAxiosErrorMessage, AlertBanner, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
 import { isEqual } from 'lodash';
+import moment from 'moment';
 import makeStyles from '@mui/styles/makeStyles';
 import { DragIndicator, Schedule, CheckCircle } from '@mui/icons-material';
 import ReactDOM from 'react-dom';
+import { useApiContext, useApi, createApiInstance, ApiProvider } from '@opengeoweb/api';
 import LinearProgress from '@mui/material/LinearProgress';
 import DoDisturbIcon from '@mui/icons-material/DoDisturb';
 import Box$1 from '@mui/material/Box';
@@ -1994,6 +1994,22 @@ var validateFourthCloud = function validateFourthCloud(firstCloudValue, secondCl
   return true;
 };
 
+var emptyBaseForecast = {
+  wind: '',
+  visibility: '',
+  weather: {
+    weather1: '',
+    weather2: '',
+    weather3: ''
+  },
+  cloud: {
+    cloud1: '',
+    cloud2: '',
+    cloud3: '',
+    cloud4: ''
+  }
+}; // formatters
+
 var formatIssueTime = function formatIssueTime(issueDate) {
   return issueDate ? "".concat(moment(issueDate).utc().format('DDHHmm'), "Z") : 'Not issued';
 };
@@ -2299,9 +2315,7 @@ var tacHasError = function tacHasError(tac) {
   return tac === TAC_MISSING_DATA || tac === TAC_NOT_AVAILABLE || tac === TAC_RETRIEVING_DATA || tac === TAC_FAILED;
 };
 var useTACGenerator = function useTACGenerator(taf, requestTAC) {
-  var standardTAC = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-
-  var _React$useState = React__default.useState(taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA),
+  var _React$useState = React__default.useState(!taf || taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       TAC = _React$useState2[0],
       setTAC = _React$useState2[1];
@@ -2309,14 +2323,30 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
   var _useIsMounted = useIsMounted(),
       isMounted = _useIsMounted.isMounted;
 
+  var controller = React__default.useRef(null);
+
+  var onSetTac = function onSetTac(newTAC) {
+    if (controller.current) {
+      controller.current.abort();
+    }
+
+    setTAC(newTAC);
+  };
+
   var retrieveTAC = React__default.useCallback(function (tafToPost) {
     if (shouldRetrieveTAC(tafToPost)) {
-      requestTAC(tafToPost).then(function (result) {
+      if (controller.current) {
+        controller.current.abort();
+      }
+
+      controller.current = new AbortController();
+      setTAC(TAC_RETRIEVING_DATA);
+      requestTAC(tafToPost, controller.current.signal).then(function (result) {
         if (isMounted.current) {
           setTAC(result.data);
         }
-      })["catch"](function () {
-        if (isMounted.current) {
+      })["catch"](function (error) {
+        if (isMounted && error.message !== 'canceled') {
           setTAC(TAC_FAILED);
         }
       });
@@ -2325,17 +2355,12 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
     }
   }, [isMounted, requestTAC]);
   React__default.useEffect(function () {
-    if (taf.status !== 'NEW' && !standardTAC) {
+    if (taf && taf.status !== 'NEW') {
       retrieveTAC(taf);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
-  React__default.useEffect(function () {
-    if (standardTAC !== '') {
-      setTAC(standardTAC);
-    }
-  }, [standardTAC]);
-  return [TAC, retrieveTAC];
+  return [TAC, retrieveTAC, onSetTac];
 };
 var useDragOrder = function useDragOrder(trigger, move, onFormBlur) {
   var _React$useState3 = React__default.useState(null),
@@ -2524,9 +2549,14 @@ var prepareTafValues = function prepareTafValues(_taf, tafAction) {
   // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
   // If action is AMEND/DRAFT_AMEND - update validity start time to current time
   var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
+  var formattedBaseForecast = formatFormValues(taf.baseForecast);
+  var baseForecast = Object.assign(Object.assign(Object.assign({}, emptyBaseForecast), formattedBaseForecast), {
+    weather: Object.assign(Object.assign({}, emptyBaseForecast.weather), formattedBaseForecast.weather),
+    cloud: Object.assign(Object.assign({}, emptyBaseForecast.cloud), formattedBaseForecast.cloud)
+  });
   return Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
     messageType: getMessageType(taf, tafAction),
-    baseForecast: formatFormValues(taf.baseForecast)
+    baseForecast: baseForecast
   }), taf.changeGroups && {
     changeGroups: taf.changeGroups.map(formatFormValues)
   }), addEmptyChangeGroup && {
@@ -2913,7 +2943,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       getValues = _useFormContext.getValues,
       trigger = _useFormContext.trigger;
 
-  var _useDraftFormHelpers = useDraftFormHelpers(),
+  var _useDraftFormHelpers = useDraftFormHelpers(true),
       isNotRequiredForAction = _useDraftFormHelpers.isRequired; // cross-field required validation
 
 
@@ -3742,20 +3772,6 @@ var getPaneTitle = function getPaneTitle(sumOfErrors) {
   }
 };
 
-var getErrorDefaultMessage = function getErrorDefaultMessage(error) {
-  switch (error.type) {
-    case 'required':
-      {
-        return 'this field is required';
-      }
-
-    default:
-      {
-        return error.message;
-      }
-  }
-};
-
 var capitalizeWord = function capitalizeWord(_ref) {
   var _ref2 = _toArray(_ref),
       firstLetter = _ref2[0],
@@ -3793,7 +3809,7 @@ var getErrorMessage = function getErrorMessage(error, index) {
       firstNamePart = _name$split2[0];
 
   var fieldErrorTitle = humanizeErrorMessage(firstNamePart);
-  return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(getErrorDefaultMessage(error));
+  return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(error.message);
 };
 var MODAL_DIALOG_ELEMENT = 'modal-dialog';
 var useIssuesPane = function useIssuesPane() {
@@ -3878,12 +3894,19 @@ var TafModuleContext = /*#__PURE__*/React.createContext({
   onValidateForm: null,
   registerValidateForm: null,
   tafAction: null,
-  setTafAction: null
+  setTafAction: null,
+  isFormDirty: null,
+  setIsFormDirty: null
 });
 var useTafModuleContext = function useTafModuleContext() {
   return React.useContext(TafModuleContext);
 };
-var useTafModuleState = function useTafModuleState() {
+var useTafModuleState = function useTafModuleState(_ref) {
+  var onPreventCloseView = _ref.onPreventCloseView;
+
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
   var _React$useState = React.useState(function () {
     return new Promise(function () {
       return true;
@@ -3898,22 +3921,49 @@ var useTafModuleState = function useTafModuleState() {
       tafAction = _React$useState4[0],
       setTafAction = _React$useState4[1];
 
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isFormDirty = _React$useState6[0],
+      setIsFormDirty = _React$useState6[1];
+
+  var _useTACGenerator = useTACGenerator(undefined, api.getTAC),
+      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 3),
+      TAC = _useTACGenerator2[0],
+      updateTAC = _useTACGenerator2[1],
+      setTAC = _useTACGenerator2[2];
+
   var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
     registerValidateForm(function () {
       return promiseToRegister;
     });
   };
 
+  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(_ref) {
-  var children = _ref.children;
-  var contextState = useTafModuleState();
+var TafModuleProvider = function TafModuleProvider(_ref2) {
+  var children = _ref2.children,
+      _ref2$onPreventCloseV = _ref2.onPreventCloseView,
+      onPreventCloseView = _ref2$onPreventCloseV === void 0 ? function () {} : _ref2$onPreventCloseV;
+  var contextState = useTafModuleState({
+    onPreventCloseView: onPreventCloseView
+  });
   return /*#__PURE__*/React.createElement(TafModuleContext.Provider, {
     value: contextState
   }, children);
@@ -3927,10 +3977,6 @@ var TafForm = function TafForm(_ref) {
       onFormAction = _ref$onFormAction === void 0 ? function () {
     return null;
   } : _ref$onFormAction,
-      _ref$onFormDirty = _ref.onFormDirty,
-      onFormDirty = _ref$onFormDirty === void 0 ? function () {
-    return null;
-  } : _ref$onFormDirty,
       _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
       isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
       _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
@@ -3947,17 +3993,18 @@ var TafForm = function TafForm(_ref) {
   var isDefaultDisabled = getIsFormDefaultDisabled(tafFromBackend.taf.status);
   var confirmDialog = useConfirmationDialog();
 
-  var _useDraftFormHelpers = useDraftFormHelpers(),
+  var _useDraftFormHelpers = useDraftFormHelpers(true),
       toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
       DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
 
   var _useTafModuleContext = useTafModuleContext(),
       registerValidateForm = _useTafModuleContext.registerValidateForm,
       tafAction = _useTafModuleContext.tafAction,
-      setTafAction = _useTafModuleContext.setTafAction;
-
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
+      setIsFormDirty = _useTafModuleContext.setIsFormDirty,
+      setTafAction = _useTafModuleContext.setTafAction,
+      TAC = _useTafModuleContext.TAC,
+      updateTAC = _useTafModuleContext.updateTAC,
+      setTAC = _useTafModuleContext.setTAC;
 
   var _useIsMounted = useIsMounted(),
       isMounted = _useIsMounted.isMounted;
@@ -3981,15 +4028,20 @@ var TafForm = function TafForm(_ref) {
       delayedFormValues = _React$useState2[0],
       setDelayedFormValues = _React$useState2[1];
 
-  var _useTACGenerator = useTACGenerator(tafFromBackend.taf, api.getTAC),
-      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
-      TAC = _useTACGenerator2[0],
-      updateTAC = _useTACGenerator2[1];
-
   var hasErrors = Object.keys(errors).length;
 
   var onFormBlur = function onFormBlur() {
-    setDelayedFormValues(getValues());
+    if (!isEqual(getValues(), delayedFormValues)) {
+      setDelayedFormValues(getValues());
+    }
+  };
+
+  var resetTAC = function resetTAC() {
+    if (originalTaf.status !== 'NEW') {
+      updateTAC(originalTaf);
+    } else {
+      setTAC(TAC_NOT_AVAILABLE);
+    }
   };
 
   React__default.useEffect(function () {
@@ -4008,8 +4060,8 @@ var TafForm = function TafForm(_ref) {
   }, [hasErrors]); // Needed to be able to show a confirmation dialog on switching tabs when form is edited and not saved
 
   React__default.useEffect(function () {
-    onFormDirty(isFormDirty);
-  }, [isFormDirty, onFormDirty]);
+    setIsFormDirty(isFormDirty);
+  }, [isFormDirty, setIsFormDirty]);
 
   var onSubmit = function onSubmit(data) {
     // eslint-disable-next-line no-console
@@ -4058,6 +4110,7 @@ var TafForm = function TafForm(_ref) {
         if (isFormDirty) {
           showConfirmDialog(action).then(function () {
             resetForm(undefined, isDefaultDisabled);
+            resetTAC();
           });
         } else {
           resetForm(undefined, isDefaultDisabled);
@@ -4234,10 +4287,16 @@ var TafForm = function TafForm(_ref) {
     registerValidateForm(onValidateFormPromise); // set default taf action
 
     setTafAction(fromStatusToAction(originalTaf.status));
+    resetTAC();
     return function () {
       reset({});
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  React__default.useEffect(function () {
+    var newValues = prepareTafValues(tafFromBackend.taf, undefined, !isDefaultDisabled && !tafFromBackend.taf.changeGroups); // set new form values when tafFromBackend changed
+
+    reset(newValues); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tafFromBackend]);
   React__default.useEffect(function () {
     if (shouldValidate && !isDisabled) {
       // trigger validation on all changegroup validity times after initial load since they could be outside the new validity period
@@ -4523,21 +4582,6 @@ var muiTabA11yProps = function muiTabA11yProps(index) {
     'aria-controls': "simple-tabpanel-".concat(index)
   };
 };
-var emptyBaseForecast = {
-  wind: '',
-  visibility: '',
-  weather: {
-    weather1: '',
-    weather2: '',
-    weather3: ''
-  },
-  cloud: {
-    cloud1: '',
-    cloud2: '',
-    cloud3: '',
-    cloud4: ''
-  }
-};
 var prepareTafExportValues = function prepareTafExportValues(tafToCopy, currentTaf) {
   var _a;
 
@@ -4546,7 +4590,7 @@ var prepareTafExportValues = function prepareTafExportValues(tafToCopy, currentT
       _convertedCopy$change = convertedCopy.changeGroups,
       changeGroups = _convertedCopy$change === void 0 ? [] : _convertedCopy$change;
   return Object.assign(Object.assign({}, currentTaf), {
-    baseForecast: Object.assign(Object.assign(Object.assign({}, emptyBaseForecast), baseForecast), {
+    baseForecast: Object.assign(Object.assign({}, baseForecast), {
       valid: (_a = currentTaf === null || currentTaf === void 0 ? void 0 : currentTaf.baseForecast) === null || _a === void 0 ? void 0 : _a.valid
     }),
     changeGroups: changeGroups
@@ -4700,6 +4744,9 @@ var TacContainer = function TacContainer(_ref) {
       trigger = _useFormContext.trigger,
       setValue = _useFormContext.setValue;
 
+  var _useTafModuleContext = useTafModuleContext(),
+      updateTAC = _useTafModuleContext.updateTAC;
+
   var handleExport = function handleExport() {
     var currentTaf = getValues();
     var newTaf = prepareTafExportValues(taf, currentTaf);
@@ -4712,6 +4759,7 @@ var TacContainer = function TacContainer(_ref) {
     setTimeout(function () {
       trigger(); // trigger all fields validation
     }, 0);
+    updateTAC(convertTafValuesToObject(newTaf));
   };
 
   React__default.useEffect(function () {
@@ -5186,7 +5234,7 @@ var parseErrorMessage = function parseErrorMessage(error, params) {
   } : {
     type: 'SERVER',
     title: 'An error has occurred while saving, please try again',
-    message: getAxiosErrorMessage(error)
+    message: isAxiosError(error) ? getAxiosErrorMessage(error) : error.message
   };
 };
 
@@ -5214,47 +5262,48 @@ var usePostTafRequest = function usePostTafRequest(request) {
           switch (_context.prev = _context.next) {
             case 0:
               setLoading(true);
-              _context.prev = 1;
-              _context.next = 4;
+              setError(null);
+              _context.prev = 2;
+              _context.next = 5;
               return request(params);
 
-            case 4:
+            case 5:
               if (isMounted.current) {
-                _context.next = 6;
+                _context.next = 7;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 6:
+            case 7:
               setLoading(false);
               setError(null);
-              _context.next = 18;
+              _context.next = 19;
               break;
 
-            case 10:
-              _context.prev = 10;
-              _context.t0 = _context["catch"](1);
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](2);
 
               if (isMounted.current) {
-                _context.next = 14;
+                _context.next = 15;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 14:
+            case 15:
               newErrorr = errorParser ? errorParser(_context.t0, params) : _context.t0;
               setLoading(false);
               setError(newErrorr);
               throw newErrorr;
 
-            case 18:
+            case 19:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[1, 10]]);
+      }, _callee, null, [[2, 11]]);
     }));
   };
 
@@ -5276,10 +5325,6 @@ var TafPanel = function TafPanel(_ref) {
       postTaf = _ref$postTaf === void 0 ? function () {
     return null;
   } : _ref$postTaf,
-      _ref$onFormDirty = _ref.onFormDirty,
-      onFormDirty = _ref$onFormDirty === void 0 ? function () {
-    return null;
-  } : _ref$onFormDirty,
       _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
       isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
       _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
@@ -5353,16 +5398,21 @@ var TafPanel = function TafPanel(_ref) {
     severity: "error",
     title: error.title,
     info: error.message,
-    dataTestId: "taf-error"
-  }), /*#__PURE__*/React__default.createElement(TafForm, {
+    dataTestId: "taf-error",
+    shouldClose: true
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      marginTop: '10px',
+      padding: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(TafForm, {
     tafFromBackend: tafFromBackend,
     onFormAction: onTafAction,
-    onFormDirty: onFormDirty,
     isIssuesPaneOpen: isIssuesPaneOpen,
     setIsIssuesPaneOpen: setIsIssuesPaneOpen,
     isDisabled: isFormDisabled,
     setIsDisabled: setIsFormDisabled
-  }));
+  })));
 };
 
 /* *
@@ -5423,7 +5473,8 @@ var TafLayout = function TafLayout(_ref) {
 
   var _useTafModuleContext = useTafModuleContext(),
       onValidateForm = _useTafModuleContext.onValidateForm,
-      tafAction = _useTafModuleContext.tafAction;
+      tafAction = _useTafModuleContext.tafAction,
+      isFormDirty = _useTafModuleContext.isFormDirty;
 
   var _React$useState = React__default.useState(sortTafTimeSlots(tafList)),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -5454,13 +5505,8 @@ var TafLayout = function TafLayout(_ref) {
 
   var _React$useState9 = React__default.useState(false),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      isFormDirty = _React$useState10[0],
-      setIsFormDirty = _React$useState10[1];
-
-  var _React$useState11 = React__default.useState(false),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      isFormDisabled = _React$useState12[0],
-      setIsFormDisabled = _React$useState12[1];
+      isFormDisabled = _React$useState10[0],
+      setIsFormDisabled = _React$useState10[1];
 
   var postTaf = function postTaf(data) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
@@ -5518,16 +5564,18 @@ var TafLayout = function TafLayout(_ref) {
               _context2.t0 = _context2["catch"](1);
               confirmDialog(CONFIRM_DIALOG_OPTIONS).then(function () {
                 action(value);
+                setError(null);
               });
 
             case 13:
-              _context2.next = 16;
+              _context2.next = 17;
               break;
 
             case 15:
               action(value);
+              setError(null);
 
-            case 16:
+            case 17:
             case "end":
               return _context2.stop();
           }
@@ -5557,7 +5605,9 @@ var TafLayout = function TafLayout(_ref) {
     setLocations(updatedLocations); // update active index
 
     var newActiveIndex = updatedLocations.findIndex(function (location) {
-      return location.taf.previousId === locations[activeTafIndex].taf.uuid;
+      var _a, _b, _c;
+
+      return ((_a = location === null || location === void 0 ? void 0 : location.taf) === null || _a === void 0 ? void 0 : _a.previousId) === ((_c = (_b = locations[activeTafIndex]) === null || _b === void 0 ? void 0 : _b.taf) === null || _c === void 0 ? void 0 : _c.uuid);
     });
     var newIndex = newActiveIndex !== -1 ? newActiveIndex : activeTafIndex;
     setActiveTafIndex(newIndex); // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -5646,10 +5696,9 @@ var TafLayout = function TafLayout(_ref) {
   }, /*#__PURE__*/React__default.createElement(Card, {
     variant: "outlined",
     sx: {
-      padding: 1,
-      paddingTop: 0,
       marginBottom: '12px',
-      position: 'relative'
+      position: 'relative',
+      minHeight: locations.length * 62 + 32
     }
   }, /*#__PURE__*/React__default.createElement(TacOverviewMobile, {
     upcomingTafs: upcoming,
@@ -5662,7 +5711,6 @@ var TafLayout = function TafLayout(_ref) {
       activeTafIndex: activeTafIndex,
       index: index,
       tafFromBackend: tafFromBackend,
-      onFormDirty: setIsFormDirty,
       isIssuesPaneOpen: isIssuesPaneOpen,
       setIsIssuesPaneOpen: onToggleIssuesPane,
       isFormDisabled: isFormDisabled,
@@ -5673,13 +5721,15 @@ var TafLayout = function TafLayout(_ref) {
     });
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3,
-    sx: {
-      height: '100%'
+    xs: 0,
+    sm: 3,
+    height: {
+      xs: 0,
+      sm: '100%'
     },
-    display: {
-      xs: 'none',
-      sm: 'block'
+    width: {
+      xs: 0,
+      sm: '100%'
     }
   }, /*#__PURE__*/React__default.createElement(TacOverview, {
     upcomingTafs: upcoming,
@@ -5694,6 +5744,19 @@ var TafLayout = function TafLayout(_ref) {
   }));
 };
 
+var TafWrapper = function TafWrapper(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return /*#__PURE__*/React.createElement(TafModuleProvider, Object.assign({}, props), /*#__PURE__*/React.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React.createElement(ReactHookFormProvider, {
+    options: {
+      mode: 'onTouched',
+      reValidateMode: 'onChange',
+      criteriaMode: 'all'
+    }
+  }, children)));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -5711,29 +5774,13 @@ var TafLayout = function TafLayout(_ref) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
-var TafWrapper = function TafWrapper(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(TafModuleProvider, null, /*#__PURE__*/React.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React.createElement(ReactHookFormProvider, {
-    options: {
-      mode: 'onTouched',
-      reValidateMode: 'onChange',
-      criteriaMode: 'all'
-    }
-  }, children)));
-};
-
 var TafModule = function TafModule() {
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isLoading = _React$useState2[0],
-      setLoading = _React$useState2[1];
-
   var _useApi = useApi(api.getTafList),
       getTafListError = _useApi.error,
-      isFetchingInitial = _useApi.isLoading,
+      isLoading = _useApi.isLoading,
       tafList = _useApi.result,
       fetchNewTafList = _useApi.fetchApiData;
 
@@ -5741,45 +5788,11 @@ var TafModule = function TafModule() {
     return fetchNewTafList({});
   });
 
-  var reFetchNewTafList = function reFetchNewTafList() {
-    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              setLoading(true);
-              _context.next = 4;
-              return fetchNewTafList({});
-
-            case 4:
-              setLoading(false);
-              _context.next = 10;
-              break;
-
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](0);
-              setLoading(false);
-
-            case 10:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 7]]);
-    }));
+  var onPostTaf = function onPostTaf() {
+    fetchNewTafList({});
   };
 
   var hasTafListError = getTafListError !== null;
-
-  if (isFetchingInitial) {
-    return /*#__PURE__*/React.createElement(LinearProgress, {
-      color: "secondary",
-      "data-testid": "loading-bar"
-    });
-  }
-
   return /*#__PURE__*/React.createElement(Box, {
     component: "div",
     id: "tafmodule",
@@ -5795,33 +5808,22 @@ var TafModule = function TafModule() {
   }), hasTafListError && /*#__PURE__*/React.createElement(AlertBanner, {
     severity: "error",
     title: "An error has occurred while retrieving the list",
-    info: getTafListError.message
+    info: getTafListError.message,
+    dataTestId: "taf-list-error",
+    actionButtonProps: {
+      title: 'Try again',
+      onClick: fetchNewTafList
+    }
   }), /*#__PURE__*/React.createElement(TafLayout, {
     tafList: tafList,
-    onPostTaf: reFetchNewTafList
+    onPostTaf: onPostTaf
   }));
 };
 
-var Wrapper = function Wrapper() {
-  return /*#__PURE__*/React.createElement(TafWrapper, null, /*#__PURE__*/React.createElement(TafModule, null));
+var Wrapper = function Wrapper(props) {
+  return /*#__PURE__*/React.createElement(TafWrapper, Object.assign({}, props), /*#__PURE__*/React.createElement(TafModule, null));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
 var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
   var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
   return {
@@ -5832,8 +5834,10 @@ var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, a
     postTaf: function postTaf(formData) {
       return axiosInstance.post('/taf', Object.assign({}, formData));
     },
-    getTAC: function getTAC(tafData) {
-      return axiosInstance.post('/taf2tac', Object.assign({}, tafData));
+    getTAC: function getTAC(tafData, signal) {
+      return axiosInstance.post.apply(axiosInstance, ['/taf2tac'].concat([Object.assign({}, tafData)].concat(_toConsumableArray(signal ? [{
+        signal: signal
+      }] : []))));
     }
   };
 };
@@ -6757,12 +6761,17 @@ var fakeAmendmentTaf = {
 var fakeTafTac = 'TAF EHAM 0812/0918 20020G35KT 0500 SN BKN040\nBECMG 0814/0816 0700 BKN001=';
 
 var fakePromise = function fakePromise(withRandomError) {
+  var signal = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return new Promise(function (resolve, reject) {
-    setTimeout(function () {
+    var timer = setTimeout(function () {
       if (!withRandomError) return resolve();
       var randomError = Math.floor(Math.random() * 4) + 1;
       return randomError === 4 ? reject(new Error('something went wrong')) : resolve();
     }, 300);
+    signal === null || signal === void 0 ? void 0 : signal.signal.addEventListener('abort', function () {
+      clearTimeout(timer);
+      reject(new Error('canceled'));
+    });
   });
 };
 
@@ -6772,8 +6781,8 @@ var fakeAxiosInstance = {
     return fakePromise(false);
   },
   // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
-  post: function post(_url, _params) {
-    return fakePromise(false);
+  post: function post(_url, _params, _signal) {
+    return fakePromise(false, _signal);
   }
 };
 var createApi = function createApi() {
@@ -6787,22 +6796,104 @@ var createApi = function createApi() {
         };
       });
     },
-    getTAC: function getTAC() {
-      // eslint-disable-next-line no-console
-      return fakeAxiosInstance.post('/taf2tac').then(function () {
-        return {
-          data: fakeTafTac
-        };
-      });
-    },
     postTaf: function postTaf(_postTaf) {
       // eslint-disable-next-line no-console
       console.log("The new status of the taf will be ".concat(_postTaf.changeStatusTo)); // eslint-disable-next-line no-console
 
       console.log('form has been posted with following values:', _postTaf.taf);
       return fakeAxiosInstance.post('/taf', _postTaf);
+    },
+    getTAC: function getTAC(tafData, signal) {
+      return fakeAxiosInstance.post.apply(fakeAxiosInstance, ['/taf2tac'].concat([Object.assign({}, tafData)].concat(_toConsumableArray(signal ? [{
+        signal: signal
+      }] : [])))).then(function () {
+        return {
+          data: fakeTafTac
+        };
+      });
     }
   };
 };
 
-export { TafForm, Wrapper as TafModule, createApi$1 as createApi, createApi as createFakeApi };
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var tafScreenPreset = {
+  id: 'screenConfigTaf',
+  title: 'TAF',
+  views: {
+    byId: {
+      taf: {
+        title: 'TAF',
+        componentType: 'TafModule',
+        initialProps: {}
+      }
+    },
+    allIds: ['taf']
+  },
+  syncGroups: [],
+  mosaicNode: 'taf'
+};
+var TafApiWrapper = function TafApiWrapper(_ref) {
+  var config = _ref.config,
+      auth = _ref.auth,
+      onSetAuth = _ref.onSetAuth,
+      onPreventCloseView = _ref.onPreventCloseView;
+  return config ? /*#__PURE__*/React.createElement(ApiProvider, {
+    baseURL: config.baseUrl,
+    appURL: config.appUrl,
+    auth: auth,
+    onSetAuth: onSetAuth,
+    createApi: createApi$1,
+    authTokenUrl: config.authTokenUrl,
+    authClientId: config.authClientId
+  }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(Wrapper, {
+    onPreventCloseView: onPreventCloseView
+  }))) : null;
+};
+var componentsLookUp = function componentsLookUp(payload, _ref2) {
+  var config = _ref2.config,
+      auth = _ref2.auth,
+      onSetAuth = _ref2.onSetAuth;
+  var ConnectedModuleWrapper = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var componentType = payload.componentType;
+
+  switch (componentType) {
+    case 'TafModule':
+      if (ConnectedModuleWrapper) {
+        return /*#__PURE__*/React.createElement(ConnectedModuleWrapper, {
+          component: TafApiWrapper,
+          payload: payload,
+          "data-testid": "tafmodule",
+          config: config,
+          auth: auth,
+          onSetAuth: onSetAuth
+        });
+      }
+
+      return /*#__PURE__*/React.createElement(TafApiWrapper, {
+        "data-testid": "tafmodule",
+        config: config,
+        auth: auth,
+        onSetAuth: onSetAuth
+      });
+
+    default:
+      return null;
+  }
+};
+
+export { TafApiWrapper, TafForm, Wrapper as TafModule, componentsLookUp, createApi$1 as createApi, createApi as createFakeApi, tafScreenPreset };