Add CSVFile Builder type to tempvar builders

Co-authored-by Alirie Gray <alirie.gray@gmail.com>
Co-authored-by Deniz Kusefoglu <deniz@influxdata.com>

ui/src/tempVars/components/CSVFileTemplateBuilder.tsx

@@ -0,0 +1,93 @@
+import React, {PureComponent, ChangeEvent} from 'react'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import TemplatePreviewList from 'src/tempVars/components/TemplatePreviewList'
+
+import {TemplateBuilderProps, TemplateValueType} from 'src/types'
+
+interface State {
+  templateValues: string[]
+  templateValuesString: string
+}
+
+@ErrorHandling
+class CSVFileTemplateBuilder extends PureComponent<
+  TemplateBuilderProps,
+  State
+> {
+  public constructor(props) {
+    super(props)
+
+    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'
+
+    return (
+      <div className="temp-builder csv-temp-builder">
+        <div className="form-group">
+          <label>Comma Separated Values</label>
+          <div className="temp-builder--mq-controls">
+            <textarea
+              className="form-control"
+              value={templateValuesString}
+              onChange={this.handleChange}
+              onBlur={this.handleBlur}
+            />
+          </div>
+        </div>
+        <div className="temp-builder-results">
+          <p>
+            CSV contains <strong>{templateValues.length}</strong> value{
+              pluralizer
+            }
+          </p>
+          {templateValues.length > 0 && (
+            <TemplatePreviewList items={templateValues} />
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  private handleChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {
+    this.setState({templateValuesString: e.target.value})
+  }
+
+  private handleBlur = (): void => {
+    const {template, onUpdateTemplate} = this.props
+    const {templateValuesString} = this.state
+
+    let templateValues
+
+    if (templateValuesString.trim() === '') {
+      templateValues = []
+    } else {
+      templateValues = templateValuesString.split(',').map(s => s.trim())
+    }
+
+    this.setState({templateValues})
+
+    const nextValues = templateValues.map(value => {
+      return {
+        type: TemplateValueType.CSV,
+        value,
+        selected: false,
+      }
+    })
+
+    if (nextValues.length > 0) {
+      nextValues[0].selected = true
+    }
+
+    onUpdateTemplate({...template, values: nextValues})
+  }
+}
+
+export default CSVFileTemplateBuilder

ui/src/tempVars/components/TemplateVariableEditor.tsx

@@ -14,6 +14,7 @@ import {notify as notifyActionCreator} from 'src/shared/actions/notifications'
 
 import DatabasesTemplateBuilder from 'src/tempVars/components/DatabasesTemplateBuilder'
 import CSVManualTemplateBuilder from 'src/tempVars/components/CSVManualTemplateBuilder'
+import CSVFileTemplateBuilder from 'src/tempVars/components/CSVFileTemplateBuilder'
 import MeasurementsTemplateBuilder from 'src/tempVars/components/MeasurementsTemplateBuilder'
 import FieldKeysTemplateBuilder from 'src/tempVars/components/FieldKeysTemplateBuilder'
 import TagKeysTemplateBuilder from 'src/tempVars/components/TagKeysTemplateBuilder'
@@ -57,6 +58,7 @@ interface State {
 const TEMPLATE_BUILDERS = {
   [BuilderType.Databases]: DatabasesTemplateBuilder,
   [BuilderType.CSVManual]: CSVManualTemplateBuilder,
+  [BuilderType.CSVFile]: CSVFileTemplateBuilder,
   [BuilderType.Measurements]: MeasurementsTemplateBuilder,
   [BuilderType.FieldKeys]: FieldKeysTemplateBuilder,
   [BuilderType.TagKeys]: TagKeysTemplateBuilder,
@@ -278,11 +280,11 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
 
   private get dropdownSelection(): string {
     const {
-      nextTemplate: {type},
+      nextTemplate: {builderType},
     } = this.state
 
     return getDeep(
-      TEMPLATE_TYPES_LIST.filter(t => t.type === type),
+      TEMPLATE_TYPES_LIST.filter(t => t.builderType === builderType),
       '0.text',
       ''
     )

ui/src/tempVars/constants/index.ts

@@ -121,6 +121,17 @@ export const DEFAULT_TEMPLATES: DefaultTemplates = {
       query: {},
     }
   },
+  [BuilderType.CSVFile]: () => {
+    return {
+      id: uuid.v4(),
+      tempVar: '',
+      values: [],
+      builderType: BuilderType.CSVFile,
+      type: TemplateType.CSV,
+      label: '',
+      query: {},
+    }
+  },
   [BuilderType.TagKeys]: () => {
     return {
       id: uuid.v4(),