Merge branch 'improve-unapproved-mr-merge-button-text' into 'master'

Improved unapproved MR merge button text

See merge request gitlab-org/gitlab!15745

app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue

@@ -88,7 +88,8 @@ export default {
     mergeButtonText() {
       if (this.isMergingImmediately) {
         return __('Merge in progress');
-      } else if (this.isAutoMergeAvailable) {
+      }
+      if (this.isAutoMergeAvailable) {
         return this.autoMergeText;
       }
 
@@ -306,7 +307,7 @@ export default {
             </template>
             <template v-else>
               <span class="bold js-resolve-mr-widget-items-message">
-                {{ __('You can only merge once the items above are resolved') }}
+                {{ mergeDisabledText }}
               </span>
             </template>
           </div>

app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js

 import { __ } from '~/locale';
 
+export const MERGE_DISABLED_TEXT = __('You can only merge once the items above are resolved.');
+
 export default {
   computed: {
     isMergeButtonDisabled() {
@@ -11,6 +13,9 @@ export default {
           this.mr.preventMerge,
       );
     },
+    mergeDisabledText() {
+      return MERGE_DISABLED_TEXT;
+    },
     autoMergeText() {
       // MWPS is currently the only auto merge strategy available in CE
       return __('Merge when pipeline succeeds');

ee/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js

 import { MTWPS_MERGE_STRATEGY, MT_MERGE_STRATEGY } from '~/vue_merge_request_widget/constants';
 import { __ } from '~/locale';
+import base from '~/vue_merge_request_widget/mixins/ready_to_merge';
+
+export const MERGE_DISABLED_TEXT_UNAPPROVED = __(
+  'You can only merge once this merge request is approved.',
+);
 
 export default {
   computed: {
@@ -16,6 +21,13 @@ export default {
           this.mr.preventMerge,
       );
     },
+    mergeDisabledText() {
+      if (this.isApprovalNeeded) {
+        return MERGE_DISABLED_TEXT_UNAPPROVED;
+      }
+
+      return base.computed.mergeDisabledText.call(this);
+    },
     autoMergeText() {
       if (this.mr.preferredAutoMergeStrategy === MTWPS_MERGE_STRATEGY) {
         if (this.mr.mergeTrainsCount === 0) {

ee/changelogs/unreleased/improve-unapproved-mr-merge-button-text.yml

+---
+title: Improve unapproved MR merge button text
+merge_request: 15745
+author: Lee Tickett
+type: other

ee/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

@@ -5,6 +5,8 @@ import {
   MT_MERGE_STRATEGY,
   MTWPS_MERGE_STRATEGY,
 } from '~/vue_merge_request_widget/constants';
+import { MERGE_DISABLED_TEXT } from '~/vue_merge_request_widget/mixins/ready_to_merge';
+import { MERGE_DISABLED_TEXT_UNAPPROVED } from 'ee/vue_merge_request_widget/mixins/ready_to_merge';
 
 describe('ReadyToMerge', () => {
   const localVue = createLocalVue();
@@ -51,6 +53,9 @@ describe('ReadyToMerge', () => {
     ({ vm } = wrapper);
   };
 
+  const findResolveItemsMessage = () => wrapper.find('.js-resolve-mr-widget-items-message');
+  const findMergeButton = () => wrapper.find('.qa-merge-button');
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -180,4 +185,38 @@ describe('ReadyToMerge', () => {
       expect(vm.shouldShowMergeImmediatelyDropdown).toBe(true);
     });
   });
+
+  describe('cannot merge', () => {
+    describe('when isMergeAllowed=false', () => {
+      beforeEach(() => {
+        factory({ isMergeAllowed: false, availableAutoMergeStrategies: [] });
+      });
+
+      it('should show cannot merge text', () => {
+        expect(findResolveItemsMessage().text()).toEqual(MERGE_DISABLED_TEXT);
+      });
+
+      it('should show disabled merge button', () => {
+        const button = findMergeButton();
+
+        expect(button.exists()).toBe(true);
+        expect(button.attributes('disabled')).toBe('disabled');
+      });
+    });
+  });
+
+  describe('when needs approval', () => {
+    beforeEach(() => {
+      factory({
+        isMergeAllowed: false,
+        availableAutoMergeStrategies: [],
+        hasApprovalsAvailable: true,
+        isApproved: false,
+      });
+    });
+
+    it('should show approvals needed text', () => {
+      expect(findResolveItemsMessage().text()).toEqual(MERGE_DISABLED_TEXT_UNAPPROVED);
+    });
+  });
 });

locale/gitlab.pot

@@ -17818,7 +17818,10 @@ msgstr ""
 msgid "You can only edit files when you are on a branch"
 msgstr ""
 
-msgid "You can only merge once the items above are resolved"
+msgid "You can only merge once the items above are resolved."
+msgstr ""
+
+msgid "You can only merge once this merge request is approved."
 msgstr ""
 
 msgid "You can only transfer the project to namespaces you manage."