Add Commented by to MR widget

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/10294

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue

@@ -92,11 +92,12 @@ export default {
 <template>
   <table class="table m-0">
     <thead class="thead-white text-nowrap">
-      <tr class="d-none d-sm-table-row">
+      <tr class="d-none d-md-table-row">
         <th class="w-0"></th>
         <th class="w-25">{{ s__('MRApprovals|Approvers') }}</th>
         <th class="w-50"></th>
         <th>{{ s__('MRApprovals|Approvals') }}</th>
+        <th>{{ s__('MRApprovals|Commented by') }}</th>
         <th>{{ s__('MRApprovals|Approved by') }}</th>
       </tr>
     </thead>
@@ -110,7 +111,7 @@ export default {
       <tr v-for="rule in rules" :key="rule.id">
         <td class="w-0"><approved-icon :is-approved="rule.approved" /></td>
         <td :colspan="rule.rule_type === $options.ruleTypeAnyApprover ? 2 : 1">
-          <div class="d-none d-sm-block js-name">
+          <div class="d-none d-md-block js-name">
             <empty-rule-name
               v-if="rule.rule_type === $options.ruleTypeAnyApprover"
               :eligible-approvers-docs-path="eligibleApproversDocsPath"
@@ -131,7 +132,7 @@ export default {
               :security-approvals-help-page-path="securityApprovalsHelpPagePath"
             />
           </div>
-          <div class="d-flex d-sm-none flex-column js-summary">
+          <div class="d-flex d-md-none flex-column js-summary">
             <empty-rule-name
               v-if="rule.rule_type === $options.ruleTypeAnyApprover"
               :eligible-approvers-docs-path="eligibleApproversDocsPath"
@@ -144,6 +145,14 @@ export default {
               :img-size="24"
               empty-text=""
             />
+            <div v-if="rule.commented_by.length > 0" class="mt-2">
+              <span>{{ s__('MRApprovals|Commented by') }}</span>
+              <user-avatar-list
+                class="d-inline-block align-middle"
+                :items="rule.commented_by"
+                :img-size="24"
+              />
+            </div>
             <div v-if="rule.approved_by.length" class="mt-2">
               <span>{{ s__('MRApprovals|Approved by') }}</span>
               <user-avatar-list
@@ -156,14 +165,17 @@ export default {
         </td>
         <td
           v-if="rule.rule_type !== $options.ruleTypeAnyApprover"
-          class="d-none d-sm-table-cell js-approvers"
+          class="d-none d-md-table-cell js-approvers"
         >
           <div><user-avatar-list :items="rule.approvers" :img-size="24" empty-text="" /></div>
         </td>
-        <td class="w-0 d-none d-sm-table-cell text-nowrap js-pending">
+        <td class="w-0 d-none d-md-table-cell text-nowrap js-pending">
           {{ pendingApprovalsText(rule) }}
         </td>
-        <td class="d-none d-sm-table-cell js-approved-by">
+        <td class="d-none d-md-table-cell js-commented-by">
+          <user-avatar-list :items="rule.commented_by" :img-size="24" empty-text="" />
+        </td>
+        <td class="d-none d-md-table-cell js-approved-by">
           <user-avatar-list :items="rule.approved_by" :img-size="24" empty-text="" />
         </td>
       </tr>

ee/spec/frontend/vue_mr_widget/components/approvals/approvals_list_spec.js

@@ -9,6 +9,7 @@ const testRuleApproved = () => ({
   name: 'Lorem',
   approvals_required: 2,
   approved_by: [{ id: 1 }, { id: 2 }, { id: 3 }],
+  commented_by: [{ id: 1 }, { id: 2 }, { id: 3 }],
   approvers: testApprovers(),
   approved: true,
 });
@@ -17,6 +18,7 @@ const testRuleUnapproved = () => ({
   name: 'Ipsum',
   approvals_required: 1,
   approved_by: [],
+  commented_by: [],
   approvers: testApprovers(),
   approved: false,
 });
@@ -25,6 +27,7 @@ const testRuleOptional = () => ({
   name: 'Dolar',
   approvals_required: 0,
   approved_by: [{ id: 1 }],
+  commented_by: [{ id: 1 }],
   approvers: testApprovers(),
   approved: false,
 });
@@ -35,6 +38,7 @@ const testRuleFallback = () => ({
   rule_type: 'any_approver',
   approvals_required: 3,
   approved_by: [{ id: 1 }, { id: 2 }],
+  commented_by: [{ id: 1 }, { id: 2 }],
   approvers: [],
   approved: false,
 });
@@ -44,6 +48,7 @@ const testRuleCodeOwner = () => ({
   fallback: true,
   approvals_required: 3,
   approved_by: [{ id: 1 }, { id: 2 }],
+  commented_by: [{ id: 1 }, { id: 2 }],
   approvers: [],
   approved: false,
   rule_type: 'code_owner',
@@ -165,6 +170,18 @@ describe('EE MRWidget approvals list', () => {
       );
     });
 
+    it('renders commented by user avatar list', () => {
+      const commentedRow = findRowElement(row, 'commented-by');
+      const commentedBy = commentedRow.find(UserAvatarList);
+
+      expect(commentedBy.props()).toEqual(
+        expect.objectContaining({
+          items: rule.commented_by,
+          emptyText: '',
+        }),
+      );
+    });
+
     describe('summary text', () => {
       let summary;
 
@@ -191,10 +208,20 @@ describe('EE MRWidget approvals list', () => {
         );
       });
 
+      it('renders commented by list', () => {
+        const commentedBy = summary.findAll(UserAvatarList).at(1);
+
+        expect(commentedBy.exists()).toBe(true);
+        expect(commentedBy.props()).toEqual(
+          expect.objectContaining({
+            items: rule.commented_by,
+          }),
+        );
+      });
+
       it('renders approved by list', () => {
-        const approvedBy = summary.findAll(UserAvatarList).at(1);
+        const approvedBy = summary.findAll(UserAvatarList).at(2);
 
-        expect(approvedBy.exists()).toBe(true);
         expect(approvedBy.props()).toEqual(
           expect.objectContaining({
             items: rule.approved_by,
@@ -281,8 +308,9 @@ describe('EE MRWidget approvals list', () => {
       const summary = findRowElement(row, 'summary');
       const lists = summary.findAll(UserAvatarList);
 
-      expect(lists).toHaveLength(1);
-      expect(lists.at(0).props('items')).toEqual(rule.approved_by);
+      expect(lists).toHaveLength(2);
+      expect(lists.at(0).props('items')).toEqual(rule.commented_by);
+      expect(lists.at(1).props('items')).toEqual(rule.approved_by);
     });
   });
 

locale/gitlab.pot

@@ -14507,6 +14507,9 @@ msgstr ""
 msgid "MRApprovals|Approvers"
 msgstr ""
 
+msgid "MRApprovals|Commented by"
+msgstr ""
+
 msgid "MRDiff|Show changes only"
 msgstr ""