Upgrading React 17 and Material UI 5 of DevPortal

portals/devportal/src/main/webapp/babel.config.js

@@ -26,6 +26,7 @@ module.exports = {
                 '@babel/plugin-syntax-dynamic-import',
                 '@babel/plugin-proposal-class-properties',
                 'dynamic-import-node',
+                '@babel/plugin-transform-private-methods',
             ],
         },
         production: {
@@ -41,7 +42,12 @@ module.exports = {
                 ],
                 '@babel/preset-react',
             ],
-            plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties'],
+            plugins: [
+                '@babel/plugin-syntax-dynamic-import',
+                '@babel/plugin-proposal-class-properties',
+                '@babel/plugin-proposal-nullish-coalescing-operator',
+                '@babel/plugin-proposal-logical-assignment-operators',
+            ],
         },
         development: {
             presets: [
@@ -53,7 +59,12 @@ module.exports = {
                 ],
                 '@babel/preset-react',
             ],
-            plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties','react-hot-loader/babel'],
+            plugins: [
+                '@babel/plugin-syntax-dynamic-import',
+                '@babel/plugin-proposal-class-properties',
+                '@babel/plugin-proposal-nullish-coalescing-operator',
+                '@babel/plugin-proposal-logical-assignment-operators',
+            ],
         },
     },
 };

portals/devportal/src/main/webapp/jest.config.js

@@ -39,8 +39,13 @@ module.exports = {
         '^.+\\.jsx$': 'babel-jest',
         '^.+\\.js$': 'babel-jest',
     },
-    testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/source/Tests/Integration/'],
-    transformIgnorePatterns: ['<rootDir>/node_modules/'],
+    testPathIgnorePatterns: [
+        '<rootDir>/node_modules/',
+        '<rootDir>/source/Tests/Integration/',
+    ],
+    transformIgnorePatterns: [
+        '<rootDir>/node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)',
+    ],
 
     // Automatically clear mock calls and instances between every test
     clearMocks: true,

portals/devportal/src/main/webapp/package.json

@@ -8,7 +8,7 @@
         "node": ">=16.0.0"
     },
     "scripts": {
-        "test:ci": "jest --silent",
+        "test:ci": "jest --silent --passWithNoTests",
         "test:integration": "jest -c source/Tests/Integration/jest.config.js",
         "test:coverage": "jest --coverage",
         "build:prod": "rimraf site/public/dist/ && npm rum i18n && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 webpack --mode production --stats=errors-only",
@@ -27,14 +27,18 @@
     "license": "Apache-2.0",
     "dependencies": {
         "@asyncapi/react-component": "^0.24.23",
+        "@emotion/react": "^11.11.3",
+        "@emotion/styled": "^11.11.0",
         "@hapi/joi": "^17.1.1",
-        "@material-ui/core": "^4.11.3",
-        "@material-ui/icons": "^4.11.2",
-        "@material-ui/lab": "^4.0.0-alpha.61",
         "@mdi/js": "^6.9.96",
         "@mdi/react": "^1.6.1",
+        "@mui/icons-material": "^5.15.6",
+        "@mui/lab": "^5.0.0-alpha.162",
+        "@mui/material": "^5.15.6",
+        "@mui/styles": "^5.15.6",
         "@stoplight/elements": "^7.7.9",
         "@ui5/webcomponents-icons": "^1.9.3",
+        "ajv": "^8.12.0",
         "async-mutex": "^0.4.0",
         "autosuggest-highlight": "^3.3.4",
         "axios": "^0.27.2",
@@ -46,34 +50,34 @@
         "dayjs": "^1.11.7",
         "downshift": "^6.1.12",
         "fs-react": "0.0.4",
-        "graphiql": "^1.11.5",
-        "graphiql-explorer": "^0.9.0",
+        "graphiql": "^3.0.5",
+        "graphiql-explorer-continue": "0.8.2",
         "graphiql-subscriptions-fetcher": "0.0.2",
-        "graphql": "^15.6.1",
-        "graphql-to-postman": "0.0.12",
+        "graphql": "^16.8.0",
+        "graphql-to-postman": "0.1.0",
+        "graphql-ws": "^5.14.0",
+        "html-react-parser": "^4.2.2",
         "js-file-download": "^0.4.12",
         "jss-rtl": "^0.3.0",
         "lodash": "^4.17.21",
         "lodash.clonedeep": "^4.5.0",
         "lodash.isplainobject": "^4.0.6",
         "lodash.merge": "^4.6.2",
         "material-design-icons": "^3.0.1",
-        "material-ui-chip-input": "^2.0.0-beta.2",
-        "mui-datatables": "^3.8.5",
+        "mui-datatables": "^4.3.0",
         "openapi-to-postmanv2": "^4.16.0",
         "prop-types": "^15.8.1",
         "qs": "^6.11.0",
         "query-string": "^7.1.3",
         "random-material-color": "^1.0.5",
         "rc-notification": "^4.6.1",
-        "react": "^16.14.0",
+        "react": "^17.0.0",
         "react-app-polyfill": "^3.0.0",
         "react-autosuggest": "^10.1.0",
         "react-copy-to-clipboard": "^5.1.0",
-        "react-dom": "^16.14.0",
+        "react-dom": "^17.0.0",
         "react-helmet": "^6.1.0",
         "react-hot-toast": "^2.4.0",
-        "react-html-parser": "^2.0.2",
         "react-intl": "v5.25.1",
         "react-loadable": "^5.5.0",
         "react-markdown": "^8.0.5",
@@ -83,33 +87,38 @@
         "react-tagcloud": "^2.3.1",
         "remark-gfm": "^3.0.1",
         "sanitize-html": "^2.8.1",
+        "stream-browserify": "^3.0.0",
         "subscriptions-transport-ws": "^0.11.0",
         "swagger-client": "^3.18.5",
         "swagger-ui-react": "^3.52.5",
         "swagger2-postman2-converter": "0.0.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.12.16",
+        "@babel/core": "^7.22.15",
         "@babel/plugin-proposal-class-properties": "^7.12.13",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-private-methods": "^7.22.5",
         "@babel/preset-env": "^7.12.16",
         "@babel/preset-react": "^7.12.13",
         "@babel/register": "^7.12.13",
         "@iconify/icons-simple-icons": "^1.0.52",
         "@iconify/react": "^1.1.3",
         "@webpack-cli/serve": "^1.3.1",
         "babel-eslint": "^10.0.3",
-        "babel-jest": "^24.8.0",
+        "babel-jest": "^29.6.4",
         "babel-loader": "^8.0.6",
         "babel-plugin-dynamic-import-node": "^2.2.0",
         "babel-plugin-react-intl": "^4.0.1",
         "babel-plugin-react-intl-auto": "^1.7.0",
+        "buffer": "^6.0.3",
         "chai": "^4.0.2",
         "clean-webpack-plugin": "^4.0.0",
         "cross-env": "^7.0.0",
+        "crypto-browserify": "^3.12.0",
         "css-loader": "^3.4.1",
         "enzyme": "^3.8.0",
-        "enzyme-adapter-react-16": "^1.7.1",
         "eslint": "^7.20.0",
         "eslint-config-airbnb": "^18.0.1",
         "eslint-plugin-import": "^2.22.1",
@@ -122,24 +131,24 @@
         "extract-react-intl-messages-compact": "^1.0.3",
         "fs-react": "0.0.4",
         "html-webpack-plugin": "^4.5.2",
-        "jest": "^24.8.0",
-        "less": "^2.7.2",
-        "less-loader": "^4.0.4",
+        "jest": "^29.6.4",
+        "less": "^4.2.0",
+        "less-loader": "^11.1.3",
         "mocha": "^7.0.0",
         "mock-local-storage": "^1.0.5",
         "prettier": "^2.5.1",
-        "react-hot-loader": "^4.13.0",
-        "react-test-renderer": "^16.7.0",
+        "process": "^0.11.10",
+        "react-test-renderer": "^17.0.0",
         "rimraf": "^3.0.2",
         "sinon": "^7.2.2",
         "style-loader": "^0.18.1",
         "swagger2-postman2-converter": "0.0.3",
         "underscore-template-loader": "^1.1.0",
         "unused-files-webpack-plugin": "^3.4.0",
-        "webpack": "^4.46.0",
+        "webpack": "^5.88.1",
         "webpack-bundle-analyzer": "^3.2.0",
-        "webpack-cli": "^4.5.0",
+        "webpack-cli": "^4.10.0",
         "webpack-dev-server": "^3.11.2",
-        "webpack-manifest-plugin": "^2.2.0"
+        "webpack-manifest-plugin": "^5.0.0"
     }
 }

