Use gl-icon component for alert system notes
The following discussion from !35902 (merged) should be addressed:
-
@mrincon started a discussion: Suggestion (non-blocking): Using
v-html
always comes with a bit of a security consideration. I think we may have the same effect using<gl-icon>
:<gl-icon v-if="iconName" :name="iconName" />
This would also simplify our specs a bit.
Proposed diff (untested)
diff --git a/app/assets/javascripts/alert_management/components/system_notes/system_note.vue b/app/assets/javascripts/alert_management/components/system_notes/system_note.vue index 39717ab609f..88aa72c9d77 100644 --- a/app/assets/javascripts/alert_management/components/system_notes/system_note.vue +++ b/app/assets/javascripts/alert_management/components/system_notes/system_note.vue @@ -23,8 +23,8 @@ export default { } = this.note; return { ...author, id: id?.split('/').pop() }; }, - iconHtml() { - return spriteIcon(this.note?.systemNoteIconName); + iconName() { + return this.note?.systemNoteIconName; }, }, }; @@ -33,7 +33,9 @@ export default { <template> <li :id="noteAnchorId" class="timeline-entry note system-note note-wrapper"> <div class="timeline-entry-inner"> - <div class="timeline-icon" v-html="iconHtml"></div> + <div class="timeline-icon"> + <gl-icon v-if="iconName" :name="iconName" /> + </div> <div class="timeline-content"> <div class="note-header"> <note-header :author="noteAuthor" :created-at="note.createdAt" :note-id="note.id">
That said, I see this icon approach is not coming from this MR, so this is not blocking and a good candidate for a follow up.
Edited by Sarah Yasonik