ENH Gracefully handle AJAX failures

client/lang/en.js

@@ -14,6 +14,13 @@ if (typeof(ss) === 'undefined' || typeof(ss.i18n) === 'undefined') {
     "LinkField.ADD_LINK": "Add Link",
     "LinkField.ARCHIVE": "Archive",
     "LinkField.DELETE": "Delete",
+    "LinkField.LINK_DRAFT_TITLE": "Link has draft changes",
+    "LinkField.LINK_DRAFT_LABEL": "Draft",
+    "LinkField.LINK_MODIFIED_TITLE": "Link has unpublished changes",
+    "LinkField.LINK_MODIFIED_LABEL": "Modified",
+    "LinkField.CANNOT_CREATE_LINK": "Cannot create link",
+    "LinkField.FAILED_TO_LOAD_LINKS": "Failed to load links",
+    "LinkField.FAILED_TO_SAVE_LINK": "Failed to save link",
     "LinkField.SAVE_RECORD_FIRST": "Cannot add links until the record has been saved"
   });
 }

client/lang/src/en.json

@@ -12,5 +12,7 @@
     "LinkField.LINK_MODIFIED_TITLE": "Link has unpublished changes",
     "LinkField.LINK_MODIFIED_LABEL": "Modified",
     "LinkField.CANNOT_CREATE_LINK": "Cannot create link",
+    "LinkField.FAILED_TO_LOAD_LINKS": "Failed to load links",
+    "LinkField.FAILED_TO_SAVE_LINK": "Failed to save link",
     "LinkField.SAVE_RECORD_FIRST": "Cannot add links until the record has been saved"
 }

client/src/components/LinkField/LinkField.js

@@ -70,6 +70,9 @@ const LinkField = ({
         .then(response => response.json())
         .then(responseJson => {
           setData(responseJson);
+        })
+        .catch(() => {
+          actions.toasts.error(i18n._t('LinkField.FAILED_TO_LOAD_LINKS', 'Failed to load links'))
         });
     }
   }, [editingID, value && value.length]);
@@ -99,12 +102,7 @@ const LinkField = ({
       onChange(isMulti ? ids : ids[0]);
 
       // success toast
-      actions.toasts.success(
-        i18n._t(
-          'LinkField.SAVE_SUCCESS',
-          'Saved link',
-        )
-      );
+      actions.toasts.success(i18n._t('LinkField.SAVE_SUCCESS', 'Saved link'));
   }
 
   /**
@@ -174,7 +172,7 @@ const LinkField = ({
   const renderModal = !saveRecordFirst && Boolean(editingID);
   const saveRecordFirstText = i18n._t('LinkField.SAVE_RECORD_FIRST', 'Cannot add links until the record has been saved');
 
-  return <LinkFieldContext.Provider value={{ ownerID, ownerClass, ownerRelation }}>
+  return <LinkFieldContext.Provider value={{ ownerID, ownerClass, ownerRelation, actions }}>
     { saveRecordFirst && <div className="link-field__save-record-first">{saveRecordFirstText}</div>}
     { renderPicker && <LinkPicker
         onModalSuccess={onModalSuccess}

client/src/components/LinkModal/LinkModal.js

@@ -23,6 +23,8 @@ const buildSchemaUrl = (typeKey, linkID) => {
 }
 
 const LinkModal = ({ typeTitle, typeKey, linkID = 0, isOpen, onSuccess, onClosed }) => {
+  const { actions } = useContext(LinkFieldContext);
+
   if (!typeKey) {
     return false;
   }
@@ -31,7 +33,15 @@ const LinkModal = ({ typeTitle, typeKey, linkID = 0, isOpen, onSuccess, onClosed
    * Call back used by LinkModal after the form has been submitted and the response has been received
    */
   const onSubmit = async (modalData, action, submitFn) => {
-    const formSchema = await submitFn();
+    let formSchema = null;
+    try {
+      formSchema = await submitFn();
+    } catch (error) {
+      actions.toasts.error(i18n._t('LinkField.FAILED_TO_SAVE_LINK', 'Failed to save link'))
+      // Intentionally using Promise.resolve() instead of Promise.reject() as existing code in FormBuilder.js
+      // will raise console warnings if we use Promise.reject(). From a UX point of view it makes no difference.
+      return Promise.resolve();
+    }
 
     // slightly annoyingly, on validation error formSchema at this point will not have an errors node
     // instead it will have the original formSchema id used for the GET request to get the formSchema i.e.

client/src/containers/LinkModalContainer.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 /**
  * Contains the LinkModal and determines which modal component to render based on the link type.
  */
-const LinkModalContainer = ({ types, typeKey, linkID = 0, isOpen, onSuccess, onClosed}) => {
+const LinkModalContainer = ({ types, typeKey, linkID = 0, isOpen, onSuccess, onClosed }) => {
   if (!typeKey) {
     return false;
   }