Add confirm dialog for unsaved changes (temporary)

ui/src/dashboards/components/TemplateVariableManager.js

@@ -1,6 +1,5 @@
 import React, {Component, PropTypes} from 'react'
 import classNames from 'classnames'
-import OnClickOutside from 'react-onclickoutside'
 import TemplateVariableTable
   from 'src/dashboards/components/TemplateVariableTable'
 
@@ -33,7 +32,7 @@ const TemplateVariableManager = ({
         </button>
         <span
           className="icon remove"
-          onClick={onClose}
+          onClick={() => onClose(isEdited)}
           style={{cursor: 'pointer'}}
         />
       </div>
@@ -176,4 +175,4 @@ TemplateVariableManagerWrapper.propTypes = {
   onRunQueryFailure: func.isRequired,
 }
 
-export default OnClickOutside(TemplateVariableManagerWrapper)
+export default TemplateVariableManagerWrapper

ui/src/dashboards/containers/DashboardPage.js

@@ -63,8 +63,13 @@ class DashboardPage extends Component {
     this.setState({isTemplating: true})
   }
 
-  handleCloseTemplateManager() {
-    this.setState({isTemplating: false})
+  handleCloseTemplateManager(isEdited) {
+    if (
+      !isEdited ||
+      (isEdited && confirm('Do you want to close without saving?')) // eslint-disable-line no-alert
+    ) {
+      this.setState({isTemplating: false})
+    }
   }
 
   handleDismissOverlay() {
@@ -231,7 +236,6 @@ class DashboardPage extends Component {
               <TemplateVariableManager
                 onClose={this.handleCloseTemplateManager}
                 onEditTemplateVariables={this.handleEditTemplateVariables}
-                handleClickOutside={this.handleCloseTemplateManager}
                 source={source}
                 templates={dashboard.templates}
                 onRunQueryFailure={this.handleRunQueryFailure}