@opengeoweb/taf 2.4.1 → 2.5.0

package/index.esm.js

@@ -5,7 +5,7 @@ import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { ReactSortable, Sortable } from 'react-sortablejs';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
-import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
+import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, getAxiosErrorMessage, AlertBanner, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
 import moment from 'moment';
 import { isEqual } from 'lodash';
 import makeStyles from '@mui/styles/makeStyles';
@@ -2294,6 +2294,10 @@ var getFieldNames = function getFieldNames(isChangeGroup, index) {
 var TAC_MISSING_DATA = 'Missing data: no TAC can be generated';
 var TAC_NOT_AVAILABLE = 'No TAC available';
 var TAC_RETRIEVING_DATA = 'Retrieving TAC';
+var TAC_FAILED = 'Failed to retrieve TAC';
+var tacHasError = function tacHasError(tac) {
+  return tac === TAC_MISSING_DATA || tac === TAC_NOT_AVAILABLE || tac === TAC_RETRIEVING_DATA || tac === TAC_FAILED;
+};
 var useTACGenerator = function useTACGenerator(taf, requestTAC) {
   var standardTAC = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
 
@@ -2305,7 +2309,7 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
   var _useIsMounted = useIsMounted(),
       isMounted = _useIsMounted.isMounted;
 
-  var retrieveTAC = function retrieveTAC(tafToPost) {
+  var retrieveTAC = React__default.useCallback(function (tafToPost) {
     if (shouldRetrieveTAC(tafToPost)) {
       requestTAC(tafToPost).then(function (result) {
         if (isMounted.current) {
@@ -2313,14 +2317,13 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC) {
         }
       })["catch"](function () {
         if (isMounted.current) {
-          setTAC('Failed to retrieve TAC');
+          setTAC(TAC_FAILED);
         }
       });
     } else {
       setTAC(TAC_MISSING_DATA);
     }
-  };
-
+  }, [isMounted, requestTAC]);
   React__default.useEffect(function () {
     if (taf.status !== 'NEW' && !standardTAC) {
       retrieveTAC(taf);
@@ -2483,6 +2486,10 @@ var getMessageType = function getMessageType(taf, tafAction) {
     return 'AMD';
   }
 
+  if (tafAction === 'CANCEL') {
+    return 'CNL';
+  }
+
   return taf.messageType;
 }; // For corrections and amendment we need to add the previousValidStart and End for the TAC converter
 
@@ -2526,6 +2533,36 @@ var prepareTafValues = function prepareTafValues(_taf, tafAction) {
     changeGroups: [emptyChangegroup]
   });
 };
+var getIsFormDefaultDisabled = function getIsFormDefaultDisabled(status) {
+  return !(status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED');
+};
+var fromStatusToAction = function fromStatusToAction(tafStatus) {
+  switch (tafStatus) {
+    case 'DRAFT':
+      return 'DRAFT';
+
+    case 'DRAFT_AMENDED':
+      return 'DRAFT_AMEND';
+
+    case 'DRAFT_CORRECTED':
+      return 'DRAFT_CORRECT';
+
+    case 'PUBLISHED':
+      return 'PUBLISH';
+
+    case 'AMENDED':
+      return 'AMEND';
+
+    case 'CORRECTED':
+      return 'CORRECT';
+
+    case 'CANCELLED':
+      return 'CANCEL';
+
+    default:
+      return 'NEW';
+  }
+};
 
 var textFieldStyle = function textFieldStyle(theme) {
   return {
@@ -3310,6 +3347,36 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
+var tafActionToDraftAction = function tafActionToDraftAction(tafAction) {
+  switch (tafAction) {
+    case 'AMEND':
+    case 'DRAFT_AMEND':
+      return 'DRAFT_AMEND';
+
+    case 'CORRECT':
+    case 'DRAFT_CORRECT':
+      return 'DRAFT_CORRECT';
+
+    default:
+      return 'DRAFT';
+  }
+};
+
+var tafActionToPublishAction = function tafActionToPublishAction(tafAction) {
+  switch (tafAction) {
+    case 'AMEND':
+    case 'DRAFT_AMEND':
+      return 'AMEND';
+
+    case 'CORRECT':
+    case 'DRAFT_CORRECT':
+      return 'CORRECT';
+
+    default:
+      return 'PUBLISH';
+  }
+};
+
 var buttonsStyle = {
   button: {
     minWidth: {
@@ -3339,7 +3406,7 @@ var ViewModeButtons = function ViewModeButtons(_ref) {
       return onTafViewModeButtonPress('CANCEL');
     }
   }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "correctaf",
+    "data-testid": "correcttaf",
     variant: "tertiary",
     onClick: function onClick() {
       return onTafViewModeButtonPress('CORRECT');
@@ -3393,21 +3460,7 @@ var TafFormButtons = function TafFormButtons(_ref2) {
       if action DRAFT_AMEND - new status will be DRAFT_AMENDED
       if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
       */
-      switch (tafAction) {
-        case 'AMEND':
-        case 'DRAFT_AMEND':
-          onTafEditModeButtonPress('DRAFT_AMEND');
-          break;
-
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          onTafEditModeButtonPress('DRAFT_CORRECT');
-          break;
-
-        default:
-          onTafEditModeButtonPress('DRAFT');
-          break;
-      }
+      onTafEditModeButtonPress(tafActionToDraftAction(tafAction));
     }
   }, "Save"), /*#__PURE__*/React__default.createElement(Button, {
     "data-testid": "publishtaf",
@@ -3420,21 +3473,7 @@ var TafFormButtons = function TafFormButtons(_ref2) {
       if action DRAFT_AMEND - new status will be AMENDED
       if action DRAFT_CORRECT - new status will be CORRECTED
       */
-      switch (tafAction) {
-        case 'AMEND':
-        case 'DRAFT_AMEND':
-          onTafEditModeButtonPress('AMEND');
-          break;
-
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          onTafEditModeButtonPress('CORRECT');
-          break;
-
-        default:
-          onTafEditModeButtonPress('PUBLISH');
-          break;
-      }
+      onTafEditModeButtonPress(tafActionToPublishAction(tafAction));
     }
   }, "Publish"))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -3835,41 +3874,55 @@ var IssuesPane = function IssuesPane(_ref3) {
   }))), rootElement);
 };
 
