Add exam mode

package.json

@@ -57,6 +57,7 @@
     "browserfs": "^1.4.3",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.13",
+    "disable-devtool": "^0.3.8",
     "dompurify": "^3.2.4",
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",

src/commons/application/Application.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import disableDevtool from 'disable-devtool';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Outlet } from 'react-router';
 import Messages, {
@@ -8,16 +9,19 @@ import Messages, {
 } from 'src/features/vscode/messages';
 
 import NavigationBar from '../navigationBar/NavigationBar';
+import { PauseAcademyOverlay } from '../pauseAcademyOverlay/PauseAcademyOverlay';
 import Constants from '../utils/Constants';
 import { useLocalStorageState, useSession } from '../utils/Hooks';
+import { showDangerMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import WorkspaceActions from '../workspace/WorkspaceActions';
 import { defaultWorkspaceSettings, WorkspaceSettingsContext } from '../WorkspaceSettingsContext';
 import SessionActions from './actions/SessionActions';
 import VscodeActions from './actions/VscodeActions';
+import { Role } from './ApplicationTypes';
 
 const Application: React.FC = () => {
   const dispatch = useDispatch();
-  const { isLoggedIn } = useSession();
+  const { isLoggedIn, isPaused, enableExamMode } = useSession();
 
   // Used in the mobile/PWA experience (e.g. separate handling of orientation changes on Andriod & iOS due to unique browser behaviours)
   const isMobile = /iPhone|iPad|Android/.test(navigator.userAgent);
@@ -29,6 +33,16 @@ const Application: React.FC = () => {
     defaultWorkspaceSettings
   );
 
+  // Used for dev tools detection
+  const [isPreviewExamMode] = useLocalStorageState(
+    Constants.isPreviewExamModeLocalStorageKey,
+    false
+  );
+  const [pauseAcademy, setPauseAcademy] = useState(false);
+  const [pauseAcademyReason, setPauseAcademyReason] = useState('');
+  const hasSentPauseUserRequest = React.useRef<boolean>(false);
+  const { role } = useSession();
+
   // Effect to fetch the latest user info and course configurations from the backend on refresh,
   // if the user was previously logged in
   React.useEffect(() => {
@@ -153,14 +167,90 @@ const Application: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Effect for dev tools blocking/detection when exam mode enabled
+  React.useEffect(() => {
+    if (role !== Role.Student && !isPreviewExamMode) {
+      return;
+    }
+
+    const showPauseAcademyOverlay = (reason: string) => {
+      setPauseAcademy(true);
+      setPauseAcademyReason(reason);
+      if (hasSentPauseUserRequest.current === false) {
+        dispatch(SessionActions.pauseUser());
+        hasSentPauseUserRequest.current = true;
+      }
+    };
+
+    if (enableExamMode || isPreviewExamMode) {
+      dispatch(SessionActions.reportFocusRegain());
+
+      if (isPaused !== undefined && isPaused) {
+        showPauseAcademyOverlay('Browser was refreshed when Source Academy was paused');
+      } else {
+        hasSentPauseUserRequest.current = false;
+      }
+
+      // Disable/Detect dev tools
+      disableDevtool({
+        ondevtoolopen: () => {
+          showPauseAcademyOverlay('Developer tools detected');
+        }
+      });
+
+      document.addEventListener('contextmenu', event => event.preventDefault());
+      document.addEventListener('keydown', event => {
+        if (
+          event.key === 'F12' ||
+          ((event.key === 'I' || event.key === 'J' || event.key === 'C') &&
+            event.ctrlKey &&
+            event.shiftKey)
+        ) {
+          event.preventDefault();
+        }
+      });
+
+      // Detect when Source Academy tab's content are hidden (e.g., user changes tab while Source Academy is active)
+      document.addEventListener('visibilitychange', _ => {
+        if (document.visibilityState === 'hidden') {
+          dispatch(SessionActions.reportFocusLost());
+        } else {
+          showDangerMessage('Source Academy was out of focus.', 5000);
+          dispatch(SessionActions.reportFocusRegain());
+        }
+      });
+    }
+  }, [dispatch, enableExamMode, isPaused, hasSentPauseUserRequest, role, isPreviewExamMode]);
+
+  const resumeCodeSubmitHandler = (resumeCode: string) => {
+    if (!resumeCode || resumeCode.length === 0) {
+      showWarningMessage('Resume code cannot be empty.');
+    } else {
+      dispatch(
+        SessionActions.validateResumeCode(resumeCode, (isResumeCodeValid: boolean) => {
+          if (isResumeCodeValid) {
+            setPauseAcademy(false);
+            hasSentPauseUserRequest.current = false;
+          } else {
+            showWarningMessage('Resume code is invalid.');
+          }
+        })
+      );
+    }
+  };
+
   return (
     <WorkspaceSettingsContext.Provider value={[workspaceSettings, setWorkspaceSettings]}>
-      <div className="Application">
-        <NavigationBar />
-        <div className="Application__main">
-          <Outlet />
+      {pauseAcademy ? (
+        <PauseAcademyOverlay reason={pauseAcademyReason} onSubmit={resumeCodeSubmitHandler} />
+      ) : (
+        <div className="Application">
+          <NavigationBar />
+          <div className="Application__main">
+            <Outlet />
+          </div>
         </div>
-      </div>
+      )}
     </WorkspaceSettingsContext.Provider>
   );
 };

src/commons/application/ApplicationTypes.ts

@@ -568,7 +568,8 @@ export const defaultSession: SessionState = {
   students: undefined,
   teamFormationOverviews: undefined,
   gradings: {},
-  notifications: []
+  notifications: [],
+  isPaused: undefined
 };
 
 export const defaultStories: StoriesState = {

src/commons/application/actions/SessionActions.ts

@@ -149,7 +149,14 @@ const SessionActions = createActions('session', {
   deleteUserCourseRegistration: (courseRegId: number) => ({ courseRegId }),
   updateCourseResearchAgreement: (agreedToResearch: boolean) => ({ agreedToResearch }),
   updateStoriesUserRole: (userId: number, role: StoriesRole) => ({ userId, role }),
-  deleteStoriesUserUserGroups: (userId: number) => ({ userId })
+  deleteStoriesUserUserGroups: (userId: number) => ({ userId }),
+  validateResumeCode: (resumeCode: string, callback: (isResumeCodeValid: boolean) => any) => ({
+    resumeCode,
+    callback
+  }),
+  pauseUser: () => ({}),
+  reportFocusLost: () => ({}),
+  reportFocusRegain: () => ({})
 });
 
 // For compatibility with existing code (actions helper)

src/commons/application/actions/__tests__/SessionActions.test.ts

@@ -200,7 +200,8 @@ test('setUser generates correct action object', () => {
         role: Role.Staff,
         viewable: true
       }
-    ]
+    ],
+    isPaused: false
   };
   const action = SessionActions.setUser(user);
   expect(action).toEqual({

src/commons/application/reducers/__tests__/SessionReducer.test.ts

@@ -63,7 +63,8 @@ test('SET_USER works correctly', () => {
         viewable: true,
         role: Role.Staff
       }
-    ]
+    ],
+    isPaused: false
   };
 
   const action = {

src/commons/application/types/SessionTypes.ts

@@ -21,6 +21,7 @@ export type SessionState = {
   readonly userId?: number;
   readonly name?: string;
   readonly courses: UserCourse[];
+  readonly isPaused?: boolean;
 
   // Course Registration
   readonly courseRegId?: number;
@@ -43,10 +44,13 @@ export type SessionState = {
   readonly enableContestLeaderboard?: boolean;
   readonly topLeaderboardDisplay?: number;
   readonly topContestLeaderboardDisplay?: number;
+  readonly enableExamMode?: boolean;
+  readonly resumeCode?: string;
   readonly sourceChapter?: Chapter;
   readonly sourceVariant?: Variant;
   readonly moduleHelpText?: string;
   readonly assetsPrefix?: string;
+  readonly isOfficialCourse?: boolean;
 
   readonly assessmentConfigurations?: AssessmentConfiguration[];
   readonly userCourseRegistrations?: AdminPanelCourseRegistration[];
@@ -88,6 +92,7 @@ export type User = {
   name: string;
   username: string;
   courses: UserCourse[];
+  isPaused: boolean;
 };
 
 export type CourseRegistration = {
@@ -113,10 +118,13 @@ export type CourseConfiguration = {
   enableContestLeaderboard: boolean;
   topLeaderboardDisplay: number;
   topContestLeaderboardDisplay: number;
+  enableExamMode: boolean;
+  resumeCode: string;
   sourceChapter: Chapter;
   sourceVariant: Variant;
   moduleHelpText: string;
   assetsPrefix: string;
+  isOfficialCourse: boolean;
 };
 
 export type AdminPanelCourseRegistration = {

src/commons/assessmentWorkspace/AssessmentWorkspace.tsx

@@ -65,6 +65,7 @@
 import SideContentAutograder from '../sideContent/content/SideContentAutograder';
 import SideContentContestLeaderboard from '../sideContent/content/SideContentContestLeaderboard';
 import SideContentContestVotingContainer from '../sideContent/content/SideContentContestVotingContainer';
+import SideContentDocumentation from '../sideContent/content/SideContentDocumentation';
 import SideContentToneMatrix from '../sideContent/content/SideContentToneMatrix';
 import { SideContentProps } from '../sideContent/SideContent';
 import { changeSideContentHeight } from '../sideContent/SideContentActions';
@@ -198,7 +199,7 @@
       dispatch(WorkspaceActions.updateEditorValue(workspaceLocation, 0, code));
       dispatch(LeaderboardActions.clearCode());
     }
   }, [dispatch]);
 
   useEffect(() => {
     if (assessmentOverview && assessmentOverview.maxTeamSize > 1) {
@@ -468,6 +469,7 @@
       assessmentOverview !== undefined ? assessmentOverview.maxTeamSize > 1 : false;
     const isContestVoting = question?.type === QuestionTypes.voting;
     const isPublished = assessmentOverview?.isPublished;
+    const isPrivate = assessmentOverview?.private ?? false;
     const handleContestEntryClick = (_submissionId: number, answer: string) => {
       // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode.
       handleEditorValueChange(0, answer);
@@ -631,6 +633,15 @@
       });
     }
 
+    if (isPrivate) {
+      tabs.push({
+        label: `Documentation`,
+        iconName: IconNames.BOOK,
+        body: <SideContentDocumentation />,
+        id: SideContentType.documentation
+      });
+    }
+
     const onChangeTabs = (
       newTabId: SideContentType,
       prevTabId: SideContentType,