From f4a7943a5eeec86ede377953692515a92c6bc642 Mon Sep 17 00:00:00 2001
From: Siddharth Asthana <siddharthasthana31@gmail.com>
Date: Wed, 8 Oct 2025 01:37:34 +0530
Subject: [PATCH] Display committer avatar and profile link in last commit info

This enhances the last commit info box to display the committer's
avatar and link to their GitLab profile when the committer differs
from the author. Previously, only the committer's name was shown
as plain text.

The frontend now displays a clickable committer avatar using the
UserAvatarLink component and makes the committer name a clickable
link to their profile when available. For non-GitLab users, the
avatar displays as a Gravatar image without a link, and the name
shows as plain text.

This provides better UX and consistency with how author information
is displayed, making it easier to identify and navigate to
contributor profiles directly from the repository file browser.

The implementation consumes the new GraphQL fields added in the
backend MR (committerAvatarUrl, committerWebUrl, and committer
User object) and handles all scenarios: GitLab users, non-GitLab
users, and when no committer information is available.

Depends on: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/207932

Changelog: added

Signed-off-by: Siddharth Asthana <siddharthasthana31@gmail.com>
---
 .../repository/components/commit_info.vue     |  30 +++-
 .../repository/path_last_commit.query.graphql |   9 ++
 .../repository/components/commit_info_spec.js | 129 ++++++++++++++++++
 .../repository/components/last_commit_spec.js |   2 +-
 spec/frontend/repository/mock_data.js         |   9 ++
 5 files changed, 175 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/repository/components/commit_info.vue b/app/assets/javascripts/repository/components/commit_info.vue
index f9fb971b2968fc..64578570224ab9 100644
--- a/app/assets/javascripts/repository/components/commit_info.vue
+++ b/app/assets/javascripts/repository/components/commit_info.vue
@@ -146,13 +146,37 @@ export default {
             </template>
 
             <template #committer>
+              <user-avatar-link
+                v-if="commit.committer"
+                :link-href="commit.committer.webPath"
+                :img-src="commit.committer.avatarUrl"
+                :img-alt="commit.committer.name"
+                :img-size="16"
+                class="gl-mx-1"
+              />
               <user-avatar-image
-                v-if="commit.committerAvatarUrl"
-                class="gl-mx-1 gl-my-2"
+                v-else-if="commit.committerAvatarUrl"
+                class="gl-mx-1"
                 :img-src="commit.committerAvatarUrl"
                 :size="16"
               />
-              {{ commit.committerName }}
+              <gl-link
+                v-if="commit.committer"
+                :href="commit.committer.webPath"
+                class="commit-committer-link"
+              >
+                {{ commit.committer.name }}
+              </gl-link>
+              <gl-link
+                v-else-if="commit.committerWebUrl"
+                :href="commit.committerWebUrl"
+                class="commit-committer-link"
+              >
+                {{ commit.committerName }}
+              </gl-link>
+              <template v-else>
+                {{ commit.committerName }}
+              </template>
             </template>
 
             <template #committedDate>
diff --git a/app/graphql/queries/repository/path_last_commit.query.graphql b/app/graphql/queries/repository/path_last_commit.query.graphql
index d90ce5c16693a4..d69b15f212508f 100644
--- a/app/graphql/queries/repository/path_last_commit.query.graphql
+++ b/app/graphql/queries/repository/path_last_commit.query.graphql
@@ -15,6 +15,8 @@ query pathLastCommit($projectPath: ID!, $path: String, $ref: String!, $refType:
         webPath
         committerName
         committerEmail
+        committerAvatarUrl
+        committerWebUrl
         committedDate
         authoredDate
         authorName
@@ -27,6 +29,13 @@ query pathLastCommit($projectPath: ID!, $path: String, $ref: String!, $refType:
           avatarUrl
           webPath
         }
+        committer {
+          __typename
+          id
+          name
+          avatarUrl
+          webPath
+        }
         signature {
           __typename
           ... on GpgSignature {
diff --git a/spec/frontend/repository/components/commit_info_spec.js b/spec/frontend/repository/components/commit_info_spec.js
index 1a451030f65ca5..0f5fb368353a7c 100644
--- a/spec/frontend/repository/components/commit_info_spec.js
+++ b/spec/frontend/repository/components/commit_info_spec.js
@@ -160,5 +160,134 @@ describe('Repository last commit component', () => {
         commitMockWithDifferentCommitter.committedDate,
       );
     });
+
+    describe('when committer is a GitLab user', () => {
+      const commitMockWithCommitterUser = {
+        author: { name: 'John Doe', email: 'john@example.com' },
+        committerName: 'Jane Smith',
+        committerEmail: 'jane@example.com',
+        committedDate: '2019-02-01',
+        committer: {
+          name: 'Jane Smith',
+          avatarUrl: 'https://gitlab.com/jane-avatar.jpg',
+          webPath: '/jane-smith',
+        },
+      };
+
+      beforeEach(() => createComponent({ commitMock: commitMockWithCommitterUser }));
+
+      it('displays clickable committer avatar using UserAvatarLink', () => {
+        const avatarLinks = wrapper.findAllComponents(UserAvatarLink);
+        const committerAvatar = avatarLinks.at(1); // First is author, second is committer
+
+        expect(committerAvatar.exists()).toBe(true);
+        expect(committerAvatar.props()).toMatchObject({
+          linkHref: '/jane-smith',
+          imgSrc: 'https://gitlab.com/jane-avatar.jpg',
+          imgAlt: 'Jane Smith',
+          imgSize: 16,
+        });
+      });
+
+      it('displays committer name as a clickable link', () => {
+        const committerLink = wrapper.find('.commit-committer-link');
+
+        expect(committerLink.exists()).toBe(true);
+        expect(committerLink.attributes('href')).toBe(
+          commitMockWithCommitterUser.committer.webPath,
+        );
+        expect(committerLink.text()).toBe('Jane Smith');
+      });
+    });
+
+    describe('when committer is not a GitLab user but has avatar URL', () => {
+      const commitMockWithNonUserCommitter = {
+        author: { name: 'John Doe', email: 'john@example.com' },
+        committerName: 'Jane Smith',
+        committerEmail: 'jane@example.com',
+        committerAvatarUrl: 'https://gravatar.com/avatar/123',
+        committerWebUrl: null,
+        committedDate: '2019-02-01',
+        committer: null,
+      };
+
+      beforeEach(() => createComponent({ commitMock: commitMockWithNonUserCommitter }));
+
+      it('displays committer avatar without link using UserAvatarImage', () => {
+        const avatarImages = findUserAvatarImages();
+        const committerAvatar = avatarImages.at(0);
+
+        expect(committerAvatar.exists()).toBe(true);
+        expect(committerAvatar.props()).toMatchObject({
+          size: 16,
+          imgSrc: 'https://gravatar.com/avatar/123',
+        });
+      });
+
+      it('displays committer name as plain text without link', () => {
+        const committerLink = wrapper.find('.commit-committer-link');
+        const text = findCommitterWrapper().text();
+
+        expect(committerLink.exists()).toBe(false);
+        expect(text).toContain('Jane Smith');
+      });
+    });
+
+    describe('when committer has web URL but no user object', () => {
+      const commitMockWithWebUrl = {
+        author: { name: 'John Doe', email: 'john@example.com' },
+        committerName: 'Jane Smith',
+        committerEmail: 'jane@example.com',
+        committerAvatarUrl: 'https://gravatar.com/avatar/123',
+        committerWebUrl: '/jane-smith',
+        committedDate: '2019-02-01',
+        committer: null,
+      };
+
+      beforeEach(() => createComponent({ commitMock: commitMockWithWebUrl }));
+
+      it('displays committer avatar without UserAvatarLink', () => {
+        const avatarImages = findUserAvatarImages();
+
+        expect(avatarImages.at(0).exists()).toBe(true);
+        expect(avatarImages.at(0).props('imgSrc')).toBe('https://gravatar.com/avatar/123');
+      });
+
+      it('displays committer name as a clickable link', () => {
+        const committerLink = wrapper.find('.commit-committer-link');
+
+        expect(committerLink.exists()).toBe(true);
+        expect(committerLink.attributes('href')).toBe('/jane-smith');
+        expect(committerLink.text()).toBe('Jane Smith');
+      });
+    });
+
+    describe('when committer has no avatar or profile URL', () => {
+      const commitMockMinimalCommitter = {
+        author: { name: 'John Doe', email: 'john@example.com' },
+        committerName: 'Jane Smith',
+        committerEmail: 'jane@example.com',
+        committerAvatarUrl: null,
+        committerWebUrl: null,
+        committedDate: '2019-02-01',
+        committer: null,
+      };
+
+      beforeEach(() => createComponent({ commitMock: commitMockMinimalCommitter }));
+
+      it('does not display committer avatar', () => {
+        const avatarImages = findUserAvatarImages();
+
+        expect(avatarImages).toHaveLength(0);
+      });
+
+      it('displays committer name as plain text', () => {
+        const committerLink = wrapper.find('.commit-committer-link');
+        const text = findCommitterWrapper().text();
+
+        expect(committerLink.exists()).toBe(false);
+        expect(text).toContain('Jane Smith');
+      });
+    });
   });
 });
