1 files changed, 33 insertions, 26 deletions

diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
index cbf3c387fa3..90ee4351e39 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
@@ -1,5 +1,6 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlIcon, GlSafeHtmlDirective, GlSprintf } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlIcon, GlSprintf, GlBadge } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { timelineItemI18n } from './constants';
 import { getEventIcon } from './utils';
@@ -12,9 +13,10 @@ export default {
     GlDropdownItem,
     GlIcon,
     GlSprintf,
+    GlBadge,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   inject: ['canUpdateTimelineEvent'],
   props: {
@@ -30,6 +32,11 @@ export default {
       type: String,
       required: true,
     },
+    eventTag: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     time() {
@@ -42,41 +49,41 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-display-flex gl-align-items-start">
+  <div class="timeline-event gl-display-grid">
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-mr-3 gl-w-8 gl-h-8 gl-p-3 gl-z-index-1"
     >
       <gl-icon :name="getEventIcon(action)" class="note-icon" />
     </div>
-    <div
-      class="timeline-event-note timeline-event-border gl-w-full gl-display-flex gl-flex-direction-row"
-      data-testid="event-text-container"
-    >
-      <div>
+    <div class="timeline-event-note timeline-event-border" data-testid="event-text-container">
+      <div class="gl-display-flex gl-align-items-center gl-mb-3">
         <strong class="gl-font-lg" data-testid="event-time">
           <gl-sprintf :message="$options.i18n.timeUTC">
             <template #time>{{ time }}</template>
           </gl-sprintf>
         </strong>
-        <div v-safe-html="noteHtml"></div>
+        <gl-badge v-if="eventTag" variant="muted" icon="tag" class="gl-ml-3">
+          {{ eventTag }}
+        </gl-badge>
       </div>
-      <gl-dropdown
-        v-if="canUpdateTimelineEvent"
-        right
-        class="event-note-actions gl-ml-auto gl-align-self-start"
-        icon="ellipsis_v"
-        text-sr-only
-        :text="$options.i18n.moreActions"
-        category="tertiary"
-        no-caret
-      >
-        <gl-dropdown-item @click="$emit('edit')">
-          {{ $options.i18n.edit }}
-        </gl-dropdown-item>
-        <gl-dropdown-item @click="$emit('delete')">
-          {{ $options.i18n.delete }}
-        </gl-dropdown-item>
-      </gl-dropdown>
+      <div v-safe-html="noteHtml" class="md"></div>
     </div>
+    <gl-dropdown
+      v-if="canUpdateTimelineEvent"
+      right
+      class="event-note-actions gl-ml-auto gl-align-self-start"
+      icon="ellipsis_v"
+      text-sr-only
+      :text="$options.i18n.moreActions"
+      category="tertiary"
+      no-caret
+    >
+      <gl-dropdown-item @click="$emit('edit')">
+        {{ $options.i18n.edit }}
+      </gl-dropdown-item>
+      <gl-dropdown-item @click="$emit('delete')">
+        {{ $options.i18n.delete }}
+      </gl-dropdown-item>
+    </gl-dropdown>
   </div>
 </template>