Distinguish between open and closed assessments (#181)

* Add a beforeNow helper function

Uses es6 Date

* Filter missions displayed by open

* Add closed assessment overviews

- Defined a DEFAULT_QUESTION_ID constant
- Moved the rendering of an individual card into a function

* Move background image back to html

* Refactor display method and add Collapse

* Add optional className for controlButton

* Use className for collapse buttons

* Add style to left-align buttons

* Format and update tests

* Add pretty representation for overview date

* Fix positioning of due date icon

* Format and update tests

* Add check for closed date, for save button

* Add mock assessment for closed mission

* Add test for closed assessment

* Format and add test snapshot

* Bump version 0.1.3 -> 0.1.4

package.json

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

src/components/assessment/AssessmentWorkspace.tsx

@@ -3,6 +3,7 @@ import { IconNames } from '@blueprintjs/icons'
 import * as React from 'react'
 
 import { InterpreterOutput } from '../../reducers/states'
+import { beforeNow } from '../../utils/dateHelpers'
 import { history } from '../../utils/history'
 import { assessmentCategoryLink } from '../../utils/paramParseHelpers'
 import Workspace, { WorkspaceProps } from '../workspace'
@@ -32,6 +33,7 @@ export type StateProps = {
 export type OwnProps = {
   assessmentId: number
   questionId: number
+  closeDate: string
 }
 
 export type DispatchProps = {
@@ -162,7 +164,7 @@ class AssessmentWorkspace extends React.Component<
       hasDoneButton: questionId === this.props.assessment!.questions.length - 1,
       hasNextButton: questionId < this.props.assessment!.questions.length - 1,
       hasPreviousButton: questionId > 0,
-      hasSaveButton: true,
+      hasSaveButton: !beforeNow(this.props.closeDate),
       hasShareButton: false,
       isRunning: this.props.isRunning,
       onClickDone: () => history.push(listingPath),

src/components/assessment/__tests__/AssessmentWorkspace.tsx

@@ -7,6 +7,7 @@ import AssessmentWorkspace, { AssessmentWorkspaceProps } from '../AssessmentWork
 const defaultProps: AssessmentWorkspaceProps = {
   activeTab: 0,
   assessmentId: 0,
+  closeDate: '2048-06-18T05:24:26.026Z',
   editorWidth: '50%',
   handleAssessmentFetch: (assessmentId: number) => {},
   handleChangeActiveTab: (activeTab: number) => {},
@@ -36,6 +37,11 @@ const mockProgrammingAssessmentWorkspaceProps: AssessmentWorkspaceProps = {
   questionId: 0
 }
 
+const mockClosedProgrammingAssessmentWorkspaceProps: AssessmentWorkspaceProps = {
+  ...mockProgrammingAssessmentWorkspaceProps,
+  closeDate: '2008-06-18T05:24:26.026Z'
+}
+
 const mockMcqAssessmentWorkspaceProps: AssessmentWorkspaceProps = {
   ...defaultProps,
   assessment: mockAssessments[0],
@@ -55,6 +61,12 @@ test('AssessmentWorkspace page with programming question renders correctly', ()
   expect(tree.debug()).toMatchSnapshot()
 })
 
+test('AssessmentWorkspace page with overdue assessment renders correctly', () => {
+  const app = <AssessmentWorkspace {...mockClosedProgrammingAssessmentWorkspaceProps} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})
+
 test('AssessmentWorkspace page with MCQ question renders correctly', () => {
   const app = <AssessmentWorkspace {...mockMcqAssessmentWorkspaceProps} />
   const tree = shallow(app)

src/components/assessment/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap

@@ -18,6 +18,22 @@ exports[`AssessmentWorkspace page with MCQ question renders correctly 1`] = `
 </div>"
 `;
 
+exports[`AssessmentWorkspace page with overdue assessment renders correctly 1`] = `
+"<div className=\\"AssessmentWorkspace pt-dark\\">
+  <Blueprint2.Dialog className=\\"assessment-briefing\\" isOpen={true} canOutsideClickClose={true}>
+    <Blueprint2.Card elevation={0} interactive={false}>
+      <Text>
+         
+        This is the mission briefing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra, sem scelerisque ultricies ullamcorper, sem nibh sollicitudin enim, at ultricies sem orci eget odio. Pellentesque varius et mauris quis vestibulum. Etiam in egestas dolor. Nunc consectetur, sapien sodales accumsan convallis, lectus mi tempus ipsum, vel ornare metus turpis sed justo. Vivamus at tellus sed ex convallis commodo at in lectus. Pellentesque pharetra pulvinar sapien pellentesque facilisis. Curabitur efficitur malesuada urna sed aliquam. Quisque massa metus, aliquam in sagittis non, cursus in sem. Morbi vel nunc at nunc pharetra lobortis. Aliquam feugiat ultricies ipsum vel sollicitudin. Vivamus nulla massa, hendrerit sit amet nibh quis, porttitor convallis nisi. 
+         
+      </Text>
+      <Blueprint2.Button className=\\"assessment-briefing-button\\" onClick={[Function: onClick]} text=\\"Continue\\" />
+    </Blueprint2.Card>
+  </Blueprint2.Dialog>
+  <Workspace controlBarProps={{...}} editorProps={{...}} editorWidth=\\"50%\\" handleEditorWidthChange={[Function: handleEditorWidthChange]} handleSideContentHeightChange={[Function: handleSideContentHeightChange]} mcq={{...}} sideContentHeight={[undefined]} sideContentProps={{...}} replProps={{...}} />
+</div>"
+`;
+
 exports[`AssessmentWorkspace page with programming question renders correctly 1`] = `
 "<div className=\\"AssessmentWorkspace pt-dark\\">
   <Blueprint2.Dialog className=\\"assessment-briefing\\" isOpen={true} canOutsideClickClose={true}>