Merge branch 'milestone-tooltip' into 'master'

Add milestone expire date to the right sidebar

## What does this MR do?
Shows milestone expire date tooltip in the sidebar. It also shows the tooltip when sidebar is collapsed.

## Are there points in the code the reviewer needs to double check?
`common_utils.js.coffee` and `milestones_helper.rb` should be reviewed deeply.

## What are the relevant issue numbers?
https://gitlab.com/gitlab-org/gitlab-ce/issues/17355

## Screencast
![zngAcytBWq](/uploads/bd8514506aa5010aef9b081455ee90af/zngAcytBWq.gif)

See merge request !4448

CHANGELOG

@@ -45,6 +45,7 @@ v 8.9.0 (unreleased)
   - Cache assigned issue and merge request counts in sidebar nav
   - Use Knapsack only in CI environment
   - Cache project build count in sidebar nav
+  - Add milestone expire date to the right sidebar
   - Fix markdown_spec to use before instead of before(:all) to properly cleanup database after testing
   - Reduce number of queries needed to render issue labels in the sidebar
   - Improve error handling importing projects

app/assets/javascripts/lib/common_utils.js.coffee

+((w) ->
+
+  jQuery.timefor = (time, suffix, expiredLabel) ->
+
+    return '' unless time
+
+    suffix       or= 'remaining'
+    expiredLabel or= 'Past due'
+
+    jQuery.timeago.settings.allowFuture = yes
+
+    { suffixFromNow } = jQuery.timeago.settings.strings
+    jQuery.timeago.settings.strings.suffixFromNow = suffix
+
+    timefor = $.timeago time
+
+    if timefor.indexOf('ago') > -1
+      timefor = expiredLabel
+
+    jQuery.timeago.settings.strings.suffixFromNow = suffixFromNow
+
+    return timefor
+
+) window

app/assets/javascripts/milestone_select.js.coffee

@@ -24,11 +24,21 @@ class @MilestoneSelect
 
       if issueUpdateURL
         milestoneLinkTemplate = _.template(
-          '<a href="/<%= namespace %>/<%= path %>/milestones/<%= iid %>"><%= _.escape(title) %></a>'
+          '<a href="/<%= namespace %>/<%= path %>/milestones/<%= iid %>">
+            <span class="has-tooltip" data-container="body" title="<%= remaining %>">
+              <%= _.escape(title) %>
+            </span>
+          </a>'
         )
 
         milestoneLinkNoneTemplate = '<div class="light">None</div>'
 
+        collapsedSidebarLabelTemplate = _.template(
+          '<span class="has-tooltip" data-container="body" title="<%= remaining %>" data-placement="left">
+            <%= _.escape(title) %>
+          </span>'
+        )
+
       $dropdown.glDropdown(
         data: (term, callback) ->
           $.ajax(
@@ -122,8 +132,9 @@ class @MilestoneSelect
               if data.milestone?
                 data.milestone.namespace = _this.currentProject.namespace
                 data.milestone.path = _this.currentProject.path
+                data.milestone.remaining = $.timefor data.milestone.due_date
                 $value.html(milestoneLinkTemplate(data.milestone))
-                $sidebarCollapsedValue.find('span').text(data.milestone.title)
+                $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone))
               else
                 $value.html(milestoneLinkNoneTemplate)
                 $sidebarCollapsedValue.find('span').text('No')

app/helpers/milestones_helper.rb

@@ -56,7 +56,7 @@ module MilestonesHelper
 
   def milestone_remaining_days(milestone)
     if milestone.expired?
-      content_tag(:strong, 'expired')
+      content_tag(:strong, 'Past due')
     elsif milestone.due_date
       days    = milestone.remaining_days
       content = content_tag(:strong, days)

app/views/projects/milestones/show.html.haml

@@ -6,7 +6,7 @@
     - if @milestone.closed?
       Closed
     - elsif @milestone.expired?
-      Expired
+      Past due
     - else
       Open
   %span.identifier

app/views/shared/issuable/_sidebar.html.haml

@@ -41,7 +41,8 @@
           = icon('clock-o')
           %span
             - if issuable.milestone
-              = issuable.milestone.title
+              %span.has-tooltip{title: milestone_remaining_days(issuable.milestone), data: {container: 'body', html: 1, placement: 'left'}}
+                = issuable.milestone.title
             - else
               None
         .title.hide-collapsed
@@ -52,7 +53,8 @@
         .value.bold.hide-collapsed
           - if issuable.milestone
             = link_to namespace_project_milestone_path(@project.namespace, @project, issuable.milestone) do
-              = issuable.milestone.title
+              %span.has-tooltip{title: milestone_remaining_days(issuable.milestone), data: {container: 'body', html: 1}}
+                = issuable.milestone.title
           - else
             .light None