@opengeoweb/taf 2.2.0 → 2.4.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/styles/makeStyles'), require('moment'), require('@opengeoweb/shared'), require('@mui/icons-material'), require('@opengeoweb/api'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-sortablejs')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/styles/makeStyles', 'moment', '@opengeoweb/shared', '@mui/icons-material', '@opengeoweb/api', '@opengeoweb/form-fields', 'react-hook-form', 'react-sortablejs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.makeStyles, global.moment, global.shared, global.iconsMaterial, global.api, global.formFields, global.reactHookForm, global.reactSortablejs));
-})(this, (function (exports, React, material, makeStyles, moment, shared, iconsMaterial, api, formFields, reactHookForm, reactSortablejs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@opengeoweb/form-fields'), require('@mui/material'), require('react-hook-form'), require('react-sortablejs'), require('@opengeoweb/api'), require('@opengeoweb/shared'), require('moment'), require('lodash'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-dom'), require('@mui/material/LinearProgress'), require('@mui/icons-material/DoDisturb'), require('@mui/material/Box')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@opengeoweb/form-fields', '@mui/material', 'react-hook-form', 'react-sortablejs', '@opengeoweb/api', '@opengeoweb/shared', 'moment', 'lodash', '@mui/styles/makeStyles', '@mui/icons-material', 'react-dom', '@mui/material/LinearProgress', '@mui/icons-material/DoDisturb', '@mui/material/Box'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.formFields, global.material, global.reactHookForm, global.reactSortablejs, global.api, global.shared, global.moment, global.lodash, global.makeStyles, global.iconsMaterial, global.ReactDOM, global.LinearProgress, global.DoDisturbIcon, global.Box));
+})(this, (function (exports, React, formFields, material, reactHookForm, reactSortablejs, api, shared, moment, lodash, makeStyles, iconsMaterial, ReactDOM, LinearProgress, DoDisturbIcon, Box) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,8 +26,12 @@
 
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
-    var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+    var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
+    var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+    var LinearProgress__default = /*#__PURE__*/_interopDefaultLegacy(LinearProgress);
+    var DoDisturbIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoDisturbIcon);
+    var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -105,18 +109,6 @@
         }
     }
 
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m) return m.call(o);
-        if (o && typeof o.length === "number") return {
-            next: function () {
-                if (o && i >= o.length) o = void 0;
-                return { value: o && o[i++], done: !o };
-            }
-        };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-
     function __read(o, n) {
         var m = typeof Symbol === "function" && o[Symbol.iterator];
         if (!m) return o;
@@ -144,62 +136,6 @@
         return to.concat(ar || Array.prototype.slice.call(from));
     }
 
-    /* *
-     * 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
-    	},
-    	EHRD: {
-    		validity_duration: 30,
-    		activity_period: 6
-    	},
-    	EHGG: {
-    		validity_duration: 30,
-    		activity_period: 6
-    	},
-    	EHBK: {
-    		validity_duration: 30,
-    		activity_period: 6
-    	},
-    	EHLE: {
-    		validity_duration: 30,
-    		activity_period: 6
-    	},
-    	TNCB: {
-    		validity_duration: 30,
-    		activity_period: 6
-    	}
-    };
-    var tafConfig = {
-    	location_indicator_mwo: location_indicator_mwo,
-    	locations: locations
-    };
-
     function _typeof(obj) {
       "@babel/helpers - typeof";
 
@@ -2458,13 +2394,26 @@
       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)
+
+    var isTafAmendedCorrectedChanged = function isTafAmendedCorrectedChanged(isFormDirty, originalTaf, currentTaf) {
+      var originalBaseF = originalTaf.baseForecast,
+          originalChG = originalTaf.changeGroups;
+      var currentBaseF = currentTaf.baseForecast,
+          currentChG = currentTaf.changeGroups;
+
+      originalBaseF.valid;
+          var originalNoValid = __rest(originalBaseF, ["valid"]);
+
+      currentBaseF.valid;
+          var currentNoValid = __rest(currentBaseF, ["valid"]);
+
+      return isFormDirty && (!lodash.isEqual(originalNoValid, currentNoValid) || !lodash.isEqual(originalChG, currentChG));
     };
     var getConfirmationDialogContent = function getConfirmationDialogContent(action, isFormDirty) {
-      if (isFormDirty === void 0) {
-        isFormDirty = true;
-      }
-
       switch (action) {
         case 'DISCARD':
           return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
@@ -2474,7 +2423,7 @@
 
         case 'AMEND':
         case 'CORRECT':
-          return isFormDirty ? 'Do you want to publish it?' : 'Are you sure you want to publish the TAF? You did not make any changes!';
+          return isFormDirty() ? 'Do you want to publish it?' : 'Are you sure you want to publish the TAF? You did not make any changes!';
 
         default:
           return 'Are you sure you want to cancel this TAF?';
@@ -2487,89 +2436,150 @@
             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';
+
+        case 'DRAFT_CORRECTED':
+          return 'draft corrected';
+
+        default:
+          return status.toLocaleLowerCase();
+      }
+    };
+    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__default["default"].utc() >= moment__default["default"].utc(taf.validDateStart)) {
+        var now = moment__default["default"].utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+        var validObj = {
+          start: now,
+          end: taf.baseForecast.valid.end
+        };
+        return __assign(__assign({}, taf), {
+          previousValidDateStart: previousValidDateStart,
+          previousValidDateEnd: previousValidDateEnd,
+          validDateStart: now,
+          baseForecast: __assign(__assign({}, taf.baseForecast), {
+            valid: validObj
+          })
+        });
+      }
+
+      return __assign(__assign({}, taf), {
+        previousValidDateStart: previousValidDateStart,
+        previousValidDateEnd: previousValidDateEnd
+      });
+    };
+    var prepareTafValues = function prepareTafValues(_taf, tafAction, addEmptyChangeGroup) {
+      if (addEmptyChangeGroup === void 0) {
+        addEmptyChangeGroup = 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 __assign(__assign(__assign(__assign({}, taf), {
+        messageType: getMessageType(taf, tafAction),
+        baseForecast: formatFormValues(taf.baseForecast)
+      }), taf.changeGroups && {
+        changeGroups: taf.changeGroups.map(formatFormValues)
+      }), addEmptyChangeGroup && {
+        changeGroups: [emptyChangegroup]
+      });
+    };
 
-    var useStyles$9 = makeStyles__default["default"](function (theme) {
+    var textFieldStyle = function textFieldStyle(theme) {
       return {
-        textFieldGridItem: {
-          marginRight: 4
-        },
-        textFieldRoot: {
-          '&.Mui-disabled::before': {
-            borderBottom: 'none'
+        // input
+        marginRight: '2px',
+        marginBottom: '4px',
+        width: 56,
+        height: 46,
+        input: {
+          textAlign: 'center',
+          fontSize: 10,
+          fontWeight: 500,
+          paddingLeft: 0,
+          paddingRight: 0,
+          '&.Mui-disabled': {
+            color: 'geowebColors.typographyAndIcons.text',
+            WebkitTextFillColor: theme.palette.geowebColors.typographyAndIcons.text
           },
-          '&:after': {
-            borderBottomColor: '#3f51b5'
+          // 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
+
           }
         },
-        textFieldInput: {
-          fontSize: '14px',
-          paddingLeft: 1,
-          paddingRight: 1,
-          color: '#051039',
-          WebkitTextFillColor: '#051039',
+        label: {
+          transformOrigin: 'center top',
+          right: 0,
+          textAlign: 'center',
+          fontSize: '10px',
           '&.Mui-disabled': {
-            backgroundColor: 'white'
-          }
-        },
-        textFieldLabel: {
-          fontSize: '14px'
-        },
-        textFieldLabelShrink: {
-          transform: 'translate(2px, 10px) scale(0.75) !important'
-        },
-        formRow: {
-          marginTop: 8,
-          backgroundColor: theme.palette.common.white,
-          position: 'relative',
-          '&.sortable-chosen': {
-            boxShadow: theme.shadows[1]
+            color: 'geowebColors.captions.captionStatus.rgba'
           },
-          '&.sortable-ghost': {
-            opacity: 0.5
-          }
-        },
-        tacTitle: {
-          fontSize: '20px',
-          fontWeight: 500
-        },
-        tacText: {
-          fontSize: '14px',
-          color: '#000000'
-        },
-        tacLine: {
-          margin: '0',
-          padding: '.1em .1em .1em 0.8em',
-          textIndent: '-0.7em',
-          borderRadius: '3px'
-        },
-        addButton: {
-          marginRight: '48px'
-        },
-        lifecycleButtons: {
-          marginTop: '40px',
-          marginBottom: '16px'
-        },
-        actionButton: {
-          marginRight: '16px'
+          whiteSpace: 'nowrap',
+          maxWidth: '100%',
+          transform: 'translate(0px, 16px) scale(1)'
         },
-        lastButton: {
-          marginRight: '90px'
+        // shrink
+        ' .MuiInputLabel-shrink': {
+          transform: 'translate(2px, 10px) scale(0.75) !important',
+          letterSpacing: '0.33px',
+          textAlign: 'left'
         },
-        backdrop: {
-          zIndex: 1500,
-          color: '#fff'
-        },
-        emptyButtonContainer: {
-          minWidth: 96
+        // root
+        '&': {
+          '.Mui-disabled:before': {
+            borderColor: 'transparent'
+          }
         }
       };
-    });
+    };
 
     var getTafErrors = function getTafErrors(name, errors) {
       var nameAsArray = name.split('.');
@@ -2592,25 +2602,13 @@
       return disabled && !value ? '-' : value;
     };
     var BaseTextField = /*#__PURE__*/React__default["default"].memo(function (props) {
-      var classes = useStyles$9();
       return /*#__PURE__*/React__default["default"].createElement(material.TextField, __assign({
         type: "text",
         variant: "filled",
-        InputProps: {
-          classes: {
-            input: classes.textFieldInput,
-            root: classes.textFieldRoot
-          }
-        },
-        InputLabelProps: {
-          classes: {
-            root: classes.textFieldLabel,
-            shrink: classes.textFieldLabelShrink
-          }
-        }
+        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(_a) {
@@ -2632,7 +2630,6 @@
           autoComplete = _h === void 0 ? [] : _h,
           _j = _a.autoFocus,
           autoFocus = _j === void 0 ? false : _j;
-      var classes = useStyles$9();
 
       var _k = reactHookForm.useFormContext(),
           control = _k.control,
@@ -2688,11 +2685,7 @@
         inputRef.current.disabled = false;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }, []);
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: true,
-        className: classes.textFieldGridItem
-      }, /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
+      return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
         render: function render(_props) {
           var displayValue = formatter ? formatter(_props.value) : getDisplayValue(_props.value, disabled);
           return /*#__PURE__*/React__default["default"].createElement(BaseTextField, {
@@ -2720,7 +2713,7 @@
         defaultValue: defaultValue,
         rules: rules,
         onFocus: onFocusField
-      }));
+      });
     };
 
     /* *
@@ -2784,6 +2777,71 @@
       return isValid ? true : invalidProbabilityMessage;
     };
 
+    /* *
+     * 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 AddIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("path", {
+      d: "M10.647 10.647h6.82a1.276 1.276 0 1 0 0-2.552h-6.82v-6.82a1.276 1.276 0 1 0-2.552 0v6.82h-6.82a1.276 1.276 0 1 0 0 2.552h6.82v6.82a1.274 1.274 0 0 0 1.276 1.275c.705 0 1.276-.571 1.276-1.276v-6.82z"
+    }));
+    var DeleteIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("path", {
+      d: "M17.504 8.228c.588 0 1.027.48.973 1.066l-.876 9.64A1.197 1.197 0 0 1 16.434 20H8.41c-.59 0-1.115-.48-1.167-1.066l-.877-9.64a.962.962 0 0 1 .973-1.066zm-2.115 1.228a.82.82 0 0 0-.819.82v7.674a.818.818 0 0 0 1.638 0v-7.675a.819.819 0 0 0-.819-.819zm-2.968 0a.819.819 0 0 0-.819.82v7.674a.818.818 0 1 0 1.638 0v-7.675a.82.82 0 0 0-.82-.819zm-2.968 0a.819.819 0 0 0-.818.82v7.674a.818.818 0 1 0 1.637 0v-7.675a.82.82 0 0 0-.82-.819zM13.432 4c.21 0 .404.168.436.376l.107.758 3.256-.01a1.606 1.606 0 0 1 1.61 1.6l.001.535-12.841.038L6 6.76a1.605 1.605 0 0 1 1.6-1.61l3.262-.008.103-.758a.454.454 0 0 1 .434-.38z"
+    }));
+    var CrossIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("path", {
+      d: "m13.805 12 4.821-4.822a1.276 1.276 0 1 0-1.804-1.804L12 10.195 7.178 5.374a1.276 1.276 0 1 0-1.804 1.804L10.196 12l-4.822 4.822a1.276 1.276 0 1 0 1.804 1.805L12 13.805l4.822 4.822a1.274 1.274 0 0 0 1.804 0c.499-.5.499-1.306 0-1.805L13.805 12z"
+    }));
+
+    var TafFormOptionsButton = function TafFormOptionsButton(_a) {
+      var isChangeGroup = _a.isChangeGroup,
+          addChangeGroupBelow = _a.addChangeGroupBelow,
+          addChangeGroupAbove = _a.addChangeGroupAbove,
+          removeChangeGroup = _a.removeChangeGroup,
+          clearRow = _a.clearRow,
+          index = _a.index;
+      var insertAbove = {
+        text: 'Insert 1 row above',
+        icon: AddIcon,
+        action: addChangeGroupAbove
+      };
+      var insertBelow = {
+        text: 'Insert 1 row below',
+        icon: AddIcon,
+        action: addChangeGroupBelow
+      };
+      var deleteRow = {
+        text: 'Delete row',
+        icon: DeleteIcon,
+        action: removeChangeGroup
+      };
+      var clear = {
+        text: 'Clear row',
+        icon: CrossIcon,
+        action: clearRow
+      };
+      var menuItemsBaseForecast = [insertBelow, clear];
+      var menuItemsChangeGroup = [insertAbove, insertBelow, deleteRow, clear];
+      return /*#__PURE__*/React__namespace.createElement(shared.ToggleMenu, {
+        buttonTestId: "tafFormOptions[" + index + "]",
+        buttonSx: {
+          marginTop: '10px',
+          marginLeft: '4px'
+        },
+        menuItems: isChangeGroup ? menuItemsChangeGroup : menuItemsBaseForecast
+      });
+    };
+
     var getDefaultValue = function getDefaultValue(fieldName, data) {
       if (!data) {
         return '';
@@ -2804,30 +2862,29 @@
           disabled = _c === void 0 ? false : _c,
           _d = _a.index,
           index = _d === void 0 ? -1 : _d,
-          _e = _a.lastRow,
-          lastRow = _e === void 0 ? false : _e,
           onRemoveChangeGroup = _a.onRemoveChangeGroup,
-          _f = _a.field,
-          field = _f === void 0 ? null : _f,
-          _g = _a.dragHandle,
-          dragHandle = _g === void 0 ? null : _g,
-          onAddChangeGroup = _a.onAddChangeGroup,
-          props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroup"]);
-
-      var classes = useStyles$9();
+          _e = _a.field,
+          field = _e === void 0 ? null : _e,
+          _f = _a.dragHandle,
+          dragHandle = _f === void 0 ? null : _f,
+          onAddChangeGroupBelow = _a.onAddChangeGroupBelow,
+          onAddChangeGroupAbove = _a.onAddChangeGroupAbove,
+          onClearRow = _a.onClearRow,
+          props = __rest(_a, ["isChangeGroup", "disabled", "index", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroupBelow", "onAddChangeGroupAbove", "onClearRow"]);
+
       var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
       var fieldNames = getFieldNames(isChangeGroup, index);
 
-      var _h = reactHookForm.useFormContext(),
-          getValues = _h.getValues,
-          trigger = _h.trigger;
+      var _g = reactHookForm.useFormContext(),
+          getValues = _g.getValues,
+          trigger = _g.trigger;
 
       var isNotRequiredForAction = shared.useDraftFormHelpers().isRequired; // cross-field required validation
 
-      var _j = __read(getRequiredCrossFields(fieldNames), 3),
-          mainFields = _j[0],
-          mainOptionalFields = _j[1],
-          subFields = _j[2];
+      var _h = __read(getRequiredCrossFields(fieldNames), 3),
+          mainFields = _h[0],
+          mainOptionalFields = _h[1],
+          subFields = _h[2];
 
       var hasFieldsValue = function hasFieldsValue(fields) {
         return fields.map(getValues).find(function (field) {
@@ -2925,14 +2982,39 @@
         return validFields;
       };
 
-      var addChangeGroup = React__default["default"].useCallback(function () {
-        onAddChangeGroup(index);
-      }, [onAddChangeGroup, index]);
+      var addChangeGroupBelow = React__default["default"].useCallback(function () {
+        onAddChangeGroupBelow(index);
+      }, [onAddChangeGroupBelow, index]);
+      var addChangeGroupAbove = React__default["default"].useCallback(function () {
+        onAddChangeGroupAbove(index);
+      }, [onAddChangeGroupAbove, index]);
+      var clearRow = React__default["default"].useCallback(function () {
+        onClearRow(index);
+      }, [onClearRow, index]);
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, __assign({
+        sx: {
+          marginTop: '8px',
+          backgroundColor: 'geowebColors.cards.cardContainer',
+          position: 'relative',
+          '&.sortable-chosen': {
+            boxShadow: 1
+          },
+          '&.sortable-ghost': {
+            opacity: 0.5
+          }
+        },
+        justifyContent: "flex-start",
         "data-testid": "row-" + namePrefix,
         container: true,
-        ref: ref
-      }, props), !isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+        ref: ref,
+        columns: 24
+      }, props), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        container: true,
+        justifyContent: "flex-end",
+        xs: 24,
+        sm: 23
+      }, !isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Type",
         name: fieldNames.messageType,
         disabled: true
@@ -2945,13 +3027,12 @@
         label: "Issue time",
         name: "issueDate",
         disabled: true
-      })), isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: true,
-        style: {
-          display: 'flex'
+      })), isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          width: 56,
+          marginRight: '2px'
         }