-var fromStatusToAction = function fromStatusToAction(tafStatus) {
-  switch (tafStatus) {
-    case 'DRAFT':
-      return 'DRAFT';
-
-    case 'DRAFT_AMENDED':
-      return 'DRAFT_AMEND';
-
-    case 'DRAFT_CORRECTED':
-      return 'DRAFT_CORRECT';
-
-    case 'PUBLISHED':
-      return 'PUBLISH';
-
-    case 'AMENDED':
-      return 'AMEND';
-
-    case 'CORRECTED':
-      return 'CORRECT';
+var TafModuleContext = /*#__PURE__*/React.createContext({
+  onValidateForm: null,
+  registerValidateForm: null,
+  tafAction: null,
+  setTafAction: null
+});
+var useTafModuleContext = function useTafModuleContext() {
+  return React.useContext(TafModuleContext);
+};
+var useTafModuleState = function useTafModuleState() {
+  var _React$useState = React.useState(function () {
+    return new Promise(function () {
+      return true;
+    });
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      onValidateForm = _React$useState2[0],
+      registerValidateForm = _React$useState2[1];
 
-    case 'CANCELLED':
-      return 'CANCEL';
+  var _React$useState3 = React.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      tafAction = _React$useState4[0],
+      setTafAction = _React$useState4[1];
 
-    default:
-      return 'NEW';
-  }
-}; // prevents default functionality
+  var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
+    registerValidateForm(function () {
+      return promiseToRegister;
+    });
+  };
 
+  return {
+    onValidateForm: onValidateForm,
+    registerValidateForm: onRegisterValidateForm,
+    tafAction: tafAction,
+    setTafAction: setTafAction
+  };
+};
+var TafModuleProvider = function TafModuleProvider(_ref) {
+  var children = _ref.children;
+  var contextState = useTafModuleState();
+  return /*#__PURE__*/React.createElement(TafModuleContext.Provider, {
+    value: contextState
+  }, children);
+};
 
 var noop = function noop() {};
 
 var TafForm = function TafForm(_ref) {
-  var _ref$isDisabled = _ref.isDisabled,
-      isDefaultDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      tafFromBackend = _ref.tafFromBackend,
+  var tafFromBackend = _ref.tafFromBackend,
       _ref$onFormAction = _ref.onFormAction,
       onFormAction = _ref$onFormAction === void 0 ? function () {
     return null;
@@ -3883,26 +3936,26 @@ var TafForm = function TafForm(_ref) {
       _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
       setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
     return null;
-  } : _ref$setIsIssuesPaneO;
+  } : _ref$setIsIssuesPaneO,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$setIsDisabled = _ref.setIsDisabled,
+      setIsDisabled = _ref$setIsDisabled === void 0 ? function () {
+    return null;
+  } : _ref$setIsDisabled;
   var originalTaf = tafFromBackend.taf;
-  var defaultTafAction = fromStatusToAction(originalTaf.status);
-
-  var _React$useState = React__default.useState(defaultTafAction),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      tafAction = _React$useState2[0],
-      setTafAction = _React$useState2[1];
-
-  var _React$useState3 = React__default.useState(isDefaultDisabled),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isDisabled = _React$useState4[0],
-      setIsDisabled = _React$useState4[1];
-
+  var isDefaultDisabled = getIsFormDefaultDisabled(tafFromBackend.taf.status);
   var confirmDialog = useConfirmationDialog();
 
   var _useDraftFormHelpers = useDraftFormHelpers(),
       toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
       DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
 
+  var _useTafModuleContext = useTafModuleContext(),
+      registerValidateForm = _useTafModuleContext.registerValidateForm,
+      tafAction = _useTafModuleContext.tafAction,
+      setTafAction = _useTafModuleContext.setTafAction;
+
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
 
@@ -3923,10 +3976,10 @@ var TafForm = function TafForm(_ref) {
   usePreventBrowserClose(isFormDirty && !isDisabled);
   var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
-  var _React$useState5 = React__default.useState(getValues()),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      delayedFormValues = _React$useState6[0],
-      setDelayedFormValues = _React$useState6[1];
+  var _React$useState = React__default.useState(getValues()),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      delayedFormValues = _React$useState2[0],
+      setDelayedFormValues = _React$useState2[1];
 
   var _useTACGenerator = useTACGenerator(tafFromBackend.taf, api.getTAC),
       _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
@@ -3997,6 +4050,7 @@ var TafForm = function TafForm(_ref) {
         toggleIsDraft(true);
         handleSubmit(function (data) {
           onFormAction(action, convertTafValuesToObject(data));
+          reset(getValues());
         })();
         break;
 
@@ -4058,7 +4112,7 @@ var TafForm = function TafForm(_ref) {
     switch (action) {
       case 'CANCEL':
         showConfirmDialog(action).then(function () {
-          onFormAction(action, tafFromBackend.taf);
+          onFormAction(action, convertTafValuesToObject(prepareTafValues(tafFromBackend.taf, action)));
         });
         break;
 
@@ -4149,19 +4203,39 @@ var TafForm = function TafForm(_ref) {
     });
   };
 
-  var _React$useState7 = React__default.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      shouldValidate = _React$useState8[0],
-      setShouldValidate = _React$useState8[1];
+  var _React$useState3 = React__default.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      shouldValidate = _React$useState4[0],
+      setShouldValidate = _React$useState4[1];
 
   React__default.useEffect(function () {
-    var defaultValues = prepareTafValues(tafFromBackend.taf, undefined, !isDisabled && !tafFromBackend.taf.changeGroups); // set initial form values
+    setIsDisabled(isDefaultDisabled);
+    var defaultValues = prepareTafValues(tafFromBackend.taf, undefined, !isDefaultDisabled && !tafFromBackend.taf.changeGroups); // set initial form values
 
     reset(defaultValues); // set validate flag to validate after the values have been set
 
-    setShouldValidate(true);
+    setShouldValidate(true); // register validate method to use in parent components
+
+    var onValidateFormPromise = function onValidateFormPromise() {
+      return new Promise(function (resolve, reject) {
+        toggleIsDraft(true);
+        handleSubmit(function (formData) {
+          resolve(convertTafValuesToObject(formData));
+        })().then(function (formData) {
+          if (formData === undefined) {
+            reject();
+          }
+
+          resolve(formData);
+        });
+      });
+    };
+
+    registerValidateForm(onValidateFormPromise); // set default taf action
+
+    setTafAction(fromStatusToAction(originalTaf.status));
     return function () {
-      reset();
+      reset({});
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   React__default.useEffect(function () {
@@ -4449,6 +4523,35 @@ var muiTabA11yProps = function muiTabA11yProps(index) {
     'aria-controls': "simple-tabpanel-".concat(index)
   };
 };
+var emptyBaseForecast = {
+  wind: '',
+  visibility: '',
+  weather: {
+    weather1: '',
+    weather2: '',
+    weather3: ''
+  },
+  cloud: {
+    cloud1: '',
+    cloud2: '',
+    cloud3: '',
+    cloud4: ''
+  }
+};
+var prepareTafExportValues = function prepareTafExportValues(tafToCopy, currentTaf) {
+  var _a;
+
+  var convertedCopy = prepareTafValues(tafToCopy, undefined, false);
+  var baseForecast = convertedCopy.baseForecast,
+      _convertedCopy$change = convertedCopy.changeGroups,
+      changeGroups = _convertedCopy$change === void 0 ? [] : _convertedCopy$change;
+  return Object.assign(Object.assign({}, currentTaf), {
+    baseForecast: Object.assign(Object.assign(Object.assign({}, emptyBaseForecast), baseForecast), {
+      valid: (_a = currentTaf === null || currentTaf === void 0 ? void 0 : currentTaf.baseForecast) === null || _a === void 0 ? void 0 : _a.valid
+    }),
+    changeGroups: changeGroups
+  });
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4539,10 +4642,44 @@ var StatusIcon = function StatusIcon(_ref) {
   }));
 };
 
+/* *
+ * 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 ExportIcon = /*#__PURE__*/React__default.createElement(SvgIcon, null, /*#__PURE__*/React__default.createElement("path", {
+  d: "M14.744 5.476a1.252 1.252 0 1 0 0 2.504h2.752v9.516H6.48v-1.753a1.251 1.251 0 1 0-2.504 0v3.004c0 .693.561 1.253 1.252 1.253h13.52C19.44 20 20 19.44 20 18.747V6.727c0-.69-.56-1.251-1.252-1.251zM9.133 2.385a1.252 1.252 0 0 0-1.77 0L1.773 7.974l5.54 5.54c.49.49 1.281.49 1.77 0l.022-.026a1.25 1.25 0 0 0-.021-1.745L6.568 9.225h1.371c.914 0 2.756.618 4.045 2.763 1.29 2.145.352 2.526.653 2.526.301 0 1.943-1.798.721-4.295-1.71-3.498-4.6-3.498-5.346-3.498H6.568l2.565-2.565a1.253 1.253 0 0 0 0-1.771z"
+}));
+
+var ExportButton = function ExportButton(_ref) {
+  var onClick = _ref.onClick,
+      isHidden = _ref.isHidden;
+  return isHidden ? null : /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Import TAC",
+    placement: "left"
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(ToolButton, {
+    onClick: onClick,
+    "data-testid": "export-tac-button"
+  }, ExportIcon)));
+};
+
 var TacContainer = function TacContainer(_ref) {
   var taf = _ref.taf,
       _ref$isActive = _ref.isActive,
-      isActive = _ref$isActive === void 0 ? false : _ref$isActive;
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+      _ref$isFormDisabled = _ref.isFormDisabled,
+      isFormDisabled = _ref$isFormDisabled === void 0 ? false : _ref$isFormDisabled;
 
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
@@ -4557,6 +4694,26 @@ var TacContainer = function TacContainer(_ref) {
       baseTime = taf.baseTime;
   var locationLabel = getLocationSetting(location).label;
   var timeSlot = getTafTimeSlot(baseTime, location, status);
+
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues,
+      trigger = _useFormContext.trigger,
+      setValue = _useFormContext.setValue;
+
+  var handleExport = function handleExport() {
+    var currentTaf = getValues();
+    var newTaf = prepareTafExportValues(taf, currentTaf);
+    setValue('baseForecast', newTaf.baseForecast, {
+      shouldDirty: true
+    });
+    setValue('changeGroups', newTaf.changeGroups, {
+      shouldDirty: true
+    });
+    setTimeout(function () {
+      trigger(); // trigger all fields validation
+    }, 0);
+  };
+
   React__default.useEffect(function () {
     if (isActive) {
       retrieveTAC(taf);
@@ -4572,14 +4729,22 @@ var TacContainer = function TacContainer(_ref) {
     sx: {
       display: 'flex',
       alignItems: 'center',
-      marginBottom: '2px'
+      justifyContent: 'space-between',
+      height: 24
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center'
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
-      width: 20,
-      height: 20,
+      width: 24,
+      height: 24,
       display: 'flex',
-      marginRight: '6px'
+      marginRight: '2px',
+      alignItems: 'center',
+      justifyContent: 'center'
     }
   }, /*#__PURE__*/React__default.createElement(StatusIcon, {
     timeSlot: timeSlot,
@@ -4606,7 +4771,10 @@ var TacContainer = function TacContainer(_ref) {
     },
     "data-testid": "tafLocationLabel",
     component: "span"
-  }, locationLabel))), /*#__PURE__*/React__default.createElement(Box, {
+  }, locationLabel))), /*#__PURE__*/React__default.createElement(ExportButton, {
+    onClick: handleExport,
+    isHidden: isFormDisabled || tacHasError(TAC)
+  })), /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       fontSize: '12px',
       letterSpacing: '0.4px',
@@ -4642,7 +4810,9 @@ var TacOverview = function TacOverview(_ref) {
       _ref$hideTitle = _ref.hideTitle,
       hideTitle = _ref$hideTitle === void 0 ? false : _ref$hideTitle,
       _ref$activeTaf = _ref.activeTaf,
-      activeTaf = _ref$activeTaf === void 0 ? null : _ref$activeTaf;
+      activeTaf = _ref$activeTaf === void 0 ? null : _ref$activeTaf,
+      _ref$isFormDisabled = _ref.isFormDisabled,
+      isFormDisabled = _ref$isFormDisabled === void 0 ? false : _ref$isFormDisabled;
 
   var _React$useState = React__default.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4739,7 +4909,8 @@ var TacOverview = function TacOverview(_ref) {
       return /*#__PURE__*/React__default.createElement(TacContainer, {
         key: taf.uuid,
         taf: taf,
-        isActive: isActiveLocation(taf.location)
+        isActive: isActiveLocation(taf.location),
+        isFormDisabled: isFormDisabled
       });
     }));
   })));
