diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
index d5cb6164e0bf3eee20d885ab71b49567a2cc0a9e..1644a7727378f369b57963d0233ec3c90e37c010 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js.es6
+++ b/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');
}
});
})();
diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6
index 6d75688deeb9e6249c762d8cfb7b1f9ad9e04593..58b380e0f2ea5fd284423cc09f41295eac34c01d 100644
--- a/app/assets/javascripts/subscription.js.es6
+++ b/app/assets/javascripts/subscription.js.es6
@@ -1,52 +1,58 @@
-/* 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);
+/* global Vue */
+
+((global) => {
+ class Subscription {
+ constructor(containerSelector) {
+ this.containerElm = (typeof containerSelector === 'string')
+ ? document.querySelector(containerSelector)
+ : containerSelector;
+
+ const subscribeButton = this.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));
+ }
}
- 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');
+ toggleSubscription(event) {
+ const button = event.currentTarget;
+ const buttonSpan = button.querySelector('span');
+ if (!buttonSpan || button.classList.contains('disabled')) {
+ return;
}
-
- 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');
- }
+ button.classList.add('disabled');
+
+ const isSubscribed = buttonSpan.innerHTML.trim() !== 'Subscribe';
+ const toggleActionUrl = this.containerElm.getAttribute('data-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 {
+ const newToggleText = isSubscribed ? 'Subscribe' : 'Unsubscribe';
+ buttonSpan.innerHTML = newToggleText;
+
+ if (button.getAttribute('data-original-title')) {
+ button.setAttribute('data-original-title', newToggleText);
+ $(button).tooltip('hide').tooltip('fixTitle');
}
- };
- })(this));
- };
-
- return Subscription;
+ }
+ });
+ }
- })();
+ static bindAll(selector) {
+ [].forEach.call(document.querySelectorAll(selector), elm => new Subscription(elm));
+ }
+ }
-}).call(this);
+ // eslint-disable-next-line no-param-reassign
+ global.Subscription = Subscription;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 4327f8bf6409961d8ecc40afa8e331173d1e1a11..82f36f248679735a7b1e5123a43fbb8b524a7af4 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -325,7 +325,6 @@
}
.issuable-header-text {
- width: 100%;
padding-right: 35px;
> strong {
diff --git a/app/views/projects/boards/components/sidebar/_notifications.html.haml b/app/views/projects/boards/components/sidebar/_notifications.html.haml
index 21c9563e9db9f9f5416df01820cb1df9c998f676..a08c7f2af096a3f94f96597174e23d2ca1b895bf 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 eac83f5d83a4e61962ca173b7fd479140c3326e5..958f8413e1d7fcc4e633cd8f39054c9122e334cb 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -165,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();
diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
index f160052a8448624e6e6c134c6162e04c59634905..c16aafa14704db7306232cd7ac31b30297bcc0bb 100644
--- a/spec/features/boards/sidebar_spec.rb
+++ b/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