1 files changed, 47 insertions, 0 deletions

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
new file mode 100644
index 00000000000..60fa8cb949b
--- /dev/null
+++ b/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue
@@ -0,0 +1,47 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+import TimelineEventsForm from './timeline_events_form.vue';
+
+export default {
+  name: 'EditTimelineEvent',
+  components: {
+    TimelineEventsForm,
+    GlIcon,
+  },
+  props: {
+    event: {
+      type: Object,
+      required: true,
+      validator: (item) => ['occurredAt', 'note'].every((key) => item[key]),
+    },
+    editTimelineEventActive: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  methods: {
+    saveEvent(eventDetails) {
+      this.$emit('handle-save-edit', { ...eventDetails, id: this.event.id }, false);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-relative gl-display-flex gl-align-items-center">
+    <div
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start 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-z-index-1"
+    >
+      <gl-icon name="comment" class="note-icon" />
+    </div>
+    <timeline-events-form
+      ref="eventForm"
+      class="timeline-event-border"
+      :is-event-processed="editTimelineEventActive"
+      :previous-occurred-at="event.occurredAt"
+      :previous-note="event.note"
+      @save-event="saveEvent"
+      @cancel="$emit('hide-edit')"
+    />
+  </div>
+</template>