[APM UI] Smoke test EUI Visual Design Refresh
- Dominant language
- TypeScript
- Stars
- 21.3k
- Forks
- 8.6k
- PR merge metrics
- PR metrics pending
Description
## What?
Smoke-test the APM UI against the upcoming EUI visual design refresh and file any unintended visual or layout regressions.
Parent tracker: [elastic/observability-dev#6155](https://github.com/elastic/observability-dev/issues/6155)
This is planned to merge in the week of 21 Sep, so this should be done before then.
## Why?
EUI is shipping visual changes (radius, borders, recessed surfaces, button groups, and related token updates). We need to confirm APM screens still look and behave correctly in light and dark mode, and that custom APM chrome does not clash with the new EUI defaults (double borders, leftover underlines, mismatched radii, clipped panels, etc.).
## Smoke-test status (as of 15 Sep)
The Kibana smoke-test PR **exists**, but it is **not a frozen / merge-ready snapshot** yet:
- Draft PR: https://github.com/elastic/kibana/pull/285068 (`rk/new-design-smoke-test`)
- PR-deployed test env (last announced 4 Sep; later commits landed 14 Sep, so this may be stale): https://ryankeairns-pr-285068.kbndev.co/
- PR status is “active, ongoing”; Observability hunt is marked done by design, but Security / Stack Management are still open
- Latest CI on the draft PR failed (lint / quick checks / local check) after the 14 Sep EUI package refresh
Use the draft PR / test env to start reviewing APM, but expect further EUI tarball and Kibana-side updates before the week of 21 Sep. Discuss in [#ux-wg-visual-refresh](https://elastic.slack.com/archives/C0BR885877F).
## How to test
1. Open the latest smoke-test deployment for https://github.com/elastic/kibana/pull/285068 (or check out `rk/new-design-smoke-test` locally).
2. Walk the APM surfaces below in **light and dark** mode.
3. Look for: mismatched corner radii, doubled/missing borders, clipped content, leftover custom underlines, cramped padding, unreadable contrast, broken hover/focus, and controls that no longer match surrounding EUI components.
4. File follow-up Kibana issues (or comments here) for anything that should be fixed before the EUI upgrade merges.
## Acceptance Criteria
**APM surfaces**
- [ ] Services inventory (including grouped actions menu)
- [ ] Service overview (latency / throughput / transactions / errors / dependencies / instances)
- [ ] Transaction details and waterfall
- [ ] Trace explorer
- [ ] Service map
- [ ] Dependencies
- [ ] Errors and error group details
- [ ] Storage explorer
- [ ] Service alerts tab
- [ ] Settings (agent configuration, anomaly detection, custom dashboards, indices)
**Visual checks (each surface)**
- [ ] Light mode looks correct
- [ ] Dark mode looks correct
- [ ] No doubled borders or leftover custom outlines on EUI panels
- [ ] Corner radii match surrounding EUI controls (`inline` / `control` / `panel` / `frame`)
- [ ] No clipped badges, tables, flyouts, or menus at the new radii
**Follow-up**
- [ ] Regressions are filed or fixed
- [ ] [elastic/observability-dev#6155](https://github.com/elastic/observability-dev/issues/6155) APM UI checkbox is ticked once testing is done
## Additional Context
The smoke-test PR already includes a few APM-side tweaks to check while reviewing:
- Storage explorer services table panel border/radius
- Services grouped-actions menu title underline
- Service alerts table panel radius
Contributor guide
Assessment
This issue has not been assessed yet.