Put back preview icon for fetching preview data

caravel/assets/javascripts/SqlLab/actions.js

@@ -38,7 +38,7 @@ export function resetState() {
   return { type: RESET_STATE };
 }
 
-export function startQuery(query) {
+export function startQuery(query, table) {
   Object.assign(query, {
     id: shortid.generate(),
     progress: 0,
@@ -46,7 +46,7 @@ export function startQuery(query) {
     state: (query.runAsync) ? 'pending' : 'running',
     cached: false,
   });
-  return { type: START_QUERY, query };
+  return { type: START_QUERY, query, table };
 }
 
 export function querySuccess(query, results) {
@@ -91,9 +91,9 @@ export function fetchQueryResults(query) {
   };
 }
 
-export function runQuery(query) {
+export function runQuery(query, table) {
   return function (dispatch) {
-    dispatch(startQuery(query));
+    dispatch(startQuery(query, table));
     const sqlJsonUrl = '/caravel/sql_json/';
     const sqlJsonRequest = {
       client_id: query.id,
@@ -204,33 +204,21 @@ export function queryEditorSetSelectedText(queryEditor, sql) {
   return { type: QUERY_EDITOR_SET_SELECTED_TEXT, queryEditor, sql };
 }
 
-export function mergeTable(table, query) {
-  return { type: MERGE_TABLE, table, query };
+export function mergeTable(table) {
+  return { type: MERGE_TABLE, table };
 }
 
 export function addTable(query, tableName) {
   return function (dispatch) {
     let url = `/caravel/table/${query.dbId}/${tableName}/${query.schema}/`;
     $.get(url, (data) => {
-      const dataPreviewQuery = {
-        dbId: query.dbId,
-        sql: data.selectStar,
-        tableName,
-        sqlEditorId: null,
-        tab: '',
-        runAsync: false,
-        ctas: false,
-      };
-      // Run query to get preview data for table
-      dispatch(runQuery(dataPreviewQuery));
-      // Merge table to tables in state
-      dispatch(mergeTable(
-        Object.assign(data, {
+      dispatch(
+        mergeTable(Object.assign(data, {
           dbId: query.dbId,
           queryEditorId: query.id,
           schema: query.schema,
           expanded: true,
-        }), dataPreviewQuery)
+        }))
       );
     })
     .fail(() => {

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,
 };
 
 
@@ -36,9 +38,8 @@ class ResultSet extends React.PureComponent {
   }
   componentWillReceiveProps(nextProps) {
     // when new results comes in, save them locally and clear in store
-    if ((!nextProps.query.cached)
-      && nextProps.query.results
-      && nextProps.query.results.data.length > 0) {
+    if (this.props.cache && (!nextProps.query.cached)
+      && nextProps.query.results && nextProps.query.results.data.length > 0) {
       this.setState(
         { results: nextProps.query.results },
         this.clearQueryResults(nextProps.query)
@@ -122,9 +123,9 @@ class ResultSet extends React.PureComponent {
   }
   render() {
     const query = this.props.query;
-    const results = (this.props.query.cached) ? this.state.results : query.results;
+    const results =
+      (this.props.cache && this.props.query.cached) ? this.state.results : query.results;
     let sql;
-
     if (this.props.showSql) {
       sql = <HighlightedSql sql={query.sql} />;
     }
@@ -197,7 +198,9 @@ class ResultSet extends React.PureComponent {
         );
       }
     }
-    return (<Alert bsStyle="warning">The query returned no data</Alert>);
+    const alertMessage = query.cached ?
+      'click on preview in left bar to fetch table data' : 'The query returned no data';
+    return (<Alert bsStyle="warning">{alertMessage}</Alert>);
   }
 }
 ResultSet.propTypes = propTypes;

caravel/assets/javascripts/SqlLab/components/SouthPane.jsx

@@ -54,7 +54,13 @@ 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>
     ));
 

caravel/assets/javascripts/SqlLab/components/TableElement.jsx

@@ -53,6 +53,18 @@ class TableElement extends React.PureComponent {
     this.setState({ expanded: false });
     this.props.actions.removeDataPreview(this.props.table);
   }
+  previewData() {
+    const query = {
+      dbId: this.props.table.dbId,
+      sql: this.props.table.selectStar,
+      tableName: this.props.table.name,
+      sqlEditorId: null,
+      tab: '',
+      runAsync: false,
+      ctas: false,
+    };
+    this.props.actions.runQuery(query, this.props.table);
+  }
   toggleSortColumns() {
     this.setState({ sortColumns: !this.state.sortColumns });
   }
@@ -181,6 +193,12 @@ class TableElement extends React.PureComponent {
                     'Original table column order'}
                   href="#"
                 />
+                <Link
+                  className="fa fa-search-plus pull-left m-l-2"
+                  onClick={this.previewData.bind(this)}
+                  tooltip="Data preview"
+                  href="#"
+                />
                 {table.selectStar &&
                   <CopyToClipboard
                     copyNode={

caravel/assets/javascripts/SqlLab/reducers.js

@@ -85,19 +85,11 @@ export const sqlLabReducer = function (state, action) {
         }
       });
       if (existingTable) {
-        if (action.query) {
-          at.dataPreviewQueryId = action.query.id;
-        }
         return alterInArr(state, 'tables', existingTable, at);
       }
       at.id = shortid.generate();
-      // for new table, associate Id of query for data preview
       at.dataPreviewQueryId = null;
-      let newState = addToArr(state, 'tables', at);
-      if (action.query) {
-        newState = alterInArr(newState, 'tables', at, { dataPreviewQueryId: action.query.id });
-      }
-      return newState;
+      return addToArr(state, 'tables', at);
     },
     [actions.EXPAND_TABLE]() {
       return alterInArr(state, 'tables', action.table, { expanded: true });
@@ -126,6 +118,8 @@ export const sqlLabReducer = function (state, action) {
         }
       } else {
         newState.activeSouthPaneTab = action.query.id;
+        newState = alterInArr(
+          newState, 'tables', action.table, { dataPreviewQueryId: action.query.id });
       }
       newState = addToObject(newState, 'queries', action.query);
       const sqlEditor = { id: action.query.sqlEditorId };

caravel/assets/spec/javascripts/sqllab/TableElement_spec.jsx

@@ -24,9 +24,9 @@ describe('TableElement', () => {
       React.isValidElement(<TableElement {...mockedProps} />)
     ).to.equal(true);
   });
-  it('has 2 Link elements', () => {
+  it('has 3 Link elements', () => {
     const wrapper = shallow(<TableElement {...mockedProps} />);
-    expect(wrapper.find(Link)).to.have.length(2);
+    expect(wrapper.find(Link)).to.have.length(3);
   });
   it('has 14 columns', () => {
     const wrapper = shallow(<TableElement {...mockedProps} />);