Feature/59925 show user popover on the name

app/components/users/row_component.rb

@@ -46,7 +46,9 @@ def row_css_class
     def login
       icon = helpers.avatar user, size: :mini
 
-      link = link_to h(user.login), helpers.allowed_management_user_profile_path(user), class: "op-principal--name"
+      link = helpers.link_to_user(user,
+                                  class: "op-principal--name",
+                                  href: helpers.allowed_management_user_profile_path(user))
 
       icon + link
     end

app/components/work_packages/activities_tab/journals/item_component.html.erb

@@ -28,7 +28,7 @@
                   end
                   header_start_container.with_column(mr: 1,
                                                     classes: "work-packages-activities-tab-journals-item-component--user-name ellipsis hidden-for-mobile") do
-                    truncated_user_name(journal.user)
+                    truncated_user_name(journal.user, hover_card: true)
                   end
                   if journal.initial?
                       header_start_container.with_column(

app/components/work_packages/activities_tab/journals/item_component/details.rb

@@ -105,7 +105,7 @@ def render_user_name_for_desktop(container)
             mr: 1,
             classes: "work-packages-activities-tab-journals-item-component-details--user-name ellipsis hidden-for-mobile"
           ) do
-            truncated_user_name(journal.user)
+            truncated_user_name(journal.user, hover_card: true)
           end
         end
 

app/components/work_packages/activities_tab/shared_helpers.rb

@@ -31,16 +31,8 @@
 module WorkPackages
   module ActivitiesTab
     module SharedHelpers
-      def truncated_user_name(user)
-        render(Primer::Beta::Link.new(
-                 href: user_url(user),
-                 target: "_blank",
-                 scheme: :primary,
-                 underline: false,
-                 font_weight: :bold
-               )) do
-          user.name
-        end
+      def truncated_user_name(user, hover_card: false)
+        helpers.primer_link_to_user(user, scheme: :primary, font_weight: :bold, hover_card:)
       end
 
       def journal_sorting

app/components/work_packages/hover_card_component.html.erb

@@ -15,7 +15,13 @@
 
         grid.with_area(:assignee, tag: :div, font_size: :small, color: :muted) do
           if @assignee.present?
-            render(Users::AvatarComponent.new(user: @assignee, show_name: true, link: false, size: :mini, classes: "op-wp-hover-card--principal"))
+            # Render the avatar without a hover card => opening another hover card within a hover card is not supported
+            render(Users::AvatarComponent.new(user: @assignee,
+                                              show_name: true,
+                                              link: false,
+                                              size: :mini,
+                                              classes: "op-wp-hover-card--principal",
+                                              hover_card: { active: false }))
           else
             concat(render(Primer::Beta::Octicon.new(icon: :person, mr: 1)))
             concat(render(Primer::Beta::Text.new) { "-" })

app/helpers/application_helper.rb

@@ -189,13 +189,10 @@ def authoring(created, author, options = {})
     I18n.t(label, author: link_to_user(author), age: time_tag(created)).html_safe
   end
 
-  def authoring_at(created, author)
+  def authoring_at(creation_date, author)
     return if author.nil?
 
-    I18n.t(:"js.label_added_time_by",
-           author: html_escape(author.name),
-           age: created,
-           authorLink: user_path(author)).html_safe
+    I18n.t(:label_added_by_on, author: link_to_user(author), date: creation_date).html_safe
   end
 
   def time_tag(time)

app/views/homescreen/blocks/_users.html.erb

@@ -6,7 +6,7 @@
 <ul class="widget-box--arrow-links">
   <% @newest_users.each do |user| %>
     <li>
-      <%= link_to user, user_path(user), title: user.name %>
+      <%= link_to_user user %>
       <small>(<%= format_date(user.created_at) %>)</small>
     </li>
   <% end %>

config/locales/en.yml

@@ -2306,6 +2306,7 @@ en:
   label_add_subtask: "Add subtask"
   label_added: "added"
   label_added_by: "Added by %{author}"
+  label_added_by_on: "Added by %{author} on %{date}"
   label_added_time_by: "Added by %{author} %{age} ago"
   label_additional_workflow_transitions_for_assignee: "Additional transitions allowed when the user is the assignee"
   label_additional_workflow_transitions_for_author: "Additional transitions allowed when the user is the author"

frontend/src/app/shared/components/principal/principal-renderer.service.ts

