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>

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>
     ) : (

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>
       )}

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}

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