FCN-667: replace raw PF internal CSS with FormSection component by d3mdis · Pull Request #402 · RedHatInsights/nxtcm-components

d3mdis · 2026-09-14T15:51:54Z

Description

Refactor Section to use PatternFly 6’s Form and FormSection components, including the native title prop and section styling. Removed custom CSS that duplicated PatternFly’s form section title layout while preserving existing section content.

Jira issue #
FCN-667

Backport of #

Type of Change

Testing

Manual Testing

Test Steps:

Open both local and dev storybook instances
Simply compare the two and make sure they both use the same margins/paddings(they look identical)

Test Environment:

Tested locally
Tested in Storybook

Automated Testing

E2E Run:

Playwright Tests: E2E tests completed successfully (npm run test:e2e)

Unit Tests:

Unit tests added/updated
All unit tests pass (npm run test)
Ran new/updated files in Stryker

Integration Tests:

Integration tests added/updated
All integration tests pass

Screenshots/Recordings

Before

After

Checklist

Code Quality

My code follows the project's style guidelines
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have removed any console logs and debugging code
My changes generate no new warnings or errors
I have checked for and fixed any linting errors (npm run lint)
Code formatting is correct (npm run prettier:fix)

Documentation

I have updated the documentation accordingly
I have updated the README if necessary
I have added/updated Storybook stories for new/modified components
I have updated TypeScript types/interfaces

Accessibility

My changes follow accessibility best practices
Interactive elements are keyboard accessible
Proper ARIA labels and roles are used where needed
Color contrast meets WCAG standards

Dependencies

Any dependent changes have been merged and published
I have updated package dependencies if needed

Breaking Changes

Does this PR introduce breaking changes?

Yes
No

Additional Notes

Reviewer Guidelines

Focus Areas

Questions for Reviewers

coderabbitai · 2026-09-14T15:52:01Z

Important

🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: d0386814-a182-4a68-b8d6-dbb7d04d42a6

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

qodo-code-review · 2026-09-14T15:52:44Z

PR Summary by Qodo

FCN-667: Adopt PatternFly FormSection for wizard sections

✨ Enhancement 🕐 Less than 10 minutes

AI Description

• Replaces manually styled sections with PatternFly FormSection and its native title API.
• Preserves conditional Form wrapping, help content, actions, descriptions, and child rendering.

Diagram

graph TD
  Section["Section component"] --> Mode{"Form mode?"} -->|Yes| Form["PatternFly Form"] --> FormSection["FormSection"] --> Content["Section content"]
  Mode -->|No| FormSection
  FormSection --> Title["Native title"]

High-Level Assessment

Using PatternFly's supported FormSection component is the preferred approach because it removes duplicated internal styling while preserving existing behavior. Retaining custom form-group markup or CSS would remain coupled to PatternFly implementation details and require unnecessary maintenance.

Files changed (2) +10 / -17

Refactor (2) +10 / -17

Section.cssRemove duplicated PatternFly section-title styling +0/-7

Remove duplicated PatternFly section-title styling
• Removes the custom title class and token-based styling now supplied by FormSection. The grouped body-copy layout remains unchanged.
packages/nxtcm-rosa-hcp-wizard/src/components/Section.css

Section.tsxRender wizard sections with PatternFly FormSection +10/-10

Render wizard sections with PatternFly FormSection
• Replaces manual form-group and form-class wrappers with FormSection in both form and non-form modes. Passes the existing composite header through the native title prop while preserving IDs, descriptions, help, actions, and children.
packages/nxtcm-rosa-hcp-wizard/src/components/Section.tsx

qodo-code-review · 2026-09-14T15:54:44Z

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (1) 📜 Skill insights (0)

1. Section omits its UI guidance note 📘 Rule violation ⚙ Maintainability

Description

Section.tsx begins with the PatternFly import instead of a file-level comment referencing
docs/agent-rules/ui-component.md. Because this modified UI component has no pointer to its
applicable guidance, later changes can overlook the component-specific conventions documented there.

