@opengeoweb/taf 2.12.0 → 2.15.0

package/index.esm.js

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import React__default from 'react';
-import { TextField, Grid, Box, Button, IconButton, Tooltip, Chip, Typography, Card, Tabs, Tab, Dialog, MenuList, MenuItem, Backdrop, CircularProgress } from '@mui/material';
+import { TextField, Grid, Box, Button, IconButton, Tooltip, Chip, Typography, FormLabel, Switch, Card, Tabs, Tab, Dialog, MenuList, MenuItem, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { ReactSortable, Sortable } from 'react-sortablejs';
-import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
-import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, isAxiosError, getAxiosErrorMessage, AlertBanner, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
 import { isEqual } from 'lodash';
+import { useAuthenticationContext } from '@opengeoweb/authentication';
+import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
+import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, Avatar, getInitials, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getErrorMessage as getErrorMessage$1, ConfirmationServiceProvider, usePoller, ErrorBoundary } from '@opengeoweb/shared';
 import moment from 'moment';
-import { Add, Delete, Close, DragHandle as DragHandle$1, ThumbsUp, Clock, Cancel, Edit, Success, Export, ListItem } from '@opengeoweb/theme';
+import { Add, Delete, Close, DragHandle as DragHandle$1, ThumbsUp, Clock, Cancel, Edit, Success, Export, ListItem, Cached } from '@opengeoweb/theme';
 import makeStyles from '@mui/styles/makeStyles';
 import ReactDOM from 'react-dom';
-import { useApiContext, useApi, createApiInstance, ApiProvider } from '@opengeoweb/api';
+import { useApiContext, createApiInstance, ApiProvider } from '@opengeoweb/api';
 import LinearProgress from '@mui/material/LinearProgress';
 import Box$1 from '@mui/material/Box';
 
@@ -3832,7 +3833,12 @@ var IssuesPane = function IssuesPane(_ref3) {
       fontSize: '4rem'
     },
     "data-testid": "zeroIssuesImage"
