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

#4688

Closes #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,13 +172,15 @@ export const ShiftSwapForm = (props: ShiftSwapFormProps) => {
  <Field label="Swap start">
  <DateTimePicker
  disabled={!isNew}
+ utcOffset={selectedTimezoneOffset}
  value={dayjs(shiftSwap.swap_start)}
  onChange={handleShiftSwapStartChange}
  />
  </Field>
  <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),