[sqllab] Fixed js error when results are not available (#1715)

* Fixed js error when results are not available

* Flush data and query in results when running new query, keeping columns

* add exception for columns

* Move setState from componentWillMount to componentWillReceiveProps

* Nit
This commit is contained in:
vera-liu
2016-12-05 13:36:18 -08:00
committed by GitHub
parent d8864bc92b
commit eb0655cf85
3 changed files with 23 additions and 14 deletions

View File

@@ -47,8 +47,7 @@ class QueryTable extends React.PureComponent {
this.setState({ showVisualizeModal: false });
}
showVisualizeModal(query) {
this.setState({ showVisualizeModal: true });
this.setState({ activeQuery: query });
this.setState({ activeQuery: query, showVisualizeModal: true });
}
restoreSql(query) {
this.props.actions.queryEditorSetSql({ id: query.sqlEditorId }, query.sql);

View File

@@ -34,21 +34,21 @@ class VisualizeModal extends React.PureComponent {
hints: [],
};
}
componentWillMount() {
this.setStateFromProps();
}
componentDidMount() {
this.validate();
}
setStateFromProps() {
componentWillReceiveProps(nextProps) {
this.setStateFromProps(nextProps);
}
setStateFromProps(props) {
if (
!this.props.query ||
!this.props.query.results ||
!this.props.query.results.columns) {
!props.query ||
!props.query.results ||
!props.query.results.columns) {
return;
}
const columns = {};
this.props.query.results.columns.forEach((col) => {
props.query.results.columns.forEach((col) => {
columns[col.name] = col;
});
this.setState({ columns });
@@ -125,8 +125,16 @@ class VisualizeModal extends React.PureComponent {
this.setState({ columns }, this.validate);
}
render() {
if (!(this.props.query)) {
return <div />;
if (!(this.props.query) || !(this.props.query.results) || !(this.props.query.results.columns)) {
return (
<div className="VisualizeModal">
<Modal show={this.props.show} onHide={this.props.onHide}>
<Modal.Body>
No results available for this query
</Modal.Body>
</Modal>
</div>
);
}
const tableData = this.props.query.results.columns.map((col) => ({
column: col.name,