1.2 KiB
1.2 KiB
Add a regex cheat-sheet icon next to regex input fields
From WISHLIST.md: regex fields should have an "@" icon that, on hover or click, shows a cheat sheet of regex syntax.
Add a small icon (similar in spirit to the existing HelpIcon component) next to every user-facing regex input, that reveals a compact regex-syntax cheat sheet (common tokens like \d, \w, (?P<name>...), *, +, ?, |, anchors, etc.) on hover or click.
Acceptance criteria
- A new reusable icon/popover component (e.g.
RegexHelpIcon.tsx, modeled onHelpIcon.tsx) renders an "@" icon and shows a regex syntax cheat sheet on hover or click. - The icon is placed next to every regex input field:
Params.tsx(message match regex),Metrics.tsx(message match regex),Alerts.tsx(field regex), and the filter bar'sregex(...)syntax (FilterBar.tsx, e.g. via its existing help affordance). - Cheat sheet content covers the regex flavor actually used by the engine (Rust
regexcrate), not e.g. PCRE-only syntax that wouldn't work here. - Icon/popover follows existing styling conventions (matches
HelpIcon.tsxlook and interaction pattern) and works in both light/dark themes.