@opengeoweb/taf 2.3.0 → 2.5.0

package/index.esm.js

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import React__default from 'react';
-import { TextField, SvgIcon, Grid, Box, Tooltip, Chip, Typography, Button, IconButton, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Skeleton, Backdrop, CircularProgress } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
-import moment from 'moment';
-import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
-import { DragIndicator, Close, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@mui/icons-material';
-import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
-import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
+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 { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
+import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
+import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, getAxiosErrorMessage, AlertBanner, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
+import moment from 'moment';
 import { isEqual } from 'lodash';
+import makeStyles from '@mui/styles/makeStyles';
+import { DragIndicator, Schedule, CheckCircle } from '@mui/icons-material';
+import ReactDOM from 'react-dom';
+import LinearProgress from '@mui/material/LinearProgress';
+import DoDisturbIcon from '@mui/icons-material/DoDisturb';
+import Box$1 from '@mui/material/Box';
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -118,134 +122,6 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _createForOfIteratorHelper(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-
-      var F = function () {};
-
-      return {
-        s: F,
-        n: function () {
-          if (i >= o.length) return {
-            done: true
-          };
-          return {
-            done: false,
-            value: o[i++]
-          };
-        },
-        e: function (e) {
-          throw e;
-        },
-        f: F
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  var normalCompletion = true,
-      didErr = false,
-      err;
-  return {
-    s: function () {
-      it = o[Symbol.iterator]();
-    },
-    n: function () {
-      var step = it.next();
-      normalCompletion = step.done;
-      return step;
-    },
-    e: function (e) {
-      didErr = true;
-      err = e;
-    },
-    f: function () {
-      try {
-        if (!normalCompletion && it.return != null) it.return();
-      } finally {
-        if (didErr) throw err;
-      }
-    }
-  };
-}
-
-/* *
- * 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 useTafSettings = function useTafSettings( // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types
-tafConfig) {
-  var locations = tafConfig.locations;
-  return {
-    locations: locations
-  };
-};
-
-var location_indicator_mwo = "EHDB";
-var locations = {
-	EHAM: {
-		validity_duration: 30,
-		activity_period: 6,
-		label: "Schiphol"
-	},
-	EHRD: {
-		validity_duration: 30,
-		activity_period: 6,
-		label: "Rotterdam"
-	},
-	EHGG: {
-		validity_duration: 30,
-		activity_period: 6,
-		label: "Eelde"
-	},
-	EHBK: {
-		validity_duration: 30,
-		activity_period: 6,
-		label: "Maastricht"
-	},
-	EHLE: {
-		validity_duration: 30,
-		activity_period: 6,
-		label: "Lelystad"
-	},
-	TNCB: {
-		validity_duration: 30,
-		activity_period: 6,
-		label: "Bonaire"
-	}
-};
-var locationOrder = [
-	"EHAM",
-	"EHRD",
-	"EHLE",
-	"EHGG",
-	"EHBK",
-	"TNCB"
-];
-var tafConfig = {
-	location_indicator_mwo: location_indicator_mwo,
-	locations: locations,
-	locationOrder: locationOrder
-};
-
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -2340,8 +2216,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) {
@@ -2417,6 +2294,10 @@ 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] : '';
 
@@ -2428,7 +2309,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) {
@@ -2436,14 +2317,13 @@ 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) {
       retrieveTAC(taf);
@@ -2516,6 +2396,7 @@ var getConfirmationDialogTitle = function getConfirmationDialogTitle(action) {
   if (action === 'PUBLISH') return 'Publish';
   if (action === 'AMEND') return 'This TAF is an amendment';
   if (action === 'CORRECT') return 'This TAF is a correction';
+  if (action === 'CANCEL') return 'Cancel TAF';
   return 'Cancel TAF';
 }; // Check if the amended/corrected TAF has been changed. Only compare the fields users are able to fill in
 // (i.e. exclude baseforecast valid time as that gets updated when doing an amendment automatically outside of the users influence)
@@ -2557,90 +2438,210 @@ var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel
         return 'Discard';
       }
 
+    case 'CANCEL':
+      return 'Cancel';
+
     default:
       {
         return 'Publish';
       }
   }
 };
+var emptyChangegroup = {
+  valid: '',
+  wind: '',
+  visibility: '',
+  weather: {
+    weather1: null,
+    weather2: null,
+    weather3: null
+  },
+  cloud: {
+    cloud1: null,
+    cloud2: null,
+    cloud3: null,
+    cloud4: null
+  },
+  change: null,
+  probability: null
+};
+var getTafStatusLabel = function getTafStatusLabel(status) {
+  switch (status) {
+    case 'DRAFT_AMENDED':
+      return 'draft amended';
 
-var getTafErrors = function getTafErrors(name, errors) {
-  var nameAsArray = name.split('.');
+    case 'DRAFT_CORRECTED':
+      return 'draft corrected';
 
-  if (nameAsArray[0].includes('changeGroups')) {
-    if (errors.changeGroups) {
-      var changeGroupNum = nameAsArray[0].slice(13, nameAsArray[0].length - 1);
-      var restArray = nameAsArray.slice(1);
-      return getDeepProperty(restArray, errors.changeGroups[changeGroupNum]);
-    } // No changegroup errors
+    default:
+      return status.toLocaleLowerCase();
+  }
+};
+var getMessageType = function getMessageType(taf, tafAction) {
+  if (tafAction === 'CORRECT') {
+    return 'COR';
+  }
 
+  if (tafAction === 'AMEND') {
+    return 'AMD';
+  }
 
-    return null;
+  if (tafAction === 'CANCEL') {
+    return 'CNL';
   }
 
-  return getDeepProperty(nameAsArray, errors);
+  return taf.messageType;
+}; // For corrections and amendment we need to add the previousValidStart and End for the TAC converter
+
+var getAmendedCorrectedTafTimes = function getAmendedCorrectedTafTimes(taf, tafAction) {
+  var previousValidDateStart = taf.previousValidDateStart && tafAction !== 'AMEND' ? taf.previousValidDateStart : taf.validDateStart;
+  var previousValidDateEnd = taf.previousValidDateEnd && tafAction !== 'AMEND' ? taf.previousValidDateEnd : taf.validDateEnd; // For amendment change valid start time to current time
+  // only do this if we're already within the validity period
+
+  if ((tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND') && moment.utc() >= moment.utc(taf.validDateStart)) {
+    var now = moment.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+    var validObj = {
+      start: now,
+      end: taf.baseForecast.valid.end
+    };
+    return Object.assign(Object.assign({}, taf), {
+      previousValidDateStart: previousValidDateStart,
+      previousValidDateEnd: previousValidDateEnd,
+      validDateStart: now,
+      baseForecast: Object.assign(Object.assign({}, taf.baseForecast), {
+        valid: validObj
+      })
+    });
+  }
+
+  return Object.assign(Object.assign({}, taf), {
+    previousValidDateStart: previousValidDateStart,
+    previousValidDateEnd: previousValidDateEnd
+  });
+};
+var prepareTafValues = function prepareTafValues(_taf, tafAction) {
+  var addEmptyChangeGroup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
+  // If action is AMEND/DRAFT_AMEND - update validity start time to current time
+  var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
+  return Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
+    messageType: getMessageType(taf, tafAction),
+    baseForecast: 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';
 
-var getDisplayValue = function getDisplayValue(value, disabled) {
-  return disabled && !value ? '-' : value;
+    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 useStyles$8 = makeStyles(function (theme) {
+
+var textFieldStyle = function textFieldStyle(theme) {
   return {
-    textFieldInput: {
-      height: 46,
-      width: 56,
+    // input
+    marginRight: '2px',
+    marginBottom: '4px',
+    width: 56,
+    height: 46,
+    input: {
       textAlign: 'center',
       fontSize: 10,
       fontWeight: 500,
       paddingLeft: 0,
       paddingRight: 0,
-      marginBotom: '2px',
       '&.Mui-disabled': {
-        '-webkit-text-fill-color': theme.palette.geowebColors.typographyAndIcons.text,
-        color: theme.palette.geowebColors.typographyAndIcons.text,
-        '&:before': {
-          border: 'none'
-        }
+        color: 'geowebColors.typographyAndIcons.text',
+        WebkitTextFillColor: theme.palette.geowebColors.typographyAndIcons.text
+      },
+      // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1995 disables the default autofill styling, should be a better fix
+      '&:-webkit-autofill': {
+        WebkitTransitionDelay: '86400s' // 1 day delay
+
       }
     },
-    textFieldLabel: {
+    label: {
+      transformOrigin: 'center top',
+      right: 0,
+      textAlign: 'center',
       fontSize: '10px',
       '&.Mui-disabled': {
-        color: theme.palette.geowebColors.captions.captionStatus.rgba
+        color: 'geowebColors.captions.captionStatus.rgba'
       },
       whiteSpace: 'nowrap',
-      maxWidth: '100%'
+      maxWidth: '100%',
+      transform: 'translate(0px, 16px) scale(1)'
     },
-    textFieldLabelShrink: {
+    // shrink
+    ' .MuiInputLabel-shrink': {
       transform: 'translate(2px, 10px) scale(0.75) !important',
-      letterSpacing: '0.33px'
+      letterSpacing: '0.33px',
+      textAlign: 'left'
+    },
+    // root
+    '&': {
+      '.Mui-disabled:before': {
+        borderColor: 'transparent'
+      }
     }
   };
-});
+};
+
+var getTafErrors = function getTafErrors(name, errors) {
+  var nameAsArray = name.split('.');
+
+  if (nameAsArray[0].includes('changeGroups')) {
+    if (errors.changeGroups) {
+      var changeGroupNum = nameAsArray[0].slice(13, nameAsArray[0].length - 1);
+      var restArray = nameAsArray.slice(1);
+      return getDeepProperty(restArray, errors.changeGroups[changeGroupNum]);
+    } // No changegroup errors
+
+
+    return null;
+  }
+
+  return getDeepProperty(nameAsArray, errors);
+};
+
+var getDisplayValue = function getDisplayValue(value, disabled) {
+  return disabled && !value ? '-' : value;
+};
 var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
-  var classes = useStyles$8();
   return /*#__PURE__*/React__default.createElement(TextField, Object.assign({
     type: "text",
     variant: "filled",
-    InputProps: {
-      classes: {
-        root: classes.textFieldInput,
-        input: classes.textFieldInput
-      }
-    },
-    InputLabelProps: {
-      classes: {
-        root: classes.textFieldLabel,
-        shrink: classes.textFieldLabelShrink
-      }
-    },
-    sx: {
-      marginRight: '2px',
-      marginBottom: '2px'
-    }
+    sx: textFieldStyle
   }, props));
 }, function (prevProps, nextProps) {
-  return prevProps.value === nextProps.value && prevProps.error === nextProps.error && prevProps.name === nextProps.name;
+  return prevProps.value === nextProps.value && prevProps.error === nextProps.error && prevProps.name === nextProps.name && prevProps.disabled === nextProps.disabled;
 });
 
 var TafFormTextField = function TafFormTextField(_ref) {
@@ -2868,7 +2869,8 @@ var TafFormOptionsButton = function TafFormOptionsButton(_ref) {
   return /*#__PURE__*/React.createElement(ToggleMenu, {
     buttonTestId: "tafFormOptions[".concat(index, "]"),
     buttonSx: {
-      margin: '14px 10px'
+      marginTop: '10px',
+      marginLeft: '4px'
     },
     menuItems: isChangeGroup ? menuItemsChangeGroup : menuItemsBaseForecast
   });
@@ -3043,13 +3045,14 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     justifyContent: "flex-start",
     "data-testid": "row-".concat(namePrefix),
     container: true,
-    ref: ref
+    ref: ref,
+    columns: 24
   }, props), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 11
-  }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justifyContent: "flex-end"
+    justifyContent: "flex-end",
+    xs: 24,
+    sm: 23
   }, !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Type",
     name: fieldNames.messageType,
@@ -3306,9 +3309,16 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
         }
       }
     }
