Fix tooltips

app/assets/javascripts/group_label_subscription.js

@@ -35,6 +35,7 @@ export default class GroupLabelSubscription {
     this.$unsubscribeButtons.attr('data-url', url);
 
     axios.post(url)
+      .then(() => GroupLabelSubscription.setNewTooltip($btn))
       .then(() => this.toggleSubscriptionButtons())
       .catch(() => flash(__('There was an error when subscribing to this label.')));
   }
@@ -44,4 +45,14 @@ export default class GroupLabelSubscription {
     this.$subscribeButtons.toggleClass('hidden');
     this.$unsubscribeButtons.toggleClass('hidden');
   }
+
+  static setNewTooltip($button) {
+    if (!$button.hasClass('js-subscribe-button')) return;
+
+    const type = $button.hasClass('js-group-level') ? 'group' : 'project';
+    const title = `Unsubscribe at ${type} level`;
+    const $unsubscribeButton = $('.js-unsubscribe-button', $button.closest('.label-actions-list'));
+
+    $unsubscribeButton.tooltip('hide').attr('title', title).tooltip('fixTitle');
+  }
 }

app/assets/javascripts/project_label_subscription.js

@@ -35,15 +35,22 @@ export default class ProjectLabelSubscription {
       this.$buttons.attr('data-status', newStatus);
       this.$buttons.find('> span').text(newAction);
 
-      this.$buttons.map((button) => {
+      this.$buttons.map((i, button) => {
         const $button = $(button);
+        const originalTitle = $button.attr('data-original-title');
 
-        if ($button.attr('data-original-title')) {
-          $button.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle');
-        }
+        if (originalTitle) ProjectLabelSubscription.setNewTitle($button, originalTitle, newStatus, newAction);
 
         return button;
       });
     }).catch(() => flash(__('There was an error subscribing to this label.')));
   }
+
+  static setNewTitle($button, originalTitle, newStatus, newAction) {
+    const newStatusVerb = newStatus.slice(0, -1);
+    const actionRegexp = new RegExp(newStatusVerb, 'i');
+    const newTitle = originalTitle.replace(actionRegexp, newAction);
+
+    $button.tooltip('hide').attr('data-original-title', newTitle).tooltip('fixTitle');
+  }
 }

app/views/shared/_label.html.haml

@@ -6,7 +6,7 @@
 - toggle_subscription_path = toggle_subscription_label_path(label, @project) if current_user
 - show_label_merge_requests_link = show_label_issuables_link?(label, :merge_requests, project: @project)
 - show_label_issues_link = show_label_issuables_link?(label, :issues, project: @project)
-- tooltip_title = "#{status.unsubscribed? ? 'Subscribe' : 'Unsubscribe'} at #{label.is_a?(ProjectLabel) ? 'project' : 'group'} level"
+- tooltip_title = "#{status.unsubscribed? ? 'Subscribe' : 'Unsubscribe'} at #{status.sub('-', ' ')}"
 
 %li.label-list-item{ id: label_css_id, data: { id: label.id } }
   = render "shared/label_row", label: label, subject: subject, force_priority: force_priority
@@ -61,7 +61,7 @@
                   %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_project_label_path(@project, label) } }
                     %span= _('Subscribe at project level')
                 %li
-                  %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_group_label_path(label.group, label) } }
+                  %button.js-subscribe-button.js-group-level.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_group_label_path(label.group, label) } }
                     %span= _('Subscribe at group level')
         - else
           %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ data: { status: status, url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }