From 54d7e95be19d5f0cbd3c7d697966b27bd8feac20 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Mon, 27 Mar 2023 15:28:20 +0200
Subject: [PATCH] Alerting: Fix wrong text in step4 (#65279)

* Fix wrong text in step4

* Add link to documentation for annotations in grafana alerts and cloud alerts
---
 .../components/rule-editor/DetailsStep.tsx    | 42 ++++++++++++++++---
 .../rule-editor/RuleEditorSection.tsx         |  4 +-
 2 files changed, 39 insertions(+), 7 deletions(-)

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 = () => (
+    <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} />}
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 = ({