-      }, dragHandle), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
+      }, !disabled && dragHandle), /*#__PURE__*/React__default["default"].createElement(TafFormTextField, {
         label: "Prob",
         name: fieldNames.probability,
         disabled: disabled,
@@ -3189,83 +3270,222 @@
             }
           }
         }
-      }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        className: classes.emptyButtonContainer,
+      })), !disabled && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: true
-      }, !disabled && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-        "aria-label": "add",
-        "data-testid": "add-changeGroup",
-        onClick: addChangeGroup,
-        size: "large"
-      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Add, null))), isChangeGroup && !disabled && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-        "aria-label": "add",
-        "data-testid": "add-changeGroup",
-        onClick: addChangeGroup,
-        size: "large"
-      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Add, null)), /*#__PURE__*/React__default["default"].createElement(material.IconButton, __assign({
-        "aria-label": "delete",
-        "data-testid": "remove-changeGroup",
-        onClick: function onClick() {
-          return onRemoveChangeGroup(index);
+        container: true,
+        justifyContent: "flex-end",
+        alignItems: "flex-end",
+        xs: 24,
+        sm: 1,
+        sx: {
+          marginBottom: '16px'
         }
-      }, lastRow ? {
-        tabIndex: -1
-      } : {}, {
-        size: "large"
-      }), /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Delete, null))));
+      }, /*#__PURE__*/React__default["default"].createElement(TafFormOptionsButton, {
+        isChangeGroup: isChangeGroup,
+        addChangeGroupBelow: addChangeGroupBelow,
+        addChangeGroupAbove: addChangeGroupAbove,
+        removeChangeGroup: function removeChangeGroup() {
+          return onRemoveChangeGroup(index);
+        },
+        clearRow: clearRow,
+        index: index
+      })));
     });
 
-    var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
-      switch (sumOfErrors) {
-        case 0:
-          return '0 issues';
-
-        case 1:
-          return '1 issue';
-
-        default:
-          return sumOfErrors + " issues";
+    /* *
+     * 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 buttonsStyle = {
+      button: {
+        minWidth: {
+          xs: '56px',
+          sm: '64px'
+        },
+        width: {
+          xs: '56px',
+          sm: '64px'
+        },
+        marginLeft: {
+          xs: 0.5,
+          sm: 1
+        },
+        marginTop: 3,
+        marginBottom: 3
       }
     };
 
-    var buttonColors = {
-      green: '#72bb23',
-      red: '#c00000'
-    };
-
-    var buttonStyle = function buttonStyle(color) {
-      var buttonColor = buttonColors[color];
-      return {
-        width: '74px',
-        color: '#ffffff',
-        backgroundColor: buttonColor,
-        '&:hover': {
-          backgroundColor: buttonColor
-        },
-        '&:focus': {
-          backgroundColor: buttonColor
+    var ViewModeButtons = function ViewModeButtons(_a) {
+      var canBe = _a.canBe,
+          onTafViewModeButtonPress = _a.onTafViewModeButtonPress;
+      return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, canBe.includes('CANCELLED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "canceltaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          return onTafViewModeButtonPress('CANCEL');
         }
-      };
+      }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "correctaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          return onTafViewModeButtonPress('CORRECT');
+        }
+      }, "Correct"), canBe.includes('AMENDED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "amendtaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          return onTafViewModeButtonPress('AMEND');
+        }
+      }, "Amend"));
     };
 
-    var IssuesButton = function IssuesButton(_a) {
-      var togglePane = _a.togglePane,
-          sumOfErrors = _a.sumOfErrors;
-      var color = sumOfErrors > 0 ? 'red' : 'green';
-      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: "View details"
-      }, /*#__PURE__*/React__namespace.createElement(material.Chip, {
-        "data-testid": "issuesButton",
-        size: "small",
-        label: getIssuesLabel(sumOfErrors),
-        style: __assign({}, buttonStyle(color)),
-        onClick: togglePane
+    var TafFormButtons = function TafFormButtons(_a) {
+      var _b = _a.isFormDisabled,
+          isFormDisabled = _b === void 0 ? false : _b,
+          tafAction = _a.tafAction,
+          _c = _a.canBe,
+          canBe = _c === void 0 ? [] : _c,
+          onTafEditModeButtonPress = _a.onTafEditModeButtonPress,
+          onTafViewModeButtonPress = _a.onTafViewModeButtonPress;
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        justifyContent: "flex-end",
+        sx: buttonsStyle,
+        columns: 24
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        container: true,
+        justifyContent: "flex-end",
+        xs: 24,
+        sm: 23
+      }, isFormDisabled ? /*#__PURE__*/React__default["default"].createElement(ViewModeButtons, {
+        canBe: canBe,
+        onTafViewModeButtonPress: onTafViewModeButtonPress
+      }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "discardtaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          // Simply discard the changes and close the dialog.
+          onTafEditModeButtonPress('DISCARD');
+        }
+      }, "Discard"), /*#__PURE__*/React__default["default"].createElement(material.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
+          */
+          switch (tafAction) {
+            case 'AMEND':
+            case 'DRAFT_AMEND':
+              onTafEditModeButtonPress('DRAFT_AMEND');
+              break;
+
+            case 'CORRECT':
+            case 'DRAFT_CORRECT':
+              onTafEditModeButtonPress('DRAFT_CORRECT');
+              break;
+
+            default:
+              onTafEditModeButtonPress('DRAFT');
+              break;
+          }
+        }
+      }, "Save"), /*#__PURE__*/React__default["default"].createElement(material.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':
+              onTafEditModeButtonPress('AMEND');
+              break;
+
+            case 'CORRECT':
+            case 'DRAFT_CORRECT':
+              onTafEditModeButtonPress('CORRECT');
+              break;
+
+            default:
+              onTafEditModeButtonPress('PUBLISH');
+              break;
+          }
+        }
+      }, "Publish"))), /*#__PURE__*/React__default["default"].createElement(material.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__default["default"](function () {
+      return {
+        dragHandle: {
+          backgroundColor: 'transparent',
+          '&:hover': {
+            backgroundColor: 'transparent'
+          },
+          cursor: function cursor(isSorting) {
+            return isSorting ? 'grabbing' : 'grab';
+          }
+        }
+      };
+    });
+
+    var DragHandle = function DragHandle(_a) {
+      var _b = _a.isSorting,
+          isSorting = _b === void 0 ? false : _b,
+          _c = _a.isDisabled,
+          isDisabled = _c === void 0 ? false : _c,
+          index = _a.index;
+      var classes = useStyles(isSorting);
+      return /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+        className: classes.dragHandle + " handle",
+        "data-testid": "dragHandle-" + index,
+        disableRipple: true,
+        disabled: isDisabled,
+        size: "large"
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null));
+    };
+
     var ThumbsUp = function ThumbsUp(props) {
       return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, __assign({
         fontSize: "inherit",
@@ -3287,32 +3507,6 @@
       })));
     };
 
