Commit 4a56c554 authored by Filipa Lacerda's avatar Filipa Lacerda

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
parents 328ed1f9 52ed6946
class ListLabel {
export default class ListLabel {
constructor(obj) {
this.id = obj.id;
this.title = obj.title;
......
import Vue from 'vue';
import '~/vue_shared/models/label';
import EpicShowApp from './components/epic_show_app.vue';
export default () => {
......
<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({
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>
......
---
title: Reveal labels dropdown when labels icon is clicked on collapsed Epic sidebar
merge_request: 5298
author:
type: fixed
......@@ -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
......@@ -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;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment