Description
Describe the bug
The TablePagination component in the OpenCost UI uses deprecated props (onChangePage and onChangeRowsPerPage) and is missing the required prop onPageChange, which results in prop-type validation errors in the browser console. This affects user interaction and triggers runtime warnings.
To Reproduce
-
Run the OpenCost UI locally or access it via a deployed instance.
-
Navigate to any of the following views:
- Allocation Report
- Cloud Cost
- External Costs
This issue occurs in the following files:
-
src/components/allocationReport.js
-
src/components/cloudCost/cloudCost.js
-
src/components/externalCosts/externalCostsTable.js
-
Open the browser
-
You will see the following error and warnings:
-
Failed prop type: The prop onPageChange is marked as required in ForwardRef(TablePagination), but its value is undefined.
-
Failed prop type: The prop onChangeRowsPerPage of ForwardRef(TablePagination) is deprecated. Use the onRowsPerPageChange prop instead.
-
Failed prop type: The prop onChangePage of ForwardRef(TablePagination) is deprecated. Use the onPageChange prop instead.
-
Expected behavior
The pagination component should function correctly without any prop-type warnings or errors. Deprecated props should be replaced with current ones according to Material UI v5 documentation.
Screenshots