Addressed feedbackclearer-subscribe

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

3 files changed, 31 insertions, 24 deletions

diff --git a/app/assets/javascripts/subscription.js.coffee b/app/assets/javascripts/subscription.js.coffee
index ffb9df30ddf..7f8f70cf80f 100644
--- a/app/assets/javascripts/subscription.js.coffee
+++ b/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'
+    @subscribeButton
+      .off('click')
+      .on('click', @toggleSubscription)
 
-  toggleSubscription: (e) =>
-    btn = $(e.currentTarget)
+  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()
diff --git a/app/views/projects/labels/_label.html.haml b/app/views/projects/labels/_label.html.haml
index 294fec422c5..befa47ca641 100644
--- a/app/views/projects/labels/_label.html.haml
+++ b/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
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index cbfd4c1d237..7bfc22d0f6d 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/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)