From 4530047c769ba6d5953ef1547b8507c62f657942 Mon Sep 17 00:00:00 2001
From: vera-liu <vera.liu@airbnb.com>
Date: Tue, 8 Nov 2016 15:22:20 -0800
Subject: [PATCH] Added action buttons to Chart Container of explore V2 (#1562)

---
 .../components/ExploreActionButtons.jsx       |  2 +-
 .../explorev2/components/ChartContainer.jsx   | 34 +++++++++++++++++--
 .../assets/javascripts/explorev2/index.jsx    |  1 +
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/caravel/assets/javascripts/explore/components/ExploreActionButtons.jsx b/caravel/assets/javascripts/explore/components/ExploreActionButtons.jsx
index a887df86ccbd9..8c7b12c815d80 100644
--- a/caravel/assets/javascripts/explore/components/ExploreActionButtons.jsx
+++ b/caravel/assets/javascripts/explore/components/ExploreActionButtons.jsx
@@ -5,7 +5,7 @@ import EmbedCodeButton from './EmbedCodeButton';
 import DisplayQueryButton from './DisplayQueryButton';
 
 const propTypes = {
-  canDownload: PropTypes.string.isRequired,
+  canDownload: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
   slice: PropTypes.object.isRequired,
 };
 
diff --git a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
index 287836bffd0a8..b77f82483408d 100644
--- a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
+++ b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -4,13 +4,18 @@ import { connect } from 'react-redux';
 import { Panel } from 'react-bootstrap';
 import visMap from '../../../visualizations/main';
 import { d3format } from '../../modules/utils';
+import ExploreActionButtons from '../../explore/components/ExploreActionButtons';
 
 const propTypes = {
+  can_download: PropTypes.bool.isRequired,
   slice_name: PropTypes.string.isRequired,
   viz_type: PropTypes.string.isRequired,
   height: PropTypes.string.isRequired,
   containerId: PropTypes.string.isRequired,
   json_endpoint: PropTypes.string.isRequired,
+  csv_endpoint: PropTypes.string.isRequired,
+  standalone_endpoint: PropTypes.string.isRequired,
+  query: PropTypes.string.isRequired,
   column_formats: PropTypes.object,
 };
 
@@ -18,10 +23,15 @@ class ChartContainer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      selector: `#${this.props.containerId}`,
+      selector: `#${props.containerId}`,
+      mockSlice: {},
     };
   }
 
+  componentWillMount() {
+    this.setState({ mockSlice: this.getMockedSliceObject() });
+  }
+
   componentDidMount() {
     this.renderVis();
   }
@@ -32,7 +42,16 @@ class ChartContainer extends React.Component {
 
   getMockedSliceObject() {
     return {
+      viewSqlQuery: this.props.query,
+
+      data: {
+        csv_endpoint: this.props.csv_endpoint,
+        json_endpoint: this.props.json_endpoint,
+        standalone_endpoint: this.props.standalone_endpoint,
+      },
+
       containerId: this.props.containerId,
+
       jsonEndpoint: () => this.props.json_endpoint,
 
       container: {
@@ -110,8 +129,7 @@ class ChartContainer extends React.Component {
   }
 
   renderVis() {
-    const slice = this.getMockedSliceObject();
-    visMap[this.props.viz_type](slice).render();
+    visMap[this.props.viz_type](this.state.mockSlice).render();
   }
 
   render() {
@@ -125,6 +143,12 @@ class ChartContainer extends React.Component {
               className="panel-title"
             >
               {this.props.slice_name}
+              <div className="pull-right">
+                <ExploreActionButtons
+                  slice={this.state.mockSlice}
+                  canDownload={this.props.can_download}
+                />
+              </div>
             </div>
           }
         >
@@ -146,7 +170,11 @@ function mapStateToProps(state) {
     containerId: `slice-container-${state.viz.form_data.slice_id}`,
     slice_name: state.viz.form_data.slice_name,
     viz_type: state.viz.form_data.viz_type,
+    can_download: state.can_download,
+    csv_endpoint: state.viz.csv_endpoint,
     json_endpoint: state.viz.json_endpoint,
+    standalone_endpoint: state.viz.standalone_endpoint,
+    query: state.viz.query,
     column_formats: state.viz.column_formats,
   };
 }
diff --git a/caravel/assets/javascripts/explorev2/index.jsx b/caravel/assets/javascripts/explorev2/index.jsx
index 73fef9878f541..1c7f237f0a453 100644
--- a/caravel/assets/javascripts/explorev2/index.jsx
+++ b/caravel/assets/javascripts/explorev2/index.jsx
@@ -13,6 +13,7 @@ const bootstrapData = JSON.parse(exploreViewContainer.getAttribute('data-bootstr
 import { exploreReducer } from './reducers/exploreReducer';
 
 const bootstrappedState = Object.assign(initialState, {
+  can_download: bootstrapData.can_download,
   datasources: bootstrapData.datasources,
   datasource_id: parseInt(bootstrapData.datasource_id, 10),
   datasource_type: bootstrapData.datasource_type,