diff --git a/public/app/features/alerting/unified/components/AlertRuleDrawerForm.tsx b/public/app/features/alerting/unified/components/AlertRuleDrawerForm.tsx
index 001ec34bfc0..c72b2a5feeb 100644
--- a/public/app/features/alerting/unified/components/AlertRuleDrawerForm.tsx
+++ b/public/app/features/alerting/unified/components/AlertRuleDrawerForm.tsx
@@ -10,6 +10,7 @@ import { getDefaultFormValues } from '../rule-editor/formDefaults';
import { RuleFormType, RuleFormValues } from '../types/rule-form';
import { RuleConditionSection } from './RuleConditionSection';
+import { RuleNotificationSection } from './RuleNotificationSection';
export interface AlertRuleDrawerFormProps {
isOpen: boolean;
@@ -35,6 +36,8 @@ export function AlertRuleDrawerForm({ isOpen, onClose, title }: AlertRuleDrawerF
+
+
);
diff --git a/public/app/features/alerting/unified/components/RuleNotificationSection.tsx b/public/app/features/alerting/unified/components/RuleNotificationSection.tsx
new file mode 100644
index 00000000000..ffce0f3fbdc
--- /dev/null
+++ b/public/app/features/alerting/unified/components/RuleNotificationSection.tsx
@@ -0,0 +1,134 @@
+import { css } from '@emotion/css';
+import { useMemo, useState } from 'react';
+
+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, useStyles2 } from '@grafana/ui';
+
+import { LinkToContactPoints } from './rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector';
+
+export function RuleNotificationSection() {
+ const styles = useStyles2(getStyles);
+
+ const [contactPoint, setContactPoint] = useState | null>(null);
+ // Fetch contact points from Alerting API v0alpha1
+ const { currentData, status, refetch } = notificationsAPIv0alpha1.endpoints.listReceiver.useQuery({});
+ const options = useMemo>>(
+ () =>
+ (currentData?.items ?? []).map((item) => ({
+ value: item?.spec?.title ?? '',
+ label: item?.spec?.title ?? '',
+ })),
+ [currentData]
+ );
+
+ return (
+
+
+
+ 3
+
+
+ Notification
+
+
+
+
+
+
+
+ ['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'}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function getStyles(theme: GrafanaTheme2) {
+ return {
+ section: css({ width: '100%' }),
+ sectionHeaderRow: css({
+ display: 'flex',
+ alignItems: 'center',
+ gap: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ }),
+ sectionHeader: css({
+ fontWeight: 600,
+ fontSize: theme.typography.h4.fontSize,
+ lineHeight: theme.typography.h4.lineHeight,
+ }),
+ stepBadge: css({
+ display: 'inline-flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ height: 20,
+ width: 20,
+ borderRadius: theme.shape.radius.circle,
+ background: theme.colors.primary.main,
+ color: theme.colors.text.maxContrast,
+ fontSize: theme.typography.bodySmall.fontSize,
+ fontWeight: 600,
+ }),
+ contentIndented: css({ marginLeft: `calc(20px + ${theme.spacing(1)})` }),
+ };
+}
diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx
index 9cfe5cf7dbd..ac754f5a7dd 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx
@@ -97,7 +97,7 @@ export function ContactPointSelector({ alertManager }: ContactPointSelectorProps
);
}
-function LinkToContactPoints() {
+export function LinkToContactPoints() {
const hrefToContactPoints = '/alerting/notifications';
return (