Fix workspace bugs (#173)

* Fix #164

* Fix #153

* Fix #167

Adding this infinity prop is part of an update we do not have yet (ace
editor) fxmontigny/ng2-ace-editor#11

Used a fix for react I found here: securingsincity/react-ace#29

* Fix #172, #171, #168 using PureComponent

- Call scroll inside ReplInput instead of Repl
- Change components to PureComponents (thereby changing the update
condition)
- Remove throttle for onChange

Lack of unneccasry updates and proper scrolling mechanism fixed #168.

* Format files

* Update tests

* Move overflow to side-content-text

Also fixed a minor issue with padding disappearing, using fit-content.

* Remove text justification for markdown editor

I don't think markdown is justified, and so we shouln't be displaying it
in such a way either.

* Fix always-on scrollbars on X11

* Add overflow-y for card

* Fix side content header height

Also moved the css into the appropriate nested location.

* Format scss

* Bump version number 0.1.2 -> 0.1.3

Author: remo5000

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "cadet-frontend",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "scripts-info": {
     "format": "Format source code",
     "start": "Start the Webpack development server",

src/components/assessment/AssessmentWorkspace.tsx

@@ -84,9 +84,14 @@ class AssessmentWorkspace extends React.Component<
         </Card>
       </Dialog>
     )
-    const question: IQuestion = this.props.assessment.questions[this.props.questionId]
+    /* If questionId is out of bounds, set it to the max. */
+    const questionId =
+      this.props.questionId >= this.props.assessment.questions.length
+        ? this.props.assessment.questions.length - 1
+        : this.props.questionId
+    const question: IQuestion = this.props.assessment.questions[questionId]
     const workspaceProps: WorkspaceProps = {
-      controlBarProps: this.controlBarProps(this.props),
+      controlBarProps: this.controlBarProps(this.props, questionId),
       editorProps:
         question.type === QuestionTypes.programming
           ? {
@@ -103,7 +108,7 @@ class AssessmentWorkspace extends React.Component<
       handleSideContentHeightChange: this.props.handleSideContentHeightChange,
       mcq: question as IMCQQuestion,
       sideContentHeight: this.props.sideContentHeight,
-      sideContentProps: this.sideContentProps(this.props),
+      sideContentProps: this.sideContentProps(this.props, questionId),
       replProps: {
         output: this.props.output,
         replValue: this.props.replValue,
@@ -120,16 +125,17 @@ class AssessmentWorkspace extends React.Component<
   }
 
   /** Pre-condition: IAssessment has been loaded */
-  private sideContentProps: (p: AssessmentWorkspaceProps) => SideContentProps = (
-    props: AssessmentWorkspaceProps
+  private sideContentProps: (p: AssessmentWorkspaceProps, q: number) => SideContentProps = (
+    props: AssessmentWorkspaceProps,
+    questionId: number
   ) => ({
     activeTab: props.activeTab,
     handleChangeActiveTab: props.handleChangeActiveTab,
     tabs: [
       {
-        label: `Task ${props.questionId}`,
+        label: `Task ${questionId}`,
         icon: IconNames.NINJA,
-        body: <Text> {props.assessment!.questions[props.questionId].content} </Text>
+        body: <Text> {props.assessment!.questions[questionId].content} </Text>
       },
       {
         label: `${props.assessment!.category} Briefing`,
@@ -140,8 +146,9 @@ class AssessmentWorkspace extends React.Component<
   })
 
   /** Pre-condition: IAssessment has been loaded */
-  private controlBarProps: (p: AssessmentWorkspaceProps) => ControlBarProps = (
-    props: AssessmentWorkspaceProps
+  private controlBarProps: (p: AssessmentWorkspaceProps, q: number) => ControlBarProps = (
+    props: AssessmentWorkspaceProps,
+    questionId: number
   ) => {
     const listingPath = `/academy/${assessmentCategoryLink(this.props.assessment!.category)}`
     const assessmentWorkspacePath = listingPath + `/${this.props.assessment!.id.toString()}`
@@ -152,16 +159,15 @@ class AssessmentWorkspace extends React.Component<
       handleReplEval: this.props.handleReplEval,
       handleReplOutputClear: this.props.handleReplOutputClear,
       hasChapterSelect: false,
-      hasNextButton: this.props.questionId < this.props.assessment!.questions.length - 1,
-      hasPreviousButton: this.props.questionId > 0,
+      hasNextButton: questionId < this.props.assessment!.questions.length - 1,
+      hasPreviousButton: questionId > 0,
       hasSaveButton: true,
       hasShareButton: false,
-      hasSubmitButton: this.props.questionId === this.props.assessment!.questions.length - 1,
+      hasSubmitButton: questionId === this.props.assessment!.questions.length - 1,
       isRunning: this.props.isRunning,
-      onClickNext: () =>
-        history.push(assessmentWorkspacePath + `/${(this.props.questionId + 1).toString()}`),
+      onClickNext: () => history.push(assessmentWorkspacePath + `/${(questionId + 1).toString()}`),
       onClickPrevious: () =>
-        history.push(assessmentWorkspacePath + `/${(this.props.questionId - 1).toString()}`),
+        history.push(assessmentWorkspacePath + `/${(questionId - 1).toString()}`),
       onClickSubmit: () => history.push(listingPath),
       sourceChapter: 2 // TODO dynamic library changing
     }

src/components/workspace/ControlBar.tsx

@@ -34,7 +34,7 @@ interface IChapter {
   displayName: string
 }
 
-class ControlBar extends React.Component<ControlBarProps, {}> {
+class ControlBar extends React.PureComponent<ControlBarProps, {}> {
   public static defaultProps: Partial<ControlBarProps> = {
     hasChapterSelect: false,
     hasNextButton: false,

src/components/workspace/Editor.tsx

@@ -18,18 +18,13 @@ export interface IEditorProps {
   handleEditorValueChange: (newCode: string) => void
 }
 
-class Editor extends React.Component<IEditorProps, {}> {
+class Editor extends React.PureComponent<IEditorProps, {}> {
   public render() {
     return (
       <HotKeys className="Editor" handlers={handlers}>
         <div className="row editor-react-ace">
           <AceEditor
             className="react-ace"
-            mode="javascript"
-            theme="cobalt"
-            value={this.props.editorValue}
-            onChange={this.props.handleEditorValueChange}
-            height="100%"
             commands={[
               {
                 name: 'evaluate',
@@ -40,9 +35,17 @@ class Editor extends React.Component<IEditorProps, {}> {
                 exec: this.props.handleEditorEval
               }
             ]}
-            width="100%"
+            editorProps={{
+              $blockScrolling: Infinity
+            }}
             fontSize={14}
+            height="100%"
             highlightActiveLine={false}
+            mode="javascript"
+            onChange={this.props.handleEditorValueChange}
+            theme="cobalt"
+            value={this.props.editorValue}
+            width="100%"
           />
         </div>
       </HotKeys>

src/components/workspace/MCQChooser.tsx

@@ -8,12 +8,12 @@ export interface IMCQChooserProps {
   mcqSubmit?: (choiceId: number) => void
 }
 
-class MCQChooser extends React.Component<IMCQChooserProps, {}> {
+class MCQChooser extends React.PureComponent<IMCQChooserProps, {}> {
   public render() {
     const mockMcqSubmit = (i: number) => () => {}
     const options = this.props.mcq.choices.map((choice, i) => (
-      <Button className="mcq-option col-xs-6" onClick={mockMcqSubmit(i)}>
-        <Tooltip key={i} content={choice.hint}>
+      <Button key={i} className="mcq-option col-xs-6" onClick={mockMcqSubmit(i)}>
+        <Tooltip content={choice.hint}>
           <Text className="Text"> {choice.content} </Text>
         </Tooltip>
       </Button>

src/components/workspace/Repl.tsx

@@ -17,25 +17,7 @@ export interface IOutputProps {
   output: InterpreterOutput
 }
 
-class Repl extends React.Component<IReplProps, {}> {
-  private replBottom: HTMLDivElement
-
-  public componentDidUpdate() {
-    if (this.replBottom.clientWidth >= window.innerWidth - 50) {
-      /* There is a bug where
-       *   if the workspace has been resized via re-resizable such that the
-       *   has disappeared off the screen, width 63
-       * then
-       *   calling scrollIntoView would cause the Repl to suddenly take up 100%
-       *   of the screen width. This pushes the editor off-screen so that the
-       *   user can no longer resize the workspace at all
-       * Fix: the if condition is true when the Repl has dissapeared off-screen.
-       *   (-15 to account for the scrollbar */
-    } else {
-      this.replBottom.scrollIntoView()
-    }
-  }
-
+class Repl extends React.PureComponent<IReplProps, {}> {
   public render() {
     const cards = this.props.output.map((slice, index) => <Output output={slice} key={index} />)
     const inputProps: IReplInputProps = this.props as IReplInputProps
@@ -46,7 +28,6 @@ class Repl extends React.Component<IReplProps, {}> {
           <HotKeys className="repl-input-parent row pt-card pt-elevation-0" handlers={handlers}>
             <ReplInput {...inputProps} />
           </HotKeys>
-          <div ref={e => (this.replBottom = e!)} />
         </div>
       </div>
     )

src/components/workspace/ReplInput.tsx

@@ -10,33 +10,57 @@ export interface IReplInputProps {
   handleReplEval: () => void
 }
 
-class ReplInput extends React.Component<IReplInputProps, {}> {
+class ReplInput extends React.PureComponent<IReplInputProps, {}> {
+  private replInputBottom: HTMLDivElement
+
+  public componentDidUpdate() {
+    if (this.replInputBottom.clientWidth >= window.innerWidth - 50) {
+      /* There is a bug where
+       *   if the workspace has been resized via re-resizable such that the
+       *   has disappeared off the screen, width 63
+       * then
+       *   calling scrollIntoView would cause the Repl to suddenly take up 100%
+       *   of the screen width. This pushes the editor off-screen so that the
+       *   user can no longer resize the workspace at all
+       * Fix: the if condition is true when the Repl has dissapeared off-screen.
+       *   (-15 to account for the scrollbar */
+    } else {
+      this.replInputBottom.scrollIntoView()
+    }
+  }
+
   public render() {
     return (
-      <AceEditor
-        className="repl-react-ace react-ace"
-        mode="javascript"
-        theme="cobalt"
-        height="1px"
-        width="100%"
-        value={this.props.replValue}
-        onChange={this.props.handleReplValueChange}
-        commands={[
-          {
-            name: 'evaluate',
-            bindKey: {
-              win: 'Shift-Enter',
-              mac: 'Shift-Enter'
-            },
-            exec: this.props.handleReplEval
-          }
-        ]}
-        minLines={1}
-        maxLines={20}
-        fontSize={14}
-        highlightActiveLine={false}
-        showGutter={false}
-      />
+      <>
+        <AceEditor
+          className="repl-react-ace react-ace"
+          mode="javascript"
+          theme="cobalt"
+          height="1px"
+          width="100%"
+          value={this.props.replValue}
+          onChange={this.props.handleReplValueChange}
+          commands={[
+            {
+              name: 'evaluate',
+              bindKey: {
+                win: 'Shift-Enter',
+                mac: 'Shift-Enter'
+              },
+              exec: () => {
+                this.replInputBottom.scrollIntoView()
+                this.props.handleReplEval()
+              }
+            }
+          ]}
+          minLines={1}
+          maxLines={20}
+          fontSize={14}
+          highlightActiveLine={false}
+          showGutter={false}
+        />
+        <div className="replInputBottom" ref={e => (this.replInputBottom = e!)} />
+      </>
     )
   }
 }

src/components/workspace/__tests__/__snapshots__/Editor.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Editor renders correctly 1`] = `
 "<HotKeys className=\\"Editor\\" handlers={{...}}>
   <div className=\\"row editor-react-ace\\">
-    <ReactAce className=\\"react-ace\\" mode=\\"javascript\\" theme=\\"cobalt\\" value=\\"\\" onChange={[Function: handleEditorValueChange]} height=\\"100%\\" commands={{...}} width=\\"100%\\" fontSize={14} highlightActiveLine={false} name=\\"brace-editor\\" focus={false} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} showPrintMargin={true} tabSize={4} cursorStart={1} editorProps={{...}} style={{...}} scrollMargin={{...}} setOptions={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} />
+    <ReactAce className=\\"react-ace\\" commands={{...}} editorProps={{...}} fontSize={14} height=\\"100%\\" highlightActiveLine={false} mode=\\"javascript\\" onChange={[Function: handleEditorValueChange]} theme=\\"cobalt\\" value=\\"\\" width=\\"100%\\" name=\\"brace-editor\\" focus={false} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} showPrintMargin={true} tabSize={4} cursorStart={1} style={{...}} scrollMargin={{...}} setOptions={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} />
   </div>
 </HotKeys>"
 `;

src/components/workspace/__tests__/__snapshots__/Repl.tsx.snap

@@ -47,7 +47,6 @@ exports[`Repl renders correctly 1`] = `
     <HotKeys className=\\"repl-input-parent row pt-card pt-elevation-0\\" handlers={{...}}>
       <ReplInput output={{...}} replValue=\\"\\" handleReplValueChange={[Function: handleReplValueChange]} handleReplEval={[Function: handleReplEval]} handleReplOutputClear={[Function: handleReplOutputClear]} />
     </HotKeys>
-    <div />
   </div>
 </div>"
 `;

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

@@ -13,7 +13,7 @@ export type SideContentTab = {
   body: JSX.Element
 }
 
-class SideContent extends React.Component<SideContentProps, {}> {
+class SideContent extends React.PureComponent<SideContentProps, {}> {
   public render() {
     return (
       <div className="side-content">