Upgrade: React 18 + MUI5 (#515)

pegasystems · Oct 9, 2024 · 7f2c990 · 7f2c990
1 parent a03c3fa
commit 7f2c990
Show file tree

Hide file tree

Showing 11 changed files with 1,014 additions and 566 deletions.
diff --git a/__mocks__/DetailsFields.jsx b/__mocks__/DetailsFields.jsx
@@ -1,7 +1,7 @@
 import React, { createElement, isValidElement } from 'react';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters/index';
 
 import createPConnectComponent from './react_pconnect';

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,34 +53,37 @@
     "_internal-build-jest-assets": "dx-component-builder-sdk buildJestAssets"
   },
   "dependencies": {
-    "@date-io/dayjs": "^1.3.13",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@material-ui/pickers": "^3.3.10",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.2",
+    "@mui/lab": "^6.0.0-beta.10",
+    "@mui/material": "^6.1.2",
+    "@mui/styles": "^6.1.2",
+    "@mui/x-date-pickers": "^7.19.0",
     "@pega/auth": "^0.2.14",
     "@pega/cosmos-react-condition-builder": "^4.2.0",
     "@pega/cosmos-react-core": "^4.2.0",
     "@pega/cosmos-react-work": "^4.2.0",
-    "@pega/react-sdk-components": "~24.1.10",
+    "@pega/react-sdk-components": "^0.242.1",
     "@storybook/react-webpack5": "^7.6.7",
-    "@tinymce/tinymce-react": "^4.3.2",
+    "@tinymce/tinymce-react": "^5.1.1",
     "@types/styled-components": "^5.1.34",
-    "dayjs": "^1.11.10",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
     "lodash.difference": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
-    "material-ui-phone-number": "^2.2.6",
-    "react": "^17.0.2",
+    "material-ui-phone-number-2": "^1.3.0",
+    "react": "^18.2.0",
     "react-datepicker": "^4.25.0",
-    "react-dom": "^17.0.2",
-    "react-number-format": "^5.4.0",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "^5.3.4",
+    "react-dom": "^18.3.1",
+    "react-number-format": "^5.4.2",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.22.3",
     "styled-components": "^6.1.8",
-    "throttle-debounce": "^5.0.0"
+    "throttle-debounce": "^5.0.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.9",
@@ -89,13 +92,13 @@
     "@kooneko/livereload-webpack-plugin": "^1.2.1",
     "@loadable/component": "^5.16.3",
     "@pega/configs": "^0.6.0",
-    "@pega/constellationjs": "~24.1.0",
+    "@pega/constellationjs": "^0.242.5",
     "@pega/cspell-config": "^0.7.1",
     "@pega/dx-component-builder-sdk": "~24.1.10",
-    "@pega/eslint-config": "^0.7.1",
+    "@pega/eslint-config": "^0.7.2",
     "@pega/pcore-pconnect-typedefs": "~3.0.0",
     "@pega/prettier-config": "^0.6.0",
-    "@pega/react-sdk-overrides": "~24.1.10",
+    "@pega/react-sdk-overrides": "^0.242.1",
     "@pega/stylelint-config": "^0.7.1",
     "@pega/tsconfig": "^0.7.1",
     "@playwright/test": "^1.40.1",
@@ -110,6 +113,7 @@
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@types/lodash.isequal": "^4.5.8",
+    "@types/react": "^18.3.11",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "caniuse-lite": "^1.0.30001576",
     "clean-webpack-plugin": "^4.0.0",
@@ -143,7 +147,7 @@
     "storybook": "^7.6.7",
     "style-loader": "^3.3.4",
     "stylelint": "^16.1.0",
-    "tinymce": "^6.8.2",
+    "tinymce": "^7.3.0",
     "trim-newlines": "^5.0.0",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.5.1",

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,16 +1,16 @@
 // from react_root.js
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import TopLevelApp from '../src/samples/TopLevelApp';
 import './common.css';
 
 const outletElement = document.getElementById('outlet');
 
 if (outletElement) {
-  render(
+  const root = createRoot(outletElement);
+  root.render(
     <BrowserRouter>
       <TopLevelApp />
-    </BrowserRouter>,
-    document.getElementById('outlet')
+    </BrowserRouter>
   );
 }
diff --git a/src/samples/AppSelector/index.tsx b/src/samples/AppSelector/index.tsx
@@ -1,4 +1,4 @@
-import { Switch, Route } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
 import EmbeddedTopLevel from '../Embedded/EmbeddedTopLevel';
 import FullPortal from '../FullPortal';
@@ -16,15 +16,15 @@ const baseURL = '/';
 const AppSelector = () => {
   return (
     <div>
-      <Switch>
-        <Route exact path={`${baseURL}`} component={EmbeddedTopLevel} />
-        <Route path={`${baseURL}index.html`} component={EmbeddedTopLevel} />
-        <Route path={`${baseURL}embedded`} component={EmbeddedTopLevel} />
-        <Route path={`${baseURL}embedded.html`} component={EmbeddedTopLevel} />
-        <Route path={`${baseURL}portal`} component={FullPortal} />
-        <Route path={`${baseURL}portal.html`} component={FullPortal} />
-        <Route path='*' component={EmbeddedTopLevel} />
-      </Switch>
+      <Routes>
+        <Route path={`${baseURL}`} element={<EmbeddedTopLevel />} />
+        <Route path={`${baseURL}index.html`} element={<EmbeddedTopLevel />} />
+        <Route path={`${baseURL}embedded`} element={<EmbeddedTopLevel />} />
+        <Route path={`${baseURL}embedded.html`} element={<EmbeddedTopLevel />} />
+        <Route path={`${baseURL}portal`} element={<FullPortal />} />
+        <Route path={`${baseURL}portal.html`} element={<FullPortal />} />
+        <Route path='*' element={<EmbeddedTopLevel />} />
+      </Routes>
     </div>
   );
 };

diff --git a/src/samples/Embedded/EmbeddedSwatch/index.tsx b/src/samples/Embedded/EmbeddedSwatch/index.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/button-has-type */
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles(theme => ({
   swatchHeader: {

diff --git a/src/samples/Embedded/EmbeddedTopLevel/index.tsx b/src/samples/Embedded/EmbeddedTopLevel/index.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable react/button-has-type */
 import { useState, useEffect } from 'react';
-import { render } from 'react-dom';
-import Typography from '@material-ui/core/Typography';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
+import { createRoot } from 'react-dom/client';
+import Typography from '@mui/material/Typography';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { sdkIsLoggedIn, loginIfNecessary, sdkSetAuthHeader, sdkSetCustomTokenParamsCB, getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
 
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
 import EmbeddedSwatch from '../EmbeddedSwatch';
 import { compareSdkPCoreVersions } from '@pega/react-sdk-components/lib/components/helpers/versionHelpers';
-
 import { getSdkComponentMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import localSdkComponentMap from '../../../../sdk-local-component-map';
 import { theme } from '../../../theme';
@@ -287,10 +287,12 @@ export default function EmbeddedTopLevel() {
     return (
       // eslint-disable-next-line react/jsx-no-constructed-context-values
       <StoreContext.Provider value={{ store: PCore.getStore(), displayOnlyFA: true }}>
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          {thePConnObj}
-        </ThemeProvider>
+        <StyledEngineProvider injectFirst>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            {thePConnObj}
+          </ThemeProvider>
+        </StyledEngineProvider>
       </StoreContext.Provider>
     );
   }
@@ -327,14 +329,17 @@ export default function EmbeddedTopLevel() {
     }
 
     const theComponent = (
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <Component {...props} portalTarget={portalTarget} styleSheetTarget={styleSheetTarget} />
-      </ThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <Component {...props} portalTarget={portalTarget} styleSheetTarget={styleSheetTarget} />
+        </ThemeProvider>
+      </StyledEngineProvider>
     );
+    const root = createRoot(target);
 
     // Initial render of component passed in (which should be a RootContainer)
-    render(<>{theComponent}</>, target);
+    root.render(<>{theComponent}</>);
 
     // Initial render to show that we have a PConnect and can render in the target location
     // render( <div>EmbeddedTopLevel initialRender in {domContainerID} with PConn of {componentName}</div>, target);
@@ -430,7 +435,8 @@ export default function EmbeddedTopLevel() {
     getSdkConfig().then(sdkConfig => {
       let mashupCaseType = sdkConfig.serverConfig.appMashupCaseType;
       if (!mashupCaseType) {
-        const caseTypes = (PCore.getEnvironmentInfo().environmentInfoObject as any).pyCaseTypeList;
+        // @ts-ignore - Object is possibly 'null'
+        const caseTypes: any = PCore.getEnvironmentInfo().environmentInfoObject.pyCaseTypeList;
         mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName;
       }
 
@@ -443,7 +449,7 @@ export default function EmbeddedTopLevel() {
               }
             : {}
       };
-      (PCore.getMashupApi().createCase(mashupCaseType, PCore.getConstants().APP.APP, options) as any).then(() => {
+      (PCore.getMashupApi().createCase(mashupCaseType, PCore.getConstants().APP.APP, options) as Promise<any>).then(() => {
         // eslint-disable-next-line no-console
         console.log('createCase rendering is complete');
       });

diff --git a/src/samples/FullPortal/index.tsx b/src/samples/FullPortal/index.tsx
@@ -1,18 +1,19 @@
 import { useEffect, useMemo, useState } from 'react';
-import ReactDOM from 'react-dom';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
-import { useLocation, useHistory } from 'react-router-dom';
+import { createRoot } from 'react-dom/client';
+import { useLocation, useNavigate } from 'react-router-dom';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { SdkConfigAccess, loginIfNecessary, getAvailablePortals } from '@pega/auth/lib/sdk-auth-manager';
+
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import { SdkConfigAccess, loginIfNecessary, getAvailablePortals } from '@pega/auth/lib/sdk-auth-manager';
 import { compareSdkPCoreVersions } from '@pega/react-sdk-components/lib/components/helpers/versionHelpers';
-import InvalidPortal from './InvalidPortal';
-
 import { getSdkComponentMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import localSdkComponentMap from '../../../sdk-local-component-map';
 import { theme } from '../../theme';
 
+import InvalidPortal from './InvalidPortal';
+
 declare const myLoadPortal: any;
 declare const myLoadDefaultPortal: any;
 
@@ -27,7 +28,7 @@ export default function FullPortal() {
   const [defaultPortalName, setDefaultPortalName] = useState('');
   const [availablePortals, setAvailablePortals] = useState<string[]>([]);
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const query = useQuery();
   if (query.get('portal')) {
     const portalValue: any = query.get('portal');
@@ -59,10 +60,12 @@ export default function FullPortal() {
     return (
       // eslint-disable-next-line react/jsx-no-constructed-context-values
       <StoreContext.Provider value={{ store: PCore.getStore() }}>
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          {thePConnObj}
-        </ThemeProvider>
+        <StyledEngineProvider injectFirst>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            {thePConnObj}
+          </ThemeProvider>
+        </StyledEngineProvider>
       </StoreContext.Provider>
     );
   }
@@ -95,16 +98,18 @@ export default function FullPortal() {
 
     // var theComponent = <div>the Component</div>;
     const theComponent = (
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <Component {...props} portalTarget={portalTarget} styleSheetTarget={styleSheetTarget} />;
-      </ThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <Component {...props} portalTarget={portalTarget} styleSheetTarget={styleSheetTarget} />;
+        </ThemeProvider>
+      </StyledEngineProvider>
     );
 
-    ReactDOM.render(
+    const root = createRoot(target || document.getElementById('pega-root') || document.getElementsByTagName(domContainerID)[0]);
+    root.render(
       // was <Component
-      theComponent,
-      target || document.getElementById('pega-root') || document.getElementsByTagName(domContainerID)[0]
+      theComponent
     );
   }
 
@@ -164,7 +169,7 @@ export default function FullPortal() {
   }
 
   function doRedirectDone() {
-    history.replace(window.location.pathname);
+    navigate(window.location.pathname);
     let localeOverride: any = sessionStorage.getItem('rsdk_locale');
     if (!localeOverride) {
       localeOverride = undefined;

diff --git a/src/theme.js b/src/theme.js
diff --git a/src/theme.ts b/src/theme.ts
@@ -0,0 +1,28 @@
+import { createTheme } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+
+/**
+ * Since makeStyles is now exported from @mui/styles package which does not know about Theme in the core package.
+ * you need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core.
+ */
+declare module '@mui/styles/defaultTheme' {
+  interface DefaultTheme extends Theme {}
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export const theme = createTheme({
+  palette: {
+    primary: {
+      contrastText: '#fff',
+      dark: '#303f9f',
+      light: '#7986cb',
+      main: '#3f51b5'
+    },
+    secondary: {
+      contrastText: '#fff',
+      dark: '#c51162',
+      light: '#ff4081',
+      main: '#f50057'
+    }
+  }
+});