Repository navigation
Fixes 36423: Align incident table surfaces, chart borders, and card corners - #36426
Conversation
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically. Maintainers can bypass this check by adding the |
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
shah-harshit
added
UI
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
Jest test CoverageUI tests summary
|
shah-harshit
added
the
To release
🚦 Removed from the merge queue —
|
Code Review ✅ Approved 1 closed / 1 findings🟡 Medium risk · Changing shared table corners, incident surfaces, and dark chart borders affects multiple UI views; incorrect styling could obscure controls or table boundaries. Aligns incident drawer rows to the muted surface while keeping page-level incident tables and filters on the default card surface, blends dark chart segment borders into the card background, and rounds entity table containers to match adjacent cards. Resolved the earlier finding where the muted step was applied to page-level incident cards, contrary to the muted-variant ADR. No open issues found. ✅ 1 closed✅ Quality: Muted step used on page-level incident cards, against muted-variant ADR
VerificationRules No rules evaluated Functional validation Not enabledAuto-approval Not enabledFor more verification details, comment OptionsDisplay: compact → Showing compact verification results. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source |
|
|
🤖 Backport to |
|
🤖 Backport to |
|
🤖 Backport to |
|
🤖 Not backported to
|
…orners (#36426) (#36493) * fix(ui): align incident table surfaces and chart borders * fix(ui): keep incident page tables on the default surface * fix(ui): restore dark incident tables and filter surfaces * test(ui): recalibrate incident table locale layout width (cherry picked from commit 82e7c38) Co-authored-by: Harshit Shah <harshit.shah@getcollate.io>
Describe your changes:
Fixes #36423
Use the darker muted surface for incident tables and their filter band, blend dark chart segment borders into the card background, and round entity table containers to match adjacent cards. Recalibrate the locale-layout test for TableCard's outline frame.
Type of change:
High-level design:
Reuse the existing core TableCard muted variant in the incident drawer, group listing, group drill-down, and entity incident tab. The entity incident filters and table share the same dark surface. ADR:2026-10-28-incident-tables-and-filters-use-the-muted-step records this scoped exception to the settings-modal-only restriction; the earlier record names the amendment. Update the shared dark chart theme so every pie/donut segment uses the card surface for its border. Add the standard rounded-xl token to the shared table container. No backend, schema, dependency, or API changes.
Tests:
Use cases covered
Unit tests
155 Jest tests passed across 7 suites (paths relative to the application UI src directory):
110 core tests passed across 5 suites (paths relative to the core UI src directory):
The updated chart theme and pie-border assertions failed before the fix and pass after it.
Measured application line coverage at 53b1cae (the same incident surface variants as the final implementation): IncidentManager 98.36%; IncidentGroupDetail, IncidentGroupDrawer, and IncidentGroupsView 100%; TableV2 67.94% (78.16% aggregate). The TableV2 change is a CSS class; its broader existing branches remain partly uncovered.
Application and core type checks, changed-file ESLint/Prettier/import organization, production builds, Tailwind audit, deprecation guard, and git diff --check pass. The repository-wide token audit reports 77 errors in unchanged CSS/LESS files; this diff changes none of those files.
Validation at ade57be: all 155 application tests above, application type check, changed-file formatting/lint, production build, Tailwind audit, deprecation guard, decision-record validation, and git diff --check passed. The 110 core tests above remain the results from 53b1cae; no core files changed in this follow-up.
Backend integration tests
Not applicable — no backend changes.
NOT NEEDED — UI styling and chart theme changes only.
Ingestion integration tests
Not applicable — no ingestion changes.
Playwright (UI) tests
The merge-queue failure in run 40743224472 was the container-width precondition: expected 1178px, received 1180px. TableCard draws an outline instead of Card's 1px side borders. Updated the calibration and its comments; the Assignee visibility, severity cap, and tooltip assertions remain unchanged.
Reported test after the fix: 10 passed, 0 failed, 0 flaky, no retries, using 4 Chromium workers at a214eb7:
Features/DataQuality/IncidentManagerLocaleLayout.spec.tskeeps the Assignee column on screen when the Russian severity placeholder is renderedplaywright test --config .context/locale-layout.playwright.config.ts --project chromium --grep 'keeps the Assignee column on screen' --repeat-each 10 --workers 4Full spec: 6 passed, 1 failed locally. The separate truncated-label tooltip case cannot find its tooltip. It also fails against unchanged main at 471bce3 locally, and passed in the reported CI run. It is not changed or suppressed by this fix.
Full Playwright ESLint passed with 0 errors and 197 existing warnings. Changed-file import organization, ESLint, Prettier, production builds, and git diff --check passed.
Additional local reproduction and control results
Reported merge-queue case: PASSED — 10/10 at a214eb7, 4 workers, 0 retries.
Full local file: 6/7; separate tooltip case also fails on unchanged main locally. Details above.
Manual testing performed
UI screen recording:
Not applicable — standalone styling fixes. Before/after screenshots are included below.
Screenshots
Production frontend comparison at 1512 × 772, using the same backend and sample entities. Drawer and entity incident screenshots refreshed at ade57be; chart and column-table screenshots remain from 53b1cae because those views are unchanged.
Dark theme
main)Light theme comparisons
main)Checklist:
The PR appears safe to merge; no actionable issues were found.Summary
Aligns incident tables, chart borders, and table corners with existing card styles.
No actionable issues found. Review checks were read-only; tests and browser comparisons were not rerun.
Reviews (1) · Last reviewed commit: "fix(ui): align incident table surfaces a..." · Reviewed by Greptile