Disable Save Template button when data has been saved. Refactor remaining dashboard promises into async/await.

ui/src/dashboards/actions/index.js

@@ -143,16 +143,24 @@ export const getDashboardsAsync = () => async dispatch => {
   }
 }
 
-export const putDashboard = dashboard => dispatch => {
-  updateDashboardAJAX(dashboard).then(({data}) => {
+export const putDashboard = dashboard => async dispatch => {
+  try {
+    const {data} = await updateDashboardAJAX(dashboard)
     dispatch(updateDashboard(data))
-  })
+  } catch (error) {
+    console.error(error)
+    // dispatch(errorThrown(error))
+  }
 }
 
-export const updateDashboardCell = (dashboard, cell) => dispatch => {
-  return updateDashboardCellAJAX(cell).then(({data}) => {
+export const updateDashboardCell = (dashboard, cell) => async dispatch => {
+  try {
+    const {data} = await updateDashboardCellAJAX(cell)
     dispatch(syncDashboardCell(dashboard, data))
-  })
+  } catch (error) {
+    console.error(error)
+    // dispatch(errorThrown(error))
+  }
 }
 
 export const deleteDashboardAsync = dashboard => async dispatch => {

ui/src/dashboards/components/TemplateVariableManager.js

@@ -1,4 +1,5 @@
 import React, {Component, PropTypes} from 'react'
+import classNames from 'classnames'
 import OnClickOutside from 'react-onclickoutside'
 import TemplateVariableTable
   from 'src/dashboards/components/TemplateVariableTable'
@@ -12,6 +13,8 @@ const TemplateVariableManager = ({
   templates,
   onRunQuerySuccess,
   onRunQueryFailure,
+  onSaveTemplatesSuccess,
+  isEdited,
 }) => (
   <div className="template-variable-manager">
     <div className="template-variable-manager--header">
@@ -21,8 +24,10 @@ const TemplateVariableManager = ({
       <div className="page-header__right">
         <button className="btn btn-primary btn-sm">Add Variable</button>
         <button
-          className="btn btn-primary btn-sm"
-          onClick={onEditTemplateVariables(templates)}
+          className={classNames('btn btn-primary btn-sm', {
+            disabled: !isEdited,
+          })}
+          onClick={onEditTemplateVariables(templates, onSaveTemplatesSuccess)}
         >
           Save Template
         </button>
@@ -50,9 +55,11 @@ class TemplateVariableManagerWrapper extends Component {
 
     this.state = {
       rows: this.props.templates,
+      isEdited: false,
     }
 
     this.onRunQuerySuccess = ::this.onRunQuerySuccess
+    this.onSaveTemplatesSuccess = ::this.onSaveTemplatesSuccess
   }
 
   onRunQuerySuccess(template, queryConfig, parsedData, {tempVar, label}) {
@@ -110,15 +117,22 @@ class TemplateVariableManagerWrapper extends Component {
 
     const newRows = rows.map(r => (r.id === template.id ? templateVariable : r))
 
-    this.setState({rows: newRows})
+    this.setState({rows: newRows, isEdited: true})
+  }
+
+  onSaveTemplatesSuccess() {
+    this.setState({isEdited: false})
   }
 
   render() {
+    const {rows, isEdited} = this.state
     return (
       <TemplateVariableManager
         {...this.props}
         onRunQuerySuccess={this.onRunQuerySuccess}
-        templates={this.state.rows}
+        onSaveTemplatesSuccess={this.onSaveTemplatesSuccess}
+        templates={rows}
+        isEdited={isEdited}
       />
     )
   }
@@ -129,6 +143,8 @@ const {arrayOf, bool, func, shape, string} = PropTypes
 TemplateVariableManager.propTypes = {
   ...TemplateVariableManagerWrapper.propTypes,
   onRunQuerySuccess: func.isRequired,
+  onSaveTemplatesSuccess: func.isRequired,
+  isEdited: bool.isRequired,
 }
 
 TemplateVariableManagerWrapper.propTypes = {

ui/src/dashboards/containers/DashboardPage.js

@@ -177,15 +177,20 @@ class DashboardPage extends Component {
   }
 
   // TODO: make this work over array of template variables onSave in TVM
-  handleEditTemplateVariables(templates) {
-    return e => {
+  handleEditTemplateVariables(templates, onSaveTemplatesSuccess) {
+    return async e => {
       const {params: {dashboardID}, dashboards} = this.props
       const currentDashboard = dashboards.find(({id}) => id === +dashboardID)
 
-      this.props.dashboardActions.putDashboard({
-        ...currentDashboard,
-        templates,
-      })
+      try {
+        await this.props.dashboardActions.putDashboard({
+          ...currentDashboard,
+          templates,
+        })
+        onSaveTemplatesSuccess()
+      } catch (error) {
+        console.error(error)
+      }
     }
   }