npm - @opengeoweb/taf - Versions diffs - 2.4.0 → 2.6.0 - Mend

@opengeoweb/taf 2.4.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/index.esm.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import React__default from 'react';
-import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
-import { TextField, SvgIcon, Grid, Box, Button, IconButton, Typography, Tooltip, Chip, useTheme, Card, Tabs, Tab, Dialog, MenuList, MenuItem, Backdrop, CircularProgress } from '@mui/material';
+import { TextField, SvgIcon, Grid, Box, Button, IconButton, Tooltip, Chip, Typography, createSvgIcon, Card, Tabs, Tab, Dialog, MenuList, MenuItem, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { ReactSortable, Sortable } from 'react-sortablejs';
-import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
-import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
+import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
+import { useApiContext, useApi, createApiInstance, ApiProvider } from '@opengeoweb/api';
+import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, getAxiosErrorMessage, AlertBanner, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
 import moment from 'moment';
 import { isEqual } from 'lodash';
 import makeStyles from '@mui/styles/makeStyles';
@@ -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';
 };
@@ -2216,8 +2232,9 @@ var convertTafValuesToObject = function convertTafValuesToObject(formData) {
   .filter(function (value) {
     return Object.keys(value).length;
   });
+  var parsedBaseForecast = productToPost.baseForecast && parseFormValues(productToPost.baseForecast, tafStart, tafEnd);
   var parsedFormValues = Object.assign(Object.assign({}, productToPost), {
-    baseForecast: parseFormValues(productToPost.baseForecast, tafStart, tafEnd),
+    baseForecast: parsedBaseForecast,
     changeGroups: parsedChangeGroups
   });
   return Object.keys(parsedFormValues).reduce(function (list, key) {
@@ -2293,9 +2310,11 @@ var getFieldNames = function getFieldNames(isChangeGroup, index) {
 var TAC_MISSING_DATA = 'Missing data: no TAC can be generated';
 var TAC_NOT_AVAILABLE = 'No TAC available';
 var TAC_RETRIEVING_DATA = 'Retrieving TAC';
+var TAC_FAILED = 'Failed to retrieve TAC';
+var tacHasError = function tacHasError(tac) {
+  return tac === TAC_MISSING_DATA || tac === TAC_NOT_AVAILABLE || tac === TAC_RETRIEVING_DATA || tac === TAC_FAILED;
+};
 var useTACGenerator = function useTACGenerator(taf, requestTAC) {
-  var standardTAC = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   var _React$useState = React__default.useState(taf.status === 'NEW' ? TAC_NOT_AVAILABLE : TAC_RETRIEVING_DATA),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       TAC = _React$useState2[0],
@@ -2304,7 +2323,7 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
   var _useIsMounted = useIsMounted(),
       isMounted = _useIsMounted.isMounted;
-  var retrieveTAC = function retrieveTAC(tafToPost) {
+  var retrieveTAC = React__default.useCallback(function (tafToPost) {
     if (shouldRetrieveTAC(tafToPost)) {
       requestTAC(tafToPost).then(function (result) {
         if (isMounted.current) {
@@ -2312,25 +2331,19 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
         }
       })["catch"](function () {
         if (isMounted.current) {
-          setTAC('Failed to retrieve TAC');
+          setTAC(TAC_FAILED);
         }
       });
     } else {
       setTAC(TAC_MISSING_DATA);
     }
-  };
+  }, [isMounted, requestTAC]);
   React__default.useEffect(function () {
-    if (taf.status !== 'NEW' && !standardTAC) {
+    if (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];
 };
 var useDragOrder = function useDragOrder(trigger, move, onFormBlur) {
@@ -2482,6 +2495,10 @@ var getMessageType = function getMessageType(taf, tafAction) {
     return 'AMD';
   }
+  if (tafAction === 'CANCEL') {
+    return 'CNL';
+  }
   return taf.messageType;
 }; // For corrections and amendment we need to add the previousValidStart and End for the TAC converter
@@ -2518,13 +2535,43 @@ var prepareTafValues = function prepareTafValues(_taf, tafAction) {
   var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
   return Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
     messageType: getMessageType(taf, tafAction),
-    baseForecast: formatFormValues(taf.baseForecast)
+    baseForecast: Object.assign(Object.assign({}, emptyBaseForecast), formatFormValues(taf.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 {
@@ -2875,7 +2922,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
@@ -3309,6 +3356,36 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
+var tafActionToDraftAction = function tafActionToDraftAction(tafAction) {
+  switch (tafAction) {
+    case 'AMEND':
+    case 'DRAFT_AMEND':
+      return 'DRAFT_AMEND';
+    case 'CORRECT':
+    case 'DRAFT_CORRECT':
+      return 'DRAFT_CORRECT';
+    default:
+      return 'DRAFT';
+  }
+};
+var tafActionToPublishAction = function tafActionToPublishAction(tafAction) {
+  switch (tafAction) {
+    case 'AMEND':
+    case 'DRAFT_AMEND':
+      return 'AMEND';
+    case 'CORRECT':
+    case 'DRAFT_CORRECT':
+      return 'CORRECT';
+    default:
+      return 'PUBLISH';
+  }
+};
 var buttonsStyle = {
   button: {
     minWidth: {
@@ -3338,7 +3415,7 @@ var ViewModeButtons = function ViewModeButtons(_ref) {
       return onTafViewModeButtonPress('CANCEL');
     }
   }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "correctaf",
+    "data-testid": "correcttaf",
     variant: "tertiary",
     onClick: function onClick() {
       return onTafViewModeButtonPress('CORRECT');
@@ -3392,21 +3469,7 @@ var TafFormButtons = function TafFormButtons(_ref2) {
       if action DRAFT_AMEND - new status will be DRAFT_AMENDED
       if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
       */
-      switch (tafAction) {
-        case 'AMEND':
-        case 'DRAFT_AMEND':
-          onTafEditModeButtonPress('DRAFT_AMEND');
-          break;
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          onTafEditModeButtonPress('DRAFT_CORRECT');
-          break;
-        default:
-          onTafEditModeButtonPress('DRAFT');
-          break;
-      }
+      onTafEditModeButtonPress(tafActionToDraftAction(tafAction));
     }
   }, "Save"), /*#__PURE__*/React__default.createElement(Button, {
     "data-testid": "publishtaf",
@@ -3419,21 +3482,7 @@ var TafFormButtons = function TafFormButtons(_ref2) {
       if action DRAFT_AMEND - new status will be AMENDED
       if action DRAFT_CORRECT - new status will be CORRECTED
       */
-      switch (tafAction) {
-        case 'AMEND':
-        case 'DRAFT_AMEND':
-          onTafEditModeButtonPress('AMEND');
-          break;
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          onTafEditModeButtonPress('CORRECT');
-          break;
-        default:
-          onTafEditModeButtonPress('PUBLISH');
-          break;
-      }
+      onTafEditModeButtonPress(tafActionToPublishAction(tafAction));
     }
   }, "Publish"))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -3500,145 +3549,9 @@ var DragHandle = function DragHandle(_ref) {
  * 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)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var ThumbsUp = function ThumbsUp(props) {
-  return /*#__PURE__*/React__default.createElement(SvgIcon, Object.assign({
-    fontSize: "inherit",
-    viewBox: "0 0 58 69"
-  }, props), /*#__PURE__*/React__default.createElement("title", null, "Thumbs up"), /*#__PURE__*/React__default.createElement("g", {
-    id: "Thumbs-up",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M3.99883665,31.7843145 C7.41834232,30.0745617 7.39773108,30.3805485 10.9988366,28.8843145 C14.5999422,27.3880805 16.06167,27.0500418 18.1988366,25.8843145 C19.0904815,25.3979628 19.820202,24.8243341 20.5488366,24.1634286 C20.9845024,23.7682595 22.8819728,21.7794437 23.5488366,20.8277879 C24.2586546,19.8148341 25.1756722,18.5003429 25.9988366,16.8843145 C28.3936103,12.1829184 28.889513,9.4076237 29.8988366,6.88431453 C30.4506375,5.50481234 31.0206747,4.13576029 31.6089482,2.77715837 C31.8562473,2.20602771 32.1648239,1.47549588 32.9988366,0.88431453 C33.2365758,0.715795602 34.0556054,0.253858312 35.0144255,0.0843145301 C36.0262338,-0.0945989315 37.1937102,0.0296108539 37.9980376,0.28431453 C38.7449403,0.520833719 39.4692925,0.860990256 40.1710941,1.30478414 C40.2879689,1.37869154 41.2393256,2.13799569 41.8988366,3.58269657 C42.290748,4.4412034 42.5040976,4.92788584 42.7988366,6.88431453 C42.9953293,8.18860032 43.0453293,9.52193365 42.9488366,10.8843145 C42.947848,11.8251839 42.6645146,13.1585172 42.0988366,14.8843145 C41.9160014,15.4421169 41.6403041,16.2990156 41.2988366,17.1941099 C40.9325633,18.1542284 40.4965053,19.1582935 40.1988366,19.8843145 C39.1594737,22.4193462 37.7498356,25.6900566 37.4561402,26.5124038 C37.2603433,27.0606352 37.1745754,27.6512721 37.1988366,28.2843145 C37.21217,28.4109812 37.2455033,28.5187344 37.2988366,28.6075742 C37.35217,28.6964139 37.45217,28.821994 37.5988366,28.9843145 C38.7401033,28.7100145 39.6802034,28.5266812 40.4191367,28.4343145 C41.6262088,28.2834305 44.7342553,28.0975232 47.4943878,28.1962584 C50.2545202,28.2949937 51.7465936,28.4428269 52.9988366,28.8843145 C53.8336653,29.1786396 54.540332,29.8453063 55.1188366,30.8843145 C55.3507184,31.5616882 55.477385,32.2303996 55.4988366,32.8904489 C55.5202882,33.5504981 55.4369549,34.21512 55.2488366,34.8843145 C54.956044,35.585751 54.5393773,36.1190843 53.9988366,36.4843145 C53.4582959,36.8495447 52.6416293,37.1495447 51.5488366,37.3843145 C51.46217,37.6709812 51.4455033,37.9376479 51.4988366,38.1843145 C51.55217,38.4309812 51.7188366,38.5976479 51.9988366,38.6843145 C53.0027645,38.7154727 53.6750204,38.7821393 54.0156044,38.8843145 C54.7031375,39.0905745 55.3642149,39.4239078 55.9988366,39.8843145 C56.4980387,40.3674862 56.831372,40.7202741 56.9988366,40.9426784 C57.2459451,41.2708552 57.8988366,42.3863253 57.8988366,43.8843145 C57.8988366,44.882974 57.53217,45.882974 56.7988366,46.8843145 C56.4100652,47.2645006 55.9767318,47.5818962 55.4988366,47.8365013 C55.0209415,48.0911064 54.5157721,48.2737108 53.9833285,48.3843145 L52.6988366,48.3843145 C52.2988366,48.6576479 52.0988366,48.9643145 52.0988366,49.3043145 C52.0988366,49.6443145 52.1655033,49.9376479 52.2988366,50.1843145 L53.4440689,50.6343145 C54.0486381,50.9097065 54.566894,51.3263732 54.9988366,51.8843145 C55.2403033,52.1962176 55.7126861,53.1830494 55.7488366,53.8843145 C55.7849872,54.5855797 55.7892838,54.8412841 55.675362,55.3021772 C55.5409724,55.8458769 55.3321306,56.373256 54.9488366,56.8843145 C54.6880408,57.2320423 54.3421972,57.542124 54.0113058,57.8145598 C53.720974,58.0536013 53.0623839,58.3923099 52.0355354,58.6843145 C51.8426264,58.739172 51.4970601,58.8058387 50.9988366,58.8843145 L49.2488366,58.9843145 C48.96217,59.1509812 48.7955033,59.3509812 48.7488366,59.5843145 C48.70217,59.8176479 48.7855033,60.0643145 48.9988366,60.3243145 L50.0168579,60.6843145 C51.0110333,61.2176479 51.5216929,61.9496429 51.5488366,62.8802998 C51.5895523,64.276285 51.475285,65.4556464 50.0016466,66.7843145 C49.4876586,67.2477386 48.8545536,67.4912052 48.1023318,67.7343145 C47.6452927,67.8820242 46.8607943,68.0486909 45.7488366,68.2343145 L40.0010327,68.6843145 C38.1462353,68.7443145 36.81217,68.7776479 35.9988366,68.7843145 C34.7788366,68.7943145 28.6377735,68.7414839 25.3910307,68.5132824 C22.1442879,68.2850808 21.4236621,68.1168902 18.9258088,67.5843145 C16.4279556,67.0517389 16.0894589,66.9976619 13.9988366,66.0843145 C12.6050885,65.4754163 11.2717551,64.6754163 9.99883665,63.6843145 L5.99912679,59.8445931 C5.6005732,59.505994 5.13964906,59.1744645 4.61635438,58.8500046 C3.83141237,58.3633147 3.44878136,58.2942773 2.99883665,57.9843145 C2.44718062,57.6042838 2.05635486,57.1737105 1.71932092,56.7662516 C1.30382099,56.2639309 0.723401214,54.7703696 0.498836646,53.8721113 C0.239479861,52.8346842 0.182966814,51.4491222 0.134208514,50.425802 C0.00166588165,47.644049 0.0975252306,47.2982714 0.0687602378,44.8458357 C0.0452570713,42.8420109 -0.0277106081,40.4082829 0.0112302522,39.9409643 C0.224109489,37.3862585 0.450803729,36.3915418 0.898836646,34.8843145 C1.09883665,34.2114947 1.78104521,33.1945675 2.17275045,32.889441 C2.5644557,32.5843145 3.13875358,32.2143561 3.99883665,31.7843145 Z",
-    id: "Path-2",
-    fill: "#FFBF00"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M37.1988366,28.2843145 C36.6491114,28.3570112 36.2566531,28.4236779 36.0214618,28.4843145 C35.0603746,28.7321005 34.3937143,29.0314706 34.021481,29.207818 C33.777778,29.3232735 32.5285093,30.04554 31.6988366,30.8956082 C31.0356177,31.5751308 30.7670551,32.3363186 30.5620165,32.9344937 C29.9561734,34.7019667 30.4904911,36.5989836 30.5988366,36.8981554 C30.8174274,37.5017447 31.0945063,37.9694877 31.2988366,38.4843145 C31.4064264,38.7553957 31.4498365,39.7521385 31.3985954,40.9130014 C31.388536,41.1408948 31.3995111,42.8738523 30.5816296,45.1307691 C30.125032,46.3907349 29.4940749,47.743868 28.6988366,48.906031 C27.6082165,50.4998658 26.3589437,51.7345157 26.1988366,51.8770596 C25.2520649,52.7199732 23.8988366,53.516454 23.3777374,54.1031009 C22.8566381,54.6897478 22.8988366,54.7174426 22.8988366,54.8843145 C22.8988366,55.0643438 22.9342857,55.2139882 23.0063234,55.32641 C23.2544011,55.7135594 23.9363916,55.6592779 25.0988366,54.8843145 C25.8683088,54.3713331 26.8213311,53.5952018 27.5988366,52.8259025 C28.3369913,52.0955388 28.9092218,51.3713331 29.2988366,50.8843145 C29.6096134,50.4958436 30.1890589,49.8244169 30.7488366,48.8700346 C31.0160857,48.4143934 31.4327524,47.5858201 31.9988366,46.3843145 C31.9988366,46.7176479 32.33217,47.2176479 32.9988366,47.8843145 C33.1686748,48.0541527 33.5020081,48.3041527 33.9988366,48.6343145 C33.535822,48.6343145 33.2024887,48.6676479 32.9988366,48.7343145 C31.9774176,49.1343145 31.4345654,49.3440777 30.8488366,49.8843145 C30.1709576,50.5095446 29.6310297,51.1756019 29.3988366,52.3843145 C29.1722814,53.5636787 29.3142136,54.632966 29.6488366,55.5921767 C29.928312,56.3933044 30.3156141,57.1176481 30.9865396,57.7652076 C31.1856402,57.9573742 31.5230725,58.2304098 31.9988366,58.5843145 C30.2988366,59.4509812 29.4488366,60.8843145 29.4488366,62.8843145 C29.4488366,65.8843145 31.4988366,68.7843145 35.9988366,68.7843145 C37.2162866,68.7843145 38.5382158,68.7607397 39.9988366,68.6843145 C41.1579568,68.623665 43.0746234,68.473665 45.7488366,68.2343145 C42.81999,68.0652276 40.9033233,67.948561 39.9988366,67.8843145 C38.4397862,67.7735739 34.9576244,67.4218793 34.5109642,67.2843145 C33.8898949,67.0930342 33.3876529,66.66767 32.9988366,66.3843145 C31.7988366,65.509797 31.6488366,63.8668327 31.6488366,63.3843145 C31.6488366,62.6767971 32.115551,61.4820497 32.7124803,60.9291427 C33.2967248,60.387985 34.101504,59.9827037 34.9988366,59.8343145 C36.8129843,59.5343145 37.8279851,59.6343145 38.9968712,59.6343145 C41.8836014,59.6343145 46.4559662,59.9063364 47.0327603,59.9503801 C47.6352731,59.9963876 48.2906319,60.1194654 48.9988366,60.3196132 C48.7881139,60.0647262 48.7047806,59.8196266 48.7488366,59.5843145 C48.7928927,59.3490025 48.9595594,59.1490025 49.2488366,58.9843145 C41.7042463,58.5910176 37.2875796,58.2576842 35.9988366,57.9843145 C34.0657222,57.57426 33.0783849,56.5232188 32.4988366,55.3843145 C32.1808463,54.7594131 31.9988366,54.0680377 32.1988366,52.8843145 C32.4054546,51.661422 33.0758788,51.154421 33.9988366,50.7343145 C35.0343809,50.2629616 36.2160776,50.213626 38.0168693,50.1343145 C41.4226671,49.9843145 41.9988366,49.8715355 44.9988366,49.8843145 C47.4322993,49.8928339 49.8656327,49.9928339 52.2988366,50.1843145 C52.1655033,49.9452767 52.0988366,49.6535253 52.0988366,49.3090604 C52.0988366,48.9645954 52.2988366,48.6563468 52.6988366,48.3843145 C49.4970675,48.4374708 47.2644784,48.4840975 46.0010696,48.5241946 C42.8267531,48.6249387 40.1650305,48.7843145 38.0159019,48.6090596 C36.5073153,48.3843145 35.5349602,47.7454709 35.0988366,47.3586886 C33.5267511,45.9644623 33.6909724,44.1458838 33.6988366,43.902953 C33.7490538,42.3517256 34.2594453,41.6540102 34.9988366,41.2843145 C36.9988366,40.2843145 38.521019,40.3843145 40.9988366,39.8843145 L51.9988366,38.6843145 C51.7847588,38.5992008 51.6347588,38.4325341 51.5488366,38.1843145 C51.4629145,37.9360949 51.4629145,37.6694283 51.5488366,37.3843145 C48.6830402,37.6590904 46.693269,37.8590904 45.579523,37.9843145 C44.2653604,38.1320725 42.7384649,38.3154059 40.9988366,38.5343145 C38.9988366,38.6009812 37.6749072,38.5733169 37.0270482,38.4513217 C35.0988366,38.2216852 33.4888366,37.4843145 33.4388366,34.8545872 C33.3888366,32.7744565 33.7430954,32.2207578 33.8988366,31.9295788 C34.3117653,31.1575537 34.9128559,30.575799 35.3988366,30.1843145 C36.0681111,29.6451768 36.8014444,29.2451768 37.5988366,28.9843145 C37.4503711,28.8228789 37.3503711,28.6970685 37.2988366,28.6068833 C37.2473022,28.516698 37.2139689,28.4091751 37.1988366,28.2843145 Z",
-    id: "Path",
-    fill: "#F28700"
-  })));
-};
-var getPaneTitle = function getPaneTitle(sumOfErrors) {
-  switch (sumOfErrors) {
-    case 0:
-      return 'Looks good';
-    case 1:
-      return 'There is an issue to address';
-    default:
-      return 'There are a few issues to address';
-  }
-};
-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],
-      restOfWord = _ref2.slice(1);
-  return firstLetter.toUpperCase() + restOfWord.join('');
-};
-var humanizeErrorMessage = function humanizeErrorMessage(nameAsString) {
-  var nameWithoutBrackets = nameAsString.replace(/[[\]']+/g, '');
-  var nameLowerCase = nameWithoutBrackets.toLowerCase();
-  var _nameLowerCase$split$ = nameLowerCase.split(/([0-9]+)/) // split num bers from field and build array
-  .filter(function (s) {
-    return s.length;
-  }),
-      _nameLowerCase$split$2 = _slicedToArray(_nameLowerCase$split$, 2),
-      fieldName = _nameLowerCase$split$2[0],
-      fieldNumberedValue = _nameLowerCase$split$2[1];
-  var nameCapitalized = capitalizeWord(fieldName);
-  if (fieldNumberedValue) {
-    // when name contains a number we assume it's a formgroup and we add a index +1 for human readability
-    var fieldNumber = parseInt(fieldNumberedValue, 10) + 1;
-    return "".concat(nameCapitalized, " ").concat(fieldNumber);
-  }
-  return nameCapitalized;
-};
-var getErrorMessage = function getErrorMessage(error, index) {
-  var name = error.ref.name;
-  var _name$split = name.split('.'),
-      _name$split2 = _slicedToArray(_name$split, 1),
-      firstNamePart = _name$split2[0];
-  var fieldErrorTitle = humanizeErrorMessage(firstNamePart);
-  return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(getErrorDefaultMessage(error));
-};
-var MODAL_DIALOG_ELEMENT = 'modal-dialog';
-var IssuesPane = function IssuesPane(_ref3) {
-  var isOpen = _ref3.isOpen,
-      handleClose = _ref3.handleClose,
-      _ref3$errorList = _ref3.errorList,
-      errorList = _ref3$errorList === void 0 ? [] : _ref3$errorList,
-      _ref3$startPosition = _ref3.startPosition,
-      startPosition = _ref3$startPosition === void 0 ? {
-    left: 20,
-    top: 50
-  } : _ref3$startPosition;
-  var rootElement = document.getElementById(MODAL_DIALOG_ELEMENT) || document.body;
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    startSize: {
-      width: '577px',
-      height: '200px'
-    },
-    startPosition: startPosition,
-    minWidth: 300,
-    onClose: handleClose,
-    title: getPaneTitle(errorList.length),
-    headerSize: "xs",
-    isOpen: isOpen,
-    "data-testid": "moveable-issues-pane",
-    bounds: "parent"
-  }, /*#__PURE__*/React.createElement(Box, {
-    component: "div",
-    sx: {
-      marginTop: '16px',
-      marginLeft: '24px'
-    }
-  }, errorList.length === 0 && /*#__PURE__*/React.createElement(Box, {
-    component: "div",
-    sx: {
-      fontSize: '4rem'
-    },
-    "data-testid": "zeroIssuesImage"
-  }, /*#__PURE__*/React.createElement(ThumbsUp, null)), errorList.length > 0 && errorList.map(function (error, index) {
-    return /*#__PURE__*/React.createElement(Typography // eslint-disable-next-line react/no-array-index-key
-    , {
-      // eslint-disable-next-line react/no-array-index-key
-      key: "message-".concat(index),
-      variant: "body1",
-      "data-testid": "errorMessage"
-    }, getErrorMessage(error, index));
-  }))), rootElement);
-};
 var getCustomError = function getCustomError(error) {
   var name = error.ref.name;
   var isChangeGroup = name.includes('changeGroups');
@@ -3649,7 +3562,6 @@ var getCustomError = function getCustomError(error) {
     row: row
   });
 };
 var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
   switch (sumOfErrors) {
     case 0:
@@ -3697,7 +3609,6 @@ var filterDuplicateErrors = function filterDuplicateErrors(errors) {
     return list.concat(error);
   }, []);
 };
 var getErrors = function getErrors(errors) {
   var errorList = Object.keys(errors).reduce(function (list, key) {
     var errorValue = errors[key];
@@ -3714,31 +3625,41 @@ var getErrors = function getErrors(errors) {
   return errorList;
 };
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
 var IssuesButton = function IssuesButton(_ref) {
   var _ref$errors = _ref.errors,
-      errors = _ref$errors === void 0 ? {} : _ref$errors;
+      errors = _ref$errors === void 0 ? {} : _ref$errors,
+      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
+      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
+      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
+      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
+    return null;
+  } : _ref$setIsIssuesPaneO;
   var errorList = filterDuplicateErrors(getErrors(errors));
   var totalErrors = errorList.length;
   var errorStatus = totalErrors > 0 ? 'error' : 'success';
   var buttonColor = "geowebColors.functional.".concat(errorStatus);
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isIssuesPaneOpen = _React$useState2[0],
-      setIsIssuesPaneOpen = _React$useState2[1];
-  var toggleIssuesPane = function toggleIssuesPane() {
-    return setIsIssuesPaneOpen(!isIssuesPaneOpen);
+  var toggleIssuesPane = function toggleIssuesPane(newPosition) {
+    return setIsIssuesPaneOpen(!isIssuesPaneOpen, newPosition);
   };
-  var _React$useState3 = React.useState({
-    left: 0,
-    top: 0
-  }),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      startPosition = _React$useState4[0],
-      setStartPosition = _React$useState4[1];
   var onClickButton = function onClickButton(event) {
     var _a;
@@ -3754,11 +3675,10 @@ var IssuesButton = function IssuesButton(_ref) {
       left: left - parentOffset.left + 100,
       top: top - parentOffset.top
     };
-    setStartPosition(newPosition);
-    toggleIssuesPane();
+    toggleIssuesPane(newPosition);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
     title: "View details"
   }, /*#__PURE__*/React.createElement(Chip, {
     "data-testid": "issuesButton",
@@ -3778,56 +3698,289 @@ var IssuesButton = function IssuesButton(_ref) {
       },
       fontSize: 12
     }
-  })), /*#__PURE__*/React.createElement(IssuesPane, {
-    errorList: errorList,
-    handleClose: toggleIssuesPane,
-    isOpen: isIssuesPaneOpen,
-    startPosition: startPosition
   }));
 };
-var noop = function noop() {};
-var TafForm = function TafForm(_ref) {
-  var defaultTafAction = _ref.tafAction,
-      isDefaultDisabled = _ref.isDisabled,
-      _ref$staticTAC = _ref.staticTAC,
-      staticTAC = _ref$staticTAC === void 0 ? '' : _ref$staticTAC,
-      tafFromBackend = _ref.tafFromBackend,
-      _ref$onFormAction = _ref.onFormAction,
-      onFormAction = _ref$onFormAction === void 0 ? function () {
-    return null;
-  } : _ref$onFormAction;
-  var originalTaf = tafFromBackend.taf;
-  var _React$useState = React__default.useState(defaultTafAction),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      tafAction = _React$useState2[0],
-      setTafAction = _React$useState2[1];
-  var _React$useState3 = React__default.useState(isDefaultDisabled),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isDisabled = _React$useState4[0],
-      setIsDisabled = _React$useState4[1];
-  var confirmDialog = useConfirmationDialog();
-  var _useDraftFormHelpers = useDraftFormHelpers(),
-      toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
-      DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
-  var _useIsMounted = useIsMounted(),
-      isMounted = _useIsMounted.isMounted;
-  var _useFormContext = useFormContext(),
-      control = _useFormContext.control,
-      handleSubmit = _useFormContext.handleSubmit,
-      watch = _useFormContext.watch,
-      trigger = _useFormContext.trigger,
-      formState = _useFormContext.formState,
+/* *
+ * 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 ThumbsUp = function ThumbsUp(props) {
+  return /*#__PURE__*/React__default.createElement(SvgIcon, Object.assign({
+    fontSize: "inherit",
+    viewBox: "0 0 58 69"
+  }, props), /*#__PURE__*/React__default.createElement("title", null, "Thumbs up"), /*#__PURE__*/React__default.createElement("g", {
+    id: "Thumbs-up",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.99883665,31.7843145 C7.41834232,30.0745617 7.39773108,30.3805485 10.9988366,28.8843145 C14.5999422,27.3880805 16.06167,27.0500418 18.1988366,25.8843145 C19.0904815,25.3979628 19.820202,24.8243341 20.5488366,24.1634286 C20.9845024,23.7682595 22.8819728,21.7794437 23.5488366,20.8277879 C24.2586546,19.8148341 25.1756722,18.5003429 25.9988366,16.8843145 C28.3936103,12.1829184 28.889513,9.4076237 29.8988366,6.88431453 C30.4506375,5.50481234 31.0206747,4.13576029 31.6089482,2.77715837 C31.8562473,2.20602771 32.1648239,1.47549588 32.9988366,0.88431453 C33.2365758,0.715795602 34.0556054,0.253858312 35.0144255,0.0843145301 C36.0262338,-0.0945989315 37.1937102,0.0296108539 37.9980376,0.28431453 C38.7449403,0.520833719 39.4692925,0.860990256 40.1710941,1.30478414 C40.2879689,1.37869154 41.2393256,2.13799569 41.8988366,3.58269657 C42.290748,4.4412034 42.5040976,4.92788584 42.7988366,6.88431453 C42.9953293,8.18860032 43.0453293,9.52193365 42.9488366,10.8843145 C42.947848,11.8251839 42.6645146,13.1585172 42.0988366,14.8843145 C41.9160014,15.4421169 41.6403041,16.2990156 41.2988366,17.1941099 C40.9325633,18.1542284 40.4965053,19.1582935 40.1988366,19.8843145 C39.1594737,22.4193462 37.7498356,25.6900566 37.4561402,26.5124038 C37.2603433,27.0606352 37.1745754,27.6512721 37.1988366,28.2843145 C37.21217,28.4109812 37.2455033,28.5187344 37.2988366,28.6075742 C37.35217,28.6964139 37.45217,28.821994 37.5988366,28.9843145 C38.7401033,28.7100145 39.6802034,28.5266812 40.4191367,28.4343145 C41.6262088,28.2834305 44.7342553,28.0975232 47.4943878,28.1962584 C50.2545202,28.2949937 51.7465936,28.4428269 52.9988366,28.8843145 C53.8336653,29.1786396 54.540332,29.8453063 55.1188366,30.8843145 C55.3507184,31.5616882 55.477385,32.2303996 55.4988366,32.8904489 C55.5202882,33.5504981 55.4369549,34.21512 55.2488366,34.8843145 C54.956044,35.585751 54.5393773,36.1190843 53.9988366,36.4843145 C53.4582959,36.8495447 52.6416293,37.1495447 51.5488366,37.3843145 C51.46217,37.6709812 51.4455033,37.9376479 51.4988366,38.1843145 C51.55217,38.4309812 51.7188366,38.5976479 51.9988366,38.6843145 C53.0027645,38.7154727 53.6750204,38.7821393 54.0156044,38.8843145 C54.7031375,39.0905745 55.3642149,39.4239078 55.9988366,39.8843145 C56.4980387,40.3674862 56.831372,40.7202741 56.9988366,40.9426784 C57.2459451,41.2708552 57.8988366,42.3863253 57.8988366,43.8843145 C57.8988366,44.882974 57.53217,45.882974 56.7988366,46.8843145 C56.4100652,47.2645006 55.9767318,47.5818962 55.4988366,47.8365013 C55.0209415,48.0911064 54.5157721,48.2737108 53.9833285,48.3843145 L52.6988366,48.3843145 C52.2988366,48.6576479 52.0988366,48.9643145 52.0988366,49.3043145 C52.0988366,49.6443145 52.1655033,49.9376479 52.2988366,50.1843145 L53.4440689,50.6343145 C54.0486381,50.9097065 54.566894,51.3263732 54.9988366,51.8843145 C55.2403033,52.1962176 55.7126861,53.1830494 55.7488366,53.8843145 C55.7849872,54.5855797 55.7892838,54.8412841 55.675362,55.3021772 C55.5409724,55.8458769 55.3321306,56.373256 54.9488366,56.8843145 C54.6880408,57.2320423 54.3421972,57.542124 54.0113058,57.8145598 C53.720974,58.0536013 53.0623839,58.3923099 52.0355354,58.6843145 C51.8426264,58.739172 51.4970601,58.8058387 50.9988366,58.8843145 L49.2488366,58.9843145 C48.96217,59.1509812 48.7955033,59.3509812 48.7488366,59.5843145 C48.70217,59.8176479 48.7855033,60.0643145 48.9988366,60.3243145 L50.0168579,60.6843145 C51.0110333,61.2176479 51.5216929,61.9496429 51.5488366,62.8802998 C51.5895523,64.276285 51.475285,65.4556464 50.0016466,66.7843145 C49.4876586,67.2477386 48.8545536,67.4912052 48.1023318,67.7343145 C47.6452927,67.8820242 46.8607943,68.0486909 45.7488366,68.2343145 L40.0010327,68.6843145 C38.1462353,68.7443145 36.81217,68.7776479 35.9988366,68.7843145 C34.7788366,68.7943145 28.6377735,68.7414839 25.3910307,68.5132824 C22.1442879,68.2850808 21.4236621,68.1168902 18.9258088,67.5843145 C16.4279556,67.0517389 16.0894589,66.9976619 13.9988366,66.0843145 C12.6050885,65.4754163 11.2717551,64.6754163 9.99883665,63.6843145 L5.99912679,59.8445931 C5.6005732,59.505994 5.13964906,59.1744645 4.61635438,58.8500046 C3.83141237,58.3633147 3.44878136,58.2942773 2.99883665,57.9843145 C2.44718062,57.6042838 2.05635486,57.1737105 1.71932092,56.7662516 C1.30382099,56.2639309 0.723401214,54.7703696 0.498836646,53.8721113 C0.239479861,52.8346842 0.182966814,51.4491222 0.134208514,50.425802 C0.00166588165,47.644049 0.0975252306,47.2982714 0.0687602378,44.8458357 C0.0452570713,42.8420109 -0.0277106081,40.4082829 0.0112302522,39.9409643 C0.224109489,37.3862585 0.450803729,36.3915418 0.898836646,34.8843145 C1.09883665,34.2114947 1.78104521,33.1945675 2.17275045,32.889441 C2.5644557,32.5843145 3.13875358,32.2143561 3.99883665,31.7843145 Z",
+    id: "Path-2",
+    fill: "#FFBF00"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M37.1988366,28.2843145 C36.6491114,28.3570112 36.2566531,28.4236779 36.0214618,28.4843145 C35.0603746,28.7321005 34.3937143,29.0314706 34.021481,29.207818 C33.777778,29.3232735 32.5285093,30.04554 31.6988366,30.8956082 C31.0356177,31.5751308 30.7670551,32.3363186 30.5620165,32.9344937 C29.9561734,34.7019667 30.4904911,36.5989836 30.5988366,36.8981554 C30.8174274,37.5017447 31.0945063,37.9694877 31.2988366,38.4843145 C31.4064264,38.7553957 31.4498365,39.7521385 31.3985954,40.9130014 C31.388536,41.1408948 31.3995111,42.8738523 30.5816296,45.1307691 C30.125032,46.3907349 29.4940749,47.743868 28.6988366,48.906031 C27.6082165,50.4998658 26.3589437,51.7345157 26.1988366,51.8770596 C25.2520649,52.7199732 23.8988366,53.516454 23.3777374,54.1031009 C22.8566381,54.6897478 22.8988366,54.7174426 22.8988366,54.8843145 C22.8988366,55.0643438 22.9342857,55.2139882 23.0063234,55.32641 C23.2544011,55.7135594 23.9363916,55.6592779 25.0988366,54.8843145 C25.8683088,54.3713331 26.8213311,53.5952018 27.5988366,52.8259025 C28.3369913,52.0955388 28.9092218,51.3713331 29.2988366,50.8843145 C29.6096134,50.4958436 30.1890589,49.8244169 30.7488366,48.8700346 C31.0160857,48.4143934 31.4327524,47.5858201 31.9988366,46.3843145 C31.9988366,46.7176479 32.33217,47.2176479 32.9988366,47.8843145 C33.1686748,48.0541527 33.5020081,48.3041527 33.9988366,48.6343145 C33.535822,48.6343145 33.2024887,48.6676479 32.9988366,48.7343145 C31.9774176,49.1343145 31.4345654,49.3440777 30.8488366,49.8843145 C30.1709576,50.5095446 29.6310297,51.1756019 29.3988366,52.3843145 C29.1722814,53.5636787 29.3142136,54.632966 29.6488366,55.5921767 C29.928312,56.3933044 30.3156141,57.1176481 30.9865396,57.7652076 C31.1856402,57.9573742 31.5230725,58.2304098 31.9988366,58.5843145 C30.2988366,59.4509812 29.4488366,60.8843145 29.4488366,62.8843145 C29.4488366,65.8843145 31.4988366,68.7843145 35.9988366,68.7843145 C37.2162866,68.7843145 38.5382158,68.7607397 39.9988366,68.6843145 C41.1579568,68.623665 43.0746234,68.473665 45.7488366,68.2343145 C42.81999,68.0652276 40.9033233,67.948561 39.9988366,67.8843145 C38.4397862,67.7735739 34.9576244,67.4218793 34.5109642,67.2843145 C33.8898949,67.0930342 33.3876529,66.66767 32.9988366,66.3843145 C31.7988366,65.509797 31.6488366,63.8668327 31.6488366,63.3843145 C31.6488366,62.6767971 32.115551,61.4820497 32.7124803,60.9291427 C33.2967248,60.387985 34.101504,59.9827037 34.9988366,59.8343145 C36.8129843,59.5343145 37.8279851,59.6343145 38.9968712,59.6343145 C41.8836014,59.6343145 46.4559662,59.9063364 47.0327603,59.9503801 C47.6352731,59.9963876 48.2906319,60.1194654 48.9988366,60.3196132 C48.7881139,60.0647262 48.7047806,59.8196266 48.7488366,59.5843145 C48.7928927,59.3490025 48.9595594,59.1490025 49.2488366,58.9843145 C41.7042463,58.5910176 37.2875796,58.2576842 35.9988366,57.9843145 C34.0657222,57.57426 33.0783849,56.5232188 32.4988366,55.3843145 C32.1808463,54.7594131 31.9988366,54.0680377 32.1988366,52.8843145 C32.4054546,51.661422 33.0758788,51.154421 33.9988366,50.7343145 C35.0343809,50.2629616 36.2160776,50.213626 38.0168693,50.1343145 C41.4226671,49.9843145 41.9988366,49.8715355 44.9988366,49.8843145 C47.4322993,49.8928339 49.8656327,49.9928339 52.2988366,50.1843145 C52.1655033,49.9452767 52.0988366,49.6535253 52.0988366,49.3090604 C52.0988366,48.9645954 52.2988366,48.6563468 52.6988366,48.3843145 C49.4970675,48.4374708 47.2644784,48.4840975 46.0010696,48.5241946 C42.8267531,48.6249387 40.1650305,48.7843145 38.0159019,48.6090596 C36.5073153,48.3843145 35.5349602,47.7454709 35.0988366,47.3586886 C33.5267511,45.9644623 33.6909724,44.1458838 33.6988366,43.902953 C33.7490538,42.3517256 34.2594453,41.6540102 34.9988366,41.2843145 C36.9988366,40.2843145 38.521019,40.3843145 40.9988366,39.8843145 L51.9988366,38.6843145 C51.7847588,38.5992008 51.6347588,38.4325341 51.5488366,38.1843145 C51.4629145,37.9360949 51.4629145,37.6694283 51.5488366,37.3843145 C48.6830402,37.6590904 46.693269,37.8590904 45.579523,37.9843145 C44.2653604,38.1320725 42.7384649,38.3154059 40.9988366,38.5343145 C38.9988366,38.6009812 37.6749072,38.5733169 37.0270482,38.4513217 C35.0988366,38.2216852 33.4888366,37.4843145 33.4388366,34.8545872 C33.3888366,32.7744565 33.7430954,32.2207578 33.8988366,31.9295788 C34.3117653,31.1575537 34.9128559,30.575799 35.3988366,30.1843145 C36.0681111,29.6451768 36.8014444,29.2451768 37.5988366,28.9843145 C37.4503711,28.8228789 37.3503711,28.6970685 37.2988366,28.6068833 C37.2473022,28.516698 37.2139689,28.4091751 37.1988366,28.2843145 Z",
+    id: "Path",
+    fill: "#F28700"
+  })));
+};
+var getPaneTitle = function getPaneTitle(sumOfErrors) {
+  switch (sumOfErrors) {
+    case 0:
+      return 'Looks good';
+    case 1:
+      return 'There is an issue to address';
+    default:
+      return 'There are a few issues to address';
+  }
+};
+var capitalizeWord = function capitalizeWord(_ref) {
+  var _ref2 = _toArray(_ref),
+      firstLetter = _ref2[0],
+      restOfWord = _ref2.slice(1);
+  return firstLetter.toUpperCase() + restOfWord.join('');
+};
+var humanizeErrorMessage = function humanizeErrorMessage(nameAsString) {
+  var nameWithoutBrackets = nameAsString.replace(/[[\]']+/g, '');
+  var nameLowerCase = nameWithoutBrackets.toLowerCase();
+  var _nameLowerCase$split$ = nameLowerCase.split(/([0-9]+)/) // split num bers from field and build array
+  .filter(function (s) {
+    return s.length;
+  }),
+      _nameLowerCase$split$2 = _slicedToArray(_nameLowerCase$split$, 2),
+      fieldName = _nameLowerCase$split$2[0],
+      fieldNumberedValue = _nameLowerCase$split$2[1];
+  var nameCapitalized = capitalizeWord(fieldName);
+  if (fieldNumberedValue) {
+    // when name contains a number we assume it's a formgroup and we add a index +1 for human readability
+    var fieldNumber = parseInt(fieldNumberedValue, 10) + 1;
+    return "".concat(nameCapitalized, " ").concat(fieldNumber);
+  }
+  return nameCapitalized;
+};
+var getErrorMessage = function getErrorMessage(error, index) {
+  var name = error.ref.name;
+  var _name$split = name.split('.'),
+      _name$split2 = _slicedToArray(_name$split, 1),
+      firstNamePart = _name$split2[0];
+  var fieldErrorTitle = humanizeErrorMessage(firstNamePart);
+  return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(error.message);
+};
+var MODAL_DIALOG_ELEMENT = 'modal-dialog';
+var useIssuesPane = function useIssuesPane() {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isIssuesPaneOpen = _React$useState2[0],
+      setIsIssuesPaneOpen = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      startPosition = _React$useState4[0],
+      setStartPosition = _React$useState4[1];
+  var onToggleIssuesPane = function onToggleIssuesPane(isOpen, newPosition) {
+    if (!startPosition) {
+      setStartPosition(newPosition);
+    }
+    setIsIssuesPaneOpen(isOpen);
+  };
+  var onCloseIssuesPane = function onCloseIssuesPane() {
+    return setIsIssuesPaneOpen(false);
+  };
+  return {
+    isIssuesPaneOpen: isIssuesPaneOpen,
+    startPosition: startPosition,
+    onToggleIssuesPane: onToggleIssuesPane,
+    onCloseIssuesPane: onCloseIssuesPane
+  };
+};
+var IssuesPane = function IssuesPane(_ref3) {
+  var _ref3$errorList = _ref3.errorList,
+      errorList = _ref3$errorList === void 0 ? [] : _ref3$errorList,
+      isOpen = _ref3.isOpen,
+      handleClose = _ref3.handleClose,
+      _ref3$startPosition = _ref3.startPosition,
+      startPosition = _ref3$startPosition === void 0 ? {
+    left: 20,
+    top: 50
+  } : _ref3$startPosition;
+  var rootElement = document.getElementById(MODAL_DIALOG_ELEMENT) || document.body;
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+    startSize: {
+      width: '577px',
+      height: '200px'
+    },
+    startPosition: startPosition,
+    minWidth: 300,
+    onClose: handleClose,
+    title: getPaneTitle(errorList.length),
+    headerSize: "xs",
+    isOpen: isOpen,
+    "data-testid": "moveable-issues-pane",
+    bounds: "parent"
+  }, /*#__PURE__*/React.createElement(Box, {
+    component: "div",
+    sx: {
+      marginTop: '16px',
+      marginLeft: '24px'
+    }
+  }, errorList.length === 0 && /*#__PURE__*/React.createElement(Box, {
+    component: "div",
+    sx: {
+      fontSize: '4rem'
+    },
+    "data-testid": "zeroIssuesImage"
+  }, /*#__PURE__*/React.createElement(ThumbsUp, null)), errorList.length > 0 && errorList.map(function (error, index) {
+    return /*#__PURE__*/React.createElement(Typography // eslint-disable-next-line react/no-array-index-key
+    , {
+      // eslint-disable-next-line react/no-array-index-key
+      key: "message-".concat(index),
+      variant: "body1",
+      "data-testid": "errorMessage"
+    }, getErrorMessage(error, index));
+  }))), rootElement);
+};
+var TafModuleContext = /*#__PURE__*/React.createContext({
+  onValidateForm: null,
+  registerValidateForm: null,
+  tafAction: null,
+  setTafAction: null,
+  isFormDirty: null,
+  setIsFormDirty: null
+});
+var useTafModuleContext = function useTafModuleContext() {
+  return React.useContext(TafModuleContext);
+};
+var useTafModuleState = function useTafModuleState(_ref) {
+  var onPreventCloseView = _ref.onPreventCloseView;
+  var _React$useState = React.useState(function () {
+    return new Promise(function () {
+      return true;
+    });
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      onValidateForm = _React$useState2[0],
+      registerValidateForm = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      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 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,
+    isFormDirty: isFormDirty,
+    setIsFormDirty: onChangeFormDirty
+  };
+};
+var TafModuleProvider = function TafModuleProvider(_ref2) {
+  var children = _ref2.children,
+      _ref2$onPreventCloseV = _ref2.onPreventCloseView,
+      onPreventCloseView = _ref2$onPreventCloseV === void 0 ? function () {} : _ref2$onPreventCloseV;
+  var contextState = useTafModuleState({
+    onPreventCloseView: onPreventCloseView
+  });
+  return /*#__PURE__*/React.createElement(TafModuleContext.Provider, {
+    value: contextState
+  }, children);
+};
+var noop = function noop() {};
+var TafForm = function TafForm(_ref) {
+  var tafFromBackend = _ref.tafFromBackend,
+      _ref$onFormAction = _ref.onFormAction,
+      onFormAction = _ref$onFormAction === void 0 ? function () {
+    return null;
+  } : _ref$onFormAction,
+      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
+      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
+      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
+      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
+    return null;
+  } : _ref$setIsIssuesPaneO,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$setIsDisabled = _ref.setIsDisabled,
+      setIsDisabled = _ref$setIsDisabled === void 0 ? function () {
+    return null;
+  } : _ref$setIsDisabled;
+  var originalTaf = tafFromBackend.taf;
+  var isDefaultDisabled = getIsFormDefaultDisabled(tafFromBackend.taf.status);
+  var confirmDialog = useConfirmationDialog();
+  var _useDraftFormHelpers = useDraftFormHelpers(true),
+      toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
+      DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
+  var _useTafModuleContext = useTafModuleContext(),
+      registerValidateForm = _useTafModuleContext.registerValidateForm,
+      tafAction = _useTafModuleContext.tafAction,
+      setTafAction = _useTafModuleContext.setTafAction,
+      setIsFormDirty = _useTafModuleContext.setIsFormDirty;
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+  var _useIsMounted = useIsMounted(),
+      isMounted = _useIsMounted.isMounted;
+  var _useFormContext = useFormContext(),
+      control = _useFormContext.control,
+      handleSubmit = _useFormContext.handleSubmit,
+      trigger = _useFormContext.trigger,
+      formState = _useFormContext.formState,
       getValues = _useFormContext.getValues,
       setValue = _useFormContext.setValue,
       reset = _useFormContext.reset;
@@ -3837,12 +3990,12 @@ var TafForm = function TafForm(_ref) {
   usePreventBrowserClose(isFormDirty && !isDisabled);
   var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
-  var _React$useState5 = React__default.useState(watch()),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      delayedFormValues = _React$useState6[0],
-      setDelayedFormValues = _React$useState6[1];
+  var _React$useState = React__default.useState(getValues()),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      delayedFormValues = _React$useState2[0],
+      setDelayedFormValues = _React$useState2[1];
-  var _useTACGenerator = useTACGenerator(convertTafValuesToObject(delayedFormValues), api.getTAC, staticTAC),
+  var _useTACGenerator = useTACGenerator(tafFromBackend.taf, api.getTAC),
       _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
       TAC = _useTACGenerator2[0],
       updateTAC = _useTACGenerator2[1];
@@ -3854,7 +4007,7 @@ var TafForm = function TafForm(_ref) {
   };
   React__default.useEffect(function () {
-    if (staticTAC === '' && isMounted.current && isFormDirty) {
+    if (isMounted.current && isFormDirty) {
       var newTAC = hasErrors ? null : convertTafValuesToObject(delayedFormValues);
       updateTAC(newTAC);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -3866,7 +4019,11 @@ var TafForm = function TafForm(_ref) {
       updateTAC(convertTafValuesToObject(delayedFormValues));
     } // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hasErrors]);
+  }, [hasErrors]); // Needed to be able to show a confirmation dialog on switching tabs when form is edited and not saved
+  React__default.useEffect(function () {
+    setIsFormDirty(isFormDirty);
+  }, [isFormDirty, setIsFormDirty]);
   var onSubmit = function onSubmit(data) {
     // eslint-disable-next-line no-console
@@ -3907,6 +4064,7 @@ var TafForm = function TafForm(_ref) {
         toggleIsDraft(true);
         handleSubmit(function (data) {
           onFormAction(action, convertTafValuesToObject(data));
+          reset(getValues());
         })();
         break;
@@ -3968,7 +4126,7 @@ var TafForm = function TafForm(_ref) {
     switch (action) {
       case 'CANCEL':
         showConfirmDialog(action).then(function () {
-          onFormAction(action, tafFromBackend.taf);
+          onFormAction(action, convertTafValuesToObject(prepareTafValues(tafFromBackend.taf, action)));
         });
         break;
@@ -4059,16 +4217,58 @@ var TafForm = function TafForm(_ref) {
     });
   };
+  var _React$useState3 = React__default.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      shouldValidate = _React$useState4[0],
+      setShouldValidate = _React$useState4[1];
+  React__default.useEffect(function () {
+    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); // 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));
+    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 (!isDisabled) {
+    if (shouldValidate && !isDisabled) {
       // trigger validation on all changegroup validity times after initial load since they could be outside the new validity period
-      var validFields = fields.map(function (_field, index) {
+      var _tafFromBackend$taf$c = tafFromBackend.taf.changeGroups,
+          changeGroups = _tafFromBackend$taf$c === void 0 ? [] : _tafFromBackend$taf$c;
+      var validFields = changeGroups.map(function (_field, index) {
         return "changeGroups[".concat(index, "].valid");
       });
       trigger(validFields);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [shouldValidate]);
   return /*#__PURE__*/React__default.createElement("form", {
     "data-testid": "taf-form",
     onSubmit: handleSubmit(onSubmit),
@@ -4146,7 +4346,9 @@ var TafForm = function TafForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(IssuesButton, {
-    errors: errors
+    errors: errors,
+    isIssuesPaneOpen: isIssuesPaneOpen,
+    setIsIssuesPaneOpen: setIsIssuesPaneOpen
   }))), /*#__PURE__*/React__default.createElement(TafFormButtons, {
     isFormDisabled: isDisabled,
     tafAction: tafAction,
@@ -4161,50 +4363,6 @@ var TafForm = function TafForm(_ref) {
   }), /*#__PURE__*/React__default.createElement(DraftFieldHelper, null));
 };
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var TafFormWrapper = function TafFormWrapper(_ref) {
-  var tafFromBackend = _ref.tafFromBackend,
-      mode = _ref.mode,
-      _ref$TAC = _ref.TAC,
-      TAC = _ref$TAC === void 0 ? '' : _ref$TAC,
-      onFormAction = _ref.onFormAction,
-      tafAction = _ref.tafAction;
-  var taf = tafFromBackend.taf;
-  var isDisabled = mode === 'view';
-  var defaultValues = prepareTafValues(taf, undefined, !isDisabled && !taf.changeGroups);
-  var options = {
-    defaultValues: defaultValues,
-    mode: 'onTouched',
-    reValidateMode: 'onChange',
-    criteriaMode: 'all'
-  };
-  return /*#__PURE__*/React__default.createElement(ReactHookFormProvider, {
-    options: options
-  }, /*#__PURE__*/React__default.createElement(TafForm, {
-    isDisabled: isDisabled,
-    staticTAC: TAC,
-    onFormAction: onFormAction,
-    tafFromBackend: tafFromBackend,
-    tafAction: tafAction
-  }));
-};
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4384,6 +4542,20 @@ var muiTabA11yProps = function muiTabA11yProps(index) {
     'aria-controls': "simple-tabpanel-".concat(index)
   };
 };
+var prepareTafExportValues = function prepareTafExportValues(tafToCopy, currentTaf) {
+  var _a;
+  var convertedCopy = prepareTafValues(tafToCopy, undefined, false);
+  var baseForecast = convertedCopy.baseForecast,
+      _convertedCopy$change = convertedCopy.changeGroups,
+      changeGroups = _convertedCopy$change === void 0 ? [] : _convertedCopy$change;
+  return Object.assign(Object.assign({}, currentTaf), {
+    baseForecast: Object.assign(Object.assign(Object.assign({}, emptyBaseForecast), 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");
@@ -4401,15 +4573,9 @@ var muiTabA11yProps = function muiTabA11yProps(index) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var EditIcon = function EditIcon(props) {
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-    d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
-    fillRule: "evenodd",
-    fill: "".concat(theme.palette.geowebColors.buttons.tertiary["default"].color)
-  })));
-};
+var EditIcon = createSvgIcon( /*#__PURE__*/React.createElement("path", {
+  d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z"
+}), 'Edit');
 var StatusIcon = function StatusIcon(_ref) {
   var timeSlot = _ref.timeSlot,
@@ -4420,51 +4586,104 @@ var StatusIcon = function StatusIcon(_ref) {
   }
   if (status === 'EXPIRED') {
-    return /*#__PURE__*/React.createElement(Schedule, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Expired",
+      placement: "right"
+    }, /*#__PURE__*/React.createElement(Schedule, {
       "data-testid": "status-expired",
       fontSize: "small",
       sx: {
         transform: 'scaleX(-1)',
         color: 'geowebColors.buttons.tertiary.disabled.color'
       }
-    });
+    }));
   }
   if (status === 'CANCELLED') {
-    return /*#__PURE__*/React.createElement(DoDisturbIcon, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Cancelled",
+      placement: "right"
+    }, /*#__PURE__*/React.createElement(DoDisturbIcon, {
       "data-testid": "status-cancelled",
       fontSize: "small",
       sx: {
         color: 'geowebColors.captions.captionError.rgba'
       }
-    });
+    }));
   }
   if (status === 'DRAFT' || status === 'DRAFT_CORRECTED' || status === 'DRAFT_AMENDED') {
-    return /*#__PURE__*/React.createElement(EditIcon, {
-      "data-testid": "status-draft"
-    });
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Draft",
+      placement: "right"
+    }, /*#__PURE__*/React.createElement(SvgIcon, {
+      component: EditIcon,
+      "data-testid": "status-draft",
+      sx: {
+        color: 'geowebColors.buttons.tertiary.default.color'
+      }
+    }));
   }
-  return timeSlot === 'ACTIVE' ? /*#__PURE__*/React.createElement(CheckCircle, {
+  return timeSlot === 'ACTIVE' ? /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Active",
+    placement: "right"
+  }, /*#__PURE__*/React.createElement(CheckCircle, {
     "data-testid": "status-active",
     fontSize: "small",
     sx: {
       color: 'geowebColors.functional.success'
     }
-  }) : /*#__PURE__*/React.createElement(Schedule, {
+  })) : /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Upcoming",
+    placement: "right"
+  }, /*#__PURE__*/React.createElement(Schedule, {
     "data-testid": "status-upcoming",
     fontSize: "small",
     sx: {
       color: 'geowebColors.functional.success'
     }
-  });
+  }));
+};
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var ExportIcon = /*#__PURE__*/React__default.createElement(SvgIcon, null, /*#__PURE__*/React__default.createElement("path", {
+  d: "M14.744 5.476a1.252 1.252 0 1 0 0 2.504h2.752v9.516H6.48v-1.753a1.251 1.251 0 1 0-2.504 0v3.004c0 .693.561 1.253 1.252 1.253h13.52C19.44 20 20 19.44 20 18.747V6.727c0-.69-.56-1.251-1.252-1.251zM9.133 2.385a1.252 1.252 0 0 0-1.77 0L1.773 7.974l5.54 5.54c.49.49 1.281.49 1.77 0l.022-.026a1.25 1.25 0 0 0-.021-1.745L6.568 9.225h1.371c.914 0 2.756.618 4.045 2.763 1.29 2.145.352 2.526.653 2.526.301 0 1.943-1.798.721-4.295-1.71-3.498-4.6-3.498-5.346-3.498H6.568l2.565-2.565a1.253 1.253 0 0 0 0-1.771z"
+}));
+var ExportButton = function ExportButton(_ref) {
+  var onClick = _ref.onClick,
+      isHidden = _ref.isHidden;
+  return isHidden ? null : /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Import TAC",
+    placement: "left"
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(ToolButton, {
+    onClick: onClick,
+    "data-testid": "export-tac-button"
+  }, ExportIcon)));
 };
 var TacContainer = function TacContainer(_ref) {
   var taf = _ref.taf,
       _ref$isActive = _ref.isActive,
-      isActive = _ref$isActive === void 0 ? false : _ref$isActive;
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+      _ref$isFormDisabled = _ref.isFormDisabled,
+      isFormDisabled = _ref$isFormDisabled === void 0 ? false : _ref$isFormDisabled;
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
@@ -4479,6 +4698,26 @@ var TacContainer = function TacContainer(_ref) {
       baseTime = taf.baseTime;
   var locationLabel = getLocationSetting(location).label;
   var timeSlot = getTafTimeSlot(baseTime, location, status);
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues,
+      trigger = _useFormContext.trigger,
+      setValue = _useFormContext.setValue;
+  var 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);
+  };
   React__default.useEffect(function () {
     if (isActive) {
       retrieveTAC(taf);
@@ -4494,14 +4733,22 @@ var TacContainer = function TacContainer(_ref) {
     sx: {
       display: 'flex',
       alignItems: 'center',
-      marginBottom: '2px'
+      justifyContent: 'space-between',
+      height: 24
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
-      width: 20,
-      height: 20,
       display: 'flex',
-      marginRight: '6px'
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      width: 24,
+      height: 24,
+      display: 'flex',
+      marginRight: '2px',
+      alignItems: 'center',
+      justifyContent: 'center'
     }
   }, /*#__PURE__*/React__default.createElement(StatusIcon, {
     timeSlot: timeSlot,
@@ -4528,7 +4775,10 @@ var TacContainer = function TacContainer(_ref) {
     },
     "data-testid": "tafLocationLabel",
     component: "span"
-  }, locationLabel))), /*#__PURE__*/React__default.createElement(Box, {
+  }, locationLabel))), /*#__PURE__*/React__default.createElement(ExportButton, {
+    onClick: handleExport,
+    isHidden: isFormDisabled || tacHasError(TAC)
+  })), /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       fontSize: '12px',
       letterSpacing: '0.4px',
