Merge pull request #9631 from edx/peter-fogg/teams-ajax-errors

Respond to AJAX errors in Teams UI.

lms/djangoapps/teams/static/teams/js/spec/teams_tab_factory_spec.js

@@ -4,8 +4,6 @@ define(['jquery', 'backbone', 'teams/js/teams_tab_factory',
         'use strict';
 
         describe("Teams Tab Factory", function() {
-            var teamsTab;
-
             var initializeTeamsTabFactory = function() {
                 TeamsTabFactory(TeamSpecHelpers.createMockContext());
             };
@@ -19,6 +17,11 @@ define(['jquery', 'backbone', 'teams/js/teams_tab_factory',
             });
 
             it('can render the "Teams" tab', function() {
+                // Hack to make sure the URL fragments from earlier
+                // tests don't interfere with Backbone routing by the
+                // teams tab view
+                document.location.hash = '';
+
                 initializeTeamsTabFactory();
                 expect($('.teams-content').text()).toContain('See all teams in your course, organized by topic');
             });

lms/djangoapps/teams/static/teams/js/spec/views/teams_tab_spec.js

@@ -39,9 +39,7 @@ define([
             spyOn($.fn, 'focus');
         });
 
-        afterEach(function () {
-            Backbone.history.stop();
-        });
+        afterEach(Backbone.history.stop);
 
         describe('Navigation', function () {
             it('displays and focuses an error message when trying to navigate to a nonexistent page', function () {
@@ -76,6 +74,24 @@ define([
                 expectError(teamsTabView, 'The team "no_such_team" could not be found.');
                 expectFocus(teamsTabView.$('.warning'));
             });
+
+            it('displays and focuses an error message when it receives a 401 AJAX response', function () {
+                var requests = AjaxHelpers.requests(this),
+                    teamsTabView = createTeamsTabView().render();
+                teamsTabView.router.navigate('topics/' + TeamSpecHelpers.testTopicID, {trigger: true});
+                AjaxHelpers.respondWithError(requests, 401);
+                expectError(teamsTabView, "Your request could not be completed. Reload the page and try again.");
+                expectFocus(teamsTabView.$('.warning'));
+            });
+
+            it('displays and focuses an error message when it receives a 500 AJAX response', function () {
+                var requests = AjaxHelpers.requests(this),
+                    teamsTabView = createTeamsTabView().render();
+                teamsTabView.router.navigate('topics/' + TeamSpecHelpers.testTopicID, {trigger: true});
+                AjaxHelpers.respondWithError(requests, 500);
+                expectError(teamsTabView, "Your request could not be completed due to a server problem. Reload the page and try again. If the issue persists, click the Help tab to report the problem.");
+                expectFocus(teamsTabView.$('.warning'));
+            });
         });
 
         describe('Discussion privileges', function () {

lms/djangoapps/teams/static/teams/js/teams_tab_factory.js

@@ -1,8 +1,7 @@
 ;(function (define) {
     'use strict';
-
-    define(['jquery', 'underscore', 'backbone', 'teams/js/views/teams_tab'],
-        function ($, _, Backbone, TeamsTabView) {
+    define(['jquery', 'teams/js/views/teams_tab'],
+        function ($, TeamsTabView) {
             return function (options) {
                 var teamsTab = new TeamsTabView({
                     el: $('.teams-content'),

lms/djangoapps/teams/static/teams/js/views/teams_tab.js

@@ -19,11 +19,12 @@
             'teams/js/views/topic_teams',
             'teams/js/views/edit_team',
             'teams/js/views/team_profile_header_actions',
+            'teams/js/views/team_utils',
             'text!teams/templates/teams_tab.underscore'],
         function (Backbone, _, gettext, SearchFieldView, HeaderView, HeaderModel, TabbedView,
                   TopicModel, TopicCollection, TeamModel, TeamCollection, TeamMembershipCollection,
                   TopicsView, TeamProfileView, MyTeamsView, TopicTeamsView, TeamEditView,
-                  TeamProfileHeaderActionsView, teamsTemplate) {
+                  TeamProfileHeaderActionsView, TeamUtils, teamsTemplate) {
             var TeamsHeaderModel = HeaderModel.extend({
                 initialize: function () {
                     _.extend(this.defaults, {nav_aria_label: gettext('teams')});
@@ -144,6 +145,15 @@
                 start: function() {
                     Backbone.history.start();
 
+                    $(document).ajaxError(function (event, xhr) {
+                        if (xhr.status === 401) {
+                            TeamUtils.showMessage(gettext("Your request could not be completed. Reload the page and try again."));
+                        }
+                        else if (xhr.status === 500) {
+                            TeamUtils.showMessage(gettext("Your request could not be completed due to a server problem. Reload the page and try again. If the issue persists, click the Help tab to report the problem."));
+                        }
+                    });
+
                     // Navigate to the default page if there is no history:
                     // 1. If the user belongs to at least one team, jump to the "My Teams" page
                     // 2. If not, then jump to the "Browse" page