Add confirmation modal for the "Refresh Scan" button

Signed-off-by: tdruez <[email protected]>

Author: tdruez

component_catalog/templates/component_catalog/includes/scan_actions_list.html

@@ -22,7 +22,7 @@
   {% endif %}
   {% if scan.refresh_url %}
     <li class="list-inline-item"{% if not show_btn_label %} data-bs-toggle="tooltip"{% endif %} data-bs-title="Refresh Scan">
-      <a class="btn btn-outline-dark btn-sm" href="{{ scan.refresh_url }}">
+      <a class="btn btn-outline-dark btn-sm scan_refresh_link" href="#scan-refresh-modal" role="button" data-refresh-url="{{ scan.refresh_url }}" data-bs-toggle="modal">
         <i class="fa-solid fa-rotate-right"></i>{% if show_btn_label %} Refresh Scan{% endif %}
       </a>
     </li>

…_catalog/includes/scan_delete_modal.html …nt_catalog/modals/scan_delete_modal.htmlcomponent_catalog/templates/component_catalog/includes/scan_delete_modal.html renamed to component_catalog/templates/component_catalog/modals/scan_delete_modal.html component_catalog/templates/component_catalog/includes/scan_delete_modal.html renamed to component_catalog/templates/component_catalog/modals/scan_delete_modal.html

@@ -0,0 +1,22 @@
+{% load i18n %}
+<div id="scan-refresh-modal" class="modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Refresh {% trans 'Scan' %}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body bg-body-tertiary">
+        <p><strong>Are you sure you want to refresh this Scan?</strong></p>
+        <p>
+          All current data and results related to the Scan will be lost.<br>
+          If the Scan is in progress, it will be canceled.
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <a class="btn btn-success refresh-confirm" href="">Refresh Scan</a>
+      </div>
+    </div>
+  </div>
+</div>

component_catalog/templates/component_catalog/modals/scan_refresh_modal.html

@@ -29,7 +29,8 @@
   {% if has_add_package_permission %}
     {% include 'component_catalog/includes/add_package_modal.html' %}
   {% endif %}
-  {% include 'component_catalog/includes/scan_delete_modal.html' %}
+  {% include 'component_catalog/modals/scan_delete_modal.html' %}
+  {% include 'component_catalog/modals/scan_refresh_modal.html' %}
 {% endblock %}
 
 {% block javascripts %}
@@ -42,6 +43,12 @@
           document.querySelector('#scan-delete-modal a.delete-confirm').setAttribute('href', deleteUrl);
         });
       });
+      document.querySelectorAll('.scan_refresh_link').forEach(link => {
+        link.addEventListener('click', function() {
+          let refreshUrl = this.getAttribute('data-refresh-url');
+          document.querySelector('#scan-refresh-modal a.refresh-confirm').setAttribute('href', refreshUrl);
+        });
+      });
     });
   </script>
 {% endblock %}

component_catalog/templates/component_catalog/scan_list.html

@@ -39,7 +39,7 @@
               Created <span title="{{ scan.created_date }}">{{ scan.created_date|naturaltime }}</span>
             </div>
           </div>
-          <div class="col-2">
+          <div class="col-auto">
             {% include 'component_catalog/includes/scan_progress.html' with scan=scan only %}
           </div>
         </div>

component_catalog/templates/component_catalog/tables/scan_list_table.html

@@ -28,13 +28,20 @@
   {% if scan_summary_to_package_form %}
     {% include 'component_catalog/includes/scan_summary_to_package_modal.html' %}
   {% endif %}
-  {% include 'component_catalog/includes/scan_delete_modal.html' %}
+  {% include 'component_catalog/modals/scan_delete_modal.html' %}
+  {% include 'component_catalog/modals/scan_refresh_modal.html' %}
   <script>
     document.querySelectorAll('.scan_delete_link').forEach(link => {
       link.addEventListener('click', function() {
         let deleteUrl = this.getAttribute('data-delete-url');
         document.querySelector('#scan-delete-modal a.delete-confirm').setAttribute('href', deleteUrl);
       });
     });
+    document.querySelectorAll('.scan_refresh_link').forEach(link => {
+      link.addEventListener('click', function() {
+        let refreshUrl = this.getAttribute('data-refresh-url');
+        document.querySelector('#scan-refresh-modal a.refresh-confirm').setAttribute('href', refreshUrl);
+      });
+    });
   </script>
 {% endif %}