feat: compact Healthcheck issue rows by astandrik · Pull Request #4463 · ydb-platform/ydb-embedded-ui

astandrik · 2026-10-05T12:24:38Z

Healthcheck currently puts a full status label below each issue title. This moves an icon-only status before the title, applies the soft label treatment from #4448 and keeps the existing actions, disclosure and details behavior.

EntityStatus.Label gains an opt-in view="compact"; existing labels keep their current defaults. withStatusName={false} alone leaves an empty content wrapper, the detailed tooltip and the heavy critical style. Compact mode reuses the existing icons/status names and supplies the shorter tooltip, accessible name and soft colors together.

The assistant connection already exists through healthcheck.renderAssistantAction and is unchanged. This PR only changes the shared Healthcheck rows; button styling and AI Chat welcome changes are a separate task.

Closes #4461. Parent: #4448. Assistant presentation follow-up: #4462.

Compact labels now reject unsupported click/content props at compile time, with direct and spread contract checks. Rendering is unchanged. The running-query E2E test also waits for the completed list response before checking the rendered row, uses an observable workload and awaits completion before disposing its request context.

Validation on the combined changes: lint, typecheck, 240 unit suites / 2,212 tests, package and embedded builds, and a disposable wrapper consumer typecheck passed. Compiled runtime files remain byte-identical; the compile-only fixture is excluded from the package. Browser checks passed: 20 target repetitions without retries, all 18 Queries tests, and all 116 tests in shard 6/8. Controlled checks reproduced the late-render failure before the fix and passed after it, including error and cleanup paths.

npm run unused remains non-green: the same Knip version reports 403 findings on the unchanged baseline; the only added report is the intentional compile-only type fixture. No unrelated cleanup is included.

The layout screenshots below use the previously verified local fixtures. These checks do not claim validation against a deployed service.

Before / after

Same local fixture data and unchanged assistant buttons on both sides; only the OSS package differs. The examples show collapsed and expanded issue rows. Status moves before the title, uses a soft icon-only label, and reduces a collapsed row from 82 px to 62 px.

Light theme

Before	After

Dark theme

Before	After

Confidence Score: 4/5

The PR appears safe to merge; the compact label prop contract is a non-blocking follow-up.

Findings

Compact labels drop clicks ▶

Fix with agent prompt

### Issue 1
src/components/EntityStatus/EntityStatus.tsx:54
`view="compact"` still accepts `onClick`, `children`, and `endContent`, but the compact branch ignores them. If a page switches a clickable status label to compact view, its click action stops working without a type error. Support those props or make the compact prop type reject them.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Summary

Healthcheck issue rows now show a compact status icon before each issue title, keeping the status name available in a tooltip and to screen readers. The shared status label gains an optional compact view, while default labels and row actions remain intact.

Issue titles can wrap without squeezing the status icon.
Tests cover compact labels, disclosure, and the separate Fix action.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
    Issue[Healthcheck issue] --> Status[Compact status icon]
    Issue --> Title[Issue title]
    Issue --> Disclosure[Issue details]
    Issue -->|when available| Fix[Fix action]

_{Reviews (1) · Last reviewed commit: "feat: compact Healthcheck issue rows"}

CI Results

Test Status: ⚠️ FLAKY

📊 Full Report

Total	Passed	Failed	Flaky	Skipped
1298	1295	0	3	0

😟 No changes in tests. 😕

Bundle Size: ✅

Current: 65.30 MB | Main: 65.30 MB
Diff: +2.94 KB (0.00%)

✅ Bundle size unchanged.

ℹ️ CI Information

Test recordings for failed tests are available in the full report.
Bundle size is measured for the entire 'dist' directory.
📊 indicates links to detailed reports.
🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

Refs #4461

chatgpt-codex-connector · 2026-10-05T12:27:57Z

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-06T14:59:37.495741Z	`ffee74e`	New commits

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

Copilot

Copilot review overview

🟢 Approval recommended

The focused implementation satisfies the compact-row requirements and includes appropriate regression coverage.

Review effort: Balanced
Findings: None

What changed in this PR

Adds compact, accessible Healthcheck status labels while preserving existing disclosure and assistant-action behavior.

Changes:

