plotly · n-riesco · Jul 24, 2018 · Jul 10, 2018 · Jul 11, 2018 · Jul 11, 2018
diff --git a/app/actions/sessions.js b/app/actions/sessions.js
@@ -165,8 +165,10 @@ export function createScheduledQuery(connectionId, payload = {}) {
         uids: payload.uids,
         fid: payload.fid,
         filename: payload.filename,
+        name: payload.name,
         refreshInterval: payload.refreshInterval,
         query: payload.query,
+        cronInterval: payload.cronInterval,
         connectionId
       }
     )).then((res) => {
@@ -186,8 +188,10 @@ export function updateScheduledQuery(connectionId, payload = {}) {
       uids: payload.uids,
       fid: payload.fid,
       filename: payload.filename,
+      name: payload.name,
       refreshInterval: payload.refreshInterval,
       query: payload.query,
+      cronInterval: payload.cronInterval,
       connectionId
     };
 
@@ -198,10 +202,12 @@ export function updateScheduledQuery(connectionId, payload = {}) {
       payload.filename,
       body
     )).then((res) => {
-      dispatch({
+      if (!res.error) {
+        dispatch({
           type: 'UPDATE_SCHEDULED_QUERY',
           payload: body
-      });
+        });
+      }
       return res;
     });
   };

diff --git a/app/components/Settings/Preview/sql-table.css b/app/components/Settings/Preview/sql-table.css
@@ -11,6 +11,13 @@
     border-color: #c8d4e3 !important;
 }
 
