From 3d4e87682f8c1fceb3f6c76718a88e6d253df338 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Tue, 20 Aug 2024 10:58:14 +0300
Subject: [PATCH] Changed swap shift to take timezone into consideration
 (#4849)

# What this PR does

- Pass the utcOffset to the `datetime` pickers used in Swap Shift form
- Any subsequent change to the global utcOffset displayed on top will
now trigger a change in the datetime pickers as well

## Which issue(s) this PR closes

https://github.com/grafana/oncall/issues/4688

Closes https://github.com/grafana/oncall/issues/4688
---
 .../containers/RotationForm/ShiftSwapForm.tsx    |  5 ++++-
 grafana-plugin/src/pages/schedule/Schedule.tsx   | 16 ++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/grafana-plugin/src/containers/RotationForm/ShiftSwapForm.tsx b/grafana-plugin/src/containers/RotationForm/ShiftSwapForm.tsx
index dee6d5f6..6a28e61d 100644
--- a/grafana-plugin/src/containers/RotationForm/ShiftSwapForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/ShiftSwapForm.tsx
@@ -40,6 +40,7 @@ export const ShiftSwapForm = (props: ShiftSwapFormProps) => {
   const {
     scheduleStore,
     userStore: { currentUserPk },
+    timezoneStore: { selectedTimezoneOffset },
   } = store;
 
   useEffect(() => {
@@ -87,7 +88,7 @@ export const ShiftSwapForm = (props: ShiftSwapFormProps) => {
         ...shiftSwap,
       });
     }
-  }, [shiftSwap, store.timezoneStore.calendarStartDate, store.timezoneStore.selectedTimezoneOffset]);
+  }, [shiftSwap, store.timezoneStore.calendarStartDate, selectedTimezoneOffset]);
 
   const handleDescriptionChange = useCallback(
     (event) => {
@@ -171,6 +172,7 @@ export const ShiftSwapForm = (props: ShiftSwapFormProps) => {
               <Field label="Swap start">
                 <DateTimePicker
                   disabled={!isNew}
+                  utcOffset={selectedTimezoneOffset}
                   value={dayjs(shiftSwap.swap_start)}
                   onChange={handleShiftSwapStartChange}
                 />
@@ -178,6 +180,7 @@ export const ShiftSwapForm = (props: ShiftSwapFormProps) => {
               <Field label="Swap end">
                 <DateTimePicker
                   disabled={!isNew}
+                  utcOffset={selectedTimezoneOffset}
                   value={dayjs(shiftSwap.swap_end)}
                   onChange={handleShiftSwapEndChange}
                 />
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index a5a17f23..396144de 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -47,7 +47,12 @@ import { isUserActionAllowed, UserActions } from 'utils/authorization/authorizat
 import { PLUGIN_ROOT } from 'utils/consts';
 import { PropsWithRouter, withRouter } from 'utils/hoc';
 
-import { getCalendarStartDate, getNewCalendarStartDate, getUTCString } from './Schedule.helpers';
+import {
+  getCalendarStartDate,
+  getNewCalendarStartDate,
+  getUTCString,
+  toDateWithTimezoneOffset,
+} from './Schedule.helpers';
 import { getScheduleStyles } from './Schedule.styles';
 
 interface RouteProps {
@@ -647,7 +652,7 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
       store,
       store: {
         userStore: { currentUserPk },
-        timezoneStore: { currentDateInSelectedTimezone },
+        timezoneStore: { currentDateInSelectedTimezone, selectedTimezoneOffset },
       },
       router: {
         params: { id: scheduleId },
@@ -671,11 +676,14 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
 
     const layers = getLayersFromStore(store, scheduleId, store.timezoneStore.calendarStartDate);
     const closestEvent = findClosestUserEvent(dayjs(), currentUserPk, layers);
+
     const swapStart = closestEvent
-      ? dayjs(closestEvent.start)
+      ? toDateWithTimezoneOffset(dayjs(closestEvent.start), selectedTimezoneOffset)
       : currentDateInSelectedTimezone.startOf('day').add(1, 'day');
 
-    const swapEnd = closestEvent ? dayjs(closestEvent.end) : swapStart.add(1, 'day');
+    const swapEnd = closestEvent
+      ? toDateWithTimezoneOffset(dayjs(closestEvent.end), selectedTimezoneOffset)
+      : swapStart.add(1, 'day');
 
     const params = {
       swap_start: getUTCString(swapStart),