Skip to content

Conversation

@jgyselov
Copy link
Contributor

@jgyselov jgyselov commented Oct 15, 2025

https://issues.redhat.com/browse/MGMT-21823

PF5:
Screenshot From 2025-10-14 15-42-32

Before
image

After:
image

Summary by CodeRabbit

  • Style

    • Improved alignment, color and visibility of cluster summary toggle text and icon.
    • Standardized bold styling for section titles.
    • Left-aligned text in preflight checks for clearer readability.
  • Refactor

    • Replaced the custom summary wrapper with a standard expandable section for consistency and built-in indentation.
    • Keeps existing summary content and remains expanded by default.

@openshift-ci-robot openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Oct 15, 2025
@openshift-ci-robot
Copy link

openshift-ci-robot commented Oct 15, 2025

@jgyselov: This pull request references MGMT-21823 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the task to target the "4.21.0" version, but no target version was set.

In response to this:

https://issues.redhat.com/browse/MGMT-21823

PF5:
Screenshot From 2025-10-14 15-42-32

Before
image

After:
image

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

@openshift-ci openshift-ci bot added approved Indicates a PR has been approved by an approver from all required OWNERS files. size/S Denotes a PR that changes 10-29 lines, ignoring generated files. labels Oct 15, 2025
@coderabbitai
Copy link

coderabbitai bot commented Oct 15, 2025

Walkthrough

Replaced a custom summary wrapper with PatternFly ExpandableSection, adjusted CSS selectors for the summary expandable toggle/icon, added a text-alignment utility to a GridItem in preflight checks, and wrapped toggle titles in PatternFly Content with bold utility. No public API changes.

Changes

Cohort / File(s) Summary
Summary wrapper refactor
libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx
Replaced TableSummaryExpandable wrapper with PatternFly ExpandableSection (keeps id, uses toggleContent, isExpanded={true}, isIndented); inner ReviewSummaryContent retained.
Expandable toggle content styling
libs/ui-lib/lib/ocm/components/clusterConfiguration/review/TableSummaryExpandable.tsx
Wraps toggleContent title in PatternFly Content with pf-v6-u-font-weight-bold; added Content import. No behavior/state changes.
Summary expandable CSS selectors
libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewCluster.css
Replaced broad .summary-expandable selectors with ID-scoped descendant selectors targeting #summary-expandable > .pf-v6-c-expandable-section__toggle .pf-v6-c-button__text and ... .pf-v6-c-button__icon to change which inner elements receive color, alignment, and visibility styles.
Preflight checks alignment
libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewPreflightChecks.tsx
Added pf-v6-u-text-align-start to the GridItem inside the ExpandableSection toggleContent (keeps pf-v6-u-text-wrap); text alignment adjusted only.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant ReviewSummary
  participant ExpandableSection as "PatternFly ExpandableSection"
  participant Content as "ReviewSummaryContent"

  User->>ReviewSummary: open Review step
  ReviewSummary->>ExpandableSection: render (id="summary-expandable", isExpanded=true, isIndented, toggleContent)
  ExpandableSection->>Content: display summary content
  note over ExpandableSection,Content: Toggle exists but content is forced expanded
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested labels

lgtm

Suggested reviewers

  • rawagner
  • ElayAharoni
  • ammont82

Poem

I thump my paws—expand, reveal!
Bolded title, tidy feel.
Selectors hop to narrower ground,
Preflight text aligned, neatly bound.
I nibble bugs and celebrate the view 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The pull request title "MGMT-21823: Review and create page styling not applied" directly aligns with the changeset's primary objective. All modifications across the four files are focused on styling the review page components: CSS selector refinements in ReviewCluster.css to target specific elements, addition of alignment CSS classes in ReviewPreflightChecks.tsx, component restructuring in ReviewSummary.tsx and TableSummaryExpandable.tsx to apply proper styling through PatternFly components. The title is specific, clear, and concise enough that a teammate reviewing the commit history would immediately understand that this PR addresses styling issues on the review page.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5e835d6 and 453c5a5.

📒 Files selected for processing (4)
  • libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewCluster.css (1 hunks)
  • libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewPreflightChecks.tsx (1 hunks)
  • libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx (2 hunks)
  • libs/ui-lib/lib/ocm/components/clusterConfiguration/review/TableSummaryExpandable.tsx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
  • libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx
  • libs/ui-lib/lib/ocm/components/clusterConfiguration/review/TableSummaryExpandable.tsx
  • libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewPreflightChecks.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: translation-files
  • GitHub Check: format
  • GitHub Check: tests
  • GitHub Check: unit-tests
  • GitHub Check: circular-deps
  • GitHub Check: lint
🔇 Additional comments (2)
libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewCluster.css (2)

27-28: Verify intent of visibility: hidden for the icon.

Using visibility: hidden preserves layout space while rendering the icon invisible. Typically, hidden UI elements use display: none to remove them from the layout flow entirely.