@@ -5008,25 +5179,22 @@ var fromActionToStatus = function fromActionToStatus(tafAction) {
   }
 };
 
-var TafPanel = function TafPanel(_ref) {
-  var tafFromBackend = _ref.tafFromBackend,
-      activeTafIndex = _ref.activeTafIndex,
-      index = _ref.index,
-      _ref$onPostTaf = _ref.onPostTaf,
-      onPostTaf = _ref$onPostTaf === void 0 ? function () {} : _ref$onPostTaf,
-      _ref$onFormDirty = _ref.onFormDirty,
-      onFormDirty = _ref$onFormDirty === void 0 ? function () {
-    return null;
-  } : _ref$onFormDirty,
-      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
-      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
-      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
-      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
-    return null;
-  } : _ref$setIsIssuesPaneO;
+var parseErrorMessage = function parseErrorMessage(error, params) {
+  return params.changeStatusTo === 'CANCELLED' ? {
+    type: 'CANCELLED',
+    title: 'Cancelling this TAF failed, please try again'
+  } : {
+    type: 'SERVER',
+    title: 'An error has occurred while saving, please try again',
+    message: getAxiosErrorMessage(error)
+  };
+};
 
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
+var usePostTafRequest = function usePostTafRequest(request) {
+  var errorParser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : parseErrorMessage;
+
+  var _useIsMounted = useIsMounted(),
+      isMounted = _useIsMounted.isMounted;
 
   var _React$useState = React__default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -5036,68 +5204,95 @@ var TafPanel = function TafPanel(_ref) {
   var _React$useState3 = React__default.useState(null),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       error = _React$useState4[0],
-      setError = _React$useState4[1]; // removes cancelled error message
-
-
-  React__default.useEffect(function () {
-    var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
-      setError(null);
-    }, 10000) : null;
-    return function () {
-      if (cancelErrorTimeout !== null) {
-        clearTimeout(cancelErrorTimeout);
-      }
-    };
-  }, [error]);
+      setError = _React$useState4[1];
 
