diff --git a/public/app/features/alerting/unified/components/RuleNotificationSection.tsx b/public/app/features/alerting/unified/components/RuleNotificationSection.tsx index 768b547edc8..c52a53a6c56 100644 --- a/public/app/features/alerting/unified/components/RuleNotificationSection.tsx +++ b/public/app/features/alerting/unified/components/RuleNotificationSection.tsx @@ -1,15 +1,35 @@ import { css } from '@emotion/css'; -import { useMemo, useState } from 'react'; +import { useMemo } from 'react'; +import { useFormContext } from 'react-hook-form'; import { notificationsAPIv0alpha1 } from '@grafana/alerting/unstable'; import type { GrafanaTheme2 } from '@grafana/data'; import { Trans, t } from '@grafana/i18n'; -import { Button, Combobox, ComboboxOption, Field, Input, Stack, TextArea, TextLink, useStyles2 } from '@grafana/ui'; +import { + Button, + Combobox, + ComboboxOption, + Field, + Input, + Stack, + Switch, + Text, + TextArea, + TextLink, + useStyles2, +} from '@grafana/ui'; + +import { RuleFormValues } from '../types/rule-form'; + +import { NeedHelpInfoForNotificationPolicy } from './rule-editor/NotificationsStep'; export function RuleNotificationSection() { const styles = useStyles2(getStyles); - const [contactPoint, setContactPoint] = useState | null>(null); + const { watch, setValue } = useFormContext(); + const manualRouting = watch('manualRouting'); + const useNotificationPolicy = !manualRouting; + const selectedContactPoint = watch('contactPoints.grafana.selectedContactPoint'); // Fetch contact points from Alerting API v0alpha1 const { currentData, status, refetch } = notificationsAPIv0alpha1.endpoints.listReceiver.useQuery({}); const options = useMemo>>( @@ -35,49 +55,95 @@ 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 > - - ['value']> - options={options} - value={contactPoint} - onChange={(opt) => setContactPoint(opt)} - width={30} - placeholder={t('alerting.simplified.notification.select-contact-point', 'Select a contact point...')} - isClearable - data-testid="contact-point" - loading={status === 'pending'} - /> -
+ )} @@ -139,5 +205,6 @@ function getStyles(theme: GrafanaTheme2) { fontWeight: 600, }), contentIndented: css({ marginLeft: `calc(20px + ${theme.spacing(1)})` }), + contentTopSpacer: css({ marginTop: theme.spacing(0.5) }), }; } diff --git a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx index 3a7c3d45e7c..8aa310bf012 100644 --- a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx @@ -250,7 +250,7 @@ function AutomaticRooting({ alertUid }: AutomaticRootingProps) { } // Auxiliar components to build the texts and descriptions in the NotificationsStep -function NeedHelpInfoForNotificationPolicy() { +export function NeedHelpInfoForNotificationPolicy() { return (