OCPBUGS-78253: Fix InstallPlan > Components layout issue by rhamilto · Pull Request #16127 · openshift/console

rhamilto · 2026-03-11T14:32:27Z

Summary

Replaced raw <div className="co-m-pane__body"> wrapper with the proper PaneBody component for consistency

Bonus cleanup:

Replaced HTML table markup with PatternFly Table components (Table, Thead, Tr, Th, Tbody, Td) in the InstallPlanPreview component
Removed the deprecated co-table-container wrapper as PatternFly Table handles its own spacing

After

localhost_9000_k8s_ns_openshift-operators_operators coreos com~v1alpha1~InstallPlan_install-fh2vc_components

Test plan

Verify InstallPlan components table displays correctly
Check that table styling (compact variant, borders) is maintained
Ensure table responsiveness works as expected
Confirm no spacing regressions in the InstallPlan preview view

🤖 Generated with Claude Code

Summary by CodeRabbit

Refactor
- Updated the Install Plan Preview table layout to use standardized UI components for improved visual consistency and maintainability.

Replace HTML table markup with PatternFly Table components in the InstallPlanPreview component. Also replace the raw co-m-pane__body div wrapper with the proper PaneBody component for consistency. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

openshift-ci-robot · 2026-03-11T14:32:39Z

@rhamilto: This pull request references Jira Issue OCPBUGS-78253, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target version (4.22.0) matches configured target version for branch (4.22.0)
bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, POST)

Requesting review from QA contact:
/cc @yapei

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Summary

Replaced HTML table markup with PatternFly Table components (Table, Thead, Tr, Th, Tbody, Td) in the InstallPlanPreview component

Replaced raw <div className="co-m-pane__body"> wrapper with the proper PaneBody component for consistency

Removed the deprecated co-table-container wrapper as PatternFly Table handles its own spacing

Test plan

Verify InstallPlan components table displays correctly

Check that table styling (compact variant, borders) is maintained

Ensure table responsiveness works as expected

Confirm no spacing regressions in the InstallPlan preview view

🤖 Generated with Claude Code

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-robot · 2026-03-11T14:34:09Z

@rhamilto: This pull request references Jira Issue OCPBUGS-78253, which is valid.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target version (4.22.0) matches configured target version for branch (4.22.0)
bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

Requesting review from QA contact:
/cc @yapei

Details

In response to this:

Summary

Replaced raw <div className="co-m-pane__body"> wrapper with the proper PaneBody component for consistency

Bonus cleanup:

Replaced HTML table markup with PatternFly Table components (Table, Thead, Tr, Th, Tbody, Td) in the InstallPlanPreview component

Removed the deprecated co-table-container wrapper as PatternFly Table handles its own spacing

After

Test plan

Verify InstallPlan components table displays correctly

Check that table styling (compact variant, borders) is maintained

Ensure table responsiveness works as expected

Confirm no spacing regressions in the InstallPlan preview view

🤖 Generated with Claude Code

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.

coderabbitai · 2026-03-11T14:37:50Z

📝 Walkthrough

Walkthrough

This change migrates the InstallPlanPreview component's per-step table rendering from native HTML elements to PatternFly's PFTable component structure. The refactoring replaces manual <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements with their PatternFly equivalents: PFTable, Thead, Tbody, Tr, Th, and Td. Column semantics—Name, Kind, Status, and API version—remain unchanged. Import statements are updated to include the necessary PatternFly table components from the react-table package. The wrapper element key binding for PaneBody sections is adjusted accordingly. No public API or exported entity declarations are modified.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title mentions a layout issue fix, but the actual changes are a migration from HTML tables to PatternFly Table components—a refactoring/modernization effort, not a bug fix for a layout issue.	Update the title to reflect the actual change: 'OCPBUGS-78253: Migrate InstallPlan components table to PatternFly Table' better captures the intent and scope of the refactoring.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📝 Coding Plan

Generate coding plan for human review comments

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

Tip

CodeRabbit can generate a title for your PR based on the changes with custom instructions.

Set the reviews.auto_title_instructions setting to generate a title for your PR based on the changes in the PR with custom instructions.

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In
`@frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx`:
- Line 490: Add an accessibility label to the PFTable by passing the translation
string used elsewhere; specifically update the PFTable element (symbol PFTable
in this component) to include aria-label={t('olm~InstallPlans')} so it matches
the main InstallPlansList table's pattern and uses the existing t translation
function in scope.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: cefc0fc9-aad4-4e37-ba74-843810fe745e

📥 Commits

Reviewing files that changed from the base of the PR and between 21101de and b14fddd.

📒 Files selected for processing (1)

frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx

coderabbitai · 2026-03-11T14:37:54Z

frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx

-            </table>
-          </div>
-        </div>
+          <PFTable variant="compact" borders>


⚠️ Potential issue | 🟡 Minor

Add aria-label for accessibility compliance.

The table is missing an aria-label attribute, which screen readers rely on to convey the table's purpose. The main InstallPlansList table (line 218) correctly sets aria-label={t('olm~InstallPlans')} — this components table should follow the same pattern.

♿ Proposed fix to add aria-label

- <PFTable variant="compact" borders> + <PFTable variant="compact" borders aria-label={t('olm~InstallPlan components')}>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<PFTable variant="compact" borders>

<PFTable variant="compact" borders aria-label={t('olm~InstallPlan components')}>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx` at line 490, Add an accessibility label to the PFTable by passing the translation string used elsewhere; specifically update the PFTable element (symbol PFTable in this component) to include aria-label={t('olm~InstallPlans')} so it matches the main InstallPlansList table's pattern and uses the existing t translation function in scope.

logonoff

🦊

/lgtm

openshift-ci · 2026-03-11T14:42:46Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, rhamilto

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

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [logonoff,rhamilto]

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

rhamilto · 2026-03-11T16:03:50Z

/retest

rhamilto · 2026-03-11T21:17:30Z

/retest

rhamilto · 2026-03-12T11:41:51Z

/retest

rhamilto · 2026-03-12T15:40:24Z

/retest

rhamilto · 2026-03-12T19:37:55Z

/retest

rhamilto · 2026-03-12T23:51:59Z

/retest

openshift-ci · 2026-03-13T04:43:26Z

@rhamilto: all tests passed!

Full PR test history. Your PR dashboard.

Details

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 kubernetes-sigs/prow repository. I understand the commands that are listed here.

rhamilto · 2026-03-13T07:15:08Z

/assign @yapei

yapei · 2026-03-16T01:59:19Z

@XiyunZhao will help verify

openshift-ci-robot added jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. jira/valid-bug Indicates that a referenced Jira bug is valid for the branch this PR is targeting. labels Mar 11, 2026

openshift-ci bot requested a review from yapei March 11, 2026 14:32

openshift-ci bot requested review from Leo6Leo and jhadvig March 11, 2026 14:35

rhamilto changed the title ~~OCPBUGS-78253: Migrate InstallPlan components table to PatternFly Table~~ OCPBUGS-78253: Fox InstallPlan > Components layout issue Mar 11, 2026

openshift-ci bot added component/olm Related to OLM approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Mar 11, 2026

coderabbitai bot reviewed Mar 11, 2026

View reviewed changes

logonoff approved these changes Mar 11, 2026

View reviewed changes

openshift-ci bot assigned logonoff Mar 11, 2026

openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Mar 11, 2026

rhamilto changed the title ~~OCPBUGS-78253: Fox InstallPlan > Components layout issue~~ OCPBUGS-78253: Fix InstallPlan > Components layout issue Mar 12, 2026

openshift-ci bot assigned yapei Mar 13, 2026

	<PFTable variant="compact" borders>
	<PFTable variant="compact" borders aria-label={t('olm~InstallPlan components')}>

Conversation

rhamilto commented Mar 11, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

After

Test plan

Summary by CodeRabbit

Uh oh!

openshift-ci-robot commented Mar 11, 2026

Summary

Test plan

Uh oh!

openshift-ci-robot commented Mar 11, 2026

Summary

After

Test plan

Uh oh!

coderabbitai bot commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

logonoff left a comment

Choose a reason for hiding this comment

Uh oh!

openshift-ci bot commented Mar 11, 2026

Uh oh!

rhamilto commented Mar 11, 2026

Uh oh!

rhamilto commented Mar 11, 2026

Uh oh!

rhamilto commented Mar 12, 2026

Uh oh!

rhamilto commented Mar 12, 2026

Uh oh!

rhamilto commented Mar 12, 2026

Uh oh!

rhamilto commented Mar 12, 2026

Uh oh!

openshift-ci bot commented Mar 13, 2026

Uh oh!

rhamilto commented Mar 13, 2026

Uh oh!

yapei commented Mar 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rhamilto commented Mar 11, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 11, 2026 •

edited

Loading