MM-17555 Upgrade react-intl to v3 #3866

cometkim · 2019-10-03T17:51:23Z

Summary

Upgrade/Migrate react-intl package to v3 to brings modern APIs like useIntl hook and native Intl locale data.

https://github.com/formatjs/react-intl/blob/master/docs/Upgrade-Guide.md#breaking-api-changes

Remove intlShape PropType (is not supported anymore, use IntlShape TypeScript definition instead)
Remove addLocaleData(), and add polyfills for Intl.PluralRules and Intl.RelativeTimeFormat.
~~Migrate <FormattedRelative/> into <FormatRelativeTime/>~~
~~Migrate formatRelative() into formatRelativeTime()~~
Set textComponent to 'span' explicitly
Fix tests with i18n helpers

So after this merged we should:

No more legacy context API for i18n.
No more legacy ref API for LocalizedInput component.
Use shallowWithIntl() helper for only wrapped by injectIntl() (not need to .dive() after .shallowWithIntl().)

Ticket Link

MM-17555

cometkim · 2019-10-04T18:40:45Z

Two (or more) problems:

~~We should unwrap by mocking injectIntl for enzyme's shallow renderer, but this break mount testing with nested component also using injectIntl~~
injectIntl provider wrappedComponent for this case.
~~Enzyme doesn't make instance properly in some test cases.~~
added help messages for these cases.

tests/helpers/intl-test-helper.tsx

cometkim · 2019-10-04T20:41:08Z

Test Suites: 57 failed, 371 passed, 428 total
Tests:       385 failed, 2254 passed, 2639 total
Snapshots:   909 passed, 909 total
Time:        295.736s

Well, now I'm going to fix 385 of 'shallowWithIntl() allows only components wrapped by injectIntl() HOC. Use shallow() instead.' (or Cannot find module 'prettier' from 'setup_jest_globals.js', what is this?) errors, but PR is ready to review.

Done.

cometkim · 2019-10-06T08:28:56Z

All tests are passed! 🎉

cometkim

Self reviews

components/leave_team_modal/leave_team_modal.jsx

components/__snapshots__/formatted_markdown_message.test.jsx.snap

components/integrations/__snapshots__/abstract_command.test.jsx.snap

i18n/i18n.jsx

cometkim · 2019-10-06T09:23:28Z

tests/helpers/intl-test-helper.tsx

@@ -0,0 +1,107 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.


This file is a key change.

lieut-data · 2019-10-09T18:06:35Z

I'm not in a position to review this change right now -- @enahum, could you propose some reviewers?

- Replace shallowWithIntl to shallow for components which aren't wrapped. - Remove `dive()` call. this is not necessary for shallowWithIntl anymore.

- Fix localized input to use forwardedRef - shallowWithIntl/mountWithIntl now attemps to unwrap forwardRef - Remove legacy ref API usage for LocalizedInput component - Fix related tests

- Remove unnecessary `.dive()` calls

cometkim · 2019-11-06T20:29:48Z

@cometkim There's some merge conflicts between this and master. Would you be able to merge the changes into your branch instead of rebasing next time? It makes it a bit easier to review since we can see where the changes occurred more easily

Also, there's also an linting error in the SaveButton component that needs to be addressed.
/root/mattermost-webapp/components/save_button.tsx
  26:5  error  Missing accessibility modifier on method definition render  @typescript-eslint/explicit-member-accessibility

@hmhealey Sorry, I just rebased this PR again. rebasing is much easier for me at now. I wanna know the context for merging by exploring the history, not just resolving conflicts.

cometkim · 2019-11-07T06:44:10Z

@hmhealey @enahum it's ready to merge

hmhealey · 2019-11-07T16:26:06Z

Excellent, thanks for fixing that! For some reason, it was showing that the build had failed for me up until now, so I'm glad to get this in before it breaks again 😛

* Upgrade react-intl to v3 * Update test helpers and related tests * Fix lint * Explicitly set testComponent to span * Fix tests for LeavePrivateChannelModal component * Fix intl-test-helper to unwrap injectIntl properly without mocking * Fix snapshots using new helper * Fix a test for NewMessageSeparator component * Add options to mountWithIntl to be any element * Fix snapshots for test helper update * Fix tests for GetLinkModal component * Add helpful exception to shallowWithIntl helper * Cleanup helpers and snapshots * Fix tests and snpashots - Replace shallowWithIntl to shallow for components which aren't wrapped. - Remove `dive()` call. this is not necessary for shallowWithIntl anymore. * Fix tests and snapshots about LocalizedInput - Fix localized input to use forwardedRef - shallowWithIntl/mountWithIntl now attemps to unwrap forwardRef - Remove legacy ref API usage for LocalizedInput component - Fix related tests * Fix tests and snapshots - Remove unnecessary `.dive()` calls * Fix lint and typings * Change inline snapshots to file snapshot * Fix broken tests since rebase * Remove an unused contextTypes definition * Refactor test code for <FormattedMarkdownMessage/> component * More discriptive displayName for the <LocalizedInput> component * Update some outdated snapshots * Fix a type error since last rebase * Re-gen clean lock file * Fix unresolved apis * Fix type error

cometkim added Work in Progress Not yet ready for review Hacktoberfest labels Oct 3, 2019

