Implement XP (#334)

* Add XP to profile (duplicate) (#323)

* Add maxGrade and xp to state

* Pass props to Profile from State

* Remove IS_XP_IMPLEMENTED

* Unhide betcha

* Use xp and maxgrade for Profile

* Update tests and format

* Xp assessment (#320)

* Update IAssessmentOverview

Sticking to how the backend specifies the props, since it's already
camel case

* Remove maxGrade transform (IAssessmentOverview)

* Use maxGrade in assesment cards

* Update mock assessment data

* Add grade and xp into assessment overview

* Hide grade and xp for unopened assessments

* Show open date for unopened assessments

* Format and update tests

* Add XP for grading overview (#321)

* Update backend parsing

Fix lint error

* Modify grading shape

* Use new properties for grading overview table

* Update mock grading api

* Update table field

* Update text for editing grading

* Sort data by assessmentId, then submissionId

* Format file

* Improve UI/Functionality of Grading Table (#332)

* Improved Table UI and made functionality more intuitive

* Improved UI for grading table and made functionality more intutive

* Added comments and ran yarn format

* Ran Yarn format to fix all linting issues

* Formating Change and Fixing Conflicts

* Upgraded yarn version on TRAVIS

* Attempt to remove cache yarn

* Clean up formatting (again)

* Fix rebase error

* Used blueprintJS for Color instead of hex code

* Modified constant to original value

* Reenabled sorting for columns && refactored history to show popup over the grade/exp itself

* Update formatting - prettify

* Fix bug in filter

* Fix CSV export - show all required details

* update formatting

* Centralise and vertically align content in grading table

* Fixed formatting for scss file

* Fix bug in grade display

* Centralised filter input

* Add XP adjustment input to Grading Workspace (#335)

* Add parsing for new grading schema

* Add xp props to GradingQuestion

* Fix props in GradingWorkspace

* Update mock data

* Update mock data props

* Add props to saga

* Fix rebase errors

* Reorder props in type

* Add xp adjustment to action

* Rename dispatch function arguments

* Modify adjustment-related props

* Add xp OwnProps

Renamed a few usage of the props as well

* Add xp to validation and submit dispatch call

* Rename more props usage

* Duplicate some columns for XP

Most importantly, the numeric input

* Remove comment

* Pass in xp props to GradingEditor

* Add Final XP column

* Add xp and grade adjustment to mock backend

* Remove old TODO comment

* Use correct arguments for backend grading submit

* Use correct arguments for postGrading

* Format files

* Fix runtime errors

- input error when min === max
- error message
- hasUnsavedChanges returning true because of xp checking against grade

* Format file

* Revert travis to master's version

* Show programming solution (#336)

* Add additional types for solution prop

* Udpate mock data

* Use markdown to show solution

* Pass solution to GradingEditor

* Use code tag for solution instead

* Add parsing of solution in saga

* Add failsafes for solution value

and the maxGrade value as well. This is something that only happens in
staging, but could very well happen in prod as well.

* Use pre for solution

And fix a bug with xpAdjustment

* Add word wrapping to solution

* Fix wrapping for pre tag

It was not speicific to the pre tag

* Format files

Author: remo5000

package-lock.json

@@ -3,8 +3,6 @@ import { SourceError, Value } from 'js-slang/dist/types'
 import * as actionTypes from './actionTypes'
 import { WorkspaceLocation } from './workspaces'
 
-// TODO fix this immediately after location
-// is implemented completely
 export const handleConsoleLog = (logString: string, workspaceLocation: WorkspaceLocation) => ({
   type: actionTypes.HANDLE_CONSOLE_LOG,
   payload: { logString, workspaceLocation }

src/actions/interpreter.ts

@@ -76,14 +76,16 @@ export const submitGrading: ActionCreator<actionTypes.IAction> = (
   submissionId: number,
   questionId: number,
   comment: string,
-  adjustment: number = 0
+  gradeAdjustment: number = 0,
+  xpAdjustment: number = 0
 ) => ({
   type: actionTypes.SUBMIT_GRADING,
   payload: {
     submissionId,
     questionId,
     comment,
-    adjustment
+    gradeAdjustment,
+    xpAdjustment
   }
 })
 

src/actions/session.ts

@@ -32,7 +32,8 @@ const Login: React.SFC<LoginProps> = props => {
         <Card className="login-card pt-elevation-4">
           <div className="login-header">
             <h4>
-              <Icon icon={IconNames.LOCK} />LOGIN
+              <Icon icon={IconNames.LOCK} />
+              LOGIN
             </h4>
           </div>
           <div className="login-body">

src/components/Login.tsx

@@ -16,30 +16,41 @@ export type DispatchProps = {
     submissionId: number,
     questionId: number,
     comment: string,
-    adjustment: number | undefined
+    gradeAdjustment: number | undefined,
+    xpAdjustment: number | undefined
   ) => void
 }
 
 export type OwnProps = {
-  adjustment: number
   comment: string
-  initialGrade: number
-  maximumGrade: number
+  solution: number | string | null
   questionId: number
   submissionId: number
+  initialGrade: number
+  gradeAdjustment: number
+  maxGrade: number
+  initialXp: number
+  xpAdjustment: number
+  maxXp: number
 }
 
 /**
  * Keeps track of the current editor state,
  * as well as the grade adjustment in the numeric input.
  *
- * @prop adjustmentInput a potentially null string. this property being null
+ * @prop gradeAdjustmentInput a potentially null string which defines the
+ *   result for the number grade input. This property being null
+ *   will show the hint text in the NumericInput. This property is a string
+ *   so as to allow input such as the '-' character.
+ * @prop xpAdjustmentInput a potentially null string which defines the
+ *   result for the number grade input. This property being null
  *   will show the hint text in the NumericInput. This property is a string
  *   so as to allow input such as the '-' character.
  */
 type State = {
   mdeState: ReactMdeTypes.MdeState
-  adjustmentInput: string | null
+  gradeAdjustmentInput: string | null
+  xpAdjustmentInput: string | null
 }
 
 class GradingEditor extends React.Component<GradingEditorProps, State> {
@@ -51,7 +62,8 @@ class GradingEditor extends React.Component<GradingEditorProps, State> {
       mdeState: {
         markdown: props.comment
       },
-      adjustmentInput: props.adjustment.toString()
+      gradeAdjustmentInput: props.gradeAdjustment.toString(),
+      xpAdjustmentInput: props.xpAdjustment.toString()
     }
     /**
      * The markdown-to-html converter for the editor.
@@ -80,14 +92,25 @@ class GradingEditor extends React.Component<GradingEditorProps, State> {
             message={'You have changes that may not be saved. Are you sure you want to leave?'}
           />
         ) : null}
+        {this.props.solution !== null ? (
+          <div className="grading-editor-solution">
+            <pre> {this.props.solution.toString()} </pre>
+          </div>
+        ) : null}
         <div className="grading-editor-input-parent">
           <table>
             <tbody>
               <tr>
                 <th> {`Auto-grader's grade:`} </th>
                 <td>
                   <Text>
-                    {this.props.initialGrade} / {this.props.maximumGrade}
+                    {this.props.initialGrade} / {this.props.maxGrade}
+                  </Text>
+                </td>
+                <th> {`Auto-grader's XP:`} </th>
+                <td>
+                  <Text>
+                    {this.props.initialXp} / {this.props.maxXp}
                   </Text>
                 </td>
               </tr>
@@ -96,13 +119,34 @@ class GradingEditor extends React.Component<GradingEditorProps, State> {
                 <td>
                   <NumericInput
                     className="grading-adjustment-input"
-                    onValueChange={this.onAdjustmentInputChange}
-                    value={this.state.adjustmentInput || ''}
+                    onValueChange={this.onGradeAdjustmentInputChange}
+                    value={this.state.gradeAdjustmentInput || ''}
                     buttonPosition={Position.RIGHT}
                     fill={true}
                     placeholder="Adjust grades relatively here"
                     min={0 - this.props.initialGrade}
-                    max={this.props.maximumGrade - this.props.initialGrade}
+                    max={
+                      this.props.maxGrade > this.props.initialGrade
+                        ? this.props.maxGrade - this.props.initialGrade
+                        : undefined
+                    }
+                  />
+                </td>
+                <th> {`Your adjustment:`} </th>
+                <td>
+                  <NumericInput
+                    className="grading-adjustment-input"
+                    onValueChange={this.onXpAdjustmentInputChange}
+                    value={this.state.xpAdjustmentInput || ''}
+                    buttonPosition={Position.RIGHT}
+                    fill={true}
+                    placeholder="Adjust XP relatively here"
+                    min={0 - this.props.initialXp}
+                    max={
+                      this.props.maxXp > this.props.initialXp
+                        ? this.props.maxXp - this.props.initialXp
+                        : undefined
+                    }
                   />
                 </td>
               </tr>
@@ -111,8 +155,16 @@ class GradingEditor extends React.Component<GradingEditorProps, State> {
                 <td>
                   <Text>
                     {this.props.initialGrade +
-                      (stringParamToInt(this.state.adjustmentInput || undefined) || 0)}{' '}
-                    / {this.props.maximumGrade}
+                      (stringParamToInt(this.state.gradeAdjustmentInput || undefined) || 0)}{' '}
+                    / {this.props.maxGrade}
+                  </Text>
+                </td>
+                <th> {`Final XP:`} </th>
+                <td>
+                  <Text>
+                    {this.props.initialXp +
+                      (stringParamToInt(this.state.xpAdjustmentInput || undefined) || 0)}{' '}
+                    / {this.props.maxXp}
                   </Text>
                 </td>
               </tr>
@@ -146,32 +198,54 @@ class GradingEditor extends React.Component<GradingEditorProps, State> {
   }
 
   private onClickSaveButton = () => {
-    const adjustmentInput = stringParamToInt(this.state.adjustmentInput || undefined) || undefined
-    const grade = this.props.initialGrade + (adjustmentInput || 0)
-    if (grade < 0 || grade > this.props.maximumGrade) {
+    const gradeAdjustmentInput =
+      stringParamToInt(this.state.gradeAdjustmentInput || undefined) || undefined
+    const grade = this.props.initialGrade + (gradeAdjustmentInput || 0)
+    const xpAdjustmentInput =
+      stringParamToInt(this.state.xpAdjustmentInput || undefined) || undefined
+    const xp = this.props.initialXp + (xpAdjustmentInput || 0)
+    if (grade < 0 || grade > this.props.maxGrade) {
       showWarningMessage(
-        `Grade ${grade.toString()} is out of bounds. Maximum grade is ${this.props.maximumGrade.toString()}.`
+        `Grade ${grade.toString()} is out of bounds. Maximum grade is ${this.props.maxGrade.toString()}.`
+      )
+    } else if (xp < 0 || xp > this.props.maxXp) {
+      showWarningMessage(
+        `XP ${xp.toString()} is out of bounds. Maximum xp is ${this.props.maxXp.toString()}.`
       )
     } else {
       this.props.handleGradingSave(
         this.props.submissionId,
         this.props.questionId,
         this.state.mdeState.markdown!,
-        adjustmentInput
+        gradeAdjustmentInput,
+        xpAdjustmentInput
       )
     }
   }
 
   /**
-   * Handles changes in the NumericInput, and updates the local State.
+   * Handles changes in the grade NumericInput, and updates the local State.
+   *
+   * @param valueAsNumber an unused parameter, as we use strings for the input. @see State
+   * @param valueAsString a string that contains the input. To be parsed by another function.
+   */
+  private onGradeAdjustmentInputChange = (valueAsNumber: number, valueAsString: string | null) => {
+    this.setState({
+      ...this.state,
+      gradeAdjustmentInput: valueAsString
+    })
+  }
+
+  /**
+   * Handles changes in the XP NumericInput, and updates the local State.
    *
    * @param valueAsNumber an unused parameter, as we use strings for the input. @see State
    * @param valueAsString a string that contains the input. To be parsed by another function.
    */
-  private onAdjustmentInputChange = (valueAsNumber: number, valueAsString: string | null) => {
+  private onXpAdjustmentInputChange = (valueAsNumber: number, valueAsString: string | null) => {
     this.setState({
       ...this.state,
-      adjustmentInput: valueAsString
+      xpAdjustmentInput: valueAsString
     })
   }
 
@@ -183,10 +257,12 @@ class GradingEditor extends React.Component<GradingEditorProps, State> {
   }
 
   private hasUnsavedChanges = () => {
-    const adjustmentInput = stringParamToInt(this.state.adjustmentInput || undefined)
+    const gradeAdjustmentInput = stringParamToInt(this.state.gradeAdjustmentInput || undefined)
+    const xpAdjustmentInput = stringParamToInt(this.state.xpAdjustmentInput || undefined)
     return (
       this.props.comment !== this.state.mdeState.markdown ||
-      this.props.adjustment !== adjustmentInput
+      this.props.gradeAdjustment !== gradeAdjustmentInput ||
+      this.props.xpAdjustment !== xpAdjustmentInput
     )
   }
 

src/components/academy/grading/GradingEditor.tsx

@@ -0,0 +1,81 @@
+import { Popover, PopoverInteractionKind, Position } from '@blueprintjs/core'
+
+import * as React from 'react'
+
+import { GradingOverview } from './gradingShape'
+
+type GradingHistoryProps = {
+  data: GradingOverview
+  exp: boolean
+  grade: boolean
+}
+
+/**
+ * Used to render the marking history in the table that displays GradingOverviews.
+ * This is a fully fledged component (not SFC) by specification in
+ * ag-grid.
+ *
+ * See {@link https://www.ag-grid.com/example-react-dynamic}
+ */
+class GradingHistory extends React.Component<GradingHistoryProps, {}> {
+  constructor(props: GradingHistoryProps) {
+    super(props)
+  }
+
+  public render() {
+    const popoverInfo = () => (
+      <div className="col-xs-12" style={{ padding: 10 }}>
+        {(this.props.grade && (
+          <div>
+            <p>Initial Grade: {this.props.data.initialGrade}</p>
+            <p>Grade Adjustments: {this.props.data.gradeAdjustment}</p>
+          </div>
+        )) ||
+          (this.props.exp && (
+            <div>
+              <p>Initial XP: {this.props.data.initialXp}</p>
+              <p>XP Adjustments: {this.props.data.xpAdjustment}</p>
+            </div>
+          ))}
+      </div>
+    )
+
+    /** Component to render in table - marks */
+    const GradingMarks = () => {
+      if (this.props.data.maxGrade !== 0) {
+        return (
+          <div>
+            {`${this.props.data.currentGrade}`} / {`${this.props.data.maxGrade}`}
+          </div>
+        )
+      } else {
+        return <div>N/A</div>
+      }
+    }
+
+    /** Component to render in table - XP */
+    const GradingExp = () => {
+      if (this.props.data.currentXp && this.props.data.maxXp) {
+        return (
+          <div>
+            {`${this.props.data.currentXp}`} / {`${this.props.data.maxXp}`}
+          </div>
+        )
+      } else {
+        return <div>No Exp</div>
+      }
+    }
+
+    return (
+      <Popover
+        content={popoverInfo()}
+        position={Position.LEFT}
+        interactionKind={PopoverInteractionKind.HOVER}
+      >
+        {(this.props.exp && <GradingExp />) || (this.props.grade && <GradingMarks />)}
+      </Popover>
+    )
+  }
+}
+
+export default GradingHistory

src/components/academy/grading/GradingHistory.tsx

@@ -1,4 +1,7 @@
+import { Icon } from '@blueprintjs/core'
+import { IconNames } from '@blueprintjs/icons'
 import * as React from 'react'
+
 import { NavLink } from 'react-router-dom'
 
 import { GradingOverview } from './gradingShape'
@@ -21,8 +24,12 @@ class GradingNavLink extends React.Component<GradingNavLinkProps, {}> {
 
   public render() {
     return (
-      <NavLink to={`/academy/grading/${this.props.data.submissionId}`} activeClassName="pt-active">
-        {'Add comments'}
+      <NavLink
+        to={`/academy/grading/${this.props.data.submissionId}`}
+        activeClassName="pt-active"
+        target="_blank"
+      >
+        <Icon className="grade-edit-icon" iconSize={16} icon={IconNames.ANNOTATION} />
       </NavLink>
     )
   }

src/components/academy/grading/GradingNavLink.tsx

@@ -184,12 +184,16 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
         /* Render an editor with the xp given to the current question. */
         body: (
           <GradingEditor
-            adjustment={props.grading![questionId].grade.adjustment}
             comment={props.grading![questionId].grade.comment}
-            initialGrade={props.grading![questionId].grade.grade}
-            maximumGrade={props.grading![questionId].maximumGrade}
+            solution={props.grading![questionId].question.solution}
             questionId={props.grading![questionId].question.id}
             submissionId={props.submissionId}
+            initialGrade={props.grading![questionId].grade.grade}
+            gradeAdjustment={props.grading![questionId].grade.gradeAdjustment}
+            maxGrade={props.grading![questionId].maxGrade}
+            initialXp={props.grading![questionId].grade.xp}
+            xpAdjustment={props.grading![questionId].grade.xpAdjustment}
+            maxXp={props.grading![questionId].maxXp}
           />
         )
       },