Code

packages/nxtcm-rosa-hcp-wizard/src/components/Section.tsx[1]
+import { Content, Form, FormSection, Split, SplitItem, Stack } from '@patternfly/react-core';

Evidence
PR Compliance ID 2644187 requires every modified UI component implementation to reference
docs/agent-rules/ui-component.md in its first non-empty file-level comment. The modified file
starts directly with an import and therefore has no such comment.
Rule 2644187: Component code must reference the matching task-type guidance document in a file-level comment
packages/nxtcm-rosa-hcp-wizard/src/components/Section.tsx[1-4]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The modified `Section.tsx` component lacks the required top-level reference to `docs/agent-rules/ui-component.md`.

## Fix Focus Areas
- packages/nxtcm-rosa-hcp-wizard/src/components/Section.tsx[1-1]

## Recommended Fix
Insert a file-level comment referencing `docs/agent-rules/ui-component.md` before the first import, making it the first non-empty line.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Context sources

⚠️ Tickets: not configured — ticket URL found in PR but could not be fetched — check ticket provider credentials

✅ Compliance rules (platform): 36 rules

✅ Skills: e2e-test-implementation, monaco-component-testing

Review mode: ⚖️ Balanced: This is a localized UI refactor, but it changes rendered component structure and PatternFly FormSection semantics in both form and non-form paths, so a careful standard review is warranted.

Tip of the day

💡 Did you know, you can group findings by type and pick your Finding display, from Minimal to Full

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

qodo-code-review · 2026-09-14T15:54:45Z

@@ -1,4 +1,4 @@
-import { Content, Form, Split, SplitItem, Stack } from '@patternfly/react-core';
+import { Content, Form, FormSection, Split, SplitItem, Stack } from '@patternfly/react-core';


1. Section omits its ui guidance note 📘 Rule violation ⚙ Maintainability

Section.tsx begins with the PatternFly import instead of a file-level comment referencing docs/agent-rules/ui-component.md. Because this modified UI component has no pointer to its applicable guidance, later changes can overlook the component-specific conventions documented there.

Agent Prompt

## Issue description The modified `Section.tsx` component lacks the required top-level reference to `docs/agent-rules/ui-component.md`. ## Fix Focus Areas - packages/nxtcm-rosa-hcp-wizard/src/components/Section.tsx[1-1] ## Recommended Fix Insert a file-level comment referencing `docs/agent-rules/ui-component.md` before the first import, making it the first non-empty line.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

vishsanghishetty · 2026-09-14T19:59:25Z

Review step - before / after (title regression)

kelvah · 2026-09-16T15:40:39Z

