disable moderated grading checkbox when graded submissions exist

When Anonymous Moderated Marking is enabled, the 'Moderated Grading'
checkbox on the assignment edit page will now be disabled if the
assignment has graded submissions.

closes GRADE-1183

Test Plan:
1. Enable Anonymous Moderated Marking.
2. Create an assignment.
3. Go to the assignment edit page and verify the 'Moderated Grading'
   checkbox is toggleable.
4. Submit to the assignment as a student.
5. Grade the student's submission as a teacher.
6. Go to the assignment edit page and verify the 'Moderated Grading'
   checkbox is not toggleable, and when you hover over the 'Moderated
   Grading' section a tooltip shows up saying that the setting cannot
   be changed because graded submissions exist.

Change-Id: Ie3b102cd20e2166a4236a6b202ac2d56169e79c5
Reviewed-on: https://gerrit.instructure.com/151495
Tested-by: Jenkins
Reviewed-by: Adrian Packel <apackel@instructure.com>
Reviewed-by: Jeremy Neander <jneander@instructure.com>
QA-Review: Adrian Packel <apackel@instructure.com>
Product-Review: Sidharth Oberoi <soberoi@instructure.com>

app/coffeescripts/models/Assignment.coffee

@@ -574,6 +574,7 @@ define [
       props =
         currentGraderCount: @get('grader_count')
         finalGraderID: @get('final_grader_id')
+        gradedSubmissionsExist: ENV.HAS_GRADED_SUBMISSIONS
         moderatedGradingEnabled: @moderatedGrading()
         availableModerators: ENV.AVAILABLE_MODERATORS
         maxGraderCount: ENV.MODERATED_GRADING_MAX_GRADER_COUNT

app/jsx/assignments/ModeratedGradingCheckbox.js

@@ -18,6 +18,7 @@
 
 import {bool, func} from 'prop-types'
 import React from 'react'
+import Tooltip from '@instructure/ui-core/lib/components/Tooltip'
 import I18n from 'i18n!assignments'
 
 export default function ModeratedGradingCheckbox(props) {
@@ -25,26 +26,46 @@ export default function ModeratedGradingCheckbox(props) {
     props.onChange(!props.checked)
   }
 
-  return (
-    <label className="ModeratedGrading__CheckboxLabel" htmlFor="assignment_moderated_grading">
+  const body = (
+    <label className="ModeratedGrading__CheckboxLabel"htmlFor="assignment_moderated_grading">
       <input type="hidden" name="moderated_grading" value={props.checked} />
+
       <input
+        aria-disabled={props.gradedSubmissionsExist}
         className="ModeratedGrading__Checkbox"
         checked={props.checked}
+        disabled={props.gradedSubmissionsExist}
         id="assignment_moderated_grading"
         name="moderated_grading"
         onChange={handleChange}
         type="checkbox"
       />
+
       <strong className="ModeratedGrading__CheckboxLabelText">{I18n.t('Moderated Grading')}</strong>
+
       <div className="ModeratedGrading__CheckboxDescription">
         {I18n.t('Allow moderator to review multiple independent grades for selected submissions')}
       </div>
     </label>
   )
+
+  if (props.gradedSubmissionsExist) {
+    return (
+      <Tooltip
+        on={['hover']}
+        tip={I18n.t('Moderated grading setting cannot be changed if graded submissions exist')}
+        variant="inverse"
+      >
+        {body}
+      </Tooltip>
+    )
+  }
+
+  return body
 }
 
 ModeratedGradingCheckbox.propTypes = {
   checked: bool.isRequired,
+  gradedSubmissionsExist: bool.isRequired,
   onChange: func.isRequired
 }

app/jsx/assignments/ModeratedGradingFormFieldGroup.js

@@ -29,6 +29,7 @@ export default class ModeratedGradingFormFieldGroup extends React.Component {
     availableModerators: arrayOf(shape({name: string.isRequired, id: string.isRequired})).isRequired,
     currentGraderCount: number,
     finalGraderID: string,
+    gradedSubmissionsExist: bool.isRequired,
     locale: string.isRequired,
     maxGraderCount: number.isRequired,
     moderatedGradingEnabled: bool.isRequired
@@ -59,6 +60,7 @@ export default class ModeratedGradingFormFieldGroup extends React.Component {
           <div className="border border-trbl border-round">
             <ModeratedGradingCheckbox
               checked={this.state.moderatedGradingChecked}
+              gradedSubmissionsExist={this.props.gradedSubmissionsExist}
               onChange={this.handleModeratedGradingChange}
             />
 

spec/coffeescripts/models/AssignmentSpec.js

@@ -1171,6 +1171,7 @@ QUnit.module('Assignment#renderModeratedGradingFormFieldGroup', (hooks) => {
     fakeENV.setup({
       ANONYMOUS_MODERATED_MARKING_ENABLED: false,
       AVAILABLE_MODERATORS: availableModerators,
+      HAS_GRADED_SUBMISSIONS: false,
       LOCALE: 'en',
       MODERATED_GRADING_MAX_GRADER_COUNT: 7
     })
@@ -1235,6 +1236,15 @@ QUnit.module('Assignment#renderModeratedGradingFormFieldGroup', (hooks) => {
     React.createElement.restore()
   })
 
+  test('passes HAS_GRADED_SUBMISSIONS in the ENV as a prop to the component', () => {
+    const assignment = new Assignment()
+    sinon.spy(React, 'createElement')
+    assignment.renderModeratedGradingFormFieldGroup()
+    const [,props] = React.createElement.getCall(0).args
+    strictEqual(props.gradedSubmissionsExist, ENV.HAS_GRADED_SUBMISSIONS)
+    React.createElement.restore()
+  })
+
   test('passes current grader count as a prop to the component', () => {
     const assignment = new Assignment()
     assignment.set('grader_count', 4)

spec/javascripts/jsx/assignments/ModeratedGradingCheckboxSpec.js

@@ -27,6 +27,7 @@ QUnit.module('ModeratedGradingCheckbox', hooks => {
   hooks.beforeEach(() => {
     props = {
       checked: false,
+      gradedSubmissionsExist: false,
       onChange: () => {}
     }
   })
@@ -55,6 +56,17 @@ QUnit.module('ModeratedGradingCheckbox', hooks => {
     strictEqual(checkbox().node.checked, true)
   })
 
+  test('enables the checkbox if no graded submissions exist', () => {
+    mountComponent()
+    strictEqual(checkbox().node.disabled, false)
+  })
+
+  test('disables the checkbox if graded submissions exist', () => {
+    props.gradedSubmissionsExist = true
+    mountComponent()
+    strictEqual(checkbox().node.disabled, true)
+  })
+
   test('calls onChange when checked', () => {
     props.onChange = sinon.stub()
     mountComponent()

spec/javascripts/jsx/assignments/ModeratedGradingFormFieldGroupSpec.js

@@ -28,6 +28,7 @@ QUnit.module('ModeratedGradingFormFieldGroup', hooks => {
     props = {
       availableModerators: [{name: 'John Doe', id: '923'}, {name: 'Jane Doe', id: '492'}],
       finalGraderID: undefined,
+      gradedSubmissionsExist: false,
       locale: 'en',
       maxGraderCount: 10,
       moderatedGradingEnabled: true