From ee289c6cc48227fc625e19e19503cccf120a4de3 Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Fri, 1 Nov 2024 13:42:37 -0400 Subject: [PATCH 1/7] simple select and page size replacement --- .../PaginationFooter/PaginationFooter.tsx | 22 ++++++++++++------- packages/manager/tsconfig.json | 2 +- .../components/SimpleSelect/SimpleSelect.tsx | 11 ++++++++++ .../ui/src/components/SimpleSelect/index.ts | 1 + packages/ui/src/components/index.ts | 1 + packages/ui/src/foundations/themes/light.ts | 14 +++++++++++- 6 files changed, 41 insertions(+), 10 deletions(-) create mode 100644 packages/ui/src/components/SimpleSelect/SimpleSelect.tsx create mode 100644 packages/ui/src/components/SimpleSelect/index.ts diff --git a/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx b/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx index eefa46d7d30..5af70ed1339 100644 --- a/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx +++ b/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx @@ -1,8 +1,9 @@ +import { SimpleSelect } from '@linode/ui'; 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'; @@ -81,14 +82,19 @@ 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))} + sx={{ margin: 0.5 }} + value={pageSize} + > + {finalOptions.map((option) => ( + + {option.label} + + ))} + ) : null} diff --git a/packages/manager/tsconfig.json b/packages/manager/tsconfig.json index 25ce8001a09..7e4a16d07f7 100644 --- a/packages/manager/tsconfig.json +++ b/packages/manager/tsconfig.json @@ -44,5 +44,5 @@ "include": [ "src", "package.json" - ] +, "../ui/src/components/SimpleSelect" ] } diff --git a/packages/ui/src/components/SimpleSelect/SimpleSelect.tsx b/packages/ui/src/components/SimpleSelect/SimpleSelect.tsx new file mode 100644 index 00000000000..a6c3762a4ea --- /dev/null +++ b/packages/ui/src/components/SimpleSelect/SimpleSelect.tsx @@ -0,0 +1,11 @@ +import { KeyboardArrowDown } from '@mui/icons-material'; +import { Select } from '@mui/material'; +import React from 'react'; + +import type { SelectProps } from '@mui/material'; + +export const SimpleSelect = (props: SelectProps) => { + return ( + - ); -}; diff --git a/packages/ui/src/components/SimpleSelect/index.ts b/packages/ui/src/components/SimpleSelect/index.ts deleted file mode 100644 index d44fc8ecf48..00000000000 --- a/packages/ui/src/components/SimpleSelect/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './SimpleSelect'; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 45d819be41c..99c1cd89b7d 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -12,6 +12,5 @@ export * from './Notice'; export * from './Paper'; export * from './RadioGroup'; export * from './Stack'; -export * from './SimpleSelect'; export * from './Tooltip'; export * from './VisibilityTooltip'; From ad0c34effa5fb75ae4880a1460fcef1c7b4f5919 Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Thu, 14 Nov 2024 15:34:13 -0500 Subject: [PATCH 3/7] cleanup --- packages/manager/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/tsconfig.json b/packages/manager/tsconfig.json index 7e4a16d07f7..25ce8001a09 100644 --- a/packages/manager/tsconfig.json +++ b/packages/manager/tsconfig.json @@ -44,5 +44,5 @@ "include": [ "src", "package.json" -, "../ui/src/components/SimpleSelect" ] + ] } From f234966b0c92b7ec332bdb2180d67c36c98daf49 Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Thu, 14 Nov 2024 15:36:49 -0500 Subject: [PATCH 4/7] cleanup --- packages/ui/src/foundations/themes/light.ts | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index 9c713fba8f0..1bc3375a7ae 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -1112,26 +1112,14 @@ export const lightTheme: ThemeOptions = { icon: { color: `${Color.Neutrals[50]} !important`, height: 28, - marginTop: -4, marginRight: 4, - paddingLeft: 8, + marginTop: -2, opacity: 0.5, transition: 'color 225ms ease-in-out', width: 28, }, - root: { - borderRadius: 0, - }, select: { - border: `1px solid ${Color.Neutrals[40]}`, - height: 34, - minHeight: 34, - padding: '0 12px', - display: 'flex', - alignItems: 'center', - borderRadius: 0, '&:focus': { - borderColor: primaryColors.main, backgroundColor: 'transparent', }, }, From 63900eb6f124cbe839a76b39fc80f474dce45a4e Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Thu, 14 Nov 2024 17:03:55 -0500 Subject: [PATCH 5/7] fix tests --- .../e2e/core/billing/billing-invoices.spec.ts | 9 +++++---- .../billing/smoke-billing-activity.spec.ts | 10 ++++++---- .../manager/cypress/support/ui/pagination.ts | 18 +++++++++--------- .../PaginationFooter/PaginationFooter.tsx | 11 ++++++++++- 4 files changed, 30 insertions(+), 18 deletions(-) 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 315f4f3710e..04fe265a611 100644 --- a/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx +++ b/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx @@ -83,6 +83,11 @@ export const PaginationFooter = (props: Props) => { {!fixedSize ? ( { value={pageSize} > {finalOptions.map((option) => ( - + {option.label} ))} From fb7f0607c5821201677f9d0f2f0818614b573c86 Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Thu, 14 Nov 2024 17:08:04 -0500 Subject: [PATCH 6/7] Added changeset: Replace Pagination page size autocomplete with simple select --- .../manager/.changeset/pr-11203-changed-1731622084345.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-11203-changed-1731622084345.md 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)) From d7c0ccf2dc51c1281212956db1dfc459fac85f2a Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Thu, 14 Nov 2024 17:35:45 -0500 Subject: [PATCH 7/7] styling fix --- .../src/components/PaginationFooter/PaginationFooter.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx b/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx index 04fe265a611..2e9fe1a8cc7 100644 --- a/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx +++ b/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx @@ -118,6 +118,9 @@ const StyledTextField = styled(TextField, { backgroundColor: theme.bg.bgPaper, border: 'none', }, + '& .MuiList-root': { + border: `1px solid ${theme.palette.primary.main}`, + }, '& .MuiSelect-select': { border: 'none', },