Merge branch 'issue_24020' into 'master'

fix display hook error message

## What does this MR do?

Fix hook error message display.  

## Are there points in the code the reviewer needs to double check?

Probably Hook will return the plain multi line text.  It is better `pre` tag than `h4`.  
I thought of another good looking display, but I did not come up with it. :sweat: 

## Why was this MR needed?

When the hook returns an STDERR, "Merge in progress" button spinning forever. Due to javascript's error.  

## Screenshots (if relevant)

When update hook returns an error like

```
XXXXXXXX

YYYYYYYY
ZZZZZZZZ
```

![screen_shot](/uploads/8dac77972a309dfcb72c741dffbd7270/screen_shot.png)

## What are the relevant issue numbers?

Closes #24020

See merge request !7775

1 files changed, 12 insertions, 0 deletions

diff --git a/spec/javascripts/merge_request_widget_spec.js b/spec/javascripts/merge_request_widget_spec.js
index 62890f1ca96..6f91529db00 100644
--- a/spec/javascripts/merge_request_widget_spec.js
+++ b/spec/javascripts/merge_request_widget_spec.js
@@ -106,6 +106,18 @@
       });
     });
 
+    describe('mergeInProgress', function() {
+       it('should display error with h4 tag', function() {
+          spyOn(this.class.$widgetBody, 'html').and.callFake(function(html) {
+            expect(html).toBe('<h4>Sorry, something went wrong.</h4>');
+          });
+          spyOn($, 'ajax').and.callFake(function(e) {
+            e.success({ merge_error: 'Sorry, something went wrong.' });
+          });
+          this.class.mergeInProgress(null);
+        });
+      });
+
     return describe('getCIStatus', function() {
       beforeEach(function() {
         this.ciStatusData = {