diff options
Diffstat (limited to 'app/assets/javascripts/notes/components/discussion_filter_note.vue')
-rw-r--r-- | app/assets/javascripts/notes/components/discussion_filter_note.vue | 42 |
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> |