Make rotation start and rotation end take timezone into consideration

grafana-plugin/src/containers/RotationForm/RotationForm.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import {
+  Alert,
   Button,
   Field,
   HorizontalGroup,
@@ -330,28 +331,26 @@ export const RotationForm = observer((props: RotationFormProps) => {
     }
   };
 
-  const handleRotationStartChange = useCallback(
-    (value) => {
-      setRotationStart(value);
-      setShiftStart(value);
-      if (showActiveOnSelectedPartOfDay) {
-        setShiftEnd(
-          dayJSAddWithDSTFixed({
-            baseDate: value,
-            addParams: [activePeriod, 'seconds'],
-          })
-        );
-      } else {
-        setShiftEnd(
-          dayJSAddWithDSTFixed({
-            baseDate: value,
-            addParams: [repeatEveryValue, repeatEveryPeriodToUnitName[repeatEveryPeriod]],
-          })
-        );
-      }
-    },
-    [showActiveOnSelectedPartOfDay, activePeriod, repeatEveryPeriod, repeatEveryValue]
-  );
+  const handleRotationStartChange = (value: dayjs.Dayjs) => {
+    setRotationStart(value);
+    setShiftStart(value);
+
+    if (showActiveOnSelectedPartOfDay) {
+      setShiftEnd(
+        dayJSAddWithDSTFixed({
+          baseDate: value,
+          addParams: [activePeriod, 'seconds'],
+        })
+      );
+    } else {
+      setShiftEnd(
+        dayJSAddWithDSTFixed({
+          baseDate: value,
+          addParams: [repeatEveryValue, repeatEveryPeriodToUnitName[repeatEveryPeriod]],
+        })
+      );
+    }
+  };
 
   const handleActivePeriodChange = useCallback(
     (value) => {
@@ -435,9 +434,10 @@ export const RotationForm = observer((props: RotationFormProps) => {
   useEffect(() => {
     if (shift) {
       setRotationName(getShiftName(shift));
-      const shiftStart = getDateTime(shift.shift_start);
+      const shiftStart = getDateTime(shift.shift_start).utcOffset(store.timezoneStore.selectedTimezoneOffset);
       // use shiftStart as rotationStart for existing shifts
       // (original rotationStart defaulted to the shift creation timestamp)
+
       setRotationStart(shiftStart);
       setRotationEnd(shift.until ? getDateTime(shift.until) : getDateTime(shift.shift_start).add(1, 'month'));
       setShiftStart(shiftStart);
@@ -561,14 +561,11 @@ export const RotationForm = observer((props: RotationFormProps) => {
                   </Block>
                 )}
                 {!hasUpdatedShift && ended && (
-                  <Block bordered className={cx('updated-shift-info')}>
+                  <div className={cx('updated-shift-info')}>
                     <VerticalGroup>
-                      <HorizontalGroup>
-                        <Icon name="info-circle" size="md"></Icon>
-                        <Text>This rotation is over</Text>
-                      </HorizontalGroup>
+                      <Alert severity="info" title={(<Text>This rotation is over</Text>) as unknown as string} />
                     </VerticalGroup>
-                  </Block>
+                  </div>
                 )}
                 <div className={cx('two-fields')}>
                   <Field

grafana-plugin/src/containers/RotationForm/parts/DateTimePicker.tsx

@@ -8,7 +8,6 @@ import dayjs from 'dayjs';
 import { observer } from 'mobx-react';
 
 import { Text } from 'components/Text/Text';
-import { getDateForDatePicker } from 'containers/RotationForm/RotationForm.helpers';
 import { useStore } from 'state/useStore';
 
 import styles from 'containers/RotationForm/RotationForm.module.css';
@@ -27,30 +26,32 @@ interface DateTimePickerProps {
 export const DateTimePicker = observer(
   ({ value: propValue, onChange, disabled, onFocus, onBlur, error }: DateTimePickerProps) => {
     const styles = useStyles2(getStyles);
-    const {
-      timezoneStore: { getDateInSelectedTimezone },
-    } = useStore();
+    const { timezoneStore } = useStore();
+    const { getDateInSelectedTimezone } = timezoneStore;
+
     const valueInSelectedTimezone = getDateInSelectedTimezone(propValue);
-    const valueAsDate = valueInSelectedTimezone.toDate();
 
     const handleDateChange = (newDate: Date) => {
-      const localMoment = getDateInSelectedTimezone(dayjs(newDate));
-      const newValue = localMoment
-        .set('year', newDate.getFullYear())
-        .set('month', newDate.getMonth())
-        .set('date', newDate.getDate())
-        .set('hour', valueAsDate.getHours())
-        .set('minute', valueAsDate.getMinutes())
-        .set('second', valueAsDate.getSeconds());
-
-      onChange(newValue);
+      const dateInDayJS = dayjs(newDate);
+
+      // newDate will always point to a new day in the calendar at 00:00 local timezone
+      // We need to clone the date and apply only the new changes to it (year/month/date);
+      // Because we're only altering the date and not the time of it
+
+      const newDateTime = propValue
+        .clone()
+        .set('year', dateInDayJS.year())
+        .set('month', dateInDayJS.month())
+        .set('date', dateInDayJS.date());
+
+      onChange(newDateTime);
     };
-    const handleTimeChange = (newMoment: DateTime) => {
-      const selectedHour = newMoment.hour();
-      const selectedMinute = newMoment.minute();
-      const newValue = valueInSelectedTimezone.set('hour', selectedHour).set('minute', selectedMinute);
 
-      onChange(newValue);
+    const handleTimeChange = (timeMoment: DateTime) => {
+      // Same as above, clone the date and only alter hour and minute from timeMoment
+      const newDateTime = propValue.clone().set('hour', timeMoment.hour()).set('minute', timeMoment.minute());
+
+      onChange(newDateTime);
     };
 
     const getTimeValueInSelectedTimezone = () => {
@@ -73,7 +74,7 @@ export const DateTimePicker = observer(
             <DatePickerWithInput
               open
               disabled={disabled}
-              value={getDateForDatePicker(valueInSelectedTimezone)}
+              value={valueInSelectedTimezone.toDate()}
               onChange={handleDateChange}
             />
           </div>