Fixes #3928 - Show which escalation type escalated in ticket zoom.

app/assets/javascripts/app/controllers/_application_controller/_base.coffee

@@ -309,6 +309,7 @@ class App.Controller extends Spine.Controller
     if item.attr('timezone')
       newTitle += ' ' + item.attr('timezone')
 
+    if !item.hasClass('noTitle')
       item.attr('title', newTitle)
     item.html(time)
 

app/assets/javascripts/app/controllers/ticket_zoom/meta.coffee

@@ -1,4 +1,7 @@
 class App.TicketZoomMeta extends App.ControllerObserver
+  @extend App.PopoverProvidable
+  @registerPopovers 'Escalation'
+
   model: 'Ticket'
   observe:
     number: true
@@ -10,3 +13,4 @@ class App.TicketZoomMeta extends App.ControllerObserver
       ticket:     ticket
       isCustomer: ticket.currentView() is 'customer'
     )
+    @renderPopovers()

app/assets/javascripts/app/lib/app_post/popover_provider/escalation_popover_provider.coffee

@@ -0,0 +1,18 @@
+class Escalation extends App.SingleObjectPopoverProvider
+  @klass = App.Ticket
+  @selectorCssClassPrefix = 'escalation'
+  @templateName = 'escalation'
+  @includeData = false
+
+  displayTitleUsing: (object) ->
+    App.i18n.translateInline('Escalation Times')
+
+  buildContentFor: (elem) ->
+    id = @objectIdFor(elem)
+    object = @constructor.klass.fullLocal(id)
+
+    @buildHtmlContent(
+      object: object
+    )
+
+App.PopoverProvider.registerProvider('Escalation', Escalation)

app/assets/javascripts/app/lib/mixins/view_helpers.coffee

@@ -146,12 +146,18 @@ App.ViewHelpers =
     App.Utils.humanFileSize(size)
 
   # define pretty/human time helper
-  humanTime: (time, escalation = false, cssClass = '') ->
+  humanTime: (time, escalation = false, cssClass = '', setTitle = true) ->
     timestamp = App.i18n.translateTimestamp(time)
     if escalation
       cssClass += ' escalation'
     humanTime = App.PrettyDate.humanTime(time, escalation)
-    "<time class=\"humanTimeFromNow #{cssClass}\" datetime=\"#{time}\" title=\"#{timestamp}\">#{humanTime}</time>"
+
+    title = " title=\"#{timestamp}\""
+    if !setTitle
+      title = ''
+      cssClass += ' noTitle'
+
+    "<time class=\"humanTimeFromNow #{cssClass}\" datetime=\"#{time}\"#{title}>#{humanTime}</time>"
 
   # Why not just use `Icon: App.Utils.icon`?
   # Because App.Utils isn't loaded until after this file.

app/assets/javascripts/app/views/popover/escalation.jst.eco

@@ -0,0 +1,21 @@
+<hr/>
+<div class="horizontal two-columns">
+<% if @object.first_response_escalation_at: %>
+  <div class="column">
+    <label><%- @T('First Response Time') %></label>
+    <div class="u-textTruncate"><%- @humanTime(@object.first_response_escalation_at, true) %></div>
+  </div>
+<% end %>
+<% if @object.update_escalation_at: %>
+  <div class="column">
+    <label><%- @T('Update Time') %></label>
+    <div class="u-textTruncate"><%- @humanTime(@object.update_escalation_at, true) %></div>
+  </div>
+<% end %>
+<% if @object.close_escalation_at: %>
+  <div class="column">
+    <label><%- @T('Solution Time') %></label>
+    <div class="u-textTruncate"><%- @humanTime(@object.close_escalation_at, true) %></div>
+  </div>
+<% end %>
+</div>

app/assets/javascripts/app/views/ticket_zoom/meta.jst.eco

@@ -1,3 +1,8 @@
 <small class="task-subline">
-  <%- @C('ticket_hook') %><span class="ticket-number js-objectNumber" data-number="<%- @C('ticket_hook') %><%= @ticket.number %>"><%= @ticket.number %></span> - <%- @T('created') %> <%- @humanTime(@ticket.created_at) %> <% if !@isCustomer && @ticket.escalation_at: %> - <%- @T('escalation') %> <%- @humanTime(@ticket.escalation_at, true) %><% end %>
+  <%- @C('ticket_hook') %><span class="ticket-number js-objectNumber" data-number="<%- @C('ticket_hook') %><%= @ticket.number %>"><%= @ticket.number %></span>
+  - <%- @T('created') %> <%- @humanTime(@ticket.created_at) %>
+
+<% if !@isCustomer: %>
+  <% if @ticket.escalation_at: %> - <span class="escalation-popover" data-id="<%= @ticket.id %>"><%- @T('escalation') %> <%- @humanTime(@ticket.escalation_at, true, '', false) %><% end %></span>
+<% end %>
 </small>

i18n/zammad.pot

@@ -3778,6 +3778,7 @@ msgstr ""
 msgid "Escalation At"
 msgstr ""
 
+#: app/assets/javascripts/app/lib/app_post/popover_provider/escalation_popover_provider.coffee
 #: app/assets/javascripts/app/views/sla/index.jst.eco
 msgid "Escalation Times"
 msgstr ""
@@ -4017,6 +4018,7 @@ msgid "First Response In Min"
 msgstr ""
 
 #: app/assets/javascripts/app/views/generic/sla_times.jst.eco
+#: app/assets/javascripts/app/views/popover/escalation.jst.eco
 #: app/assets/javascripts/app/views/sla/index.jst.eco
 msgid "First Response Time"
 msgstr ""
@@ -8303,6 +8305,7 @@ msgid "Slack integration"
 msgstr ""
 
 #: app/assets/javascripts/app/views/generic/sla_times.jst.eco
+#: app/assets/javascripts/app/views/popover/escalation.jst.eco
 #: app/assets/javascripts/app/views/sla/index.jst.eco
 msgid "Solution Time"
 msgstr ""
@@ -9629,6 +9632,7 @@ msgid "Update In Min"
 msgstr ""
 
 #: app/assets/javascripts/app/views/generic/sla_times.jst.eco
+#: app/assets/javascripts/app/views/popover/escalation.jst.eco
 #: app/assets/javascripts/app/views/sla/index.jst.eco
 msgid "Update Time"
 msgstr ""

spec/system/ticket/zoom_spec.rb

@@ -2503,4 +2503,26 @@ RSpec.describe 'Ticket zoom', type: :system do
       end
     end
   end
+
+  describe 'Show which escalation type escalated in ticket zoom #3928', authenticated_as: :authenticate do
+    let(:sla) { create(:sla, first_response_time: 1, update_time: 1, solution_time: 1) }
+    let(:ticket) { create(:ticket, group: Group.find_by(name: 'Users')) }
+
+    def authenticate
+      sla
+      true
+    end
+
+    before do
+      visit "#ticket/zoom/#{ticket.id}"
+    end
+
+    it 'does show the extended escalation information' do
+      sleep 4 # wait for popup killer
+      page.find('.escalation-popover').hover
+      expect(page).to have_text('FIRST RESPONSE TIME')
+      expect(page).to have_text('UPDATE TIME')
+      expect(page).to have_text('SOLUTION TIME')
+    end
+  end
 end