diff --git a/packages/manager/.changeset/pr-11203-changed-1731622084345.md b/packages/manager/.changeset/pr-11203-changed-1731622084345.md new file mode 100644 index 00000000000..cadcc160879 --- /dev/null +++ b/packages/manager/.changeset/pr-11203-changed-1731622084345.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +Replace Pagination page size autocomplete with simple select ([#11203](https://github.com/linode/manager/pull/11203)) diff --git a/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts b/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts index c38e5569a42..2f33d308bc2 100644 --- a/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts +++ b/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts @@ -302,7 +302,9 @@ describe('Account invoices', () => { cy.findByLabelText('Invoice Details').within(() => { // Confirm that page size selection is set to "Show 25". ui.pagination.findPageSizeSelect().click(); - ui.autocompletePopper.findByTitle('Show 25').should('be.visible').click(); + cy.get('[data-qa-pagination-page-size-option="25"]') + .should('exist') + .click(); // Confirm that pagination controls list exactly 4 pages. ui.pagination @@ -337,9 +339,8 @@ describe('Account invoices', () => { // Change pagination size selection from "Show 25" to "Show 100". ui.pagination.findPageSizeSelect().click(); - ui.autocompletePopper - .findByTitle('Show 100') - .should('be.visible') + cy.get('[data-qa-pagination-page-size-option="100"]') + .should('exist') .click(); // Confirm that all invoice items are listed. diff --git a/packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts b/packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts index 349f95198f1..4780133b78f 100644 --- a/packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts +++ b/packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts @@ -276,8 +276,9 @@ describe('Billing Activity Feed', () => { .within(() => { // Confirm that pagination page size selection is set to "Show 25". ui.pagination.findPageSizeSelect().click(); - - ui.select.findItemByText('Show 25').should('be.visible').click(); + cy.get('[data-qa-pagination-page-size-option="25"]') + .should('exist') + .click(); // Confirm that pagination controls list exactly 4 pages. ui.pagination @@ -309,8 +310,9 @@ describe('Billing Activity Feed', () => { // Change page size selection from "Show 25" to "Show 100". ui.pagination.findPageSizeSelect().click(); - - ui.select.findItemByText('Show 100').should('be.visible').click(); + cy.get('[data-qa-pagination-page-size-option="100"]') + .should('exist') + .click(); // Confirm that all 100 invoices are shown. cy.get('tr').should('have.length', 101); diff --git a/packages/manager/cypress/support/ui/pagination.ts b/packages/manager/cypress/support/ui/pagination.ts index ffc5d349288..40493baebbd 100644 --- a/packages/manager/cypress/support/ui/pagination.ts +++ b/packages/manager/cypress/support/ui/pagination.ts @@ -12,23 +12,23 @@ export const pagination = { }, /** - * Finds the pagination page size selection. + * Finds the pagination page selection controls. * * @returns Cypress chainable. */ - findPageSizeSelect: () => { - return pagination - .find() - .find('[data-qa-pagination-page-size]') - .find('[data-qa-autocomplete]'); + findControls: () => { + return pagination.find().find('[data-qa-pagination-controls]'); }, /** - * Finds the pagination page selection controls. + * Finds the pagination page size selection. * * @returns Cypress chainable. */ - findControls: () => { - return pagination.find().find('[data-qa-pagination-controls]'); + findPageSizeSelect: () => { + return pagination + .find() + .find('[data-qa-pagination-page-size]') + .find('[role="combobox"]'); }, }; diff --git a/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx b/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx index eefa46d7d30..4440e4d22f5 100644 --- a/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx +++ b/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx @@ -2,9 +2,10 @@ import { Box } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; -import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; +import { MenuItem } from 'src/components/MenuItem'; import { PaginationControls } from '../PaginationControls/PaginationControls'; +import { TextField } from '../TextField'; export const MIN_PAGE_SIZE = 25; @@ -80,36 +81,58 @@ export const PaginationFooter = (props: Props) => { /> )} {!fixedSize ? ( - - + handleSizeChange(selected.value)} - options={finalOptions} - textFieldProps={{ hideLabel: true, noMarginTop: true }} - value={defaultPagination} - /> - + onChange={(e) => handleSizeChange(Number(e.target.value))} + select + value={pageSize} + > + {finalOptions.map((option) => ( + + {option.label} + + ))} + + ) : null} ); }; -const PageSizeSelectContainer = styled(Box, { - label: 'PageSizeSelectContainer', +const StyledTextField = styled(TextField, { + label: 'StyledTextField', })(({ theme }) => ({ - '& .MuiInput-input': { - paddingTop: 4, - }, '& .MuiInput-root': { - '&.Mui-focused': { - boxShadow: 'none', - }, backgroundColor: theme.bg.bgPaper, + border: '1px solid transparent', + }, + '& .MuiList-root': { + border: `1px solid ${theme.palette.primary.main}`, + }, + '& .MuiSelect-select': { border: 'none', }, - '& .react-select__value-container': { - paddingLeft: 12, + '& .MuiSvgIcon-root': { + margin: 0, + padding: 0, + position: 'relative', + top: 0, + }, + '&.Mui-focused': { + border: `1px dotted ${theme.color.grey1}`, + boxShadow: 'none', }, }));