React version bumping from 17.x to 18.x

[Tharanidk]

Problem

We need to bump the React version from 17.x to 18.x to allow developers the flexibility to use new libraries when they develop new features.

Solution

• Bump the React version to 18.0.0 in devportal, admin portal, and publisher.
• Bump Material UI from V4 to V5
• Fix the incompatible dependencies after the bump in all three portals

Affected Component

APIM

Version

4.3.0

Implementation

No response

Related Issues

React Bump to 17.X : #2160

Suggested Labels

No response

[Tharanidk]

Work Log

• I researched the React update and identified the dependencies with issues when moving from React version 17.x to 18.x.You can find the detailed findings in this,
  https://docs.google.com/spreadsheets/d/1tK_u5qh90uvqLoLESwJHGxxwqqgOP2wNleaoMpBX9Lc/edit#gid=0

• I updated the React version to 18.0.0 in the package.json file.

• I identified that Material-UI was incompatible with React 18.x and needed to be updated from version 4 to version 5, as previously identified.

• For one of the portals, I encountered over 100 file changes. After running the script, I am currently working on resolving the breaking changes.

[Tharanidk]

Work Log

• Changed issues with imports after running the script.
• Fixed the issues
• Remove unused import statements.

[Tharanidk]

Getting the below errors in devportal console

DevPortal.jsx:105 Error while receiving settings :  TypeError: Cannot read properties of null (reading 'IsAnonymousModeEnabled')
    at DevPortal.jsx:96:42

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.development.js:16227:1)
    at Object.useContext (react.development.js:1618:1)
    at useTheme (useTheme.js:4:17)
    at ThemeProvider (ThemeProvider.js:34:30)
    at ./source/src/app/components/Base/index.jsx (index.jsx:662:91)
    at __webpack_require__ (bootstrap:19:1)
    at ./source/src/app/ProtectedApp.jsx (LoginDenied.jsx:79:18)
    at Function.__webpack_require__ (bootstrap:19:1)
    
react-dom.development.js:18687 The above error occurred in one of your React components:

    at Lazy
    at Route (https://localhost:9443/devportal/site/public/dist/index.bundle.js:97162:29)
    at Switch (https://localhost:9443/devportal/site/public/dist/index.bundle.js:97364:29)
    at IntlProvider (https://localhost:9443/devportal/site/public/dist/index.bundle.js:96409:47)
    at Suspense
    at Router (https://localhost:9443/devportal/site/public/dist/index.bundle.js:96781:30)
    at BrowserRouter (https://localhost:9443/devportal/site/public/dist/index.bundle.js:10456:5)
    at StylesProvider (https://localhost:9443/devportal/site/public/dist/index.bundle.js:6179:24)
    at ThemeProvider (https://localhost:9443/devportal/site/public/dist/index.bundle.js:6347:24)
    at DevPortal (https://localhost:9443/devportal/site/public/dist/index.bundle.js:9989:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

started changing files manually to ignore these issues.

[lasanthaS]

Work Log

Hi all,

I started working on the ReactJS and Material UI upgrade for the Publisher portal.

Currently installed the ReactJS and Material UI latest versions side-by-side along with the existing/old versions and started the migration of the components from the previous version to the latest version. The rationale behind this approach is to avoid the risk of breaking the existing functionality and to have a smooth migration. Once all the components are migrated to the latest ReactJS & MaterialUI versions, the old dependencies can be removed from the app.

• Migrated the components from @material-ui/core to @mui/material package
• Migrated the components from @material-ui/icons to @mui/icons-material package

Thanks and regards,
Lasantha Samarakoon

[Tharanidk]

Work Log

• Started working on the Admin portal
• Migrated react from 17.0.0 to 18.0.0
• Migrated components from @material-ui/lab (^4.0.0-alpha.61) to @mui/lab, @mui/material

[Tharanidk]

Work Log

• Migrated components from @material-ui/core to @mui/styles, @mui/material
• Migrated components from @material-ui/icons to @mui/icons-material

[Tharanidk]

Work Log

• After changing all imports admin portal works fine.
• Working on setting up themes as previous

[Lakith-Rambukkanage]

Admin portal update

@@ -10,7 +10,7 @@
-        "build:prod": "rm -R site/public/dist/; npm rum i18n && NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 webpack --mode production --stats=errors-only",
+        "build:prod": "rm -R site/public/dist/; npm run i18n && NODE_ENV=production NODE_OPTIONS=--
@@ -25,15 +25,13 @@
-        "@emotion/react": "^11.11.1",
+        "@emotion/react": "^11.11.3",
-        "@material-ui/core": "^4.12.4",
-        "@material-ui/icons": "^4.11.2",
-        "@mui/icons-material": "^5.14.12",
-        "@mui/lab": "^5.0.0-alpha.147",
-        "@mui/material": "^5.14.10",
-        "@mui/styles": "^5.14.10",
+        "@mui/icons-material": "^5.15.4",
+        "@mui/lab": "^5.0.0-alpha.160",
+        "@mui/material": "^5.15.4",
+        "@mui/system": "^5.15.4",
@@ -44,7 +42,7 @@
-        "mui-datatables": "^3.8.5",
+        "mui-datatables": "^4.3.0",
@@ -98,7 +96,7 @@
-        "react-hot-loader": "^4.13.0",
+        "react-refresh": "^0.14.0",

React-hot-loader has to be removed since it's no longer supported [1]. React-refresh [4] has to be used from here onwards which is supported officially by react. Following [2][3][5] for the implementation

[1] gaearon/react-hot-loader#1808
[2] https://javascript.plainenglish.io/react-fast-refresh-the-new-react-hot-reloader-652c6645548c
[3] facebook/react#16604 (comment)
[4] https://www.npmjs.com/package/react-refresh
[5] https://github.com/pmmmwh/react-refresh-webpack-plugin

[Lakith-Rambukkanage]

MUI upgrade [Admin portal]

Following : [1]

Major changes are included in the process.

Ran npx @mui/codemod@latest v5.0.0/preset-safe source [1] and proceeding. [2] was useful to speed up the command. cleared build folders.

Corrected few breaking changes that affects functionality. Need to correct Styles later after cross checking.

Ran command npx @mui/codemod@latest v5.0.0/jss-to-styled . to remove deprecated @mui/styles.

The compilation is stable after manual fixes. The ui is out of style in many places. The tree view is not loading.

Running the codemode for tree-view migration npx @mui/codemod v5.0.0/tree-view-moved-to-x . [3]

Fixed the runtime issues and styling issues.

Moving to manual testing and UI test stabilisation.

• Dependancy related issues
• MUI 4 to 5 migration
• MUI Breaking changes migrations
• Build and Compilation issues
• Runtime issues
• Styling issues
• UI Test Issues
  • 00-add-edit-delete-microgateway-environments.spec.js
  • 01-add-edit-delete-advance-throttle-policies.spec.js
  • 02-add-edit-delete-application-throttle-policies.spec.js [4]
  • 03-add-edit-delete-subscription-throttle-policies.spec.js
  • 04-add-edit-delete-api-categories.spec.js
  • 05-add-custom-throttle-policies.spec.js
  • 06-add-delete-black-list-policies.spec.js
  • 07-add-scope-mapping.spec.js
  • 08-add-api-categories.spec.js
  • 09-add-edit-delete-km.spec.js
  • 10-advanced-configurations.spec.js
  • 11-change-the-owner-of-application.spec.js
• Manual Testing

[1] https://mui.com/material-ui/migration/migration-v4/
[2] mui/material-ui#28578
[3] https://mui.com/x/migration/migration-tree-view-lab/
[4] #2441

[thisaltennakoon]

DevPortal portal update

• Upgrade MUI version from v4 to v5
• Upgrade react version from 17 to 18
• Fixed all the compilation errors

[lasanthaS]

Progress related to the ReactJS 18 upgrade in each of the portals could be tracked via the following sub-tasks.

• Publisher Portal - Upgrade ReactJS 18 in Publisher Portal #2438
• Admin Portal
• Dev Portal

[thisaltennakoon]

DevPortal portal progress update

• Fix issues in the react 16 to 17 upgrade
• Other Dependancy related issues
• MUI 4 to 5 migration
• JSS to Emotion migration
• Fix issues in the react 17 to 18 upgrade
• MUI Breaking changes migrations
• Build and Compilation issues
• Runtime issues
• Smoke testing
• Styling issues
• UI Test Issues
• Manual Testing

[tharikaGitHub]

Closing as the task is completed.