Confirm this is intentional and aligns with the UX design. If full removal is desired, consider switching to display: none.


21-25: Align selector target depth for consistent styling.

The selectors target two different components (ReviewSummary and ReviewPreflightChecks), but they apply styles at inconsistent DOM levels:

  • #summary-expandable targets .pf-v6-c-button__text (button text)
  • .review-expandable targets .pf-v6-c-expandable-section__toggle (toggle container)

The second selector should likely also target .pf-v6-c-button__text to ensure consistent styling depth and prevent unintended inheritance issues. Additionally, the ID selector increases specificity, making future CSS overrides harder—consider using a class selector instead for both components.


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

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

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
libs/ui-lib/lib/ocm/components/clusterConfiguration/review/TableSummaryExpandable.tsx (1)

16-16: Approve with note on styling inconsistency.

Using PatternFly's Content component with the utility class is the recommended approach for PF6. However, note that ReviewSummary.tsx (lines 72) uses plain text for toggleContent instead of wrapping it in Content like this component does. Consider applying this same pattern in ReviewSummary.tsx for consistency:

-      toggleContent={'Cluster summary'}
+      toggleContent={<Content className="pf-v6-u-font-weight-bold">Cluster summary</Content>}
libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx (1)

71-78: Verify if always-expanded behavior is intentional.

The ExpandableSection has isExpanded={true} but no onToggle handler, making it always expanded and non-interactive. If the intent is to keep the cluster summary always visible (as suggested by the "After" screenshot in the PR description), this is fine. However, if users should be able to collapse the summary, add an onToggle handler:

+const ReviewSummary = ({ cluster }: { cluster: Cluster }) => {
+  const [isExpanded, setIsExpanded] = React.useState(true);
   return (
     <ExpandableSection
       toggleContent={'Cluster summary'}
       id={'summary-expandable'}
-      isExpanded={true}
+      isExpanded={isExpanded}
+      onToggle={() => setIsExpanded(!isExpanded)}
       isIndented
     >
       <ReviewSummaryContent cluster={cluster} />
     </ExpandableSection>
   );
 };

Additionally, as noted in the TableSummaryExpandable.tsx review, consider wrapping toggleContent in a Content component for consistency:

-      toggleContent={'Cluster summary'}
+      toggleContent={<Content className="pf-v6-u-font-weight-bold">Cluster summary</Content>}
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cf3e4ce and 5e835d6.

📒 Files selected for processing (4)
  • libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewCluster.css (1 hunks)
  • libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewPreflightChecks.tsx (1 hunks)
  • libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx (2 hunks)
  • libs/ui-lib/lib/ocm/components/clusterConfiguration/review/TableSummaryExpandable.tsx (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: tests
  • GitHub Check: unit-tests
  • GitHub Check: format
  • GitHub Check: lint
  • GitHub Check: circular-deps
  • GitHub Check: translation-files
🔇 Additional comments (2)
libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewPreflightChecks.tsx (1)

189-191: LGTM! Minor UI alignment improvement.

The addition of pf-v6-u-text-align-start ensures consistent left alignment of the "Preflight checks" label. The multi-line formatting improves readability without affecting functionality.

libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewCluster.css (1)

21-21: Manually verify ExpandableSection toggle class names
Ensure the toggle button in PatternFly 6’s ExpandableSection renders .pf-v6-c-button__text and .pf-v6-c-button__icon; inspect the rendered DOM or PF6 source and adjust the CSS selectors if they differ.

@openshift-ci
Copy link

openshift-ci bot commented Oct 21, 2025

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ammont82, jgyselov

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-ci openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Oct 21, 2025
@ammont82 ammont82 added this to the v2.47 milestone Oct 21, 2025
@jgyselov jgyselov force-pushed the pf6_review_summary_styling branch from 5e835d6 to 453c5a5 Compare October 21, 2025 13:58
@openshift-ci openshift-ci bot removed the lgtm Indicates that a PR is ready to be merged. label Oct 21, 2025
@openshift-ci
Copy link

openshift-ci bot commented Oct 21, 2025

New changes are detected. LGTM label has been removed.

@openshift-ci-robot
Copy link

openshift-ci-robot commented Oct 21, 2025

@jgyselov: This pull request references MGMT-21823 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the task to target the "4.21.0" version, but no target version was set.

In response to this:

https://issues.redhat.com/browse/MGMT-21823

PF5:
Screenshot From 2025-10-14 15-42-32

Before
image

After:
image

Summary by CodeRabbit

  • Style

  • Improved alignment, color and visibility of cluster summary toggle text and icon.

  • Standardized bold styling for section titles.

  • Left-aligned text in preflight checks for clearer readability.

  • Refactor

  • Replaced the custom summary wrapper with a standard expandable section for consistency and built-in indentation.

  • Keeps existing summary content and remains expanded by default.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

approved Indicates a PR has been approved by an approver from all required OWNERS files. jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. size/S Denotes a PR that changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants