React18

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;
 

src/commons/controlBar/github/ControlBarTaskAddButton.tsx

@@ -2,7 +2,7 @@ import { IconNames } from '@blueprintjs/icons';
 
 import ControlButton from '../../ControlButton';
 import { maximumTasksPerMission } from '../../githubAssessments/GitHubMissionDataUtils';
-import { showWarningMessage } from '../../utils/NotificationsHelper';
+import { showWarningMessage } from '../../utils/notifications/NotificationsHelper';
 
 export type ControlBarTaskAddButtonProps = {
   addNewQuestion: () => void;

src/commons/controlBar/github/ControlBarTaskDeleteButton.tsx

@@ -2,7 +2,7 @@ import { IconNames } from '@blueprintjs/icons';
 
 import ControlButton from '../../ControlButton';
 import { showSimpleConfirmDialog } from '../../utils/DialogHelper';
-import { showWarningMessage } from '../../utils/NotificationsHelper';
+import { showWarningMessage } from '../../utils/notifications/NotificationsHelper';
 
 export type ControlBarTaskDeleteButtonProps = {
   deleteCurrentQuestion: () => void;

src/commons/dropdown/DropdownAbout.tsx

@@ -9,7 +9,7 @@ type DialogProps = {
   onClose: () => void;
 };
 
-const DropdownAbout: React.SFC<DialogProps> = props => (
+const DropdownAbout: React.FC<DialogProps> = props => (
   <Dialog
     className="about"
     icon={IconNames.HELP}

src/commons/dropdown/DropdownCreateCourse.tsx

@@ -21,7 +21,7 @@ import { CourseHelpTextEditorTab } from '../../pages/academy/adminPanel/subcompo
 import { sourceLanguages } from '../application/ApplicationTypes';
 import { UpdateCourseConfiguration } from '../application/types/SessionTypes';
 import Markdown from '../Markdown';
-import { showWarningMessage } from '../utils/NotificationsHelper';
+import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 
 type DialogProps = {
   isOpen: boolean;

src/commons/dropdown/DropdownHelp.tsx

@@ -11,7 +11,7 @@ type DialogProps = {
   onClose: () => void;
 };
 
-const DropdownHelp: React.SFC<DialogProps> = props => {
+const DropdownHelp: React.FC<DialogProps> = props => {
   const moduleHelpText = useTypedSelector(store => store.session.moduleHelpText);
 
   return (

src/commons/editor/UseHighlighting.tsx

@@ -78,16 +78,16 @@ const useHighlighting: EditorHook = (inProps, outProps, keyBindings, reactAceRef
 
   const { onChange: prevOnChange, onCursorChange: prevOnCursorChange } = outProps;
   outProps.onChange = React.useCallback(
-    (v, e) => {
+    (value: string, event?: any) => {
       handleVariableHighlighting();
-      prevOnChange && prevOnChange(v, e);
+      prevOnChange && prevOnChange(value, event);
     },
     [handleVariableHighlighting, prevOnChange]
   );
   outProps.onCursorChange = React.useCallback(
-    (v, e) => {
+    (value: any, event?: any) => {
       handleVariableHighlighting();
-      prevOnCursorChange && prevOnCursorChange(v, e);
+      prevOnCursorChange && prevOnCursorChange(value, event);
     },
     [handleVariableHighlighting, prevOnCursorChange]
   );

src/commons/gitHubOverlay/RepositoryDialog.tsx

@@ -10,7 +10,7 @@ import {
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
-import { showWarningMessage } from '../utils/NotificationsHelper';
+import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 
 export type RepositoryDialogProps = {
   userRepos: any[];

src/commons/gitHubOverlay/__tests__/FileExplorerDialog.tsx

@@ -57,8 +57,9 @@ test('Opening folder for first time causes child files to be loaded', async () =
 
   await screen.findByText('Select a File');
 
+  const dropdownCaret = await screen.findByText('Expand group');
   act(() => {
-    fireEvent.click(screen.getByText('Expand group'));
+    fireEvent.click(dropdownCaret);
   });
 
   await waitFor(() => expect(screen.getAllByText('TestFolder').length).toBe(2));
@@ -87,7 +88,7 @@ test('Closing folder hides child files', async () => {
 
   await screen.findByText('Select a File');
 
-  const dropdownCaret = screen.getByText('Expand group');
+  const dropdownCaret = await screen.findByText('Expand group');
 
   // Open the folder for the first time, now there should be 2 TestFolders
   act(() => {
@@ -129,7 +130,7 @@ test('Opening folder for second time does not cause child files to be loaded', a
 
   await screen.findByText('Select a File');
 
-  const dropdownCaret = screen.getByText('Expand group');
+  const dropdownCaret = await screen.findByText('Expand group');
 
   // Open the folder, there should be 2 TestFolders in the render
   act(() => {

src/commons/gitHubOverlay/__tests__/RepositoryDialog.tsx

@@ -1,8 +1,10 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 
+import * as NotificationHelper from '../../utils/notifications/NotificationsHelper';
 import RepositoryDialog from '../RepositoryDialog';
 
 test('Submitting without selecting causes error message to be displayed', async () => {
+  const notificationMock = jest.spyOn(NotificationHelper, 'showWarningMessage');
   function onSubmit(inputValue: string) {}
 
   const userRepos = [
@@ -17,7 +19,7 @@ test('Submitting without selecting causes error message to be displayed', async
 
   fireEvent.click(screen.getByText('Select'));
 
-  await screen.findByText('No repository selected!');
+  expect(notificationMock).toBeCalledTimes(1);
 });
 
 test('Selection sets repoName for submission', () => {

src/commons/githubAssessments/GitHubMissionCreateDialog.tsx

@@ -2,7 +2,7 @@ import { AnchorButton, Button, Classes, Dialog, InputGroup, Intent } from '@blue
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
-import { showWarningMessage } from '../utils/NotificationsHelper';
+import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 
 export type GitHubMissionCreateDialogResolution = {
   confirmSave: boolean;

src/commons/githubAssessments/GitHubMissionDataUtils.ts

@@ -7,7 +7,7 @@ import { Chapter } from 'js-slang/dist/types';
 import { isEqual } from 'lodash';
 
 import { IMCQQuestion, Testcase } from '../assessment/AssessmentTypes';
-import { showWarningMessage } from '../utils/NotificationsHelper';
+import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { MissionData, MissionMetadata, MissionRepoData, TaskData } from './GitHubMissionTypes';
 
 export const maximumTasksPerMission = 20;

src/commons/mcqChooser/McqChooser.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { IMCQQuestion } from '../assessment/AssessmentTypes';
 import Markdown from '../Markdown';
-import { showSuccessMessage, showWarningMessage } from '../utils/NotificationsHelper';
+import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
 
 export type McqChooserProps = {
   mcq: IMCQQuestion;

src/commons/mocks/BackendMocks.ts

@@ -43,7 +43,7 @@ import {
 } from '../notificationBadge/NotificationBadgeTypes';
 import { routerNavigate } from '../sagas/BackendSaga';
 import { actions } from '../utils/ActionsHelper';
-import { showSuccessMessage, showWarningMessage } from '../utils/NotificationsHelper';
+import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { WorkspaceLocation } from '../workspace/WorkspaceTypes';
 import {
   mockAssessmentConfigurations,

src/commons/navigationBar/NavigationBar.tsx

@@ -40,7 +40,7 @@ export type NavbarEntryInfo = {
   hiddenInBreakpoints?: ('xs' | 'sm' | 'md' | 'lg')[]; // hide text in Blueprint breakpoints
 };
 
-type CreateNavlinkFunction = (navbarEntry: NavbarEntryInfo) => React.ReactFragment;
+type CreateNavlinkFunction = (navbarEntry: NavbarEntryInfo) => React.ReactElement;
 
 const NavigationBar: React.FC = () => {
   const [mobileSideMenuOpen, setMobileSideMenuOpen] = useState(false);
@@ -96,7 +96,7 @@ const NavigationBar: React.FC = () => {
     [setMobileSideMenuOpen]
   );
 
-  const wrapWithMobileHamburger = (navlinks: (React.ReactFragment | null)[]) => {
+  const wrapWithMobileHamburger = (navlinks: (React.ReactElement | null)[]) => {
     // Don't render drawer when there are 0 navlinks in it
     const nonNullNavlinks = navlinks.filter(e => e !== null);
     const renderDrawer = nonNullNavlinks.length > 0;
@@ -352,7 +352,7 @@ const playgroundOnlyNavbarLeftInfo: NavbarEntryInfo[] = [
 export const renderNavlinksFromInfo = (
   navbarEntries: NavbarEntryInfo[],
   createNavlink: CreateNavlinkFunction
-): (React.ReactFragment | null)[] =>
+): (React.ReactElement | null)[] =>
   navbarEntries.map(entry => {
     if (entry.disabled) {
       return null;

src/commons/notificationBadge/NotificationBadge.tsx

@@ -17,7 +17,7 @@ type OwnProps = {
   notificationFilter?: (notifications: Notification[]) => Notification[];
 };
 
-const NotificationBadge: React.SFC<NotificationBadgeProps> = props => {
+const NotificationBadge: React.FC<NotificationBadgeProps> = props => {
   const dispatch = useDispatch();
   const initialNotifications = useTypedSelector(state => state.session.notifications);
 

src/commons/sagas/BackendSaga.ts

@@ -82,7 +82,7 @@ import {
 } from '../notificationBadge/NotificationBadgeTypes';
 import { actions } from '../utils/ActionsHelper';
 import { computeRedirectUri, getClientId, getDefaultProvider } from '../utils/AuthHelper';
-import { showSuccessMessage, showWarningMessage } from '../utils/NotificationsHelper';
+import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { CHANGE_SUBLANGUAGE, WorkspaceLocation } from '../workspace/WorkspaceTypes';
 import {
   deleteAssessment,

src/commons/sagas/GitHubPersistenceSaga.ts

@@ -20,7 +20,7 @@ import RepositoryDialog, { RepositoryDialogProps } from '../gitHubOverlay/Reposi
 import { actions } from '../utils/ActionsHelper';
 import Constants from '../utils/Constants';
 import { promisifyDialog } from '../utils/DialogHelper';
-import { showSuccessMessage, showWarningMessage } from '../utils/NotificationsHelper';
+import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { EditorTabState } from '../workspace/WorkspaceTypes';
 
 export function* GitHubPersistenceSaga(): SagaIterator {

src/commons/sagas/LoginSaga.ts

@@ -6,7 +6,7 @@ import { LOG_OUT } from '../application/types/CommonsTypes';
 import { LOGIN, SET_USER } from '../application/types/SessionTypes';
 import { actions } from '../utils/ActionsHelper';
 import { computeEndpointUrl } from '../utils/AuthHelper';
-import { showWarningMessage } from '../utils/NotificationsHelper';
+import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { safeTakeEvery as takeEvery } from './SafeEffects';
 
 export default function* LoginSaga(): SagaIterator {

src/commons/sagas/PersistenceSaga.tsx

@@ -22,7 +22,7 @@ import {
   showMessage,
   showSuccessMessage,
   showWarningMessage
-} from '../utils/NotificationsHelper';
+} from '../utils/notifications/NotificationsHelper';
 import { AsyncReturnType } from '../utils/TypeHelper';
 import { safeTakeEvery as takeEvery, safeTakeLatest as takeLatest } from './SafeEffects';