-  }, /*#__PURE__*/React.createElement(ThumbsUp, null)), errorList.length > 0 && errorList.map(function (error, index) {
+  }, /*#__PURE__*/React.createElement(ThumbsUp, {
+    sx: {
+      height: '69px',
+      width: '58px'
+    }
+  })), errorList.length > 0 && errorList.map(function (error, index) {
     return /*#__PURE__*/React.createElement(Typography // eslint-disable-next-line react/no-array-index-key
     , {
       // eslint-disable-next-line react/no-array-index-key
@@ -3922,9 +3928,75 @@ var TafModuleProvider = function TafModuleProvider(_ref2) {
   }, children);
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var styles = {
+  label: {
+    color: 'geowebColors.buttons.tertiary.default.color',
+    opacity: 1,
+    fontSize: '12px',
+    fontWeight: 500
+  }
+};
+
+var SwitchButton = function SwitchButton(props) {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Switch mode"
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormLabel, {
+    sx: styles.label
+  }, "Viewer"), /*#__PURE__*/React.createElement(Switch, Object.assign({
+    "data-testid": "switchMode"
+  }, props)), /*#__PURE__*/React.createElement(FormLabel, {
+    sx: styles.label
+  }, "Editor")));
+};
+
+/* *
+ * 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 TafAvatar = function TafAvatar(_ref) {
+  var editor = _ref.editor,
+      _ref$tooltipPlacement = _ref.tooltipPlacement,
+      tooltipPlacement = _ref$tooltipPlacement === void 0 ? 'bottom' : _ref$tooltipPlacement;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Editor: ".concat(editor),
+    placement: tooltipPlacement
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Avatar, {
+    size: "small"
+  }, getInitials(editor))));
+};
+
 var noop = function noop() {};
 
-var TafForm = function TafForm(_ref) {
+var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
   var tafFromBackend = _ref.tafFromBackend,
       _ref$onFormAction = _ref.onFormAction,
       onFormAction = _ref$onFormAction === void 0 ? function () {
@@ -3941,8 +4013,18 @@ var TafForm = function TafForm(_ref) {
       _ref$setIsDisabled = _ref.setIsDisabled,
       setIsDisabled = _ref$setIsDisabled === void 0 ? function () {
     return null;
-  } : _ref$setIsDisabled;
-  var originalTaf = tafFromBackend.taf;
+  } : _ref$setIsDisabled,
+      _ref$onSwitchEditor = _ref.onSwitchEditor,
+      onSwitchEditor = _ref$onSwitchEditor === void 0 ? function () {
+    return null;
+  } : _ref$onSwitchEditor;
+  var originalTaf = tafFromBackend.taf,
+      editor = tafFromBackend.editor;
+
+  var _useAuthenticationCon = useAuthenticationContext(),
+      auth = _useAuthenticationCon.auth;
+
+  var isEditor = editor === (auth === null || auth === void 0 ? void 0 : auth.username) || false;
   var isDefaultDisabled = getIsFormDefaultDisabled(tafFromBackend.taf.status);
   var confirmDialog = useConfirmationDialog();
 
@@ -4047,6 +4129,93 @@ var TafForm = function TafForm(_ref) {
     setTafAction(action);
   };
 
+  var setIsEditor = function setIsEditor(checked) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var editor, didSucceed;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              editor = checked ? auth === null || auth === void 0 ? void 0 : auth.username : '';
+
+              if (!(editor === tafFromBackend.editor)) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return", true);
+
+            case 3:
+              if (!(tafFromBackend.editor !== '' && tafFromBackend.editor !== null && tafFromBackend.editor !== (auth === null || auth === void 0 ? void 0 : auth.username))) {
+                _context.next = 6;
+                break;
+              }
+
+              _context.next = 6;
+              return confirmDialog({
+                title: 'Switch to editor mode',
+                description: 'This TAF is already in edit mode and important information could get lost in the switching process.',
+                confirmLabel: 'Edit mode'
+              });
+
+            case 6:
+              _context.next = 8;
+              return onSwitchEditor(Object.assign(Object.assign({}, tafFromBackend), {
+                editor: editor
+              }));
+
+            case 8:
+              didSucceed = _context.sent;
+              return _context.abrupt("return", didSucceed);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  };
+
+  var onSwitchMode = function onSwitchMode(event) {
+    var checked = event.target.checked;
+
+    if (!checked && isFormDirty) {
+      confirmDialog({
+        title: 'Whoops',
+        description: 'Are you sure you want to switch to viewer mode? Your unsaved changes will be lost.',
+        confirmLabel: 'Switch mode'
+      }).then(function () {
+        return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+          var didSucceed;
+          return regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) {
+              switch (_context2.prev = _context2.next) {
+                case 0:
+                  _context2.next = 2;
+                  return setIsEditor(checked);
+
+                case 2:
+                  didSucceed = _context2.sent;
+
+                  if (didSucceed) {
+                    resetForm(undefined, isDefaultDisabled);
+                    resetTAC();
+                  }
+
+                case 4:
+                case "end":
+                  return _context2.stop();
+              }
+            }
+          }, _callee2);
+        }));
+      });
+    } else {
+      setIsEditor(checked);
+    }
+  };
+
   var onTafEditModeButtonPress = function onTafEditModeButtonPress(action) {
     switch (action) {
       case 'DRAFT':
@@ -4076,21 +4245,21 @@ var TafForm = function TafForm(_ref) {
       case 'PUBLISH':
         toggleIsDraft(false);
         handleSubmit(function (data) {
-          return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+          return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
             var didSucceed;
-            return regeneratorRuntime.wrap(function _callee$(_context) {
+            return regeneratorRuntime.wrap(function _callee3$(_context3) {
               while (1) {
-                switch (_context.prev = _context.next) {
+                switch (_context3.prev = _context3.next) {
                   case 0:
-                    _context.next = 2;
+                    _context3.next = 2;
                     return showConfirmDialog(action);
 
                   case 2:
-                    _context.next = 4;
+                    _context3.next = 4;
                     return onFormAction(action, convertTafValuesToObject(data));
 
                   case 4:
-                    didSucceed = _context.sent;
+                    didSucceed = _context3.sent;
 
                     if (didSucceed) {
                       setIsDisabled(true);
@@ -4100,10 +4269,10 @@ var TafForm = function TafForm(_ref) {
 
                   case 6:
                   case "end":
-                    return _context.stop();
+                    return _context3.stop();
                 }
               }
-            }, _callee);
+            }, _callee3);
           }));
         })();
         break;
@@ -4118,7 +4287,21 @@ var TafForm = function TafForm(_ref) {
     switch (action) {
       case 'CANCEL':
         showConfirmDialog(action).then(function () {
-          onFormAction(action, convertTafValuesToObject(prepareTafValues(tafFromBackend.taf, action)));
+          return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+            return regeneratorRuntime.wrap(function _callee4$(_context4) {
+              while (1) {
+                switch (_context4.prev = _context4.next) {
+                  case 0:
+                    _context4.next = 2;
+                    return onFormAction(action, convertTafValuesToObject(prepareTafValues(tafFromBackend.taf, action)));
+
+                  case 2:
+                  case "end":
+                    return _context4.stop();
+                }
+              }
+            }, _callee4);
+          }));
         });
         break;
 
@@ -4215,7 +4398,7 @@ var TafForm = function TafForm(_ref) {
       setShouldValidate = _React$useState4[1];
 
   React__default.useEffect(function () {
-    setIsDisabled(isDefaultDisabled);
+    setIsDisabled(!isEditor || 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
@@ -4250,9 +4433,13 @@ var TafForm = function TafForm(_ref) {
 
     reset(newValues); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tafFromBackend]);
+  React__default.useEffect(function () {
+    // update disabled state when editor changed
+    setIsDisabled(!isEditor || isDefaultDisabled); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
   React__default.useEffect(function () {
     if (shouldValidate && !isDisabled) {
-      // trigger validation on all changegroup validity times after initial load since they could be outside the new validity period
+      // trigger validation on all changegroup validity times after form is enabled since they could be outside the new validity period
       var _tafFromBackend$taf$c = tafFromBackend.taf.changeGroups,
           changeGroups = _tafFromBackend$taf$c === void 0 ? [] : _tafFromBackend$taf$c;
       var validFields = changeGroups.map(function (_field, index) {
@@ -4261,8 +4448,33 @@ var TafForm = function TafForm(_ref) {
       trigger(validFields);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [shouldValidate]);
-  return /*#__PURE__*/React__default.createElement("form", {
+  }, [shouldValidate, isDisabled]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      position: 'absolute',
+      top: {
+        xs: '20px',
+        sm: '0px'
+      },
+      right: {
+        xs: 'calc(50% -  70px)',
+        sm: '8px'
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(SwitchButton, {
+    checked: isEditor,
+    onChange: onSwitchMode
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      width: '16px',
+      marginLeft: 1
+    }
+  }, editor && /*#__PURE__*/React__default.createElement(TafAvatar, {
+    editor: editor
+  }))), /*#__PURE__*/React__default.createElement("form", {
     "data-testid": "taf-form",
     onSubmit: handleSubmit(onSubmit),
     onBlur: onFormBlur
@@ -4328,7 +4540,7 @@ var TafForm = function TafForm(_ref) {
         index: index
       })
     });
