From c2b15ca786da6bf7e5b3bc050f35d53ce53f8b74 Mon Sep 17 00:00:00 2001
From: Lauren <61048546+laurenashleigh@users.noreply.github.com>
Date: Fri, 14 Nov 2025 12:41:16 +0000
Subject: [PATCH] Alerting: Prevent routing preview from auto-triggering on
 mount (#113749)

* Alerting: Prevent routing preview from auto-triggering on mount

* resolve PR comments

* add info on hover of preview routing when disabled
---
 .../NotificationPreview.tsx                   | 24 +++++++++++++++----
 public/locales/en-US/grafana.json             |  1 +
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx
index c1396464c86..c767ebe63d3 100644
--- a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx
@@ -4,7 +4,7 @@ import { useEffectOnce } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
-import { Button, LoadingPlaceholder, Stack, Text, useStyles2 } from '@grafana/ui';
+import { Button, LoadingPlaceholder, Stack, Text, Tooltip, useStyles2 } from '@grafana/ui';
 import { alertRuleApi } from 'app/features/alerting/unified/api/alertRuleApi';
 import { AlertQuery, Labels } from 'app/types/unified-alerting-dto';
 
@@ -67,7 +67,9 @@ export const NotificationPreview = ({
   };
 
   useEffectOnce(() => {
-    onPreview();
+    if (!disabled) {
+      onPreview();
+    }
   });
 
   //  Get alert managers's data source information
@@ -102,9 +104,21 @@ export const NotificationPreview = ({
             </Text>
           )}
         </Stack>
-        <Button icon="sync" variant="secondary" type="button" onClick={onPreview} disabled={disabled}>
-          <Trans i18nKey="alerting.notification-preview.preview-routing">Preview routing</Trans>
-        </Button>
+        <Tooltip
+          content={
+            disabled ? (
+              <Trans i18nKey="alerting.notification-preview.disabled-tooltip">
+                You don&apos;t have sufficient permissions to preview
+              </Trans>
+            ) : (
+              ''
+            )
+          }
+        >
+          <Button icon="sync" variant="secondary" type="button" onClick={onPreview} disabled={disabled}>
+            <Trans i18nKey="alerting.notification-preview.preview-routing">Preview routing</Trans>
+          </Button>
+        </Tooltip>
       </Stack>
       {potentialInstances.length > 0 && (
         <Suspense
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index c4595edaff8..c027bdde11e 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -1982,6 +1982,7 @@
     },
     "notification-preview": {
       "alertmanager": "Alertmanager:",
+      "disabled-tooltip": "You don't have sufficient permissions to preview",
       "error": "Could not load routing preview for {{alertmanager}}",
       "initialized": "Based on the labels added, alert instances are routed to the following notification policies. Expand each notification policy below to view more details.",
       "preview-routing": "Preview routing",