Merge branch '218567-add-mr-author-compliance-dashboard' into 'master'

Add the MR author to MR's list on the compliance dashboard

See merge request gitlab-org/gitlab!35206

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

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