Merge pull request #13957 from ncounter/time-component

Time component

src/api/app/assets/stylesheets/webui/texts.scss

@@ -27,3 +27,7 @@
 .ms-0_6 {
   margin-left: 0.6rem !important;
 }
+
+time {
+  text-decoration: 1px dashed underline $gray-400;
+}

src/api/app/components/bs_request_comment_component.html.haml

@@ -5,7 +5,7 @@
     = link_to(helpers.realname_with_login(comment.user), user_path(comment.user))
     wrote
     = link_to("#comment-#{comment.id}", title: l(comment.created_at.utc), name: "comment-#{comment.id}") do
-      #{time_ago_in_words(comment.created_at)} ago
+      = render TimeComponent.new(time: comment.created_at)
 .timeline-item-comment.mb-4
   .comment-bubble
     - if policy(comment).update? || policy(comment).destroy?

src/api/app/components/bs_request_history_element_component.html.haml

@@ -14,7 +14,7 @@
     - else
       = element.user_action
     = link_to("#status-history-#{element.id}", title: l(element.created_at.utc), name: "status-history-#{element.id}") do
-      #{time_ago_in_words(element.created_at)} ago
+      = render TimeComponent.new(time: element.created_at)
 
 .timeline-item-comment.mb-4
   = render partial: 'webui/shared/collapsible_text', locals: { text: element.comment, extra_css_classes: css_for_comment }

src/api/app/components/notification_component.html.haml

@@ -10,7 +10,8 @@
         .col
           = notification_icon
           = render NotificationNotifiableLinkComponent.new(@notification)
-          %small.text-nowrap #{time_ago_in_words(@notification.created_at)} ago
+          %small.text-nowrap
+            = render TimeComponent.new(time: @notification.created_at)
           - if @notification.notifiable_type == 'BsRequest'
             = render BsRequestStateBadgeComponent.new(bs_request: @notification.notifiable, css_class: 'ms-1')
         .col-auto.actions.ms-auto.align-self-end.align-self-md-start

src/api/app/components/status_message_component.html.haml

@@ -6,7 +6,7 @@
       = helpers.user_with_realname_and_icon(@status_message.user, short: true)
       wrote
       %u
-        #{time_ago_in_words(@status_message.created_at)} ago
+        = render TimeComponent.new(time: @status_message.created_at)
       - if policy(@status_message).update? && policy(@status_message).destroy?
         .float-end<
           = link_to(edit_news_item_path(@status_message), title: 'Edit news item', class: 'me-2') do

src/api/app/components/time_component.html.haml

@@ -0,0 +1,2 @@
+%time{ datetime: time.utc, title: localize(time.utc) }
+  = human_time

src/api/app/components/fuzzy_time_component.rb → src/api/app/components/time_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-class FuzzyTimeComponent < ApplicationComponent
+class TimeComponent < ApplicationComponent
   attr_reader :time
 
   def initialize(time:)
     super
     @time = time.utc
   end
 
-  def human_time_ago
+  def human_time
     now = Time.now.utc
     diff = now - time
 

src/api/app/components/workflow_run_detail_component.html.haml

@@ -46,7 +46,9 @@
               %pre.border.p-2#status-report-request-parameters
                 = status_report.pretty_request_parameters
               %small.text-nowrap{ title: l(status_report.created_at.utc) }
-                Sent #{time_ago_in_words(status_report.created_at)} ago
+                Sent
+                = render TimeComponent.new(time: status_report.created_at)
+
     - else
       No status reports
   .tab-pane.fade{ id: "artifacts-tab-content#{id}", role: 'tabpanel',

src/api/app/helpers/webui/maintenance_incident_helper.rb

@@ -111,7 +111,7 @@ def outgoing_request_links(requests)
             tag.i(nil, class: "fas fa-flag pe-1 request-flag-#{request['state']}", title: "Release request in state '#{request['state']}'")
           end,
           # rubocop:disable Rails/OutputSafety
-          FuzzyTimeComponent.new(time: request.created_at).human_time_ago.html_safe
+          TimeComponent.new(time: request.created_at).human_time.html_safe
           # rubocop:enable Rails/OutputSafety
         ]
       )

