Switch to v-safe-html in Status Modal

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -7,6 +7,7 @@ import {
   GlFormCheckbox,
   GlDropdown,
   GlDropdownItem,
+  GlSafeHtmlDirective,
 } from '@gitlab/ui';
 import $ from 'jquery';
 import Vue from 'vue';
@@ -48,6 +49,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    SafeHtml: GlSafeHtmlDirective,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -233,6 +235,7 @@ export default {
     },
   },
   statusTimeRanges,
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 
@@ -266,7 +269,7 @@ export default {
               @click="setEmoji"
             >
               <template #button-content>
-                <span v-html="emojiTag /* eslint-disable-line vue/no-v-html */"></span>
+                <span v-safe-html:[$options.safeHtmlConfig]="emojiTag"></span>
                 <span
                   v-show="noEmoji"
                   class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
@@ -288,7 +291,7 @@ export default {
               class="js-toggle-emoji-menu emoji-menu-toggle-button btn"
               @click="showEmojiMenu"
             >
-              <span v-html="emojiTag /* eslint-disable-line vue/no-v-html */"></span>
+              <span v-safe-html:[$options.safeHtmlConfig]="emojiTag"></span>
               <span
                 v-show="noEmoji"
                 class="js-no-emoji-placeholder no-emoji-placeholder position-relative"