refactor: [M3-6920] - Replace `react-select` with `Autocomplete` in 'Billing' by carrillo-erik · Pull Request #10681 · linode/manager

carrillo-erik · 2024-07-15T21:30:24Z

Description 📝

This PR helps remove part of the react-select dependency for accessibility reasons and to consolidate our usage of third-party libraries. In particular, it replaces the Enhanced Select with our more versatile MUI-based Autocomplete component within the Billing feature.

Changes 🔄

List any change relevant to the reviewer.

Replace react-select with Autocomplete component within the Billing feature.
Add labels to the 'Transaction Type' and 'Transaction Date' select components in the Billing & Payment History to improve accessibility.
Update default exports with named exports.
Update unit tests.
Update e2e tests.

Preview 📷

Before	After

Target release date 🗓️

07/22/2024

How to test 🧪

Verification steps

(How to verify changes)

Verify that the Transaction Type and Transaction Date select components continue to work as expected.
Verify that the UI changes do not create visual regressions.

As an Author I have considered 🤔

Check all that apply

…onent

github-actions · 2024-07-15T21:57:34Z

Coverage Report: ❌
Base Coverage: 82.47%
Current Coverage: 82.46%

hana-akamai

The UI with the added labels feels a bit off to me; it pushes the Billing & Payment history header down which doesn't match the other sections. Can we add the label but just keep it visually hidden or work with UX to better integrate the label?

bnussman-akamai · 2024-07-17T17:06:32Z

+                placeholder=" "
              />
-              <Select
+              <Autocomplete


Should we hide the label, remove padding, and disableClearable to keep parity with the current UI?

Suggested change

<Autocomplete

<Autocomplete

disableClearable

textFieldProps={{

hideLabel: true,

noMarginTop: true,

}}

I updated the styles to match the other panels in the page, which removed extra white space around the Header and outline the panel. The labels for the select components are there to improve a11y (waiting feedback from UX). I added the disableClearable prop.

bnussman-akamai · 2024-07-17T17:11:15Z

+export interface Item<T = string, L = string> {
+  label: L;
+  value: T;
+}


I'd be in favor or removing this type and using as const on the options. It allows us to avoid this extra type and allows us to use Typescript's inference

const transactionTypeOptions = [ { label: 'Invoices', value: 'invoice' }, { label: 'Payments', value: 'payment' }, { label: 'All Transaction Types', value: 'all' }, ] as const; const transactionDateOptions = [ { label: '30 Days', value: '30 Days' }, { label: '60 Days', value: '60 Days' }, { label: '90 Days', value: '90 Days' }, { label: '6 Months', value: '6 Months' }, { label: '12 Months', value: '12 Months' }, { label: 'All Time', value: 'All Time' }, ] as const

I tried implementing the types per your suggestion and struggled a bit with making things work as expected and updating the tests to match the new implementation. This latest changes fall somewhere in the middle between your suggestion and my previous changes. Please review them, if you still believe things could be done better, I'd be happy to hop on a quick huddle to discuss where I got lost.

carrillo-erik · 2024-07-17T17:47:13Z

The UI with the added labels feels a bit off to me; it pushes the Billing & Payment history header down which doesn't match the other sections.

@hana-linode I can reduce some of the white space on the Billing & Payment History header. The other sections do not have interactive elements which is the key difference in this section with the select components.

Can we add the label but just keep it visually hidden or work with UX to better integrate the label?

I understand your points, however, not having labels on interactive elements is a ding on a11y. It's also mentioned in the epic link as part of the reasons for moving away from react-select. I can reach out to UX for alternate implementations.

hana-akamai · 2024-07-23T16:05:46Z

@carrillo-erik Do we have alternate UX implementations?

…ctor/M3-6920

hana-akamai · 2024-07-25T21:21:47Z

Can we fix the mobile spacing?

Add more spacing under Account active to separate the account text and transaction type inputs
Add more spacing after Transaction Types input

carrillo-erik · 2024-07-26T16:46:56Z

@hana-linode @bnussman-akamai
Please review these changes. The feedback I received from UX was that we should show the select component labels for accessibility. In order to minimize the white space the Account active since... text was moved under the panel header text.

carrillo-erik · 2024-07-26T17:00:39Z

Can we fix the mobile spacing?

Add more spacing under Account active to separate the account text and transaction type inputs

Add more spacing after Transaction Types input

@hana-linode Good eye! I've added more space in mobile view.