Adds an icon-only EntityStatus.Label compact view with tooltip and soft colors.
Updates Healthcheck issue rows for compact layout and long-title wrapping.
Adds regression tests for status rendering, disclosure, and assistant actions.

File	Description
`src/components/EntityStatus/EntityStatus.tsx`	Implements compact status labels.
`src/components/EntityStatus/EntityStatus.scss`	Styles compact labels.
`src/components/EntityStatus/__test__/EntityStatus.test.tsx`	Tests compact and default label behavior.
`src/containers/Tenant/Healthcheck/Healthcheck.scss`	Supports compact row layout and wrapping.
`src/containers/Tenant/Healthcheck/components/HealthcheckIssue.tsx`	Places compact status before issue titles.
`src/containers/Tenant/Healthcheck/components/__test__/HealthcheckIssue.test.tsx`	Tests disclosure and assistant-action behavior.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

greptile-apps · 2026-10-05T12:30:51Z

    className?: string;
    endContent?: React.ReactNode;
    withStatusName?: boolean;
+    view?: 'default' | 'compact';


Compact labels drop clicks

view="compact" still accepts onClick, children, and endContent, but the compact branch ignores them. If a page switches a clickable status label to compact view, its click action stops working without a type error. Support those props or make the compact prop type reject them.

Prompt To Fix With AI

This is a comment left during a code review. Path: src/components/EntityStatus/EntityStatus.tsx Line: 54 Comment: **Compact labels drop clicks** `view="compact"` still accepts `onClick`, `children`, and `endContent`, but the compact branch ignores them. If a page switches a clickable status label to compact view, its click action stops working without a type error. Support those props or make the compact prop type reject them. --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

greptile-apps · 2026-10-05T12:32:52Z

TREX

No flows tested, and faced 2 obstacles.

Obstacles faced

The cluster Healthcheck needs a configured Meta backend; connect one with cluster data.
The local database has no Healthcheck issues; provide live issue rows to test them.

_{To reduce obstacles, configure your TREX environment.}

Keep compact labels noninteractive and reject content or click props that this view does not render. Preserve the default label API and add direct and spread compile-only contract checks.

Observe completed running-query list requests before asserting DOM visibility. Use a scoped observable workload and await its completion before disposing the request context, without increasing the test timeout or retry count.

feat: compact Healthcheck issue rows

91d2025

Refs #4461

astandrik self-assigned this Oct 5, 2026

astandrik marked this pull request as ready for review October 5, 2026 12:27

astandrik requested review from Raubzeug and kkdras as code owners October 5, 2026 12:27

Copilot AI balanced review requested due to automatic review settings October 5, 2026 12:27

Copilot started reviewing on behalf of astandrik October 5, 2026 12:28 View session

Copilot AI reviewed Oct 5, 2026

View reviewed changes

greptile-apps Bot reviewed Oct 5, 2026

View reviewed changes

astandrik added 2 commits October 6, 2026 17:54

fix: reject unsupported compact status label props

1560e5b

Keep compact labels noninteractive and reject content or click props that this view does not render. Preserve the default label API and add direct and spread compile-only contract checks.

test: wait for running query response and rendered row

ffee74e

Observe completed running-query list requests before asserting DOM visibility. Use a scoped observable workload and await its completion before disposing the request context, without increasing the test timeout or retry count.

Navigation Menu

Repository navigation

feat: compact Healthcheck issue rows - #4463

feat: compact Healthcheck issue rows#4463
astandrik wants to merge 3 commits into
mainfrom
codex/issue-4448-design-review

astandrik commented Oct 5, 2026 •

edited by github-actions Bot

Loading

Uh oh!

chatgpt-codex-connector Bot commented Oct 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

greptile-apps Bot Oct 5, 2026

Uh oh!

greptile-apps Bot commented Oct 5, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

astandrik commented Oct 5, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before / after

Light theme

Dark theme

Confidence Score: 4/5

Findings

CI Results

Test Status: ⚠️ FLAKY

Bundle Size: ✅

Uh oh!

chatgpt-codex-connector Bot commented Oct 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟢 Approval recommended

Uh oh!

greptile-apps Bot Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot commented Oct 5, 2026

TREX

Obstacles faced

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

astandrik commented Oct 5, 2026 •

edited by github-actions Bot

Loading

chatgpt-codex-connector Bot commented Oct 5, 2026 •

edited

Loading