Alerting: Update translations in GrafanaEvaluationBehaviour component (#88638)

* Update translations

* Fix key in translations

* Interpolate point char in the Trans children text

* Use interpolation correctly in Trans component

.betterer.results

@@ -2073,17 +2073,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "14"]
     ],
-    "public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.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 />", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"]
-    ],
     "public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],

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

@@ -1,9 +1,10 @@
 import { css } from '@emotion/css';
 import React, { useCallback, useEffect, useState } from 'react';
-import { RegisterOptions, useFormContext, Controller } from 'react-hook-form';
+import { Controller, RegisterOptions, useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { Field, Icon, IconButton, Input, Label, Stack, Switch, Text, Tooltip, useStyles2 } from '@grafana/ui';
+import { Trans, t } from 'app/core/internationalization';
 
 import { CombinedRuleGroup, CombinedRuleNamespace } from '../../../../../types/unified-alerting';
 import { LogMessages, logInfo } from '../../Analytics';
@@ -46,14 +47,19 @@ const forValidationOptions = (evaluateEvery: string): RegisterOptions => ({
         const millisEvery = parsePrometheusDuration(evaluateEvery);
         return millisFor >= millisEvery
           ? true
-          : 'Pending period must be greater than or equal to the evaluation interval.';
+          : t(
+              'alert-rule-form.evaluation-behaviour-for.validation',
+              'Pending period must be greater than or equal to the evaluation interval.'
+            );
       } catch (err) {
         // if we fail to parse "every", assume validation is successful, or the error messages
         // will overlap in the UI
         return true;
       }
     } catch (error) {
-      return error instanceof Error ? error.message : 'Failed to parse duration';
+      return error instanceof Error
+        ? error.message
+        : t('alert-rule-form.evaluation-behaviour-for.error-parsing', 'Failed to parse duration');
     }
   },
 });
@@ -139,7 +145,9 @@ function FolderGroupAndEvaluationInterval({
               <Stack direction="column" gap={1}>
                 {getValues('group') && getValues('evaluateEvery') && (
                   <span>
-                    All rules in the selected group are evaluated every {evaluateEvery}.{' '}
+                    <Trans i18nKey="alert-rule-form.evaluation-behaviour-group.text" evaluateEvery={evaluateEvery}>
+                      All rules in the selected group are evaluated every {{ evaluateEvery }}.
+                    </Trans>
                     {!isNewGroup && (
                       <IconButton
                         name="pen"
@@ -183,7 +191,7 @@ function ForInput({ evaluateEvery }: { evaluateEvery: string }) {
             htmlFor="evaluateFor"
             description='Period the threshold condition must be met to trigger the alert. Selecting "None" triggers the alert immediately once the condition is met.'
           >
-            Pending period
+            <Trans i18nKey="alert-rule-form.evaluation-behaviour.pending-period">Pending period</Trans>
           </Label>
         }
         className={styles.inlineField}
@@ -211,7 +219,9 @@ function NeedHelpInfoForConfigureNoDataError() {
   return (
     <Stack direction="row" gap={0.5} alignItems="center">
       <Text variant="bodySmall" color="secondary">
-        Define the alert behavior when the evaluation fails or the query returns no data.
+        <Trans i18nKey="alert-rule-form.evaluation-behaviour.info-help.text">
+          Define the alert behavior when the evaluation fails or the query returns no data.
+        </Trans>
       </Text>
       <NeedHelpInfo
         contentText="These settings can help mitigate temporary data source issues, preventing alerts from unintentionally firing due to lack of data, errors, or timeouts."
@@ -229,19 +239,29 @@ function getDescription() {
   return (
     <Stack direction="row" gap={0.5} alignItems="center">
       <Text variant="bodySmall" color="secondary">
-        Define how the alert rule is evaluated.
+        <Trans i18nKey="alert-rule-form.evaluation-behaviour.description.text">
+          Define how the alert rule is evaluated.
+        </Trans>
       </Text>
       <NeedHelpInfo
         contentText={
           <>
-            <p>Evaluation groups are containers for evaluating alert and recording rules.</p>
             <p>
-              An evaluation group defines an evaluation interval - how often a rule is evaluated. Alert rules within the
-              same evaluation group are evaluated over the same evaluation interval.
+              <Trans i18nKey="alert-rule-form.evaluation-behaviour-description1">
+                Evaluation groups are containers for evaluating alert and recording rules.
+              </Trans>
             </p>
             <p>
-              Pending period specifies how long the threshold condition must be met before the alert starts firing. This
-              option helps prevent alerts from being triggered by temporary issues.
+              <Trans i18nKey="alert-rule-form.evaluation-behaviour-description2">
+                An evaluation group defines an evaluation interval - how often a rule is evaluated. Alert rules within
+                the same evaluation group are evaluated over the same evaluation interval.
+              </Trans>
+            </p>
+            <p>
+              <Trans i18nKey="alert-rule-form.evaluation-behaviour-description3">
+                Pending period specifies how long the threshold condition must be met before the alert starts firing.
+                This option helps prevent alerts from being triggered by temporary issues.
+              </Trans>
             </p>
           </>
         }
@@ -295,7 +315,7 @@ export function GrafanaEvaluationBehavior({
                     value={Boolean(isPaused)}
                   />
                   <label htmlFor="pause-alert" className={styles.switchLabel}>
-                    Pause evaluation
+                    <Trans i18nKey="alert-rule-form.pause">Pause evaluation</Trans>
                     <Tooltip placement="top" content="Turn on to pause evaluation for this alert rule." theme={'info'}>
                       <Icon tabIndex={0} name="info-circle" size="sm" className={styles.infoIcon} />
                     </Tooltip>

public/locales/en-US/grafana.json

@@ -25,6 +25,28 @@
       "user": "User"
     }
   },
+  "alert-rule-form": {
+    "evaluation-behaviour": {
+      "description": {
+        "text": "Define how the alert rule is evaluated."
+      },
+      "info-help": {
+        "text": "Define the alert behavior when the evaluation fails or the query returns no data."
+      },
+      "pending-period": "Pending period"
+    },
+    "evaluation-behaviour-description1": "Evaluation groups are containers for evaluating alert and recording rules.",
+    "evaluation-behaviour-description2": "An evaluation group defines an evaluation interval - how often a rule is evaluated. Alert rules within the same evaluation group are evaluated over the same evaluation interval.",
+    "evaluation-behaviour-description3": "Pending period specifies how long the threshold condition must be met before the alert starts firing. This option helps prevent alerts from being triggered by temporary issues.",
+    "evaluation-behaviour-for": {
+      "error-parsing": "Failed to parse duration",
+      "validation": "Pending period must be greater than or equal to the evaluation interval."
+    },
+    "evaluation-behaviour-group": {
+      "text": "All rules in the selected group are evaluated every {{evaluateEvery}}."
+    },
+    "pause": "Pause evaluation"
+  },
   "annotations": {
     "empty-state": {
       "button-title": "Add annotation query",

public/locales/pseudo-LOCALE/grafana.json

@@ -25,6 +25,28 @@
       "user": "Ůşęř"
     }
   },
+  "alert-rule-form": {
+    "evaluation-behaviour": {
+      "description": {
+        "text": "Đęƒįʼnę ĥőŵ ŧĥę äľęřŧ řūľę įş ęväľūäŧęđ."
+      },
+      "info-help": {
+        "text": "Đęƒįʼnę ŧĥę äľęřŧ þęĥävįőř ŵĥęʼn ŧĥę ęväľūäŧįőʼn ƒäįľş őř ŧĥę qūęřy řęŧūřʼnş ʼnő đäŧä."
+      },
+      "pending-period": "Pęʼnđįʼnģ pęřįőđ"
+    },
+    "evaluation-behaviour-description1": "Ēväľūäŧįőʼn ģřőūpş äřę čőʼnŧäįʼnęřş ƒőř ęväľūäŧįʼnģ äľęřŧ äʼnđ řęčőřđįʼnģ řūľęş.",
+    "evaluation-behaviour-description2": "Åʼn ęväľūäŧįőʼn ģřőūp đęƒįʼnęş äʼn ęväľūäŧįőʼn įʼnŧęřväľ - ĥőŵ őƒŧęʼn ä řūľę įş ęväľūäŧęđ. Åľęřŧ řūľęş ŵįŧĥįʼn ŧĥę şämę ęväľūäŧįőʼn ģřőūp äřę ęväľūäŧęđ ővęř ŧĥę şämę ęväľūäŧįőʼn įʼnŧęřväľ.",
+    "evaluation-behaviour-description3": "Pęʼnđįʼnģ pęřįőđ şpęčįƒįęş ĥőŵ ľőʼnģ ŧĥę ŧĥřęşĥőľđ čőʼnđįŧįőʼn mūşŧ þę męŧ þęƒőřę ŧĥę äľęřŧ şŧäřŧş ƒįřįʼnģ. Ŧĥįş őpŧįőʼn ĥęľpş přęvęʼnŧ äľęřŧş ƒřőm þęįʼnģ ŧřįģģęřęđ þy ŧęmpőřäřy įşşūęş.",
+    "evaluation-behaviour-for": {
+      "error-parsing": "Fäįľęđ ŧő päřşę đūřäŧįőʼn",
+      "validation": "Pęʼnđįʼnģ pęřįőđ mūşŧ þę ģřęäŧęř ŧĥäʼn őř ęqūäľ ŧő ŧĥę ęväľūäŧįőʼn įʼnŧęřväľ."
+    },
+    "evaluation-behaviour-group": {
+      "text": "Åľľ řūľęş įʼn ŧĥę şęľęčŧęđ ģřőūp äřę ęväľūäŧęđ ęvęřy {{evaluateEvery}}."
+    },
+    "pause": "Päūşę ęväľūäŧįőʼn"
+  },
   "annotations": {
     "empty-state": {
       "button-title": "Åđđ äʼnʼnőŧäŧįőʼn qūęřy",