Refactor template builders to use template values

Refactors template builders to take an onChoose prop passed by the
TemplateVariableEditor and to utilize template.values for rendering
template preview list to gain access to what values are selected.

ui/src/tempVars/components/CSVTemplateBuilder.tsx

@@ -6,7 +6,6 @@ import TemplatePreviewList from 'src/tempVars/components/TemplatePreviewList'
 import {TemplateBuilderProps, TemplateValueType} from 'src/types'
 
 interface State {
-  templateValues: string[]
   templateValuesString: string
 }
 
@@ -18,14 +17,14 @@ class CSVTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
     const templateValues = props.template.values.map(v => v.value)
 
     this.state = {
-      templateValues,
       templateValuesString: templateValues.join(', '),
     }
   }
 
   public render() {
-    const {templateValues, templateValuesString} = this.state
-    const pluralizer = templateValues.length === 1 ? '' : 's'
+    const {onChooseValue, template} = this.props
+    const {templateValuesString} = this.state
+    const pluralizer = template.values.length === 1 ? '' : 's'
 
     return (
       <div className="temp-builder csv-temp-builder">
@@ -42,14 +41,14 @@ class CSVTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
         </div>
         <div className="temp-builder-results">
           <p>
-            CSV contains <strong>{templateValues.length}</strong> value{
+            CSV contains <strong>{template.values.length}</strong> value{
               pluralizer
             }
           </p>
-          {templateValues.length > 0 && (
+          {template.values.length > 0 && (
             <TemplatePreviewList
-              items={templateValues}
-              onChoose={this.handleChooseCSVValue}
+              items={template.values}
+              onChoose={onChooseValue}
             />
           )}
         </div>
@@ -73,8 +72,6 @@ class CSVTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
       templateValues = templateValuesString.split(',').map(s => s.trim())
     }
 
-    this.setState({templateValues})
-
     const nextValues = templateValues.map(value => {
       return {
         type: TemplateValueType.CSV,
@@ -89,21 +86,6 @@ class CSVTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
 
     onUpdateTemplate({...template, values: nextValues})
   }
-
-  private handleChooseCSVValue = (csvValue: string) => {
-    const {template, onUpdateTemplate} = this.props
-    const {templateValues} = this.state
-
-    const nextValues = templateValues.map(value => {
-      return {
-        type: TemplateValueType.CSV,
-        value,
-        selected: value === csvValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
 }
 
 export default CSVTemplateBuilder

ui/src/tempVars/components/DatabasesTemplateBuilder.tsx

@@ -12,7 +12,6 @@ import {
 } from 'src/types'
 
 interface State {
-  databases: string[]
   databasesStatus: RemoteDataState
 }
 
@@ -25,7 +24,6 @@ class DatabasesTemplateBuilder extends PureComponent<
     super(props)
 
     this.state = {
-      databases: [],
       databasesStatus: RemoteDataState.Loading,
     }
   }
@@ -35,7 +33,8 @@ class DatabasesTemplateBuilder extends PureComponent<
   }
 
   public render() {
-    const {databases, databasesStatus} = this.state
+    const {template, onChooseValue} = this.props
+    const {databasesStatus} = this.state
 
     return (
       <div className="temp-builder databases-temp-builder">
@@ -46,9 +45,9 @@ class DatabasesTemplateBuilder extends PureComponent<
           </div>
         </div>
         <TemplateMetaQueryPreview
-          items={databases}
+          items={template.values}
           loadingStatus={databasesStatus}
-          onChoose={this.handleChooseDatabaseValue}
+          onChoose={onChooseValue}
         />
       </div>
     )
@@ -63,10 +62,7 @@ class DatabasesTemplateBuilder extends PureComponent<
       const {data} = await showDatabases(source.links.proxy)
       const {databases} = parseShowDatabases(data)
 
-      this.setState({
-        databases,
-        databasesStatus: RemoteDataState.Done,
-      })
+      this.setState({databasesStatus: RemoteDataState.Done})
 
       const nextValues = databases.map(db => {
         return {
@@ -90,21 +86,6 @@ class DatabasesTemplateBuilder extends PureComponent<
       this.setState({databasesStatus: RemoteDataState.Error})
     }
   }
-
-  private handleChooseDatabaseValue = (dbValue: string) => {
-    const {template, onUpdateTemplate} = this.props
-    const {databases} = this.state
-
-    const nextValues = databases.map(value => {
-      return {
-        type: TemplateValueType.Database,
-        value,
-        selected: value === dbValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
 }
 
 export default DatabasesTemplateBuilder

ui/src/tempVars/components/FieldKeysTemplateBuilder.tsx

@@ -21,7 +21,7 @@ const fetchKeys = async (source, db, measurement): Promise<string[]> => {
 
 class FieldKeysTemplateBuilder extends PureComponent<TemplateBuilderProps> {
   public render() {
-    const {template, source, onUpdateTemplate} = this.props
+    const {template, source, onUpdateTemplate, onChooseValue} = this.props
 
     return (
       <KeysTemplateBuilder
@@ -31,6 +31,7 @@ class FieldKeysTemplateBuilder extends PureComponent<TemplateBuilderProps> {
         template={template}
         source={source}
         onUpdateTemplate={onUpdateTemplate}
+        onChooseValue={onChooseValue}
       />
     )
   }

ui/src/tempVars/components/KeysTemplateBuilder.tsx

@@ -33,7 +33,6 @@ interface State {
   measurements: string[]
   measurementsStatus: RemoteDataState
   selectedMeasurement: string
-  keys: string[]
   keysStatus: RemoteDataState
 }
 
@@ -52,7 +51,6 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
       measurements: [],
       measurementsStatus: RemoteDataState.Loading,
       selectedMeasurement,
-      keys: [],
       keysStatus: RemoteDataState.Loading,
     }
   }
@@ -64,7 +62,7 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {queryPrefix} = this.props
+    const {queryPrefix, template, onChooseValue} = this.props
     const {
       databases,
       databasesStatus,
@@ -72,7 +70,6 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
       measurements,
       measurementsStatus,
       selectedMeasurement,
-      keys,
       keysStatus,
     } = this.state
 
@@ -102,9 +99,9 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
           </div>
         </div>
         <TemplateMetaQueryPreview
-          items={keys}
+          items={template.values}
           loadingStatus={keysStatus}
-          onChoose={this.handleChooseKeyValue}
+          onChoose={onChooseValue}
         />
       </div>
     )
@@ -182,10 +179,7 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
         selectedMeasurement
       )
 
-      this.setState({
-        keys,
-        keysStatus: RemoteDataState.Done,
-      })
+      this.setState({keysStatus: RemoteDataState.Done})
 
       const nextValues = keys.map(value => {
         return {
@@ -206,21 +200,6 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
     }
   }
 
-  private handleChooseKeyValue = (keyValue: string) => {
-    const {template, onUpdateTemplate, templateValueType} = this.props
-    const {keys} = this.state
-
-    const nextValues = keys.map(value => {
-      return {
-        type: templateValueType,
-        value,
-        selected: value === keyValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
-
   private handleChooseDatabaseDropdown = ({text}) => {
     this.handleChooseDatabase(text)
   }

ui/src/tempVars/components/MeasurementsTemplateBuilder.tsx

@@ -19,7 +19,6 @@ interface State {
   databases: string[]
   databasesStatus: RemoteDataState
   selectedDatabase: string
-  measurements: string[]
   measurementsStatus: RemoteDataState
 }
 
@@ -37,7 +36,6 @@ class MeasurementsTemplateBuilder extends PureComponent<
       databases: [],
       databasesStatus: RemoteDataState.Loading,
       selectedDatabase,
-      measurements: [],
       measurementsStatus: RemoteDataState.Loading,
     }
   }
@@ -48,11 +46,11 @@ class MeasurementsTemplateBuilder extends PureComponent<
   }
 
   public render() {
+    const {template, onChooseValue} = this.props
     const {
       databases,
       databasesStatus,
       selectedDatabase,
-      measurements,
       measurementsStatus,
     } = this.state
 
@@ -73,9 +71,9 @@ class MeasurementsTemplateBuilder extends PureComponent<
           </div>
         </div>
         <TemplateMetaQueryPreview
-          items={measurements}
+          items={template.values}
           loadingStatus={measurementsStatus}
-          onChoose={this.handleChooseMeasurementValue}
+          onChoose={onChooseValue}
         />
       </div>
     )
@@ -120,10 +118,7 @@ class MeasurementsTemplateBuilder extends PureComponent<
 
       const measurements = _.get(measurementSets, '0.measurements', [])
 
-      this.setState({
-        measurements,
-        measurementsStatus: RemoteDataState.Done,
-      })
+      this.setState({measurementsStatus: RemoteDataState.Done})
 
       const nextValues = measurements.map(value => {
         return {
@@ -144,21 +139,6 @@ class MeasurementsTemplateBuilder extends PureComponent<
     }
   }
 
-  private handleChooseMeasurementValue = (measurementValue: string) => {
-    const {template, onUpdateTemplate} = this.props
-    const {measurements} = this.state
-
-    const nextValues = measurements.map(value => {
-      return {
-        type: TemplateValueType.Measurement,
-        value,
-        selected: value === measurementValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
-
   private handleChooseDatabaseDropdown = ({text}) => {
     this.handleChooseDatabase(text)
   }

ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx

@@ -18,7 +18,6 @@ const DEBOUNCE_DELAY = 750
 interface State {
   metaQueryInput: string // bound to input
   metaQuery: string // debounced view of metaQueryInput
-  metaQueryResults: string[]
   metaQueryResultsStatus: RemoteDataState
 }
 
@@ -45,7 +44,6 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
     this.state = {
       metaQuery,
       metaQueryInput: metaQuery,
-      metaQueryResults: [],
       metaQueryResultsStatus: RemoteDataState.NotStarted,
     }
   }
@@ -76,7 +74,8 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
   }
 
   private renderResults() {
-    const {metaQueryResults, metaQueryResultsStatus} = this.state
+    const {template, onChooseValue} = this.props
+    const {metaQueryResultsStatus} = this.state
 
     if (this.showInvalidMetaQueryMessage) {
       return (
@@ -88,9 +87,9 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
 
     return (
       <TemplateMetaQueryPreview
-        items={metaQueryResults}
+        items={template.values}
         loadingStatus={metaQueryResultsStatus}
-        onChoose={this.handleChooseQueryValue}
+        onChoose={onChooseValue}
       />
     )
   }
@@ -132,10 +131,7 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
 
       const metaQueryResults = parseMetaQuery(metaQuery, data)
 
-      this.setState({
-        metaQueryResults,
-        metaQueryResultsStatus: RemoteDataState.Done,
-      })
+      this.setState({metaQueryResultsStatus: RemoteDataState.Done})
 
       const nextValues = metaQueryResults.map(result => {
         return {
@@ -160,26 +156,10 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
       onUpdateTemplate(nextTemplate)
     } catch {
       this.setState({
-        metaQueryResults: [],
         metaQueryResultsStatus: RemoteDataState.Error,
       })
     }
   }
-
-  private handleChooseQueryValue = (metaQueryResultValue: string) => {
-    const {template, onUpdateTemplate} = this.props
-    const {metaQueryResults} = this.state
-
-    const nextValues = metaQueryResults.map(value => {
-      return {
-        type: TemplateValueType.MetaQuery,
-        value,
-        selected: value === metaQueryResultValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
 }
 
 export default CustomMetaQueryTemplateBuilder

ui/src/tempVars/components/TagKeysTemplateBuilder.tsx

@@ -24,7 +24,7 @@ export const fetchTagKeys = async (
 
 class TagKeysTemplateBuilder extends PureComponent<TemplateBuilderProps> {
   public render() {
-    const {template, source, onUpdateTemplate} = this.props
+    const {template, source, onUpdateTemplate, onChooseValue} = this.props
 
     return (
       <KeysTemplateBuilder
@@ -34,6 +34,7 @@ class TagKeysTemplateBuilder extends PureComponent<TemplateBuilderProps> {
         template={template}
         source={source}
         onUpdateTemplate={onUpdateTemplate}
+        onChooseValue={onChooseValue}
       />
     )
   }

ui/src/tempVars/components/TagValuesTemplateBuilder.tsx

@@ -28,7 +28,6 @@ interface State {
   tagKeys: string[]
   tagKeysStatus: RemoteDataState
   selectedTagKey: string
-  tagValues: string[]
   tagValuesStatus: RemoteDataState
 }
 
@@ -51,7 +50,6 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
       tagKeys: [],
       tagKeysStatus: RemoteDataState.Loading,
       selectedTagKey,
-      tagValues: [],
       tagValuesStatus: RemoteDataState.Loading,
     }
   }
@@ -64,6 +62,7 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
   }
 
   public render() {
+    const {template, onChooseValue} = this.props
     const {
       databases,
       databasesStatus,
@@ -74,7 +73,6 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
       tagKeys,
       tagKeysStatus,
       selectedTagKey,
-      tagValues,
       tagValuesStatus,
     } = this.state
 
@@ -115,9 +113,9 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
           </div>
         </div>
         <TemplateMetaQueryPreview
-          items={tagValues}
+          items={template.values}
           loadingStatus={tagValuesStatus}
-          onChoose={this.handleChooseTagValue}
+          onChoose={onChooseValue}
         />
       </div>
     )
@@ -220,10 +218,7 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
       const {tags} = parseShowTagValues(data)
       const tagValues = _.get(Object.values(tags), 0, [])
 
-      this.setState({
-        tagValues,
-        tagValuesStatus: RemoteDataState.Done,
-      })
+      this.setState({tagValuesStatus: RemoteDataState.Done})
 
       const nextValues = tagValues.map(value => {
         return {
@@ -304,21 +299,6 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
       },
     })
   }
-
-  private handleChooseTagValue = (tagValue: string) => {
-    const {template, onUpdateTemplate} = this.props
-    const {databases} = this.state
-
-    const nextValues = databases.map(value => {
-      return {
-        type: TemplateValueType.TagValue,
-        value,
-        selected: value === tagValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
 }
 
 export default KeysTemplateBuilder

ui/src/tempVars/components/TemplateMetaQueryPreview.tsx

@@ -3,12 +3,12 @@ import React, {PureComponent} from 'react'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import TemplatePreviewList from 'src/tempVars/components/TemplatePreviewList'
 
-import {RemoteDataState} from 'src/types'
+import {RemoteDataState, TemplateValue} from 'src/types'
 
 interface Props {
-  items: string[]
+  items: TemplateValue[]
   loadingStatus: RemoteDataState
-  onChoose: (item: string) => void
+  onChoose: (item: TemplateValue) => void
 }
 
 @ErrorHandling

ui/src/tempVars/components/TemplatePreviewList.tsx

@@ -5,13 +5,15 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import TemplatePreviewListItem from 'src/tempVars/components/TemplatePreviewListItem'
 
+import {TemplateValue} from 'src/types'
+
 const LI_HEIGHT = 35
 const LI_MARGIN_BOTTOM = 3
 const RESULTS_TO_DISPLAY = 10
 
 interface Props {
-  items: string[]
-  onChoose: (item: string) => void
+  items: TemplateValue[]
+  onChoose: (item: TemplateValue) => void
 }
 
 @ErrorHandling

ui/src/tempVars/components/TemplatePreviewListItem.tsx

@@ -1,8 +1,10 @@
 import React, {PureComponent} from 'react'
 
+import {TemplateValue} from 'src/types'
+
 interface Props {
-  item: string
-  onClick: (item: string) => void
+  item: TemplateValue
+  onClick: (item: TemplateValue) => void
   style: {
     height: string
     marginBottom: string
@@ -15,7 +17,7 @@ class TemplatePreviewListItem extends PureComponent<Props> {
 
     return (
       <li onClick={this.handleClick} style={style}>
-        {item}
+        {item.value}
       </li>
     )
   }

ui/src/tempVars/components/TemplateVariableEditor.tsx

@@ -23,6 +23,7 @@ import MetaQueryTemplateBuilder from 'src/tempVars/components/MetaQueryTemplateB
 import {
   Template,
   TemplateType,
+  TemplateValue,
   TemplateBuilderProps,
   Source,
   RemoteDataState,
@@ -148,6 +149,7 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
             <TemplateBuilder
               template={nextTemplate}
               source={source}
+              onChooseValue={this.handleChooseTemplateValue}
               onUpdateTemplate={this.handleUpdateTemplate}
             />
           </div>
@@ -182,6 +184,17 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
     this.setState({nextTemplate})
   }
 
+  private handleChooseTemplateValue = (item: TemplateValue) => {
+    this.setState(({nextTemplate: template}) => {
+      const nextValues = template.values.map(t => ({
+        ...t,
+        selected: t.value === item.value,
+      }))
+
+      return {nextTemplate: {...template, values: nextValues}}
+    })
+  }
+
   private handleChooseType = ({type}) => {
     const {
       nextTemplate: {id, tempVar},

ui/src/types/tempVars.ts

@@ -61,4 +61,5 @@ export interface TemplateBuilderProps {
   template: Template
   source: Source
   onUpdateTemplate: (nextTemplate: Template) => void
+  onChooseValue: (item: TemplateValue) => void
 }