@@ -4564,7 +4814,9 @@ var TacOverview = function TacOverview(_ref) {
       _ref$hideTitle = _ref.hideTitle,
       hideTitle = _ref$hideTitle === void 0 ? false : _ref$hideTitle,
       _ref$activeTaf = _ref.activeTaf,
-      activeTaf = _ref$activeTaf === void 0 ? null : _ref$activeTaf;
+      activeTaf = _ref$activeTaf === void 0 ? null : _ref$activeTaf,
+      _ref$isFormDisabled = _ref.isFormDisabled,
+      isFormDisabled = _ref$isFormDisabled === void 0 ? false : _ref$isFormDisabled;
   var _React$useState = React__default.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4661,7 +4913,8 @@ var TacOverview = function TacOverview(_ref) {
       return /*#__PURE__*/React__default.createElement(TacContainer, {
         key: taf.uuid,
         taf: taf,
-        isActive: isActiveLocation(taf.location)
+        isActive: isActiveLocation(taf.location),
+        isFormDisabled: isFormDisabled
       });
     }));
   })));
@@ -4744,6 +4997,7 @@ var TacOverviewMobile = function TacOverviewMobile(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var formatBaseTime = function formatBaseTime(time) {
   return time.format('HH:mm DD MMM');
 };
@@ -4752,7 +5006,13 @@ var TopTabs = function TopTabs(_ref) {
   var timeSlot = _ref.timeSlot,
       _ref$onChangeTimeSlot = _ref.onChangeTimeSlot,
       onChangeTimeSlot = _ref$onChangeTimeSlot === void 0 ? function () {} : _ref$onChangeTimeSlot,
-      tafFromBackend = _ref.tafFromBackend;
+      _ref$tafFromBackend = _ref.tafFromBackend,
+      tafFromBackend = _ref$tafFromBackend === void 0 ? {
+    taf: {
+      baseTime: '2022-01-06T12:00:00Z',
+      location: 'EHAM'
+    }
+  } : _ref$tafFromBackend;
   if (!tafFromBackend) {
     return null;
@@ -4780,12 +5040,13 @@ var TopTabs = function TopTabs(_ref) {
     value: activeTab,
     onChange: onChangeTab,
     "aria-label": "timeslot-tabs",
+    "data-testid": "timeslot-tabs",
     variant: "fullWidth"
   }, tabs.map(function (tab, index) {
     return /*#__PURE__*/React__default.createElement(Tab, Object.assign({
       key: tab.title,
       label: tab.title,
-      "data-testid": "tab-".concat(index),
+      "data-testid": "toptab-".concat(index),
       sx: {
         fontSize: 16
       }
@@ -4922,15 +5183,22 @@ var fromActionToStatus = function fromActionToStatus(tafAction) {
   }
 };
-var TafPanel = function TafPanel(_ref) {
-  var tafFromBackend = _ref.tafFromBackend,
-      activeTafIndex = _ref.activeTafIndex,
-      index = _ref.index,
-      _ref$onPostTaf = _ref.onPostTaf,
-      onPostTaf = _ref$onPostTaf === void 0 ? function () {} : _ref$onPostTaf;
+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: getAxiosErrorMessage(error)
+  };
+};
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
+var usePostTafRequest = function usePostTafRequest(request) {
+  var errorParser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : parseErrorMessage;
+  var _useIsMounted = useIsMounted(),
+      isMounted = _useIsMounted.isMounted;
   var _React$useState = React__default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4940,67 +5208,92 @@ var TafPanel = function TafPanel(_ref) {
   var _React$useState3 = React__default.useState(null),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       error = _React$useState4[0],
-      setError = _React$useState4[1]; // removes cancelled error message
+      setError = _React$useState4[1];
-  React__default.useEffect(function () {
-    var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
-      setError(null);
-    }, 10000) : null;
-    return function () {
-      if (cancelErrorTimeout !== null) {
-        clearTimeout(cancelErrorTimeout);
-      }
-    };
-  }, [error]);
-  var postTaf = function postTaf(data) {
+  var doRequest = function doRequest(params) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var newError;
+      var newErrorr;
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _context.prev = 0;
               setLoading(true);
-              _context.next = 4;
-              return api.postTaf(data);
+              setError(null);
+              _context.prev = 2;
+              _context.next = 5;
+              return request(params);
+            case 5:
+              if (isMounted.current) {
+                _context.next = 7;
+                break;
+              }
-            case 4:
-              setLoading(false);
-              setError(null); // callback
+              return _context.abrupt("return");
-              onPostTaf();
-              _context.next = 15;
+            case 7:
+              setLoading(false);
+              setError(null);
+              _context.next = 19;
               break;
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](0);
-              newError = data.changeStatusTo === 'CANCELLED' ? {
-                type: 'CANCELLED',
-                title: 'Cancelling this TAF failed, please try again'
-              } : {
-                type: 'SERVER',
-                title: 'An error has occurred while saving, please try again',
-                message: getAxiosErrorMessage(_context.t0)
-              };
-              setError(newError);
-              setLoading(false);
-              throw _context.t0;
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](2);
+              if (isMounted.current) {
+                _context.next = 15;
+                break;
+              }
+              return _context.abrupt("return");
             case 15:
+              newErrorr = errorParser ? errorParser(_context.t0, params) : _context.t0;
+              setLoading(false);
+              setError(newErrorr);
+              throw newErrorr;
+            case 19:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 9]]);
+      }, _callee, null, [[2, 11]]);
     }));
   };
-  var getViewMode = function getViewMode(status) {
-    return status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED' ? 'edit' : 'view';
+  return {
+    isLoading: isLoading,
+    error: error,
+    setError: setError,
+    doRequest: doRequest
   };
+};
+var TafPanel = function TafPanel(_ref) {
+  var tafFromBackend = _ref.tafFromBackend,
+      activeTafIndex = _ref.activeTafIndex,
+      index = _ref.index,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$postTaf = _ref.postTaf,
+      postTaf = _ref$postTaf === void 0 ? function () {
+    return null;
+  } : _ref$postTaf,
+      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
+      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
+      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
+      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
+    return null;
+  } : _ref$setIsIssuesPaneO,
+      _ref$isFormDisabled = _ref.isFormDisabled,
+      isFormDisabled = _ref$isFormDisabled === void 0 ? false : _ref$isFormDisabled,
+      _ref$setIsFormDisable = _ref.setIsFormDisabled,
+      setIsFormDisabled = _ref$setIsFormDisable === void 0 ? function () {
+    return null;
+  } : _ref$setIsFormDisable,
+      error = _ref.error;
   var onTafAction = function onTafAction(action, taf) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
@@ -5061,12 +5354,54 @@ var TafPanel = function TafPanel(_ref) {
     severity: "error",
     title: error.title,
     info: error.message,
-    dataTestId: "taf-error"
-  }), /*#__PURE__*/React__default.createElement(TafFormWrapper, {
-    mode: getViewMode(tafFromBackend.taf.status),
+    dataTestId: "taf-error",
+    shouldClose: true
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      marginTop: '10px',
+      padding: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(TafForm, {
     tafFromBackend: tafFromBackend,
-    onFormAction: onTafAction
-  }));
+    onFormAction: onTafAction,
+    isIssuesPaneOpen: isIssuesPaneOpen,
+    setIsIssuesPaneOpen: setIsIssuesPaneOpen,
+    isDisabled: isFormDisabled,
+    setIsDisabled: setIsFormDisabled
+  })));
+};
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var IssuesPaneWrapper = function IssuesPaneWrapper(props) {
+  var _useFormContext = useFormContext(),
+      errors = _useFormContext.formState.errors;
+  var errorList = filterDuplicateErrors(getErrors(errors));
+  return /*#__PURE__*/React.createElement(IssuesPane, Object.assign({
+    errorList: errorList
+  }, props));
+};
+var CONFIRM_DIALOG_OPTIONS = {
+  title: 'Whoops',
+  description: "It's not possible to autosave this TAF due to the presence of issue(s). Are you sure you want to close this TAF? Any changes made will be lost.",
+  confirmLabel: 'Exit without saving'
 };
 var TafLayout = function TafLayout(_ref) {
@@ -5075,6 +5410,28 @@ var TafLayout = function TafLayout(_ref) {
       _ref$onPostTaf = _ref.onPostTaf,
       onPostTaf = _ref$onPostTaf === void 0 ? function () {} : _ref$onPostTaf;
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+  var confirmDialog = useConfirmationDialog();
+  var _useIssuesPane = useIssuesPane(),
+      isIssuesPaneOpen = _useIssuesPane.isIssuesPaneOpen,
+      onToggleIssuesPane = _useIssuesPane.onToggleIssuesPane,
+      onCloseIssuesPane = _useIssuesPane.onCloseIssuesPane,
+      startPosition = _useIssuesPane.startPosition;
+  var _usePostTafRequest = usePostTafRequest(api.postTaf),
+      isLoading = _usePostTafRequest.isLoading,
+      postTafRequest = _usePostTafRequest.doRequest,
+      error = _usePostTafRequest.error,
+      setError = _usePostTafRequest.setError;
+  var _useTafModuleContext = useTafModuleContext(),
+      onValidateForm = _useTafModuleContext.onValidateForm,
+      tafAction = _useTafModuleContext.tafAction,
+      isFormDirty = _useTafModuleContext.isFormDirty;
   var _React$useState = React__default.useState(sortTafTimeSlots(tafList)),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       _React$useState2$ = _React$useState2[0],
@@ -5083,9 +5440,9 @@ var TafLayout = function TafLayout(_ref) {
       expired = _React$useState2$.expired,
       updateSortedTafs = _React$useState2[1];
-  var _upcoming$slice = upcoming.slice(-1),
-      _upcoming$slice2 = _slicedToArray(_upcoming$slice, 1),
-      lastUpcomingTaf = _upcoming$slice2[0];
+  var _current$slice = current.slice(-1),
+      _current$slice2 = _slicedToArray(_current$slice, 1),
+      lastCurrentTaf = _current$slice2[0];
   var _React$useState3 = React__default.useState('UPCOMING'),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
@@ -5102,7 +5459,96 @@ var TafLayout = function TafLayout(_ref) {
       activeTafIndex = _React$useState8[0],
       setActiveTafIndex = _React$useState8[1];
+  var _React$useState9 = React__default.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      isFormDisabled = _React$useState10[0],
+      setIsFormDisabled = _React$useState10[1];
+  var postTaf = function postTaf(data) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return postTafRequest(data);
+            case 2:
+              // callback
+              onPostTaf();
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  };
+  function onChangeTab(action, value) {
+    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var taf;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!isFormDirty) {
+                _context2.next = 15;
+                break;
+              }
+              _context2.prev = 1;
+              _context2.next = 4;
+              return onValidateForm();
+            case 4:
+              taf = _context2.sent;
+              _context2.next = 7;
+              return postTaf({
+                taf: taf,
+                changeStatusTo: fromActionToStatus(tafActionToDraftAction(tafAction))
+              });
+            case 7:
+              action(value);
+              _context2.next = 13;
+              break;
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](1);
+              confirmDialog(CONFIRM_DIALOG_OPTIONS).then(function () {
+                action(value);
+                setError(null);
+              });
+            case 13:
+              _context2.next = 17;
+              break;
+            case 15:
+              action(value);
+              setError(null);
+            case 17:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[1, 10]]);
+    }));
+  }
+  var onChangeLocationTab = function onChangeLocationTab(index) {
+    onChangeTab(setActiveTafIndex, index);
+  };
   var onChangeTimeSlot = function onChangeTimeSlot(newTimeSlot) {
+    onChangeTab(changeTimeSlot, newTimeSlot);
+  };
+  var changeTimeSlot = function changeTimeSlot(newTimeSlot) {
     setTimeSlot(newTimeSlot);
     setLocations(newTimeSlot === 'ACTIVE' ? current : upcoming);
     setActiveTafIndex(0);
@@ -5120,6 +5566,16 @@ var TafLayout = function TafLayout(_ref) {
     var newIndex = newActiveIndex !== -1 ? newActiveIndex : activeTafIndex;
     setActiveTafIndex(newIndex); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tafList, setLocations]);
