Change/upgraded to react18 CMEM-6639

package.json

@@ -9,8 +9,8 @@
   ],
   "scripts": {},
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {},
   "resolutions": {
@@ -22,10 +22,11 @@
     "**/minimist": "1.2.8",
     "**/moment": "2.29.4",
     "**/nanoid": "3.3.4",
-    "**/react": "^17.0.2",
-    "**/react-dom": "^17.0.2",
+    "**/react": "^18.2.0",
+    "**/react-dom": "^18.2.0",
     "**/semver-regex": "3.1.4",
-    "**/@types/react": "^17.0.85",
-    "**/url-parse": "1.5.9"
+    "**/@types/react": "^18.2.0",
+    "**/url-parse": "1.5.9",
+    "**/react-redux": "^9.1.2"
   }
 }

workspace/package.json

@@ -16,7 +16,7 @@
         "watch": "node --openssl-legacy-provider --max_old_space_size=2048 scripts/build-di.dev.js --watch",
         "build-di-dev": "node --openssl-legacy-provider scripts/build-di.dev.js",
         "build-di-prod": "node --openssl-legacy-provider --max_old_space_size=2048 scripts/build-di.prod.js",
-        "test": "node scripts/test.js",
+        "test": "DEBUG=true node scripts/test.js",
         "test-ci": "export CI=true && node scripts/test.js --coverage --reporters=\"default\" --reporters=\"jest-junit\" --no-colors -ci --silent",
         "sync-trans": "sync-i18n --files 'src/locales/manual/*.json' --primary en --languages de --space 4 -- --check",
         "i18n-parser": "node scripts/i18next-scanner.js",
@@ -28,7 +28,7 @@
         "@eccenca/gui-elements": "^25.0.0",
         "@eccenca/superagent": "^1.4.1",
         "@mavrin/remark-typograf": "^2.2.0",
-        "@reduxjs/toolkit": "^1.9.7",
+        "@reduxjs/toolkit": "^2.11.1",
         "@uppy/core": "1.17.0",
         "@uppy/react": "1.11.10",
         "@uppy/xhr-upload": "1.7.5",
@@ -53,11 +53,11 @@
         "react-helmet": "^6.0.0",
         "react-hook-form": "^5.1.3",
         "react-i18next": "^11.18.6",
-        "react-redux": "^7.2.9",
+        "react-redux": "^9.2.0",
         "react-router": "^5.3.4",
         "react-router-dom": "^5.3.4",
         "react-sparklines": "^1.7.0",
-        "redux": "^4.2.1",
+        "redux": "^5.0.1",
         "redux-logger": "^3.0.6",
         "store": "^2.0.12"
     },
@@ -129,19 +129,20 @@
             "<rootDir>/test/**/*(*.)@(spec|test).{js,jsx,ts,tsx}"
         ],
         "transform": {
-            "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+            "^.+\\.(js|jsx|ts|tsx|mjs|cjs)$": "babel-jest",
             "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
             "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
         },
         "transformIgnorePatterns": [
-            "[/\\\\]node_modules[/\\\\](?!react-markdown|vfile|unist-util-stringify-position|).+\\.(js|jsx|ts|tsx)$",
+            "[/\\\\]node_modules[/\\\\](?!react-markdown|vfile|unist-util-stringify-position|@reduxjs/toolkit|).+\\.(js|jsx|ts|tsx|mjs|cjs)$",
             "^.+\\.module\\.(css|sass|scss)$"
         ],
         "moduleNameMapper": {
             "^react-native$": "react-native-web",
             "^react-markdown$": "<rootDir>/../../node_modules/react-markdown",
             "^@eccenca/gui-elements$": "<rootDir>/../../node_modules/@eccenca/gui-elements",
             "^@eccenca/gui-elements/(.*)$": "<rootDir>/../../node_modules/@eccenca/gui-elements/$1",
+            "^@reduxjs/toolkit$": "<rootDir>/../../node_modules/@reduxjs/toolkit/dist/cjs/redux-toolkit.development.cjs",
             "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
             "@ducks(.*)$": "<rootDir>/src/app/store/ducks/$1"
         },
@@ -180,12 +181,12 @@
         "@cyclonedx/webpack-plugin": "^2.0.2",
         "@svgr/webpack": "^8.1.0",
         "@testing-library/jest-dom": "^6.6.4",