portals/devportal/src/main/webapp/site/public/locales/en.json

@@ -1,7 +1,7 @@
 {
   "Apis.Details.APIConsole.APIConsole.download.postman": "Postman collection",
   "Apis.Details.APIConsole.APIConsole.download.swagger": "Swagger ( /swagger.json )",
-  "Apis.Details.ApiCOnsole.generate.test.key": "GET TEST KEY ",
+  "Apis.Details.ApiCOnsole.generate.test.key": "GET TEST KEY",
   "Apis.Details.ApiConsole.AdvertiseDetailsPanel.adv.auth.header": "Authorization Header",
   "Apis.Details.ApiConsole.AdvertiseDetailsPanel.adv.auth.header.value": "Authorization Header Value",
   "Apis.Details.ApiConsole.AdvertiseDetailsPanel.authentication.heading": "Authentication",
@@ -337,7 +337,7 @@
   "Applications.Details.SubscriptionTableData.update.business.plan": "Current Business Plan : ",
   "Applications.Details.SubscriptionTableData.update.business.plan.name": "Business Plan",
   "Applications.Details.SubscriptionTableData.update.subscription": "Update Subscription",
-  "Applications.Details.SubscriptionTableData.update.throttling.policy.blocked": "Subscription is in BLOCKED state. You need to unblock the subscription inorder to edit the tier",
+  "Applications.Details.SubscriptionTableData.update.throttling.policy.blocked": "Subscription is in BLOCKED state. You need to unblock the subscription in order to edit the tier",
   "Applications.Details.SubscriptionTableData.update.throttling.policy.helper": "Assign a new Business plan to the existing subscription",
   "Applications.Details.SubscriptionTableData.update.throttling.policy.onHold": "Subscription is currently ON_HOLD state. You need to get approval to the subscription before editing the tier",
   "Applications.Details.SubscriptionTableData.update.throttling.policy.rejected": "Subscription is currently REJECTED state. You need to get approval to the subscription before editing the tier",

portals/devportal/src/main/webapp/site/public/theme/userTheme.js

@@ -0,0 +1,7 @@
+const Configurations = {
+    "custom": {
+      "landingPage": {
+        "active": false
+      }
+    }
+  };