-  }))), !disabled && /*#__PURE__*/React__default.createElement(Grid, {
+  })), !disabled && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 1
+    container: true,
+    justifyContent: "flex-end",
+    alignItems: "flex-end",
+    xs: 24,
+    sm: 1,
+    sx: {
+      marginBottom: '16px'
+    }
   }, /*#__PURE__*/React__default.createElement(TafFormOptionsButton, {
     isChangeGroup: isChangeGroup,
     addChangeGroupBelow: addChangeGroupBelow,
@@ -3337,53 +3347,348 @@ 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';
 
-var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
-  switch (sumOfErrors) {
-    case 0:
-      return '0 issues';
-
-    case 1:
-      return '1 issue';
+    case 'CORRECT':
+    case 'DRAFT_CORRECT':
+      return 'DRAFT_CORRECT';
 
     default:
-      return "".concat(sumOfErrors, " issues");
+      return 'DRAFT';
   }
 };
 
-var buttonColors = {
-  green: '#72bb23',
-  red: '#c00000'
-};
+var tafActionToPublishAction = function tafActionToPublishAction(tafAction) {
+  switch (tafAction) {
+    case 'AMEND':
+    case 'DRAFT_AMEND':
+      return 'AMEND';
 
-var buttonStyle = function buttonStyle(color) {
-  var buttonColor = buttonColors[color];
-  return {
-    width: '74px',
-    color: '#ffffff',
-    backgroundColor: buttonColor,
-    '&:hover': {
-      backgroundColor: buttonColor
+    case 'CORRECT':
+    case 'DRAFT_CORRECT':
+      return 'CORRECT';
+
+    default:
+      return 'PUBLISH';
+  }
+};
+
+var buttonsStyle = {
+  button: {
+    minWidth: {
+      xs: '56px',
+      sm: '64px'
     },
-    '&:focus': {
-      backgroundColor: buttonColor
+    width: {
+      xs: '56px',
+      sm: '64px'
     },
-    fontSize: 12
+    marginLeft: {
+      xs: 0.5,
+      sm: 1
+    },
+    marginTop: 3,
+    marginBottom: 3
+  }
+};
+
+var ViewModeButtons = function ViewModeButtons(_ref) {
+  var canBe = _ref.canBe,
+      onTafViewModeButtonPress = _ref.onTafViewModeButtonPress;
+  return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, canBe.includes('CANCELLED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "canceltaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      return onTafViewModeButtonPress('CANCEL');
+    }
+  }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "correcttaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      return onTafViewModeButtonPress('CORRECT');
+    }
+  }, "Correct"), canBe.includes('AMENDED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "amendtaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      return onTafViewModeButtonPress('AMEND');
+    }
+  }, "Amend"));
+};
+
+var TafFormButtons = function TafFormButtons(_ref2) {
+  var _ref2$isFormDisabled = _ref2.isFormDisabled,
+      isFormDisabled = _ref2$isFormDisabled === void 0 ? false : _ref2$isFormDisabled,
+      tafAction = _ref2.tafAction,
+      _ref2$canBe = _ref2.canBe,
+      canBe = _ref2$canBe === void 0 ? [] : _ref2$canBe,
+      onTafEditModeButtonPress = _ref2.onTafEditModeButtonPress,
+      onTafViewModeButtonPress = _ref2.onTafViewModeButtonPress;
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justifyContent: "flex-end",
+    sx: buttonsStyle,
+    columns: 24
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    container: true,
+    justifyContent: "flex-end",
+    xs: 24,
+    sm: 23
+  }, isFormDisabled ? /*#__PURE__*/React__default.createElement(ViewModeButtons, {
+    canBe: canBe,
+    onTafViewModeButtonPress: onTafViewModeButtonPress
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "discardtaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      // Simply discard the changes and close the dialog.
+      onTafEditModeButtonPress('DISCARD');
+    }
+  }, "Discard"), /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "savedrafttaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      /* Save the TAF as draft:
+      if action NEW or DRAFT - new status will be DRAFT -- default
+      if action AMEND - new status will be DRAFT_AMENDED
+      if action CORRECT - new status will be DRAFT_CORRECTED
+      if action DRAFT_AMEND - new status will be DRAFT_AMENDED
+      if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
+      */
+      onTafEditModeButtonPress(tafActionToDraftAction(tafAction));
+    }
+  }, "Save"), /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "publishtaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      /* Publish the TAF:
+      if action NEW or DRAFT - new status will be PUBLISHED -- default
+      if action AMEND - new status will be AMENDED
+      if action CORRECT - new status will be CORRECTED
+      if action DRAFT_AMEND - new status will be AMENDED
+      if action DRAFT_CORRECT - new status will be CORRECTED
+      */
+      onTafEditModeButtonPress(tafActionToPublishAction(tafAction));
+    }
+  }, "Publish"))), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sm: 1
+  }));
+};
+
+/* *
+ * 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 useStyles = makeStyles(function () {
+  return {
+    dragHandle: {
+      backgroundColor: 'transparent',
+      '&:hover': {
+        backgroundColor: 'transparent'
+      },
+      cursor: function cursor(isSorting) {
+        return isSorting ? 'grabbing' : 'grab';
+      }
+    }
   };
+});
+
+var DragHandle = function DragHandle(_ref) {
+  var _ref$isSorting = _ref.isSorting,
+      isSorting = _ref$isSorting === void 0 ? false : _ref$isSorting,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      index = _ref.index;
+  var classes = useStyles(isSorting);
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "".concat(classes.dragHandle, " handle"),
+    "data-testid": "dragHandle-".concat(index),
+    disableRipple: true,
+    disabled: isDisabled,
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(DragIndicator, 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var getCustomError = function getCustomError(error) {
+  var name = error.ref.name;
+  var isChangeGroup = name.includes('changeGroups');
+  var matchRowNumber = name.match(/\[(.*?)\]/);
+  var row = matchRowNumber ? parseInt(matchRowNumber[1], 10) : null;
+  return Object.assign(Object.assign({}, error), {
+    isChangeGroup: isChangeGroup,
+    row: row
+  });
+};
+var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
+  switch (sumOfErrors) {
+    case 0:
+      return '0 issues';
+
+    case 1:
+      return '1 issue';
+
+    default:
+      return "".concat(sumOfErrors, " issues");
+  }
+};
+
+var getErrorValues = function getErrorValues(fieldErrors) {
+  if (!fieldErrors) return [];
+  return Object.keys(fieldErrors).reduce(function (list, key) {
+    var error = Object.assign({}, fieldErrors[key]);
+
+    if (error.ref) {
+      return list.concat(getCustomError(error));
+    }
+
+    return list.concat(getErrorValues(error));
+  }, []);
+};
+
+var filterDuplicateErrors = function filterDuplicateErrors(errors) {
+  return errors.reduce(function (list, error) {
+    // check on type validateRequiredSub and validateRequiredMainOptional since these are giving 'duplicates'
+    if (error.type === 'validateRequiredSub') {
+      var exist = list.find(function (e) {
+        return e.type === 'validateRequiredSub' && e.row === error.row;
+      });
+      return exist ? list : list.concat(error);
+    }
+
+    if (error.type === 'validateRequiredMainOptional') {
+      var _exist = list.find(function (e) {
+        return e.type === 'validateRequiredMainOptional' && e.row === error.row;
+      });
+
+      return _exist ? list : list.concat(error);
+    }
+
+    return list.concat(error);
+  }, []);
+};
+var getErrors = function getErrors(errors) {
+  var errorList = Object.keys(errors).reduce(function (list, key) {
+    var errorValue = errors[key];
+
+    if (Array.isArray(errorValue)) {
+      var errorValues = errorValue.reduce(function (l, i) {
+        return l.concat(getErrorValues(i));
+      }, []);
+      return list.concat.apply(list, _toConsumableArray(errorValues));
+    }
+
+    return list.concat(getErrorValues(errorValue));
+  }, []);
+  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 togglePane = _ref.togglePane,
-      sumOfErrors = _ref.sumOfErrors;
-  var color = sumOfErrors > 0 ? 'red' : 'green';
+  var _ref$errors = _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 toggleIssuesPane = function toggleIssuesPane(newPosition) {
+    return setIsIssuesPaneOpen(!isIssuesPaneOpen, newPosition);
+  };
+
+  var onClickButton = function onClickButton(event) {
+    var _a;
+
+    var _event$currentTarget$ = event.currentTarget.getBoundingClientRect(),
+        left = _event$currentTarget$.left,
+        top = _event$currentTarget$.top;
+
+    var parentOffset = ((_a = document.getElementById('tafmodule')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
+      top: 0,
+      left: 0
+    };
+    var newPosition = {
+      left: left - parentOffset.left + 100,
+      top: top - parentOffset.top
+    };
+    toggleIssuesPane(newPosition);
+  };
+
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: "View details"
   }, /*#__PURE__*/React.createElement(Chip, {
     "data-testid": "issuesButton",
+    className: "status-".concat(errorStatus),
     size: "small",
-    label: getIssuesLabel(sumOfErrors),
-    style: Object.assign({}, buttonStyle(color)),
-    onClick: togglePane
+    label: getIssuesLabel(totalErrors),
+    onClick: onClickButton,
+    sx: {
+      width: '74px',
+      color: '#ffffff',
+      backgroundColor: buttonColor,
+      '&:hover': {
+        backgroundColor: buttonColor
+      },
+      '&:focus': {
+        backgroundColor: buttonColor
+      },
+      fontSize: 12
+    }
   }));
 };
 
@@ -3424,32 +3729,6 @@ var ThumbsUp = function ThumbsUp(props) {
   })));
 };
 
-/* *
- * 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 useStyles$7 = makeStyles({
-  paneContent: {
-    marginTop: '16px',
-    marginLeft: '24px'
-  },
-  image: {
-    fontSize: '4rem'
-  }
-});
-
 var getPaneTitle = function getPaneTitle(sumOfErrors) {
   switch (sumOfErrors) {
     case 0:
@@ -3488,7 +3767,7 @@ var humanizeErrorMessage = function humanizeErrorMessage(nameAsString) {
   var nameWithoutBrackets = nameAsString.replace(/[[\]']+/g, '');
   var nameLowerCase = nameWithoutBrackets.toLowerCase();
 
-  var _nameLowerCase$split$ = nameLowerCase.split(/([0-9]+)/) // split numbers from field and build array
+  var _nameLowerCase$split$ = nameLowerCase.split(/([0-9]+)/) // split num bers from field and build array
   .filter(function (s) {
     return s.length;
   }),
@@ -3516,33 +3795,73 @@ var getErrorMessage = function getErrorMessage(error, index) {
   var fieldErrorTitle = humanizeErrorMessage(firstNamePart);
   return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(getErrorDefaultMessage(error));
 };
+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 IssuesPane = function IssuesPane(_ref3) {
-  var isOpen = _ref3.isOpen,
-      handleClose = _ref3.handleClose,
-      _ref3$errorList = _ref3.errorList,
-      errorList = _ref3$errorList === void 0 ? [] : _ref3$errorList;
-  var classes = useStyles$7();
-  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    startSize: {
+  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: {
-      right: 20,
-      top: 50
-    },
+    startPosition: startPosition,
     minWidth: 300,
     onClose: handleClose,
     title: getPaneTitle(errorList.length),
     headerSize: "xs",
     isOpen: isOpen,
     "data-testid": "moveable-issues-pane",
-    bounds: "body"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.paneContent
-  }, errorList.length === 0 && /*#__PURE__*/React.createElement("div", {
-    className: classes.image,
+    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
@@ -3552,387 +3871,178 @@ var IssuesPane = function IssuesPane(_ref3) {
       variant: "body1",
       "data-testid": "errorMessage"
     }, getErrorMessage(error, index));
-  })));
+  }))), rootElement);
 };
 
