add sha-mismatch state to mr-widget to prevent accidental merges when branch unknowingly changes

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js

+export default {
+  name: 'MRWidgetSHAMismatch',
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold">
+        The source branch HEAD has recently changed. Please reload the page and review the changes before merging.
+      </span>
+    </div>
+  `,
+};

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -27,6 +27,7 @@ export { default as NothingToMergeState } from './components/states/mr_widget_no
 export { default as MissingBranchState } from './components/states/mr_widget_missing_branch';
 export { default as NotAllowedState } from './components/states/mr_widget_not_allowed';
 export { default as ReadyToMergeState } from './components/states/mr_widget_ready_to_merge';
+export { default as SHAMismatchState } from './components/states/mr_widget_sha_mismatch';
 export { default as UnresolvedDiscussionsState } from './components/states/mr_widget_unresolved_discussions';
 export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked';
 export { default as PipelineFailedState } from './components/states/mr_widget_pipeline_failed';

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -16,6 +16,7 @@ import {
   MissingBranchState,
   NotAllowedState,
   ReadyToMergeState,
+  SHAMismatchState,
   UnresolvedDiscussionsState,
   PipelineBlockedState,
   PipelineFailedState,
@@ -203,6 +204,7 @@ export default {
     'mr-widget-not-allowed': NotAllowedState,
     'mr-widget-missing-branch': MissingBranchState,
     'mr-widget-ready-to-merge': ReadyToMergeState,
+    'mr-widget-sha-mismatch': SHAMismatchState,
     'mr-widget-squash-before-merge': SquashBeforeMerge,
     'mr-widget-checking': CheckingState,
     'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,

app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js

@@ -21,6 +21,8 @@ export default function deviseState(data) {
     return 'unresolvedDiscussions';
   } else if (this.isPipelineBlocked) {
     return 'pipelineBlocked';
+  } else if (this.hasSHAChanged) {
+    return 'shaMismatch';
   } else if (this.canBeMerged) {
     return 'readyToMerge';
   }

app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -4,6 +4,7 @@ import { getStateKey } from '../dependencies';
 export default class MergeRequestStore {
   constructor(data) {
+    this.startingSha = data.diff_head_sha;
     this.setData(data);
   }
@@ -67,6 +68,7 @@ export default class MergeRequestStore {
     this.canMerge = !!data.merge_path;
     this.canCreateIssue = currentUser.can_create_issue || false;
     this.canCancelAutomaticMerge = !!data.cancel_merge_when_pipeline_succeeds_path;
+    this.hasSHAChanged = this.sha !== this.startingSha;
     this.canBeMerged = data.can_be_merged || false;
     // Cherry-pick and Revert actions related

app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js

@@ -16,6 +16,7 @@ const stateToComponentMap = {
   mergeWhenPipelineSucceeds: 'mr-widget-merge-when-pipeline-succeeds',
   failedToMerge: 'mr-widget-failed-to-merge',
   autoMergeFailed: 'mr-widget-auto-merge-failed',
+  shaMismatch: 'mr-widget-sha-mismatch',
 };
 const statesToShowHelpWidget = [