From b34cd5df35c2ab56b1520495c02fa33e08ea74be Mon Sep 17 00:00:00 2001 From: Marcus Andersson Date: Thu, 16 Apr 2026 16:09:48 +0200 Subject: [PATCH 1/2] Docs: Add datasource picker virtualization migration guide Co-Authored-By: Claude Opus 4.6 --- .../v12.x-v13.x.md | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/docusaurus/docs/migration-guides/update-from-grafana-versions/v12.x-v13.x.md b/docusaurus/docs/migration-guides/update-from-grafana-versions/v12.x-v13.x.md index fc1ca8ca4a..725dd8d66f 100644 --- a/docusaurus/docs/migration-guides/update-from-grafana-versions/v12.x-v13.x.md +++ b/docusaurus/docs/migration-guides/update-from-grafana-versions/v12.x-v13.x.md @@ -11,6 +11,8 @@ keywords: - migration - react 19 - ui-extensions + - datasource picker + - test-utils --- # Migrate plugins from Grafana version 12.x to 13.x @@ -332,3 +334,53 @@ export const plugin = new AppPlugin().addLink({ :::note The `category` property still works but will be removed in a future version of Grafana. Update your plugins to use `group` to ensure forward compatibility. ::: + +## Datasource picker is now virtualized + +The datasource picker in Grafana 13 now uses a virtualized list to improve performance. Instead of rendering every item in the list at once, only the items visible in the viewport are rendered. This reduces memory usage and improves responsiveness, especially for instances with many datasources. + +### Impact on tests + +If your plugin has unit or integration tests (Jest or Vitest) that render the datasource picker, they may fail after upgrading to Grafana 13. The virtualized list relies on `getBoundingClientRect` to calculate which items are visible, but JSDOM doesn't provide meaningful bounding rect values. Without a non-zero container size, the virtualizer renders no items. + +### Migrate your tests + +Add `mockBoundingClientRect()` from `@grafana/test-utils` in a `beforeAll` hook. This provides sensible default dimensions so the virtualizer can calculate visible items. + +```typescript +import { mockBoundingClientRect } from '@grafana/test-utils'; + +describe('MyComponent', () => { + beforeAll(() => { + mockBoundingClientRect(); + }); + + // existing tests... +}); +``` + +If your tests already have a manual `getBoundingClientRect` mock, replace it with the standard utility: + +```diff ++ import { mockBoundingClientRect } from '@grafana/test-utils'; + + describe('MyComponent', () => { + beforeAll(() => { +- const mockGetBoundingClientRect = jest.fn(() => ({ +- width: 120, +- height: 120, +- top: 0, +- left: 0, +- bottom: 0, +- right: 0, +- })); +- +- Object.defineProperty(Element.prototype, 'getBoundingClientRect', { +- value: mockGetBoundingClientRect, +- }); ++ mockBoundingClientRect(); + }); + + // existing tests... + }); +``` From e9eae8080e614377c92dfd4d2dab06506a5efc9c Mon Sep 17 00:00:00 2001 From: Marcus Andersson Date: Thu, 16 Apr 2026 22:21:32 +0200 Subject: [PATCH 2/2] Docs: Add e2e testing guidance to datasource picker migration Co-Authored-By: Claude Opus 4.6 --- .../update-from-grafana-versions/v12.x-v13.x.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/migration-guides/update-from-grafana-versions/v12.x-v13.x.md b/docusaurus/docs/migration-guides/update-from-grafana-versions/v12.x-v13.x.md index 725dd8d66f..36fcb106ab 100644 --- a/docusaurus/docs/migration-guides/update-from-grafana-versions/v12.x-v13.x.md +++ b/docusaurus/docs/migration-guides/update-from-grafana-versions/v12.x-v13.x.md @@ -339,11 +339,11 @@ The `category` property still works but will be removed in a future version of G The datasource picker in Grafana 13 now uses a virtualized list to improve performance. Instead of rendering every item in the list at once, only the items visible in the viewport are rendered. This reduces memory usage and improves responsiveness, especially for instances with many datasources. -### Impact on tests +### Impact on unit and integration tests If your plugin has unit or integration tests (Jest or Vitest) that render the datasource picker, they may fail after upgrading to Grafana 13. The virtualized list relies on `getBoundingClientRect` to calculate which items are visible, but JSDOM doesn't provide meaningful bounding rect values. Without a non-zero container size, the virtualizer renders no items. -### Migrate your tests +### Migrate your unit and integration tests Add `mockBoundingClientRect()` from `@grafana/test-utils` in a `beforeAll` hook. This provides sensible default dimensions so the virtualizer can calculate visible items. @@ -384,3 +384,13 @@ If your tests already have a manual `getBoundingClientRect` mock, replace it wit // existing tests... }); ``` + +### Impact on end-to-end tests + +If your end-to-end tests interact with the datasource picker directly, they may break after upgrading to Grafana 13. Use [`@grafana/plugin-e2e`](../../e2e-test-a-plugin/index.md) which provides a `datasource.set()` method that abstracts the picker interaction and works across Grafana versions. + +```typescript +await panelEditPage.datasource.set('My Data Source'); +``` + +Refer to the [end-to-end testing documentation](../../e2e-test-a-plugin/test-a-data-source-plugin/query-editor.md) for more examples.