Alert users when forum AJAX requests fail

AJAX requests on forums pages occasionally fail (usually when a request
to the comments service times out), but the user is not made aware of
the failure. This manifests as either the system not appearing to store
state (e.g. if an attempt to flag a post fails) or something taking
forever to load. Now, a modal will pop up to alert the user that a
request has failed and instruct them to reload the page.

In the longer term, we should fix each user gesture that results in an
AJAX call to gracefully handle a failure by resetting the state of the
world appropriately and aleritng the user.

JIRA: FOR-37

CHANGELOG.rst

@@ -5,6 +5,8 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+LMS: Add a user-visible alert modal when a forums AJAX request fails.
+
 Blades: Add template for checkboxes response to studio. BLD-193.
 
 Blades: Video player:

common/static/coffee/src/discussion/utils.coffee

@@ -87,6 +87,32 @@ class @DiscussionUtil
       "notifications_status" : "/notification_prefs/status"
     }[name]
 
+  @discussionAlert: (header, body) ->
+    if $("#discussion-alert").length == 0
+      alertDiv = $("<div class='modal' role='alertdialog' id='discussion-alert' aria-describedby='discussion-alert-message'/>").css("display", "none")
+      alertDiv.html(
+        "<div class='inner-wrapper discussion-alert-wrapper'>" +
+        "  <button class='close-modal dismiss' aria-hidden='true'>&#10005;</button>" +
+        "  <header><h2/><hr/></header>" +
+        "  <p id='discussion-alert-message'/>" +
+        "  <hr/>" +
+        "  <button class='dismiss'>OK</button>" +
+        "</div>"
+      )
+      # Capture focus
+      alertDiv.find("button").keydown(
+        (event) ->
+          if event.which == 9 # Tab
+            event.preventDefault()
+      )
+      alertTrigger = $("<a href='#discussion-alert' id='discussion-alert-trigger'/>").css("display", "none")
+      alertTrigger.leanModal({closeButton: "#discussion-alert .dismiss", overlay: 1, top: 200})
+      $("body").append(alertDiv).append(alertTrigger)
+    $("#discussion-alert header h2").html(header)
+    $("#discussion-alert p").html(body)
+    $("#discussion-alert-trigger").click()
+    $("#discussion-alert button").focus()
+
   @safeAjax: (params) ->
     $elem = params.$elem
     if $elem and $elem.attr("disabled")
@@ -100,6 +126,13 @@ class @DiscussionUtil
           params["loadingCallback"].apply(params["$loading"])
         else
           params["$loading"].loading()
+    if !params["error"]
+      params["error"] = =>
+        @discussionAlert(
+          "Sorry",
+          "We had some trouble processing your request. Please ensure you" +
+          " have copied any unsaved work and then reload the page."
+        )
     request = $.ajax(params).always ->
       if $elem
         $elem.removeAttr("disabled")

lms/static/sass/shared/_modal.scss

@@ -295,7 +295,7 @@
     }
   }
 
-  #help_wrapper {
+  #help_wrapper, .discussion-alert-wrapper {
     padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
 
     header {
@@ -307,6 +307,11 @@
 
   }
 
+  .discussion-alert-wrapper button {
+    display: block;
+    margin: 0 auto;
+  }
+
   .tip {
     font-size: 12px;
     display: block;