src/api/app/views/webui/comment/_content.html.haml

@@ -7,7 +7,7 @@
       = link_to(comment.user, user_path(comment.user))
       wrote
       = link_to("#comment-#{comment.id}", title: I18n.l(comment.created_at.utc), name: "comment-#{comment.id}") do
-        #{time_ago_in_words(comment.created_at)} ago
+        = render TimeComponent.new(time: comment.created_at)
     = render_as_markdown(comment)
     = render partial: 'webui/comment/reply', locals: { comment: comment, level: 0, commentable: commentable }
     - if level <= 3

src/api/app/views/webui/main/_latest_updates.html.haml

@@ -23,4 +23,4 @@
                 = link_to(project_show_path(update[1])) do
                   = update[1]
             %p.mt-1.mb-0
-              = render FuzzyTimeComponent.new(time: update[0])
+              = render TimeComponent.new(time: update[0])

src/api/app/views/webui/package/_commit_item.html.haml

@@ -15,7 +15,7 @@
   - else
     committed
 
-  %u= render FuzzyTimeComponent.new(time: Time.zone.at(commit['time'].to_i))
+  %u= render TimeComponent.new(time: Time.zone.at(commit['time'].to_i))
 
   (revision #{commit['rev']})
 

src/api/app/views/webui/package/_file.html.haml

@@ -9,7 +9,7 @@
     %span.d-none= file[:size].rjust(10, '0')
     = human_readable_fsize(file[:size])
   %td.text-nowrap{ data: { order: "-#{file[:mtime]}" } }
-    = time_ago_in_words(Time.zone.at(file[:mtime].to_i))
+    = render TimeComponent.new(time: Time.zone.at(file[:mtime].to_i))
   / limit download for anonymous user to avoid getting killed by crawlers
   - unless nobody
     %td.text-center<

src/api/app/views/webui/package/_fileinfo.html.haml

@@ -29,7 +29,7 @@
     - btime = Time.zone.at(fileinfo.value('mtime').to_i)
 
     #{btime}
-    = render FuzzyTimeComponent.new(time: btime)
+    = render TimeComponent.new(time: btime)
 
 = render partial: 'deps', locals: { fileinfo: fileinfo,
                                 filename: filename,

src/api/app/views/webui/package/_revision_diff_footer.html.haml

@@ -2,7 +2,7 @@
   %p
     The previous request
     = link_to(request['id'], request_show_path(project, package, request['id']))
-    was declined #{FuzzyTimeComponent.new(time: request['when']).human_time_ago} by
+    was declined #{TimeComponent.new(time: request['when']).human_time} by
     = user_with_realname_and_icon(request['decliner'], short: true)
     with the following message:
     %pre= request['comment']

src/api/app/views/webui/projects/pulse/_pulse_list_entry.html.haml

@@ -3,4 +3,4 @@
   (#{link_to(log_entry.package_name, package_show_path(project.name, log_entry.package_name))})
 - if log_entry.user_name
   by #{link_to(log_entry.user_name, user_path(log_entry.user_name))}
-= render FuzzyTimeComponent.new(time: log_entry.datetime)
+= render TimeComponent.new(time: log_entry.datetime)

src/api/app/views/webui/projects/pulse/_pulse_list_requests.html.haml

@@ -17,4 +17,4 @@
         by
         = link_to(user_path(request.creator)) do
           = request.creator
-      = render FuzzyTimeComponent.new(time: request.updated_at)
+      = render TimeComponent.new(time: request.updated_at)

src/api/app/views/webui/request/_action_text.html.haml

@@ -38,4 +38,4 @@
       %p.mb-0.mt-0.small
         by
         = details['user']
-        #{ApplicationController.helpers.time_ago_in_words(details['time'].to_i)} ago
+        = render TimeComponent.new(time: details['time'].to_i)

src/api/app/views/webui/request/_request_history.html.haml

@@ -7,7 +7,8 @@
       = link_to(user, user_path(user))
       created request
       = link_to('#request-creation', title: I18n.l(bs_request.created_at.utc), name: 'request-creation') do
-        #{time_ago_in_words(bs_request.created_at)} ago
+        = render TimeComponent.new(time: bs_request.created_at)
+
 
     = render partial: 'webui/shared/collapsible_text', locals: { text: bs_request.description }
 

src/api/app/views/webui/request/_request_history_element.html.haml

@@ -10,6 +10,6 @@
       - else
         = element.user_action
       = link_to("#status-history-#{element.id}", title: I18n.l(element.created_at.utc), name: "status-history-#{element.id}") do
-        #{time_ago_in_words(element.created_at)} ago
+        = render TimeComponent.new(time: element.created_at)
 
     = render partial: 'webui/shared/collapsible_text', locals: { text: element.comment }

src/api/app/views/webui/request/_requests_small.html.haml

@@ -13,4 +13,4 @@
             = user_with_realname_and_icon(req.creator, short: true)
             = surround '(', ')' do
               %u{ title: I18n.l(req.created_at.utc) }
-                #{time_ago_in_words(req.created_at)} ago
+                = render TimeComponent.new(time: req.created_at)

src/api/app/views/webui/request/_show_side_links.html.haml

@@ -3,7 +3,7 @@
     %i.fas.fa-user.text-success
     Created by
     = user_with_realname_and_icon(bs_request.creator, no_icon: true, short: true)
-    = render FuzzyTimeComponent.new(time: bs_request.created_at)
+    = render TimeComponent.new(time: bs_request.created_at)
   %li
     %i.fas.fa-info-circle.text-info
     In state
@@ -28,13 +28,14 @@
       %i.fas.fa-exclamation-circle.text-danger
       - if BsRequest::FINAL_REQUEST_STATES.include?(bs_request.state)
         Auto-accept was set to
-        %span.fuzzy-time{ title: "#{I18n.l bs_request.accept_at}" }
+        %span{ title: "#{I18n.l bs_request.accept_at}" }
         = succeed '.' do
           = I18n.l bs_request.accept_at, format: :only_date
       - elsif bs_request.accept_at.past?
         This request will be automatically accepted when it enters the 'new' state.
       - else
-        This request will be automatically accepted in #{time_ago_in_words(bs_request.accept_at)}.
+        This request will be automatically accepted
+        = render TimeComponent.new(time: bs_request.accept_at)
   - bs_request.reviews.where(state: 'new').each do |review|
     %li
       %i.fas.fa-info-circle.text-info

src/api/app/views/webui/request/beta_show.html.haml

@@ -42,7 +42,7 @@
       %p.fst-italic
         Created by
         = user_with_realname_and_icon(@bs_request.creator)
-        = render FuzzyTimeComponent.new(time: @bs_request.created_at)
+        = render TimeComponent.new(time: @bs_request.created_at)
 
       %ul
         -# superseded
@@ -70,7 +70,7 @@
             This request will be
             %mark.text-dark.alert-warning.ps-2.pe-2.text-nowrap{ title: @bs_request.accept_at }
               auto accepted
-              = render FuzzyTimeComponent.new(time: @bs_request.accept_at)
+              = render TimeComponent.new(time: @bs_request.accept_at)
       .mt-4
         -# action description, prev + dropdown select + next
         = render partial: 'actions_details', locals: { bs_request: @bs_request, action: @action, active_action: @active_action,

src/api/app/views/webui/request/beta_show_tabs/_conversation.html.haml

@@ -28,7 +28,7 @@
             = link_to(realname_with_login(creator), user_path(creator))
             created this request
             = link_to('#request-creation', title: I18n.l(bs_request.created_at.utc), name: 'request-creation') do
-              #{time_ago_in_words(bs_request.created_at)} ago
+              = render TimeComponent.new(time: bs_request.created_at)
             - if bs_request.superseding.any?
               superseding
               - bs_request.superseding.each do |superseded_request|
@@ -66,7 +66,7 @@
             was
             %strong auto-accepted
             at
-            %span.fuzzy-time{ title: "#{I18n.l bs_request.accept_at}" }
+            %span{ title: "#{I18n.l bs_request.accept_at}" }
             = succeed '.' do
               = I18n.l bs_request.accept_at, format: :only_date
         - elsif bs_request.accept_at.past?
@@ -77,7 +77,7 @@
         - else
           will be
           %strong auto-accepted
-          in #{time_ago_in_words(bs_request.accept_at)}.
+          = render TimeComponent.new(time: bs_request.accept_at)
 
     = render AccordionReviewsComponent.new(request_reviews, bs_request.state, can_handle_request: policy(bs_request).handle_request?)
 

src/api/app/views/webui/shared/bs_requests/index.json.erb

@@ -6,7 +6,7 @@
   "data": [
     <% table_rows.each.with_index do |row, index| %>
       [
-        "<%= escape_javascript(FuzzyTimeComponent.new(time: row.created_at).human_time_ago) %>",
+        "<%= escape_javascript(TimeComponent.new(time: row.created_at).human_time) %>",
         <% cache "request-table-row-#{row.id}-#{row.updated_at.to_i}" do %>
           "<%= escape_javascript(project_or_package_link(project: row.source_project, package: row.source_package, creator: row.creator, trim_to: 40, short: true)) %>",
           "<%= escape_javascript(target_project_link(row)) %>",

src/api/app/views/webui/staging/projects/_checks.html.haml

@@ -14,4 +14,4 @@
         %li
           = link_to(check.url, class: "check-#{check.state}", title: "#{check.short_description} (#{check.updated_at})") do
             %i.fas{ class: icon_for_check(check) }
-            #{check.name} (#{check.state} - #{time_ago_in_words(check.updated_at)} ago)
+            #{check.name} (#{check.state} - #{TimeComponent.new(time: check.updated_at).human_time})

src/api/app/views/webui/staging/projects/_history_elements.html.haml

@@ -10,6 +10,7 @@
         by
         %b= element.user_name
       - when 'staging_project_created'
-        %b #{time_ago_in_words(Time.zone.at(element.datetime.to_i))} ago
+        %b
+          = render TimeComponent.new(time: Time.zone.at(element.datetime.to_i))
         by
         %b= element.user_name

src/api/app/views/webui/staging/workflows/_status_problems.html.haml

@@ -1,3 +1,3 @@
 %li.list-group-item.table-list-group-item
-  = link_to "#{check.name} (#{check.state} - #{time_ago_in_words(check.updated_at)} ago)", check.url
+  = link_to "#{check.name} (#{check.state} - #{TimeComponent.new(time: check.updated_at).human_time})", check.url
 

src/api/spec/components/previews/time_component_preview.rb

@@ -0,0 +1,13 @@
+class TimeComponentPreview < ViewComponent::Preview
+  def with_time_in_the_past
+    render(TimeComponent.new(time: 2.days.ago))
+  end
+
+  def with_time_in_the_present
+    render(TimeComponent.new(time: Time.now.utc))
+  end
+
+  def with_time_in_the_future
+    render(TimeComponent.new(time: 2.weeks.since))
+  end
+end

src/api/spec/components/fuzzy_time_component_spec.rb → src/api/spec/components/time_component_spec.rb

@@ -1,6 +1,6 @@
 require 'rails_helper'
 
-RSpec.describe FuzzyTimeComponent, type: :component do
+RSpec.describe TimeComponent, type: :component do
   context 'time is in the past' do
     let(:time) { 2.days.ago }
 

src/api/spec/features/webui/requests_spec.rb

@@ -339,7 +339,7 @@
       bs_request.update(accept_at: Time.now + 1.day)
       visit request_show_path(bs_request)
       expect(page)
-        .to have_text("This request will be automatically accepted in #{ApplicationController.helpers.time_ago_in_words(bs_request.accept_at)}.")
+        .to have_text("This request will be automatically accepted #{TimeComponent.new(time: bs_request.accept_at).human_time}")
     end
   end