Add two warning messages to the MR widgetnfriend-update-merge-request-widget-for-post-merge-pipelines

This commit adds two new warning messages to the MR widget that handle
cases involving merge request pipelines.

7 files changed, 114 insertions, 4 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue
new file mode 100644
index 00000000000..040315b3c66
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue
@@ -0,0 +1,46 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import { WARNING, DANGER, WARNING_MESSAGE_CLASS, DANGER_MESSAGE_CLASS } from '../constants';
+
+export default {
+  name: 'MrWidgetAlertMessage',
+  components: {
+    GlLink,
+    Icon,
+  },
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: DANGER,
+      validator: value => [WARNING, DANGER].includes(value),
+    },
+    helpPath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  computed: {
+    messageClass() {
+      if (this.type === WARNING) {
+        return WARNING_MESSAGE_CLASS;
+      } else if (this.type === DANGER) {
+        return DANGER_MESSAGE_CLASS;
+      }
+
+      return '';
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="m-3 ml-5" :class="messageClass">
+    <slot></slot>
+    <gl-link v-if="helpPath" :href="helpPath" target="_blank">
+      <icon :size="16" name="question-o" class="align-middle" />
+    </gl-link>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
new file mode 100644
index 00000000000..0a29d55fbd6
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/constants.js
@@ -0,0 +1,5 @@
+export const WARNING = 'warning';
+export const DANGER = 'danger';
+
+export const WARNING_MESSAGE_CLASS = 'warning_message';
+export const DANGER_MESSAGE_CLASS = 'danger_message';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 57c4dfbe3b7..aa4ecb0aac3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -12,6 +12,7 @@ import WidgetMergeHelp from './components/mr_widget_merge_help.vue';
 import MrWidgetPipelineContainer from './components/mr_widget_pipeline_container.vue';
 import Deployment from './components/deployment.vue';
 import WidgetRelatedLinks from './components/mr_widget_related_links.vue';
+import MrWidgetAlertMessage from './components/mr_widget_alert_message.vue';
 import MergedState from './components/states/mr_widget_merged.vue';
 import ClosedState from './components/states/mr_widget_closed.vue';
 import MergingState from './components/states/mr_widget_merging.vue';
@@ -46,6 +47,7 @@ export default {
     MrWidgetPipelineContainer,
     Deployment,
     'mr-widget-related-links': WidgetRelatedLinks,
+    MrWidgetAlertMessage,
     'mr-widget-merged': MergedState,
     'mr-widget-closed': ClosedState,
     'mr-widget-merging': MergingState,
@@ -110,6 +112,18 @@ export default {
     shouldRenderMergedPipeline() {
       return this.mr.state === 'merged' && !_.isEmpty(this.mr.mergePipeline);
     },
+    showMergePipelineForkWarning() {
+      return Boolean(
+        this.mr.mergePipelinesEnabled && this.mr.sourceProjectId !== this.mr.targetProjectId,
+      );
+    },
+    showTargetBranchAdvancedError() {
+      return Boolean(
+        this.mr.pipeline &&
+          this.mr.pipeline.target_sha &&
+          this.mr.pipeline.target_sha !== this.mr.targetBranchSha,
+      );
+    },
   },
   watch: {
     state(newVal, oldVal) {
@@ -328,6 +342,30 @@ export default {
           :related-links="mr.relatedLinks"
         />
 
+        <mr-widget-alert-message
+          v-if="showMergePipelineForkWarning"
+          type="warning"
+          :help-path="mr.mergeRequestPipelinesHelpPath"
+        >
+          {{
+            s__(
+              'mrWidget|Fork merge requests do not create merge request pipelines which validate a post merge result',
+            )
+          }}
+        </mr-widget-alert-message>
+
+        <mr-widget-alert-message
+          v-if="showTargetBranchAdvancedError"
+          type="danger"
+          :help-path="mr.mergeRequestPipelinesHelpPath"
+        >
+          {{
+            s__(
+              'mrWidget|The target branch has advanced, which invalidates the merge request pipeline. Please update the source branch and retry merging',
+            )
+          }}
+        </mr-widget-alert-message>
+
         <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" />
       </div>
       <div v-if="shouldRenderMergeHelp" class="mr-widget-footer"><mr-widget-merge-help /></div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 58363f632a9..5fa6ec9328c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -28,9 +28,11 @@ export default class MergeRequestStore {
     this.iid = data.iid;
     this.title = data.title;
     this.targetBranch = data.target_branch;
+    this.targetBranchSha = data.target_branch_sha;
     this.sourceBranch = data.source_branch;
     this.sourceBranchProtected = data.source_branch_protected;
     this.conflictsDocsPath = data.conflicts_docs_path;
+    this.mergeRequestPipelinesHelpPath = data.merge_request_pipelines_docs_path;
     this.mergeStatus = data.merge_status;
     this.commitMessage = data.default_merge_commit_message;
     this.shortMergeCommitSha = data.short_merge_commit_sha;
@@ -99,6 +101,9 @@ export default class MergeRequestStore {
     this.allowCollaboration = data.allow_collaboration;
     this.targetProjectFullPath = data.target_project_full_path;
     this.sourceProjectFullPath = data.source_project_full_path;
+    this.sourceProjectId = data.source_project_id;
+    this.targetProjectId = data.target_project_id;
+    this.mergePipelinesEnabled = data.merge_pipelines_enabled;
 
     // Cherry-pick and Revert actions related
     this.canCherryPickInCurrentMR = currentUser.can_cherry_pick_on_current_merge_request || false;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index d72597a6147..ff6a24be51f 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -205,12 +205,12 @@ li.note {
   }
 }
 
-.warning_message {
-  border-left: 4px solid $orange-200;
-  color: $orange-700;
+@mixin message($background-color, $border-color, $text-color) {
+  border-left: 4px solid $border-color;
+  color: $text-color;
   padding: 10px;
   margin-bottom: 10px;
-  background: $orange-100;
+  background: $background-color;
   padding-left: 20px;
 
   &.centered {
@@ -218,6 +218,14 @@ li.note {
   }
 }
 
+.warning_message {
+  @include message($orange-100, $orange-200, $orange-700);
+}
+
+.danger_message {
+  @include message($red-100, $red-200, $red-900);
+}
+
 .gitlab-promo {
   a {
     color: $gl-gray-350;
diff --git a/app/presenters/merge_request_presenter.rb b/app/presenters/merge_request_presenter.rb
index 284b1ad9b55..55103c0a95c 100644
--- a/app/presenters/merge_request_presenter.rb
+++ b/app/presenters/merge_request_presenter.rb
@@ -209,6 +209,10 @@ class MergeRequestPresenter < Gitlab::View::Presenter::Delegated
     help_page_path('user/project/merge_requests/resolve_conflicts.md')
   end
 
+  def merge_request_pipelines_docs_path
+    help_page_path('ci/merge_request_pipelines/index.md')
+  end
+
   private
 
   def cached_can_be_reverted?
diff --git a/app/serializers/merge_request_widget_entity.rb b/app/serializers/merge_request_widget_entity.rb
index 4831eb32c96..b130f447cce 100644
--- a/app/serializers/merge_request_widget_entity.rb
+++ b/app/serializers/merge_request_widget_entity.rb
@@ -256,6 +256,10 @@ class MergeRequestWidgetEntity < IssuableEntity
     presenter(merge_request).conflicts_docs_path
   end
 
+  expose :merge_request_pipelines_docs_path do |merge_request|
+    presenter(merge_request).merge_request_pipelines_docs_path
+  end
+
   private
 
   delegate :current_user, to: :request