Grafana/ui: Update Link component to react router 6 (#92976)

* Grafana/ui: Update Link component to react router 6

* Add compat package to grafana/ui

package.json

@@ -375,7 +375,7 @@
     "react-responsive-carousel": "^3.2.23",
     "react-router": "5.3.3",
     "react-router-dom": "5.3.3",
-    "react-router-dom-v5-compat": "^6.10.0",
+    "react-router-dom-v5-compat": "^6.26.1",
     "react-select": "5.8.0",
     "react-split-pane": "0.1.92",
     "react-table": "7.8.0",

packages/grafana-ui/package.json

@@ -98,7 +98,7 @@
     "react-i18next": "^14.0.0",
     "react-inlinesvg": "3.0.2",
     "react-loading-skeleton": "3.4.0",
-    "react-router-dom": "5.3.3",
+    "react-router-dom-v5-compat": "^6.26.1",
     "react-select": "5.8.0",
     "react-table": "7.8.0",
     "react-transition-group": "4.4.5",
@@ -151,7 +151,6 @@
     "@types/react-color": "3.0.12",
     "@types/react-dom": "18.2.25",
     "@types/react-highlight-words": "0.20.0",
-    "@types/react-router-dom": "5.3.3",
     "@types/react-test-renderer": "18.3.0",
     "@types/react-transition-group": "4.4.11",
     "@types/react-window": "1.8.8",

packages/grafana-ui/src/components/Link/Link.tsx

@@ -1,5 +1,5 @@
 import { AnchorHTMLAttributes, forwardRef } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom-v5-compat';
 
 import { locationUtil, textUtil } from '@grafana/data';
 

packages/grafana-ui/src/components/Link/TextLink.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom-v5-compat';
 
 import { GrafanaConfig, locationUtil } from '@grafana/data';
 

public/app/features/plugins/components/AppRootPage.test.tsx

@@ -1,18 +1,15 @@
-import { act, render, screen } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 import { Component } from 'react';
-import { Provider } from 'react-redux';
 import { Route, Router } from 'react-router-dom';
-import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock';
+import { render } from 'test/test-utils';
 
 import { AppPlugin, PluginType, AppRootProps, NavModelItem, PluginIncludeType, OrgRole } from '@grafana/data';
 import { getMockPlugin } from '@grafana/data/test/__mocks__/pluginMocks';
 import { locationService, setEchoSrv } from '@grafana/runtime';
-import { GrafanaContext } from 'app/core/context/GrafanaContext';
 import { GrafanaRoute } from 'app/core/navigation/GrafanaRoute';
 import { RouteDescriptor } from 'app/core/navigation/types';
 import { contextSrv } from 'app/core/services/context_srv';
 import { Echo } from 'app/core/services/echo/Echo';
-import { configureStore } from 'app/store/configureStore';
 
 import { getPluginSettings } from '../pluginSettings';
 import { importAppPlugin } from '../plugin_loader';
@@ -89,7 +86,6 @@ async function renderUnderRouter(page = '') {
   appPluginNavItem.parentItem = appsSection;
 
   const pagePath = page ? `/${page}` : '';
-  const store = configureStore();
   const route = {
     component: () => <AppRootPage pluginId="my-awesome-plugin" pluginNavSection={appsSection} />,
   } as unknown as RouteDescriptor;
@@ -100,11 +96,7 @@ async function renderUnderRouter(page = '') {
 
   render(
     <Router history={locationService.getHistory()}>
-      <Provider store={store}>
-        <GrafanaContext.Provider value={getGrafanaContextMock()}>
-          <Route path={`/a/:pluginId${pagePath}`} exact render={(props) => <GrafanaRoute {...props} route={route} />} />
-        </GrafanaContext.Provider>
-      </Provider>
+      <Route path={`/a/:pluginId${pagePath}`} exact render={(props) => <GrafanaRoute {...props} route={route} />} />
     </Router>
   );
 }

yarn.lock

@@ -4092,7 +4092,6 @@ __metadata:
     "@types/react-color": "npm:3.0.12"
     "@types/react-dom": "npm:18.2.25"
     "@types/react-highlight-words": "npm:0.20.0"
-    "@types/react-router-dom": "npm:5.3.3"
     "@types/react-table": "npm:7.7.20"
     "@types/react-test-renderer": "npm:18.3.0"
     "@types/react-transition-group": "npm:4.4.11"
@@ -4146,7 +4145,7 @@ __metadata:
     react-i18next: "npm:^14.0.0"
     react-inlinesvg: "npm:3.0.2"
     react-loading-skeleton: "npm:3.4.0"
-    react-router-dom: "npm:5.3.3"
+    react-router-dom-v5-compat: "npm:^6.26.1"
     react-select: "npm:5.8.0"
     react-select-event: "npm:^5.1.0"
     react-table: "npm:7.8.0"
@@ -6725,13 +6724,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.14.2":
-  version: 1.14.2
-  resolution: "@remix-run/router@npm:1.14.2"
-  checksum: 10/422844e88b985f1e287301b302c6cf8169c9eea792f80d40464f97b25393bb2e697228ebd7a7b61444d5a51c5873c4a637aad20acde5886a5caf62e833c5ceee
-  languageName: node
-  linkType: hard
-
 "@remix-run/router@npm:1.19.1":
   version: 1.19.1
   resolution: "@remix-run/router@npm:1.19.1"
@@ -18797,7 +18789,7 @@ __metadata:
     react-responsive-carousel: "npm:^3.2.23"
     react-router: "npm:5.3.3"
     react-router-dom: "npm:5.3.3"
-    react-router-dom-v5-compat: "npm:^6.10.0"
+    react-router-dom-v5-compat: "npm:^6.26.1"
     react-select: "npm:5.8.0"
     react-select-event: "npm:5.5.1"
     react-split-pane: "npm:0.1.92"
@@ -27460,17 +27452,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom-v5-compat@npm:^6.10.0":
-  version: 6.21.3
-  resolution: "react-router-dom-v5-compat@npm:6.21.3"
+"react-router-dom-v5-compat@npm:^6.26.1":
+  version: 6.26.1
+  resolution: "react-router-dom-v5-compat@npm:6.26.1"
   dependencies:
+    "@remix-run/router": "npm:1.19.1"
     history: "npm:^5.3.0"
-    react-router: "npm:6.21.3"
+    react-router: "npm:6.26.1"
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
     react-router-dom: 4 || 5
-  checksum: 10/ed40e3e241a8c2a85aa0a95b52b77b9b9667e3f1a48a8a60e0b33e3c615c3b490b6c3a645ea92efc5783251111d039a5c809b779e1a93b9da23de6e97e4e1bd0
+  checksum: 10/c8249404e0b219ff00797ae0ff8818394a07309b62617a9a4e47d5a8769801098431ceec38eca8c712cbee4a04843326cb2334ed15ea08b7848b5ce5a58ad0a3
   languageName: node
   linkType: hard
 
@@ -27524,17 +27517,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router@npm:6.21.3":
-  version: 6.21.3
-  resolution: "react-router@npm:6.21.3"
-  dependencies:
-    "@remix-run/router": "npm:1.14.2"
-  peerDependencies:
-    react: ">=16.8"
-  checksum: 10/3d5107cfdb440519d84e6ad6d95454e3bf41ec97677b95f7b2a7f281f8ddf191b765cf1b599ead951f3cd33ed4429f140590d74a01cfdf835dc2f812023a978a
-  languageName: node
-  linkType: hard
-
 "react-router@npm:6.26.1":
   version: 6.26.1
   resolution: "react-router@npm:6.26.1"