Say when MR was approved by me

Changelog: changed

app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue

 <script>
 import { toNounSeriesText } from '~/lib/utils/grammar';
 import { n__, sprintf } from '~/locale';
-import { APPROVED_MESSAGE } from '~/vue_merge_request_widget/components/approvals/messages';
+import {
+  APPROVED_BY_YOU_AND_OTHERS,
+  APPROVED_BY_YOU,
+  APPROVED_BY_OTHERS,
+} from '~/vue_merge_request_widget/components/approvals/messages';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
 
 export default {
@@ -29,12 +33,23 @@ export default {
     },
   },
   computed: {
-    message() {
-      if (this.approved) {
-        return APPROVED_MESSAGE;
+    approvalLeftMessage() {
+      if (this.rulesLeft.length) {
+        return sprintf(
+          n__(
+            'Requires %{count} approval from %{names}.',
+            'Requires %{count} approvals from %{names}.',
+            this.approvalsLeft,
+          ),
+          {
+            names: toNounSeriesText(this.rulesLeft),
+            count: this.approvalsLeft,
+          },
+          false,
+        );
       }
 
-      if (!this.rulesLeft.length) {
+      if (!this.approved) {
         return n__(
           'Requires %d approval from eligible users.',
           'Requires %d approvals from eligible users.',
@@ -42,32 +57,51 @@ export default {
         );
       }
 
-      return sprintf(
-        n__(
-          'Requires %{count} approval from %{names}.',
-          'Requires %{count} approvals from %{names}.',
-          this.approvalsLeft,
-        ),
-        {
-          names: toNounSeriesText(this.rulesLeft),
-          count: this.approvalsLeft,
-        },
-        false,
-      );
+      return '';
+    },
+    message() {
+      if (this.approvedByMe && this.approvedByOthers) {
+        return APPROVED_BY_YOU_AND_OTHERS;
+      }
+
+      if (this.approvedByMe) {
+        return APPROVED_BY_YOU;
+      }
+
+      if (this.approved) {
+        return APPROVED_BY_OTHERS;
+      }
+
+      return '';
     },
     hasApprovers() {
       return Boolean(this.approvers.length);
     },
+    approvedByMe() {
+      if (!this.currentUserId) {
+        return false;
+      }
+      return this.approvers.some((approver) => approver.id === this.currentUserId);
+    },
+    approvedByOthers() {
+      if (!this.currentUserId) {
+        return false;
+      }
+      return this.approvers.some((approver) => approver.id !== this.currentUserId);
+    },
+    currentUserId() {
+      return gon.current_user_id;
+    },
   },
-  APPROVED_MESSAGE,
 };
 </script>
 
 <template>
   <div data-qa-selector="approvals_summary_content">
-    <strong>{{ message }}</strong>
+    <strong>{{ approvalLeftMessage }}</strong>
     <template v-if="hasApprovers">
-      <span>{{ s__('mrWidget|Approved by') }}</span>
+      <span v-if="approvalLeftMessage">{{ message }}</span>
+      <strong v-else>{{ message }}</strong>
       <user-avatar-list class="d-inline-block align-middle" :items="approvers" />
     </template>
   </div>

app/assets/javascripts/vue_merge_request_widget/components/approvals/messages.js

@@ -6,4 +6,6 @@ export const FETCH_ERROR = s__(
 );
 export const APPROVE_ERROR = s__('mrWidget|An error occurred while submitting your approval.');
 export const UNAPPROVE_ERROR = s__('mrWidget|An error occurred while removing your approval.');
-export const APPROVED_MESSAGE = s__('mrWidget|Merge request approved.');
+export const APPROVED_BY_YOU_AND_OTHERS = s__('mrWidget|Approved by you and others');
+export const APPROVED_BY_YOU = s__('mrWidget|Approved by you');
+export const APPROVED_BY_OTHERS = s__('mrWidget|Approved by');

locale/gitlab.pot

@@ -40755,6 +40755,12 @@ msgstr ""
 msgid "mrWidget|Approved by"
 msgstr ""
 
+msgid "mrWidget|Approved by you"
+msgstr ""
+
+msgid "mrWidget|Approved by you and others"
+msgstr ""
+
 msgid "mrWidget|Are you adding technical debt or code vulnerabilities?"
 msgstr ""
 
@@ -40852,9 +40858,6 @@ msgstr ""
 msgid "mrWidget|Merge locally"
 msgstr ""
 
-msgid "mrWidget|Merge request approved."
-msgstr ""
-
 msgid "mrWidget|Merged by"
 msgstr ""
 

spec/features/merge_request/user_approves_spec.rb

@@ -17,7 +17,7 @@ RSpec.describe 'Merge request > User approves', :js do
 
   it 'approves merge request' do
     click_approval_button('Approve')
-    expect(page).to have_content('Merge request approved')
+    expect(page).to have_content('Approved by you')
 
     verify_approvals_count_on_index!
 

spec/frontend/vue_mr_widget/components/approvals/approvals_summary_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { toNounSeriesText } from '~/lib/utils/grammar';
 import ApprovalsSummary from '~/vue_merge_request_widget/components/approvals/approvals_summary.vue';
-import { APPROVED_MESSAGE } from '~/vue_merge_request_widget/components/approvals/messages';
+import {
+  APPROVED_BY_OTHERS,
+  APPROVED_BY_YOU,
+  APPROVED_BY_YOU_AND_OTHERS,
+} from '~/vue_merge_request_widget/components/approvals/messages';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
 
+const exampleUserId = 1;
 const testApprovers = () => Array.from({ length: 5 }, (_, i) => i).map((id) => ({ id }));
 const testRulesLeft = () => ['Lorem', 'Ipsum', 'dolar & sit'];
 const TEST_APPROVALS_LEFT = 3;
 
 describe('MRWidget approvals summary', () => {
+  const originalUserId = gon.current_user_id;
   let wrapper;
 
   const createComponent = (props = {}) => {
@@ -28,6 +34,7 @@ describe('MRWidget approvals summary', () => {
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
+    gon.current_user_id = originalUserId;
   });
 
   describe('when approved', () => {
@@ -38,7 +45,7 @@ describe('MRWidget approvals summary', () => {
     });
 
     it('shows approved message', () => {
-      expect(wrapper.text()).toContain(APPROVED_MESSAGE);
+      expect(wrapper.text()).toContain(APPROVED_BY_OTHERS);
     });
 
     it('renders avatar list for approvers', () => {
@@ -51,6 +58,48 @@ describe('MRWidget approvals summary', () => {
         }),
       );
     });
+
+    describe('by the current user', () => {
+      beforeEach(() => {
+        gon.current_user_id = exampleUserId;
+        createComponent({
+          approvers: [{ id: exampleUserId }],
+          approved: true,
+        });
+      });
+
+      it('shows "Approved by you" message', () => {
+        expect(wrapper.text()).toContain(APPROVED_BY_YOU);
+      });
+    });
+
+    describe('by the current user and others', () => {
+      beforeEach(() => {
+        gon.current_user_id = exampleUserId;
+        createComponent({
+          approvers: [{ id: exampleUserId }, { id: exampleUserId + 1 }],
+          approved: true,
+        });
+      });
+
+      it('shows "Approved by you and others" message', () => {
+        expect(wrapper.text()).toContain(APPROVED_BY_YOU_AND_OTHERS);
+      });
+    });
+
+    describe('by other users than the current user', () => {
+      beforeEach(() => {
+        gon.current_user_id = exampleUserId;
+        createComponent({
+          approvers: [{ id: exampleUserId + 1 }],
+          approved: true,
+        });
+      });
+
+      it('shows "Approved by others" message', () => {
+        expect(wrapper.text()).toContain(APPROVED_BY_OTHERS);
+      });
+    });
   });
 
   describe('when not approved', () => {