Update to react-router@6

[leventebalogh]

Fixes #608

Updates the scenes packages to use react-router v6.
This probably requires a major version bump, as it's going to be a breaking change for plugins that depend on scenes.

Why?

We are in the process of migrating Grafana core and also internal plugins to use react-router v6, however any plugin that is depending on scenes cannot easily do it (or at least it's a complicated task). Scenes still using react-router v5 is a blocker for plugins that would like to update.

Huge thanks to @jackw for the help of discovering and removing some of the circular dependences in the scenes package that were causing Jest to go mental.

Release notes

This release marks a big change where scene app based routing is using react-router v6 under the hood. This sadly requires several changes to plugins as react-router now requires all route paths to be relative.

Updating a plugin

Example plugin update PR →

1. Bump react-router-dom - package.json

-"react-router-dom": "^5.2.0",
+"react-router-dom": "^6.22.0",

2. Remove @types/react-router-dom - package.json

-"@types/react-router-dom": "^5.2.0",

3. Stop externalisingreact-router-dom - .config/webpack/webpack.config.ts

externals: [
      // Required for dynamic publicPath resolution
      { 'amd-module': 'module' },
      'lodash',
      'jquery',
      'moment',
      'slate',
      'emotion',
      '@emotion/react',
      '@emotion/css',
      'prismjs',
      'slate-plain-serializer',
      '@grafana/slate-react',
      'react',
      'react-dom',
      'react-redux',
      'redux',
      'rxjs',
      'react-router',
-    'react-router-dom',
      'd3',
      'angular',
      '@grafana/ui',
      '@grafana/runtime',
      '@grafana/data',

4. Enable react-router@v6 - .cprc.json
   Add the following line in the .cprc.json:

{
  "features": {
+   "useReactRouterV6": true
  }
}

4. <Route>: use relative wildcard routes

-<Route path="/a/myorg-example-app/home ... />
+<Route path="home/*" ... />

6. <Route>: use the element prop

-<Route ... component={WithDrilldown} />
+<Route ... element={<WithDrilldown />} />

7. <Switch>: replace with Routes

-import { Switch } from "react-router-dom";
+import { Routes } from "react-router-dom";  

-<Switch> ... </Switch>
+<Routes> ... </Routes>

8. Add a relative routePath prop to each <SceneAppPage>. It needs to include a wildcard if there are any drill-down or tab pages under it.

-new SceneAppPage({
-  url: "/a/myorg-example-app/home",
-  ...
- });
+new SceneAppPage({
+  url: "/a/myorg-example-app/home",
+  routePath: "home/*",
+  ...
+})

9. Make the routePath prop defined on drill-downs relative and include a wildcard.

Testing

• Works with core Grafana (pull request)
• Scaffolding a new app plugin with scenes (pull request)
• Grafana new scenes - Plugin old scenes (router v5) (tested locally)
• Grafana new scenes - Plugin new scenes (router v6) (tested locally)
• Grafana old scenes - Plugin new scenes (router v6) (tested locally)
• Updating an existing app plugin (explore-logs pull request)

📦 Published PR as canary version: 6.0.0--canary.979.13200094417.0

✨ Test out this PR locally via:

npm install @grafana/[email protected]
npm install @grafana/[email protected]
# or 
yarn add @grafana/[email protected]
yarn add @grafana/[email protected]

[torkelo]

Pushed an update to get SceneAppPage and most demos to work

Scene apps needs a big update

• add routePath to all SceneAppPage definitions (with * wildcard if they have drilldowns) this needs to be relative not absolute
• the url property on SceneAppPage needs to remain and be absolute as it's used to create breadcrumbs and tab links
• routePath on all drilldowns needs to be relative and end in wildcard

[leventebalogh]

I have spent sometime trying to green out all the test case, and although I think got somewhere, there are some weird things that might need someone with deeper knowledge of the scenes projects.

The main issue is with the tests under the scenes package: for some reason the inline jest.mock() calls don't seem to go through, while mocking via a __mocks__ directory is still working. Obviously it wouldn't make sense to transition all the tests to use a __mocks__ folder solution, we should instead find the root cause. (There was one issue we discovered with @jackw in the jest config: we also needed to introduce a "setupFiles" and move parts of the setupTestsAfterEnv.ts in there, although that didn't fix this problem.)

@grafana/dashboards-squad

[oscarkilhed]

I have spent sometime trying to green out all the test case, and although I think got somewhere, there are some weird things that might need someone with deeper knowledge of the scenes projects.

The main issue is with the tests under the scenes package: for some reason the inline jest.mock() calls don't seem to go through, while mocking via a __mocks__ directory is still working. Obviously it wouldn't make sense to transition all the tests to use a __mocks__ folder solution, we should instead find the root cause. (There was one issue we discovered with @jackw in the jest config: we also needed to introduce a "setupFiles" and move parts of the setupTestsAfterEnv.ts in there, although that didn't fix this problem.)

@grafana/dashboards-squad

@leventebalogh I see the tests are passing, did you find the issue?

[oscarkilhed]

Thanks for working on this @leventebalogh

How does this work for apps built with scenes that run in Grafana? Will they continue to work as long as they are built with an older version of scenes, or will they break when Grafana and scenes runs on router@v6?

[leventebalogh]

@leventebalogh I see the tests are passing, did you find the issue?

Yes, thanks @oscarkilhed, we managed to green them out with @jackw 👍

How does this work for apps built with scenes that run in Grafana? Will they continue to work as long as they are built with an older version of scenes, or will they break when Grafana and scenes runs on router@v6?

I am currently testing out these changes with an example plugin, and as soon as I am done with that I'll update the PR description with correct instructions on what steps plugins need to take for updating. (We will probably also have a migration page for this)

At the time being Grafana still supports plugins both using react-router@v5 or react-router@v6. This means, that plugins built with an earlier scenes version will still be supported (at least until core is updated to use react-router@v6 fully - then they will break). As far as I know scenes is bundled (and not externalised), so it shouldn't be a problem that core is depending on a different version (for now). I'll double check this though as well, and update the PR description!

This must be major version bump though, as any plugins updating to this scenes version will also need to update some things in their source code.

[leventebalogh]

@torkelo @dprokop could you please have a look if you think it's legit? (I have updated the PR description with a guide for upgrading plugins.)

[Sergej-Vlasov]

@leventebalogh do we need any additional steps for this to work in grafana/grafana? Did a draft scenes bump PR to launch a drone pipeline and quite a lot of tests are erroring out 🤔

[leventebalogh]

Thanks @Sergej-Vlasov, nice catch! 🙏

It looks like the issue was that core Grafana had a different version of react-router-dom than what was bundled with the @grafana/scenes package. To mitigate the issue I have moved the react-router-dom to be a peer and dev dependency of the scenes package. Hopefully the CI tests on your PR will get green, soon (I managed to green them out locally).

[Sergej-Vlasov]

@leventebalogh great job! This seems to be working now!

Since this is a major release lets postpone the merge a bit to allow any bugfixes/docs to land before hand. You can still start working on updating plugins in the mean time by using canary release of this PR.

We have the release notes with how to handle this breaking change but I think it would also be beneficial to include this in https://grafana.com/developers/scenes/

[leventebalogh]

@Sergej-Vlasov Thanks, sure 👍

We have the release notes with how to handle this breaking change but I think it would also be beneficial to include this in https://grafana.com/developers/scenes/

Yeah, I think adding some migration docs would make sense as well, as this is a bit more "complicated" change, similar to what we have in https://grafana.com/developers/plugin-tools/migration-guides/update-from-grafana-versions/.

[scenes-repo-bot-access-token]

🚀 PR was released in v6.0.0 🚀