Replace v-html with GlSprintf in notes/.../discussion_filter_note.vue

Co-authored-by: Michael Lunøe <michael.lunoe@gmail.com>
Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

app/assets/javascripts/notes/components/discussion_filter_note.vue

 <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>

changelogs/unreleased/241957-remove-v-html-from-app-assets-javascripts-notes-components-discuss.yml

+---
+title: Replace v-html with GlSprintf in notes/.../discussion_filter_note.vue
+merge_request: 41482
+author: Takuya Noguchi
+type: other

locale/gitlab.pot

@@ -18424,6 +18424,9 @@ msgstr ""
 msgid "Notes|This comment has changed since you started editing, please review the %{open_link}updated comment%{close_link} to ensure information is not lost"
 msgstr ""
 
+msgid "Notes|You're only seeing %{boldStart}other activity%{boldEnd} in the feed. To add a comment, switch to one of the following options."
+msgstr ""
+
 msgid "Nothing found…"
 msgstr ""
 
@@ -30800,9 +30803,6 @@ msgstr ""
 msgid "You're not allowed to make changes to this project directly. A fork of this project is being created that you can make changes in, so you can submit a merge request."
 msgstr ""
 
-msgid "You're only seeing %{startTag}other activity%{endTag} in the feed. To add a comment, switch to one of the following options."
-msgstr ""
-
 msgid "You're receiving this email because of your account on %{host}."
 msgstr ""
 

spec/frontend/notes/components/discussion_filter_note_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlButton, GlSprintf } from '@gitlab/ui';
 import DiscussionFilterNote from '~/notes/components/discussion_filter_note.vue';
 import eventHub from '~/notes/event_hub';
 
@@ -6,7 +7,11 @@ describe('DiscussionFilterNote component', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = shallowMount(DiscussionFilterNote);
+    wrapper = shallowMount(DiscussionFilterNote, {
+      stubs: {
+        GlSprintf,
+      },
+    });
   };
 
   beforeEach(() => {
@@ -19,21 +24,27 @@ describe('DiscussionFilterNote component', () => {
   });
 
   it('timelineContent renders a string containing instruction for switching feed type', () => {
-    expect(wrapper.find({ ref: 'timelineContent' }).html()).toBe(
-      "<div>You're only seeing <b>other activity</b> in the feed. To add a comment, switch to one of the following options.</div>",
+    expect(wrapper.find('[data-testid="discussion-filter-timeline-content"]').html()).toBe(
+      '<div data-testid="discussion-filter-timeline-content">You\'re only seeing <b>other activity</b> in the feed. To add a comment, switch to one of the following options.</div>',
     );
   });
 
   it('emits `dropdownSelect` event with 0 parameter on clicking Show all activity button', () => {
     jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-    wrapper.find({ ref: 'showAllActivity' }).vm.$emit('click');
+    wrapper
+      .findAll(GlButton)
+      .at(0)
+      .vm.$emit('click');
 
     expect(eventHub.$emit).toHaveBeenCalledWith('dropdownSelect', 0);
   });
 
   it('emits `dropdownSelect` event with 1 parameter on clicking Show comments only button', () => {
     jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-    wrapper.find({ ref: 'showComments' }).vm.$emit('click');
+    wrapper
+      .findAll(GlButton)
+      .at(1)
+      .vm.$emit('click');
 
     expect(eventHub.$emit).toHaveBeenCalledWith('dropdownSelect', 1);
   });