+  React__default.useEffect(function () {
+    var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
+      setError(null);
+    }, 10000) : null;
+    return function () {
+      if (cancelErrorTimeout !== null) {
+        clearTimeout(cancelErrorTimeout);
+      }
+    };
+  }, [error, setError]);
   if (!tafList) {
     return null;
@@ -5162,7 +5618,7 @@ var TafLayout = function TafLayout(_ref) {
     xs: 12,
     sm: 9
   }, /*#__PURE__*/React__default.createElement(TopTabs, {
-    tafFromBackend: lastUpcomingTaf,
+    tafFromBackend: lastCurrentTaf,
     timeSlot: timeSlot,
     onChangeTimeSlot: onChangeTimeSlot
   }))), /*#__PURE__*/React__default.createElement(Grid, {
@@ -5186,7 +5642,7 @@ var TafLayout = function TafLayout(_ref) {
   }, /*#__PURE__*/React__default.createElement(LocationTabs, {
     tafList: locations,
     activeIndex: activeTafIndex,
-    onChangeTab: setActiveTafIndex,
+    onChangeTab: onChangeLocationTab,
     timeSlot: timeSlot
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -5194,8 +5650,6 @@ var TafLayout = function TafLayout(_ref) {
   }, /*#__PURE__*/React__default.createElement(Card, {
     variant: "outlined",
     sx: {
-      padding: 1,
-      paddingTop: 0,
       marginBottom: '12px',
       position: 'relative'
     }
@@ -5210,24 +5664,50 @@ var TafLayout = function TafLayout(_ref) {
       activeTafIndex: activeTafIndex,
       index: index,
       tafFromBackend: tafFromBackend,
-      onPostTaf: onPostTaf
+      isIssuesPaneOpen: isIssuesPaneOpen,
+      setIsIssuesPaneOpen: onToggleIssuesPane,
+      isFormDisabled: isFormDisabled,
+      setIsFormDisabled: setIsFormDisabled,
+      postTaf: postTaf,
+      isLoading: isLoading,
+      error: error
     });
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3,
-    sx: {
-      height: '100%'
+    xs: 0,
+    sm: 3,
+    height: {
+      xs: 0,
+      sm: '100%'
     },
-    display: {
-      xs: 'none',
-      sm: 'block'
+    width: {
+      xs: 0,
+      sm: '100%'
     }
   }, /*#__PURE__*/React__default.createElement(TacOverview, {
     upcomingTafs: upcoming,
     currentTafs: current,
     expiredTafs: expired,
-    activeTaf: activeTaf
-  })))))));
+    activeTaf: activeTaf,
+    isFormDisabled: isFormDisabled
+  })))))), /*#__PURE__*/React__default.createElement(IssuesPaneWrapper, {
+    handleClose: onCloseIssuesPane,
+    isOpen: isIssuesPaneOpen,
+    startPosition: startPosition
+  }));
+};
+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)));
 };
 var TafModule = function TafModule() {
@@ -5303,15 +5783,17 @@ 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",
+    shouldClose: true
   }), /*#__PURE__*/React.createElement(TafLayout, {
     tafList: tafList,
     onPostTaf: reFetchNewTafList
   }));
 };
