Fix: ScheduleDialog won't render for "30 days" interval with no time …

…value (#3447)
getredash · Feb 17, 2019 · f07e613 · f07e613
1 parent 60472e2
commit f07e613
Show file tree

Hide file tree

Showing 3 changed files with 363 additions and 42 deletions.
diff --git a/client/app/components/queries/ScheduleDialog.jsx b/client/app/components/queries/ScheduleDialog.jsx
@@ -73,7 +73,9 @@ class ScheduleDialog extends React.Component {
 
   setTime = (time) => {
     this.newSchedule = {
-      time: moment(time).utc().format(HOUR_FORMAT),
+      time: moment(time)
+        .utc()
+        .format(HOUR_FORMAT),
     };
   };
 
@@ -107,18 +109,14 @@ class ScheduleDialog extends React.Component {
 
     newSchedule.interval = newSeconds;
 
-    const [hour, minute] = newSchedule.time ?
-      localizeTime(newSchedule.time).split(':')
-      : [null, null];
+    const [hour, minute] = newSchedule.time ? localizeTime(newSchedule.time).split(':') : [null, null];
 
     this.setState({
       interval: newInterval,
       seconds: newSeconds,
       hour,
       minute,
-      dayOfWeek: newSchedule.day_of_week
-        ? WEEKDAYS_SHORT[WEEKDAYS_FULL.indexOf(newSchedule.day_of_week)]
-        : null,
+      dayOfWeek: newSchedule.day_of_week ? WEEKDAYS_SHORT[WEEKDAYS_FULL.indexOf(newSchedule.day_of_week)] : null,
     });
 
     this.newSchedule = newSchedule;
@@ -157,29 +155,29 @@ class ScheduleDialog extends React.Component {
 
   render() {
     const { dialog } = this.props;
-    const { interval, minute, hour, seconds, newSchedule: { until } } = this.state;
+    const {
+      interval,
+      minute,
+      hour,
+      seconds,
+      newSchedule: { until },
+    } = this.state;
 
     return (
-      <Modal
-        {...dialog.props}
-        title="Refresh Schedule"
-        className="schedule"
-        onOk={() => this.save()}
-      >
+      <Modal {...dialog.props} title="Refresh Schedule" className="schedule" onOk={() => this.save()}>
         <div className="schedule-component">
           <h5>Refresh every</h5>
           <div data-testid="interval">
-            <Select
-              className="input"
-              value={seconds}
-              onChange={this.setInterval}
-              dropdownMatchSelectWidth={false}
-            >
-              <Option value={null} key="never">Never</Option>
+            <Select className="input" value={seconds} onChange={this.setInterval} dropdownMatchSelectWidth={false}>
+              <Option value={null} key="never">
+                Never
+              </Option>
               {Object.keys(this.intervals).map(int => (
                 <OptGroup label={capitalize(pluralize(int))} key={int}>
                   {this.intervals[int].map(([cnt, secs]) => (
-                    <Option value={secs} key={cnt}>{durationHumanize(secs)}</Option>
+                    <Option value={secs} key={cnt}>
+                      {durationHumanize(secs)}
+                    </Option>
                   ))}
                 </OptGroup>
               ))}
@@ -192,7 +190,13 @@ class ScheduleDialog extends React.Component {
             <div data-testid="time">
               <TimePicker
                 allowEmpty={false}
-                defaultValue={moment().hour(hour).minute(minute)}
+                defaultValue={
+                  hour
+                    ? moment()
+                      .hour(hour)
+                      .minute(minute)
+                    : null
+                }
                 format={HOUR_FORMAT}
                 minuteStep={5}
                 onChange={this.setTime}
@@ -204,11 +208,7 @@ class ScheduleDialog extends React.Component {
           <div className="schedule-component">
             <h5>On day</h5>
             <div data-testid="weekday">
-              <Radio.Group
-                size="medium"
-                defaultValue={this.state.dayOfWeek}
-                onChange={this.setWeekday}
-              >
+              <Radio.Group size="medium" defaultValue={this.state.dayOfWeek} onChange={this.setWeekday}>
                 {WEEKDAYS_SHORT.map(day => (
                   <Radio.Button value={day} key={day} className="input">
                     {day[0]}
@@ -222,11 +222,7 @@ class ScheduleDialog extends React.Component {
           <div className="schedule-component">
             <h5>Ends</h5>
             <div className="ends" data-testid="ends">
-              <Radio.Group
-                size="medium"
-                value={!!until}
-                onChange={this.setUntilToggle}
-              >
+              <Radio.Group size="medium" value={!!until} onChange={this.setUntilToggle}>
                 <Radio value={false}>Never</Radio>
                 <Radio value>On</Radio>
               </Radio.Group>

diff --git a/client/app/components/queries/ScheduleDialog.test.js b/client/app/components/queries/ScheduleDialog.test.js
@@ -6,10 +6,17 @@ import RefreshScheduleDefault from '../proptypes';
 const defaultProps = {
   schedule: RefreshScheduleDefault,
   refreshOptions: [
-    60, 300, 600, // 1, 5 ,10 mins
-    3600, 36000, 82800, // 1, 10, 23 hours
-    86400, 172800, 518400, // 1, 2, 6 days
-    604800, 1209600, // 1, 2, 4 weeks
+    60,
+    300,
+    600, // 1, 5 ,10 mins
+    3600,
+    36000,
+    82800, // 1, 10, 23 hours
+    86400,
+    172800,
+    518400, // 1, 2, 6 days
+    604800,
+    1209600, // 1, 2, 4 weeks
   ],
   dialog: {
     props: {
@@ -126,6 +133,14 @@ describe('ScheduleDialog', () => {
         expect(el).toMatchSnapshot();
       });
     });
+
+    describe('Supports 30 days interval with no time value', () => {
+      test('Time is none', () => {
+        const [wrapper] = getWrapper({ interval: 30 * 24 * 3600 });
+        const el = findByTestID(wrapper, 'time');
+        expect(el).toMatchSnapshot();
+      });
+    });
   });
 
   describe('Adheres to user permissions', () => {
@@ -139,11 +154,12 @@ describe('ScheduleDialog', () => {
         .simulate('click');
 
       // get dropdown menu items
-      const options = mount(wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent())
-        .find('MenuItem');
+      const options = mount(
+        wrapper
+          .find('Trigger')
+          .instance()
+          .getComponent(),
+      ).find('MenuItem');
 
       const texts = options.map(node => node.text());
       const expected = ['Never', '1 minute', '5 minutes', '1 hour', '2 hours'];