Removes Handlebars from file action menu code (#4070)

apps/dashboard/app/javascript/config.js

@@ -54,6 +54,11 @@ export function isBCDynamicJSEnabled() {
   return cfgData['bcDynamicJs'] == 'true'
 }
 
+export function downloadEnabled() {
+  const cfgData = configData();
+  return cfgData['downloadEnabled'] == 'true';
+}
+
 /*
   Will return null if xdmod integration is not enabled.
 */

apps/dashboard/app/javascript/files/data_table.js

@@ -1,6 +1,7 @@
 import Handlebars from 'handlebars';
 import {EVENTNAME as SWAL_EVENTNAME} from './sweet_alert.js';
 import { getGlobusLink, updateGlobusLink } from './globus.js';
+import { downloadEnabled } from '../config.js';
 export { CONTENTID, EVENTNAME };
 
 const EVENTNAME = {
@@ -377,10 +378,106 @@ class DataTable {
     }
 
     actionsBtnTemplate(options) {
-        let template_str = $('#actions-btn-template').html();
-        let compiled = Handlebars.compile(template_str);
-        let results = compiled(options);
-        return results;
+        // options: { row_index: meta.row,
+        //            file: row.type != 'd',
+        //            data: row }
+        const rowIndex = options.row_index;
+        const file = options.file;
+        const data = options.data;
+
+        // Create the button group container
+        const btnGroup = document.createElement('div');
+        btnGroup.classList.add('btn-group', 'actions-btn-group');
+
+        // Create the button
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.classList.add('actions-btn', 'btn', 'btn-outline-dark', 'btn-sm', 'dropdown-toggle');
+        button.setAttribute('data-bs-toggle', 'dropdown');
+        button.setAttribute('aria-haspopup', 'true');
+        button.setAttribute('aria-expanded', 'false');
+
+        // Create the icon inside the button
+        const icon = document.createElement('span');
+        icon.classList.add('fa', 'fa-ellipsis-v');
+        button.appendChild(icon);
+
+        // Append the button to the button group
+        btnGroup.appendChild(button);
+
+        // Create the dropdown menu
+        const dropdownMenu = document.createElement('ul');
+        dropdownMenu.classList.add('dropdown-menu');
+
+        // Check if this is a file and create View and Edit options
+        if (file) {
+            if (data.url) {
+                const viewItem = document.createElement('li');
+                const viewLink = document.createElement('a');
+                viewLink.href = data.url;
+                viewLink.classList.add('view-file', 'dropdown-item');
+                viewLink.target = '_blank';
+                viewLink.setAttribute('data-row-index', rowIndex);
+                viewLink.innerHTML = '<i class="fas fa-eye" aria-hidden="true"></i> View';
+                viewItem.appendChild(viewLink);
+                dropdownMenu.appendChild(viewItem);
+            }
+
+            if (data.edit_url) {
+                const editItem = document.createElement('li');
+                const editLink = document.createElement('a');
+                editLink.href = data.edit_url;
+                editLink.classList.add('edit-file', 'dropdown-item');
+                editLink.target = '_blank';
+                editLink.setAttribute('data-row-index', rowIndex);
+                editLink.innerHTML = '<i class="fas fa-edit" aria-hidden="true"></i> Edit';
+                editItem.appendChild(editLink);
+                dropdownMenu.appendChild(editItem);
+            }
+        }
+
+        // Create Rename option
+        const renameItem = document.createElement('li');
+        const renameLink = document.createElement('a');
+        renameLink.href = '#';
+        renameLink.classList.add('rename-file', 'dropdown-item');
+        renameLink.setAttribute('data-row-index', rowIndex);
+        renameLink.innerHTML = '<i class="fas fa-font" aria-hidden="true"></i> Rename';
+        renameItem.appendChild(renameLink);
+        dropdownMenu.appendChild(renameItem);
+
+        // Create Download option if it's enabled and the URL exists
+        if (downloadEnabled() && data.download_url) {
+            const downloadItem = document.createElement('li');
+            const downloadLink = document.createElement('a');
+            downloadLink.href = data.download_url;
+            downloadLink.classList.add('download-file', 'dropdown-item');
+            downloadLink.setAttribute('data-row-index', rowIndex);
+            downloadLink.innerHTML = '<i class="fas fa-download" aria-hidden="true"></i> Download';
+            downloadItem.appendChild(downloadLink);
+            dropdownMenu.appendChild(downloadItem);
+        }
+
+        // Add a divider between options
+        const dividerItem = document.createElement('li');
+        dividerItem.classList.add('dropdown-divider', 'mt-4');
+        dropdownMenu.appendChild(dividerItem);
+
+        // Create the Delete option
+        const deleteItem = document.createElement('li');
+        const deleteLink = document.createElement('a');
+        deleteLink.href = '#';
+        deleteLink.classList.add('delete-file', 'dropdown-item', 'text-danger');
+        deleteLink.setAttribute('data-row-index', rowIndex);
+        deleteLink.innerHTML = '<i class="fas fa-trash" aria-hidden="true"></i> Delete';
+        deleteItem.appendChild(deleteLink);
+        dropdownMenu.appendChild(deleteItem);
+
+        // Append the dropdown menu to the button group
+        btnGroup.appendChild(dropdownMenu);
+
+        // Return the button group element html as a string
+        return btnGroup.outerHTML;          
     }
 
     updateDatatablesStatus() {

apps/dashboard/app/javascript/files/file_ops.js

@@ -129,7 +129,7 @@ jQuery(function() {
     const eventData = {
         file: fileName,
     };
-
+    
     $(CONTENTID).trigger(EVENTNAME.renameFilePrompt, eventData);
 
   });

apps/dashboard/app/views/files/index.html.erb

@@ -24,7 +24,6 @@
   <div class="col-md-3">
     <%= render partial: "favorites" %>
     <%= render partial: "copy_move_popup" %>
-    <%= render partial: "file_action_menu" %>
     <%= render partial: "default_label_error_messages" %>
   </div>
   <%= render partial: "files_table" %>

apps/dashboard/app/views/layouts/_config.html.erb

@@ -1,6 +1,7 @@
 <!-- configuration options exposed to javascript -->
 <div hidden id="ood_config"
   data-max-file-size="<%= Configuration.file_upload_max %>"
+  data-download-enabled="<%= Configuration.download_enabled? %>"
   data-transfers-path="<%= transfers_path(format: "json") if respond_to?(:transfers_path) %>"
   data-root-path="<%= root_path %>"
   data-uppy-locale="<%= I18n.t('dashboard.uppy', :default => {}).to_json %>"