React 18 upgrade

package.json

@@ -86,15 +86,16 @@
     "@emotion/styled": "^11.13.5",
     "@mui/base": "^5.0.0-beta.23",
     "@mui/icons-material": "^5.15.10",
-    "@mui/lab": "5.0.0-alpha.56",
-    "@mui/material": "5.13.x",
+    "@mui/lab": "^5.0.0-alpha.56",
+    "@mui/material": "^5.15.0",
     "@mui/x-data-grid": "^5.0.1",
     "@mui/x-date-pickers": "^5.0.16",
     "@ory/kratos-client": "^0.10.1",
     "@sentry/react": "^7.69.0",
     "@sentry/tracing": "^7.69.0",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@tiptap/core": "^2.0.0-beta.220",
     "@tiptap/extension-highlight": "^2.0.0-beta.220",
     "@tiptap/extension-image": "^2.0.0-beta.220",
     "@tiptap/extension-link": "^2.0.0-beta.220",
@@ -104,12 +105,11 @@
     "@types/jest": "^28.0.0",
     "@types/lodash": "^4.14.172",
     "@types/node": "^20.14.11",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "@types/yup": "^0.29.11",
     "@vitejs/plugin-react": "^4.3.1",
-    "@xstate/graph": "^1.3.0",
-    "@xstate/react": "^1.5.1",
+    "@xstate/react": "^5.0.2",
     "apollo-upload-client": "^18.0.1",
     "axios": "^0.21.2",
     "clsx": "^1.1.1",
@@ -127,17 +127,18 @@
     "i18next-browser-languagedetector": "^6.1.3",
     "immer": "^9.0.12",
     "jquery": "^3.5.1",
+    "jsdom": "^26.0.0",
     "lodash": "^4.17.21",
     "mdast-builder": "^1.1.1",
     "nanoid": "^3.3.6",
     "qrcode": "^1.5.0",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-calendar": "^4.0.0",
-    "react-chat-widget": "^3.1.4",
+    "react-chat-widget-react-18": "^1.0.0",
     "react-cookie": "^4.1.1",
     "react-copy-to-clipboard": "^5.0.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-i18next": "^11.15.1",
     "react-image-crop": "^9.0.5",
     "react-image-file-resizer": "^0.4.7",
@@ -163,7 +164,7 @@
     "use-deep-compare-effect": "^1.8.1",
     "uuid": "^8.3.2",
     "web-vitals": "^2.1.0",
-    "xstate": "^4.23.1",
+    "xstate": "^5.19.2",
     "yup": "^0.31.1"
   },
   "devDependencies": {
@@ -174,8 +175,7 @@
     "@graphql-codegen/typescript-operations": "^2.3.2",
     "@graphql-codegen/typescript-react-apollo": "^3.2.8",
     "@sentry/vite-plugin": "^2.7.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react-hooks": "^5.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@types/js-cookie": "^3.0.2",
     "@types/qrcode": "^1.4.2",
     "@types/react-beautiful-dnd": "^13.1.4",

src/core/analytics/SentryErrorBoundaryProvider.tsx

@@ -1,10 +1,10 @@
-import * as Sentry from '@sentry/react';
-import { FC } from 'react';
-import { ErrorPage } from '@/core/pages/Errors/ErrorPage';
 import sentryBootstrap from '@/core/logging/sentry/bootstrap';
+import { ErrorPage } from '@/core/pages/Errors/ErrorPage';
 import { useConfig } from '@/domain/platform/config/useConfig';
+import * as Sentry from '@sentry/react';
+import { FC, PropsWithChildren } from 'react';
 
-const SentryErrorBoundaryProvider: FC = ({ children }) => {
+const SentryErrorBoundaryProvider: FC<PropsWithChildren> = ({ children }) => {
   const { sentry } = useConfig();
   sentryBootstrap(sentry?.enabled, sentry?.endpoint, sentry?.environment);
 

src/core/apollo/context/ApolloProvider.tsx

@@ -1,10 +1,10 @@
-import { FC } from 'react';
 import { useConfig } from '@/domain/platform/config/useConfig';
 import { ApolloProvider } from '@apollo/client';
-import { useGraphQLClient } from '../hooks/useGraphQLClient';
+import { FC, PropsWithChildren } from 'react';
 import { PlatformFeatureFlagName } from '../generated/graphql-schema';
+import { useGraphQLClient } from '../hooks/useGraphQLClient';
 
-interface Props {
+interface Props extends PropsWithChildren {
   apiUrl: string;
 }
 

src/core/apollo/graphqlLinks/useErrorHandlerLink.ts

@@ -1,15 +1,15 @@
-import { onError } from '@apollo/client/link/error';
+import { AlkemioGraphqlErrorCode } from '@/main/constants/errors';
 import { ApolloError } from '@apollo/client';
+import { onError } from '@apollo/client/link/error';
 import { useApolloErrorHandler } from '../hooks/useApolloErrorHandler';
-import { AlkemioGraphqlErrorCode } from '@/main/constants/errors';
 
 export const useErrorHandlerLink = () => {
   const handleError = useApolloErrorHandler();
 
   return onError(({ graphQLErrors, networkError }) => {
     // dont report the forbidden errors
     const nonForbiddenGraphqlErrors = graphQLErrors?.filter(
-      x => x.extensions.code !== AlkemioGraphqlErrorCode.FORBIDDEN
+      x => x.extensions?.code !== AlkemioGraphqlErrorCode.FORBIDDEN
     );
     handleError(
       new ApolloError({

src/core/apollo/graphqlLinks/useErrorLoggerLink.ts

@@ -1,6 +1,6 @@
 import { onError } from '@apollo/client/link/error';
 import { error as sentryError, TagCategoryValues } from '@/core/logging/sentry/log';
-import { useApm } from 'core/analytics/apm/context/index';
+import { useApm } from '@/core/analytics/apm/context';
 
 const getErrorCode = (error: Error & { extensions?: { code?: string } }) => {
   return error?.extensions?.code ?? undefined;
@@ -24,7 +24,7 @@ export const useErrorLoggerLink = (errorLogging = false) => {
 
     const errors: Error[] = [];
     if (graphQLErrors) {
-      errors.push(...graphQLErrors);
+      errors.push(...(graphQLErrors as Error[]));
     }
 
     if (networkError) {

src/core/apollo/hooks/useApolloErrorHandler.ts

@@ -1,11 +1,11 @@
+import { Severity } from '@/core/state/global/notifications/notificationMachine';
+import { useNotification } from '@/core/ui/notifications/useNotification';
 import { ApolloError } from '@apollo/client';
-import { GraphQLError } from 'graphql';
+import { GraphQLError, GraphQLFormattedError } from 'graphql';
 import { i18n, TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import { Severity } from '@/core/state/global/notifications/notificationMachine';
-import { useNotification } from '@/core/ui/notifications/useNotification';
 
-const getTranslationForCode = (error: GraphQLError, t: TFunction, i18n: i18n) => {
+const getTranslationForCode = (error: GraphQLFormattedError, t: TFunction, i18n: i18n) => {
   const { message } = error;
   const code = error.extensions?.code as string;
   const meta = { code, message };
@@ -47,7 +47,7 @@ export const useApolloErrorHandler = (severity: Severity = 'error') => {
   const handleGraphQLErrors = (error: ApolloError) => {
     const graphqlErrors = error.graphQLErrors;
 
-    graphqlErrors.forEach((error: GraphQLError) => {
+    graphqlErrors.forEach((error: GraphQLFormattedError) => {
       const translation = getTranslationForCode(error, t, i18n);
       notify(translation, severity);
     });
@@ -69,15 +69,15 @@ export const useApolloErrorHandler = (severity: Severity = 'error') => {
 export const isApolloNotFoundError = (error: ApolloError | undefined) => {
   if (error && error.graphQLErrors) {
     const extensions = error.graphQLErrors.map(graphQLError => graphQLError.extensions);
-    return extensions.some(extension => extension.code === 'ENTITY_NOT_FOUND');
+    return extensions.some(extension => extension?.code === 'ENTITY_NOT_FOUND');
   }
   return false;
 };
 
 export const isApolloForbiddenError = (error: ApolloError | undefined) => {
   if (error && error.graphQLErrors) {
     const extensions = error.graphQLErrors.map(graphQLError => graphQLError.extensions);
-    return extensions.some(extension => extension.code === 'FORBIDDEN');
+    return extensions.some(extension => extension?.code === 'FORBIDDEN');
   }
   return false;
 };

src/core/auth/authentication/components/AcceptTermsContext.tsx

@@ -1,6 +1,6 @@
-import { createContext, FC, useContext } from 'react';
+import { createContext, FC, PropsWithChildren, useContext } from 'react';
 
-interface AcceptTermsContextProps {
+interface AcceptTermsContextProps extends PropsWithChildren {
   hasAcceptedTerms: boolean;
 }
 

src/core/auth/authentication/components/KratosUI.tsx

@@ -1,26 +1,26 @@
-import React, { ComponentType, FC, ReactNode, useMemo } from 'react';
-import { isMatch, some } from 'lodash';
+import { Text } from '@/core/ui/typography';
 import { Alert, Box, Button } from '@mui/material';
 import { UiContainer, UiNode, UiText } from '@ory/kratos-client';
+import { isMatch, some } from 'lodash';
+import { ComponentType, FC, PropsWithChildren, ReactNode, createContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { guessVariant, isAnchorNode, isHiddenInput, isInputNode, isSubmitButton } from './Kratos/helpers';
+import { KratosAcceptTermsProps } from '../pages/AcceptTerms';
+import isAcceptTermsCheckbox from '../utils/isAcceptTermsCheckbox';
+import AuthActionButton, { AuthActionButtonProps } from './Button';
+import KratosAcceptTermsCheckbox from './Kratos/KratosAcceptTermsCheckbox';
 import KratosButton from './Kratos/KratosButton';
 import KratosCheckbox from './Kratos/KratosCheckbox';
+import { useKratosFormContext } from './Kratos/KratosForm';
 import KratosHidden from './Kratos/KratosHidden';
 import KratosInput from './Kratos/KratosInput';
 import { KratosInputExtraProps } from './Kratos/KratosProps';
-import { useKratosT } from './Kratos/messages';
-import isAcceptTermsCheckbox from '../utils/isAcceptTermsCheckbox';
-import KratosAcceptTermsCheckbox from './Kratos/KratosAcceptTermsCheckbox';
-import { Text } from '@/core/ui/typography';
-import AuthActionButton, { AuthActionButtonProps } from './Button';
-import { UiNodeInput } from './Kratos/UiNodeTypes';
-import { KratosAcceptTermsProps } from '../pages/AcceptTerms';
-import { useKratosFormContext } from './Kratos/KratosForm';
 import KratosSocialButton from './Kratos/KratosSocialButton';
+import { UiNodeInput } from './Kratos/UiNodeTypes';
 import { KRATOS_REMOVED_FIELDS_DEFAULT, KratosRemovedFieldAttributes } from './Kratos/constants';
+import { guessVariant, isAnchorNode, isHiddenInput, isInputNode, isSubmitButton } from './Kratos/helpers';
+import { useKratosT } from './Kratos/messages';
 
-interface KratosUIProps {
+interface KratosUIProps extends PropsWithChildren {
   ui?: UiContainer;
   resetPasswordElement?: ReactNode;
   acceptTermsComponent?: ComponentType<KratosAcceptTermsProps>;
@@ -223,9 +223,9 @@ interface KratosUIContextProps {
   onBeforeSubmit?: () => void;
 }
 
-export const KratosUIContext = React.createContext<KratosUIContextProps>({});
+export const KratosUIContext = createContext<KratosUIContextProps>({});
 
-interface KratosUIProviderProps {
+interface KratosUIProviderProps extends PropsWithChildren {
   /**
    * @deprecated - it's needed to store hasAcceptedTerms before submit because Kratos can reset the form state.
    * Remove once we're able to make Kratos keep traits.accepted_terms on error.

src/core/auth/authentication/context/AuthenticationProvider.tsx

@@ -1,5 +1,5 @@
 import { Session } from '@ory/kratos-client';
-import React, { FC } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 import { useWhoami } from '../hooks/useWhoami';
 
 export interface AuthContext {
@@ -15,7 +15,7 @@ const AuthenticationContext = React.createContext<AuthContext>({
   verified: false,
 });
 
-const AuthenticationProvider: FC = ({ children }) => {
+const AuthenticationProvider: FC<PropsWithChildren> = ({ children }) => {
   const { session, isAuthenticated, loading, verified } = useWhoami();
 
   return (
@@ -32,4 +32,4 @@ const AuthenticationProvider: FC = ({ children }) => {
   );
 };
 
-export { AuthenticationProvider, AuthenticationContext };
+export { AuthenticationContext, AuthenticationProvider };

src/core/auth/authentication/pages/LogoutPage.tsx

@@ -35,7 +35,12 @@ const LogoutPage = () => {
     return () => {};
   }, [logoutUrl, getLogoutUrl]);
 
-  if (error) return <Typography>{error}</Typography>;
+  if (error)
+    return (
+      <Typography>
+        <>{error}</>
+      </Typography>
+    );
   return <Loading text={t('pages.logout.loading')} />;
 };
 

src/core/lazyLoading/lazyWithGlobalErrorHandler.ts

@@ -11,7 +11,7 @@ export class LazyLoadError extends Error {
   }
 }
 
-export const lazyWithGlobalErrorHandler = <T>(
+export const lazyWithGlobalErrorHandler = <T extends object>(
   importFunc: ImportFunc<T>,
   hoc?: (component: ComponentType<T>) => ComponentType<T>
 ): React.LazyExoticComponent<React.ComponentType<T>> => {

src/core/notFound/NotFoundErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface Props {
+interface Props extends React.PropsWithChildren {
   errorComponent: React.ReactNode;
 }
 

src/core/routing/NoIdentityRedirect.tsx

@@ -1,11 +1,11 @@
-import { FC } from 'react';
+import { buildReturnUrlParam } from '@/main/routing/urlBuilders';
+import { FC, PropsWithChildren } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
-import Loading from '../ui/loading/Loading';
-import { useAuthenticationContext } from '../auth/authentication/hooks/useAuthenticationContext';
 import { AUTH_REQUIRED_PATH } from '../auth/authentication/constants/authentication.constants';
-import { buildReturnUrlParam } from '@/main/routing/urlBuilders';
+import { useAuthenticationContext } from '../auth/authentication/hooks/useAuthenticationContext';
+import Loading from '../ui/loading/Loading';
 
-const NoIdentityRedirect: FC = ({ children }) => {
+const NoIdentityRedirect: FC<PropsWithChildren> = ({ children }) => {
   const { pathname } = useLocation();
   const { isAuthenticated, loading: isLoadingAuthentication } = useAuthenticationContext();
 

src/core/routing/NotAuthenticatedRoute.tsx

@@ -1,9 +1,9 @@
-import { FC } from 'react';
+import { ROUTE_HOME } from '@/domain/platform/routes/constants';
+import { FC, PropsWithChildren } from 'react';
 import { Navigate } from 'react-router-dom';
 import { useAuthenticationContext } from '../auth/authentication/hooks/useAuthenticationContext';
-import { ROUTE_HOME } from '@/domain/platform/routes/constants';
 
-export const NotAuthenticatedRoute: FC = ({ children }) => {
+export const NotAuthenticatedRoute: FC<PropsWithChildren> = ({ children }) => {
   const { isAuthenticated } = useAuthenticationContext();
 
   if (isAuthenticated) return <Navigate to={ROUTE_HOME} />;

src/core/routing/useNavigate.ts

@@ -1,7 +1,9 @@
-import { useNavigate as reactRouterUseNavigate } from 'react-router-dom';
+import {
+  useNavigate as reactRouterUseNavigate,
+  NavigateOptions as ReactRouterNavigateOptions,
+  To,
+} from 'react-router-dom';
 import { useCallback } from 'react';
-import { NavigateOptions as ReactRouterNavigateOptions } from 'react-router/lib/hooks';
-import type { To } from 'history';
 import { normalizeLink } from '../utils/links';
 
 interface NavigationOptions extends ReactRouterNavigateOptions {

src/core/routing/useRestrictedRedirect.tsx

@@ -1,9 +1,8 @@
 import { ApolloError } from '@apollo/client';
 import { AuthorizationPrivilege } from '../apollo/generated/graphql-schema';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, NavigateOptions } from 'react-router-dom';
 import { useEffect } from 'react';
 import { isApolloForbiddenError } from '../apollo/hooks/useApolloErrorHandler';
-import { NavigateOptions } from 'react-router/lib/hooks';
 
 interface RestrictedRedirectQueryResponse<Data extends {}> {
   data?: Data;