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

2 files changed, 7 insertions, 16 deletions

diff --git a/app/views/projects/boards/components/sidebar/_notifications.html.haml b/app/views/projects/boards/components/sidebar/_notifications.html.haml
index 21c9563e9db..a08c7f2af09 100644
--- a/app/views/projects/boards/components/sidebar/_notifications.html.haml
+++ b/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'}}
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 02427650219..958f8413e1d 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/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();