Routing: Import useLocation from compat package (grafana#92071)

* Routing: Import useLocation from compat package

* Add ComparRouter

* Add CompatRouter

* Fix tests

* Add CompatRouter to TestProvider

* Use findBy

* Remove AppChromeService

* Remove historyOptions

* Routing: Fix alerting/test utils issues from react compat router usage (grafana#92127)

* Use render from test-utils

* Use compat router

* Convert more tests

---------

Co-authored-by: Tom Ratcliffe <[email protected]>

Author: Clarity-89

public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { DOMAttributes } from '@react-types/shared';
 import { memo, forwardRef, useCallback } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

public/app/core/components/AppChrome/MegaMenu/MegaMenuItem.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import { useEffect, useRef } from 'react';
 import * as React from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { useLocalStorage } from 'react-use';
 
 import { GrafanaTheme2, NavModelItem, toIconName } from '@grafana/data';

public/app/core/components/AppChrome/TopBar/SignInLink.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 import { GrafanaTheme2, locationUtil, textUtil } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';

public/app/core/components/AppChrome/TopBar/TopSearchBar.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { cloneDeep } from 'lodash';
 import { memo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 import { GrafanaTheme2, locationUtil, textUtil } from '@grafana/data';
 import { Dropdown, ToolbarButton, useStyles2 } from '@grafana/ui';

public/app/core/hooks/useQueryParams.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 import { UrlQueryMap } from '@grafana/data';
 import { locationSearchToObject, locationService } from '@grafana/runtime';

public/app/core/navigation/GrafanaRouteError.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { ErrorInfo, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 import { GrafanaTheme2, locationUtil, PageLayoutType } from '@grafana/data';
 import { Button, ErrorWithStack, useStyles2 } from '@grafana/ui';

public/app/core/navigation/hooks.ts

@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 import { locationService } from '@grafana/runtime';
 

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

@@ -2,6 +2,7 @@ import { render, 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 { config, locationService } from '@grafana/runtime';
 import { contextSrv } from 'app/core/core';
@@ -347,7 +348,9 @@ describe('Policy', () => {
 const renderPolicy = (element: JSX.Element) =>
   render(
     <Router history={locationService.getHistory()}>
-      <AlertmanagerProvider accessType="notification">{element}</AlertmanagerProvider>
+      <CompatRouter>
+        <AlertmanagerProvider accessType="notification">{element}</AlertmanagerProvider>
+      </CompatRouter>
     </Router>
   );
 

public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { render } from 'test/test-utils';
 
 import { PanelModel } from 'app/features/dashboard/state';
 import { createDashboardModelFixture } from 'app/features/dashboard/state/__fixtures__/dashboardFixtures';
@@ -16,12 +17,6 @@ jest.mock('app/types', () => {
   };
 });
 
-jest.mock('react-router-dom', () => ({
-  useLocation: () => ({
-    pathname: 'localhost:3000/example/path',
-  }),
-}));
-
 jest.spyOn(analytics, 'logInfo');
 
 jest.mock('react-use', () => ({

public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx

@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { useAsync } from 'react-use';
 
 import { urlUtil } from '@grafana/data';