Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: [M3-6919] - replace remaining react-select instances & types in Linodes Feature #11509

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from

Conversation

abailly-akamai
Copy link
Contributor

@abailly-akamai abailly-akamai commented Jan 10, 2025

Description 📝

Continuing the replacement of react-select through the app. This one targets left over instances & borrowed types in Linode detail

Changes 🔄

  • replace old IP sharing select
  • replace old Linode settings disk select in password panel
  • delete unused DiskSelect component
  • small modifications in Select component
  • export new AutocompleteOption types to replace the old Item

Preview 📷

No visual or functional regression to expect from this PR

How to test 🧪

Verification steps

  • Verify IP sharing select behavior: /linodes/{id}/networking > IP Sharing
  • Verify Disk select in Linode Settings password panel: /linodes/{id}/settings
  • Confirm tests & types
Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support


  • I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

  • All unit tests are passing
  • TypeScript compilation succeeded without errors
  • Code passes all linting rules

@abailly-akamai abailly-akamai self-assigned this Jan 10, 2025
@abailly-akamai abailly-akamai marked this pull request as ready for review January 10, 2025 21:49
@abailly-akamai abailly-akamai requested review from a team as code owners January 10, 2025 21:49
@abailly-akamai abailly-akamai requested review from jdamore-linode, dwiley-akamai and coliu-akamai and removed request for a team January 10, 2025 21:49
onChange={(e, value) => handleChartRangeChange(value)}
options={options}
sx={{ mt: 1, width: 150 }}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nothing changed here, just linting - only change is above

@@ -506,19 +506,18 @@ export const IPSharingRow: React.FC<SharingRowProps> = React.memo((props) => {
</Grid>
<Grid sm={10} xs={12}>
<StyledSelect
onChange={(_, selected: AutocompleteOption<string>) =>
Copy link
Member

@bnussman-akamai bnussman-akamai Jan 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like how Autocomplete allows you to pass any type of options and the onChange types get properly inferred. This doesn't seem to be the case with Select 😥

Screenshot 2025-01-13 at 12 10 35 PM

Select Autocomplete
Screenshot 2025-01-13 at 12 09 06 PM Screenshot 2025-01-13 at 12 13 48 PM

Does it make sense to / can we improve the types on Select? This seems like a step backwards in DX compared to Autocomplete because we have to manually type this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for sadness! Thanks for suggesting this improvement.

I added inference for the onChange which is indeed a nice improvement indeed.

As far as the ability to add any type of option, I'd like to keep things the way they are for now, and see if this is something we'd really want to change in the future (would add quite a bit of complexity). Despite being build on top of the Autocomplete, this select aims to limit the amount of things we can do with it (for more "simple" use and without complicating the Autocomplete further - they both serve their different purpose and I'd like to keep it that way we can help it).

If the need arises we can revisit!

Copy link
Contributor

@dwiley-akamai dwiley-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IP Sharing & Disk select behavior ✅
Code review ✅

Can we get a changeset added?

packages/ui/src/components/Select/Select.stories.tsx Outdated Show resolved Hide resolved
Copy link

github-actions bot commented Jan 15, 2025

Coverage Report:
Base Coverage: 87.18%
Current Coverage: 87.18%

@bnussman-akamai bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Tech Debt labels Jan 15, 2025
Copy link
Contributor

@coliu-akamai coliu-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ disk select
✅ ip sharing

thank you!

@linode-gh-bot
Copy link
Collaborator

Cloud Manager UI test results

🎉 474 passing tests on test run #9 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
0 Failing474 Passing2 Skipped98m 24s

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Multiple approvals and ready to merge!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants