Alerting: Add forwardRef to MetaText component (#108107)

feat(alerting): Add forwardRef to MetaText component

This change introduces forwardRef to the MetaText component, allowing parent components to gain direct access to the underlying div element. This is particularly useful for scenarios where the parent needs to measure the component's dimensions, manage focus, or integrate with other libraries that require a DOM element reference.

public/app/features/alerting/unified/components/MetaText.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { ComponentProps, HTMLAttributes } from 'react';
+import { ComponentProps, HTMLAttributes, forwardRef } from 'react';
 
 import { Icon, IconName, Stack, Text, useStyles2 } from '@grafana/ui';
 
@@ -9,31 +9,36 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   color?: ComponentProps<typeof Text>['color'];
 }
 
-const MetaText = ({ children, icon, color = 'secondary', direction = 'row', ...rest }: Props) => {
-  const styles = useStyles2(getStyles);
-  const interactive = typeof rest.onClick === 'function';
+const MetaText = forwardRef<HTMLDivElement, Props>(
+  ({ children, icon, color = 'secondary', direction = 'row', ...rest }, ref) => {
+    const styles = useStyles2(getStyles);
+    const interactive = typeof rest.onClick === 'function';
 
-  const rowDirection = direction === 'row';
-  const alignItems = rowDirection ? 'center' : 'flex-start';
-  const gap = rowDirection ? 0.5 : 0;
+    const rowDirection = direction === 'row';
+    const alignItems = rowDirection ? 'center' : 'flex-start';
+    const gap = rowDirection ? 0.5 : 0;
 
-  return (
-    <div
-      className={cx({
-        [styles.interactive]: interactive,
-      })}
-      // allow passing ARIA and data- attributes
-      {...rest}
-    >
-      <Text variant="bodySmall" color={color}>
-        <Stack direction={direction} alignItems={alignItems} gap={gap} wrap={'wrap'}>
-          {icon && <Icon size="xs" name={icon} />}
-          {children}
-        </Stack>
-      </Text>
-    </div>
-  );
-};
+    return (
+      <div
+        ref={ref}
+        className={cx({
+          [styles.interactive]: interactive,
+        })}
+        // allow passing ARIA and data- attributes
+        {...rest}
+      >
+        <Text variant="bodySmall" color={color}>
+          <Stack direction={direction} alignItems={alignItems} gap={gap} wrap={'wrap'}>
+            {icon && <Icon size="xs" name={icon} />}
+            {children}
+          </Stack>
+        </Text>
+      </div>
+    );
+  }
+);
+
+MetaText.displayName = 'MetaText';
 
 const getStyles = () => ({
   interactive: css({