From d49243bc557d2d12d2d998755616d69508eab5b5 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 2 May 2022 15:38:41 -0400
Subject: [PATCH] Variables: allow Regex tooltip links to be clickable (#48560)
 (#48597)

Fixes #48558

I had to rebase in some additional changes from #47907 (specifically 87de4d7)

Co-authored-by: Adam Simpson <adam@adamsimpson.net>
---
 .../grafana-ui/src/components/Forms/InlineField.tsx   | 11 ++++++++++-
 .../grafana-ui/src/components/Forms/InlineLabel.tsx   |  5 ++++-
 .../features/variables/editor/VariableTextField.tsx   |  4 +++-
 .../features/variables/query/QueryVariableEditor.tsx  |  1 +
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/InlineField.tsx b/packages/grafana-ui/src/components/Forms/InlineField.tsx
index c7806e649e7..a46ec3d642f 100644
--- a/packages/grafana-ui/src/components/Forms/InlineField.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineField.tsx
@@ -23,6 +23,8 @@ export interface Props extends Omit<FieldProps, 'css' | 'horizontal' | 'descript
   /** Error message to display */
   error?: string | null;
   htmlFor?: string;
+  /** Make tooltip interactive */
+  interactive?: boolean;
 }
 
 export const InlineField: FC<Props> = ({
@@ -38,6 +40,7 @@ export const InlineField: FC<Props> = ({
   grow,
   error,
   transparent,
+  interactive,
   ...htmlProps
 }) => {
   const theme = useTheme2();
@@ -46,7 +49,13 @@ export const InlineField: FC<Props> = ({
 
   const labelElement =
     typeof label === 'string' ? (
-      <InlineLabel width={labelWidth} tooltip={tooltip} htmlFor={inputId} transparent={transparent}>
+      <InlineLabel
+        interactive={interactive}
+        width={labelWidth}
+        tooltip={tooltip}
+        htmlFor={inputId}
+        transparent={transparent}
+      >
         {label}
       </InlineLabel>
     ) : (
diff --git a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
index 03f1045c109..32e21247969 100644
--- a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
@@ -23,6 +23,8 @@ export interface Props extends Omit<LabelProps, 'css' | 'description' | 'categor
   /** @deprecated */
   /** This prop is deprecated and is not used anymore */
   isInvalid?: boolean;
+  /** Make tooltip interactive */
+  interactive?: boolean;
   /** @beta */
   /** Controls which element the InlineLabel should be rendered into */
   as?: React.ElementType;
@@ -34,6 +36,7 @@ export const InlineLabel: FunctionComponent<Props> = ({
   tooltip,
   width,
   transparent,
+  interactive,
   as: Component = 'label',
   ...rest
 }) => {
@@ -43,7 +46,7 @@ export const InlineLabel: FunctionComponent<Props> = ({
     <Component className={cx(styles.label, className)} {...rest}>
       {children}
       {tooltip && (
-        <Tooltip placement="top" content={tooltip} theme="info">
+        <Tooltip interactive={interactive} placement="top" content={tooltip} theme="info">
           <Icon tabIndex={0} name="info-circle" size="sm" className={styles.icon} />
         </Tooltip>
       )}
diff --git a/public/app/features/variables/editor/VariableTextField.tsx b/public/app/features/variables/editor/VariableTextField.tsx
index 5d8b5c4ed61..05b3a4a92a2 100644
--- a/public/app/features/variables/editor/VariableTextField.tsx
+++ b/public/app/features/variables/editor/VariableTextField.tsx
@@ -14,6 +14,7 @@ interface VariableTextFieldProps {
   labelWidth?: number;
   grow?: boolean;
   onBlur?: (event: FormEvent<HTMLInputElement>) => void;
+  interactive?: boolean;
 }
 
 export function VariableTextField({
@@ -28,9 +29,10 @@ export function VariableTextField({
   onBlur,
   tooltip,
   grow,
+  interactive,
 }: PropsWithChildren<VariableTextFieldProps>): ReactElement {
   return (
-    <InlineField label={name} labelWidth={labelWidth ?? 12} tooltip={tooltip} grow={grow}>
+    <InlineField interactive={interactive} label={name} labelWidth={labelWidth ?? 12} tooltip={tooltip} grow={grow}>
       <Input
         type="text"
         id={name}
diff --git a/public/app/features/variables/query/QueryVariableEditor.tsx b/public/app/features/variables/query/QueryVariableEditor.tsx
index d407e965d9c..7abefbc711a 100644
--- a/public/app/features/variables/query/QueryVariableEditor.tsx
+++ b/public/app/features/variables/query/QueryVariableEditor.tsx
@@ -201,6 +201,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
               onChange={this.onRegExChange}
               onBlur={this.onRegExBlur}
               labelWidth={20}
+              interactive={true}
               tooltip={
                 <div>
                   Optional, if you want to extract part of a series name or metric node segment. Named capture groups