-var Wrapper = function Wrapper() {
-  return /*#__PURE__*/React.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React.createElement(TafModule, null));
+var Wrapper = function Wrapper(props) {
+  return /*#__PURE__*/React.createElement(TafWrapper, Object.assign({}, props), /*#__PURE__*/React.createElement(TafModule, null));
 };
 /* *
@@ -5330,7 +5812,7 @@ var Wrapper = function Wrapper() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
+var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
   var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
   return {
     // api data
@@ -5346,4 +5828,1052 @@ var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, aut
   };
 };
-export { TafFormWrapper, Wrapper as TafModule, createApi };
+var currentDate = moment.utc().format('YYYY-MM-DD');
+var tomorrowDate = moment.utc().add(1, 'day').format('YYYY-MM-DD');
+var airportPeriod = 6;
+var airportValidity = 40;
+var validDateRange = function validDateRange(refHour, period) {
+  var startHour = period * Math.floor(parseInt(refHour.format('HH'), 10) / period) % 24;
+  var start = refHour.set({
+    hour: startHour,
+    minute: 0,
+    second: 0
+  });
+  var end = start.clone().add(airportValidity, 'hours');
+  return [start.format('YYYY-MM-DDTHH:mm:ss'), end.format('YYYY-MM-DDTHH:mm:ss')];
+};
+var dateAdd = function dateAdd(refDateAsString, hours) {
+  return moment.utc(refDateAsString).add(hours, 'hours').format('YYYY-MM-DDTHH:mm:ss');
+};
+var _validDateRange = validDateRange(moment.utc(), airportPeriod),
+    _validDateRange2 = _slicedToArray(_validDateRange, 2),
+    currentValidDateStart = _validDateRange2[0],
+    currentValidDateEnd = _validDateRange2[1];
+var _validDateRange3 = validDateRange(moment.utc().add(6, 'hours'), airportPeriod),
+    _validDateRange4 = _slicedToArray(_validDateRange3, 2),
+    upcomingValidDateStart = _validDateRange4[0],
+    upcomingValidDateEnd = _validDateRange4[1];
+var _validDateRange5 = validDateRange(moment.utc().add(-6, 'hours'), airportPeriod),
+    _validDateRange6 = _slicedToArray(_validDateRange5, 2),
+    expiredValidDateStart = _validDateRange6[0],
+    expiredValidDateEnd = _validDateRange6[1];
+var fakeTafList = [{
+  creationDate: upcomingValidDateStart,
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: '5f9583fjdf0f337925',
+    baseTime: upcomingValidDateStart,
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    location: 'EHAM',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateStart,
+        end: upcomingValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: '5f9583fjd111137925',
+    baseTime: upcomingValidDateStart,
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    location: 'EHRD',
+    status: 'DRAFT',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateStart,
+        end: upcomingValidDateEnd
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      cavOK: true
+    }
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['CANCELLED', 'AMENDED', 'DISCARDED'],
+  taf: {
+    uuid: '754905485',
+    baseTime: upcomingValidDateStart,
+    previousId: '5f9583fjdf45ff4330f337925',
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    previousValidDateStart: upcomingValidDateStart,
+    previousValidDateEnd: upcomingValidDateEnd,
+    location: 'EHLE',
+    status: 'DRAFT_AMENDED',
+    type: 'NORMAL',
+    messageType: 'AMD',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateStart,
+        end: upcomingValidDateEnd
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    },
+    changeGroups: [{
+      change: 'TEMPO',
+      probability: 'PROB30',
+      valid: {
+        start: dateAdd(upcomingValidDateStart, 3),
+        end: dateAdd(upcomingValidDateStart, 4)
+      },
+      visibility: {
+        range: 100,
+        unit: 'M'
+      },
+      cloud: {
+        cloud1: {
+          verticalVisibility: 5
+        }
+      }
+    }]
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: {
+    uuid: '43545345345',
+    issueDate: upcomingValidDateStart,
+    baseTime: "".concat(currentDate, "T18:00:00Z"),
+    validDateStart: "".concat(currentDate, "T18:00:00Z"),
+    validDateEnd: upcomingValidDateEnd,
+    previousId: 'jkdjkdfjkgdf',
+    previousValidDateStart: upcomingValidDateStart,
+    previousValidDateEnd: upcomingValidDateEnd,
+    location: 'EHLE',
+    status: 'CORRECTED',
+    type: 'NORMAL',
+    messageType: 'COR',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateStart,
+        end: upcomingValidDateEnd
+      },
+      wind: {
+        direction: 350,
+        speed: 46,
+        gust: 67,
+        unit: 'KT'
+      },
+      cavOK: true
+    },
+    changeGroups: [{
+      change: 'BECMG',
+      valid: {
+        start: dateAdd(upcomingValidDateStart, 1),
+        end: dateAdd(upcomingValidDateStart, 2)
+      },
+      visibility: {
+        range: 1000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: 'MIFG'
+      },
+      cloud: {
+        cloud1: 'NSC'
+      }
+    }, {
+      change: 'FM',
+      valid: {
+        start: dateAdd(upcomingValidDateStart, 2)
+      },
+      visibility: {
+        range: 6000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: '+SHRA'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 40
+        },
+        cloud2: {
+          coverage: 'OVC',
+          height: 60,
+          type: 'CB'
+        }
+      }
+    }]
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: {
+    uuid: '5f9583fjdf45ff4330f337925',
+    issueDate: upcomingValidDateStart,
+    baseTime: upcomingValidDateStart,
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    location: 'EHGG',
+    status: 'PUBLISHED',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateEnd,
+        end: upcomingValidDateEnd
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    },
+    changeGroups: [{
+      change: 'TEMPO',
+      probability: 'PROB30',
+      valid: {
+        start: dateAdd(upcomingValidDateStart, 1),
+        end: dateAdd(upcomingValidDateStart, 2)
+      },
+      visibility: {
+        range: 200,
+        unit: 'M'
+      },
+      cloud: {
+        cloud1: {
+          verticalVisibility: 5
+        }
+      }
+    }]
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['AMENDED'],
+  taf: {
+    uuid: '5464565464',
+    previousId: '5445fghrfg3546456',
+    issueDate: upcomingValidDateStart,
+    baseTime: upcomingValidDateStart,
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    previousValidDateStart: upcomingValidDateStart,
+    previousValidDateEnd: upcomingValidDateEnd,
+    location: 'EHBK',
+    status: 'CANCELLED',
+    type: 'NORMAL',
+    messageType: 'CNL',
+    baseForecast: {
+      valid: {
+        start: upcomingValidDateStart,
+        end: upcomingValidDateEnd
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    }
+  }
+}, {
+  creationDate: upcomingValidDateStart,
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: {
+    uuid: 'gh56734fghfgh',
+    previousId: '8574jnf93475',
+    issueDate: "".concat(currentDate, "T16:16:00Z"),
+    baseTime: upcomingValidDateStart,
+    validDateStart: upcomingValidDateStart,
+    validDateEnd: upcomingValidDateEnd,
+    previousValidDateStart: upcomingValidDateStart,
+    previousValidDateEnd: upcomingValidDateEnd,
+    location: 'TNCB',
+    status: 'AMENDED',
+    type: 'NORMAL',
+    messageType: 'AMD',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T16:12:00Z"),
+        end: upcomingValidDateEnd
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    }
+  }
+}, {
+  creationDate: currentValidDateStart,
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: {
+    uuid: 'giskdj09845872039',
+    issueDate: currentValidDateStart,
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'EHAM',
+    status: 'PUBLISHED',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      },
+      visibility: {
+        range: 500,
+        unit: 'M'
+      },
+      wind: {
+        direction: 200,
+        speed: 20,
+        gust: 35,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 40
+        }
+      }
+    }
+  }
+}, {
+  creationDate: currentValidDateStart,
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: 'ghskdj09845872039',
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'EHRD',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: currentValidDateStart,
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: 'ghskdj09845872040',
+    issueDate: currentValidDateStart,
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'EHLE',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: "".concat(currentDate, "T06:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: 'ghskdj09845872041',
+    issueDate: currentValidDateStart,
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'EHGG',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: "".concat(currentDate, "T06:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: 'ghskdj09845872042',
+    issueDate: currentValidDateStart,
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'EHBK',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: "".concat(currentDate, "T06:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: 'ghskdj09845872043',
+    issueDate: currentValidDateStart,
+    baseTime: currentValidDateStart,
+    validDateStart: currentValidDateStart,
+    validDateEnd: currentValidDateEnd,
+    location: 'TNCB',
+    status: 'NEW',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: currentValidDateStart,
+        end: currentValidDateEnd
+      }
+    }
+  }
+}, {
+  creationDate: expiredValidDateStart,
+  canbe: [],
+  taf: {
+    uuid: 'sdkjhsdf90845890',
+    issueDate: expiredValidDateStart,
+    baseTime: expiredValidDateStart,
+    validDateStart: expiredValidDateStart,
+    validDateEnd: expiredValidDateEnd,
+    location: 'EHAM',
+    status: 'EXPIRED',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: expiredValidDateStart,
+        end: expiredValidDateEnd
+      },
+      cavOK: true,
+      wind: {
+        direction: 50,
+        speed: 5,
+        unit: 'KT'
+      }
+    },
+    changeGroups: [{
+      change: 'BECMG',
+      valid: {
+        start: dateAdd(expiredValidDateStart, 1),
+        end: dateAdd(expiredValidDateStart, 4)
+      },
+      visibility: {
+        range: 1000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: 'MIFG'
+      }
+    }, {
+      change: 'FM',
+      valid: {
+        start: dateAdd(expiredValidDateStart, 5)
+      },
+      visibility: {
+        range: 6000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: '+SHRA'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 40
+        },
+        cloud2: {
+          coverage: 'OVC',
+          height: 60,
+          type: 'CB'
+        }
+      }
+    }]
+  }
+}];
+var fakeNewTaf = {
+  creationDate: "".concat(currentDate, "T12:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    type: 'NORMAL',
+    messageType: 'ORG',
+    status: 'NEW',
+    uuid: '5f9583fjdf0445332f337925',
+    baseTime: "".concat(currentDate, "T12:00:00Z"),
+    validDateStart: "".concat(currentDate, "T12:00:00Z"),
+    validDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    location: 'EHBK',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T12:00:00Z"),
+        end: "".concat(tomorrowDate, "T18:00:00Z")
+      }
+    }
+  }
+};
+({
+  creationDate: "2022-01-06T12:00:00Z",
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: Object.assign(Object.assign({}, fakeNewTaf.taf), {
+    baseTime: "2022-01-06T12:00:00Z",
+    validDateStart: "2022-01-06T12:00:00Z",
+    validDateEnd: "2022-01-07T18:00:00Z",
+    baseForecast: {
+      valid: {
+        start: "2022-01-06T12:00:00Z",
+        end: "2022-01-07T18:00:00Z"
+      }
+    }
+  })
+});
+var fakePublishedTaf = {
+  creationDate: "".concat(currentDate, "T12:00:00Z"),
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: {
+    uuid: 'slsdkjg-023895',
+    issueDate: "".concat(currentDate, "T12:00:00Z"),
+    baseTime: "".concat(currentDate, "T12:00:00Z"),
+    validDateStart: "".concat(currentDate, "T12:00:00Z"),
+    validDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    location: 'EHLE',
+    status: 'PUBLISHED',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T12:00:00Z"),
+        end: "".concat(tomorrowDate, "T18:00:00Z")
+      },
+      wind: {
+        direction: 50,
+        speed: 5,
+        unit: 'KT'
+      },
+      cavOK: true
+    },
+    changeGroups: [{
+      change: 'FM',
+      valid: {
+        start: "".concat(currentDate, "T12:00:00Z")
+      },
+      visibility: {
+        range: 6000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: '+SHRA'
+      },
+      wind: {
+        direction: 10,
+        speed: 10,
+        unit: 'KT',
+        gust: 35
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 40
+        },
+        cloud2: {
+          coverage: 'OVC',
+          height: 60,
+          type: 'CB'
+        }
+      }
+    }, {
+      change: 'BECMG',
+      valid: {
+        start: "".concat(currentDate, "T23:00:00Z"),
+        end: "".concat(tomorrowDate, "T01:00:00Z")
+      },
+      wind: {
+        direction: 150,
+        speed: 5,
+        unit: 'KT'
+      },
+      visibility: {
+        range: 1000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: 'MIFG'
+      }
+    }]
+  }
+};
+({
+  creationDate: "2022-01-06T12:00:00Z",
+  canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  taf: Object.assign(Object.assign({}, fakePublishedTaf.taf), {
+    location: 'EHGG',
+    baseTime: "2022-01-06T12:00:00Z",
+    issueDate: "2022-01-06T12:00:00Z",
+    validDateStart: "2022-01-06T12:00:00Z",
+    validDateEnd: "2022-01-07T18:00:00Z",
+    baseForecast: Object.assign(Object.assign({}, fakePublishedTaf.taf.baseForecast), {
+      valid: {
+        start: "2022-01-06T12:00:00Z",
+        end: "2022-01-07T18:00:00Z"
+      }
+    }),
+    changeGroups: [{
+      change: 'FM',
+      valid: {
+        start: "2022-01-06T12:00:00Z"
+      },
+      visibility: {
+        range: 6000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: '+SHRA'
+      },
+      wind: {
+        direction: 10,
+        speed: 10,
+        unit: 'KT',
+        gust: 35
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 40
+        },
+        cloud2: {
+          coverage: 'OVC',
+          height: 60,
+          type: 'CB'
+        }
+      }
+    }, {
+      change: 'BECMG',
+      valid: {
+        start: "2022-01-06T23:00:00Z",
+        end: "2022-01-07T00:00:00Z"
+      },
+      wind: {
+        direction: 150,
+        speed: 5,
+        unit: 'KT'
+      },
+      visibility: {
+        range: 1000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: 'MIFG'
+      }
+    }]
+  })
+});
+var fakeDraftTaf = {
+  creationDate: "".concat(currentDate, "T18:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: '5f9583fjdf0f337925',
+    baseTime: "".concat(currentDate, "T18:00:00Z"),
+    validDateStart: "".concat(currentDate, "T18:00:00Z"),
+    validDateEnd: "".concat(tomorrowDate, "T23:59:00Z"),
+    location: 'EHLE',
+    status: 'DRAFT',
+    type: 'NORMAL',
+    messageType: 'ORG',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T18:00:00Z"),
+        end: "".concat(tomorrowDate, "T23:59:00Z")
+      },
+      wind: {
+        direction: 150,
+        speed: 5,
+        unit: 'KT'
+      },
+      visibility: {
+        range: 1000,
+        unit: 'M'
+      },
+      weather: {
+        weather1: 'BCFG'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'FEW',
+          height: 15
+        }
+      }
+    }
+  }
+};
+({
+  creationDate: "2022-01-06T18:00:00Z",
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: Object.assign(Object.assign({}, fakeDraftTaf.taf), {
+    baseTime: "2022-01-06T18:00:00Z",
+    validDateStart: "2022-01-06T18:00:00Z",
+    validDateEnd: "2022-01-07T23:59:00Z",
+    baseForecast: Object.assign(Object.assign({}, fakeDraftTaf.taf.baseForecast), {
+      valid: {
+        start: "2022-01-06T18:00:00Z",
+        end: "2022-01-07T23:59:00Z"
+      }
+    })
+  })
+});
+var fakeDraftAmendmentTaf = {
+  creationDate: "".concat(currentDate, "T14:00:00Z"),
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: {
+    uuid: '954905487',
+    previousId: '5f9583fjdf45ff4330f337925',
+    issueDate: "".concat(currentDate, "T14:00:00Z"),
+    baseTime: "".concat(currentDate, "T12:00:00Z"),
+    validDateStart: "".concat(currentDate, "T14:00:00Z"),
+    validDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    previousValidDateStart: "".concat(currentDate, "T12:00:00Z"),
+    previousValidDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    location: 'EHAM',
+    status: 'DRAFT_AMENDED',
+    type: 'NORMAL',
+    messageType: 'AMD',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T14:00:00Z"),
+        end: "".concat(tomorrowDate, "T18:00:00Z")
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    },
+    changeGroups: [{
+      change: 'TEMPO',
+      probability: 'PROB30',
+      valid: {
+        start: "".concat(currentDate, "T15:00:00Z"),
+        end: "".concat(currentDate, "T16:00:00Z")
+      },
+      visibility: {
+        range: 100,
+        unit: 'M'
+      },
+      cloud: {
+        cloud1: {
+          verticalVisibility: 5
+        }
+      }
+    }]
+  }
+};
+({
+  creationDate: "2022-01-06T14:00:00Z",
+  canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  taf: Object.assign(Object.assign({}, fakeDraftAmendmentTaf.taf), {
+    location: 'EHRD',
+    issueDate: "2022-01-06T14:00:00Z",
+    baseTime: "2022-01-06T12:00:00Z",
+    validDateStart: "2022-01-06T14:00:00Z",
+    validDateEnd: "2022-01-07T18:00:00Z",
+    previousValidDateStart: "2022-01-06T12:00:00Z",
+    previousValidDateEnd: "2022-01-07T18:00:00Z",
+    baseForecast: Object.assign(Object.assign({}, fakeDraftAmendmentTaf.taf.baseForecast), {
+      valid: {
+        start: "2022-01-06T14:00:00Z",
+        end: "2022-01-07T18:00:00Z"
+      }
+    }),
+    changeGroups: []
+  })
+});
+var fakeAmendmentTaf = {
+  creationDate: "".concat(currentDate, "T14:00:00Z"),
+  canbe: ['CANCELLED', 'CORRECTED', 'AMENDED'],
+  taf: {
+    uuid: '754905486',
+    previousId: '5f9583fjdf45ff4330f337925',
+    issueDate: "".concat(currentDate, "T14:00:00Z"),
+    baseTime: "".concat(currentDate, "T12:00:00Z"),
+    validDateStart: "".concat(currentDate, "T14:00:00Z"),
+    validDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    previousValidDateStart: "".concat(currentDate, "T12:00:00Z"),
+    previousValidDateEnd: "".concat(tomorrowDate, "T18:00:00Z"),
+    location: 'EHAM',
+    status: 'AMENDED',
+    type: 'NORMAL',
+    messageType: 'AMD',
+    baseForecast: {
+      valid: {
+        start: "".concat(currentDate, "T14:00:00Z"),
+        end: "".concat(tomorrowDate, "T18:00:00Z")
+      },
+      visibility: {
+        range: 600,
+        unit: 'M'
+      },
+      wind: {
+        direction: 180,
+        speed: 10,
+        unit: 'KT'
+      },
+      weather: {
+        weather1: 'SN'
+      },
+      cloud: {
+        cloud1: {
+          coverage: 'BKN',
+          height: 35
+        }
+      }
+    }
+  }
+};
+({
+  creationDate: "2022-01-06T14:00:00Z",
+  canbe: ['CANCELLED', 'CORRECTED', 'AMENDED'],
+  taf: Object.assign(Object.assign({}, fakeAmendmentTaf.taf), {
+    uuid: '7549058980',
+    issueDate: "2022-01-06T14:00:00Z",
+    baseTime: "2022-01-06T12:00:00Z",
+    validDateStart: "2022-01-06T14:00:00Z",
+    validDateEnd: "2022-01-07T18:00:00Z",
+    previousValidDateStart: "2022-01-06T12:00:00Z",
+    previousValidDateEnd: "2022-01-07T18:00:00Z",
+    baseForecast: Object.assign(Object.assign({}, fakeAmendmentTaf.taf.baseForecast), {
+      valid: {
+        start: "2022-01-06T14:00:00Z",
+        end: "2022-01-07T18:00:00Z"
+      }
+    })
+  })
+});
+var fakeTafTac = 'TAF EHAM 0812/0918 20020G35KT 0500 SN BKN040\nBECMG 0814/0816 0700 BKN001=';
+var fakePromise = function fakePromise(withRandomError) {
+  return new Promise(function (resolve, reject) {
+    setTimeout(function () {
+      if (!withRandomError) return resolve();
+      var randomError = Math.floor(Math.random() * 4) + 1;
+      return randomError === 4 ? reject(new Error('something went wrong')) : resolve();
+    }, 300);
+  });
+};
+var fakeAxiosInstance = {
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
+  get: function get(_url, _params) {
+    return fakePromise(false);
+  },
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
+  post: function post(_url, _params) {
+    return fakePromise(false);
+  }
+};
+var createApi = function createApi() {
+  return {
+    getTafList: function getTafList() {
+      // eslint-disable-next-line no-console
+      console.log('Retrieving new TAF list');
+      return fakeAxiosInstance.get('/taflist').then(function () {
+        return {
+          data: _toConsumableArray(fakeTafList)
+        };
+      });
+    },
+    getTAC: function getTAC() {
+      // eslint-disable-next-line no-console
+      return fakeAxiosInstance.post('/taf2tac').then(function () {
+        return {
+          data: fakeTafTac
+        };
+      });
+    },
+    postTaf: function postTaf(_postTaf) {
+      // eslint-disable-next-line no-console
+      console.log("The new status of the taf will be ".concat(_postTaf.changeStatusTo)); // eslint-disable-next-line no-console
+      console.log('form has been posted with following values:', _postTaf.taf);
+      return fakeAxiosInstance.post('/taf', _postTaf);
+    }
+  };
+};
+/* *
+ * 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 };