diff --git a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
index 993c1060fad..799b89f67cf 100644
--- a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
@@ -7,6 +7,42 @@ import AnnotationsField from './AnnotationsField';
import { GroupAndNamespaceFields } from './GroupAndNamespaceFields';
import { RuleEditorSection } from './RuleEditorSection';
+function getDescription(ruleType: RuleFormType | undefined) {
+ if (ruleType === RuleFormType.cloudRecording) {
+ return 'Select the Namespace and Group for your recording rule.';
+ }
+ const docsLink =
+ 'https://grafana.com/docs/grafana/latest/alerting/fundamentals/annotation-label/variables-label-annotation/#the-values-variable';
+ const LinkToDocs = () => (
+
+ Click{' '}
+
+ here{' '}
+
+ for documentation on how to template annotations and labels.
+
+ );
+ if (ruleType === RuleFormType.grafana) {
+ return (
+
+ {' '}
+ Write a summary to help you better manage your alerts.
+
+
+ );
+ }
+ if (ruleType === RuleFormType.cloudAlerting) {
+ return (
+
+ {' '}
+ Select the Namespace and evaluation group for your alert. Write a summary to help you better manage your alerts.{' '}
+
+
+ );
+ }
+ return '';
+}
+
export function DetailsStep() {
const { watch } = useFormContext();
@@ -18,11 +54,7 @@ export function DetailsStep() {
{(ruleFormType === RuleFormType.cloudRecording || ruleFormType === RuleFormType.cloudAlerting) &&
dataSourceName && }
diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx
index 8fe6d96113d..46fcd00641d 100644
--- a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React from 'react';
+import React, { ReactElement } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { FieldSet, useStyles2 } from '@grafana/ui';
@@ -7,7 +7,7 @@ import { FieldSet, useStyles2 } from '@grafana/ui';
export interface RuleEditorSectionProps {
title: string;
stepNo: number;
- description?: string;
+ description?: string | ReactElement;
}
export const RuleEditorSection = ({