From cc94c55e48a95696ffa5f22c4bf2c84c1a52d755 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Tue, 28 Sep 2021 11:35:10 +0200
Subject: [PATCH] Alerting: Prevent preview if no condition is set (#39659)

* prevent preview if no condition is set

* fixes after pr feedback

* watch on type and condition
---
 .../unified/components/rule-editor/PreviewRule.tsx         | 6 +++---
 .../unified/components/rule-editor/PreviewRuleResult.tsx   | 7 ++++++-
 public/app/features/alerting/unified/utils/redux.ts        | 2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx b/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx
index 04c51797a3d..3021c8a1e83 100644
--- a/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx
@@ -15,8 +15,8 @@ const fields: string[] = ['type', 'dataSourceName', 'condition', 'queries', 'exp
 export function PreviewRule(): React.ReactElement | null {
   const styles = useStyles2(getStyles);
   const [preview, onPreview] = usePreview();
-  const { getValues } = useFormContext();
-  const [type] = getValues(fields);
+  const { watch } = useFormContext();
+  const [type, condition] = watch(['type', 'condition']);
 
   if (type === RuleFormType.cloudRecording || type === RuleFormType.cloudAlerting) {
     return null;
@@ -25,7 +25,7 @@ export function PreviewRule(): React.ReactElement | null {
   return (
     <div className={styles.container}>
       <HorizontalGroup>
-        <Button type="button" variant="primary" onClick={onPreview}>
+        <Button disabled={!condition} type="button" variant="primary" onClick={onPreview}>
           Preview alerts
         </Button>
       </HorizontalGroup>
diff --git a/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx b/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx
index d50eb5414e8..492b208703d 100644
--- a/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx
@@ -6,6 +6,7 @@ import { PanelRenderer } from '@grafana/runtime';
 import { GrafanaTheme2, LoadingState } from '@grafana/data';
 import { PreviewRuleResponse } from '../../types/preview';
 import { RuleFormType } from '../../types/rule-form';
+import { messageFromError } from '../../utils/redux';
 
 type Props = {
   preview: PreviewRuleResponse | undefined;
@@ -30,7 +31,11 @@ export function PreviewRuleResult(props: Props): React.ReactElement | null {
   }
 
   if (data.state === LoadingState.Error) {
-    return <div className={styles.container}>{data.error ?? 'Failed to preview alert rule'}</div>;
+    return (
+      <div className={styles.container}>
+        {data.error ? messageFromError(data.error) : 'Failed to preview alert rule'}
+      </div>
+    );
   }
 
   return (
diff --git a/public/app/features/alerting/unified/utils/redux.ts b/public/app/features/alerting/unified/utils/redux.ts
index 868bc9fa863..068c3c4f920 100644
--- a/public/app/features/alerting/unified/utils/redux.ts
+++ b/public/app/features/alerting/unified/utils/redux.ts
@@ -137,7 +137,7 @@ export function isFetchError(e: unknown): e is FetchError {
   return typeof e === 'object' && e !== null && 'status' in e && 'data' in e;
 }
 
-function messageFromError(e: Error | FetchError | SerializedError): string {
+export function messageFromError(e: Error | FetchError | SerializedError): string {
   if (isFetchError(e)) {
     if (e.data?.message) {
       let msg = e.data?.message;