Merge lp:~gary/launchpad/bug750561-2 into lp:launchpad/db-devel

[Gary Poster]

[r=benji][bug=750561] add a spinner for when you mute a structural subscription.

This branch adds an activity indicator (spinner) to the team structural subscription per-person "mute" UI. It is a follow-on to https://code.launchpad.net/~gary/launchpad/bug750561/+merge/57195 which adds spinners for adding, editing, and deleting. This is done separately because the muting functionality is only in db-devel.

This branch has a dependency on that previous branch. I merged it into db-devel and resolved conflicts in order to give this MP a clean diff.

In the tests, as with the previous branch, I cleaned up and normalized our use of "simulate" as part of the work.

To look at the effects, follow these instructions http://pastebin.ubuntu.com/592749/ and then add a subscription for a team. The new subscription will allow you to change whether you personally receive these messages. Toggling this value will briefly show the spinner.

To QA, make sure you are in a team that has access to the feature-flagged UI (or simply be happy that it is behind feature flags, and move on).

[Benji York (benji)]

This branch looks good.

Unlike some of the other string constants in this file, I like the use
of descriptive names for the muted and unmuted CSS classes.

review: Approve (code)

=== modified file 'lib/lp/registry/javascript/structural-subscription.js'
--- lib/lp/registry/javascript/structural-subscription.js	2011-04-11 18:47:29 +0000
+++ lib/lp/registry/javascript/structural-subscription.js	2011-04-11 18:47:30 +0000
@@ -18,7 +18,9 @@
     ADDED_OR_CHANGED = 'added-or-changed',
     ADVANCED_FILTER = 'advanced-filter',
     MATCH_ALL = 'match-all',
-    MATCH_ANY = 'match-any'
+    MATCH_ANY = 'match-any',
+    MUTE_ICON_CLASS = 'no',
+    UNMUTE_ICON_CLASS = 'yes'
     ;
 
 var add_subscription_overlay;
@@ -1137,9 +1139,19 @@
  */
 function make_mute_handler(filter_info, node){
     var error_handler = new Y.lp.client.ErrorHandler();
+    var mute_node = node.one('a.mute-subscription');
+    var icon_class = function () {
+        if (filter_info.is_muted) {
+            return UNMUTE_ICON_CLASS;
+        } else {
+            return MUTE_ICON_CLASS;
+        }
+    }
     error_handler.showError = function(error_msg) {
-      var mute_node = node.one('a.mute-subscription');
-      Y.lp.app.errors.display_error(mute_node, error_msg);
+        Y.lp.app.errors.display_error(mute_node, error_msg);
+    };
+    error_handler.clearProgressUI = function () {
+        mute_node.replaceClass('spinner', icon_class());
     };
     return function() {
         var fname;
@@ -1150,6 +1162,7 @@
         }
         var config = {
             on: {success: function(){
+                    mute_node.removeClass('spinner');
                     if (fname === 'mute') {
                         filter_info.is_muted = true;
                     } else {
@@ -1160,6 +1173,7 @@
                  failure: error_handler.getFailureHandler()
                 }
             };
+        mute_node.replaceClass(icon_class(), 'spinner');
         namespace.lp_client.named_post(filter_info.filter.self_link,
             fname, config);
     };
@@ -1219,12 +1233,12 @@
     var description = node.one('.filter-description');
     if (muted) {
         control.set('text', 'Receive emails from this subscription');
-        control.replaceClass('no', 'yes');
+        control.replaceClass(MUTE_ICON_CLASS, UNMUTE_ICON_CLASS);
         label.setStyle('display', null);
         description.setStyle('color', '#bbb');
     } else {
         control.set('text', 'Do not receive emails from this subscription');
-        control.replaceClass('yes', 'no');
+        control.replaceClass(UNMUTE_ICON_CLASS, MUTE_ICON_CLASS);
         label.setStyle('display', 'none');
         description.setStyle('color', null);
     }

=== modified file 'lib/lp/registry/javascript/tests/test_structural_subscription.js'
--- lib/lp/registry/javascript/tests/test_structural_subscription.js	2011-04-11 18:47:29 +0000
+++ lib/lp/registry/javascript/tests/test_structural_subscription.js	2011-04-11 18:47:30 +0000
@@ -1421,7 +1421,7 @@
             var mute_label_node = filter_node.one('.mute-label');
             var mute_link = filter_node.one('a.mute-subscription');
             this.lp_client.named_post.args = []
-            Y.Event.simulate(Y.Node.getDOMNode(mute_link), 'click');
+            mute_link.simulate('click');
             Assert.areEqual(this.lp_client.received[0][0], 'named_post');
             Assert.areEqual(
                 this.lp_client.received[0][1][0],
@@ -1443,7 +1443,7 @@
             var mute_label_node = filter_node.one('.mute-label');
             var mute_link = filter_node.one('a.mute-subscription');
             this.lp_client.named_post.args = []
-            Y.Event.simulate(Y.Node.getDOMNode(mute_link), 'click');
+            mute_link.simulate('click');
             Assert.areEqual(this.lp_client.received[0][0], 'named_post');
             Assert.areEqual(
                 this.lp_client.received[0][1][0],
@@ -1452,6 +1452,45 @@
                 this.lp_client.received[0][1][1], 'unmute');
             Assert.areEqual(mute_label_node.getStyle('display'), 'none');
             Assert.isTrue(mute_link.hasClass('no'));
+        },
+
+        test_mute_spinner: function () {
+            // The mute link shows a spinner while a mute is requested.
+            // When the mute succeeds, the spinner is removed.
+            module.setup_bug_subscriptions(
+                {content_box: content_box_id,
+                 lp_client: this.lp_client});
+            var listing = this.test_node.one(subscription_listing_id);
+            var filter_node = listing.one('#subscription-filter-0');
+            var mute_link = filter_node.one('a.mute-subscription');
+            this.lp_client.named_post.args = []
+            this.lp_client.named_post.halt = true
+            mute_link.simulate('click');
+            Assert.isTrue(mute_link.hasClass('spinner'));
+            Assert.isFalse(mute_link.hasClass('no'));
+            this.lp_client.named_post.resume();
+            Assert.isTrue(mute_link.hasClass('yes'));
+            Assert.isFalse(mute_link.hasClass('spinner'));
+        },
+
+        test_mute_spinner_fail: function () {
+            // The mute link shows a spinner while a mute is requested.
+            // If the mute fails, the spinner is removed.
+            module.setup_bug_subscriptions(
+                {content_box: content_box_id,
+                 lp_client: this.lp_client});
+            var listing = this.test_node.one(subscription_listing_id);
+            var filter_node = listing.one('#subscription-filter-0');
+            var mute_link = filter_node.one('a.mute-subscription');
+            this.lp_client.named_post.fail = true
+            this.lp_client.named_post.args = [true, true];
+            this.lp_client.named_post.halt = true
+            mute_link.simulate('click');
+            Assert.isTrue(mute_link.hasClass('spinner'));
+            Assert.isFalse(mute_link.hasClass('no'));
+            this.lp_client.named_post.resume();
+            Assert.isTrue(mute_link.hasClass('no'));
+            Assert.isFalse(mute_link.hasClass('spinner'));
         }
 
     }));