EDM-4152: Make all form alerts full width

[celdrake]

Alerts within forms were not full-width, now we can use FlightCtlFormAlert for that purpose.
Before:

After:

[coderabbitai]

Walkthrough

This PR introduces FlightCtlFormAlert, a custom wrapper around PatternFly's Alert component that renders alerts inline and applies form-aware CSS grid span. The new component is exported from FlightCtlForm and replaces direct Alert usage across 13 wizard step components spanning Catalog, Device, Fleet, and ImageBuild workflows.

Changes

Alert Component Migration

Layer / File(s)	Summary
FlightCtlFormAlert component and styling libs/ui-components/src/components/form/FlightCtlForm.tsx, libs/ui-components/src/components/form/FlightCtlForm.css	New FlightCtlFormAlert export wraps Alert with isInline={true} by default and applies .fctl-form-alert CSS class. FlightCtlForm computes formSpan from responsive width and passes it to Grid and CSS custom property for alert layout.
Catalog wizard steps migration libs/ui-components/src/components/Catalog/EditWizard/steps/UpdateStep.tsx, libs/ui-components/src/components/Catalog/InstallWizard/steps/AppConfigStep.tsx, libs/ui-components/src/components/Catalog/InstallWizard/steps/ReviewStep.tsx, libs/ui-components/src/components/Catalog/InstallWizard/steps/SelectTargetStep.tsx, libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx	Remove PatternFly Alert imports and replace all inline alert renders (version updates, config schema validation errors, deprecation warnings, deployment failures, provisioning info) with FlightCtlFormAlert equivalents.
Device edit wizard steps migration libs/ui-components/src/components/Device/EditDeviceWizard/steps/ApplicationTemplates.tsx, libs/ui-components/src/components/Device/EditDeviceWizard/steps/ConfigurationTemplates.tsx, libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceTemplateStep.tsx, libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceUpdateStep.tsx	Remove PatternFly Alert imports and replace inline alerts (catalog-managed resource notices, repository loading errors, MicroShift warnings, template variable guidance, system image management notices) with FlightCtlFormAlert.
Fleet and ImageBuild steps migration libs/ui-components/src/components/Fleet/CreateFleet/steps/DeviceLabelSelector.tsx, libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.tsx, libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdateStepRolloutPolicy.tsx, libs/ui-components/src/components/ImageBuilds/CreateImageBuildWizard/steps/OutputImageStep.tsx	Remove PatternFly Alert imports and replace inline alerts (device selection errors/hints, default policy info, batch sequencing guidance, management-ready notices) with FlightCtlFormAlert.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

ui-components

Suggested reviewers

• rawagner

Poem

A custom alert now wraps the form with grace,
Thirteen components find their rightful place.
Inline, responsive, and styled just right—
PatternFly alerts bow out of sight.
Grid spans align from left to end,
One wrapper to rule them, on this we depend. ✨

🚥 Pre-merge checks | ✅ 14 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
I18n-Compliance	⚠️ Warning	DeviceTemplateStep.tsx uses user-visible label="MicroShift registration" without wrapping it in t(); no variable-key t() calls were found in the scanned TSX files.	Wrap the string in translation, e.g. label={t('MicroShift registration')} (or use the appropriate translation component for that label).

✅ Passed checks (14 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: introducing full-width form alerts by creating FlightCtlFormAlert and replacing PatternFly Alerts across 13 component files.
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.
No-Hardcoded-Secrets	✅ Passed	Checked all files touched per PR summary (15 TS/TSX/CSS) for embedded-credential URLs, Bearer/Authorization strings, base64 data/quoted secrets, private-key markers, and credential-like assignments...
No-Weak-Crypto	✅ Passed	Scanned the PR’s referenced TS/TSX/CSS files for md5/sha1/des/rc4/3des/blowfish/ecb and crypto-related keywords; none found, so no weak/non-constant-time crypto introduced.
No-Injection-Vectors	✅ Passed	Scanned the PR’s changed files at commit 0e956e1 for eval/exec, dangerouslySetInnerHTML, os.system/exec.Command, and yaml.load/SafeLoader; no matches found.
Container-Privileges	✅ Passed	PR #696 changes only UI TSX/CSS files (FlightCtlFormAlert) and contains no container/K8s privilege settings (hostPID/hostNetwork/hostIPC/privileged/SYS_ADMIN/allowPrivilegeEscalation).
No-Sensitive-Data-In-Logs	✅ Passed	Inspected PR-touched TSX/CSS (incl. FlightCtlForm.tsx); no console/loggers/Sentry/track calls found in those files, and FlightCtlFormAlert only wraps PatternFly Alert without logging.
Resource-Leaks	✅ Passed	Scanned proxy/**/*.go for os.Open, http client.Do/ReadAll without resp.Body.Close, net dial, and goroutine spawning. Found body closes in all http calls (incl. handler.go explicit Close) and only 2...
Unchecked-Errors	✅ Passed	PR #696 only modifies TS/CSS files (per GitHub files list); no Go files under proxy/ are changed, so the _ error-return/swallo​wing rule isn’t applicable.
Ai-Attribution	✅ Passed	No AI attribution trailers (Assisted-by/Generated-by/Made-with/Co-Authored-By) found in PR description or repo text; only config mentions the terms.
Generated-Files-Not-Hand-Edited	✅ Passed	PR diff vs main touches only ui-components/FormAlert-related files; none of libs/types/** or libs/i18n/locales/en/translation.json were edited.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@libs/ui-components/src/components/form/FlightCtlForm.tsx`:
- Around line 52-55: FlightCtlFormAlert currently concatenates className with a
literal space causing a trailing space when className is falsy; in the
FlightCtlFormAlert component update the className construction so the extra
space is only added when a non-empty className exists (e.g., join base
"fctl-form-alert" with the incoming className conditionally or build the string
by appending `" " + className` only when className is truthy) and pass that into
the Alert component's className prop to avoid the cosmetic trailing space.

🪄 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: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 80382d93-0462-4c69-8ff3-07f0a58c0a34

📥 Commits

Reviewing files that changed from the base of the PR and between d6bed50 and 0e956e1.

📒 Files selected for processing (15)

• libs/ui-components/src/components/Catalog/EditWizard/steps/UpdateStep.tsx
• libs/ui-components/src/components/Catalog/InstallWizard/steps/AppConfigStep.tsx
• libs/ui-components/src/components/Catalog/InstallWizard/steps/ReviewStep.tsx
• libs/ui-components/src/components/Catalog/InstallWizard/steps/SelectTargetStep.tsx
• libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx
• libs/ui-components/src/components/Device/EditDeviceWizard/steps/ApplicationTemplates.tsx
• libs/ui-components/src/components/Device/EditDeviceWizard/steps/ConfigurationTemplates.tsx
• libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceTemplateStep.tsx
• libs/ui-components/src/components/Device/EditDeviceWizard/steps/DeviceUpdateStep.tsx
• libs/ui-components/src/components/Fleet/CreateFleet/steps/DeviceLabelSelector.tsx
• libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdatePolicyStep.tsx
• libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdateStepRolloutPolicy.tsx
• libs/ui-components/src/components/ImageBuilds/CreateImageBuildWizard/steps/OutputImageStep.tsx
• libs/ui-components/src/components/form/FlightCtlForm.css
• libs/ui-components/src/components/form/FlightCtlForm.tsx

[celdrake]

We're clarifying exact requirements with UX.