FE review changes

app/assets/javascripts/group_label_subscription.js

 import $ from 'jquery';
+import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
-import { __ } from './locale';
+
+const tooltipTitles = {
+  group: __('Unsubscribe at group level'),
+  project: __('Unsubscribe at project level'),
+};
 
 export default class GroupLabelSubscription {
   constructor(container) {
@@ -48,11 +53,11 @@ export default class GroupLabelSubscription {
 
   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'));
+    const newTitle = tooltipTitles[type];
 
-    $unsubscribeButton.tooltip('hide').attr('title', title).tooltip('_fixTitle');
+    $('.js-unsubscribe-button', $button.closest('.label-actions-list'))
+      .tooltip('hide').attr('title', newTitle).tooltip('_fixTitle');
   }
 }

app/assets/javascripts/label_manager.js

@@ -13,7 +13,7 @@ export default class LabelManager {
     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');
-    this.$badgeItemTemplate = $(document.getElementById('js-badge-item-template').innerHTML);
+    this.$badgeItemTemplate = $('#js-badge-item-template');
     this.sortable = Sortable.create(this.prioritizedLabels.get(0), {
       filter: '.empty-message',
       forceFallback: true,
@@ -97,7 +97,7 @@ export default class LabelManager {
     if (action === 'remove') {
       $('.js-priority-badge', $label).remove();
     } else {
-      $('.label-links', $label).append(this.$badgeItemTemplate.clone());
+      $('.label-links', $label).append(this.$badgeItemTemplate.clone().html());
     }
   }
 

app/assets/javascripts/project_label_subscription.js

@@ -3,6 +3,17 @@ import { __ } from './locale';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
 
+const tooltipTitles = {
+  group: {
+    subscribed: __('Unsubscribe at group level'),
+    unsubscribed: __('Subscribe at group level'),
+  },
+  project: {
+    subscribed: __('Unsubscribe at project level'),
+    unsubscribed: __('Subscribe at project level'),
+  },
+};
+
 export default class ProjectLabelSubscription {
   constructor(container) {
     this.$container = $(container);
@@ -48,11 +59,10 @@ export default class ProjectLabelSubscription {
     }).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);
+  static setNewTitle($button, originalTitle, newStatus) {
+    const type = /group/.test(originalTitle) ? 'group' : 'project';
+    const newTitle = tooltipTitles[type][newStatus];
 
-    $button.tooltip('hide').attr('data-original-title', newTitle).tooltip('_fixTitle');
+    $button.tooltip('hide').attr('title', newTitle).tooltip('_fixTitle');
   }
 }

app/assets/stylesheets/framework/common.scss

@@ -464,7 +464,6 @@ img.emoji {
 .prepend-left-5 { margin-left: 5px; }
 .prepend-left-8 { margin-left: 8px; }
 .prepend-left-10 { margin-left: 10px; }
-.prepend-left-15 { margin-left: 15px; }
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }
 .append-right-5 { margin-right: 5px; }

app/assets/stylesheets/pages/labels.scss

@@ -77,7 +77,7 @@
     margin-bottom: 5px;
     display: flex;
     justify-content: space-between;
-    padding: 11px 10px 11px $gl-padding;
+    padding: 8px 8px 8px $gl-padding;
     border-radius: $border-radius-default;
 
     &.sortable-ghost {
@@ -270,7 +270,6 @@
   .content-list &::before,
   .content-list &::after {
     content: none;
-    display: block;
   }
 
   .label-name {
@@ -284,12 +283,6 @@
     }
   }
 
-  .label-type {
-    display: block;
-    margin-bottom: 10px;
-    margin-left: 50px;
-  }
-
   .label-description {
     flex-grow: 1;
 
@@ -302,7 +295,7 @@
     padding: 4px $grid-size;
     font-size: $label-font-size;
     position: relative;
-    top: ($grid-size / 2);
+    top: $gl-padding-4;
   }
 
   .label-action {

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

@@ -8,8 +8,7 @@
 - if can_admin_label
   - content_for(:header_content) do
     .nav-controls
-      = link_to new_group_label_path(@group), class: "btn btn-new" do
-        = _('New label')
+      = link_to _('New label'), new_group_label_path(@group), class: "btn btn-new"
 
 - if @labels.exists?
   #promote-label-modal
@@ -32,4 +31,4 @@
 
 %template#js-badge-item-template
   %li.label-link-item.js-priority-badge.inline.prepend-left-10
-    .label-badge.label-badge-blue Prioritized label
+    .label-badge.label-badge-blue= _('Prioritized label')

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

@@ -6,24 +6,23 @@
 - if can_admin_label
   - content_for(:header_content) do
     .nav-controls
-      = link_to new_project_label_path(@project), class: "btn btn-new" do
-        New label
+      = link_to _('New label'), new_project_label_path(@project), class: "btn btn-new"
 
 - if @labels.exists? || @prioritized_labels.exists?
   #promote-label-modal
   %div{ class: container_class }
     .top-area.adjust
       .nav-text
-        Labels can be applied to issues and merge requests.
+        = _('Labels can be applied to issues and merge requests.')
         - if can_admin_label
-          Star a label to make it a priority label. Order the prioritized labels to change their relative priority, by dragging.
+          = _('Star a label to make it a priority label. Order the prioritized labels to change their relative priority, by dragging.')
 
     .labels-container.prepend-top-5
       - if can_admin_label
         -# Only show it in the first page
         - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
         .prioritized-labels{ class: ('hide' if hide) }
-          %h5.prepend-top-0 Prioritized Labels
+          %h5.prepend-top-0= _('Prioritized Labels')
           .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'
@@ -33,7 +32,7 @@
       - if @labels.present?
         .other-labels
           - if can_admin_label
-            %h5{ class: ('hide' if hide) } Other Labels
+            %h5{ class: ('hide' if hide) }= _('Other Labels')
           .content-list.manage-labels-list.js-other-labels
             = render partial: 'shared/label', subject: @project, collection: @labels, as: :label
             = paginate @labels, theme: 'gitlab'
@@ -42,4 +41,4 @@
 
 %template#js-badge-item-template
   %li.label-link-item.js-priority-badge.inline.prepend-left-10
-    .label-badge.label-badge-blue Prioritized label
+    .label-badge.label-badge-blue= _('Prioritized label')

app/views/shared/_label.html.haml

@@ -11,22 +11,22 @@
 %li.label-list-item{ id: label_css_id, data: { id: label.id } }
   = render "shared/label_row", label: label, subject: subject, force_priority: force_priority
   %ul.label-actions-list
-    - if controller.is_a?(Projects::LabelsController)
+    - if @project
       %li.inline
         .label-badge.label-badge-gray= label.model_name.human.capitalize
     - if can?(current_user, :admin_label, @project)
       %li.inline.js-toggle-priority{ data: { url: remove_priority_project_label_path(@project, label),
         dom_id: dom_id(label), type: label.type } }
-        %button.label-action.add-priority.btn.btn-transparent.has-tooltip{ title: _('Prioritize'), type: 'button', :'data-placement' => 'top' }
+        %button.label-action.add-priority.btn.btn-transparent.has-tooltip{ title: _('Prioritize'), type: 'button', data: { placement: 'top' }, aria_label: _('Prioritize label') }
           = sprite_icon('star-o')
-        %button.label-action.remove-priority.btn.btn-transparent.has-tooltip{ title: _('Remove priority'), type: 'button', :'data-placement' => 'top' }
+        %button.label-action.remove-priority.btn.btn-transparent.has-tooltip{ title: _('Remove priority'), type: 'button', data: { placement: 'top' }, aria_label: _('Deprioritize label') }
           = sprite_icon('star')
       %li.inline
-        = link_to edit_label_path(label), class: 'btn btn-transparent label-action' do
+        = link_to edit_label_path(label), class: 'btn btn-transparent label-action', aria_label: 'Edit label' do
           = sprite_icon('pencil')
     %li.inline
       .dropdown
-        %button{ type: 'button', class: 'btn btn-transparent js-label-options-dropdown label-action', data: { toggle: 'dropdown' } }
+        %button{ type: 'button', class: 'btn btn-transparent js-label-options-dropdown label-action', data: { toggle: 'dropdown' }, aria_label: _('Label actions dropdown') }
           = sprite_icon('ellipsis_v')
         .dropdown-menu.dropdown-open-left
           %ul
@@ -44,7 +44,7 @@
                   = _('Promote to group label')
             %li
               %span{ data: { toggle: 'modal', target: "#modal-delete-label-#{label.id}" } }
-                = button_tag 'Delete', type: 'button', class: 'text-danger remove-row'
+                %button.text-danger.remove-row{ type: 'button' }= _('Delete')
     - if current_user
       %li.inline.label-subscription
         - if can_subscribe_to_label_in_different_levels?(label)

app/views/shared/_label_row.html.haml

@@ -6,7 +6,7 @@
 .label-name
   = link_to_label(label, subject: @project, tooltip: false)
 .label-description
-  .append-right-15.prepend-left-15
+  .append-right-default.prepend-left-default
     - if label.description.present?
       .description-text.append-bottom-10
         = markdown_field(label, :description)