Add interactive mode to the Badge component

packages/grafana-ui/src/components/Badge/Badge.tsx

@@ -18,25 +18,28 @@ export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
   color: BadgeColor;
   icon?: IconName;
   tooltip?: string;
+  interactive?: boolean;
 }
 
-const BadgeComponent = React.memo<BadgeProps>(({ icon, color, text, tooltip, className, ...otherProps }) => {
-  const styles = useStyles2(getStyles, color);
-  const badge = (
-    <div className={cx(styles.wrapper, className)} {...otherProps}>
-      {icon && <Icon name={icon} size="sm" />}
-      {text}
-    </div>
-  );
+const BadgeComponent = React.memo<BadgeProps>(
+  ({ icon, color, text, tooltip, interactive, className, ...otherProps }) => {
+    const styles = useStyles2(getStyles, color);
+    const badge = (
+      <div className={cx(styles.wrapper, className)} {...otherProps}>
+        {icon && <Icon name={icon} size="sm" />}
+        {text}
+      </div>
+    );
 
-  return tooltip ? (
-    <Tooltip content={tooltip} placement="auto">
-      {badge}
-    </Tooltip>
-  ) : (
-    badge
-  );
-});
+    return tooltip ? (
+      <Tooltip content={tooltip} placement="auto" interactive={interactive}>
+        {badge}
+      </Tooltip>
+    ) : (
+      badge
+    );
+  }
+);
 BadgeComponent.displayName = 'Badge';
 
 const BadgeSkeleton: SkeletonComponent = ({ rootProps }) => {

public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx

@@ -17,16 +17,27 @@ export const ExpressionStatusIndicator = ({ error, warning, isCondition, onSetCo
   const elements: JSX.Element[] = [];
 
   if (error && isCondition) {
-    return <Badge color="red" icon="exclamation-circle" text="Alert condition" tooltip={error.message} />;
+    return <Badge color="red" icon="exclamation-circle" text="Alert condition" tooltip={error.message} interactive />;
   } else if (error) {
-    elements.push(<Badge key="error" color="red" icon="exclamation-circle" text="Error" tooltip={error.message} />);
+    elements.push(
+      <Badge key="error" color="red" icon="exclamation-circle" text="Error" tooltip={error.message} interactive />
+    );
   }
 
   if (warning && isCondition) {
-    return <Badge color="orange" icon="exclamation-triangle" text="Alert condition" tooltip={warning.message} />;
+    return (
+      <Badge color="orange" icon="exclamation-triangle" text="Alert condition" tooltip={warning.message} interactive />
+    );
   } else if (warning) {
     elements.push(
-      <Badge key="warning" color="orange" icon="exclamation-triangle" text="Warning" tooltip={warning.message} />
+      <Badge
+        key="warning"
+        color="orange"
+        icon="exclamation-triangle"
+        text="Warning"
+        tooltip={warning.message}
+        interactive
+      />
     );
   }