@opengeoweb/taf 2.2.1 → 2.3.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('@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'), require('lodash')) :
+    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', 'lodash'], 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, global.lodash));
+})(this, (function (exports, React, material, makeStyles, moment, shared, iconsMaterial, api, formFields, reactHookForm, reactSortablejs, lodash) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -172,32 +172,47 @@
     var locations = {
     	EHAM: {
     		validity_duration: 30,
-    		activity_period: 6
+    		activity_period: 6,
+    		label: "Schiphol"
     	},
     	EHRD: {
     		validity_duration: 30,
-    		activity_period: 6
+    		activity_period: 6,
+    		label: "Rotterdam"
     	},
     	EHGG: {
     		validity_duration: 30,
-    		activity_period: 6
+    		activity_period: 6,
+    		label: "Eelde"
     	},
     	EHBK: {
     		validity_duration: 30,
-    		activity_period: 6
+    		activity_period: 6,
+    		label: "Maastricht"
     	},
     	EHLE: {
     		validity_duration: 30,
-    		activity_period: 6
+    		activity_period: 6,
+    		label: "Lelystad"
     	},
     	TNCB: {
     		validity_duration: 30,
-    		activity_period: 6
+    		activity_period: 6,
+    		label: "Bonaire"
     	}
     };
+    var locationOrder = [
+    	"EHAM",
+    	"EHRD",
+    	"EHLE",
+    	"EHGG",
+    	"EHBK",
+    	"TNCB"
+    ];
     var tafConfig = {
     	location_indicator_mwo: location_indicator_mwo,
-    	locations: locations
+    	locations: locations,
+    	locationOrder: locationOrder
     };
 
     function _typeof(obj) {
@@ -2459,12 +2474,24 @@
       if (action === 'AMEND') return 'This TAF is an amendment';
       if (action === 'CORRECT') return 'This TAF is a correction';
       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 +2501,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?';
@@ -2494,83 +2521,6 @@
       }
     };
 
-    var useStyles$9 = makeStyles__default["default"](function (theme) {
-      return {
-        textFieldGridItem: {
-          marginRight: 4
-        },
-        textFieldRoot: {
-          '&.Mui-disabled::before': {
-            borderBottom: 'none'
-          },
-          '&:after': {
-            borderBottomColor: '#3f51b5'
-          }
-        },
-        textFieldInput: {
-          fontSize: '14px',
-          paddingLeft: 1,
-          paddingRight: 1,
-          color: '#051039',
-          WebkitTextFillColor: '#051039',
-          '&.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]
-          },
-          '&.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'
-        },
-        lastButton: {
-          marginRight: '90px'
-        },
-        backdrop: {
-          zIndex: 1500,
-          color: '#fff'
-        },
-        emptyButtonContainer: {
-          minWidth: 96
-        }
-      };
-    });
-
     var getTafErrors = function getTafErrors(name, errors) {
       var nameAsArray = name.split('.');
 
@@ -2591,15 +2541,48 @@
     var getDisplayValue = function getDisplayValue(value, disabled) {
       return disabled && !value ? '-' : value;
     };
+    var useStyles$8 = makeStyles__default["default"](function (theme) {
+      return {
+        textFieldInput: {
+          height: 46,
+          width: 56,
+          textAlign: 'center',
+          fontSize: 10,
+          fontWeight: 500,
+          paddingLeft: 0,
+          paddingRight: 0,
+          marginBotom: '2px',
+          '&.Mui-disabled': {
+            '-webkit-text-fill-color': theme.palette.geowebColors.typographyAndIcons.text,
+            color: theme.palette.geowebColors.typographyAndIcons.text,
+            '&:before': {
+              border: 'none'
+            }
+          }
+        },
+        textFieldLabel: {
+          fontSize: '10px',
+          '&.Mui-disabled': {
+            color: theme.palette.geowebColors.captions.captionStatus.rgba
+          },
+          whiteSpace: 'nowrap',
+          maxWidth: '100%'
+        },
+        textFieldLabelShrink: {
+          transform: 'translate(2px, 10px) scale(0.75) !important',
+          letterSpacing: '0.33px'
+        }
+      };
+    });
     var BaseTextField = /*#__PURE__*/React__default["default"].memo(function (props) {
-      var classes = useStyles$9();
+      var classes = useStyles$8();
       return /*#__PURE__*/React__default["default"].createElement(material.TextField, __assign({
         type: "text",
         variant: "filled",
         InputProps: {
           classes: {
-            input: classes.textFieldInput,
-            root: classes.textFieldRoot
+            root: classes.textFieldInput,
+            input: classes.textFieldInput
           }
         },
         InputLabelProps: {
@@ -2607,6 +2590,10 @@
             root: classes.textFieldLabel,
             shrink: classes.textFieldLabelShrink
           }
+        },
+        sx: {
+          marginRight: '2px',
+          marginBottom: '2px'
         }
       }, props));
     }, function (prevProps, nextProps) {
@@ -2632,7 +2619,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 +2674,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 +2702,7 @@
         defaultValue: defaultValue,
         rules: rules,
         onFocus: onFocusField
-      }));
+      });
     };
 
     /* *
@@ -2784,6 +2766,70 @@
       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: {
+          margin: '14px 10px'
+        },
+        menuItems: isChangeGroup ? menuItemsChangeGroup : menuItemsBaseForecast
+      });
+    };
+
     var getDefaultValue = function getDefaultValue(fieldName, data) {
       if (!data) {
         return '';
@@ -2804,30 +2850,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 +2970,38 @@
         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, {
+      }, props), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 11
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        justifyContent: "flex-end"
+      }, !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 +3014,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,33 +3257,19 @@
             }
           }
         }
-      }), (!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() {
+        xs: 1
+      }, /*#__PURE__*/React__default["default"].createElement(TafFormOptionsButton, {
+        isChangeGroup: isChangeGroup,
+        addChangeGroupBelow: addChangeGroupBelow,
+        addChangeGroupAbove: addChangeGroupAbove,
+        removeChangeGroup: function removeChangeGroup() {
           return onRemoveChangeGroup(index);
-        }
-      }, lastRow ? {
-        tabIndex: -1
-      } : {}, {
-        size: "large"
-      }), /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Delete, null))));
+        },
+        clearRow: clearRow,
+        index: index
+      })));
     });
 
     var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