-    /* *
-     * 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$8 = makeStyles__default["default"]({
-      paneContent: {
-        marginTop: '16px',
-        marginLeft: '24px'
-      },
-      image: {
-        fontSize: '4rem'
-      }
-    });
-
     var getPaneTitle = function getPaneTitle(sumOfErrors) {
       switch (sumOfErrors) {
         case 0:
@@ -3351,7 +3545,7 @@
       var nameWithoutBrackets = nameAsString.replace(/[[\]']+/g, '');
       var nameLowerCase = nameWithoutBrackets.toLowerCase();
 
-      var _a = __read(nameLowerCase.split(/([0-9]+)/) // split numbers from field and build array
+      var _a = __read(nameLowerCase.split(/([0-9]+)/) // split num bers from field and build array
       .filter(function (s) {
         return s.length;
       }), 2),
@@ -3377,33 +3571,43 @@
       var fieldErrorTitle = humanizeErrorMessage(firstNamePart);
       return index + 1 + ". " + fieldErrorTitle + ": " + getErrorDefaultMessage(error);
     };
+    var MODAL_DIALOG_ELEMENT = 'modal-dialog';
 
     var IssuesPane = function IssuesPane(_a) {
       var isOpen = _a.isOpen,
           handleClose = _a.handleClose,
           _b = _a.errorList,
-          errorList = _b === void 0 ? [] : _b;
-      var classes = useStyles$8();
-      return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
+          errorList = _b === void 0 ? [] : _b,
+          _c = _a.startPosition,
+          startPosition = _c === void 0 ? {
+        left: 20,
+        top: 50
+      } : _c;
+      var rootElement = document.getElementById(MODAL_DIALOG_ELEMENT) || document.body;
+      return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
         startSize: {
           width: '577px',
           height: '200px'
         },
-        startPosition: {
-          left: 370,
-          top: 570
-        },
+        startPosition: startPosition,
         minWidth: 300,
         onClose: handleClose,
         title: getPaneTitle(errorList.length),
         headerSize: "xs",
         isOpen: isOpen,
         "data-testid": "moveable-issues-pane",
-        bounds: "body"
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.paneContent
-      }, errorList.length === 0 && /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.image,
+        bounds: "parent"
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        component: "div",
+        sx: {
+          marginTop: '16px',
+          marginLeft: '24px'
+        }
+      }, errorList.length === 0 && /*#__PURE__*/React__namespace.createElement(material.Box, {
+        component: "div",
+        sx: {
+          fontSize: '4rem'
+        },
         "data-testid": "zeroIssuesImage"
       }, /*#__PURE__*/React__namespace.createElement(ThumbsUp, null)), errorList.length > 0 && errorList.map(function (error, index) {
         return /*#__PURE__*/React__namespace.createElement(material.Typography // eslint-disable-next-line react/no-array-index-key
@@ -3413,7 +3617,7 @@
           variant: "body1",
           "data-testid": "errorMessage"
         }, getErrorMessage(error, index));
-      })));
+      }))), rootElement);
     };
 
     var getCustomError = function getCustomError(error) {
@@ -3427,6 +3631,19 @@
       });
     };
 
+    var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
+      switch (sumOfErrors) {
+        case 0:
+          return '0 issues';
+
+        case 1:
+          return '1 issue';
+
+        default:
+          return sumOfErrors + " issues";
+      }
+    };
+
     var getErrorValues = function getErrorValues(fieldErrors) {
       if (!fieldErrors) return [];
       return Object.keys(fieldErrors).reduce(function (list, key) {
@@ -3440,22 +3657,6 @@
       }, []);
     };
 
-    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, __spreadArray([], __read(errorValues)));
-        }
-
-        return list.concat(getErrorValues(errorValue));
-      }, []);
-      return errorList;
-    };
-
     var filterDuplicateErrors = function filterDuplicateErrors(errors) {
       return errors.reduce(function (list, error) {
         // check on type validateRequiredSub and validateRequiredMainOptional since these are giving 'duplicates'
@@ -3477,216 +3678,146 @@
       }, []);
     };
 
-    var TafFormButtons = function TafFormButtons(_a) {
-      var tafAction = _a.tafAction,
-          onTafFormButtonPress = _a.onTafFormButtonPress;
-      var classes = useStyles$9();
-      var errors = reactHookForm.useFormContext().errors;
+    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, __spreadArray([], __read(errorValues)));
+        }
+
+        return list.concat(getErrorValues(errorValue));
+      }, []);
+      return errorList;
+    };
+
+    var IssuesButton = function IssuesButton(_a) {
+      var _b = _a.errors,
+          errors = _b === void 0 ? {} : _b;
       var errorList = filterDuplicateErrors(getErrors(errors));
+      var totalErrors = errorList.length;
+      var errorStatus = totalErrors > 0 ? 'error' : 'success';
+      var buttonColor = "geowebColors.functional." + errorStatus;
 
-      var _b = __read(React__default["default"].useState(false), 2),
-          isIssuesPaneOpen = _b[0],
-          setIsIssuesPaneOpen = _b[1];
+      var _c = __read(React__namespace.useState(false), 2),
+          isIssuesPaneOpen = _c[0],
+          setIsIssuesPaneOpen = _c[1];
 
       var toggleIssuesPane = function toggleIssuesPane() {
         return setIsIssuesPaneOpen(!isIssuesPaneOpen);
       };
 
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        justifyContent: "space-between",
-        alignItems: "center",
-        className: classes.lifecycleButtons
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__default["default"].createElement(IssuesButton, {
-        sumOfErrors: errorList.length,
-        togglePane: toggleIssuesPane
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "discardtaf",
-        variant: "outlined",
-        color: "secondary",
-        type: "button",
-        className: classes.actionButton,
-        onClick: function onClick() {
-          // Simply discard the changes and close the dialog.
-          onTafFormButtonPress('DISCARD');
-        }
-      }, "Discard"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "savedrafttaf",
-        variant: "outlined",
-        color: "secondary",
-        type: "button",
-        className: classes.actionButton,
-        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;
+      var _d = __read(React__namespace.useState({
+        left: 0,
+        top: 0
+      }), 2),
+          startPosition = _d[0],
+          setStartPosition = _d[1];
 
-            case 'CORRECT':
-            case 'DRAFT_CORRECT':
-              onTafFormButtonPress('DRAFT_CORRECT');
-              break;
+      var onClickButton = function onClickButton(event) {
+        var _a;
 
-            default:
-              onTafFormButtonPress('DRAFT');
-              break;
-          }
-        }
-      }, "Save"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "publishtaf",
-        variant: "outlined",
-        color: "secondary",
-        type: "button",
-        className: classes.lastButton,
-        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;
+        var _b = event.currentTarget.getBoundingClientRect(),
+            left = _b.left,
+            top = _b.top;
 
-            case 'CORRECT':
-            case 'DRAFT_CORRECT':
-              onTafFormButtonPress('CORRECT');
-              break;
+        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
+        };
+        setStartPosition(newPosition);
+        toggleIssuesPane();
+      };
 
