Added UTC display to scheduler dialog

getredash · Mar 2, 2019 · 031c055 · 031c055
1 parent 02e82a7
commit 031c055
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 15 deletions.
diff --git a/client/app/components/queries/ScheduleDialog.css b/client/app/components/queries/ScheduleDialog.css
@@ -32,3 +32,8 @@
 a.schedule-phrase {
   cursor: pointer;
 }
+
+.utc {
+  opacity: 0.4;
+  margin-left: 10px;
+}
diff --git a/client/app/components/queries/ScheduleDialog.jsx b/client/app/components/queries/ScheduleDialog.jsx
@@ -139,6 +139,29 @@ class ScheduleDialog extends React.Component {
     this.setScheduleUntil(null, date);
   };
 
+  getTimeSelector = () => {
+    const { hour, minute, newSchedule: { time: utc } } = this.state;
+    const value = hour ? moment().hour(hour).minute(minute) : null;
+    const showUTC = value && !value.isUTC();
+
+    return (
+      <React.Fragment>
+        <TimePicker
+          allowEmpty={false}
+          defaultValue={value}
+          format={HOUR_FORMAT}
+          minuteStep={5}
+          onChange={this.setTime}
+        />
+        {showUTC && (
+          <span className="utc">
+            ({ utc } UTC)
+          </span>
+        )}
+      </React.Fragment>
+    );
+  }
+
   save() {
     const { newSchedule } = this.state;
 
@@ -157,8 +180,6 @@ class ScheduleDialog extends React.Component {
     const { dialog } = this.props;
     const {
       interval,
-      minute,
-      hour,
       seconds,
       newSchedule: { until },
     } = this.state;
@@ -188,19 +209,7 @@ 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}
-                onChange={this.setTime}
-              />
+              {this.getTimeSelector()}
             </div>
           </div>
         ) : null}

diff --git a/client/app/components/queries/__snapshots__/ScheduleDialog.test.js.snap b/client/app/components/queries/__snapshots__/ScheduleDialog.test.js.snap
@@ -636,6 +636,13 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "1 Day 22:15" Set
       </Picker>
     </LocaleReceiver>
   </TimePicker>
+  <span
+    className="utc"
+  >
+    (
+    22:15
+     UTC)
+  </span>
 </div>
 `;
 
@@ -1605,6 +1612,13 @@ exports[`ScheduleDialog Sets correct schedule settings Sets to "2 Weeks 22:15 Tu
       </Picker>
     </LocaleReceiver>
   </TimePicker>
+  <span
+    className="utc"
+  >
+    (
+    22:15
+     UTC)
+  </span>
 </div>
 `;