1 files changed, 21 insertions, 21 deletions
diff --git a/app/assets/javascripts/notes/components/discussion_filter_note.vue b/app/assets/javascripts/notes/components/discussion_filter_note.vue
index ae6646cf96c..83326279423 100644
--- a/app/assets/javascripts/notes/components/discussion_filter_note.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter_note.vue
@@ -1,28 +1,19 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlButton, GlIcon } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
+import { GlButton, GlIcon, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
 
 import notesEventHub from '../event_hub';
 
 export default {
+  i18n: {
+    information: s__(
+      "Notes|You're only seeing %{boldStart}other activity%{boldEnd} in the feed. To add a comment, switch to one of the following options.",
+    ),
+  },
   components: {
     GlButton,
     GlIcon,
-  },
-  computed: {
-    timelineContent() {
-      return sprintf(
-        __(
-          "You're only seeing %{startTag}other activity%{endTag} in the feed. To add a comment, switch to one of the following options.",
-        ),
-        {
-          startTag: `<b>`,
-          endTag: `</b>`,
-        },
-        false,
-      );
-    },
+    GlSprintf,
   },
   methods: {
     selectFilter(value) {
@@ -33,17 +24,26 @@ export default {
 </script>
 
 <template>
-  <li class="timeline-entry note note-wrapper discussion-filter-note js-discussion-filter-note">
+  <li
+    class="timeline-entry note note-wrapper discussion-filter-note js-discussion-filter-note"
+    data-qa-selector="discussion_filter_container"
+  >
     <div class="timeline-icon d-none d-lg-flex">
       <gl-icon name="comment" />
     </div>
     <div class="timeline-content">
-      <div ref="timelineContent" v-html="timelineContent"></div>
+      <div data-testid="discussion-filter-timeline-content">
+        <gl-sprintf :message="$options.i18n.information">
+          <template #bold="{ content }">
+            <b>{{ content }}</b>
+          </template>
+        </gl-sprintf>
+      </div>
       <div class="discussion-filter-actions mt-2">
-        <gl-button ref="showAllActivity" variant="default" @click="selectFilter(0)">
+        <gl-button variant="default" @click="selectFilter(0)">
           {{ __('Show all activity') }}
         </gl-button>
-        <gl-button ref="showComments" variant="default" @click="selectFilter(1)">
+        <gl-button variant="default" @click="selectFilter(1)">
           {{ __('Show comments only') }}
         </gl-button>
       </div>