Make CSV values editable

ui/src/dashboards/components/TemplateVariableRow.js

@@ -16,6 +16,31 @@ import {TEMPLATE_TYPES} from 'src/dashboards/constants'
 import q
   from 'src/dashboards/utils/onlyTheBigliestBigLeagueTemplateVariableQueryGenerator'
 
+const RowValues = ({
+  selectedType,
+  values = [],
+  isEditing,
+  onStartEdit,
+  autoFocusTarget,
+}) => {
+  const _values = values.map(({value}) => value).join(', ')
+
+  if (selectedType === 'csv') {
+    return (
+      <TableInput
+        name="values"
+        defaultValue={_values}
+        isEditing={isEditing}
+        onStartEdit={onStartEdit}
+        autoFocusTarget={autoFocusTarget}
+      />
+    )
+  }
+  return values.length
+    ? <span>{_values}</span>
+    : <span>(No values to display)</span>
+}
+
 const TemplateVariableRow = ({
   template: {id, label, tempVar, values},
   isEditing,
@@ -78,9 +103,13 @@ const TemplateVariableRow = ({
       />
     </div>
     <div className="td">
-      {values.length
+      <RowValues
-        ? values.map(({value}) => value).join(', ')
+        selectedType={selectedType}
-        : '(No values to display)'}
+        values={values}
+        isEditing={isEditing}
+        onStartEdit={onStartEdit}
+        autoFocusTarget={autoFocusTarget}
+      />
     </div>
     <div className="td" style={{display: 'flex'}}>
       {isEditing
@@ -350,4 +379,12 @@ TableInput.propTypes = {
   autoFocusTarget: string,
 }
 
+RowValues.propTypes = {
+  selectedType: string.isRequired,
+  values: arrayOf(shape()),
+  isEditing: bool.isRequired,
+  onStartEdit: func.isRequired,
+  autoFocusTarget: string,
+}
+
 export default OnClickOutside(RowWrapper)