-            default:
-              onTafFormButtonPress('PUBLISH');
-              break;
-          }
-        }
-      }, "Publish"))), /*#__PURE__*/React__default["default"].createElement(IssuesPane, {
-        errorList: errorList,
-        handleClose: toggleIssuesPane,
-        isOpen: isIssuesPaneOpen
-      }));
-    };
-
-    /* *
-     * 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__default["default"](function () {
-      return {
-        dragHandle: {
-          backgroundColor: 'transparent',
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: "View details"
+      }, /*#__PURE__*/React__namespace.createElement(material.Chip, {
+        "data-testid": "issuesButton",
+        className: "status-" + errorStatus,
+        size: "small",
+        label: getIssuesLabel(totalErrors),
+        onClick: onClickButton,
+        sx: {
+          width: '74px',
+          color: '#ffffff',
+          backgroundColor: buttonColor,
           '&:hover': {
-            backgroundColor: 'transparent'
+            backgroundColor: buttonColor
           },
-          cursor: function cursor(isSorting) {
-            return isSorting ? 'grabbing' : 'grab';
-          }
+          '&:focus': {
+            backgroundColor: buttonColor
+          },
+          fontSize: 12
         }
-      };
-    });
-
-    var DragHandle = function DragHandle(_a) {
-      var _b = _a.isSorting,
-          isSorting = _b === void 0 ? false : _b,
-          _c = _a.isDisabled,
-          isDisabled = _c === void 0 ? false : _c,
-          index = _a.index;
-      var classes = useStyles$7(isSorting);
-      return /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-        className: classes.dragHandle + " handle",
-        "data-testid": "dragHandle-" + index,
-        disableRipple: true,
-        disabled: isDisabled,
-        size: "large"
-      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null));
+      })), /*#__PURE__*/React__namespace.createElement(IssuesPane, {
+        errorList: errorList,
+        handleClose: toggleIssuesPane,
+        isOpen: isIssuesPaneOpen,
+        startPosition: startPosition
+      }));
     };
 
     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(_a) {
-      var isDisabled = _a.isDisabled,
-          tafAction = _a.tafAction,
+      var // can be removed after old TAF is gone
+      defaultTafAction = _a.tafAction,
+          isDefaultDisabled = _a.isDisabled,
           _b = _a.staticTAC,
           staticTAC = _b === void 0 ? '' : _b,
+          tafFromBackend = _a.tafFromBackend,
           _c = _a.onFormAction,
           onFormAction = _c === void 0 ? function () {
         return null;
       } : _c;
-      var classes = useStyles$9();
+      var originalTaf = tafFromBackend.taf;
+
+      var _d = __read(React__default["default"].useState(defaultTafAction), 2),
+          tafAction = _d[0],
+          setTafAction = _d[1];
+
+      var _e = __read(React__default["default"].useState(isDefaultDisabled), 2),
+          isDisabled = _e[0],
+          setIsDisabled = _e[1];
+
       var confirmDialog = shared.useConfirmationDialog();
 
-      var _d = shared.useDraftFormHelpers(),
-          toggleIsDraft = _d.toggleIsDraft,
-          DraftFieldHelper = _d.DraftFieldHelper;
+      var _f = shared.useDraftFormHelpers(),
+          toggleIsDraft = _f.toggleIsDraft,
+          DraftFieldHelper = _f.DraftFieldHelper;
 
       var api$1 = api.useApiContext().api;
       var isMounted = shared.useIsMounted().isMounted;
 
-      var _e = reactHookForm.useFormContext(),
-          control = _e.control,
-          handleSubmit = _e.handleSubmit,
-          watch = _e.watch,
-          trigger = _e.trigger,
-          formState = _e.formState,
-          getValues = _e.getValues;
+      var _g = reactHookForm.useFormContext(),
+          control = _g.control,
+          handleSubmit = _g.handleSubmit,
+          watch = _g.watch,
+          trigger = _g.trigger,
+          formState = _g.formState,
+          getValues = _g.getValues,
+          setValue = _g.setValue,
+          reset = _g.reset;
 
       var isFormDirty = formState.isDirty,
           errors = formState.errors;
       shared.usePreventBrowserClose(isFormDirty && !isDisabled);
       var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
-      var _f = __read(React__default["default"].useState(watch()), 2),
-          delayedFormValues = _f[0],
-          setDelayedFormValues = _f[1];
+      var _h = __read(React__default["default"].useState(watch()), 2),
+          delayedFormValues = _h[0],
+          setDelayedFormValues = _h[1];
 
-      var _g = __read(useTACGenerator(convertTafValuesToObject(delayedFormValues), api$1.getTAC, staticTAC), 2),
-          TAC = _g[0],
-          updateTAC = _g[1];
+      var _j = __read(useTACGenerator(convertTafValuesToObject(delayedFormValues), api$1.getTAC, staticTAC), 2),
+          TAC = _j[0],
+          updateTAC = _j[1];
 
       var hasErrors = Object.keys(errors).length;
 
@@ -3717,12 +3848,34 @@
       var showConfirmDialog = function showConfirmDialog(action) {
         return confirmDialog({
           title: getConfirmationDialogTitle(action),
-          description: getConfirmationDialogContent(action, isFormDirty),
+          description: getConfirmationDialogContent(action, function () {
+            return isTafAmendedCorrectedChanged(isFormDirty, originalTaf, convertTafValuesToObject(getValues()));
+          }),
           confirmLabel: getConfirmationDialogButtonLabel(action)
         });
       };
 
-      var onTafButtonPress = function onTafButtonPress(action) {
+      var resetFormValues = function resetFormValues(action, shouldAddEmptyChangGroup) {
+        if (action === void 0) {
+          action = undefined;
+        }
+
+        var newTaf = prepareTafValues(tafFromBackend.taf, action, shouldAddEmptyChangGroup);
+        reset(newTaf);
+      };
+
+      var resetForm = function resetForm(action, resetDisabled) {
+        if (action === void 0) {
+          action = undefined;
+        }
+
+        var shouldAddEmptyChangGroup = !(tafFromBackend.taf && tafFromBackend.taf.changeGroups) && !resetDisabled;
+        resetFormValues(action, shouldAddEmptyChangGroup);
+        setIsDisabled(resetDisabled);
+        setTafAction(action);
+      };
+
+      var onTafEditModeButtonPress = function onTafEditModeButtonPress(action) {
         switch (action) {
           case 'DRAFT':
           case 'DRAFT_AMEND':
@@ -3736,10 +3889,10 @@
           case 'DISCARD':
             if (isFormDirty) {
               showConfirmDialog(action).then(function () {
-                onFormAction(action);
+                resetForm(undefined, isDefaultDisabled);
               });
             } else {
-              onFormAction(action);
+              resetForm(undefined, isDefaultDisabled);
             }
 
             break;
@@ -3749,8 +3902,36 @@
           case 'PUBLISH':
             toggleIsDraft(false);
             handleSubmit(function (data) {
-              showConfirmDialog(action).then(function () {
-                onFormAction(action, convertTafValuesToObject(data));
+              return __awaiter(void 0, void 0, void 0, function () {
+                var didSucceed;
+                return __generator(this, function (_a) {
+                  switch (_a.label) {
+                    case 0:
+                      return [4
+                      /*yield*/
+                      , showConfirmDialog(action)];
+
+                    case 1:
+                      _a.sent();
+
+                      return [4
+                      /*yield*/
+                      , onFormAction(action, convertTafValuesToObject(data))];
+
+                    case 2:
+                      didSucceed = _a.sent();
+
+                      if (didSucceed) {
+                        setIsDisabled(true);
+                        reset(prepareTafValues(convertTafValuesToObject(data), action, false));
+                        setTafAction(null);
+                      }
+
+                      return [2
+                      /*return*/
+                      ];
+                  }
+                });
               });
             })();
             break;
@@ -3761,19 +3942,33 @@
         }
       };
 
-      var _h = reactHookForm.useFieldArray({
+      var onTafViewModeButtonPress = function onTafViewModeButtonPress(action) {
+        switch (action) {
+          case 'CANCEL':
+            showConfirmDialog(action).then(function () {
+              onFormAction(action, tafFromBackend.taf);
+            });
+            break;
+
+          default:
+            resetForm(action, false);
+            break;
+        }
+      };
+
+      var _k = reactHookForm.useFieldArray({
         control: control,
         name: 'changeGroups'
       }),
-          fields = _h.fields,
-          insert = _h.insert,
-          remove = _h.remove,
-          move = _h.move;
+          fields = _k.fields,
+          insert = _k.insert,
+          remove = _k.remove,
+          move = _k.move;
 
-      var _j = useDragOrder(trigger, move, onFormBlur),
-          onChangeOrder = _j.onChangeOrder,
-          onStartDrag = _j.onStartDrag,
-          activeDraggingIndex = _j.activeDraggingIndex;
+      var _l = useDragOrder(trigger, move, onFormBlur),
+          onChangeOrder = _l.onChangeOrder,
+          onStartDrag = _l.onStartDrag,
+          activeDraggingIndex = _l.activeDraggingIndex;
 
       var onRemoverow = function onRemoverow(index) {
         confirmDialog({
@@ -3790,25 +3985,68 @@
 
 
       var focusFirstInput = function focusFirstInput(rowIndex) {
-        var nextRowFirstInput = document.querySelector("[name=\"changeGroups[" + rowIndex + "].probability\"]");
+        var selector = rowIndex === -1 ? "[name=\"baseForecast.wind\"]" : "[name=\"changeGroups[" + rowIndex + "].probability\"]";
+        var nextRowFirstInput = document.querySelector(selector);
 
         if (nextRowFirstInput) {
           nextRowFirstInput.focus();
         }
+      }; // adding rows and validation don't work well combined, with always skipping validation of fields of rows above the one the inserted row. A setTimeout prevents this issue
+
+
+      var setFocusAndValidate = function setFocusAndValidate(rowIndex) {
+        return setTimeout(function () {
+          focusFirstInput(rowIndex);
+          trigger(); // trigger all fields validation
+        }, 0);
       };
 
-      var onAddRow = function onAddRow(rowIndex) {
+      var onAddRow = function onAddRow(rowIndex, above) {
         if (rowIndex === void 0) {
           rowIndex = -1;
         }
 
-        var newRowIndex = rowIndex + 1;
-        insert(newRowIndex, emptyChangegroup, false); // adding rows and validation don't work well combined, with always skipping validation of fields of rows above the one the inserted row. A setTimeout prevents this issue
+        if (above === void 0) {
+          above = false;
+        }
 
-        setTimeout(function () {
-          focusFirstInput(newRowIndex);
-          trigger(); // trigger all fields validation
-        }, 0);
+        var newRowIndex = above ? rowIndex : rowIndex + 1;
+        insert(newRowIndex, emptyChangegroup, false);
+        setFocusAndValidate(newRowIndex);
+      };
+
+      var _onClearRow = function onClearRow(rowIndex, isChangeGroup) {
+        if (rowIndex === void 0) {
+          rowIndex = -1;
+        }
+
+        if (isChangeGroup === void 0) {
+          isChangeGroup = false;
+        }
+
+        confirmDialog({
+          title: 'Clear row',
+          description: 'Are you sure you want to clear this row?',
+          confirmLabel: 'Yes'
+        }).then(function () {
+          if (isChangeGroup) {
+            remove(rowIndex);
+            insert(rowIndex, emptyChangegroup, false);
+          } else {
+            var baseForecastFields = getFieldNames(false, -1);
+            setValue(baseForecastFields.wind, '');
+            setValue(baseForecastFields.visibility, '');
+            setValue(baseForecastFields.weather1, '');
+            setValue(baseForecastFields.weather2, '');
+            setValue(baseForecastFields.weather3, '');
+            setValue(baseForecastFields.cloud1, '');
+            setValue(baseForecastFields.cloud2, '');
+            setValue(baseForecastFields.cloud3, '');
+            setValue(baseForecastFields.cloud4, '');
+          }
+
+          setFocusAndValidate(rowIndex);
+        });
       };
 
       React__default["default"].useEffect(function () {
@@ -3822,22 +4060,36 @@
 
       }, []);
       return /*#__PURE__*/React__default["default"].createElement("form", {
+        "data-testid": "taf-form",
         onSubmit: handleSubmit(onSubmit),
         onBlur: onFormBlur
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        className: classes.tacTitle
+        sx: {
+          fontSize: '20px',
+          fontWeight: 500,
+          height: '24px'
+        }
       }, "TAC"), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        "data-testid": "form-tac-message",
-        className: classes.tacText
+        sx: {
+          fontSize: '14px',
+          margin: '8px 0px'
+        },
+        "data-testid": "form-tac-message"
       }, TAC.split('\n').map(function (line) {
-        return /*#__PURE__*/React__default["default"].createElement("span", {
+        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          component: "span",
           key: line,
-          className: classes.tacLine,
-          "data-testid": "tafform-tac-message-line"
+          "data-testid": "tafform-tac-message-line",
+          sx: {
+            textIndent: '-0.7em',
+            borderRadius: '3px',
+            paddingRight: '0.7em'
+          }
         }, line);
       })), /*#__PURE__*/React__default["default"].createElement(TafFormRow, {
         disabled: isDisabled,
-        onAddChangeGroup: onAddRow
+        onAddChangeGroupBelow: onAddRow,
+        onClearRow: _onClearRow
       }), /*#__PURE__*/React__default["default"].createElement(reactSortablejs.ReactSortable, {
         tag: "div",
         list: fields,
@@ -3855,13 +4107,17 @@
       }, fields.map(function (item, index) {
         return /*#__PURE__*/React__default["default"].createElement(TafFormRow, {
           field: item,
-          className: classes.formRow,
           key: item.id,
           index: index,
-          lastRow: fields.length === index + 1,
           disabled: isDisabled,
           onRemoveChangeGroup: onRemoverow,
-          onAddChangeGroup: onAddRow,
+          onAddChangeGroupBelow: onAddRow,
+          onAddChangeGroupAbove: function onAddChangeGroupAbove() {
+            return onAddRow(index, true);
+          },
+          onClearRow: function onClearRow() {
+            return _onClearRow(index, true);
+          },
           isChangeGroup: true,
           dragHandle: /*#__PURE__*/React__default["default"].createElement(DragHandle, {
             isDisabled: fields.length === 1 || isDisabled,
@@ -3869,9 +4125,24 @@
             index: index
           })
         });
-      })), !isDisabled && /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
+      })), !isDisabled && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        sx: {
+          marginLeft: 1.5,
+          marginTop: 1
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true
+      }, /*#__PURE__*/React__default["default"].createElement(IssuesButton, {
+        errors: errors
+      }))), /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
+        isFormDisabled: isDisabled,
         tafAction: tafAction,
-        onTafFormButtonPress: onTafButtonPress
+        canBe: tafFromBackend.canbe,
+        onTafEditModeButtonPress: onTafEditModeButtonPress,
+        onTafViewModeButtonPress: onTafViewModeButtonPress
       }), hiddenInputFields.map(function (field) {
         return /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
           name: field,
@@ -3880,72 +4151,33 @@
       }), /*#__PURE__*/React__default["default"].createElement(DraftFieldHelper, null));
     };
 
-    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__default["default"].utc() >= moment__default["default"].utc(taf.validDateStart)) {
-        var now = moment__default["default"].utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-        var validObj = {
-          start: now,
-          end: taf.baseForecast.valid.end
-        };
-        return __assign(__assign({}, taf), {
-          previousValidDateStart: previousValidDateStart,
-          previousValidDateEnd: previousValidDateEnd,
-          validDateStart: now,
-          baseForecast: __assign(__assign({}, taf.baseForecast), {
-            valid: validObj
-          })
-        });
-      }
-
-      return __assign(__assign({}, taf), {
-        previousValidDateStart: previousValidDateStart,
-        previousValidDateEnd: previousValidDateEnd
-      });
-    };
-    var prepareTafValues = function prepareTafValues(_taf, tafAction, addEmptyChangeGroup) {
-      if (addEmptyChangeGroup === void 0) {
-        addEmptyChangeGroup = 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 __assign(__assign(__assign(__assign({}, taf), {
-        messageType: getMessageType(taf, tafAction),
-        baseForecast: formatFormValues(taf.baseForecast)
-      }), taf.changeGroups && {
-        changeGroups: taf.changeGroups.map(formatFormValues)
-      }), addEmptyChangeGroup && {
-        changeGroups: [emptyChangegroup]
-      });
-    };
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
 
     var TafFormWrapper = function TafFormWrapper(_a) {
       var tafFromBackend = _a.tafFromBackend,
           mode = _a.mode,
-          tafAction = _a.tafAction,
           _b = _a.TAC,
           TAC = _b === void 0 ? '' : _b,
-          onFormAction = _a.onFormAction;
+          onFormAction = _a.onFormAction,
+          tafAction = _a.tafAction;
       var taf = tafFromBackend.taf;
       var isDisabled = mode === 'view';
-      var defaultValues = prepareTafValues(taf, tafAction, !isDisabled && !taf.changeGroups);
+      var defaultValues = prepareTafValues(taf, undefined, !isDisabled && !taf.changeGroups);
       var options = {
         defaultValues: defaultValues,
         mode: 'onTouched',
@@ -3956,83 +4188,13 @@
         options: options
       }, /*#__PURE__*/React__default["default"].createElement(TafForm, {
         isDisabled: isDisabled,
-        tafAction: tafAction,
         staticTAC: TAC,
-        onFormAction: onFormAction
+        onFormAction: onFormAction,
+        tafFromBackend: tafFromBackend,
+        tafAction: tafAction
       }));
     };
 
