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

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

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;

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) }
 

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 @@
     });
   });
 })();
-