Alerting: Update texts in annotations step (#93977)

* Update texts in annotations step

* add translations

.betterer.results

@@ -1894,8 +1894,7 @@ exports[`better eslint`] = {
     ],
     "public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/alerting/unified/components/rule-editor/CloudAlertPreview.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],

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

@@ -6,6 +6,7 @@ import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, Field, Input, Stack, Text, TextArea, useStyles2 } from '@grafana/ui';
+import { t, Trans } from 'app/core/internationalization';
 
 import { DashboardModel } from '../../../../dashboard/state';
 import { RuleFormValues } from '../../types/rule-form';
@@ -92,7 +93,7 @@ const AnnotationsStep = () => {
     return (
       <Stack direction="row" gap={0.5} alignItems="center">
         <Text variant="bodySmall" color="secondary">
-          Add more context in your notification messages.
+          <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.
@@ -105,7 +106,12 @@ const AnnotationsStep = () => {
   }
 
   return (
-    <RuleEditorSection stepNo={5} title="Add annotations" description={getAnnotationsSectionDescription()} fullWidth>
+    <RuleEditorSection
+      stepNo={5}
+      title={t('alerting.annotations.title', 'Configure notification message')}
+      description={getAnnotationsSectionDescription()}
+      fullWidth
+    >
       <Stack direction="column" gap={1}>
         {fields.map((annotationField, index: number) => {
           const isUrl = annotations[index]?.key?.toLocaleLowerCase().endsWith('url');

public/locales/en-US/grafana.json

@@ -56,6 +56,10 @@
     "pause": "Pause evaluation"
   },
   "alerting": {
+    "annotations": {
+      "description": "Add more context to your alert notifications.",
+      "title": "Configure notification message"
+    },
     "central-alert-history": {
       "details": {
         "error": "Error loading rule for this event.",

public/locales/pseudo-LOCALE/grafana.json

@@ -56,6 +56,10 @@
     "pause": "Päūşę ęväľūäŧįőʼn"
   },
   "alerting": {
+    "annotations": {
+      "description": "Åđđ mőřę čőʼnŧęχŧ ŧő yőūř äľęřŧ ʼnőŧįƒįčäŧįőʼnş.",
+      "title": "Cőʼnƒįģūřę ʼnőŧįƒįčäŧįőʼn męşşäģę"
+    },
     "central-alert-history": {
       "details": {
         "error": "Ēřřőř ľőäđįʼnģ řūľę ƒőř ŧĥįş ęvęʼnŧ.",