Mission editing slang (#512)

* Removed previous button on first question, added divider

* Yarn format

* Changeded help description

* fix import for firefox

* max width for globals

* symbols aligned

* increase abstraction

removed numberRange from textArea
Reduced save frequency of solutionTemplate

* manage questions give warning

* UI change for deployment tab

* fixed maxGrade and maxXP calculation

* added local/global switch

* adjust mcq options

* split question template tab

added suggested answer editing

* swap answer and solutionTemplate

internal change

* add reading

* add grading deployment

* clone question shift question added

* fixed symbol formating

* changed manage questions ui

* yarn format

* added more overview options

* add editing persist

* Update ManageQuestionTab.tsx

* small updates

editor value now saved

* temp remove editor functionalites

* yarn format

Author: gerhean

src/components/assessment/assessmentShape.ts

@@ -82,6 +82,7 @@ export interface IMCQQuestion extends IQuestion {
 
 export interface IQuestion {
   answer: string | number | null;
+  editorValue?: string | null;
   comment: string | null;
   content: string;
   id: number;

src/components/incubator/EditingWorkspace.tsx

@@ -214,14 +214,15 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
             null,
             () => {
               const assessment = retrieveLocalAssessment()!;
-              this.handleRefreshLibrary();
               this.setState({
                 assessment,
                 hasUnsavedChanges: false,
                 showResetOverlay: false,
                 originalMaxGrade: this.getMaxMarks('maxGrade'),
                 originalMaxXp: this.getMaxMarks('maxXp')
               });
+              this.handleRefreshLibrary();
+              this.resetEditorValue();
             },
             { minimal: false, intent: Intent.DANGER }
           )}
@@ -248,24 +249,16 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
       this.props.storedAssessmentId !== assessmentId ||
       this.props.storedQuestionId !== questionId
     ) {
-      const question = this.state.assessment!.questions[questionId];
-      const editorValue =
-        question.type === QuestionTypes.programming
-          ? (question as IProgrammingQuestion).solutionTemplate || ''
-          : null;
+      this.resetEditorValue(false);
       this.props.handleUpdateCurrentAssessmentId(assessmentId, questionId);
-      this.handleRefreshLibrary();
       this.props.handleUpdateHasUnsavedChanges(false);
-      if (editorValue && !this.state.editorPersist) {
-        this.props.handleResetWorkspace({ editorValue });
-        this.props.handleEditorValueChange(editorValue);
-      }
       if (this.state.hasUnsavedChanges) {
         this.setState({
           assessment: retrieveLocalAssessment(),
           hasUnsavedChanges: false
         });
       }
+      this.handleRefreshLibrary();
     }
   }
 
@@ -291,22 +284,32 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
     this.props.handleClearContext(library);
   };
 
-  private resetEditorValue = () => {
-    if (!this.state.editorPersist) {
+  private resetEditorValue = (checkPersist: boolean = true) => {
+    if (checkPersist || !this.state.editorPersist) {
       const question: IQuestion = this.state.assessment!.questions[this.formatedQuestionId()];
-      const editorValue =
-        question.type === QuestionTypes.programming
-          ? ((question as IProgrammingQuestion).solutionTemplate as string)
-          : '//If you see this, this is a bug. Please report bug.';
+      let editorValue: string;
+      if (question.type === QuestionTypes.programming) {
+        if (question.editorValue) {
+          editorValue = question.editorValue;
+        } else {
+          editorValue = (question as IProgrammingQuestion).solutionTemplate as string;
+        }
+      } else {
+        editorValue = '//If you see this, this is a bug. Please report bug.';
+      }
+      this.props.handleResetWorkspace({ editorValue });
       this.props.handleEditorValueChange(editorValue);
     }
   };
 
   private handleSave = () => {
+    const assessment = this.state.assessment!;
+    assessment.questions[this.formatedQuestionId()].editorValue = this.props.editorValue;
     this.setState({
+      assessment,
       hasUnsavedChanges: false
     });
-    storeLocalAssessment(this.state.assessment!);
+    storeLocalAssessment(assessment);
     // this.handleRefreshLibrary();
     this.handleSaveGradeAndXp();
   };
@@ -371,11 +374,11 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
     });
   };
 
-  private toggleEditorPersist = () => {
-    this.setState({
-      editorPersist: !this.state.editorPersist
-    });
-  };
+  // private toggleEditorPersist = () => {
+  //   this.setState({
+  //     editorPersist: !this.state.editorPersist
+  //   });
+  // };
 
   /** Pre-condition: IAssessment has been loaded */
   private sideContentProps: (p: AssessmentWorkspaceProps, q: number) => SideContentProps = (
@@ -561,9 +564,9 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
       questionProgress: [questionId + 1, this.state.assessment!.questions.length],
       sourceChapter: this.state.assessment!.questions[questionId].library.chapter,
       editingMode: this.state.editingMode,
-      toggleEditMode: this.toggleEditingMode,
-      isEditorPersist: this.state.editorPersist,
-      handleToggleEditorPersist: this.toggleEditorPersist
+      toggleEditMode: this.toggleEditingMode
+      // isEditorPersist: this.state.editorPersist,
+      // handleToggleEditorPersist: this.toggleEditorPersist
     };
   };
 }

src/components/incubator/editingWorkspaceSideContent/ManageQuestionTab.tsx

@@ -87,21 +87,6 @@ export class ManageQuestionTab extends React.Component<IProps, IState> {
           IconNames.CONFIRM,
           this.confirmSave(this.makeQuestion(mcqTemplate, index))
         )}
-        <br />
-        {index > 0
-          ? controlButton(
-              'Shift Question Left',
-              IconNames.CARET_LEFT,
-              this.confirmSave(this.shiftQuestion(-1))
-            )
-          : undefined}
-        {index < this.props.assessment.questions.length - 1
-          ? controlButton(
-              'Shift Question Right',
-              IconNames.CARET_RIGHT,
-              this.confirmSave(this.shiftQuestion(1))
-            )
-          : undefined}
       </div>
     );
   };

src/components/workspace/ControlBar.tsx

@@ -147,7 +147,7 @@ class ControlBar extends React.PureComponent<ControlBarProps, {}> {
         ? controlButton('Reset', IconNames.REPEAT, this.props.onClickReset)
         : undefined;
     const editorPersistSwitch =
-      this.props.handleToggleEditorPersist !== null
+      this.props.handleToggleEditorPersist !== undefined
         ? controlButton(
             'Editor Persistence ' + (this.props.isEditorPersist ? 'Enabled' : 'Disabled'),
             this.props.isEditorPersist ? IconNames.TICK : IconNames.CROSS,
@@ -205,7 +205,11 @@ class ControlBar extends React.PureComponent<ControlBarProps, {}> {
             ' editing mode.'
           }
         >
-          {controlButton('Switch editing mode', IconNames.REFRESH, this.props.toggleEditMode)}
+          {controlButton(
+            this.props.editingMode + ' editing mode',
+            IconNames.REFRESH,
+            this.props.toggleEditMode
+          )}
         </Tooltip>
       ) : (
         undefined