Routing: Update alerting template routes (#94366)

* Templates: Remove Switch routes

* Update tests

* Fix test

* Revert mock behaviour and render AppNotificationList

---------

Co-authored-by: Tom Ratcliffe <tom.ratcliffe@grafana.com>

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

@@ -1,4 +1,6 @@
+import { InitialEntry } from 'history/createMemoryHistory';
 import * as React from 'react';
+import { Route, Routes } from 'react-router-dom-v5-compat';
 import { Props } from 'react-virtualized-auto-sizer';
 import { render, screen, within } from 'test/test-utils';
 import { byRole } from 'testing-library-selector';
@@ -54,23 +56,35 @@ beforeEach(() => {
   grantUserPermissions([AccessControlAction.AlertingNotificationsRead, AccessControlAction.AlertingNotificationsWrite]);
 });
 
+const setup = (initialEntries: InitialEntry[]) => {
+  return render(
+    <>
+      <AppNotificationList />
+      <Routes>
+        <Route path="/alerting/notifications/templates/*" element={<Templates />} />
+      </Routes>
+    </>,
+    {
+      historyOptions: { initialEntries },
+    }
+  );
+};
+
 describe('Templates routes', () => {
   it('allows duplication of template with spaces in name', async () => {
-    render(<Templates />, {
-      historyOptions: { initialEntries: [navUrl.duplicate('template%20with%20spaces')] },
-    });
+    setup([navUrl.duplicate('template%20with%20spaces')]);
 
     expect(await screen.findByText('Edit payload')).toBeInTheDocument();
   });
 
   it('allows editing of template with spaces in name', async () => {
-    render(<Templates />, { historyOptions: { initialEntries: [navUrl.edit('template%20with%20spaces')] } });
+    setup([navUrl.edit('template%20with%20spaces')]);
 
     expect(await screen.findByText('Edit payload')).toBeInTheDocument();
   });
 
   it('renders empty template form', async () => {
-    render(<Templates />, { historyOptions: { initialEntries: [navUrl.new] } });
+    setup([navUrl.new]);
 
     const form = await ui.templateForm.find();
 
@@ -83,9 +97,7 @@ describe('Templates K8s API', () => {
   testWithFeatureToggles(['alertingApiServer']);
 
   it('form edit renders with correct form values', async () => {
-    render(<Templates />, {
-      historyOptions: { initialEntries: [navUrl.edit('k8s-custom-email-resource-name')] },
-    });
+    setup([navUrl.edit('k8s-custom-email-resource-name')]);
 
     const form = await ui.templateForm.find();
 
@@ -97,9 +109,7 @@ describe('Templates K8s API', () => {
   });
 
   it('renders duplicate template form with correct values', async () => {
-    render(<Templates />, {
-      historyOptions: { initialEntries: [navUrl.duplicate('k8s-custom-email-resource-name')] },
-    });
+    setup([navUrl.duplicate('k8s-custom-email-resource-name')]);
 
     const form = await ui.templateForm.find();
 
@@ -111,15 +121,7 @@ describe('Templates K8s API', () => {
   });
 
   it('updates a template', async () => {
-    const { user } = render(
-      <>
-        <Templates />
-        <AppNotificationList />
-      </>,
-      {
-        historyOptions: { initialEntries: [navUrl.edit('k8s-custom-email-resource-name')] },
-      }
-    );
+    const { user } = setup([navUrl.edit('k8s-custom-email-resource-name')]);
 
     const form = await ui.templateForm.find();
 

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

@@ -1,15 +1,11 @@
-import { Route, Switch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom-v5-compat';
 
 import { withErrorBoundary } from '@grafana/ui';
-import { SafeDynamicImport } from 'app/core/components/DynamicImports/SafeDynamicImport';
 
 import { AlertmanagerPageWrapper } from './components/AlertingPageWrapper';
-
-const EditMessageTemplate = SafeDynamicImport(() => import('./components/contact-points/EditMessageTemplate'));
-const NewMessageTemplate = SafeDynamicImport(() => import('./components/contact-points/NewMessageTemplate'));
-const DuplicateMessageTemplate = SafeDynamicImport(
-  () => import('./components/contact-points/DuplicateMessageTemplate')
-);
+import DuplicateMessageTemplate from './components/contact-points/DuplicateMessageTemplate';
+import EditMessageTemplate from './components/contact-points/EditMessageTemplate';
+import NewMessageTemplate from './components/contact-points/NewMessageTemplate';
 
 const NotificationTemplates = (): JSX.Element => (
   <AlertmanagerPageWrapper
@@ -17,15 +13,11 @@ const NotificationTemplates = (): JSX.Element => (
     accessType="notification"
     pageNav={{ id: 'templates', text: 'Notification templates', subTitle: 'Create and edit notification templates' }}
   >
-    <Switch>
-      <Route exact={true} path="/alerting/notifications/templates/:name/edit" component={EditMessageTemplate} />
-      <Route exact={true} path="/alerting/notifications/templates/new" component={NewMessageTemplate} />
-      <Route
-        exact={true}
-        path="/alerting/notifications/templates/:name/duplicate"
-        component={DuplicateMessageTemplate}
-      />
-    </Switch>
+    <Routes>
+      <Route path=":name/edit" element={<EditMessageTemplate />} />
+      <Route path="new" element={<NewMessageTemplate />} />
+      <Route path=":name/duplicate" element={<DuplicateMessageTemplate />} />
+    </Routes>
   </AlertmanagerPageWrapper>
 );
 

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

@@ -1,4 +1,4 @@
-import { RouteChildrenProps } from 'react-router-dom';
+import { useParams } from 'react-router-dom-v5-compat';
 
 import { Alert, LoadingPlaceholder } from '@grafana/ui';
 import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound';
@@ -12,13 +12,12 @@ import { TemplateForm } from '../receivers/TemplateForm';
 
 import { useGetNotificationTemplate, useNotificationTemplates } from './useNotificationTemplates';
 
-type Props = RouteChildrenProps<{ name: string }>;
-
 const notFoundComponent = <EntityNotFound entity="Notification template" />;
 
-const DuplicateMessageTemplate = ({ match }: Props) => {
+const DuplicateMessageTemplate = () => {
   const { selectedAlertmanager } = useAlertmanager();
-  const templateUid = match?.params.name ? decodeURIComponent(match?.params.name) : undefined;
+  const { name } = useParams<{ name: string }>();
+  const templateUid = name ? decodeURIComponent(name) : undefined;
 
   const {
     currentData: template,

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

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom-v5-compat';
 
 import { Alert, LoadingPlaceholder } from '@grafana/ui';
 import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound';