Merge branch '350663-commit-author-missing-in-pipeline-page-redesign' into 'master'

Add Commit Author to Pipeline List Page

See merge request gitlab-org/gitlab!84226

app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue

@@ -2,6 +2,7 @@
 import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { ICONS } from '../../constants';
 import PipelineLabels from './pipeline_labels.vue';
 
@@ -11,6 +12,7 @@ export default {
     GlLink,
     PipelineLabels,
     TooltipOnTruncate,
+    UserAvatarLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -169,6 +171,15 @@ export default {
       <gl-link :href="commitUrl" class="commit-sha mr-0" data-testid="commit-short-sha">{{
         commitShortSha
       }}</gl-link>
+      <user-avatar-link
+        v-if="commitAuthor"
+        :link-href="commitAuthor.path"
+        :img-src="commitAuthor.avatar_url"
+        :img-size="16"
+        :img-alt="commitAuthor.name"
+        :tooltip-text="commitAuthor.name"
+        class="gl-ml-1"
+      />
       <!--End of commit row-->
     </div>
     <pipeline-labels :pipeline-schedule-url="pipelineScheduleUrl" :pipeline="pipeline" />

spec/frontend/pipelines/pipeline_url_spec.js

 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PipelineUrlComponent from '~/pipelines/components/pipelines_list/pipeline_url.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { mockPipeline, mockPipelineBranch, mockPipelineTag } from './mock_data';
 
 const projectPath = 'test/test';
@@ -57,6 +58,30 @@ describe('Pipeline Url Component', () => {
     expect(findCommitShortSha().exists()).toBe(true);
   });
 
+  describe('commit user avatar', () => {
+    it('renders when commit author exists', () => {
+      const pipelineBranch = mockPipelineBranch();
+      const { avatar_url, name, path } = pipelineBranch.pipeline.commit.author;
+      createComponent(pipelineBranch);
+
+      const component = wrapper.findComponent(UserAvatarLink);
+      expect(component.exists()).toBe(true);
+      expect(component.props()).toMatchObject({
+        imgSize: 16,
+        imgSrc: avatar_url,
+        imgAlt: name,
+        linkHref: path,
+        tooltipText: name,
+      });
+    });
+
+    it('does not render when commit author does not exist', () => {
+      createComponent();
+
+      expect(wrapper.findComponent(UserAvatarLink).exists()).toBe(false);
+    });
+  });
+
   it('should render commit icon tooltip', () => {
     createComponent({}, true);