@opengeoweb/taf 2.2.1 → 2.3.0

package/index.esm.js

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import React__default from 'react';
-import { Grid, TextField, IconButton, Tooltip, Chip, SvgIcon, Typography, Button, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Skeleton, Backdrop, CircularProgress } from '@mui/material';
+import { TextField, SvgIcon, Grid, Box, Tooltip, Chip, Typography, Button, IconButton, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Skeleton, Backdrop, CircularProgress } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import moment from 'moment';
-import { useIsMounted, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
-import { Add, Delete, DragIndicator, Close, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@mui/icons-material';
+import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
+import { DragIndicator, Close, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@mui/icons-material';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { ReactSortable, Sortable } from 'react-sortablejs';
+import { isEqual } from 'lodash';
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -202,32 +203,47 @@ var location_indicator_mwo = "EHDB";
 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
 };
 
 /*! *****************************************************************************
@@ -2501,10 +2517,24 @@ var getConfirmationDialogTitle = function getConfirmationDialogTitle(action) {
   if (action === 'AMEND') return 'This TAF is an amendment';
   if (action === 'CORRECT') return 'This TAF is a correction';
   return 'Cancel TAF';
-};
-var getConfirmationDialogContent = function getConfirmationDialogContent(action) {
-  var isFormDirty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+}; // 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 && (!isEqual(originalNoValid, currentNoValid) || !isEqual(originalChG, currentChG));
+};
+var getConfirmationDialogContent = function getConfirmationDialogContent(action, isFormDirty) {
   switch (action) {
     case 'DISCARD':
       return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
@@ -2514,7 +2544,7 @@ var getConfirmationDialogContent = function getConfirmationDialogContent(action)
 
     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?';
@@ -2534,83 +2564,6 @@ var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel
   }
 };
 
-var useStyles$9 = makeStyles(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('.');
 
@@ -2631,15 +2584,48 @@ var getTafErrors = function getTafErrors(name, errors) {
 var getDisplayValue = function getDisplayValue(value, disabled) {
   return disabled && !value ? '-' : value;
 };
+var useStyles$8 = makeStyles(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.memo(function (props) {
-  var classes = useStyles$9();
+  var classes = useStyles$8();
   return /*#__PURE__*/React__default.createElement(TextField, Object.assign({
     type: "text",
     variant: "filled",
     InputProps: {
       classes: {
-        input: classes.textFieldInput,
-        root: classes.textFieldRoot
+        root: classes.textFieldInput,
+        input: classes.textFieldInput
       }
     },
     InputLabelProps: {
@@ -2647,6 +2633,10 @@ var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
         root: classes.textFieldLabel,
         shrink: classes.textFieldLabelShrink
       }
+    },
+    sx: {
+      marginRight: '2px',
+      marginBottom: '2px'
     }
   }, props));
 }, function (prevProps, nextProps) {
@@ -2672,7 +2662,6 @@ var TafFormTextField = function TafFormTextField(_ref) {
       autoComplete = _ref$autoComplete === void 0 ? [] : _ref$autoComplete,
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
-  var classes = useStyles$9();
 
   var _useFormContext = useFormContext(),
       control = _useFormContext.control,
@@ -2729,11 +2718,7 @@ var TafFormTextField = function TafFormTextField(_ref) {
     inputRef.current.disabled = false;
     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
   }, []);
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: true,
-    className: classes.textFieldGridItem
-  }, /*#__PURE__*/React__default.createElement(Controller, {
+  return /*#__PURE__*/React__default.createElement(Controller, {
     render: function render(_props) {
       var displayValue = formatter ? formatter(_props.value) : getDisplayValue(_props.value, disabled);
       return /*#__PURE__*/React__default.createElement(BaseTextField, {
@@ -2761,7 +2746,7 @@ var TafFormTextField = function TafFormTextField(_ref) {
     defaultValue: defaultValue,
     rules: rules,
     onFocus: onFocusField
-  }));
+  });
 };
 
 /* *
@@ -2825,6 +2810,70 @@ var validateProbabilityField = function validateProbabilityField(value) {
   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.createElement(SvgIcon, null, /*#__PURE__*/React.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.createElement(SvgIcon, null, /*#__PURE__*/React.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.createElement(SvgIcon, null, /*#__PURE__*/React.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(_ref) {
+  var isChangeGroup = _ref.isChangeGroup,
+      addChangeGroupBelow = _ref.addChangeGroupBelow,
+      addChangeGroupAbove = _ref.addChangeGroupAbove,
+      removeChangeGroup = _ref.removeChangeGroup,
+      clearRow = _ref.clearRow,
+      index = _ref.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.createElement(ToggleMenu, {
+    buttonTestId: "tafFormOptions[".concat(index, "]"),
+    buttonSx: {
+      margin: '14px 10px'
+    },
+    menuItems: isChangeGroup ? menuItemsChangeGroup : menuItemsBaseForecast
+  });
+};
+
 var getDefaultValue = function getDefaultValue(fieldName, data) {
   if (!data) {
     return '';
@@ -2845,17 +2894,16 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       disabled = _a$disabled === void 0 ? false : _a$disabled,
       _a$index = _a.index,
       index = _a$index === void 0 ? -1 : _a$index,
-      _a$lastRow = _a.lastRow,
-      lastRow = _a$lastRow === void 0 ? false : _a$lastRow,
       onRemoveChangeGroup = _a.onRemoveChangeGroup,
       _a$field = _a.field,
       field = _a$field === void 0 ? null : _a$field,
       _a$dragHandle = _a.dragHandle,
       dragHandle = _a$dragHandle === void 0 ? null : _a$dragHandle,
-      onAddChangeGroup = _a.onAddChangeGroup,
-      props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroup"]);
+      onAddChangeGroupBelow = _a.onAddChangeGroupBelow,
+      onAddChangeGroupAbove = _a.onAddChangeGroupAbove,
+      onClearRow = _a.onClearRow,
+      props = __rest(_a, ["isChangeGroup", "disabled", "index", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroupBelow", "onAddChangeGroupAbove", "onClearRow"]);
 
-  var classes = useStyles$9();
   var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[".concat(index, "]");
   var fieldNames = getFieldNames(isChangeGroup, index);
 
@@ -2971,14 +3019,38 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     return validFields;
   };
 
-  var addChangeGroup = React__default.useCallback(function () {
-    onAddChangeGroup(index);
-  }, [onAddChangeGroup, index]);
+  var addChangeGroupBelow = React__default.useCallback(function () {
+    onAddChangeGroupBelow(index);
+  }, [onAddChangeGroupBelow, index]);
+  var addChangeGroupAbove = React__default.useCallback(function () {
+    onAddChangeGroupAbove(index);
+  }, [onAddChangeGroupAbove, index]);
+  var clearRow = React__default.useCallback(function () {
+    onClearRow(index);
+  }, [onClearRow, index]);
   return /*#__PURE__*/React__default.createElement(Grid, Object.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-".concat(namePrefix),
     container: true,
     ref: ref
-  }, props), !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
+  }, props), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 11
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justifyContent: "flex-end"
+  }, !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Type",
     name: fieldNames.messageType,
     disabled: true
@@ -2991,13 +3063,12 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     label: "Issue time",
     name: "issueDate",
     disabled: true
-  })), isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: true,
-    style: {
-      display: 'flex'
+  })), isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      width: 56,
+      marginRight: '2px'
     }
