1 files changed, 118 insertions, 124 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 0d84fabb1be..b7ae18372ab 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,9 +1,9 @@
 <script>
-import { GlDatepicker, GlFormInput, GlFormGroup, GlButton, GlIcon } from '@gitlab/ui';
+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 { timelineFormI18n } from './constants';
-import { getUtcShiftedDateNow } from './utils';
+import { getUtcShiftedDate } from './utils';
 
 export default {
   name: 'TimelineEventsForm',
@@ -15,6 +15,7 @@ export default {
     'task-list',
     'collapsible-section',
     'table',
+    'attach-file',
     'full-screen',
   ],
   components: {
@@ -23,175 +24,168 @@ export default {
     GlFormInput,
     GlFormGroup,
     GlButton,
-    GlIcon,
   },
   i18n: timelineFormI18n,
   directives: {
     autofocusonshow,
   },
   props: {
-    hasTimelineEvents: {
+    showSaveAndAdd: {
       type: Boolean,
-      required: true,
+      required: false,
+      default: false,
     },
     isEventProcessed: {
       type: Boolean,
       required: true,
     },
+    previousOccurredAt: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    previousNote: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
-    // if occurredAt is undefined, returns "now" in UTC
-    const placeholderDate = getUtcShiftedDateNow();
+    // if occurredAt is null, returns "now" in UTC
+    const placeholderDate = getUtcShiftedDate(this.previousOccurredAt);
 
     return {
-      timelineText: '',
+      timelineText: this.previousNote,
       placeholderDate,
       hourPickerInput: placeholderDate.getHours(),
       minutePickerInput: placeholderDate.getMinutes(),
-      datepickerTextInput: null,
+      datePickerInput: placeholderDate,
     };
   },
   computed: {
-    occurredAt() {
-      const [years, months, days] = this.datepickerTextInput.split('-');
+    occurredAtString() {
+      const year = this.datePickerInput.getFullYear();
+      const month = this.datePickerInput.getMonth();
+      const day = this.datePickerInput.getDate();
+
       const utcDate = new Date(
-        Date.UTC(years, months - 1, days, this.hourPickerInput, this.minutePickerInput),
+        Date.UTC(year, month, day, this.hourPickerInput, this.minutePickerInput),
       );
 
       return utcDate.toISOString();
     },
   },
+  mounted() {
+    this.focusDate();
+  },
   methods: {
     clear() {
-      const utcShiftedDateNow = getUtcShiftedDateNow();
-      this.placeholderDate = utcShiftedDateNow;
-      this.hourPickerInput = utcShiftedDateNow.getHours();
-      this.minutePickerInput = utcShiftedDateNow.getMinutes();
+      const newPlaceholderDate = getUtcShiftedDate();
+      this.datePickerInput = newPlaceholderDate;
+      this.hourPickerInput = newPlaceholderDate.getHours();
+      this.minutePickerInput = newPlaceholderDate.getMinutes();
       this.timelineText = '';
     },
     focusDate() {
-      this.$refs.datepicker.$el.focus();
+      this.$refs.datepicker.$el.querySelector('input').focus();
     },
     handleSave(addAnotherEvent) {
-      const eventDetails = {
+      const event = {
         note: this.timelineText,
-        occurredAt: this.occurredAt,
+        occurredAt: this.occurredAtString,
       };
-      this.$emit('save-event', eventDetails, addAnotherEvent);
+      this.$emit('save-event', event, addAnotherEvent);
     },
   },
 };
 </script>
 
 <template>
-  <div
-    class="gl-relative gl-display-flex gl-align-items-center"
-    :class="{ 'timeline-entry-vertical-line': hasTimelineEvents }"
-  >
-    <div
-      v-if="hasTimelineEvents"
-      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>
-    <form class="gl-flex-grow-1 gl-border-gray-50" :class="{ 'gl-border-t': hasTimelineEvents }">
-      <div
-        class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row datetime-picker"
-      >
-        <gl-form-group :label="__('Date')" class="gl-mt-5 gl-mr-5">
-          <gl-datepicker id="incident-date" #default="{ formattedDate }" v-model="placeholderDate">
+  <form class="gl-flex-grow-1 gl-border-gray-50">
+    <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row">
+      <gl-form-group :label="__('Date')" class="gl-mt-5 gl-mr-5">
+        <gl-datepicker id="incident-date" ref="datepicker" v-model="datePickerInput" />
+      </gl-form-group>
+      <div class="gl-display-flex gl-mt-5">
+        <gl-form-group :label="__('Time')">
+          <div class="gl-display-flex">
+            <label label-for="timeline-input-hours" class="sr-only"></label>
             <gl-form-input
-              id="incident-date"
-              ref="datepicker"
-              v-model="datepickerTextInput"
-              data-testid="input-datepicker"
-              class="gl-datepicker-input gl-pr-7!"
-              :value="formattedDate"
-              :placeholder="__('YYYY-MM-DD')"
-              @keydown.enter="onKeydown"
+              id="timeline-input-hours"
+              v-model="hourPickerInput"
+              data-testid="input-hours"
+              size="xs"
+              type="number"
+              min="00"
+              max="23"
             />
-          </gl-datepicker>
-        </gl-form-group>
-        <div class="gl-display-flex gl-mt-5">
-          <gl-form-group :label="__('Time')">
-            <div class="gl-display-flex">
-              <label label-for="timeline-input-hours" class="sr-only"></label>
-              <gl-form-input
-                id="timeline-input-hours"
-                v-model="hourPickerInput"
-                data-testid="input-hours"
-                size="xs"
-                type="number"
-                min="00"
-                max="23"
-              />
-              <label label-for="timeline-input-minutes" class="sr-only"></label>
-              <gl-form-input
-                id="timeline-input-minutes"
-                v-model="minutePickerInput"
-                class="gl-ml-3"
-                data-testid="input-minutes"
-                size="xs"
-                type="number"
-                min="00"
-                max="59"
-              />
-            </div>
-          </gl-form-group>
-          <p class="gl-ml-3 gl-align-self-end gl-line-height-32">{{ __('UTC') }}</p>
-        </div>
-      </div>
-      <div class="common-note-form">
-        <gl-form-group class="gl-mb-3" :label="$options.i18n.areaLabel">
-          <markdown-field
-            :can-attach-file="false"
-            :add-spacing-classes="false"
-            :show-comment-tool-bar="false"
-            :textarea-value="timelineText"
-            :restricted-tool-bar-items="$options.restrictedToolBarItems"
-            markdown-docs-path=""
-            :enable-preview="false"
-            class="bordered-box gl-mt-0"
-          >
-            <template #textarea>
-              <textarea
-                v-model="timelineText"
-                class="note-textarea js-gfm-input js-autosize markdown-area"
-                data-testid="input-note"
-                dir="auto"
-                data-supports-quick-actions="false"
-                :aria-label="$options.i18n.description"
-                :placeholder="$options.i18n.areaPlaceholder"
-              >
-              </textarea>
-            </template>
-          </markdown-field>
+            <label label-for="timeline-input-minutes" class="sr-only"></label>
+            <gl-form-input
+              id="timeline-input-minutes"
+              v-model="minutePickerInput"
+              class="gl-ml-3"
+              data-testid="input-minutes"
+              size="xs"
+              type="number"
+              min="00"
+              max="59"
+            />
+          </div>
         </gl-form-group>
+        <p class="gl-ml-3 gl-align-self-end gl-line-height-32">{{ __('UTC') }}</p>
       </div>
-      <gl-form-group class="gl-mb-0">
-        <gl-button
-          variant="confirm"
-          category="primary"
-          class="gl-mr-3"
-          :loading="isEventProcessed"
-          @click="handleSave(false)"
-        >
-          {{ $options.i18n.save }}
-        </gl-button>
-        <gl-button
-          variant="confirm"
-          category="secondary"
-          class="gl-mr-3 gl-ml-n2"
-          :loading="isEventProcessed"
-          @click="handleSave(true)"
+    </div>
+    <div class="common-note-form">
+      <gl-form-group class="gl-mb-3" :label="$options.i18n.areaLabel">
+        <markdown-field
+          :can-attach-file="false"
+          :add-spacing-classes="false"
+          :show-comment-tool-bar="false"
+          :textarea-value="timelineText"
+          :restricted-tool-bar-items="$options.restrictedToolBarItems"
+          markdown-docs-path=""
+          :enable-preview="false"
+          class="bordered-box gl-mt-0"
         >
-          {{ $options.i18n.saveAndAdd }}
-        </gl-button>
-        <gl-button class="gl-ml-n2" :disabled="isEventProcessed" @click="$emit('cancel')">
-          {{ $options.i18n.cancel }}
-        </gl-button>
-        <div class="gl-border-b gl-pt-5"></div>
+          <template #textarea>
+            <textarea
+              v-model="timelineText"
+              class="note-textarea js-gfm-input js-autosize markdown-area"
+              data-testid="input-note"
+              dir="auto"
+              data-supports-quick-actions="false"
+              :aria-label="$options.i18n.description"
+              :placeholder="$options.i18n.areaPlaceholder"
+            >
+            </textarea>
+          </template>
+        </markdown-field>
       </gl-form-group>
-    </form>
-  </div>
+    </div>
+    <gl-form-group class="gl-mb-0">
+      <gl-button
+        variant="confirm"
+        category="primary"
+        class="gl-mr-3"
+        :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"
+        :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="timeline-event-bottom-border"></div>
+    </gl-form-group>
+  </form>
 </template>