From 24ebb27ebeb54e6ab69ab26b36872f6cca6a7d7b Mon Sep 17 00:00:00 2001
From: Konrad Lalik <konradlalik@gmail.com>
Date: Tue, 15 Jul 2025 13:18:28 +0200
Subject: [PATCH] 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.
---
 .../alerting/unified/components/MetaText.tsx  | 53 ++++++++++---------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/public/app/features/alerting/unified/components/MetaText.tsx b/public/app/features/alerting/unified/components/MetaText.tsx
index 7de90ce772f..54c06a96699 100644
--- a/public/app/features/alerting/unified/components/MetaText.tsx
+++ b/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({