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

ee/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

@@ -11,6 +11,7 @@ import {
   MERGE_DISABLED_TEXT,
   PIPELINE_MUST_SUCCEED_CONFLICT_TEXT,
 } from '~/vue_merge_request_widget/mixins/ready_to_merge';
+import { GlSprintf } from '@gitlab/ui';
 
 describe('ReadyToMerge', () => {
   let wrapper;
@@ -58,7 +59,7 @@ describe('ReadyToMerge', () => {
     ({ vm } = wrapper);
   };
 
-  const findResolveItemsMessage = () => wrapper.find('.js-resolve-mr-widget-items-message');
+  const findResolveItemsMessage = () => wrapper.find(GlSprintf);
   const findMergeButton = () => wrapper.find('.qa-merge-button');
   const findMergeButtonDropdown = () => wrapper.find('.js-merge-moment');
   const findMergeImmediatelyButton = () => wrapper.find('.js-merge-immediately-button');
@@ -271,7 +272,7 @@ describe('ReadyToMerge', () => {
       });
 
       it('should show cannot merge text', () => {
-        expect(findResolveItemsMessage().html()).toContain(MERGE_DISABLED_TEXT);
+        expect(findResolveItemsMessage().attributes('message')).toBe(MERGE_DISABLED_TEXT);
       });
 
       it('should show disabled merge button', () => {
@@ -294,7 +295,7 @@ describe('ReadyToMerge', () => {
     });
 
     it('should show approvals needed text', () => {
-      expect(findResolveItemsMessage().html()).toContain(MERGE_DISABLED_TEXT_UNAPPROVED);
+      expect(findResolveItemsMessage().attributes('message')).toBe(MERGE_DISABLED_TEXT_UNAPPROVED);
     });
   });
 
@@ -309,7 +310,9 @@ describe('ReadyToMerge', () => {
     });
 
     it('should show a custom message that explains the conflict', () => {
-      expect(findResolveItemsMessage().html()).toContain(PIPELINE_MUST_SUCCEED_CONFLICT_TEXT);
+      expect(findResolveItemsMessage().attributes('message')).toBe(
+        PIPELINE_MUST_SUCCEED_CONFLICT_TEXT,
+      );
     });
   });
 });