cometkim self-assigned this Oct 3, 2019

cometkim mentioned this pull request Oct 3, 2019

WIP: [MM-12741] Refactor emoji picker #3648

Closed

7 tasks

cometkim force-pushed the upgrade-react-intl branch 2 times, most recently from c9a720c to 96ae6cc Compare October 3, 2019 21:46

cometkim changed the title ~~WIP: Upgrade react-intl to v3~~ Upgrade react-intl to v3 Oct 4, 2019

cometkim commented Oct 4, 2019

View reviewed changes

tests/helpers/intl-test-helper.tsx Outdated Show resolved Hide resolved

cometkim marked this pull request as ready for review October 4, 2019 20:41

cometkim requested review from lieut-data and asaadmahmood October 4, 2019 20:41

cometkim force-pushed the upgrade-react-intl branch 6 times, most recently from 7280c92 to 5f53495 Compare October 6, 2019 03:16

cometkim added 2: Dev Review Requires review by a core commiter and removed Work in Progress Not yet ready for review labels Oct 6, 2019

cometkim force-pushed the upgrade-react-intl branch 3 times, most recently from 346df87 to ee90f34 Compare October 6, 2019 07:56

cometkim commented Oct 6, 2019

View reviewed changes

lieut-data removed their request for review October 9, 2019 18:06

cometkim force-pushed the upgrade-react-intl branch from ce33a1f to 3cc1c27 Compare October 23, 2019 14:56

cometkim added 13 commits November 7, 2019 05:19

Add helpful exception to shallowWithIntl helper

59d2bf0

Cleanup helpers and snapshots

61729a6

Fix tests and snpashots

8391a2a

- Replace shallowWithIntl to shallow for components which aren't wrapped. - Remove `dive()` call. this is not necessary for shallowWithIntl anymore.

Fix tests and snapshots about LocalizedInput

2a5f86a

- Fix localized input to use forwardedRef - shallowWithIntl/mountWithIntl now attemps to unwrap forwardRef - Remove legacy ref API usage for LocalizedInput component - Fix related tests

Fix tests and snapshots

305abb5

- Remove unnecessary `.dive()` calls

Fix lint and typings

762c86c

Change inline snapshots to file snapshot

de00aab

Fix broken tests since rebase

7e5dcf5

Remove an unused contextTypes definition

1fb72d1

Refactor test code for <FormattedMarkdownMessage/> component

c2a2fcf

More discriptive displayName for the <LocalizedInput> component

b48a2a4

Update some outdated snapshots

799c9f5

Fix a type error since last rebase

6df811b

cometkim force-pushed the upgrade-react-intl branch from 3f0bc75 to 6df811b Compare November 6, 2019 20:23

cometkim force-pushed the upgrade-react-intl branch from fd8ccbb to 36432ea Compare November 6, 2019 20:47

cometkim added 3 commits November 7, 2019 13:44

Re-gen clean lock file

7b43e70

Fix unresolved apis

c841d7f

Fix type error

e60230b

cometkim force-pushed the upgrade-react-intl branch from f775b22 to e60230b Compare November 7, 2019 04:45

cometkim removed the Awaiting Submitter Action Blocked on the author label Nov 7, 2019

hmhealey merged commit 5e89abc into mattermost:master Nov 7, 2019

amyblais added Changelog/Not Needed Does not require a changelog entry Docs/Not Needed Does not require documentation labels Nov 7, 2019

cometkim mentioned this pull request Nov 11, 2019

MM-19982: Fix error on trigger ProfilePopover #4185

Closed

hmhealey mentioned this pull request Nov 18, 2019

MM-20259 Revert react-intl upgrade #4255

Merged

cometkim deleted the upgrade-react-intl branch February 20, 2020 15:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MM-17555 Upgrade react-intl to v3 #3866

MM-17555 Upgrade react-intl to v3 #3866

cometkim commented Oct 3, 2019 •

edited

Loading

cometkim commented Oct 4, 2019 •

edited

Loading

cometkim commented Oct 4, 2019 •

edited

Loading

cometkim commented Oct 6, 2019

cometkim left a comment

cometkim Oct 6, 2019

lieut-data commented Oct 9, 2019

cometkim commented Nov 6, 2019

cometkim commented Nov 7, 2019

hmhealey commented Nov 7, 2019

		@@ -0,0 +1,107 @@
		// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.

MM-17555 Upgrade react-intl to v3 #3866

MM-17555 Upgrade react-intl to v3 #3866

Conversation

cometkim commented Oct 3, 2019 • edited Loading

Summary

Ticket Link

cometkim commented Oct 4, 2019 • edited Loading

cometkim commented Oct 4, 2019 • edited Loading

cometkim commented Oct 6, 2019

cometkim left a comment

Choose a reason for hiding this comment

cometkim Oct 6, 2019

Choose a reason for hiding this comment

lieut-data commented Oct 9, 2019

cometkim commented Nov 6, 2019

cometkim commented Nov 7, 2019

hmhealey commented Nov 7, 2019

cometkim commented Oct 3, 2019 •

edited

Loading

cometkim commented Oct 4, 2019 •

edited

Loading

cometkim commented Oct 4, 2019 •

edited

Loading