+  if (isForm) {
+    return (
+      <Form onSubmit={(e) => e.preventDefault()}>
+        <FormSection id={id} title={formSectionTitle}>


Now that I look at the code I think the ticket is misleading. (Sorry, I created it, I should've done a better analysis).

FormSection should be used to break down long forms into smaller sections. This happens only in the "Roles and policies" step of the wizard. For the rest of the wizard Section is used only once per step, just to add a Title and a wrapping Form. These are two separate use cases that should not be mixed.

If you agree I think we should use Section (maybe we could use better naming given html also as a section tag) just to wrap each step of the wizard. The title can be just a Title in a Content block outside the form in this case.

We can then use plain FormSections in the Roles step and avoid having two separate forms inside of it, which is weird.

looks good visually now. the Cluster details / Roles / Machine pool titles are back to heading-xs, and Review still lines up with the YAML button.

I agree with @kelvah on the structure though. FormSection is for splitting a long form, which is only the Roles step and everywhere else Section is just a step title plus a wrapping Form. Mixing those in one component is going to keep biting us.

I’d rather Section stay the step wrapper (title outside the form is fine), and Roles be one Form with two plain FormSections. right now that step still mounts two forms.

Yes, that makes sense, I agree. I'll try to rework it that way.

kelvah · 2026-09-16T15:41:35Z

        <Stack>
-          <Split hasGutter>
-            <SplitItem isFilled>
-              <div className="rosa-hcp-section__title pf-v6-u-w-100">
-                {label}
-                {idProp && (
-                  <LabelHelp id={idProp} labelHelp={labelHelp} labelHelpTitle={labelHelpTitle} />
-                )}
-              </div>
-            </SplitItem>
-            {labelActions ? <SplitItem>{labelActions}</SplitItem> : null}
-          </Split>
-          {description && (
-            <Content component="small" className="pf-v6-u-pt-sm">
-              {description}
-            </Content>
-          )}
+          {sectionHeader}
+          {sectionDescription}


This still works but the canonical pattern you see on PF docs is to use StackItem inside Stack

d3mdis requested a review from a team as a code owner September 14, 2026 15:51

qodo-code-review Bot reviewed Sep 14, 2026

View reviewed changes

vishsanghishetty requested changes Sep 14, 2026

View reviewed changes

Comment thread packages/nxtcm-rosa-hcp-wizard/src/components/Section.tsx Outdated

kelvah self-requested a review September 15, 2026 10:58

FCN-667: replace raw PF internal CSS with FormSection component

a7e0704

d3mdis force-pushed the FCN-667 branch from 074abb3 to a7e0704 Compare September 15, 2026 12:02

code refactor

d61336b

kelvah reviewed Sep 16, 2026

View reviewed changes

Navigation Menu

FCN-667: replace raw PF internal CSS with FormSection component - #402

FCN-667: replace raw PF internal CSS with FormSection component#402
d3mdis wants to merge 2 commits into
RedHatInsights:mainfrom
d3mdis:FCN-667

d3mdis commented Sep 14, 2026 •

edited by atlassian Bot

Loading

Uh oh!

coderabbitai Bot commented Sep 14, 2026 •

edited

Loading

Uh oh!

qodo-code-review Bot commented Sep 14, 2026

Uh oh!

qodo-code-review Bot commented Sep 14, 2026 •

edited

Loading

Uh oh!

qodo-code-review Bot Sep 14, 2026

Uh oh!

vishsanghishetty commented Sep 14, 2026

Uh oh!

Uh oh!

kelvah Sep 16, 2026 •

edited

Loading

Uh oh!

vishsanghishetty Sep 17, 2026

Uh oh!

d3mdis Sep 17, 2026

Uh oh!

kelvah Sep 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -1,4 +1,4 @@
		import { Content, Form, Split, SplitItem, Stack } from '@patternfly/react-core';
		import { Content, Form, FormSection, Split, SplitItem, Stack } from '@patternfly/react-core';

Conversation

d3mdis commented Sep 14, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Testing

Manual Testing

Automated Testing

Screenshots/Recordings

Before

After

Checklist

Code Quality

Documentation

Accessibility

Dependencies

Breaking Changes

Additional Notes

Reviewer Guidelines

Focus Areas

Questions for Reviewers

Uh oh!

coderabbitai Bot commented Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

qodo-code-review Bot commented Sep 14, 2026

PR Summary by Qodo

Uh oh!

qodo-code-review Bot commented Sep 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review by Qodo

Uh oh!

qodo-code-review Bot Sep 14, 2026

Choose a reason for hiding this comment

Uh oh!

vishsanghishetty commented Sep 14, 2026

Uh oh!

Uh oh!

kelvah Sep 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vishsanghishetty Sep 17, 2026

Choose a reason for hiding this comment

Uh oh!

d3mdis Sep 17, 2026

Choose a reason for hiding this comment

Uh oh!

kelvah Sep 16, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

d3mdis commented Sep 14, 2026 •

edited by atlassian Bot

Loading

coderabbitai Bot commented Sep 14, 2026 •

edited

Loading

qodo-code-review Bot commented Sep 14, 2026 •

edited

Loading

kelvah Sep 16, 2026 •

edited

Loading