Alerting: Update texts in alert rule form (#71831)

* Update texts in alert rule form

* Update default policy text

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

@@ -49,7 +49,7 @@ const AlertRuleNameInput = () => {
 
   const ruleFormType = watch('type');
   return (
-    <RuleEditorSection stepNo={1} title="Set an alert rule name">
+    <RuleEditorSection stepNo={1} title="Set alert rule name">
       <Field
         className={styles.formInput}
         label="Rule name"

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

@@ -218,7 +218,7 @@ export function GrafanaEvaluationBehavior({
 
   return (
     // TODO remove "and alert condition" for recording rules
-    <RuleEditorSection stepNo={3} title="Set evaluation behavior" description={getDescription()}>
+    <RuleEditorSection stepNo={3} title="Set alert evaluation behavior" description={getDescription()}>
       <Stack direction="column" justify-content="flex-start" align-items="flex-start">
         <FolderGroupAndEvaluationInterval setEvaluateEvery={setEvaluateEvery} evaluateEvery={evaluateEvery} />
         <ForInput evaluateEvery={evaluateEvery} />

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

@@ -6,9 +6,9 @@ import { Stack } from '@grafana/experimental';
 import { Icon, Toggletip, useStyles2 } from '@grafana/ui';
 
 interface NeedHelpInfoProps {
-  contentText: string;
-  externalLink: string;
-  linkText: string;
+  contentText: string | JSX.Element;
+  externalLink?: string;
+  linkText?: string;
   title: string;
 }
 export function NeedHelpInfo({ contentText, externalLink, linkText, title }: NeedHelpInfoProps) {
@@ -23,11 +23,13 @@ export function NeedHelpInfo({ contentText, externalLink, linkText, title }: Nee
         </Stack>
       }
       footer={
-        <a href={externalLink} target="_blank" rel="noreferrer">
-          <div className={styles.infoLink}>
-            {linkText} <Icon name="external-link-alt" />
-          </div>
-        </a>
+        externalLink ? (
+          <a href={externalLink} target="_blank" rel="noreferrer">
+            <div className={styles.infoLink}>
+              {linkText} <Icon name="external-link-alt" />
+            </div>
+          </a>
+        ) : undefined
       }
       closeButton={true}
       placement="bottom-start"

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

@@ -3,7 +3,8 @@ import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Card, Link, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Card, Icon, Link, useStyles2 } from '@grafana/ui';
 
 import { RuleFormType, RuleFormValues } from '../../types/rule-form';
 import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
@@ -37,15 +38,45 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
   const NotificationsStepDescription = () => {
     return (
       <div className={styles.stepDescription}>
-        <div>
-          Grafana handles the notifications for alerts by assigning labels to alerts. These labels connect alerts to
-          contact points and silence alert instances that have matching labels.
-        </div>
+        <div>Add custom labels to change the way your notifications are routed.</div>
 
         <NeedHelpInfo
-          contentText={`Firing alert rule instances are routed to notification policies based on matching labels. Notification are sent out to the contact point specified in the notification policy.`}
-          externalLink={`https://grafana.com/docs/grafana/latest/alerting/fundamentals/notification-policies/notifications/`}
-          linkText={`Read about notification routing`}
+          contentText={
+            <Stack gap={1}>
+              <Stack direction="row" gap={0}>
+                <>
+                  Firing alert rule instances are routed to notification policies based on matching labels. All alert
+                  rules and instances, irrespective of their labels, match the default notification policy. If there are
+                  no nested policies, or no nested policies match the labels in the alert rule or alert instance, then
+                  the default notification policy is the matching policy.
+                </>
+                <a
+                  href={`https://grafana.com/docs/grafana/latest/alerting/fundamentals/notification-policies/notifications/`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <div className={styles.infoLink}>
+                    Read about notification routing. <Icon name="external-link-alt" />
+                  </div>
+                </a>
+              </Stack>
+              <Stack direction="row" gap={0}>
+                <>
+                  Custom labels change the way your notifications are routed. First, add labels to your alert rule and
+                  then connect them to your notification policy by adding label matchers.
+                </>
+                <a
+                  href={`https://grafana.com/docs/grafana/latest/alerting/fundamentals/annotation-label/`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <div className={styles.infoLink}>
+                    Read about Labels and annotations. <Icon name="external-link-alt" />
+                  </div>
+                </a>
+              </Stack>
+            </Stack>
+          }
           title="Notification routing"
         />
       </div>
@@ -55,7 +86,7 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
   return (
     <RuleEditorSection
       stepNo={type === RuleFormType.cloudRecording ? 4 : 5}
-      title={type === RuleFormType.cloudRecording ? 'Labels' : 'Notifications'}
+      title={type === RuleFormType.cloudRecording ? 'Labels' : 'Configure notifications'}
       description={
         type === RuleFormType.cloudRecording ? (
           'Add labels to help you better manage your recording rules'
@@ -68,11 +99,11 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
         <div style={{ display: 'flex', flexDirection: 'column' }}>
           {!hasLabelsDefined && type !== RuleFormType.cloudRecording && (
             <Card className={styles.card}>
-              <Card.Heading>Root route – default for all alerts</Card.Heading>
+              <Card.Heading>Default policy</Card.Heading>
               <Card.Description>
-                Without custom labels, your alert will be routed through the root route. To view and edit the root
-                route, go to <Link href="/alerting/routes">notification policies</Link> or contact your admin in case
-                you are using non-Grafana alert management.
+                All alert instances are handled by the default policy if no other matching policies are found. To view
+                and edit the default policy, go to <Link href="/alerting/routes">Notification Policies</Link>
+                &nbsp;or contact your Admin if you are using provisioning.
               </Card.Description>
             </Card>
           )}
@@ -130,4 +161,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     gap: ${theme.spacing(1)};
 )};
   `,
+  infoLink: css`
+    color: ${theme.colors.text.link};
+  `,
 });

public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx

@@ -436,7 +436,7 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
           />
           {/* Expression Queries */}
           <H5>Expressions</H5>
-          <div className={styles.mutedText}>Manipulate data returned from queries with math and other operations</div>
+          <div className={styles.mutedText}>Manipulate data returned from queries with math and other operations.</div>
           <ExpressionsEditor
             queries={queries}
             panelData={queryPreviewData}

public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx

@@ -108,14 +108,14 @@ const getContentText = (ruleFormType: RuleFormType, isEditing: boolean, dataSour
       return {
         contentText:
           'Grafana-managed alert rules allow you to create alerts that can act on data from any of our supported data sources, including having multiple data sources in the same rule. You can also add expressions to transform your data and set alert conditions. Using images in alert notifications is also supported.',
-        title: `This alert rule will be managed by Grafana. The selected data source is configured to support rule creation. You can switch to data source-managed alert rule.`,
+        title: `This alert rule will be managed by Grafana. The selected data source is configured to support rule creation.`,
       };
     }
   } else {
     // it can be only grafana rule
     return {
       contentText: `Grafana-managed alert rules allow you to create alerts that can act on data from any of our supported data sources, including having multiple data sources in the same rule. You can also add expressions to transform your data and set alert conditions. Using images in alert notifications is also supported.`,
-      title: `Based on the selected data sources this alert rule will be managed by Grafana.`,
+      title: `Based on the data sources selected, this alert rule is managed by Grafana.`,
     };
   }
 };