Initial React 18 and MUI5 upgrade changes (#391)

* upgrade: React 18 & MUI 5 * fix: Date & Date Time picker changes * fix: Theme issues * dependency packages updated * BUG-863783 - Locale support
pegasystems · Oct 8, 2024 · 8662686 · 8662686
1 parent 26081da
commit 8662686
Show file tree

Hide file tree

Showing 87 changed files with 5,551 additions and 17,082 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,44 +48,41 @@
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "dependencies": {
-    "@date-io/dayjs": "^1.3.13",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@material-ui/pickers": "^3.3.10",
-    "@pega/auth": "^0.2.14",
-    "@pega/constellationjs": "^0.242.3",
-    "@tinymce/tinymce-react": "^4.3.2",
-    "@types/react": "^17.0.74",
-    "dayjs": "^1.11.10",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/lab": "^5.0.0-alpha.169",
+    "@mui/material": "^5.15.14",
+    "@mui/styles": "^5.15.14",
+    "@mui/x-date-pickers": "^7.1.0",
+    "@pega/auth": "~0.2.14",
+    "@tinymce/tinymce-react": "^5.1.1",
+    "clsx": "^2.1.0",
+    "dayjs": "^1.11.13",
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
     "lodash.difference": "^4.5.0",
-    "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.3.4",
-    "react-redux": "^8.1.3",
-    "react-router-dom": "^5.3.4",
-    "throttle-debounce": "^5.0.0"
+    "react-dom": "^18.2.0",
+    "react-number-format": "^5.4.2",
+    "react-redux": "^9.1.0",
+    "react-router-dom": "^6.22.3",
+    "throttle-debounce": "^5.0.2"
   },
   "devDependencies": {
     "@kooneko/livereload-webpack-plugin": "^1.2.1",
-    "@pega/commitlint-config": "^0.7.1",
-    "@pega/commitlint-plugin": "^0.7.1",
     "@pega/configs": "^0.7.1",
-    "@pega/cspell-config": "^0.7.1",
-    "@pega/eslint-config": "^0.7.1",
+    "@pega/constellationjs": "~0.242.5",
+    "@pega/eslint-config": "^0.7.2",
     "@pega/pcore-pconnect-typedefs": "~3.0.0",
-    "@pega/prettier-config": "^0.7.1",
-    "@pega/stylelint-config": "^0.7.1",
     "@pega/tsconfig": "^0.6.0",
     "@playwright/test": "^1.40.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.73",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
@@ -119,7 +116,7 @@
     "shx": "^0.3.4",
     "style-loader": "^3.3.4",
     "stylelint": "^16.1.0",
-    "tinymce": "^6.8.2",
+    "tinymce": "^7.3.0",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.5.1",
     "typescript": "^4.9.5",

diff --git a/packages/react-sdk-components/src/bridge/react_pconnect.jsx b/packages/react-sdk-components/src/bridge/react_pconnect.jsx
@@ -282,7 +282,11 @@ class PConnect extends Component {
 
     // If the new component is a reference node then mark with a unique key
     if (['reference', 'View'].includes(getPConnect().getComponentName()) && !finalProps.key) {
-      finalProps.key = this.getKey();
+      return (
+        <this.Control {...finalProps} key={this.getKey()}>
+          {this.createChildren()}
+        </this.Control>
+      );
     }
 
     // console.log(`react_pconnect: used to return: <this.Control {...finalProps} />`);

diff --git a/...ges/react-sdk-components/src/components/designSystemExtension/AlertBanner/AlertBanner.tsx b/...ges/react-sdk-components/src/components/designSystemExtension/AlertBanner/AlertBanner.tsx
@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

diff --git a/packages/react-sdk-components/src/components/designSystemExtension/Banner/Banner.tsx b/packages/react-sdk-components/src/components/designSystemExtension/Banner/Banner.tsx
@@ -1,4 +1,4 @@
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import './Banner.css';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.

diff --git a/...k-components/src/components/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx b/...k-components/src/components/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import isDeepEqual from 'fast-deep-equal/react';
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
 
 import { getDateFormatInfo } from '../../helpers/date-format-utils';
 import { getCurrencyOptions } from '../../field/Currency/currency-utils';
@@ -43,6 +43,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         default:
           return (
             <TextField
+              variant='standard'
               value='---'
               label={field.config.label}
               InputProps={{
@@ -61,6 +62,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'dropdown':
         return (
           <TextField
+            variant='standard'
             value={field.config.value}
             label={field.config.label}
             InputProps={{
@@ -77,6 +79,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
         return (
           <TextField
+            variant='standard'
             value={fieldValue}
             label={fieldLabel}
             InputProps={{
@@ -90,6 +93,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'status':
         return (
           <TextField
+            variant='standard'
             className='psdk-csf-status-style'
             value={field.config.value}
             label={field.config.label}
@@ -105,6 +109,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`tel:${displayPhone}`}>
             <TextField
+              variant='standard'
               value={field.config.value}
               label={field.config.label}
               InputProps={{
@@ -124,6 +129,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`mailto:${displayEmail}`}>
             <TextField
+              variant='standard'
               value={field.config.value}
               label={field.config.label}
               InputProps={{
@@ -145,6 +151,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type, {
               format: theFormat
             })}
@@ -161,6 +168,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         const theCurrencyOptions = getCurrencyOptions(field.config?.currencyISOCode);
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type, theCurrencyOptions)}
             label={field.config.label}
             InputProps={{
@@ -175,6 +183,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'userreference':
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type)}
             label={field.config.label}
             InputProps={{

diff --git a/...react-sdk-components/src/components/designSystemExtension/DetailsFields/DetailsFields.tsx b/...react-sdk-components/src/components/designSystemExtension/DetailsFields/DetailsFields.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable react/no-array-index-key */
 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 createPConnectComponent from '../../../bridge/react_pconnect';
 import { format } from '../../helpers/formatters';

diff --git a/packages/react-sdk-components/src/components/designSystemExtension/FieldGroup/FieldGroup.tsx b/packages/react-sdk-components/src/components/designSystemExtension/FieldGroup/FieldGroup.tsx
@@ -1,8 +1,8 @@
 import { PropsWithChildren, useState } from 'react';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
-import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 // FieldGroupProps is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

diff --git a/...act-sdk-components/src/components/designSystemExtension/FieldGroupList/FieldGroupList.tsx b/...act-sdk-components/src/components/designSystemExtension/FieldGroupList/FieldGroupList.tsx
@@ -1,6 +1,6 @@
-import Grid from '@material-ui/core/Grid';
-import Divider from '@material-ui/core/Divider';
-import Link from '@material-ui/core/Link';
+import Grid from '@mui/material/Grid';
+import Divider from '@mui/material/Divider';
+import Link from '@mui/material/Link';
 
 import { Utils } from '../../helpers/utils';
 
@@ -47,7 +47,7 @@ export default function FieldGroupList(props: FieldGroupListProps) {
             </Grid>
           ))}
           {props.onAdd && (
-            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }}>
+            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>
               +Add
             </Link>
           )}

diff --git a/...act-sdk-components/src/components/designSystemExtension/FieldValueList/FieldValueList.tsx b/...act-sdk-components/src/components/designSystemExtension/FieldValueList/FieldValueList.tsx
@@ -1,6 +1,6 @@
-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';
 
 // FieldValueList is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

diff --git a/packages/react-sdk-components/src/components/designSystemExtension/Operator/Operator.tsx b/packages/react-sdk-components/src/components/designSystemExtension/Operator/Operator.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import TextField from '@material-ui/core/TextField';
-import Popover from '@material-ui/core/Popover';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import Popover from '@mui/material/Popover';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Utils from '../../helpers/utils';
 import { PConnProps } from '../../../types/PConnProps';
@@ -189,6 +189,7 @@ export default function Operator(props: OperatorProps) {
   return (
     <>
       <TextField
+        variant='standard'
         defaultValue={caseOpName}
         label={caseOpLabel}
         onClick={showOperatorDetails}

diff --git a/packages/react-sdk-components/src/components/designSystemExtension/Pulse/Pulse.tsx b/packages/react-sdk-components/src/components/designSystemExtension/Pulse/Pulse.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Card, CardContent, CardHeader, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 // Pulse is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

diff --git a/...act-sdk-components/src/components/designSystemExtension/RichTextEditor/RichTextEditor.tsx b/...act-sdk-components/src/components/designSystemExtension/RichTextEditor/RichTextEditor.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
-import { FormControl, FormHelperText, InputLabel, makeStyles } from '@material-ui/core';
+import { FormControl, FormHelperText, InputLabel } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { useAfterInitialEffect, useConsolidatedRef, useUID } from '../../../hooks';
 
@@ -107,7 +108,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
   }
 
   return (
-    <FormControl data-test-id={testId} error={error} required={required}>
+    <FormControl variant='standard' data-test-id={testId} error={error} required={required}>
       {!labelHidden && (
         <InputLabel id='demo-simple-select-error-label' className={classes.fieldLabel}>
           {label}

diff --git a/...act-sdk-components/src/components/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx b/...act-sdk-components/src/components/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import './WssQuickCreate.css';
 
 // WssQuickCreate is one of the few components that does NOT have getPConnect.

diff --git a/packages/react-sdk-components/src/components/field/AutoComplete/AutoComplete.tsx b/packages/react-sdk-components/src/components/field/AutoComplete/AutoComplete.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { TextField } from '@material-ui/core';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import { TextField } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import Utils from '../../helpers/utils';
@@ -191,7 +191,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
       getOptionLabel={(option: IOption) => {
         return option.value ? option.value : '';
       }}
-      getOptionSelected={(option: any) => {
+      isOptionEqualToValue={(option: any) => {
         return option.value ? option.value : '';
       }}
       fullWidth

diff --git a/packages/react-sdk-components/src/components/field/CancelAlert/CancelAlert.tsx b/packages/react-sdk-components/src/components/field/CancelAlert/CancelAlert.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Button, Grid, IconButton, Snackbar } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
+import { Button, Grid, IconButton, Snackbar } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 
 import { PConnFieldProps } from '../../../types/PConnProps';
 import './CancelAlert.css';
@@ -89,7 +89,7 @@ export default function CancelAlert(props: CancelAlertProps) {
     }
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }

diff --git a/packages/react-sdk-components/src/components/field/Checkbox/Checkbox.tsx b/packages/react-sdk-components/src/components/field/Checkbox/Checkbox.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable react/no-array-index-key */
 import { useState, useEffect } from 'react';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import handleEvent from '../../helpers/event-utils';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import { insertInstruction, deleteInstruction, updateNewInstuctions } from '../../helpers/instructions-utils';
 import { PConnFieldProps } from '../../../types/PConnProps';
-import { makeStyles } from '@material-ui/core/styles';
 
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -161,7 +161,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }
 
   return (
-    <FormControl required={required} error={status === 'error'}>
+    <FormControl variant='standard' required={required} error={status === 'error'}>
       {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
       <FormGroup>{theCheckbox}</FormGroup>
       <FormHelperText>{helperTextToDisplay}</FormHelperText>

diff --git a/packages/react-sdk-components/src/components/field/Currency/Currency.tsx b/packages/react-sdk-components/src/components/field/Currency/Currency.tsx
@@ -1,6 +1,6 @@
-import { TextField } from '@material-ui/core';
 import { useState } from 'react';
 import { NumericFormat } from 'react-number-format';
+import { TextField } from '@mui/material';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '../../../types/PConnProps';
 import handleEvent from '../../helpers/event-utils';