From 7e465e9a49aca9ca8e720248ed88e2ed8fa071ea Mon Sep 17 00:00:00 2001
From: HazelGrant <hrandquist@osc.edu>
Date: Mon, 30 Oct 2023 12:00:18 -0400
Subject: [PATCH 1/9] Adds loading icon to path selector UI on table refresh

---
 .../app/assets/stylesheets/common.scss        |  3 ++
 .../path_selector/path_selector_data_table.js |  4 ++-
 .../session_contexts/_path_selector.html.erb  | 29 ++++++++++---------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/apps/dashboard/app/assets/stylesheets/common.scss b/apps/dashboard/app/assets/stylesheets/common.scss
index 7c7138f373..5a83201b73 100644
--- a/apps/dashboard/app/assets/stylesheets/common.scss
+++ b/apps/dashboard/app/assets/stylesheets/common.scss
@@ -1,3 +1,6 @@
+#loading-icon {
+  text-align: center;
+}
 
 .clickable {
   cursor: pointer;
diff --git a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
index 39eabe8855..303e8859a5 100644
--- a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
+++ b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
@@ -83,6 +83,7 @@ export class PathSelectorTable {
 
   async reloadTable(url) {
     try {
+      $('#loading-icon').show();
       const response = await fetch(url, { headers: { 'Accept': 'application/json' }, cache: 'no-store' });
       const data = await this.dataFromJsonResponse(response);
       $(`#${this.breadcrumbId}`).html(data.path_selector_breadcrumbs_html);
@@ -90,6 +91,7 @@ export class PathSelectorTable {
       this._table.rows.add(data.files);
       this._table.draw();
       this.setLastVisited(data.path);
+      $('#loading-icon').hide();
     } catch (err) {
       console.log(err);
     }
@@ -141,7 +143,7 @@ export class PathSelectorTable {
   // note that this is storing the file system path, not the path of the URL 
   // i.e., '/home/annie' not '/pun/sys/dashboard/files/fs/home/annie'
   getLastVisited() {
-    const lastVisited = localStorage.getItem(this.storageKey());
+    const lastVisited = null; // localStorage.getItem(this.storageKey());
     if(lastVisited === null) {
       return this.initialDirectory;
     } else {
diff --git a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
index a8b0c46845..db7d80c947 100644
--- a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
+++ b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
@@ -39,20 +39,23 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <div class="modal-body">        
+      <div class="modal-body">       
         <div>
-            <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter">
-            </ol>
-            <table class="table table-hover table-condensed d-table w-100" id="<%= table_id %>">
-                <thead>
-                  <tr>
-                      <th>Type</th>
-                      <th>Name</th>
-                  </tr>
-                </thead>
-                <tbody>
-                </tbody>
-            </table>
+          <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter">
+          </ol>
+          <div id="loading-icon">
+            <span class="fa fa-regular fa-spinner fa-spin"></span> 
+          </div>
+          <table class="table table-hover table-condensed d-table w-100" id="<%= table_id %>">
+            <thead>
+              <tr>
+                <th>Type</th>
+                <th>Name</th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
         </div>
       </div>
       <div class="modal-footer sticky-footer">

From 4c6b986df0509a486db1890c4201ecff202f8ab8 Mon Sep 17 00:00:00 2001
From: HazelGrant <hrandquist@osc.edu>
Date: Mon, 30 Oct 2023 12:15:06 -0400
Subject: [PATCH 2/9] Removes lastVisted reset, which was a development tool

---
 .../app/javascript/path_selector/path_selector_data_table.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
index 303e8859a5..a6366bd763 100644
--- a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
+++ b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
@@ -143,7 +143,7 @@ export class PathSelectorTable {
   // note that this is storing the file system path, not the path of the URL 
   // i.e., '/home/annie' not '/pun/sys/dashboard/files/fs/home/annie'
   getLastVisited() {
-    const lastVisited = null; // localStorage.getItem(this.storageKey());
+    const lastVisited = localStorage.getItem(this.storageKey());
     if(lastVisited === null) {
       return this.initialDirectory;
     } else {

From 81cb9f9223e14df0137f589d5f05dcde940882af Mon Sep 17 00:00:00 2001
From: HazelGrant <hrandquist@osc.edu>
Date: Mon, 30 Oct 2023 14:38:43 -0400
Subject: [PATCH 3/9] Hides table on table refresh; uses bootstrap spinner
 instead of fa

---
 .../app/javascript/path_selector/path_selector_data_table.js  | 4 +++-
 .../batch_connect/session_contexts/_path_selector.html.erb    | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
index a6366bd763..87b5431424 100644
--- a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
+++ b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
@@ -83,15 +83,17 @@ export class PathSelectorTable {
 
   async reloadTable(url) {
     try {
+      $(`#${this.tableId}_wrapper`).hide();
       $('#loading-icon').show();
       const response = await fetch(url, { headers: { 'Accept': 'application/json' }, cache: 'no-store' });
       const data = await this.dataFromJsonResponse(response);
       $(`#${this.breadcrumbId}`).html(data.path_selector_breadcrumbs_html);
       this._table.clear();
       this._table.rows.add(data.files);
-      this._table.draw();
       this.setLastVisited(data.path);
+      this._table.draw();
       $('#loading-icon').hide();
+      $(`#${this.tableId}_wrapper`).show();
     } catch (err) {
       console.log(err);
     }
diff --git a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
index db7d80c947..2d5cc5b82a 100644
--- a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
+++ b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
@@ -43,8 +43,8 @@
         <div>
           <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter">
           </ol>
-          <div id="loading-icon">
-            <span class="fa fa-regular fa-spinner fa-spin"></span> 
+          <div class="spinner-border" role="status" id="loading-icon">
+            <span class="sr-only">Loading...</span> 
           </div>
           <table class="table table-hover table-condensed d-table w-100" id="<%= table_id %>">
             <thead>

From 6ff018cd2a942153a07ea26fe8725c6d72295a05 Mon Sep 17 00:00:00 2001
From: HazelGrant <hrandquist@osc.edu>
Date: Mon, 30 Oct 2023 14:45:42 -0400
Subject: [PATCH 4/9] Ensure table is still navigatable if there's an error on
 refresh

---
 .../app/javascript/path_selector/path_selector_data_table.js  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
index 87b5431424..024f853225 100644
--- a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
+++ b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
@@ -95,6 +95,8 @@ export class PathSelectorTable {
       $('#loading-icon').hide();
       $(`#${this.tableId}_wrapper`).show();
     } catch (err) {
+      $('#loading-icon').hide();
+      $(`#${this.tableId}_wrapper`).show();
       console.log(err);
     }
   }
@@ -145,7 +147,7 @@ export class PathSelectorTable {
   // note that this is storing the file system path, not the path of the URL 
   // i.e., '/home/annie' not '/pun/sys/dashboard/files/fs/home/annie'
   getLastVisited() {
-    const lastVisited = localStorage.getItem(this.storageKey());
+    const lastVisited = null; // localStorage.getItem(this.storageKey());
     if(lastVisited === null) {
       return this.initialDirectory;
     } else {

From 3c5814f9dc491098be2eac4296fd77c67e2e4ca5 Mon Sep 17 00:00:00 2001
From: HazelGrant <hrandquist@osc.edu>
Date: Mon, 30 Oct 2023 14:46:51 -0400
Subject: [PATCH 5/9] Removes development cruft

---
 .../app/javascript/path_selector/path_selector_data_table.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
index 024f853225..580a1de428 100644
--- a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
+++ b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js
@@ -147,7 +147,7 @@ export class PathSelectorTable {
   // note that this is storing the file system path, not the path of the URL 
   // i.e., '/home/annie' not '/pun/sys/dashboard/files/fs/home/annie'
   getLastVisited() {
-    const lastVisited = null; // localStorage.getItem(this.storageKey());
+    const lastVisited = localStorage.getItem(this.storageKey());
     if(lastVisited === null) {
       return this.initialDirectory;
     } else {

From 7fb7063429512ca603cdfd348931e813fbf2f132 Mon Sep 17 00:00:00 2001
From: HazelGrant <hrandquist@osc.edu>
Date: Mon, 30 Oct 2023 15:24:08 -0400
Subject: [PATCH 6/9] Removes #loading-icon css specification, adds classes to
 center loading spinner

---
 apps/dashboard/app/assets/stylesheets/common.scss           | 4 ----
 .../batch_connect/session_contexts/_path_selector.html.erb  | 6 ++++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/app/assets/stylesheets/common.scss b/apps/dashboard/app/assets/stylesheets/common.scss
index 5a83201b73..f2a798bce2 100644
--- a/apps/dashboard/app/assets/stylesheets/common.scss
+++ b/apps/dashboard/app/assets/stylesheets/common.scss
@@ -1,7 +1,3 @@
-#loading-icon {
-  text-align: center;
-}
-
 .clickable {
   cursor: pointer;
 }
diff --git a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
index 2d5cc5b82a..89be55813f 100644
--- a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
+++ b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
@@ -43,8 +43,10 @@
         <div>
           <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter">
           </ol>
-          <div class="spinner-border" role="status" id="loading-icon">
-            <span class="sr-only">Loading...</span> 
+          <div class="d-flex justify-content-center">
+            <div class="spinner-border spinner-grow spinner-grow-sm" role="status" id="loading-icon">
+              <span class="sr-only">Loading...</span> 
+            </div>
           </div>
           <table class="table table-hover table-condensed d-table w-100" id="<%= table_id %>">
             <thead>

From 4b8dcee9eb1afda31c4ad7233125b761daa197fa Mon Sep 17 00:00:00 2001
From: HazelGrant <hrandquist@osc.edu>
Date: Mon, 30 Oct 2023 15:26:03 -0400
Subject: [PATCH 7/9] Adds style to increase size of loading spinner on table
 refresh

Recommended course of action to change size by bootstrap :/
---
 .../batch_connect/session_contexts/_path_selector.html.erb      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
index 89be55813f..12ef6a0849 100644
--- a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
+++ b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
@@ -44,7 +44,7 @@
           <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter">
           </ol>
           <div class="d-flex justify-content-center">
-            <div class="spinner-border spinner-grow spinner-grow-sm" role="status" id="loading-icon">
+            <div id="loading-icon" class="spinner-border spinner-grow spinner-grow-sm" role="status" style="width: 5rem;height: 5rem;">
               <span class="sr-only">Loading...</span> 
             </div>
           </div>

From 8501272e01b2969728d88749df1a1b415e224bc8 Mon Sep 17 00:00:00 2001
From: HazelGrant <hrandquist@osc.edu>
Date: Mon, 30 Oct 2023 15:45:15 -0400
Subject: [PATCH 8/9] Removes spinner-grow class & adds .5-rem class

---
 apps/dashboard/app/assets/stylesheets/common.scss            | 5 +++++
 .../batch_connect/session_contexts/_path_selector.html.erb   | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/app/assets/stylesheets/common.scss b/apps/dashboard/app/assets/stylesheets/common.scss
index f2a798bce2..3c0bc275af 100644
--- a/apps/dashboard/app/assets/stylesheets/common.scss
+++ b/apps/dashboard/app/assets/stylesheets/common.scss
@@ -20,3 +20,8 @@
   z-index: 1100;
   background-color: inherit;
 }
+
+.5-rem {
+  width: 5rem;
+  height: 5rem;
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
index 12ef6a0849..cb7bb71517 100644
--- a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
+++ b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
@@ -44,7 +44,7 @@
           <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter">
           </ol>
           <div class="d-flex justify-content-center">
-            <div id="loading-icon" class="spinner-border spinner-grow spinner-grow-sm" role="status" style="width: 5rem;height: 5rem;">
+            <div id="loading-icon" class="spinner-border 5-rem" role="status">
               <span class="sr-only">Loading...</span> 
             </div>
           </div>

From 99de46583de7a0ff19e6244c5a8812ad474fcc99 Mon Sep 17 00:00:00 2001
From: HazelGrant <hrandquist@osc.edu>
Date: Mon, 30 Oct 2023 16:06:17 -0400
Subject: [PATCH 9/9] Fixes css selector class

---
 apps/dashboard/app/assets/stylesheets/common.scss               | 2 +-
 .../batch_connect/session_contexts/_path_selector.html.erb      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/app/assets/stylesheets/common.scss b/apps/dashboard/app/assets/stylesheets/common.scss
index 3c0bc275af..211142a287 100644
--- a/apps/dashboard/app/assets/stylesheets/common.scss
+++ b/apps/dashboard/app/assets/stylesheets/common.scss
@@ -21,7 +21,7 @@
   background-color: inherit;
 }
 
-.5-rem {
+.rem-5 {
   width: 5rem;
   height: 5rem;
 }
\ No newline at end of file
diff --git a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
index cb7bb71517..955af04b78 100644
--- a/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
+++ b/apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb
@@ -44,7 +44,7 @@
           <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter">
           </ol>
           <div class="d-flex justify-content-center">
-            <div id="loading-icon" class="spinner-border 5-rem" role="status">
+            <div id="loading-icon" class="spinner-border rem-5" role="status">
               <span class="sr-only">Loading...</span> 
             </div>
           </div>