Refactor LayoutCell to use LayoutState HOC

ui/src/shared/components/Layout.js

@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {Component, PropTypes} from 'react'
 import WidgetCell from 'shared/components/WidgetCell'
 import LayoutCell from 'shared/components/LayoutCell'
 import RefreshingGraph from 'shared/components/RefreshingGraph'
@@ -15,6 +15,30 @@ const getSource = (cell, source, sources, defaultSource) => {
   return sources.find(src => src.links.self === s) || defaultSource
 }
 
+class LayoutState extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      celldata: [],
+    }
+  }
+
+  grabDataForDownload = celldata => {
+    this.setState({celldata})
+  }
+
+  render() {
+    const {celldata} = this.state
+    return (
+      <Layout
+        {...this.props}
+        celldata={celldata}
+        grabDataForDownload={this.grabDataForDownload}
+      />
+    )
+  }
+}
+
 const Layout = (
   {
     host,
@@ -33,6 +57,8 @@ const Layout = (
     resizeCoords,
     onCancelEditCell,
     onSummonOverlayTechnologies,
+    grabDataForDownload,
+    celldata,
   },
   {source: defaultSource}
 ) =>
@@ -40,6 +66,7 @@ const Layout = (
     cell={cell}
     isEditable={isEditable}
     onEditCell={onEditCell}
+    celldata={celldata}
     onDeleteCell={onDeleteCell}
     onCancelEditCell={onCancelEditCell}
     onSummonOverlayTechnologies={onSummonOverlayTechnologies}
@@ -56,6 +83,7 @@ const Layout = (
           templates={templates}
           autoRefresh={autoRefresh}
           synchronizer={synchronizer}
+          grabDataForDownload={grabDataForDownload}
           resizeCoords={resizeCoords}
           queries={buildQueriesForLayouts(
             cell,
@@ -72,7 +100,7 @@ Layout.contextTypes = {
   source: shape(),
 }
 
-Layout.propTypes = {
+const propTypes = {
   autoRefresh: number.isRequired,
   timeRange: shape({
     lower: string.isRequired,
@@ -115,4 +143,11 @@ Layout.propTypes = {
   sources: arrayOf(shape()),
 }
 
-export default Layout
+LayoutState.propTypes = {...propTypes}
+Layout.propTypes = {
+  ...propTypes,
+  grabDataForDownload: func,
+  celldata: arrayOf(shape()),
+}
+
+export default LayoutState

ui/src/shared/components/LayoutCell.js

@@ -12,7 +12,6 @@ class LayoutCell extends Component {
     super(props)
     this.state = {
       isDeleting: false,
-      celldata: [],
     }
   }
 
@@ -34,13 +33,9 @@ class LayoutCell extends Component {
     this.props.onSummonOverlayTechnologies(cell)
   }
 
-  grabDataForDownload = celldata => {
-    this.setState({celldata})
-  }
-
   handleCSVDownload = cell => () => {
     const joinedName = cell.name.split(' ').join('_')
-    const {celldata} = this.state
+    const {celldata} = this.props
     try {
       download(dashboardtoCSV(celldata), `${joinedName}.csv`, 'text/plain')
     } catch (error) {
@@ -50,9 +45,9 @@ class LayoutCell extends Component {
   }
 
   render() {
-    const {cell, children, isEditable} = this.props
+    const {cell, children, isEditable, celldata} = this.props
 
-    const {isDeleting, celldata} = this.state
+    const {isDeleting} = this.state
     const queries = _.get(cell, ['queries'], [])
 
     return (
@@ -75,13 +70,7 @@ class LayoutCell extends Component {
         />
         <div className="dash-graph--container">
           {queries.length
-            ? React.Children.map(children, child => {
-                if (child && child.props && child.props.autoRefresh) {
-                  return React.cloneElement(child, {
-                    grabDataForDownload: this.grabDataForDownload,
-                  })
-                }
-              })
+            ? children
             : <div className="graph-empty">
                 <button
                   className="no-query--button btn btn-md btn-primary"
@@ -111,6 +100,7 @@ LayoutCell.propTypes = {
   onSummonOverlayTechnologies: func,
   isEditable: bool,
   onCancelEditCell: func,
+  celldata: arrayOf(shape()),
 }
 
 export default LayoutCell