Alerting: Fix wrong text in step4 (#65279)

* Fix wrong text in step4

* Add link to documentation for annotations in grafana alerts and cloud alerts

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 = () => (
+    <span>
+      Click{' '}
+      <a href={docsLink} target="_blank" rel="noreferrer">
+        here{' '}
+      </a>
+      for documentation on how to template annotations and labels.
+    </span>
+  );
+  if (ruleType === RuleFormType.grafana) {
+    return (
+      <span>
+        {' '}
+        Write a summary to help you better manage your alerts.
+        <LinkToDocs />
+      </span>
+    );
+  }
+  if (ruleType === RuleFormType.cloudAlerting) {
+    return (
+      <span>
+        {' '}
+        Select the Namespace and evaluation group for your alert. Write a summary to help you better manage your alerts.{' '}
+        <LinkToDocs />
+      </span>
+    );
+  }
+  return '';
+}
+
 export function DetailsStep() {
   const { watch } = useFormContext<RuleFormValues & { location?: string }>();
 
@@ -18,11 +54,7 @@ export function DetailsStep() {
     <RuleEditorSection
       stepNo={type === RuleFormType.cloudRecording ? 3 : 4}
       title={type === RuleFormType.cloudRecording ? 'Folder and group' : 'Add details for your alert rule'}
-      description={
-        type === RuleFormType.cloudRecording
-          ? 'Select the Namespace and Group for your recording rule'
-          : 'Select the folder and evaluation group for your alert. Write a summary to help you better manage your alerts'
-      }
+      description={getDescription(type)}
     >
       {(ruleFormType === RuleFormType.cloudRecording || ruleFormType === RuleFormType.cloudAlerting) &&
         dataSourceName && <GroupAndNamespaceFields rulesSourceName={dataSourceName} />}

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 = ({