-  var postTaf = function postTaf(data) {
+  var doRequest = function doRequest(params) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var newError;
+      var newErrorr;
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _context.prev = 0;
               setLoading(true);
+              _context.prev = 1;
               _context.next = 4;
-              return api.postTaf(data);
+              return request(params);
 
             case 4:
+              if (isMounted.current) {
+                _context.next = 6;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 6:
               setLoading(false);
               setError(null);
-              onFormDirty(false); // callback
-
-              onPostTaf();
-              _context.next = 16;
+              _context.next = 18;
               break;
 
             case 10:
               _context.prev = 10;
-              _context.t0 = _context["catch"](0);
-              newError = data.changeStatusTo === 'CANCELLED' ? {
-                type: 'CANCELLED',
-                title: 'Cancelling this TAF failed, please try again'
-              } : {
-                type: 'SERVER',
-                title: 'An error has occurred while saving, please try again',
-                message: getAxiosErrorMessage(_context.t0)
-              };
-              setError(newError);
+              _context.t0 = _context["catch"](1);
+
+              if (isMounted.current) {
+                _context.next = 14;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 14:
+              newErrorr = errorParser ? errorParser(_context.t0, params) : _context.t0;
               setLoading(false);
-              throw _context.t0;
+              setError(newErrorr);
+              throw newErrorr;
 
-            case 16:
+            case 18:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 10]]);
+      }, _callee, null, [[1, 10]]);
     }));
   };
 
