diff --git a/public/app/features/alerting/unified/Receivers.tsx b/public/app/features/alerting/unified/Receivers.tsx index d43696724f5..0ed184c1d4a 100644 --- a/public/app/features/alerting/unified/Receivers.tsx +++ b/public/app/features/alerting/unified/Receivers.tsx @@ -22,6 +22,7 @@ import { GlobalConfigForm } from './components/receivers/GlobalConfigForm'; import { NewReceiverView } from './components/receivers/NewReceiverView'; import { NewTemplateView } from './components/receivers/NewTemplateView'; import { ReceiversAndTemplatesView } from './components/receivers/ReceiversAndTemplatesView'; +import { isDuplicating } from './components/receivers/TemplateForm'; import { useAlertManagerSourceName } from './hooks/useAlertManagerSourceName'; import { useAlertManagersByPermission } from './hooks/useAlertManagerSources'; import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector'; @@ -62,7 +63,7 @@ const Receivers = () => { const { id, type } = useParams<{ id?: string; type?: PageType }>(); const location = useLocation(); const isRoot = location.pathname.endsWith('/alerting/notifications'); - + const isduplicatingTemplate = isDuplicating(location); const configRequests = useUnifiedAlertingSelector((state) => state.amConfigs); const { @@ -96,7 +97,7 @@ const Receivers = () => { const disableAmSelect = !isRoot; - let pageNav = getPageNavigationModel(type, id); + let pageNav = getPageNavigationModel(type, id, isduplicatingTemplate); if (!alertManagerSourceName) { return isRoot ? ( @@ -181,8 +182,14 @@ const Receivers = () => { ); }; -function getPageNavigationModel(type: PageType | undefined, id: string | undefined) { +function getPageNavigationModel(type: PageType | undefined, id: string | undefined, isDuplicatingTemplates: boolean) { let pageNav: NavModelItem | undefined; + if (isDuplicatingTemplates) { + return { + text: `New template`, + subTitle: `Create a new template for your notifications`, + }; + } if (type === 'receivers' || type === 'templates') { const objectText = type === 'receivers' ? 'contact point' : 'notification template'; if (id) { diff --git a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx index 2ab7cf0f86a..5eedbddc0f4 100644 --- a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx +++ b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx @@ -1,6 +1,8 @@ import { css } from '@emotion/css'; +import { Location } from 'history'; import React, { FC } from 'react'; import { useForm, Validate } from 'react-hook-form'; +import { useLocation } from 'react-router-dom'; import AutoSizer from 'react-virtualized-auto-sizer'; import { GrafanaTheme2 } from '@grafana/data'; @@ -37,6 +39,7 @@ interface Props { alertManagerSourceName: string; provenance?: string; } +export const isDuplicating = (location: Location) => location.pathname.endsWith('/duplicate'); export const TemplateForm: FC = ({ existing, alertManagerSourceName, config, provenance }) => { const styles = useStyles2(getStyles); @@ -46,6 +49,9 @@ export const TemplateForm: FC = ({ existing, alertManagerSourceName, conf const { loading, error } = useUnifiedAlertingSelector((state) => state.saveAMConfig); + const location = useLocation(); + const isduplicating = isDuplicating(location); + const submit = (values: Values) => { // wrap content in "define" if it's not already wrapped, in case user did not do it/ // it's not obvious that this is needed for template to work @@ -102,10 +108,9 @@ export const TemplateForm: FC = ({ existing, alertManagerSourceName, conf ? true : 'Another template with this name already exists.'; }; - return (
-

{existing ? 'Edit notification template' : 'Create notification template'}

+

{existing && !isduplicating ? 'Edit notification template' : 'Create notification template'}

{error && ( {error.message || (error as any)?.data?.message || String(error)}