Remove context types from template query builder dropdowns

This is partially working

ui/src/CheckSources.tsx

@@ -51,6 +51,8 @@ interface Props {
   errorThrown: () => void
 }
 
+export const SourceContext = React.createContext()
+
 // Acts as a 'router middleware'. The main `App` component is responsible for
 // getting the list of data sources, but not every page requires them to function.
 // Routes that do require data sources can be nested under this component.
@@ -207,8 +209,10 @@ export class CheckSources extends Component<Props, State> {
     // TODO: guard against invalid resource access
 
     return (
-      this.props.children &&
-      React.cloneElement(this.props.children, {...this.props, source})
+      <SourceContext.Provider value={source}>
+        {this.props.children &&
+          React.cloneElement(this.props.children, {...this.props, source})}
+      </SourceContext.Provider>
     )
   }
 }

ui/src/dashboards/components/MeasurementDropdown.js

@@ -42,16 +42,14 @@ class MeasurementDropdown extends Component {
   }
 
   _getMeasurements = async () => {
-    const {
-      source: {
-        links: {proxy},
-      },
-    } = this.context
     const {
       measurement,
       database,
       onSelectMeasurement,
       onErrorThrown,
+      source: {
+        links: {proxy},
+      },
     } = this.props
 
     try {
@@ -72,7 +70,12 @@ class MeasurementDropdown extends Component {
 
 const {func, shape, string} = PropTypes
 
-MeasurementDropdown.contextTypes = {
+MeasurementDropdown.propTypes = {
+  database: string.isRequired,
+  measurement: string,
+  onSelectMeasurement: func.isRequired,
+  onStartEdit: func.isRequired,
+  onErrorThrown: func.isRequired,
   source: shape({
     links: shape({
       proxy: string.isRequired,
@@ -80,12 +83,4 @@ MeasurementDropdown.contextTypes = {
   }).isRequired,
 }
 
-MeasurementDropdown.propTypes = {
-  database: string.isRequired,
-  measurement: string,
-  onSelectMeasurement: func.isRequired,
-  onStartEdit: func.isRequired,
-  onErrorThrown: func.isRequired,
-}
-
 export default MeasurementDropdown

ui/src/dashboards/components/template_variables/Manager.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import uuid from 'uuid'
 
+import {SourceContext} from 'src/CheckSources'
 import TemplateVariableTable from 'src/dashboards/components/template_variables/Table'
 
 import {TEMPLATE_VARIABLE_TYPES} from 'src/dashboards/constants'
 
 const TemplateVariableManager = ({
-  source,
   onClose,
   onDelete,
   isEdited,
@@ -46,14 +46,18 @@ const TemplateVariableManager = ({
       </div>
     </div>
     <div className="template-variable-manager--body">
-      <TemplateVariableTable
-        source={source}
-        onDelete={onDelete}
-        templates={templates}
-        onRunQuerySuccess={onRunQuerySuccess}
-        onRunQueryFailure={onRunQueryFailure}
-        tempVarAlreadyExists={tempVarAlreadyExists}
-      />
+      <SourceContext.Consumer>
+        {source => (
+          <TemplateVariableTable
+            source={source}
+            onDelete={onDelete}
+            templates={templates}
+            onRunQuerySuccess={onRunQuerySuccess}
+            onRunQueryFailure={onRunQueryFailure}
+            tempVarAlreadyExists={tempVarAlreadyExists}
+          />
+        )}
+      </SourceContext.Consumer>
     </div>
   </div>
 )
@@ -218,11 +222,6 @@ TemplateVariableManager.propTypes = {
 
 TemplateVariableManagerWrapper.propTypes = {
   onEditTemplateVariables: func.isRequired,
-  source: shape({
-    links: shape({
-      proxy: string,
-    }),
-  }).isRequired,
   templates: arrayOf(
     shape({
       type: string.isRequired,

ui/src/dashboards/components/template_variables/Row.js

@@ -46,6 +46,7 @@ const TemplateVariableRow = ({
   onSubmit,
   onErrorThrown,
   onDeleteTempVar,
+  source,
 }) => (
   <form
     className={classnames('template-variable-manager--table-row', {
@@ -78,6 +79,7 @@ const TemplateVariableRow = ({
     </div>
     <div className="tvm--col-3">
       <TemplateQueryBuilder
+        source={source}
         onSelectDatabase={onSelectDatabase}
         selectedType={selectedType}
         selectedDatabase={selectedDatabase}

ui/src/dashboards/components/template_variables/TemplateQueryBuilder.js

@@ -14,6 +14,7 @@ const TemplateQueryBuilder = ({
   onSelectTagKey,
   onStartEdit,
   onErrorThrown,
+  source,
 }) => {
   switch (selectedType) {
     case 'csv':
@@ -25,6 +26,7 @@ const TemplateQueryBuilder = ({
         <div className="tvm-query-builder">
           <span className="tvm-query-builder--text">SHOW MEASUREMENTS ON</span>
           <DatabaseDropdown
+            source={source}
             onSelectDatabase={onSelectDatabase}
             database={selectedDatabase}
             onStartEdit={onStartEdit}
@@ -40,6 +42,7 @@ const TemplateQueryBuilder = ({
             SHOW {selectedType === 'fieldKeys' ? 'FIELD' : 'TAG'} KEYS ON
           </span>
           <DatabaseDropdown
+            source={source}
             onSelectDatabase={onSelectDatabase}
             database={selectedDatabase}
             onStartEdit={onStartEdit}
@@ -48,6 +51,7 @@ const TemplateQueryBuilder = ({
           <span className="tvm-query-builder--text">FROM</span>
           {selectedDatabase ? (
             <MeasurementDropdown
+              source={source}
               database={selectedDatabase}
               measurement={selectedMeasurement}
               onSelectMeasurement={onSelectMeasurement}
@@ -64,6 +68,7 @@ const TemplateQueryBuilder = ({
         <div className="tvm-query-builder">
           <span className="tvm-query-builder--text">SHOW TAG VALUES ON</span>
           <DatabaseDropdown
+            source={source}
             onSelectDatabase={onSelectDatabase}
             database={selectedDatabase}
             onStartEdit={onStartEdit}
@@ -72,6 +77,7 @@ const TemplateQueryBuilder = ({
           <span className="tvm-query-builder--text">FROM</span>
           {selectedDatabase ? (
             <MeasurementDropdown
+              source={source}
               database={selectedDatabase}
               measurement={selectedMeasurement}
               onSelectMeasurement={onSelectMeasurement}
@@ -105,7 +111,7 @@ const TemplateQueryBuilder = ({
   }
 }
 
-const {func, string} = PropTypes
+const {func, shape, string} = PropTypes
 
 TemplateQueryBuilder.propTypes = {
   selectedType: string.isRequired,
@@ -117,6 +123,11 @@ TemplateQueryBuilder.propTypes = {
   selectedDatabase: string,
   selectedTagKey: string,
   onErrorThrown: func.isRequired,
+  source: shape({
+    links: shape({
+      proxy: string.isRequired,
+    }).isRequired,
+  }).isRequired,
 }
 
 export default TemplateQueryBuilder

ui/src/data_explorer/components/WriteDataForm.js

@@ -133,7 +133,7 @@ class WriteDataForm extends Component {
   handleFileInputRef = el => (this.fileInput = el)
 
   render() {
-    const {onClose, errorThrown} = this.props
+    const {onClose, errorThrown, source} = this.props
     const {dragClass} = this.state
 
     return (
@@ -148,6 +148,7 @@ class WriteDataForm extends Component {
         <div className="write-data-form">
           <WriteDataHeader
             {...this.state}
+            source={source}
             handleSelectDatabase={this.handleSelectDatabase}
             errorThrown={errorThrown}
             toggleWriteView={this.toggleWriteView}

ui/src/data_explorer/components/WriteDataHeader.js

@@ -9,11 +9,13 @@ const WriteDataHeader = ({
   toggleWriteView,
   isManual,
   onClose,
+  source,
 }) => (
   <div className="write-data-form--header">
     <div className="page-header__left">
       <h1 className="page-header__title">Write Data To</h1>
       <DatabaseDropdown
+        source={source}
         onSelectDatabase={handleSelectDatabase}
         database={selectedDatabase}
         onErrorThrown={errorThrown}
@@ -40,7 +42,7 @@ const WriteDataHeader = ({
   </div>
 )
 
-const {func, string, bool} = PropTypes
+const {func, shape, string, bool} = PropTypes
 
 WriteDataHeader.propTypes = {
   handleSelectDatabase: func.isRequired,
@@ -49,6 +51,11 @@ WriteDataHeader.propTypes = {
   errorThrown: func.isRequired,
   onClose: func.isRequired,
   isManual: bool,
+  source: shape({
+    links: shape({
+      proxy: string.isRequired,
+    }).isRequired,
+  }).isRequired,
 }
 
 export default WriteDataHeader

ui/src/shared/components/DatabaseDropdown.js

@@ -39,8 +39,7 @@ class DatabaseDropdown extends Component {
   }
 
   _getDatabases = async () => {
-    const {source} = this.context
-    const {database, onSelectDatabase, onErrorThrown} = this.props
+    const {source, database, onSelectDatabase, onErrorThrown} = this.props
     const proxy = source.links.proxy
     try {
       const {data} = await showDatabases(proxy)
@@ -65,7 +64,11 @@ class DatabaseDropdown extends Component {
 
 const {func, shape, string} = PropTypes
 
-DatabaseDropdown.contextTypes = {
+DatabaseDropdown.propTypes = {
+  database: string,
+  onSelectDatabase: func.isRequired,
+  onStartEdit: func,
+  onErrorThrown: func.isRequired,
   source: shape({
     links: shape({
       proxy: string.isRequired,
@@ -73,11 +76,4 @@ DatabaseDropdown.contextTypes = {
   }).isRequired,
 }
 
-DatabaseDropdown.propTypes = {
-  database: string,
-  onSelectDatabase: func.isRequired,
-  onStartEdit: func,
-  onErrorThrown: func.isRequired,
-}
-
 export default DatabaseDropdown