Merge branch 'ce-5514-fix-epic-collapsed-sidebar-label-click' into 'master'

CE Backport: Reveal labels dropdown when labels icon is clicked on collapsed Epic sidebar

See merge request gitlab-org/gitlab-ce!18255

app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue

 <script>
+import $ from 'jquery';
 import { __ } from '~/locale';
 import LabelsSelect from '~/labels_select';
 import LoadingIcon from '../../loading_icon.vue';
@@ -98,11 +99,18 @@ export default {
     this.labelsDropdown = new LabelsSelect(this.$refs.dropdownButton, {
       handleClick: this.handleClick,
     });
+    $(this.$refs.dropdown).on('hidden.gl.dropdown', this.handleDropdownHidden);
   },
   methods: {
     handleClick(label) {
       this.$emit('onLabelClick', label);
     },
+    handleCollapsedValueClick() {
+      this.$emit('toggleCollapse');
+    },
+    handleDropdownHidden() {
+      this.$emit('onDropdownClose');
+    },
   },
 };
 </script>
@@ -112,6 +120,7 @@ export default {
     <dropdown-value-collapsed
       v-if="showCreate"
       :labels="context.labels"
+      @onValueClick="handleCollapsedValueClick"
     />
     <dropdown-title
       :can-edit="canEdit"
@@ -133,7 +142,10 @@ export default {
         :name="hiddenInputName"
         :label="label"
       />
-      <div class="dropdown">
+      <div
+        class="dropdown"
+        ref="dropdown"
+      >
         <dropdown-button
           :ability-name="abilityName"
           :field-name="hiddenInputName"

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue

@@ -26,6 +26,11 @@ export default {
       return labelsString;
     },
   },
+  methods: {
+    handleClick() {
+      this.$emit('onValueClick');
+    },
+  },
 };
 </script>
 
@@ -36,6 +41,7 @@ export default {
     data-placement="left"
     data-container="body"
     :title="labelsList"
+    @click="handleClick"
   >
     <i
       aria-hidden="true"

spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js

@@ -73,6 +73,22 @@ describe('BaseComponent', () => {
         expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]);
       });
     });
+
+    describe('handleCollapsedValueClick', () => {
+      it('emits toggleCollapse event on component', () => {
+        spyOn(vm, '$emit');
+        vm.handleCollapsedValueClick();
+        expect(vm.$emit).toHaveBeenCalledWith('toggleCollapse');
+      });
+    });
+
+    describe('handleDropdownHidden', () => {
+      it('emits onDropdownClose event on component', () => {
+        spyOn(vm, '$emit');
+        vm.handleDropdownHidden();
+        expect(vm.$emit).toHaveBeenCalledWith('onDropdownClose');
+      });
+    });
   });
 
   describe('mounted', () => {

spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js

@@ -56,6 +56,16 @@ describe('DropdownValueCollapsedComponent', () => {
     });
   });
 
+  describe('methods', () => {
+    describe('handleClick', () => {
+      it('emits onValueClick event on component', () => {
+        spyOn(vm, '$emit');
+        vm.handleClick();
+        expect(vm.$emit).toHaveBeenCalledWith('onValueClick');
+      });
+    });
+  });
+
   describe('template', () => {
     it('renders component container element with tooltip`', () => {
       expect(vm.$el.dataset.placement).toBe('left');