Ungraded questions prompts for save (#2884)

* save changes button and save and continue button will highlight for ungraded

* added prompt to remind users to save changes

* set it so an empty user will grade the qn

* changed prompt message in GradingEditor to be the same

* changed checkIsNewQuestion to look at gradedAt rather than graderName

Author: thortol

src/commons/mocks/BackendMocks.ts

@@ -321,7 +321,8 @@ export function* mockBackendSaga(): SagaIterator {
         gradingQuestion.grade = {
           xpAdjustment,
           xp: gradingQuestion.grade.xp,
-          comments
+          comments,
+          gradedAt: new Date().toISOString()
         };
       }
       return gradingQuestion;

src/commons/sagas/BackendSaga.ts

@@ -685,7 +685,8 @@ function* BackendSaga(): SagaIterator {
         gradingQuestion.grade = {
           xpAdjustment,
           xp: gradingQuestion.grade.xp,
-          comments
+          comments,
+          gradedAt: new Date().toISOString()
         };
       }
       return gradingQuestion;

src/pages/academy/grading/subcomponents/GradingEditor.tsx

@@ -204,6 +204,10 @@ const GradingEditor: React.FC<Props> = props => {
     return props.xpAdjustment !== newXpAdjustmentInput || props.comments !== editorValue;
   };
 
+  const checkIsNewQuestion = () => {
+    return props.gradedAt === undefined;
+  };
+
   const generateMarkdownPreview = (markdown: string) =>
     Promise.resolve(
       <Markdown
@@ -217,9 +221,10 @@ const GradingEditor: React.FC<Props> = props => {
 
   // Render
   const hasUnsavedChanges = checkHasUnsavedChanges();
+  const isNewQuestion = checkIsNewQuestion();
   const saveButtonOpts = {
-    intent: hasUnsavedChanges ? Intent.WARNING : Intent.NONE,
-    minimal: !hasUnsavedChanges,
+    intent: hasUnsavedChanges || isNewQuestion ? Intent.WARNING : Intent.NONE,
+    minimal: !hasUnsavedChanges && !isNewQuestion,
     className: gradingEditorButtonClass
   };
   const discardButtonOpts = {
@@ -228,8 +233,8 @@ const GradingEditor: React.FC<Props> = props => {
     className: gradingEditorButtonClass
   };
   const saveAndContinueButtonOpts = {
-    intent: hasUnsavedChanges ? Intent.SUCCESS : Intent.NONE,
-    minimal: !hasUnsavedChanges,
+    intent: hasUnsavedChanges || isNewQuestion ? Intent.SUCCESS : Intent.NONE,
+    minimal: !hasUnsavedChanges && !isNewQuestion,
     className: gradingEditorButtonClass
   };
   const onTabChange = (tab: ReactMdeProps['selectedTab']) => setSelectedTab(tab);
@@ -243,7 +248,7 @@ const GradingEditor: React.FC<Props> = props => {
   return (
     <div className="GradingEditor">
       <Prompt
-        when={!currentlySaving && hasUnsavedChanges}
+        when={!currentlySaving && (hasUnsavedChanges || isNewQuestion)}
         message={'You have unsaved changes. Are you sure you want to leave?'}
       />
 

src/pages/academy/grading/subcomponents/GradingWorkspace.tsx

@@ -324,7 +324,7 @@ const GradingWorkspace: React.FC<Props> = props => {
                 : undefined
             }
             gradedAt={
-              grading!.answers[questionId].grade.grader
+              grading!.answers[questionId].grade.gradedAt
                 ? grading!.answers[questionId].grade.gradedAt!
                 : undefined
             }