-  var getViewMode = function getViewMode(status) {
-    return status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED' ? 'edit' : 'view';
+  return {
+    isLoading: isLoading,
+    error: error,
+    setError: setError,
+    doRequest: doRequest
   };
+};
+
+var TafPanel = function TafPanel(_ref) {
+  var tafFromBackend = _ref.tafFromBackend,
+      activeTafIndex = _ref.activeTafIndex,
+      index = _ref.index,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$postTaf = _ref.postTaf,
+      postTaf = _ref$postTaf === void 0 ? function () {
+    return null;
+  } : _ref$postTaf,
+      _ref$onFormDirty = _ref.onFormDirty,
+      onFormDirty = _ref$onFormDirty === void 0 ? function () {
+    return null;
+  } : _ref$onFormDirty,
+      _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
+      isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
+      _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
+      setIsIssuesPaneOpen = _ref$setIsIssuesPaneO === void 0 ? function () {
+    return null;
+  } : _ref$setIsIssuesPaneO,
+      _ref$isFormDisabled = _ref.isFormDisabled,
+      isFormDisabled = _ref$isFormDisabled === void 0 ? false : _ref$isFormDisabled,
+      _ref$setIsFormDisable = _ref.setIsFormDisabled,
+      setIsFormDisabled = _ref$setIsFormDisable === void 0 ? function () {
+    return null;
+  } : _ref$setIsFormDisable,
+      error = _ref.error;
 
   var onTafAction = function onTafAction(action, taf) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
@@ -5160,12 +5355,13 @@ var TafPanel = function TafPanel(_ref) {
     info: error.message,
     dataTestId: "taf-error"
   }), /*#__PURE__*/React__default.createElement(TafForm, {
-    isDisabled: getViewMode(tafFromBackend.taf.status) === 'view',
     tafFromBackend: tafFromBackend,
     onFormAction: onTafAction,
     onFormDirty: onFormDirty,
     isIssuesPaneOpen: isIssuesPaneOpen,
-    setIsIssuesPaneOpen: setIsIssuesPaneOpen
+    setIsIssuesPaneOpen: setIsIssuesPaneOpen,
+    isDisabled: isFormDisabled,
+    setIsDisabled: setIsFormDisabled
   }));
 };
 
