[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
apache · Dec 5, 2016 · eb0655c · eb0655c
1 parent d8864bc
commit eb0655c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/superset/assets/javascripts/SqlLab/components/QueryTable.jsx b/superset/assets/javascripts/SqlLab/components/QueryTable.jsx
@@ -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);

diff --git a/superset/assets/javascripts/SqlLab/components/VisualizeModal.jsx b/superset/assets/javascripts/SqlLab/components/VisualizeModal.jsx
@@ -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,

diff --git a/superset/assets/javascripts/SqlLab/reducers.js b/superset/assets/javascripts/SqlLab/reducers.js
@@ -134,8 +134,10 @@ export const sqlLabReducer = function (state, action) {
       let newState = Object.assign({}, state);
       if (action.query.sqlEditorId) {
         const qe = getFromArr(state.queryEditors, action.query.sqlEditorId);
-        if (qe.latestQueryId) {
-          const q = Object.assign({}, state.queries[qe.latestQueryId], { results: null });
+        if (qe.latestQueryId && state.queries[qe.latestQueryId]) {
+          const newResults = Object.assign(
+            {}, state.queries[qe.latestQueryId].results, { data: [], query: null });
+          const q = Object.assign({}, state.queries[qe.latestQueryId], { results: newResults });
           const queries = Object.assign({}, state.queries, { [q.id]: q });
           newState = Object.assign({}, state, { queries });
         }