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

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}
                 />

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),