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 c767ebe63d3..0e75531c986 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
@@ -36,7 +36,7 @@ export const NotificationPreview = ({
alertUid,
}: NotificationPreviewProps) => {
const styles = useStyles2(getStyles);
- const disabled = !condition || !folder;
+ const previewRoutingDisabled = !condition || !folder;
const [trigger, { data = [], isLoading, isUninitialized: previewUninitialized }] = preview.useMutation();
@@ -51,7 +51,7 @@ export const NotificationPreview = ({
}, []);
const onPreview = () => {
- if (!folder || !condition) {
+ if (previewRoutingDisabled) {
return;
}
@@ -67,7 +67,7 @@ export const NotificationPreview = ({
};
useEffectOnce(() => {
- if (!disabled) {
+ if (!previewRoutingDisabled) {
onPreview();
}
});
@@ -76,6 +76,22 @@ export const NotificationPreview = ({
const alertManagerDataSources = useGetAlertManagerDataSourcesByPermissionAndConfig('notification');
const singleAlertManagerConfigured = alertManagerDataSources.length === 1;
+ const getTooltipContent = () => {
+ if (!folder) {
+ return (
+ Select a folder to preview routing
+ );
+ }
+ if (previewRoutingDisabled) {
+ return (
+
+ You don't have sufficient permissions to preview
+
+ );
+ }
+ return '';
+ };
+
return (
@@ -104,18 +120,8 @@ export const NotificationPreview = ({
)}
-
- You don't have sufficient permissions to preview
-
- ) : (
- ''
- )
- }
- >
-