Added UTC display to scheduler dialog (#3517)

client/app/components/queries/ScheduleDialog.css

@@ -32,3 +32,8 @@
 a.schedule-phrase {
   cursor: pointer;
 }
+
+.utc {
+  opacity: 0.4;
+  margin-left: 10px;
+}

client/app/components/queries/ScheduleDialog.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'antd/lib/modal';
 import DatePicker from 'antd/lib/date-picker';
@@ -9,7 +9,7 @@ import { capitalize, clone, isEqual } from 'lodash';
 import moment from 'moment';
 import { secondsToInterval, durationHumanize, pluralize, IntervalEnum, localizeTime } from '@/filters';
 import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
-import { RefreshScheduleType, RefreshScheduleDefault } from '../proptypes';
+import { RefreshScheduleType, RefreshScheduleDefault, Moment } from '../proptypes';
 
 import './ScheduleDialog.css';
 
@@ -19,6 +19,42 @@ const DATE_FORMAT = 'YYYY-MM-DD';
 const HOUR_FORMAT = 'HH:mm';
 const { Option, OptGroup } = Select;
 
+export function TimeEditor(props) {
+  const [time, setTime] = useState(props.defaultValue);
+  const showUtc = time && !time.isUTC();
+
+  function onChange(newTime) {
+    setTime(newTime);
+    props.onChange(newTime);
+  }
+
+  return (
+    <React.Fragment>
+      <TimePicker
+        allowEmpty={false}
+        value={time}
+        format={HOUR_FORMAT}
+        minuteStep={5}
+        onChange={onChange}
+      />
+      {showUtc && (
+        <span className="utc" data-testid="utc">
+          ({ moment.utc(time).format(HOUR_FORMAT) } UTC)
+        </span>
+      )}
+    </React.Fragment>
+  );
+}
+
+TimeEditor.propTypes = {
+  defaultValue: Moment,
+  onChange: PropTypes.func.isRequired,
+};
+
+TimeEditor.defaultProps = {
+  defaultValue: null,
+};
+
 class ScheduleDialog extends React.Component {
   static propTypes = {
     schedule: RefreshScheduleType,
@@ -188,17 +224,8 @@ class ScheduleDialog extends React.Component {
           <div className="schedule-component">
             <h5>On time</h5>
             <div data-testid="time">
-              <TimePicker
-                allowEmpty={false}
-                defaultValue={
-                  hour
-                    ? moment()
-                      .hour(hour)
-                      .minute(minute)
-                    : null
-                }
-                format={HOUR_FORMAT}
-                minuteStep={5}
+              <TimeEditor
+                defaultValue={hour ? moment().hour(hour).minute(minute) : null}
                 onChange={this.setTime}
               />
             </div>

client/app/components/queries/ScheduleDialog.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import ScheduleDialog from './ScheduleDialog';
+import moment from 'moment';
+import ScheduleDialog, { TimeEditor } from './ScheduleDialog';
 import RefreshScheduleDefault from '../proptypes';
 
 const defaultProps = {
@@ -97,6 +98,57 @@ describe('ScheduleDialog', () => {
       });
     });
 
+    describe('TimeEditor', () => {
+      const defaultValue = moment().hour(5).minute(25); // 05:25
+
+      test('UTC set correctly on init', () => {
+        const editor = mount(<TimeEditor defaultValue={defaultValue} onChange={() => {}} />);
+        const utc = findByTestID(editor, 'utc');
+
+        // expect utc to be 2h below initial time
+        expect(utc.text()).toBe('(03:25 UTC)');
+      });
+
+      test('UTC time should not render', () => {
+        const utcValue = moment.utc(defaultValue);
+        const editor = mount(<TimeEditor defaultValue={utcValue} onChange={() => {}} />);
+        const utc = findByTestID(editor, 'utc');
+
+        // expect utc to not render
+        expect(utc.exists()).toBeFalsy();
+      });
+
+      test('onChange correct result', () => {
+        const onChangeCb = jest.fn(time => time.format('HH:mm'));
+        const editor = mount(<TimeEditor onChange={onChangeCb} />);
+
+        // click TimePicker
+        editor.find('.ant-time-picker-input').simulate('click');
+
+        // select hour "07"
+        const hourSelector = editor.find('.ant-time-picker-panel-select').at(0);
+        hourSelector
+          .find('li')
+          .at(7)
+          .simulate('click');
+
+        // select minute "30"
+        const minuteSelector = editor.find('.ant-time-picker-panel-select').at(1);
+        minuteSelector
+          .find('li')
+          .at(6)
+          .simulate('click');
+
+        // expect utc to be 2h below initial time
+        const utc = findByTestID(editor, 'utc');
+        expect(utc.text()).toBe('(05:30 UTC)');
+
+        // expect 07:30 from onChange
+        const onChangeResult = onChangeCb.mock.results[1].value;
+        expect(onChangeResult).toBe('07:30');
+      });
+    });
+
     describe('Sets to "2 Weeks 22:15 Tuesday"', () => {
       const [wrapper] = getWrapper({
         interval: 1209600,