Merge branch '66331-html-code-shown-in-merge-request' into 'master'

Resolve "HTML code shown in merge request"

Closes #66331

See merge request gitlab-org/gitlab-ce!32032

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

@@ -50,6 +50,7 @@ export default {
           startTag: '<span class="label-branch">',
           endTag: '</span>',
         },
+        false,
       );
     },
   },

changelogs/unreleased/32032-html-code-shown-in-merge-request.yml

@@ -0,0 +1,5 @@
+---
+title: Fix HTML rendering for fast-forward rebases in merge request widget
+merge_request: 32032
+author:
+type: fixed

spec/javascripts/vue_mr_widget/components/mr_widget_rebase_spec.js

@@ -83,6 +83,24 @@ describe('Merge request widget rebase component', () => {
       expect(text).toContain('foo');
       expect(text.replace(/\s\s+/g, ' ')).toContain('to allow this merge request to be merged.');
     });
+
+    it('should render the correct target branch name', () => {
+      const targetBranch = 'fake-branch-to-test-with';
+      vm = mountComponent(Component, {
+        mr: {
+          rebaseInProgress: false,
+          canPushToSourceBranch: false,
+          targetBranch,
+        },
+        service: {},
+      });
+
+      const elem = vm.$el.querySelector('.rebase-state-find-class-convention span');
+
+      expect(elem.innerHTML).toContain(
+        `Fast-forward merge is not possible. Rebase the source branch onto <span class="label-branch">${targetBranch}</span> to allow this merge request to be merged.`,
+      );
+    });
   });
 
   describe('methods', () => {