@@ -118,6 +118,7 @@ export class PrincipalRendererService {
 
     if (!name.hide) {
       const el = this.renderName(principal, type, name.link, title || principal.name, name.classes);
+      this.setHoverCardAttributes(el, avatar, principal);
       container.appendChild(el);
     }
   }

lib/open_project/object_linking.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 #-- copyright
 # OpenProject is an open source project management software.
 # Copyright (C) the OpenProject GmbH
@@ -44,11 +46,13 @@ def link_to_user(user, options = {})
       if user.is_a?(User) && user.locked?
         user.name
       elsif user.is_a?(User)
+        only_path = options.delete(:only_path) { true }
         name = user.name
-        href = user_url(user,
-                        only_path: options.delete(:only_path) { true })
+        href = user_url(user, only_path:)
         options[:title] ||= I18n.t(:label_user_named, name:)
 
+        add_hover_card_options(user, options, only_path:, clazz_key: :class)
+
         link_to(name, href, options)
       else
         h(user.to_s)
@@ -127,8 +131,33 @@ def link_to_project(project, options = {}, html_options = nil, show_icon = false
       end.html_safe
     end
 
+    def primer_link_to_user(user, options = {})
+      options[:href] ||= user_path(user)
+      options[:target] ||= "_blank"
+      options[:underline] ||= false
+
+      options = add_hover_card_options(user, options)
+
+      render Primer::Beta::Link.new(**options) do
+        user.name
+      end
+    end
+
     private
 
+    # TODO: doc comment
+    def add_hover_card_options(user, options, only_path: true, clazz_key: :classes)
+      if options.delete(:hover_card) { true }
+        options[clazz_key] = [options[clazz_key], "op-hover-card--preview-trigger"].compact.join(" ")
+        options[:data] ||= {}
+
+        hover_card_url = hover_card_user_url(user, only_path:)
+        options[:data][:hover_card_url] = hover_card_url
+      end
+
+      options
+    end
+
     def project_link_name(project, show_icon)
       if show_icon && User.current.member_of?(project)
         icon_wrapper("icon-context icon-star", I18n.t(:description_my_project).html_safe + " ".html_safe) + project.name

modules/meeting/app/components/meetings/header_infoline_component.html.erb

@@ -3,9 +3,7 @@
     <%= t("recurring_meeting.occurrence.infoline", title: @series.title) %>
   <% else %>
     <%= t(:label_meeting_created_by) %>
-    <%= render(Primer::Beta::Link.new(href: user_path(@meeting.author),
-                                      underline: false,
-                                      target: "_blank")) { @meeting.author.name } %>.
+    <%= helpers.primer_link_to_user(@meeting.author) %>.
   <% end %>
   <%= t("label_meeting_last_updated") %>
   <%= render(OpPrimer::RelativeTimeComponent.new(datetime: last_updated_at, prefix: I18n.t(:label_on))) %>.

spec/helpers/application_helper_spec.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 #-- copyright
 # OpenProject is an open source project management software.
 # Copyright (C) the OpenProject GmbH
@@ -176,8 +178,18 @@
       created = "2023-06-02"
       author = build(:user, firstname: "<b>Hello</b>", lastname: "world")
       author.save! validate: false
+
+      esc_name = "&lt;b&gt;Hello&lt;/b&gt; world"
+
+      exp_str = <<-HTML.squish
+        Added by
+        <a title="User #{esc_name}" class="op-hover-card--preview-trigger"
+          data-hover-card-url="/users/#{author.id}/hover_card" href="/users/#{author.id}">#{esc_name}</a>
+        on 2023-06-02
+      HTML
+
       expect(authoring_at(created, author))
-        .to eq("Added by <a href=\"/users/#{author.id}\">&lt;b&gt;Hello&lt;/b&gt; world</a> at 2023-06-02")
+        .to eq(exp_str)
     end
   end
 

spec/lib/open_project/text_formatting/markdown/mentions_spec.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 #-- copyright
 # OpenProject is an open source project management software.
 # Copyright (C) the OpenProject GmbH
@@ -29,8 +31,7 @@
 require "spec_helper"
 require_relative "expected_markdown"
 
-RSpec.describe OpenProject::TextFormatting,
-               "mentions" do
+RSpec.describe OpenProject::TextFormatting, "mentions" do # rubocop:disable RSpec/SpecFilePathFormat
   include_context "expected markdown modules"
 
   describe ".format_text" do
@@ -85,8 +86,9 @@
                   #{link_to(linked_project_member.name,
                             { controller: :users, action: :show, id: linked_project_member.id },
                             title: "User #{linked_project_member.name}",
-                            class: 'user-mention op-uc-link',
-                            target: '_top')}
+                            class: 'user-mention op-hover-card--preview-trigger op-uc-link',
+                            target: '_top',
+                            data: { hover_card_url: "/users/#{linked_project_member.id}/hover_card" })}
                 </p>
               EXPECTED
             end