-var getCustomError = function getCustomError(error) {
-  var name = error.ref.name;
-  var isChangeGroup = name.includes('changeGroups');
-  var matchRowNumber = name.match(/\[(.*?)\]/);
-  var row = matchRowNumber ? parseInt(matchRowNumber[1], 10) : null;
-  return Object.assign(Object.assign({}, error), {
-    isChangeGroup: isChangeGroup,
-    row: row
-  });
+var TafModuleContext = /*#__PURE__*/React.createContext({
+  onValidateForm: null,
+  registerValidateForm: null,
+  tafAction: null,
+  setTafAction: null
+});
+var useTafModuleContext = function useTafModuleContext() {
+  return React.useContext(TafModuleContext);
 };
+var useTafModuleState = function useTafModuleState() {
+  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 getErrorValues = function getErrorValues(fieldErrors) {
-  if (!fieldErrors) return [];
-  return Object.keys(fieldErrors).reduce(function (list, key) {
-    var error = Object.assign({}, fieldErrors[key]);
+  var _React$useState3 = React.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      tafAction = _React$useState4[0],
+      setTafAction = _React$useState4[1];
 
-    if (error.ref) {
-      return list.concat(getCustomError(error));
-    }
+  var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
+    registerValidateForm(function () {
+      return promiseToRegister;
+    });
+  };
 
-    return list.concat(getErrorValues(error));
-  }, []);
+  return {
+    onValidateForm: onValidateForm,
+    registerValidateForm: onRegisterValidateForm,
+    tafAction: tafAction,
+    setTafAction: setTafAction
+  };
 };
-
-var getErrors = function getErrors(errors) {
-  var errorList = Object.keys(errors).reduce(function (list, key) {
-    var errorValue = errors[key];
-
-    if (Array.isArray(errorValue)) {
-      var errorValues = errorValue.reduce(function (l, i) {
-        return l.concat(getErrorValues(i));
-      }, []);
-      return list.concat.apply(list, _toConsumableArray(errorValues));
-    }
-
-    return list.concat(getErrorValues(errorValue));
-  }, []);
-  return errorList;
+var TafModuleProvider = function TafModuleProvider(_ref) {
+  var children = _ref.children;
+  var contextState = useTafModuleState();
+  return /*#__PURE__*/React.createElement(TafModuleContext.Provider, {
+    value: contextState
+  }, children);
 };
 
-var filterDuplicateErrors = function filterDuplicateErrors(errors) {
-  return errors.reduce(function (list, error) {
-    // check on type validateRequiredSub and validateRequiredMainOptional since these are giving 'duplicates'
-    if (error.type === 'validateRequiredSub') {
-      var exist = list.find(function (e) {
-        return e.type === 'validateRequiredSub' && e.row === error.row;
-      });
-      return exist ? list : list.concat(error);
-    }
+var noop = function noop() {};
 
-    if (error.type === 'validateRequiredMainOptional') {
-      var _exist = list.find(function (e) {
-        return e.type === 'validateRequiredMainOptional' && e.row === error.row;
-      });
+var TafForm = function TafForm(_ref) {
+  var tafFromBackend = _ref.tafFromBackend,
+      _ref$onFormAction = _ref.onFormAction,
+      onFormAction = _ref$onFormAction === void 0 ? function () {
+    return null;
+  } : _ref$onFormAction,
+      _ref$onFormDirty = _ref.onFormDirty,
+      onFormDirty = _ref$onFormDirty === void 0 ? function () {
+    return null;
+  } : _ref$onFormDirty,
+      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
+      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
+      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
+      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
+    return null;
+  } : _ref$setIsIssuesPaneO,
+      _ref$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();
 
-      return _exist ? list : list.concat(error);
-    }
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
+      DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
 
-    return list.concat(error);
-  }, []);
-};
+  var _useTafModuleContext = useTafModuleContext(),
+      registerValidateForm = _useTafModuleContext.registerValidateForm,
+      tafAction = _useTafModuleContext.tafAction,
+      setTafAction = _useTafModuleContext.setTafAction;
+
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
 
-var TafFormButtons = function TafFormButtons(_ref) {
-  var tafAction = _ref.tafAction,
-      onTafFormButtonPress = _ref.onTafFormButtonPress;
+  var _useIsMounted = useIsMounted(),
+      isMounted = _useIsMounted.isMounted;
 
   var _useFormContext = useFormContext(),
-      errors = _useFormContext.errors;
+      control = _useFormContext.control,
+      handleSubmit = _useFormContext.handleSubmit,
+      trigger = _useFormContext.trigger,
+      formState = _useFormContext.formState,
+      getValues = _useFormContext.getValues,
+      setValue = _useFormContext.setValue,
+      reset = _useFormContext.reset;
 
-  var errorList = filterDuplicateErrors(getErrors(errors));
+  var isFormDirty = formState.isDirty,
+      errors = formState.errors;
+  usePreventBrowserClose(isFormDirty && !isDisabled);
+  var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
-  var _React$useState = React__default.useState(false),
+  var _React$useState = React__default.useState(getValues()),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      isIssuesPaneOpen = _React$useState2[0],
-      setIsIssuesPaneOpen = _React$useState2[1];
+      delayedFormValues = _React$useState2[0],
+      setDelayedFormValues = _React$useState2[1];
+
+  var _useTACGenerator = useTACGenerator(tafFromBackend.taf, api.getTAC),
+      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
+      TAC = _useTACGenerator2[0],
+      updateTAC = _useTACGenerator2[1];
+
+  var hasErrors = Object.keys(errors).length;
 
-  var toggleIssuesPane = function toggleIssuesPane() {
-    return setIsIssuesPaneOpen(!isIssuesPaneOpen);
+  var onFormBlur = function onFormBlur() {
+    setDelayedFormValues(getValues());
   };
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "space-between",
-    alignItems: "center",
-    sx: {
-      margin: '10px 0px 22px 0px'
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(IssuesButton, {
-    sumOfErrors: errorList.length,
-    togglePane: toggleIssuesPane
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "flex-end",
-    sx: {
-      paddingRight: '28px'
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "discardtaf",
-    variant: "tertiary",
-    onClick: function onClick() {
-      // Simply discard the changes and close the dialog.
-      onTafFormButtonPress('DISCARD');
-    }
-  }, "Discard"), /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "savedrafttaf",
-    variant: "tertiary",
-    sx: {
-      margin: '0px 10px'
-    },
-    onClick: function onClick() {
-      /* Save the TAF as draft:
-      if action NEW or DRAFT - new status will be DRAFT -- default
-      if action AMEND - new status will be DRAFT_AMENDED
-      if action CORRECT - new status will be DRAFT_CORRECTED
-      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':
-          onTafFormButtonPress('DRAFT_AMEND');
-          break;
+  React__default.useEffect(function () {
+    if (isMounted.current && isFormDirty) {
+      var newTAC = hasErrors ? null : convertTafValuesToObject(delayedFormValues);
+      updateTAC(newTAC);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          onTafFormButtonPress('DRAFT_CORRECT');
-          break;
+  }, [delayedFormValues]);
+  React__default.useEffect(function () {
+    // prevent updating an error while typing
+    if (!hasErrors && isFormDirty && document.activeElement.tagName !== 'INPUT') {
+      updateTAC(convertTafValuesToObject(delayedFormValues));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-        default:
-          onTafFormButtonPress('DRAFT');
-          break;
-      }
-    }
-  }, "Save"), /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "publishtaf",
-    variant: "tertiary",
-    onClick: function onClick() {
-      /* Publish the TAF:
-      if action NEW or DRAFT - new status will be PUBLISHED -- default
-      if action AMEND - new status will be AMENDED
-      if action CORRECT - new status will be CORRECTED
-      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':
-          onTafFormButtonPress('AMEND');
-          break;
+  }, [hasErrors]); // Needed to be able to show a confirmation dialog on switching tabs when form is edited and not saved
 
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          onTafFormButtonPress('CORRECT');
-          break;
+  React__default.useEffect(function () {
+    onFormDirty(isFormDirty);
+  }, [isFormDirty, onFormDirty]);
 
-        default:
-          onTafFormButtonPress('PUBLISH');
-          break;
-      }
-    }
-  }, "Publish"))), /*#__PURE__*/React__default.createElement(IssuesPane, {
-    errorList: errorList,
-    handleClose: toggleIssuesPane,
-    isOpen: isIssuesPaneOpen
-  }));
-};
+  var onSubmit = function onSubmit(data) {
+    // eslint-disable-next-line no-console
+    console.log('submit:', convertTafValuesToObject(data));
+  };
 
-/* *
- * 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 useStyles$6 = makeStyles(function () {
-  return {
-    dragHandle: {
-      backgroundColor: 'transparent',
-      '&:hover': {
-        backgroundColor: 'transparent'
-      },
-      cursor: function cursor(isSorting) {
-        return isSorting ? 'grabbing' : 'grab';
-      }
-    }
+  var showConfirmDialog = function showConfirmDialog(action) {
+    return confirmDialog({
+      title: getConfirmationDialogTitle(action),
+      description: getConfirmationDialogContent(action, function () {
+        return isTafAmendedCorrectedChanged(isFormDirty, originalTaf, convertTafValuesToObject(getValues()));
+      }),
+      confirmLabel: getConfirmationDialogButtonLabel(action)
+    });
   };
-});
 
-var DragHandle = function DragHandle(_ref) {
-  var _ref$isSorting = _ref.isSorting,
-      isSorting = _ref$isSorting === void 0 ? false : _ref$isSorting,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      index = _ref.index;
-  var classes = useStyles$6(isSorting);
-  return /*#__PURE__*/React__default.createElement(IconButton, {
-    className: "".concat(classes.dragHandle, " handle"),
-    "data-testid": "dragHandle-".concat(index),
-    disableRipple: true,
-    disabled: isDisabled,
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(DragIndicator, null));
-};
+  var resetFormValues = function resetFormValues() {
+    var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+    var shouldAddEmptyChangGroup = arguments.length > 1 ? arguments[1] : undefined;
+    var newTaf = prepareTafValues(tafFromBackend.taf, action, shouldAddEmptyChangGroup);
+    reset(newTaf);
+  };
 
-/* *
- * 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 TafListButtons = function TafListButtons(_ref) {
-  var uuid = _ref.uuid,
-      canBe = _ref.canBe,
-      onClickTafActionButton = _ref.onClickTafActionButton,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'taflist-canbebuttons' : _ref$testId;
-  return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "flex-end",
-    alignItems: "center",
-    "data-testid": testId,
-    sx: {
-      margin: '10px 0px 22px 0px',
-      paddingRight: '28px'
-    }
-  }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "canceltaf",
-    variant: "tertiary",
-    onClick: function onClick() {
-      return onClickTafActionButton('CANCEL', uuid);
-    }
-  }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "correctaf",
-    variant: "tertiary",
-    sx: {
-      margin: '0px 10px'
-    },
-    onClick: function onClick() {
-      return onClickTafActionButton('CORRECT', uuid);
-    }
-  }, "Correct"), canBe.includes('AMENDED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "amendtaf",
-    variant: "tertiary",
-    onClick: function onClick() {
-      return onClickTafActionButton('AMEND', uuid);
-    }
-  }, "Amend"));
-};
-
-var noop = function noop() {};
-
-var emptyChangegroup = {
-  valid: '',
-  wind: '',
-  visibility: '',
-  weather: {
-    weather1: null,
-    weather2: null,
-    weather3: null
-  },
-  cloud: {
-    cloud1: null,
-    cloud2: null,
-    cloud3: null,
-    cloud4: null
-  },
-  change: null,
-  probability: null
-};
-
-var TafForm = function TafForm(_ref) {
-  var isDisabled = _ref.isDisabled,
-      tafAction = _ref.tafAction,
-      _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 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,
-      getValues = _useFormContext.getValues,
-      setValue = _useFormContext.setValue;
-
-  var isFormDirty = formState.isDirty,
-      errors = formState.errors;
-  usePreventBrowserClose(isFormDirty && !isDisabled);
-  var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
-
-  var _React$useState = React__default.useState(watch()),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      delayedFormValues = _React$useState2[0],
-      setDelayedFormValues = _React$useState2[1];
-
-  var _useTACGenerator = useTACGenerator(convertTafValuesToObject(delayedFormValues), api.getTAC, staticTAC),
-      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
-      TAC = _useTACGenerator2[0],
-      updateTAC = _useTACGenerator2[1];
-
-  var hasErrors = Object.keys(errors).length;
-
-  var onFormBlur = function onFormBlur() {
-    setDelayedFormValues(getValues());
-  };
-
-  React__default.useEffect(function () {
-    if (staticTAC === '' && isMounted.current && isFormDirty) {
-      var newTAC = hasErrors ? null : convertTafValuesToObject(delayedFormValues);
-      updateTAC(newTAC);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [delayedFormValues]);
-  React__default.useEffect(function () {
-    // prevent updating an error while typing
-    if (!hasErrors && isFormDirty && document.activeElement.tagName !== 'INPUT') {
-      updateTAC(convertTafValuesToObject(delayedFormValues));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [hasErrors]);
-
-  var onSubmit = function onSubmit(data) {
-    // eslint-disable-next-line no-console
-    console.log('submit:', convertTafValuesToObject(data));
-  };
-
-  var showConfirmDialog = function showConfirmDialog(action) {
-    return confirmDialog({
-      title: getConfirmationDialogTitle(action),
-      description: getConfirmationDialogContent(action, function () {
-        return isTafAmendedCorrectedChanged(isFormDirty, originalTaf, convertTafValuesToObject(getValues()));
-      }),
-      confirmLabel: getConfirmationDialogButtonLabel(action)
-    });
+  var resetForm = function resetForm() {
+    var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+    var resetDisabled = arguments.length > 1 ? arguments[1] : undefined;
+    var shouldAddEmptyChangGroup = !(tafFromBackend.taf && tafFromBackend.taf.changeGroups) && !resetDisabled;
+    resetFormValues(action, shouldAddEmptyChangGroup);
+    setIsDisabled(resetDisabled);
+    setTafAction(action);
   };
 
-  var onTafButtonPress = function onTafButtonPress(action) {
+  var onTafEditModeButtonPress = function onTafEditModeButtonPress(action) {
     switch (action) {
       case 'DRAFT':
       case 'DRAFT_AMEND':
@@ -3940,16 +4050,17 @@ var TafForm = function TafForm(_ref) {
         toggleIsDraft(true);
         handleSubmit(function (data) {
           onFormAction(action, convertTafValuesToObject(data));
+          reset(getValues());
         })();
         break;
 
       case 'DISCARD':
         if (isFormDirty) {
           showConfirmDialog(action).then(function () {
-            onFormAction(action);
+            resetForm(undefined, isDefaultDisabled);
           });
         } else {
-          onFormAction(action);
+          resetForm(undefined, isDefaultDisabled);
         }
 
         break;
@@ -3959,9 +4070,35 @@ var TafForm = function TafForm(_ref) {
       case 'PUBLISH':
         toggleIsDraft(false);
         handleSubmit(function (data) {
-          showConfirmDialog(action).then(function () {
-            onFormAction(action, convertTafValuesToObject(data));
-          });
+          return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+            var didSucceed;
+            return regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.next = 2;
+                    return showConfirmDialog(action);
+
+                  case 2:
+                    _context.next = 4;
+                    return onFormAction(action, convertTafValuesToObject(data));
+
+                  case 4:
+                    didSucceed = _context.sent;
+
+                    if (didSucceed) {
+                      setIsDisabled(true);
+                      reset(prepareTafValues(convertTafValuesToObject(data), action, false));
+                      setTafAction(null);
+                    }
+
+                  case 6:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
         })();
         break;
 
@@ -3969,13 +4106,18 @@ var TafForm = function TafForm(_ref) {
         onFormAction(action);
         break;
     }
-  }; // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1906 hookup actions
-
+  };
 
   var onTafViewModeButtonPress = function onTafViewModeButtonPress(action) {
     switch (action) {
+      case 'CANCEL':
+        showConfirmDialog(action).then(function () {
+          onFormAction(action, convertTafValuesToObject(prepareTafValues(tafFromBackend.taf, action)));
+        });
+        break;
+
       default:
-        onFormAction(action);
+        resetForm(action, false);
         break;
     }
   };
@@ -4061,16 +4203,53 @@ 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 () {
-    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),
@@ -4078,7 +4257,8 @@ var TafForm = function TafForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(Typography, {
     sx: {
       fontSize: '20px',
-      fontWeight: 500
+      fontWeight: 500,
+      height: '24px'
     }
   }, "TAC"), /*#__PURE__*/React__default.createElement(Typography, {
     sx: {
@@ -4093,7 +4273,8 @@ var TafForm = function TafForm(_ref) {
       "data-testid": "tafform-tac-message-line",
       sx: {
         textIndent: '-0.7em',
-        borderRadius: '3px'
+        borderRadius: '3px',
+        paddingRight: '0.7em'
       }
     }, line);
   })), /*#__PURE__*/React__default.createElement(TafFormRow, {
@@ -4135,15 +4316,26 @@ var TafForm = function TafForm(_ref) {
         index: index
       })
     });
-  })), // TODO: these buttons should be combined, and the Issuesbuton should be separate
-  !isDisabled ? /*#__PURE__*/React__default.createElement(TafFormButtons, {
+  })), !isDisabled && /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justifyContent: "space-between",
+    alignItems: "center",
+    sx: {
+      marginLeft: 1.5,
+      marginTop: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true
+  }, /*#__PURE__*/React__default.createElement(IssuesButton, {
+    errors: errors,
+    isIssuesPaneOpen: isIssuesPaneOpen,
+    setIsIssuesPaneOpen: setIsIssuesPaneOpen
+  }))), /*#__PURE__*/React__default.createElement(TafFormButtons, {
+    isFormDisabled: isDisabled,
     tafAction: tafAction,
-    onTafFormButtonPress: onTafButtonPress
-  }) : /*#__PURE__*/React__default.createElement(TafListButtons, {
-    uuid: originalTaf.uuid,
     canBe: tafFromBackend.canbe,
-    onClickTafActionButton: onTafViewModeButtonPress,
-    testId: "newtaflist-canbebuttons"
+    onTafEditModeButtonPress: onTafEditModeButtonPress,
+    onTafViewModeButtonPress: onTafViewModeButtonPress
   }), hiddenInputFields.map(function (field) {
     return /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
       name: field,
@@ -4165,158 +4357,23 @@ var TafForm = function TafForm(_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 getMessageType = function getMessageType(taf, tafAction) {
-  if (tafAction === 'CORRECT') {
-    return 'COR';
-  }
-
-  if (tafAction === 'AMEND') {
-    return 'AMD';
-  }
-
-  return taf.messageType;
-}; // For corrections and amendment we need to add the previousValidStart and End for the TAC converter
-
-var getAmendedCorrectedTafTimes = function getAmendedCorrectedTafTimes(taf, tafAction) {
-  var previousValidDateStart = taf.previousValidDateStart && tafAction !== 'AMEND' ? taf.previousValidDateStart : taf.validDateStart;
-  var previousValidDateEnd = taf.previousValidDateEnd && tafAction !== 'AMEND' ? taf.previousValidDateEnd : taf.validDateEnd; // For amendment change valid start time to current time
-  // only do this if we're already within the validity period
-
-  if ((tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND') && moment.utc() >= moment.utc(taf.validDateStart)) {
-    var now = moment.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-    var validObj = {
-      start: now,
-      end: taf.baseForecast.valid.end
-    };
-    return Object.assign(Object.assign({}, taf), {
-      previousValidDateStart: previousValidDateStart,
-      previousValidDateEnd: previousValidDateEnd,
-      validDateStart: now,
-      baseForecast: Object.assign(Object.assign({}, taf.baseForecast), {
-        valid: validObj
-      })
-    });
-  }
-
-  return Object.assign(Object.assign({}, taf), {
-    previousValidDateStart: previousValidDateStart,
-    previousValidDateEnd: previousValidDateEnd
-  });
-};
-var prepareTafValues = function prepareTafValues(_taf, tafAction) {
-  var addEmptyChangeGroup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
-  // If action is AMEND/DRAFT_AMEND - update validity start time to current time
-  var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
-  return Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
-    messageType: getMessageType(taf, tafAction),
-    baseForecast: formatFormValues(taf.baseForecast)
-  }), taf.changeGroups && {
-    changeGroups: taf.changeGroups.map(formatFormValues)
-  }), addEmptyChangeGroup && {
-    changeGroups: [emptyChangegroup]
-  });
-};
-
-var TafFormWrapper = function TafFormWrapper(_ref) {
-  var tafFromBackend = _ref.tafFromBackend,
-      mode = _ref.mode,
-      tafAction = _ref.tafAction,
-      _ref$TAC = _ref.TAC,
-      TAC = _ref$TAC === void 0 ? '' : _ref$TAC,
-      onFormAction = _ref.onFormAction;
-  var taf = tafFromBackend.taf;
-  var isDisabled = mode === 'view';
-  var defaultValues = prepareTafValues(taf, tafAction, !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,
-    tafAction: tafAction,
-    staticTAC: TAC,
-    onFormAction: onFormAction,
-    tafFromBackend: tafFromBackend
-  }));
-};
-
-var useStyles$5 = makeStyles({
-  dialogHeader: {
-    borderRadius: '3px',
-    border: 'solid 1px #f6f5f5',
-    zIndex: 1,
-    padding: '16px 20px'
-  },
-  dialogTitle: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  dialogCloseButton: {
-    display: 'flex',
-    justifyContent: 'flex-end'
-  },
-  dialogChildren: {
-    display: 'flex',
-    padding: 20,
-    minHeight: 200,
-    minWidth: 400,
-    height: '100%'
-  }
-});
 
