Upgrade to React 17 #5584

cee-chen · 2022-01-31T23:31:05Z

Summary

closes #4800
closes #4250

This PR upgrades React 16.12 to 17.0, as well as upgrading various other React-based 3rd-party component dependencies that now also support React 17.

Thanks to React's new policy of easy upgrades, the actual impact on our components and docs is minimal (barring QA on React's 17 changelog).

QA

Breaking event changes - we should test components with effects such as drag & drop, page-wide listeners, etc.
Kibana compatibility - Kibana is currently pinned at 16.12.0. We need to test if EUI on React 17 will work with Kibana and start a conversation with them on their planned upgrade timelines.
Enzyme does not support React 17 OOTB and requires a forked adapter to work (2d17e06).
- This is fine and gets us where we want, but we unfortunately need to seriously discuss moving away from Enzyme in the near future as there is almost no way Enzyme will work with React 18 (https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl).

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox

- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation
~~- [ ] Checked Code Sandbox works for any docs examples~~
- [ ] Added or updated jest and cypress tests

Checked for breaking changes and labeled appropriately

~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~

A changelog entry exists and is marked appropriately

cee-chen · 2022-02-01T00:02:54Z

Just tested this with yarn build-pack and a local Kibana pointed at the .tgz and everything seems to be working in QA with no bootstrap or console errors! The only change I had to make was also upgrading Kibana's react-beautiful-dnd to 13.1.0 (from 13.0.0). I don't think I can run Kibana's many tests/checks without a CI instance though.

Nevertheless this is still pretty exciting - could React 17 possibly be this easy? 💦

cee-chen · 2022-02-01T00:08:09Z

Spencer also came back re: Kibana's plans for React 17:

Pretty sure we don't have any timeline for it, but it should be a pretty easy upgrade. For react we usually let other teams lead there

Which I would take as an implicit greenlight to upgrade ahead of Kibana itself (rather than pinning to match them). Our "^16.12 || ^17.0" peerDependency should cover us for both Kibana and other apps that choose to use React 17.

kibanamachine · 2022-02-01T00:08:44Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5584/

cee-chen · 2022-02-02T21:11:30Z

Once #5554 and #5591 both land, I'll pull this out of draft (so that we don't have too much yarn lock shuffling going on at once). Also worth noting that the major item left to QA is portals/focus-traps (e.g. popovers, modals) across all components.

+ update snapshots that changed as a result

