OCPBUGS-78253: Fix InstallPlan > Components layout issue

[rhamilto]

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

Summary by CodeRabbit

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

[openshift-ci-robot]

@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]

@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]

📝 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]

⚠️ 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]

[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]

/retest

[rhamilto]

/retest

[rhamilto]

/retest

[rhamilto]

/retest

[rhamilto]

/retest

[rhamilto]

/retest

[rhamilto]

/assign @yapei

[yapei]

@XiyunZhao will help verify

[XiyunZhao]

/verified by @XiyunZhao
Bug has been verified

[openshift-ci-robot]

@XiyunZhao: This PR has been marked as verified by @XiyunZhao.

Details

In response to this:

/verified by @XiyunZhao
Bug has been verified

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]

@rhamilto: Jira Issue Verification Checks: Jira Issue OCPBUGS-78253
✔️ This pull request was pre-merge verified.
✔️ All associated pull requests have merged.
✔️ All associated, merged pull requests were pre-merge verified.

Jira Issue OCPBUGS-78253 has been moved to the MODIFIED state and will move to the VERIFIED state when the change is available in an accepted nightly payload. 🕓

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

Summary by CodeRabbit

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

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.

[rhamilto]

/cherry-pick release-4.21 release-4.20 release-4.19

[openshift-cherrypick-robot]

@rhamilto: #16127 failed to apply on top of branch "release-4.21":

Applying: OCPBUGS-78253: Migrate InstallPlan components table to PatternFly Table
Using index info to reconstruct a base tree...
M	frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx
Falling back to patching base and 3-way merge...
Auto-merging frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx
CONFLICT (content): Merge conflict in frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx
error: Failed to merge in the changes.
hint: Use 'git am --show-current-patch=diff' to see the failed patch
hint: When you have resolved this problem, run "git am --continue".
hint: If you prefer to skip this patch, run "git am --skip" instead.
hint: To restore the original branch and stop patching, run "git am --abort".
hint: Disable this message with "git config set advice.mergeConflict false"
Patch failed at 0001 OCPBUGS-78253: Migrate InstallPlan components table to PatternFly Table

Details

In response to this:

/cherry-pick release-4.21 release-4.20 release-4.19

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.