-var ContentDialog = function ContentDialog(_a) {
-  var open = _a.open;
-      _a.toggleDialogStatus;
-      var titleComponent = _a.titleComponent,
-      children = _a.children;
-      _a.onClose;
-      var _a$alertBanner = _a.alertBanner,
-      alertBanner = _a$alertBanner === void 0 ? null : _a$alertBanner,
-      onFormAction = _a.onFormAction,
-      other = __rest(_a, ["open", "toggleDialogStatus", "titleComponent", "children", "onClose", "alertBanner", "onFormAction"]);
-
-  var classes = useStyles$5();
-  return /*#__PURE__*/React.createElement(Dialog, Object.assign({
-    "data-testid": "contentDialog",
-    open: open,
-    onClose: function onClose() {
-      return onFormAction('CLOSE');
-    },
-    maxWidth: other.maxWidth ? other.maxWidth : 'lg',
-    PaperProps: {
-      style: {
-        position: 'inherit'
-      }
-    }
-  }, other), /*#__PURE__*/React.createElement(DialogTitle, {
-    className: classes.dialogHeader
-  }, /*#__PURE__*/React.createElement(Grid, {
-    container: true
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 11,
-    className: classes.dialogTitle
-  }, titleComponent), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: true,
-    className: classes.dialogCloseButton
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "closeDialog",
-    size: "small",
-    onClick: function onClick() {
-      return onFormAction('CLOSE');
-    }
-  }, /*#__PURE__*/React.createElement(Close, null))))), alertBanner !== null && alertBanner, /*#__PURE__*/React.createElement(DialogContent, {
-    className: classes.dialogChildren
-  }, children));
+var TabPanel = function TabPanel(_a) {
+  var children = _a.children,
+      value = _a.value,
+      index = _a.index,
+      other = __rest(_a, ["children", "value", "index"]);
+
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+    role: "tabpanel",
+    hidden: value !== index,
+    id: "simple-tabpanel-".concat(index),
+    "aria-labelledby": "simple-tab-".concat(index),
+    "data-testid": "tab-panel-".concat(index)
+  }, other), value === index && children);
 };
 
 /* *
@@ -4332,361 +4389,168 @@ var ContentDialog = function ContentDialog(_a) {
  * 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 getActiveStatus = function getActiveStatus(listType, className) {
-  return listType === 'ACTIVE' ? /*#__PURE__*/React__default.createElement(CheckCircle, {
-    "data-testid": "status-active",
-    className: className,
-    fontSize: "small"
-  }) : /*#__PURE__*/React__default.createElement(Schedule, {
-    "data-testid": "status-upcoming",
-    className: className,
-    fontSize: "small"
-  });
-};
-
-var getStatusTagList = function getStatusTagList(taf) {
-  // do not return anything if status = 'NEW'
-  if (taf.status === 'NEW') return null;
-
-  if (taf.status === 'CANCELLED') {
-    return /*#__PURE__*/React__default.createElement(StatusTag, {
-      content: "cancelled",
-      color: "red"
-    });
-  }
-
-  return /*#__PURE__*/React__default.createElement(StatusTag, {
-    content: taf.status.toLowerCase(),
-    color: taf.status === 'EXPIRED' ? 'grey' : 'green'
-  });
+var TafHeader = function TafHeader(_ref) {
+  var title = _ref.title;
+  return /*#__PURE__*/React__default.createElement(Typography, {
+    sx: {
+      textAlign: 'center',
+      fontWeight: 500,
+      paddingTop: '6px',
+      textTransform: 'capitalize'
+    }
+  }, title);
 };
 
-var getDraftTitle = function getDraftTitle(status) {
-  if (status === 'DRAFT_AMENDED') {
-    return 'Draft amendment';
-  }
-
-  if (status === 'DRAFT_CORRECTED') {
-    return 'Draft correction';
-  }
-
-  return 'Draft';
+var location_indicator_mwo = "EHDB";
+var locations = {
+	EHAM: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Schiphol"
+	},
+	EHRD: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Rotterdam"
+	},
+	EHGG: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Eelde"
+	},
+	EHBK: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Maastricht"
+	},
+	EHLE: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Lelystad"
+	},
+	TNCB: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Bonaire"
+	}
+};
+var locationOrder = [
+	"EHAM",
+	"EHRD",
+	"EHLE",
+	"EHGG",
+	"EHBK",
+	"TNCB"
+];
+var tafConfig = {
+	location_indicator_mwo: location_indicator_mwo,
+	locations: locations,
+	locationOrder: locationOrder
 };
