Show MR author on the compliance dashboard

Prior to this MR, users have to click on the MR to view the author
details. This change improves this experience to allow users to rapidly
scan through this huge list of MRs.

ee/app/assets/javascripts/compliance_dashboard/components/merge_request.vue

 <script>
 import { sprintf, s__ } from '~/locale';
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlAvatar, GlAvatarLink, GlTooltipDirective } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import Approvers from './approvers.vue';
@@ -12,6 +12,8 @@ export default {
   components: {
     CiIcon,
     Approvers,
+    GlAvatar,
+    GlAvatarLink,
   },
   mixins: [timeagoMixin],
   props: {
@@ -43,6 +45,9 @@ export default {
       return this.tooltipTitle(this.mergeRequest.merged_at);
     },
   },
+  strings: {
+    createdBy: s__('ComplianceDashboard|created by:'),
+  },
 };
 </script>
 
@@ -58,6 +63,26 @@ export default {
         <span class="gl-text-gray-700">
           {{ mergeRequest.issuable_reference }}
         </span>
+        <span class="issuable-authored gl-text-gray-700 d-inline-flex align-items-center">
+          - {{ $options.strings.createdBy }}
+          <gl-avatar-link
+            :key="mergeRequest.author.id"
+            :title="mergeRequest.author.name"
+            :href="mergeRequest.author.web_url"
+            :data-user-id="mergeRequest.author.id"
+            :data-name="mergeRequest.author.name"
+            class="d-inline-flex align-items-center ml-2 author-link js-user-link"
+          >
+            <gl-avatar
+              :src="mergeRequest.author.avatar_url"
+              :entity-id="mergeRequest.author.id"
+              :entity-name="mergeRequest.author.name"
+              :size="16"
+              class="mr-1"
+            />
+            <span>{{ mergeRequest.author.name }}</span>
+          </gl-avatar-link>
+        </span>
       </div>
 
       <div class="issuable-meta">

ee/app/finders/merge_requests_compliance_finder.rb

@@ -62,6 +62,7 @@ class MergeRequestsComplianceFinder < MergeRequestsFinder
 
   def preloads
     [
+      :author,
       :approved_by_users,
       :metrics,
       source_project: :route,

ee/app/serializers/merge_request_compliance_entity.rb

@@ -16,6 +16,7 @@ class MergeRequestComplianceEntity < Grape::Entity
     merge_request.to_reference(merge_request.project.group)
   end
 
+  expose :author, using: API::Entities::UserBasic
   expose :approved_by_users, using: API::Entities::UserBasic
 
   expose :pipeline_status, if: -> (*) { can_read_pipeline? }, with: DetailedStatusEntity

ee/changelogs/unreleased/218567-add-mr-author-compliance-dashboard.yml

+---
+title: Add the MR author to MR's list on the compliance dashboard
+merge_request: 35206
+author:
+type: added

ee/spec/frontend/compliance_dashboard/components/__snapshots__/merge_request_spec.js.snap

@@ -29,6 +29,35 @@ exports[`MergeRequest component when there is a merge request matches the snapsh
         !1
       
       </span>
+       
+      <span
+        class="issuable-authored gl-text-gray-700 d-inline-flex align-items-center"
+      >
+        
+        - created by:
+        
+        <gl-avatar-link-stub
+          class="d-inline-flex align-items-center ml-2 author-link js-user-link"
+          data-name="User 1"
+          data-user-id="1"
+          href="http://localhost:3000/user-1"
+          title="User 1"
+        >
+          <gl-avatar-stub
+            alt="avatar"
+            class="mr-1"
+            entityid="1"
+            entityname="User 1"
+            shape="circle"
+            size="16"
+            src="https://1"
+          />
+           
+          <span>
+            User 1
+          </span>
+        </gl-avatar-link-stub>
+      </span>
     </div>
      
     <div

ee/spec/frontend/compliance_dashboard/components/merge_request_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlAvatarLink } from '@gitlab/ui';
 
 import MergeRequest from 'ee/compliance_dashboard/components/merge_request.vue';
 import { createMergeRequest, createPipelineStatus } from '../mock_data';
@@ -10,6 +11,7 @@ describe('MergeRequest component', () => {
   const findCiLink = () => wrapper.find('.controls').find('a');
   const findInfo = () => wrapper.find('.issuable-main-info');
   const findTime = () => wrapper.find('time');
+  const findAuthorAvatarLink = () => wrapper.find('.issuable-authored').find(GlAvatarLink);
 
   const createComponent = mergeRequest => {
     return shallowMount(MergeRequest, {
@@ -56,6 +58,10 @@ describe('MergeRequest component', () => {
       ).toEqual(mergeRequest.issuable_reference);
     });
 
+    it('renders the author name', () => {
+      expect(findAuthorAvatarLink().text()).toEqual(mergeRequest.author.name);
+    });
+
     it('renders the "merged at" time', () => {
       expect(findTime().text()).toEqual('merged 2 days ago');
     });

ee/spec/frontend/compliance_dashboard/mock_data.js

@@ -4,6 +4,15 @@ const twoDaysAgo = () => {
   return date.toISOString();
 };
 
+const createUser = id => ({
+  id,
+  avatar_url: `https://${id}`,
+  name: `User ${id}`,
+  state: 'active',
+  username: `user-${id}`,
+  web_url: `http://localhost:3000/user-${id}`,
+});
+
 export const createMergeRequest = ({ id = 1, pipeline, approvers } = {}) => {
   const mergeRequest = {
     id,
@@ -14,6 +23,9 @@ export const createMergeRequest = ({ id = 1, pipeline, approvers } = {}) => {
     path: `/h5bp/html5-boilerplate/-/merge_requests/${id}`,
     title: `Merge request ${id}`,
   };
+
+  mergeRequest.author = createUser(id);
+
   if (pipeline) {
     mergeRequest.pipeline_status = pipeline;
   }
@@ -38,14 +50,7 @@ export const createPipelineStatus = status => ({
 export const createApprovers = count => {
   return Array(count)
     .fill()
-    .map((_, id) => ({
-      id,
-      avatar_url: `https://${id}`,
-      name: `User ${id}`,
-      state: 'active',
-      username: `user-${id}`,
-      web_url: `http://localhost:3000/user-${id}`,
-    }));
+    .map((_, id) => createUser(id));
 };
 
 export const createMergeRequests = ({ count = 1 } = {}) => {

ee/spec/serializers/merge_request_compliance_entity_spec.rb

@@ -17,11 +17,11 @@ RSpec.describe MergeRequestComplianceEntity do
 
     it 'includes merge request attributes for compliance' do
       expect(subject).to include(
-        :id, :title, :merged_at, :milestone, :path, :issuable_reference, :approved_by_users
+        :id, :title, :merged_at, :milestone, :path, :issuable_reference, :author, :approved_by_users
       )
     end
 
-    describe 'with a approver' do
+    describe 'with an approver' do
       let_it_be(:approver) { create(:user) }
       let!(:approval) { create :approval, merge_request: merge_request, user: approver }
 

locale/gitlab.pot

@@ -5883,6 +5883,9 @@ msgstr ""
 msgid "Compliance frameworks"
 msgstr ""
 
+msgid "ComplianceDashboard|created by:"
+msgstr ""
+
 msgid "ComplianceFramework|GDPR"
 msgstr ""