Comments feature for grading (#789)

* Added comments feature for grading

* Comments field added to GradingResult, below Grade and XP

* Comments editor added to GradingEditor, using react-mde Markdown editor

* react-mde updated to latest version

* Optional 'comments' field added to the relevant types

* Redux actions updated to handle 'comments' field

* Test comments added to the mock assessments and gradings

* Updated tests to test for new 'comments' field

* Refactor of 'Markdown' component to pass down more props

* CSS styles for elements in GradingResult and GradingEditor updated

* Added grading drafts feature

* Implemented draft saving and loading mechanism using local storage

* New buttons for 'Save Draft' and 'Load Draft'

* Old 'Save' functionality replaced with 'Submit and Continue'

* Unique logic for each button to determine applied CSS styles

* Modified CSS styles for editor interface

* Fixed issue where submitting would raise a 'You have unsaved changes' dialog box

* Confirmation box appears when loading draft will overwrite unsaved changes

* Minor fixes to CSS and code

* Fix for "<td> cannot appear as a child of <tbody>" warning

* Fix grading editor checking for grade and XP boundaries on every state change

* Tweaked CSS to clean up grey lines on grading editor interface

* Remove drafts feature

* 'Save Draft' and 'Load Draft' replaced with 'Save Changes' and 'Discard Changes'

* Styles for new buttons updated

* 'Submit and Continue' renamed to 'Save and Continue'

* New Redux Action to support 'Save and Continue'

* Updated CSS stylesheet for grading editor

* Added tests for 'Save and Continue'

Author: alcen

package-lock.json

@@ -62,7 +62,7 @@
     "react-dom": "^16.8.6",
     "react-dom-factories": "^1.0.2",
     "react-hotkeys": "^1.1.4",
-    "react-mde": "^5.6.0",
+    "react-mde": "^7.6.2",
     "react-redux": "^5.1.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",

package.json

@@ -18,6 +18,7 @@ import {
   submitAnswer,
   submitAssessment,
   submitGrading,
+  submitGradingAndContinue,
   unsubmitSubmission,
   updateAssessment,
   updateAssessmentOverviews,
@@ -195,7 +196,25 @@ test('submitGrading generates correct action object with default values', () =>
       submissionId,
       questionId,
       gradeAdjustment: 0,
-      xpAdjustment: 0
+      xpAdjustment: 0,
+      comments: undefined
+    }
+  });
+});
+
+test('submitGradingAndContinue generates correct action object with default values', () => {
+  const submissionId = 8;
+  const questionId = 2;
+
+  const action = submitGradingAndContinue(submissionId, questionId);
+  expect(action).toEqual({
+    type: actionTypes.SUBMIT_GRADING_AND_CONTINUE,
+    payload: {
+      submissionId,
+      questionId,
+      gradeAdjustment: 0,
+      xpAdjustment: 0,
+      comments: undefined
     }
   });
 });
@@ -205,14 +224,41 @@ test('submitGrading generates correct action object', () => {
   const questionId = 3;
   const gradeAdjustment = 10;
   const xpAdjustment = 100;
-  const action = submitGrading(submissionId, questionId, gradeAdjustment, xpAdjustment);
+  const comments = 'my comment';
+  const action = submitGrading(submissionId, questionId, gradeAdjustment, xpAdjustment, comments);
   expect(action).toEqual({
     type: actionTypes.SUBMIT_GRADING,
     payload: {
       submissionId,
       questionId,
       gradeAdjustment,
-      xpAdjustment
+      xpAdjustment,
+      comments
+    }
+  });
+});
+
+test('submitGradingAndContinue generates correct action object', () => {
+  const submissionId = 4;
+  const questionId = 7;
+  const gradeAdjustment = 90;
+  const xpAdjustment = 55;
+  const comments = 'another comment';
+  const action = submitGradingAndContinue(
+    submissionId,
+    questionId,
+    gradeAdjustment,
+    xpAdjustment,
+    comments
+  );
+  expect(action).toEqual({
+    type: actionTypes.SUBMIT_GRADING_AND_CONTINUE,
+    payload: {
+      submissionId,
+      questionId,
+      gradeAdjustment,
+      xpAdjustment,
+      comments
     }
   });
 });
@@ -329,7 +375,8 @@ test('updateGrading generates correct action object', () => {
         grade: 10,
         gradeAdjustment: 0,
         xp: 100,
-        xpAdjustment: 0
+        xpAdjustment: 0,
+        comments: 'Well done.'
       }
     }
   ];

src/actions/__tests__/session.ts

@@ -99,6 +99,7 @@ export const SET_USER = 'SET_USER';
 export const SUBMIT_ANSWER = 'SUBMIT_ANSWER';
 export const SUBMIT_ASSESSMENT = 'SUBMIT_ASSESSMENT';
 export const SUBMIT_GRADING = 'SUBMIT_GRADING';
+export const SUBMIT_GRADING_AND_CONTINUE = 'SUBMIT_GRADING_AND_CONTINUE';
 export const UNSUBMIT_SUBMISSION = 'UNSUBMIT_SUBMISSION';
 export const UPDATE_HISTORY_HELPERS = 'UPDATE_HISTORY_HELPERS';
 export const UPDATE_ASSESSMENT_OVERVIEWS = 'UPDATE_ASSESSMENT_OVERVIEWS';

src/actions/actionTypes.ts

@@ -85,14 +85,33 @@ export const submitGrading: ActionCreator<actionTypes.IAction> = (
   submissionId: number,
   questionId: number,
   gradeAdjustment: number = 0,
-  xpAdjustment: number = 0
+  xpAdjustment: number = 0,
+  comments?: string
 ) => ({
   type: actionTypes.SUBMIT_GRADING,
   payload: {
     submissionId,
     questionId,
     gradeAdjustment,
-    xpAdjustment
+    xpAdjustment,
+    comments
+  }
+});
+
+export const submitGradingAndContinue: ActionCreator<actionTypes.IAction> = (
+  submissionId: number,
+  questionId: number,
+  gradeAdjustment: number = 0,
+  xpAdjustment: number = 0,
+  comments?: string
+) => ({
+  type: actionTypes.SUBMIT_GRADING_AND_CONTINUE,
+  payload: {
+    submissionId,
+    questionId,
+    gradeAdjustment,
+    xpAdjustment,
+    comments
   }
 });