From 89924c5e615e63e6f0af9b741205c729e6055ee9 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Thu, 14 Nov 2013 13:47:10 -0500
Subject: [PATCH] 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                                 |  2 ++
 .../static/coffee/src/discussion/utils.coffee | 33 +++++++++++++++++++
 lms/static/sass/shared/_modal.scss            |  7 +++-
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index d9c80a04ff..69522b0584 100644
--- a/CHANGELOG.rst
+++ b/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:
diff --git a/common/static/coffee/src/discussion/utils.coffee b/common/static/coffee/src/discussion/utils.coffee
index fd31188774..73cfde8a06 100644
--- a/common/static/coffee/src/discussion/utils.coffee
+++ b/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")
diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss
index fad5585eaf..07c9f3c61c 100644
--- a/lms/static/sass/shared/_modal.scss
+++ b/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;