From dfd175732b754a2ea620aa84e49ff42a93c3e4be Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Fri, 3 Nov 2023 11:17:32 -0700
Subject: [PATCH 1/3] Correcting timeline format and custom events dialog
 format

---
 .../src/components/DateTimePickerMenu.vue       | 16 ++++++++++++----
 .../dispatch/src/incident/EditEventDialog.vue   | 17 +++++++++++++----
 .../dispatch/src/incident/TimelineTab.vue       |  3 +++
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue b/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue
index 9ef2d8ddd3cb..c341439e97e2 100644
--- a/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue
+++ b/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue
@@ -30,7 +30,8 @@
 </template>
 <script>
 import { parseISO } from "date-fns"
-import { format } from "date-fns-tz"
+import { formatInTimeZone, format } from "date-fns-tz"
+import moment from "moment-timezone"
 
 export default {
   name: "DateTimePickerMenu",
@@ -84,12 +85,16 @@ export default {
         initDateTime = parseISO(this.modelValue)
       }
 
-      this.selectedDatetime = format(initDateTime, "yyyy-MM-dd'T'HH:mm", { timeZone: "UTC" })
+      this.selectedDatetime = formatInTimeZone(initDateTime, this.timezone, "yyyy-MM-dd'T'HH:mm")
     },
     okHandler() {
       this.resetPicker()
-      let isoString = parseISO(this.selectedDatetime).toISOString()
-      this.$emit("update:modelValue", isoString)
+      let newValue = moment.tz(this.selectedDatetime, this.timezone).utc().format()
+      //console.log(`This is the selectedDateTime: ${this.selectedDatetime}`)
+      //let isoString = parseISO(this.selectedDatetime).toISOString()
+      //let newValue = formatInTimeZone(isoString, this.timezone, "yyyy-MM-dd'T'HH:mm")
+      console.log(`This is the dateitme returned: ${newValue}`)
+      this.$emit("update:modelValue", newValue)
     },
     clearHandler() {
       this.resetPicker()
@@ -106,6 +111,9 @@ export default {
     modelValue() {
       this.init()
     },
+    timezone() {
+      this.selectedDatetime = formatInTimeZone(parseISO(this.modelValue), this.timezone, "yyyy-MM-dd'T'HH:mm")
+    }
   },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/incident/EditEventDialog.vue b/src/dispatch/static/dispatch/src/incident/EditEventDialog.vue
index 75b749ba05e8..e3d7c41355b4 100644
--- a/src/dispatch/static/dispatch/src/incident/EditEventDialog.vue
+++ b/src/dispatch/static/dispatch/src/incident/EditEventDialog.vue
@@ -8,26 +8,35 @@
       <v-card-text>
         <v-container class="mt-3">
           <v-row>
-            <v-col cols="12">
+            <v-col cols="5">
               <date-time-picker-menu
                 label="Reported At"
                 v-model="started_at"
                 class="time-picker"
                 :timezone="timezone"
               />
+              <span
+                class="ml-10 time-utc text-caption"
+                style="position: absolute; margin-top: -20px"
+              >
+                Time in UTC is {{ formatToUTC(started_at) }}
+              </span>
+            </v-col>
+            <v-col cols="5">
               <v-select
                 v-model="timezone"
                 label="Time zone"
                 :items="timezones"
                 class="ml-2 time-zone-select"
               />
+            </v-col>
+            <v-col cols="1">
               <v-btn color="green en-1" class="ml-10 mt-3" width="100" @click="setTimeToNow()">
                 Now
               </v-btn>
             </v-col>
-            <v-col cols="12">
-              <span class="ml-8 time-utc"> Time in UTC is {{ formatToUTC(started_at) }} </span>
-            </v-col>
+          </v-row>
+          <v-row>
             <v-col cols="12">
               <v-textarea
                 v-model="description"
diff --git a/src/dispatch/static/dispatch/src/incident/TimelineTab.vue b/src/dispatch/static/dispatch/src/incident/TimelineTab.vue
index c17cade09fa9..b37743e8c142 100644
--- a/src/dispatch/static/dispatch/src/incident/TimelineTab.vue
+++ b/src/dispatch/static/dispatch/src/incident/TimelineTab.vue
@@ -44,6 +44,9 @@
           :class="classType(event)"
           dot-color="blue"
         >
+          <template v-slot:icon>
+            <v-icon color="white" />
+          </template>
           <v-row justify="space-between">
             <v-col cols="7">
               {{ event.description }}

From e10599fa9c47ba741c98e4fe2fa76ca8dcd5850a Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Fri, 3 Nov 2023 11:18:44 -0700
Subject: [PATCH 2/3] removing log lines

---
 .../static/dispatch/src/components/DateTimePickerMenu.vue     | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue b/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue
index c341439e97e2..4407db84617a 100644
--- a/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue
+++ b/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue
@@ -90,10 +90,6 @@ export default {
     okHandler() {
       this.resetPicker()
       let newValue = moment.tz(this.selectedDatetime, this.timezone).utc().format()
-      //console.log(`This is the selectedDateTime: ${this.selectedDatetime}`)
-      //let isoString = parseISO(this.selectedDatetime).toISOString()
-      //let newValue = formatInTimeZone(isoString, this.timezone, "yyyy-MM-dd'T'HH:mm")
-      console.log(`This is the dateitme returned: ${newValue}`)
       this.$emit("update:modelValue", newValue)
     },
     clearHandler() {

From bd103feb19b4a59e74be76b6205f2f74b4cc884b Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Fri, 3 Nov 2023 12:15:58 -0700
Subject: [PATCH 3/3] Fixing lint errors

---
 .../static/dispatch/src/components/DateTimePickerMenu.vue | 8 ++++++--
 src/dispatch/static/dispatch/src/incident/TimelineTab.vue | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue b/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue
index 4407db84617a..e96529033c9f 100644
--- a/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue
+++ b/src/dispatch/static/dispatch/src/components/DateTimePickerMenu.vue
@@ -108,8 +108,12 @@ export default {
       this.init()
     },
     timezone() {
-      this.selectedDatetime = formatInTimeZone(parseISO(this.modelValue), this.timezone, "yyyy-MM-dd'T'HH:mm")
-    }
+      this.selectedDatetime = formatInTimeZone(
+        parseISO(this.modelValue),
+        this.timezone,
+        "yyyy-MM-dd'T'HH:mm"
+      )
+    },
   },
 }
 </script>
diff --git a/src/dispatch/static/dispatch/src/incident/TimelineTab.vue b/src/dispatch/static/dispatch/src/incident/TimelineTab.vue
index b37743e8c142..68434af44250 100644
--- a/src/dispatch/static/dispatch/src/incident/TimelineTab.vue
+++ b/src/dispatch/static/dispatch/src/incident/TimelineTab.vue
@@ -44,7 +44,7 @@
           :class="classType(event)"
           dot-color="blue"
         >
-          <template v-slot:icon>
+          <template #icon>
             <v-icon color="white" />
           </template>
           <v-row justify="space-between">