@opengeoweb/taf 2.1.1 → 2.1.2

package/lib/components/TafForm/TafForm.styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"textFieldGridItem" | "textFieldInput" | "textFieldLabel" | "textFieldLabelShrink" | "formRow" | "tacTitle" | "tacText" | "tacLine" | "addButton" | "lifecycleButtons" | "actionButton" | "lastButton" | "backdrop">;
+export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"textFieldGridItem" | "textFieldInput" | "textFieldLabel" | "textFieldLabelShrink" | "formRow" | "tacTitle" | "tacText" | "tacLine" | "addButton" | "lifecycleButtons" | "actionButton" | "lastButton" | "backdrop" | "emptyButtonContainer">;

package/lib/components/TafForm/TafFormRow/types.d.ts

@@ -7,6 +7,7 @@ export interface TafFormRowProps extends GridProps {
     index?: number;
     lastRow?: boolean;
     onRemoveChangeGroup?: (index: number) => void;
+    onAddChangeGroup?: (index: number) => void;
     field?: Partial<ArrayField>;
     dragHandle?: React.ReactElement;
 }

package/lib/components/TafForm/TafFormRow/wind.d.ts

@@ -8,6 +8,9 @@ export declare const invalidWindDirectionMinMaxMessage = "Invalid wind direction
 export declare const invalidWindDirectionStepMessage = "Invalid wind direction, the direction must be rounded to the nearest step of 10 degrees";
 export declare const invalidWindSpeedMessage = "Invalid wind speed, expected a speed equal to 2 digits or P99";
 export declare const invalidWindGustsMessage = "Invalid wind gusts, expected gusts equal to 2 digits or P99";
-export declare const invalidWindGustSpeedCombinationMessage = "Invalid wind, wind gusts must at least be 10 knots greater than the wind speed";
+export declare const invalidWindGustSpeedCombinationMessage = "Invalid wind gusts, gusts must at least be 10 knots greater than the wind speed";
+export declare const invalidWindGustSpeedBelow15Message = "Invalid wind gusts, gusts are only allowed for a minimum wind speed of 15 knots";
 export declare const invalidGustForWindP99Message = "Invalid wind speed and gust combination, if wind is P99, gusts can only be empty or P99";
+export declare const invalidWindSpeedForDirectionZeroMessage = "Invalid wind speed, if direction is 000, speed can only be 00";
+export declare const invalidWindSpeedForDirectionNonZeroMessage = "Invalid wind speed, if direction is not 000, speed can not be 00";
 export declare const validateWindField: (value: string) => boolean | string;

package/lib/components/TafForm/TafFormWrapper.stories.d.ts

@@ -3,7 +3,19 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const NewTafForm: () => React.ReactElement;
-export declare const EditTafForm: () => React.ReactElement;
-export declare const ViewTafForm: () => React.ReactElement;
-export declare const EditTafFormWithMultipleSameStartDates: () => React.ReactElement;
+export declare const NewTafForm: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const EditTafForm: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const ViewTafForm: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const EditTafFormWithMultipleSameStartDates: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/TafForm/utils.d.ts

@@ -25,6 +25,6 @@ export declare const useDragOrder: (trigger: (name?: string | string[]) => Promi
     activeDraggingIndex: number;
 };
 export declare const getConfirmationDialogTitle: (action: TafActions) => string;
-export declare const getConfirmationDialogContent: (action: TafActions) => string;
+export declare const getConfirmationDialogContent: (action: TafActions, isFormDirty?: boolean) => string;
 export declare const getConfirmationDialogButtonLabel: (action: TafActions) => string;
 export {};

package/lib/components/TafList/TafListSection.stories.d.ts

@@ -4,3 +4,15 @@ declare const _default: {
 };
 export default _default;
 export declare const TafListRefreshDemo: React.FC;
+export declare const ListUpcoming: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const ListCurrent: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const ListExpired: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/storyshots/Storyshots.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/utils/mockdata/fakeTafList.d.ts