+/* fix horizontal overflow issues */
+.react-grid-Cell {
+  box-sizing: border-box;
+  border-right: none !important;
+}
+
+
 .react-grid-Header {
     box-shadow: unset !important;
     max-height: 64px;

diff --git a/app/components/Settings/Settings.react.js b/app/components/Settings/Settings.react.js
@@ -25,7 +25,7 @@ class Settings extends Component {
         this.renderSettingsForm = this.renderSettingsForm.bind(this);
         this.updateSelectedPanel = this.updateSelectedPanel.bind(this);
         this.openScheduler = this.openScheduler.bind(this);
-        this.openLogin = this.updateSelectedPanel.bind(this, 3);
+        this.openLogin = () => window.location.assign('/login');
         this.state = {
             editMode: true,
             selectedPanel: {},
@@ -272,9 +272,12 @@ class Settings extends Component {
     openScheduler() {
       this.setState({ scheduledQuery: this.props.preview.code }, () => {
         this.updateSelectedPanel(2, () => {
-          // Setting scheduledQuery to `null` right after opening the Schedule panel ensures that,
-          // when the user switches to another connector,
-          // `initialCode` isn't set to the `scheduledQuery` used in the previous connector.
+          /*
+           * Setting scheduledQuery to `null` right after opening the Schedule panel
+           * ensures that when the user switches to another connector, or back
+           * and forth between tabs, `initialCode` isn't set to the
+           * `scheduledQuery` causing the create modal to be open..
+           */
           this.setState({ scheduledQuery: null });
         });
       });
@@ -423,6 +426,7 @@ class Settings extends Component {
                               openLogin={this.openLogin}
                               requestor={username}
                               dialect={dialect}
+                              openQueryPage={() => this.updateSelectedPanel(1)}
                             />
                         </TabPanel>
 

diff --git a/app/components/Settings/cron-picker/cron-helpers.js b/app/components/Settings/cron-picker/cron-helpers.js
@@ -0,0 +1,94 @@
+import cronstrue from 'cronstrue';
+
+export function mapHourToCronFormat(hour, amPm) {
+    if (hour === 12) {
+        if (amPm === 'AM') {
+            return 0;
+        }
+    } else if (amPm === 'PM') {
+        return hour + 12;
+    }
+
+    return hour;
+}
+
+export function mapCronToHourFormat(cronExpression) {
+    try {
+        cronstrue.toString(cronExpression);
+    } catch (_) {
+        return null;
+    }
+
+    const cronParts = cronExpression.split(' ');
+    if (cronParts.length === 6) {
+        // disregard seconds component
+        cronParts.shift();
+    }
+    const [cronMinute, cronHour, cronDayOfMonth, cronMonth, cronDaysOfWeek] = cronParts;
+
+    const time = {};
+    time.minute = cronMinute.includes('*') ? 0 : Number(cronMinute);
+    time.date = cronDayOfMonth.includes('*') ? 1 : Number(cronDayOfMonth);
+    time.month = cronMonth.includes('*') ? 1 : Number(cronMonth);
+    time.days = cronDaysOfWeek.includes('*') ? ['MON'] : cronDaysOfWeek.split(',');
+
+    if (cronHour.includes('*') && Number(cronHour) > 12) {
+        time.hour = Number(cronHour) - 12;
+        time.amPm = 'PM';
+    } else {
+        time.hour = cronHour.includes('*') || Number(cronHour) === 0 ? 12 : Number(cronHour);
+        time.amPm = 'AM';
+    }
+
+    return time;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Maximum_delay_value
+const MAXIMUM_REFRESH_INTERVAL = 2147483647 / 1000;
+export function getInitialCronMode(query) {
+    const {cronInterval, refreshInterval} = query;
+
+    if (cronInterval) {
+        if (cronInterval === '* * * * *') {
+            return 'MINUTE';
+        } else if (cronInterval === '*/5 * * * *') {
+            return 'FREQUENTLY';
+        } else if (cronInterval.match(/\S+? \* \* \* \*/)) {
+            return 'HOURLY';
+        } else if (cronInterval.match(/\S+? \S+? \* \* \*/)) {
+            return 'DAILY';
+        } else if (cronInterval.match(/\S+? \S+? \* \* \S+?/)) {
+            return 'WEEKLY';
+        } else if (cronInterval.match(/\S+? \S+? \S+? \* \*/)) {
+            return 'MONTHLY';
+        }
+    } else if (refreshInterval) {
+        // case: refreshInterval is closer to 1 minute than to 5 minutes
+        if (refreshInterval <= (60 * (1 + 5)) / 2) {
+            return 'MINUTE';
+        }
+        // case: refreshInterval is closer to 5 minutes than to 1 hour
+        else if (refreshInterval <= (60 * (5 + 60)) / 2) {
+            return 'FREQUENTLY';
+        }
+        // case: refreshInterval is closer to 1 hour than to 1 day
+        else if (refreshInterval <= (60 * 60 * (1 + 24)) / 2) {
+            return 'HOURLY';
+        }
+        // case: refreshInterval is closer to 1 day than to 1 week
+        else if (refreshInterval <= (24 * 60 * 60 * (1 + 7)) / 2) {
+            return 'DAILY';
+        }
+        // case: refreshInterval is closer to 1 week than to 1 month
+        else if (refreshInterval <= (24 * 60 * 60 * (7 + 30)) / 2) {
+            return 'WEEKLY';
+        }
+        // Values larger than MAXIMUM_REFRESH_INTERVAL are invalid, and setTimeout treats them as 0
+        // We don't want to run the queries so often, so FREQUENTLY is safer default.
+        else if (refreshInterval < MAXIMUM_REFRESH_INTERVAL) {
+            return 'MONTHLY';
+        }
+    } else {
+        return 'FREQUENTLY';
+    }
+}
diff --git a/app/components/Settings/cron-picker/cron-picker.css b/app/components/Settings/cron-picker/cron-picker.css
@@ -0,0 +1,19 @@
+.time-picker .Select-control {
+    /* all other time related dropdowns */
+    width: 56px;
+}
+
+.cron-row {
+    vertical-align: center;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.cron-details {
+    align-items: center;
+    min-height: 56px;
+    background: #E8E8E8;
+    border-left: 4px solid #828282;
+    padding: 8px 16px;
+    margin-bottom: 16px;
+}
diff --git a/app/components/Settings/cron-picker/cron-picker.jsx b/app/components/Settings/cron-picker/cron-picker.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import {find, propEq} from 'ramda';
+
+import MODES from './modes';
+import {mapCronToHourFormat} from './cron-helpers.js';
+
+import './cron-picker.css';
+
+import {Row} from '../../layout.jsx';
+
+// react-select requires options to have `label` and `value` keys
+const MODE_OPTIONS = MODES.map(currMode => ({
+    ...currMode,
+    label: currMode.name,
+    value: currMode.id
+}));
+
+const rowStyle = {
+    justifyContent: 'flex-start',
+    verticalAlign: 'center',
+    alignItems: 'center',
+    marginBottom: '16px'
+};
+
+export default class CronPicker extends React.Component {
+    static defaultProps = {
+        initialModeId: 'FREQUENTLY'
+    };
+
+    static propTypes = {
+        initialCronExpression: PropTypes.string,
+        initialModeId: PropTypes.string,
+        onChange: PropTypes.func.isRequired
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            currentModeId: props.initialModeId
+        };
+
+        // if possible, immediately emit default expression
+        const initialMode = this.getModeById(props.initialModeId);
+        if (initialMode.staticCronExpression) {
+            props.onChange(initialMode.staticCronExpression);
+        }
+
+        this.onModeChange = this.onModeChange.bind(this);
+    }
+
+    getModeById(id) {
+        return find(propEq('id', id), MODES);
+    }
+
+    onModeChange(selectedOption) {
+        const newMode = this.getModeById(selectedOption.value);
+        this.setState({currentModeId: newMode.id});
+
+        if (newMode.staticCronExpression) {
+            // new expression is fixed, so emit it immediately
+            this.props.onChange(newMode.staticCronExpression);
+        }
+    }
+
+    render() {
+        const ModeComponent = this.getModeById(this.state.currentModeId).component;
+        const initialTime = mapCronToHourFormat(this.props.initialCronExpression);
+        return (
+            <React.Fragment>
+                <Row style={rowStyle}>
+                    <div style={{width: '50%', minWidth: '232px'}}>
+                        <Select
+                            className="mode-picker"
+                            searchable={false}
+                            clearable={false}
+                            value={this.state.currentModeId}
+                            onChange={this.onModeChange}
+                            options={MODE_OPTIONS}
+                        />
+                    </div>
+                </Row>
+                {ModeComponent ? (
+                    // eslint-disable-next-line
+                    <ModeComponent initialTime={initialTime || undefined} onChange={this.props.onChange} />
+                ) : null}
+            </React.Fragment>
+        );
+    }
+}
diff --git a/app/components/Settings/cron-picker/details.jsx b/app/components/Settings/cron-picker/details.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {Column, Row} from '../../layout.jsx';
+
+const style = {justifyContent: 'flex-start'};
+
+const DetailsRow = props => (
+    <Row style={style} className="cron-details">
+        {props.children}
+    </Row>
+);
+
+DetailsRow.propTypes = {
+    children: PropTypes.node
+};
+
+const DetailsColumn = props => (
+    <Column style={style} className="cron-details">
+        {props.children}
+    </Column>
+);
+
+DetailsColumn.propTypes = {
+    children: PropTypes.node
+};
+
+export default {DetailsRow, DetailsColumn};