diff --git a/spec/frontend/repository/components/last_commit_spec.js b/spec/frontend/repository/components/last_commit_spec.js
index dc181d86b831da..a05d72bfcbd5d9 100644
--- a/spec/frontend/repository/components/last_commit_spec.js
+++ b/spec/frontend/repository/components/last_commit_spec.js
@@ -70,7 +70,7 @@ describe('Repository last commit component', () => {
 
     await waitForPromises();
 
-    const commit = { ...commitData.project?.repository.paginatedTree.nodes[0].lastCommit };
+    const commit = { ...commitData.data.project?.repository.lastCommit };
 
     expect(findCommitInfo().props().commit).toMatchObject(commit);
   });
diff --git a/spec/frontend/repository/mock_data.js b/spec/frontend/repository/mock_data.js
index 23c730d8c75789..de534f95543337 100644
--- a/spec/frontend/repository/mock_data.js
+++ b/spec/frontend/repository/mock_data.js
@@ -340,6 +340,8 @@ export const createCommitData = ({ pipelineEdges = defaultPipelineEdges, signatu
             webPath: '/commit/123',
             committerName: 'Test Committer',
             committerEmail: 'testcommitter@example.com',
+            committerAvatarUrl: 'https://test.com/committer-avatar',
+            committerWebUrl: 'https://test.com/committer',
             committedDate: '2019-02-02',
             authoredDate: '2019-01-01',
             authorName: 'Test',
@@ -352,6 +354,13 @@ export const createCommitData = ({ pipelineEdges = defaultPipelineEdges, signatu
               avatarUrl: 'https://test.com',
               webPath: '/test',
             },
+            committer: {
+              __typename: 'UserCore',
+              id: 'gid://gitlab/User/2',
+              name: 'Test Committer',
+              avatarUrl: 'https://test.com/committer-avatar',
+              webPath: '/committer',
+            },
             signature,
             pipelines: {
               __typename: 'PipelineConnection',
-- 
GitLab