clean up SuccessMessage, show datasetUrl in create-modal
MODIFY
app/components/Settings/scheduler/create-modal.jsx
app/components/Settings/scheduler/create-modal.jsx
@@ -6,12 +6,14 @@ import cronstrue from 'cronstrue';
import {Row, Column} from '../../layout.jsx';
import Modal from '../../modal.jsx';
+import {Link} from '../../Link.react';
import SuccessMessage from '../../success.jsx';
import RequestError from './request-error.jsx';
import TimedMessage from './timed-message.jsx';
import CronPicker from '../cron-picker/cron-picker.jsx';
import SQL from './sql.jsx';
+import {datasetUrl as getDatasetURL} from '../../../utils/utils';
import {getHighlightMode, WAITING_MESSAGE, SAVE_WARNING} from '../../../constants/constants.js';
import './create-modal.css';
@@ -62,7 +64,8 @@ class CreateModal extends Component {
name: props.initialName,
interval: '*/5 * * * *',
error: null,
- saving: false
+ saving: false,
+ datasetUrl: null
};
this.options = {
lineWrapping: true,
@@ -108,8 +111,12 @@ class CreateModal extends Component {
cronInterval: this.state.interval,
name: this.state.name ? this.state.name.trim() : ''
})
- .then(() => {
- this.setState({successMessage: 'Scheduled query saved successfully!', saving: false});
+ .then((res) => {
+ this.setState({
+ successMessage: 'Scheduled query saved successfully!',
+ saving: false,
+ datasetUrl: getDatasetURL(res.fid)
+ });
})
.catch(error => this.setState({error: error.message, saving: false}));
}
@@ -193,7 +200,11 @@ class CreateModal extends Component {
</Column>
<Row>
{this.state.successMessage ? (
- <SuccessMessage>{this.state.successMessage}</SuccessMessage>
+ <Column style={{ padding: '0 32px 16px' }}>
+ <SuccessMessage message={this.state.successMessage}>
+ <Link href={this.state.datasetUrl}>View Live Dataset</Link>
+ </SuccessMessage>
+ </Column>
) : (
<Column>
<button type="submit" className="submit" onClick={this.submit}>

MODIFY
app/components/Settings/scheduler/preview-modal.jsx
app/components/Settings/scheduler/preview-modal.jsx
@@ -12,7 +12,7 @@ import {Link} from '../../Link.react.js';
import CronPicker from '../cron-picker/cron-picker.jsx';
import {Row, Column} from '../../layout.jsx';
import SQL from './sql.jsx';
-import {plotlyUrl} from '../../../utils/utils.js';
+import {datasetUrl} from '../../../utils/utils.js';
import {getHighlightMode, WAITING_MESSAGE, SAVE_WARNING} from '../../../constants/constants.js';
import {getInitialCronMode} from '../cron-picker/cron-helpers.js';
@@ -156,7 +156,11 @@ export class PreviewModal extends Component {
}
if (success) {
- return <SuccessMessage>{this.state.successMessage}</SuccessMessage>;
+ return (
+ <Column>
+ <SuccessMessage>{this.state.successMessage}</SuccessMessage>
+ </Column>
+ );
}
if (editing) {
@@ -196,8 +200,7 @@ export class PreviewModal extends Component {
if (!props.query) {
content = null;
} else {
- const [account, gridId] = props.query.fid.split(':');
- const link = `${plotlyUrl()}/~${account}/${gridId}`;
+ const link = datasetUrl(props.query.fid);
const {editing, loading} = this.state;
const initialModeId = getInitialCronMode(props.query);

MODIFY
app/components/success.jsx
app/components/success.jsx
import React from 'react';
import PropTypes from 'prop-types';
-const style = {marginBottom: 16, fontSize: 16, color: '#00cc96'};
+const style = {fontSize: 16};
const SuccessMessage = (props) => (
- <em style={style}>
+ <div style={{ padding: '8px 16px', borderLeft: '4px solid #00cc96', background: 'white'}}>
+ <div style={style}>{props.message}</div>
{props.children}
- </em>
+ </div>
);
SuccessMessage.propTypes = {
- children: PropTypes.node
+ children: PropTypes.node,
+ message: PropTypes.string
};
export default SuccessMessage;

MODIFY
app/utils/utils.js
app/utils/utils.js
@@ -59,6 +59,11 @@ export function homeUrl() {
'';
}
+export function datasetUrl(fid) {
+ const [account, gridId] = fid.split(':');
+ return `${plotlyUrl()}/~${account}/${gridId}`;
+}
+
export function getPathNames(url) {
const parser = document.createElement('a');
parser.href = url;

clean up SuccessMessage, show datasetUrl in create-modal