-  })), !isDisabled && /*#__PURE__*/React__default.createElement(Grid, {
+  })), !isDisabled && isEditor && /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     justifyContent: "space-between",
     alignItems: "center",
@@ -4342,7 +4554,7 @@ var TafForm = function TafForm(_ref) {
     errors: errors,
     isIssuesPaneOpen: isIssuesPaneOpen,
     setIsIssuesPaneOpen: setIsIssuesPaneOpen
-  }))), /*#__PURE__*/React__default.createElement(TafFormButtons, {
+  }))), isEditor && /*#__PURE__*/React__default.createElement(TafFormButtons, {
     isFormDisabled: isDisabled,
     tafAction: tafAction,
     canBe: tafFromBackend.canbe,
@@ -4353,8 +4565,12 @@ var TafForm = function TafForm(_ref) {
       name: field,
       key: field
     });
-  }), /*#__PURE__*/React__default.createElement(DraftFieldHelper, null));
-};
+  }), /*#__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
+  prevProps.tafFromBackend.editor === nextProps.tafFromBackend.editor;
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4591,7 +4807,6 @@ var StatusIcon = function StatusIcon(_ref2) {
       title: "Expired"
     }, /*#__PURE__*/React.createElement(Clock, {
       "data-testid": "status-expired",
-      fontSize: "small",
       sx: {
         transform: 'scaleX(-1)',
         color: 'geowebColors.buttons.tertiary.disabled.color'
@@ -4604,7 +4819,6 @@ var StatusIcon = function StatusIcon(_ref2) {
       title: "Cancelled"
     }, /*#__PURE__*/React.createElement(Cancel, {
       "data-testid": "status-cancelled",
-      fontSize: "small",
       sx: {
         color: 'geowebColors.captions.captionError.rgba'
       }
@@ -4616,7 +4830,6 @@ var StatusIcon = function StatusIcon(_ref2) {
       title: "Draft"
     }, /*#__PURE__*/React.createElement(Edit, {
       "data-testid": "status-draft",
-      fontSize: "small",
       sx: {
         color: 'geowebColors.buttons.tertiary.default.color'
       }
@@ -4627,7 +4840,6 @@ var StatusIcon = function StatusIcon(_ref2) {
     title: "Active"
   }, /*#__PURE__*/React.createElement(Success, {
     "data-testid": "status-active",
-    fontSize: "small",
     sx: {
       color: 'geowebColors.functional.success'
     }
@@ -4635,7 +4847,6 @@ var StatusIcon = function StatusIcon(_ref2) {
     title: "Upcoming"
   }, /*#__PURE__*/React.createElement(Clock, {
     "data-testid": "status-upcoming",
-    fontSize: "small",
     sx: {
       color: 'geowebColors.functional.success'
     }
@@ -4948,7 +5159,7 @@ var TacOverviewMobile = function TacOverviewMobile(_ref) {
       },
       position: 'absolute',
       right: '8px',
-      top: '30px'
+      top: '48px'
     }
   }, /*#__PURE__*/React.createElement(ListItem, null)), /*#__PURE__*/React.createElement(Dialog, {
     open: isOpen,
@@ -5078,7 +5289,8 @@ var LocationTabs = function LocationTabs(_ref) {
       paddingTop: '32px'
     }
   }, tafList.map(function (_ref2, index) {
-    var taf = _ref2.taf;
+    var taf = _ref2.taf,
+        editor = _ref2.editor;
     return /*#__PURE__*/React.createElement(MenuItem, {
       key: taf.uuid,
       selected: index === activeIndex,
@@ -5103,8 +5315,18 @@ var LocationTabs = function LocationTabs(_ref) {
       onClick: function onClick() {
         return onChangeTab(index);
       }
-    }, /*#__PURE__*/React.createElement(Box$1, {
+    }, editor && /*#__PURE__*/React.createElement(Box$1, {
+      sx: {
+        position: 'absolute',
+        top: '4px',
+        left: '8px'
+      }
+    }, /*#__PURE__*/React.createElement(TafAvatar, {
+      editor: editor,
+      tooltipPlacement: "right"
+    })), /*#__PURE__*/React.createElement(Box$1, {
       component: "span",
+      "data-testid": "taf-location",
       sx: {
         fontSize: '12px',
         fontWeight: '500',
@@ -5114,9 +5336,9 @@ var LocationTabs = function LocationTabs(_ref) {
       component: "span",
       sx: {
         position: 'absolute',
-        bottom: '1px',
-        width: '20px',
-        height: '20px'
+        bottom: '-1px',
+        width: '24px',
+        height: '24px'
       }
     }, /*#__PURE__*/React.createElement(StatusIcon, {
       timeSlot: timeSlot,
@@ -5180,13 +5402,15 @@ var fromActionToStatus = function fromActionToStatus(tafAction) {
 };
 
 var parseErrorMessage = function parseErrorMessage(error, params) {
+  var message = getErrorMessage$1(error);
   return params.changeStatusTo === 'CANCELLED' ? {
     type: 'CANCELLED',
-    title: 'Cancelling this TAF failed, please try again'
+    title: 'Cancelling this TAF failed, please try again',
+    message: message
   } : {
     type: 'SERVER',
     title: 'An error has occurred while saving, please try again',
-    message: isAxiosError(error) ? getAxiosErrorMessage(error) : error.message
+    message: message
   };
 };
 
@@ -5277,6 +5501,10 @@ var TafPanel = function TafPanel(_ref) {
       postTaf = _ref$postTaf === void 0 ? function () {
     return null;
   } : _ref$postTaf,
+      _ref$patchTaf = _ref.patchTaf,
+      patchTaf = _ref$patchTaf === void 0 ? function () {
+    return null;
+  } : _ref$patchTaf,
       _ref$isIssuesPaneOpen = _ref.isIssuesPaneOpen,
       isIssuesPaneOpen = _ref$isIssuesPaneOpen === void 0 ? false : _ref$isIssuesPaneOpen,
       _ref$setIsIssuesPaneO = _ref.setIsIssuesPaneOpen,
@@ -5363,7 +5591,8 @@ var TafPanel = function TafPanel(_ref) {
     isIssuesPaneOpen: isIssuesPaneOpen,
     setIsIssuesPaneOpen: setIsIssuesPaneOpen,
     isDisabled: isFormDisabled,
-    setIsDisabled: setIsFormDisabled
+    setIsDisabled: setIsFormDisabled,
+    onSwitchEditor: patchTaf
   })));
 };
 
@@ -5394,6 +5623,57 @@ var IssuesPaneWrapper = function IssuesPaneWrapper(props) {
   }, props));
 };
 
+/* *
+ * 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 getLastUpdateTitle = function getLastUpdateTitle(time) {
+  return "Last updated ".concat(time);
+};
+
+var LastUpdateTime = function LastUpdateTime(_ref) {
+  var _ref$onUpdateTaf = _ref.onUpdateTaf,
+      onUpdateTaf = _ref$onUpdateTaf === void 0 ? function () {} : _ref$onUpdateTaf,
+      lastUpdateTime = _ref.lastUpdateTime;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      height: '100%',
+      justifyContent: 'flex-end'
+    }
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    sx: {
+      color: 'geowebColors.captions.captionStatus.rgba',
+      fontSize: '10px',
+      lineHeight: '1.6',
+      letterSpacing: '0.33px'
+    },
+    "data-testid": "lastupdated-time"
+  }, getLastUpdateTitle(lastUpdateTime)), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Click to refresh"
+  }, /*#__PURE__*/React__default.createElement(ToolButton, {
+    "data-testid": "updateTafBtn",
+    onClick: onUpdateTaf,
+    sx: {
+      marginRight: 1,
+      marginLeft: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(Cached, null))));
+};
+
 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.",
@@ -5403,8 +5683,9 @@ var CONFIRM_DIALOG_OPTIONS = {
 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;
+      _ref$onUpdateTaf = _ref.onUpdateTaf,
+      onUpdateTaf = _ref$onUpdateTaf === void 0 ? function () {} : _ref$onUpdateTaf,
+      lastUpdateTime = _ref.lastUpdateTime;
 
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
@@ -5420,8 +5701,11 @@ var TafLayout = function TafLayout(_ref) {
   var _usePostTafRequest = usePostTafRequest(api.postTaf),
       isLoading = _usePostTafRequest.isLoading,
       postTafRequest = _usePostTafRequest.doRequest,
-      error = _usePostTafRequest.error,
-      setError = _usePostTafRequest.setError;
+      postError = _usePostTafRequest.error;
+
+  var _usePostTafRequest2 = usePostTafRequest(api.patchTaf),
+      patchTafRequest = _usePostTafRequest2.doRequest,
+      patchError = _usePostTafRequest2.error;
 
   var _useTafModuleContext = useTafModuleContext(),
       onValidateForm = _useTafModuleContext.onValidateForm,
@@ -5460,6 +5744,11 @@ var TafLayout = function TafLayout(_ref) {
       isFormDisabled = _React$useState10[0],
       setIsFormDisabled = _React$useState10[1];
 
+  var _React$useState11 = React__default.useState(),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      error = _React$useState12[0],
+      setError = _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) {
@@ -5471,7 +5760,7 @@ var TafLayout = function TafLayout(_ref) {
 
             case 2:
               // callback
-              onPostTaf();
+              onUpdateTaf();
 
             case 3:
             case "end":
@@ -5482,25 +5771,54 @@ var TafLayout = function TafLayout(_ref) {
     }));
   };
 
-  function onChangeTab(action, value) {
-    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var taf;
+  var patchTaf = function patchTaf(data) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return patchTafRequest(data);
+
+            case 3:
+              // callback
+              onUpdateTaf();
+              return _context2.abrupt("return", true);
+
+            case 7:
+              _context2.prev = 7;
+              _context2.t0 = _context2["catch"](0);
+              return _context2.abrupt("return", false);
+
+            case 10:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 7]]);
+    }));
+  };
+
+  function onChangeTab(action, value) {
+    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var taf;
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
             case 0:
               if (!isFormDirty) {
-                _context2.next = 15;
+                _context3.next = 15;
                 break;
               }
 
-              _context2.prev = 1;
-              _context2.next = 4;
+              _context3.prev = 1;
+              _context3.next = 4;
               return onValidateForm();
 
             case 4:
-              taf = _context2.sent;
-              _context2.next = 7;
+              taf = _context3.sent;
+              _context3.next = 7;
               return postTaf({
                 taf: taf,
                 changeStatusTo: fromActionToStatus(tafActionToDraftAction(tafAction))
@@ -5508,19 +5826,19 @@ var TafLayout = function TafLayout(_ref) {
 
             case 7:
               action(value);
-              _context2.next = 13;
+              _context3.next = 13;
               break;
 
             case 10:
-              _context2.prev = 10;
-              _context2.t0 = _context2["catch"](1);
+              _context3.prev = 10;
+              _context3.t0 = _context3["catch"](1);
               confirmDialog(CONFIRM_DIALOG_OPTIONS).then(function () {
                 action(value);
                 setError(null);
               });
 
             case 13:
-              _context2.next = 17;
+              _context3.next = 17;
               break;
 
             case 15:
@@ -5529,10 +5847,10 @@ var TafLayout = function TafLayout(_ref) {
 
             case 17:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2, null, [[1, 10]]);
+      }, _callee3, null, [[1, 10]]);
     }));
   }
 
@@ -5565,7 +5883,8 @@ var TafLayout = function TafLayout(_ref) {
     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(postError);
+    var cancelErrorTimeout = postError && postError.type === 'CANCELLED' ? setTimeout(function () {
       setError(null);
     }, 10000) : null;
     return function () {
@@ -5573,7 +5892,10 @@ var TafLayout = function TafLayout(_ref) {
         clearTimeout(cancelErrorTimeout);
       }
     };
-  }, [error, setError]);
+  }, [postError]);
+  React__default.useEffect(function () {
+    setError(patchError);
+  }, [patchError]);
 
   if (!tafList) {
     return null;
@@ -5619,6 +5941,13 @@ var TafLayout = function TafLayout(_ref) {
     tafFromBackend: lastCurrentTaf,
     timeSlot: timeSlot,
     onChangeTimeSlot: onChangeTimeSlot
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 3
+  }, lastUpdateTime && /*#__PURE__*/React__default.createElement(LastUpdateTime, {
+    lastUpdateTime: lastUpdateTime,
+    onUpdateTaf: onUpdateTaf
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     flexGrow: 1,
@@ -5668,6 +5997,7 @@ var TafLayout = function TafLayout(_ref) {
       isFormDisabled: isFormDisabled,
       setIsFormDisabled: setIsFormDisabled,
       postTaf: postTaf,
+      patchTaf: patchTaf,
       isLoading: isLoading,
       error: error
     });
@@ -5709,41 +6039,78 @@ var TafWrapper = function TafWrapper(_a) {
   }, children)));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
+var getCurrentDate = function getCurrentDate() {
+  return moment.utc().format('HH:mm');
+};
 
 var TafModule = function TafModule() {
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
 
-  var _useApi = useApi(api.getTafList),
-      getTafListError = _useApi.error,
-      isLoading = _useApi.isLoading,
-      tafList = _useApi.result,
-      fetchNewTafList = _useApi.fetchApiData;
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      tafList = _React$useState2[0],
+      setTafList = _React$useState2[1];
 
-  usePoller([tafList, getTafListError], function () {
-    return fetchNewTafList({});
-  });
+  var _React$useState3 = React.useState(true),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isLoading = _React$useState4[0],
+      setIsLoading = _React$useState4[1];
+
+  var _React$useState5 = React.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      getTafListError = _React$useState6[0],
+      setError = _React$useState6[1];
+
+  var _React$useState7 = React.useState(),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      lastUpdateTime = _React$useState8[0],
+      setLastUpdateTime = _React$useState8[1];
+
+  var fetchNewTafList = function fetchNewTafList() {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var result;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setIsLoading(true);
+              setError(null);
+              _context.prev = 2;
+              _context.next = 5;
+              return api.getTafList();
+
+            case 5:
+              result = _context.sent;
+              setTafList(result.data);
+              setIsLoading(false);
+              setLastUpdateTime(getCurrentDate());
+              _context.next = 15;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](2);
+              setError(_context.t0);
+              setIsLoading(false);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[2, 11]]);
+    }));
+  };
 
