YDA-5894: add tooltip to download buttons if checksum report is unava…

…ilable
UtrechtUniversity · Aug 15, 2024 · 01a3c2a · 01a3c2a
1 parent 9e4a83a
commit 01a3c2a
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 37 deletions.
diff --git a/deposit/static/deposit/js/data.js b/deposit/static/deposit/js/data.js
@@ -16,6 +16,8 @@ const hasReadRights = true
 let uploadFolder = false
 let folderCreateTooltip
 let uploadMenuTooltip
+let downloadChecksumReportTextTooltip
+let downloadChecksumReportCSVTooltip
 
 $(function () {
   // Canonicalize path somewhat, for convenience.
@@ -158,8 +160,6 @@ $(function () {
 
     $('#showChecksumReport .collection').text(folder)
     $('#showChecksumReport .modal-body #checksumReport').html('')
-    $('#showChecksumReport .modal-footer .download-report-text').addClass('d-none')
-    $('#showChecksumReport .modal-footer .download-report-csv').addClass('d-none')
     $('#showChecksumReport .modal-footer .download-report-text').attr('href', downloadUrl + '&format=text')
     $('#showChecksumReport .modal-footer .download-report-csv').attr('href', downloadUrl + '&format=csv')
 
@@ -168,17 +168,30 @@ $(function () {
       let table = '<table class="table table-striped"><tbody>'
 
       table += '<thead><tr><th>Filename</th><th>Size</th><th>Checksum</th></tr></thead>'
-      $.each(data, function (index, obj) {
-        if (data.length > 0) {
+      if (data.length > 0) {
+        $.each(data, function (index, obj) {
           table += `<tr>
-                    <td>${obj.name}</td>
-                    <td>${obj.size}</td>
-                    <td>${obj.checksum}</td>
-                </tr>`
-          $('#showChecksumReport .modal-footer .download-report-text').removeClass('d-none')
-          $('#showChecksumReport .modal-footer .download-report-csv').removeClass('d-none')
+                      <td>${obj.name}</td>
+                      <td>${obj.size}</td>
+                      <td>${obj.checksum}</td>
+                  </tr>`
+        })
+        if (downloadChecksumReportTextTooltip) {
+          downloadChecksumReportTextTooltip.disable()
         }
-      })
+        if (downloadChecksumReportCSVTooltip) {
+          downloadChecksumReportCSVTooltip.disable()
+        }
+      } else {
+        $('#showChecksumReport .modal-footer .download-report-text').removeAttr('href')
+        $('#showChecksumReport .modal-footer .download-report-csv').removeAttr('href')
+        if (downloadChecksumReportTextTooltip) {
+          downloadChecksumReportTextTooltip.enable()
+        }
+        if (downloadChecksumReportCSVTooltip) {
+          downloadChecksumReportCSVTooltip.enable()
+        }
+      }
       table += '</tbody></table>'
 
       $('#showChecksumReport .modal-body #checksumReport').html(table)
@@ -412,6 +425,14 @@ function createTooltips () {
   const uploadMenu = $('button#uploadMenu').parent()
   uploadMenuTooltip = new bootstrap.Tooltip(uploadMenu)
   uploadMenuTooltip.disable()
+
+  const downloadChecksumReportText = $('.download-report-text').parent()
+  downloadChecksumReportTextTooltip = new bootstrap.Tooltip(downloadChecksumReportText)
+  downloadChecksumReportTextTooltip.disable()
+
+  const downloadChecksumReportCSV = $('.download-report-csv').parent()
+  downloadChecksumReportCSVTooltip = new bootstrap.Tooltip(downloadChecksumReportCSV)
+  downloadChecksumReportCSVTooltip.disable()
 }
 
 function secureFilename (file) {

diff --git a/deposit/templates/deposit/data.html b/deposit/templates/deposit/data.html
@@ -371,8 +371,12 @@ <h5 class="modal-title">
                 <div id="checksumReport"></div>
             </div>
             <div class="modal-footer">
-                <a href="#" class="btn btn-outline-secondary download-report-text">Download as text</a>
-                <a href="#" class="btn btn-outline-secondary download-report-csv">Download as CSV</a>
+                <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="No checksum report because folder is empty.">
+                    <a href="#" class="btn btn-outline-secondary download-report-text">Download as text</a>
+                </span>
+                <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="No checksum report because folder is empty.">
+                    <a href="#" class="btn btn-outline-secondary download-report-csv">Download as CSV</a>
+                </span>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
             </div>
         </div>

diff --git a/research/static/research/js/research.js b/research/static/research/js/research.js
@@ -13,6 +13,8 @@ $(document).ajaxSend(function (e, request, settings) {
 let preservableFormatsLists = null
 let folderCreateTooltip
 let uploadMenuTooltip
+let downloadChecksumReportTextTooltip
+let downloadChecksumReportCSVTooltip
 let currentFolder
 let filenames = []
 let hasReadRights = true
@@ -184,8 +186,6 @@ $(function () {
 
     $('#showChecksumReport .collection').text(folder)
     $('#showChecksumReport .modal-body #checksumReport').html('')
-    $('#showChecksumReport .modal-footer .download-report-text').addClass('d-none')
-    $('#showChecksumReport .modal-footer .download-report-csv').addClass('d-none')
     $('#showChecksumReport .modal-footer .download-report-text').attr('href', downloadUrl + '&format=text')
     $('#showChecksumReport .modal-footer .download-report-csv').attr('href', downloadUrl + '&format=csv')
 
@@ -194,17 +194,30 @@ $(function () {
       let table = '<table class="table table-striped"><tbody>'
 
       table += '<thead><tr><th>Filename</th><th>Size</th><th>Checksum</th></tr></thead>'
-      $.each(data, function (index, obj) {
-        if (data.length > 0) {
+      if (data.length > 0) {
+        $.each(data, function (index, obj) {
           table += `<tr>
                       <td>${obj.name}</td>
                       <td>${obj.size}</td>
                       <td>${obj.checksum}</td>
                   </tr>`
-          $('#showChecksumReport .modal-footer .download-report-text').removeClass('d-none')
-          $('#showChecksumReport .modal-footer .download-report-csv').removeClass('d-none')
+        })
+        if (downloadChecksumReportTextTooltip) {
+          downloadChecksumReportTextTooltip.disable()
         }
-      })
+        if (downloadChecksumReportCSVTooltip) {
+          downloadChecksumReportCSVTooltip.disable()
+        }
+      } else {
+        $('#showChecksumReport .modal-footer .download-report-text').removeAttr('href')
+        $('#showChecksumReport .modal-footer .download-report-csv').removeAttr('href')
+        if (downloadChecksumReportTextTooltip) {
+          downloadChecksumReportTextTooltip.enable()
+        }
+        if (downloadChecksumReportCSVTooltip) {
+          downloadChecksumReportCSVTooltip.enable()
+        }
+      }
       table += '</tbody></table>'
 
       $('#showChecksumReport .modal-body #checksumReport').html(table)
@@ -581,6 +594,14 @@ function createTooltips () {
   const uploadMenu = $('button#uploadMenu').parent()
   uploadMenuTooltip = new bootstrap.Tooltip(uploadMenu)
   uploadMenuTooltip.disable()
+
+  const downloadChecksumReportText = $('.download-report-text').parent()
+  downloadChecksumReportTextTooltip = new bootstrap.Tooltip(downloadChecksumReportText)
+  downloadChecksumReportTextTooltip.disable()
+
+  const downloadChecksumReportCSV = $('.download-report-csv').parent()
+  downloadChecksumReportCSVTooltip = new bootstrap.Tooltip(downloadChecksumReportCSV)
+  downloadChecksumReportCSVTooltip.disable()
 }
 
 function secureFilename (file) {

diff --git a/research/templates/research/browse.html b/research/templates/research/browse.html
@@ -68,8 +68,12 @@ <h5 class="modal-title">
                 <div id="checksumReport"></div>
             </div>
             <div class="modal-footer">
-                <a href="#" class="btn btn-outline-secondary download-report-text">Download as text</a>
-                <a href="#" class="btn btn-outline-secondary download-report-csv">Download as CSV</a>
+                <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="No checksum report because folder is empty.">
+                    <a href="#" class="btn btn-outline-secondary download-report-text">Download as text</a>
+                </span>
+                <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="No checksum report because folder is empty.">
+                    <a href="#" class="btn btn-outline-secondary download-report-csv">Download as CSV</a>
+                </span>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
             </div>
         </div>

diff --git a/vault/static/vault/js/vault.js b/vault/static/vault/js/vault.js
@@ -15,8 +15,12 @@ let currentFolder
 let dataPackage = null
 let hasReadRights = true
 let researchGroupAccess = true
+let downloadChecksumReportTextTooltip
+let downloadChecksumReportCSVTooltip
 
 $(function () {
+  createTooltips()
+
   // Extract current location from query string (default to '').
   currentFolder = decodeURIComponent((/(?:\?|&)dir=([^&]*)/
     .exec(window.location.search) || [0, ''])[1])
@@ -42,15 +46,12 @@ $(function () {
     showMetadataForm($(this).attr('data-path'))
   })
 
-  // Show checksum report
   $('body').on('click', 'a.action-show-checksum-report', function () {
     const folder = $(this).attr('data-folder')
     const downloadUrl = 'browse/download_checksum_report?path=' + encodeURIComponent(folder)
 
     $('#showChecksumReport .collection').text(folder)
     $('#showChecksumReport .modal-body #checksumReport').html('')
-    $('#showChecksumReport .modal-footer .download-report-text').addClass('d-none')
-    $('#showChecksumReport .modal-footer .download-report-csv').addClass('d-none')
     $('#showChecksumReport .modal-footer .download-report-text').attr('href', downloadUrl + '&format=text')
     $('#showChecksumReport .modal-footer .download-report-csv').attr('href', downloadUrl + '&format=csv')
 
@@ -59,17 +60,30 @@ $(function () {
       let table = '<table class="table table-striped"><tbody>'
 
       table += '<thead><tr><th>Filename</th><th>Size</th><th>Checksum</th></tr></thead>'
-      $.each(data, function (index, obj) {
-        if (data.length > 0) {
+      if (data.length > 0) {
+        $.each(data, function (index, obj) {
           table += `<tr>
-                    <td>${obj.name}</td>
-                    <td>${obj.size}</td>
-                    <td>${obj.checksum}</td>
-                </tr>`
-          $('#showChecksumReport .modal-footer .download-report-text').removeClass('d-none')
-          $('#showChecksumReport .modal-footer .download-report-csv').removeClass('d-none')
+                      <td>${obj.name}</td>
+                      <td>${obj.size}</td>
+                      <td>${obj.checksum}</td>
+                  </tr>`
+        })
+        if (downloadChecksumReportTextTooltip) {
+          downloadChecksumReportTextTooltip.disable()
         }
-      })
+        if (downloadChecksumReportCSVTooltip) {
+          downloadChecksumReportCSVTooltip.disable()
+        }
+      } else {
+        $('#showChecksumReport .modal-footer .download-report-text').removeAttr('href')
+        $('#showChecksumReport .modal-footer .download-report-csv').removeAttr('href')
+        if (downloadChecksumReportTextTooltip) {
+          downloadChecksumReportTextTooltip.enable()
+        }
+        if (downloadChecksumReportCSVTooltip) {
+          downloadChecksumReportCSVTooltip.enable()
+        }
+      }
       table += '</tbody></table>'
 
       $('#showChecksumReport .modal-body #checksumReport').html(table)
@@ -306,6 +320,16 @@ $(function () {
   })
 })
 
+function createTooltips () {
+  const downloadChecksumReportText = $('.download-report-text').parent()
+  downloadChecksumReportTextTooltip = new bootstrap.Tooltip(downloadChecksumReportText)
+  downloadChecksumReportTextTooltip.disable()
+
+  const downloadChecksumReportCSV = $('.download-report-csv').parent()
+  downloadChecksumReportCSVTooltip = new bootstrap.Tooltip(downloadChecksumReportCSV)
+  downloadChecksumReportCSVTooltip.disable()
+}
+
 function changeBrowserUrl (path) {
   let url = window.location.pathname
   if (typeof path !== 'undefined') {
@@ -880,7 +904,7 @@ function topInformation (dir, showAlert, rebuildFileBrowser = false) {
         $('.top-info-buttons').show()
 
         // Trigger tooltips.
-        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]:not(.download-report-text):not(.download-report-csv)')
         const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) // eslint-disable-line no-unused-vars
       }
       if (rebuildFileBrowser) {

diff --git a/vault/templates/vault/browse.html b/vault/templates/vault/browse.html
@@ -189,8 +189,12 @@ <h5 class="modal-title">
                 <div id="checksumReport"></div>
             </div>
             <div class="modal-footer">
-                <a href="#" class="btn btn-outline-secondary download-report-text">Download as text</a>
-                <a href="#" class="btn btn-outline-secondary download-report-csv">Download as CSV</a>
+                <span class="d-inline-block download-report-text" tabindex="0" data-bs-toggle="tooltip" title="No checksum report because folder is empty.">
+                    <a href="#" class="btn btn-outline-secondary download-report-text">Download as text</a>
+                </span>
+                <span class="d-inline-block download-report-csv" tabindex="0" data-bs-toggle="tooltip" title="No checksum report because folder is empty.">
+                    <a href="#" class="btn btn-outline-secondary download-report-csv">Download as CSV</a>
+                </span>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
             </div>
         </div>