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

2 files changed, 40 insertions, 20 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
index 7f1eb6bcec4..11fac3bb12c 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
@@ -1,6 +1,11 @@
 <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
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
index dac438a702d..6e7194ccc9e 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
@@ -1,25 +1,23 @@
 <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">