Integrate 1920 Source Format, Add Prepend Editor, Add Autograding Tab (#527)

* Added new fields to IQuestion

* added autograder tab for assessmentWorkspace

* yarn format

* Merged 'master' from source-academy/cadet-frontend

* Resolved merge conflicts with Mission Control

* Separated each code segments with newlines

* Added read-only AceEditor for tasks with Prepend

Author: geshuming

README.md.orig

@@ -19,6 +19,7 @@ export const BEGIN_INTERRUPT_EXECUTION = 'BEGIN_INTERRUPT_EXECUTION';
 export const END_INTERRUPT_EXECUTION = 'END_INTERRUPT_EXECUTION';
 export const EVAL_INTERPRETER_ERROR = 'EVAL_INTERPRETER_ERROR';
 export const EVAL_INTERPRETER_SUCCESS = 'EVAL_INTERPRETER_SUCCESS';
+export const EVAL_TESTCASE_SUCCESS = 'EVAL_TESTCASE_SUCCESS';
 export const HANDLE_CONSOLE_LOG = 'HANDLE_CONSOLE_LOG';
 export const BEGIN_DEBUG_PAUSE = 'BEGIN_DEBUG_PAUSE';
 export const END_DEBUG_PAUSE = 'END_DEBUG_PAUSE';
@@ -31,6 +32,7 @@ export const BEGIN_CLEAR_CONTEXT = 'BEGIN_CLEAR_CONTEXT';
 export const BROWSE_REPL_HISTORY_DOWN = 'BROWSE_REPL_HISTORY_DOWN';
 export const BROWSE_REPL_HISTORY_UP = 'BROWSE_REPL_HISTORY_UP';
 export const CHANGE_ACTIVE_TAB = 'CHANGE_ACTIVE_TAB';
+export const CHANGE_EDITOR_HEIGHT = 'CHANGE_EDITOR_HEIGHT';
 export const CHANGE_EDITOR_WIDTH = 'CHANGE_EDITOR_WIDTH';
 export const CHANGE_PLAYGROUND_EXTERNAL = 'CHANGE_PLAYGROUND_EXTERNAL';
 export const CHANGE_SIDE_CONTENT_HEIGHT = 'CHANGE_SIDE_CONTENT_HEIGHT';
@@ -41,6 +43,7 @@ export const END_CLEAR_CONTEXT = 'END_CLEAR_CONTEXT';
 export const ENSURE_LIBRARIES_LOADED = 'ENSURE_LIBRARIES_LOADED';
 export const EVAL_EDITOR = 'EVAL_EDITOR';
 export const EVAL_REPL = 'EVAL_REPL';
+export const EVAL_TESTCASE = 'EVAL_TESTCASE';
 export const INVALID_EDITOR_SESSION_ID = 'INVALID_EDITOR_SESSION_ID';
 export const PLAYGROUND_EXTERNAL_SELECT = 'PLAYGROUND_EXTERNAL_SELECT ';
 export const RESET_WORKSPACE = 'RESET_WORKSPACE';

package-lock.json

@@ -13,6 +13,15 @@ export const evalInterpreterSuccess = (value: Value, workspaceLocation: Workspac
   payload: { type: 'result', value, workspaceLocation }
 });
 
+export const evalTestcaseSuccess = (
+  value: Value,
+  workspaceLocation: WorkspaceLocation,
+  index: number
+) => ({
+  type: actionTypes.EVAL_TESTCASE_SUCCESS,
+  payload: { type: 'result', value, workspaceLocation, index }
+});
+
 export const evalInterpreterError = (
   errors: SourceError[],
   workspaceLocation: WorkspaceLocation

src/actions/actionTypes.ts

@@ -51,6 +51,14 @@ export const changePlaygroundExternal: ActionCreator<actionTypes.IAction> = (
   payload: { newExternal }
 });
 