-        "@testing-library/react": "^12.1.5",
+        "@testing-library/react": "^14.3.1",
         "@testing-library/user-event": "^14.6.1",
         "@types/jest": "^30.0.0",
         "@types/ramda": "^0.26.6",
-        "@types/react": "^17.0.85",
-        "@types/react-dom": "^17.0.8",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
         "@types/react-redux": "^7.1.34",
         "@types/react-router": "^5.1.20",
         "@types/react-router-dom": "^5.3.3",
@@ -264,6 +265,7 @@
     "resolutions": {
         "**/minimist": "^1.2.8",
         "sanitize.css": "12.0.1",
-        "**/url-parse": "1.5.9"
+        "**/url-parse": "1.5.9",
+        "react-redux": "^9.1.2"
     }
 }

workspace/scripts/test.js

@@ -54,5 +54,5 @@ if (
 if (argv.indexOf("--no-watch") !== -1) {
     argv = argv.filter((arg) => arg !== "--no-watch");
 }
-
+argv.push("--detectOpenHandles", "--logHeapUsage")
 jest.run(argv);

workspace/src/app/App.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from "react";
 import { ConnectedRouter } from "connected-react-router";
-import { useDispatch } from "react-redux";
+import { useDispatch, ReactReduxContext } from "react-redux";
 
 import { commonOp } from "@ducks/common";
 import RouterOutlet from "./RouterOutlet";
-import { getHistory } from "./store/configureStore";
+import { AppDispatch, getHistory } from "./store/configureStore";
 import { IRouteProps } from "./appRoutes";
 import { GlobalContextsWrapper } from "./GlobalContextsWrapper";
 
@@ -14,13 +14,12 @@ interface IProps {
 }
 
 export default function App({ externalRoutes, routes }: IProps) {
-    const dispatch = useDispatch();
+    const dispatch = useDispatch<AppDispatch>();
 
     useEffect(() => {
         dispatch(commonOp.fetchCommonSettingsAsync());
         dispatch(commonOp.fetchExportTypesAsync());
     }, [commonOp]);
-
     return (
         <GlobalContextsWrapper>
             <ConnectedRouter history={getHistory()}>

workspace/src/app/hooks/useCopyButton.tsx

@@ -19,7 +19,7 @@ interface ICopyData {
 
 const COPY_RESET_TIMEOUT = 1000;
 
-const useCopyButton = (data: Array<ICopyData>, resetTimeout = COPY_RESET_TIMEOUT): JSX.Element[] => {
+const useCopyButton = (data: Array<ICopyData>, resetTimeout = COPY_RESET_TIMEOUT): React.JSX.Element[] => {
     const [activeButton, setActiveButton] = React.useState<string | undefined>();
     const { registerError } = useErrorHandler();
     const [t] = useTranslation();

workspace/src/app/hooks/useErrorHandler.tsx

@@ -19,7 +19,7 @@ export type ErrorHandlerRegisterFuncType = (
     errorMessage: string,
     cause: DIErrorTypes | null,
     options?: ErrorHandlerOptions,
-) => JSX.Element | null;
+) => React.JSX.Element | null;
 
 interface ErrorHandlerOptions {
     /** The notification instance where the error should be displayed. If this is set, the
@@ -40,7 +40,7 @@ type ErrorHandlerRegisterShortFuncType = (
     /** The error cause. */
     cause: DIErrorTypes | null,
     options?: ErrorHandlerOptions,
-) => JSX.Element | null;
+) => React.JSX.Element | null;
 
 interface ErrorHandlerDict {
     registerError: ErrorHandlerRegisterFuncType;

workspace/src/app/hooks/useSelectFirstResult.ts

@@ -5,9 +5,10 @@ import { IPageLabels } from "@ducks/router/operations";
 import { workspaceOp, workspaceSel } from "@ducks/workspace";
 import { DATA_TYPES } from "../constants";
 import { batch, useDispatch, useSelector } from "react-redux";
+import { AppDispatch } from "store/configureStore";
 
 export const useSelectFirstResult = () => {
-    const dispatch = useDispatch();
+    const dispatch = useDispatch<AppDispatch>();
     const data = useSelector(workspaceSel.resultsSelector);
     const dataArrayRef = React.useRef(data);
     const enabled = React.useRef(true);

workspace/src/app/services/errorLogger.ts

@@ -161,7 +161,7 @@ const logError = (error: FetchError | Error, reactErrorInfo?: ErrorInfo): boolea
         } else if (error instanceof Error) {
             const { name, message, stack } = error;
             const newStack = reactErrorInfo ? reactErrorInfo.componentStack : stack;
-            err = generateDefaultError(name, message, newStack);
+            err = generateDefaultError(name, message, newStack || undefined);
         } else {
             err = generateDefaultError("Uncaught Error type received ", error);
         }

workspace/src/app/store/configureStore.ts

@@ -1,5 +1,5 @@
 import rootReducer from "./reducers";
-import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
+import { configureStore } from "@reduxjs/toolkit";
 import { createBrowserHistory } from "history";
 import { routerMiddleware } from "connected-react-router";
 import { createLogger } from "redux-logger";
@@ -16,12 +16,7 @@ export const getHistory = () => history;
 
 export default function configStore(options: any = {}) {
     const enhancers: any[] = [];
-    const middleware = [
-        ...getDefaultMiddleware({
-            serializableCheck: false,
-        }),
-        routerMiddleware(getHistory()),
-    ];
+    const middleware = [routerMiddleware(getHistory())];
     if (isDevelopment) {
         const { enableStoreDevUtils, monitorPerformance, logReduxActions, logUselessRenders } = options;
         // Enable redux development actions, e.g. reset store
@@ -59,10 +54,13 @@ export default function configStore(options: any = {}) {
 
     store = configureStore({
         reducer: rootReducer(getHistory()),
-        middleware,
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }).concat(middleware),
         devTools: isDevelopment,
-        enhancers,
+        enhancers: (defaultEnhancers) => defaultEnhancers().concat(enhancers),
     });
 
     return store;
 }
+
+export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;

workspace/src/app/store/ducks/common/commonSlice.ts

@@ -1,4 +1,4 @@
-import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { ActionReducerMapBuilder, createAction, createSlice, PayloadAction, WritableDraft } from "@reduxjs/toolkit";
 import { initialCommonState } from "./initialState";
 import { LOCATION_CHANGE } from "connected-react-router";
 import appRoutes from "../../../appRoutes";
@@ -13,44 +13,43 @@ import {
     IInitFrontend,
     IProjectTaskUpdatePayload,
     IArtefactModal,
+    ICommonState,
 } from "@ducks/common/typings";
 import { setStoredLang } from "../../../../language";
 
 /**
  * @override connect-react-router location change action
  * set projectId and taskId on location change
  */
-const getExtraReducers = () => {
+const getExtraReducers = (builder: ActionReducerMapBuilder<WritableDraft<ICommonState>>) => {
     const routerChange = createAction(LOCATION_CHANGE);
-    return {
-        [routerChange.toString()]: (state) => {
-            const { location } = getHistory();
-            const updatedState = {
-                ...state,
-            };
-
-            let match;
-            for (let route of appRoutes) {
-                match = matchPath<{ taskId?: string; projectId?: string }>(location.pathname, {
-                    path: getFullRoutePath(route.path),
-                    exact: true,
-                });
+    builder.addCase(routerChange.toString(), (state) => {
+        const { location } = getHistory();
+        const updatedState = {
+            ...state,
+        };
+
+        let match;
+        for (let route of appRoutes) {
+            match = matchPath<{ taskId?: string; projectId?: string }>(location.pathname, {
+                path: getFullRoutePath(route.path),
+                exact: true,
+            });
 
-                if (match) {
-                    updatedState.currentProjectId = match.params.projectId || null;
-                    updatedState.currentTaskId = match.params.taskId || null;
-                    break;
-                }
+            if (match) {
+                updatedState.currentProjectId = match.params.projectId || null;
+                updatedState.currentTaskId = match.params.taskId || null;
+                break;
             }
+        }
 
-            if (!match) {
-                updatedState.currentTaskId = null;
-                updatedState.currentProjectId = null;
-            }
+        if (!match) {
+            updatedState.currentTaskId = undefined;
+            updatedState.currentProjectId = undefined;
+        }
 
-            return updatedState;
-        },
-    };
+        return updatedState;
+    });
 };
 
 export const commonSlice = createSlice({
@@ -164,7 +163,7 @@ export const commonSlice = createSlice({
 
         createNewTask: (
             state,
-            action: PayloadAction<Pick<IArtefactModal, "newTaskPreConfiguration" | "selectedDType">>
+            action: PayloadAction<Pick<IArtefactModal, "newTaskPreConfiguration" | "selectedDType">>,
         ) => {
             const { newTaskPreConfiguration, selectedDType } = action.payload;
             state.artefactModal.newTaskPreConfiguration = newTaskPreConfiguration;
@@ -185,5 +184,5 @@ export const commonSlice = createSlice({
             state.artefactModal.info = action.payload;
         },
     },
-    extraReducers: getExtraReducers(),
+    extraReducers: (builder) => getExtraReducers(builder),
 });

workspace/src/app/store/ducks/common/typings.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import {
     IAutocompleteDefaultResponse,
     IMetadata,
@@ -37,7 +38,7 @@ interface AutoCompletionFrontendExtensions {
         query: string,
         modifiers: SuggestFieldItemRendererModifierProps,
         handleSelectClick: () => any,
-    ) => string | JSX.Element;
+    ) => string | React.JSX.Element;
 }
 
 /** Properties for parameter auto-completion. */

workspace/src/app/store/reducers.ts

@@ -3,11 +3,11 @@ import { combineReducers } from "@reduxjs/toolkit";
 import workspace from "@ducks/workspace";
 import common from "@ducks/common";
 import routerReducers from "@ducks/router";
-import { Reducer, Action, CombinedState } from "redux";
+import { Reducer, Action } from "redux";
 import { IStore } from "./typings/IStore";
 import error from "@ducks/error";
 
-const reducers = (history): Reducer<CombinedState<IStore>, Action> => {
+const reducers = (history): Reducer<IStore, Action> => {
     return combineReducers({
         common: common.reducer,
         workspace,

workspace/src/app/utils/uiUtils.tsx

@@ -4,11 +4,11 @@ import React from "react";
 /** Wraps an element inside a tooltip when the wrap predicate is true. */
 export const wrapTooltip = (
     wrapPredicate: boolean,
-    childTooltip: string | JSX.Element,
-    child: JSX.Element,
+    childTooltip: string | React.JSX.Element,
+    child: React.JSX.Element,
     position: ContextOverlayProps["placement"] = "bottom-start",
-    size: "large" | "small" | "medium" = "large"
-): JSX.Element => {
+    size: "large" | "small" | "medium" = "large",
+): React.JSX.Element => {
     if (wrapPredicate) {
         return (
             <Tooltip content={childTooltip} placement={position} size={size} minimal>

workspace/src/app/views/layout/Header/ExampleProjectImportMenu.tsx

@@ -6,11 +6,12 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { routerOp } from "@ducks/router";
 import { requestProjectMetadata } from "@ducks/shared/requests";
+import { AppDispatch } from "store/configureStore";
 
 /** Component to load the "movies" example project. */
 export const ExampleProjectImportMenu = () => {
     const { registerError } = useErrorHandler();
-    const dispatch = useDispatch();
+    const dispatch = useDispatch<AppDispatch>();
     const [t] = useTranslation();
     const [exampleProjectLoaded, setExampleProjectLoaded] = React.useState<boolean | undefined>(undefined);
     const [loading, setLoading] = React.useState(false);

workspace/src/app/views/layout/Header/Header.tsx

@@ -37,14 +37,15 @@ import { UserMenuFooterProps } from "../../plugins/plugin.types";
 import { ExampleProjectImportMenu } from "./ExampleProjectImportMenu";
 import { useKeyboardHeaderShortcuts } from "./useKeyBoardHeaderShortcuts";
 import { getFullRoutePath } from "../../../utils/routerUtils";
+import { AppDispatch } from "store/configureStore";
 
 interface IProps {
     onClickApplicationSidebarExpand: any;
     isApplicationSidebarExpanded: boolean;
 }
 
 export function Header({ onClickApplicationSidebarExpand, isApplicationSidebarExpanded }: IProps) {
-    const dispatch = useDispatch();
+    const dispatch = useDispatch<AppDispatch>();
     const location = useLocation();
     const locationParams = new URLSearchParams(location.search?.substring(1));
     const { hotKeys } = useSelector(commonSel.initialSettingsSelector);