Send ajax request for label update only if they are changed

Closes #19472

CHANGELOG

@@ -11,6 +11,7 @@ v 8.10.0 (unreleased)
   - Apply the trusted_proxies config to the rack request object for use with rack_attack
   - Add Sidekiq queue duration to transaction metrics.
   - Let Workhorse serve format-patch diffs
+  - Only update issuable labels if they have been changed
   - Make images fit to the size of the viewport !4810
   - Fix check for New Branch button on Issue page !4630 (winniehell)
   - Fix MR-auto-close text added to description. !4836

app/assets/javascripts/labels_select.js.coffee

@@ -24,6 +24,12 @@ class @LabelsSelect
       $newLabelError = $('.js-label-error')
       $colorPreview = $('.js-dropdown-label-color-preview')
       $newLabelCreateButton = $('.js-new-label-btn')
+      initialSelected = $dropdown
+        .closest('.selectbox')
+        .find("input[name='#{$dropdown.data('field-name')}']")
+        .map(->
+          @value
+        ).get()
       $newLabelError.hide()
       $loading = $block.find('.block-loading').fadeOut()
@@ -123,45 +129,47 @@ class @LabelsSelect
           .map(->
             @value
           ).get()
-        data = {}
-        data[abilityName] = {}
-        data[abilityName].label_ids = selected
-        if not selected.length
-          data[abilityName].label_ids = ['']
-        $loading.fadeIn()
-        $dropdown.trigger('loading.gl.dropdown')
-        $.ajax(
-          type: 'PUT'
-          url: issueUpdateURL
-          dataType: 'JSON'
-          data: data
-        ).done (data) ->
-          $loading.fadeOut()
-          $dropdown.trigger('loaded.gl.dropdown')
-          $selectbox.hide()
-          data.issueURLSplit = issueURLSplit
-          labelCount = 0
-          if data.labels.length
-            template = labelHTMLTemplate(data)
-            labelCount = data.labels.length
-          else
-            template = labelNoneHTMLTemplate
-          $value
-            .removeAttr('style')
-            .html(template)
-          $sidebarCollapsedValue.text(labelCount)
-
-          $('.has-tooltip', $value).tooltip(container: 'body')
-
-          $value
-            .find('a')
-            .each((i) ->
-              setTimeout(=>
-                gl.animate.animate($(@), 'pulse')
-              ,200 * i
-              )
-            )
+        unless _(initialSelected).isEqual(selected)
+          initialSelected = selected
+          data = {}
+          data[abilityName] = {}
+          data[abilityName].label_ids = selected
+          if not selected.length
+            data[abilityName].label_ids = ['']
+          $loading.fadeIn()
+          $dropdown.trigger('loading.gl.dropdown')
+          $.ajax(
+            type: 'PUT'
+            url: issueUpdateURL
+            dataType: 'JSON'
+            data: data
+          ).done (data) ->
+            $loading.fadeOut()
+            $dropdown.trigger('loaded.gl.dropdown')
+            $selectbox.hide()
+            data.issueURLSplit = issueURLSplit
+            labelCount = 0
+            if data.labels.length
+              template = labelHTMLTemplate(data)
+              labelCount = data.labels.length
+            else
+              template = labelNoneHTMLTemplate
+            $value
+              .removeAttr('style')
+              .html(template)
+            $sidebarCollapsedValue.text(labelCount)
+
+            $('.has-tooltip', $value).tooltip(container: 'body')
+
+            $value
+              .find('a')
+              .each((i) ->
+                setTimeout(=>
+                  gl.animate.animate($(@), 'pulse')
+                ,200 * i
+                )
+              )
       $dropdown.glDropdown(
         data: (term, callback) ->