Refactor the Package details view into a generic tabset system #164

Signed-off-by: Thomas Druez <[email protected]>

scanpipe/templates/scanpipe/base.html

@@ -25,6 +25,7 @@
       .is-height-auto {height: auto;}
       pre.log {color: #f1f1f1; background-color: #222; font-family: monospace;}
       pre.wrap {white-space: pre-wrap;}
+      pre.is-small {padding: 0.75rem 1rem;}
       .nexb-orange {color:#f7bf3c;}
       .bb-legend-item-hidden {text-decoration: line-through; opacity: 0.7!important;}
       .bb-chart .bb-chart-arcs .bb-chart-arcs-title {font-size: 15px !important; fill: #4a4a4a !important; text-transform: uppercase;}

scanpipe/templates/scanpipe/includes/breadcrumb.html

@@ -9,6 +9,8 @@
       {% endif %}
       {% if current %}
         <li class="is-active"><a href="#" aria-current="page">{{ current }}</a></li>
+      {% else %}
+        <li class="is-active"><a href="#" aria-current="page">{{ project.name }}</a></li>
       {% endif %}
     {% endif %}
   </ul>

scanpipe/templates/scanpipe/package_detail.html

@@ -19,45 +19,6 @@
       </nav>
     </section>
 
-    <div class="tabs is-boxed mx-5">
-      <ul>
-        <li class="is-active">
-          <a data-target="tab-details">
-            <span class="icon is-small"><i class="fas fa-info-circle"></i></span>
-            <span>Details</span>
-          </a>
-        </li>
-        <li>
-          <a data-target="tab-resources">
-            <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
-            <span>Resources</span>
-          </a>
-        </li>
-      </ul>
-    </div>
-
-    <section id="tab-details" class="tab-content is-active mx-5">
-      <dl>
-        {% for field, value in package_data.items %}
-          <dt class="has-text-weight-semibold">
-            {{ field }}
-          </dt>
-          <dd class="mb-4">
-            <pre>{{ value|default_if_none:'' }}</pre>
-          </dd>
-        {% endfor %}
-      </dl>
-    </section>
-
-    <section id="tab-resources" class="tab-content mx-5">
-      <ul>
-        {% for resource in object.resources %}
-          <li>
-            <a href="{{ resource.get_absolute_url }}">{{ resource }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </section>
-
+    {% include 'scanpipe/tabset/tabset.html' %}
   </div>
-{% endblock %}
+{% endblock %}

scanpipe/templates/scanpipe/tabset/tab_content_default.html

@@ -0,0 +1,10 @@
+<dl>
+  {% for field_name, value in tab_data.fields.items %}
+    <dt class="has-text-weight-semibold">
+      {{ field_name }}
+    </dt>
+    <dd class="mb-4">
+      <pre class="is-small">{{ value|default_if_none:''|urlize }}</pre>
+    </dd>
+  {% endfor %}
+</dl>

scanpipe/templates/scanpipe/tabset/tab_content_resources.html

@@ -0,0 +1,9 @@
+<div class="content">
+  <ul>
+    {% for resource in tab_data.fields.codebase_resources.all %}
+      <li>
+        <a href="{{ resource.get_absolute_url }}">{{ resource }}</a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>

scanpipe/templates/scanpipe/tabset/tabset.html

@@ -0,0 +1,24 @@
+<div class="tabs is-boxed mx-5">
+  <ul>
+    {% for label, tab_data in tabset_data.items %}
+      <li{% if forloop.first %} class="is-active"{% endif %}>
+        <a data-target="tab-{{ label }}">
+          {% if tab_data.icon_class %}
+            <span class="icon is-small"><i class="{{ tab_data.icon_class }}"></i></span>
+          {% endif %}
+          <span>{{ label|capfirst }}</span>
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
+
+{% for label, tab_data in tabset_data.items %}
+  <section id="tab-{{ label }}" class="tab-content mx-5 px-1 mb-3{% if forloop.first %} is-active{% endif %}">
+    {% if tab_data.template %}
+      {% include tab_data.template with tab_data=tab_data only %}
+    {% else %}
+      {% include 'scanpipe/tabset/tab_content_default.html' with tab_data=tab_data only %}
+    {% endif %}
+  </section>
+{% endfor %}

scanpipe/views.py

@@ -43,7 +43,6 @@
 
 from scancodeio.auth import ConditionalLoginRequired
 from scancodeio.auth import conditional_login_required
-from scanpipe.api.serializers import DiscoveredPackageSerializer
 from scanpipe.filters import ErrorFilterSet
 from scanpipe.filters import PackageFilterSet
 from scanpipe.filters import ProjectFilterSet
@@ -158,6 +157,40 @@ class ProjectViewMixin:
     slug_field = "uuid"
 
 
+class TabSetMixin:
+    tabset = {}
+
+    def get_tabset_data(self):
+        """
+        Returns the tabset data structure used in template rendering.
+        """
+        tabset_data = {}
+
+        for label, tab_definition in self.tabset.items():
+            tab_data = {
+                "icon_class": tab_definition.get("icon_class"),
+                "template": tab_definition.get("template"),
+            }
+
+            fields = tab_definition.get("fields")
+            fields_with_values = {}
+            for field_name in fields:
+                field_value = getattr(self.object, field_name, None)
+                if isinstance(field_value, list):
+                    field_value = "\n".join(field_value)
+                fields_with_values[field_name] = field_value
+            tab_data["fields"] = fields_with_values
+
+            tabset_data[label] = tab_data
+
+        return tabset_data
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["tabset_data"] = self.get_tabset_data()
+        return context
+
+
 class PaginatedFilterView(FilterView):
     """
     Adds a `url_params_without_page` value in the template context to include the
@@ -666,15 +699,63 @@ def get_context_data(self, **kwargs):
 
 
 class DiscoveredPackageDetailsView(
-    ConditionalLoginRequired, ProjectRelatedViewMixin, generic.DetailView
+    ConditionalLoginRequired,
+    ProjectRelatedViewMixin,
+    TabSetMixin,
+    PrefetchRelatedViewMixin,
+    generic.DetailView,
 ):
     model = DiscoveredPackage
     template_name = "scanpipe/package_detail.html"
-
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context["package_data"] = DiscoveredPackageSerializer(self.object).data
-        return context
+    prefetch_related = ["codebase_resources"]
+    tabset = {
+        "essentials": {
+            "fields": [
+                "purl",
+                "license_expression",
+                "primary_language",
+                "homepage_url",
+                "download_url",
+                "description",
+                "keywords",
+                "size",
+                "release_date",
+                "bug_tracking_url",
+                "code_view_url",
+                "vcs_url",
+                "sha1",
+                "md5",
+            ],
+            "icon_class": "fas fa-info-circle",
+        },
+        "terms": {
+            "fields": [
+                "license_expression",
+                "declared_license",
+                "copyright",
+                "notice_text",
+                "dependencies",
+                "manifest_path",
+                "contains_source_code",
+            ],
+            "icon_class": "fas fa-file-contract",
+        },
+        "resources": {
+            "fields": ["codebase_resources"],
+            "icon_class": "fas fa-folder-open",
+            "template": "scanpipe/tabset/tab_content_resources.html",
+        },
+        "others": {
+            "fields": [
+                "extra_data",
+                "missing_resources",
+                "modified_resources",
+                "package_uid",
+                "source_packages",
+            ],
+            "icon_class": "fas fa-plus-square",
+        },
+    }
 
 
 @conditional_login_required