-  }, dragHandle), /*#__PURE__*/React__default.createElement(TafFormTextField, {
+  }, !disabled && dragHandle), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Prob",
     name: fieldNames.probability,
     disabled: disabled,
@@ -3235,33 +3306,19 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
         }
       }
     }
-  }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default.createElement(Grid, {
-    className: classes.emptyButtonContainer,
+  }))), !disabled && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: true
-  }, !disabled && /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "add",
-    "data-testid": "add-changeGroup",
-    onClick: addChangeGroup,
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Add, null))), isChangeGroup && !disabled && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "add",
-    "data-testid": "add-changeGroup",
-    onClick: addChangeGroup,
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Add, null)), /*#__PURE__*/React__default.createElement(IconButton, Object.assign({
-    "aria-label": "delete",
-    "data-testid": "remove-changeGroup",
-    onClick: function onClick() {
+    xs: 1
+  }, /*#__PURE__*/React__default.createElement(TafFormOptionsButton, {
+    isChangeGroup: isChangeGroup,
+    addChangeGroupBelow: addChangeGroupBelow,
+    addChangeGroupAbove: addChangeGroupAbove,
+    removeChangeGroup: function removeChangeGroup() {
       return onRemoveChangeGroup(index);
-    }
-  }, lastRow ? {
-    tabIndex: -1
-  } : {}, {
-    size: "large"
-  }), /*#__PURE__*/React__default.createElement(Delete, null))));
+    },
+    clearRow: clearRow,
+    index: index
+  })));
 });
 
 /* *
@@ -3310,7 +3367,8 @@ var buttonStyle = function buttonStyle(color) {
     },
     '&:focus': {
       backgroundColor: buttonColor
-    }
+    },
+    fontSize: 12
   };
 };
 
@@ -3382,7 +3440,7 @@ var ThumbsUp = function ThumbsUp(props) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$8 = makeStyles({
+var useStyles$7 = makeStyles({
   paneContent: {
     marginTop: '16px',
     marginLeft: '24px'
@@ -3464,15 +3522,15 @@ var IssuesPane = function IssuesPane(_ref3) {
       handleClose = _ref3.handleClose,
       _ref3$errorList = _ref3.errorList,
       errorList = _ref3$errorList === void 0 ? [] : _ref3$errorList;
-  var classes = useStyles$8();
+  var classes = useStyles$7();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     startSize: {
       width: '577px',
       height: '200px'
     },
     startPosition: {
-      left: 370,
-      top: 570
+      right: 20,
+      top: 50
     },
     minWidth: 300,
     onClose: handleClose,
@@ -3562,7 +3620,6 @@ var filterDuplicateErrors = function filterDuplicateErrors(errors) {
 var TafFormButtons = function TafFormButtons(_ref) {
   var tafAction = _ref.tafAction,
       onTafFormButtonPress = _ref.onTafFormButtonPress;
-  var classes = useStyles$9();
 
   var _useFormContext = useFormContext(),
       errors = _useFormContext.errors;
@@ -3582,30 +3639,35 @@ var TafFormButtons = function TafFormButtons(_ref) {
     container: true,
     justifyContent: "space-between",
     alignItems: "center",
-    className: classes.lifecycleButtons
+    sx: {
+      margin: '10px 0px 22px 0px'
+    }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(IssuesButton, {
     sumOfErrors: errorList.length,
     togglePane: toggleIssuesPane
-  })), /*#__PURE__*/React__default.createElement(Grid, {
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justifyContent: "flex-end",
+    sx: {
+      paddingRight: '28px'
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(Button, {
     "data-testid": "discardtaf",
-    variant: "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.createElement(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
@@ -3632,10 +3694,7 @@ var TafFormButtons = function TafFormButtons(_ref) {
     }
   }, "Save"), /*#__PURE__*/React__default.createElement(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
@@ -3683,7 +3742,7 @@ var TafFormButtons = function TafFormButtons(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$7 = makeStyles(function () {
+var useStyles$6 = makeStyles(function () {
   return {
     dragHandle: {
       backgroundColor: 'transparent',
@@ -3703,7 +3762,7 @@ var DragHandle = function DragHandle(_ref) {
       _ref$isDisabled = _ref.isDisabled,
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
       index = _ref.index;
-  var classes = useStyles$7(isSorting);
+  var classes = useStyles$6(isSorting);
   return /*#__PURE__*/React__default.createElement(IconButton, {
     className: "".concat(classes.dragHandle, " handle"),
     "data-testid": "dragHandle-".concat(index),
@@ -3713,6 +3772,62 @@ var DragHandle = function DragHandle(_ref) {
   }, /*#__PURE__*/React__default.createElement(DragIndicator, null));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+
+var TafListButtons = function TafListButtons(_ref) {
+  var uuid = _ref.uuid,
+      canBe = _ref.canBe,
+      onClickTafActionButton = _ref.onClickTafActionButton,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'taflist-canbebuttons' : _ref$testId;
+  return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    "data-testid": testId,
+    sx: {
+      margin: '10px 0px 22px 0px',
+      paddingRight: '28px'
+    }
+  }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "canceltaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      return onClickTafActionButton('CANCEL', uuid);
+    }
+  }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "correctaf",
+    variant: "tertiary",
+    sx: {
+      margin: '0px 10px'
+    },
+    onClick: function onClick() {
+      return onClickTafActionButton('CORRECT', uuid);
+    }
+  }, "Correct"), canBe.includes('AMENDED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "amendtaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      return onClickTafActionButton('AMEND', uuid);
+    }
+  }, "Amend"));
+};
+
 var noop = function noop() {};
 
 var emptyChangegroup = {
@@ -3739,11 +3854,12 @@ var TafForm = function TafForm(_ref) {
       tafAction = _ref.tafAction,
       _ref$staticTAC = _ref.staticTAC,
       staticTAC = _ref$staticTAC === void 0 ? '' : _ref$staticTAC,
+      tafFromBackend = _ref.tafFromBackend,
       _ref$onFormAction = _ref.onFormAction,
       onFormAction = _ref$onFormAction === void 0 ? function () {
     return null;
   } : _ref$onFormAction;
-  var classes = useStyles$9();
+  var originalTaf = tafFromBackend.taf;
   var confirmDialog = useConfirmationDialog();
 
   var _useDraftFormHelpers = useDraftFormHelpers(),
@@ -3762,7 +3878,8 @@ var TafForm = function TafForm(_ref) {
       watch = _useFormContext.watch,
       trigger = _useFormContext.trigger,
       formState = _useFormContext.formState,
-      getValues = _useFormContext.getValues;
+      getValues = _useFormContext.getValues,
+      setValue = _useFormContext.setValue;
 
   var isFormDirty = formState.isDirty,
       errors = formState.errors;
@@ -3808,7 +3925,9 @@ var TafForm = function TafForm(_ref) {
   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)
     });
   };
@@ -3846,6 +3965,15 @@ var TafForm = function TafForm(_ref) {
         })();
         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;
@@ -3881,22 +4009,56 @@ var TafForm = function TafForm(_ref) {
 
 
   var focusFirstInput = function focusFirstInput(rowIndex) {
-    var nextRowFirstInput = document.querySelector("[name=\"changeGroups[".concat(rowIndex, "].probability\"]"));
+    var selector = rowIndex === -1 ? "[name=\"baseForecast.wind\"]" : "[name=\"changeGroups[".concat(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() {
     var rowIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -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
+    var above = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var newRowIndex = above ? rowIndex : rowIndex + 1;
+    insert(newRowIndex, emptyChangegroup, false);
+    setFocusAndValidate(newRowIndex);
+  };
 
-    setTimeout(function () {
-      focusFirstInput(newRowIndex);
-      trigger(); // trigger all fields validation
-    }, 0);
+  var _onClearRow = function onClearRow() {
+    var rowIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+    var isChangeGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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.useEffect(function () {
@@ -3910,22 +4072,34 @@ var TafForm = function TafForm(_ref) {
 
   }, []);
   return /*#__PURE__*/React__default.createElement("form", {
+    "data-testid": "taf-form",
     onSubmit: handleSubmit(onSubmit),
     onBlur: onFormBlur
   }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: classes.tacTitle
+    sx: {
+      fontSize: '20px',
+      fontWeight: 500
+    }
   }, "TAC"), /*#__PURE__*/React__default.createElement(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.createElement("span", {
+    return /*#__PURE__*/React__default.createElement(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.createElement(TafFormRow, {
     disabled: isDisabled,
-    onAddChangeGroup: onAddRow
+    onAddChangeGroupBelow: onAddRow,
+    onClearRow: _onClearRow
   }), /*#__PURE__*/React__default.createElement(ReactSortable, {
     tag: "div",
     list: fields,
@@ -3943,13 +4117,17 @@ var TafForm = function TafForm(_ref) {
   }, fields.map(function (item, index) {
     return /*#__PURE__*/React__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.createElement(DragHandle, {
         isDisabled: fields.length === 1 || isDisabled,
@@ -3957,9 +4135,15 @@ var TafForm = function TafForm(_ref) {
         index: index
       })
     });
-  })), !isDisabled && /*#__PURE__*/React__default.createElement(TafFormButtons, {
+  })), // TODO: these buttons should be combined, and the Issuesbuton should be separate
+  !isDisabled ? /*#__PURE__*/React__default.createElement(TafFormButtons, {
     tafAction: tafAction,
     onTafFormButtonPress: onTafButtonPress
+  }) : /*#__PURE__*/React__default.createElement(TafListButtons, {
+    uuid: originalTaf.uuid,
+    canBe: tafFromBackend.canbe,
+    onClickTafActionButton: onTafViewModeButtonPress,
+    testId: "newtaflist-canbebuttons"
   }), hiddenInputFields.map(function (field) {
     return /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
       name: field,
@@ -4059,11 +4243,12 @@ var TafFormWrapper = function TafFormWrapper(_ref) {
     isDisabled: isDisabled,
     tafAction: tafAction,
     staticTAC: TAC,
-    onFormAction: onFormAction
+    onFormAction: onFormAction,
+    tafFromBackend: tafFromBackend
   }));
 };
 
-var useStyles$6 = makeStyles({
+var useStyles$5 = makeStyles({
   dialogHeader: {
     borderRadius: '3px',
     border: 'solid 1px #f6f5f5',
@@ -4098,7 +4283,7 @@ var ContentDialog = function ContentDialog(_a) {
       onFormAction = _a.onFormAction,
       other = __rest(_a, ["open", "toggleDialogStatus", "titleComponent", "children", "onClose", "alertBanner", "onFormAction"]);
 
-  var classes = useStyles$6();
+  var classes = useStyles$5();
   return /*#__PURE__*/React.createElement(Dialog, Object.assign({
     "data-testid": "contentDialog",
     open: open,
@@ -4191,7 +4376,7 @@ var getDraftTitle = function getDraftTitle(status) {
 
   return 'Draft';
 };
-var useStyles$5 = makeStyles({
+var useStyles$4 = makeStyles({
   cardWrapper: {
     width: '100%'
   },
@@ -4217,7 +4402,7 @@ var TafListRow = function TafListRow(_ref) {
       TAC = _ref$TAC === void 0 ? '' : _ref$TAC,
       _ref$showTac = _ref.showTac,
       showTac = _ref$showTac === void 0 ? false : _ref$showTac;
-  var classes = useStyles$5();
+  var classes = useStyles$4();
   var validTimeDate = moment.utc(taf.validDateStart).format('DD MMM');
   var baseTime = moment.utc(taf.baseTime).format('HH:mm');
   return /*#__PURE__*/React__default.createElement(Card, {
@@ -4394,72 +4579,6 @@ var TafFormDialog = function TafFormDialog(_ref) {
   }, 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({
-  actionButtons: {
-    paddingRight: '98px',
-    paddingTop: '40px',
-    paddingBottom: '16px'
-  }
-});
-
-var TafListButtons = function TafListButtons(_ref) {
-  var uuid = _ref.uuid,
-      canBe = _ref.canBe,
-      onClickTafActionButton = _ref.onClickTafActionButton;
-  var classes = useStyles$4();
-  return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    alignItems: "center",
-    justifyContent: "flex-end",
-    "data-testid": "taflist-canbebuttons",
-    spacing: 1,
-    className: classes.actionButtons
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "canceltaf",
-    variant: "outlined",
-    color: "secondary",
-    onClick: function onClick() {
-      return onClickTafActionButton(uuid, 'CANCEL');
-    }
-  }, "Cancel")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, canBe.includes('CORRECTED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "correctaf",
-    variant: "outlined",
-    color: "secondary",
-    onClick: function onClick() {
-      return onClickTafActionButton(uuid, 'CORRECT');
-    }
-  }, "Correct")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, canBe.includes('AMENDED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "amendtaf",
-    variant: "outlined",
-    color: "secondary",
-    onClick: function onClick() {
-      return onClickTafActionButton(uuid, 'AMEND');
-    }
-  }, "Amend")));
-};
-
 var useStyles$3 = makeStyles({
   accordion: {
     marginBottom: '5px'
@@ -4521,7 +4640,7 @@ var TafListAccordion = function TafListAccordion(_ref) {
   } : {}, {
     onClick: function onClick() {
       if (popOut) {
-        onClickTafActionButton(tafListItem.taf.uuid, fromStatusToAction(tafListItem.taf.status));
+        onClickTafActionButton(fromStatusToAction(tafListItem.taf.status), tafListItem.taf.uuid);
       }
     },
     TransitionProps: {
@@ -4849,7 +4968,7 @@ var TafWrapper = function TafWrapper() {
 
   }, [selectedTafId]);
 
-  var onClickTafActionButton = function onClickTafActionButton(tafUuid, action) {
+  var onClickTafActionButton = function onClickTafActionButton(action, tafUuid) {
     if (action === 'CANCEL') {
       confirmDialog({
         title: 'Cancel TAF',