Update mr page buttons to Pajamas

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/60646

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

@@ -22,7 +22,7 @@ import { __ } from '~/locale';
 import SmartInterval from '~/smart_interval';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MergeRequest from '../../../merge_request';
-import { AUTO_MERGE_STRATEGIES, DANGER, INFO, WARNING } from '../../constants';
+import { AUTO_MERGE_STRATEGIES, DANGER, CONFIRM, WARNING } from '../../constants';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import MergeRequestStore from '../../stores/mr_widget_store';
@@ -227,11 +227,7 @@ export default {
         return DANGER;
       }
 
-      if (this.status === PIPELINE_PENDING_STATE) {
-        return INFO;
-      }
-
-      return PIPELINE_SUCCESS_STATE;
+      return CONFIRM;
     },
     iconClass() {
       if (this.shouldRenderMergeTrainHelperText && !this.mr.preventMerge) {

app/assets/javascripts/vue_merge_request_widget/constants.js

@@ -4,6 +4,7 @@ export const SUCCESS = 'success';
 export const WARNING = 'warning';
 export const DANGER = 'danger';
 export const INFO = 'info';
+export const CONFIRM = 'confirm';
 
 export const WARNING_MESSAGE_CLASS = 'warning_message';
 export const DANGER_MESSAGE_CLASS = 'danger_message';

app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml

 - display_issuable_type = issuable_display_type(@merge_request)
-- button_action_class = @merge_request.closed? ? 'btn-default' : 'btn-warning btn-warning-secondary'
 - button_class = "btn gl-button #{!@merge_request.closed? && 'js-draft-toggle-button'}"
 - toggle_class = "btn gl-button dropdown-toggle"
 
 .float-left.btn-group.gl-ml-3.gl-display-none.gl-md-display-flex
-  = link_to @merge_request.closed? ? reopen_issuable_path(@merge_request) : toggle_draft_merge_request_path(@merge_request), method: :put, class: "#{button_class} #{button_action_class}" do
+  = link_to @merge_request.closed? ? reopen_issuable_path(@merge_request) : toggle_draft_merge_request_path(@merge_request), method: :put, class: "#{button_class} btn-confirm-secondary" do
     - if @merge_request.closed?
       = _('Reopen')
       = display_issuable_type
@@ -12,9 +11,9 @@
       = @merge_request.work_in_progress? ? _('Mark as ready') : _('Mark as draft')
 
   - if !@merge_request.closed? || !issuable_author_is_current_user(@merge_request)
-    = button_tag type: 'button', class: "#{toggle_class} #{button_action_class}", data: { 'toggle' => 'dropdown' } do
+    = button_tag type: 'button', class: "#{toggle_class} btn-confirm-secondary btn-icon", data: { 'toggle' => 'dropdown' } do
       %span.gl-sr-only= _('Toggle dropdown')
-      = sprite_icon "angle-down", size: 12
+      = sprite_icon "chevron-down", size: 12, css_class: "gl-button-icon"
 
     %ul.dropdown-menu.dropdown-menu-right
       - if @merge_request.open?

ee/spec/features/merge_request/user_merges_immediately_spec.rb

@@ -35,7 +35,7 @@ RSpec.describe 'Merge requests > User merges immediately', :js do
 
   context 'when the merge request is on the merge train' do
     def merge_button
-      find('.mr-widget-body .accept-merge-request.btn-info')
+      find('.mr-widget-body .accept-merge-request.btn-confirm')
     end
 
     def open_warning_dialog

spec/features/merge_request/user_merges_immediately_spec.rb

@@ -36,7 +36,7 @@ RSpec.describe 'Merge requests > User merges immediately', :js do
         Sidekiq::Testing.fake! do
           click_button 'Merge immediately'
 
-          expect(find('.accept-merge-request.btn-info')).to have_content('Merge in progress')
+          expect(find('.accept-merge-request.btn-confirm')).to have_content('Merge in progress')
 
           wait_for_requests
         end

spec/features/merge_request/user_sees_merge_widget_spec.rb

@@ -274,10 +274,10 @@ RSpec.describe 'Merge request > User sees merge widget', :js do
       visit project_merge_request_path(project, merge_request)
     end
 
-    it 'has info button when MWBS button' do
+    it 'has confirm button when MWBS button' do
       # Wait for the `ci_status` and `merge_check` requests
       wait_for_requests
-      expect(page).to have_selector('.accept-merge-request.btn-info')
+      expect(page).to have_selector('.accept-merge-request.btn-confirm')
     end
   end
 

spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

@@ -123,26 +123,26 @@ describe('ReadyToMerge', () => {
     });
 
     describe('mergeButtonVariant', () => {
-      it('defaults to success class', () => {
+      it('defaults to confirm class', () => {
         createComponent({
           mr: { availableAutoMergeStrategies: [] },
         });
 
-        expect(wrapper.vm.mergeButtonVariant).toEqual('success');
+        expect(wrapper.vm.mergeButtonVariant).toEqual('confirm');
       });
 
-      it('returns success class for success status', () => {
+      it('returns confirm class for success status', () => {
         createComponent({
           mr: { availableAutoMergeStrategies: [], pipeline: true },
         });
 
-        expect(wrapper.vm.mergeButtonVariant).toEqual('success');
+        expect(wrapper.vm.mergeButtonVariant).toEqual('confirm');
       });
 
-      it('returns info class for pending status', () => {
+      it('returns confirm class for pending status', () => {
         createComponent();
 
-        expect(wrapper.vm.mergeButtonVariant).toEqual('info');
+        expect(wrapper.vm.mergeButtonVariant).toEqual('confirm');
       });
 
       it('returns danger class for failed status', () => {