Routing: Update alerting routes to react router 6 (#94469)

* Update alertingRuleEditor

* Update Policy.test

* Update AlertRuleForm

* Update ReceiversSection

* Update SimplifiedRuleEditor.test.tsx

* Update CloneRule.tsx

public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx

@@ -1,10 +1,10 @@
-import { render, renderHook, screen, within } from '@testing-library/react';
+import { renderHook, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { first, noop } from 'lodash';
-import { Router } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
+import { Routes, Route } from 'react-router-dom-v5-compat';
+import { render } from 'test/test-utils';
 
-import { config, locationService } from '@grafana/runtime';
+import { config } from '@grafana/runtime';
 import { contextSrv } from 'app/core/core';
 import {
   AlertmanagerGroup,
@@ -345,13 +345,17 @@ describe('Policy', () => {
   });
 });
 
+// Doesn't matter which path the routes use, it just needs to match the initialEntries history entry to render the element
 const renderPolicy = (element: JSX.Element) =>
   render(
-    <Router history={locationService.getHistory()}>
-      <CompatRouter>
-        <AlertmanagerProvider accessType="notification">{element}</AlertmanagerProvider>
-      </CompatRouter>
-    </Router>
+    <Routes>
+      <Route path={'/'} element={<AlertmanagerProvider accessType="notification">{element}</AlertmanagerProvider>} />
+    </Routes>,
+    {
+      historyOptions: {
+        initialEntries: ['/'],
+      },
+    }
   );
 
 const eq = MatcherOperator.equal;

public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormProvider, SubmitErrorHandler, UseFormWatch, useForm } from 'react-hook-form';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom-v5-compat';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { config, locationService } from '@grafana/runtime';
@@ -82,7 +82,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
   const routeParams = useParams<{ type: string; id: string }>();
   const ruleType = translateRouteParamToRuleType(routeParams.type);
 
-  const uidFromParams = routeParams.id;
+  const uidFromParams = routeParams.id || '';
 
   const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
 

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/SimplifiedRuleEditor.test.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom-v5-compat';
 import { ui } from 'test/helpers/alertingRuleEditor';
 import { clickSelectOption } from 'test/helpers/selectOptionInTest';
 import { render, screen, waitForElementToBeRemoved, userEvent } from 'test/test-utils';
@@ -157,7 +157,10 @@ describe('Can create a new grafana managed alert using simplified routing', () =
 function renderSimplifiedRuleEditor() {
   return render(
     <AlertmanagerProvider alertmanagerSourceName={GRAFANA_DATASOURCE_NAME} accessType="notification">
-      <Route path={['/alerting/new/:type', '/alerting/:id/edit']} component={RuleEditor} />
+      <Routes>
+        <Route path={'/alerting/new/:type'} element={<RuleEditor />} />
+        <Route path={'/alerting/:id/edit'} element={<RuleEditor />} />
+      </Routes>
     </AlertmanagerProvider>,
     { historyOptions: { initialEntries: ['/alerting/new/alerting'] } }
   );

public/app/features/alerting/unified/components/rules/CloneRule.tsx

@@ -1,6 +1,5 @@
 import { forwardRef, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { Navigate } from 'react-router-dom-v5-compat';
+import { Navigate, useLocation } from 'react-router-dom-v5-compat';
 
 import { Button, ConfirmModal } from '@grafana/ui';
 import { RuleIdentifier } from 'app/types/unified-alerting';

public/test/helpers/alertingRuleEditor.tsx

@@ -1,4 +1,4 @@
-import { Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom-v5-compat';
 import { render } from 'test/test-utils';
 import { byRole, byTestId, byText } from 'testing-library-selector';
 
@@ -35,11 +35,17 @@ export const ui = {
 };
 
 export function renderRuleEditor(identifier?: string, recording = false) {
-  return render(<Route path={['/alerting/new/:type', '/alerting/:id/edit']} component={RuleEditor} />, {
-    historyOptions: {
-      initialEntries: [
-        identifier ? `/alerting/${identifier}/edit` : `/alerting/new/${recording ? 'recording' : 'alerting'}`,
-      ],
-    },
-  });
+  return render(
+    <Routes>
+      <Route path={'/alerting/new/:type'} element={<RuleEditor />} />
+      <Route path={'/alerting/:id/edit'} element={<RuleEditor />} />
+    </Routes>,
+    {
+      historyOptions: {
+        initialEntries: [
+          identifier ? `/alerting/${identifier}/edit` : `/alerting/new/${recording ? 'recording' : 'alerting'}`,
+        ],
+      },
+    }
+  );
 }