From 1f0b26790b114935956aa59f13dd86fea072a664 Mon Sep 17 00:00:00 2001 From: ahmed-mgd Date: Tue, 19 Nov 2024 13:51:36 -0500 Subject: [PATCH 1/6] Add table loading spinner --- apps/dashboard/app/views/files/_files_table.html.erb | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/dashboard/app/views/files/_files_table.html.erb b/apps/dashboard/app/views/files/_files_table.html.erb index 80b8a56150..267127768b 100755 --- a/apps/dashboard/app/views/files/_files_table.html.erb +++ b/apps/dashboard/app/views/files/_files_table.html.erb @@ -24,6 +24,13 @@ + + + From 2e2f011e995cf4826e08e301b15c25a9d70f4e79 Mon Sep 17 00:00:00 2001 From: ahmed-mgd Date: Tue, 19 Nov 2024 13:56:58 -0500 Subject: [PATCH 2/6] Implement busy signal on table reload --- apps/dashboard/app/javascript/files/data_table.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/dashboard/app/javascript/files/data_table.js b/apps/dashboard/app/javascript/files/data_table.js index 209abd6261..427504feb0 100644 --- a/apps/dashboard/app/javascript/files/data_table.js +++ b/apps/dashboard/app/javascript/files/data_table.js @@ -10,6 +10,7 @@ const EVENTNAME = { }; const CONTENTID = '#directory-contents'; +const BUSYID = '#tloading-spinner'; let table = null; @@ -269,6 +270,9 @@ class DataTable { async reloadTable(url) { var request_url = url || history.state.currentDirectoryUrl; + $(CONTENTID).hide(); + $(BUSYID).show(); + try { const response = await fetch(request_url, { headers: { 'Accept': 'application/json' }, cache: 'no-store' }); const data = await this.dataFromJsonResponse(response); @@ -297,7 +301,11 @@ class DataTable { table.getTable().row(this.closest('tr')).deselect(); } } - }) + }); + + $(BUSYID).hide(); + $(CONTENTID).show(); + return result; } catch (e) { const eventData = { From 40fd19dbc6c2d7192093ceed71ba83c5709ea7fb Mon Sep 17 00:00:00 2001 From: ahmed-mgd Date: Thu, 21 Nov 2024 15:18:51 -0500 Subject: [PATCH 3/6] Separate spinner into partial --- apps/dashboard/app/views/files/_files_table.html.erb | 8 +------- apps/dashboard/app/views/files/_spinner.html.erb | 5 +++++ 2 files changed, 6 insertions(+), 7 deletions(-) create mode 100644 apps/dashboard/app/views/files/_spinner.html.erb diff --git a/apps/dashboard/app/views/files/_files_table.html.erb b/apps/dashboard/app/views/files/_files_table.html.erb index 267127768b..9e7e91010c 100755 --- a/apps/dashboard/app/views/files/_files_table.html.erb +++ b/apps/dashboard/app/views/files/_files_table.html.erb @@ -24,13 +24,7 @@ - - - + <%= render partial: "spinner" %> diff --git a/apps/dashboard/app/views/files/_spinner.html.erb b/apps/dashboard/app/views/files/_spinner.html.erb new file mode 100644 index 0000000000..848cc905e9 --- /dev/null +++ b/apps/dashboard/app/views/files/_spinner.html.erb @@ -0,0 +1,5 @@ +
+ +
\ No newline at end of file From fccde1fcd1b0cc03cc41c29e0438e00b4de0a743 Mon Sep 17 00:00:00 2001 From: ahmed-mgd Date: Thu, 21 Nov 2024 15:21:30 -0500 Subject: [PATCH 4/6] Improve logic for hiding/showing spinner --- apps/dashboard/app/javascript/files/data_table.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/apps/dashboard/app/javascript/files/data_table.js b/apps/dashboard/app/javascript/files/data_table.js index 427504feb0..7c4c841e2d 100644 --- a/apps/dashboard/app/javascript/files/data_table.js +++ b/apps/dashboard/app/javascript/files/data_table.js @@ -10,7 +10,7 @@ const EVENTNAME = { }; const CONTENTID = '#directory-contents'; -const BUSYID = '#tloading-spinner'; +const SPINNERID = '#tloading_spinner'; let table = null; @@ -270,8 +270,7 @@ class DataTable { async reloadTable(url) { var request_url = url || history.state.currentDirectoryUrl; - $(CONTENTID).hide(); - $(BUSYID).show(); + this.toggleSpinner(); try { const response = await fetch(request_url, { headers: { 'Accept': 'application/json' }, cache: 'no-store' }); @@ -303,8 +302,7 @@ class DataTable { } }); - $(BUSYID).hide(); - $(CONTENTID).show(); + this.toggleSpinner(); return result; } catch (e) { @@ -316,12 +314,19 @@ class DataTable { $(CONTENTID).trigger(SWAL_EVENTNAME.showError, eventData); $('#open-in-terminal-btn').addClass('disabled'); + + this.toggleSpinner() // Removed this as it was causing a JS Error and there is no reprocution from removing it. // return await Promise.reject(e); } } + toggleSpinner() { + document.querySelector(SPINNERID).classList.toggle('d-none'); + document.querySelector(CONTENTID).classList.toggle('d-none'); + } + updateDotFileVisibility() { this.reloadTable(); } From b008fac0e5e39e305aa90f333c030773ef5c23cf Mon Sep 17 00:00:00 2001 From: ahmed-mgd Date: Tue, 26 Nov 2024 13:45:53 -0500 Subject: [PATCH 5/6] Add sleep for deleting file test --- apps/dashboard/test/system/remote_files_test.rb | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/dashboard/test/system/remote_files_test.rb b/apps/dashboard/test/system/remote_files_test.rb index b2bf617c5a..399021af79 100644 --- a/apps/dashboard/test/system/remote_files_test.rb +++ b/apps/dashboard/test/system/remote_files_test.rb @@ -279,6 +279,9 @@ def setup find('#delete-btn').click find('button.swal2-confirm').click + # Allow time for file to be removed + sleep 1 + # verify app dir deleted according to UI assert_no_selector 'tbody a', exact_text: 'app', wait: 10 assert_no_selector 'tbody a', exact_text: 'foo.txt', wait: 10 From 40d8a100c1336747e3c82fdc9cb552da91f45431 Mon Sep 17 00:00:00 2001 From: ahmed-mgd Date: Tue, 26 Nov 2024 13:57:10 -0500 Subject: [PATCH 6/6] Fix padding --- apps/dashboard/app/views/files/_spinner.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/dashboard/app/views/files/_spinner.html.erb b/apps/dashboard/app/views/files/_spinner.html.erb index 848cc905e9..76a0a63519 100644 --- a/apps/dashboard/app/views/files/_spinner.html.erb +++ b/apps/dashboard/app/views/files/_spinner.html.erb @@ -1,4 +1,4 @@ -
+