12 lines
1.2 KiB
Markdown
12 lines
1.2 KiB
Markdown
# 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 on `HelpIcon.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's `regex(...)` syntax (`FilterBar.tsx`, e.g. via its existing help affordance).
|
|
- Cheat sheet content covers the regex flavor actually used by the engine (Rust `regex` crate), not e.g. PCRE-only syntax that wouldn't work here.
|
|
- Icon/popover follows existing styling conventions (matches `HelpIcon.tsx` look and interaction pattern) and works in both light/dark themes.
|