React18 (#2504)

* Upgrade React and corresponding types to latest version

* Deprecate usage of React.SFC

* Fix miscellaneous type errors

* Upgrade react-konva to fix type errors with react18

* Fix typings for react-sortable-hoc

* Shift root render to new API

* Fix @types/react versioning

* Fix navigation bar typing

* Fix useEffect return type

* Upgrade @testing-library/react and react-test-renderer to match react v18 and fix tests

* Workaround deprecated ReactDOM.render used by Blueprintjs v4

* Update notification import lines

Author: chownces

package.json

@@ -48,22 +48,22 @@
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
     "js-slang": "^1.0.23",
-    "konva": "^8.3.14",
+    "konva": "^9.2.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.4.4",
     "moment": "^2.29.4",
     "normalize.css": "^8.0.1",
     "phaser": "^3.55.2",
     "query-string": "^7.1.1",
     "re-resizable": "^6.9.9",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-dropzone": "^14.2.3",
     "react-hotkeys": "^2.0.0",
-    "react-konva": "^17.0.2-5",
+    "react-konva": "^18.2.10",
     "react-latex-next": "^2.1.0",
     "react-mde": "^11.5.0",
     "react-papaparse": "^4.0.2",
@@ -89,8 +89,8 @@
     "@craco/craco": "^7.1.0",
     "@svgr/webpack": "^6.3.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "12.1.2",
-    "@testing-library/user-event": "^14.3.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/acorn": "^6.0.0",
     "@types/gapi": "^0.0.44",
     "@types/gapi.auth2": "^0.0.57",
@@ -100,15 +100,15 @@
     "@types/jest": "^28.1.6",
     "@types/lodash": "^4.14.195",
     "@types/lz-string": "^1.3.34",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.2.13",
     "@types/react-copy-to-clipboard": "^5.0.4",
-    "@types/react-dom": "^17.0.20",
+    "@types/react-dom": "^18.2.6",
     "@types/react-redux": "^7.1.24",
     "@types/react-responsive": "^8.0.5",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.5.7",
-    "@types/react-test-renderer": "^17.0.2",
+    "@types/react-test-renderer": "^18.0.0",
     "@types/react-textarea-autosize": "^8.0.0",
     "@types/redux-mock-store": "^1.0.3",
     "@types/showdown": "^2.0.1",
@@ -130,7 +130,7 @@
     "process": "^0.11.10",
     "react-error-overlay": "^6.0.11",
     "react-scripts": "^5.0.1",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.2.0",
     "redux-saga-test-plan": "^4.0.6",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.62.1",
@@ -141,10 +141,6 @@
     "url": "^0.11.0",
     "webpack-bundle-analyzer": "^4.9.0"
   },
-  "resolutions": {
-    "//": "React 18's types are much stricter and upgrading to it (even if indirectly via a dependency) results in many type errors. FIXME: Remove this after upgrading fully to React 18 and fixing all of the type errors.",
-    "@types/react": "^17.0.38"
-  },
   "browserslist": {
     "production": [
       "Firefox ESR",

src/commons/ContentDisplay.tsx

@@ -8,8 +8,10 @@ export type ContentDisplayProps = {
 };
 
 const ContentDisplay: React.FC<ContentDisplayProps> = props => {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => props.loadContentDispatch?.(), []);
+  useEffect(() => {
+    props.loadContentDispatch?.();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <div className="ContentDisplay row center-xs">

src/commons/achievement/AchievementCommentCard.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router';
 
 import { Assessment } from '../assessment/AssessmentTypes';
 import { useTypedSelector } from '../utils/Hooks';
-import { showWarningMessage } from '../utils/NotificationsHelper';
+import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { assessmentTypeLink } from '../utils/ParamParseHelper';
 
 const AchievementCommentCard = ({

src/commons/achievement/AchievementManualEditor.tsx

@@ -8,7 +8,7 @@ import {
   GoalProgress
 } from 'src/features/achievement/AchievementTypes';
 
-import { showSuccessMessage, showWarningMessage } from '../utils/NotificationsHelper';
+import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
 
 type AchievementManualEditorProps = {
   hiddenState: [boolean, any];

src/commons/achievement/control/achievementEditor/AchievementUuidCopier.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Tooltip2 } from '@blueprintjs/popover2';
-import { showSuccessMessage } from 'src/commons/utils/NotificationsHelper';
+import { showSuccessMessage } from 'src/commons/utils/notifications/NotificationsHelper';
 
 type AchievementUuidCopierProps = {
   uuid: string;

src/commons/achievement/control/common/ItemSaver.tsx

@@ -1,7 +1,10 @@
 import { Button } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Tooltip2 } from '@blueprintjs/popover2';
-import { showSuccessMessage, showWarningMessage } from 'src/commons/utils/NotificationsHelper';
+import {
+  showSuccessMessage,
+  showWarningMessage
+} from 'src/commons/utils/notifications/NotificationsHelper';
 
 type ItemSaverProps = {
   discardChanges: () => void;

src/commons/achievement/utils/AchievementInferencer.ts

@@ -10,7 +10,7 @@ import {
   GoalProgress,
   GoalType
 } from '../../../features/achievement/AchievementTypes';
-import { showDangerMessage } from '../../utils/NotificationsHelper';
+import { showDangerMessage } from '../../utils/notifications/NotificationsHelper';
 import { isExpired, isReleased } from './DateHelper';
 
 /**

src/commons/achievement/utils/EventHandler.ts

@@ -6,7 +6,7 @@ import {
   GoalProgress,
   GoalType
 } from '../../../features/achievement/AchievementTypes';
-import { showSuccessMessage } from '../../utils/NotificationsHelper';
+import { showSuccessMessage } from '../../utils/notifications/NotificationsHelper';
 import AchievementInferencer from './AchievementInferencer';
 import { isExpired, isReleased, isWithinTimeRange } from './DateHelper';
 

src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap

@@ -1091,9 +1091,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                             </span>
                             <span
                               className="custom-hidden-xxs"
-                            >
-                              
-                            </span>
+                            />
                           </span>
                         </button>
                       </a>

src/commons/controlBar/ControlBarSessionButton.tsx

@@ -6,7 +6,7 @@ import * as CopyToClipboard from 'react-copy-to-clipboard';
 
 import { checkSessionIdExists, createNewSession } from '../collabEditing/CollabEditingHelper';
 import ControlButton from '../ControlButton';
-import { showWarningMessage } from '../utils/NotificationsHelper';
+import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 
 type ControlBarSessionButtonsProps = DispatchProps & StateProps;