alerting(ui): add external links to read more about labels and annotations (#102187)

* alerting(ui): add external link to read about labels

* alerting(ui): add external link to read about annotations

* fix i18n settings

* fix i18n

* fix i18n error with `make 18n-extract`

public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx

@@ -98,9 +98,30 @@ const AnnotationsStep = () => {
           <Trans i18nKey="alerting.annotations.description">Add more context to your alert notifications.</Trans>
         </Text>
         <NeedHelpInfo
-          contentText={`Annotations add metadata to provide more information on the alert in your alert notification messages.
-          For example, add a Summary annotation to tell you which value caused the alert to fire or which server it happened on.
-          Annotations can contain a combination of text and template code.`}
+          externalLink={
+            'https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/annotation-label/#annotations'
+          }
+          linkText={`Read about annotations`}
+          contentText={
+            <>
+              <p>
+                {t(
+                  'alerting.rule-form.annotations.description1',
+                  'Annotations add additional information to alerts, helping alert responders identify and address potential issues.'
+                )}
+              </p>
+              <p>
+                {t(
+                  'alerting.rule-form.annotations.description2',
+                  'For example, add a Summary annotation to tell you which value caused the alert to fire or which server it happened on.'
+                )}
+              </p>
+              {t(
+                'alerting.rule-form.annotations.description3',
+                'Annotations can contain a combination of text and template code, which is used to include data from queries.'
+              )}
+            </>
+          }
           title="Annotations"
         />
       </Stack>

public/app/features/alerting/unified/components/rule-editor/labels/LabelsField.tsx

@@ -404,6 +404,8 @@ function LabelsField() {
             {getLabelText(type)}
           </Text>
           <NeedHelpInfo
+            externalLink={'https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/annotation-label/'}
+            linkText={`Read about labels`}
             contentText="The dropdown only displays labels that you have previously used for alerts.
             Select a label from the options below or type in a new one."
             title="Labels"

public/app/features/alerting/unified/components/rule-editor/labels/LabelsFieldInForm.tsx

@@ -37,6 +37,8 @@ export function LabelsFieldInForm({ onEditClick }: LabelsFieldInFormProps) {
             {text}
           </Text>
           <NeedHelpInfo
+            externalLink={'https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/annotation-label/'}
+            linkText={`Read about labels`}
             contentText="The dropdown only displays labels that you have previously used for alerts.
               Select a label from the options below or type in a new one."
             title="Labels"

public/locales/en-US/grafana.json

@@ -512,6 +512,11 @@
       "label-target-data-source": "Target data source"
     },
     "rule-form": {
+      "annotations": {
+        "description1": "Annotations add additional information to alerts, helping alert responders identify and address potential issues.",
+        "description2": "For example, add a Summary annotation to tell you which value caused the alert to fire or which server it happened on.",
+        "description3": "Annotations can contain a combination of text and template code, which is used to include data from queries."
+      },
       "evaluation": {
         "evaluation-group-and-interval": "Evaluation group and interval",
         "group": {