+export const changeEditorHeight: ActionCreator<actionTypes.IAction> = (
+  height: number,
+  workspaceLocation: WorkspaceLocation
+) => ({
+  type: actionTypes.CHANGE_EDITOR_HEIGHT,
+  payload: { height, workspaceLocation }
+});
+
 export const changeEditorWidth: ActionCreator<actionTypes.IAction> = (
   widthChange: string,
   workspaceLocation: WorkspaceLocation
@@ -161,6 +169,11 @@ export const evalRepl = (workspaceLocation: WorkspaceLocation) => ({
   payload: { workspaceLocation }
 });
 
+export const evalTestcase = (workspaceLocation: WorkspaceLocation, testcaseId: number) => ({
+  type: actionTypes.EVAL_TESTCASE,
+  payload: { workspaceLocation, testcaseId }
+});
+
 export const invalidEditorSessionId = () => ({
   type: actionTypes.INVALID_EDITOR_SESSION_ID
 });

src/actions/interpreter.ts

@@ -38,6 +38,7 @@ export interface IStateProps {
   activeTab: number;
   editorSessionId: string;
   editorValue: string;
+  editorHeight?: number;
   editorWidth: string;
   breakpoints: string[];
   highlightedLines: number[][];
@@ -60,6 +61,7 @@ export interface IDispatchProps {
   handleChangeActiveTab: (activeTab: number) => void;
   handleChapterSelect: (chapter: number) => void;
   handleEditorEval: () => void;
+  handleEditorHeightChange: (height: number) => void;
   handleEditorValueChange: (val: string) => void;
   handleEditorWidthChange: (widthChange: number) => void;
   handleEditorUpdateBreakpoints: (breakpoints: string[]) => void;
@@ -131,6 +133,8 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
         websocketStatus: this.props.websocketStatus
       },
       editorProps: {
+        editorPrepend: '',
+        editorPrependLines: 0,
         editorValue: this.props.editorValue,
         editorSessionId: this.props.editorSessionId,
         handleEditorEval: this.props.handleEditorEval,
@@ -141,7 +145,9 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
         handleEditorUpdateBreakpoints: this.props.handleEditorUpdateBreakpoints,
         handleSetWebsocketStatus: this.props.handleSetWebsocketStatus
       },
+      editorHeight: this.props.editorHeight,
       editorWidth: this.props.editorWidth,
+      handleEditorHeightChange: this.props.handleEditorHeightChange,
       handleEditorWidthChange: this.props.handleEditorWidthChange,
       handleSideContentHeightChange: this.props.handleSideContentHeightChange,
       replProps: {

src/actions/workspaces.ts

@@ -27,6 +27,7 @@ const baseProps = {
   handleChangeActiveTab: (n: number) => {},
   handleChapterSelect: (chapter: number) => {},
   handleEditorEval: () => {},
+  handleEditorHeightChange: (height: number) => {},
   handleEditorValueChange: () => {},
   handleEditorWidthChange: (widthChange: number) => {},
   handleEditorUpdateBreakpoints: (breakpoints: string[]) => {},

src/components/Playground.tsx

@@ -2,12 +2,12 @@
 
 exports[`Playground renders correctly 1`] = `
 "<HotKeys className=\\"Playground pt-dark\\" keyMap={{...}} handlers={{...}}>
-  <Workspace controlBarProps={{...}} editorProps={{...}} editorWidth=\\"50%\\" handleEditorWidthChange={[Function: handleEditorWidthChange]} handleSideContentHeightChange={[Function: handleSideContentHeightChange]} replProps={{...}} sideContentHeight={40} sideContentProps={{...}} />
+  <Workspace controlBarProps={{...}} editorProps={{...}} editorHeight={[undefined]} editorWidth=\\"50%\\" handleEditorHeightChange={[Function: handleEditorHeightChange]} handleEditorWidthChange={[Function: handleEditorWidthChange]} handleSideContentHeightChange={[Function: handleSideContentHeightChange]} replProps={{...}} sideContentHeight={40} sideContentProps={{...}} />
 </HotKeys>"
 `;
 
 exports[`Playground with link renders correctly 1`] = `
 "<HotKeys className=\\"Playground pt-dark\\" keyMap={{...}} handlers={{...}}>
-  <Workspace controlBarProps={{...}} editorProps={{...}} editorWidth=\\"50%\\" handleEditorWidthChange={[Function: handleEditorWidthChange]} handleSideContentHeightChange={[Function: handleSideContentHeightChange]} replProps={{...}} sideContentHeight={40} sideContentProps={{...}} />
+  <Workspace controlBarProps={{...}} editorProps={{...}} editorHeight={[undefined]} editorWidth=\\"50%\\" handleEditorHeightChange={[Function: handleEditorHeightChange]} handleEditorWidthChange={[Function: handleEditorWidthChange]} handleSideContentHeightChange={[Function: handleSideContentHeightChange]} replProps={{...}} sideContentHeight={40} sideContentProps={{...}} />
 </HotKeys>"
 `;

src/components/__tests__/Playground.tsx

@@ -9,6 +9,7 @@ import {
   IMCQQuestion,
   IProgrammingQuestion,
   IQuestion,
+  ITestcase,
   Library,
   QuestionTypes
 } from '../../assessment/assessmentShape';
@@ -23,7 +24,11 @@ export type GradingWorkspaceProps = DispatchProps & OwnProps & StateProps;
 export type StateProps = {
   activeTab: number;
   grading?: Grading;
+  editorPrepend: string | null;
   editorValue: string | null;
+  editorPostpend: string | null;
+  editorTestcases: ITestcase[] | null;
+  editorHeight?: number;
   editorWidth: string;
   breakpoints: string[];
   highlightedLines: number[][];
@@ -51,6 +56,7 @@ export type DispatchProps = {
   handleClearContext: (library: Library) => void;
   handleEditorEval: () => void;
   handleEditorValueChange: (val: string) => void;
+  handleEditorHeightChange: (height: number) => void;
   handleEditorWidthChange: (widthChange: number) => void;
   handleEditorUpdateBreakpoints: (breakpoints: string[]) => void;
   handleGradingFetch: (submissionId: number) => void;
@@ -113,6 +119,11 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
       editorProps:
         question.type === QuestionTypes.programming
           ? {
+              editorPrepend: this.props.editorPrepend!,
+              editorPrependLines:
+                this.props.editorPrepend === null || this.props.editorPrepend.length === 0
+                  ? 0
+                  : this.props.editorPrepend.split('\n').length,
               editorSessionId: '',
               editorValue: editorValue!,
               handleEditorEval: this.props.handleEditorEval,
@@ -123,7 +134,9 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
               isEditorAutorun: false
             }
           : undefined,
+      editorHeight: this.props.editorHeight,
       editorWidth: this.props.editorWidth,
+      handleEditorHeightChange: this.props.handleEditorHeightChange,
       handleEditorWidthChange: this.props.handleEditorWidthChange,
       handleSideContentHeightChange: this.props.handleSideContentHeightChange,
       mcqProps: {
@@ -173,9 +186,32 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
             ? ((question as IProgrammingQuestion).answer as string)
             : (question as IProgrammingQuestion).solutionTemplate
           : null;
+      const editorPrepend =
+        question.type === QuestionTypes.programming
+          ? (question as IProgrammingQuestion).prepend !== null
+            ? (question as IProgrammingQuestion).prepend
+            : ''
+          : '';
+      const editorPostpend =
+        question.type === QuestionTypes.programming
+          ? (question as IProgrammingQuestion).postpend !== null
+            ? (question as IProgrammingQuestion).postpend
+            : ''
+          : '';
+      const editorTestcases =
+        question.type === QuestionTypes.programming
+          ? (question as IProgrammingQuestion).testcases !== null
+            ? (question as IProgrammingQuestion).testcases
+            : []
+          : [];
       this.props.handleEditorUpdateBreakpoints([]);
       this.props.handleUpdateCurrentSubmissionId(submissionId, questionId);
-      this.props.handleResetWorkspace({ editorValue });
+      this.props.handleResetWorkspace({
+        editorPrepend,
+        editorValue,
+        editorPostpend,
+        editorTestcases
+      });
       this.props.handleClearContext(question.library);
       this.props.handleUpdateHasUnsavedChanges(false);
       if (editorValue) {