-  var onPostTaf = function onPostTaf() {
-    fetchNewTafList({});
+  var onUpdateTaf = function onUpdateTaf() {
+    fetchNewTafList();
   };
 
+  React.useEffect(function () {
+    fetchNewTafList(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  usePoller([tafList, getTafListError], fetchNewTafList);
   var hasTafListError = getTafListError !== null;
   return /*#__PURE__*/React.createElement(Box, {
     component: "div",
@@ -5768,7 +6135,8 @@ var TafModule = function TafModule() {
     }
   }), /*#__PURE__*/React.createElement(TafLayout, {
     tafList: tafList,
-    onPostTaf: onPostTaf
+    onUpdateTaf: onUpdateTaf,
+    lastUpdateTime: lastUpdateTime
   }));
 };
 
@@ -5790,10 +6158,32 @@ var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, a
       return axiosInstance.post.apply(axiosInstance, ['/taf2tac'].concat([Object.assign({}, tafData)].concat(_toConsumableArray(signal ? [{
         signal: signal
       }] : []))));
+    },
+    patchTaf: function patchTaf(formData) {
+      return axiosInstance.patch('/taf', Object.assign({}, formData));
     }
   };
 };
 
+/* *
+ * 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 MOCK_USERNAME = 'user.name';
+
 var currentDate = moment.utc().format('YYYY-MM-DD');
 var tomorrowDate = moment.utc().add(1, 'day').format('YYYY-MM-DD');
 var airportPeriod = 6;
@@ -5832,6 +6222,7 @@ var _validDateRange5 = validDateRange(moment.utc().add(-6, 'hours'), airportPeri
 var fakeTafList = [{
   creationDate: upcomingValidDateStart,
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: MOCK_USERNAME,
   taf: {
     uuid: '5f9583fjdf0f337925',
     baseTime: upcomingValidDateStart,
@@ -5851,6 +6242,7 @@ var fakeTafList = [{
 }, {
   creationDate: upcomingValidDateStart,
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: null,
   taf: {
     uuid: '5f9583fjd111137925',
     baseTime: upcomingValidDateStart,
@@ -5876,6 +6268,7 @@ var fakeTafList = [{
 }, {
   creationDate: upcomingValidDateStart,
   canbe: ['CANCELLED', 'AMENDED', 'DISCARDED'],
+  editor: null,
   taf: {
     uuid: '754905485',
     baseTime: upcomingValidDateStart,
@@ -5933,6 +6326,7 @@ var fakeTafList = [{
 }, {
   creationDate: upcomingValidDateStart,
   canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  editor: MOCK_USERNAME,
   taf: {
     uuid: '43545345345',
     issueDate: upcomingValidDateStart,
@@ -6003,6 +6397,7 @@ var fakeTafList = [{
 }, {
   creationDate: upcomingValidDateStart,
   canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  editor: null,
   taf: {
     uuid: '5f9583fjdf45ff4330f337925',
     issueDate: upcomingValidDateStart,
@@ -6058,6 +6453,7 @@ var fakeTafList = [{
 }, {
   creationDate: upcomingValidDateStart,
   canbe: ['AMENDED'],
+  editor: null,
   taf: {
     uuid: '5464565464',
     previousId: '5445fghrfg3546456',
@@ -6099,6 +6495,7 @@ var fakeTafList = [{
 }, {
   creationDate: upcomingValidDateStart,
   canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  editor: 'max.jansen',
   taf: {
     uuid: 'gh56734fghfgh',
     previousId: '8574jnf93475',
@@ -6140,6 +6537,7 @@ var fakeTafList = [{
 }, {
   creationDate: currentValidDateStart,
   canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  editor: null,
   taf: {
     uuid: 'giskdj09845872039',
     issueDate: currentValidDateStart,
@@ -6179,6 +6577,7 @@ var fakeTafList = [{
 }, {
   creationDate: currentValidDateStart,
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: null,
   taf: {
     uuid: 'ghskdj09845872039',
     baseTime: currentValidDateStart,
@@ -6198,6 +6597,7 @@ var fakeTafList = [{
 }, {
   creationDate: currentValidDateStart,
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: null,
   taf: {
     uuid: 'ghskdj09845872040',
     issueDate: currentValidDateStart,
@@ -6218,6 +6618,7 @@ var fakeTafList = [{
 }, {
   creationDate: "".concat(currentDate, "T06:00:00Z"),
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: null,
   taf: {
     uuid: 'ghskdj09845872041',
     issueDate: currentValidDateStart,
@@ -6238,6 +6639,7 @@ var fakeTafList = [{
 }, {
   creationDate: "".concat(currentDate, "T06:00:00Z"),
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: null,
   taf: {
     uuid: 'ghskdj09845872042',
     issueDate: currentValidDateStart,
@@ -6258,6 +6660,7 @@ var fakeTafList = [{
 }, {
   creationDate: "".concat(currentDate, "T06:00:00Z"),
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: null,
   taf: {
     uuid: 'ghskdj09845872043',
     issueDate: currentValidDateStart,
@@ -6278,6 +6681,7 @@ var fakeTafList = [{
 }, {
   creationDate: expiredValidDateStart,
   canbe: [],
+  editor: null,
   taf: {
     uuid: 'sdkjhsdf90845890',
     issueDate: expiredValidDateStart,
@@ -6342,6 +6746,7 @@ var fakeTafList = [{
 var fakeNewTaf = {
   creationDate: "".concat(currentDate, "T12:00:00Z"),
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: null,
   taf: {
     type: 'NORMAL',
     messageType: 'ORG',
@@ -6362,6 +6767,7 @@ var fakeNewTaf = {
 ({
   creationDate: "2022-01-06T12:00:00Z",
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: MOCK_USERNAME,
   taf: Object.assign(Object.assign({}, fakeNewTaf.taf), {
     baseTime: "2022-01-06T12:00:00Z",
     validDateStart: "2022-01-06T12:00:00Z",
@@ -6377,6 +6783,7 @@ var fakeNewTaf = {
 var fakePublishedTaf = {
   creationDate: "".concat(currentDate, "T12:00:00Z"),
   canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  editor: null,
   taf: {
     uuid: 'slsdkjg-023895',
     issueDate: "".concat(currentDate, "T12:00:00Z"),
@@ -6452,7 +6859,9 @@ var fakePublishedTaf = {
 ({
   creationDate: "2022-01-06T12:00:00Z",
   canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+  editor: MOCK_USERNAME,
   taf: Object.assign(Object.assign({}, fakePublishedTaf.taf), {
+    uuid: 'sowi3u4o-lsdjflsk',
     location: 'EHGG',
     baseTime: "2022-01-06T12:00:00Z",
     issueDate: "2022-01-06T12:00:00Z",
@@ -6517,6 +6926,7 @@ var fakePublishedTaf = {
 var fakeDraftTaf = {
   creationDate: "".concat(currentDate, "T18:00:00Z"),
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: null,
   taf: {
     uuid: '5f9583fjdf0f337925',
     baseTime: "".concat(currentDate, "T18:00:00Z"),
@@ -6555,6 +6965,7 @@ var fakeDraftTaf = {
 ({
   creationDate: "2022-01-06T18:00:00Z",
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: MOCK_USERNAME,
   taf: Object.assign(Object.assign({}, fakeDraftTaf.taf), {
     baseTime: "2022-01-06T18:00:00Z",
     validDateStart: "2022-01-06T18:00:00Z",
@@ -6570,6 +6981,7 @@ var fakeDraftTaf = {
 var fakeDraftAmendmentTaf = {
   creationDate: "".concat(currentDate, "T14:00:00Z"),
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: null,
   taf: {
     uuid: '954905487',
     previousId: '5f9583fjdf45ff4330f337925',
@@ -6630,6 +7042,7 @@ var fakeDraftAmendmentTaf = {
 ({
   creationDate: "2022-01-06T14:00:00Z",
   canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+  editor: null,
   taf: Object.assign(Object.assign({}, fakeDraftAmendmentTaf.taf), {
     location: 'EHRD',
     issueDate: "2022-01-06T14:00:00Z",
@@ -6650,6 +7063,7 @@ var fakeDraftAmendmentTaf = {
 var fakeAmendmentTaf = {
   creationDate: "".concat(currentDate, "T14:00:00Z"),
   canbe: ['CANCELLED', 'CORRECTED', 'AMENDED'],
+  editor: null,
   taf: {
     uuid: '754905486',
     previousId: '5f9583fjdf45ff4330f337925',
@@ -6693,6 +7107,7 @@ var fakeAmendmentTaf = {
 ({
   creationDate: "2022-01-06T14:00:00Z",
   canbe: ['CANCELLED', 'CORRECTED', 'AMENDED'],
+  editor: MOCK_USERNAME,
   taf: Object.assign(Object.assign({}, fakeAmendmentTaf.taf), {
     uuid: '7549058980',
     issueDate: "2022-01-06T14:00:00Z",
@@ -6727,6 +7142,14 @@ var fakePromise = function fakePromise(withRandomError) {
   });
 };
 
+var fakeUpdatedTafList = _toConsumableArray(fakeTafList);
+
+var setFakeUpdatedList = function setFakeUpdatedList(newList) {
+  fakeUpdatedTafList = newList;
+};
+var getFakeUpdatedList = function getFakeUpdatedList() {
+  return fakeUpdatedTafList;
+};
 var fakeAxiosInstance = {
   // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
   get: function get(_url, _params) {
@@ -6735,6 +7158,10 @@ var fakeAxiosInstance = {
   // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
   post: function post(_url, _params, _signal) {
     return fakePromise(false, _signal);
+  },
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
+  patch: function patch(_url, _params, _signal) {
+    return fakePromise(false, _signal);
   }
 };
 var createApi = function createApi() {
@@ -6744,7 +7171,7 @@ var createApi = function createApi() {
       console.log('Retrieving new TAF list');
       return fakeAxiosInstance.get('/taflist').then(function () {
         return {
-          data: _toConsumableArray(fakeTafList)
+          data: getFakeUpdatedList()
         };
       });
     },
@@ -6763,6 +7190,21 @@ var createApi = function createApi() {
           data: fakeTafTac
         };
       });
+    },
+    patchTaf: function patchTaf(_patchTaf) {
+      var updatedList = getFakeUpdatedList().map(function (tafFromBackend) {
+        if (tafFromBackend.taf.uuid === _patchTaf.taf.uuid) {
+          return Object.assign(Object.assign({}, tafFromBackend), {
+            editor: _patchTaf.editor
+          });
+        }
+
+        return tafFromBackend;
+      });
+      setFakeUpdatedList(updatedList); // eslint-disable-next-line no-console
+
+      console.log("The new editor of the taf will be ".concat(_patchTaf.editor || 'empty'));
+      return fakeAxiosInstance.patch('/taf', _patchTaf);
     }
   };
 };