Commit 274d3380 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'ce-7103-show-milestone-dates-within-tooltips' into 'master'

CE Backport: Show actual Milestone dates within tooltips for Milestones in Epics sidebar

See merge request gitlab-org/gitlab-ce!22653
parents 5a03ee76 88618857
<script>
import tooltip from '~/vue_shared/directives/tooltip';
export default {
name: 'CollapsedCalendarIcon',
directives: {
tooltip,
},
props: {
containerClass: {
type: String,
......@@ -17,6 +22,11 @@
required: false,
default: true,
},
tooltipText: {
type: String,
required: false,
default: '',
},
},
methods: {
click() {
......@@ -28,7 +38,13 @@
<template>
<div
v-tooltip
:class="containerClass"
:title="tooltipText"
data-container="body"
data-placement="left"
data-html="true"
data-boundary="viewport"
@click="click"
>
<i
......
<script>
import { dateInWords } from '../../../lib/utils/datetime_utility';
import toggleSidebar from './toggle_sidebar.vue';
import { __ } from '~/locale';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { dateInWords, timeFor } from '~/lib/utils/datetime_utility';
import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
export default {
name: 'SidebarCollapsedGroupedDatePicker',
components: {
toggleSidebar,
collapsedCalendarIcon,
},
mixins: [
timeagoMixin,
],
props: {
collapsed: {
type: Boolean,
required: false,
default: true,
},
showToggleSidebar: {
type: Boolean,
required: false,
default: false,
},
minDate: {
type: Date,
required: false,
......@@ -51,7 +49,7 @@
},
iconClass() {
const disabledClass = this.disableClickableIcons ? 'disabled' : '';
return `block sidebar-collapsed-icon calendar-icon ${disabledClass}`;
return `sidebar-collapsed-icon calendar-icon ${disabledClass}`;
},
},
methods: {
......@@ -63,7 +61,21 @@
const dateWords = dateInWords(date, true);
const parsedDateWords = dateWords ? dateWords.replace(',', '') : dateWords;
return date ? parsedDateWords : 'None';
return date ? parsedDateWords : __('None');
},
tooltipText(dateType = 'min') {
const defaultText = dateType === 'min' ? __('Start date') : __('Due date');
const date = this[`${dateType}Date`];
const timeAgo = dateType === 'min' ? this.timeFormated(date) : timeFor(date);
const dateText = date ? [
this.dateText(dateType),
`(${timeAgo})`,
].join(' ') : '';
if (date) {
return [defaultText, dateText].join('<br />');
}
return __('Start and due date');
},
},
};
......@@ -71,18 +83,10 @@
<template>
<div class="block sidebar-grouped-item">
<div
v-if="showToggleSidebar"
class="issuable-sidebar-header"
>
<toggle-sidebar
:collapsed="collapsed"
@toggle="toggleSidebar"
/>
</div>
<collapsed-calendar-icon
v-if="showMinDateBlock"
:container-class="iconClass"
:tooltip-text="tooltipText('min')"
@click="toggleSidebar"
>
<span class="sidebar-collapsed-value">
......@@ -99,7 +103,7 @@
<collapsed-calendar-icon
v-if="maxDate"
:container-class="iconClass"
:show-icon="!minDate"
:tooltip-text="tooltipText('max')"
@click="toggleSidebar"
>
<span class="sidebar-collapsed-value">
......
......@@ -5796,6 +5796,12 @@ msgstr ""
msgid "Start a %{new_merge_request} with these changes"
msgstr ""
msgid "Start and due date"
msgstr ""
msgid "Start date"
msgstr ""
msgid "Start the Runner!"
msgstr ""
......
......@@ -11,16 +11,6 @@ describe('collapsedGroupedDatePicker', () => {
});
});
it('should render toggle sidebar if showToggleSidebar', (done) => {
expect(vm.$el.querySelector('.issuable-sidebar-header')).toBeDefined();
vm.showToggleSidebar = false;
Vue.nextTick(() => {
expect(vm.$el.querySelector('.issuable-sidebar-header')).toBeNull();
done();
});
});
describe('toggleCollapse events', () => {
beforeEach((done) => {
spyOn(vm, 'toggleSidebar');
......@@ -28,12 +18,6 @@ describe('collapsedGroupedDatePicker', () => {
Vue.nextTick(done);
});
it('should emit when sidebar is toggled', () => {
vm.$el.querySelector('.gutter-toggle').click();
expect(vm.toggleSidebar).toHaveBeenCalled();
});
it('should emit when collapsed-calendar-icon is clicked', () => {
vm.$el.querySelector('.sidebar-collapsed-icon').click();
......@@ -92,5 +76,11 @@ describe('collapsedGroupedDatePicker', () => {
expect(icons.length).toEqual(1);
expect(icons[0].innerText.trim()).toEqual('None');
});
it('should have tooltip as `Start and due date`', () => {
const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon');
expect(icons[0].dataset.originalTitle).toBe('Start and due date');
});
});
});
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