Files
ottyl/tickets/017-regex-cheat-sheet-icon.md
T
2026-09-05 19:29:01 +01:00

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 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.