From e093cb04db851eb49acf44e3a112c991bdeba21c Mon Sep 17 00:00:00 2001
From: laurenashleigh <lauren.armstrong@grafana.com>
Date: Mon, 27 Oct 2025 17:17:16 +0000
Subject: [PATCH] Use radio button for contact point - notification policy
 toggle

---
 .../components/RuleNotificationSection.tsx    | 94 +++++++++++--------
 .../rule-editor/EvaluationGroupFieldRow.tsx   |  2 +-
 public/locales/en-US/grafana.json             |  5 +-
 3 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/public/app/features/alerting/unified/components/RuleNotificationSection.tsx b/public/app/features/alerting/unified/components/RuleNotificationSection.tsx
index c0ea5991c6c..4ba8261f006 100644
--- a/public/app/features/alerting/unified/components/RuleNotificationSection.tsx
+++ b/public/app/features/alerting/unified/components/RuleNotificationSection.tsx
@@ -12,8 +12,8 @@ import {
   Field,
   Input,
   Label,
+  RadioButtonGroup,
   Stack,
-  Switch,
   Text,
   TextArea,
   TextLink,
@@ -61,46 +61,57 @@ export function RuleNotificationSection() {
       <div className={styles.contentIndented}>
         <Stack direction="column" gap={2}>
           <Stack direction="column" gap={1}>
-            <Stack direction="row" alignItems="flex-start" justifyContent="space-between" gap={1}>
-              <Label
-                htmlFor={recipientLabelId}
-                description={
-                  useNotificationPolicy ? (
-                    <Text variant="bodySmall" color="secondary">
-                      <Trans i18nKey="alerting.simplified.notification.policy-selected">
-                        Notifications for firing alerts are routed to contact points based on matching labels and the
-                        notification policy tree.
-                      </Trans>
-                    </Text>
-                  ) : (
-                    <Text variant="bodySmall" color="secondary">
-                      <Trans i18nKey="alerting.simplified.notification.contact-point-selected">
-                        Notifications for firing alerts are routed to a selected contact point.
-                      </Trans>
-                    </Text>
-                  )
-                }
-              >
-                <span id={recipientLabelId}>{t('alerting.simplified.notification.recipient.label', 'Recipient')}</span>
-              </Label>
-              <div className={styles.manualRoutingInline}>
-                <Text variant="bodySmall" color="secondary">
-                  {t('alerting.simplified.notification.manual-routing.label', 'Manual routing')}
-                </Text>
-                <Switch
-                  value={manualRouting}
-                  onChange={(e) => {
-                    const next = e.currentTarget.checked;
-                    setValue('manualRouting', next, { shouldDirty: true, shouldValidate: true });
-                    setValue('editorSettings.simplifiedNotificationEditor', next, {
-                      shouldDirty: true,
-                      shouldValidate: true,
-                    });
-                  }}
-                  aria-labelledby={recipientLabelId}
-                  aria-label={t('alerting.simplified.notification.manual-routing.aria', 'Toggle manual routing')}
-                />
-              </div>
+            <Stack direction="column" gap={1}>
+              <Stack direction="row" alignItems="end" justifyContent="space-between" gap={1}>
+                <Label htmlFor={recipientLabelId}>
+                  <span id={recipientLabelId}>
+                    {t('alerting.simplified.notification.recipient.label', 'Recipient')}
+                  </span>
+                </Label>
+                <div className={styles.manualRoutingInline}>
+                  <RadioButtonGroup
+                    size="sm"
+                    options={[
+                      {
+                        label: t(
+                          'alerting.manual-and-automatic-routing.routing-options.label.contact-point',
+                          'Contact point'
+                        ),
+                        value: 'contact',
+                      },
+                      {
+                        label: t(
+                          'alerting.manual-and-automatic-routing.routing-options.label.notification-policy',
+                          'Notification policy'
+                        ),
+                        value: 'policy',
+                      },
+                    ]}
+                    value={manualRouting ? 'contact' : 'policy'}
+                    onChange={(val: 'contact' | 'policy') => {
+                      const next = val === 'contact';
+                      setValue('manualRouting', next, { shouldDirty: true, shouldValidate: true });
+                      setValue('editorSettings.simplifiedNotificationEditor', next, {
+                        shouldDirty: true,
+                        shouldValidate: true,
+                      });
+                    }}
+                    aria-label={t('alerting.simplified.notification.manual-routing.aria', 'Toggle manual routing')}
+                  />
+                </div>
+              </Stack>
+              <Text variant="bodySmall" color="secondary">
+                {useNotificationPolicy ? (
+                  <Trans i18nKey="alerting.simplified.notification.policy-selected">
+                    Notifications for firing alerts are routed to contact points based on matching labels and the
+                    notification policy tree.
+                  </Trans>
+                ) : (
+                  <Trans i18nKey="alerting.simplified.notification.contact-point-selected">
+                    Notifications for firing alerts are routed to a selected contact point.
+                  </Trans>
+                )}
+              </Text>
             </Stack>
             {useNotificationPolicy ? (
               <div className={styles.contentTopSpacer}>
@@ -226,6 +237,7 @@ function getStyles(theme: GrafanaTheme2) {
       alignItems: 'center',
       gap: theme.spacing(0.5),
       whiteSpace: 'nowrap',
+      maxWidth: '100%',
     }),
   };
 }
diff --git a/public/app/features/alerting/unified/components/rule-editor/EvaluationGroupFieldRow.tsx b/public/app/features/alerting/unified/components/rule-editor/EvaluationGroupFieldRow.tsx
index 205bd682e0a..8a22fa32376 100644
--- a/public/app/features/alerting/unified/components/rule-editor/EvaluationGroupFieldRow.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/EvaluationGroupFieldRow.tsx
@@ -71,7 +71,7 @@ export function EvaluationGroupFieldRow({ enableProvisionedGroups }: { enablePro
     : t('alerting.rule-form.evaluation.evaluation-group-and-interval', 'Evaluation group and interval');
 
   return (
-    <Stack alignItems="center">
+    <Stack alignItems="end">
       <div className={styles.formContainer}>
         <Field
           noMargin
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 38030465c6d..dfc00dcc236 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -1812,6 +1812,8 @@
     "manual-and-automatic-routing": {
       "routing-options": {
         "label": {
+          "contact-point": "Contact point",
+          "notification-policy": "Notification policy",
           "select-contact-point": "Select contact point",
           "use-notification-policy": "Use notification policy"
         }
@@ -2830,8 +2832,7 @@
           "placeholder": "Enter a description of what the alert rule does…"
         },
         "manual-routing": {
-          "aria": "Toggle manual routing",
-          "label": "Manual routing"
+          "aria": "Toggle manual routing"
         },
         "policy-selected": "Notifications for firing alerts are routed to contact points based on matching labels and the notification policy tree.",
         "recipient": {