Merge branch '54981-extended-user-centric-tooltips-add-missing-cases' into 'master'

Resolve "Extended user centric tooltips: Add missing cases"

Closes #54981

See merge request gitlab-org/gitlab-ce!24132

app/assets/javascripts/diffs/components/commit_item.vue

@@ -5,6 +5,7 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CIIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
+import initUserPopovers from '../../user_popovers';
 
 /**
  * CommitItem
@@ -35,20 +36,30 @@ export default {
     },
   },
   computed: {
+    author() {
+      return this.commit.author || {};
+    },
     authorName() {
-      return (this.commit.author && this.commit.author.name) || this.commit.author_name;
+      return this.author.name || this.commit.author_name;
+    },
+    authorClass() {
+      return this.author.name ? 'js-user-link' : '';
+    },
+    authorId() {
+      return this.author.id ? this.author.id : '';
     },
     authorUrl() {
-      return (
-        (this.commit.author && this.commit.author.web_url) || `mailto:${this.commit.author_email}`
-      );
+      return this.author.web_url || `mailto:${this.commit.author_email}`;
     },
     authorAvatar() {
-      return (
-        (this.commit.author && this.commit.author.avatar_url) || this.commit.author_gravatar_url
-      );
+      return this.author.avatar_url || this.commit.author_gravatar_url;
     },
   },
+  created() {
+    this.$nextTick(() => {
+      initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
+    });
+  },
 };
 </script>
 
@@ -81,7 +92,13 @@ export default {
         </button>
 
         <div class="commiter">
-          <a :href="authorUrl" v-text="authorName"></a> {{ s__('CommitWidget|authored') }}
+          <a
+            :href="authorUrl"
+            :class="authorClass"
+            :data-user-id="authorId"
+            v-text="authorName"
+          ></a>
+          {{ s__('CommitWidget|authored') }}
           <time-ago-tooltip :time="commit.authored_date" />
         </div>
 

app/helpers/commits_helper.rb

@@ -154,7 +154,7 @@ module CommitsHelper
     if user.nil?
       mail_to(source_email, text, link_options)
     else
-      link_to(text, user_path(user), link_options)
+      link_to(text, user_path(user), { class: "commit-#{options[:source]}-link js-user-link", data: { user_id: user.id } })
     end
   end
 

app/views/admin/users/_user.html.haml

@@ -3,7 +3,7 @@
     = image_tag avatar_icon_for_user(user), class: "avatar", alt: ''
   .row-main-content
     .user-name.row-title.str-truncated-100
-      = link_to user.name, [:admin, user]
+      = link_to user.name, [:admin, user], class: "js-user-link", data: { user_id: user.id }
     - if user.blocked?
       %span.badge.badge-danger blocked
     - if user.admin?

app/views/shared/members/_member.html.haml

@@ -10,7 +10,7 @@
     - if user
       = image_tag avatar_icon_for_user(user, 40), class: "avatar s40", alt: ''
       .user-info
-        = link_to user.name, user_path(user), class: 'member'
+        = link_to user.name, user_path(user), class: 'member js-user-link', data: { user_id: user.id }
         = user_status(user)
         %span.cgray= user.to_reference
 

app/views/shared/snippets/_snippet.html.haml

@@ -25,7 +25,7 @@
     #{snippet.to_reference} ·
     authored #{time_ago_with_tooltip(snippet.created_at, placement: 'bottom', html_class: 'snippet-created-ago')}
     by
-    = link_to user_snippets_path(snippet.author) do
+    = link_to user_snippets_path(snippet.author), class: "js-user-link", data: { user_id: snippet.author.id } do
       = snippet.author_name
     - if link_project && snippet.project_id?
       %span.d-none.d-sm-inline-block

changelogs/unreleased/54981-extended-user-centric-tooltips-add-missing-cases.yml

@@ -0,0 +1,5 @@
+---
+title: User Popovers for Commit Infos, Member Lists and Snippets
+merge_request: 24132
+author:
+type: added

spec/helpers/commits_helper_spec.rb

@@ -21,7 +21,7 @@ describe CommitsHelper do
       expect(helper.commit_author_link(commit))
         .to include('Foo <script>')
       expect(helper.commit_author_link(commit, avatar: true))
-        .to include('commit-author-name', 'Foo <script>')
+        .to include('commit-author-name', 'js-user-link', 'Foo <script>')
     end
   end
 

spec/javascripts/diffs/components/commit_item_spec.js

@@ -80,6 +80,8 @@ describe('diffs/components/commit_item', () => {
     expect(trimText(committerElement.textContent)).toEqual(expectedText);
     expect(nameElement).toHaveAttr('href', commit.author.web_url);
     expect(nameElement).toHaveText(commit.author.name);
+    expect(nameElement).toHaveClass('js-user-link');
+    expect(nameElement.dataset.userId).toEqual(commit.author.id.toString());
   });
 
   describe('without commit description', () => {