From ff8203a6cfe95fa33619bee54832a204dff93f4b Mon Sep 17 00:00:00 2001
From: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Date: Thu, 28 Mar 2024 15:21:21 +0000
Subject: [PATCH] Forward ref to StateTag so it can work with Tooltip

---
 .../alerting/unified/components/StateTag.tsx       | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/public/app/features/alerting/unified/components/StateTag.tsx b/public/app/features/alerting/unified/components/StateTag.tsx
index c068403e7c6..f51d58772b2 100644
--- a/public/app/features/alerting/unified/components/StateTag.tsx
+++ b/public/app/features/alerting/unified/components/StateTag.tsx
@@ -1,26 +1,28 @@
 import { css, cx } from '@emotion/css';
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
 export type State = 'good' | 'bad' | 'warning' | 'neutral' | 'info';
 
-type Props = {
+type Props = React.PropsWithChildren<{
   state: State;
   size?: 'md' | 'sm';
   muted?: boolean;
-};
+}>;
 
-export const StateTag = ({ children, state, size = 'md', muted = false }: React.PropsWithChildren<Props>) => {
+export const StateTag = forwardRef<HTMLElement, Props>(({ children, state, size = 'md', muted = false }, ref) => {
   const styles = useStyles2(getStyles);
 
   return (
-    <span className={cx(styles.common, styles[state], styles[size], { [styles.muted]: muted })}>
+    <span className={cx(styles.common, styles[state], styles[size], { [styles.muted]: muted })} ref={ref}>
       {children || state}
     </span>
   );
-};
+});
+
+StateTag.displayName = 'StateTag';
 
 const getStyles = (theme: GrafanaTheme2) => ({
   common: css`