From 7f9fa8c662e3ac0c9eff3f721996242ea508256f Mon Sep 17 00:00:00 2001
From: zenador <zenador@users.noreply.github.com>
Date: Wed, 19 Mar 2025 14:05:53 +0800
Subject: [PATCH] Grafana UI: Clearly separate multiple warnings by using HTML
 tags (#97979)

* Allow html in tooltips

* Display multiple warnings/infos properly with html

* Revert "Allow html in tooltips"

This reverts commit 5c7e965d2d554b693d4897e52cf6865e0c9b8374.

* Display multiple warnings/infos properly with html in ReactNode

* Fix lint

* Revise according to code review

* Revise according to code review part 2

* Revise according to code review part 3
---
 packages/grafana-ui/src/components/Badge/Badge.tsx         | 3 ++-
 public/app/features/plugins/components/PluginStateInfo.tsx | 3 ++-
 public/app/features/query/components/QueryEditorRow.tsx    | 5 +++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Badge/Badge.tsx b/packages/grafana-ui/src/components/Badge/Badge.tsx
index 59cd9074a2d..fbb2fecb085 100644
--- a/packages/grafana-ui/src/components/Badge/Badge.tsx
+++ b/packages/grafana-ui/src/components/Badge/Badge.tsx
@@ -10,6 +10,7 @@ import { useStyles2 } from '../../themes/ThemeContext';
 import { IconName } from '../../types';
 import { SkeletonComponent, attachSkeleton } from '../../utils/skeleton';
 import { Icon } from '../Icon/Icon';
+import { PopoverContent } from '../Tooltip';
 import { Tooltip } from '../Tooltip/Tooltip';
 
 export type BadgeColor = 'blue' | 'red' | 'green' | 'orange' | 'purple' | 'darkgrey';
@@ -18,7 +19,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
   text: React.ReactNode;
   color: BadgeColor;
   icon?: IconName;
-  tooltip?: string;
+  tooltip?: PopoverContent;
 }
 
 const BadgeComponent = React.memo<BadgeProps>(({ icon, color, text, tooltip, className, ...otherProps }) => {
diff --git a/public/app/features/plugins/components/PluginStateInfo.tsx b/public/app/features/plugins/components/PluginStateInfo.tsx
index bfeee14702d..5857f268ad8 100644
--- a/public/app/features/plugins/components/PluginStateInfo.tsx
+++ b/public/app/features/plugins/components/PluginStateInfo.tsx
@@ -17,7 +17,8 @@ export const PluginStateInfo = (props: Props) => {
     <Badge
       className={props.className}
       color={display.color}
-      title={display.tooltip}
+      title={typeof display.tooltip === 'string' ? display.tooltip : undefined}
+      tooltip={typeof display.tooltip !== 'string' ? display.tooltip : undefined}
       text={display.text}
       icon={display.icon}
     />
diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index aabd88e681f..73904500b4e 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -34,7 +34,7 @@ import {
   usePluginComponents,
 } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
-import { Badge, ErrorBoundaryAlert } from '@grafana/ui';
+import { Badge, ErrorBoundaryAlert, List } from '@grafana/ui';
 import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
 import {
   QueryOperationAction,
@@ -424,7 +424,8 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     const colour = type === 'warning' ? 'orange' : 'blue';
     const iconName = type === 'warning' ? 'exclamation-triangle' : 'file-landscape-alt';
 
-    const serializedWarnings = uniqueWarnings.map((warning) => warning.text).join('\n');
+    const listItems = uniqueWarnings.map((warning) => warning.text);
+    const serializedWarnings = <List items={listItems} renderItem={(item) => <>{item}</>} />;
 
     return (
       <Badge