Add latest changes from gitlab-org/gitlab@master

1 files changed, 17 insertions, 20 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_filter_note.vue b/app/assets/javascripts/notes/components/discussion_filter_note.vue
index ff70c89cd39..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) {
@@ -41,12 +32,18 @@ export default {
       <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>