Alerting: Correctly handle duplicating notification templates (#88487)

Co-authored-by: Alex Petrov <alex.petrov.vt@gmail.com>
Co-authored-by: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Co-authored-by: Alex Petrov <apetrov@fastly.com>

public/app/features/alerting/unified/Templates.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from 'test/test-utils';
+
+import { setupMswServer } from 'app/features/alerting/unified/mockApi';
+import { AccessControlAction } from 'app/types';
+
+import Templates from './Templates';
+import setupGrafanaManagedServer from './components/contact-points/__mocks__/grafanaManagedServer';
+import { grantUserPermissions } from './mocks';
+
+const server = setupMswServer();
+
+beforeEach(() => {
+  grantUserPermissions([AccessControlAction.AlertingNotificationsRead, AccessControlAction.AlertingNotificationsWrite]);
+  setupGrafanaManagedServer(server);
+});
+
+describe('Templates routes', () => {
+  it('allows duplication of template with spaces in name', async () => {
+    render(<Templates />, {
+      historyOptions: {
+        initialEntries: ['/alerting/notifications/templates/some%20template/duplicate?alertmanager=grafana'],
+      },
+    });
+
+    expect(await screen.findByText('Edit payload')).toBeInTheDocument();
+  });
+});

public/app/features/alerting/unified/Templates.tsx

@@ -3,7 +3,6 @@ import { Route, Switch } from 'react-router-dom';
 
 import { withErrorBoundary } from '@grafana/ui';
 import { SafeDynamicImport } from 'app/core/components/DynamicImports/SafeDynamicImport';
-import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 
 import { AlertmanagerPageWrapper } from './components/AlertingPageWrapper';
 
@@ -13,7 +12,7 @@ const DuplicateMessageTemplate = SafeDynamicImport(
   () => import('./components/contact-points/DuplicateMessageTemplate')
 );
 
-const NotificationTemplates = (_props: GrafanaRouteComponentProps): JSX.Element => (
+const NotificationTemplates = (): JSX.Element => (
   <AlertmanagerPageWrapper
     navId="receivers"
     accessType="notification"

public/app/features/alerting/unified/components/contact-points/DuplicateMessageTemplate.tsx

@@ -31,7 +31,13 @@ const NewMessageTemplate = ({ match }: Props) => {
     return null;
   }
 
-  return <DuplicateTemplateView alertManagerSourceName={selectedAlertmanager!} config={data} templateName={name} />;
+  return (
+    <DuplicateTemplateView
+      alertManagerSourceName={selectedAlertmanager!}
+      config={data}
+      templateName={decodeURIComponent(name)}
+    />
+  );
 };
 
 export default NewMessageTemplate;

public/app/features/alerting/unified/components/contact-points/__mocks__/alertmanager.config.mock.json

@@ -1,5 +1,7 @@
 {
-  "template_files": {},
+  "template_files": {
+    "some template": "{{ define 'some template' }}  something {{ end }}"
+  },
   "alertmanager_config": {
     "route": {
       "receiver": "grafana-default-email",

public/app/features/alerting/unified/components/contact-points/__mocks__/grafanaManagedServer.ts

@@ -22,7 +22,13 @@ export default (server: SetupServer) => {
       HttpResponse.json<ReceiversStateDTO[]>(receiversMock)
     ),
     // this endpoint will respond if the OnCall plugin is installed
-    http.get('/api/plugins/grafana-oncall-app/settings', () => HttpResponse.json({}, { status: 404 }))
+    http.get('/api/plugins/grafana-oncall-app/settings', () => HttpResponse.json({}, { status: 404 })),
+
+    // this endpoint looks up alerts when copying notification template
+    http.get('/api/alertmanager/grafana/api/v2/alerts', () => HttpResponse.json([])),
+
+    // this endpoint returns preview of a template we're editing
+    http.post('/api/alertmanager/grafana/config/api/v1/templates/test', () => HttpResponse.json({}, { status: 200 }))
   );
 
   // this endpoint is for rendering the "additional AMs to configure" warning

public/app/features/alerting/unified/components/contact-points/__snapshots__/NewContactPoint.test.tsx.snap

@@ -154,7 +154,9 @@ exports[`should be able to test and save a receiver 2`] = `
       },
     },
     "template_file_provenances": {},
-    "template_files": {},
+    "template_files": {
+      "some template": "{{ define 'some template' }}  something {{ end }}",
+    },
   },
 ]
 `;