fix: Disable file buttons when actions in progress

In the student view "Your Response" section,
there were several race conditions and issues relating to file uploads:

- Selecting the file input while multiple file uploads are in progress
  results in broken uploaded files and inconsistent UI.
- A file can be deleted after clicking Submit,
  while the submission is still processing.
- Clicking "Upload files" again after successfully uploading files,
  but before selecting more files,
  results in an attempt to upload the same files again.

On a high speed network connection,
the race condition issues are not very noticeable,
but on a slower connection,
they are easy to trigger as there is more time
in the UI while processing is happening in the backend.

These changes fix the above issues by ensuring that the buttons
and other input fields relating to file uploads
are disabled while actions are in progress
(uploading, deleting, submitting).

Private-ref: https://tasks.opencraft.com/browse/BB-9938

Author: samuelallan72

openassessment/__init__.py

@@ -2,4 +2,4 @@
 Initialization Information for Open Assessment Module
 """
 
-__version__ = '6.16.4'
+__version__ = '6.16.5'

openassessment/xblock/static/dist/manifest.json

@@ -4,18 +4,18 @@
   "openassessment-editor-textarea.js.map": "/openassessment-editor-textarea.cbb31e4372be87d437fb.js.map",
   "openassessment-editor-tinymce.js": "/openassessment-editor-tinymce.2a1e66e98a2a1132f633.js",
   "openassessment-editor-tinymce.js.map": "/openassessment-editor-tinymce.2a1e66e98a2a1132f633.js.map",
-  "openassessment-lms.css": "/openassessment-lms.42bdf01af5d117224bc9.css",
-  "openassessment-lms.js": "/openassessment-lms.42bdf01af5d117224bc9.js",
-  "openassessment-lms.css.map": "/openassessment-lms.42bdf01af5d117224bc9.css.map",
-  "openassessment-lms.js.map": "/openassessment-lms.42bdf01af5d117224bc9.js.map",
-  "openassessment-ltr.css": "/openassessment-ltr.0c6318822d5661f0f9ea.css",
-  "openassessment-ltr.js": "/openassessment-ltr.0c6318822d5661f0f9ea.js",
-  "openassessment-ltr.css.map": "/openassessment-ltr.0c6318822d5661f0f9ea.css.map",
-  "openassessment-ltr.js.map": "/openassessment-ltr.0c6318822d5661f0f9ea.js.map",
-  "openassessment-rtl.css": "/openassessment-rtl.c938e1614108d8feb891.css",
-  "openassessment-rtl.js": "/openassessment-rtl.c938e1614108d8feb891.js",
-  "openassessment-rtl.css.map": "/openassessment-rtl.c938e1614108d8feb891.css.map",
-  "openassessment-rtl.js.map": "/openassessment-rtl.c938e1614108d8feb891.js.map",
+  "openassessment-lms.css": "/openassessment-lms.3b32189187e8e2d3e0c3.css",
+  "openassessment-lms.js": "/openassessment-lms.3b32189187e8e2d3e0c3.js",
+  "openassessment-lms.css.map": "/openassessment-lms.3b32189187e8e2d3e0c3.css.map",
+  "openassessment-lms.js.map": "/openassessment-lms.3b32189187e8e2d3e0c3.js.map",
+  "openassessment-ltr.css": "/openassessment-ltr.97990de9668aaa4cd1d5.css",
+  "openassessment-ltr.js": "/openassessment-ltr.97990de9668aaa4cd1d5.js",
+  "openassessment-ltr.css.map": "/openassessment-ltr.97990de9668aaa4cd1d5.css.map",
+  "openassessment-ltr.js.map": "/openassessment-ltr.97990de9668aaa4cd1d5.js.map",
+  "openassessment-rtl.css": "/openassessment-rtl.19576ab9f81f644cb7fd.css",
+  "openassessment-rtl.js": "/openassessment-rtl.19576ab9f81f644cb7fd.js",
+  "openassessment-rtl.css.map": "/openassessment-rtl.19576ab9f81f644cb7fd.css.map",
+  "openassessment-rtl.js.map": "/openassessment-rtl.19576ab9f81f644cb7fd.js.map",
   "openassessment-studio.js": "/openassessment-studio.b58bb4e55f63dadac6de.js",
   "openassessment-studio.js.map": "/openassessment-studio.b58bb4e55f63dadac6de.js.map",
   "fallback-default.png": "/4620b30a966533ace489dcc7afb151b9.png",

openassessment/xblock/static/dist/openassessment-lms.3b32189187e8e2d3e0c3.css

@@ -159,22 +159,26 @@ export class ResponseView {
 
       const uploadButton = sel.find('.file__upload');
       const spinner = sel.find('.fa-spinner');
+
       // Install a click handler for the save button
       uploadButton.click(
         (eventObject) => {
           // Override default form submission
           eventObject.preventDefault();
           $('.submission__answer__display__file', view.element).removeClass('is--hidden');
-          uploadButton.prop('disabled', true);
+          view.disableFields();
           spinner.removeClass('is--hidden');
           if (view.hasAllUploadFiles()) {
             const promise = view.uploadFiles();
             promise.then(() => {
-              uploadButton.prop('disabled', false);
+              view.enableFields();
               spinner.addClass('is--hidden');
+              // Reset the internal files state once upload is complete,
+              // to avoid the files being processed again if the user clicks upload again.
+              this.files = null;
             });
           } else {
-            uploadButton.prop('disabled', false);
+            view.enableFields();
             spinner.addClass('is--hidden');
           }
         },
@@ -307,6 +311,32 @@ export class ResponseView {
       return this.baseView.buttonEnabled('.step--response__submit', enabled);
     }
 
+    /**
+     * Disable the fields to avoid any changes while an action is processing.
+     * For example, use this when beginning a file upload, or submitting the response.
+     */
+    disableFields() {
+      this.submitEnabled(false);
+
+      const responseEl = $('.step--response', this.element);
+      responseEl.find('.file__upload').prop('disabled', true);
+      responseEl.find('.delete__uploaded__file').prop('disabled', true);
+      responseEl.find('.submission__answer__upload').prop('disabled', true);
+    }
+
+    /**
+     * Enable the fields to allow changes again.
+     * Use this to revert the changes made by `disableFields()`.
+     */
+    enableFields() {
+      this.submitEnabled(true);
+
+      const responseEl = $('.step--response', this.element);
+      responseEl.find('.file__upload').prop('disabled', false);
+      responseEl.find('.delete__uploaded__file').prop('disabled', false);
+      responseEl.find('.submission__answer__upload').prop('disabled', false);
+    }
+
     /**
      Enable/disable the preview button.
      Check whether the preview button is enabled.
@@ -523,8 +553,9 @@ export class ResponseView {
     handleSubmitClicked() {
       if (!this.isValidForSubmit()) { return; }
 
-      // Immediately disable the submit button to prevent multiple submission
-      this.submitEnabled(false);
+      // Immediately disable the submit button to prevent multiple submission,
+      // and other form fields to avoid race conditions if anything changes.
+      this.disableFields();
 
       const view = this;
       const title = gettext('Confirm Submit Response');
@@ -547,7 +578,7 @@ export class ResponseView {
         title,
         msg,
         () => view.submit(),
-        () => view.submitEnabled(true),
+        () => view.enableFields(),
       );
     }
 
@@ -568,8 +599,8 @@ export class ResponseView {
             // If there is an error message, display it
             if (errMsg) { this.baseView.toggleActionError('submit', errMsg); }
 
-            // Re-enable the submit button so the user can retry
-            this.submitEnabled(true);
+            // Re-enable the submit button and the rest of the form so the user can retry
+            this.enableFields();
           }
         });
     }
@@ -840,20 +871,23 @@ export class ResponseView {
     */
    handleDeleteFileClick(target) {
      const view = this;
+     this.disableFields();
      const filenum = $(target).attr('filenum');
      this.confirmationDialog.confirm(
        gettext('Confirm Delete Uploaded File'),
        this.getConfirmRemoveUploadedFileMessage(filenum),
-       () => view.removeUploadedFile(filenum),
-       () => {},
+       () => view.removeUploadedFile(filenum).always(() => view.enableFields()),
+       () => view.enableFields(),
      );
    }
 
    /**
      Remove a previously uploaded file.
+
+     Returns a jQuery promise that resolves once the process is complete.
      */
    removeUploadedFile(filenum) {
-     this.server.removeUploadedFile(filenum).done(() => {
+     return this.server.removeUploadedFile(filenum).done(() => {
        const sel = $('.step--response', this.element);
        const block = sel.find(`.submission__answer__file__block__${filenum}`);
        block.html('');