Merge branch...

Merge branch '31393-when-adding-labels-in-a-merge-request-adds-them-out-of-order-until-refresh-page' into 'master'

alphabetically sorts selected sidebar labels

Closes #31393

See merge request gitlab-org/gitlab!17309

app/assets/javascripts/labels_select.js

@@ -120,7 +120,7 @@ export default class LabelsSelect {
             labelCount = 0;
             if (data.labels.length && issueUpdateURL) {
               template = LabelsSelect.getLabelTemplate({
-                labels: data.labels,
+                labels: _.sortBy(data.labels, 'title'),
                 issueUpdateURL,
                 enableScopedLabels: scopedLabels,
                 scopedLabelsDocumentationLink,

changelogs/unreleased/31393-when-adding-labels-in-a-merge-request-adds-them-out-of-order-until-.yml

+---
+title: Alphabetically sorts selected sidebar labels.
+merge_request: 17309
+author:
+type: fixed

spec/javascripts/labels_issue_sidebar_spec.js

@@ -5,6 +5,7 @@ import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import IssuableContext from '~/issuable_context';
 import LabelsSelect from '~/labels_select';
+import _ from 'underscore';
 
 import '~/gl_dropdown';
 import 'select2';
@@ -15,6 +16,35 @@ import '~/users_select';
 let saveLabelCount = 0;
 let mock;
 
+function testLabelClicks(labelOrder, done) {
+  $('.edit-link')
+    .get(0)
+    .click();
+
+  setTimeout(() => {
+    const labelsInDropdown = $('.dropdown-content a');
+
+    expect(labelsInDropdown.length).toBe(10);
+
+    const arrayOfLabels = labelsInDropdown.get();
+    const randomArrayOfLabels = _.shuffle(arrayOfLabels);
+    randomArrayOfLabels.forEach((label, i) => {
+      if (i < saveLabelCount) {
+        $(label).click();
+      }
+    });
+
+    $('.edit-link')
+      .get(0)
+      .click();
+
+    setTimeout(() => {
+      expect($('.sidebar-collapsed-icon').attr('data-original-title')).toBe(labelOrder);
+      done();
+    }, 0);
+  }, 0);
+}
+
 describe('Issue dropdown sidebar', () => {
   preloadFixtures('static/issue_sidebar_label.html');
 
@@ -29,7 +59,7 @@ describe('Issue dropdown sidebar', () => {
     mock.onGet('/root/test/labels.json').reply(() => {
       const labels = Array(10)
         .fill()
-        .map((_, i) => ({
+        .map((_val, i) => ({
           id: i,
           title: `test ${i}`,
           color: '#5CB85C',
@@ -41,7 +71,7 @@ describe('Issue dropdown sidebar', () => {
     mock.onPut('/root/test/issues/2.json').reply(() => {
       const labels = Array(saveLabelCount)
         .fill()
-        .map((_, i) => ({
+        .map((_val, i) => ({
           id: i,
           title: `test ${i}`,
           color: '#5CB85C',
@@ -57,61 +87,11 @@ describe('Issue dropdown sidebar', () => {
 
   it('changes collapsed tooltip when changing labels when less than 5', done => {
     saveLabelCount = 5;
-    $('.edit-link')
-      .get(0)
-      .click();
-
-    setTimeout(() => {
-      expect($('.dropdown-content a').length).toBe(10);
-
-      $('.dropdown-content a').each(function(i) {
-        if (i < saveLabelCount) {
-          $(this)
-            .get(0)
-            .click();
-        }
-      });
-
-      $('.edit-link')
-        .get(0)
-        .click();
-
-      setTimeout(() => {
-        expect($('.sidebar-collapsed-icon').attr('data-original-title')).toBe(
-          'test 0, test 1, test 2, test 3, test 4',
-        );
-        done();
-      }, 0);
-    }, 0);
+    testLabelClicks('test 0, test 1, test 2, test 3, test 4', done);
   });
 
   it('changes collapsed tooltip when changing labels when more than 5', done => {
     saveLabelCount = 6;
-    $('.edit-link')
-      .get(0)
-      .click();
-
-    setTimeout(() => {
-      expect($('.dropdown-content a').length).toBe(10);
-
-      $('.dropdown-content a').each(function(i) {
-        if (i < saveLabelCount) {
-          $(this)
-            .get(0)
-            .click();
-        }
-      });
-
-      $('.edit-link')
-        .get(0)
-        .click();
-
-      setTimeout(() => {
-        expect($('.sidebar-collapsed-icon').attr('data-original-title')).toBe(
-          'test 0, test 1, test 2, test 3, test 4, and 1 more',
-        );
-        done();
-      }, 0);
-    }, 0);
+    testLabelClicks('test 0, test 1, test 2, test 3, test 4, and 1 more', done);
   });
 });