Add latest changes from gitlab-org/gitlab@master

4 files changed, 45 insertions, 26 deletions

diff --git a/app/assets/javascripts/issues/show/components/incidents/constants.js b/app/assets/javascripts/issues/show/components/incidents/constants.js
index db846009409..22db19610c1 100644
--- a/app/assets/javascripts/issues/show/components/incidents/constants.js
+++ b/app/assets/javascripts/issues/show/components/incidents/constants.js
@@ -14,6 +14,7 @@ export const timelineFormI18n = Object.freeze({
   areaPlaceholder: s__('Incident|Timeline text...'),
   save: __('Save'),
   cancel: __('Cancel'),
+  delete: __('Delete'),
   description: __('Description'),
   hint: __('You can enter up to 280 characters'),
   textRemaining: (count) => n__('%d character remaining', '%d characters remaining', count),
diff --git a/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue b/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue
index 60fa8cb949b..8cdd62ca9ef 100644
--- a/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue
@@ -40,8 +40,10 @@ export default {
       :is-event-processed="editTimelineEventActive"
       :previous-occurred-at="event.occurredAt"
       :previous-note="event.note"
+      show-delete
       @save-event="saveEvent"
       @cancel="$emit('hide-edit')"
+      @delete="$emit('delete')"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
index 0f000815978..f1a3aebc990 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
@@ -32,6 +32,11 @@ export default {
       required: false,
       default: false,
     },
+    showDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isEventProcessed: {
       type: Boolean,
       required: true,
@@ -181,32 +186,42 @@ export default {
       </gl-form-group>
     </div>
     <gl-form-group class="gl-mb-0">
-      <gl-button
-        variant="confirm"
-        category="primary"
-        class="gl-mr-3"
-        data-testid="save-button"
-        :disabled="!isTimelineTextValid"
-        :loading="isEventProcessed"
-        @click="handleSave(false)"
-      >
-        {{ $options.i18n.save }}
-      </gl-button>
-      <gl-button
-        v-if="showSaveAndAdd"
-        variant="confirm"
-        category="secondary"
-        class="gl-mr-3 gl-ml-n2"
-        data-testid="save-and-add-button"
-        :disabled="!isTimelineTextValid"
-        :loading="isEventProcessed"
-        @click="handleSave(true)"
-      >
-        {{ $options.i18n.saveAndAdd }}
-      </gl-button>
-      <gl-button class="gl-ml-n2" :disabled="isEventProcessed" @click="$emit('cancel')">
-        {{ $options.i18n.cancel }}
-      </gl-button>
+      <div class="gl-display-flex">
+        <gl-button
+          variant="confirm"
+          category="primary"
+          class="gl-mr-3"
+          data-testid="save-button"
+          :disabled="!isTimelineTextValid"
+          :loading="isEventProcessed"
+          @click="handleSave(false)"
+        >
+          {{ $options.i18n.save }}
+        </gl-button>
+        <gl-button
+          v-if="showSaveAndAdd"
+          variant="confirm"
+          category="secondary"
+          class="gl-mr-3 gl-ml-n2"
+          data-testid="save-and-add-button"
+          :disabled="!isTimelineTextValid"
+          :loading="isEventProcessed"
+          @click="handleSave(true)"
+        >
+          {{ $options.i18n.saveAndAdd }}
+        </gl-button>
+        <gl-button class="gl-ml-n2" :disabled="isEventProcessed" @click="$emit('cancel')">
+          {{ $options.i18n.cancel }}
+        </gl-button>
+        <gl-button
+          v-if="showDelete"
+          class="gl-ml-auto btn-danger"
+          :disabled="isEventProcessed"
+          @click="$emit('delete')"
+        >
+          {{ $options.i18n.delete }}
+        </gl-button>
+      </div>
       <div class="timeline-event-bottom-border"></div>
     </gl-form-group>
   </form>
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
index 321b7ccc14a..fad4f07cfc3 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
@@ -153,6 +153,7 @@ export default {
             :edit-timeline-event-active="editTimelineEventActive"
             @handle-save-edit="handleSaveEdit"
             @hide-edit="hideEdit()"
+            @delete="handleDelete(event)"
           />
           <incident-timeline-event-item
             v-else