-var useStyles$4 = makeStyles({
-  cardWrapper: {
-    width: '100%'
-  },
-  cardContent: {
-    width: '100%'
-  },
-  activeStatus: {
-    color: '#72bb23'
-  },
-  font: {
-    fontWeight: 'normal'
-  },
-  alignIcon: {
-    display: 'flex',
-    alignSelf: 'center'
-  }
-});
 
-var TafListRow = function TafListRow(_ref) {
-  var taf = _ref.taf,
-      listType = _ref.listType,
-      _ref$TAC = _ref.TAC,
-      TAC = _ref$TAC === void 0 ? '' : _ref$TAC,
-      _ref$showTac = _ref.showTac,
-      showTac = _ref$showTac === void 0 ? false : _ref$showTac;
-  var classes = useStyles$4();
-  var validTimeDate = moment.utc(taf.validDateStart).format('DD MMM');
-  var baseTime = moment.utc(taf.baseTime).format('HH:mm');
-  return /*#__PURE__*/React__default.createElement(Card, {
-    elevation: 0,
-    className: classes.cardWrapper
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    alignItems: "center",
-    spacing: 1
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 3,
-    sm: 2,
-    md: 1
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle2",
-    noWrap: true,
-    className: classes.font
-  }, taf.location)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 3,
-    sm: 3,
-    md: 1,
-    container: true
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 3,
-    sm: 3,
-    md: 3,
-    className: classes.alignIcon
-  }, showTac && /*#__PURE__*/React__default.createElement(Tooltip, {
-    "data-testid": "taflistrow-tactooltip",
-    title: /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        whiteSpace: 'pre-line'
-      }
-    }, TAC),
-    placement: "bottom-start"
-  }, /*#__PURE__*/React__default.createElement(InfoOutlined, {
-    "data-testid": "taflistrow-tacicon",
-    color: "secondary",
-    fontSize: "small"
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 9,
-    sm: 9,
-    md: 9
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle2",
-    className: classes.font,
-    "data-testid": "baseTime"
-  }, baseTime))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 3,
-    sm: 2,
-    md: 1
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle2",
-    className: classes.font,
-    "data-testid": "validTimeDate"
-  }, validTimeDate)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 3,
-    sm: 3,
-    md: 6
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle2",
-    className: classes.font,
-    "data-testid": "validTimeSlot"
-  }, formatValidToString({
-    start: taf.validDateStart,
-    end: taf.validDateEnd
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12,
-    sm: 4,
-    md: 3
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "flex-start",
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-end"
-  }, taf.status === 'DRAFT' || taf.status === 'DRAFT_CORRECTED' || taf.status === 'DRAFT_AMENDED' ? /*#__PURE__*/React__default.createElement(Button, {
-    color: "secondary",
-    size: "small",
-    "data-testid": "tafRow-draft",
-    startIcon: /*#__PURE__*/React__default.createElement(Create, {
-      fontSize: "small",
-      color: "secondary"
-    })
-  }, getDraftTitle(taf.status)) : getStatusTagList(taf)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: classes.alignIcon
-  }, taf.status !== 'NEW' && taf.status !== 'DRAFT' && taf.status !== 'DRAFT_CORRECTED' && taf.status !== 'DRAFT_AMENDED' && taf.status !== 'CANCELLED' && listType !== 'EXPIRED' && getActiveStatus(listType, classes.activeStatus))))));
+var getTafSettings = function getTafSettings() {
+  return tafConfig;
 };
 
-/* *
- * 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 getListType = function getListType(taf, locationSettings) {
-  if (!taf) return null;
+var tafSettings = getTafSettings();
+var getLocationSetting = function getLocationSetting(location) {
+  var locationSettings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : tafSettings.locations;
+  return locationSettings[location];
+};
+var sortTafsOnLocation = function sortTafsOnLocation(tafList) {
+  var locationOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : tafSettings.locationOrder;
+  if (!tafList) return [];
+  return _toConsumableArray(tafList).sort(function (_ref, _ref2) {
+    var tafA = _ref.taf;
+    var tafB = _ref2.taf;
+    return locationOrder.indexOf(tafA.location) < locationOrder.indexOf(tafB.location) ? -1 : 1;
+  });
+};
+var getBaseTime = function getBaseTime(baseTime, location) {
+  var currentBaseTime = moment.utc(baseTime);
+  var activityPeriod = getLocationSetting(location).activity_period;
+  var nextBaseTime = moment.utc(baseTime).add(activityPeriod, 'hours');
+  return {
+    currentBaseTime: currentBaseTime,
+    nextBaseTime: nextBaseTime
+  };
+};
+var getTafTimeSlot = function getTafTimeSlot(baseTime, location, status) {
   var now = moment.utc();
-  var baseTime = moment.utc(taf.baseTime);
-  var activityPeriod = locationSettings[taf.location].activity_period;
-  var nextBaseTime = moment.utc(taf.baseTime).add(activityPeriod, 'hours');
 
-  if (taf.status === 'EXPIRED') {
+  var _getBaseTime = getBaseTime(baseTime, location),
+      currentBaseTime = _getBaseTime.currentBaseTime,
+      nextBaseTime = _getBaseTime.nextBaseTime;
+
+  if (status === 'EXPIRED') {
     return 'EXPIRED';
   }
 
-  if (baseTime < now && nextBaseTime > now) {
+  if (currentBaseTime < now && nextBaseTime > now) {
     return 'ACTIVE';
   }
 
   return 'UPCOMING';
 };
+var sortTafTimeSlots = function sortTafTimeSlots(tafList) {
+  var sortedListOnLocation = sortTafsOnLocation(tafList);
+  return sortedListOnLocation.reduce(function (sortedTafList, tafFromBackend) {
+    var taf = tafFromBackend.taf;
+    var timeSlot = getTafTimeSlot(taf.baseTime, taf.location, taf.status);
+
+    if (timeSlot === 'EXPIRED') {
+      sortedTafList.expired.push(tafFromBackend);
+    } else if (timeSlot === 'ACTIVE') {
+      sortedTafList.current.push(tafFromBackend);
+    } else {
+      sortedTafList.upcoming.push(tafFromBackend);
+    }
 
-/* *
- * 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 TafFormDialog = function TafFormDialog(_ref) {
-  var open = _ref.open,
-      toggleFormDialog = _ref.toggleFormDialog,
-      tafFromBackend = _ref.tafFromBackend,
-      children = _ref.children,
-      _ref$alertBanner = _ref.alertBanner,
-      alertBanner = _ref$alertBanner === void 0 ? null : _ref$alertBanner,
-      onFormAction = _ref.onFormAction;
-  var taf = tafFromBackend ? tafFromBackend.taf : null;
-
-  var _useTafSettings = useTafSettings(tafConfig),
-      locationSettings = _useTafSettings.locations;
-
-  return /*#__PURE__*/React__default.createElement(ContentDialog, {
-    open: open,
-    toggleDialogStatus: toggleFormDialog,
-    titleComponent: /*#__PURE__*/React__default.createElement(TafListRow, {
-      taf: taf,
-      listType: getListType(taf, locationSettings)
-    }),
-    alertBanner: alertBanner,
-    onFormAction: onFormAction
-  }, children);
+    return sortedTafList;
+  }, {
+    current: [],
+    upcoming: [],
+    expired: []
+  });
 };
