Show error message when pipelines disabled and Pipeline must succeed

This is the first step towards fixing the Epic #12686 (closed) to show accurate messages when MR button is disabled. This specific issue should not focus on the problem as a whole, but a very specific instance where the settings are simply invalid and we give no help to users.

• Pipelines are disabled
• MR pipeline must succeed is turned on
• No external CI is setup

This correspond to option C in the EPIC:

C. Pipelines are disabled and there is no pipeline information available for the commit (pipelines were not enabled or there was no ci configuration when the commit was created):

• Settings -> General -> Merge Requests -> Merge checks -> "Pipelines must succeed" is enabled
• Settings -> General -> Visibility, project features, permissions -> "Pipelines" is disabled
• Pipeline information is generally not shown anymore except in merge requests where it is required to succeed.
• Pipeline section of merge request widget states: No pipeline was run for this commit.
• The merge section of the merge request widget states: Pipelines must succeed for merge requests to be eligible to merge. Please enable pipelines for this project to continue. For more information, see the documentation.

Screenshots

Before

After

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

 <script>
 import { isEmpty } from 'lodash';
-import { GlIcon, GlDeprecatedButton } from '@gitlab/ui';
+import { GlIcon, GlDeprecatedButton, GlSprintf, GlLink } from '@gitlab/ui';
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge';
@@ -26,6 +26,8 @@ export default {
     CommitEdit,
     CommitMessageDropdown,
     GlIcon,
+    GlSprintf,
+    GlLink,
     GlDeprecatedButton,
     MergeImmediatelyConfirmationDialog: () =>
       import(
@@ -56,7 +58,7 @@ export default {
     status() {
       const { pipeline, isPipelineFailed, hasCI, ciStatus } = this.mr;
 
-      if (hasCI && !ciStatus) {
+      if ((hasCI && !ciStatus) || this.hasPipelineMustSucceedConflict) {
         return 'failed';
       } else if (this.isAutoMergeAvailable) {
         return 'pending';
@@ -81,7 +83,7 @@ export default {
         this.status === 'failed' ||
         !this.commitMessage.length ||
         !this.mr.isMergeAllowed ||
-        this.mr.preventMerge
+        !this.mr.isApproved
       ) {
         return 'warning';
       }
@@ -97,6 +99,9 @@ export default {
 
       return __('Merge');
     },
+    hasPipelineMustSucceedConflict() {
+      return !this.mr.hasCI && this.mr.onlyAllowMergeIfPipelineSucceeds;
+    },
     isRemoveSourceBranchButtonDisabled() {
       return this.isMergeButtonDisabled;
     },
@@ -321,7 +326,10 @@ export default {
               </li>
             </ul>
           </span>
-          <div class="media-body-wrap space-children">
+          <div
+            class="media-body-wrap"
+            :class="{ 'space-children': !hasPipelineMustSucceedConflict }"
+          >
             <template v-if="shouldShowMergeControls">
               <label v-if="mr.canRemoveSourceBranch">
                 <input
@@ -343,9 +351,19 @@ export default {
               />
             </template>
             <template v-else>
-              <span class="bold js-resolve-mr-widget-items-message">
-                {{ mergeDisabledText }}
-              </span>
+              <div class="bold js-resolve-mr-widget-items-message">
+                <gl-sprintf
+                  v-if="hasPipelineMustSucceedConflict"
+                  :message="pipelineMustSucceedConflictText"
+                >
+                  <template #link="{ content }">
+                    <gl-link :href="mr.pipelineMustSucceedDocsPath" target="_blank">
+                      {{ content }}
+                    </gl-link>
+                  </template>
+                </gl-sprintf>
+                <gl-sprintf v-else :message="mergeDisabledText" />
+              </div>
             </template>
           </div>
         </div>