Merge branch 'djadmin-fix-user-popover-bot' into 'master'

Prevent escaping names in bot popovers

See merge request gitlab-org/gitlab!70422

app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue

 <script>
-import { GlPopover, GlLink, GlSkeletonLoader, GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
+import {
+  GlPopover,
+  GlLink,
+  GlSkeletonLoader,
+  GlIcon,
+  GlSafeHtmlDirective,
+  GlSprintf,
+} from '@gitlab/ui';
 import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
 import { glEmojiTag } from '../../../emoji';
 import UserAvatarImage from '../user_avatar/user_avatar_image.vue';
@@ -16,6 +23,7 @@ export default {
     GlSkeletonLoader,
     UserAvatarImage,
     UserNameWithStatus,
+    GlSprintf,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -103,7 +111,9 @@ export default {
           <div v-if="user.bot" class="gl-text-blue-500">
             <gl-icon name="question" />
             <gl-link data-testid="user-popover-bot-docs-link" :href="user.websiteUrl">
-              {{ sprintf(__('Learn more about %{username}'), { username: user.name }) }}
+              <gl-sprintf :message="__('Learn more about %{username}')">
+                <template #username>{{ user.name }}</template>
+              </gl-sprintf>
             </gl-link>
           </div>
         </template>

spec/frontend/vue_shared/components/user_popover/user_popover_spec.js

@@ -248,6 +248,13 @@ describe('User Popover Component', () => {
       const securityBotDocsLink = findSecurityBotDocsLink();
       expect(securityBotDocsLink.exists()).toBe(true);
       expect(securityBotDocsLink.attributes('href')).toBe(SECURITY_BOT_USER.websiteUrl);
+      expect(securityBotDocsLink.text()).toBe('Learn more about GitLab Security Bot');
+    });
+
+    it("doesn't escape user's name", () => {
+      createWrapper({ user: { ...SECURITY_BOT_USER, name: '%<>\';"' } });
+      const securityBotDocsLink = findSecurityBotDocsLink();
+      expect(securityBotDocsLink.text()).toBe('Learn more about %<>\';"');
     });
   });
 });