EDM-3698: Better display for matching fleet name of a device

[celdrake]

The existing display was a disabled TextInput that, specially in Dark mode, seemed editable.
Changed to use StatusDisplayContent and updated some of the wording related to this.

Example:

Summary by CodeRabbit

Release Notes

• Refactor
  • Enhanced device fleet matching workflow with clearer, step-based messaging guiding users through label management and fleet match outcomes.
  • Improved status display across device details and approval modals to provide explicit feedback on checking progress, single matches, multiple matches, and zero-match scenarios.

[coderabbitai]

Warning

Rate limit exceeded

@celdrake has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 38 minutes and 5 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f110b78b-c1ba-41b4-9297-79b5c57a4b59

📥 Commits

Reviewing files that changed from the base of the PR and between d1a2ad2 and e50723b.

📒 Files selected for processing (6)

• libs/i18n/locales/en/translation.json
• libs/ui-components/src/components/Device/DeviceDetails/DeviceFleet.tsx
• libs/ui-components/src/components/Device/EditDeviceWizard/steps/GeneralInfoStep.tsx
• libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx
• libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.css
• libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.tsx

Walkthrough

This PR updates fleet/device label matching UI messaging and refactors the DeviceLabelMatch component. Legacy ownership messages are replaced with a new step-based flow. The DeviceLabelMatch component now accepts an isApproval boolean prop and uses a StatusDisplayContent component for rendering instead of TextInput, with explicit support for checking/loading state.

Changes

Cohort / File(s)	Summary
Translation Updates libs/i18n/locales/en/translation.json	Replaced legacy ownership/matching messages with new step-based flow messages: "Checking for matching fleets", guidance to add/fix labels, explicit "Device matches fleet" text, and updated multi-match/zero-match outcomes.
UI Text Updates libs/ui-components/src/components/Device/DeviceFleet.tsx	Updated Popover message text for multiple owners condition from "Device is owned by more than one fleet:" to "Device labels match multiple fleets:".
Component API Updates libs/ui-components/src/components/Device/EditDeviceWizard/steps/GeneralInfoStep.tsx, libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx	Removed FormGroup wrapper around DeviceLabelMatch and added isApproval prop to component usage.
Component Refactoring libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.tsx	Refactored rendering from TextInput placeholders to StatusDisplayContent component; added isApproval boolean prop to vary multi-match messaging; added dedicated early return for checking state with spinner and i18n aria-label; updated unique-match label to use Trans with strong-emphasized fleet name.
Style Cleanup libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.css	Removed CSS rule for .pf-v6-c-form-control.pf-m-readonly.pf-m-warning:hover that overrode border color behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~35 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately summarizes the main change: improving the display of matching fleet names in the device matching UI by replacing a disabled TextInput with StatusDisplayContent and updating related messaging.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.tsx`:
- Around line 21-25: The "checking" branch in DeviceLabelMatch.tsx currently
renders only a Spinner with the message as an aria-label, making the status
invisible to sighted users; update the JSX in the matchStatus.status ===
'checking' block to render the visible status text (e.g., a Text or span
element) alongside the Spinner using t('Checking for matching fleets') so
sighted users see the message while keeping aria-live/role for assistive tech;
reference the Spinner element and the matchStatus.status === 'checking'
conditional when making the change.
- Around line 62-66: The switch case for 'checked--multiple' declares a const
(msg) directly inside the case which violates Biome's noSwitchDeclarations rule;
wrap the case body in braces to create a block scope so the const is legal
(mirror the adjacent 'checked--error' style). Specifically, locate the
'checked--multiple' case in DeviceLabelMatch.tsx and change it to use { ... }
around the const msg and the return of <StatusDisplayContent ...> (referencing
isApproval, t, StatusDisplayContent, and ExclamationTriangleIcon) so the
declaration is scoped and the linter error is resolved.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4ca0658e-c0b7-495c-b505-e180be342e88

📥 Commits

Reviewing files that changed from the base of the PR and between fc240a7 and d1a2ad2.

📒 Files selected for processing (6)

• libs/i18n/locales/en/translation.json
• libs/ui-components/src/components/Device/DeviceDetails/DeviceFleet.tsx
• libs/ui-components/src/components/Device/EditDeviceWizard/steps/GeneralInfoStep.tsx
• libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx
• libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.css
• libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.tsx

💤 Files with no reviewable changes (1)

• libs/ui-components/src/components/modals/ApproveDeviceModal/DeviceLabelMatch.css