diff options
Diffstat (limited to 'app/assets/javascripts/alert_management/components/system_notes')
-rw-r--r-- | app/assets/javascripts/alert_management/components/system_notes/system_note.vue | 27 |
1 files changed, 14 insertions, 13 deletions
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 0b206ce42f4..3705e36a579 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 @@ -1,11 +1,12 @@ <script> /* eslint-disable vue/no-v-html */ +import { GlIcon } from '@gitlab/ui'; import NoteHeader from '~/notes/components/note_header.vue'; -import { spriteIcon } from '~/lib/utils/common_utils'; export default { components: { NoteHeader, + GlIcon, }, props: { note: { @@ -24,23 +25,23 @@ export default { } = this.note; return { ...author, id: id?.split('/').pop() }; }, - iconHtml() { - return spriteIcon(this.note?.systemNoteIconName); - }, }, }; </script> <template> - <li :id="noteAnchorId" class="timeline-entry note system-note note-wrapper gl-px-0!"> - <div class="timeline-entry-inner"> - <div class="timeline-icon" v-html="iconHtml"></div> - <div class="timeline-content"> - <div class="note-header"> - <note-header :author="noteAuthor" :created-at="note.createdAt" :note-id="note.id"> - <span v-html="note.bodyHtml"></span> - </note-header> - </div> + <li :id="noteAnchorId" class="timeline-entry note system-note note-wrapper gl-p-0!"> + <div class="gl-display-inline-flex gl-align-items-center"> + <div + class="gl-display-inline gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-box-sizing-content-box gl-p-3 gl-mt-n2 gl-mr-6" + > + <gl-icon :name="note.systemNoteIconName" /> + </div> + + <div class="note-header"> + <note-header :author="noteAuthor" :created-at="note.createdAt" :note-id="note.id"> + <span v-html="note.bodyHtml"></span> + </note-header> </div> </div> </li> |