public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scopes: Display subtitle and enable direct scopes apply (#112876)

Browse Source 
* Display subtitle and enable direct scopes apply

* Extract each type into its own component

* Fix unit integration test

* Fix fe linting

* Fix imports

* Import order

* Update generated type

* Update type generation

* Format go

* Add test case for radio button container selection

* Remove infra mock

* Remove non-existant imports

* Remove unused assertions

* Refactor tree item for a11y

* Add proper keyboard support for directly applying scope

* Update i18n

* Fix button selector

* Remove test code

* Fix race condition for seletion vs blur update
This commit is contained in:
Tobias Skarhed
2025-10-29 10:52:18 +01:00
committed by GitHub
parent 2d5713e330
commit c0ae0f437f
14 changed files with 377 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e-playwright/utils/scope-helpers.ts
+6 -5
View File
@@ -128,7 +128,7 @@ export async function scopeSelectRequest(page: Page, selectedScope: TestScope):
export async function selectScope(page: Page, scopeName: string, selectedScope?: TestScope) {
const click = async () => {
const element = page.locator(
`[data-testid="scopes-tree-${scopeName}-checkbox"], [data-testid="scopes-tree-${scopeName}-radio"]`
`[data-testid="scopes-tree-${scopeName}-checkbox"], [data-testid="scopes-tree-${scopeName}-radio"], [data-testid="scopes-tree-${scopeName}-link"]`
);
await element.scrollIntoViewIfNeeded();
await element.click({ force: true });
@@ -254,9 +254,9 @@ export async function getScopeTreeName(page: Page, nth: number): Promise<string>
}
export async function getScopeLeafName(page: Page, nth: number): Promise<string> {
const locator = page.getByTestId(/^scopes-tree-.*-(checkbox|radio)/).nth(nth);
const locator = page.getByTestId(/^scopes-tree-.*-(checkbox|radio|link)/).nth(nth);
const fullTestId = await locator.getAttribute('data-testid');
const scopeName = fullTestId?.replace(/^scopes-tree-/, '').replace(/-(checkbox|radio)/, '');
const scopeName = fullTestId?.replace(/^scopes-tree-/, '').replace(/-(checkbox|radio|link)/, '');
if (!scopeName) {
throw new Error('There are no scopes in the selector');
@@ -266,10 +266,11 @@ export async function getScopeLeafName(page: Page, nth: number): Promise<string>
}
export async function getScopeLeafTitle(page: Page, nth: number): Promise<string> {
const leafLocator = page.getByTestId(/^scopes-tree-.*-(checkbox|radio)/).nth(nth);
// Get the nth selectable tree item (checkbox, radio, or link)
const leafLocator = page.getByTestId(/^scopes-tree-.*-(checkbox|radio|link)/).nth(nth);
// Find the closest ancestor element that has the main tree item test id
const titleLocator = leafLocator.locator(
'xpath=ancestor::*[@data-testid][starts-with(@data-testid, "scopes-tree-") and not(contains(@data-testid, "-checkbox")) and not(contains(@data-testid, "-radio")) and not(contains(@data-testid, "-expand"))]'
'xpath=ancestor::*[@data-testid][starts-with(@data-testid, "scopes-tree-") and not(contains(@data-testid, "-checkbox")) and not(contains(@data-testid, "-radio")) and not(contains(@data-testid, "-link")) and not(contains(@data-testid, "-expand"))]'
);
const scopeTitle = await titleLocator.textContent();
if (!scopeTitle) {