From 08f8aa8718c7733c12aa535b71f6ee53a989a20d Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Mon, 30 Jul 2018 18:23:17 -0400
Subject: [PATCH 1/6] Fix unused handler method linting error

---
 ui/src/dashboards/components/InfluxQLEditor.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/ui/src/dashboards/components/InfluxQLEditor.tsx b/ui/src/dashboards/components/InfluxQLEditor.tsx
index 92181204f..134bdcdc3 100644
--- a/ui/src/dashboards/components/InfluxQLEditor.tsx
+++ b/ui/src/dashboards/components/InfluxQLEditor.tsx
@@ -325,10 +325,6 @@ class InfluxQLEditor extends Component<Props, State> {
     }
   }
 
-  private hideTemplateValues = (): void => {
-    this.setState({isShowingTemplateValues: false})
-  }
-
   private handleHideAndFocus = (): void => {
     this.setState({isShowingTemplateValues: false, focused: true})
   }

From 5f37b7d16ae65e7c96a0c1de61a1006d6225247b Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Mon, 30 Jul 2018 13:56:16 -0400
Subject: [PATCH 2/6] Fix save on editor blur

---
 .../dashboards/components/InfluxQLEditor.tsx  | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/src/dashboards/components/InfluxQLEditor.tsx b/ui/src/dashboards/components/InfluxQLEditor.tsx
index 134bdcdc3..39cb97e0f 100644
--- a/ui/src/dashboards/components/InfluxQLEditor.tsx
+++ b/ui/src/dashboards/components/InfluxQLEditor.tsx
@@ -117,7 +117,11 @@ class InfluxQLEditor extends Component<Props, State> {
     } = this.state
 
     return (
-      <div className="query-editor">
+      <div
+        className="query-editor"
+        onMouseDown={this.handleVarmojiFocus}
+        onBlur={this.handleBlurEditor}
+      >
         {this.dismissPreviewButton}
         <ReactCodeMirror
           ref={this.codeMirrorRef}
@@ -142,7 +146,6 @@ class InfluxQLEditor extends Component<Props, State> {
             focus: focused,
             'read-only': isShowingTemplateValues,
           })}
-          onClick={this.handleVarmojiFocus}
         >
           <div className="varmoji-container">
             <div className="varmoji-front">
