Add warning when merge cannot be fast forwardedissue_39773

4 files changed, 51 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
new file mode 100644
index 00000000000..7f015a69668
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -0,0 +1,45 @@
+<script>
+  import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon';
+  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+
+  export default {
+    props: {
+      mr: {
+        type: Object,
+        required: true,
+      },
+      service: {
+        type: Object,
+        required: true,
+      },
+    },
+    components: {
+      statusIcon,
+      loadingIcon,
+    },
+    computed: {
+      showDisabledButton() {
+        return true;
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      :status="status"
+      :show-disabled-button="showDisabledButton"
+      />
+
+    <div class="rebase-state-find-class-convention media media-body space-children">
+      <template>
+        <span class="bold">
+          Fast-forward merge is not possible.
+          Rebase the source branch onto
+          <span class="label-branch">{{mr.targetBranch}}</span>
+          to allow this merge request to be merged.
+        </span>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 4f497b204a3..61defc221d8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -1,4 +1,5 @@
 import Flash from '../flash';
+import  RebaseState from './components/states/mr_widget_rebase.vue';
 import {
   WidgetHeader,
   WidgetMergeHelp,
@@ -229,6 +230,7 @@ export default {
     'mr-widget-pipeline-failed': PipelineFailedState,
     'mr-widget-merge-when-pipeline-succeeds': MergeWhenPipelineSucceedsState,
     'mr-widget-auto-merge-failed': AutoMergeFailed,
+    'mr-widget-rebase': RebaseState,
   },
   template: `
     <div class="mr-state-widget prepend-top-default">
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
index 7c15abfff10..fbbc5520737 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
@@ -23,6 +23,8 @@ export default function deviseState(data) {
     return this.mergeError ? 'autoMergeFailed' : 'mergeWhenPipelineSucceeds';
   } else if (!this.canMerge) {
     return 'notAllowedToMerge';
+  } else if (this.shouldBeRebased) {
+    return 'rebase';
   } else if (this.canBeMerged) {
     return 'readyToMerge';
   }
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
index 9074a064a6d..f9882aa3824 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
@@ -17,6 +17,7 @@ const stateToComponentMap = {
   failedToMerge: 'mr-widget-failed-to-merge',
   autoMergeFailed: 'mr-widget-auto-merge-failed',
   shaMismatch: 'mr-widget-sha-mismatch',
+  rebase: 'mr-widget-rebase',
 };
 
 const statesToShowHelpWidget = [
@@ -29,6 +30,7 @@ const statesToShowHelpWidget = [
   'pipelineFailed',
   'pipelineBlocked',
   'autoMergeFailed',
+  'rebase',
 ];
 
 export default {