[frontend] backport of scoped labels

Scoped labels in EE require additional changes in CE code.

6 files changed, 161 insertions, 39 deletions

diff --git a/spec/frontend/labels_select_spec.js b/spec/frontend/labels_select_spec.js
index acfdc885032..d54e0eab845 100644
--- a/spec/frontend/labels_select_spec.js
+++ b/spec/frontend/labels_select_spec.js
@@ -13,40 +13,104 @@ const mockLabels = [
   },
 ];
 
+const mockScopedLabels = [
+  {
+    id: 27,
+    title: 'Foo::Bar',
+    description: 'Foobar',
+    color: '#333ABC',
+    text_color: '#FFFFFF',
+  },
+];
+
 describe('LabelsSelect', () => {
   describe('getLabelTemplate', () => {
-    const label = mockLabels[0];
-    let $labelEl;
-
-    beforeEach(() => {
-      $labelEl = $(
-        LabelsSelect.getLabelTemplate({
-          labels: mockLabels,
-          issueUpdateURL: mockUrl,
-        }),
-      );
-    });
+    describe('when normal label is present', () => {
+      const label = mockLabels[0];
+      let $labelEl;
 
-    it('generated label item template has correct label URL', () => {
-      expect($labelEl.attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label');
-    });
+      beforeEach(() => {
+        $labelEl = $(
+          LabelsSelect.getLabelTemplate({
+            labels: mockLabels,
+            issueUpdateURL: mockUrl,
+            enableScopedLabels: true,
+            scopedLabelsDocumentationLink: 'docs-link',
+          }),
+        );
+      });
 
-    it('generated label item template has correct label title', () => {
-      expect($labelEl.find('span.label').text()).toBe(label.title);
-    });
+      it('generated label item template has correct label URL', () => {
+        expect($labelEl.attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label');
+      });
 
-    it('generated label item template has label description as title attribute', () => {
-      expect($labelEl.find('span.label').attr('title')).toBe(label.description);
-    });
+      it('generated label item template has correct label title', () => {
+        expect($labelEl.find('span.label').text()).toBe(label.title);
+      });
+
+      it('generated label item template has label description as title attribute', () => {
+        expect($labelEl.find('span.label').attr('title')).toBe(label.description);
+      });
 
-    it('generated label item template has correct label styles', () => {
-      expect($labelEl.find('span.label').attr('style')).toBe(
-        `background-color: ${label.color}; color: ${label.text_color};`,
-      );
+      it('generated label item template has correct label styles', () => {
+        expect($labelEl.find('span.label').attr('style')).toBe(
+          `background-color: ${label.color}; color: ${label.text_color};`,
+        );
+      });
+
+      it('generated label item has a badge class', () => {
+        expect($labelEl.find('span').hasClass('badge')).toEqual(true);
+      });
+
+      it('generated label item template does not have scoped-label class', () => {
+        expect($labelEl.find('.scoped-label')).toHaveLength(0);
+      });
     });
 
-    it('generated label item has a badge class', () => {
-      expect($labelEl.find('span').hasClass('badge')).toEqual(true);
+    describe('when scoped label is present', () => {
+      const label = mockScopedLabels[0];
+      let $labelEl;
+
+      beforeEach(() => {
+        $labelEl = $(
+          LabelsSelect.getLabelTemplate({
+            labels: mockScopedLabels,
+            issueUpdateURL: mockUrl,
+            enableScopedLabels: true,
+            scopedLabelsDocumentationLink: 'docs-link',
+          }),
+        );
+      });
+
+      it('generated label item template has correct label URL', () => {
+        expect($labelEl.find('a').attr('href')).toBe('/foo/bar?label_name[]=Foo%3A%3ABar');
+      });
+
+      it('generated label item template has correct label title', () => {
+        expect($labelEl.find('span.label').text()).toBe(label.title);
+      });
+
+      it('generated label item template has html flag as true', () => {
+        expect($labelEl.find('span.label').attr('data-html')).toBe('true');
+      });
+
+      it('generated label item template has question icon', () => {
+        expect($labelEl.find('i.fa-question-circle')).toHaveLength(1);
+      });
+
+      it('generated label item template has scoped-label class', () => {
+        expect($labelEl.find('.scoped-label')).toHaveLength(1);
+      });
+
+      it('generated label item template has correct label styles', () => {
+        expect($labelEl.find('span.label').attr('style')).toBe(
+          `background-color: ${label.color}; color: ${label.text_color};`,
+        );
+      });
+
+      it('generated label item has a badge class', () => {
+        expect($labelEl.find('span').hasClass('badge')).toEqual(true);
+      });
     });
   });
 });
diff --git a/spec/javascripts/boards/issue_spec.js b/spec/javascripts/boards/issue_spec.js
index 54fb0e8228b..e4ff3eb381f 100644
--- a/spec/javascripts/boards/issue_spec.js
+++ b/spec/javascripts/boards/issue_spec.js
@@ -178,6 +178,7 @@ describe('Issue model', () => {
       spyOn(Vue.http, 'patch').and.callFake((url, data) => {
         expect(data.issue.assignee_ids).toEqual([1]);
         done();
+        return Promise.resolve();
       });
 
       issue.update('url');
@@ -187,6 +188,7 @@ describe('Issue model', () => {
       spyOn(Vue.http, 'patch').and.callFake((url, data) => {
         expect(data.issue.assignee_ids).toEqual([0]);
         done();
+        return Promise.resolve();
       });
 
       issue.removeAllAssignees();
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js
index 5cf6afebd7e..0689fc1cf1f 100644
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js
@@ -45,12 +45,21 @@ describe('DropdownButtonComponent', () => {
         });
         const vmMoreLabels = createComponent(mockMoreLabels);
 
-        expect(vmMoreLabels.dropdownToggleText).toBe('Foo Label +1 more');
+        expect(vmMoreLabels.dropdownToggleText).toBe(
+          `Foo Label +${mockMoreLabels.labels.length - 1} more`,
+        );
         vmMoreLabels.$destroy();
       });
 
       it('returns first label name when `labels` prop has only one item present', () => {
-        expect(vm.dropdownToggleText).toBe('Foo Label');
+        const singleLabel = Object.assign({}, componentConfig, {
+          labels: [mockLabels[0]],
+        });
+        const vmSingleLabel = createComponent(singleLabel);
+
+        expect(vmSingleLabel.dropdownToggleText).toBe(mockLabels[0].title);
+
+        vmSingleLabel.$destroy();
       });
     });
   });
@@ -73,7 +82,7 @@ describe('DropdownButtonComponent', () => {
       const dropdownToggleTextEl = vm.$el.querySelector('.dropdown-toggle-text');
 
       expect(dropdownToggleTextEl).not.toBeNull();
-      expect(dropdownToggleTextEl.innerText.trim()).toBe('Foo Label');
+      expect(dropdownToggleTextEl.innerText.trim()).toBe('Foo Label +1 more');
     });
 
     it('renders dropdown button icon', () => {
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
index 804b33422bd..cb49fa31d20 100644
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
@@ -35,9 +35,12 @@ describe('DropdownValueCollapsedComponent', () => {
       });
 
       it('returns labels names separated by coma when `labels` prop has more than one item', () => {
-        const vmMoreLabels = createComponent(mockLabels.concat(mockLabels));
+        const labels = mockLabels.concat(mockLabels);
+        const vmMoreLabels = createComponent(labels);
 
-        expect(vmMoreLabels.labelsList).toBe('Foo Label, Foo Label');
+        const expectedText = labels.map(label => label.title).join(', ');
+
+        expect(vmMoreLabels.labelsList).toBe(expectedText);
         vmMoreLabels.$destroy();
       });
 
@@ -49,14 +52,19 @@ describe('DropdownValueCollapsedComponent', () => {
 
         const vmMoreLabels = createComponent(mockMoreLabels);
 
-        expect(vmMoreLabels.labelsList).toBe(
-          'Foo Label, Foo Label, Foo Label, Foo Label, Foo Label, and 2 more',
-        );
+        const expectedText = `${mockMoreLabels
+          .slice(0, 5)
+          .map(label => label.title)
+          .join(', ')}, and ${mockMoreLabels.length - 5} more`;
+
+        expect(vmMoreLabels.labelsList).toBe(expectedText);
         vmMoreLabels.$destroy();
       });
 
       it('returns first label name when `labels` prop has only one item present', () => {
-        expect(vm.labelsList).toBe('Foo Label');
+        const text = mockLabels.map(label => label.title).join(', ');
+
+        expect(vm.labelsList).toBe(text);
       });
     });
   });
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
index 3fff781594f..35a9c300953 100644
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import $ from 'jquery';
 
 import dropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue';
 
@@ -15,6 +16,7 @@ const createComponent = (
   return mountComponent(Component, {
     labels,
     labelFilterBasePath,
+    enableScopedLabels: true,
   });
 };
 
@@ -67,6 +69,26 @@ describe('DropdownValueComponent', () => {
         expect(styleObj.backgroundColor).toBe(label.color);
       });
     });
+
+    describe('scopedLabelsDescription', () => {
+      it('returns html for tooltip', () => {
+        const html = vm.scopedLabelsDescription(mockLabels[1]);
+        const $el = $.parseHTML(html);
+
+        expect($el[0]).toHaveClass('scoped-label-tooltip-title');
+        expect($el[2].textContent).toEqual(mockLabels[1].description);
+      });
+    });
+
+    describe('showScopedLabels', () => {
+      it('returns true if the label is scoped label', () => {
+        expect(vm.showScopedLabels(mockLabels[1])).toBe(true);
+      });
+
+      it('returns false when label is a regular label', () => {
+        expect(vm.showScopedLabels(mockLabels[0])).toBe(false);
+      });
+    });
   });
 
   describe('template', () => {
@@ -91,15 +113,25 @@ describe('DropdownValueComponent', () => {
       );
     });
 
-    it('renders label element with tooltip and styles based on label details', () => {
+    it('renders label element and styles based on label details', () => {
       const labelEl = vm.$el.querySelector('a span.badge.color-label');
 
       expect(labelEl).not.toBeNull();
-      expect(labelEl.dataset.placement).toBe('bottom');
-      expect(labelEl.dataset.container).toBe('body');
-      expect(labelEl.dataset.originalTitle).toBe(mockLabels[0].description);
       expect(labelEl.getAttribute('style')).toBe('background-color: rgb(186, 218, 85);');
       expect(labelEl.innerText.trim()).toBe(mockLabels[0].title);
     });
+
+    describe('label is of scoped-label type', () => {
+      it('renders a scoped-label-wrapper span to incorporate 2 anchors', () => {
+        expect(vm.$el.querySelector('span.scoped-label-wrapper')).not.toBeNull();
+      });
+
+      it('renders anchor tag containing question icon', () => {
+        const anchor = vm.$el.querySelector('.scoped-label-wrapper a.scoped-label');
+
+        expect(anchor).not.toBeNull();
+        expect(anchor.querySelector('i.fa-question-circle')).not.toBeNull();
+      });
+    });
   });
 });
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js
index 3fcb91b6f5e..70025f041a7 100644
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js
@@ -6,6 +6,13 @@ export const mockLabels = [
     color: '#BADA55',
     text_color: '#FFFFFF',
   },
+  {
+    id: 27,
+    title: 'Foo::Bar',
+    description: 'Foobar',
+    color: '#0033CC',
+    text_color: '#FFFFFF',
+  },
 ];
 
 export const mockSuggestedColors = [