Make current day default for override creation modal (#1515)

# What this PR does
Makes current day default for override creation modal + adds a simple
integration test

## Which issue(s) this PR fixes
https://github.com/grafana/oncall-private/issues/1674

## Checklist

- [x] Tests updated
- [x] `CHANGELOG.md` updated

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- Fix bug with override creation ([1515](https://github.com/grafana/oncall/pull/1515))
+
 ## v1.1.35 (2023-03-09)
 
 ### Added

grafana-plugin/integration-tests/schedules/addOverride.test.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+import { openOnCallPlugin } from '../utils';
+import { clickButton, generateRandomValue } from '../utils/forms';
+import { createOnCallSchedule, getOverrideFormDateInputs } from '../utils/schedule';
+import dayjs from "dayjs";
+
+test.beforeEach(async ({ page }) => {
+  await openOnCallPlugin(page);
+});
+
+test('default dates in override creation modal are correct', async ({ page }) => {
+  const onCallScheduleName = generateRandomValue();
+  await createOnCallSchedule(page, onCallScheduleName);
+
+  await clickButton({ page, buttonText: 'Add override' });
+
+  const overrideFormDateInputs = await getOverrideFormDateInputs(page);
+
+  const expectedStart = dayjs().startOf('day');  // start of today
+  const expectedEnd = expectedStart.add(1, 'day');  // end of today
+
+  expect(overrideFormDateInputs.start.isSame(expectedStart)).toBe(true);
+  expect(overrideFormDateInputs.end.isSame(expectedEnd)).toBe(true);
+});

grafana-plugin/integration-tests/utils/schedule.ts

@@ -2,6 +2,7 @@ import { Page } from '@playwright/test';
 import { GRAFANA_USERNAME } from './constants';
 import { clickButton, fillInInput, selectDropdownValue, selectValuePickerValue } from './forms';
 import { goToOnCallPageByClickingOnTab } from './navigation';
+import dayjs from "dayjs";
 
 export const createOnCallSchedule = async (page: Page, scheduleName: string): Promise<void> => {
   // go to the escalation chains page
@@ -29,3 +30,29 @@ export const createOnCallSchedule = async (page: Page, scheduleName: string): Pr
 
   await clickButton({ page, buttonText: 'Create' });
 };
+
+export interface OverrideFormDateInputs {
+  start: dayjs.Dayjs;
+  end: dayjs.Dayjs;
+}
+
+export const getOverrideFormDateInputs = async (page: Page): Promise<OverrideFormDateInputs> => {
+  const getInputValue = async (inputNumber: number): Promise<string> => {
+    const element = await page.waitForSelector(`div[data-testid=\"override-inputs\"] >> input >> nth=${inputNumber}`)
+    return await element.inputValue();
+  }
+
+  const startDate = await getInputValue(0);
+  const startTime = await getInputValue(1);
+
+  const endDate = await getInputValue(2);
+  const endTime = await getInputValue(3);
+
+  const startDateTime = dayjs(`${startDate} ${startTime}`, 'MM/DD/YYYY HH:mm');
+  const endDateTime = dayjs(`${endDate} ${endTime}`, 'MM/DD/YYYY HH:mm');
+
+  return {
+    start: startDateTime,
+    end: endDateTime,
+  };
+};

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

@@ -205,7 +205,7 @@ const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
             <IconButton variant="secondary" className={cx('drag-handler')} name="draggabledots" />
           </HorizontalGroup>
         </HorizontalGroup>
-        <div className={cx('content')}>
+        <div className={cx('content')} data-testid="override-inputs">
           <VerticalGroup>
             <HorizontalGroup>
               <Field

grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx

@@ -14,6 +14,7 @@ import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/W
 import { getOverrideColor, getOverridesFromStore } from 'models/schedule/schedule.helpers';
 import { Schedule, ScheduleType, Shift, ShiftEvents } from 'models/schedule/schedule.types';
 import { Timezone } from 'models/timezone/timezone.types';
+import { getStartOfDay } from 'pages/schedule/Schedule.helpers';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
 import { UserActions } from 'utils/authorization';
@@ -186,12 +187,15 @@ class ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverri
   };
 
   handleAddOverride = () => {
-    const { startMoment, disabled } = this.props;
+    const { store, disabled } = this.props;
 
     if (disabled) {
       return;
     }
 
+    // use start of current day as default start time for override
+    const startMoment = getStartOfDay(store.currentTimezone);
+
     this.setState({ shiftMomentToShowOverrideForm: startMoment }, () => {
       this.onShowRotationForm('new');
     });

grafana-plugin/src/pages/schedule/Schedule.helpers.ts

@@ -7,8 +7,17 @@ import { Timezone } from 'models/timezone/timezone.types';
 import { RootStore } from 'state';
 import { SelectOption } from 'state/types';
 
+export const getNow = (tz: Timezone) => {
+  const now = dayjs().tz(tz);
+  return now.utcOffset() === 0 ? now.utc() : now;
+};
+
+export const getStartOfDay = (tz: Timezone) => {
+  return getNow(tz).startOf('day');
+};
+
 export const getStartOfWeek = (tz: Timezone) => {
-  return dayjs().tz(tz).utcOffset() === 0 ? dayjs().utc().startOf('isoWeek') : dayjs().tz(tz).startOf('isoWeek');
+  return getNow(tz).startOf('isoWeek');
 };
 
 export const getUTCString = (moment: dayjs.Dayjs) => {