From ad0520507a3b8834e12ce8c0edd79b2792919906 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Fri, 14 Jun 2024 16:49:34 +0300
Subject: [PATCH] fixed calendar period shift when changing offset

fix
---
 grafana-plugin/src/containers/Rotation/Rotation.tsx   |  4 ++--
 grafana-plugin/src/models/timezone/timezone.ts        |  9 ++-------
 grafana-plugin/src/pages/schedule/Schedule.helpers.ts | 11 +++++++++++
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/grafana-plugin/src/containers/Rotation/Rotation.tsx b/grafana-plugin/src/containers/Rotation/Rotation.tsx
index 6f56d6a02c..4210eaf16a 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.tsx
+++ b/grafana-plugin/src/containers/Rotation/Rotation.tsx
@@ -40,7 +40,7 @@ interface RotationProps {
 
 export const Rotation: FC<RotationProps> = observer((props) => {
   const {
-    timezoneStore: { calendarStartDate, getDateInSelectedTimezone },
+    timezoneStore: { calendarStartDate, getDateInSelectedTimezone, selectedTimezoneOffset },
     scheduleStore: { scheduleView: storeScheduleView },
   } = useStore();
   const {
@@ -144,7 +144,7 @@ export const Rotation: FC<RotationProps> = observer((props) => {
     const base = 60 * 60 * 24 * days;
 
     return firstShiftOffset / base;
-  }, [events, startDate]);
+  }, [events, startDate, selectedTimezoneOffset]);
 
   return (
     <div className={cx('root')} onClick={onClick && handleRotationClick}>
diff --git a/grafana-plugin/src/models/timezone/timezone.ts b/grafana-plugin/src/models/timezone/timezone.ts
index df811033d1..10995b0b72 100644
--- a/grafana-plugin/src/models/timezone/timezone.ts
+++ b/grafana-plugin/src/models/timezone/timezone.ts
@@ -3,7 +3,7 @@ import { observable, action, computed, makeObservable } from 'mobx';
 
 // TODO: move utils from Schedule.helpers to common place
 import { ScheduleView } from 'models/schedule/schedule.types';
-import { getCalendarStartDate } from 'pages/schedule/Schedule.helpers';
+import { getCalendarStartDate, toDateWithTimezoneOffsetAtMidnight } from 'pages/schedule/Schedule.helpers';
 import { RootStore } from 'state/rootStore';
 
 import { getOffsetOfCurrentUser, getGMTTimezoneLabelBasedOnOffset } from './timezone.helpers';
@@ -31,12 +31,7 @@ export class TimezoneStore {
   setSelectedTimezoneOffset(offset: number) {
     this.selectedTimezoneOffset = offset;
 
-    // TODO: This needs to be addressed
-    this.calendarStartDate = getCalendarStartDate(
-      this.currentDateInSelectedTimezone,
-      this.rootStore.scheduleStore.scheduleView,
-      offset
-    );
+    this.calendarStartDate = toDateWithTimezoneOffsetAtMidnight(this.calendarStartDate, offset);
   }
 
   @action.bound
diff --git a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
index b600f71354..a15d342b28 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
+++ b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
@@ -216,3 +216,14 @@ export const toDateWithTimezoneOffset = (date: dayjs.Dayjs, timezoneOffset?: num
   }
   return date.utcOffset() === timezoneOffset ? date : date.tz().utcOffset(timezoneOffset);
 };
+
+export const toDateWithTimezoneOffsetAtMidnight = (date: dayjs.Dayjs, timezoneOffset?: number) => {
+  return toDateWithTimezoneOffset(date, timezoneOffset)
+    .set('date', 1)
+    .set('year', date.year())
+    .set('month', date.month())
+    .set('date', date.date())
+    .set('hour', 0)
+    .set('minute', 0)
+    .set('second', 0);
+};