Fix duplicate temp var detection bug where a new one would delete itself if not persisted onCancel

ui/src/dashboards/components/TemplateVariableManager.js

@@ -154,7 +154,11 @@ class TemplateVariableManagerWrapper extends Component {
   }
 
   onSaveTemplatesSuccess() {
-    this.setState({isEdited: false})
+    const {rows} = this.state
+
+    const newRows = rows.map(row => row.isNew === false)
+
+    this.setState({rows: newRows, isEdited: false})
   }
 
   onDeleteTemplateVariable(templateID) {
@@ -165,9 +169,11 @@ class TemplateVariableManagerWrapper extends Component {
     this.setState({rows: newRows, isEdited: true})
   }
 
-  tempVarAlreadyExists(possibleDupeTempVar) {
+  tempVarAlreadyExists(testTempVar, testID) {
     const {rows: tempVars} = this.state
-    return tempVars.some(({tempVar}) => tempVar === possibleDupeTempVar)
+    return tempVars.some(
+      ({tempVar, id}) => tempVar === testTempVar && id !== testID
+    )
   }
 
   render() {

ui/src/dashboards/components/TemplateVariableRow.js

@@ -196,11 +196,12 @@ const TableInput = ({
 class RowWrapper extends Component {
   constructor(props) {
     super(props)
-    const {template: {query, type, isNew}} = this.props
+    const {template: {type, query, isNew}} = this.props
 
     this.state = {
       isEditing: !!isNew,
-      isNew,
+      isNew: !!isNew,
+      hasBeenSavedToComponentStateOnce: !isNew,
       selectedType: type,
       selectedDatabase: query && query.db,
       selectedMeasurement: query && query.measurement,
@@ -230,6 +231,7 @@ class RowWrapper extends Component {
       const {
         source,
         template,
+        template: {id},
         onRunQuerySuccess,
         onRunQueryFailure,
         tempVarAlreadyExists,
@@ -239,14 +241,17 @@ class RowWrapper extends Component {
       const _tempVar = e.target.tempVar.value
       const tempVar = `\u003a${_tempVar}\u003a` // add ':'s
 
-      if (tempVarAlreadyExists(tempVar)) {
+      if (tempVarAlreadyExists(tempVar, id)) {
         return notify(
           'error',
           `Variable '${_tempVar}' already exists. Please enter a new value.`
         )
       }
 
-      this.setState({isEditing: false, isNew: false})
+      this.setState({
+        isEditing: false,
+        hasBeenSavedToComponentStateOnce: true,
+      })
 
       const {query, tempVars} = generateTemplateVariableQuery({
         type,
@@ -295,10 +300,12 @@ class RowWrapper extends Component {
 
   handleCancelEdit() {
     const {
-      template: {type, query: {db, measurement, tagKey}, isNew, id},
+      template: {type, query: {db, measurement, tagKey}, id},
       onDelete,
     } = this.props
-    if (isNew) {
+    const {hasBeenSavedToComponentStateOnce} = this.state
+
+    if (!hasBeenSavedToComponentStateOnce) {
       return onDelete(id)
     }
     this.setState({