[asmasarw]

jira: https://redhat.atlassian.net/browse/EDM-6461

---

Before:

After:

---

With Devices

Before:

After:

---

Summary

• Updated shared donut-chart styling in libs/ui-components/. The chart title now has tighter spacing around its helper icon, and the helper button can omit its padding.
• Updated the Status card layout to use a three-column grid for its charts.
• Added the optional hasNoPadding prop to shared helper-text components. Existing call sites keep their current behavior unless they pass the prop.
• This affects shared UI components, not platform-specific app code. The shared component library serves both the standalone app and the OCP plugin, so both platforms can receive the change.
• The supplied change summary lists no changes to libs/types/, libs/i18n/, libs/cypress/, either app’s platform-specific code, proxy/, packaging/, container builds, E2E tests, or CI configuration.
• No security-sensitive behavior, API contract, or resource mutation behavior changed. Validation results were not provided.

Risk classification

risk:show — The repository criteria allow well-scoped shared UI component changes when their use in both standalone and OCP plugin is considered. This is a focused chart-layout and helper-text change that preserves existing behavior by default and does not change API contracts, permission enforcement, or resource mutation behavior.

risk:ship is close but does not qualify because the change includes hand-maintained TSX and CSS, which the criteria exclude from Ship. risk:ask does not apply because the change does not trigger the listed security, shared-infrastructure, API, resource-mutation, dependency, proxy, container, packaging, or build-configuration conditions.

[coderabbitai]

No actionable comments were generated in the recent review.

Walkthrough

Helper-text components now support a no-padding option for the popover button. Donut chart titles pass this option when helper text is present, and chart title CSS sets the helper-text label gap. The status card places its three charts in a guttered grid.

Changes

Chart helper text

Layer / File(s)	Summary
Helper-text padding option and donut chart styling libs/ui-components/src/components/common/WithHelperText.tsx, libs/ui-components/src/components/charts/DonutChart.tsx, libs/ui-components/src/components/charts/DonutChart.css	HelperTextPopoverProps adds optional hasNoPadding. HelperTextPopover, LabelWithHelperText, and FormGroupWithHelperText pass the option to the popover button. Donut chart titles pass it when helperText is present. Chart title CSS sets the helper-text label gap.

Status chart layout

Layer / File(s)	Summary
Status chart grid layout libs/ui-components/src/components/OverviewPage/Cards/Status/StatusCard.tsx	The status card replaces Flex and FlexItem with a guttered grid. Each chart occupies a GridItem with md={4}. Chart components and their props remain unchanged.

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Suggested labels: ui-components, risk:show

Suggested reviewers: celdrake

Merge Risk: Minimal · up to e4021

The PR’s helper-text and chart-layout changes leave no established merge-blocking risk.

Pre-merge checks: 15

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly identifies the main change: correcting the alignment of the Dashboard Status donut charts. It is specific, concise, and consistent with the pull request changes.
Docstring Coverage		No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
No-Hardcoded-Secrets		No hardcoded secrets were introduced. The pull request adds only PatternFly layout changes, the hasNoPadding boolean prop, and a CSS spacing rule. Added lines contain no credential assignments, embe…
No-Weak-Crypto		PASS. The pull request changes only dashboard layout, chart spacing, and helper-text padding. The reviewed diff introduces no MD5, SHA1, DES, RC4, 3DES, Blowfish, ECB, custom cryptography, or secret/t…
No-Injection-Vectors		No injection vector is introduced. The PR diff contains no eval/exec, dangerouslySetInnerHTML, os.system, exec.Command, or yaml.load. The new helper-text path passes translated text as React content t…
Container-Privileges		PASS. The pull request changes only UI TypeScript and CSS files. The reviewed patch adds no privileged, hostPID, hostNetwork, hostIPC, SYS_ADMIN, or allowPrivilegeEscalation settings, and it does not …
No-Sensitive-Data-In-Logs		PASS: The pull request adds no logging, telemetry, or debug output. The changed files contain no console/logger calls, and no added lines reference passwords, tokens, API keys, PII, session IDs, hostn…
Resource-Leaks		PASS — The pull request changes only four TypeScript/CSS files under libs/ui-components. It changes no Go files under proxy/, so it cannot introduce the specified file, response-body, connection, …
Unchecked-Errors		No Go files under proxy/ changed in the reviewed pull-request range. The changes are limited to TypeScript and CSS files, so this check has no applicable changed code.
Ai-Attribution		No AI tool use is mentioned in the supplied PR description or in either reviewed commit message. The two commit messages contain no Assisted-by, Generated-by, Made-with, or Co-Authored-By trai…
Generated-Files-Not-Hand-Edited		The pull request changes only four UI component files. It does not modify any files under libs/types/models, libs/types/alpha/models, libs/types/imagebuilder/models, or libs/i18n/locales/en/translatio…
I18n-Compliance		PASS. The pull request changes three .tsx files, but the added lines contain no literal user-facing words and no t() calls. Existing user-facing strings remain wrapped in t() with hardcoded keys…