@@ -2,9 +2,16 @@ import { TafFromBackend } from '../../types';
 export declare const dateFormatUTC = "YYYY-MM-DDTHH:mmZ";
 export declare const fakeTafList: TafFromBackend[];
 export declare const fakeNewTaf: TafFromBackend;
+export declare const fakeNewFixedTaf: TafFromBackend;
 export declare const fakeExpiredTaf: TafFromBackend;
 export declare const fakePublishedTaf: TafFromBackend;
+export declare const fakePublishedFixedTaf: TafFromBackend;
 export declare const fakeDraftTaf: TafFromBackend;
+export declare const fakeDraftFixedTaf: TafFromBackend;
 export declare const fakeDraftAmendmentTaf: TafFromBackend;
+export declare const fakeDraftAmendmentFixedTaf: TafFromBackend;
 export declare const fakeAmendmentTaf: TafFromBackend;
+export declare const fakeAmendmentFixedTaf: TafFromBackend;
+export declare const fakePublishedTafWithChangeGroups: TafFromBackend;
 export declare const fakePublishedTafWithSameDates: TafFromBackend;
+export declare const fakePublishedTafWithSameDatesFixed: TafFromBackend;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/taf",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "GeoWeb TAF library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,22 +14,22 @@
   "peerDependencies": {
     "react": "16.14.0",
     "@material-ui/core": "^4.11.0",
-    "@opengeoweb/theme": "2.1.1",
+    "@opengeoweb/theme": "2.1.2",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/icons": "^4.9.1",
     "react-hook-form": "^6.12.1",
-    "@opengeoweb/shared": "2.1.1",
+    "@opengeoweb/shared": "2.1.2",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.1.1",
-    "@material-ui/pickers": "^3.2.10",
-    "@date-io/moment": "^1.3.13",
+    "@opengeoweb/form-fields": "2.1.2",
     "moment": "^2.29.0",
+    "@material-ui/pickers": "^3.2.10",
     "moment-timezone": "^0.5.31",
+    "@date-io/moment": "^1.3.13",
     "axios": "^0.21.4",
     "react-sortablejs": "^6.0.0",
-    "@opengeoweb/api": "2.1.1",
+    "@opengeoweb/api": "2.1.2",
     "sortablejs": "^1.14.0"
   }
 }

package/taf.esm.js

@@ -3,8 +3,8 @@ import React__default from 'react';
 import { makeStyles, Grid, TextField, IconButton, Tooltip, Chip, SvgIcon, Typography, Button, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Backdrop, CircularProgress } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
 import moment from 'moment';