@@ -132,8 +134,9 @@
                   #{link_to(linked_project_member.name,
                             { controller: :users, action: :show, id: linked_project_member.id },
                             title: "User #{linked_project_member.name}",
-                            class: 'user-mention op-uc-link',
-                            target: '_top')}
+                            class: 'user-mention op-hover-card--preview-trigger op-uc-link',
+                            target: '_top',
+                            data: { hover_card_url: "/users/#{linked_project_member.id}/hover_card" })}
                 </p>
               EXPECTED
             end
@@ -156,8 +159,9 @@
                   #{link_to(linked_project_member.name,
                             { controller: :users, action: :show, id: linked_project_member.id },
                             title: "User #{linked_project_member.name}",
-                            class: 'user-mention op-uc-link',
-                            target: '_top')}
+                            class: 'user-mention op-hover-card--preview-trigger op-uc-link',
+                            target: '_top',
+                            data: { hover_card_url: "/users/#{linked_project_member.id}/hover_card" })}
                 </p>
               EXPECTED
             end
@@ -181,8 +185,9 @@
                     #{link_to(linked_project_member.name,
                               { controller: :users, action: :show, id: linked_project_member.id },
                               title: "User #{linked_project_member.name}",
-                              class: 'user-mention op-uc-link',
-                              target: '_top')}
+                              class: 'user-mention op-hover-card--preview-trigger op-uc-link',
+                              target: '_top',
+                              data: { hover_card_url: "/users/#{linked_project_member.id}/hover_card" })}
                   </p>
                 EXPECTED
               end
@@ -209,8 +214,9 @@
                     #{link_to(linked_project_member.name,
                               { controller: :users, action: :show, id: linked_project_member.id },
                               title: "User #{linked_project_member.name}",
-                              class: 'user-mention op-uc-link',
-                              target: '_top')}
+                              class: 'user-mention op-hover-card--preview-trigger op-uc-link',
+                              target: '_top',
+                              data: { hover_card_url: "/users/#{linked_project_member.id}/hover_card" })}
                   </p>
                 EXPECTED
               end
@@ -234,8 +240,9 @@
                   #{link_to(linked_project_member.name,
                             { controller: :users, action: :show, id: linked_project_member.id },
                             title: "User #{linked_project_member.name}",
-                            class: 'user-mention op-uc-link',
-                            target: '_top')}
+                            class: 'user-mention op-hover-card--preview-trigger op-uc-link',
+                            target: '_top',
+                            data: { hover_card_url: "/users/#{linked_project_member.id}/hover_card" })}
                 </p>
               EXPECTED
             end
@@ -293,7 +300,13 @@
               let(:expected) do
                 <<~EXPECTED
                   <p class="op-uc-p">
-                    Link to <a class="user-mention op-uc-link" target="_top" href="/users/#{user.id}" title="User Foo Barrit">Foo Barrit</a>
+                    Link to
+                      <a
+                        class="user-mention op-hover-card--preview-trigger op-uc-link"
+                        target="_top"
+                        data-hover-card-url="/users/#{user.id}/hover_card"
+                        href="/users/#{user.id}"
+                        title="User Foo Barrit">Foo Barrit</a>
                   </p>
                 EXPECTED
               end
@@ -313,7 +326,13 @@
               let(:expected) do
                 <<~EXPECTED
                   <p class="op-uc-p">
-                    Link to <a class="user-mention op-uc-link" target="_top" href="http://openproject.org/users/#{user.id}" title="User Foo Barrit">Foo Barrit</a>
+                    Link to
+                      <a
+                        class="user-mention op-hover-card--preview-trigger op-uc-link"
+                        target="_top"
+                        data-hover-card-url="http://openproject.org/users/#{user.id}/hover_card"
+                        href="http://openproject.org/users/#{user.id}"
+                        title="User Foo Barrit">Foo Barrit</a>
                   </p>
                 EXPECTED
               end