@@ -5196,11 +5392,21 @@ var IssuesPaneWrapper = function IssuesPaneWrapper(props) {
   }, props));
 };
 
+var CONFIRM_DIALOG_OPTIONS = {
+  title: 'Whoops',
+  description: "It's not possible to autosave this TAF due to the presence of issue(s). Are you sure you want to close this TAF? Any changes made will be lost.",
+  confirmLabel: 'Exit without saving'
+};
+
 var TafLayout = function TafLayout(_ref) {
   var _ref$tafList = _ref.tafList,
       tafList = _ref$tafList === void 0 ? [] : _ref$tafList,
       _ref$onPostTaf = _ref.onPostTaf,
       onPostTaf = _ref$onPostTaf === void 0 ? function () {} : _ref$onPostTaf;
+
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
   var confirmDialog = useConfirmationDialog();
 
   var _useIssuesPane = useIssuesPane(),
@@ -5209,6 +5415,16 @@ var TafLayout = function TafLayout(_ref) {
       onCloseIssuesPane = _useIssuesPane.onCloseIssuesPane,
       startPosition = _useIssuesPane.startPosition;
 
+  var _usePostTafRequest = usePostTafRequest(api.postTaf),
+      isLoading = _usePostTafRequest.isLoading,
+      postTafRequest = _usePostTafRequest.doRequest,
+      error = _usePostTafRequest.error,
+      setError = _usePostTafRequest.setError;
+
+  var _useTafModuleContext = useTafModuleContext(),
+      onValidateForm = _useTafModuleContext.onValidateForm,
+      tafAction = _useTafModuleContext.tafAction;
+
   var _React$useState = React__default.useState(sortTafTimeSlots(tafList)),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       _React$useState2$ = _React$useState2[0],
@@ -5241,18 +5457,83 @@ var TafLayout = function TafLayout(_ref) {
       isFormDirty = _React$useState10[0],
       setIsFormDirty = _React$useState10[1];
 
+  var _React$useState11 = React__default.useState(false),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      isFormDisabled = _React$useState12[0],
+      setIsFormDisabled = _React$useState12[1];
+
+  var postTaf = function postTaf(data) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return postTafRequest(data);
+
+            case 2:
+              // callback
+              onPostTaf();
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  };
+
   function onChangeTab(action, value) {
-    if (isFormDirty) {
-      confirmDialog({
-        title: 'Whoops',
-        description: 'Do you want to leave this open TAF without saving it? All changes will be lost.',
-        confirmLabel: 'Exit without saving'
-      }).then(function () {
-        action(value);
-      });
-    } else {
-      action(value);
-    }
+    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var taf;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!isFormDirty) {
+                _context2.next = 15;
+                break;
+              }
+
+              _context2.prev = 1;
+              _context2.next = 4;
+              return onValidateForm();
+
+            case 4:
+              taf = _context2.sent;
+              _context2.next = 7;
+              return postTaf({
+                taf: taf,
+                changeStatusTo: fromActionToStatus(tafActionToDraftAction(tafAction))
+              });
+
+            case 7:
+              action(value);
+              _context2.next = 13;
+              break;
+
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](1);
+              confirmDialog(CONFIRM_DIALOG_OPTIONS).then(function () {
+                action(value);
+              });
+
+            case 13:
+              _context2.next = 16;
+              break;
+
+            case 15:
+              action(value);
+
+            case 16:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[1, 10]]);
+    }));
   }
 
   var onChangeLocationTab = function onChangeLocationTab(index) {
@@ -5281,6 +5562,16 @@ var TafLayout = function TafLayout(_ref) {
     var newIndex = newActiveIndex !== -1 ? newActiveIndex : activeTafIndex;
     setActiveTafIndex(newIndex); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tafList, setLocations]);