@@ -3247,7 +3301,8 @@
         },
         '&:focus': {
           backgroundColor: buttonColor
-        }
+        },
+        fontSize: 12
       };
     };
 
@@ -3303,7 +3358,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$8 = makeStyles__default["default"]({
+    var useStyles$7 = makeStyles__default["default"]({
       paneContent: {
         marginTop: '16px',
         marginLeft: '24px'
@@ -3383,15 +3438,15 @@
           handleClose = _a.handleClose,
           _b = _a.errorList,
           errorList = _b === void 0 ? [] : _b;
-      var classes = useStyles$8();
+      var classes = useStyles$7();
       return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
         startSize: {
           width: '577px',
           height: '200px'
         },
         startPosition: {
-          left: 370,
-          top: 570
+          right: 20,
+          top: 50
         },
         minWidth: 300,
         onClose: handleClose,
@@ -3480,7 +3535,6 @@
     var TafFormButtons = function TafFormButtons(_a) {
       var tafAction = _a.tafAction,
           onTafFormButtonPress = _a.onTafFormButtonPress;
-      var classes = useStyles$9();
       var errors = reactHookForm.useFormContext().errors;
       var errorList = filterDuplicateErrors(getErrors(errors));
 
@@ -3496,30 +3550,35 @@
         container: true,
         justifyContent: "space-between",
         alignItems: "center",
-        className: classes.lifecycleButtons
+        sx: {
+          margin: '10px 0px 22px 0px'
+        }
       }, /*#__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, {
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        justifyContent: "flex-end",
+        sx: {
+          paddingRight: '28px'
+        }
+      }, /*#__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,
+        variant: "tertiary",
         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,
+        variant: "tertiary",
+        sx: {
+          margin: '0px 10px'
+        },
         onClick: function onClick() {
           /* Save the TAF as draft:
           if action NEW or DRAFT - new status will be DRAFT -- default
@@ -3546,10 +3605,7 @@
         }
       }, "Save"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "publishtaf",
-        variant: "outlined",
-        color: "secondary",
-        type: "button",
-        className: classes.lastButton,
+        variant: "tertiary",
         onClick: function onClick() {
           /* Publish the TAF:
           if action NEW or DRAFT - new status will be PUBLISHED -- default
@@ -3597,7 +3653,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = makeStyles__default["default"](function () {
+    var useStyles$6 = makeStyles__default["default"](function () {
       return {
         dragHandle: {
           backgroundColor: 'transparent',
@@ -3617,7 +3673,7 @@
           _c = _a.isDisabled,
           isDisabled = _c === void 0 ? false : _c,
           index = _a.index;
-      var classes = useStyles$7(isSorting);
+      var classes = useStyles$6(isSorting);
       return /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         className: classes.dragHandle + " handle",
         "data-testid": "dragHandle-" + index,
@@ -3627,6 +3683,62 @@
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var TafListButtons = function TafListButtons(_a) {
+      var uuid = _a.uuid,
+          canBe = _a.canBe,
+          onClickTafActionButton = _a.onClickTafActionButton,
+          _b = _a.testId,
+          testId = _b === void 0 ? 'taflist-canbebuttons' : _b;
+      return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        justifyContent: "flex-end",
+        alignItems: "center",
+        "data-testid": testId,
+        sx: {
+          margin: '10px 0px 22px 0px',
+          paddingRight: '28px'
+        }
+      }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "canceltaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          return onClickTafActionButton('CANCEL', uuid);
+        }
+      }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "correctaf",
+        variant: "tertiary",
+        sx: {
+          margin: '0px 10px'
+        },
+        onClick: function onClick() {
+          return onClickTafActionButton('CORRECT', uuid);
+        }
+      }, "Correct"), canBe.includes('AMENDED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        "data-testid": "amendtaf",
+        variant: "tertiary",
+        onClick: function onClick() {
+          return onClickTafActionButton('AMEND', uuid);
+        }
+      }, "Amend"));
+    };
+
     var noop = function noop() {};
 
     var emptyChangegroup = {
@@ -3653,11 +3765,12 @@
           tafAction = _a.tafAction,
           _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 confirmDialog = shared.useConfirmationDialog();
 
       var _d = shared.useDraftFormHelpers(),
@@ -3673,7 +3786,8 @@
           watch = _e.watch,
           trigger = _e.trigger,
           formState = _e.formState,
-          getValues = _e.getValues;
+          getValues = _e.getValues,
+          setValue = _e.setValue;
 
       var isFormDirty = formState.isDirty,
           errors = formState.errors;
@@ -3717,7 +3831,9 @@
       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)
         });
       };
@@ -3755,6 +3871,15 @@
             })();
             break;
 
+          default:
+            onFormAction(action);
+            break;
+        }
+      }; // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1906 hookup actions
+
+
+      var onTafViewModeButtonPress = function onTafViewModeButtonPress(action) {
+        switch (action) {
           default:
             onFormAction(action);
             break;
@@ -3790,25 +3915,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, above) {
+        if (rowIndex === void 0) {
+          rowIndex = -1;
+        }
+
+        if (above === void 0) {
+          above = false;
+        }
+
+        var newRowIndex = above ? rowIndex : rowIndex + 1;
+        insert(newRowIndex, emptyChangegroup, false);
+        setFocusAndValidate(newRowIndex);
       };
 
-      var onAddRow = function onAddRow(rowIndex) {
+      var _onClearRow = function onClearRow(rowIndex, isChangeGroup) {
         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 (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, '');
+          }
 
-        setTimeout(function () {
-          focusFirstInput(newRowIndex);
-          trigger(); // trigger all fields validation
-        }, 0);
+          setFocusAndValidate(rowIndex);
+        });
       };
 
       React__default["default"].useEffect(function () {
@@ -3822,22 +3990,34 @@
 
       }, []);
       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
+        }
       }, "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'
+          }
         }, 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 +4035,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 +4053,15 @@
             index: index
           })
         });
-      })), !isDisabled && /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
+      })), // TODO: these buttons should be combined, and the Issuesbuton should be separate
+      !isDisabled ? /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
         tafAction: tafAction,
         onTafFormButtonPress: onTafButtonPress
+      }) : /*#__PURE__*/React__default["default"].createElement(TafListButtons, {
+        uuid: originalTaf.uuid,
+        canBe: tafFromBackend.canbe,
+        onClickTafActionButton: onTafViewModeButtonPress,
+        testId: "newtaflist-canbebuttons"
       }), hiddenInputFields.map(function (field) {
         return /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
           name: field,
@@ -3958,11 +4148,12 @@
         isDisabled: isDisabled,
         tafAction: tafAction,
         staticTAC: TAC,
-        onFormAction: onFormAction
+        onFormAction: onFormAction,
+        tafFromBackend: tafFromBackend
       }));
     };
 
-    var useStyles$6 = makeStyles__default["default"]({
+    var useStyles$5 = makeStyles__default["default"]({
       dialogHeader: {
         borderRadius: '3px',
         border: 'solid 1px #f6f5f5',
@@ -3997,7 +4188,7 @@
           onFormAction = _a.onFormAction,
           other = __rest(_a, ["open", "toggleDialogStatus", "titleComponent", "children", "onClose", "alertBanner", "onFormAction"]);
 
-      var classes = useStyles$6();
+      var classes = useStyles$5();
       return /*#__PURE__*/React__namespace.createElement(material.Dialog, __assign({
         "data-testid": "contentDialog",
         open: open,
@@ -4090,7 +4281,7 @@
 
       return 'Draft';
     };
-    var useStyles$5 = makeStyles__default["default"]({
+    var useStyles$4 = makeStyles__default["default"]({
       cardWrapper: {
         width: '100%'
       },
@@ -4116,7 +4307,7 @@
           TAC = _b === void 0 ? '' : _b,
           _c = _a.showTac,
           showTac = _c === void 0 ? false : _c;
-      var classes = useStyles$5();
+      var classes = useStyles$4();
       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, {
@@ -4290,72 +4481,6 @@
       }, children);
     };
 
-    /* *
-     * 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$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');
-        }
-      }, "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');
-        }
-      }, "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');
-        }
-      }, "Amend")));
-    };
-
     var useStyles$3 = makeStyles__default["default"]({
       accordion: {
         marginBottom: '5px'
@@ -4414,7 +4539,7 @@
       } : {}, {
         onClick: function onClick() {
           if (popOut) {
-            onClickTafActionButton(tafListItem.taf.uuid, fromStatusToAction(tafListItem.taf.status));
+            onClickTafActionButton(fromStatusToAction(tafListItem.taf.status), tafListItem.taf.uuid);
           }
         },
         TransitionProps: {
@@ -4736,7 +4861,7 @@
 
       }, [selectedTafId]);
 
-      var onClickTafActionButton = function onClickTafActionButton(tafUuid, action) {
+      var onClickTafActionButton = function onClickTafActionButton(action, tafUuid) {
         if (action === 'CANCEL') {
           confirmDialog({
             title: 'Cancel TAF',