Skip to main content

Migrate plugins from Grafana version 10.0.x to 10.1.x

Follow these instructions to migrate plugins from Grafana version 10.0.x to 10.1.x.

Accessibility update for IconButton component in grafana-ui​

We updated the component's TypeScript interface due to an accessibility issue. This change was delivered to the core grafana repo with PR 69699.

In case you are using the IconButton component in your plugin you will get TypeScript errors related to the change.

Recommended actions:

  • Review use cases of IconButton in your plugin.
  • Add a meaningful tooltip which the component will also use as an aria-label.
  • Another option is to set an aria-label. In this case a tooltip will not be shown.

Please note: The IconButton used to have a property called ariaLabel which got deprecated with this change. You can now use the regular property aria-label instead.

Update to React Router v6​

Starting from Grafana 10, plugins can start using the v6 of react-router. Overall, react-router v6 aims to simplify route configuration and provide a more flexible and intuitive API for developers.

If your current plugin version needs to maintain compatibility with Grafana v9, then you can continue to use react-router@v5 in Grafana v10. Both versions are available for plugins. However, we strongly encourage developers to update their plugins to use the v6 version react-router as soon as possible, as the v5 version is going to be deprecated in Grafana v11 and subsequently removed.

For more general information, refer to the Official React Router v5 to v6 migration guide.

Update using @grafana/create-plugin​

Follow the steps below to start using react-router v6 in your plugin:

Enable using react-router@v6 by setting the following feature flag in <project-root>/.cprc.json:

<project-root>/.cprc.json
{
  "features": {
    "useReactRouterV6": true
  }
}

Now update the build configuration using the create-plugin tool:

npx @grafana/create-plugin@latest update

After updating the build configuration, it is likely that you will need to make additional updates to your plugin. To do so, follow the steps below:

2. Use <Routes> instead of <Switch>​

src/Routes.tsx
// Using <Routes> instead of <Switch> in `react-router` v6
import { Routes } from 'react-router-dom';

// ...

return (
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
);

3. Remove the exact prop from <Route> components​

src/Routes.tsx
return (
  <Routes>
    {/* BAD (Until v5) */}
    <Route exact path="/" element={<Home />} />

    {/* GOOD (From v6) */}
    {/* (Routes are "exact" by default, you need to use the "*" to match sub-routes) */}
    <Route path="/" element={<Home />} />
  </Routes>
);

4. Fix test failures with location service methods​

When using locationService.replace(), locationService.push(), or similar methods from @grafana/runtime, your tests might fail after migrating to React Router v6. Solve this by using the <LocationServiceProvider /> component (introduced in Grafana 11.2.0) to create a provider for the location service in your tests.

test/test-utils.tsx
import { locationService, LocationServiceProvider } from '@grafana/runtime';
import React, { useEffect, useState } from 'react';
import { Router } from 'react-router-dom';

const history = locationService.getHistory();

export function TestRoutesProvider({ children }: { children: React.ReactNode }) {
  const [location, setLocation] = useState(history.location);

  useEffect(() => {
    history.listen(setLocation);
  }, []);

  return (
    <LocationServiceProvider service={locationService}>
      <Router navigator={history} location={location}>
        {children}
      </Router>
    </LocationServiceProvider>
  );
}

5. Follow the original react-router migration guide for more in-depth changes​

Visit the official react-router v5 to v6 migration guide for more information.