Add question number to ControlBar

src/components/Playground.tsx

@@ -80,6 +80,9 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
   public render() {
     const workspaceProps: WorkspaceProps = {
       controlBarProps: {
+        hasAssessment: false,
+        currentQuestion: 0,
+        assessmentLength: 0,
         externalLibraryName: this.props.externalLibraryName,
         handleChapterSelect: ({ chapter }: { chapter: number }, e: any) =>
           this.props.handleChapterSelect(chapter),
@@ -91,9 +94,6 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
         handleReplEval: this.props.handleReplEval,
         handleReplOutputClear: this.props.handleReplOutputClear,
         hasChapterSelect: true,
-        hasNextButton: false,
-        hasPreviousButton: false,
-        hasReturnButton: false,
         hasSaveButton: false,
         hasShareButton: true,
         isRunning: this.props.isRunning,

src/components/academy/grading/GradingWorkspace.tsx

@@ -213,15 +213,15 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
     const listingPath = `/academy/grading`
     const gradingWorkspacePath = listingPath + `/${this.props.submissionId}`
     return {
+      hasAssessment: true,
+      currentQuestion: questionId + 1,
+      assessmentLength: this.props.grading!.length,
       handleChapterSelect: this.props.handleChapterSelect,
       handleEditorEval: this.props.handleEditorEval,
       handleInterruptEval: this.props.handleInterruptEval,
       handleReplEval: this.props.handleReplEval,
       handleReplOutputClear: this.props.handleReplOutputClear,
       hasChapterSelect: false,
-      hasNextButton: questionId < this.props.grading!.length - 1,
-      hasPreviousButton: questionId > 0,
-      hasReturnButton: questionId === this.props.grading!.length - 1,
       hasSaveButton: false,
       hasShareButton: false,
       isRunning: this.props.isRunning,

src/components/assessment/AssessmentWorkspace.tsx

@@ -243,16 +243,16 @@ class AssessmentWorkspace extends React.Component<
     const listingPath = `/academy/${assessmentCategoryLink(this.props.assessment!.category)}`
     const assessmentWorkspacePath = listingPath + `/${this.props.assessment!.id.toString()}`
     return {
+      hasAssessment: true,
+      currentQuestion: questionId + 1,
+      assessmentLength: this.props.assessment!.questions.length,
       handleChapterSelect: this.props.handleChapterSelect,
       handleEditorEval: this.props.handleEditorEval,
       handleInterruptEval: this.props.handleInterruptEval,
       handleReplEval: this.props.handleReplEval,
       handleReplOutputClear: this.props.handleReplOutputClear,
       handleReplValueChange: this.props.handleReplValueChange,
       hasChapterSelect: false,
-      hasNextButton: questionId < this.props.assessment!.questions.length - 1,
-      hasPreviousButton: questionId > 0,
-      hasReturnButton: questionId === this.props.assessment!.questions.length - 1,
       hasSaveButton:
         !beforeNow(this.props.closeDate) &&
         this.props.assessment!.questions[questionId].type !== QuestionTypes.mcq,

src/components/commons/controlButton.tsx

@@ -21,10 +21,11 @@ export function controlButton(
   label: string,
   icon: IconName | null,
   onClick: (() => void) | null = null,
-  options: controlButtonOptionals = {}
+  options: controlButtonOptionals = {},
+  disabled: boolean = false
 ) {
   const opts: controlButtonOptionals = { ...defaultOptions, ...options }
-  const props: IButtonProps = {}
+  const props: IButtonProps = { disabled }
   props.fill = opts.fullWidth !== undefined && opts.fullWidth
   props.intent = opts.intent === undefined ? Intent.NONE : opts.intent
   props.minimal = opts.minimal !== undefined && opts.minimal

src/components/workspace/ControlBar.tsx

@@ -10,10 +10,10 @@ import { ExternalLibraryName } from '../assessment/assessmentShape'
 import { controlButton } from '../commons'
 
 export type ControlBarProps = {
+  hasAssessment: boolean
+  currentQuestion: number,
+  assessmentLength: number,
   hasChapterSelect: boolean
-  hasNextButton: boolean
-  hasPreviousButton: boolean
-  hasReturnButton: boolean
   hasSaveButton: boolean
   hasShareButton: boolean
   hasUnsavedChanges?: boolean
@@ -52,12 +52,12 @@ interface IExternal {
 
 class ControlBar extends React.PureComponent<ControlBarProps, {}> {
   public static defaultProps: Partial<ControlBarProps> = {
+    hasAssessment: false,
+    currentQuestion: 0,
+    assessmentLength: 0,
     hasChapterSelect: false,
-    hasNextButton: false,
-    hasPreviousButton: false,
     hasSaveButton: false,
     hasShareButton: true,
-    hasReturnButton: false,
     onClickNext: () => {},
     onClickPrevious: () => {},
     onClickSave: () => {}
@@ -137,21 +137,25 @@ class ControlBar extends React.PureComponent<ControlBarProps, {}> {
   }
 
   private flowControl() {
-    const previousButton = this.props.hasPreviousButton
+    const questionView = this.props.hasAssessment
+      ? controlButton(`Question ${this.props.currentQuestion} of ${this.props.assessmentLength}  `,
+        null, null, { }, true)
+      : undefined
+    const previousButton = this.hasPreviousButton()
       ? controlButton('Previous', IconNames.ARROW_LEFT, this.props.onClickPrevious)
       : undefined
-    const nextButton = this.props.hasNextButton
+    const nextButton = this.hasNextButton()
       ? controlButton('Next', IconNames.ARROW_RIGHT, this.props.onClickNext, { iconOnRight: true })
       : undefined
-    const returnButton = this.props.hasReturnButton
+    const returnButton = this.hasReturnButton()
       ? controlButton('Return to Academy', IconNames.ARROW_RIGHT, this.props.onClickReturn, {
           iconOnRight: true
         })
       : undefined
 
     return (
       <div className="ControlBar_flow pt-button-group">
-        {previousButton} {nextButton} {returnButton}
+        {previousButton} {questionView} {nextButton} {returnButton}
       </div>
     )
   }
@@ -174,6 +178,18 @@ class ControlBar extends React.PureComponent<ControlBarProps, {}> {
     this.shareInputElem.focus()
     this.shareInputElem.select()
   }
+
+  private hasNextButton(){
+    return this.props.hasAssessment && this.props.currentQuestion < this.props.assessmentLength;
+  }
+
+  private hasPreviousButton(){
+    return this.props.hasAssessment && this.props!.currentQuestion > 0;
+  }
+
+  private hasReturnButton() {
+    return this.props.hasAssessment &&  this.props.currentQuestion === this.props.assessmentLength;
+  }
 }
 
 function styliseChapter(chap: number) {