-    var useStyles$6 = makeStyles__default["default"]({
-      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 _b = _a.alertBanner,
-          alertBanner = _b === void 0 ? null : _b,
-          onFormAction = _a.onFormAction,
-          other = __rest(_a, ["open", "toggleDialogStatus", "titleComponent", "children", "onClose", "alertBanner", "onFormAction"]);
-
-      var classes = useStyles$6();
-      return /*#__PURE__*/React__namespace.createElement(material.Dialog, __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__namespace.createElement(material.DialogTitle, {
-        className: classes.dialogHeader
-      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        container: true
-      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true,
-        xs: 11,
-        className: classes.dialogTitle
-      }, titleComponent), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true,
-        xs: true,
-        className: classes.dialogCloseButton
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
-        "data-testid": "closeDialog",
-        size: "small",
-        onClick: function onClick() {
-          return onFormAction('CLOSE');
-        }
-      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))))), alertBanner !== null && alertBanner, /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-        className: classes.dialogChildren
-      }, children));
-    };
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -4046,248 +4208,236 @@
      * 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["default"].createElement(iconsMaterial.CheckCircle, {
-        "data-testid": "status-active",
-        className: className,
-        fontSize: "small"
-      }) : /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Schedule, {
-        "data-testid": "status-upcoming",
-        className: className,
-        fontSize: "small"
-      });
+    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["default"].createElement(material.Box, __assign({
+        role: "tabpanel",
+        hidden: value !== index,
+        id: "simple-tabpanel-" + index,
+        "aria-labelledby": "simple-tab-" + index,
+        "data-testid": "tab-panel-" + index
+      }, other), value === index && children);
     };
 
-    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["default"].createElement(shared.StatusTag, {
-          content: "cancelled",
-          color: "red"
-        });
-      }
+    /* *
+     * 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)
+     * */
 
-      return /*#__PURE__*/React__default["default"].createElement(shared.StatusTag, {
-        content: taf.status.toLowerCase(),
-        color: taf.status === 'EXPIRED' ? 'grey' : 'green'
-      });
+    var TafHeader = function TafHeader(_a) {
+      var title = _a.title;
+      return /*#__PURE__*/React__default["default"].createElement(material.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 useStyles$5 = makeStyles__default["default"]({
-      cardWrapper: {
-        width: '100%'
-      },
-      cardContent: {
-        width: '100%'
-      },
-      activeStatus: {
-        color: '#72bb23'
-      },
-      font: {
-        fontWeight: 'normal'
-      },
-      alignIcon: {
-        display: 'flex',
-        alignSelf: 'center'
+    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 getTafSettings = function getTafSettings() {
+      return tafConfig;
+    };
+
+    var tafSettings = getTafSettings();
+    var getLocationSetting = function getLocationSetting(location, locationSettings) {
+      if (locationSettings === void 0) {
+        locationSettings = tafSettings.locations;
       }
-    });
 
-    var TafListRow = function TafListRow(_a) {
-      var taf = _a.taf,
-          listType = _a.listType,
-          _b = _a.TAC,
-          TAC = _b === void 0 ? '' : _b,
-          _c = _a.showTac,
-          showTac = _c === void 0 ? false : _c;
-      var classes = useStyles$5();
-      var validTimeDate = moment__default["default"].utc(taf.validDateStart).format('DD MMM');
-      var baseTime = moment__default["default"].utc(taf.baseTime).format('HH:mm');
-      return /*#__PURE__*/React__default["default"].createElement(material.Card, {
-        elevation: 0,
-        className: classes.cardWrapper
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        alignItems: "center",
-        spacing: 1
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 3,
-        sm: 2,
-        md: 1
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle2",
-        noWrap: true,
-        className: classes.font
-      }, taf.location)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 3,
-        sm: 3,
-        md: 1,
-        container: true
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 3,
-        sm: 3,
-        md: 3,
-        className: classes.alignIcon
-      }, showTac && /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
-        "data-testid": "taflistrow-tactooltip",
-        title: /*#__PURE__*/React__default["default"].createElement("div", {
-          style: {
-            whiteSpace: 'pre-line'
-          }
-        }, TAC),
-        placement: "bottom-start"
-      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.InfoOutlined, {
-        "data-testid": "taflistrow-tacicon",
-        color: "secondary",
-        fontSize: "small"
-      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 9,
-        sm: 9,
-        md: 9
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle2",
-        className: classes.font,
-        "data-testid": "baseTime"
-      }, baseTime))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 3,
-        sm: 2,
-        md: 1
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle2",
-        className: classes.font,
-        "data-testid": "validTimeDate"
-      }, validTimeDate)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 3,
-        sm: 3,
-        md: 6
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle2",
-        className: classes.font,
-        "data-testid": "validTimeSlot"
-      }, formatValidToString({
-        start: taf.validDateStart,
-        end: taf.validDateEnd
-      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 12,
-        sm: 4,
-        md: 3
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        justifyContent: "flex-start",
-        spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-end"
-      }, taf.status === 'DRAFT' || taf.status === 'DRAFT_CORRECTED' || taf.status === 'DRAFT_AMENDED' ? /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        color: "secondary",
-        size: "small",
-        "data-testid": "tafRow-draft",
-        startIcon: /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Create, {
-          fontSize: "small",
-          color: "secondary"
-        })
-      }, getDraftTitle(taf.status)) : getStatusTagList(taf)), /*#__PURE__*/React__default["default"].createElement(material.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))))));
+      return locationSettings[location];
     };
+    var sortTafsOnLocation = function sortTafsOnLocation(tafList, locationOrder) {
+      if (locationOrder === void 0) {
+        locationOrder = tafSettings.locationOrder;
+      }
 
-    /* *
-     * 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;
+      if (!tafList) return [];
+      return __spreadArray([], __read(tafList)).sort(function (_a, _b) {
+        var tafA = _a.taf;
+        var tafB = _b.taf;
+        return locationOrder.indexOf(tafA.location) < locationOrder.indexOf(tafB.location) ? -1 : 1;
+      });
+    };
+    var getBaseTime = function getBaseTime(baseTime, location) {
+      var currentBaseTime = moment__default["default"].utc(baseTime);
+      var activityPeriod = getLocationSetting(location).activity_period;
+      var nextBaseTime = moment__default["default"].utc(baseTime).add(activityPeriod, 'hours');
+      return {
+        currentBaseTime: currentBaseTime,
+        nextBaseTime: nextBaseTime
+      };
+    };
+    var getTafTimeSlot = function getTafTimeSlot(baseTime, location, status) {
       var now = moment__default["default"].utc();
-      var baseTime = moment__default["default"].utc(taf.baseTime);
-      var activityPeriod = locationSettings[taf.location].activity_period;
-      var nextBaseTime = moment__default["default"].utc(taf.baseTime).add(activityPeriod, 'hours');
 
-      if (taf.status === 'EXPIRED') {
+      var _a = getBaseTime(baseTime, location),
+          currentBaseTime = _a.currentBaseTime,
+          nextBaseTime = _a.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)
-     * */
+        return sortedTafList;
+      }, {
+        current: [],
+        upcoming: [],
+        expired: []
+      });
+    };
+    var muiTabA11yProps = function muiTabA11yProps(index) {
+      return {
+        id: "simple-tab-" + index,
+        'aria-controls': "simple-tabpanel-" + index
+      };
+    };
 
-    var TafFormDialog = function TafFormDialog(_a) {
-      var open = _a.open,
-          toggleFormDialog = _a.toggleFormDialog,
-          tafFromBackend = _a.tafFromBackend,
-          children = _a.children,
-          _b = _a.alertBanner,
-          alertBanner = _b === void 0 ? null : _b,
-          onFormAction = _a.onFormAction;
-      var taf = tafFromBackend ? tafFromBackend.taf : null;
-      var locationSettings = useTafSettings(tafConfig).locations;
-      return /*#__PURE__*/React__default["default"].createElement(ContentDialog, {
-        open: open,
-        toggleDialogStatus: toggleFormDialog,
-        titleComponent: /*#__PURE__*/React__default["default"].createElement(TafListRow, {
-          taf: taf,
-          listType: getListType(taf, locationSettings)
-        }),
-        alertBanner: alertBanner,
-        onFormAction: onFormAction
-      }, children);
+    var EditIcon = function EditIcon(props) {
+      var theme = material.useTheme();
+      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
+        fillRule: "evenodd",
+        fill: "" + theme.palette.geowebColors.buttons.tertiary["default"].color
+      })));
+    };
+
+    var StatusIcon = function StatusIcon(_a) {
+      var timeSlot = _a.timeSlot,
+          status = _a.status;
+
+      if (status === 'NEW') {
+        return null;
+      }
+
+      if (status === 'EXPIRED') {
+        return /*#__PURE__*/React__namespace.createElement(iconsMaterial.Schedule, {
+          "data-testid": "status-expired",
+          fontSize: "small",
+          sx: {
+            transform: 'scaleX(-1)',
+            color: 'geowebColors.buttons.tertiary.disabled.color'
+          }
+        });
+      }
+
+      if (status === 'CANCELLED') {
+        return /*#__PURE__*/React__namespace.createElement(DoDisturbIcon__default["default"], {
+          "data-testid": "status-cancelled",
+          fontSize: "small",
+          sx: {
+            color: 'geowebColors.captions.captionError.rgba'
+          }
+        });
+      }
+
+      if (status === 'DRAFT' || status === 'DRAFT_CORRECTED' || status === 'DRAFT_AMENDED') {
+        return /*#__PURE__*/React__namespace.createElement(EditIcon, {
+          "data-testid": "status-draft"
+        });
+      }
+
+      return timeSlot === 'ACTIVE' ? /*#__PURE__*/React__namespace.createElement(iconsMaterial.CheckCircle, {
+        "data-testid": "status-active",
+        fontSize: "small",
+        sx: {
+          color: 'geowebColors.functional.success'
+        }
+      }) : /*#__PURE__*/React__namespace.createElement(iconsMaterial.Schedule, {
+        "data-testid": "status-upcoming",
+        fontSize: "small",
+        sx: {
+          color: 'geowebColors.functional.success'
+        }
+      });
     };
 
     /* *
@@ -4303,311 +4453,319 @@
      * 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$4 = makeStyles__default["default"]({
-      actionButtons: {
-        paddingRight: '98px',
-        paddingTop: '40px',
-        paddingBottom: '16px'
-      }
-    });
 
-    var TafListButtons = function TafListButtons(_a) {
-      var uuid = _a.uuid,
-          canBe = _a.canBe,
-          onClickTafActionButton = _a.onClickTafActionButton;
-      var classes = useStyles$4();
-      return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        alignItems: "center",
-        justifyContent: "flex-end",
-        "data-testid": "taflist-canbebuttons",
-        spacing: 1,
-        className: classes.actionButtons
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true
-      }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "canceltaf",
-        variant: "outlined",
-        color: "secondary",
-        onClick: function onClick() {
-          return onClickTafActionButton(uuid, 'CANCEL');
+    var TacContainer = function TacContainer(_a) {
+      var taf = _a.taf,
+          _b = _a.isActive,
+          isActive = _b === void 0 ? false : _b;
+      var api$1 = api.useApiContext().api;
+
+      var _c = __read(useTACGenerator(taf, api$1.getTAC), 2),
+          TAC = _c[0],
+          retrieveTAC = _c[1];
+
+      var status = taf.status,
+          location = taf.location,
+          baseTime = taf.baseTime;
+      var locationLabel = getLocationSetting(location).label;
+      var timeSlot = getTafTimeSlot(baseTime, location, status);
+      React__default["default"].useEffect(function () {
+        if (isActive) {
+          retrieveTAC(taf);
         }
-      }, "Cancel")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true
-      }, canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "correctaf",
-        variant: "outlined",
-        color: "secondary",
-        onClick: function onClick() {
-          return onClickTafActionButton(uuid, 'CORRECT');
+      }, [taf, isActive, retrieveTAC]);
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          marginBottom: '20px'
+        },
+        "data-location": location,
+        className: isActive ? 'active' : null
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          marginBottom: '2px'
         }
-      }, "Correct")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true
-      }, canBe.includes('AMENDED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "amendtaf",
-        variant: "outlined",
-        color: "secondary",
-        onClick: function onClick() {
-          return onClickTafActionButton(uuid, 'AMEND');
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          width: 20,
+          height: 20,
+          display: 'flex',
+          marginRight: '6px'
         }
-      }, "Amend")));
+      }, /*#__PURE__*/React__default["default"].createElement(StatusIcon, {
+        timeSlot: timeSlot,
+        status: status
+      })), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: __assign({
+          lineHeight: 1
+        }, isActive && {
+          backgroundColor: 'geowebColors.functional.warningHighlight.rgba',
+          padding: '0 2px',
+          marginLeft: '-2px'
+        })
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: {
+          fontSize: '12px',
+          color: 'geowebColors.captions.captionInformation.rgba'
+        },
+        "data-testid": "tafLocation",
+        component: "span"
+      }, location), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: {
+          fontSize: '12px',
+          marginLeft: '10px'
+        },
+        "data-testid": "tafLocationLabel",
+        component: "span"
+      }, locationLabel))), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          fontSize: '12px',
+          letterSpacing: '0.4px',
+          color: 'geowebColors.captions.captionStatus.rgba'
+        }
+      }, TAC.split('\n').map(function (line) {
+        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          component: "span",
+          key: line,
+          sx: {
+            display: 'inline-block'
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          component: "span",
+          sx: __assign({
+            display: 'inline',
+            boxDecorationBreak: 'clone',
+            WebkitBoxDecorationBreak: 'clone'
+          }, isActive && {
+            backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
+          })
+        }, line));
+      })));
     };
 
