Do not render empty title in HelpPopover

Do not render title in HelpPopover if it was not provided.

(Also use `GlSafeHtmlDirective` instead of `v-html`).

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

 <script>
-import { GlButton, GlPopover } from '@gitlab/ui';
+import { GlButton, GlPopover, GlSafeHtmlDirective } from '@gitlab/ui';
 
 /**
  * Render a button with a question mark icon
@@ -11,6 +11,9 @@ export default {
     GlButton,
     GlPopover,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     options: {
       type: Object,
@@ -24,13 +27,11 @@ export default {
   <span>
     <gl-button ref="popoverTrigger" variant="link" icon="question" tabindex="0" />
     <gl-popover triggers="hover focus" :target="() => $refs.popoverTrigger.$el" v-bind="options">
-      <template #title>
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-html="options.title"></span>
+      <template v-if="options.title" #title>
+        <span v-safe-html="options.title"></span>
       </template>
       <template #default>
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <div v-html="options.content"></div>
+        <div v-safe-html="options.content"></div>
       </template>
     </gl-popover>
   </span>

changelogs/unreleased/vs-do-not-render-empty-title-help-popover.yml

+---
+title: Do not render empty title in HelpPopover
+merge_request: 57025
+author:
+type: fixed

spec/frontend/vue_shared/components/help_popover_spec.js

@@ -27,7 +27,6 @@ describe('HelpPopover', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('renders a link button with an icon question', () => {
@@ -54,6 +53,14 @@ describe('HelpPopover', () => {
     expect(findPopover().find('b').exists()).toBe(true);
   });
 
+  describe('without title', () => {
+    it('does not render title', () => {
+      buildWrapper({ title: null });
+
+      expect(findPopover().find('span').exists()).toBe(false);
+    });
+  });
+
   it('binds other popover options to the popover instance', () => {
     const placement = 'bottom';