hana-akamai · 2024-07-26T19:40:29Z

 */
 export const getCutoffFromDateRange = (
-  range: DateRange,
+  range: TransactionDateOptions,


Can we just pass in the value instead of an object to keep the cases more explicit?

…ctor/M3-6920

bnussman-akamai · 2024-07-26T20:39:49Z

+  const { data: regions } = useRegionsQuery({
+    transformRegionLabel: isGeckoGAEnabled,
+  });


I'm a little confused on why this is in the diff

refactor: [M3-6320] - Replace react-select with Autocomplete comp…

e987e7b

…onent

carrillo-erik self-assigned this Jul 15, 2024

carrillo-erik requested a review from a team as a code owner July 15, 2024 21:30

carrillo-erik requested review from bnussman-akamai and hana-akamai and removed request for a team July 15, 2024 21:30

carrillo-erik added Requires Changes Work in Progress labels Jul 16, 2024

Fix e2e test that were failing

d1ac428

carrillo-erik requested a review from a team as a code owner July 17, 2024 14:30

carrillo-erik requested review from jdamore-linode and removed request for a team July 17, 2024 14:30

carrillo-erik added Ready for Review and removed Work in Progress Requires Changes labels Jul 17, 2024

carrillo-erik changed the title ~~refactor: [M3-6320] - Replace react-select with Autocomplete comp…~~ refactor: [M3-6920] - Replace react-select with Autocomplete in 'Billing' Jul 17, 2024

Add changeset

44b6dff

hana-akamai reviewed Jul 17, 2024

View reviewed changes

bnussman-akamai reviewed Jul 17, 2024

View reviewed changes

carrillo-erik added 2 commits July 17, 2024 11:54

Update payment history panel styles to match others

03ba0ec

Implement PR feedback to remove extra types

73e1de6

carrillo-erik requested review from bnussman-akamai and hana-akamai July 18, 2024 20:33

carrillo-erik added 2 commits July 25, 2024 11:11

Update styles based on feedback from UX

4cd36e2

Merge branch 'develop' of https://github.com/linode/manager into refa…

80ca0b1

…ctor/M3-6920

Add spacing in panel per PR feedback

5ba81cb

hana-akamai approved these changes Jul 26, 2024

View reviewed changes

hana-akamai added Add'tl Approval Needed Waiting on another approval! and removed Ready for Review labels Jul 26, 2024

carrillo-erik added 4 commits July 26, 2024 12:49

Merge branch 'develop' of https://github.com/linode/manager into refa…

59beb38

…ctor/M3-6920

Fix merge conflicts

6456607

Merge branch 'develop' of https://github.com/linode/manager into refa…

a4cb34c

…ctor/M3-6920

Update changes to reflect region label revert

1294b46

bnussman-akamai approved these changes Jul 29, 2024

View reviewed changes

bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Jul 29, 2024

Revert region label code that was missed

d1f04df

carrillo-erik merged commit 566ce75 into linode:develop Jul 29, 2024

This was referenced Aug 1, 2024

Release v1.125.0 - release → staging #10741

Merged

Release v1.125.0 - staging → master #10748

Merged

-              <Autocomplete
+              <Autocomplete
+                disableClearable
+                textFieldProps={{
+                  hideLabel: true,
+                  noMarginTop: true,
+                }}

Uh oh!

Conversation

carrillo-erik commented Jul 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Preview 📷

Target release date 🗓️

How to test 🧪

Verification steps

As an Author I have considered 🤔

Uh oh!

github-actions Bot commented Jul 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hana-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bnussman-akamai Jul 17, 2024

Choose a reason for hiding this comment

Uh oh!

carrillo-erik Jul 18, 2024

Choose a reason for hiding this comment

Uh oh!

bnussman-akamai Jul 17, 2024

Choose a reason for hiding this comment

Uh oh!

carrillo-erik Jul 18, 2024

Choose a reason for hiding this comment

Uh oh!

carrillo-erik commented Jul 17, 2024

Uh oh!

hana-akamai commented Jul 23, 2024

Uh oh!

hana-akamai commented Jul 25, 2024

Uh oh!

carrillo-erik commented Jul 26, 2024

Uh oh!

carrillo-erik commented Jul 26, 2024

Uh oh!

hana-akamai Jul 26, 2024

Choose a reason for hiding this comment

Uh oh!

bnussman-akamai Jul 26, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

carrillo-erik commented Jul 15, 2024 •

edited

Loading

github-actions Bot commented Jul 15, 2024 •

edited

Loading