feat: Upgrade React v18.3.1 and RJSF v5.24.2

package.json

@@ -11,109 +11,86 @@
     }
   },
   "dependencies": {
-    "@emotion/react": "11.9.3",
-    "@emotion/styled": "11.9.3",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@fortawesome/fontawesome-free": "5.15.4",
     "@iconify/react": "^3.2.1",
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "5.8.4",
     "@mui/lab": "5.0.0-alpha.86",
     "@mui/material": "5.8.4",
-    "@mui/styles": "5.8.4",
+    "@mui/styles": "5.16.14",
     "@reduxjs/toolkit": "1.8.2",
-    "@rjsf/core": "4.2.3",
-    "@rjsf/material-ui": "4.2.3",
-    "@types/react-linkify": "^1.0.1",
+    "@rjsf/core": "5.24.2",
+    "@rjsf/mui": "5.24.2",
+    "@rjsf/validator-ajv8": "5.24.2",
     "ajv": "^8.17.1",
     "axios": "^1.7.9",
     "change-case": "4.1.2",
-    "chokidar": "3.5.3",
-    "debug": "4.3.4",
     "dotenv-cli": "4.1.1",
     "framer-motion": "^6.2.9",
     "generate-download-link": "1.0.1",
     "http-proxy-middleware": "0.21.0",
     "i18next": "19.9.2",
     "i18next-browser-languagedetector": "6.1.4",
     "i18next-http-backend": "1.4.1",
-    "i18next-http-middleware": "3.2.1",
-    "js-cookie": "^3.0.1",
+    "js-cookie": "^3.0.5",
     "js-yaml": "^4.1.0",
     "lodash": "4.17.21",
-    "lodash.isnil": "4.0.0",
-    "lodash.omitby": "4.6.0",
-    "markdown-to-jsx": "7.1.7",
+    "markdown-to-jsx": "^7.7.3",
     "notistack": "2.0.5",
-    "nprogress": "^0.2.0",
-    "react": "17.0.2",
-    "react-dnd": "15.1.2",
-    "react-dnd-html5-backend": "15.1.3",
-    "react-dom": "17.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-error-boundary": "4.1.2",
     "react-helmet": "6.1.0",
     "react-i18next": "^12.0.0",
-    "react-icons": "3.11.0",
     "react-linkify": "^1.0.0-alpha",
     "react-redux": "7.2.8",
     "react-router-dom": "5.3.3",
     "react-scripts": "5.0.1",
-    "react-test-renderer": "17.0.2",
-    "react-use": "^17.4.0",
-    "react-use-websocket": "^3.0.0",
-    "simplebar": "^5.3.6",
-    "simplebar-react": "^2.3.6",
+    "react-use": "^17.6.0",
+    "simplebar-react": "2.4.3",
     "socket.io-react-hook": "^1.0.17",
     "tss-react": "3.7.0",
     "typeface-comfortaa": "1.1.13",
     "typeface-roboto": "0.0.75",
-    "yaml": "^2.1.3"
+    "yaml": "^2.7.0"
   },
   "devDependencies": {
     "@commitlint/cli": "11.0.0",
     "@commitlint/config-conventional": "11.0.0",
     "@hkdobrev/run-if-changed": "0.3.1",
-    "@mui/types": "7.1.4",
+    "@mui/types": "^7.2.21",
     "@rtk-query/codegen-openapi": "1.0.0-alpha.1",
-    "@types/enzyme": "3.10.12",
     "@types/jest": "24.9.1",
-    "@types/js-yaml": "4.0.5",
-    "@types/json-schema": "7.0.11",
-    "@types/lodash": "4.14.182",
-    "@types/nprogress": "^0.2.0",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "17.0.17",
+    "@types/js-yaml": "^4.0.9",
+    "@types/json-schema": "^7.0.15",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
     "@types/react-helmet": "5.0.20",
     "@types/react-router-dom": "5.3.3",
     "@typescript-eslint/eslint-plugin": "5.28.0",
     "@typescript-eslint/parser": "5.28.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "commitizen": "4.3.1",
     "cspell": "5.21.2",
     "cz-conventional-changelog": "3.3.0",
-    "enzyme": "3.11.0",
     "eslint": "8.17.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "7.2.0",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "23.20.0",
     "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-react": "7.30.0",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-unused-imports": "^2.0.0",
     "git-cz": "4.9.0",
     "husky": "7.0.4",
-    "jest-enzyme": "7.1.2",
     "lint-staged": "9.5.0",
-    "node-fetch": "3.2.6",
     "npm-run-all": "4.1.5",
     "prettier": "2.7.0",
-    "react-error-overlay": "6.0.11",
-    "redux-logger": "3.0.6",
-    "sleep-promise": "9.1.0",
     "standard-version": "9.5.0",
-    "stylelint-config-recommended": "3.0.0",
-    "supports-color": "9.2.2",
     "ts-jest": "26.5.6",
-    "ts-node": "10.8.1",
     "typescript": "4.7.3"
   },
   "engines": {

src/components/CodeEditor.tsx

@@ -104,11 +104,11 @@ export default function CodeEditor({
       console.error('something went wrong with parsing yaml, please notify administrator')
       return
     }
-    const validate = ajv.compile(validationSchema)
+    const validate = ajv.compile(validationSchema || {})
     const valid = validate(parsedYaml)
 
     setValidationErrors(!valid ? validate.errors : [])
-    setValid(valid)
+    setValid?.(valid)
   }
 
   const onChangeHandler = (newValue: any) => {

src/components/MessageTekton.tsx

@@ -35,8 +35,8 @@ export default function ({
   return (
     <div data-cy={`drone-${status}-message`} style={{ whiteSpace: 'pre-wrap' }}>
       <MessageTrans i18nKey='TEKTON_MESSAGE' t={t} {...data}>
-        Tekton <LinkTekton {...tekton}>build {{ order }}</LinkTekton> <strong>{{ status }}</strong> for commit{' '}
-        <LinkCommit {...commit}>{{ sha }}</LinkCommit> at {{ datetime }}.
+        Tekton <LinkTekton {...tekton}>build {order}</LinkTekton> <strong>{{ status }}</strong> for commit{' '}
+        <LinkCommit {...commit}>{sha}</LinkCommit> at {datetime}.
       </MessageTrans>
     </div>
   )

src/components/ObjWizardModal.tsx

@@ -16,7 +16,7 @@ import { useLocalStorage } from 'react-use'
 import { useCreateObjWizardMutation } from 'redux/otomiApi'
 import { LoadingButton } from '@mui/lab'
 import { useSession } from 'providers/Session'
-import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query'
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query/react'
 import { isEmpty } from 'lodash'
 import InformationBanner from './InformationBanner'
 

src/components/Scrollbar.tsx

@@ -45,7 +45,7 @@ export default function Scrollbar({ children, sx, ...other }: Props) {
 
   return (
     <Box sx={{ overflowX: 'hidden', ...sx }} {...other}>
-      {children}
+      {typeof children === 'function' ? children({ scrollableNodeRef: null, contentNodeRef: null }) : children}
     </Box>
   )
 }

src/components/SidebarStyle.ts

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react'
 // @mui
 import { alpha, styled } from '@mui/material/styles'
 import { LinkProps, ListItemButton, ListItemButtonProps, ListItemIcon, ListItemText } from '@mui/material'
@@ -10,7 +9,7 @@ import { ICON, NAVBAR } from '../config'
 type IProps = LinkProps & ListItemButtonProps
 
 export interface ListItemStyleProps extends IProps {
-  component?: ReactNode
+  component?: any
   activeRoot?: boolean
   activeSub?: boolean
   subItem?: boolean

src/components/rjsf/ArrayField.tsx

@@ -1,19 +1,20 @@
-import { FieldProps, utils } from '@rjsf/core'
+import { FieldProps } from '@rjsf/utils'
 import ArrayField from '@rjsf/core/lib/components/fields/ArrayField'
 import { JSONSchema7 } from 'json-schema'
 import { set } from 'lodash'
 import React from 'react'
 import RadioWidget from './RadioWidget'
 
-export default function ({ uiSchema, schema, formData, ...props }: FieldProps<any>): React.ReactElement {
+export default function ({ uiSchema, schema, formData, ...props }: FieldProps<any[]>): React.ReactElement {
+  const { registry } = props
   const newSchema = { ...schema }
   const newUiSchema = { ...uiSchema }
   const listTooLong = (schema.items as JSONSchema7)?.enum?.length > 8
   const shortList = (schema.items as JSONSchema7)?.enum?.length < 5
   set(newUiSchema, 'ui:options.row', shortList)
 
   if (!listTooLong && uiSchema['ui:widget'] !== 'hidden') {
-    if (utils.isMultiSelect(schema)) {
+    if (registry.schemaUtils.isMultiSelect(schema)) {
       newUiSchema['ui:widget'] = 'checkboxes'
       set(newUiSchema, 'ui:options.inline', shortList)
       // set(newUiSchema, 'ui:options.label', undefined)

src/components/rjsf/CheckboxWidget.tsx

@@ -1,12 +1,10 @@
 /* eslint-disable no-underscore-dangle */
 import { FormControlLabel } from '@mui/material'
-import { WidgetProps, utils } from '@rjsf/core'
+import { WidgetProps, schemaRequiresTrueValue } from '@rjsf/utils'
 import { sentenceCase } from 'utils/data'
 import Checkbox from 'components/Checkbox'
 import React from 'react'
 
-const { schemaRequiresTrueValue } = utils
-
 export default function (props: WidgetProps) {
   const { schema, uiSchema, id, value, disabled, readonly, label, autofocus, onChange, onBlur, onFocus } = props
   // Because an unchecked checkbox will cause html5 validation to fail, only add

src/components/rjsf/CheckboxesWidget.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable no-underscore-dangle */
 import { FormControlLabel, FormGroup, Typography } from '@mui/material'
-import { WidgetProps } from '@rjsf/core'
+import { WidgetProps } from '@rjsf/utils'
 import { sentenceCase } from 'utils/data'
 import Checkbox from 'components/Checkbox'
 import React from 'react'

src/components/rjsf/CodeEditorWidget.tsx

@@ -1,4 +1,4 @@
-import { WidgetProps } from '@rjsf/core'
+import { WidgetProps } from '@rjsf/utils'
 import CodeEditor from 'components/CodeEditor'
 import { isEmpty } from 'lodash'
 import React, { ChangeEventHandler } from 'react'