OCPBUGS-84876: Remove DataViewToolbar wrapper from bottom pagination

[rhamilto]

Analysis / Root cause:

Follow-on fix for OCPBUGS-84876. The initial PR (#16391) added bottom pagination to ConsoleDataView but wrapped it in a DataViewToolbar, which is unnecessary.

Solution description:

Remove the DataViewToolbar wrapper from the bottom Pagination component and render it directly as a child of DataView. The DataViewToolbar wrapper added unnecessary DOM structure — Pagination works correctly as a direct child of DataView.

Screenshots / screen recording:
Before

After

Test setup:
Navigate to any page using ConsoleDataView (e.g., Nodes page).

Test cases:

• Verify bottom pagination is still visible and functional
• Verify top pagination still works
• Verify pagination syncs between top and bottom
• Verify mobile viewport still shows full controls in the bottom pagination

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:
N/A

Summary by CodeRabbit

• Refactor
  • Internal refactoring of pagination component integration with no user-facing changes.

[openshift-ci-robot]

@rhamilto: This pull request references Jira Issue OCPBUGS-84876, 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 (5.0.0) matches configured target version for branch (5.0.0)
• bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, POST)

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

Details

In response to this:

Analysis / Root cause:

Follow-on fix for OCPBUGS-84876. The initial PR (#16391) added bottom pagination to ConsoleDataView but wrapped it in a DataViewToolbar, which is unnecessary.

Solution description:

Remove the DataViewToolbar wrapper from the bottom Pagination component and render it directly as a child of DataView. The DataViewToolbar wrapper added unnecessary DOM structure — Pagination works correctly as a direct child of DataView.

Screenshots / screen recording:

Test setup:
Navigate to any page using ConsoleDataView (e.g., Nodes page).

Test cases:

• Verify bottom pagination is still visible and functional
• Verify top pagination still works
• Verify pagination syncs between top and bottom
• Verify mobile viewport still shows full controls in the bottom pagination

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:
N/A

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-84876, which is valid.

3 validation(s) were run on this bug

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

Details

In response to this:

Analysis / Root cause:

Follow-on fix for OCPBUGS-84876. The initial PR (#16391) added bottom pagination to ConsoleDataView but wrapped it in a DataViewToolbar, which is unnecessary.

Solution description:

Remove the DataViewToolbar wrapper from the bottom Pagination component and render it directly as a child of DataView. The DataViewToolbar wrapper added unnecessary DOM structure — Pagination works correctly as a direct child of DataView.

Screenshots / screen recording:
Before

After

Test setup:
Navigate to any page using ConsoleDataView (e.g., Nodes page).

Test cases:

• Verify bottom pagination is still visible and functional
• Verify top pagination still works
• Verify pagination syncs between top and bottom
• Verify mobile viewport still shows full controls in the bottom pagination

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:
N/A

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]

/assign @logonoff
/verified by @rhamilto
/cherry-pick release-4.22 release-4.21

[openshift-cherrypick-robot]

@rhamilto: once the present PR merges, I will cherry-pick it on top of release-4.22 in a new PR and assign it to you.

Details

In response to this:

/assign @logonoff
/verified by @rhamilto
/cherry-pick release-4.22 release-4.21

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.

[openshift-ci-robot]

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

Details

In response to this:

/assign @logonoff
/verified by @rhamilto
/cherry-pick release-4.22 release-4.21

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-84876, which is valid.

3 validation(s) were run on this bug

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

Details

In response to this:

Analysis / Root cause:

Follow-on fix for OCPBUGS-84876. The initial PR (#16391) added bottom pagination to ConsoleDataView but wrapped it in a DataViewToolbar, which is unnecessary.

Solution description:

Remove the DataViewToolbar wrapper from the bottom Pagination component and render it directly as a child of DataView. The DataViewToolbar wrapper added unnecessary DOM structure — Pagination works correctly as a direct child of DataView.

Screenshots / screen recording:
Before

After

Test setup:
Navigate to any page using ConsoleDataView (e.g., Nodes page).

Test cases:

• Verify bottom pagination is still visible and functional
• Verify top pagination still works
• Verify pagination syncs between top and bottom
• Verify mobile viewport still shows full controls in the bottom pagination

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:
N/A

Summary by CodeRabbit

• Refactor
• Internal refactoring of pagination component integration with no user-facing changes.

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 PR refactors the pagination wiring in ConsoleDataView.tsx. The change removes the pagination prop wrapper pattern around the PatternFly Pagination component and renders it as a direct JSX block within the DataViewToolbar. The Pagination element retains its itemCount (derived from filteredData.length), titles (from paginationTitles), PaginationVariant.bottom setting, and spread pagination props. The refactoring simplifies the component integration without altering the pagination behavior or props surface.

🚥 Pre-merge checks | ✅ 12

✅ Passed checks (12 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is fully related to the main change—it accurately describes the removal of the DataViewToolbar wrapper from the bottom pagination component.
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.
Stable And Deterministic Test Names	✅ Passed	PR modifies only React/TypeScript component (ConsoleDataView.tsx); custom check targets Ginkgo Go tests which are absent in this PR scope.
Test Structure And Quality	✅ Passed	This PR modifies only React/TypeScript components (ConsoleDataView.tsx), not Ginkgo tests. The check is not applicable as it requires reviewing Ginkgo test code specifically.
Microshift Test Compatibility	✅ Passed	This PR modifies frontend React/TypeScript code (ConsoleDataView.tsx), not Go test files. The MicroShift test compatibility check applies only to Ginkgo e2e tests, which are not added in this PR.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	This PR modifies only a React/TypeScript frontend component (ConsoleDataView.tsx). No new Ginkgo e2e tests are added; the SNO compatibility check only applies to new test additions.
Topology-Aware Scheduling Compatibility	✅ Passed	This PR modifies a React UI component (ConsoleDataView.tsx) with no deployment manifests, operator code, or Kubernetes scheduling constraints. Check is not applicable.
Ote Binary Stdout Contract	✅ Passed	PR modifies only frontend React/TypeScript component (ConsoleDataView.tsx). OTE Binary Stdout Contract applies to Go test binaries with process-level code; not applicable to React component changes.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	No Ginkgo e2e tests added in this PR. Changes are limited to React/TypeScript frontend component refactoring of ConsoleDataView pagination wrapper; check does not apply.
Description check	✅ Passed	PR description comprehensively covers all required sections with clear analysis, solution, test cases, and browser conformance checklist.

_{✏️ 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.}

[logonoff]

Probably deserves an issue on patternfly/react-data-view

/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

[openshift-ci]

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

[openshift-ci-robot]

@rhamilto: Jira Issue Verification Checks: Jira Issue OCPBUGS-84876
✔️ 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-84876 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:

Analysis / Root cause:

Follow-on fix for OCPBUGS-84876. The initial PR (#16391) added bottom pagination to ConsoleDataView but wrapped it in a DataViewToolbar, which is unnecessary.

Solution description:

Remove the DataViewToolbar wrapper from the bottom Pagination component and render it directly as a child of DataView. The DataViewToolbar wrapper added unnecessary DOM structure — Pagination works correctly as a direct child of DataView.

Screenshots / screen recording:
Before

After

Test setup:
Navigate to any page using ConsoleDataView (e.g., Nodes page).

Test cases:

• Verify bottom pagination is still visible and functional
• Verify top pagination still works
• Verify pagination syncs between top and bottom
• Verify mobile viewport still shows full controls in the bottom pagination

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:
N/A

Summary by CodeRabbit

• Refactor
• Internal refactoring of pagination component integration with no user-facing changes.

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-cherrypick-robot]

@rhamilto: new pull request created: #16483

Details

In response to this:

/assign @logonoff
/verified by @rhamilto
/cherry-pick release-4.22 release-4.21

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.