alerting(ui): update helpUI text for simplified routing (#102225)

* alerting(ui): add helpInfo for optional simpleRouting settings

* minor copy change

* update betterer results

* alerting(ui): update helpUI text for simplifiedRouting

* fix i18n error with `make i18n-extract`

.betterer.results

@@ -1918,7 +1918,7 @@ exports[`better eslint`] = {
     ],
     "public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx:5381": [
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
+      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "1"]
     ],
     "public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx:5381": [
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],

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

@@ -270,22 +270,16 @@ function NeedHelpInfoForContactpoint() {
         <>
           Select a contact point to notify all recipients in it.
           <br />
+          Muting, grouping, and timings options allow you to customize how notifications are sent.
           <br />
-          Notifications for firing alert instances are grouped based on folder and alert rule name.
           <br />
-          The wait time before sending the first notification for a new group of alerts is 30 seconds.
-          <br />
-          The waiting time before sending a notification about changes in the alert group after the first notification
-          has been sent is 5 minutes.
-          <br />
-          The wait time before resending a notification that has already been sent successfully is 4 hours.
-          <br />
-          Grouping and wait time values are defined in your default notification policy.
+          Alternatively, toggle the <b>Advanced options</b> button to route notifications using notification policies
+          for greater flexibility.
         </>
       }
       externalLink="https://grafana.com/docs/grafana/latest/alerting/fundamentals/notifications/"
       linkText="Read more about notifications"
-      title="Notify contact points"
+      title="Notify by selecting a contact point"
     />
   );
 }

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx

@@ -3,12 +3,14 @@ import { useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { CollapsableSection, Stack, useStyles2 } from '@grafana/ui';
+import { CollapsableSection, Stack, Text, useStyles2 } from '@grafana/ui';
+import { Trans, t } from 'app/core/internationalization';
 import { RuleFormValues } from 'app/features/alerting/unified/types/rule-form';
 import { AlertManagerDataSource } from 'app/features/alerting/unified/utils/datasource';
 
 import { useContactPointsWithStatus } from '../../../contact-points/useContactPoints';
 import { ContactPointWithMetadata } from '../../../contact-points/utils';
+import { NeedHelpInfo } from '../../NeedHelpInfo';
 
 import { ContactPointDetails } from './contactPoint/ContactPointDetails';
 import { ContactPointSelector } from './contactPoint/ContactPointSelector';
@@ -57,7 +59,7 @@ export function AlertManagerManualRouting({ alertManager }: AlertManagerManualRo
       <Stack direction="row" alignItems="center">
         <div className={styles.firstAlertManagerLine} />
         <div className={styles.alertManagerName}>
-          Alertmanager:
+          <Trans i18nKey="alerting.rule-form.simple-routing.alertmanager-label">Alertmanager:</Trans>
           <img src={alertManager.imgUrl} alt="Alert manager logo" className={styles.img} />
           {alertManagerName}
         </div>
@@ -74,8 +76,37 @@ export function AlertManagerManualRouting({ alertManager }: AlertManagerManualRo
           label="Muting, grouping and timings (optional)"
           isOpen={hasRouteSettings}
           className={styles.collapsableSection}
+          contentClassName={styles.collapsableSectionContent}
         >
           <Stack direction="column" gap={1}>
+            <Stack direction="row" gap={0.5} alignItems="center">
+              <Text variant="bodySmall" color="secondary">
+                <Trans i18nKey="alerting.rule-form.simple-routing.optional-settings.description">
+                  Configure how notifications for this alert rule are sent.
+                </Trans>
+              </Text>
+              <NeedHelpInfo
+                title="Muting, grouping, and timings"
+                linkText={'Read about notification grouping'}
+                externalLink={
+                  'https://grafana.com/docs/grafana/latest/alerting/fundamentals/notifications/group-alert-notifications/'
+                }
+                contentText={
+                  <>
+                    <p>
+                      {t(
+                        'alerting.rule-form.simple-routing.optional-settings.help-info1',
+                        'Mute timings allows you to temporarily pause notifications for a specific recurring period, such as a regular maintenance window or weekends.'
+                      )}
+                    </p>
+                    {t(
+                      'alerting.rule-form.simple-routing.optional-settings.help-info2',
+                      'Grouping and timing options combine multiple alerts within a specific period into a single notification, allowing you to customize default options.'
+                    )}
+                  </>
+                }
+              />
+            </Stack>
             <MuteTimingFields alertmanager={alertManagerName} />
             <RoutingSettings alertManager={alertManagerName} />
           </Stack>
@@ -110,6 +141,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
     width: 'fit-content',
     fontSize: theme.typography.body.fontSize,
   }),
+  collapsableSectionContent: css({
+    padding: '0',
+  }),
   routingSection: css({
     display: 'flex',
     flexDirection: 'column',

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx

@@ -1,6 +1,8 @@
+import { css } from '@emotion/css';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { Field } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Field, useStyles2 } from '@grafana/ui';
 import MuteTimingsSelector from 'app/features/alerting/unified/components/alertmanager-entities/MuteTimingsSelector';
 import { BaseAlertmanagerArgs } from 'app/features/alerting/unified/types/hooks';
 import { RuleFormValues } from 'app/features/alerting/unified/types/rule-form';
@@ -8,6 +10,7 @@ import { mapMultiSelectValueToStrings } from 'app/features/alerting/unified/util
 
 /** Provides a form field for use in simplified routing, for selecting appropriate mute timings */
 export function MuteTimingFields({ alertmanager }: BaseAlertmanagerArgs) {
+  const styles = useStyles2(getStyles);
   const {
     control,
     formState: { errors },
@@ -18,6 +21,7 @@ export function MuteTimingFields({ alertmanager }: BaseAlertmanagerArgs) {
       label="Mute timings"
       data-testid="am-mute-timing-select"
       description="Select a mute timing to define when not to send notifications for this alert rule"
+      className={styles.muteTimingField}
       invalid={!!errors.contactPoints?.[alertmanager]?.muteTimeIntervals}
     >
       <Controller
@@ -36,3 +40,8 @@ export function MuteTimingFields({ alertmanager }: BaseAlertmanagerArgs) {
     </Field>
   );
 }
+const getStyles = (theme: GrafanaTheme2) => ({
+  muteTimingField: css({
+    marginTop: theme.spacing(1),
+  }),
+});

public/locales/en-US/grafana.json

@@ -730,6 +730,14 @@
       "pause": {
         "label": "Pause evaluation"
       },
+      "simple-routing": {
+        "alertmanager-label": "Alertmanager:",
+        "optional-settings": {
+          "description": "Configure how notifications for this alert rule are sent.",
+          "help-info1": "Mute timings allows you to temporarily pause notifications for a specific recurring period, such as a regular maintenance window or weekends.",
+          "help-info2": "Grouping and timing options combine multiple alerts within a specific period into a single notification, allowing you to customize default options."
+        }
+      },
       "threshold": {
         "recovery": {
           "stop-alerting-above": "Stop alerting when above",