-
-var useStyles$3 = makeStyles({
-  accordion: {
-    marginBottom: '5px'
-  },
-  formPadding: {
-    padding: '8px'
+var muiTabA11yProps = function muiTabA11yProps(index) {
+  return {
+    id: "simple-tab-".concat(index),
+    'aria-controls': "simple-tabpanel-".concat(index)
+  };
+};
+var emptyBaseForecast = {
+  wind: '',
+  visibility: '',
+  weather: {
+    weather1: '',
+    weather2: '',
+    weather3: ''
   },
-  expandIcon: {
-    color: '#0075a9'
-  }
-});
-
-var fromStatusToAction = function fromStatusToAction(tafStatus) {
-  switch (tafStatus) {
-    case 'DRAFT':
-      return 'DRAFT';
-
-    case 'DRAFT_AMENDED':
-      return 'DRAFT_AMEND';
-
-    case 'DRAFT_CORRECTED':
-      return 'DRAFT_CORRECT';
-
-    default:
-      return 'NEW';
+  cloud: {
+    cloud1: '',
+    cloud2: '',
+    cloud3: '',
+    cloud4: ''
   }
 };
-
-var TafListAccordion = function TafListAccordion(_ref) {
-  var tafListItem = _ref.tafListItem,
-      listType = _ref.listType,
-      _ref$errorCancelTaf = _ref.errorCancelTaf,
-      errorCancelTaf = _ref$errorCancelTaf === void 0 ? [] : _ref$errorCancelTaf,
-      onClickTafActionButton = _ref.onClickTafActionButton;
-  var classes = useStyles$3();
-  var status = tafListItem.taf.status;
-
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
-
-  var _useTACGenerator = useTACGenerator(tafListItem.taf, api.getTAC),
-      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
-      TAC = _useTACGenerator2[0],
-      requestTAC = _useTACGenerator2[1];
-
-  React__default.useEffect(function () {
-    // only re-retrieve TAC if draft state
-    if (tafListItem.taf.status === 'DRAFT' || tafListItem.taf.status === 'DRAFT_AMENDED' || tafListItem.taf.status === 'DRAFT_CORRECTED') {
-      requestTAC(tafListItem.taf);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [tafListItem.taf]);
-  var popOut = status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED';
-  return /*#__PURE__*/React__default.createElement(Accordion, Object.assign({
-    "data-testid": "tafListItem",
-    className: classes.accordion
-  }, popOut ? {
-    expanded: false
-  } : {}, {
-    onClick: function onClick() {
-      if (popOut) {
-        onClickTafActionButton(fromStatusToAction(tafListItem.taf.status), tafListItem.taf.uuid);
-      }
-    },
-    TransitionProps: {
-      unmountOnExit: true
-    }
-  }), /*#__PURE__*/React__default.createElement(AccordionSummary, {
-    "data-testid": "tafListSectionAccordionSummary",
-    expandIcon: popOut ? /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: "Popout to edit",
-      className: classes.expandIcon
-    }, /*#__PURE__*/React__default.createElement(OpenInNew, {
-      "data-testid": "popOutIcon",
-      fontSize: "small"
-    })) : /*#__PURE__*/React__default.createElement(ExpandMore, {
-      className: classes.expandIcon,
-      "data-testid": "expandIcon"
-    })
-  }, /*#__PURE__*/React__default.createElement(TafListRow, {
-    taf: tafListItem.taf,
-    listType: listType,
-    TAC: TAC,
-    showTac: true
-  })), /*#__PURE__*/React__default.createElement(AccordionDetails, null, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    direction: "column"
-  }, errorCancelTaf.length > 0 && errorCancelTaf.find(function (uuid) {
-    return uuid === tafListItem.taf.uuid;
-  }) && /*#__PURE__*/React__default.createElement(AlertBanner, {
-    severity: "error",
-    title: "Cancelling this TAF failed, please try again",
-    dataTestId: "tafList-cancelAlert"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: classes.formPadding
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(TafFormWrapper, {
-    tafFromBackend: tafListItem,
-    mode: "view",
-    TAC: TAC
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(TafListButtons, {
-    canBe: tafListItem.canbe,
-    uuid: tafListItem.taf.uuid,
-    onClickTafActionButton: onClickTafActionButton
-  }))))));
+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
+  });
 };
 
 /* *
@@ -4702,136 +4566,80 @@ var TafListAccordion = function TafListAccordion(_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 useStyles$2 = makeStyles({
-  listHeaders: {
-    color: '#9d9d9d'
-  },
-  formPadding: {
-    padding: '8px'
-  },
-  paperButton: {
-    width: '100%'
-  }
-});
+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 TafListSection = function TafListSection(_ref) {
-  var tafList = _ref.tafList,
-      title = _ref.title,
-      listType = _ref.listType,
-      _ref$errorCancelTaf = _ref.errorCancelTaf,
-      errorCancelTaf = _ref$errorCancelTaf === void 0 ? [] : _ref$errorCancelTaf,
-      onClickTafActionButton = _ref.onClickTafActionButton;
-  var classes = useStyles$2();
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle2",
-    className: classes.listHeaders
-  }, title), /*#__PURE__*/React__default.createElement("div", {
-    "data-testid": "tafList".concat(listType)
-  }, tafList.map(function (tafListItem) {
-    return /*#__PURE__*/React__default.createElement(TafListAccordion, {
-      key: "".concat(tafListItem.taf.uuid, "-").concat(tafListItem.taf.status),
-      tafListItem: tafListItem,
-      listType: listType,
-      errorCancelTaf: errorCancelTaf,
-      onClickTafActionButton: onClickTafActionButton
-    });
-  })));
-};
+var StatusIcon = function StatusIcon(_ref) {
+  var timeSlot = _ref.timeSlot,
+      status = _ref.status;
 
-var useStyles$1 = makeStyles({
-  accordion: {
-    marginBottom: '5px'
-  },
-  listHeaders: {
-    color: '#9d9d9d'
-  },
-  listBody: {
-    width: '100%',
-    minHeight: '600px'
+  if (status === 'NEW') {
+    return null;
   }
-});
-
-var TafList = function TafList(_ref) {
-  var tafList = _ref.tafList,
-      isLoading = _ref.isLoading,
-      error = _ref.error,
-      _ref$errorCancelTaf = _ref.errorCancelTaf,
-      errorCancelTaf = _ref$errorCancelTaf === void 0 ? [] : _ref$errorCancelTaf,
-      onClickTafActionButton = _ref.onClickTafActionButton;
-  var classes = useStyles$1();
-
-  var _useTafSettings = useTafSettings(tafConfig),
-      locationSettings = _useTafSettings.locations;
 
-  var upcomingTafs = [];
-  var currentTafs = [];
-  var expiredTafs = [];
+  if (status === 'EXPIRED') {
+    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 (tafList) {
-    var _iterator = _createForOfIteratorHelper(tafList),
-        _step;
+  if (status === 'CANCELLED') {
+    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'
+      }
+    }));
+  }
 
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var taf = _step.value;
-        var now = moment.utc();
-        var baseTime = moment.utc(taf.taf.baseTime);
-        var activityPeriod = locationSettings[taf.taf.location].activity_period;
-        var nextBaseTime = moment.utc(taf.taf.baseTime).add(activityPeriod, 'hours');
-
-        if (taf.taf.status === 'EXPIRED') {
-          expiredTafs.push(taf);
-        } else if (baseTime < now && nextBaseTime > now) {
-          currentTafs.push(taf);
-        } else {
-          upcomingTafs.push(taf);
-        }
+  if (status === 'DRAFT' || status === 'DRAFT_CORRECTED' || status === 'DRAFT_AMENDED') {
+    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'
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
+    }));
   }
 
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    direction: "column",
-    alignItems: "stretch"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: classes.listBody
-  }, error && /*#__PURE__*/React__default.createElement(AlertBanner, {
-    severity: "error",
-    title: "An error has occurred while retrieving the list, please try again",
-    info: error.message ? error.message : '',
-    dataTestId: "tafList-alert"
-  }), tafList && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafListSection, {
+  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(Tooltip, {
     title: "Upcoming",
-    listType: "UPCOMING",
-    tafList: upcomingTafs,
-    errorCancelTaf: errorCancelTaf,
-    onClickTafActionButton: onClickTafActionButton
-  }), /*#__PURE__*/React__default.createElement(TafListSection, {
-    title: "Current time slot",
-    listType: "ACTIVE",
-    tafList: currentTafs,
-    errorCancelTaf: errorCancelTaf,
-    onClickTafActionButton: onClickTafActionButton
-  }), /*#__PURE__*/React__default.createElement(TafListSection, {
-    title: "Expired",
-    listType: "EXPIRED",
-    tafList: expiredTafs,
-    errorCancelTaf: errorCancelTaf,
-    onClickTafActionButton: onClickTafActionButton
-  })), isLoading && /*#__PURE__*/React__default.createElement(Skeleton, {
-    "data-testid": "tafList-skeleton",
-    variant: "rectangular",
-    height: "660px"
-  })));
+    placement: "right"
+  }, /*#__PURE__*/React.createElement(Schedule, {
+    "data-testid": "status-upcoming",
+    fontSize: "small",
+    sx: {
+      color: 'geowebColors.functional.success'
+    }
+  }));
 };
 
 /* *
@@ -4847,189 +4655,601 @@ var TafList = function TafList(_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 useStyles = makeStyles({
-  backdrop: {
-    zIndex: 1500,
-    color: '#fff'
-  }
-});
+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 Spinner = function Spinner() {
-  var classes = useStyles();
-  return /*#__PURE__*/React__default.createElement(Backdrop, {
-    open: true,
-    className: classes.backdrop
-  }, /*#__PURE__*/React__default.createElement(CircularProgress, {
-    "data-testid": "spinner",
-    color: "inherit"
-  }));
+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 useTimeoutCancelError = function useTimeoutCancelError() {
-  var pollingInterval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10000;
+var TacContainer = function TacContainer(_ref) {
+  var taf = _ref.taf,
+      _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+      _ref$isFormDisabled = _ref.isFormDisabled,
+      isFormDisabled = _ref$isFormDisabled === void 0 ? false : _ref$isFormDisabled;
 
-  var _React$useState = React__default.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      errorCancelTaf = _React$useState2[0],
-      setErrorCancelTaf = _React$useState2[1];
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
 
-  React__default.useEffect(function () {
-    var cancelErrorMessageHandler = errorCancelTaf.length > 0 ? setTimeout(function () {
-      if (errorCancelTaf.length > 0) {
-        setErrorCancelTaf(errorCancelTaf.slice(1));
-      }
-    }, pollingInterval) : null;
-    return function () {
-      if (cancelErrorMessageHandler !== null) {
-        clearTimeout(cancelErrorMessageHandler);
-      }
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [errorCancelTaf]);
-  return [errorCancelTaf, setErrorCancelTaf];
-};
-var getSelectedTaf = function getSelectedTaf(selectedTafId, tafList) {
-  if (tafList === null) return undefined;
-  return tafList.find(function (element) {
-    return element.taf.uuid === selectedTafId;
-  });
-};
+  var _useTACGenerator = useTACGenerator(taf, api.getTAC),
+      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
+      TAC = _useTACGenerator2[0],
+      retrieveTAC = _useTACGenerator2[1];
 
-var TafWrapper = function TafWrapper() {
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
+  var status = taf.status,
+      location = taf.location,
+      baseTime = taf.baseTime;
+  var locationLabel = getLocationSetting(location).label;
+  var timeSlot = getTafTimeSlot(baseTime, location, status);
 
-  var confirmDialog = useConfirmationDialog();
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues,
+      trigger = _useFormContext.trigger,
+      setValue = _useFormContext.setValue;
 
-  var _React$useState3 = React__default.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isTafDialogOpen = _React$useState4[0],
-      setTafDialogOpen = _React$useState4[1];
+  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);
+  };
 
-  var _React$useState5 = React__default.useState(null),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      selectedTafId = _React$useState6[0],
-      setselectedTafId = _React$useState6[1];
+  React__default.useEffect(function () {
+    if (isActive) {
+      retrieveTAC(taf);
+    }
+  }, [taf, isActive, retrieveTAC]);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      marginBottom: '20px'
+    },
+    "data-location": location,
+    className: isActive ? 'active' : null
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 24
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: 'flex',
+      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,
+    status: status
+  })), /*#__PURE__*/React__default.createElement(Typography, {
+    sx: Object.assign({
+      lineHeight: 1
+    }, isActive && {
+      backgroundColor: 'geowebColors.functional.warningHighlight.rgba',
+      padding: '0 2px',
+      marginLeft: '-2px'
+    })
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    sx: {
+      fontSize: '12px',
+      color: 'geowebColors.captions.captionInformation.rgba'
+    },
+    "data-testid": "tafLocation",
+    component: "span"
+  }, location), /*#__PURE__*/React__default.createElement(Typography, {
+    sx: {
+      fontSize: '12px',
+      marginLeft: '10px'
+    },
+    "data-testid": "tafLocationLabel",
+    component: "span"
+  }, locationLabel))), /*#__PURE__*/React__default.createElement(ExportButton, {
+    onClick: handleExport,
+    isHidden: isFormDisabled || tacHasError(TAC)
+  })), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      fontSize: '12px',
+      letterSpacing: '0.4px',
+      color: 'geowebColors.captions.captionStatus.rgba'
+    }
+  }, TAC.split('\n').map(function (line) {
+    return /*#__PURE__*/React__default.createElement(Box, {
+      component: "span",
+      key: line,
+      sx: {
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      component: "span",
+      sx: Object.assign({
+        display: 'inline',
+        boxDecorationBreak: 'clone',
+        WebkitBoxDecorationBreak: 'clone'
+      }, isActive && {
+        backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
+      })
+    }, line));
+  })));
+};
 
-  var _React$useState7 = React__default.useState(null),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      tafDialogAction = _React$useState8[0],
-      setTafDialogAction = _React$useState8[1];
+var TacOverview = function TacOverview(_ref) {
+  var _ref$upcomingTafs = _ref.upcomingTafs,
+      upcomingTafs = _ref$upcomingTafs === void 0 ? [] : _ref$upcomingTafs,
+      _ref$currentTafs = _ref.currentTafs,
+      currentTafs = _ref$currentTafs === void 0 ? [] : _ref$currentTafs,
+      _ref$expiredTafs = _ref.expiredTafs,
+      expiredTafs = _ref$expiredTafs === void 0 ? [] : _ref$expiredTafs,
+      _ref$hideTitle = _ref.hideTitle,
+      hideTitle = _ref$hideTitle === void 0 ? false : _ref$hideTitle,
+      _ref$activeTaf = _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),
+      activeTab = _React$useState2[0],
+      setActiveTab = _React$useState2[1];
 
-  var _React$useState9 = React__default.useState(false),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      errorPostMessage = _React$useState10[0],
-      setErrorPostMessage = _React$useState10[1];
+  var scrollRef = React__default.useRef(null);
+  var tabs = [{
+    title: 'Upcoming',
+    tafList: upcomingTafs
+  }, {
+    title: 'Current & Expired',
+    tafList: sortTafsOnLocation([].concat(_toConsumableArray(currentTafs), _toConsumableArray(expiredTafs)))
+  }];
+  var activeLocation = (activeTaf === null || activeTaf === void 0 ? void 0 : activeTaf.taf.location) || null;
 
-  var _React$useState11 = React__default.useState(''),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      errorPostMessageText = _React$useState12[0],
-      setErrorPostMessageText = _React$useState12[1];
+  var isActiveLocation = function isActiveLocation(location) {
+    return location === activeLocation;
+  };
 
-  var _React$useState13 = React__default.useState(false),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      showSpinner = _React$useState14[0],
-      setSpinner = _React$useState14[1]; // clear error message for cancel after 10 seconds
+  var scrollToPosition = React__default.useCallback(function () {
+    if (!scrollRef.current) return;
+    var containerTop = scrollRef.current.getBoundingClientRect().top;
+    var firstLocation = scrollRef.current.querySelector("[data-location=\"".concat(activeLocation, "\"]"));
+    var paddingTop = parseInt(getComputedStyle(scrollRef.current).paddingTop, 10);
+    var newScrollPosition = (firstLocation === null || firstLocation === void 0 ? void 0 : firstLocation.getBoundingClientRect().top) - containerTop + scrollRef.current.scrollTop - paddingTop;
+    scrollRef.current.scrollTo(newScrollPosition, newScrollPosition);
+  }, [activeLocation]);
+
+  var resetScrollPosition = function resetScrollPosition() {
+    return scrollRef.current.scrollTo(0, 0);
+  };
+
+  var onChangeTab = function onChangeTab(_event, newValue) {
+    setActiveTab(newValue);
+    resetScrollPosition();
+  };
 
