chore: migrate to React Router v6

[VikaCep]

Migrate to React Router v6

Closes #713

Problem

The application was using react-router-dom-v5-compat as a bridge between React Router v5 and v6. This compatibility layer:

• Added unnecessary bundle size overhead
• Required maintaining two different routing patterns in the codebase
• Is deprecated and will be removed in future Grafana versions

Additionally, the test infrastructure relied on React Router v5 APIs through @grafana/ui components (Link, TextLink) and @grafana/runtime's locationService, which caused test failures after migrating to v6.

Solution

This PR completes the migration to React Router v6 by:

Runtime changes:

• Upgraded react-router-dom from v5-compat to v6.27.0
• Removed react-router-dom-v5-compat dependency entirely
• Updated all navigation to use v6 APIs (useNavigate, useParams, useLocation)
• Updated programmatic navigation to use locationService from @grafana/runtime
  ==> locationService.push()/replace() is preferred as it's a Grafana's abstraction, integrates with Grafana's location tracking/observability. useNavigate(), React Router's native hook, works but bypasses Grafana's layer

Test infrastructure updates:

• Refactored test/render.tsx to use Router with locationService.getHistory() so both React Router and locationService share the same history instance
• Updated @grafana/runtime mock for locationService implementation including history.block() support required by ConfirmLeavingPage
• Updated @grafana/ui mock for Link and TextLink components to work without React Router v5 context (these components internally depend on v5)

Dependencies:

• React upgraded to 18.3.0
• Grafana packages upgraded to 12.2.0
• Updated @grafana/create-plugin to v6.7.8
• Enabled useReactRouterV6 feature flag

Notes

The test mocks for @grafana/ui components (Link, TextLink) are necessary because these components internally use React Router v5 APIs. Once Grafana updates @grafana/ui to support v6 natively these mocks should be simplified or removed.

[github-actions]

Script size changes

Name	+/-	Main	This PR	Outcome
[217.js]	New file	-	2,190.04 kB	✅
[361.js]	New file	-	801.47 kB	✅
[datasource/module.js]	+0.27%	25.18 kB	25.25 kB	✅
[692.js]	=	20.64 kB	20.64 kB	✅
[663.js]	=	5.83 kB	5.83 kB	✅
[module.js]	+1.26%	4.54 kB	4.59 kB	✅
[156.js]	=	1.90 kB	1.90 kB	✅
[411.js]	Deleted file	2,178.85 kB	-
[854.js]	Deleted file	801.09 kB	-

Totals

Name	+/-	Main	This PR	Outcome
[Scripts]	+0.39%	3,038.02 kB	3,049.72 kB	✅
[Non-script Assets]	=	2,677.50 kB	2,677.50 kB	✅
[All]	+0.20%	5,715.52 kB	5,727.22 kB	✅

Generated by 🚫 dangerJS against fc72497

[g3john]

LGTM!

[ckbedwell]

One super teeny tiny nit.

This is great and glad we've removed this tech debt -- one thing that I couldn't work out as I was reviewing this PR: when should we use hooks from react-router directly vs locationService -- I even noticed there is a hook in the runtime package called useLocationService.

Does it make sense to migrate everything to using the location service abstraction at some point in the future so we are removed from the implementation detail of react-router or is it encouraged for us to use its hooks and methods directly?

I read through the documentation and couldn't find an answer and spot-checking other plugins I think they are as equally split as we are...

[VikaCep]

@ckbedwell Good question, locationService seems to be a wrapper around the history package. It handles programmatic navigation (push, replace, partial) and reading the current location, but it has no concept of route params, route matching, path generation, or nested routing. Those are purely React Router's domain.
So the way I see it:

• locationService for programmatic navigation as it's Grafana's way to write to history
• React Router hooks for reading route state (useParams, useSearchParams, useLocation) as there is no locationService equivalents.
• React Router components for route declarations (Route, Routes, Navigate), no Grafana abstraction for these either

They're complementary. locationService wraps history, React Router consumes that same history.