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

2 files changed, 37 insertions, 2 deletions

diff --git a/app/assets/javascripts/lib/common_utils.js.coffee b/app/assets/javascripts/lib/common_utils.js.coffee
new file mode 100644
index 00000000000..0000e99a650
--- /dev/null
+++ b/app/assets/javascripts/lib/common_utils.js.coffee
@@ -0,0 +1,24 @@
+((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
diff --git a/app/assets/javascripts/milestone_select.js.coffee b/app/assets/javascripts/milestone_select.js.coffee
index 1d061d5edb7..648e1f3bde0 100644
--- a/app/assets/javascripts/milestone_select.js.coffee
+++ b/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')