Use button instead of an icon to subscribe/unsubscribe to labels

1 files changed, 42 insertions, 0 deletions

diff --git a/app/assets/javascripts/label_subscription.js.es6 b/app/assets/javascripts/label_subscription.js.es6
new file mode 100644
index 00000000000..26bb8419f6b
--- /dev/null
+++ b/app/assets/javascripts/label_subscription.js.es6
@@ -0,0 +1,42 @@
+/* eslint-disable */
+(function(global) {
+  class LabelSubscription {
+    constructor(container) {
+      $(container).on('click', '.js-subscribe-button', this.toggleSubscription);
+    }
+
+    toggleSubscription(event) {
+      event.preventDefault();
+
+      const $btn = $(event.currentTarget);
+      const $span = $btn.find('span');
+      const url = $btn.attr('data-url');
+      const status = $btn.attr('data-status');
+
+      $btn.addClass('disabled');
+      $span.toggleClass('hidden');
+
+      $.ajax({
+        type: 'POST',
+        url: url
+      }).done(() => {
+        let newStatus, newAction;
+
+        if (status === 'subscribed') {
+          [newStatus, newAction] = ['unsubscribed', 'Subscribe'];
+        } else {
+          [newStatus, newAction] = ['subscribed', 'Unsubscribe'];
+        }
+
+        $span.text(newAction);
+        $span.toggleClass('hidden');
+        $btn.removeClass('disabled');
+        $btn.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle');
+        $btn.attr('data-status', newStatus);
+      });
+    }
+  }
+
+  global.LabelSubscription = LabelSubscription;
+
+})(window.gl || (window.gl = {}));