Merge branch 'label-tooltip-sidebar-collapsed' into 'master'

Added tooltip to label value in collapsed sidebar

## What does this MR do?

Adds a list of the issuables labels to a tooltip in the collapsed
sidebar. Limited to 5 otherwise the list could get crazy long.

Closes #19398

See merge request !5232

2 files changed, 105 insertions, 0 deletions

diff --git a/spec/javascripts/fixtures/issue_sidebar_label.html.haml b/spec/javascripts/fixtures/issue_sidebar_label.html.haml
new file mode 100644
index 00000000000..397bdc85c67
--- /dev/null
+++ b/spec/javascripts/fixtures/issue_sidebar_label.html.haml
@@ -0,0 +1,16 @@
+.block.labels
+  .sidebar-collapsed-icon.js-sidebar-labels-tooltip
+  .title.hide-collapsed
+    %a.edit-link.pull-right{ href: "#" }
+      Edit
+  .selectbox.hide-collapsed{ style: "display: none;" }
+    .dropdown
+      %button.dropdown-menu-toggle.js-label-select.js-multiselect{ type: "button", data: { ability_name: "issue", field_name: "issue[label_names][]", issue_update: "/root/test/issues/2.json", labels: "/root/test/labels.json", project_id: "12", show_any: "true", show_no: "true", toggle: "dropdown" } }
+        %span.dropdown-toggle-text
+          Label
+        %i.fa.fa-chevron-down
+      .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
+        .dropdown-page-one
+          .dropdown-content
+          .dropdown-loading
+            %i.fa.fa-spinner.fa-spin
diff --git a/spec/javascripts/labels_issue_sidebar_spec.js.es6 b/spec/javascripts/labels_issue_sidebar_spec.js.es6
new file mode 100644
index 00000000000..840c7b6d015
--- /dev/null
+++ b/spec/javascripts/labels_issue_sidebar_spec.js.es6
@@ -0,0 +1,89 @@
+//= require lib/utils/type_utility
+//= require jquery
+//= require bootstrap
+//= require gl_dropdown
+//= require select2
+//= require jquery.nicescroll
+//= require api
+//= require create_label
+//= require issuable_context
+//= require users_select
+//= require labels_select
+
+(() => {
+  let saveLabelCount = 0;
+  describe('Issue dropdown sidebar', () => {
+    fixture.preload('issue_sidebar_label.html');
+
+    beforeEach(() => {
+      fixture.load('issue_sidebar_label.html');
+      new IssuableContext('{"id":1,"name":"Administrator","username":"root"}');
+      new LabelsSelect();
+
+      spyOn(jQuery, 'ajax').and.callFake((req) => {
+        const d = $.Deferred();
+        let LABELS_DATA = []
+
+        if (req.url === '/root/test/labels.json') {
+          for (let i = 0; i < 10; i++) {
+            LABELS_DATA.push({id: i, title: `test ${i}`, color: '#5CB85C'});
+          }
+        } else if (req.url === '/root/test/issues/2.json') {
+          let tmp = []
+          for (let i = 0; i < saveLabelCount; i++) {
+            tmp.push({id: i, title: `test ${i}`, color: '#5CB85C'});
+          }
+          LABELS_DATA = {labels: tmp};
+        }
+
+        d.resolve(LABELS_DATA);
+        return d.promise();
+      });
+    });
+
+    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);
+
+        $('.dropdow-content a').each((i, $link) => {
+          if (i < 5) {
+            $link.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);
+    });
+
+    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);
+
+        $('.dropdow-content a').each((i, $link) => {
+          if (i < 5) {
+            $link.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);
+    });
+  });
+})();
+