Full details: Docstring Coverage

Explanation

No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 3 files.

Full details: No-Hardcoded-Secrets

Explanation

No hardcoded secrets were introduced. The pull request adds only PatternFly layout changes, the hasNoPadding boolean prop, and a CSS spacing rule. Added lines contain no credential assignments, embedded-credential URLs, or base64 strings longer than 32 characters.

Full details: No-Weak-Crypto

Explanation

PASS. The pull request changes only dashboard layout, chart spacing, and helper-text padding. The reviewed diff introduces no MD5, SHA1, DES, RC4, 3DES, Blowfish, ECB, custom cryptography, or secret/token comparison logic.

Full details: No-Injection-Vectors

Explanation

No injection vector is introduced. The PR diff contains no eval/exec, dangerouslySetInnerHTML, os.system, exec.Command, or yaml.load. The new helper-text path passes translated text as React content to PatternFly Popover, and the other changes only alter layout and button padding.

Full details: Container-Privileges

Explanation

PASS. The pull request changes only UI TypeScript and CSS files. The reviewed patch adds no privileged, hostPID, hostNetwork, hostIPC, SYS_ADMIN, or allowPrivilegeEscalation settings, and it does not change a container or Kubernetes manifest.

Full details: No-Sensitive-Data-In-Logs

Explanation

PASS: The pull request adds no logging, telemetry, or debug output. The changed files contain no console/logger calls, and no added lines reference passwords, tokens, API keys, PII, session IDs, hostnames, or customer data.

Full details: Resource-Leaks

Explanation

PASS — The pull request changes only four TypeScript/CSS files under libs/ui-components. It changes no Go files under proxy/, so it cannot introduce the specified file, response-body, connection, or goroutine leaks.

Full details: Ai-Attribution

Explanation

No AI tool use is mentioned in the supplied PR description or in either reviewed commit message. The two commit messages contain no Assisted-by, Generated-by, Made-with, or Co-Authored-By trailers. The attribution requirement is therefore not triggered.

Full details: Generated-Files-Not-Hand-Edited

Explanation

The pull request changes only four UI component files. It does not modify any files under libs/types/models, libs/types/alpha/models, libs/types/imagebuilder/models, or libs/i18n/locales/en/translation.json.

Full details: I18n-Compliance

Explanation

PASS. The pull request changes three .tsx files, but the added lines contain no literal user-facing words and no t() calls. Existing user-facing strings remain wrapped in t() with hardcoded keys, including t('{{count}} Devices', ...), t('Status'), and t('No devices'). The existing ${ariaLabel} help text template was not changed by this pull request.

Finishing Touches

Generate unit tests (beta)

• Create a new PR

Recent review info

Run configuration

• Source mode: Auto
• Repository: flightctl/flightctl-ui
• Branch: main
• File: .coderabbit.yaml
• Commit: 5efe39f
• Layers: Repository YAML
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: 730e6219-05f3-495c-989c-04b0316fbb9d

Commits

Reviewing files that changed from the base of the PR and between 3edae34 and e402136.

Files selected for processing: 2

• libs/ui-components/src/components/OverviewPage/Cards/Status/StatusCard.tsx
• libs/ui-components/src/components/common/WithHelperText.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

[coderabbitai]

• Fix comments: Fix CodeRabbit comments on this PR

[celdrake]

Doesn't seem like this is fixing the issue when there is at least one device in the system.
In that case, the legend for each of the Donut charts is different, and the widths are proportional to each Donut's legend width.

[asmasarw]

[asmasarw]

Fixed, Thanks.