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

5 files changed, 43 insertions, 6 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')
diff --git a/app/helpers/milestones_helper.rb b/app/helpers/milestones_helper.rb
index 87fc2db6901..b3e6e468ecd 100644
--- a/app/helpers/milestones_helper.rb
+++ b/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)
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index 0b0e2bd6868..73772cc0e32 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/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
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index c7991d53a09..fb906de829a 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/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