+  React__default.useEffect(function () {
+    if (activeLocation) {
+      scrollToPosition();
+    }
+  }, [activeLocation, scrollToPosition]);
+  React__default.useEffect(function () {
+    var SCROLL_DELAY = 1000;
+    var timer = setTimeout(function () {
+      scrollToPosition();
+    }, SCROLL_DELAY);
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [activeTab, scrollToPosition]);
+  return /*#__PURE__*/React__default.createElement(Card, {
+    variant: "outlined",
+    sx: {
+      maxHeight: '100%',
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      zIndex: 1
+    }
+  }, !hideTitle && /*#__PURE__*/React__default.createElement(TafHeader, {
+    title: "TAC Overview"
+  }), /*#__PURE__*/React__default.createElement(Tabs, {
+    value: activeTab,
+    onChange: onChangeTab,
+    "aria-label": "tabs"
+  }, tabs.map(function (tab, index) {
+    return /*#__PURE__*/React__default.createElement(Tab, Object.assign({
+      key: tab.title,
+      sx: {
+        flexGrow: 1
+      },
+      label: tab.title,
+      "data-testid": "tab-".concat(index)
+    }, muiTabA11yProps(index)));
+  }))), /*#__PURE__*/React__default.createElement(Box, {
+    ref: scrollRef,
+    sx: {
+      padding: '10px',
+      maxHeight: '100%',
+      overflow: 'auto'
+    }
+  }, tabs.map(function (tab, index) {
+    return /*#__PURE__*/React__default.createElement(TabPanel, {
+      key: tab.title,
+      value: activeTab,
+      index: index
+    }, tab.tafList.map(function (_ref2) {
+      var taf = _ref2.taf;
+      return /*#__PURE__*/React__default.createElement(TacContainer, {
+        key: taf.uuid,
+        taf: taf,
+        isActive: isActiveLocation(taf.location),
+        isFormDisabled: isFormDisabled
+      });
+    }));
+  })));
+};
 
-  var _useTimeoutCancelErro = useTimeoutCancelError(),
-      _useTimeoutCancelErro2 = _slicedToArray(_useTimeoutCancelErro, 2),
-      errorCancelTaf = _useTimeoutCancelErro2[0],
-      setErrorCancelTaf = _useTimeoutCancelErro2[1]; // Retrieve list of tafs
+var TacOverviewIcon = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("path", {
+  d: "M3 3h4v4H3V3zm0 7h4v4H3v-4zm0 7h4v4H3v-4zm7-14h11v4H10V3zm0 7h11v4H10v-4zm0 7h11v4H10v-4z"
+}));
 
+var TacOverviewMobile = function TacOverviewMobile(_ref) {
+  var upcomingTafs = _ref.upcomingTafs,
+      currentTafs = _ref.currentTafs,
+      expiredTafs = _ref.expiredTafs,
+      activeTaf = _ref.activeTaf,
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen;
 
-  var _useApi = useApi(api.getTafList),
-      errorList = _useApi.error,
-      isLoadingList = _useApi.isLoading,
-      tafList = _useApi.result,
-      fetchNewTafList = _useApi.fetchApiData;
+  var _React$useState = React.useState(defaultOpen),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      toggleOpen = _React$useState2[1];
 
-  var getNewTafList = function getNewTafList() {
-    fetchNewTafList({});
+  var onClose = function onClose() {
+    return toggleOpen(false);
   };
 
-  usePoller([tafList, errorList], getNewTafList);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolButton, {
+    active: isOpen,
+    onClick: function onClick() {
+      return toggleOpen(true);
+    },
+    "data-testid": "tac-overview-mobile-button",
+    sx: {
+      display: {
+        xs: 'inline-flex',
+        sm: 'none'
+      },
+      position: 'absolute',
+      right: '8px',
+      top: '30px'
+    }
+  }, TacOverviewIcon), /*#__PURE__*/React.createElement(Dialog, {
+    open: isOpen,
+    onClose: onClose,
+    PaperProps: {
+      sx: {
+        margin: 2,
+        width: '100%',
+        height: '100%'
+      }
+    },
+    "data-testid": "tac-overview-mobile"
+  }, /*#__PURE__*/React.createElement(ToolHeader, {
+    title: "TAC Overview",
+    size: "small",
+    isDraggable: false,
+    onClose: onClose
+  }), /*#__PURE__*/React.createElement(TacOverview, {
+    upcomingTafs: upcomingTafs,
+    currentTafs: currentTafs,
+    expiredTafs: expiredTafs,
+    activeTaf: activeTaf,
+    hideTitle: true
+  })));
+};
+
+/* *
+ * 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 formatBaseTime = function formatBaseTime(time) {
+  return time.format('HH:mm DD MMM');
+};
+
+var TopTabs = function TopTabs(_ref) {
+  var timeSlot = _ref.timeSlot,
+      _ref$onChangeTimeSlot = _ref.onChangeTimeSlot,
+      onChangeTimeSlot = _ref$onChangeTimeSlot === void 0 ? function () {} : _ref$onChangeTimeSlot,
+      _ref$tafFromBackend = _ref.tafFromBackend,
+      tafFromBackend = _ref$tafFromBackend === void 0 ? {
+    taf: {
+      baseTime: '2022-01-06T12:00:00Z',
+      location: 'EHAM'
+    }
+  } : _ref$tafFromBackend;
+
+  if (!tafFromBackend) {
+    return null;
+  }
+
+  var activeTab = timeSlot === 'UPCOMING' ? 0 : 1;
+
+  var _getBaseTime = getBaseTime(tafFromBackend.taf.baseTime, tafFromBackend.taf.location),
+      currentBaseTime = _getBaseTime.currentBaseTime,
+      nextBaseTime = _getBaseTime.nextBaseTime;
 
-  var toggleTafDialog = function toggleTafDialog() {
-    // Refresh list on closing dialog
-    if (isTafDialogOpen === true) getNewTafList(); // Set error message back to false
+  var tabs = [{
+    title: "Upcoming ".concat(formatBaseTime(nextBaseTime)),
+    timeSlot: 'UPCOMING'
+  }, {
+    title: "Current ".concat(formatBaseTime(currentBaseTime)),
+    timeSlot: 'ACTIVE'
+  }];
 
-    setErrorPostMessage(false);
-    setErrorPostMessageText('');
-    setTafDialogOpen(!isTafDialogOpen);
+  var onChangeTab = function onChangeTab(_event, newValue) {
+    onChangeTimeSlot(tabs[newValue].timeSlot);
   };
 
-  React__default.useEffect(function () {
-    if (selectedTafId) {
-      toggleTafDialog();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  return /*#__PURE__*/React__default.createElement(Tabs, {
+    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": "toptab-".concat(index),
+      sx: {
+        fontSize: 16
+      }
+    }, muiTabA11yProps(index)));
+  }));
+};
 
-  }, [selectedTafId]);
-
-  var onClickTafActionButton = function onClickTafActionButton(action, tafUuid) {
-    if (action === 'CANCEL') {
-      confirmDialog({
-        title: 'Cancel TAF',
-        description: 'Are you sure you want to cancel this TAF?',
-        confirmLabel: 'Cancel'
-      }).then(function () {
-        var _getSelectedTaf = getSelectedTaf(tafUuid, tafList),
-            taf = _getSelectedTaf.taf;
-
-        postTaf({
-          taf: taf,
-          changeStatusTo: 'CANCELLED'
-        });
-      });
-    } else if (selectedTafId === tafUuid) {
-      setTafDialogAction(action);
-      toggleTafDialog();
-    } else {
-      setTafDialogAction(action);
-      setselectedTafId(tafUuid);
+/* *
+ * 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 LocationTabs = function LocationTabs(_ref) {
+  var tafList = _ref.tafList,
+      _ref$activeIndex = _ref.activeIndex,
+      activeIndex = _ref$activeIndex === void 0 ? 0 : _ref$activeIndex,
+      _ref$onChangeTab = _ref.onChangeTab,
+      onChangeTab = _ref$onChangeTab === void 0 ? function () {} : _ref$onChangeTab,
+      timeSlot = _ref.timeSlot;
+  return /*#__PURE__*/React.createElement(MenuList, {
+    "data-testid": "location-tabs",
+    sx: {
+      paddingTop: '32px'
     }
+  }, tafList.map(function (_ref2, index) {
+    var taf = _ref2.taf;
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: taf.uuid,
+      selected: index === activeIndex,
+      sx: {
+        backgroundColor: 'geowebColors.cards.cardContainer',
+        borderColor: 'geowebColors.cards.cardContainerBorder',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        margin: '0 0 4px',
+        height: '56px',
+        justifyContent: 'center',
+        ':after': {
+          background: 'none!important'
+        },
+        '&.Mui-selected': {
+          backgroundColor: 'geowebColors.cards.cardContainer',
+          marginRight: '-17px',
+          borderRight: '0px',
+          zIndex: 1
+        }
+      },
+      onClick: function onClick() {
+        return onChangeTab(index);
+      }
+    }, /*#__PURE__*/React.createElement(Box$1, {
+      component: "span",
+      sx: {
+        fontSize: '12px',
+        fontWeight: '500',
+        letterSpacing: '0.09px',
+        '& + svg': {
+          position: 'absolute',
+          bottom: '1px',
+          width: '20px',
+          height: '20px'
+        }
+      }
+    }, taf.location), /*#__PURE__*/React.createElement(StatusIcon, {
+      timeSlot: timeSlot,
+      status: taf.status
+    }));
+  }));
+};
+
+/* *
+ * 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 Spinner = function Spinner(props) {
+  return /*#__PURE__*/React__default.createElement(Backdrop, Object.assign({
+    open: true
+  }, props), /*#__PURE__*/React__default.createElement(CircularProgress, {
+    "data-testid": "spinner",
+    color: "inherit"
+  }));
+};
+
+var fromActionToStatus = function fromActionToStatus(tafAction) {
+  switch (tafAction) {
+    case 'DRAFT':
+      return 'DRAFT';
+
+    case 'DRAFT_AMEND':
+      return 'DRAFT_AMENDED';
+
+    case 'DRAFT_CORRECT':
+      return 'DRAFT_CORRECTED';
+
+    case 'PUBLISH':
+      return 'PUBLISHED';
+
+    case 'AMEND':
+      return 'AMENDED';
+
+    case 'CORRECT':
+      return 'CORRECTED';
+
+    case 'CANCEL':
+      return 'CANCELLED';
+
+    default:
+      return 'NEW';
+  }
+};
+
+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 postTaf = function postTaf(data) {
+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),
+      isLoading = _React$useState2[0],
+      setLoading = _React$useState2[1];
+
+  var _React$useState3 = React__default.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      error = _React$useState4[0],
+      setError = _React$useState4[1];
+
+  var doRequest = function doRequest(params) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var newErrorr;
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              setSpinner(true);
+              setLoading(true);
               _context.prev = 1;
               _context.next = 4;
-              return api.postTaf(data);
+              return request(params);
 
             case 4:
-              if (isTafDialogOpen) toggleTafDialog();
-              setSpinner(false); // fetch new taflist
+              if (isMounted.current) {
+                _context.next = 6;
+                break;
+              }
 
-              getNewTafList(); // If a post has succeeded remove error message
+              return _context.abrupt("return");
 
-              setErrorCancelTaf([]);
-              _context.next = 14;
+            case 6:
+              setLoading(false);
+              setError(null);
+              _context.next = 18;
               break;
 
             case 10:
               _context.prev = 10;
               _context.t0 = _context["catch"](1);
 
-              if (data.changeStatusTo === 'CANCELLED') {
-                setErrorCancelTaf([].concat(_toConsumableArray(errorCancelTaf), [data.taf.uuid]));
-              } else {
-                setErrorPostMessage(true);
-
-                if (isAxiosError(_context.t0)) {
-                  setErrorPostMessageText(getAxiosErrorMessage(_context.t0));
-                }
+              if (isMounted.current) {
+                _context.next = 14;
+                break;
               }
 
-              setSpinner(false);
+              return _context.abrupt("return");
 
             case 14:
+              newErrorr = errorParser ? errorParser(_context.t0, params) : _context.t0;
+              setLoading(false);
+              setError(newErrorr);
+              throw newErrorr;
+
+            case 18:
             case "end":
               return _context.stop();
           }
@@ -5038,97 +5258,552 @@ var TafWrapper = function TafWrapper() {
     }));
   };
 
-  var fromActionToStatus = function fromActionToStatus(tafAction) {
-    switch (tafAction) {
-      case 'DRAFT':
-        return 'DRAFT';
+  return {
+    isLoading: isLoading,
+    error: error,
+    setError: setError,
+    doRequest: doRequest
+  };
+};
 
-      case 'DRAFT_AMEND':
-        return 'DRAFT_AMENDED';
+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$onFormDirty = _ref.onFormDirty,
+      onFormDirty = _ref$onFormDirty === void 0 ? function () {
+    return null;
+  } : _ref$onFormDirty,
+      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
+      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
+      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
+      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
+    return null;
+  } : _ref$setIsIssuesPaneO,
+      _ref$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;
 
-      case 'DRAFT_CORRECT':
-        return 'DRAFT_CORRECTED';
+  var onTafAction = function onTafAction(action, taf) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.t0 = action;
+              _context2.next = _context2.t0 === 'DRAFT' ? 4 : _context2.t0 === 'DRAFT_AMEND' ? 4 : _context2.t0 === 'DRAFT_CORRECT' ? 4 : _context2.t0 === 'PUBLISH' ? 4 : _context2.t0 === 'AMEND' ? 4 : _context2.t0 === 'CANCEL' ? 4 : _context2.t0 === 'CORRECT' ? 4 : 7;
+              break;
 
-      case 'PUBLISH':
-        return 'PUBLISHED';
+            case 4:
+              _context2.next = 6;
+              return postTaf({
+                taf: taf,
+                changeStatusTo: fromActionToStatus(action)
+              });
 
-      case 'AMEND':
-        return 'AMENDED';
+            case 6:
+              return _context2.abrupt("return", true);
 
-      case 'CORRECT':
-        return 'CORRECTED';
+            case 7:
+              return _context2.abrupt("return", false);
 
-      default:
-        return 'NEW';
-    }
+            case 8:
+              _context2.next = 13;
+              break;
+
+            case 10:
+              _context2.prev = 10;
+              _context2.t1 = _context2["catch"](0);
+              return _context2.abrupt("return", false);
+
+            case 13:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 10]]);
+    }));
   };
 
-  var onFormAction = function onFormAction(action, taf) {
-    // Add right actions and their follow up calls to the BE
-    switch (action) {
-      case 'CLOSE':
-        confirmDialog({
-          title: 'Closing TAF',
-          description: 'Are you sure you want to close this TAF?  Any changes made will be lost.',
-          confirmLabel: 'Close'
-        }).then(function () {
-          toggleTafDialog();
-        });
-        break;
+  return /*#__PURE__*/React__default.createElement(TabPanel, {
+    value: activeTafIndex,
+    index: index,
+    "data-testid": "taf-panel".concat(activeTafIndex === index ? '-active' : '')
+  }, /*#__PURE__*/React__default.createElement(TafHeader, {
+    title: getTafStatusLabel(tafFromBackend.taf.status)
+  }), isLoading && /*#__PURE__*/React__default.createElement(Spinner, {
+    "data-testid": "taf-loading",
+    sx: {
+      position: 'absolute',
+      zIndex: 1,
+      color: 'geowebColors.backdrops.white.fill'
+    }
+  }), error && /*#__PURE__*/React__default.createElement(AlertBanner, {
+    severity: "error",
+    title: error.title,
+    info: error.message,
+    dataTestId: "taf-error"
+  }), /*#__PURE__*/React__default.createElement(TafForm, {
+    tafFromBackend: tafFromBackend,
+    onFormAction: onTafAction,
+    onFormDirty: onFormDirty,
+    isIssuesPaneOpen: isIssuesPaneOpen,
+    setIsIssuesPaneOpen: setIsIssuesPaneOpen,
+    isDisabled: isFormDisabled,
+    setIsDisabled: setIsFormDisabled
+  }));
+};
 
-      case 'DRAFT':
-      case 'DRAFT_AMEND':
-      case 'DRAFT_CORRECT':
-      case 'PUBLISH':
-      case 'AMEND':
-      case 'CORRECT':
-        postTaf({
-          taf: taf,
-          changeStatusTo: fromActionToStatus(action)
-        });
-        break;
+/* *
+ * 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)
+ * */
 
-      default:
-        toggleTafDialog();
-        break;
-    }
+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) {
+  var _ref$tafList = _ref.tafList,
+      tafList = _ref$tafList === void 0 ? [] : _ref$tafList,
+      _ref$onPostTaf = _ref.onPostTaf,
+      onPostTaf = _ref$onPostTaf === void 0 ? function () {} : _ref$onPostTaf;
+
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
+  var confirmDialog = useConfirmationDialog();
+
+  var _useIssuesPane = useIssuesPane(),
+      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;
+
+  var _React$useState = React__default.useState(sortTafTimeSlots(tafList)),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      _React$useState2$ = _React$useState2[0],
+      upcoming = _React$useState2$.upcoming,
+      current = _React$useState2$.current,
+      expired = _React$useState2$.expired,
+      updateSortedTafs = _React$useState2[1];
+
+  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),
+      timeSlot = _React$useState4[0],
+      setTimeSlot = _React$useState4[1];
+
+  var _React$useState5 = React__default.useState(upcoming),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      locations = _React$useState6[0],
+      setLocations = _React$useState6[1];
+
+  var _React$useState7 = React__default.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      activeTafIndex = _React$useState8[0],
+      setActiveTafIndex = _React$useState8[1];
+
+  var _React$useState9 = React__default.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      isFormDirty = _React$useState10[0],
+      setIsFormDirty = _React$useState10[1];
+
+  var _React$useState11 = React__default.useState(false),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      isFormDisabled = _React$useState12[0],
+      setIsFormDisabled = _React$useState12[1];
+
+  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);
+    }));
   };
 
-  var selectedTaf = getSelectedTaf(selectedTafId, tafList);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafList, {
-    tafList: tafList,
-    isLoading: isLoadingList,
-    error: errorList,
-    onClickTafActionButton: onClickTafActionButton,
-    errorCancelTaf: errorCancelTaf
-  }), showSpinner && /*#__PURE__*/React__default.createElement(Spinner, null), selectedTaf !== undefined && /*#__PURE__*/React__default.createElement(TafFormDialog, {
-    open: isTafDialogOpen,
-    toggleFormDialog: toggleTafDialog,
-    tafFromBackend: selectedTaf,
-    alertBanner: errorPostMessage ? /*#__PURE__*/React__default.createElement(AlertBanner, {
-      severity: "error",
-      title: "An error has occurred while saving, please try again",
-      info: errorPostMessageText
-    }) : null,
-    onFormAction: onFormAction
-  }, /*#__PURE__*/React__default.createElement(TafFormWrapper, {
-    mode: "edit",
-    tafFromBackend: selectedTaf,
-    tafAction: tafDialogAction,
-    onFormAction: onFormAction
-  }), showSpinner && /*#__PURE__*/React__default.createElement(Spinner, null)));
+  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);
+              });
+
+            case 13:
+              _context2.next = 16;
+              break;
+
+            case 15:
+              action(value);
+
+            case 16:
+            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);
+  };
+
+  React__default.useEffect(function () {
+    var newSortedTafs = sortTafTimeSlots(tafList);
+    var updatedLocations = timeSlot === 'ACTIVE' ? newSortedTafs.current : newSortedTafs.upcoming;
+    updateSortedTafs(sortTafTimeSlots(tafList));
+    setLocations(updatedLocations); // update active index
+
+    var newActiveIndex = updatedLocations.findIndex(function (location) {
+      return location.taf.previousId === locations[activeTafIndex].taf.uuid;
+    });
+    var newIndex = newActiveIndex !== -1 ? newActiveIndex : activeTafIndex;
+    setActiveTafIndex(newIndex); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tafList, setLocations]);
+  React__default.useEffect(function () {
+    var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
+      setError(null);
+    }, 10000) : null;
+    return function () {
+      if (cancelErrorTimeout !== null) {
+        clearTimeout(cancelErrorTimeout);
+      }
+    };
+  }, [error, setError]);
+
+  if (!tafList) {
+    return null;
+  }
+
+  var activeTaf = locations[activeTafIndex];
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    id: MODAL_DIALOG_ELEMENT,
+    component: "div",
+    sx: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      overflow: 'hidden',
+      pointerEvents: 'none'
+    }
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      height: '100%',
+      maxHeight: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      minWidth: 320,
+      maxWidth: 1272,
+      margin: 'auto',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    spacing: 2,
+    sx: {
+      paddingLeft: 1,
+      paddingRight: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 9
+  }, /*#__PURE__*/React__default.createElement(TopTabs, {
+    tafFromBackend: lastCurrentTaf,
+    timeSlot: timeSlot,
+    onChangeTimeSlot: onChangeTimeSlot
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    flexGrow: 1,
+    overflow: "hidden"
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    spacing: 2,
+    sx: {
+      height: '100%',
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 2,
+      overflow: 'auto'
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 3,
+    sm: 1
+  }, /*#__PURE__*/React__default.createElement(LocationTabs, {
+    tafList: locations,
+    activeIndex: activeTafIndex,
+    onChangeTab: onChangeLocationTab,
+    timeSlot: timeSlot
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: true
+  }, /*#__PURE__*/React__default.createElement(Card, {
+    variant: "outlined",
+    sx: {
+      padding: 1,
+      paddingTop: 0,
+      marginBottom: '12px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React__default.createElement(TacOverviewMobile, {
+    upcomingTafs: upcoming,
+    currentTafs: current,
+    expiredTafs: expired,
+    activeTaf: activeTaf
+  }), locations.map(function (tafFromBackend, index) {
+    return /*#__PURE__*/React__default.createElement(TafPanel, {
+      key: tafFromBackend.taf.uuid,
+      activeTafIndex: activeTafIndex,
+      index: index,
+      tafFromBackend: tafFromBackend,
+      onFormDirty: setIsFormDirty,
+      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%'
+    },
+    display: {
+      xs: 'none',
+      sm: 'block'
+    }
+  }, /*#__PURE__*/React__default.createElement(TacOverview, {
+    upcomingTafs: upcoming,
+    currentTafs: current,
+    expiredTafs: expired,
+    activeTaf: activeTaf,
+    isFormDisabled: isFormDisabled
+  })))))), /*#__PURE__*/React__default.createElement(IssuesPaneWrapper, {
+    handleClose: onCloseIssuesPane,
+    isOpen: isIssuesPaneOpen,
+    startPosition: startPosition
+  }));
 };
-/**
- * Shows the list of Tafs and allows to create, edit and view Tafs.
- * Needs to be wrapped in the ApiProvider.
+
+/* *
+ * 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
  *
- * @example
- * ```<ApiProvider baseURL="http://test.com"  appURL="http://app.com" auth={auth} onSetAuth={onSetAuth} createApi={createApi}>  authTokenUrl="url/tokenrefresh"<TafWrapper /> </ApiProvider>```
- */
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
 
+var TafWrapper = function TafWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(TafModuleProvider, null, /*#__PURE__*/React.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React.createElement(ReactHookFormProvider, {
+    options: {
+      mode: 'onTouched',
+      reValidateMode: 'onChange',
+      criteriaMode: 'all'
+    }
+  }, children)));
+};
+
+var TafModule = function TafModule() {
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isLoading = _React$useState2[0],
+      setLoading = _React$useState2[1];
+
+  var _useApi = useApi(api.getTafList),
+      getTafListError = _useApi.error,
+      isFetchingInitial = _useApi.isLoading,
+      tafList = _useApi.result,
+      fetchNewTafList = _useApi.fetchApiData;
 
-var ConfirmationWrapper = function ConfirmationWrapper() {
-  return /*#__PURE__*/React__default.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React__default.createElement(TafWrapper, null));
+  usePoller([tafList, getTafListError], function () {
+    return fetchNewTafList({});
+  });
+
+  var reFetchNewTafList = function reFetchNewTafList() {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              _context.next = 4;
+              return fetchNewTafList({});
+
+            case 4:
+              setLoading(false);
+              _context.next = 10;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              setLoading(false);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+  };
+
+  var hasTafListError = getTafListError !== null;
+
+  if (isFetchingInitial) {
+    return /*#__PURE__*/React.createElement(LinearProgress, {
+      color: "secondary",
+      "data-testid": "loading-bar"
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Box, {
+    component: "div",
+    id: "tafmodule",
+    sx: {
+      height: '100%'
+    }
+  }, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
+    "data-testid": "loading-bar",
+    color: "secondary",
+    sx: {
+      marginBottom: '-4px'
+    }
+  }), hasTafListError && /*#__PURE__*/React.createElement(AlertBanner, {
+    severity: "error",
+    title: "An error has occurred while retrieving the list",
+    info: getTafListError.message
+  }), /*#__PURE__*/React.createElement(TafLayout, {
+    tafList: tafList,
+    onPostTaf: reFetchNewTafList
+  }));
+};
+
+var Wrapper = function Wrapper() {
+  return /*#__PURE__*/React.createElement(TafWrapper, null, /*#__PURE__*/React.createElement(TafModule, null));
 };
 
 /* *
@@ -5147,7 +5822,7 @@ var ConfirmationWrapper = function ConfirmationWrapper() {
  * 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
@@ -5163,4 +5838,971 @@ var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, aut
   };
 };
 
-export { ContentDialog, TafFormDialog, TafFormWrapper, TafList, TafListRow, TafListSection, ConfirmationWrapper as TafWrapper, 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);
+    }
+  };
+};
+
+export { TafForm, Wrapper as TafModule, createApi$1 as createApi, createApi as createFakeApi };