@opengeoweb/taf 4.6.0 → 4.7.0

package/index.esm.js

@@ -5,12 +5,12 @@ import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { useDispatch } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
-import { isEqual } from 'lodash';
 import { useAuthenticationContext } from '@opengeoweb/authentication';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
-import { useIsMounted, ToggleMenu, useDraftFormHelpers, CustomTooltip, ToolContainerDraggable, Avatar, getInitials, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getErrorMessage as getErrorMessage$1, getWarningMessage, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
+import { HIDDEN_INPUT_HELPER_IS_DRAFT, useIsMounted, ToggleMenu, CustomTooltip, ToolContainerDraggable, Avatar, getInitials, useConfirmationDialog, useDraftFormHelpers, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getErrorMessage as getErrorMessage$1, getWarningMessage, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
 import { snackbarActions } from '@opengeoweb/core';
 import moment from 'moment';
+import { isEqual } from 'lodash';
 import { Add, Delete, Close, DragHandle as DragHandle$1, ThumbsUp, Clock, Cancel, Edit, Success, Export, ListItem, Cached } from '@opengeoweb/theme';
 import ReactDOM from 'react-dom';
 import { useApiContext, createApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
@@ -241,7 +241,7 @@ var invalidValidityMinutesMessage = 'Invalid validity period, specified minutes
 var invalidValidityStartTimeMessage = 'Invalid validity start time, change group validity must lie within the TAF validity period';
 var invalidValidityPeriodMessage = 'Invalid validity period, validity end time has to be after validity start time';
 var invalidValidityEndTimeMessage = 'Invalid validity end time, change group validity must lie within the TAF validity period';
-var invalidChangeValidInterFieldMessage = 'Invalid validity period, expected DDHH/DDHH for BECMG and TEMPO or DDHHmm for FM';
+var invalidChangeValidInterFieldMessage = 'Invalid validity period, expected DDHH/DDHH for PROB, BECMG and TEMPO or DDHHmm for FM';
 var invalidBECMGDurationValidInterFieldMessage = 'Invalid validity period, for BECMG only validity periods with a duration of 1, 2, 3 or 4 hours are allowed';
 var invalidChangeGroupOverlapsWithFM = 'The valid time of a change group cannot overlap with the valid time of a following FM group. This change group should end before or at the hour of the start of the FM group'; // Validations
 // Ensure all individual sections are correct (DD HH mm etc)
@@ -327,16 +327,29 @@ var validateValidField = function validateValidField(value, tafStart, tafEnd) {
 
   return true;
 };
-var validateValidChangeGroupInterField = function validateValidChangeGroupInterField(value, valueChange, tafStart, tafEnd) {
+var validateValidChangeGroupInterField = function validateValidChangeGroupInterField(value, valueChange, valueProb, tafStart, tafEnd) {
   var trimmedValue = value.trim();
   var trimmedValueChange = valueChange.trim();
+  var trimmedValueProb = valueProb.trim();
 
   if (!trimmedValue.length) {
     return true;
-  } // Ensure format for FM changegroups is correct DDHHmm
+  }
+
+  if (!trimmedValueChange.length && !trimmedValueProb.length) {
+    return true;
+  }
 
+  if (!trimmedValueChange.length && trimmedValueProb.length) {
+    if ( // Ensure format for probability without change is correct DDHH/DDHH
+    trimmedValue.length < 9) {
+      return invalidChangeValidInterFieldMessage;
+    }
+  }
 
-  if (trimmedValue.length > 6 && trimmedValueChange === 'FM' || trimmedValue.length < 9 && trimmedValueChange !== 'FM') {
+  if ( // Ensure format for FM changegroups is correct DDHHmm
+  trimmedValue.length > 6 && trimmedValueChange === 'FM' || // Ensure format for BECMG and TEMPO changegroups is correct DDHH/DDHH
+  trimmedValue.length < 9 && trimmedValueChange !== 'FM') {
     return invalidChangeValidInterFieldMessage;
   } // Ensure BECMG changegroup has duration of 1,2,3,4 hours
 
@@ -2357,7 +2370,7 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
   }, []);
   return [TAC, retrieveTAC, onSetTac];
 };
-var useDragOrder = function useDragOrder(trigger, move, onFormBlur) {
+var useDragOrder = function useDragOrder(trigger, move) {
   var _React$useState3 = React__default.useState(null),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       activeDraggingIndex = _React$useState4[0],
@@ -2392,18 +2405,7 @@ var useDragOrder = function useDragOrder(trigger, move, onFormBlur) {
       // trigger validation of all fields
       trigger();
     }
-  }, [lastDragOrder, trigger]); // trigger onFormBlur AFTER render of new sorted elements so the TAC gets updated
-
-  React__default.useEffect(function () {
-    var _lastDragOrder2 = _slicedToArray(lastDragOrder, 2),
-        oldIndex = _lastDragOrder2[0],
-        newIndex = _lastDragOrder2[1];
-
-    if (oldIndex !== null && newIndex !== null) {
-      onFormBlur();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [lastDragOrder]);
+  }, [lastDragOrder, trigger]);
   return {
     onChangeOrder: onChangeOrder,
     activeDraggingIndex: activeDraggingIndex,
@@ -2472,18 +2474,18 @@ var emptyChangegroup = {
   wind: '',
   visibility: '',
   weather: {
-    weather1: null,
-    weather2: null,
-    weather3: null
+    weather1: '',
+    weather2: '',
+    weather3: ''
   },
   cloud: {
-    cloud1: null,
-    cloud2: null,
-    cloud3: null,
-    cloud4: null
+    cloud1: '',
+    cloud2: '',
+    cloud3: '',
+    cloud4: ''
   },
-  change: null,
-  probability: null
+  change: '',
+  probability: ''
 };
 var getTafStatusLabel = function getTafStatusLabel(status) {
   switch (status) {
@@ -2539,24 +2541,35 @@ var getAmendedCorrectedTafTimes = function getAmendedCorrectedTafTimes(taf, tafA
     previousValidDateEnd: previousValidDateEnd
   });
 };
+var createChangeGroup = function createChangeGroup(changeGroup) {
+  return Object.assign(Object.assign(Object.assign({}, emptyChangegroup), changeGroup), {
+    weather: Object.assign(Object.assign({}, emptyChangegroup.weather), changeGroup.weather),
+    cloud: Object.assign(Object.assign({}, emptyChangegroup.cloud), changeGroup.cloud)
+  });
+};
 var prepareTafValues = function prepareTafValues(_taf, tafAction) {
   var addEmptyChangeGroup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
+
+  var _a; // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
   // If action is AMEND/DRAFT_AMEND - update validity start time to current time
+
+
   var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
   var formattedBaseForecast = formatFormValues(taf.baseForecast);
   var baseForecast = Object.assign(Object.assign(Object.assign({}, emptyBaseForecast), formattedBaseForecast), {
     weather: Object.assign(Object.assign({}, emptyBaseForecast.weather), formattedBaseForecast.weather),
     cloud: Object.assign(Object.assign({}, emptyBaseForecast.cloud), formattedBaseForecast.cloud)
   });
-  return Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
+  var formattedChangeGroups = ((_a = taf.changeGroups) === null || _a === void 0 ? void 0 : _a.map(formatFormValues)) || [];
+  var changeGroups = formattedChangeGroups.map(createChangeGroup);
+  return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
     messageType: getMessageType(taf, tafAction),
     baseForecast: baseForecast
-  }), taf.changeGroups && {
-    changeGroups: taf.changeGroups.map(formatFormValues)
+  }), changeGroups.length && {
+    changeGroups: changeGroups
   }), addEmptyChangeGroup && {
     changeGroups: [emptyChangegroup]
-  });
+  }), _defineProperty({}, HIDDEN_INPUT_HELPER_IS_DRAFT, true));
 };
 var getIsFormDefaultDisabled = function getIsFormDefaultDisabled(status) {
   return !(status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED');
@@ -2906,7 +2919,8 @@ var getRequiredCrossFields = function getRequiredCrossFields(fieldNames) {
 };
 
 var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
-  var _a$isChangeGroup = _a.isChangeGroup,
+  var isNotRequiredForAction = _a.isNotRequiredForAction,
+      _a$isChangeGroup = _a.isChangeGroup,
       isChangeGroup = _a$isChangeGroup === void 0 ? false : _a$isChangeGroup,
       _a$disabled = _a.disabled,
       disabled = _a$disabled === void 0 ? false : _a$disabled,
@@ -2920,17 +2934,14 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       onAddChangeGroupBelow = _a.onAddChangeGroupBelow,
       onAddChangeGroupAbove = _a.onAddChangeGroupAbove,
       onClearRow = _a.onClearRow,
-      props = __rest(_a, ["isChangeGroup", "disabled", "index", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroupBelow", "onAddChangeGroupAbove", "onClearRow"]);
+      props = __rest(_a, ["isNotRequiredForAction", "isChangeGroup", "disabled", "index", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroupBelow", "onAddChangeGroupAbove", "onClearRow"]);
 
   var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[".concat(index, "]");
   var fieldNames = getFieldNames(isChangeGroup, index);
 
   var _useFormContext = useFormContext(),
       getValues = _useFormContext.getValues,
-      trigger = _useFormContext.trigger;
-
-  var _useDraftFormHelpers = useDraftFormHelpers(true),
-      isNotRequiredForAction = _useDraftFormHelpers.isRequired; // cross-field required validation
+      trigger = _useFormContext.trigger; // cross-field required validation
 
 
   var _getRequiredCrossFiel = getRequiredCrossFields(fieldNames),
@@ -3155,7 +3166,7 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
           return isChangeGroup ? validateValidField(value, getValues('validDateStart'), getValues('validDateEnd')) : true;
         },
         validateValidChangeGroupInterField: function validateValidChangeGroupInterField$1(value) {
-          return isChangeGroup ? validateValidChangeGroupInterField(value, getValues(fieldNames.change), getValues('validDateStart'), getValues('validDateEnd')) : true;
+          return isChangeGroup ? validateValidChangeGroupInterField(value, getValues(fieldNames.change), getValues(fieldNames.probability), getValues('validDateStart'), getValues('validDateEnd')) : true;
         },
         validatePreviousRow: validatePreviousRow,
         validateNextRows: validateNextRows
@@ -3819,8 +3830,7 @@ var TafModuleContext = /*#__PURE__*/React.createContext({
   registerValidateForm: null,
   tafAction: null,
   setTafAction: null,
-  isFormDirty: null,
-  setIsFormDirty: null
+  onPreventCloseView: null
 });
 var useTafModuleContext = function useTafModuleContext() {
   return React.useContext(TafModuleContext);
@@ -3828,9 +3838,6 @@ var useTafModuleContext = function useTafModuleContext() {
 var useTafModuleState = function useTafModuleState(_ref) {
   var onPreventCloseView = _ref.onPreventCloseView;
 
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
-
   var _React$useState = React.useState(function () {
     return new Promise(function () {
       return true;
@@ -3845,40 +3852,18 @@ var useTafModuleState = function useTafModuleState(_ref) {
       tafAction = _React$useState4[0],
       setTafAction = _React$useState4[1];
 
-  var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      isFormDirty = _React$useState6[0],
-      setIsFormDirty = _React$useState6[1];
-
-  var _useTACGenerator = useTACGenerator(undefined, api.getTAC),
-      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 3),
-      TAC = _useTACGenerator2[0],
-      updateTAC = _useTACGenerator2[1],
-      setTAC = _useTACGenerator2[2];
-
   var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
     registerValidateForm(function () {
       return promiseToRegister;
     });
   };
 
-  var onChangeFormDirty = function onChangeFormDirty(isDirty) {
-    if (isDirty !== isFormDirty) {
-      setIsFormDirty(isDirty);
-      onPreventCloseView(isDirty);
-    }
-  };
-
   return {
     onValidateForm: onValidateForm,
     registerValidateForm: onRegisterValidateForm,
     tafAction: tafAction,
     setTafAction: setTafAction,
-    TAC: TAC,
-    updateTAC: updateTAC,
-    setTAC: setTAC,
-    isFormDirty: isFormDirty,
-    setIsFormDirty: onChangeFormDirty
+    onPreventCloseView: onPreventCloseView
   };
 };
 var TafModuleProvider = function TafModuleProvider(_ref2) {
@@ -3984,21 +3969,15 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
   var isDefaultDisabled = getIsFormDefaultDisabled(originalTaf.status);
   var confirmDialog = useConfirmationDialog();
 
-  var _useDraftFormHelpers = useDraftFormHelpers(true),
+  var _useDraftFormHelpers = useDraftFormHelpers(),
       toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
-      DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
+      isNotRequiredForAction = _useDraftFormHelpers.isRequired;
 
   var _useTafModuleContext = useTafModuleContext(),
       registerValidateForm = _useTafModuleContext.registerValidateForm,
       tafAction = _useTafModuleContext.tafAction,
-      setIsFormDirty = _useTafModuleContext.setIsFormDirty,
       setTafAction = _useTafModuleContext.setTafAction,
-      TAC = _useTafModuleContext.TAC,
-      updateTAC = _useTafModuleContext.updateTAC,
-      setTAC = _useTafModuleContext.setTAC;
-
-  var _useIsMounted = useIsMounted(),
-      isMounted = _useIsMounted.isMounted;
+      onPreventCloseView = _useTafModuleContext.onPreventCloseView;
 
   var _useFormContext = useFormContext(),
       control = _useFormContext.control,
@@ -4011,48 +3990,12 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
 
   var isFormDirty = formState.isDirty,
       errors = formState.errors;
-  usePreventBrowserClose(isFormDirty && !isDisabled);
-  var hiddenInputFields = ['baseTime', 'issueDate', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
-
-  var _React$useState = React__default.useState(getValues()),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      delayedFormValues = _React$useState2[0],
-      setDelayedFormValues = _React$useState2[1];
+  usePreventBrowserClose(isFormDirty && !isDisabled); // Needed to be able to show a confirmation dialog on closing parent view
 
-  var hasErrors = Object.keys(errors).length;
-
-  var onFormBlur = function onFormBlur() {
-    if (!isEqual(getValues(), delayedFormValues)) {
-      setDelayedFormValues(getValues());
-    }
-  };
-
-  var resetTAC = function resetTAC() {
-    if (originalTaf.status !== 'NEW') {
-      updateTAC(originalTaf);
-    } else {
-      setTAC(TAC_NOT_AVAILABLE);
-    }
-  };
-
-  React__default.useEffect(function () {
-    if (isMounted.current && isFormDirty) {
-      var newTAC = hasErrors ? null : convertTafValuesToObject(delayedFormValues);
-      updateTAC(newTAC);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [delayedFormValues]);
   React__default.useEffect(function () {
-    // prevent updating an error while typing
-    if (!hasErrors && isFormDirty && document.activeElement.tagName !== 'INPUT') {
-      updateTAC(convertTafValuesToObject(delayedFormValues));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [hasErrors]); // Needed to be able to show a confirmation dialog on switching tabs when form is edited and not saved
-
-  React__default.useEffect(function () {
-    setIsFormDirty(isFormDirty);
-  }, [isFormDirty, setIsFormDirty]);
+    onPreventCloseView(isFormDirty); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFormDirty]);
+  var hiddenInputFields = ['baseTime', 'issueDate', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd', HIDDEN_INPUT_HELPER_IS_DRAFT];
 
   var onSubmit = function onSubmit(data) {
     // eslint-disable-next-line no-console
@@ -4069,18 +4012,17 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     });
   };
 
-  var resetFormValues = function resetFormValues() {
-    var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
-    var shouldAddEmptyChangGroup = arguments.length > 1 ? arguments[1] : undefined;
-    var newTaf = prepareTafValues(originalTaf, action, shouldAddEmptyChangGroup);
-    reset(newTaf);
+  var resetFormValues = function resetFormValues(formData) {
+    return reset(formData);
   };
 
-  var resetForm = function resetForm() {
+  var resetFormState = function resetFormState() {
     var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
     var resetDisabled = arguments.length > 1 ? arguments[1] : undefined;
-    var shouldAddEmptyChangGroup = !(originalTaf && originalTaf.changeGroups) && !resetDisabled;
-    resetFormValues(action, shouldAddEmptyChangGroup);
+    var tafToReset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : originalTaf;
+    var shouldAddEmptyChangGroup = !(tafToReset && tafToReset.changeGroups) && !resetDisabled;
+    var newTaf = prepareTafValues(tafToReset, action, shouldAddEmptyChangGroup);
+    resetFormValues(newTaf);
     setIsDisabled(resetDisabled);
     setTafAction(action);
   };
@@ -4188,8 +4130,7 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
                   didSucceed = _context2.sent;
 
                   if (didSucceed) {
-                    resetForm(undefined, isDefaultDisabled);
-                    resetTAC();
+                    resetFormState(undefined, isDefaultDisabled);
                   }
 
                 case 4:
@@ -4213,18 +4154,17 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
         toggleIsDraft(true);
         handleSubmit(function (data) {
           onFormAction(action, convertTafValuesToObject(data));
-          reset(getValues());
+          resetFormValues(getValues());
         })();
         break;
 
       case 'DISCARD':
         if (isFormDirty) {
           showConfirmDialog(action).then(function () {
-            resetForm(undefined, isDefaultDisabled);
-            resetTAC();
+            resetFormState(undefined, isDefaultDisabled);
           });
         } else {
-          resetForm(undefined, isDefaultDisabled);
+          resetFormState(undefined, isDefaultDisabled);
         }
 
         break;
@@ -4251,9 +4191,7 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
                     didSucceed = _context3.sent;
 
                     if (didSucceed) {
-                      setIsDisabled(true);
-                      reset(prepareTafValues(convertTafValuesToObject(data), action, false));
-                      setTafAction(null);
+                      resetFormState(null, true, convertTafValuesToObject(data));
                     }
 
                   case 6:
@@ -4295,7 +4233,7 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
         break;
 
       default:
-        resetForm(action, false);
+        resetFormState(action, false);
         break;
     }
   };
@@ -4309,7 +4247,7 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
       remove = _useFieldArray.remove,
       move = _useFieldArray.move;
 
-  var _useDragOrder = useDragOrder(trigger, move, onFormBlur),
+  var _useDragOrder = useDragOrder(trigger, move),
       onChangeOrder = _useDragOrder.onChangeOrder,
       onStartDrag = _useDragOrder.onStartDrag,
       activeDraggingIndex = _useDragOrder.activeDraggingIndex;
@@ -4322,8 +4260,6 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     }).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
 
@@ -4381,16 +4317,13 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     });
   };
 
-  var _React$useState3 = React__default.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      shouldValidate = _React$useState4[0],
-      setShouldValidate = _React$useState4[1];
+  var _React$useState = React__default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      shouldValidate = _React$useState2[0],
+      setShouldValidate = _React$useState2[1];
 
   React__default.useEffect(function () {
-    setIsDisabled(!isEditor || isDefaultDisabled);
-    var defaultValues = prepareTafValues(originalTaf, undefined, !isDefaultDisabled && !originalTaf.changeGroups); // set initial form values
-
-    reset(defaultValues); // set validate flag to validate after the values have been set
+    setIsDisabled(!isEditor || isDefaultDisabled); // set validate flag to validate after the values have been set
 
     setShouldValidate(true); // register validate method to use in parent components
 
@@ -4412,17 +4345,14 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     registerValidateForm(onValidateFormPromise); // set default taf action
 
     setTafAction(fromStatusToAction(originalTaf.status));
-    resetTAC();
     return function () {
-      reset({});
+      resetFormValues({});
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   React__default.useEffect(function () {
     var newValues = prepareTafValues(originalTaf, undefined, !isDefaultDisabled && !originalTaf.changeGroups); // set new form values when taf values changed
 
-    reset(newValues); // reset TAC when taf values changed
-
-    resetTAC(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    resetFormValues(newValues); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [originalTaf]);
   React__default.useEffect(function () {
     // update disabled state when editor changed
@@ -4467,39 +4397,12 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     editor: editor
   }))), /*#__PURE__*/React__default.createElement("form", {
     "data-testid": "taf-form",
-    onSubmit: handleSubmit(onSubmit),
-    onBlur: onFormBlur
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      fontSize: '20px',
-      fontWeight: 500,
-      height: '24px',
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, "TAC"), /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      fontSize: '12px',
-      lineHeight: 1.67,
-      letterSpacing: '0.21px',
-      margin: '8px 0px'
-    },
-    "data-testid": "form-tac-message"
-  }, TAC.split('\n').map(function (line) {
-    return /*#__PURE__*/React__default.createElement(Box, {
-      component: "span",
-      key: line,
-      "data-testid": "tafform-tac-message-line",
-      sx: {
-        textIndent: '-0.7em',
-        borderRadius: '3px',
-        paddingRight: '0.7em'
-      }
-    }, line);
-  })), /*#__PURE__*/React__default.createElement(TafFormRow, {
+    onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/React__default.createElement(TafFormRow, {
     disabled: isDisabled,
     onAddChangeGroupBelow: onAddRow,
-    onClearRow: _onClearRow
+    onClearRow: _onClearRow,
+    isNotRequiredForAction: isNotRequiredForAction
   }), /*#__PURE__*/React__default.createElement(ReactSortable, {
     tag: "div",
     list: fields,
@@ -4533,7 +4436,8 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
         isDisabled: fields.length === 1 || isDisabled,
         isSorting: activeDraggingIndex === index,
         index: index
-      })
+      }),
+      isNotRequiredForAction: isNotRequiredForAction
     });
   })), !isDisabled && isEditor && /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
@@ -4560,7 +4464,7 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
       name: field,
       key: field
     });
-  }), /*#__PURE__*/React__default.createElement(DraftFieldHelper, null)));
+  })));
 }, function (prevProps, nextProps) {
   // prevent re-render
   return !nextProps.isDisabled && prevProps.tafFromBackend !== nextProps.tafFromBackend && // if editor changed it should rerender
@@ -4997,9 +4901,6 @@ var TacContainer = function TacContainer(_ref) {
       trigger = _useFormContext.trigger,
       setValue = _useFormContext.setValue;
 
-  var _useTafModuleContext = useTafModuleContext(),
-      updateTAC = _useTafModuleContext.updateTAC;
-
   var showSnackbar = React__default.useCallback(function (message) {
     dispatch(snackbarActions.openSnackbar({
       message: message
@@ -5018,7 +4919,6 @@ var TacContainer = function TacContainer(_ref) {
     setTimeout(function () {
       trigger(); // trigger all fields validation
     }, 0);
-    updateTAC(convertTafValuesToObject(newTaf));
     showSnackbar(getSnackbarMessage$1(location, locationLabel));
   };
 
@@ -5250,7 +5150,7 @@ var TacOverviewMobile = function TacOverviewMobile(_ref) {
       },
       position: 'absolute',
       right: '4px',
-      top: '82px'
+      top: '42px'
     }
   }, /*#__PURE__*/React.createElement(ListItem, null)), /*#__PURE__*/React.createElement(Dialog, {
     open: isOpen,
@@ -5309,6 +5209,9 @@ var TopTabs = function TopTabs(_ref) {
     }
   } : _ref$tafFromBackend;
 
+  var _useFormContext = useFormContext(),
+      isDirty = _useFormContext.formState.isDirty;
+
   if (!tafFromBackend) {
     return null;
   }
@@ -5328,7 +5231,7 @@ var TopTabs = function TopTabs(_ref) {
   }];
 
   var onChangeTab = function onChangeTab(_event, newValue) {
-    onChangeTimeSlot(tabs[newValue].timeSlot);
+    onChangeTimeSlot(tabs[newValue].timeSlot, isDirty);
   };
 
   return /*#__PURE__*/React__default.createElement(Tabs, {
@@ -5373,6 +5276,10 @@ var LocationTabs = function LocationTabs(_ref) {
       _ref$onChangeTab = _ref.onChangeTab,
       onChangeTab = _ref$onChangeTab === void 0 ? function () {} : _ref$onChangeTab,
       timeSlot = _ref.timeSlot;
+
+  var _useFormContext = useFormContext(),
+      isDirty = _useFormContext.formState.isDirty;
+
   return /*#__PURE__*/React.createElement(MenuList, {
     "data-testid": "location-tabs",
     sx: {
@@ -5403,7 +5310,7 @@ var LocationTabs = function LocationTabs(_ref) {
         }
       },
       onClick: function onClick() {
-        return onChangeTab(index);
+        return onChangeTab(index, isDirty);
       }
     }, editor && /*#__PURE__*/React.createElement(Box$1, {
       sx: {
@@ -5871,8 +5778,7 @@ var TafLayout = function TafLayout(_ref2) {
 
   var _useTafModuleContext = useTafModuleContext(),
       onValidateForm = _useTafModuleContext.onValidateForm,
-      tafAction = _useTafModuleContext.tafAction,
-      isFormDirty = _useTafModuleContext.isFormDirty;
+      tafAction = _useTafModuleContext.tafAction;
 
   var _React$useState = React__default.useState(sortTafTimeSlots(tafList)),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -5985,7 +5891,7 @@ var TafLayout = function TafLayout(_ref2) {
     }));
   };
 
-  function onChangeTab(action, value) {
+  function onChangeTab(action, value, isFormDirty) {
     return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
       var taf;
       return regeneratorRuntime.wrap(function _callee3$(_context3) {
@@ -6039,12 +5945,12 @@ var TafLayout = function TafLayout(_ref2) {
     }));
   }
 
-  var onChangeLocationTab = function onChangeLocationTab(index) {
-    onChangeTab(setActiveTafIndex, index);
+  var onChangeLocationTab = function onChangeLocationTab(index, isFormDirty) {
+    onChangeTab(setActiveTafIndex, index, isFormDirty);
   };
 
-  var onChangeTimeSlot = function onChangeTimeSlot(newTimeSlot) {
-    onChangeTab(changeTimeSlot, newTimeSlot);
+  var onChangeTimeSlot = function onChangeTimeSlot(newTimeSlot, isFormDirty) {
+    onChangeTab(changeTimeSlot, newTimeSlot, isFormDirty);
   };
 
   var changeTimeSlot = function changeTimeSlot(newTimeSlot) {