-
Notifications
You must be signed in to change notification settings - Fork 367
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-7585] - Upgrade to React 18 #10169
refactor: [M3-7585] - Upgrade to React 18 #10169
Conversation
This reverts commit 2f76b84.
Coverage Report: ❌ |
This reverts commit 12da589.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for this major update & cleanup (and all the work preceding it)!
I spent quite a bit of time navigating and all over the APP and so far sop good (I will spend more time and we'll have plenty time to test this in develop).
The only thing I noticed is that cold loading behaves a bit differently, seems to take a bit more time to resolve API requests maybe, or for the update to be reflected in the UI?). It often results in visible layout shifts. I can't quite put my finger on it yet. (will spend more time on it and try while serving a production build). It may also just be my own distorted impression.
Meanwhile the build job seems much faster 🎉
// from the upload page. | ||
flushSync(() => { | ||
dispatchAction(setPendingUpload(false)); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is new to me. Could we use const { rerender } = renderWithTheme
instead? Not too important, this just looks odd
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is actual application code, so we can't do that. Maybe someone who is more Reduxy and has experience with this uploader could suggest an alternative to this?
My long term hope is that this will all be refactored out of Redux and there will be less sketchy stuff like this
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for completing this effort! 🎉
The amount of times you had to type/find-and-replace await
in this PR is... so many. 😅 🥇
I spent a while going through the app, checking functionality of several product create flows (linodes, kube, firewall, volume, obj) and details pages, plus the accounts pages, checking a variety of different components and comparing with prod. Not seeing any regressions and I couldn't seem to replicate what Alban was seeing with longer API req resolution times, though we should keep an eye on that in develop as a team.
If we plan on merging this right after the next release branch is cut, we'll have a good amount of time for this to sit in develop.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work. Thank you @bnussman! Over all LGTM! No regression found in core features
(Linode / Volume / OBJ / Kubernetes / VPC and firewalls).
Description 📝
Updates to React 18 📦
This PR does everything needed to update to React 18 and the latest React testing library. 🎉
I really wanted to break up this work into smaller PR, but the lack of backwards compatibility with React Testing made this approach more realistic. 😖
Main Changes 🔁
await
React Testing Library'suserEvent
calls ⏱️userEvent
change 🖊️jest-axe
because we aren't really using it 🗑️ (I'm not opposed to using it, I just think we should revisit this and add it if we're gonna actually commit to using it. It was only used on one test)@testing-library/react-hooks
no longer exists. You now have to userenderHook
from@testing-library/react
🪝jackspeak
version to fix cypress / yarn / storybook issue 📌 (see const stringWidth = require('string-width'); cypress-io/cypress#27370 (comment))<select>
no longer allowsplaceholder
as a prop, so you will see changes to account for this ⌨️How to test 🧪
As an Author I have considered 🤔