-    var useStyles$3 = makeStyles__default["default"]({
-      accordion: {
-        marginBottom: '5px'
-      },
-      formPadding: {
-        padding: '8px'
-      },
-      expandIcon: {
-        color: '#0075a9'
-      }
-    });
+    var TacOverview = function TacOverview(_a) {
+      var _b = _a.upcomingTafs,
+          upcomingTafs = _b === void 0 ? [] : _b,
+          _c = _a.currentTafs,
+          currentTafs = _c === void 0 ? [] : _c,
+          _d = _a.expiredTafs,
+          expiredTafs = _d === void 0 ? [] : _d,
+          _e = _a.hideTitle,
+          hideTitle = _e === void 0 ? false : _e,
+          _f = _a.activeTaf,
+          activeTaf = _f === void 0 ? null : _f;
+
+      var _g = __read(React__default["default"].useState(0), 2),
+          activeTab = _g[0],
+          setActiveTab = _g[1];
+
+      var scrollRef = React__default["default"].useRef(null);
+      var tabs = [{
+        title: 'Upcoming',
+        tafList: upcomingTafs
+      }, {
+        title: 'Current & Expired',
+        tafList: sortTafsOnLocation(__spreadArray(__spreadArray([], __read(currentTafs)), __read(expiredTafs)))
+      }];
+      var activeLocation = (activeTaf === null || activeTaf === void 0 ? void 0 : activeTaf.taf.location) || null;
 
-    var fromStatusToAction = function fromStatusToAction(tafStatus) {
-      switch (tafStatus) {
-        case 'DRAFT':
-          return 'DRAFT';
+      var isActiveLocation = function isActiveLocation(location) {
+        return location === activeLocation;
+      };
 
-        case 'DRAFT_AMENDED':
-          return 'DRAFT_AMEND';
+      var scrollToPosition = React__default["default"].useCallback(function () {
+        if (!scrollRef.current) return;
+        var containerTop = scrollRef.current.getBoundingClientRect().top;
+        var firstLocation = scrollRef.current.querySelector("[data-location=\"" + 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);
+      };
 
-        case 'DRAFT_CORRECTED':
-          return 'DRAFT_CORRECT';
+      var onChangeTab = function onChangeTab(_event, newValue) {
+        setActiveTab(newValue);
+        resetScrollPosition();
+      };
 
-        default:
-          return 'NEW';
-      }
+      React__default["default"].useEffect(function () {
+        if (activeLocation) {
+          scrollToPosition();
+        }
+      }, [activeLocation, scrollToPosition]);
+      React__default["default"].useEffect(function () {
+        var SCROLL_DELAY = 1000;
+        var timer = setTimeout(function () {
+          scrollToPosition();
+        }, SCROLL_DELAY);
+        return function () {
+          clearTimeout(timer);
+        };
+      }, [activeTab, scrollToPosition]);
+      return /*#__PURE__*/React__default["default"].createElement(material.Card, {
+        variant: "outlined",
+        sx: {
+          maxHeight: '100%',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          zIndex: 1
+        }
+      }, !hideTitle && /*#__PURE__*/React__default["default"].createElement(TafHeader, {
+        title: "TAC Overview"
+      }), /*#__PURE__*/React__default["default"].createElement(material.Tabs, {
+        value: activeTab,
+        onChange: onChangeTab,
+        "aria-label": "tabs"
+      }, tabs.map(function (tab, index) {
+        return /*#__PURE__*/React__default["default"].createElement(material.Tab, __assign({
+          key: tab.title,
+          sx: {
+            flexGrow: 1
+          },
+          label: tab.title,
+          "data-testid": "tab-" + index
+        }, muiTabA11yProps(index)));
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        ref: scrollRef,
+        sx: {
+          padding: '10px',
+          maxHeight: '100%',
+          overflow: 'auto'
+        }
+      }, tabs.map(function (tab, index) {
+        return /*#__PURE__*/React__default["default"].createElement(TabPanel, {
+          key: tab.title,
+          value: activeTab,
+          index: index
+        }, tab.tafList.map(function (_a) {
+          var taf = _a.taf;
+          return /*#__PURE__*/React__default["default"].createElement(TacContainer, {
+            key: taf.uuid,
+            taf: taf,
+            isActive: isActiveLocation(taf.location)
+          });
+        }));
+      })));
     };
 
-    var TafListAccordion = function TafListAccordion(_a) {
-      var tafListItem = _a.tafListItem,
-          listType = _a.listType,
-          _b = _a.errorCancelTaf,
-          errorCancelTaf = _b === void 0 ? [] : _b,
-          onClickTafActionButton = _a.onClickTafActionButton;
-      var classes = useStyles$3();
-      var status = tafListItem.taf.status;
-      var api$1 = api.useApiContext().api;
+    var TacOverviewIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("path", {
+      d: "M3 3h4v4H3V3zm0 7h4v4H3v-4zm0 7h4v4H3v-4zm7-14h11v4H10V3zm0 7h11v4H10v-4zm0 7h11v4H10v-4z"
+    }));
 
-      var _c = __read(useTACGenerator(tafListItem.taf, api$1.getTAC), 2),
-          TAC = _c[0],
-          requestTAC = _c[1];
+    var TacOverviewMobile = function TacOverviewMobile(_a) {
+      var upcomingTafs = _a.upcomingTafs,
+          currentTafs = _a.currentTafs,
+          expiredTafs = _a.expiredTafs,
+          activeTaf = _a.activeTaf,
+          _b = _a.defaultOpen,
+          defaultOpen = _b === void 0 ? false : _b;
 
-      React__default["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
+      var _c = __read(React__namespace.useState(defaultOpen), 2),
+          isOpen = _c[0],
+          toggleOpen = _c[1];
+
+      var onClose = function onClose() {
+        return toggleOpen(false);
+      };
 
-      }, [tafListItem.taf]);
-      var popOut = status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED';
-      return /*#__PURE__*/React__default["default"].createElement(material.Accordion, __assign({
-        "data-testid": "tafListItem",
-        className: classes.accordion
-      }, popOut ? {
-        expanded: false
-      } : {}, {
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        active: isOpen,
         onClick: function onClick() {
-          if (popOut) {
-            onClickTafActionButton(tafListItem.taf.uuid, fromStatusToAction(tafListItem.taf.status));
-          }
+          return toggleOpen(true);
         },
-        TransitionProps: {
-          unmountOnExit: true
+        "data-testid": "tac-overview-mobile-button",
+        sx: {
+          display: {
+            xs: 'inline-flex',
+            sm: 'none'
+          },
+          position: 'absolute',
+          right: '8px',
+          top: '30px'
         }
-      }), /*#__PURE__*/React__default["default"].createElement(material.AccordionSummary, {
-        "data-testid": "tafListSectionAccordionSummary",
-        expandIcon: popOut ? /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
-          title: "Popout to edit",
-          className: classes.expandIcon
-        }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.OpenInNew, {
-          "data-testid": "popOutIcon",
-          fontSize: "small"
-        })) : /*#__PURE__*/React__default["default"].createElement(iconsMaterial.ExpandMore, {
-          className: classes.expandIcon,
-          "data-testid": "expandIcon"
-        })
-      }, /*#__PURE__*/React__default["default"].createElement(TafListRow, {
-        taf: tafListItem.taf,
-        listType: listType,
-        TAC: TAC,
-        showTac: true
-      })), /*#__PURE__*/React__default["default"].createElement(material.AccordionDetails, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        direction: "column"
-      }, errorCancelTaf.length > 0 && errorCancelTaf.find(function (uuid) {
-        return uuid === tafListItem.taf.uuid;
-      }) && /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
-        severity: "error",
-        title: "Cancelling this TAF failed, please try again",
-        dataTestId: "tafList-cancelAlert"
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classes.formPadding
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__default["default"].createElement(TafFormWrapper, {
-        tafFromBackend: tafListItem,
-        mode: "view",
-        TAC: TAC
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__default["default"].createElement(TafListButtons, {
-        canBe: tafListItem.canbe,
-        uuid: tafListItem.taf.uuid,
-        onClickTafActionButton: onClickTafActionButton
-      }))))));
+      }, TacOverviewIcon), /*#__PURE__*/React__namespace.createElement(material.Dialog, {
+        open: isOpen,
+        onClose: onClose,
+        PaperProps: {
+          sx: {
+            margin: 2,
+            width: '100%',
+            height: '100%'
+          }
+        },
+        "data-testid": "tac-overview-mobile"
+      }, /*#__PURE__*/React__namespace.createElement(shared.ToolHeader, {
+        title: "TAC Overview",
+        size: "small",
+        isDraggable: false,
+        onClose: onClose
+      }), /*#__PURE__*/React__namespace.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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-    var useStyles$2 = makeStyles__default["default"]({
-      listHeaders: {
-        color: '#9d9d9d'
-      },
-      formPadding: {
-        padding: '8px'
-      },
-      paperButton: {
-        width: '100%'
-      }
-    });
-
-    var TafListSection = function TafListSection(_a) {
-      var tafList = _a.tafList,
-          title = _a.title,
-          listType = _a.listType,
-          _b = _a.errorCancelTaf,
-          errorCancelTaf = _b === void 0 ? [] : _b,
-          onClickTafActionButton = _a.onClickTafActionButton;
-      var classes = useStyles$2();
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle2",
-        className: classes.listHeaders
-      }, title), /*#__PURE__*/React__default["default"].createElement("div", {
-        "data-testid": "tafList" + listType
-      }, tafList.map(function (tafListItem) {
-        return /*#__PURE__*/React__default["default"].createElement(TafListAccordion, {
-          key: tafListItem.taf.uuid + "-" + tafListItem.taf.status,
-          tafListItem: tafListItem,
-          listType: listType,
-          errorCancelTaf: errorCancelTaf,
-          onClickTafActionButton: onClickTafActionButton
-        });
-      })));
+    var formatBaseTime = function formatBaseTime(time) {
+      return time.format('HH:mm DD MMM');
     };
 
