UX review changes

app/assets/javascripts/label_manager.js

@@ -9,7 +9,7 @@ import axios from './lib/utils/axios_utils';
 export default class LabelManager {
   constructor({ togglePriorityButton, prioritizedLabels, otherLabels } = {}) {
     this.togglePriorityButton = togglePriorityButton || $('.js-toggle-priority');
-    this.prioritizedLabels = prioritizedLabels || $('.js-prioritized-labels');
+    this.prioritizedLabels = prioritizedLabels || $('.js-prioritized-labels-sortable');
     this.otherLabels = otherLabels || $('.js-other-labels');
     this.errorMessage = 'Unable to update label prioritization at this time';
     this.emptyState = document.querySelector('#js-priority-labels-empty-state');
@@ -102,6 +102,7 @@ export default class LabelManager {
   }
 
   onPrioritySortUpdate() {
+    debugger;
     this.savePrioritySort()
       .catch(() => flash(this.errorMessage));
   }

app/assets/stylesheets/pages/labels.scss

@@ -188,6 +188,8 @@
 }
 
 .label-subscribe-button {
+  width: 105px;
+
   .label-subscribe-button-icon {
     &[disabled] {
       opacity: 0.5;

app/views/projects/labels/index.html.haml

@@ -24,17 +24,27 @@
         - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
         .prioritized-labels{ class: ('hide' if hide) }
           %h5.prepend-top-0 Prioritized Labels
-          %ul.content-list.manage-labels-list.js-prioritized-labels{ "data-url" => set_priorities_project_labels_path(@project) }
+          .content-list.manage-labels-list.js-prioritized-labels{ "data-url" => set_priorities_project_labels_path(@project) }
             #js-priority-labels-empty-state.priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty?}" }
               = render 'shared/empty_states/priority_labels'
             - if @prioritized_labels.present?
-              = render partial: 'shared/label', subject: @project, collection: @prioritized_labels, as: :label
+              %table
+                %thead
+                  %tr
+                    %th
+                    %th
+                    %th
+                    %th
+                    %th
+                    %th
+                    %th
+                %tbody.js-prioritized-labels-sortable= render partial: 'shared/label', subject: @project, collection: @prioritized_labels, as: :label
 
       - if @labels.present?
         .other-labels
           - if can_admin_label
             %h5{ class: ('hide' if hide) } Other Labels
-          %ul.content-list.manage-labels-list.js-other-labels
+          .content-list.manage-labels-list.js-other-labels
             = render partial: 'shared/label', subject: @project, collection: @labels, as: :label
             = paginate @labels, theme: 'gitlab'
 - else

app/views/shared/_label.html.haml

@@ -4,7 +4,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)
-- unsubscribe_tooltip_title = status.subscribed?(current_user, label.group) ? 'Unsubscribe at group level' : status.subscribed?(current_user, @project) ? 'Unsubscribe at project level' : 'Unsubscribe'
+- tooltip_title = "#{status.unsubscribed? ? 'Subscribe' : 'Unsubscribe'} at #{label.is_a?(ProjectLabel) ? 'project' : 'group'} level"
 
 %li.label-list-item{ id: label_css_id, data: { id: label.id } }
   = render "shared/label_row", label: label, subject: subject
@@ -45,7 +45,7 @@
     - if current_user
       %li.inline.label-subscription
         - if can_subscribe_to_label_in_different_levels?(label)
-          %button.js-unsubscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path, toggle: 'tooltip' }, title: unsubscribe_tooltip_title, test: status.subscribed?(current_user, label.group), test_two: status.subscribed? }
+          %button.js-unsubscribe-button.test.label-subscribe-button.btn.btn-default{ class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
             %span Unsubscribe
           .dropdown.dropdown-group-label{ class: ('hidden' unless status.unsubscribed?) }
             %button.label-subscribe-button.btn.btn-default{ data: { toggle: 'dropdown' } }
@@ -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_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 } }
+          %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ data: { status: status, url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
             %span= label_subscription_toggle_button_text(label, @project)
 
 = render 'shared/delete_label_modal', label: label