@@ -175,7 +178,7 @@ class InfluxQLEditor extends Component<Props, State> {
     this.setState({focused: false})
 
     this.hideTemplateValues()
-    this.handleUpdate()
+    this.handleBlurEditor()
   }
 
   private handleTemplateSelection = (
@@ -193,6 +196,10 @@ class InfluxQLEditor extends Component<Props, State> {
     this.setState({focused: true})
   }
 
+  private handleBlurEditor = (): void => {
+    this.handleUpdate()
+  }
+
   private handleCloseDrawer = (): void => {
     this.setState({isTemplating: false})
   }
@@ -209,8 +216,11 @@ class InfluxQLEditor extends Component<Props, State> {
     this.closeDrawer()
   }
 
-  private handleVarmojiFocus = (): void => {
+  private handleVarmojiFocus = (e: MouseEvent): void => {
     this.setState({focused: true})
+
+    e.stopPropagation()
+    e.preventDefault()
   }
 
   private handleUpdateTemplatingQueryText = (value: string): void => {
@@ -362,6 +372,7 @@ class InfluxQLEditor extends Component<Props, State> {
         <button
           className="query-editor--dismiss"
           onClick={this.handleHideAndFocus}
+          onMouseDown={this.handleVarmojiFocus}
         />
       )
     }

From 71f02810929363cf0f6ebd1faefb89181fb069f3 Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Mon, 30 Jul 2018 17:39:07 -0400
Subject: [PATCH 3/6] Rename varimoji handler to handleMouseDown

---
 ui/src/dashboards/components/InfluxQLEditor.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui/src/dashboards/components/InfluxQLEditor.tsx b/ui/src/dashboards/components/InfluxQLEditor.tsx
index 39cb97e0f..d5bd8747b 100644
--- a/ui/src/dashboards/components/InfluxQLEditor.tsx
+++ b/ui/src/dashboards/components/InfluxQLEditor.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, {Component} from 'react'
+import React, {Component, MouseEvent} from 'react'
 import _ from 'lodash'
 import classnames from 'classnames'
 
@@ -119,7 +119,7 @@ class InfluxQLEditor extends Component<Props, State> {
     return (
       <div
         className="query-editor"
-        onMouseDown={this.handleVarmojiFocus}
+        onMouseDown={this.handleMouseDown}
         onBlur={this.handleBlurEditor}
       >
         {this.dismissPreviewButton}
@@ -216,7 +216,7 @@ class InfluxQLEditor extends Component<Props, State> {
     this.closeDrawer()
   }
 
-  private handleVarmojiFocus = (e: MouseEvent): void => {
+  private handleMouseDown = (e: MouseEvent): void => {
     this.setState({focused: true})
 
     e.stopPropagation()
@@ -372,7 +372,6 @@ class InfluxQLEditor extends Component<Props, State> {
         <button
           className="query-editor--dismiss"
           onClick={this.handleHideAndFocus}
-          onMouseDown={this.handleVarmojiFocus}
         />
       )
     }

From 1ad6372032a71ef8c437603454605e483d259034 Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Mon, 30 Jul 2018 17:41:54 -0400
Subject: [PATCH 4/6] Remove onClickOutside in favor of onBlur

---
 ui/src/dashboards/components/InfluxQLEditor.tsx | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/ui/src/dashboards/components/InfluxQLEditor.tsx b/ui/src/dashboards/components/InfluxQLEditor.tsx
index d5bd8747b..cb7cc41ef 100644
--- a/ui/src/dashboards/components/InfluxQLEditor.tsx
+++ b/ui/src/dashboards/components/InfluxQLEditor.tsx
@@ -8,7 +8,6 @@ import ReactCodeMirror from 'src/dashboards/components/ReactCodeMirror'
 import TemplateDrawer from 'src/shared/components/TemplateDrawer'
 import QueryStatus from 'src/shared/components/QueryStatus'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import OnClickOutside from 'src/shared/components/OnClickOutside'
 
 // Utils
 import {getDeep} from 'src/utils/wrappers'
@@ -41,7 +40,6 @@ interface Props {
   onUpdate: (text: string) => Promise<void>
   config: QueryConfig
   templates: Template[]
-  onClickOutside: () => void
 }
 
 const FIRST_TEMP_VAR = '0.tempVar'
@@ -174,13 +172,6 @@ class InfluxQLEditor extends Component<Props, State> {
     )
   }
 
-  public handleClickOutside = (): void => {
-    this.setState({focused: false})
-
-    this.hideTemplateValues()
-    this.handleBlurEditor()
-  }
-
   private handleTemplateSelection = (
     selectedTemplate: TempVar,
     templatingQueryText: string
@@ -410,4 +401,4 @@ class InfluxQLEditor extends Component<Props, State> {
   }
 }
 
-export default OnClickOutside(InfluxQLEditor)
+export default InfluxQLEditor

From e3b5bbe4e31f05dc43a034afded5811a2c0b0ae5 Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Mon, 30 Jul 2018 18:02:24 -0400
Subject: [PATCH 5/6] Update InfluxQLEditor to pass blur handler

---
 ui/src/dashboards/components/InfluxQLEditor.tsx  | 7 ++-----
 ui/src/dashboards/components/ReactCodeMirror.tsx | 4 +++-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/ui/src/dashboards/components/InfluxQLEditor.tsx b/ui/src/dashboards/components/InfluxQLEditor.tsx
index cb7cc41ef..b484ad987 100644
--- a/ui/src/dashboards/components/InfluxQLEditor.tsx
+++ b/ui/src/dashboards/components/InfluxQLEditor.tsx
@@ -115,11 +115,7 @@ class InfluxQLEditor extends Component<Props, State> {
     } = this.state
 
     return (
-      <div
-        className="query-editor"
-        onMouseDown={this.handleMouseDown}
-        onBlur={this.handleBlurEditor}
-      >
+      <div className="query-editor" onMouseDown={this.handleMouseDown}>
         {this.dismissPreviewButton}
         <ReactCodeMirror
           ref={this.codeMirrorRef}
@@ -133,6 +129,7 @@ class InfluxQLEditor extends Component<Props, State> {
           readOnly={isShowingTemplateValues}
           onChange={this.handleChange}
           onFocus={this.handleFocusEditor}
+          onBlur={this.handleBlurEditor}
           isShowingTemplateValues={isShowingTemplateValues}
           onKeyDown={this.handleKeyDownEditor}
           onBeforeChange={this.handleUpdateTemplatingQueryText}
diff --git a/ui/src/dashboards/components/ReactCodeMirror.tsx b/ui/src/dashboards/components/ReactCodeMirror.tsx
index 6800352c8..28a1f9ec6 100644
--- a/ui/src/dashboards/components/ReactCodeMirror.tsx
+++ b/ui/src/dashboards/components/ReactCodeMirror.tsx
@@ -36,6 +36,7 @@ interface Props {
   isTemplating: boolean
   isShowingTemplateValues: boolean
   onFocus: () => void
+  onBlur: () => void
   onChange: (value: string) => void
   onKeyDown: (e: KeyboardEvent) => void
   onBeforeChange: (value: string) => void
@@ -76,7 +77,7 @@ class ReactCodeMirror extends PureComponent<Props, State> {
   private editor?: CMEditor
 
   public render() {
-    const {value, onFocus} = this.props
+    const {value, onFocus, onBlur} = this.props
 
     return (
       <div className={this.queryCodeClassName}>
@@ -88,6 +89,7 @@ class ReactCodeMirror extends PureComponent<Props, State> {
           value={value}
           onChange={this.handleChange}
           onFocus={onFocus}
+          onBlur={onBlur}
           onKeyDown={this.handleKeyDownEditor}
           editorWillUnmount={this.handleUnmountEditor}
           editorDidMount={this.handleMountEditor}

From df064c081df492a2b39615c9643f34f2b692bc50 Mon Sep 17 00:00:00 2001
From: Delmer Reed <delmer814+1@gmail.com>
Date: Mon, 30 Jul 2018 18:33:58 -0400
Subject: [PATCH 6/6] Fix type error in QueryMaker

---
 ui/src/dashboards/components/QueryMaker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/dashboards/components/QueryMaker.tsx b/ui/src/dashboards/components/QueryMaker.tsx
index daea2620c..0aeaffe6e 100644
--- a/ui/src/dashboards/components/QueryMaker.tsx
+++ b/ui/src/dashboards/components/QueryMaker.tsx
@@ -15,7 +15,7 @@ import {CellEditorOverlayActions} from 'src/dashboards/components/CellEditorOver
 const rawTextBinder = (
   links: SourceLinks,
   id: string,
-  action: (linksQueries: string, id: string, text: string) => void
+  action: (linksQueries: string, id: string, text: string) => Promise<void>
 ) => (text: string) => action(links.queries, id, text)
 
 const buildText = (q: QueryConfig): string =>