+  React__default.useEffect(function () {
+    var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
+      setError(null);
+    }, 10000) : null;
+    return function () {
+      if (cancelErrorTimeout !== null) {
+        clearTimeout(cancelErrorTimeout);
+      }
+    };
+  }, [error, setError]);
 
   if (!tafList) {
     return null;
@@ -5371,10 +5662,14 @@ var TafLayout = function TafLayout(_ref) {
       activeTafIndex: activeTafIndex,
       index: index,
       tafFromBackend: tafFromBackend,
-      onPostTaf: onPostTaf,
       onFormDirty: setIsFormDirty,
       isIssuesPaneOpen: isIssuesPaneOpen,
-      setIsIssuesPaneOpen: onToggleIssuesPane
+      setIsIssuesPaneOpen: onToggleIssuesPane,
+      isFormDisabled: isFormDisabled,
+      setIsFormDisabled: setIsFormDisabled,
+      postTaf: postTaf,
+      isLoading: isLoading,
+      error: error
     });
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -5390,7 +5685,8 @@ var TafLayout = function TafLayout(_ref) {
     upcomingTafs: upcoming,
     currentTafs: current,
     expiredTafs: expired,
-    activeTaf: activeTaf
+    activeTaf: activeTaf,
+    isFormDisabled: isFormDisabled
   })))))), /*#__PURE__*/React__default.createElement(IssuesPaneWrapper, {
     handleClose: onCloseIssuesPane,
     isOpen: isIssuesPaneOpen,
@@ -5417,13 +5713,13 @@ var TafLayout = function TafLayout(_ref) {
 
 var TafWrapper = function TafWrapper(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React.createElement(ReactHookFormProvider, {
+  return /*#__PURE__*/React.createElement(TafModuleProvider, null, /*#__PURE__*/React.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React.createElement(ReactHookFormProvider, {
     options: {
       mode: 'onTouched',
       reValidateMode: 'onChange',
       criteriaMode: 'all'
     }
-  }, children));
+  }, children)));
 };
 
 var TafModule = function TafModule() {
@@ -6180,7 +6476,7 @@ var fakePublishedTaf = {
       change: 'BECMG',
       valid: {
         start: "".concat(currentDate, "T23:00:00Z"),
-        end: "".concat(tomorrowDate, "T00:00:00Z")
+        end: "".concat(tomorrowDate, "T01:00:00Z")
       },
       wind: {
         direction: 150,
@@ -6436,7 +6732,7 @@ var fakeAmendmentTaf = {
       }
     }
   }
-}; // Only use for display purposes in the list!
+};
 
 ({
   creationDate: "2022-01-06T14:00:00Z",