Stable selectors for Grafana Pathfinder tutorials (2 anchors, 2 tutorials)

Open Beginner friendly
#331 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
84/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Quiet
Tech stack
grafana, typescript
Domain
frontend

Research direction

Start with src/components/ConfigEditor/Auth/auth-method/AuthMethodSettings.tsx:147 and src/components/ConfigEditor/Connection/ConnectionSettings.tsx:40 and :60, and inspect the JSX for the two tutorial targets. Done means each target exposes a stable data-testid that the Pathfinder tutorials can use instead of the current weak selectors.

Written by the indexing model from the issue text.

Description

Pathfinder tutorials anchor their steps to DOM selectors. We've identified that the guides mentioned below target UI this plugin renders (audit: grafana/grafana#129672). Weak anchors (text/placeholder/positional) break silently when copy or layout changes in your plugin however data-testids give us a more robust path forwards.

Add data-testids to the following JSX

Any value works — we'll retarget the tutorials to whatever you pick.

element (current weak anchor) tutorials where (at 2026-08-04/05)
#auth-method-select prometheus-lj/config-authentication src/components/ConfigEditor/Auth/auth-method/AuthMethodSettings.tsx:147
#connection-url prometheus-lj/add-data-source-url src/components/ConfigEditor/Connection/ConnectionSettings.tsx:40
src/components/ConfigEditor/Connection/ConnectionSettings.tsx:60

If you've any questions please reach out in the #proj-pathfinder-selectors slack channel.

Dominant language
TypeScript
Stars
18
Forks
3
Avg merge
54m
Merged PRs (30d)
1

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from grafana/plugin-ui

All issues in grafana/plugin-ui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.