diff --git a/public/app/features/alerting/unified/components/RuleNotificationSection.tsx b/public/app/features/alerting/unified/components/RuleNotificationSection.tsx index c52a53a6c56..c0ea5991c6c 100644 --- a/public/app/features/alerting/unified/components/RuleNotificationSection.tsx +++ b/public/app/features/alerting/unified/components/RuleNotificationSection.tsx @@ -11,6 +11,7 @@ import { ComboboxOption, Field, Input, + Label, Stack, Switch, Text, @@ -23,13 +24,16 @@ import { RuleFormValues } from '../types/rule-form'; import { NeedHelpInfoForNotificationPolicy } from './rule-editor/NotificationsStep'; +// Centralized form path for selected contact point +const CONTACT_POINT_PATH = 'contactPoints.grafana.selectedContactPoint' as const; + export function RuleNotificationSection() { const styles = useStyles2(getStyles); const { watch, setValue } = useFormContext(); const manualRouting = watch('manualRouting'); const useNotificationPolicy = !manualRouting; - const selectedContactPoint = watch('contactPoints.grafana.selectedContactPoint'); + const selectedContactPoint = watch(CONTACT_POINT_PATH); // Fetch contact points from Alerting API v0alpha1 const { currentData, status, refetch } = notificationsAPIv0alpha1.endpoints.listReceiver.useQuery({}); const options = useMemo>>( @@ -41,6 +45,8 @@ export function RuleNotificationSection() { [currentData] ); + const recipientLabelId = 'recipient-label'; + return (
@@ -54,100 +60,107 @@ export function RuleNotificationSection() {
- - {t('alerting.simplified.notification.recipient.label', 'Recipient')} - - - {t('alerting.simplified.notification.manual-routing.label', 'Manual routing')} - - { - const next = e.currentTarget.checked; - setValue('manualRouting', next, { shouldDirty: true }); - setValue('editorSettings.simplifiedNotificationEditor', next, { shouldDirty: true }); - }} - aria-label={t('alerting.simplified.notification.manual-routing.aria', 'Toggle manual routing')} - /> - - - } - noMargin - > + + + +
+ + {t('alerting.simplified.notification.manual-routing.label', 'Manual routing')} + + { + const next = e.currentTarget.checked; + setValue('manualRouting', next, { shouldDirty: true, shouldValidate: true }); + setValue('editorSettings.simplifiedNotificationEditor', next, { + shouldDirty: true, + shouldValidate: true, + }); + }} + aria-labelledby={recipientLabelId} + aria-label={t('alerting.simplified.notification.manual-routing.aria', 'Toggle manual routing')} + /> +
+
{useNotificationPolicy ? (
- - - - Notifications for firing alerts are routed to contact points based on matching labels and the - notification policy tree. - - - - +
) : (
- - - - Notifications for firing alerts are routed to a selected contact point. + + ['value']> + options={options} + value={ + selectedContactPoint ? (options.find((o) => o.value === selectedContactPoint) ?? null) : null + } + onChange={(opt) => + setValue(CONTACT_POINT_PATH, opt?.value ?? '', { + shouldDirty: true, + shouldValidate: true, + }) + } + width={30} + placeholder={t( + 'alerting.simplified.notification.select-contact-point', + 'Select a contact point...' + )} + isClearable + data-testid="contact-point" + loading={status === 'pending'} + /> +
)} - +