Disable rubric form upon save in speedgrader

Fixes: GRADE-436

Test plan:
- Given an assignment with a rubric
- Given speed grader
- Given "View Rubic" clicked
- When "Save" is clicked
- Then the form is disabled
- Then it is not possible to click Save again while the request is
processing

Change-Id: Iaa572d3bfb43ed3038edd067661885583b1615c0
Reviewed-on: https://gerrit.instructure.com/132193
Tested-by: Jenkins
Reviewed-by: Shahbaz Javeed <sjaveed@instructure.com>
Reviewed-by: Jeremy Neander <jneander@instructure.com>
QA-Review: Anju Reddy <areddy@instructure.com>
Product-Review: Matt Goodwin <mattg@instructure.com>

public/javascripts/speed_grader.js

@@ -63,6 +63,8 @@ import 'jquery.elastic';
 import 'jquery-getscrollbarwidth';
 import './vendor/jquery.scrollTo';
 import './vendor/ui.selectmenu';
+import './jquery.disableWhileLoading';
+import 'compiled/jquery/fixDialogButtons';
 
 // PRIVATE VARIABLES AND FUNCTIONS
 // all of the $ variables here are to speed up access to dom nodes,
@@ -134,6 +136,7 @@ var $window = $(window),
     $assignment_submission_vericite_report_url = $('#assignment_submission_vericite_report_url'),
     $assignment_submission_resubmit_to_vericite_url = $('#assignment_submission_resubmit_to_vericite_url'),
     $rubric_full = $('#rubric_full'),
+    $rubric_holder = $('#rubric_holder'),
     $rubric_full_resizer_handle = $('#rubric_full_resizer_handle'),
     $no_annotation_warning = $('#no_annotation_warning'),
     $comment_submitted = $('#comment_submitted'),
@@ -774,9 +777,9 @@ function initRubricStuff(){
     data['graded_anonymously'] = utils.shouldHideStudentNames();
     var url = $(".update_rubric_assessment_url").attr('href');
     var method = "POST";
-    EG.toggleFullRubric();
-    $(".rubric_summary").loadingImage();
-    $.ajaxJSON(url, method, data, function(response) {
+    EG.toggleFullRubric('close');
+
+    var promise = $.ajaxJSON(url, method, data, function(response) {
       var found = false;
       if(response && response.rubric_association) {
         rubricAssessment.updateRubricAssociation($rubric, response.rubric_association);
@@ -805,12 +808,17 @@ function initRubricStuff(){
         EG.updateSelectMenuStatus(student);
       });
 
-      $(".rubric_summary").loadingImage('remove');
       EG.showGrade();
       EG.showDiscussion();
       EG.showRubric();
       EG.updateStatsInHeader();
     });
+
+    $rubric_holder.disableWhileLoading(promise, {
+      buttons: {
+        '.save_rubric_button': 'Saving...'
+      }
+    });
   });
 }
 

spec/javascripts/jsx/speed_graderSpec.js

@@ -1049,6 +1049,37 @@ test('shows an error when the gateway times out', function () {
   strictEqual($('#speed_grader_timeout_alert').text(), message);
 });
 
+QUnit.module('SpeedGrader - clicking save rubric button', function(hooks) {
+  let disableWhileLoadingStub;
+
+  hooks.beforeEach(function () {
+    sinon.stub($, 'ajaxJSON');
+    disableWhileLoadingStub = sinon.stub($.fn, 'disableWhileLoading');
+    fakeENV.setup({ RUBRIC_ASSESSMENT: {} });
+
+    const fixtures = `
+      <div id="rubric_holder">
+        <button class="save_rubric_button"></button>
+      </div>
+    `;
+
+    $('#fixtures').html(fixtures);
+  });
+
+  hooks.afterEach(function() {
+    $('#fixtures').empty();
+    fakeENV.teardown();
+    disableWhileLoadingStub.restore();
+    $.ajaxJSON.restore();
+  });
+
+  test('disables the button', function () {
+    SpeedGrader.EG.domReady();
+    $('.save_rubric_button').trigger('click');
+    strictEqual(disableWhileLoadingStub.callCount, 1);
+  });
+});
+
 QUnit.module('SpeedGrader - no gateway timeout', {
   setup () {
     fakeENV.setup();