将插件从 Grafana 10.0.x 版本迁移到 10.1.x 版本

请遵循以下说明将插件从 Grafana 10.0.x 版本迁移到 10.1.x 版本。

grafana-ui 中 IconButton 组件的可访问性更新

由于可访问性问题，我们更新了组件的 TypeScript 接口。此更改已通过 PR 69699 交付到核心 grafana 仓库。

如果您在插件中使用了 IconButton 组件，您将收到与此更改相关的 TypeScript 错误。

推荐的操作

• 审查您的插件中 IconButton 的使用场景。
• 添加一个有意义的工具提示，组件也将用作 aria-label。
• 另一种选择是设置 aria-label。在这种情况下，将不显示工具提示。

请注意： IconButton 以前有一个名为 ariaLabel 的属性，此更改已弃用该属性。您现在可以使用常规属性 aria-label 代替。

更新到 React Router v6

从 Grafana 10 开始，插件可以开始使用 react-router 的 v6 版本。总的来说，react-router v6 旨在简化路由配置，并为开发者提供更灵活、更直观的 API。

如果您当前的插件版本需要与 Grafana v9 保持兼容，则您可以在 Grafana v10 中继续使用 react-router@v5。两个版本都可用于插件。但是，我们强烈建议开发者尽快将其插件更新到使用 react-router 的 v6 版本，因为 v5 版本将在 Grafana v11 中弃用并随后移除。

有关更多通用信息，请参阅 官方 React Router v5 到 v6 迁移指南。

使用 @grafana/create-plugin 更新

按照以下步骤在插件中开始使用 react-router v6

1. 更新与构建相关的配置：

通过在 <project-root>/.cprc.json 中设置以下功能标志，启用使用 react-router@v6

<project-root>/.cprc.json

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

现在使用 create-plugin 工具更新构建配置

npm

npx @grafana/create-plugin@latest update

Yarn

yarn dlx @grafana/create-plugin@latest update

pnpm

pnpm dlx @grafana/create-plugin@latest update

更新构建配置后，您可能需要对插件进行额外更新。为此，请按照以下步骤操作

2. 使用 <Routes> 而不是 <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. 从 <Route> 组件中移除 exact prop

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. 修复 location service 方法导致的测试失败

当使用 @grafana/runtime 中的 locationService.replace()、locationService.push() 或类似方法时，迁移到 React Router v6 后您的测试可能会失败。通过使用 <LocationServiceProvider /> 组件（在 Grafana 11.2.0 中引入）在测试中为 location service 创建提供者来解决此问题。

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. 遵循原始的 react-router 迁移指南以进行更深入的更改

访问官方 react-router v5 到 v6 迁移指南了解更多信息。