Fix OverlayTechnology

ui/src/dashboards/containers/DashboardPage.js

@@ -40,6 +40,7 @@ import {interval, DASHBOARD_LAYOUT_ROW_HEIGHT} from 'shared/constants'
 import {notifyDashboardNotFound} from 'shared/copy/notifications'
 import {colorsStringSchema, colorsNumberSchema} from 'shared/schemas'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {OverlayContext} from 'src/shared/components/OverlayTechnology'
 
 const FORMAT_INFLUXQL = 'influxql'
 const defaultTimeRange = {
@@ -155,12 +156,19 @@ class DashboardPage extends Component {
     }
 
     handleShowOverlay(
-      <TemplateVariableManager
-        source={source}
-        templates={dashboard.templates}
-        onRunQueryFailure={this.handleRunQueryFailure}
-        onEditTemplateVariables={this.handleEditTemplateVariables}
-      />,
+      <OverlayContext.Consumer>
+        {({onDismissOverlay}) => {
+          return (
+            <TemplateVariableManager
+              source={source}
+              templates={dashboard.templates}
+              onDismissOverlay={onDismissOverlay}
+              onRunQueryFailure={this.handleRunQueryFailure}
+              onEditTemplateVariables={this.handleEditTemplateVariables}
+            />
+          )
+        }}
+      </OverlayContext.Consumer>,
       options
     )
   }

ui/src/shared/components/OverlayTechnology.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent, ReactElement} from 'react'
+import React, {PureComponent, ComponentClass} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -6,7 +6,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import {dismissOverlay} from 'src/shared/actions/overlayTechnology'
 
 interface Props {
-  OverlayNode?: ReactElement<any>
+  OverlayNode?: ComponentClass<any>
   dismissOnClickOutside?: boolean
   dismissOnEscape?: boolean
   transitionTime?: number
@@ -17,6 +17,8 @@ interface State {
   visible: boolean
 }
 
+export const OverlayContext = React.createContext()
+
 @ErrorHandling
 class Overlay extends PureComponent<Props, State> {
   public static defaultProps: Partial<Props> = {
@@ -45,15 +47,16 @@ class Overlay extends PureComponent<Props, State> {
     const {OverlayNode} = this.props
 
     return (
-      <div className={this.overlayClass}>
-        <div className="overlay--dialog">
-          {OverlayNode &&
-            React.cloneElement(OverlayNode, {
-              onDismissOverlay: this.handleAnimateDismiss,
-            })}
+      <OverlayContext.Provider
+        value={{
+          onDismissOverlay: this.handleAnimateDismiss,
+        }}
+      >
+        <div className={this.overlayClass}>
+          <div className="overlay--dialog">{OverlayNode}</div>
+          <div className="overlay--mask" onClick={this.handleClickOutside} />
         </div>
-        <div className="overlay--mask" onClick={this.handleClickOutside} />
-      </div>
+      </OverlayContext.Provider>
     )
   }