Merge branch 'label-update-check-new' into 'master'

Send ajax request for label update only if they are changed

## What does this MR do?

At the moment we send requests to update the labels on issue even if nothing has been changed. This fixes that and only sends requests when something has actually been changed.

The code gets the initial selected values based on the inputs & then compares that to the selected values when submitting. If they are equal, then no request is sent.

## What are the relevant issue numbers?

Closes #19472 

See merge request !5071

4 files changed, 35 insertions, 8 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 2bfbe1351a7..10f1da4c681 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -5,6 +5,7 @@ v 8.13.0 (unreleased)
   - Speed-up group milestones show page
   - Add more tests for calendar contribution (ClemMakesApps)
   - Fix robots.txt disallowing access to groups starting with "s" (Matt Harrison)
+  - Only update issuable labels if they have been changed
   - Revoke button in Applications Settings underlines on hover.
   - Add organization field to user profile
   - Optimize GitHub importing for speed and memory
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index c562b7d7b00..ce79e2e348a 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -4,7 +4,7 @@
       var _this;
       _this = this;
       $('.js-label-select').each(function(i, dropdown) {
-        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, projectId, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip;
+        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, projectId, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected;
         $dropdown = $(dropdown);
         projectId = $dropdown.data('project-id');
         labelUrl = $dropdown.data('labels');
@@ -24,6 +24,11 @@
         $sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip');
         $value = $block.find('.value');
         $loading = $block.find('.block-loading').fadeOut();
+        initialSelected = $selectbox
+          .find('input[name="' + $dropdown.data('field-name') + '"]')
+          .map(function () {
+            return this.value;
+          }).get();
         if (issueUpdateURL != null) {
           issueURLSplit = issueUpdateURL.split('/');
         }
@@ -43,6 +48,10 @@
           selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").map(function() {
             return this.value;
           }).get();
+
+          if (_.isEqual(initialSelected, selected)) return;
+          initialSelected = selected;
+
           data = {};
           data[abilityName] = {};
           data[abilityName].label_ids = selected;
diff --git a/spec/features/issues_spec.rb b/spec/features/issues_spec.rb
index 22359c8f938..9fe40ea0892 100644
--- a/spec/features/issues_spec.rb
+++ b/spec/features/issues_spec.rb
@@ -369,6 +369,24 @@ describe 'Issues', feature: true do
     end
   end
 
+  describe 'update labels from issue#show', js: true do
+    let(:issue) { create(:issue, project: project, author: @user, assignee: @user) }
+    let!(:label) { create(:label, project: project) }
+
+    before do
+      visit namespace_project_issue_path(project.namespace, project, issue)
+    end
+
+    it 'will not send ajax request when no data is changed' do
+      page.within '.labels' do
+        click_link 'Edit'
+        first('.dropdown-menu-close').click
+
+        expect(page).not_to have_selector('.block-loading')
+      end
+    end
+  end
+
   describe 'update assignee from issue#show' do
     let(:issue) { create(:issue, project: project, author: @user, assignee: @user) }
 
diff --git a/spec/javascripts/labels_issue_sidebar_spec.js.es6 b/spec/javascripts/labels_issue_sidebar_spec.js.es6
index 840c7b6d015..1ad6f612210 100644
--- a/spec/javascripts/labels_issue_sidebar_spec.js.es6
+++ b/spec/javascripts/labels_issue_sidebar_spec.js.es6
@@ -48,9 +48,9 @@
       setTimeout(() => {
         expect($('.dropdown-content a').length).toBe(10);
 
-        $('.dropdow-content a').each((i, $link) => {
-          if (i < 5) {
-            $link.get(0).click();
+        $('.dropdown-content a').each(function (i) {
+          if (i < saveLabelCount) {
+            $(this).get(0).click();
           }
         });
 
@@ -70,9 +70,9 @@
       setTimeout(() => {
         expect($('.dropdown-content a').length).toBe(10);
 
-        $('.dropdow-content a').each((i, $link) => {
-          if (i < 5) {
-            $link.get(0).click();
+        $('.dropdown-content a').each(function (i) {
+          if (i < saveLabelCount) {
+            $(this).get(0).click();
           }
         });
 
@@ -86,4 +86,3 @@
     });
   });
 })();
-