1 files changed, 42 insertions, 31 deletions

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 72dfccca467..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
@@ -1,7 +1,6 @@
 <script>
 import { GlDatepicker, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
-import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 import { MAX_TEXT_LENGTH, timelineFormI18n } from './constants';
 import { getUtcShiftedDate } from './utils';
 
@@ -27,15 +26,17 @@ export default {
   },
   i18n: timelineFormI18n,
   MAX_TEXT_LENGTH,
-  directives: {
-    autofocusonshow,
-  },
   props: {
     showSaveAndAdd: {
       type: Boolean,
       required: false,
       default: false,
     },
+    showDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isEventProcessed: {
       type: Boolean,
       required: true,
@@ -97,7 +98,7 @@ export default {
       this.timelineText = '';
     },
     focusDate() {
-      this.$refs.datepicker.$el.querySelector('input').focus();
+      this.$refs.datepicker.$el.querySelector('input')?.focus();
     },
     handleSave(addAnotherEvent) {
       const event = {
@@ -185,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>