Merge branch '55276-encoding-issue-with-the-user-centric-tooltips' into 'master'

Resolve "Encoding issue with the user centric tooltips"

Closes #55276

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

(cherry picked from commit dac38419fe723ae9e327afe1fa5aab4c61aebb98)

421b3a15 Prevent escaping in user tooltip 
db30ddbf Pretty print user-popover.vue
3c3701c9 Add a test for special characters

2 files changed, 21 insertions, 4 deletions

diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
index 7fbadcc0111..fad1a2f3f56 100644
--- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
@@ -30,10 +30,14 @@ export default {
   computed: {
     jobLine() {
       if (this.user.bio && this.user.organization) {
-        return sprintf(__('%{bio} at %{organization}'), {
-          bio: this.user.bio,
-          organization: this.user.organization,
-        });
+        return sprintf(
+          __('%{bio} at %{organization}'),
+          {
+            bio: this.user.bio,
+            organization: this.user.organization,
+          },
+          false,
+        );
       } else if (this.user.bio) {
         return this.user.bio;
       } else if (this.user.organization) {
diff --git a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js b/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
index 1578b0f81f9..e16ab156679 100644
--- a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
+++ b/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
@@ -101,6 +101,19 @@ describe('User Popover Component', () => {
 
       expect(vm.$el.textContent).toContain('Engineer at GitLab');
     });
+
+    it('should not encode special characters when we have bio and organization', () => {
+      const testProps = Object.assign({}, DEFAULT_PROPS);
+      testProps.user.bio = 'Manager & Team Lead';
+      testProps.user.organization = 'GitLab';
+
+      vm = mountComponent(UserPopover, {
+        ...DEFAULT_PROPS,
+        target: document.querySelector('.js-user-link'),
+      });
+
+      expect(vm.$el.textContent).toContain('Manager & Team Lead at GitLab');
+    });
   });
 
   describe('status data', () => {