From 4014a48f7df9fe166c77132f3d8d83cf615ac176 Mon Sep 17 00:00:00 2001
From: vera-liu <vera.liu@airbnb.com>
Date: Mon, 7 Nov 2016 15:28:46 -0800
Subject: [PATCH] Added cache prop to ResultSet (#1552)

* Added cache prop to ResultSet for distiguishing query result and datapreview results

* small nit

* Only cache results.data locally
---
 .../SqlLab/components/ResultSet.jsx           | 21 +++++++++++++------
 .../SqlLab/components/SouthPane.jsx           |  2 +-
 caravel/assets/javascripts/SqlLab/reducers.js |  4 +++-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/caravel/assets/javascripts/SqlLab/components/ResultSet.jsx b/caravel/assets/javascripts/SqlLab/components/ResultSet.jsx
index 24b8e5fa19ec1..38650cc1416d9 100644
--- a/caravel/assets/javascripts/SqlLab/components/ResultSet.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/ResultSet.jsx
@@ -14,6 +14,7 @@ const propTypes = {
   searchText: React.PropTypes.string,
   showSql: React.PropTypes.bool,
   visualize: React.PropTypes.bool,
+  cache: React.PropTypes.bool,
 };
 const defaultProps = {
   search: true,
@@ -22,6 +23,7 @@ const defaultProps = {
   csv: true,
   searchText: '',
   actions: {},
+  cache: false,
 };
 
 
@@ -31,16 +33,16 @@ class ResultSet extends React.PureComponent {
     this.state = {
       searchText: '',
       showModal: false,
-      results: null,
+      data: [],
     };
   }
   componentWillReceiveProps(nextProps) {
     // when new results comes in, save them locally and clear in store
-    if ((!nextProps.query.cached)
+    if (this.props.cache && (!nextProps.query.cached)
       && nextProps.query.results
       && nextProps.query.results.data.length > 0) {
       this.setState(
-        { results: nextProps.query.results },
+        { data: nextProps.query.results.data },
         this.clearQueryResults(nextProps.query)
       );
     }
@@ -125,7 +127,14 @@ class ResultSet extends React.PureComponent {
   }
   render() {
     const query = this.props.query;
-    const results = (this.props.query.cached) ? this.state.results : query.results;
+    const results = query.results;
+    let data;
+    if (this.props.cache && query.cached) {
+      data = this.state.data;
+    } else {
+      data = results ? results.data : [];
+    }
+
     let sql;
 
     if (this.props.showSql) {
@@ -165,7 +174,7 @@ class ResultSet extends React.PureComponent {
           </Alert>
         </div>);
     } else if (query.state === 'success') {
-      if (results && results.data && results.data.length > 0) {
+      if (results && data && data.length > 0) {
         return (
           <div>
             <VisualizeModal
@@ -177,7 +186,7 @@ class ResultSet extends React.PureComponent {
             {sql}
             <div className="ResultSet">
               <Table
-                data={results.data}
+                data={data}
                 columns={results.columns.map((col) => col.name)}
                 sortable
                 className="table table-condensed table-bordered"
diff --git a/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx b/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx
index 6f57bc8df5093..ed312eebb060d 100644
--- a/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx
@@ -54,7 +54,7 @@ class SouthPane extends React.PureComponent {
         eventKey={query.id}
         key={query.id}
       >
-        <ResultSet query={query} visualize={false} csv={false} actions={props.actions} />
+        <ResultSet query={query} visualize={false} csv={false} actions={props.actions} cache />
       </Tab>
     ));
 
diff --git a/caravel/assets/javascripts/SqlLab/reducers.js b/caravel/assets/javascripts/SqlLab/reducers.js
index 4d0c97fb9197e..87626f199953a 100644
--- a/caravel/assets/javascripts/SqlLab/reducers.js
+++ b/caravel/assets/javascripts/SqlLab/reducers.js
@@ -150,7 +150,9 @@ export const sqlLabReducer = function (state, action) {
       return alterInObject(state, 'queries', action.query, { state: 'stopped' });
     },
     [actions.CLEAR_QUERY_RESULTS]() {
-      return alterInObject(state, 'queries', action.query, { results: [], cached: true });
+      const newResults = Object.assign({}, action.query.results);
+      newResults.data = [];
+      return alterInObject(state, 'queries', action.query, { results: newResults, cached: true });
     },
     [actions.REQUEST_QUERY_RESULTS]() {
       return alterInObject(state, 'queries', action.query, { state: 'fetching' });