Addressed feedback

Removed HTML from JS and instead changes the text that is passed from the element

app/assets/javascripts/subscription.js.coffee

@@ -3,30 +3,37 @@ class @Subscription
     $container = $(container)
     @url = $container.attr('data-url')
     @subscribeButton = $container.find('.js-subscribe-button')
-    @subscribeButton.off('click').click(@toggleSubscription)
-    @subscribedHTML = '<i class="fa fa-volume-up"></i> Unsubscribe'
-    @unsubscribedHTML = '<i class="fa fa-volume-off"></i> Subscribe'
-  toggleSubscription: (e) =>
-    btn = $(e.currentTarget)
+    @subscribeButton
+      .off('click')
+      .on('click', @toggleSubscription)
+  toggleSubscription: =>
     subscribed = @subscribeButton.attr('data-subscribed')?
-    btn
+    @subscribeButton
       .addClass('disabled')
-      .prop('disabled','disabled')
+      .prop('disabled', 'disabled')
     $.post @url, =>
       subscribed = not subscribed
-      btn
+      @subscribeButton
         .removeClass('disabled')
-        .prop('disabled', false);
+        .prop('disabled', false)
+        .find('.fa')
+        .toggleClass 'fa-volume-up fa-volume-off'
+
       if subscribed
-        @subscribeButton.attr('data-subscribed',true)
-        btn.html(@subscribedHTML)
-        btn.closest('div').find('.negation').hide()
-        return
+        @subscribeButton
+          .attr('data-subscribed', true)
+          .find('.subscribe-text')
+          .text(@subscribeButton.data("unsubscribe-text"))
+          .closest('.subscription')
+          .find('.negation')
+          .hide()
       else
-        @subscribeButton.removeAttr('data-subscribed', subscribed)
-        btn.html(@unsubscribedHTML)
-        btn.closest('div').find('.negation').show()
-        return
-    return
+        @subscribeButton
+          .removeAttr('data-subscribed', subscribed)
+          .find('.subscribe-text')
+          .text(@subscribeButton.data("subscribe-text"))
+          .closest('.subscription')
+          .find('.negation')
+          .show()

app/views/projects/labels/_label.html.haml

@@ -13,8 +13,8 @@
       .label-subscription{data: {url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label)}}
         .subscription-status{data: {status: label_subscription_status(label)}}
-        %button.js-subscribe-button.label-subscribe-button.btn.action-buttons{ type: "button", data: { toggle: "tooltip" } }
-          %span= label_subscription_toggle_button_text(label)
+        %button.js-subscribe-button.label-subscribe-button.btn.action-buttons{ type: "button", data: { toggle: "tooltip", subscribed: label.subscribed?(current_user), subscribe_text: "Subscribe", unsubscribe_text: "Unsubscribe" } }
+          %span.subscribe-text= label_subscription_toggle_button_text(label)
     - if can? current_user, :admin_label, @project
       = link_to edit_namespace_project_label_path(@project.namespace, @project, label), title: "Edit", class: 'btn action-buttons', data: {toggle: "tooltip"} do

app/views/shared/issuable/_sidebar.html.haml

@@ -147,12 +147,12 @@
             = icon('rss')
           .title.hide-collapsed
             Notifications
-          %button.btn.btn-block.btn-gray.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button", data: { subscribed: subscribed } }
+          %button.btn.btn-block.btn-gray.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button", data: { subscribed: subscribed, subscribe_text: "Subscribe", unsubscribe_text: "Unsubscribe" } }
             = icon(subscribed ? 'volume-up' : 'volume-off')
-            = subscribed ? 'Unsubscribe' : 'Subscribe'
+            %span.subscribe-text= subscribed ? 'Unsubscribe' : 'Subscribe'
           .subscription-status.hide-collapsed
-            You are 
-            %span.negation{ style: ("display:none;" if subscribed) } not 
+            You are
+            %span.negation{ style: ("display:none;" if subscribed) } not
             subscribed
       - project_ref = cross_project_reference(@project, issuable)