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, 1 insertions, 1 deletions

diff --git a/app/assets/javascripts/merge_request_widget.js.es6 b/app/assets/javascripts/merge_request_widget.js.es6
index a55fe9df0b3..d9495e50388 100644
--- a/app/assets/javascripts/merge_request_widget.js.es6
+++ b/app/assets/javascripts/merge_request_widget.js.es6
@@ -101,7 +101,7 @@
               urlSuffix = deleteSourceBranch ? '?deleted_source_branch=true' : '';
               return window.location.href = window.location.pathname + urlSuffix;
             } else if (data.merge_error) {
-              return this.$widgetBody.html("<h4>" + data.merge_error + "</h4>");
+              return _this.$widgetBody.html("<h4>" + data.merge_error + "</h4>");
             } else {
               callback = function() {
                 return merge_request_widget.mergeInProgress(deleteSourceBranch);