feat: update react & react-dom to v17 #1009

Mashal-m · 2023-07-24T10:59:49Z

Ticket

Upgrade React JS to v17

Description

Updated react & react-dom to v17 along with react-test-renderer, react-helmet, react-textarea-autosize, @testing-library/react and react-redux to respective compatible versions
Since Enzyme does not provide support React 17 (enzymejs/enzyme#2429) or 18 (enzymejs/enzyme#2524) itself we switched to community-supported project that aim to provide compatibility between Enzyme and React 17, replacing enzyme-adapter-react-16 with @wojtekmaj/enzyme-adapter-react-17
Replaced react-truncate with react-lines-ellipsis due to dependency issues with react v17
Update edx packages @edx/frontend-enterprise-catalog-search, @edx/frontend-enterprise-hotjar , @edx/frontend-enterprise-logistration @edx/frontend-enterprise-utils @edx/frontend-platform, and @edx/paragon

For all changes

Ensure adequate tests are in place (or reviewed existing tests cover changes)

Only if submitting a visual change

Ensure to attach screenshots
Ensure to have UX team confirm screenshots

…n-portal into mashal-m/react-upgrade-to-v17

codecov · 2023-08-07T14:04:48Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (dbdbe10) 85.42% compared to head (0851d45) 85.42%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1009   +/-   ##
=======================================
  Coverage   85.42%   85.42%           
=======================================
  Files         494      494           
  Lines       10604    10604           
  Branches     2214     2214           
=======================================
  Hits         9058     9058           
  Misses       1504     1504           
  Partials       42       42

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

…n-portal into mashal-m/react-upgrade-to-v17

src/components/ContentHighlights/ContentHighlightCardItem.jsx

package.json

adamstankiewicz · 2023-08-23T14:35:39Z

...ntentHighlights/CatalogVisibility/tests/ContentHighlightCatalogVisibilityRadioInput.test.jsx

+    /* Upgrading the @edx/paragon version from 20.41.0 to 20.42.0
+    caused this function to be called twice. Setting this to 2 in order to fix the test */
+    expect(sendEnterpriseTrackEvent).toHaveBeenCalledTimes(2);


Hmm, this doesn't feel quite like a "fix"... If the component itself is calling sendEnterpriseTrackEvent more than expected when the use toggled between these radio options (see screenshot), then that is a bug as it would skew the product analytics around this event (duplicate events for a single click).

Can this be reproduced on the Paragon component itself (i.e., onChange callback function passed to Form.Radioset)? If not, then it might be an issue with this repo's usage of the Paragon component.

I've implemented the Form.Radioset component in another part of my code, and I'm facing an issue where the onChange function is getting called twice.

Attaching the code and UI snippet below.

@Mashal-m I believe this is related to this Paragon bug and associated fix (in code review), and will apply to Paragon v21.

This same issue came up recently when trying to upgrade Paragon to latest v20 as well. We opted to defer on the Paragon latest v20 upgrade as this regression ends up causing duplicate success Toast messages to appear within some of our features in this MFE...

[question] Is it possible to move forward with this PR without upgrading Paragon to latest v20 to avoid introducing this regression?

npm start is failing on the master branch, and I'm encountering the following error (attached screenshot). The fix for this error was released in v20.43.3. However, v20.42.0 is causing this test failure, so to resolve the master issue, we need to upgrade the Paragon version.

Ah, got it. Thanks for clarifying. Luckily, the aforementioned bug preventing us from upgrading to latest v20, causing the issue with the duplicate onChange calls was fixed and backported to v20.46.3 earlier today.

We should be able to move forward with upgrading to latest v20 at this point, without needing to update tests regarding expect(sendEnterpriseTrackEvent).toHaveBeenCalledTimes(2); 🤞

src/components/ContentHighlights/tests/ContentHighlightsCardItemsContainer.test.jsx

adamstankiewicz · 2023-08-23T14:38:58Z

src/components/settings/SettingsLMSTab/tests/AuthorizationsConfigs.test.tsx

@@ -242,38 +242,40 @@ describe('Test authorization flows for Blackboard and Canvas', () => {
    expect(mockCanvasFetch).toHaveBeenCalledWith(1);
  });
  test('Canvas config is activated after last step', async () => {
-    renderWithRouter(<SettingsCanvasWrapper />);
-    mockCanvasUpdate.mockResolvedValue({ data: mockCanvasResponseDataActive });
+    setTimeout(async () => {


[curious] Why is a setTimeout necessary here? It feels like a code smell that setTimeout would be needed in a test like this when its used React Testing Library.

The initial issue was I ran into a "Null: create event" error when running this test file. The problem seemed to be with the last section. Async/await operations weren't working properly there, so I had to use setTimeout to add a small delay in order to clear the current stack.

I have made some changes for this particular test case (commit)

…n-portal into mashal-m/react-upgrade-to-v17

Mashal-m · 2023-10-16T13:44:41Z

Left some additional minor, non-blocking comments. Once Paragon upgrades to v20.46.3 to pull in the fix for the duplicate onChange in a couple Paragon components, this PR should be good to go.

I have pushed the requested changes and upgraded Paragon as well, we are good to go!

…n-portal into mashal-m/react-upgrade-to-v17

brobro10000

I did notice some failing tests in the PR.
For the EmailAddressTableCell.tests.jsx failing tests, refactoring to the await waitFor syntax seemed to fix the issue with the enterprise track event count and could be used to fix up similar issues the tests are showing

    await waitFor(() => expect(screen.findByText('Learner data disabled', { exact: false })));
    await waitFor(() => expect(sendEnterpriseTrackEvent).toHaveBeenCalledTimes(1));

Great job refactoring to paragons Truncate component 👍🏽

brobro10000 · 2024-01-03T15:49:33Z

package.json

-    "react-helmet": "5.2.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-helmet": "^6.1.0",


[nit] I would pin this upgrade 👍🏽

Mashal-m · 2024-01-04T10:38:02Z

I did notice some failing tests in the PR. For the EmailAddressTableCell.tests.jsx failing tests, refactoring to the await waitFor syntax seemed to fix the issue with the enterprise track event count and could be used to fix up similar issues the tests are showing
    await waitFor(() => expect(screen.findByText('Learner data disabled', { exact: false })));
    await waitFor(() => expect(sendEnterpriseTrackEvent).toHaveBeenCalledTimes(1));
Great job refactoring to paragons Truncate component 👍🏽

Fixed the tests, it is ready for merge now.

mashal-m added 18 commits July 24, 2023 15:58

feat: update react & react-dom to v17

89ea263

chore: replace react truncate w react-lines-ellipsis

a181e35

fix: update snapshots

90eeaf3

build: set helmet w named component

5355682

build: update jest pkgs

98aeda6

build: update pkgs

e77f362

fix: fix test and lint

c1cc178

build: update test pkg

6b8b494

fix: fix test

6bcebc1

refactor: update package.json file

adb0eb8

build: update lock file

5733460

fix: fix test

13924a2

refactor: update test file

06b62e8

fix: fix test in numbercard

87ca646

fix: fix test in content highlight card

fd9c77e

fix: fix failing test that is coming from paragon upgrade

79f81d4

Merge branch 'master' of https://github.com/openedx/frontend-app-admi…

f0fe63c

…n-portal into mashal-m/react-upgrade-to-v17

fix: fix test

23991b8

refactor: add comment in test file

c4ad700

Mashal-m marked this pull request as ready for review August 11, 2023 10:03

mashal-m added 3 commits August 11, 2023 15:12

Merge branch 'master' of https://github.com/openedx/frontend-app-admi…

3f1e408

…n-portal into mashal-m/react-upgrade-to-v17

fix: fix conflicts

08d4b91

fix: update snapshots

195a316

adamstankiewicz reviewed Aug 23, 2023

View reviewed changes

mashal-m added 2 commits August 24, 2023 10:52

build: pin packages

570f1b0

Merge branch 'master' of https://github.com/openedx/frontend-app-admi…

d8a0b20

…n-portal into mashal-m/react-upgrade-to-v17

Mashal-m force-pushed the mashal-m/react-upgrade-to-v17 branch from 9d960b2 to d8a0b20 Compare August 24, 2023 05:56

mashal-m added 2 commits August 24, 2023 11:06

build: pin packages

95020ac

refactor: replace LinesEllipsis with paragon truncate

8a56298

mashal-m added 7 commits October 16, 2023 13:47

fix: fix lint

3aa2937

Merge branch 'master' of https://github.com/openedx/frontend-app-admi…

7f6b73a

…n-portal into mashal-m/react-upgrade-to-v17

fix: fix indentation

dda63d1

fix: fix lint error

869be1c

fix: update snapshots

428228a

fix: upgrade paragon and fix test accordingly

874bf4e

fix: update snapshots

26000fb

abdullahwaheed requested a review from adamstankiewicz October 18, 2023 08:56

mashal-m added 3 commits October 18, 2023 14:10

Merge branch 'master' of https://github.com/openedx/frontend-app-admi…

f6ab012

…n-portal into mashal-m/react-upgrade-to-v17

build: update pkg json file

2a2f60a

Merge branch 'master' of https://github.com/openedx/frontend-app-admi…

0db49c7

…n-portal into mashal-m/react-upgrade-to-v17

Mashal-m self-assigned this Dec 1, 2023

Merge branch 'master' of https://github.com/openedx/frontend-app-admi…

09b7848

…n-portal into mashal-m/react-upgrade-to-v17

adamstankiewicz mentioned this pull request Dec 21, 2023

chore: Update to the new version of paragon in the new scope. #1138

Draft

Syed-Ali-Abbas-Zaidi mentioned this pull request Jan 3, 2024

feat: upgrade react router to v6 #1001

Merged

mashal-m added 2 commits January 3, 2024 12:28

Merge branch 'master' of https://github.com/openedx/frontend-app-admi…

d2920e2

…n-portal into mashal-m/react-upgrade-to-v17

fix: update test file

f769c39

Mashal-m force-pushed the mashal-m/react-upgrade-to-v17 branch from 66c3da9 to f769c39 Compare January 3, 2024 09:35

mashal-m added 3 commits January 3, 2024 15:43

fix: update test file

826476b

build: update edx brand

d946aa3

build: remove unused pkg

9b09802

brobro10000 reviewed Jan 3, 2024

View reviewed changes

mashal-m added 2 commits January 4, 2024 15:14

fix: fix failed test and remove caret

2180355

refactor: update test script

0a1c05f

Merge branch 'master' into mashal-m/react-upgrade-to-v17

0851d45

brobro10000 approved these changes Jan 5, 2024

View reviewed changes

brobro10000 merged commit 1797209 into master Jan 5, 2024
6 checks passed

brobro10000 deleted the mashal-m/react-upgrade-to-v17 branch January 5, 2024 14:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: update react & react-dom to v17 #1009

feat: update react & react-dom to v17 #1009

Mashal-m commented Jul 24, 2023 •

edited

codecov bot commented Aug 7, 2023 •

edited

adamstankiewicz Aug 23, 2023

Mashal-m Aug 24, 2023 •

edited

adamstankiewicz Oct 12, 2023

Mashal-m Oct 13, 2023

adamstankiewicz Oct 13, 2023

adamstankiewicz Aug 23, 2023

Mashal-m Aug 24, 2023

Mashal-m commented Oct 16, 2023

brobro10000 left a comment •

edited

brobro10000 Jan 3, 2024

Mashal-m commented Jan 4, 2024

feat: update react & react-dom to v17 #1009

feat: update react & react-dom to v17 #1009

Conversation

Mashal-m commented Jul 24, 2023 • edited

Ticket

Description

For all changes

Only if submitting a visual change

codecov bot commented Aug 7, 2023 • edited

Codecov Report

adamstankiewicz Aug 23, 2023

Choose a reason for hiding this comment

Mashal-m Aug 24, 2023 • edited

Choose a reason for hiding this comment

adamstankiewicz Oct 12, 2023

Choose a reason for hiding this comment

Mashal-m Oct 13, 2023

Choose a reason for hiding this comment

adamstankiewicz Oct 13, 2023

Choose a reason for hiding this comment

adamstankiewicz Aug 23, 2023

Choose a reason for hiding this comment

Mashal-m Aug 24, 2023

Choose a reason for hiding this comment

Mashal-m commented Oct 16, 2023

brobro10000 left a comment • edited

Choose a reason for hiding this comment

brobro10000 Jan 3, 2024

Choose a reason for hiding this comment

Mashal-m commented Jan 4, 2024

Mashal-m commented Jul 24, 2023 •

edited

codecov bot commented Aug 7, 2023 •

edited

Mashal-m Aug 24, 2023 •

edited

brobro10000 left a comment •

edited