Alerting: Add NeedHelpInfo component in notifications step. (#70740)

Add NeedHelpInfo component in notifications step and use it in annotations step (instead of HoverCard) for consistency

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

@@ -205,6 +205,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   flexColumn: css`
     display: flex;
     flex-direction: column;
+    margin-top: ${theme.spacing(2)};
   `,
   field: css`
     margin-bottom: ${theme.spacing(0.5)};

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

@@ -3,13 +3,14 @@ import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { useStyles2 } from '@grafana/ui';
 
 import { RuleFormType, RuleFormValues } from '../../types/rule-form';
-import { HoverCard } from '../HoverCard';
 
 import AnnotationsField from './AnnotationsField';
 import { GroupAndNamespaceFields } from './GroupAndNamespaceFields';
+import { NeedHelpInfo } from './NeedHelpInfo';
 import { RuleEditorSection } from './RuleEditorSection';
 
 function getDescription(ruleType: RuleFormType | undefined, styles: { [key: string]: string }) {
@@ -21,46 +22,26 @@ function getDescription(ruleType: RuleFormType | undefined, styles: { [key: stri
   const docsLink =
     'https://grafana.com/docs/grafana/latest/alerting/fundamentals/annotation-label/variables-label-annotation';
 
-  const HelpContent = () => (
-    <div className={styles.needHelpTooltip}>
-      <div className={styles.tooltipHeader}>
-        <Icon name="question-circle" /> Annotations
-      </div>
-      <div>
-        Annotations add metadata to provide more information on the alert in your alert notifications. For example, add
-        a Summary annotation to tell you which value caused the alert to fire or which server it happened on.
-      </div>
-      <div>Annotations can contain a combination of text and template code.</div>
-      <div>
-        <a href={docsLink} target="_blank" rel="noreferrer" className={styles.tooltipLink}>
-          Read about annotations <Icon name="external-link-alt" size="sm" tabIndex={0} />
-        </a>
-      </div>
-    </div>
+  const textToRender =
+    ruleType === RuleFormType.grafana
+      ? ` ${annotationsText} `
+      : ruleType === RuleFormType.cloudAlerting
+      ? `Select the Namespace and evaluation group for your alert. ${annotationsText} `
+      : '';
+
+  return (
+    <Stack gap={0.5}>
+      {`${textToRender}`}
+      <NeedHelpInfo
+        contentText={`Annotations add metadata to provide more information on the alert in your alert notifications. 
+          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={docsLink}
+        linkText={`Read about annotations`}
+        title="Annotations"
+      />
+    </Stack>
   );
-  const LinkToDocs = () => (
-    <HoverCard content={<HelpContent />} placement={'bottom-start'}>
-      <span className={styles.needHelpText}>
-        <Icon name="info-circle" size="sm" tabIndex={0} /> <span className={styles.underline}>Need help?</span>
-      </span>
-    </HoverCard>
-  );
-  if (ruleType === RuleFormType.grafana) {
-    return (
-      <span>
-        {` ${annotationsText} `}
-        <LinkToDocs />
-      </span>
-    );
-  }
-  if (ruleType === RuleFormType.cloudAlerting) {
-    return (
-      <span>
-        {`Select the Namespace and evaluation group for your alert. ${annotationsText} `} <LinkToDocs />
-      </span>
-    );
-  }
-  return '';
 }
 
 export function DetailsStep() {

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

@@ -9,8 +9,9 @@ interface NeedHelpInfoProps {
   contentText: string;
   externalLink: string;
   linkText: string;
+  title: string;
 }
-export function NeedHelpInfo({ contentText, externalLink, linkText }: NeedHelpInfoProps) {
+export function NeedHelpInfo({ contentText, externalLink, linkText, title }: NeedHelpInfoProps) {
   const styles = useStyles2(getStyles);
   return (
     <Toggletip
@@ -18,7 +19,7 @@ export function NeedHelpInfo({ contentText, externalLink, linkText }: NeedHelpIn
       title={
         <Stack gap={1} direction="row">
           <Icon name="question-circle" />
-          Define query and alert condition
+          {title}
         </Stack>
       }
       footer={
@@ -53,6 +54,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     margin-left: ${theme.spacing(1)};
     font-size: ${theme.typography.size.sm};
     cursor: pointer;
+    color: ${theme.colors.text.primary};
   `,
   helpInfoText: css`
     margin-left: ${theme.spacing(0.5)};

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

@@ -9,6 +9,7 @@ import { RuleFormType, RuleFormValues } from '../../types/rule-form';
 import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
 
 import LabelsField from './LabelsField';
+import { NeedHelpInfo } from './NeedHelpInfo';
 import { RuleEditorSection } from './RuleEditorSection';
 import { NotificationPreview } from './notificaton-preview/NotificationPreview';
 
@@ -33,14 +34,34 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
 
   const shouldRenderPreview = Boolean(condition) && Boolean(folder) && type === RuleFormType.grafana;
 
+  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>
+
+        <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`}
+          title="Notification routing"
+        />
+      </div>
+    );
+  };
+
   return (
     <RuleEditorSection
       stepNo={type === RuleFormType.cloudRecording ? 4 : 5}
       title={type === RuleFormType.cloudRecording ? 'Labels' : 'Notifications'}
       description={
-        type === RuleFormType.cloudRecording
-          ? 'Add labels to help you better manage your recording rules'
-          : '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.'
+        type === RuleFormType.cloudRecording ? (
+          'Add labels to help you better manage your recording rules'
+        ) : (
+          <NotificationsStepDescription />
+        )
       }
     >
       <div className={styles.contentWrapper}>
@@ -87,6 +108,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   contentWrapper: css`
     display: flex;
     align-items: center;
+    margin-top: ${theme.spacing(2)};
   `,
   hideButton: css`
     color: ${theme.colors.text.secondary};
@@ -99,4 +121,13 @@ const getStyles = (theme: GrafanaTheme2) => ({
   flowChart: css`
     margin-right: ${theme.spacing(3)};
   `,
+  title: css`
+    margin-bottom: ${theme.spacing(2)};
+  `,
+  stepDescription: css`
+    margin-bottom: ${theme.spacing(2)};
+    display: flex;
+    gap: ${theme.spacing(1)};
+)};
+  `,
 });

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

@@ -291,6 +291,7 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
           For more information on queries and expressions, see Query and transform data.`}
               externalLink={`https://grafana.com/docs/grafana/latest/panels-visualizations/query-transform-data/`}
               linkText={`Read about query and condition`}
+              title="Define query and alert condition"
             />
           </Stack>