Add pipeline must succeed warning to MR widgetadd-warning-for-pipeline-must-succeed-when-pipelines-are-disabled

If "Pipelines must succeed" is checked + there is no pipeline for the MR
show a warning that only MRs with pipelines that succeed are mergeable
with a link to the docs on the "only allow if pipeline succeeds" option

6 files changed, 50 insertions, 1 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index d4514767912..494b5b469a7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -3,7 +3,7 @@ import _ from 'underscore';
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import simplePoll from '~/lib/utils/simple_poll';
-import { __ } from '~/locale';
+import { sprintf, __ } from '~/locale';
 import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge';
 import MergeRequest from '../../../merge_request';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
@@ -113,6 +113,21 @@ export default {
     shouldShowMergeEdit() {
       return !this.mr.ffOnlyEnabled;
     },
+    hasPipelineMustSucceedConflict() {
+      return this.mr.onlyAllowMergeIfPipelineSucceeds && !this.mr.hasCi;
+    },
+    pipelineMustSucceedText() {
+      return sprintf(
+        __(
+          'Only merge requests with pipelines that succeed are allowed to be merged. For more information, see the %{linkStart}documentation.%{linkEnd}',
+        ),
+        {
+          linkStart: `<a href="${this.mr.pipelineMustSucceedDocsPath}">`,
+          linkEnd: '</a>',
+        },
+        false,
+      );
+    },
   },
   methods: {
     updateMergeCommitMessage(includeDescription) {
@@ -307,6 +322,12 @@ export default {
                 :is-disabled="isMergeButtonDisabled"
               />
             </template>
+            <template v-else-if="hasPipelineMustSucceedConflict">
+              <div
+                class="bold js-pipeline-must-succeed-conflict"
+                v-html="pipelineMustSucceedText"
+              ></div>
+            </template>
             <template v-else>
               <span class="bold js-resolve-mr-widget-items-message">
                 {{ __('You can only merge once the items above are resolved') }}
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 581fee7477f..56129fff32c 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
@@ -25,6 +25,8 @@ export default class MergeRequestStore {
     this.squashBeforeMergeHelpPath =
       this.squashBeforeMergeHelpPath || data.squash_before_merge_help_path;
     this.troubleshootingDocsPath = this.troubleshootingDocsPath || data.troubleshooting_docs_path;
+    this.pipelineMustSucceedDocsPath =
+      this.pipelineMustSucceedDocsPath || data.pipeline_must_succeed_docs_path;
     this.enableSquashBeforeMerge = this.enableSquashBeforeMerge || true;
 
     this.iid = data.iid;
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index af3bd8dcd69..a0ea583eba0 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -23,6 +23,7 @@
 
         window.gl.mrWidgetData.squash_before_merge_help_path = '#{help_page_path("user/project/merge_requests/squash_and_merge")}';
         window.gl.mrWidgetData.troubleshooting_docs_path = '#{help_page_path('user/project/merge_requests/index.md', anchor: 'troubleshooting')}';
+        window.gl.mrWidgetData.pipeline_must_succeed_docs_path = '#{help_page_path('user/project/merge_requests/merge_when_pipeline_succeeds.md', anchor: 'only-allow-merge-requests-to-be-merged-if-the-pipeline-succeeds')}';
 
     #js-vue-mr-widget.mr-widget
 
diff --git a/changelogs/unreleased/add-warning-for-pipeline-must-succeed-when-pipelines-are-disabled.yml b/changelogs/unreleased/add-warning-for-pipeline-must-succeed-when-pipelines-are-disabled.yml
new file mode 100644
index 00000000000..c8f4556cace
--- /dev/null
+++ b/changelogs/unreleased/add-warning-for-pipeline-must-succeed-when-pipelines-are-disabled.yml
@@ -0,0 +1,5 @@
+---
+title: Add pipeline must succeed warning to MR widget
+merge_request: 30815
+author:
+type: fixed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 9b41f32042a..7af46df60b7 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7439,6 +7439,9 @@ msgstr ""
 msgid "Only admins"
 msgstr ""
 
+msgid "Only merge requests with pipelines that succeed are allowed to be merged. For more information, see the %{linkStart}documentation.%{linkEnd}"
+msgstr ""
+
 msgid "Only mirror protected branches"
 msgstr ""
 
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index ba3ba01944d..113f76b5d09 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -900,6 +900,23 @@ describe('ReadyToMerge', () => {
       });
     });
 
+    describe('when pipeline must succeed but there is no pipeline information', () => {
+      beforeEach(() => {
+        vm = createComponent({
+          mr: {
+            onlyAllowMergeIfPipelineSucceeds: true,
+            hasCI: false,
+            isMergeAllowed: false,
+            availableAutoMergeStrategies: [],
+          },
+        });
+      });
+
+      it('shows a specific warning', () => {
+        expect(vm.$el.querySelector('.js-pipeline-must-succeed-conflict')).not.toBeNull();
+      });
+    });
+
     describe('when not allowed to merge', () => {
       beforeEach(() => {
         vm = createComponent({