From adf1402ff8409bf8a0dbebade0a943d5ea37d528 Mon Sep 17 00:00:00 2001 From: Alex Khomenko Date: Mon, 9 Sep 2024 13:54:43 +0300 Subject: [PATCH] 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 | 2 +- packages/grafana-ui/package.json | 3 +- .../grafana-ui/src/components/Link/Link.tsx | 2 +- .../src/components/Link/TextLink.test.tsx | 2 +- .../plugins/components/AppRootPage.test.tsx | 14 ++------ yarn.lock | 34 +++++-------------- 6 files changed, 15 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index 4f8297e540b..757797e0993 100644 --- a/package.json +++ b/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", diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 58c2acd67c0..c127aa3f076 100644 --- a/packages/grafana-ui/package.json +++ b/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", diff --git a/packages/grafana-ui/src/components/Link/Link.tsx b/packages/grafana-ui/src/components/Link/Link.tsx index 390a681265c..8194fbb98b1 100644 --- a/packages/grafana-ui/src/components/Link/Link.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/Link/TextLink.test.tsx b/packages/grafana-ui/src/components/Link/TextLink.test.tsx index f1cb7d77468..d31917b4d7d 100644 --- a/packages/grafana-ui/src/components/Link/TextLink.test.tsx +++ b/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'; diff --git a/public/app/features/plugins/components/AppRootPage.test.tsx b/public/app/features/plugins/components/AppRootPage.test.tsx index 8afc60c079b..db244781749 100644 --- a/public/app/features/plugins/components/AppRootPage.test.tsx +++ b/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: () => , } as unknown as RouteDescriptor; @@ -100,11 +96,7 @@ async function renderUnderRouter(page = '') { render( - - - } /> - - + } /> ); } diff --git a/yarn.lock b/yarn.lock index 1d2bb386279..2924d598da4 100644 --- a/yarn.lock +++ b/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"