diff options
Diffstat (limited to 'app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue')
-rw-r--r-- | app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue | 37 |
1 files changed, 29 insertions, 8 deletions
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue index fef9bf713b7..62ccd696ef6 100644 --- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue +++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon, GlSafeHtmlDirective, GlSprintf } from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem, GlIcon, GlSafeHtmlDirective, GlSprintf } from '@gitlab/ui'; import { formatDate } from '~/lib/utils/datetime_utility'; import { __ } from '~/locale'; import { getEventIcon } from './utils'; @@ -7,15 +7,20 @@ import { getEventIcon } from './utils'; export default { name: 'IncidentTimelineEventListItem', i18n: { + delete: __('Delete'), + moreActions: __('More actions'), timeUTC: __('%{time} UTC'), }, components: { + GlDropdown, + GlDropdownItem, GlIcon, GlSprintf, }, directives: { SafeHtml: GlSafeHtmlDirective, }, + inject: ['canUpdate'], props: { isLastItem: { type: Boolean, @@ -55,16 +60,32 @@ export default { <gl-icon :name="getEventIcon(action)" class="note-icon" /> </div> <div - class="timeline-event-note gl-w-full" + class="timeline-event-note gl-w-full gl-display-flex gl-flex-direction-row" :class="{ 'gl-pb-3 gl-border-gray-50 gl-border-1 gl-border-b-solid': !isLastItem }" data-testid="event-text-container" > - <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> + <div> + <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> + </div> + <gl-dropdown + v-if="canUpdate" + right + class="event-note-actions gl-ml-auto gl-align-self-center" + icon="ellipsis_v" + text-sr-only + :text="$options.i18n.moreActions" + category="tertiary" + no-caret + > + <gl-dropdown-item @click="$emit('delete')"> + {{ $options.i18n.delete }} + </gl-dropdown-item> + </gl-dropdown> </div> </div> </li> |