Merge branch 'issue_17607' into 'master'

Fix local timeago on user dashboard

## What does this MR do?
Fixes incorrect date times on tooltips on the dashboard page

## Are there points in the code the reviewer needs to double check?
Yes,  The tooltip has to be recreated again because we needed a custom CSS classname in order to fix the date being splitted into two lines.

## Why was this MR needed?
Because the datetimes were incorrect we have to have the same format for .timeago() instances.

## What are the relevant issue numbers?
#17607

## Screenshots (if relevant)

**Before**

<img src="/uploads/f40cd58e8086d9675262e98a1fe57885/Screen_Shot_2016-05-24_at_7.23.25_PM.png" width="705">

**After**

<img src="/uploads/bd48046ef11659cc742f827b3404fbcd/Screen_Shot_2016-05-24_at_7.22.29_PM.png" width="704">


See merge request !4285

7 files changed, 70 insertions, 5 deletions

diff --git a/app/assets/javascripts/activities.js.coffee b/app/assets/javascripts/activities.js.coffee
index 5092e824e65..ed5a5d0260c 100644
--- a/app/assets/javascripts/activities.js.coffee
+++ b/app/assets/javascripts/activities.js.coffee
@@ -1,11 +1,14 @@
 class @Activities
   constructor: ->
-    Pager.init 20, true
+    Pager.init 20, true, false, @updateTooltips
     $(".event-filter-link").on "click", (event) =>
       event.preventDefault()
       @toggleFilter($(event.currentTarget))
       @reloadActivities()
 
+  updateTooltips: ->
+    gl.utils.localTimeAgo($('.js-timeago', '#activity'))
+
   reloadActivities: ->
     $(".content_list").html ''
     Pager.init 20, true
diff --git a/app/assets/javascripts/lib/datetime_utility.js.coffee b/app/assets/javascripts/lib/datetime_utility.js.coffee
index ad1d1c70481..948d6dbf07e 100644
--- a/app/assets/javascripts/lib/datetime_utility.js.coffee
+++ b/app/assets/javascripts/lib/datetime_utility.js.coffee
@@ -12,6 +12,13 @@
           $el.attr('title', gl.utils.formatDate($el.attr('datetime')))
     )
 
-    $timeagoEls.timeago() if setTimeago
+    if setTimeago
+      $timeagoEls.timeago()
+      $timeagoEls.tooltip('destroy')
+
+      # Recreate with custom template
+      $timeagoEls.tooltip(
+        template: '<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+      )
 
 ) window
diff --git a/app/assets/javascripts/pager.js.coffee b/app/assets/javascripts/pager.js.coffee
index 0ff83b7f0c8..8049c5c30e2 100644
--- a/app/assets/javascripts/pager.js.coffee
+++ b/app/assets/javascripts/pager.js.coffee
@@ -1,5 +1,5 @@
 @Pager =
-  init: (@limit = 0, preload, @disable = false) ->
+  init: (@limit = 0, preload, @disable = false, @callback = $.noop) ->
     @loading = $('.loading').first()
 
     if preload
@@ -19,6 +19,7 @@
         @loading.hide()
       success: (data) ->
         Pager.append(data.count, data.html)
+        Pager.callback()
       dataType: "json"
 
   append: (count, html) ->
diff --git a/app/assets/javascripts/user_tabs.js.coffee b/app/assets/javascripts/user_tabs.js.coffee
index 70614396a4e..29dad21faed 100644
--- a/app/assets/javascripts/user_tabs.js.coffee
+++ b/app/assets/javascripts/user_tabs.js.coffee
@@ -122,6 +122,9 @@ class @UserTabs
         @parentEl.find(tabSelector).html(data.html)
         @loaded[action] = true
 
+        # Fix tooltips
+        gl.utils.localTimeAgo($('.js-timeago', tabSelector))
+
   loadActivities: (source) ->
     return if @loaded['activity'] is true
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index 6a45c34ccbb..e3154657c54 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -192,3 +192,8 @@
 .text-info:hover {
   color: $brand-info;
 }
+
+// Prevent datetimes on tooltips to break into two lines
+.local-timeago {
+  white-space: nowrap;
+}
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 8268380dafc..92305594a81 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -79,10 +79,10 @@
       %li.js-contributed-tab
         = link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do
           Contributed projects
-      %li.projects-tab
+      %li.js-projects-tab
         = link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do
           Personal projects
-      %li.snippets-tab
+      %li.js-snippets-tab
         = link_to user_snippets_path, data: {target: 'div#snippets', action: 'snippets', toggle: 'tab'} do
           Snippets
 
diff --git a/spec/features/dashboard/datetime_on_tooltips_spec.rb b/spec/features/dashboard/datetime_on_tooltips_spec.rb
new file mode 100644
index 00000000000..365cb445df1
--- /dev/null
+++ b/spec/features/dashboard/datetime_on_tooltips_spec.rb
@@ -0,0 +1,46 @@
+require 'spec_helper'
+
+feature 'Tooltips on .timeago dates', feature: true, js: true do
+  include WaitForAjax
+
+  let(:user)            { create(:user) }
+  let(:project)         { create(:project, name: 'test', namespace: user.namespace) }
+  let(:created_date)    { Date.yesterday.to_time }
+  let(:expected_format) { created_date.strftime('%b %-d, %Y %l:%M%P UTC') }
+
+  context 'on the activity tab' do
+    before do
+      project.team << [user, :master]
+
+      Event.create( project: project, author_id: user.id, action: Event::JOINED,
+                    updated_at: created_date, created_at: created_date)
+
+      login_as user
+      visit user_path(user)
+      wait_for_ajax()
+
+      page.find('.js-timeago').hover
+    end
+
+    it 'has the datetime formated correctly' do
+      expect(page).to have_selector('.local-timeago', text: expected_format)
+    end
+  end
+
+  context 'on the snippets tab' do
+    before do
+      project.team << [user, :master]
+      create(:snippet, author: user, updated_at: created_date, created_at: created_date)
+
+      login_as user
+      visit user_snippets_path(user)
+      wait_for_ajax()
+
+      page.find('.js-timeago').hover
+    end
+
+    it 'has the datetime formated correctly' do
+      expect(page).to have_selector('.local-timeago', text: expected_format)
+    end
+  end
+end