Merge branch '24281-issue-merge-request-sidebar-subscribe-button-style-improvement' into 'master'

Remove the help text under the sidebar subscribe button and style it inline

## What does this MR do?

Remove the help text under the sidebar subscribe button and style it inline

## Are there points in the code the reviewer needs to double check?


## Why was this MR needed?
Current help text is over obvious and pushes references too far down. Also the subscribe button is now consistently styled and not a complete block button anymore. approved by @awhildy 

## Screenshots (if relevant)

before:
![image](/uploads/0c9543d2bf184a73b65773caa5f9fc62/image.png)

after:
![image](/uploads/765338823376267427f4a16737e39998/image.png)


## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?


Closes #24281

See merge request !7389

app/assets/javascripts/boards/components/board_sidebar.js.es6

@@ -47,7 +47,7 @@
       new gl.DueDateSelectors();
       new LabelsSelect();
       new Sidebar();
-      new Subscription('.subscription');
+      gl.Subscription.bindAll('.subscription');
     }
   });
 })();

app/assets/javascripts/subscription.js

@@ -1,52 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, vars-on-top, no-unused-vars, one-var, one-var-declaration-per-line, camelcase, consistent-return, no-undef, padded-blocks, max-len */
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
-  this.Subscription = (function() {
-    function Subscription(container) {
-      this.toggleSubscription = bind(this.toggleSubscription, this);
-      var $container;
-      this.$container = $(container);
-      this.url = this.$container.attr('data-url');
-      this.subscribe_button = this.$container.find('.js-subscribe-button');
-      this.subscription_status = this.$container.find('.subscription-status');
-      this.subscribe_button.unbind('click').click(this.toggleSubscription);
-    }
-
-    Subscription.prototype.toggleSubscription = function(event) {
-      var action, btn, current_status;
-      btn = $(event.currentTarget);
-      action = btn.find('span').text();
-      current_status = this.subscription_status.attr('data-status');
-      btn.addClass('disabled');
-
-      if ($('html').hasClass('issue-boards-page')) {
-        this.url = this.$container.attr('data-url');
-      }
-
-      return $.post(this.url, (function(_this) {
-        return function() {
-          var status;
-          btn.removeClass('disabled');
-
-          if ($('html').hasClass('issue-boards-page')) {
-            Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'subscribed', !gl.issueBoards.BoardsStore.detail.issue.subscribed);
-          } else {
-            status = current_status === 'subscribed' ? 'unsubscribed' : 'subscribed';
-            _this.subscription_status.attr('data-status', status);
-            action = status === 'subscribed' ? 'Unsubscribe' : 'Subscribe';
-            btn.find('span').text(action);
-            _this.subscription_status.find('>div').toggleClass('hidden');
-            if (btn.attr('data-original-title')) {
-              return btn.tooltip('hide').attr('data-original-title', action).tooltip('fixTitle');
-            }
-          }
-        };
-      })(this));
-    };
-
-    return Subscription;
-
-  })();
-
-}).call(this);

app/assets/javascripts/subscription.js.es6

@@ -0,0 +1,50 @@
+/* global Vue */
+
+(() => {
+  class Subscription {
+    constructor(containerElm) {
+      this.containerElm = containerElm;
+
+      const subscribeButton = containerElm.querySelector('.js-subscribe-button');
+      if (subscribeButton) {
+        // remove class so we don't bind twice
+        subscribeButton.classList.remove('js-subscribe-button');
+        subscribeButton.addEventListener('click', this.toggleSubscription.bind(this));
+      }
+    }
+
+    toggleSubscription(event) {
+      const button = event.currentTarget;
+      const buttonSpan = button.querySelector('span');
+      if (!buttonSpan || button.classList.contains('disabled')) {
+        return;
+      }
+      button.classList.add('disabled');
+
+      const isSubscribed = buttonSpan.innerHTML.trim().toLowerCase() !== 'subscribe';
+      const toggleActionUrl = this.containerElm.dataset.url;
+
+      $.post(toggleActionUrl, () => {
+        button.classList.remove('disabled');
+
+        // hack to allow this to work with the issue boards Vue object
+        if (document.querySelector('html').classList.contains('issue-boards-page')) {
+          Vue.set(
+            gl.issueBoards.BoardsStore.detail.issue,
+            'subscribed',
+            !gl.issueBoards.BoardsStore.detail.issue.subscribed,
+          );
+        } else {
+          buttonSpan.innerHTML = isSubscribed ? 'Subscribe' : 'Unsubscribe';
+        }
+      });
+    }
+
+    static bindAll(selector) {
+      [].forEach.call(document.querySelectorAll(selector), elm => new Subscription(elm));
+    }
+  }
+
+  window.gl = window.gl || {};
+  window.gl.Subscription = Subscription;
+})();

app/assets/stylesheets/pages/boards.scss

@@ -325,7 +325,6 @@
   }
 
   .issuable-header-text {
-    width: 100%;
     padding-right: 35px;
 
     > strong {

app/views/projects/boards/components/sidebar/_notifications.html.haml

@@ -1,11 +1,7 @@
 - if current_user
   .block.light.subscription{ ":data-url" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '/toggle_subscription'" }
-    .title
+    %span.issuable-header-text.hide-collapsed.pull-left
       Notifications
-    %button.btn.btn-block.btn-default.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
-      {{ issue.subscribed ? 'Unsubscribe' : 'Subscribe' }}
-    .subscription-status{ ":data-status" => "issue.subscribed ? 'subscribed' : 'unsubscribed'" }
-      .unsubscribed{ "v-show" => "!issue.subscribed" }
-        You're not receiving notifications from this thread.
-      .subscribed{ "v-show" => "issue.subscribed" }
-        You're receiving notifications because you're subscribed to this thread.
+    %button.btn.btn-default.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
+      %span
+        {{issue.subscribed ? 'Unsubscribe' : 'Subscribe'}}

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

@@ -144,16 +144,11 @@
         .block.light.subscription{data: {url: toggle_subscription_path(issuable)}}
           .sidebar-collapsed-icon
             = icon('rss')
-          .title.hide-collapsed
+          %span.issuable-header-text.hide-collapsed.pull-left
             Notifications
           - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
-          %button.btn.btn-block.btn-default.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
+          %button.btn.btn-default.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
             %span= subscribed ? 'Unsubscribe' : 'Subscribe'
-          .subscription-status.hide-collapsed{data: {status: subscribtion_status}}
-            .unsubscribed{class: ( 'hidden' if subscribed )}
-              You're not receiving notifications from this thread.
-            .subscribed{class: ( 'hidden' unless subscribed )}
-              You're receiving notifications because you're subscribed to this thread.
 
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference
@@ -170,6 +165,6 @@
       new MilestoneSelect('{"namespace":"#{@project.namespace.path}","path":"#{@project.path}"}');
       new LabelsSelect();
       new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
-      new Subscription('.subscription')
+      gl.Subscription.bindAll('.subscription');
       new gl.DueDateSelectors();
       sidebar = new Sidebar();

changelogs/unreleased/24281-issue-merge-request-sidebar-subscribe-button-style-improvement.yml

@@ -0,0 +1,4 @@
+---
+title: Remove the help text under the sidebar subscribe button and style it inline
+merge_request: 7389
+author:

spec/features/boards/sidebar_spec.rb

@@ -304,8 +304,8 @@ describe 'Issue Boards', feature: true, js: true do
 
       page.within('.subscription') do
         click_button 'Subscribe'
-
-        expect(page).to have_content("You're receiving notifications because you're subscribed to this thread.")
+        wait_for_ajax
+        expect(page).to have_content("Unsubscribe")
       end
     end
   end