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

@@ -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 }) => {

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

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