-    var useStyles$1 = makeStyles__default["default"]({
-      accordion: {
-        marginBottom: '5px'
-      },
-      listHeaders: {
-        color: '#9d9d9d'
-      },
-      listBody: {
-        width: '100%',
-        minHeight: '600px'
+    var TopTabs = function TopTabs(_a) {
+      var timeSlot = _a.timeSlot,
+          _b = _a.onChangeTimeSlot,
+          onChangeTimeSlot = _b === void 0 ? function () {} : _b,
+          tafFromBackend = _a.tafFromBackend;
+
+      if (!tafFromBackend) {
+        return null;
       }
-    });
 
-    var TafList = function TafList(_a) {
-      var e_1, _b;
+      var activeTab = timeSlot === 'UPCOMING' ? 0 : 1;
 
-      var tafList = _a.tafList,
-          isLoading = _a.isLoading,
-          error = _a.error,
-          _c = _a.errorCancelTaf,
-          errorCancelTaf = _c === void 0 ? [] : _c,
-          onClickTafActionButton = _a.onClickTafActionButton;
-      var classes = useStyles$1();
-      var locationSettings = useTafSettings(tafConfig).locations;
-      var upcomingTafs = [];
-      var currentTafs = [];
-      var expiredTafs = [];
-
-      if (tafList) {
-        try {
-          for (var tafList_1 = __values(tafList), tafList_1_1 = tafList_1.next(); !tafList_1_1.done; tafList_1_1 = tafList_1.next()) {
-            var taf = tafList_1_1.value;
-            var now = moment__default["default"].utc();
-            var baseTime = moment__default["default"].utc(taf.taf.baseTime);
-            var activityPeriod = locationSettings[taf.taf.location].activity_period;
-            var nextBaseTime = moment__default["default"].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);
-            }
-          }
-        } catch (e_1_1) {
-          e_1 = {
-            error: e_1_1
-          };
-        } finally {
-          try {
-            if (tafList_1_1 && !tafList_1_1.done && (_b = tafList_1["return"])) _b.call(tafList_1);
-          } finally {
-            if (e_1) throw e_1.error;
-          }
-        }
-      }
+      var _c = getBaseTime(tafFromBackend.taf.baseTime, tafFromBackend.taf.location),
+          currentBaseTime = _c.currentBaseTime,
+          nextBaseTime = _c.nextBaseTime;
 
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        direction: "column",
-        alignItems: "stretch"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        className: classes.listBody
-      }, error && /*#__PURE__*/React__default["default"].createElement(shared.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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TafListSection, {
-        title: "Upcoming",
-        listType: "UPCOMING",
-        tafList: upcomingTafs,
-        errorCancelTaf: errorCancelTaf,
-        onClickTafActionButton: onClickTafActionButton
-      }), /*#__PURE__*/React__default["default"].createElement(TafListSection, {
-        title: "Current time slot",
-        listType: "ACTIVE",
-        tafList: currentTafs,
-        errorCancelTaf: errorCancelTaf,
-        onClickTafActionButton: onClickTafActionButton
-      }), /*#__PURE__*/React__default["default"].createElement(TafListSection, {
-        title: "Expired",
-        listType: "EXPIRED",
-        tafList: expiredTafs,
-        errorCancelTaf: errorCancelTaf,
-        onClickTafActionButton: onClickTafActionButton
-      })), isLoading && /*#__PURE__*/React__default["default"].createElement(material.Skeleton, {
-        "data-testid": "tafList-skeleton",
-        variant: "rectangular",
-        height: "660px"
-      })));
+      var tabs = [{
+        title: "Upcoming " + formatBaseTime(nextBaseTime),
+        timeSlot: 'UPCOMING'
+      }, {
+        title: "Current " + formatBaseTime(currentBaseTime),
+        timeSlot: 'ACTIVE'
+      }];
+
+      var onChangeTab = function onChangeTab(_event, newValue) {
+        onChangeTimeSlot(tabs[newValue].timeSlot);
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement(material.Tabs, {
+        value: activeTab,
+        onChange: onChangeTab,
+        "aria-label": "timeslot-tabs",
+        variant: "fullWidth"
+      }, tabs.map(function (tab, index) {
+        return /*#__PURE__*/React__default["default"].createElement(material.Tab, __assign({
+          key: tab.title,
+          label: tab.title,
+          "data-testid": "tab-" + index,
+          sx: {
+            fontSize: 16
+          }
+        }, muiTabA11yProps(index)));
+      }));
     };
 
     /* *
@@ -4623,189 +4781,270 @@
      * 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__default["default"]({
-      backdrop: {
-        zIndex: 1500,
-        color: '#fff'
-      }
-    });
-
-    var Spinner = function Spinner() {
-      var classes = useStyles();
-      return /*#__PURE__*/React__default["default"].createElement(material.Backdrop, {
-        open: true,
-        className: classes.backdrop
-      }, /*#__PURE__*/React__default["default"].createElement(material.CircularProgress, {
-        "data-testid": "spinner",
-        color: "inherit"
-      }));
-    };
 
-    var useTimeoutCancelError = function useTimeoutCancelError(pollingInterval) {
-      if (pollingInterval === void 0) {
-        pollingInterval = 10000;
-      }
-
-      var _a = __read(React__default["default"].useState([]), 2),
-          errorCancelTaf = _a[0],
-          setErrorCancelTaf = _a[1];
-
-      React__default["default"].useEffect(function () {
-        var cancelErrorMessageHandler = errorCancelTaf.length > 0 ? setTimeout(function () {
-          if (errorCancelTaf.length > 0) {
-            setErrorCancelTaf(errorCancelTaf.slice(1));
+    var LocationTabs = function LocationTabs(_a) {
+      var tafList = _a.tafList,
+          _b = _a.activeIndex,
+          activeIndex = _b === void 0 ? 0 : _b,
+          _c = _a.onChangeTab,
+          onChangeTab = _c === void 0 ? function () {} : _c,
+          timeSlot = _a.timeSlot;
+      return /*#__PURE__*/React__namespace.createElement(material.MenuList, {
+        "data-testid": "location-tabs",
+        sx: {
+          paddingTop: '32px'
+        }
+      }, tafList.map(function (_a, index) {
+        var taf = _a.taf;
+        return /*#__PURE__*/React__namespace.createElement(material.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);
           }
-        }, pollingInterval) : null;
-        return function () {
-          if (cancelErrorMessageHandler !== null) {
-            clearTimeout(cancelErrorMessageHandler);
+        }, /*#__PURE__*/React__namespace.createElement(Box__default["default"], {
+          component: "span",
+          sx: {
+            fontSize: '12px',
+            fontWeight: '500',
+            letterSpacing: '0.09px',
+            '& + svg': {
+              position: 'absolute',
+              bottom: '1px',
+              width: '20px',
+              height: '20px'
+            }
           }
-        }; // 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;
-      });
+        }, taf.location), /*#__PURE__*/React__namespace.createElement(StatusIcon, {
+          timeSlot: timeSlot,
+          status: taf.status
+        }));
+      }));
     };
 
