hide & show this element by id

hide & show this element by id, rather than attempting to find the
closest '.loading-icon' element to more reliably hide this.

This also adds a hide & show APIs to the utils.js file. The comments
explain the same, but basically jQuery's hide() and show() API don't
work on elements that have Bootstrap display classes like d-flex.

apps/dashboard/app/javascript/path_selector/path_selector_data_table.js

@@ -1,4 +1,5 @@
 import { alert } from '../alert';
+import { hide, show } from "../utils";
 
 export class PathSelectorTable {
   _table = null;
@@ -87,7 +88,7 @@ export class PathSelectorTable {
   async reloadTable(url) {
     try {
       $(this.tableWrapper()).hide();
-      $(this).closest('.loading-icon').show();
+      show(`${this.tableId}_spinner`);
       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);
@@ -107,7 +108,7 @@ export class PathSelectorTable {
   }
 
   resetTable() {
-    $(this).closest(".loading-icon").hide();
+    hide(`${this.tableId}_spinner`);
     $(this.tableWrapper()).show();
     $('#forbidden-warning').addClass('d-none');
   }

apps/dashboard/app/javascript/utils.js

@@ -118,3 +118,23 @@ export function reportErrorForAnalytics(path, error) {
   // Fire and Forget
   fetch(analyticsUrl);
 }
+
+// helper method to hide an element. Note that jQuery's hide()
+// changes the inline style which may not do anything if the element
+// already has a bootstrap display class like d-flex.
+export function hide(id) {
+  const ele = document.getElementById(id);
+  if(ele !== null) {
+    ele.classList.add('d-none');
+  }
+}
+
+// helper method to show an element. Note that jQuery's show()
+// changes the inline style which may not do anything if the element
+// already has a bootstrap display class like d-flex.
+export function show(id) {
+  const ele = document.getElementById(id);
+  if(ele !== null) {
+    ele.classList.remove('d-none');
+  }
+}

apps/dashboard/app/views/shared/_path_selector_table.html.erb

@@ -45,7 +45,7 @@
                 <%= t('dashboard.batch_connect_sessions_path_selector_forbidden_error') %>
               </div>
 
-              <div class="d-flex justify-content-center">
+              <div class="d-flex justify-content-center" id="<%= table_id %>_spinner">
                 <div class="loading-icon spinner-border rem-5" role="status">
                   <span class="sr-only">Loading...</span> 
                 </div>