From f6ea39ff002db7fa05d16a6e0476895fb74f4bd4 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Wed, 14 Feb 2024 12:12:05 +0100
Subject: [PATCH] Alerting: Prevent state badge from wrapping (#82330)

---
 .../components/rule-viewer/v2/StateBadges.tsx | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-viewer/v2/StateBadges.tsx b/public/app/features/alerting/unified/components/rule-viewer/v2/StateBadges.tsx
index 94ac7edb466..abda0ee41e8 100644
--- a/public/app/features/alerting/unified/components/rule-viewer/v2/StateBadges.tsx
+++ b/public/app/features/alerting/unified/components/rule-viewer/v2/StateBadges.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { Stack, Text } from '@grafana/ui';
 import { RuleHealth } from 'app/types/unified-alerting';
@@ -18,14 +18,7 @@ export const RecordingBadge = ({ health }: RecordingBadgeProps) => {
   const color = hasError ? 'error' : 'success';
   const text = hasError ? 'Recording error' : 'Recording';
 
-  return (
-    <Stack direction="row" gap={0.5}>
-      <AlertStateDot color={color} />
-      <Text variant="bodySmall" color={color}>
-        {text}
-      </Text>
-    </Stack>
-  );
+  return <Badge color={color} text={text} />;
 };
 
 // we're making a distinction here between the "state" of the rule and its "health".
@@ -36,7 +29,7 @@ interface StateBadgeProps {
 
 export const StateBadge = ({ state, health }: StateBadgeProps) => {
   let stateLabel: string;
-  let color: 'success' | 'error' | 'warning';
+  let color: BadgeColor;
 
   switch (state) {
     case PromAlertingRuleState.Inactive:
@@ -64,12 +57,24 @@ export const StateBadge = ({ state, health }: StateBadgeProps) => {
     stateLabel = 'No data';
   }
 
+  return <Badge color={color} text={stateLabel} />;
+};
+
+// the generic badge component
+type BadgeColor = 'success' | 'error' | 'warning';
+
+interface BadgeProps {
+  color: BadgeColor;
+  text: NonNullable<ReactNode>;
+}
+
+function Badge({ color, text }: BadgeProps) {
   return (
-    <Stack direction="row" gap={0.5}>
+    <Stack direction="row" gap={0.5} wrap={'nowrap'} flex={'0 0 auto'}>
       <AlertStateDot color={color} />
       <Text variant="bodySmall" color={color}>
-        {stateLabel}
+        {text}
       </Text>
     </Stack>
   );
-};
+}