-    var TafWrapper = function TafWrapper() {
-      var api$1 = api.useApiContext().api;
-      var confirmDialog = shared.useConfirmationDialog();
-
-      var _a = __read(React__default["default"].useState(false), 2),
-          isTafDialogOpen = _a[0],
-          setTafDialogOpen = _a[1];
-
-      var _b = __read(React__default["default"].useState(null), 2),
-          selectedTafId = _b[0],
-          setselectedTafId = _b[1];
+    var Spinner = function Spinner(props) {
+      return /*#__PURE__*/React__default["default"].createElement(material.Backdrop, __assign({
+        open: true
+      }, props), /*#__PURE__*/React__default["default"].createElement(material.CircularProgress, {
+        "data-testid": "spinner",
+        color: "inherit"
+      }));
+    };
 
-      var _c = __read(React__default["default"].useState(null), 2),
-          tafDialogAction = _c[0],
-          setTafDialogAction = _c[1];
+    var fromActionToStatus = function fromActionToStatus(tafAction) {
+      switch (tafAction) {
+        case 'DRAFT':
+          return 'DRAFT';
 
-      var _d = __read(React__default["default"].useState(false), 2),
-          errorPostMessage = _d[0],
-          setErrorPostMessage = _d[1];
+        case 'DRAFT_AMEND':
+          return 'DRAFT_AMENDED';
 
-      var _e = __read(React__default["default"].useState(''), 2),
-          errorPostMessageText = _e[0],
-          setErrorPostMessageText = _e[1];
+        case 'DRAFT_CORRECT':
+          return 'DRAFT_CORRECTED';
 
-      var _f = __read(React__default["default"].useState(false), 2),
-          showSpinner = _f[0],
-          setSpinner = _f[1]; // clear error message for cancel after 10 seconds
+        case 'PUBLISH':
+          return 'PUBLISHED';
 
+        case 'AMEND':
+          return 'AMENDED';
 
-      var _g = __read(useTimeoutCancelError(), 2),
-          errorCancelTaf = _g[0],
-          setErrorCancelTaf = _g[1]; // Retrieve list of tafs
+        case 'CORRECT':
+          return 'CORRECTED';
 
+        case 'CANCEL':
+          return 'CANCELLED';
 
-      var _h = api.useApi(api$1.getTafList),
-          errorList = _h.error,
-          isLoadingList = _h.isLoading,
-          tafList = _h.result,
-          fetchNewTafList = _h.fetchApiData;
+        default:
+          return 'NEW';
+      }
+    };
 
-      var getNewTafList = function getNewTafList() {
-        fetchNewTafList({});
-      };
+    var TafPanel = function TafPanel(_a) {
+      var tafFromBackend = _a.tafFromBackend,
+          activeTafIndex = _a.activeTafIndex,
+          index = _a.index,
+          _b = _a.onPostTaf,
+          onPostTaf = _b === void 0 ? function () {} : _b;
+      var api$1 = api.useApiContext().api;
 
-      shared.usePoller([tafList, errorList], getNewTafList);
+      var _c = __read(React__default["default"].useState(false), 2),
+          isLoading = _c[0],
+          setLoading = _c[1];
 
-      var toggleTafDialog = function toggleTafDialog() {
-        // Refresh list on closing dialog
-        if (isTafDialogOpen === true) getNewTafList(); // Set error message back to false
+      var _d = __read(React__default["default"].useState(null), 2),
+          error = _d[0],
+          setError = _d[1]; // removes cancelled error message
 
-        setErrorPostMessage(false);
-        setErrorPostMessageText('');
-        setTafDialogOpen(!isTafDialogOpen);
-      };
 
       React__default["default"].useEffect(function () {
-        if (selectedTafId) {
-          toggleTafDialog();
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-      }, [selectedTafId]);
-
-      var onClickTafActionButton = function onClickTafActionButton(tafUuid, action) {
-        if (action === 'CANCEL') {
-          confirmDialog({
-            title: 'Cancel TAF',
-            description: 'Are you sure you want to cancel this TAF?',
-            confirmLabel: 'Cancel'
-          }).then(function () {
-            var taf = getSelectedTaf(tafUuid, tafList).taf;
-            postTaf({
-              taf: taf,
-              changeStatusTo: 'CANCELLED'
-            });
-          });
-        } else if (selectedTafId === tafUuid) {
-          setTafDialogAction(action);
-          toggleTafDialog();
-        } else {
-          setTafDialogAction(action);
-          setselectedTafId(tafUuid);
-        }
-      };
+        var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
+          setError(null);
+        }, 10000) : null;
+        return function () {
+          if (cancelErrorTimeout !== null) {
+            clearTimeout(cancelErrorTimeout);
+          }
+        };
+      }, [error]);
 
       var postTaf = function postTaf(data) {
         return __awaiter(void 0, void 0, void 0, function () {
-          var error_1;
+          var error_1, newError;
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
-                setSpinner(true);
-                _a.label = 1;
-
-              case 1:
-                _a.trys.push([1, 3,, 4]);
+                _a.trys.push([0, 2,, 3]);
 
+                setLoading(true);
                 return [4
                 /*yield*/
                 , api$1.postTaf(data)];
 
-              case 2:
+              case 1:
                 _a.sent();
 
-                if (isTafDialogOpen) toggleTafDialog();
-                setSpinner(false); // fetch new taflist
+                setLoading(false);
+                setError(null); // callback
 
-                getNewTafList(); // If a post has succeeded remove error message
-
-                setErrorCancelTaf([]);
+                onPostTaf();
                 return [3
                 /*break*/
-                , 4];
+                , 3];
 
-              case 3:
+              case 2:
                 error_1 = _a.sent();
+                newError = data.changeStatusTo === 'CANCELLED' ? {
+                  type: 'CANCELLED',
+                  title: 'Cancelling this TAF failed, please try again'
+                } : {
+                  type: 'SERVER',
+                  title: 'An error has occurred while saving, please try again',
+                  message: shared.getAxiosErrorMessage(error_1)
+                };
+                setError(newError);
+                setLoading(false);
+                throw error_1;
+
+              case 3:
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
+      };
 
-                if (data.changeStatusTo === 'CANCELLED') {
-                  setErrorCancelTaf(__spreadArray(__spreadArray([], __read(errorCancelTaf)), [data.taf.uuid]));
-                } else {
-                  setErrorPostMessage(true);
+      var getViewMode = function getViewMode(status) {
+        return status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED' ? 'edit' : 'view';
+      };
 
-                  if (shared.isAxiosError(error_1)) {
-                    setErrorPostMessageText(shared.getAxiosErrorMessage(error_1));
-                  }
+      var onTafAction = function onTafAction(action, taf) {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var _a;
+
+          return __generator(this, function (_b) {
+            switch (_b.label) {
+              case 0:
+                _b.trys.push([0, 5,, 6]);
+
+                _a = action;
+
+                switch (_a) {
+                  case 'DRAFT':
+                    return [3
+                    /*break*/
+                    , 1];
+
+                  case 'DRAFT_AMEND':
+                    return [3
+                    /*break*/
+                    , 1];
+
+                  case 'DRAFT_CORRECT':
+                    return [3
+                    /*break*/
+                    , 1];
+
+                  case 'PUBLISH':
+                    return [3
+                    /*break*/
+                    , 1];
+
+                  case 'AMEND':
+                    return [3
+                    /*break*/
+                    , 1];
+
+                  case 'CANCEL':
+                    return [3
+                    /*break*/
+                    , 1];
+
+                  case 'CORRECT':
+                    return [3
+                    /*break*/
+                    , 1];
                 }
 
-                setSpinner(false);
                 return [3
                 /*break*/
-                , 4];
+                , 3];
+
+              case 1:
+                // post taf
+                return [4
+                /*yield*/
+                , postTaf({
+                  taf: taf,
+                  changeStatusTo: fromActionToStatus(action)
+                })];
+
+              case 2:
+                // post taf
+                _b.sent();
+
+                return [2
+                /*return*/
+                , true];
+
+              case 3:
+                return [2
+                /*return*/
+                , false];
 
               case 4:
+                return [3
+                /*break*/
+                , 6];
+
+              case 5:
+                _b.sent();
+                return [2
+                /*return*/
+                , false];
+
+              case 6:
                 return [2
                 /*return*/
                 ];
@@ -4814,97 +5053,273 @@
         });
       };
 
-      var fromActionToStatus = function fromActionToStatus(tafAction) {
-        switch (tafAction) {
-          case 'DRAFT':
-            return 'DRAFT';
-
-          case 'DRAFT_AMEND':
-            return 'DRAFT_AMENDED';
+      return /*#__PURE__*/React__default["default"].createElement(TabPanel, {
+        value: activeTafIndex,
+        index: index,
+        "data-testid": "taf-panel" + (activeTafIndex === index ? '-active' : '')
+      }, /*#__PURE__*/React__default["default"].createElement(TafHeader, {
+        title: getTafStatusLabel(tafFromBackend.taf.status)
+      }), isLoading && /*#__PURE__*/React__default["default"].createElement(Spinner, {
+        "data-testid": "taf-loading",
+        sx: {
+          position: 'absolute',
+          zIndex: 1,
+          color: 'geowebColors.backdrops.white.fill'
+        }
+      }), error && /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
+        severity: "error",
+        title: error.title,
+        info: error.message,
+        dataTestId: "taf-error"
+      }), /*#__PURE__*/React__default["default"].createElement(TafFormWrapper, {
+        mode: getViewMode(tafFromBackend.taf.status),
+        tafFromBackend: tafFromBackend,
+        onFormAction: onTafAction
+      }));
+    };
 
-          case 'DRAFT_CORRECT':
-            return 'DRAFT_CORRECTED';
+    var TafLayout = function TafLayout(_a) {
+      var _b = _a.tafList,
+          tafList = _b === void 0 ? [] : _b,
+          _c = _a.onPostTaf,
+          onPostTaf = _c === void 0 ? function () {} : _c;
+
+      var _d = __read(React__default["default"].useState(sortTafTimeSlots(tafList)), 2),
+          _e = _d[0],
+          upcoming = _e.upcoming,
+          current = _e.current,
+          expired = _e.expired,
+          updateSortedTafs = _d[1];
+
+      var _f = __read(upcoming.slice(-1), 1),
+          lastUpcomingTaf = _f[0];
+
+      var _g = __read(React__default["default"].useState('UPCOMING'), 2),
+          timeSlot = _g[0],
+          setTimeSlot = _g[1];
+
+      var _h = __read(React__default["default"].useState(upcoming), 2),
+          locations = _h[0],
+          setLocations = _h[1];
+
+      var _j = __read(React__default["default"].useState(0), 2),
+          activeTafIndex = _j[0],
+          setActiveTafIndex = _j[1];
+
+      var onChangeTimeSlot = function onChangeTimeSlot(newTimeSlot) {
+        setTimeSlot(newTimeSlot);
+        setLocations(newTimeSlot === 'ACTIVE' ? current : upcoming);
+        setActiveTafIndex(0);
+      };
 
-          case 'PUBLISH':
-            return 'PUBLISHED';
+      React__default["default"].useEffect(function () {
+        var newSortedTafs = sortTafTimeSlots(tafList);
+        var updatedLocations = timeSlot === 'ACTIVE' ? newSortedTafs.current : newSortedTafs.upcoming;
+        updateSortedTafs(sortTafTimeSlots(tafList));
+        setLocations(updatedLocations); // update active index
 
-          case 'AMEND':
-            return 'AMENDED';
+        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]);
 
-          case 'CORRECT':
-            return 'CORRECTED';
+      if (!tafList) {
+        return null;
+      }
 
-          default:
-            return 'NEW';
+      var activeTaf = locations[activeTafIndex];
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        id: MODAL_DIALOG_ELEMENT,
+        component: "div",
+        sx: {
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          overflow: 'hidden',
+          pointerEvents: 'none'
         }
-      };
+      }), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          height: '100%',
+          maxHeight: '100%'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          minWidth: 320,
+          maxWidth: 1272,
+          margin: 'auto',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        spacing: 2,
+        sx: {
+          paddingLeft: 1,
+          paddingRight: 1
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 12,
+        sm: 9
+      }, /*#__PURE__*/React__default["default"].createElement(TopTabs, {
+        tafFromBackend: lastUpcomingTaf,
+        timeSlot: timeSlot,
+        onChangeTimeSlot: onChangeTimeSlot
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        flexGrow: 1,
+        overflow: "hidden"
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        spacing: 2,
+        sx: {
+          height: '100%',
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 2,
+          overflow: 'auto'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 3,
+        sm: 1
+      }, /*#__PURE__*/React__default["default"].createElement(LocationTabs, {
+        tafList: locations,
+        activeIndex: activeTafIndex,
+        onChangeTab: setActiveTafIndex,
+        timeSlot: timeSlot
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: true
+      }, /*#__PURE__*/React__default["default"].createElement(material.Card, {
+        variant: "outlined",
+        sx: {
+          padding: 1,
+          paddingTop: 0,
+          marginBottom: '12px',
+          position: 'relative'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(TacOverviewMobile, {
+        upcomingTafs: upcoming,
+        currentTafs: current,
+        expiredTafs: expired,
+        activeTaf: activeTaf
+      }), locations.map(function (tafFromBackend, index) {
+        return /*#__PURE__*/React__default["default"].createElement(TafPanel, {
+          key: tafFromBackend.taf.uuid,
+          activeTafIndex: activeTafIndex,
+          index: index,
+          tafFromBackend: tafFromBackend,
+          onPostTaf: onPostTaf
+        });
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 3,
+        sx: {
+          height: '100%'
+        },
+        display: {
+          xs: 'none',
+          sm: 'block'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(TacOverview, {
+        upcomingTafs: upcoming,
+        currentTafs: current,
+        expiredTafs: expired,
+        activeTaf: activeTaf
+      })))))));
+    };
 
-      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;
+    var TafModule = function TafModule() {
+      var api$1 = api.useApiContext().api;
 
-          case 'DRAFT':
-          case 'DRAFT_AMEND':
-          case 'DRAFT_CORRECT':
-          case 'PUBLISH':
-          case 'AMEND':
-          case 'CORRECT':
-            postTaf({
-              taf: taf,
-              changeStatusTo: fromActionToStatus(action)
-            });
-            break;
+      var _a = __read(React__namespace.useState(false), 2),
+          isLoading = _a[0],
+          setLoading = _a[1];
 
-          default:
-            toggleTafDialog();
-            break;
-        }
+      var _b = api.useApi(api$1.getTafList),
+          getTafListError = _b.error,
+          isFetchingInitial = _b.isLoading,
+          tafList = _b.result,
+          fetchNewTafList = _b.fetchApiData;
+
+      shared.usePoller([tafList, getTafListError], function () {
+        return fetchNewTafList({});
+      });
+
+      var reFetchNewTafList = function reFetchNewTafList() {
+        return __awaiter(void 0, void 0, void 0, function () {
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                _a.trys.push([0, 2,, 3]);
+
+                setLoading(true);
+                return [4
+                /*yield*/
+                , fetchNewTafList({})];
+
+              case 1:
+                _a.sent();
+
+                setLoading(false);
+                return [3
+                /*break*/
+                , 3];
+
+              case 2:
+                _a.sent();
+                setLoading(false);
+                return [3
+                /*break*/
+                , 3];
+
+              case 3:
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
       };
 
-      var selectedTaf = getSelectedTaf(selectedTafId, tafList);
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TafList, {
+      var hasTafListError = getTafListError !== null;
+
+      if (isFetchingInitial) {
+        return /*#__PURE__*/React__namespace.createElement(LinearProgress__default["default"], {
+          color: "secondary",
+          "data-testid": "loading-bar"
+        });
+      }
+
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        component: "div",
+        id: "tafmodule",
+        sx: {
+          height: '100%'
+        }
+      }, isLoading && /*#__PURE__*/React__namespace.createElement(LinearProgress__default["default"], {
+        "data-testid": "loading-bar",
+        color: "secondary",
+        sx: {
+          marginBottom: '-4px'
+        }
+      }), hasTafListError && /*#__PURE__*/React__namespace.createElement(shared.AlertBanner, {
+        severity: "error",
+        title: "An error has occurred while retrieving the list",
+        info: getTafListError.message
+      }), /*#__PURE__*/React__namespace.createElement(TafLayout, {
         tafList: tafList,
-        isLoading: isLoadingList,
-        error: errorList,
-        onClickTafActionButton: onClickTafActionButton,
-        errorCancelTaf: errorCancelTaf
-      }), showSpinner && /*#__PURE__*/React__default["default"].createElement(Spinner, null), selectedTaf !== undefined && /*#__PURE__*/React__default["default"].createElement(TafFormDialog, {
-        open: isTafDialogOpen,
-        toggleFormDialog: toggleTafDialog,
-        tafFromBackend: selectedTaf,
-        alertBanner: errorPostMessage ? /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
-          severity: "error",
-          title: "An error has occurred while saving, please try again",
-          info: errorPostMessageText
-        }) : null,
-        onFormAction: onFormAction
-      }, /*#__PURE__*/React__default["default"].createElement(TafFormWrapper, {
-        mode: "edit",
-        tafFromBackend: selectedTaf,
-        tafAction: tafDialogAction,
-        onFormAction: onFormAction
-      }), showSpinner && /*#__PURE__*/React__default["default"].createElement(Spinner, null)));
+        onPostTaf: reFetchNewTafList
+      }));
     };
-    /**
-     * Shows the list of Tafs and allows to create, edit and view Tafs.
-     * Needs to be wrapped in the ApiProvider.
-     *
-     * @example
-     * ```<ApiProvider baseURL="http://test.com"  appURL="http://app.com" auth={auth} onSetAuth={onSetAuth} createApi={createApi}>  authTokenUrl="url/tokenrefresh"<TafWrapper /> </ApiProvider>```
-     */
-
 
-    var ConfirmationWrapper = function ConfirmationWrapper() {
-      return /*#__PURE__*/React__default["default"].createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__default["default"].createElement(TafWrapper, null));
+    var Wrapper = function Wrapper() {
+      return /*#__PURE__*/React__namespace.createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__namespace.createElement(TafModule, null));
     };
 
     var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
@@ -4923,13 +5338,8 @@
       };
     };
 
-    exports.ContentDialog = ContentDialog;
-    exports.TafFormDialog = TafFormDialog;
     exports.TafFormWrapper = TafFormWrapper;
-    exports.TafList = TafList;
-    exports.TafListRow = TafListRow;
-    exports.TafListSection = TafListSection;
-    exports.TafWrapper = ConfirmationWrapper;
+    exports.TafModule = Wrapper;
     exports.createApi = createApi;
 
     Object.defineProperty(exports, '__esModule', { value: true });