feat(plugin-e2e): add missing components to the components fixture

[mckn]

What this PR does / why we need it:

Follow-up to #2583. Adds six more Grafana UI components to the components fixture: Select, MultiSelect, Switch, RadioGroup, UnitPicker, and ColorPicker. Each component gets a static getContainer() method for version-conditional container resolution and a within(root) method for DOM scoping, matching the pattern established by dataSourcePicker and timeRangePicker.

Uses CSS/structural fallback selectors that work across all supported Grafana versions (8.5+). Once grafana/grafana#124120 merges and @grafana/e2e-selectors is updated, a follow-up will add data-testid container selectors for Grafana >= 13.1.0. The six component classes are also now exported from the package public API.

Which issue(s) this PR fixes:

Follows up on #2583 and depends on grafana/grafana#124120 for stable container selectors.

Special notes for your reviewer:

• switch is used as a property name on the Components class. It's a JS reserved word but valid as a property name in ES6+ class definitions.
• The fallback CSS selectors (e.g. [class*="-grafana-select-value-container"]) rely on Grafana's Emotion-generated class naming convention and will be replaced by stable data-testid selectors in a follow-up.
• MultiSelect test is deferred — no provisioned panel currently uses a multi-select option.

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @grafana/plugin-docs-cli@0.1.0-canary.2621.26576348885.0
npm install @grafana/plugin-docs-parser@0.1.0-canary.2621.26576348885.0
npm install @grafana/plugin-e2e@3.9.0-canary.2621.26576348885.0
# or 
yarn add @grafana/plugin-docs-cli@0.1.0-canary.2621.26576348885.0
yarn add @grafana/plugin-docs-parser@0.1.0-canary.2621.26576348885.0
yarn add @grafana/plugin-e2e@3.9.0-canary.2621.26576348885.0

[github-actions]

Hello! 👋 This repository uses Auto for releasing packages using PR labels.

✨ This PR can be merged and will trigger a new minor release.
NOTE: When merging a PR with the release label please avoid merging another PR. For further information see here.

[cla-assistant]

All committers have signed the CLA.

[cla-assistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Marcus Andersson seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Copilot]

Pull request overview

Adds additional Grafana UI component wrappers to the components fixture in @grafana/plugin-e2e so tests can interact with common controls (Select, MultiSelect, Switch, RadioGroup, UnitPicker, ColorPicker) on arbitrary pages, using within(root) scoping similar to existing dataSourcePicker and timeRangePicker.

Changes:

• Add getContainer() + within(root) support for six component models (Select, MultiSelect, Switch, RadioGroup, UnitPicker, ColorPicker).
• Extend Components fixture to expose these components and export them from the package public API.
• Add e2e coverage for the new fixture entries (except MultiSelect, per PR notes).

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/plugin-e2e/tests/as-admin-user/components/components.spec.ts	Adds e2e tests validating new components.*.within(...) helpers.
packages/plugin-e2e/src/models/components/UnitPicker.ts	Adds getContainer() + within() for UnitPicker scoping.
packages/plugin-e2e/src/models/components/Switch.ts	Adds version-conditional getContainer() + within() for Switch scoping.
packages/plugin-e2e/src/models/components/Select.ts	Adds getContainer() + within() for Select scoping.
packages/plugin-e2e/src/models/components/RadioGroup.ts	Adds version-conditional getContainer() + within() for RadioGroup scoping.
packages/plugin-e2e/src/models/components/MultiSelect.ts	Adds getContainer() + within() for MultiSelect scoping.
packages/plugin-e2e/src/models/components/ColorPicker.ts	Adds getContainer() + within() for ColorPicker scoping.
packages/plugin-e2e/src/models/Components.ts	Adds new component instances to the components fixture.
packages/plugin-e2e/src/index.ts	Exports the new component classes from the public API.

[github-actions]

Playwright test results

Image Name	Version	Result	Report
grafana-enterprise	nightly	✅
grafana-enterprise	dev-preview-react19	❌	View report
grafana-enterprise	13.0.1	✅
grafana-enterprise	12.1.10	✅
grafana-enterprise	11.0.11	✅
grafana-enterprise	9.3.16	✅
grafana-enterprise	8.5.27	✅

Troubleshooting

404 when clicking on View report

By default, the deploy-report-pages Action deploys reports to the gh-pages branch. However, you need to take an extra step to ensure that GitHub Pages can build and serve the site from this branch. To do so:

1. Go to the Settings tab of your repository.
2. In the left-hand sidebar, click on Pages.
3. Under Source, select Deploy from a branch, then choose the gh-pages branch.

This action needs to be completed manually in order for your GitHub Pages site to be built and accessible from the gh-pages branch. Once configured, GitHub will automatically build and serve the site whenever new reports are deployed.