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

app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue

 <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

app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue

 <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">

locale/gitlab.pot

@@ -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 ""
 

spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js

@@ -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');
+    });
   });
 });