1 files changed, 19 insertions, 8 deletions

diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_tab.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_tab.vue
index 7c2a7878c58..5f70d9acac9 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_tab.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_tab.vue
@@ -3,10 +3,10 @@ import { GlButton, GlEmptyState, GlLoadingIcon, GlTab } from '@gitlab/ui';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPE_ISSUE } from '~/graphql_shared/constants';
 import { fetchPolicies } from '~/lib/graphql';
+import notesEventHub from '~/notes/event_hub';
 import getTimelineEvents from './graphql/queries/get_timeline_events.query.graphql';
 import { displayAndLogError } from './utils';
 import { timelineTabI18n } from './constants';
-
 import CreateTimelineEvent from './create_timeline_event.vue';
 import IncidentTimelineEventsList from './timeline_events_list.vue';
 
@@ -20,7 +20,7 @@ export default {
     IncidentTimelineEventsList,
   },
   i18n: timelineTabI18n,
-  inject: ['canUpdate', 'fullPath', 'issuableId'],
+  inject: ['canUpdateTimelineEvent', 'fullPath', 'issuableId'],
   data() {
     return {
       isEventFormVisible: false,
@@ -56,15 +56,21 @@ export default {
       return !this.timelineEventLoading && !this.hasTimelineEvents;
     },
   },
+  mounted() {
+    notesEventHub.$on('comment-promoted-to-timeline-event', this.refreshTimelineEvents);
+  },
+  destroyed() {
+    notesEventHub.$off('comment-promoted-to-timeline-event', this.refreshTimelineEvents);
+  },
   methods: {
+    refreshTimelineEvents() {
+      this.$apollo.queries.timelineEvents.refetch();
+    },
     hideEventForm() {
       this.isEventFormVisible = false;
     },
-    async showEventForm() {
-      this.$refs.createEventForm.clearForm();
+    showEventForm() {
       this.isEventFormVisible = true;
-      await this.$nextTick();
-      this.$refs.createEventForm.focusDate();
     },
   },
 };
@@ -85,14 +91,19 @@ export default {
       @hide-new-timeline-events-form="hideEventForm"
     />
     <create-timeline-event
-      v-show="isEventFormVisible"
+      v-if="isEventFormVisible"
       ref="createEventForm"
       :has-timeline-events="hasTimelineEvents"
       class="timeline-event-note timeline-event-note-form"
       :class="{ 'gl-pl-0': !hasTimelineEvents }"
       @hide-new-timeline-events-form="hideEventForm"
     />
-    <gl-button v-if="canUpdate" variant="default" class="gl-mb-3 gl-mt-7" @click="showEventForm">
+    <gl-button
+      v-if="canUpdateTimelineEvent"
+      variant="default"
+      class="gl-mb-3 gl-mt-7"
+      @click="showEventForm"
+    >
       {{ $options.i18n.addEventButton }}
     </gl-button>
   </gl-tab>