From b01ac3623fa2a6e98a917b0664568ff8b4e8aaba Mon Sep 17 00:00:00 2001
From: evykassirer <evy.kassirer@gmail.com>
Date: Sun, 8 Jan 2023 22:06:16 -0800
Subject: [PATCH] upload: Remove and reduce timeouts for closing upload bar.

This timeout was introduced in this commit: 02c322398507a0ec475163175e3574ed3bee04de

The UI should close immediately when the user clicks cancel,
and the rest of the canceling code can run behind the scenes.

We want to keep a short timeout for upload completion
so that the user sees the 100% complete upload bar.
---
 frontend_tests/node_tests/upload.js |  3 ---
 static/js/upload.js                 | 19 ++++++++++++-------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend_tests/node_tests/upload.js b/frontend_tests/node_tests/upload.js
index d8756d15f8..9f22bf523b 100644
--- a/frontend_tests/node_tests/upload.js
+++ b/frontend_tests/node_tests/upload.js
@@ -277,9 +277,6 @@ test("upload_files", ({override_rewire}) => {
     upload.upload_files(uppy, config, files);
     assert.equal(add_file_counter, 1);
 
-    set_global("setTimeout", (func) => {
-        func();
-    });
     hide_upload_status_called = false;
     uppy_cancel_all_called = false;
     let compose_ui_replace_syntax_called = false;
diff --git a/static/js/upload.js b/static/js/upload.js
index 74d90fadae..74529252d6 100644
--- a/static/js/upload.js
+++ b/static/js/upload.js
@@ -141,9 +141,7 @@ export function upload_files(uppy, config, files) {
         compose_ui.autosize_textarea(get_item("textarea", config));
         uppy.cancelAll();
         get_item("textarea", config).trigger("focus");
-        setTimeout(() => {
-            hide_upload_status(config);
-        }, 500);
+        hide_upload_status(config);
     });
 
     for (const file of files) {
@@ -204,9 +202,14 @@ export function setup_upload(config) {
         },
     });
 
-    uppy.use(ProgressBar, {
-        target: get_item("send_status_identifier", config),
-        hideAfterFinish: false,
+    uppy.on("progress", (progress) => {
+        // When upload is complete, it resets to 0, but we want to see it at 100%.
+        if (progress === 0) {
+            return;
+        }
+        $(`${get_item("send_status_identifier", config)} .moving_bar`).css({
+            width: `${progress}%`,
+        });
     });
 
     $("body").on("change", get_item("file_input_identifier", config), (event) => {
@@ -279,9 +282,11 @@ export function setup_upload(config) {
 
         const has_errors = get_item("send_status", config).hasClass("alert-error");
         if (!uploads_in_progress && !has_errors) {
+            // Hide upload status for 100ms after the 1s transition to 100%
+            // so that the user can see the progress bar at 100%.
             setTimeout(() => {
                 hide_upload_status(config);
-            }, 500);
+            }, 1100);
         }
     });