-import { useIsMounted, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, usePrevious, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
-import { Delete, DragIndicator, Add, Close, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@material-ui/icons';
+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 '@material-ui/icons';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
@@ -1446,8 +1446,11 @@ var invalidWindDirectionMinMaxMessage = 'Invalid wind direction, the direction m
 var invalidWindDirectionStepMessage = 'Invalid wind direction, the direction must be rounded to the nearest step of 10 degrees';
 var invalidWindSpeedMessage = 'Invalid wind speed, expected a speed equal to 2 digits or P99';
 var invalidWindGustsMessage = 'Invalid wind gusts, expected gusts equal to 2 digits or P99';
-var invalidWindGustSpeedCombinationMessage = 'Invalid wind, wind gusts must at least be 10 knots greater than the wind speed';
-var invalidGustForWindP99Message = 'Invalid wind speed and gust combination, if wind is P99, gusts can only be empty or P99'; // validations
+var invalidWindGustSpeedCombinationMessage = 'Invalid wind gusts, gusts must at least be 10 knots greater than the wind speed';
+var invalidWindGustSpeedBelow15Message = 'Invalid wind gusts, gusts are only allowed for a minimum wind speed of 15 knots';
+var invalidGustForWindP99Message = 'Invalid wind speed and gust combination, if wind is P99, gusts can only be empty or P99';
+var invalidWindSpeedForDirectionZeroMessage = 'Invalid wind speed, if direction is 000, speed can only be 00';
+var invalidWindSpeedForDirectionNonZeroMessage = 'Invalid wind speed, if direction is not 000, speed can not be 00'; // validations
 
 var validateDirection = function validateDirection(value) {
   // if not a number
@@ -1495,8 +1498,16 @@ var validateUnit = function validateUnit(value) {
   return value === 'KT' || value === '' || invalidWindMessage;
 };
 
-var validateWindInterSection = function validateWindInterSection(speed, gust) {
-  if (gust === '' || gust === 'P99') {
+var validateWindInterSection = function validateWindInterSection(speed, gust, direction) {
+  if (direction === '000' && speed !== '00') {
+    return invalidWindSpeedForDirectionZeroMessage;
+  }
+
+  if (direction !== '000' && speed === '00') {
+    return invalidWindSpeedForDirectionNonZeroMessage;
+  }
+
+  if (gust === '') {
     return true;
   }
 
@@ -1504,7 +1515,15 @@ var validateWindInterSection = function validateWindInterSection(speed, gust) {
     return invalidGustForWindP99Message;
   }
 
-  return parseInt(gust, 10) - parseInt(speed, 10) >= 10 || invalidWindGustSpeedCombinationMessage;
+  if (parseInt(speed, 10) < 15) {
+    return invalidWindGustSpeedBelow15Message;
+  }
+
+  if (gust !== 'P99' && parseInt(gust, 10) - parseInt(speed, 10) < 10) {
+    return invalidWindGustSpeedCombinationMessage;
+  }
+
+  return true;
 }; // Main validation function
 
 
@@ -1530,7 +1549,7 @@ var validateWindField = function validateWindField(value) {
   } // Then do any intersection validation
 
 
-  return validateWindInterSection(windValidationIndv.speed, windValidationIndv.gust);
+  return validateWindInterSection(windValidationIndv.speed, windValidationIndv.gust, windValidationIndv.direction);
 };
 
 var formatSingleCloud = function formatSingleCloud(value) {
@@ -2399,11 +2418,22 @@ var getConfirmationDialogTitle = function getConfirmationDialogTitle(action) {
   return 'Cancel TAF';
 };
 var getConfirmationDialogContent = function getConfirmationDialogContent(action) {
-  if (action === 'DISCARD') return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
-  if (action === 'PUBLISH') return 'Are you sure you want to publish this TAF?';
-  if (action === 'AMEND') return 'Do you want to publish it?';
-  if (action === 'CORRECT') return 'Do you want to publish it?';
-  return 'Are you sure you want to cancel this TAF?';
+  var isFormDirty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+  switch (action) {
+    case 'DISCARD':
+      return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
+
+    case 'PUBLISH':
+      return 'Are you sure you want to publish this TAF?';
+
+    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!';
+
+    default:
+      return 'Are you sure you want to cancel this TAF?';
+  }
 };
 var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel(action) {
   switch (action) {
@@ -2480,7 +2510,7 @@ var useStyles$9 = makeStyles(function (theme) {
       borderRadius: '3px'
     },
     addButton: {
-      marginRight: '38px'
+      marginRight: '48px'
     },
     lifecycleButtons: {
       marginTop: '40px',
@@ -2495,6 +2525,9 @@ var useStyles$9 = makeStyles(function (theme) {
     backdrop: {
       zIndex: 1500,
       color: '#fff'
+    },
+    emptyButtonContainer: {
+      minWidth: 96
     }
   };
 });
@@ -2739,8 +2772,10 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       field = _a$field === void 0 ? null : _a$field,
       _a$dragHandle = _a.dragHandle,
       dragHandle = _a$dragHandle === void 0 ? null : _a$dragHandle,
-      props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle"]);
+      onAddChangeGroup = _a.onAddChangeGroup,
+      props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroup"]);
 
+  var classes = useStyles$9();
   var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[".concat(index, "]");
   var fieldNames = getFieldNames(isChangeGroup, index);
 
@@ -2827,6 +2862,9 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     return nextRowValidValue ? [nextValidFieldName] : [];
   };
 
+  var addChangeGroup = React__default.useCallback(function () {
+    onAddChangeGroup(index);
+  }, [onAddChangeGroup, index]);
   return /*#__PURE__*/React__default.createElement(Grid, Object.assign({
     "data-testid": "row-".concat(namePrefix),
     container: true,
@@ -3081,12 +3119,20 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       }
     }
   }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default.createElement(Grid, {
+    className: classes.emptyButtonContainer,
     item: true,
     xs: true
-  }), isChangeGroup && !disabled && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: true
-  }, /*#__PURE__*/React__default.createElement(IconButton, Object.assign({
+  }, !disabled && /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "add",
+    "data-testid": "add-changeGroup",
+    onClick: addChangeGroup
+  }, /*#__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
+  }, /*#__PURE__*/React__default.createElement(Add, null)), /*#__PURE__*/React__default.createElement(IconButton, Object.assign({
     "aria-label": "delete",
     "data-testid": "remove-changeGroup",
     onClick: function onClick() {
@@ -3640,7 +3686,7 @@ var TafForm = function TafForm(_ref) {
   var showConfirmDialog = function showConfirmDialog(action) {
     return confirmDialog({
       title: getConfirmationDialogTitle(action),
-      description: getConfirmationDialogContent(action),
+      description: getConfirmationDialogContent(action, isFormDirty),
       confirmLabel: getConfirmationDialogButtonLabel(action)
     });
   };
@@ -3689,32 +3735,58 @@ var TafForm = function TafForm(_ref) {
     name: 'changeGroups'
   }),
       fields = _useFieldArray.fields,
-      append = _useFieldArray.append,
+      insert = _useFieldArray.insert,
       remove = _useFieldArray.remove,
       move = _useFieldArray.move;
 
-  var lastTotalFields = usePrevious(fields.length);
-
   var _useDragOrder = useDragOrder(trigger, move, onFormBlur),
       onChangeOrder = _useDragOrder.onChangeOrder,
       onStartDrag = _useDragOrder.onStartDrag,
       activeDraggingIndex = _useDragOrder.activeDraggingIndex;
 
   var onRemoverow = function onRemoverow(index) {
-    remove(index);
+    confirmDialog({
+      title: 'Delete row',
+      description: 'Are you sure you want to delete this row?',
+      confirmLabel: 'Yes'
+    }).then(function () {
+      remove(index);
+      trigger(); // trigger all fields validation
+
+      onFormBlur();
+    });
+  }; // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/726 insert (react-hook-form) does not work well with focus (only last row will get focus), so added this dirty solution. This can be fixed in a better way in react-hook-form v7
+
+
+  var focusFirstInput = function focusFirstInput(rowIndex) {
+    var nextRowFirstInput = document.querySelector("[name=\"changeGroups[".concat(rowIndex, "].probability\"]"));
+
+    if (nextRowFirstInput) {
+      nextRowFirstInput.focus();
+    }
   };
 
   var onAddRow = function onAddRow() {
-    append(emptyChangegroup, true);
+    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
+
+    setTimeout(function () {
+      focusFirstInput(newRowIndex);
+      trigger(); // trigger all fields validation
+    }, 0);
   };
 
   React__default.useEffect(function () {
-    if (isFormDirty && fields.length !== lastTotalFields) {
-      onFormBlur();
-      trigger(); // trigger all field validation,
+    if (!isDisabled) {
+      // trigger validation on all changegroup validity times after initial load since they could be outside the new validity period
+      var validFields = fields.map(function (_field, index) {
+        return "changeGroups[".concat(index, "].valid");
+      });
+      trigger(validFields);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [fields.length, isFormDirty]);
+  }, []);
   return /*#__PURE__*/React__default.createElement("form", {
     onSubmit: handleSubmit(onSubmit),
     onBlur: onFormBlur
@@ -3730,7 +3802,8 @@ var TafForm = function TafForm(_ref) {
       "data-testid": "tafform-tac-message-line"
     }, line);
   })), /*#__PURE__*/React__default.createElement(TafFormRow, {
-    disabled: isDisabled
+    disabled: isDisabled,
+    onAddChangeGroup: onAddRow
   }), /*#__PURE__*/React__default.createElement(ReactSortable, {
     tag: "div",
     list: fields,
@@ -3754,6 +3827,7 @@ var TafForm = function TafForm(_ref) {
       lastRow: fields.length === index + 1,
       disabled: isDisabled,
       onRemoveChangeGroup: onRemoverow,
+      onAddChangeGroup: onAddRow,
       isChangeGroup: true,
       dragHandle: /*#__PURE__*/React__default.createElement(DragHandle, {
         isDisabled: fields.length === 1 || isDisabled,
@@ -3761,20 +3835,10 @@ var TafForm = function TafForm(_ref) {
         index: index
       })
     });
-  })), !isDisabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    item: true,
-    xs: 12,
-    justify: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "add",
-    "data-testid": "add-changeGroup",
-    onClick: onAddRow,
-    className: classes.addButton
-  }, /*#__PURE__*/React__default.createElement(Add, null))), /*#__PURE__*/React__default.createElement(TafFormButtons, {
+  })), !isDisabled && /*#__PURE__*/React__default.createElement(TafFormButtons, {
     tafAction: tafAction,
     onTafFormButtonPress: onTafButtonPress
-  })), hiddenInputFields.map(function (field) {
+  }), hiddenInputFields.map(function (field) {
     return /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
       name: field,
       key: field

package/taf.umd.js

@@ -1395,8 +1395,11 @@
     var invalidWindDirectionStepMessage = 'Invalid wind direction, the direction must be rounded to the nearest step of 10 degrees';
     var invalidWindSpeedMessage = 'Invalid wind speed, expected a speed equal to 2 digits or P99';
     var invalidWindGustsMessage = 'Invalid wind gusts, expected gusts equal to 2 digits or P99';
-    var invalidWindGustSpeedCombinationMessage = 'Invalid wind, wind gusts must at least be 10 knots greater than the wind speed';
-    var invalidGustForWindP99Message = 'Invalid wind speed and gust combination, if wind is P99, gusts can only be empty or P99'; // validations
+    var invalidWindGustSpeedCombinationMessage = 'Invalid wind gusts, gusts must at least be 10 knots greater than the wind speed';
+    var invalidWindGustSpeedBelow15Message = 'Invalid wind gusts, gusts are only allowed for a minimum wind speed of 15 knots';
+    var invalidGustForWindP99Message = 'Invalid wind speed and gust combination, if wind is P99, gusts can only be empty or P99';
+    var invalidWindSpeedForDirectionZeroMessage = 'Invalid wind speed, if direction is 000, speed can only be 00';
+    var invalidWindSpeedForDirectionNonZeroMessage = 'Invalid wind speed, if direction is not 000, speed can not be 00'; // validations
 
     var validateDirection = function validateDirection(value) {
       // if not a number
@@ -1444,8 +1447,16 @@
       return value === 'KT' || value === '' || invalidWindMessage;
     };
 
-    var validateWindInterSection = function validateWindInterSection(speed, gust) {
-      if (gust === '' || gust === 'P99') {
+    var validateWindInterSection = function validateWindInterSection(speed, gust, direction) {
+      if (direction === '000' && speed !== '00') {
+        return invalidWindSpeedForDirectionZeroMessage;
+      }
+
+      if (direction !== '000' && speed === '00') {
+        return invalidWindSpeedForDirectionNonZeroMessage;
+      }
+
+      if (gust === '') {
         return true;
       }
 
@@ -1453,7 +1464,15 @@
         return invalidGustForWindP99Message;
       }
 
-      return parseInt(gust, 10) - parseInt(speed, 10) >= 10 || invalidWindGustSpeedCombinationMessage;
+      if (parseInt(speed, 10) < 15) {
+        return invalidWindGustSpeedBelow15Message;
+      }
+
+      if (gust !== 'P99' && parseInt(gust, 10) - parseInt(speed, 10) < 10) {
+        return invalidWindGustSpeedCombinationMessage;
+      }
+
+      return true;
     }; // Main validation function
 
 
@@ -1479,7 +1498,7 @@
       } // Then do any intersection validation
 
 
-      return validateWindInterSection(windValidationIndv.speed, windValidationIndv.gust);
+      return validateWindInterSection(windValidationIndv.speed, windValidationIndv.gust, windValidationIndv.direction);
     };
 
     var formatSingleCloud = function formatSingleCloud(value) {
@@ -2351,12 +2370,25 @@
       if (action === 'CORRECT') return 'This TAF is a correction';
       return 'Cancel TAF';
     };
-    var getConfirmationDialogContent = function getConfirmationDialogContent(action) {
-      if (action === 'DISCARD') return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
-      if (action === 'PUBLISH') return 'Are you sure you want to publish this TAF?';
-      if (action === 'AMEND') return 'Do you want to publish it?';
-      if (action === 'CORRECT') return 'Do you want to publish it?';
-      return 'Are you sure you want to cancel this TAF?';
+    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';
+
+        case 'PUBLISH':
+          return 'Are you sure you want to publish this TAF?';
+
+        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!';
+
+        default:
+          return 'Are you sure you want to cancel this TAF?';
+      }
     };
     var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel(action) {
       switch (action) {
@@ -2433,7 +2465,7 @@
           borderRadius: '3px'
         },
         addButton: {
-          marginRight: '38px'
+          marginRight: '48px'
         },
         lifecycleButtons: {
           marginTop: '40px',
@@ -2448,6 +2480,9 @@
         backdrop: {
           zIndex: 1500,
           color: '#fff'
+        },
+        emptyButtonContainer: {
+          minWidth: 96
         }
       };
     });
@@ -2691,8 +2726,10 @@
           field = _f === void 0 ? null : _f,
           _g = _a.dragHandle,
           dragHandle = _g === void 0 ? null : _g,
-          props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle"]);
+          onAddChangeGroup = _a.onAddChangeGroup,
+          props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroup"]);
 
+      var classes = useStyles$9();
       var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
       var fieldNames = getFieldNames(isChangeGroup, index);
 
@@ -2779,6 +2816,9 @@
         return nextRowValidValue ? [nextValidFieldName] : [];
       };
 
+      var addChangeGroup = React__default["default"].useCallback(function () {
+        onAddChangeGroup(index);
+      }, [onAddChangeGroup, index]);
       return /*#__PURE__*/React__default["default"].createElement(core.Grid, __assign({
         "data-testid": "row-" + namePrefix,
         container: true,
@@ -3033,12 +3073,20 @@
           }
         }
       }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        className: classes.emptyButtonContainer,
         item: true,
         xs: true
-      }), isChangeGroup && !disabled && /*#__PURE__*/React__default["default"].createElement(core.Grid, {
-        item: true,
-        xs: true
-      }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, __assign({
+      }, !disabled && /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+        "aria-label": "add",
+        "data-testid": "add-changeGroup",
+        onClick: addChangeGroup
+      }, /*#__PURE__*/React__default["default"].createElement(icons.Add, null))), isChangeGroup && !disabled && /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        item: true
+      }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+        "aria-label": "add",
+        "data-testid": "add-changeGroup",
+        onClick: addChangeGroup
+      }, /*#__PURE__*/React__default["default"].createElement(icons.Add, null)), /*#__PURE__*/React__default["default"].createElement(core.IconButton, __assign({
         "aria-label": "delete",
         "data-testid": "remove-changeGroup",
         onClick: function onClick() {
@@ -3547,7 +3595,7 @@
       var showConfirmDialog = function showConfirmDialog(action) {
         return confirmDialog({
           title: getConfirmationDialogTitle(action),
-          description: getConfirmationDialogContent(action),
+          description: getConfirmationDialogContent(action, isFormDirty),
           confirmLabel: getConfirmationDialogButtonLabel(action)
         });
       };
@@ -3596,32 +3644,61 @@
         name: 'changeGroups'
       }),
           fields = _h.fields,
-          append = _h.append,
+          insert = _h.insert,
           remove = _h.remove,
           move = _h.move;
 
-      var lastTotalFields = shared.usePrevious(fields.length);
-
       var _j = useDragOrder(trigger, move, onFormBlur),
           onChangeOrder = _j.onChangeOrder,
           onStartDrag = _j.onStartDrag,
           activeDraggingIndex = _j.activeDraggingIndex;
 
       var onRemoverow = function onRemoverow(index) {
-        remove(index);
+        confirmDialog({
+          title: 'Delete row',
+          description: 'Are you sure you want to delete this row?',
+          confirmLabel: 'Yes'
+        }).then(function () {
+          remove(index);
+          trigger(); // trigger all fields validation
+
+          onFormBlur();
+        });
+      }; // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/726 insert (react-hook-form) does not work well with focus (only last row will get focus), so added this dirty solution. This can be fixed in a better way in react-hook-form v7
+
+
+      var focusFirstInput = function focusFirstInput(rowIndex) {
+        var nextRowFirstInput = document.querySelector("[name=\"changeGroups[" + rowIndex + "].probability\"]");
+
+        if (nextRowFirstInput) {
+          nextRowFirstInput.focus();
+        }
       };
 
-      var onAddRow = function onAddRow() {
-        append(emptyChangegroup, true);
+      var onAddRow = function onAddRow(rowIndex) {
+        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
+
+        setTimeout(function () {
+          focusFirstInput(newRowIndex);
+          trigger(); // trigger all fields validation
+        }, 0);
       };
 
       React__default["default"].useEffect(function () {
-        if (isFormDirty && fields.length !== lastTotalFields) {
-          onFormBlur();
-          trigger(); // trigger all field validation,
+        if (!isDisabled) {
+          // trigger validation on all changegroup validity times after initial load since they could be outside the new validity period
+          var validFields = fields.map(function (_field, index) {
+            return "changeGroups[" + index + "].valid";
+          });
+          trigger(validFields);
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-      }, [fields.length, isFormDirty]);
+      }, []);
       return /*#__PURE__*/React__default["default"].createElement("form", {
         onSubmit: handleSubmit(onSubmit),
         onBlur: onFormBlur
@@ -3637,7 +3714,8 @@
           "data-testid": "tafform-tac-message-line"
         }, line);
       })), /*#__PURE__*/React__default["default"].createElement(TafFormRow, {
-        disabled: isDisabled
+        disabled: isDisabled,
+        onAddChangeGroup: onAddRow
       }), /*#__PURE__*/React__default["default"].createElement(reactSortablejs.ReactSortable, {
         tag: "div",
         list: fields,
@@ -3661,6 +3739,7 @@
           lastRow: fields.length === index + 1,
           disabled: isDisabled,
           onRemoveChangeGroup: onRemoverow,
+          onAddChangeGroup: onAddRow,
           isChangeGroup: true,
           dragHandle: /*#__PURE__*/React__default["default"].createElement(DragHandle, {
             isDisabled: fields.length === 1 || isDisabled,
@@ -3668,20 +3747,10 @@
             index: index
           })
         });
-      })), !isDisabled && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
-        container: true,
-        item: true,
-        xs: 12,
-        justify: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
-        "aria-label": "add",
-        "data-testid": "add-changeGroup",
-        onClick: onAddRow,
-        className: classes.addButton
-      }, /*#__PURE__*/React__default["default"].createElement(icons.Add, null))), /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
+      })), !isDisabled && /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
         tafAction: tafAction,
         onTafFormButtonPress: onTafButtonPress
-      })), hiddenInputFields.map(function (field) {
+      }), hiddenInputFields.map(function (field) {
         return /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
           name: field,
           key: field