Fixed MWPS button showing merging state

This fixes a bug where when clicking the MWPS button
it would incorrectly transition to widget into a merging
state and then change to the correct auto-merge state.

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

@@ -49,7 +49,7 @@ const MERGE_SUCCESS_STATUS = 'success';
 const MERGE_HOOK_VALIDATION_ERROR_STATUS = 'hook_validation_error';
 
 const { transitions } = STATE_MACHINE;
-const { MERGE, MERGED, MERGE_FAILURE } = transitions;
+const { MERGE, MERGED, MERGE_FAILURE, AUTO_MERGE } = transitions;
 
 export default {
   name: 'ReadyToMerge',
@@ -365,7 +365,11 @@ export default {
       }
 
       this.isMakingRequest = true;
-      this.mr.transitionStateMachine({ transition: MERGE });
+
+      if (!useAutoMerge) {
+        this.mr.transitionStateMachine({ transition: MERGE });
+      }
+
       this.service
         .merge(options)
         .then((res) => res.data)
@@ -376,6 +380,7 @@ export default {
 
           if (AUTO_MERGE_STRATEGIES.includes(data.status)) {
             eventHub.$emit('MRWidgetUpdateRequested');
+            this.mr.transitionStateMachine({ transition: AUTO_MERGE });
           } else if (data.status === MERGE_SUCCESS_STATUS) {
             this.initiateMergePolling();
           } else if (hasError) {

app/assets/javascripts/vue_merge_request_widget/constants.js

@@ -58,9 +58,11 @@ const STATE_MACHINE = {
   states: {
     IDLE: 'IDLE',
     MERGING: 'MERGING',
+    AUTO_MERGE: 'AUTO_MERGE',
   },
   transitions: {
     MERGE: 'start-merge',
+    AUTO_MERGE: 'start-auto-merge',
     MERGE_FAILURE: 'merge-failed',
     MERGED: 'merge-done',
   },
@@ -73,6 +75,7 @@ STATE_MACHINE.definition = {
     [states.IDLE]: {
       on: {
         [transitions.MERGE]: states.MERGING,
+        [transitions.AUTO_MERGE]: states.AUTO_MERGE,
       },
     },
     [states.MERGING]: {
@@ -81,15 +84,23 @@ STATE_MACHINE.definition = {
         [transitions.MERGE_FAILURE]: states.IDLE,
       },
     },
+    [states.AUTO_MERGE]: {
+      on: {
+        [transitions.MERGED]: states.IDLE,
+        [transitions.MERGE_FAILURE]: states.IDLE,
+      },
+    },
   },
 };
 
 export const stateToTransitionMap = {
   [stateKey.merging]: transitions.MERGE,
   [stateKey.merged]: transitions.MERGED,
+  [stateKey.autoMergeEnabled]: transitions.AUTO_MERGE,
 };
 export const stateToComponentMap = {
   [states.MERGING]: classStateMap[stateKey.merging],
+  [states.AUTO_MERGE]: classStateMap[stateKey.autoMergeEnabled],
 };
 
 export const EXTENSION_ICONS = {

ee/spec/features/merge_trains/user_adds_to_merge_train_when_pipeline_succeeds_spec.rb

@@ -79,6 +79,7 @@ RSpec.describe 'User adds to merge train when pipeline succeeds', :js do
 
     context "when user clicks 'Delete source branch" do
       before do
+        wait_for_requests
         click_button 'Delete source branch'
       end
 

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

@@ -45,7 +45,7 @@ const createTestMr = (customConfig) => {
     preferredAutoMergeStrategy: MWPS_MERGE_STRATEGY,
     availableAutoMergeStrategies: [MWPS_MERGE_STRATEGY],
     mergeImmediatelyDocsPath: 'path/to/merge/immediately/docs',
-    transitionStateMachine: () => eventHub.$emit('StateMachineValueChanged', { value: 'value' }),
+    transitionStateMachine: (transition) => eventHub.$emit('StateMachineValueChanged', transition),
     translateStateToMachine: () => this.transitionStateMachine(),
   };
 
@@ -306,6 +306,9 @@ describe('ReadyToMerge', () => {
         setImmediate(() => {
           expect(wrapper.vm.isMakingRequest).toBeTruthy();
           expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
+          expect(eventHub.$emit).toHaveBeenCalledWith('StateMachineValueChanged', {
+            transition: 'start-auto-merge',
+          });
 
           const params = wrapper.vm.service.merge.mock.calls[0][0];
 
@@ -343,10 +346,15 @@ describe('ReadyToMerge', () => {
       it('should handle merge action accepted case', (done) => {
         createComponent();
 
+        jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
         jest.spyOn(wrapper.vm.service, 'merge').mockReturnValue(returnPromise('success'));
         jest.spyOn(wrapper.vm, 'initiateMergePolling').mockImplementation(() => {});
         wrapper.vm.handleMergeButtonClick();
 
+        expect(eventHub.$emit).toHaveBeenCalledWith('StateMachineValueChanged', {
+          transition: 'start-merge',
+        });
+
         setImmediate(() => {
           expect(wrapper.vm.isMakingRequest).toBeTruthy();
           expect(wrapper.vm.initiateMergePolling).toHaveBeenCalled();