Refine UI and consistency around Scan actions

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

Author: tdruez

component_catalog/templates/component_catalog/includes/scan_progress.html

@@ -1,11 +1,26 @@
 <strong class="ms-1">{{ scan.runs.0.status|title }}</strong>
 {% include 'component_catalog/includes/scan_status.html' with status=scan.runs.0.status only %}
 
-<div class="text-center">
+<ul class="list-inline mt-2 mb-0 text-center">
+  {% if scan.view_url %}
+    <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-title="View Scan results">
+      <a class="btn btn-outline-dark btn-sm" href="{{ scan.view_url }}" target="_blank">
+        <i class="far fa-file-alt"></i>
+      </a>
+    </li>
+  {% endif %}
   {% if scan.download_result_url %}
-    <a class="btn btn-outline-dark btn-sm mt-2" href="{{ scan.download_result_url }}" target="_blank"><i class="fas fa-download"></i> Results</a>
+    <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-title="Download Scan results">
+      <a class="btn btn-outline-dark btn-sm" href="{{ scan.download_result_url }}" target="_blank">
+        <i class="fas fa-download"></i>
+      </a>
+    </li>
   {% endif %}
   {% if scan.delete_url %}
-    <a class="btn btn-outline-danger btn-sm mt-2 scan_delete_link" href="#scan-delete-modal" role="button" data-delete-url="{{ scan.delete_url }}" title="Delete" data-bs-toggle="modal"><i class="far fa-trash-alt"></i></a>
+    <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-title="Delete Scan">
+      <a class="btn btn-outline-danger btn-sm scan_delete_link" href="#scan-delete-modal" role="button" data-delete-url="{{ scan.delete_url }}" data-bs-toggle="modal">
+        <i class="far fa-trash-alt"></i>
+      </a>
+    </li>
   {% endif %}
-</div>
+</ul>

…nt_catalog/includes/scan_list_table.html …nent_catalog/tables/scan_list_table.htmlcomponent_catalog/templates/component_catalog/includes/scan_list_table.html renamed to component_catalog/templates/component_catalog/tables/scan_list_table.html component_catalog/templates/component_catalog/includes/scan_list_table.html renamed to component_catalog/templates/component_catalog/tables/scan_list_table.html

@@ -21,7 +21,7 @@
             {% if scan.package %}
               <i class="fas fa-archive"></i>
               <strong style="font-size: 115%;">
-                <a href="{{ scan.package.details_url }}#scan">{{ scan.package }}</a>
+                <a href="{{ scan.view_url }}">{{ scan.package }}</a>
               </strong>
             {% else %}
               <i>Package not found in DejaCode</i>
@@ -39,7 +39,7 @@
               Created <span title="{{ scan.created_date }}">{{ scan.created_date|naturaltime }}</span>
             </div>
           </div>
-          <div class="col-auto" style="width: 200px;">
+          <div class="col-2">
             {% include 'component_catalog/includes/scan_progress.html' with scan=scan only %}
           </div>
         </div>

component_catalog/templates/component_catalog/tabs/tab_scan.html

@@ -5,10 +5,10 @@
     <p class="m-0">As package scanning is enabled in your Dataspace, you can submit this package download URL to ScanCode.io for scanning.</p>
   </div>
   <div class="container mt-3">
-    <div class="row justify-content-md-center">
-      <div class="col-4 d-grid">
-        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#scan-package-modal">Submit Scan Request</button>
-      </div>
+    <div class="text-center">
+      <button type="button" class="btn btn-success px-5" data-bs-toggle="modal" data-bs-target="#scan-package-modal">
+        <i class="fas fa-barcode"></i> Submit Scan Request
+      </button>
     </div>
   </div>
   {% include 'component_catalog/includes/scan_package_modal.html' %}

component_catalog/tests/test_views.py

@@ -2231,7 +2231,7 @@ def test_package_details_view_scan_tab_scan_success(
         self.assertContains(response, expected_other_languages, html=True)
         self.assertContains(response, "Scan Summary")
         self.assertContains(response, "Set values to Package")
-        self.assertContains(response, "Download Scan data")
+        self.assertContains(response, "Download Scan results")
 
         scan_data_as_file_url = reverse(
             "component_catalog:scan_data_as_file",

component_catalog/views.py

@@ -1675,7 +1675,7 @@ class ScanListView(
 ):
     paginate_by = 50
     template_name = "component_catalog/scan_list.html"
-    template_list_table = "component_catalog/includes/scan_list_table.html"
+    template_list_table = "component_catalog/tables/scan_list_table.html"
 
     def dispatch(self, request, *args, **kwargs):
         user = self.request.user
@@ -1720,6 +1720,7 @@ def get_context_data(self, **kwargs):
             package_download_url = get_package_download_url(scan)
             package = packages_by_url.get(package_download_url)
             scan["package"] = package
+            scan["view_url"] = f"{package.details_url}#scan" if package else None
             scan["download_result_url"] = get_scan_results_as_file_url(scan)
             scan["created_date"] = parse_datetime(scan.get("created_date"))
             scan["delete_url"] = reverse("component_catalog:scan_delete", args=[scan.get("uuid")])
@@ -2405,7 +2406,7 @@ def scan_status_fields(self, scan):
                 "icon_class": "fas fa-download",
             }
             scan_status_fields.append(
-                ("Download Scan data", field_context, None, "includes/field_button.html")
+                ("Download Scan results", field_context, None, "includes/field_button.html")
             )
 
         return scan_status_fields

product_portfolio/templates/product_portfolio/tabs/tab_inventory.html

@@ -83,7 +83,7 @@
         </th>
       {% endif %}
       {% if display_scan_features %}
-        <th style="width: 90px;">
+        <th style="width: 95px;">
           {% trans 'Scan' %}
         </th>
       {% endif %}