From 214c1078aac807e5045d1c6c7f873010e56ed69c Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Wed, 12 Aug 2020 09:40:06 +0200
Subject: [PATCH] Graphite: Show and hide query editor function popup on click 
 (#26923)

* Update UX, only click on function can open and close popover

* Add ClickOutsideWrapper
---
 .../datasource/graphite/FunctionEditor.tsx    | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/public/app/plugins/datasource/graphite/FunctionEditor.tsx b/public/app/plugins/datasource/graphite/FunctionEditor.tsx
index b4450a58fa8..1c07341f0d4 100644
--- a/public/app/plugins/datasource/graphite/FunctionEditor.tsx
+++ b/public/app/plugins/datasource/graphite/FunctionEditor.tsx
@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import { PopoverController, Popover } from '@grafana/ui';
+import { PopoverController, Popover, ClickOutsideWrapper } from '@grafana/ui';
 import { FunctionDescriptor, FunctionEditorControls, FunctionEditorControlsProps } from './FunctionEditorControls';
 
 interface FunctionEditorProps extends FunctionEditorControlsProps {
@@ -73,7 +73,7 @@ class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEd
 
   render() {
     return (
-      <PopoverController content={this.renderContent} placement="top" hideAfter={300}>
+      <PopoverController content={this.renderContent} placement="top" hideAfter={100}>
         {(showPopper, hidePopper, popperProps) => {
           return (
             <>
@@ -85,26 +85,30 @@ class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEd
                   className="popper__background"
                   onMouseLeave={() => {
                     this.setState({ showingDescription: false });
-                    hidePopper();
                   }}
-                  onMouseEnter={showPopper}
                   renderArrow={({ arrowProps, placement }) => (
                     <div className="popper__arrow" data-placement={placement} {...arrowProps} />
                   )}
                 />
               )}
-
-              <span
-                ref={this.triggerRef}
-                onClick={popperProps.show ? hidePopper : showPopper}
-                onMouseLeave={() => {
-                  hidePopper();
-                  this.setState({ showingDescription: false });
+              <ClickOutsideWrapper
+                onClick={() => {
+                  if (popperProps.show) {
+                    hidePopper();
+                  }
                 }}
-                style={{ cursor: 'pointer' }}
               >
-                {this.props.func.def.name}
-              </span>
+                <span
+                  ref={this.triggerRef}
+                  onClick={popperProps.show ? hidePopper : showPopper}
+                  onMouseLeave={() => {
+                    this.setState({ showingDescription: false });
+                  }}
+                  style={{ cursor: 'pointer' }}
+                >
+                  {this.props.func.def.name}
+                </span>
+              </ClickOutsideWrapper>
             </>
           );
         }}