Merge pull request #1674 from edx/gprice/forum-500-alert

Alert users when forum AJAX requests fail 

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")
@@ -110,24 +143,6 @@ class @DiscussionUtil
           params["$loading"].loaded()
     return request
 
-  @get: ($elem, url, data, success) ->
-    @safeAjax
-      $elem: $elem
-      url: url
-      type: "GET"
-      dataType: "json"
-      data: data
-      success: success
-
-  @post: ($elem, url, data, success) ->
-    @safeAjax
-      $elem: $elem
-      url: url
-      type: "POST"
-      dataType: "json"
-      data: data
-      success: success
-
   @bindLocalEvents: ($local, eventsHandler) ->
     for eventSelector, handler of eventsHandler
       [event, selector] = eventSelector.split(' ')
@@ -202,38 +217,6 @@ class @DiscussionUtil
     @getWmdInput($content, $local, cls_identifier).val(text)
     @getWmdEditor($content, $local, cls_identifier).refreshPreview()
 
-  @subscriptionLink: (type, id) ->
-    followLink = ->
-      @generateDiscussionLink("discussion-follow-#{type}", "Follow", handleFollow)
-
-    unfollowLink = ->
-      @generateDiscussionLink("discussion-unfollow-#{type}", "Unfollow", handleUnfollow)
-
-    handleFollow = (elem) ->
-      @safeAjax
-        $elem: $(elem)
-        url: @urlFor("follow_#{type}", id)
-        type: "POST"
-        success: (response, textStatus) ->
-          if textStatus == "success"
-            $(elem).replaceWith unfollowLink()
-        dataType: 'json'
-
-    handleUnfollow = (elem) ->
-      @safeAjax
-        $elem: $(elem)
-        url: @urlFor("unfollow_#{type}", id)
-        type: "POST"
-        success: (response, textStatus) ->
-          if textStatus == "success"
-            $(elem).replaceWith followLink()
-        dataType: 'json'
-
-    if @isSubscribed(id, type)
-        unfollowLink()
-    else
-      followLink()
-
   @processEachMathAndCode: (text, processor) ->
 
     codeArchive = []

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;