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

Upgrade to React 16.14 #42169

Merged
merged 8 commits into from
Aug 25, 2021
Merged

Upgrade to React 16.14 #42169

merged 8 commits into from
Aug 25, 2021

Conversation

maddiedierker
Copy link
Contributor

@maddiedierker maddiedierker commented Aug 24, 2021

Upgrades React from 15.4 to 16.14, along with some supplementary changes and test fixes. Tracked as XTEAM-362.

Depends on #42168. Reapplies the changes in #42157, which were reverted in #42165. I merged the original PR in order to confirm which UI/eyes tests would fail on the test environment. Those failures are logged here. (Note: there were actually less eyes test failures when we deployed this change because I ended up splitting the redux/react-redux into a separate PR.)

We had each cabal bug bash to smoke test their parts of the product. Results here.

Description of each commit in this change

  • d7e99b8 + 5f33aa8 - Upgrades react, react-dom, and our enzyme adapter. Updates imports for the enzyme adapter. Removes react-addons-test-utils, which is replaced by react-dom/test-utils.
  • 9fff4be - Temporarily allows warnings for LessonProgress.story.jsx, which will no longer be needed once react-tooltip has been upgraded. (cc @Erin007)
  • 78fbc1e - Allows warnings in unit, integration, and storybook tests. All warnings are due to deprecated lifecycle methods (either from our code or our dependencies). See more in "Follow-up work."
  • ab433a8 - Disables UI tests on mobile Safari due to this issue. Similar to the change made in Upgrade react 15.6 #32063, which was later reverted.
  • Filter for 3 commits - Fixes a bug I created in this commit. More on the bug here.

Follow-up work

  • XTEAM-377 - Run a codemod to get rename deprecated lifecycle methods in our code to be prepended with "UNSAFE_". This gets rid of many warnings while we're refactoring those methods away.
  • XTEAM-378 - Upgrade react-tooltip. Fixes the warning in LessonProgress.story.jsx.
  • XTEAM-375 - Upgrade react-inspector. Gets rid of deprecation warnings in some tests, but requires updates to a few tests, so should be separate from this upgrade.
  • XTEAM-376 - Upgrade redux & react-redux. Gets rid of deprecation warnings in some tests, but requires some code and test changes, so should be separate from this upgrade.
  • XTEAM-379 - Re-allow test failures for warnings (depends on codemod changes and dependency upgrades).
  • XTEAM-328 (v2 upgrade) / XTEAM-364 (v4 upgrade) - Upgrade react-select (from ^1.2.1 to ~4). This is a large change as the API has changed significantly between versions, and this package is used in various places throughout our codebase. This isn't likely to happen right after this upgrade.

// TODO: Add warnings back once redux/react-redux have been upgraded.
// https://codedotorg.atlassian.net/browse/XTEAM-376
// throwOnConsoleWarningsEverywhere();

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for the through documentation in the PR description and code TODOs! This will make follow up sooo much easier.

Copy link
Contributor

@Erin007 Erin007 left a comment

Choose a reason for hiding this comment

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

🎉

Copy link
Contributor

@jmkulwik jmkulwik left a comment

Choose a reason for hiding this comment

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

This is awesome! I'm so excited & happy to see this coming together!

@jmkulwik
Copy link
Contributor

One tiny NIT: In the description, you have this line

Upgrade react-select to v2 and v4, respectively.

Is there a second thing that should be upgraded? The wording seems to imply react-select and something else needs to be upgraded.

@maddiedierker
Copy link
Contributor Author

One tiny NIT: In the description, you have this line

Upgrade react-select to v2 and v4, respectively.

Is there a second thing that should be upgraded? The wording seems to imply react-select and something else needs to be upgraded.

no, this means we need to upgrade react-select (currently at ^1.2.1) to version 4, but that it should happen in 2 steps (upgrade to v2 first then to v4) because of the large API changes. the "respectively" part is referring to the jira tasks -- XTEAM-328 is for the v2 upgrade, and XTEAM-364 is for v4. i'll update that bullet to clarify!

@maddiedierker maddiedierker merged commit 8c7dba1 into staging Aug 25, 2021
@maddiedierker maddiedierker deleted the reapply-react-16.14 branch August 25, 2021 19:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
react-16.14-upgrade Upgrading React to 16.14
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants