CloudWatch: add generic filter component to variable editor (#47907)

* CloudWatch: add generic filter component to variable editor

* remove multi-text-select object

* remove hidden

* andres comments

* migration between 8.5 and this

* add waitFors to tests

* more await tweaks

* actually fix tests

* use popoverContent tooltip

* fix template variable handling

* prettier fix

* fix prettier 2

* feat: make tooltip links in query variable editor clickable

* fix template stuff

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