Add side content to view comments (#282)

* Add comments field

* Remove comments from IAssessment

* Add comments to mockAssessmentQuestions

* Add comments to type

* Update gradingShape

* Pass comments to tabs

* Format files

* Rename comments -> comment

* Fix rebase errors

* Add check for activeTab being out of bounds

* Add active button effect for active tab

* Use minimal prop instead of classname

* Remove outline using a class style

* Format file

* Add documentation for having at least 1 tab

Author: remo5000

src/components/academy/grading/gradingShape.ts

@@ -42,8 +42,12 @@ export type GradingQuestion = {
  * grading a submission. This means that
  * either of (library & solutionTemplate) xor (choices) must
  * be present, and either of (solution) xor (answer) must be present.
+ *
+ * @property comment This property is already present in GradingQuestion,
+ *   and thus does not need to be used here, and is set to null
  */
 interface IAnsweredQuestion extends IQuestion {
+  comment: null
   solution?: number
   answer: string | number | null
   solutionTemplate?: string

src/components/assessment/AssessmentWorkspace.tsx

@@ -207,10 +207,8 @@ class AssessmentWorkspace extends React.Component<
   private sideContentProps: (p: AssessmentWorkspaceProps, q: number) => SideContentProps = (
     props: AssessmentWorkspaceProps,
     questionId: number
-  ) => ({
-    activeTab: props.activeTab,
-    handleChangeActiveTab: props.handleChangeActiveTab,
-    tabs: [
+  ) => {
+    const tabs = [
       {
         label: `Task ${questionId}`,
         icon: IconNames.NINJA,
@@ -222,7 +220,20 @@ class AssessmentWorkspace extends React.Component<
         body: <Markdown content={props.assessment!.longSummary} />
       }
     ]
-  })
+    const comment = props.assessment!.questions[questionId].comment
+    if (comment !== null) {
+      tabs.push({
+        label: `Comments`,
+        icon: IconNames.CHAT,
+        body: <Markdown content={comment} />
+      })
+    }
+    return {
+      activeTab: props.activeTab,
+      handleChangeActiveTab: props.handleChangeActiveTab,
+      tabs
+    }
+  }
 
   /** Pre-condition: IAssessment has been loaded */
   private controlBarProps: (p: AssessmentWorkspaceProps, q: number) => ControlBarProps = (

src/components/assessment/assessmentShape.ts

@@ -65,6 +65,7 @@ export interface IMCQQuestion extends IQuestion {
 
 export interface IQuestion {
   answer: string | number | null
+  comment: string | null
   content: string
   id: number
   library: Library

src/components/workspace/side-content/index.tsx

@@ -1,6 +1,10 @@
 import { Button, Card, IconName, Tooltip } from '@blueprintjs/core'
 import * as React from 'react'
 
+/**
+ * @property tabs an Array of SideContentTabs,
+ *   which must be non-empty i.e contain at least one SideContentTab
+ */
 export type SideContentProps = {
   activeTab: number
   tabs: SideContentTab[]
@@ -15,11 +19,20 @@ export type SideContentTab = {
 
 class SideContent extends React.PureComponent<SideContentProps, {}> {
   public render() {
+    /**
+     * The check here prevents a runtime error when the activeTab is momentarily out of
+     * bounds of this.props.tabs length. It is set to 0 becuase of the asssumption that tabs
+     * is at least length 1 (@see SideContentProps)
+     */
+    const activeTab =
+      this.props.activeTab < 0 || this.props.activeTab >= this.props.tabs.length
+        ? 0
+        : this.props.activeTab
     return (
       <div className="side-content">
         <Card>
           {this.renderHeader()}
-          <div className="side-content-text">{this.props.tabs[this.props.activeTab].body}</div>
+          <div className="side-content-text">{this.props.tabs[activeTab].body}</div>
         </Card>
       </div>
     )
@@ -32,7 +45,13 @@ class SideContent extends React.PureComponent<SideContentProps, {}> {
       const click = (i: number) => () => this.props.handleChangeActiveTab(i)
       const buttons = this.props.tabs.map((tab, i) => (
         <Tooltip key={i} content={tab.label}>
-          <Button icon={tab.icon as IconName} className="pt-minimal" onClick={click(i)} />
+          <Button
+            className="side-content-header-button"
+            icon={tab.icon as IconName}
+            minimal={true}
+            onClick={click(i)}
+            active={i === this.props.activeTab}
+          />
         </Tooltip>
       ))
       return (

src/mocks/assessmentAPI.ts

@@ -172,13 +172,15 @@ This question has an id of \`0\`.
 What's your favourite dinner food?
 \`\`\`
 `,
+    comment: null,
     id: 0,
     library: mockSoundLibrary,
     solutionTemplate: '0th question mock solution template',
     type: 'programming'
   },
   {
     answer: null,
+    comment: '`Great Job` **young padawan**',
     content: 'Hello and welcome to this assessment! This is the 1st question.',
     id: 1,
     library: mock3DRuneLibrary,
@@ -187,6 +189,7 @@ What's your favourite dinner food?
   },
   {
     answer: 3,
+    comment: '## Money trees is the *perfect place for shade* and ``` thats just how i feel ``` ',
     content:
       'This is the 3rd question. Oddly enough, it is an ungraded MCQ question that uses the curves library! Option C has a null hint!',
     choices: [
@@ -214,6 +217,7 @@ What's your favourite dinner food?
   },
   {
     answer: 3,
+    comment: null,
     content:
       'This is the 4rth question. Oddly enough, it is a graded MCQ question that uses the curves library!',
     choices: [

src/mocks/gradingAPI.ts

@@ -69,6 +69,7 @@ Hello and welcome to this assessment! This is the *0th question*.
 >>> import this
 \`\`\`
 `,
+      comment: null,
       id: 0,
       library: mockLibrary,
       solutionTemplate: '0th question mock solution template',
@@ -84,6 +85,7 @@ Hello and welcome to this assessment! This is the *0th question*.
   {
     question: {
       answer: "This student's answer to the 1st question",
+      comment: null,
       content: 'Hello and welcome to this assessment! This is the 1st question.',
       id: 1,
       library: mockLibrary,
@@ -101,6 +103,7 @@ Hello and welcome to this assessment! This is the *0th question*.
     question: {
       // C is the answer
       answer: 3,
+      comment: null,
       solution: 2,
       content:
         'Hello and welcome to this assessment! This is the 2nd question. Oddly enough, it is an MCQ question!',

src/styles/_workspace.scss

@@ -120,6 +120,9 @@ $code-color-error: #ff4444;
     flex-wrap: wrap;
     justify-content: center;
     padding-bottom: 0.2rem;
+    .side-content-header-button:focus {
+      outline: 0;
+    }
   }
 
   .side-content-divider {