Add and remove priority label

3 files changed, 19 insertions, 3 deletions

diff --git a/app/assets/javascripts/label_manager.js b/app/assets/javascripts/label_manager.js
index e230dbbd4ac..628e084a5e0 100644
--- a/app/assets/javascripts/label_manager.js
+++ b/app/assets/javascripts/label_manager.js
@@ -13,6 +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.sortable = Sortable.create(this.prioritizedLabels.get(0), {
       filter: '.empty-message',
       forceFallback: true,
@@ -63,7 +64,11 @@ export default class LabelManager {
       $target = this.otherLabels;
       $from = this.prioritizedLabels;
     }
-    $label.detach().appendTo($target);
+
+    const $detachedLabel = $label.detach();
+    this.toggleLabelPriorityBadge($detachedLabel, action);
+    $detachedLabel.appendTo($target);
+
     if ($from.find('li').length) {
       $from.find('.empty-message').removeClass('hidden');
     }
@@ -88,6 +93,14 @@ export default class LabelManager {
     }
   }
 
+  toggleLabelPriorityBadge($label, action) {
+    if (action === 'remove') {
+      $('.js-priority-badge', $label).remove();
+    } else {
+      $('.label-links', $label).append(this.$badgeItemTemplate);
+    }
+  }
+
   onPrioritySortUpdate() {
     this.savePrioritySort()
       .catch(() => flash(this.errorMessage));
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index a5f7ce8e2ad..632355fa338 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -9,7 +9,6 @@
       = link_to new_project_label_path(@project), class: "btn btn-new" do
         New label
 
-
 - if @labels.exists? || @prioritized_labels.exists?
   #promote-label-modal
   %div{ class: container_class }
@@ -40,3 +39,7 @@
             = paginate @labels, theme: 'gitlab'
 - else
   = render 'shared/empty_states/labels'
+
+%template#js-badge-item-template
+  %li.label-link-item.js-priority-badge.inline.prepend-left-10
+    .label-badge.label-badge-blue Prioritized label
\ No newline at end of file
diff --git a/app/views/shared/_label_row.html.haml b/app/views/shared/_label_row.html.haml
index 89dea6c6f10..51ff88b9981 100644
--- a/app/views/shared/_label_row.html.haml
+++ b/app/views/shared/_label_row.html.haml
@@ -18,5 +18,5 @@
         %li.label-link-item.inline
           = link_to_label(label, subject: subject, type: :merge_request) { 'Merge requests' }
       - if label.priority?
-        %li.label-link-item.inline.prepend-left-10
+        %li.label-link-item.js-priority-badge.inline.prepend-left-10
           .label-badge.label-badge-blue Prioritized label
\ No newline at end of file