- Remove directly unused react-test-renderer dependency (it's used a sub-dependency of other dependencies, but we shouldn't have to manually keep it updated since we don't import it directly) - Fix `@emotion/react` semver - Fix unnecessary `react-is` import

cee-chen · 2022-02-07T16:37:26Z

This is ready for review. Unlike #5591, I think this is a non-breaking change since applications still on React 16.12+ should still fully work with EUI, it's just that now React 17+ is supported as well. Am I incorrect in thinking that @thompsongl @chandlerprall?

Once staging is updated, I'll do a quick QA of all components and another test against local Kibana (to confirm the combined Typescript upgrade works as well).

kibanamachine · 2022-02-07T17:07:10Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5584/

chandlerprall · 2022-02-07T17:29:05Z

I think this is a non-breaking change since applications still on React 16.12+ should still fully work with EUI, it's just that now React 17+ is supported as well

Agreed!

chandlerprall

Changes LGTM

thompsongl · 2022-02-07T17:30:24Z

I think this is a non-breaking change since applications still on React 16.12+ should still fully work with EUI, it's just that now React 17+ is supported as well

Yep, however the change to @emotion/react might be breaking; anything below 11.7 will cause warnings where it doesn't currently

cee-chen · 2022-02-07T17:46:00Z

Yep, however the change to @emotion/react might be breaking; anything below 11.7 will cause warnings where it doesn't currently

Ahh sorry that wasn't intentional, I was just trying to fix the semver. I thought 11.x wasn't valid semver, was I wrong about that? I can switch to ^11.0 if that makes more sense.

EDIT: I was totally wrong, .x is totally valid for peerDependencies - I'll go ahead and revert the change

`11.x` is valid semver

cee-chen · 2022-02-07T18:17:07Z

thompsongl · 2022-02-07T18:26:35Z

Any objections if I merge today so we have 1 breaking change release with React/Typescript/export types etc all at once?

I'll review this afternoon 👍

kibanamachine · 2022-02-07T18:29:11Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5584/

thompsongl

LGTM! Thanks, Constance!

Verified that the concerns raised in #4250 are resolved (probably with the dep upgrades) and focus traps work as expected.
Also confirmed that Kibana can accept the changes as long as react-beautiful-dnd is upgraded to v13.1

cee-chen · 2022-02-07T19:39:57Z

Thanks for flagging that issue Greg! I also just tested a combobox on Kibana (still on React 16.12) and it looks like the focus behavior is still working there as well.

I'll go ahead and merge, it's possible we still might run into shenanigans once we start an actual upgrade on Kibana and have to do a patch release - fingers crossed!

cee-chen added breaking change PRs with breaking changes. (Don't delete - used for automation) tech debt labels Jan 31, 2022

cee-chen requested review from chandlerprall and thompsongl January 31, 2022 23:31

chandlerprall mentioned this pull request Feb 3, 2022

[Epic] Convert enzyme tests to react testing library #5596

Closed

3 tasks

cee-chen added 8 commits February 7, 2022 08:25

Update React to latest 17.x

4fd6bad

Update Enzyme adapter

d7223b9

+ update snapshots that changed as a result

yarn.lock

7168324

Upgrade react components with newer versions that support React 17

0314b7e

Minor React dependency upgrades

1439a7a

yarn.lock updates

e675dd8

Misc cleanup

cd61a5b

- Remove directly unused react-test-renderer dependency (it's used a sub-dependency of other dependencies, but we shouldn't have to manually keep it updated since we don't import it directly) - Fix `@emotion/react` semver - Fix unnecessary `react-is` import

snapshot updates

c7b4621

cee-chen force-pushed the react-17 branch from 4df27b1 to c7b4621 Compare February 7, 2022 16:26

cee-chen removed the breaking change PRs with breaking changes. (Don't delete - used for automation) label Feb 7, 2022

Add changelog entry

5b135ce

cee-chen marked this pull request as ready for review February 7, 2022 16:33

chandlerprall approved these changes Feb 7, 2022

View reviewed changes

Revert @emotion/react peerDependencies change

2513e42

`11.x` is valid semver

thompsongl approved these changes Feb 7, 2022

View reviewed changes

cee-chen merged commit 43579b2 into elastic:main Feb 7, 2022

cee-chen deleted the react-17 branch February 7, 2022 19:40

thompsongl mentioned this pull request Feb 7, 2022

[EuiSuggest] Use EuiSelectable #5157

Merged

9 tasks

breehall mentioned this pull request Feb 8, 2022

Upgrade EUI to v48.1.1 elastic/kibana#125023

Merged

This was referenced Mar 31, 2022

Compatibility with React 17 elastic/elastic-charts#1638

Closed

Upgrade to react@^17 elastic/kibana#129095

Closed

j-m mentioned this pull request Apr 10, 2022

Fails to install #5775

Closed

Upgrade to React 17 #5584

Upgrade to React 17 #5584

Uh oh!

Conversation

cee-chen commented Jan 31, 2022 • edited by thompsongl Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

Checklist

Uh oh!

cee-chen commented Feb 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cee-chen commented Feb 1, 2022

Uh oh!

kibanamachine commented Feb 1, 2022

Uh oh!

cee-chen commented Feb 2, 2022

Uh oh!

cee-chen commented Feb 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kibanamachine commented Feb 7, 2022

Uh oh!

chandlerprall commented Feb 7, 2022

Uh oh!

chandlerprall left a comment

Choose a reason for hiding this comment

Uh oh!

thompsongl commented Feb 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cee-chen commented Feb 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cee-chen commented Feb 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thompsongl commented Feb 7, 2022

Uh oh!

kibanamachine commented Feb 7, 2022

Uh oh!

thompsongl left a comment

Choose a reason for hiding this comment

Uh oh!

cee-chen commented Feb 7, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cee-chen commented Jan 31, 2022 •

edited by thompsongl

Loading

cee-chen commented Feb 1, 2022 •

edited

Loading

cee-chen commented Feb 7, 2022 •

edited

Loading

thompsongl commented Feb 7, 2022 •

edited

Loading

cee-chen commented Feb 7, 2022 •

edited

Loading

cee-chen commented Feb 7, 2022 •

edited

Loading