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

Reveal labels dropdown when labels icon is clicked on collapsed Epic sidebar

Closes #5514

See merge request gitlab-org/gitlab-ee!5298

app/assets/javascripts/vue_shared/models/label.js

-class ListLabel {
+export default class ListLabel {
   constructor(obj) {
     this.id = obj.id;
     this.title = obj.title;

ee/app/assets/javascripts/epics/epic_show/epic_show_bundle.js

 import Vue from 'vue';
-import '~/vue_shared/models/label';
 import EpicShowApp from './components/epic_show_app.vue';
 
 export default () => {

ee/app/assets/javascripts/epics/sidebar/components/sidebar_app.vue

 <script>
-  /* global ListLabel */
   /* eslint-disable vue/require-default-prop */
+  import _ from 'underscore';
   import Cookies from 'js-cookie';
   import Flash from '~/flash';
   import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
+  import ListLabel from '~/vue_shared/models/label';
   import SidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
   import SidebarCollapsedGroupedDatePicker from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue';
   import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
@@ -73,6 +74,7 @@
         store,
         // Backend will pass the appropriate css class for the contentContainer
         collapsed: Cookies.get('collapsed_gutter') === 'true',
+        autoExpanded: false,
         savingStartDate: false,
         savingEndDate: false,
         service: new SidebarService(this.endpoint),
@@ -91,6 +93,21 @@
 
         Cookies.set('collapsed_gutter', this.collapsed);
       },
+      toggleSidebarRevealLabelsDropdown() {
+        const contentContainer = this.$el.closest('.page-with-contextual-sidebar');
+        this.toggleSidebar();
+        // When sidebar is expanded, we need to wait
+        // for rendering to finish before opening
+        // dropdown as otherwise it causes `calc()`
+        // used in CSS to miscalculate collapsed
+        // sidebar size.
+        _.debounce(() => {
+          this.autoExpanded = true;
+          contentContainer
+            .querySelector('.js-sidebar-dropdown-toggle')
+            .dispatchEvent(new Event('click', { bubbles: true, cancelable: false }));
+        }, 100)();
+      },
       saveDate(dateType = 'start', newDate) {
         const type = dateType === 'start' ? dateType : 'end';
         const capitalizedType = capitalizeFirstCharacter(type);
@@ -122,17 +139,25 @@
           const labelIndex = this.epicContext.labels.findIndex(l => l.id === label.id);
 
           if (labelIndex === -1) {
-            this.epicContext.labels.push(new ListLabel({
-              id: label.id,
-              title: label.title,
-              color: label.color[0],
-              textColor: label.text_color,
-            }));
+            this.epicContext.labels.push(
+              new ListLabel({
+                id: label.id,
+                title: label.title,
+                color: label.color[0],
+                textColor: label.text_color,
+              }),
+            );
           } else {
             this.epicContext.labels.splice(labelIndex, 1);
           }
         }
       },
+      handleDropdownClose() {
+        if (this.autoExpanded) {
+          this.autoExpanded = false;
+          this.toggleSidebar();
+        }
+      },
     },
   };
 </script>
@@ -192,6 +217,8 @@
         :can-edit="editable"
         :show-create="true"
         @onLabelClick="handleLabelClick"
+        @onDropdownClose="handleDropdownClose"
+        @toggleCollapse="toggleSidebarRevealLabelsDropdown"
       >
         {{ __('None') }}
       </sidebar-labels-select>

ee/changelogs/unreleased/5514-fix-epic-collapsed-sidebar-label-click.yml

+---
+title: Reveal labels dropdown when labels icon is clicked on collapsed Epic sidebar
+merge_request: 5298
+author:
+type: fixed

ee/spec/features/epics/epic_labels_spec.rb

@@ -11,6 +11,8 @@ describe 'Assign labels to an epic', :js do
     stub_licensed_features(epics: true)
     sign_in(user)
 
+    set_cookie('collapsed_gutter', 'true')
+
     visit group_epic_path(group, epic)
   end
 
@@ -30,4 +32,33 @@ describe 'Assign labels to an epic', :js do
       end
     end
   end
+
+  context 'when labels icon is clicked on collapsed sidebar' do
+    before do
+      page.within('aside.right-sidebar') do
+        find('.fa-tags').click
+      end
+      wait_for_requests
+    end
+
+    it 'expands sidebar' do
+      page.within('.content-wrapper .content') do
+        expect(page).to have_css('.right-sidebar-expanded')
+      end
+    end
+
+    it 'opens labels dropdown' do
+      page.within('aside.right-sidebar') do
+        expect(page).to have_css('.js-selectbox .dropdown.open')
+      end
+    end
+
+    it 'collapses sidebar when clicked outside' do
+      page.within('.content-wrapper') do
+        find('.content').click
+
+        expect(page).to have_css('.right-sidebar-collapsed')
+      end
+    end
+  end
 end

spec/javascripts/epics/sidebar/components/sidebar_app_spec.js

@@ -112,6 +112,10 @@ describe('epicSidebar', () => {
     it('should render collapsed grouped date picker', () => {
       expect(vm.$el.querySelector('.sidebar-collapsed-icon span').innerText.trim()).toEqual('From Jan 1 2017');
     });
+
+    it('should render collapsed labels picker', () => {
+      expect(vm.$el.querySelector('.js-labels-block .sidebar-collapsed-icon span').innerText.trim()).toEqual('1');
+    });
   });
 
   describe('toggleSidebar', () => {
@@ -217,6 +221,26 @@ describe('epicSidebar', () => {
     });
   });
 
+  describe('handleDropdownClose', () => {
+    it('calls toggleSidebar when `autoExpanded` prop is true', () => {
+      spyOn(vm, 'toggleSidebar');
+      vm.autoExpanded = true;
+      vm.handleDropdownClose();
+
+      expect(vm.autoExpanded).toBe(false);
+      expect(vm.toggleSidebar).toHaveBeenCalled();
+    });
+
+    it('does not call toggleSidebar when `autoExpanded` prop is false', () => {
+      spyOn(vm, 'toggleSidebar');
+      vm.autoExpanded = false;
+      vm.handleDropdownClose();
+
+      expect(vm.autoExpanded).toBe(false);
+      expect(vm.toggleSidebar).not.toHaveBeenCalled();
+    });
+  });
+
   describe('saveDate error', () => {
     let interceptor;
     let component;